:root { --pad: 16px; --bg:#0b0c10; --fg:#eaf0f1; --card:#12151b; --border:#1f2937; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; }
.app { max-width: 760px; margin: 0 auto; padding: var(--pad); }
header { display:flex; justify-content: space-between; align-items:center; margin-bottom: 12px; }
h1 { margin: 0; font-size: 28px; }
.userbox { font-size: 13px; opacity: .9; display:flex; gap:10px; align-items:center; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: var(--pad); margin: 12px 0; }
.row { display:flex; gap:8px; align-items:center; }
.row > * { flex: 1; }
.mt { margin-top: 8px; }
.hidden { display: none; }
input, textarea { width: 100%; background: #0f1116; color: var(--fg); border: 1px solid #253046; border-radius: 10px; padding: 10px; font-size: 16px; }
textarea { resize: vertical; min-height: 72px; }
button { background:#4f46e5; color:white; border:0; padding:10px 14px; border-radius:10px; font-weight:600; cursor:pointer; }
button.secondary { background:#374151; }
button.danger { background:#dc2626; }
button:disabled { opacity:.6; cursor:not-allowed; }
.msg { min-height: 20px; margin-top: 6px; }
.msg.error { color:#f87171; }
.msg.success { color:#34d399; }
.small { font-size: 14px; }
.thought { display:grid; gap:8px; }
.controls { display:flex; gap:8px; }