:root{--bg:#f7f9fc;--card:#ffffff;--accent:#630877;--muted:#57614c;--radius:8px;--maxWidth:900px}body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;background:linear-gradient(180deg,var(--bg),#eef3fb);color:#111827}.app-container{max-width:var(--maxWidth);margin:32px auto;padding:16px}.header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:transparent}.card{background:var(--card);border-radius:var(--radius);box-shadow:0 6px 18px #1e293b0f;padding:18px}.home{display:grid;grid-template-columns:1fr 1fr;gap:20px}.centered{display:flex;flex-direction:column;align-items:center;justify-content:center}.input,input[type=text],input[type=search],input[type=number],textarea{width:100%;padding:10px 12px;border-radius:6px;border:1px solid #e6e9ef;outline:none;box-sizing:border-box}.input:focus,input:focus,textarea:focus{box-shadow:0 0 0 4px #2a7ae214;border-color:var(--accent)}.btn{background:var(--accent);color:#fff;border:none;padding:10px 14px;border-radius:6px;cursor:pointer}.btn.ghost{background:var(--accent);color:#fff;border:1px solid rgba(0,0,0,.06)}.join-form{display:flex;gap:8px}.chat-wrapper{max-width:720px;margin:20px auto;padding:8px}.chat-window{height:420px;overflow:auto;padding:12px;background:var(--card);border-radius:6px;border:1px solid #eef2ff}.message{margin:6px 0}.message .meta{font-size:12px;color:var(--muted)}.message.user .bubble{display:inline-block;background:linear-gradient(90deg,#f3f8ff,#eef6ff);padding:8px 12px;border-radius:8px}.message.system{color:var(--muted);font-style:italic}.users-list{display:flex;gap:8px;flex-wrap:wrap}.user-pill{background:#f1f5f9;padding:6px 8px;border-radius:16px;font-size:13px}.code-inputs{display:flex;gap:8px}.code-inputs input{width:48px;height:48px;text-align:center;font-size:18px;border-radius:8px;border:1px solid #e6e9ef;background:#fff}.code-inputs input:focus{border-color:var(--accent);box-shadow:0 0 0 4px #2a7ae20f}.footer-actions{display:flex;gap:8px;margin-top:12px}@media(max-width:900px){.home{grid-template-columns:1fr}.chat-window{height:360px}}@media(max-width:600px){.home{grid-template-columns:1fr}.card{padding:14px}.input,.btn{font-size:16px;padding:12px}.chat-window{height:56vh}.footer-actions,.join-form{flex-direction:column}.btn,.btn.ghost{width:100%}.chat-bottom{position:fixed;left:12px;right:12px;bottom:12px;display:flex;gap:8px;background:transparent;z-index:50}}