body { margin: 3%; background: #10151d; color: #f4f6fa; font: 28px/1.35 Arial, sans-serif; }
h1 { margin: 0; font-size: 44px; }
h2 { font-size: 32px; }
p { margin: 12px 0; }
button { margin: 4px 12px 16px 0; padding: 12px 18px; border: 3px solid #afbdd0; border-radius: 4px; background: #233248; color: white; font: inherit; cursor: pointer; }
button:focus { outline: 5px solid #ffe178; outline-offset: 2px; }
button:disabled { opacity: .5; cursor: default; }
#show-qr { background: #24513a; border-color: #89f0a8; font-weight: bold; }
#qr-panel { position: fixed; z-index: 10; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box; padding: 16px; overflow: auto; background: #10151d; text-align: center; }
#qr-panel h2 { margin: 0; }
#qr-panel p { font-size: 22px; margin: 8px 0; }
#close-qr { position: absolute; top: 8px; right: 8px; font-size: 22px; }
#qr-image { display: block; margin: 12px auto; max-width: 100%; background: #fff; }
.phone-report { font-size: 18px; margin: 20px; }
.phone-report h1 { font-size: 32px; }
.phone-report pre { font: 16px/1.5 monospace; }
table { width: 68%; border-collapse: collapse; }
th, td { padding: 10px 12px; border-bottom: 1px solid #566170; text-align: left; vertical-align: top; }
th { width: 49%; font-weight: normal; }
td { font-weight: bold; }
.pass { color: #89f0a8; }
.fail { color: #ffaaa4; }
.unknown { color: #ffe178; }
.preview { float: right; width: 29%; }
video { width: 100%; background: #000; min-height: 180px; }
.preview p, .note { font-size: 23px; }
.note { clear: both; padding-top: 12px; }
pre { padding: 16px; border: 1px solid #566170; font: 20px/1.5 monospace; white-space: pre-wrap; word-wrap: break-word; }
@media (max-width: 900px) {
  body { font-size: 24px; }
  h1 { font-size: 36px; }
  table { width: 100%; }
  .preview { float: none; width: 320px; max-width: 100%; }
}