*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue","Microsoft YaHei",sans-serif;
  background:#f4f5f7;color:#333;line-height:1.6;font-size:15px;
}
.wrap{max-width:640px;margin:0 auto;padding:16px;min-height:100%}
.card{
  background:#fff;border-radius:14px;padding:24px 20px;
  box-shadow:0 2px 16px rgba(0,0,0,.06);margin-top:24px;
}
.card.center{text-align:center;padding:36px 20px}
.cover{width:100%;border-radius:10px;margin-bottom:16px;display:block;background:#eee}
.title{font-size:22px;font-weight:600;margin-bottom:10px;color:#1a1a1a}
.desc{color:#888;font-size:14px;margin-bottom:20px;white-space:pre-line}
.form{display:flex;flex-direction:column;gap:10px}
.label{font-size:14px;color:#555}
.form-input{
  width:100%;padding:14px 12px;border:1px solid #e2e2e2;border-radius:10px;
  font-size:16px;outline:none;background:#fafafa;
}
.form-input:focus{border-color:#4a90d9;background:#fff}
.err{color:#e74c3c;font-size:13px}
.btn{
  margin-top:6px;padding:14px;background:#4a90d9;color:#fff;border:none;
  border-radius:10px;font-size:16px;font-weight:600;cursor:pointer;
}
.btn:active{background:#3a7cc0}
.tip{color:#bbb;font-size:12px;margin-top:16px;text-align:center}
.player-wrap{background:#000;border-radius:10px;overflow:hidden;margin-top:16px}
.player{width:100%;max-height:72vh;background:#000;display:block}
.meta{background:#fff;border-radius:10px;padding:16px;margin-top:12px}
.viewer-name{color:#666;font-size:14px;margin-top:6px}
.status{color:#4a90d9;font-size:15px;margin-top:6px;font-weight:500}
.status.done{color:#3aa753}
.duration{color:#999;font-size:13px;margin-top:6px}
.ok{font-size:56px;color:#3aa753;line-height:1;margin-bottom:10px}
.info{margin-top:8px;color:#666;font-size:14px}
.info b{color:#333}
.info p{margin:4px 0}