/* 玩值大屏 - 苹果毛玻璃风格(无品红/粉紫)仅 .wz-screen 内生效 */ .wz-screen { --background: #0c0c0e; --foreground: #fafafa; --card: rgba(255, 255, 255, 0.06); --card-foreground: #fafafa; --popover: rgba(28, 28, 32, 0.95); --popover-foreground: #fafafa; --primary: #fafafa; --primary-foreground: #0c0c0e; --secondary: rgba(255, 255, 255, 0.08); --secondary-foreground: #fafafa; --muted: rgba(255, 255, 255, 0.06); --muted-foreground: #a1a1aa; --accent: rgba(255, 255, 255, 0.1); --accent-foreground: #fafafa; --destructive: #7f1d1d; --destructive-foreground: #fafafa; --border: rgba(255, 255, 255, 0.12); --input: rgba(255, 255, 255, 0.1); --ring: rgba(255, 255, 255, 0.3); --radius: 0.75rem; --chart-1: hsl(220 70% 50%); --chart-2: hsl(160 60% 45%); --chart-3: hsl(30 80% 55%); --chart-4: hsl(200 70% 50%); --chart-5: hsl(150 60% 45%); --glass-bg: rgba(255, 255, 255, 0.06); --glass-border: rgba(255, 255, 255, 0.12); } .wz-screen * { border-color: var(--border); } .wz-screen { background-color: var(--background); color: var(--foreground); min-height: 100vh; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 8px rgba(255, 255, 255, 0.08); } 50% { box-shadow: 0 0 16px rgba(255, 255, 255, 0.12); } } @keyframes revenue-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } } .wz-screen .float-animation { animation: float 3s ease-in-out infinite; } .wz-screen .pulse-glow { animation: pulse-glow 2s ease-in-out infinite; } .wz-screen .revenue-pulse { animation: revenue-pulse 0.3s ease-in-out; } .wz-screen .card-hover { transition: all 0.3s ease; } .wz-screen .card-hover:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25); } /* 苹果毛玻璃:顶部标题栏 */ .wz-screen .wz-screen-header { background: rgba(255, 255, 255, 0.06); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--glass-border); } /* 苹果毛玻璃:中间地图区 */ .wz-screen .wz-screen-map-wrap { background: var(--glass-bg); backdrop-filter: saturate(140%) blur(16px); -webkit-backdrop-filter: saturate(140%) blur(16px); border: 1px solid var(--glass-border); border-radius: var(--radius); } /* 毛玻璃卡片通用 */ .wz-screen .wz-glass-card { background: var(--glass-bg); backdrop-filter: saturate(140%) blur(16px); -webkit-backdrop-filter: saturate(140%) blur(16px); border: 1px solid var(--glass-border); border-radius: var(--radius); } .wz-screen [class*="rounded-lg"], .wz-screen [class*="rounded-xl"] { border-radius: var(--radius); }