*{box-sizing:border-box}
body{margin:0;font-family:Arial,"Microsoft YaHei",sans-serif;background:#f4f6f8;color:#202124}
.container{max-width:760px;margin:0 auto;padding:30px 16px 60px}
h1{margin:0;font-size:34px}h2{margin-top:0;font-size:20px}
.sub{color:#666;margin-top:8px}
.card{background:#fff;border-radius:14px;padding:22px;margin-top:18px;box-shadow:0 2px 12px rgba(0,0,0,.07)}
button,.file-button{border:0;border-radius:9px;padding:11px 16px;background:#1769ff;color:#fff;cursor:pointer;font-size:15px}
button:hover,.file-button:hover{opacity:.9}
.join-row{display:flex;gap:10px;margin-top:14px}
#roomInput{flex:1;min-width:0;border:1px solid #ccc;border-radius:9px;padding:11px;font-size:16px;letter-spacing:2px}
.room-code{font-size:42px;font-weight:bold;letter-spacing:8px;margin:10px 0}
.label{color:#777;font-size:13px}
.status{margin-top:20px;display:flex;align-items:center;gap:8px}
.dot{width:11px;height:11px;display:inline-block;border-radius:50%;background:#999}
.dot.ok{background:#16a34a}.dot.warn{background:#f59e0b}
.file-button{display:inline-block}.file-button input{display:none}
.file-item{margin-top:15px;padding:12px;border:1px solid #ddd;border-radius:10px}
.file-name{font-weight:bold;word-break:break-all}
.progress{height:8px;margin-top:9px;background:#e5e7eb;border-radius:5px;overflow:hidden}
.progress>div{height:100%;width:0;background:#1769ff;transition:width .1s}
.hidden{display:none}
#log{white-space:pre-wrap;word-break:break-word;max-height:300px;overflow:auto;font-size:12px;color:#555}