:root { --bg: #f4f5f7; --card: #fff; --text: #1a1a2e; --muted: #6b7280;
          --accent: #00b894; --in: #e8f4fd; --out: #e8fde8; --border: #e5e7eb; }
  * { box-sizing: border-box; }
  body { font-family: system-ui, -apple-system, sans-serif; background: var(--bg);
         color: var(--text); margin: 0; line-height: 1.5; }
  header { background: var(--card); border-bottom: 1px solid var(--border); padding: 12px 20px;
            display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
  header a { color: var(--text); text-decoration: none; font-weight: 500; }
  header a:hover { color: var(--accent); }
  header a.active { color: var(--accent); font-weight: 700; }
  header .brand { font-weight: 700; margin-right: auto; }
  .tabs { display: flex; gap: 8px; }
  .tabs a { padding: 6px 14px; border-radius: 999px; background: #f0f0f0; }
  .tabs a.active { background: #d1fae5; color: #065f46; }
  main { max-width: 720px; margin: 0 auto; padding: 24px 16px 48px; }
  .card { background: var(--card); border: 1px solid var(--border); border-radius: 10px;
          padding: 16px 20px; margin-bottom: 16px; }
  .muted { color: var(--muted); font-size: 0.9rem; }
  .badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.8rem;
           font-weight: 600; background: #eee; }
  .badge.connected { background: #d1fae5; color: #065f46; }
  .badge.connecting { background: #fef3c7; color: #92400e; }
  .badge.disconnected, .badge.pending, .badge.error { background: #fee2e2; color: #991b1b; }
  a.row { display: block; padding: 12px 0; border-bottom: 1px solid var(--border);
          color: inherit; text-decoration: none; }
  a.row:last-child { border-bottom: none; }
  a.row:hover { background: #fafafa; margin: 0 -12px; padding-left: 12px; padding-right: 12px; }
  .msg { padding: 10px 14px; border-radius: 12px; margin: 8px 0; max-width: 85%; word-break: break-word; }
  .msg.in { background: var(--in); margin-right: auto; }
  .msg.out { background: var(--out); margin-left: auto; }
  .msg time { display: block; font-size: 0.75rem; color: var(--muted); margin-top: 4px; }
  #messages { max-height: 60vh; overflow-y: auto; }
  form.reply { display: flex; gap: 8px; margin-top: 16px; align-items: flex-end; }
  form.reply textarea { flex: 1; padding: 10px 14px; border: 1px solid var(--border);
                         border-radius: 8px; font-size: 1rem; min-height: 44px; max-height: 200px;
                         resize: vertical; font-family: inherit; line-height: 1.4; }
  form.reply button, .btn { padding: 10px 18px; background: var(--accent); color: #fff;
                              border: none; border-radius: 8px; font-size: 1rem; cursor: pointer; }
  form.reply button:hover, .btn:hover { filter: brightness(0.95); }
  .login { max-width: 360px; margin: 80px auto; }
  .login input { width: 100%; padding: 10px 14px; margin: 8px 0 16px; border: 1px solid var(--border);
                  border-radius: 8px; font-size: 1rem; }
  .flash { background: #fef3c7; padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; }
  .bind-card { text-align: center; padding: 28px 20px; }
  .bind-card .btn { font-size: 1.05rem; padding: 12px 28px; }