/** * user_web-test 专属：参考稿「金点缀 + 青绿主操作 + 玻璃层次」。 * 深浅色均应有明显差异（避免与正式站共用 localStorage 为浅色时「看不出变化」）。 * 须置于所有样式表之后加载；依赖 。 */ html[data-test-premium-shell="1"] { --ps-gold: #e8c547; --ps-gold2: #f5e08a; --ps-gold-dim: rgba(232, 197, 71, 0.4); --ps-edge: rgba(255, 255, 255, 0.09); --ps-edge-hair: rgba(255, 255, 255, 0.05); --ps-teal: #2dd4bf; --ps-teal2: #14b8a6; --ps-glass-top: rgba(14, 16, 22, 0.78); --ps-glass-panel: rgba(22, 28, 40, 0.55); --ps-ring: rgba(45, 212, 191, 0.26); --ps-ring-glow: rgba(45, 212, 191, 0.14); --test-glass-pct: 72; --ps-ease: cubic-bezier(0.22, 1, 0.36, 1); --ps-r-lg: 18px; --ps-r-md: 14px; } html[data-test-premium-shell="1"][data-theme-mode="light"] #appBgUser, html[data-test-premium-shell="1"][data-theme-mode="dark"] #appBgUser { opacity: 0; pointer-events: none; transition: opacity 0.28s var(--ps-ease); } html[data-test-premium-shell="1"][data-theme-mode="custom"] #appBgUser { opacity: 1; } /* 顶沿金线：略收饱和 + 底侧微晕，减少「塑料条」感 */ html[data-test-premium-shell="1"] .topbar { border-top: 2px solid color-mix(in srgb, var(--ps-gold) 88%, #1a1510 12%); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.04); } /* ========== 浅色：纸白玻璃 + 青金点缀 ========== */ html[data-test-premium-shell="1"][data-theme="light"] { --accent: #0d9488; --accent2: #14b8a6; --accent-bg: rgba(13, 148, 136, 0.11); --green: #0d9488; } html[data-test-premium-shell="1"][data-theme="light"] .topbar { height: 54px; padding: 0 20px; backdrop-filter: saturate(1.22) blur(20px); -webkit-backdrop-filter: saturate(1.22) blur(20px); background: linear-gradient( 180deg, color-mix(in srgb, #ffffff 88%, var(--ps-gold) 5%) 0%, color-mix(in srgb, #faf9f7 92%, var(--ps-gold) 3%) 100% ); border-bottom: 1px solid color-mix(in srgb, var(--border) 76%, var(--ps-gold) 12%); box-shadow: 0 8px 32px rgba(15, 23, 42, 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.94); } html[data-test-premium-shell="1"][data-theme="light"] .topbar-tab { transition: color 0.2s var(--ps-ease), background 0.2s var(--ps-ease), box-shadow 0.2s var(--ps-ease); } html[data-test-premium-shell="1"][data-theme="light"] .topbar-tab.active { color: #0f172a !important; font-weight: 650; background: transparent !important; box-shadow: none !important; } html[data-test-premium-shell="1"][data-theme="light"] .topbar-tab.active::after { bottom: -10px; width: 28px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #c9a227, var(--ps-gold2)); box-shadow: 0 0 14px rgba(201, 162, 39, 0.28); } html[data-test-premium-shell="1"][data-theme="light"] .topbar-balance { padding: 6px 14px 6px 11px; border-radius: 999px; background: linear-gradient(145deg, rgba(232, 197, 71, 0.28), rgba(232, 197, 71, 0.1)); border: 1px solid color-mix(in srgb, var(--ps-gold) 48%, var(--border)); box-shadow: 0 2px 16px rgba(201, 162, 39, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.35); transition: border-color 0.2s var(--ps-ease), box-shadow 0.2s var(--ps-ease); } html[data-test-premium-shell="1"][data-theme="light"] .topbar-balance svg { stroke: #b45309; } html[data-test-premium-shell="1"][data-theme="light"] .topbar-balance span { color: #92400e; font-weight: 750; } html[data-test-premium-shell="1"][data-theme="light"] .topbar-login-btn { background: linear-gradient(135deg, var(--ps-teal), #0f766e); color: #fff !important; box-shadow: 0 4px 18px rgba(13, 148, 136, 0.26); transition: box-shadow 0.2s var(--ps-ease), transform 0.2s var(--ps-ease); } html[data-test-premium-shell="1"][data-theme="light"] .topbar-login-btn:hover { box-shadow: 0 6px 22px rgba(13, 148, 136, 0.32); } html[data-test-premium-shell="1"][data-theme="light"] #panel-video .gen-bar, html[data-test-premium-shell="1"][data-theme="light"] #panel-image .gen-bar { border-radius: var(--ps-r-lg); border: 1px solid color-mix(in srgb, var(--border) 80%, var(--ps-gold) 12%); background: linear-gradient( 168deg, color-mix(in srgb, #ffffff 82%, var(--ps-gold) 3%) 0%, color-mix(in srgb, var(--bg2) 90%, #ffffff 10%) 100% ); backdrop-filter: saturate(1.2) blur(22px); -webkit-backdrop-filter: saturate(1.2) blur(22px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.88) inset, 0 12px 40px rgba(15, 23, 42, 0.055), 0 0 0 1px rgba(15, 23, 42, 0.035); } html[data-test-premium-shell="1"][data-theme="light"] .gen-row { border-radius: var(--ps-r-md); border-color: color-mix(in srgb, var(--border) 82%, var(--ps-gold) 14%); background: color-mix(in srgb, var(--bg2) 94%, #ffffff 6%); backdrop-filter: blur(14px) saturate(1.08); -webkit-backdrop-filter: blur(14px) saturate(1.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82); } html[data-test-premium-shell="1"][data-theme="light"] .gen-row:focus-within { border-color: color-mix(in srgb, var(--border) 70%, var(--ps-gold) 26%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88); } html[data-test-premium-shell="1"][data-theme="light"] .gen-submit-btn { width: 42px; height: 42px; background: linear-gradient(145deg, var(--ps-teal), #0f766e); box-shadow: 0 4px 18px rgba(13, 148, 136, 0.28); transition: box-shadow 0.2s var(--ps-ease), transform 0.15s var(--ps-ease); } html[data-test-premium-shell="1"][data-theme="light"] .gen-submit-btn:hover:not(:disabled) { box-shadow: 0 6px 24px rgba(13, 148, 136, 0.34); } html[data-test-premium-shell="1"][data-theme="light"] #panel-video .feed .result-card, html[data-test-premium-shell="1"][data-theme="light"] #panel-image .feed .result-card { border-radius: var(--ps-r-lg); border: 1px solid color-mix(in srgb, var(--border) 72%, var(--ps-gold) 10%); background: linear-gradient( 180deg, color-mix(in srgb, var(--bg2) 94%, #ffffff 6%) 0%, color-mix(in srgb, var(--bg3) 88%, #ffffff 12%) 100% ); backdrop-filter: blur(14px) saturate(1.06); -webkit-backdrop-filter: blur(14px) saturate(1.06); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75) inset, 0 14px 36px rgba(15, 23, 42, 0.05); } html[data-test-premium-shell="1"][data-theme="light"] #panel-home .home-pf-card { border-color: color-mix(in srgb, var(--border) 62%, var(--ps-gold) 14%); box-shadow: 0 10px 32px rgba(15, 23, 42, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.75); } html[data-test-premium-shell="1"][data-theme="light"] .theme-hub-popover { background: color-mix(in srgb, #ffffff 76%, var(--bg2) 24%); backdrop-filter: saturate(1.2) blur(24px); -webkit-backdrop-filter: saturate(1.2) blur(24px); border-color: color-mix(in srgb, var(--border) 82%, var(--ps-gold) 10%); box-shadow: 0 20px 48px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9); } html[data-test-premium-shell="1"][data-theme="light"] .user-menu { background: color-mix(in srgb, #ffffff 88%, var(--bg2) 12%); backdrop-filter: saturate(1.15) blur(18px); -webkit-backdrop-filter: saturate(1.15) blur(18px); border-color: color-mix(in srgb, var(--border) 85%, var(--ps-gold) 8%); box-shadow: 0 16px 40px rgba(15, 23, 42, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.85); } /* ========== 深色：更静的体积光 + 玻璃层次 ========== */ html[data-test-premium-shell="1"][data-theme="dark"] { --accent: var(--ps-teal); --accent2: #5eead4; --accent-bg: rgba(45, 212, 191, 0.12); --green: var(--ps-teal); --glow: 0 0 28px rgba(45, 212, 191, 0.14); --cosmos-base: radial-gradient(ellipse 145% 110% at 50% -5%, #1a2235 0%, #0c1018 42%, #05070c 100%); } html[data-test-premium-shell="1"][data-theme="dark"] .app-bg-cosmos::before { opacity: 0.86; } html[data-test-premium-shell="1"][data-theme="dark"] .app-bg-cosmos::after { background: radial-gradient(ellipse 120% 80% at 50% 0%, rgba(45, 212, 191, 0.055) 0%, transparent 52%); } html[data-test-premium-shell="1"][data-theme="dark"] .topbar { height: 54px; padding: 0 22px; gap: 10px; background: linear-gradient(180deg, rgba(18, 22, 30, 0.92) 0%, rgba(12, 14, 20, 0.88) 100%); backdrop-filter: blur(22px) saturate(1.12); -webkit-backdrop-filter: blur(22px) saturate(1.12); border-bottom: 1px solid var(--ps-edge); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.045) inset, 0 12px 40px rgba(0, 0, 0, 0.35); } html[data-test-premium-shell="1"][data-theme="dark"] .topbar-tab { transition: color 0.2s var(--ps-ease), background 0.2s var(--ps-ease); } html[data-test-premium-shell="1"][data-theme="dark"] .topbar-logo { border-radius: 10px; } html[data-test-premium-shell="1"][data-theme="dark"] .topbar-brand { letter-spacing: 0.02em; font-weight: 750; } html[data-test-premium-shell="1"][data-theme="dark"] .topbar-nav { margin-left: 24px; gap: 4px; } html[data-test-premium-shell="1"][data-theme="dark"] .topbar-tab { padding: 9px 17px; border-radius: 10px; font-size: calc(13.5 * 1rem / 16); color: var(--text2); } html[data-test-premium-shell="1"][data-theme="dark"] .topbar-tab:hover { color: var(--text); background: rgba(255, 255, 255, 0.045); } html[data-test-premium-shell="1"][data-theme="dark"] .topbar-tab.active { color: #f1f5fd; background: transparent; font-weight: 650; } html[data-test-premium-shell="1"][data-theme="dark"] .topbar-tab.active::after { bottom: -11px; width: 30px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--ps-gold), var(--ps-gold2)); box-shadow: 0 0 16px rgba(232, 197, 71, 0.38); } html[data-test-premium-shell="1"][data-theme="dark"] .topbar-balance { padding: 6px 15px 6px 12px; border-radius: 999px; background: linear-gradient(145deg, rgba(232, 197, 71, 0.22), rgba(232, 197, 71, 0.07)); border: 1px solid var(--ps-gold-dim); box-shadow: 0 0 20px rgba(232, 197, 71, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1); transition: border-color 0.2s var(--ps-ease), background 0.2s var(--ps-ease); } html[data-test-premium-shell="1"][data-theme="dark"] .topbar-balance:hover { border-color: rgba(232, 197, 71, 0.55); background: linear-gradient(145deg, rgba(232, 197, 71, 0.28), rgba(232, 197, 71, 0.1)); } html[data-test-premium-shell="1"][data-theme="dark"] .topbar-balance svg { stroke: var(--ps-gold); } html[data-test-premium-shell="1"][data-theme="dark"] .topbar-balance span { color: var(--ps-gold2); } html[data-test-premium-shell="1"][data-theme="dark"] .topbar-avatar { border-color: rgba(232, 197, 71, 0.32); background: rgba(30, 38, 52, 0.88); } html[data-test-premium-shell="1"][data-theme="dark"] .topbar-theme-hub-btn { border-radius: 10px; transition: background 0.2s var(--ps-ease), color 0.2s var(--ps-ease); } html[data-test-premium-shell="1"][data-theme="dark"] .topbar-theme-hub-btn:hover { background: rgba(255, 255, 255, 0.055); color: var(--text); } html[data-test-premium-shell="1"][data-theme="dark"] .topbar-login-btn { border-radius: 10px; background: linear-gradient(135deg, var(--ps-teal), var(--ps-teal2)); color: #061016; font-weight: 650; box-shadow: 0 4px 20px rgba(45, 212, 191, 0.26); transition: box-shadow 0.2s var(--ps-ease); } html[data-test-premium-shell="1"][data-theme="dark"] .topbar-login-btn:hover { box-shadow: 0 6px 26px rgba(45, 212, 191, 0.34); } html[data-test-premium-shell="1"][data-theme="dark"] .theme-hub-popover { background: linear-gradient(165deg, rgba(26, 32, 44, 0.96) 0%, rgba(16, 20, 28, 0.94) 100%); backdrop-filter: blur(24px) saturate(1.08); -webkit-backdrop-filter: blur(24px) saturate(1.08); border-color: var(--ps-edge); box-shadow: 0 24px 56px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.045); } html[data-test-premium-shell="1"][data-theme="dark"] .user-menu { background: linear-gradient(180deg, rgba(26, 32, 42, 0.97) 0%, rgba(18, 22, 30, 0.95) 100%); backdrop-filter: blur(18px) saturate(1.06); -webkit-backdrop-filter: blur(18px) saturate(1.06); border-color: var(--ps-edge); box-shadow: 0 20px 48px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.04); } html[data-test-premium-shell="1"][data-theme="dark"] #panel-video .gen-bar, html[data-test-premium-shell="1"][data-theme="dark"] #panel-image .gen-bar { margin: 0 20px max(14px, env(safe-area-inset-bottom, 0px)); padding: 18px 22px 14px; border-radius: var(--ps-r-lg); border: 1px solid color-mix(in srgb, var(--ps-edge) 55%, var(--ps-gold) 22%); background: linear-gradient( 165deg, rgba(28, 36, 52, calc(var(--test-glass-pct) / 100)) 0%, rgba(16, 20, 30, calc(var(--test-glass-pct) / 100 * 0.76)) 100% ) !important; backdrop-filter: blur(20px) saturate(1.08); -webkit-backdrop-filter: blur(20px) saturate(1.08); box-shadow: 0 14px 48px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.065), 0 0 0 1px rgba(255, 255, 255, 0.04); } html[data-test-premium-shell="1"][data-theme="dark"] #panel-video.align-left .gen-bar, html[data-test-premium-shell="1"][data-theme="dark"] #panel-video.align-right .gen-bar, html[data-test-premium-shell="1"][data-theme="dark"] #panel-image.align-left .gen-bar, html[data-test-premium-shell="1"][data-theme="dark"] #panel-image.align-right .gen-bar { margin: 8px 14px 8px 18px; } html[data-test-premium-shell="1"][data-theme="dark"] .gen-row { border-radius: var(--ps-r-md); border: 1px solid var(--ps-edge-hair); background: linear-gradient( 180deg, rgba(34, 42, 58, calc(var(--test-glass-pct) / 100 * 0.78)) 0%, rgba(22, 28, 40, calc(var(--test-glass-pct) / 100 * 0.6)) 100% ) !important; backdrop-filter: blur(14px) saturate(1.05); -webkit-backdrop-filter: blur(14px) saturate(1.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.048); } html[data-test-premium-shell="1"][data-theme="dark"] .gen-row:focus-within { border-color: color-mix(in srgb, rgba(255, 255, 255, 0.14) 62%, rgba(232, 197, 71, 0.38) 38%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 0 0 1px rgba(232, 197, 71, 0.1); } html[data-test-premium-shell="1"][data-theme="dark"] .gen-submit-btn { width: 42px; height: 42px; background: linear-gradient(145deg, var(--ps-teal), var(--ps-teal2)); box-shadow: 0 4px 22px rgba(45, 212, 191, 0.36); transition: box-shadow 0.2s var(--ps-ease); } html[data-test-premium-shell="1"][data-theme="dark"] .gen-submit-btn:hover:not(:disabled) { box-shadow: 0 8px 28px rgba(45, 212, 191, 0.44); } html[data-test-premium-shell="1"][data-theme="dark"] #panel-video .feed .result-card, html[data-test-premium-shell="1"][data-theme="dark"] #panel-image .feed .result-card { border-radius: var(--ps-r-lg); border: 1px solid color-mix(in srgb, var(--ps-edge) 58%, var(--ps-gold) 18%); background: linear-gradient( 180deg, rgba(30, 38, 52, calc(var(--test-glass-pct) / 100 * 0.9)) 0%, rgba(18, 22, 32, calc(var(--test-glass-pct) / 100 * 0.69)) 100% ) !important; backdrop-filter: blur(14px) saturate(1.04); -webkit-backdrop-filter: blur(14px) saturate(1.04); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.055); } html[data-test-premium-shell="1"][data-theme="dark"] #panel-video #vid-feed .feed-empty, html[data-test-premium-shell="1"][data-theme="dark"] #panel-image #img-feed .feed-empty { border-radius: var(--ps-r-lg); border: 1px solid color-mix(in srgb, var(--ps-edge) 52%, var(--ps-gold) 20%); background: linear-gradient( 180deg, rgba(28, 36, 52, calc(var(--test-glass-pct) / 100 * 0.76)) 0%, rgba(16, 20, 30, calc(var(--test-glass-pct) / 100 * 0.58)) 100% ) !important; backdrop-filter: blur(12px) saturate(1.03); -webkit-backdrop-filter: blur(12px) saturate(1.03); } html[data-test-premium-shell="1"][data-theme="dark"] .rc-label { background: rgba(255, 255, 255, 0.055); border: 1px solid rgba(255, 255, 255, 0.055); } html[data-test-premium-shell="1"][data-theme="dark"] .feed { padding: 20px 18px; gap: 18px; } html[data-test-premium-shell="1"][data-theme="dark"] #panel-video .vid-feed-cards { gap: 18px; } /* * 结果双列（参考图）：测试站专属。 * ≥700px 且有结果时启用；与靠左/靠右/居中堆叠无关。 * 无结果时仍为单列空状态（不套 .has-results）。 */ @media (min-width: 700px) { html[data-test-premium-shell="1"] #panel-video.has-results .vid-feed-cards { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-content: start; } html[data-test-premium-shell="1"] #panel-image.has-results #img-feed.feed { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-content: start; } html[data-test-premium-shell="1"] #panel-video .vid-feed-cards .feed-empty, html[data-test-premium-shell="1"] #panel-image #img-feed .feed-empty { grid-column: 1 / -1; } } html[data-test-premium-shell="1"][data-theme="dark"] #panel-video .tb-select, html[data-test-premium-shell="1"][data-theme="dark"] #panel-image .tb-select { border-radius: 10px; } html[data-test-premium-shell="1"][data-theme="dark"] .ref-add { border-radius: 12px; border-color: rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.028); } html[data-test-premium-shell="1"][data-theme="dark"] #panel-home .home-pf-card { backdrop-filter: blur(12px) saturate(1.04); -webkit-backdrop-filter: blur(12px) saturate(1.04); border-color: var(--ps-edge); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.042); } @media (max-width: 640px) { html[data-test-premium-shell="1"][data-theme="dark"] .topbar { height: 48px; padding: 0 12px; gap: 6px; } html[data-test-premium-shell="1"][data-theme="dark"] .topbar-nav { margin-left: 12px; gap: 0; } html[data-test-premium-shell="1"][data-theme="dark"] .topbar-tab { padding: 6px 10px; font-size: calc(12 * 1rem / 16); } html[data-test-premium-shell="1"][data-theme="dark"] .topbar-balance { padding: 4px 10px; } html[data-test-premium-shell="1"][data-theme="dark"] .gen-submit-btn, html[data-test-premium-shell="1"][data-theme="light"] .gen-submit-btn { width: 38px; height: 38px; } } /* ========== 测试站：靠左/靠右并排时可拖调「编辑区 | 结果区」宽度 ========== */ html[data-test-premium-shell="1"] .workspace-split-handle { display: none; flex-shrink: 0; width: 10px; margin: 0 -2px; z-index: 2; cursor: col-resize; touch-action: none; align-self: stretch; background: transparent; border: none; padding: 0; box-sizing: border-box; } html[data-test-premium-shell="1"] .workspace-split-handle:not([hidden]) { display: flex; flex-direction: column; align-items: center; justify-content: center; } html[data-test-premium-shell="1"] .workspace-split-handle::before { content: ""; width: 3px; height: 28px; border-radius: 2px; background: color-mix(in srgb, var(--border) 70%, var(--text3) 30%); opacity: 0.55; transition: opacity 0.18s ease, background 0.18s ease; } html[data-test-premium-shell="1"] .workspace-split-handle:hover::before, html[data-test-premium-shell="1"] .workspace-split-handle:focus-visible::before { opacity: 0.95; } html[data-test-premium-shell="1"] .workspace-split-handle--dragging::before { background: color-mix(in srgb, var(--text2) 55%, var(--accent) 45%); } /* 左：编辑 | 缝 | 结果 */ html[data-test-premium-shell="1"] #panel-video.align-left.workspace-split-active .gen-bar, html[data-test-premium-shell="1"] #panel-image.align-left.workspace-split-active .gen-bar { order: 0; } html[data-test-premium-shell="1"] #panel-video.align-left.workspace-split-active .workspace-split-handle, html[data-test-premium-shell="1"] #panel-image.align-left.workspace-split-active .workspace-split-handle { order: 1; } html[data-test-premium-shell="1"] #panel-video.align-left.workspace-split-active .feed, html[data-test-premium-shell="1"] #panel-image.align-left.workspace-split-active .feed { order: 2; } /* 右：结果 | 缝 | 编辑 */ html[data-test-premium-shell="1"] #panel-video.align-right.workspace-split-active .feed, html[data-test-premium-shell="1"] #panel-image.align-right.workspace-split-active .feed { order: 0; } html[data-test-premium-shell="1"] #panel-video.align-right.workspace-split-active .workspace-split-handle, html[data-test-premium-shell="1"] #panel-image.align-right.workspace-split-active .workspace-split-handle { order: 1; } html[data-test-premium-shell="1"] #panel-video.align-right.workspace-split-active .gen-bar, html[data-test-premium-shell="1"] #panel-image.align-right.workspace-split-active .gen-bar { order: 2; } html[data-test-premium-shell="1"] .panel.workspace-split-active .gen-bar { min-width: 240px; } @media (max-width: 768px) { html[data-test-premium-shell="1"] .workspace-split-handle { display: none !important; } }