/* Detection test page layout (on top of base.css). */
.detect { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; padding: 16px; min-height: calc(100vh - 56px); }
.board-box { min-height: 0; display: flex; align-items: center; justify-content: center; }
.detect #board { width: 100%; height: 100%; max-height: calc(100vh - 90px); aspect-ratio: 1; }
.detect .side { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.detect .card h2 { display: flex; justify-content: space-between; align-items: center; }
.detect .row { margin: 0 0 6px; gap: 6px; }
.detect input { flex: 1; min-width: 0; }
.small-btn { padding: 2px 8px; font-size: 12px; }
.detect .visit { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.detect .slot { text-align: center; min-height: 58px; }
.total { margin-top: 8px; text-align: right; color: var(--dim); }
.total b { color: var(--text); font-size: 20px; }
.hint { color: var(--wait); font-size: 12px; margin: 4px 0 0; }
.code { font-family: ui-monospace, monospace; font-size: 20px; letter-spacing: .12em; color: var(--accent); }
.detect .log li.dart { color: var(--text); } .detect .log li.fix { color: var(--wait); } .detect .log li.takeout { color: var(--accent); } .detect .log li.status { color: var(--dim); }
.raw { max-height: 160px; overflow: auto; font-size: 11px; background: #0c0e10; padding: 6px; border-radius: 4px; white-space: pre-wrap; word-break: break-all; }
p { margin: 4px 0; }
@media (max-width: 820px) { .detect { grid-template-columns: 1fr; } .detect #board { max-height: 70vw; } }