diff --git a/frontend/src/components/MatchCard.module.css b/frontend/src/components/MatchCard.module.css
index e4aaafb..030ae9c 100644
--- a/frontend/src/components/MatchCard.module.css
+++ b/frontend/src/components/MatchCard.module.css
@@ -107,8 +107,10 @@
   border-radius: 13px;
   background: var(--surface-high);
   box-shadow:
-    0 4px 12px rgba(0,0,0,0.3),
-    inset 0 1px 0 rgba(255,255,255,0.12);
+    var(--shadow-card),
+    inset 0 1px 0 rgba(255,255,255,0.55),
+    inset 0 -1px 0 rgba(0,0,0,0.06);
+  border: 1px solid var(--border-subtle);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -121,8 +123,8 @@
   content: '';
   position: absolute;
   top: 0; left: 0; right: 0;
-  height: 50%;
-  background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, transparent 100%);
+  height: 55%;
+  background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.0) 100%);
   pointer-events: none;
   z-index: 1;
 }
diff --git a/frontend/src/components/TipModal.module.css b/frontend/src/components/TipModal.module.css
index b5caa63..95538c2 100644
--- a/frontend/src/components/TipModal.module.css
+++ b/frontend/src/components/TipModal.module.css
@@ -101,9 +101,10 @@
   border-radius: 18px;
   background: var(--surface-high);
   box-shadow:
-    0 8px 24px rgba(0,0,0,0.35),
-    inset 0 1px 0 rgba(255,255,255,0.12),
-    inset 1px 0 0 rgba(255,255,255,0.06);
+    var(--shadow-card),
+    inset 0 1px 0 rgba(255,255,255,0.55),
+    inset 0 -1px 0 rgba(0,0,0,0.06);
+  border: 1px solid var(--border-subtle);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -115,8 +116,8 @@
   content: '';
   position: absolute;
   top: 0; left: 0; right: 0;
-  height: 50%;
-  background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, transparent 100%);
+  height: 55%;
+  background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.0) 100%);
   pointer-events: none;
   z-index: 1;
 }
@@ -235,9 +236,9 @@
   position: relative;
   overflow: hidden;
   box-shadow:
-    0 6px 16px rgba(0,0,0,0.35),
-    inset 0 1px 0 rgba(255,255,255,0.12),
-    inset 1px 0 0 rgba(255,255,255,0.06);
+    var(--shadow-card),
+    inset 0 1px 0 rgba(255,255,255,0.55),
+    inset 0 -1px 0 rgba(0,0,0,0.06);
 }
 
 /* Glossy sheen – gleich wie flagLarge */
@@ -245,8 +246,8 @@
   content: '';
   position: absolute;
   top: 0; left: 0; right: 0;
-  height: 50%;
-  background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, transparent 100%);
+  height: 55%;
+  background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.0) 100%);
   pointer-events: none;
   border-radius: 16px 16px 0 0;
 }