Glass theme: real frosted-glass look

Translucent surfaces with backdrop blur over an aurora gradient
backdrop, hairline light borders, softened accent tints, frosted
modal scrim, inverted sidebar logo. Scoped entirely to
html[data-theme='glass'] — other themes untouched.

frontend/src/styles.css

@@ -87,31 +87,73 @@
   --shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.85), 0 0 32px rgba(255, 20, 147, 0.12);
 }
 
-/* "Glass" — muted frosted aesthetic inspired by the Meridian Obsidian theme
+/* "Glass" — frosted-glass aesthetic inspired by the Meridian Obsidian theme
-   (MIT): dark panels, cyan accents, and glass-like transparency simulation. */
+   (MIT): translucent blurred panels floating over an aurora-lit deep
+   blue-black field, cyan accents, hairline light borders. */
 :root[data-theme='glass'] {
-  --bg: #0d0d0d;
+  --bg: #0a0d13;
-  --surface: #1a1a1f;
+  --surface: rgba(23, 29, 41, 0.58);
-  --surface-2: #24242a;
+  --surface-2: rgba(255, 255, 255, 0.05);
-  --border: #3a3a44;
+  --surface-hover: rgba(255, 255, 255, 0.09);
-  --border-strong: #4a4a5a;
+  --border: rgba(255, 255, 255, 0.1);
-  --text: #e0e0e7;
+  --border-strong: rgba(255, 255, 255, 0.2);
-  --text-muted: #888899;
+  --text: #e8ecf4;
+  --text-muted: #96a2b6;
   --primary: #7fdbff;
-  --primary-hover: #5bc0de;
+  --primary-hover: #a3e5ff;
-  --primary-soft: #1e2a3a;
+  --primary-soft: rgba(127, 219, 255, 0.13);
-  --on-primary: #050512;
+  --on-primary: #06121c;
-  --danger: #ff6b6b;
+  --danger: #ff8080;
-  --danger-soft: #332a2a;
+  --danger-soft: rgba(255, 107, 107, 0.14);
-  --warning: #f0ad4f;
+  --warning: #ffc46b;
-  --warning-soft: #332a2a;
+  --warning-soft: rgba(240, 173, 79, 0.15);
-  --success: #5cb85c;
+  --success: #7ed99a;
-  --success-soft: #2ecc71;
+  --success-soft: rgba(92, 184, 92, 0.16);
-  --info: #5bc0de;
+  --info: #82c9ea;
-  --info-soft: #1e2c3c;
+  --info-soft: rgba(91, 192, 222, 0.14);
   --focus: #7fdbff;
-  --shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.4);
+  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 36px rgba(0, 0, 0, 0.38);
-  --shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.5);
+  --shadow-modal: 0 18px 56px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.07) inset;
+}
+
+/* Glass scene: the aurora backdrop lives on <body>; panels above it are
+   translucent and blurred so the glow reads through them. */
+html[data-theme='glass'] body {
+  background:
+    radial-gradient(1000px 640px at 10% -10%, rgba(127, 219, 255, 0.15), transparent 60%),
+    radial-gradient(880px 560px at 92% 6%, rgba(150, 130, 255, 0.12), transparent 58%),
+    radial-gradient(760px 720px at 50% 120%, rgba(91, 192, 222, 0.1), transparent 62%), #0a0d13;
+}
+
+html[data-theme='glass'] .app-shell,
+html[data-theme='glass'] .main {
+  background: transparent;
+}
+
+/* Frosted panes: every major surface blurs whatever sits behind it. */
+html[data-theme='glass'] .card,
+html[data-theme='glass'] .sidebar,
+html[data-theme='glass'] .modal,
+html[data-theme='glass'] .empty-state,
+html[data-theme='glass'] .profile-card,
+html[data-theme='glass'] .compose-preview {
+  -webkit-backdrop-filter: blur(18px) saturate(160%);
+  backdrop-filter: blur(18px) saturate(160%);
+}
+
+html[data-theme='glass'] input[type='text'],
+html[data-theme='glass'] input[type='search'],
+html[data-theme='glass'] input[type='password'],
+html[data-theme='glass'] select,
+html[data-theme='glass'] textarea {
+  background: rgba(255, 255, 255, 0.045);
+  border-color: rgba(255, 255, 255, 0.16);
+}
+
+html[data-theme='glass'] .modal-backdrop {
+  background: rgba(4, 7, 12, 0.5);
+  -webkit-backdrop-filter: blur(6px);
+  backdrop-filter: blur(6px);
 }
 
 * {
@@ -369,7 +411,8 @@ a {
 /* The artwork is black-on-white; flip it in dark themes so it stays black
    bird on dark tile instead of a glaring white square. */
 html[data-theme='dark'] .sidebar-logo img,
-html[data-theme='neon'] .sidebar-logo img {
+html[data-theme='neon'] .sidebar-logo img,
+html[data-theme='glass'] .sidebar-logo img {
   filter: invert(1);
 }