:root { --bg:#0f1220; --card:#1a1e33; --accent:#6c8cff; --text:#e8eaf6; --muted:#9aa0c0; }
* { box-sizing:border-box; }
body { margin:0; font-family: 'Segoe UI', Tahoma, sans-serif; background:var(--bg); color:var(--text); }
header { display:flex; justify-content:space-between; align-items:center; padding:16px 24px; background:#14172b; }
.brand { font-size:22px; font-weight:700; color:var(--accent); }
.lang-btn { background:transparent; border:1px solid var(--accent); color:var(--accent); padding:6px 12px; border-radius:8px; cursor:pointer; }
main { max-width:900px; margin:24px auto; padding:0 16px; display:grid; gap:16px; }
.card { background:var(--card); border-radius:14px; padding:20px; box-shadow:0 4px 20px rgba(0,0,0,.3); }
h2 { margin-top:0; color:var(--accent); }
.row { display:flex; gap:8px; }
.row input { flex:1; padding:10px; border-radius:8px; border:1px solid #333; background:#0f1220; color:var(--text); }
.primary { background:var(--accent); color:#fff; border:none; padding:10px 18px; border-radius:8px; cursor:pointer; font-size:15px; }
.primary:disabled { opacity:.5; cursor:not-allowed; }
.hidden { display:none; }
.qr { margin:16px 0; display:flex; justify-content:center; }
.qr img, .qr canvas { border:8px solid #fff; border-radius:8px; }
.room-code { font-size:18px; margin:8px 0; }
.hint { color:var(--muted); font-size:13px; }
.incoming ul { list-style:none; padding:0; }
.incoming li { background:#14172b; padding:10px; border-radius:8px; margin:6px 0; display:flex; justify-content:space-between; align-items:center; }
.incoming a { color:var(--accent); }
.progress-wrap { margin:12px 0; }
.progress-bar { width:100%; height:12px; background:#0f1220; border-radius:6px; overflow:hidden; border:1px solid #333; }
.progress-fill { height:100%; width:0%; background:var(--accent); transition:width .2s; }
.app-card a.primary { text-align:center; }
footer { text-align:center; color:var(--muted); padding:24px; font-size:13px; }
@media (max-width:600px){ .row{flex-direction:column;} }