* { box-sizing: border-box; margin: 0; }
body { height: 100vh; display: flex; flex-direction: column; background: #0a0b0f; color: #f1f2f7; font-family: 'Inter', system-ui, sans-serif; }
header { padding: 18px 22px 14px; border-bottom: 1px solid #1c1f2b; }
h1 { font-size: 20px; font-weight: 800; letter-spacing: -0.4px; background: linear-gradient(135deg, #6366f1, #8b5cf6 50%, #06b6d4); -webkit-background-clip: text; background-clip: text; color: transparent; }
header p { color: #969cad; font-size: 13px; margin-top: 4px; }
header b { color: #f1f2f7; }
#log { flex: 1; overflow-y: auto; padding: 16px 22px; display: flex; flex-direction: column; gap: 7px; }
.msg { font-size: 14px; line-height: 1.5; word-break: break-word; }
.msg .u { font-weight: 700; margin-right: 8px; }
.msg .t { color: #d7dae6; }
form { display: flex; gap: 8px; padding: 14px 22px; border-top: 1px solid #1c1f2b; }
input { background: #14161f; border: 1px solid #262a38; color: #f1f2f7; border-radius: 9px; padding: 10px 13px; font-size: 14px; outline: none; }
input:focus { border-color: #6366f1; }
.name { width: 130px; flex: none; }
#text { flex: 1; }
button { background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; border: 0; border-radius: 9px; padding: 0 18px; font-weight: 700; font-size: 14px; cursor: pointer; }
button:hover { filter: brightness(1.08); }