Merge remote-tracking branch 'origin/master'

# Conflicts:
#	.idea/material_theme_project_new.xml

Author: Geniusay

.idea/material_theme_project_new.xml

@@ -0,0 +1,232 @@
+
+/* 强制覆盖 Modal 默认样式 */
+.modal-panel.fullscreen-preview {
+    width: 100vw !important;
+    height: 100vh !important;
+    max-width: none !important;
+    max-height: none !important;
+    border-radius: 0 !important;
+    padding: 0 !important;
+    background: #000 !important;
+    box-shadow: none !important;
+    border: none !important;
+    display: flex !important;
+    flex-direction: column !important;
+    position: fixed !important;
+    top: 0 !important;
+    left: 0 !important;
+    margin: 0 !important;
+    transform: none !important;
+}
+
+.preview-engine-container {
+    --glass: rgba(20, 20, 20, 0.4);
+    --glass-border: rgba(255, 255, 255, 0.08);
+    --accent: #fff;
+    --text: #fff;
+    --text-sec: rgba(255, 255, 255, 0.5);
+    --ease-spring: cubic-bezier(0.19, 1, 0.22, 1);
+    --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
+    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
+}
+
+/* --- 背景模糊层 --- */
+.ambient-bg {
+    position: absolute; inset: -100px;
+    background-size: cover; background-position: center;
+    filter: blur(120px) brightness(0.3);
+    z-index: 0; transition: background-image 1.2s ease-in-out;
+    opacity: 0.8;
+    transform: scale(1.1); /* 防止模糊边缘 */
+}
+
+/* --- 核心预览舞台 --- */
+.stage {
+    flex: 1;
+    position: relative;
+    z-index: 10;
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+    background: #000;
+}
+
+.scene-wrapper {
+    position: absolute;
+    top: 50%; left: 50%;
+    transform: translate(-50%, -50%);
+    /* Size will be set by JS to cover screen */
+    box-shadow: none;
+    border-radius: 0;
+    transform-origin: center center;
+    transition: opacity 0.6s ease;
+}
+
+.base-img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover; /* Fallback */
+    pointer-events: none;
+    box-shadow: none;
+    border-radius: 0;
+}
+
+/* --- 渲染引擎 (Mini Version) --- */
+.warp-layer { 
+    position: absolute; top: 0; left: 0; 
+    width: 100%; height: 100%;
+    transform-origin: 0 0; 
+    pointer-events: none; 
+    z-index: 20; 
+}
+.screen { background: #000; position: relative; overflow: hidden; backface-visibility: hidden; will-change: transform; }
+.wallpaper { width: 100%; height: 100%; background-size: cover; background-position: center; transform: scale(1.02); transition: background-image 0.5s ease; }
+
+.fx-layer div { position: absolute; inset: 0; pointer-events: none; }
+.fx-border { box-shadow: inset 0 0 0 1px #000; z-index: 31; }
+.fx-glare { mix-blend-mode: screen; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.1) 45%, transparent 60%); opacity: 0.2; }
+.fx-noise { mix-blend-mode: overlay; opacity: 0.08; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
+
+/* OS UI */
+.os-ui { position: absolute; inset: 0; z-index: 25; color: #fff; display: flex; flex-direction: column; }
+.os-ui.dark { color: #000; }
+.ui-scale { width: 100%; height: 100%; transform-origin: top left; }
+
+/* 悬浮 UI 容器 - 自动隐藏 */
+.dock-container {
+    transition: transform 0.4s var(--ease-spring), opacity 0.4s ease;
+    padding-bottom: 20px;
+}
+.preview-engine-container:hover .dock-container { opacity: 1; transform: translateX(-50%) translateY(0); }
+/* 默认稍微淡出，鼠标移入完全显示，或者一直显示但质感高级 */
+.dock-container { opacity: 0.9; }
+
+/* 切换器 (Segmented Control) - 更高级的毛玻璃 */
+.switcher {
+    display: flex; 
+    background: rgba(10, 10, 10, 0.5); 
+    backdrop-filter: blur(25px) saturate(150%);
+    -webkit-backdrop-filter: blur(25px) saturate(150%);
+    padding: 3px; border-radius: 100px; 
+    border: 1px solid rgba(255,255,255,0.08);
+    position: relative;
+    pointer-events: auto;
+    margin-bottom: 16px;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
+}
+.switch-opt {
+    padding: 8px 24px; font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.5);
+    cursor: pointer; border-radius: 20px; transition: color 0.3s; position: relative; z-index: 2;
+}
+.switch-opt:hover { color: #fff; }
+.switch-opt.active { color: #000; font-weight: 600; }
+.switch-bg {
+    position: absolute; top: 3px; left: 3px; bottom: 3px; width: 50%;
+    background: #fff; border-radius: 100px;
+    transition: transform 0.4s var(--ease-spring); z-index: 1;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
+}
+
+/* 缩略图列表 - 扑克牌堆叠效果 */
+.thumbs-rail {
+    height: 140px; /* 增加高度以容纳卡片 */
+    width: auto;
+    background: transparent; /* 移除背景，靠卡片自身 */
+    border: none;
+    box-shadow: none;
+    display: flex; 
+    align-items: flex-end; 
+    justify-content: center;
+    padding: 0 40px; 
+    gap: 0; /* 移除间距，通过负 margin 堆叠 */
+    overflow-x: visible; /* 允许卡片溢出 */
+    pointer-events: none; /* 容器不阻挡，只阻挡卡片 */
+}
+
+.thumbs-rail::-webkit-scrollbar { display: none; }
+
+.thumb {
+    flex: 0 0 80px; height: 110px; 
+    border-radius: 16px;
+    background-size: cover; background-position: center;
+    cursor: pointer; 
+    opacity: 0.6; 
+    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+    border: 1px solid rgba(255,255,255,0.15); 
+    position: relative;
+    margin-left: -35px; /* 负边距实现堆叠 */
+    box-shadow: -5px 0 15px rgba(0,0,0,0.3); /* 阴影增加层次 */
+    transform-origin: bottom center;
+    pointer-events: auto;
+    filter: brightness(0.6) grayscale(0.6);
+    z-index: 1;
+}
+
+/* 首张卡片不需要负边距 */
+.thumb:first-child { margin-left: 0; }
+
+/* 悬停效果 - 抽牌 */
+.thumb:hover { 
+    margin-left: 10px; /* 推开一点 */
+    margin-right: 10px;
+    transform: translateY(-20px) scale(1.1) rotate(0deg) !important; 
+    opacity: 1; 
+    filter: brightness(1) grayscale(0);
+    z-index: 100; /* 浮到最上层 */
+    box-shadow: 0 15px 30px rgba(0,0,0,0.5);
+}
+
+/* 激活状态 - 高亮 */
+.thumb.active { 
+    transform: translateY(-30px) scale(1.15); 
+    opacity: 1; 
+    border-color: #fff; 
+    box-shadow: 0 0 20px rgba(255,255,255,0.4), 0 20px 40px rgba(0,0,0,0.6);
+    filter: brightness(1) grayscale(0);
+    z-index: 50;
+    margin-left: 5px;
+    margin-right: 5px;
+}
+
+/* 兄弟元素避让动画 (可选，需 JS 配合或复杂 CSS 选择器，暂用简单 hover) */
+.thumb:hover ~ .thumb { transform: translateX(10px); }
+
+/* 标签优化 */
+.thumb-tag {
+    bottom: 10px; left: 50%; transform: translateX(-50%);
+    font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px;
+    color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.8);
+    opacity: 0; transition: 0.3s; pointer-events: none;
+}
+.thumb:hover .thumb-tag, .thumb.active .thumb-tag { opacity: 1; bottom: -25px; }
+
+/* 自动轮播进度条 (可选) */
+.progress-bar {
+    position: absolute; bottom: 0; left: 0; height: 3px; background: #fff;
+    width: 0%; transition: width 0.1s linear; opacity: 0.8;
+}
+.thumb.active .progress-bar { width: 100%; transition: width 5s linear; } /* 假设5秒轮播 */
+
+/* 关闭按钮覆盖 - 悬浮圆钮 */
+.modal-close {
+    position: fixed !important; /* Force fixed */
+    top: 24px !important; right: 24px !important;
+    width: 40px !important; height: 40px !important;
+    background: rgba(30,30,30,0.4) !important;
+    backdrop-filter: blur(20px) !important;
+    -webkit-backdrop-filter: blur(20px) !important;
+    border: 1px solid rgba(255,255,255,0.1) !important;
+    border-radius: 50% !important;
+    transition: 0.3s !important;
+    z-index: 1000 !important;
+}
+.modal-close:hover {
+    background: rgba(255,255,255,0.2) !important;
+    transform: rotate(90deg) scale(1.1);
+}
+.modal-close svg { width: 20px; height: 20px; fill: #fff; }
+
+/* 移除原有的 modal 默认样式干扰 */
+.modal-panel { box-shadow: none !important; animation: zoomIn 0.3s var(--ease-expo); }
+@keyframes zoomIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }