diff --git a/styles/globals.css b/styles/globals.css
index 4f6a67f..2b03d9f 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -439,31 +439,47 @@ body {
    from Tailwind (the class itself doesn't set border-radius
    because consumers vary between rounded-xl and rounded-2xl).
    ============================================================ */
-/* IMPORTANT — backdrop-filter quirks with Next.js 16's Lightning CSS:
+/* IMPORTANT — composing rim + elevation tokens correctly.
+   The --rim-light-outer / --rim-light-inner / --elevation-* tokens are
+   COMPLETE box-shadow declarations (each contains offset/spread/color or
+   the `inset` keyword), not raw color values. They are designed to be
+   *chained into a single box-shadow*, exactly the way <GlassSurface>'s
+   `boxShadow: shadowParts.join(', ')` composes them. Do NOT use
+   `border: 1px solid var(--rim-light-outer)` — that parses
+   `border-width` from the first token of the shadow string ("0"), which
+   yields a 0px border. And do NOT wrap --rim-light-inner in another
+   `inset 0 1px 0` prefix — the token already contains its own `inset`
+   keyword, so wrapping produces invalid syntax that the browser drops
+   the entire box-shadow declaration for. PR #98 had both mistakes,
+   which is why the panels in PR #97/#98 had neither visible border nor
+   drop shadow despite the backdrop-filter being correct.
+
+   Backdrop-filter quirks with Next.js 16's Lightning CSS (also relevant):
    1) `backdrop-filter: blur(var(--X)) saturate(var(--Y))` is silently
-      stripped from the compiled CSS (same root cause that emptied
-      `.mobile-nav-backdrop` in production). Use LITERAL values.
-   2) Writing both `backdrop-filter` and `-webkit-backdrop-filter` with
-      identical values triggers Lightning CSS's de-dup; it keeps only the
-      `-webkit-` form which Chrome/Edge/Firefox ignore. Write only the
-      unprefixed `backdrop-filter` and let Lightning CSS's autoprefixer
-      add the vendor prefix per browserslist (it does for ios_saf <18).
-   If the blur radii ever need to change, change them here AND in the
-   matching --glass-blur-* tokens (kept for `<GlassSurface>` JSX consumers
-   which set `backdropFilter` via inline style — those are unaffected by
-   the Lightning CSS optimizer). */
+      stripped (var() inside function args breaks the optimizer). Use
+      LITERAL values here. Tokens stay in :root for the <GlassSurface>
+      JSX primitive which sets backdropFilter via inline style.
+   2) Writing both `backdrop-filter` AND `-webkit-backdrop-filter` with
+      identical values triggers Lightning CSS's buggy de-dup; it keeps
+      only the `-webkit-` form which modern browsers ignore. Write only
+      the unprefixed form; Lightning CSS's autoprefixer adds the prefix
+      per browserslist (ios_saf <18 still needs it). */
 .glass-panel {
-  background-color: var(--glass-surface-mid);
+  background: var(--glass-surface-mid);
   backdrop-filter: blur(12px) saturate(180%);
-  border: 1px solid var(--rim-light-outer);
-  box-shadow: var(--elevation-ambient), inset 0 1px 0 var(--rim-light-inner);
+  box-shadow:
+    var(--rim-light-inner),
+    var(--rim-light-outer),
+    var(--elevation-ambient);
 }
 
 .glass-panel-strong {
-  background-color: var(--glass-surface-high);
+  background: var(--glass-surface-high);
   backdrop-filter: blur(20px) saturate(180%);
-  border: 1px solid var(--rim-light-outer);
-  box-shadow: var(--elevation-pronounced), inset 0 1px 0 var(--rim-light-inner);
+  box-shadow:
+    var(--rim-light-inner),
+    var(--rim-light-outer),
+    var(--elevation-pronounced);
 }
 
 /* Gradient text effects — Deck Hearth warm palette only.