/* H5 直播测试页：适配手机安全区域，沿用小程序的蓝色主色与浅色卡片。 */
:root { color-scheme: light; font: 15px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif; color: #202124; background: #f3f3f3; }
* { box-sizing: border-box; }
body { margin: 0; }
main { width: min(100%, 780px); margin: auto; padding: 22px 16px calc(28px + env(safe-area-inset-bottom)); }
h1 { font-size: 26px; line-height: 1.3; margin: 8px 0; }
h2 { font-size: 17px; margin: 0 0 12px; }
p { margin: 8px 0 16px; color: #666; }
.eyebrow { color: #0052d9; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; }
.card { background: white; border: 1px solid #e7e7e7; border-radius: 14px; padding: 18px; margin: 18px 0; overflow: hidden; }
.player-card { padding: 0; }
#player-host { background: #10141c; aspect-ratio: 16 / 9; width: 100%; min-height: 180px; }
.player-mount { width: 100%; height: 100%; }
.placeholder { display: grid; place-items: center; height: 100%; min-height: 180px; color: #a7b0bf; font-size: 14px; }
#status { padding: 14px 16px 0; font-weight: 600; overflow-wrap: anywhere; }
#status[data-state="error"] { color: #b32222; }
#status[data-state="success"] { color: #087443; }
#protocol { padding: 0 16px; font-size: 12px; }
label, .field-label { display: block; font-weight: 600; margin-bottom: 8px; }
textarea, input[type="url"], input[type="text"] { display: block; width: 100%; font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid #d5d8de; border-radius: 8px; background: #fff; color: #202124; }
textarea { resize: vertical; overflow-wrap: anywhere; }
input:focus, textarea:focus { outline: 2px solid #a8c9ff; border-color: #0052d9; }
.hint, footer { font-size: 12px; line-height: 1.7; color: #73777e; overflow-wrap: anywhere; }
details { margin: 16px 0; }
summary { cursor: pointer; font-weight: 600; }
details label { margin-top: 14px; }
.checkbox { display: flex; gap: 8px; align-items: center; font-size: 12px; font-weight: 400; margin: 20px 0; }
.checkbox input { width: 18px; height: 18px; flex-shrink: 0; accent-color: #0052d9; }
.actions { display: flex; gap: 12px; }
.actions button { flex: 1; }
button { border: 1px solid #0052d9; border-radius: 8px; padding: 11px 16px; font: inherit; font-weight: 600; background: #0052d9; color: white; cursor: pointer; }
button.secondary { background: white; border-color: #d5d8de; color: #404750; }
button:disabled { opacity: .5; cursor: default; }
/* 协议按钮只表达当前选择，切换后仍需用户点击开始播放。 */
.protocol-switch { display: flex; gap: 8px; margin-bottom: 18px; }
.protocol-switch button { flex: 1; padding: 8px 12px; background: white; border-color: #d5d8de; color: #404750; }
.protocol-switch button[aria-pressed="true"] { background: #0052d9; border-color: #0052d9; color: white; }
pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 13px/1.8 ui-monospace, monospace; }
.log-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.log-heading h2 { margin: 0; }
.log-heading button { font-size: 12px; padding: 7px 10px; }
#logs { background: #f8f9fb; font: 12px/1.8 ui-monospace, monospace; }
footer { text-align: center; padding: 4px; }