created frontend with login, room listing and creation, and message page with all features

src/base.css

@@ -0,0 +1,73 @@
+/* ---- CSS reset (minimal, modern) ---- */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+}
+
+html,
+body,
+#app {
+  height: 100%;
+}
+
+/* ---- Theme variables ---- */
+:root {
+  --bg: #0f1115;
+  --panel: #171923;
+  --text: #e6e6eb;
+  --muted: #9aa0a6;
+  --accent: #f27aa2;
+  --accent-hover: #ff91b4;
+  --border: #2a2f3a;
+  --radius: 8px;
+}
+
+/* ---- Base ---- */
+body {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont,
+    "Segoe UI", sans-serif;
+  background-color: var(--bg);
+  color: var(--text);
+  line-height: 1.5;
+}
+
+/* ---- Inputs & buttons ---- */
+input, textarea {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  color: var(--text);
+  padding: 0.6rem 0.7rem;
+  border-radius: var(--radius);
+  font-size: 0.95rem;
+}
+
+input::placeholder, textarea::placeholder {
+  color: var(--muted);
+}
+
+input:focus, textarea:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+button {
+  font-size: 1rem;
+  background: var(--accent);
+  color: #0b0d12;
+  border: none;
+  border-radius: var(--radius);
+  padding: 0.6rem 1rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+button:hover {
+  background: var(--accent-hover);
+}
+