:root { --bg:#0b0b0c; --fg:#fff; --muted:#a1a1aa; --card:#141418; --line:#24242a; --accent:#4ade80; }
*{box-sizing:border-box} 
body{
  margin:0;background:var(--bg);color:var(--fg);
  font:16px system-ui,Arial,sans-serif;
  display:grid;place-items:center;min-height:100dvh;
}
.card{
  width:min(560px,92vw);background:var(--card);
  border:1px solid var(--line);border-radius:16px;
  padding:20px 18px;
}
h1{margin:0 0 4px;font-size:22px}
.sub{margin:0 0 16px;color:var(--muted)}
label{display:block;margin:12px 0 6px;color:#d4d4d8}
input,textarea{
  width:100%;border:1px solid var(--line);background:#101014;
  color:var(--fg);border-radius:10px;padding:12px;
  outline:none;
}
input:focus,textarea:focus{border-color:#3b82f6}
.row{display:flex;gap:8px;align-items:center}
.row input{flex:1}
button{
  cursor:pointer;border:1px solid var(--line);background:#1a1a20;
  color:var(--fg);border-radius:10px;padding:10px 12px;
}
button:hover{border-color:#3b82f6}
.actions{display:flex;gap:12px;align-items:center;margin-top:14px}
#sendBtn{background:#111;border-color:#111}
#sendBtn:hover{background:#0e0e0e}
.hint{color:var(--muted);font-size:12px}
.toast{margin-top:14px;color:var(--accent)}