diff --git a/web/src/components/AssetLibraryModal.module.css b/web/src/components/AssetLibraryModal.module.css
index 871e032..5fa4817 100644
--- a/web/src/components/AssetLibraryModal.module.css
+++ b/web/src/components/AssetLibraryModal.module.css
@@ -256,7 +256,7 @@
 .addAssetCard:hover {
   border-color: var(--color-primary);
   color: var(--color-primary);
-  background: rgba(108, 99, 255, 0.04); /* unmapped: primary alpha 0.04 */
+  background: var(--color-primary-bg);
 }
 
 .assetThumb {
@@ -289,17 +289,17 @@
 
 .statusActive {
   color: var(--color-success);
-  background: rgba(0, 184, 148, 0.12); /* near-match: ~--color-success-bg-hover (0.10) */
+  background: var(--color-success-bg);
 }
 
 .statusProcessing {
   color: var(--color-warning);
-  background: rgba(243, 156, 18, 0.12); /* unmapped: warning alpha 0.12 */
+  background: var(--color-warning-bg);
 }
 
 .statusFailed {
   color: var(--color-danger);
-  background: rgba(231, 76, 60, 0.12); /* near-match: ~--color-danger-bg-hover (0.10) */
+  background: var(--color-danger-bg);
 }
 
 /* Upload view */
@@ -344,12 +344,12 @@
 
 .dropZone:hover {
   border-color: var(--color-primary);
-  background: rgba(108, 99, 255, 0.04); /* unmapped: primary alpha 0.04 */
+  background: var(--color-primary-bg);
 }
 
 .dropZoneActive {
   border-color: var(--color-primary);
-  background: rgba(108, 99, 255, 0.08); /* unmapped: primary alpha 0.08 */
+  background: var(--color-primary-bg-hover);
 }
 
 .dropZoneText {
@@ -366,11 +366,11 @@
 .dropZoneWarning {
   font-size: 14px;
   font-weight: 600;
-  color: #ff4d4f; /* unmapped: distinct red shade, no var */
+  color: var(--color-danger-hover);
   margin-top: 12px;
   padding: 8px 12px;
-  background: rgba(255, 77, 79, 0.08); /* unmapped: tied to #ff4d4f */
-  border: 1px solid rgba(255, 77, 79, 0.25); /* unmapped: tied to #ff4d4f */
+  background: var(--color-danger-hover-bg);
+  border: 1px solid var(--color-danger-hover-border);
   border-radius: 6px;
 }
 
diff --git a/web/src/components/GenerationCard.module.css b/web/src/components/GenerationCard.module.css
index 3a1704a..b177695 100644
--- a/web/src/components/GenerationCard.module.css
+++ b/web/src/components/GenerationCard.module.css
@@ -418,7 +418,7 @@
 .moreBtn:hover {
   color: var(--color-text-secondary);
   background: var(--color-bg-hover);
-  border-color: rgba(255, 255, 255, 0.15);
+  border-color: var(--color-border-glass-hover);
 }
 .moreDropdown {
   position: absolute;
diff --git a/web/src/components/KeyframeUpload.module.css b/web/src/components/KeyframeUpload.module.css
index 302c7d6..b2e66d9 100644
--- a/web/src/components/KeyframeUpload.module.css
+++ b/web/src/components/KeyframeUpload.module.css
@@ -13,7 +13,7 @@
   height: var(--thumbnail-size);
   aspect-ratio: 3 / 4;
   border: 1.5px dashed var(--color-border-modal);
-  background: rgba(255, 255, 255, 0.03); /* near-match: ~--color-bg-upload (0.04) */
+  background: var(--color-bg-upload);
   border-radius: var(--radius-btn);
   display: flex;
   flex-direction: column;
@@ -26,7 +26,7 @@
 }
 
 .trigger:hover {
-  border-color: #5a5a6a; /* unmapped: hover border lighter than --color-border-modal */
+  border-color: var(--color-border-modal-hover);
   background: var(--color-bg-card);
 }
 
diff --git a/web/src/components/UniversalUpload.module.css b/web/src/components/UniversalUpload.module.css
index db80b0b..09a1ba0 100644
--- a/web/src/components/UniversalUpload.module.css
+++ b/web/src/components/UniversalUpload.module.css
@@ -20,7 +20,7 @@
   height: var(--thumbnail-size);
   aspect-ratio: 3 / 4;
   border: 1.5px dashed var(--color-border-modal);
-  background: rgba(255, 255, 255, 0.03); /* near-match: ~--color-bg-upload (0.04) */
+  background: var(--color-bg-upload);
   border-radius: var(--radius-btn);
   display: flex;
   flex-direction: column;
@@ -33,7 +33,7 @@
 }
 
 .trigger:hover {
-  border-color: #5a5a6a; /* unmapped: hover border lighter than --color-border-modal */
+  border-color: var(--color-border-modal-hover);
   background: var(--color-bg-card);
 }
 
@@ -65,8 +65,8 @@
 }
 
 .thumbRowExpanded .addMore:hover {
-  background: #1e1e2a; /* unmapped: hover variant of bg-modal-elevated */
-  border-color: #5a5a6a; /* unmapped: hover border lighter than --color-border-modal */
+  background: var(--color-bg-modal-hover);
+  border-color: var(--color-border-modal-hover);
 }
 
 /* Each thumbnail card — 3:4 portrait ratio, overflow visible for tooltip */
@@ -92,7 +92,7 @@
 }
 
 .thumbItem:hover .thumbInner {
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); /* unmapped: shadow alpha 0.3 */
+  box-shadow: 0 2px 12px var(--color-shadow-thumb);
 }
 
 .thumbMedia {
@@ -180,7 +180,7 @@
   height: var(--thumbnail-size);
   aspect-ratio: 3 / 4;
   border: 1.5px dashed var(--color-border-modal);
-  background: rgba(255, 255, 255, 0.03); /* near-match: ~--color-bg-upload (0.04) */
+  background: var(--color-bg-upload);
   border-radius: var(--radius-btn);
   display: flex;
   flex-direction: column;
@@ -198,7 +198,7 @@
 }
 
 .addMore:hover {
-  border-color: #5a5a6a; /* unmapped: hover border lighter than --color-border-modal */
+  border-color: var(--color-border-modal-hover);
   background: var(--color-bg-card);
 }
 
@@ -289,13 +289,13 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(0, 0, 0, 0.5); /* near-match: between --color-modal-overlay (0.6) and lighter overlays */
+  background: var(--color-overlay-soft);
   border-radius: var(--radius-thumbnail);
   z-index: 2;
 }
 
 .uploadError {
-  background: rgba(239, 68, 68, 0.25); /* unmapped: danger-text (#ef4444) alpha 0.25 */
+  background: var(--color-danger-bg);
   cursor: pointer;
 }
 
diff --git a/web/src/components/VideoDetailModal.module.css b/web/src/components/VideoDetailModal.module.css
index e9b6053..e8d76e7 100644
--- a/web/src/components/VideoDetailModal.module.css
+++ b/web/src/components/VideoDetailModal.module.css
@@ -56,8 +56,8 @@
 }
 
 .closeBtn:hover {
-  color: var(--color-on-overlay);
-  background: rgba(255, 255, 255, 0.12);
+  color: var(--color-text-primary);
+  background: var(--color-bg-glass-hover);
 }
 
 .floatingActions {
@@ -85,8 +85,8 @@
 }
 
 .floatingBtn:hover {
-  color: var(--color-on-overlay);
-  background: rgba(255, 255, 255, 0.15);
+  color: var(--color-text-primary);
+  background: var(--color-bg-glass-hover);
 }
 
 /* Video area — centres the player */
@@ -314,8 +314,8 @@
 }
 
 .iconBtn:hover {
-  color: rgba(255, 255, 255, 0.85);
-  background: var(--color-bg-card);
+  color: var(--color-text-primary);
+  background: var(--color-bg-glass-hover);
 }
 
 /* More menu dropdown */
diff --git a/web/src/index.css b/web/src/index.css
index 6ecf76f..ff5f4f7 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -205,6 +205,13 @@
   --color-chip-warm-badge-bg: rgba(255, 150, 100, 0.20);
   --color-chip-warm-badge-text: #ffb589;
 
+  /* V2-fix: 主题感知的 hover/border (替换 V1 漏改的白透 alpha) */
+  --color-bg-glass-hover: rgba(255, 255, 255, 0.12);
+  --color-border-glass-hover: rgba(255, 255, 255, 0.15);
+  --color-bg-thumbnail: rgba(0, 0, 0, 0.30);          /* 视频缩略图 bg (dark) */
+  --color-bg-thumbnail-hover: rgba(0, 0, 0, 0.15);    /* 缩略图 hover overlay */
+  --color-shadow-thumb: rgba(0, 0, 0, 0.30);          /* 缩略图阴影 */
+
   /* Backdrop-filter 标准五档 */
   --bf-glass-sm: blur(12px) saturate(140%);
   --bf-glass-md: blur(16px) saturate(160%);
@@ -353,6 +360,13 @@
   --color-chip-warm-badge-bg: rgba(255, 100, 50, 0.12);
   --color-chip-warm-badge-text: #c2410c;
 
+  /* V2-fix: 主题感知 hover/border 浅色变黑透明 */
+  --color-bg-glass-hover: rgba(0, 0, 0, 0.06);
+  --color-border-glass-hover: rgba(0, 0, 0, 0.12);
+  --color-bg-thumbnail: rgba(0, 0, 0, 0.05);           /* 浅色下浅淡 */
+  --color-bg-thumbnail-hover: rgba(0, 0, 0, 0.04);
+  --color-shadow-thumb: rgba(0, 0, 0, 0.10);
+
   /* Mention pill */
   --color-mention-bg: rgba(80, 72, 204, 0.10);
   --color-mention-bg-hover: rgba(80, 72, 204, 0.16);
diff --git a/web/src/pages/AssetsPage.module.css b/web/src/pages/AssetsPage.module.css
index 639e3da..3515400 100644
--- a/web/src/pages/AssetsPage.module.css
+++ b/web/src/pages/AssetsPage.module.css
@@ -125,7 +125,7 @@
   aspect-ratio: 16 / 9;
   border-radius: 10px;
   overflow: hidden;
-  background: rgba(0, 0, 0, 0.3); /* unmapped: thumbnail bg alpha 0.3 */
+  background: var(--color-bg-thumbnail);
   cursor: pointer;
   transition: transform 0.15s;
 }
@@ -162,6 +162,6 @@
 .thumbOverlay {
   position: absolute;
   inset: 0;
-  background: rgba(0, 0, 0, 0.15); /* unmapped: hover overlay alpha 0.15 */
+  background: var(--color-bg-thumbnail-hover);
   pointer-events: none;
 }
diff --git a/web/src/pages/ProfilePage.module.css b/web/src/pages/ProfilePage.module.css
index e969421..335624c 100644
--- a/web/src/pages/ProfilePage.module.css
+++ b/web/src/pages/ProfilePage.module.css
@@ -85,8 +85,8 @@
 /* Warning banners */
 .warningBanner {
   padding: 10px 16px;
-  background: rgba(243, 156, 18, 0.12);
-  border: 1px solid rgba(243, 156, 18, 0.3);
+  background: var(--color-warning-bg);
+  border: 1px solid var(--color-warning-border);
   border-radius: var(--radius-card);
   color: var(--color-warning);
   font-size: 13px;
diff --git a/web/src/pages/TeamsPage.module.css b/web/src/pages/TeamsPage.module.css
index d9bf55e..6a8f0f5 100644
--- a/web/src/pages/TeamsPage.module.css
+++ b/web/src/pages/TeamsPage.module.css
@@ -23,9 +23,9 @@
 }
 .table { width: 100%; border-collapse: collapse; font-size: 13px; }
 .table th { padding: 12px 16px; text-align: left; color: var(--color-text-secondary); font-weight: 500; border-bottom: 1px solid var(--color-border-card); white-space: nowrap; }
-.table td { padding: 12px 16px; color: var(--color-text-primary); border-bottom: 1px solid rgba(42, 42, 56, 0.5); white-space: nowrap; }
+.table td { padding: 12px 16px; color: var(--color-text-primary); border-bottom: 1px solid var(--color-border-row); white-space: nowrap; }
 .table tr:last-child td { border-bottom: none; }
-.table tr:hover td { background: rgba(255, 255, 255, 0.02); }
+.table tr:hover td { background: var(--color-bg-row-hover); }
 
 .teamNameLink { background: none; border: none; color: var(--color-primary); cursor: pointer; font-size: 13px; text-decoration: underline; }
 .statusBadge { padding: 2px 8px; border-radius: 4px; font-size: 12px; }
@@ -72,7 +72,7 @@
 .detailOverlay {
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, 0.65);
+  background: var(--color-modal-overlay);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -141,8 +141,8 @@
 }
 
 .detailClose:hover {
-  color: #fff;
-  background: rgba(255, 255, 255, 0.12);
+  color: var(--color-text-primary);
+  background: var(--color-bg-glass-hover);
 }
 
 /* ── Body ── */
@@ -223,7 +223,7 @@
 }
 
 .memberTableWrapper {
-  background: rgba(255, 255, 255, 0.03);
+  background: var(--color-bg-upload);
   border: 1px solid var(--color-border-soft);
   border-radius: 10px;
   overflow: hidden;
@@ -242,7 +242,7 @@
   font-weight: 500;
   font-size: 13px;
   border-bottom: 1px solid var(--color-border-soft);
-  background: rgba(255, 255, 255, 0.02);
+  background: var(--color-bg-row-hover);
   white-space: nowrap;
 }
 
diff --git a/web/src/pages/UsersPage.module.css b/web/src/pages/UsersPage.module.css
index 2b1ee11..3074e5c 100644
--- a/web/src/pages/UsersPage.module.css
+++ b/web/src/pages/UsersPage.module.css
@@ -29,9 +29,9 @@
 }
 .table { width: 100%; border-collapse: collapse; font-size: 13px; }
 .table th { padding: 12px 16px; text-align: left; color: var(--color-text-secondary); font-weight: 500; border-bottom: 1px solid var(--color-border-card); white-space: nowrap; }
-.table td { padding: 12px 16px; color: var(--color-text-primary); border-bottom: 1px solid rgba(42, 42, 56, 0.5); white-space: nowrap; }
+.table td { padding: 12px 16px; color: var(--color-text-primary); border-bottom: 1px solid var(--color-border-row); white-space: nowrap; }
 .table tr:last-child td { border-bottom: none; }
-.table tr:hover td { background: rgba(255, 255, 255, 0.02); }
+.table tr:hover td { background: var(--color-bg-row-hover); }
 
 .usernameLink { background: none; border: none; color: var(--color-primary); cursor: pointer; font-size: 13px; text-decoration: underline; }
 .statusBadge { padding: 2px 8px; border-radius: 4px; font-size: 12px; }
@@ -80,7 +80,7 @@
 .formError { color: var(--color-danger); font-size: 13px; margin-bottom: 12px; }
 
 /* Drawer */
-.drawerOverlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 300; }
+.drawerOverlay { position: fixed; inset: 0; background: var(--color-overlay-soft); z-index: 300; }
 .drawer {
   position: fixed; right: 0; top: 0; bottom: 0; width: 440px; max-width: 90vw;
   background: var(--color-bg-modal-elevated); border-left: 1px solid var(--color-border-card);