/* ============================================================================ * AI 陪伴 · Liquid Glass 主题层 (v1.6.1) * * 一个纯视觉的"苹果液态玻璃"增强层：升级背景光晕、把卡片 / 导航 / 按钮 / * 输入框统一玻璃化、加丝滑微动效。只需在 引入这一个文件即可， * 不依赖任何 HTML 结构或 JS 改动。 * * v1.6.1 改进： * - 多层背景光晕（樱粉 + 雾紫 + 暖白）+ 噪声纹理，质感更近真玻璃 * - 主按钮高光、悬浮态更细腻；按下回弹更克制 * - 输入框 focus ring 用 3 色渐变，去掉廉价的单色光晕 * - 卡片悬浮态：浮起 1.5px + 高光描边渐显（之前是 2px，太跳） * - .hero-blob / .floating-card / .chip / .pill 等可选工具类 * - prefers-color-scheme: dark 骨架（非默认开启，避免破坏现有页面） * * 设计原则： * - 半透明 + backdrop-blur + 高光描边 + 柔和多层投影 = 玻璃质感 * - 背景漂浮的彩色光斑透过玻璃，才有"液态"通透感 * - 所有交互走统一的丝滑缓动 * - 覆盖 Tailwind utility 时才用 !important，尽量克制 * * Copyright (c) 2026 AI 陪伴 Contributors. MIT License. * ========================================================================== */ :root { /* ─ 玻璃基色 ─ */ --glass-bg: rgba(255, 255, 255, 0.58); --glass-bg-strong: rgba(255, 255, 255, 0.78); --glass-bg-soft: rgba(255, 255, 255, 0.42); --glass-border: rgba(255, 255, 255, 0.7); --glass-border-soft: rgba(255, 255, 255, 0.45); --glass-blur: 24px; --glass-blur-strong: 36px; /* ─ 阴影 ─ 多层叠加才有"飘起来"的感觉 */ --glass-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 -1px 0 rgba(255, 190, 165, 0.20) inset, 0 10px 30px -8px rgba(92, 54, 39, 0.10), 0 4px 10px -4px rgba(255, 116, 87, 0.11); --glass-shadow-hover: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 -1px 0 rgba(255, 190, 165, 0.24) inset, 0 22px 56px -10px rgba(92, 54, 39, 0.16), 0 8px 18px -8px rgba(255, 116, 87, 0.20); --glass-shadow-press: 0 1px 0 rgba(255, 255, 255, 0.85) inset, 0 4px 14px -4px rgba(255, 116, 87, 0.17); /* ─ 缓动 ─ */ --ease-silk: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ─ 初见主色 ─ 暖橘珊瑚 + 奶油中性 */ --sakura: #FFAD94; --sakura-deep: #FF7457; --sakura-soft: #FFF0E7; --mist-violet: #FFDCCF; --mist-blue: #FFE8D8; --ink: #2C211D; --ink-mute: #8F776D; /* ─ ring (focus 用渐变) ─ */ --ring-grad: linear-gradient(135deg, #FFAD94 0%, #FF8E70 52%, #FFD0BF 100%); } /* ============================================================================ * 背景层：3 层光晕 + 极淡噪点，给整页一个"奶油玻璃"底 * ========================================================================== */ body { position: relative; background-color: #FFF9F5; /* 极淡的纸纹噪声，让纯色背景不死板 */ background-image: radial-gradient(rgba(92, 54, 39, 0.012) 1px, transparent 1px), radial-gradient(rgba(255, 116, 87, 0.014) 1px, transparent 1px); background-size: 4px 4px, 8px 8px; background-position: 0 0, 2px 2px; } body::before, body::after, body > .glass-aurora { content: ""; position: fixed; z-index: -2; border-radius: 50%; filter: blur(90px); pointer-events: none; will-change: transform, opacity; } body::before { /* 蜜桃橘 — 左上 */ width: 56vw; height: 56vw; max-width: 760px; max-height: 760px; top: -16vw; left: -12vw; opacity: 0.6; background: radial-gradient(circle at 30% 30%, rgba(255, 173, 148, 0.78), rgba(255, 173, 148, 0) 70%); animation: glass-drift-a 28s var(--ease-silk) infinite alternate; } body::after { /* 奶油杏 — 右下 */ width: 48vw; height: 48vw; max-width: 660px; max-height: 660px; bottom: -18vw; right: -14vw; opacity: 0.55; background: radial-gradient(circle at 60% 60%, rgba(255, 226, 211, 0.78), rgba(255, 208, 191, 0.52) 40%, rgba(255, 226, 211, 0) 75%); animation: glass-drift-b 34s var(--ease-silk) infinite alternate; } /* 可选第三层光晕：页面里加
就显出 */ body > .glass-aurora { width: 40vw; height: 40vw; max-width: 520px; max-height: 520px; top: 30vh; left: 50vw; transform: translateX(-50%); opacity: 0.35; background: radial-gradient(circle, rgba(255, 240, 231, 0.92), rgba(255, 240, 231, 0) 70%); animation: glass-drift-c 24s var(--ease-silk) infinite alternate; } @keyframes glass-drift-a { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(6vw, 8vh, 0) scale(1.15); } } @keyframes glass-drift-b { 0% { transform: translate3d(0, 0, 0) scale(1.05); } 100% { transform: translate3d(-5vw, -6vh, 0) scale(1); } } @keyframes glass-drift-c { 0% { transform: translate(-50%, 0) scale(0.95); } 100% { transform: translate(-50%, -6vh) scale(1.1); } } /* ============================================================================ * 玻璃卡片 * - 命中现有的 shadow-sakura / shadow-card 容器 + .glass 工具类 * - 排除已有彩色背景（按钮/标签/头像方框等）的元素，避免吃掉它们的颜色 * ========================================================================== */ .shadow-sakura:not([class*="bg-gradient"]):not([class*="bg-sakura"]):not(.bg-pink-500):not(.btn-primary), .shadow-card:not([class*="bg-gradient"]):not([class*="bg-sakura"]):not(.bg-pink-500):not(.btn-primary), .glass { background: var(--glass-bg) !important; backdrop-filter: blur(var(--glass-blur)) saturate(180%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%); border: 1px solid var(--glass-border) !important; box-shadow: var(--glass-shadow) !important; transition: box-shadow 0.5s var(--ease-silk), transform 0.5s var(--ease-silk), border-color 0.5s var(--ease-silk); } .glass-strong { background: var(--glass-bg-strong) !important; backdrop-filter: blur(var(--glass-blur-strong)) saturate(180%); -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(180%); } .glass-soft { background: var(--glass-bg-soft) !important; } /* hover 浮起：1.5px 微浮 + 描边渐亮 */ a.shadow-sakura:not([class*="bg-gradient"]):not([class*="bg-sakura"]):not(.btn-primary):hover, a.shadow-card:not([class*="bg-gradient"]):not([class*="bg-sakura"]):not(.btn-primary):hover, button.shadow-sakura:not([class*="bg-gradient"]):not([class*="bg-sakura"]):not(.btn-primary):hover, .glass-hover:hover { box-shadow: var(--glass-shadow-hover) !important; border-color: rgba(255, 204, 184, 0.92) !important; transform: translateY(-1.5px); } /* ============================================================================ * 玻璃导航栏（自动命中 header.sticky / nav.sticky / .glass-nav / .fixed top-0） * ========================================================================== */ header.sticky, nav.sticky, nav.fixed.top-0, .glass-nav { background: rgba(255, 255, 255, 0.62) !important; backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); border-bottom: 1px solid rgba(255, 255, 255, 0.55) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 4px 24px rgba(92, 54, 39, 0.06); } /* ============================================================================ * 玻璃输入 / 文本域 / 选择框 * focus ring 用三色渐变描边，比单色光晕高级 * ========================================================================== */ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), textarea, select { background: rgba(255, 255, 255, 0.6) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: box-shadow 0.35s var(--ease-silk), border-color 0.35s var(--ease-silk), background 0.35s var(--ease-silk); } input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):focus, textarea:focus, select:focus { background: rgba(255, 255, 255, 0.82) !important; box-shadow: 0 0 0 1px rgba(255, 116, 87, 0.42), 0 0 0 5px rgba(255, 116, 87, 0.14), 0 8px 20px -10px rgba(255, 116, 87, 0.28); outline: none !important; } /* ============================================================================ * 玻璃按钮 * ========================================================================== */ button, a, .btn { transition: transform 0.35s var(--ease-silk), box-shadow 0.35s var(--ease-silk), filter 0.35s var(--ease-silk), background 0.35s var(--ease-silk); } .bg-sakura, .bg-sakura-deep, button.bg-sakura, .btn-primary, [class*="from-sakura"][class*="to-sakura"] { background-image: linear-gradient(135deg, #FFB69F 0%, #FF9273 45%, #FF7457 100%) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 -1px 0 rgba(160, 72, 48, 0.18) inset, 0 10px 24px -8px rgba(255, 116, 87, 0.44) !important; } .bg-sakura:hover, .bg-sakura-deep:hover, button.bg-sakura:hover, .btn-primary:hover, [class*="from-sakura"][class*="to-sakura"]:hover { transform: translateY(-1.5px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 -1px 0 rgba(160, 72, 48, 0.20) inset, 0 18px 38px -10px rgba(255, 116, 87, 0.52) !important; filter: saturate(1.06) brightness(1.02); } .bg-sakura:active, button.bg-sakura:active, .btn-primary:active, [class*="from-sakura"][class*="to-sakura"]:active { transform: translateY(0) scale(0.985); box-shadow: var(--glass-shadow-press) !important; } /* ============================================================================ * 玻璃滚动条 * ========================================================================== */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(255, 116, 87, 0.38), rgba(255, 196, 176, 0.42)); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(255, 116, 87, 0.62), rgba(255, 173, 148, 0.58)); background-clip: content-box; } /* ============================================================================ * 可选工具类（hero 区 / featured / chips 等场景） * 都是新增的：现有页面不会改变，要用时主动加 class * ========================================================================== */ /* hero 区背后大色块光晕（任意 element 加 .hero-blob 都行） */ .hero-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.55; pointer-events: none; z-index: -1; } .hero-blob.is-pink { background: radial-gradient(circle, rgba(255, 173, 148, 0.82), rgba(255, 173, 148, 0) 70%); } .hero-blob.is-violet { background: radial-gradient(circle, rgba(255, 208, 191, 0.72), rgba(255, 208, 191, 0) 70%); } .hero-blob.is-blue { background: radial-gradient(circle, rgba(255, 226, 211, 0.72), rgba(255, 226, 211, 0) 70%); } .hero-blob.is-cream { background: radial-gradient(circle, rgba(255, 240, 231, 0.96), rgba(255, 240, 231, 0) 70%); } /* "悬浮卡片"：插图周围常用 */ .floating-card { position: relative; background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 22px; box-shadow: var(--glass-shadow); animation: floating-card 6s var(--ease-silk) infinite alternate; } @keyframes floating-card { 0% { transform: translateY(0); } 100% { transform: translateY(-6px); } } /* glass-chip：小标签，比 px-3 py-1 更稳定。 注意：不叫 .chip，因为 create.html 已经有同名 class 作为性格选择标签 */ .glass-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; font-size: 12px; font-weight: 600; color: var(--sakura-deep); background: rgba(255, 240, 231, 0.78); border: 1px solid rgba(255, 190, 165, 0.52); border-radius: 999px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* pill：标签胶囊，多色 */ .pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; font-size: 11px; font-weight: 600; color: var(--ink-mute); background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(0, 0, 0, 0.04); border-radius: 999px; backdrop-filter: blur(6px); } /* "ghost link"：主导航/底部链接用得到 */ .glass-link { color: var(--ink-mute); transition: color 0.3s var(--ease-silk); } .glass-link:hover { color: var(--sakura-deep); } /* ============================================================================ * 进场动画：让首屏更"丝滑"地浮现 * ========================================================================== */ @keyframes glass-fade-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } main > *, section, .glass, .shadow-sakura, .shadow-card { animation: glass-fade-in 0.7s var(--ease-silk) both; } /* 顺序错峰（任意元素加 .glass-stagger 让其子级依次浮现） */ .glass-stagger > *:nth-child(1) { animation-delay: 0.00s; } .glass-stagger > *:nth-child(2) { animation-delay: 0.06s; } .glass-stagger > *:nth-child(3) { animation-delay: 0.12s; } .glass-stagger > *:nth-child(4) { animation-delay: 0.18s; } .glass-stagger > *:nth-child(5) { animation-delay: 0.24s; } .glass-stagger > *:nth-child(6) { animation-delay: 0.30s; } .glass-stagger > *:nth-child(7) { animation-delay: 0.36s; } .glass-stagger > *:nth-child(8) { animation-delay: 0.42s; } /* ============================================================================ * 无障碍：尊重 prefers-reduced-motion * ========================================================================== */ @media (prefers-reduced-motion: reduce) { body::before, body::after, body > .glass-aurora, main > *, section, .glass, .shadow-sakura, .shadow-card, .floating-card { animation: none !important; } *, *::before, *::after { transition-duration: 0.01ms !important; } } /* ============================================================================ * 暗色模式骨架（默认不启用 — 页面 才生效） * 大部分页面声明了 color-scheme: light only，所以这套规则只对显式 opt-in 的页面生效 * ========================================================================== */ html[data-theme="dark"] { --glass-bg: rgba(28, 28, 32, 0.55); --glass-bg-strong: rgba(28, 28, 32, 0.75); --glass-bg-soft: rgba(28, 28, 32, 0.40); --glass-border: rgba(255, 255, 255, 0.10); --glass-border-soft: rgba(255, 255, 255, 0.06); --glass-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 10px 30px -8px rgba(0, 0, 0, 0.5), 0 4px 10px -4px rgba(255, 143, 184, 0.10); --ink: #F4F4F6; --ink-mute: #A0A0A8; } html[data-theme="dark"] body { background-color: #0F0F12; } html[data-theme="dark"] body::before { opacity: 0.35; } html[data-theme="dark"] body::after { opacity: 0.30; } /* ============================================================================ * v1.10.0 dark mode 覆盖 — Tailwind utilities + 表单元素 + 卡片细节 * 系统跟随 + 手动切换共用（auto 模式由 /app/theme.js 写 data-theme="dark"） * ========================================================================== */ html[data-theme="dark"] { color-scheme: dark; } html[data-theme="dark"] body { color: #F4F4F6; background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(255,143,184,.18), transparent 60%), radial-gradient(ellipse 50% 40% at 90% 100%, rgba(143,164,255,.12), transparent 70%), #0F0F12 !important; } html[data-theme="dark"] .bg-cloud { background-color: #0F0F12 !important; } html[data-theme="dark"] .bg-white { background-color: #1A1A1F !important; } html[data-theme="dark"] .bg-gray-50, html[data-theme="dark"] .bg-neutral-50 { background-color: #16161B !important; } html[data-theme="dark"] .bg-gray-100, html[data-theme="dark"] .bg-slate-100, html[data-theme="dark"] .bg-neutral-100 { background-color: #25252B !important; } html[data-theme="dark"] .bg-green-50, html[data-theme="dark"] .bg-green-100, html[data-theme="dark"] .bg-emerald-100 { background-color: rgba(34, 197, 94, 0.15) !important; } html[data-theme="dark"] .bg-yellow-50, html[data-theme="dark"] .bg-yellow-100, html[data-theme="dark"] .bg-amber-50, html[data-theme="dark"] .bg-amber-100 { background-color: rgba(245, 158, 11, 0.15) !important; } html[data-theme="dark"] .bg-pink-50, html[data-theme="dark"] .bg-pink-100 { background-color: rgba(236, 72, 153, 0.15) !important; } html[data-theme="dark"] .bg-red-50, html[data-theme="dark"] .bg-red-100 { background-color: rgba(239, 68, 68, 0.15) !important; } html[data-theme="dark"] .bg-blue-50, html[data-theme="dark"] .bg-blue-100 { background-color: rgba(59, 130, 246, 0.15) !important; } html[data-theme="dark"] .text-ink { color: #F4F4F6 !important; } html[data-theme="dark"] .text-mute { color: #A0A0A8 !important; } html[data-theme="dark"] .text-mute\/60 { color: #8E8E98 !important; } html[data-theme="dark"] .text-mute\/70 { color: #9999A2 !important; } html[data-theme="dark"] .text-mute\/80 { color: #AAAAB2 !important; } html[data-theme="dark"] .text-gray-500, html[data-theme="dark"] .text-slate-600, html[data-theme="dark"] .text-gray-600 { color: #A0A0A8 !important; } html[data-theme="dark"] .text-gray-700, html[data-theme="dark"] .text-gray-800, html[data-theme="dark"] .text-gray-900 { color: #E8E8EC !important; } html[data-theme="dark"] .text-green-600, html[data-theme="dark"] .text-green-700 { color: #86EFAC !important; } html[data-theme="dark"] .text-emerald-600, html[data-theme="dark"] .text-emerald-700 { color: #6EE7B7 !important; } html[data-theme="dark"] .text-yellow-600, html[data-theme="dark"] .text-yellow-700, html[data-theme="dark"] .text-amber-700, html[data-theme="dark"] .text-amber-800 { color: #FDE68A !important; } html[data-theme="dark"] .text-pink-600, html[data-theme="dark"] .text-pink-700 { color: #F9A8D4 !important; } html[data-theme="dark"] .text-red-400, html[data-theme="dark"] .text-red-500, html[data-theme="dark"] .text-red-600, html[data-theme="dark"] .text-red-700 { color: #FCA5A5 !important; } html[data-theme="dark"] .text-blue-600, html[data-theme="dark"] .text-blue-700 { color: #93C5FD !important; } html[data-theme="dark"] .border-line { border-color: #2A2A30 !important; } html[data-theme="dark"] .border-gray-100, html[data-theme="dark"] .border-gray-200 { border-color: #2A2A30 !important; } html[data-theme="dark"] .border-green-100, html[data-theme="dark"] .border-green-200 { border-color: rgba(74, 222, 128, 0.30) !important; } html[data-theme="dark"] .border-yellow-100, html[data-theme="dark"] .border-yellow-200, html[data-theme="dark"] .border-amber-200, html[data-theme="dark"] .border-amber-300 { border-color: rgba(251, 191, 36, 0.32) !important; } html[data-theme="dark"] .border-pink-100, html[data-theme="dark"] .border-pink-200 { border-color: rgba(244, 114, 182, 0.30) !important; } html[data-theme="dark"] .border-red-100, html[data-theme="dark"] .border-red-200 { border-color: rgba(248, 113, 113, 0.32) !important; } html[data-theme="dark"] .border-blue-100, html[data-theme="dark"] .border-blue-200 { border-color: rgba(96, 165, 250, 0.30) !important; } html[data-theme="dark"] .bg-sakura-soft\/30, html[data-theme="dark"] .bg-sakura-soft\/40, html[data-theme="dark"] .bg-sakura-soft\/60, html[data-theme="dark"] .bg-sakura-soft\/70 { background-color: rgba(255, 143, 184, 0.10) !important; } html[data-theme="dark"] .bg-sakura-soft { background-color: rgba(255, 143, 184, 0.12) !important; } html[data-theme="dark"] .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.12) !important; } html[data-theme="dark"] .bg-indigo-50 { background-color: rgba(99, 102, 241, 0.12) !important; } /* 表单元素 */ html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), html[data-theme="dark"] textarea, html[data-theme="dark"] select { background-color: #16161B !important; border-color: #2A2A30 !important; color: #F4F4F6 !important; } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: #8E8E98 !important; } html[data-theme="dark"] .placeholder\:text-mute\/60::placeholder { color: #8E8E98 !important; } /* Safari/Chrome 的账号自动填充会用一层浅色内阴影盖住 background-color， 导致暗色登录页出现白底白字。必须同时覆盖 autofill paint 与文字填充色。 */ html[data-theme="dark"] input:-webkit-autofill, html[data-theme="dark"] input:-webkit-autofill:hover, html[data-theme="dark"] input:-webkit-autofill:active { -webkit-text-fill-color: #F4F4F6 !important; caret-color: #F4F4F6 !important; -webkit-box-shadow: 0 0 0 1000px #16161B inset !important; box-shadow: 0 0 0 1000px #16161B inset !important; } html[data-theme="dark"] input:-webkit-autofill:focus { -webkit-text-fill-color: #F4F4F6 !important; caret-color: #F4F4F6 !important; -webkit-box-shadow: 0 0 0 1000px #16161B inset, 0 0 0 1px rgba(255, 143, 184, 0.45), 0 0 0 5px rgba(255, 143, 184, 0.16) !important; box-shadow: 0 0 0 1000px #16161B inset, 0 0 0 1px rgba(255, 143, 184, 0.45), 0 0 0 5px rgba(255, 143, 184, 0.16) !important; } /* Native select menus do not consistently inherit the control palette on macOS/Chromium. Pin both normal and selected options so a white foreground is never rendered on a white selected row (or black on black). */ html[data-theme="dark"] select option { background: #1A1A1F !important; color: #F4F4F6 !important; } html[data-theme="dark"] select option:checked { background: #963A65 !important; color: #FFFFFF !important; } html[data-theme="dark"] input[type="checkbox"], html[data-theme="dark"] input[type="radio"] { accent-color: #FF8FB8; } /* Shared selected-state contrast. Several pages toggle these classes from JavaScript, so the rule lives in the global theme instead of relying on the browser's light-mode Tailwind utility order. */ html[data-theme="dark"] .chip.selected, html[data-theme="dark"] .section-tab.active, html[data-theme="dark"] .attach-opt.bg-sakura, html[data-theme="dark"] [aria-selected="true"], html[data-theme="dark"] [aria-pressed="true"] { background: linear-gradient(135deg, #B54A78, #963A65) !important; border-color: #D66C9D !important; color: #FFFFFF !important; } /* 卡片细节 — card 默认背景白；玻璃 class 自动跟变量走，但 .card（非 .glass）需手动 */ html[data-theme="dark"] .card { background-color: rgba(26, 26, 31, 0.78) !important; border-color: rgba(255, 255, 255, 0.06) !important; } /* Hero 渐变背景（landing） */ html[data-theme="dark"] .from-white, html[data-theme="dark"] .to-white { --tw-gradient-from: #1A1A1F !important; --tw-gradient-to: #1A1A1F !important; } /* glass-chip / floating-card / 自适应 hover */ html[data-theme="dark"] .glass-chip { background: rgba(255, 143, 184, 0.14); border-color: rgba(255, 182, 217, 0.28); color: #FFB6D9; } /* tab-active 下划线在 dark 下仍是樱粉，OK */ /* ============================================================================ * v1.10.2 dark 覆盖加固 —— landing(index.html)仍有亮区的根因： * · nav 用 bg-white/70（透明度变体，.bg-white 选择器命中不到） * · 移动端展开菜单 bg-white/95 * · hero 内联白色径向光晕（style 属性，需更高优先级压过） * · 角落装饰光斑 blob（from-sakura-soft to-transparent） * · daily-life 渐变卡片 from-sakura-soft/40 → white * 用属性选择器一次性兜底所有变体。 * ========================================================================== */ html[data-theme="dark"] [class*="bg-white"] { background-color: #1A1A1F !important; } html[data-theme="dark"] nav[class*="bg-white"] { background-color: rgba(18,18,22,0.72) !important; } html[data-theme="dark"] [class*="bg-white/95"] { background-color: rgba(18,18,22,0.96) !important; } html[data-theme="dark"] #hero div[style*="radial-gradient"] { background: radial-gradient(circle at 50% 30%, rgba(255,143,184,.12) 0%, rgba(15,15,18,0) 60%) !important; } html[data-theme="dark"] [class*="from-sakura-soft"] { --tw-gradient-from: rgba(255,143,184,0.10) !important; } html[data-theme="dark"] [class*="to-white"] { --tw-gradient-to: #1A1A1F !important; } html[data-theme="dark"] [class*="text-ink"] { color: #ECECEF !important; } /* 深色 CTA 按钮（a.bg-ink）dark 下略提亮以与背景区分；手机 mockup 的 div.bg-ink 保持纯黑不动 */ html[data-theme="dark"] a.bg-ink { background-color: #33333B !important; } /* 页面内联样式中的浅色组件：用 data-theme 提高特异性，避免改动各页面结构。 */ html[data-theme="dark"] header.sticky, html[data-theme="dark"] nav.sticky, html[data-theme="dark"] nav.fixed.top-0, html[data-theme="dark"] .glass-nav { background: rgba(22, 22, 27, 0.88) !important; border-color: rgba(255, 255, 255, 0.08) !important; box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 8px 28px rgba(0,0,0,.26); } html[data-theme="dark"] .floating-card { background: rgba(28, 28, 34, 0.82); border-color: rgba(255, 255, 255, 0.10); color: #F4F4F6; } html[data-theme="dark"] .header-model-btn { background: rgba(255, 143, 184, 0.14); color: #FFB6D9; } html[data-theme="dark"] .header-model-btn:hover { background: rgba(255, 143, 184, 0.20); } html[data-theme="dark"] .pill { background: #25252B; border-color: #34343B; color: #B8B8C0; } html[data-theme="dark"] #c-stage.pill, html[data-theme="dark"] .mood-pill, html[data-theme="dark"] #current-mood-pill { background: rgba(255, 143, 184, 0.15) !important; border-color: rgba(255, 182, 217, 0.28) !important; color: #FFB6D9 !important; } html[data-theme="dark"] .pill-ok { background: rgba(34, 197, 94, 0.15) !important; color: #86EFAC !important; } html[data-theme="dark"] .pill-err { background: rgba(239, 68, 68, 0.15) !important; color: #FCA5A5 !important; } html[data-theme="dark"] .avatar-ring > img { background: #1A1A1F !important; } html[data-theme="dark"] .stage-seg { background: #34343B; } /* Playground 对话气泡。 */ html[data-theme="dark"] .bubble-them { background: #1A1A1F; border-color: #34343B; color: #F4F4F6; } /* Memories 的筛选、操作按钮。 */ html[data-theme="dark"] .tag-btn { background: #1A1A1F; border-color: #3A3A42; color: #DCDCE1; } html[data-theme="dark"] .tag-btn.active { background: #963A65; border-color: #B54A78; color: #FFFFFF; } html[data-theme="dark"] .tag-btn:hover:not(.active) { background: rgba(255, 143, 184, 0.12); border-color: #FF8FB8; color: #FFB6D9; } /* Dashboard 模型设置抽屉。 */ html[data-theme="dark"] .model-mask { background: rgba(0, 0, 0, 0.58); } html[data-theme="dark"] .model-drawer { background: #111116; border-left: 1px solid #2A2A30; color: #F4F4F6; box-shadow: -18px 0 56px rgba(0, 0, 0, 0.48); } html[data-theme="dark"] .ms-section { background: #1A1A1F; border: 1px solid #2A2A30; } html[data-theme="dark"] .ms-label { color: #DCDCE1; } html[data-theme="dark"] .ms-msg-info { color: #A0A0A8; } html[data-theme="dark"] .ms-msg-ok { color: #86EFAC; } html[data-theme="dark"] .ms-msg-err { color: #FCA5A5; } html[data-theme="dark"] .ms-status-off { background: #2A2A30; color: #B8B8C0; } html[data-theme="dark"] .ms-status-ok { background: rgba(34, 197, 94, 0.15); color: #86EFAC; } html[data-theme="dark"] .ms-btn-outline:hover:not(:disabled) { background: rgba(255, 143, 184, 0.14); } /* Tailwind hover 变体在深色背景下保持可见反馈，不闪回浅色 surface。 */ html[data-theme="dark"] .hover\:bg-cloud:hover, html[data-theme="dark"] .hover\:bg-gray-50:hover, html[data-theme="dark"] .hover\:bg-white:hover { background-color: #25252B !important; } html[data-theme="dark"] .hover\:bg-sakura-soft:hover, html[data-theme="dark"] .hover\:bg-sakura-soft\/20:hover, html[data-theme="dark"] .hover\:bg-sakura-soft\/30:hover, html[data-theme="dark"] .hover\:bg-sakura-soft\/40:hover { background-color: rgba(255, 143, 184, 0.16) !important; } html[data-theme="dark"] .hover\:bg-red-50:hover { background-color: rgba(239, 68, 68, 0.20) !important; } html[data-theme="dark"] .hover\:bg-amber-100:hover { background-color: rgba(245, 158, 11, 0.20) !important; } /* 低透明度 disabled 控件在深色背景仍能辨认，同时保留禁用层级。 */ html[data-theme="dark"] .disabled\:opacity-30:disabled { opacity: 0.55 !important; } html[data-theme="dark"] .disabled\:opacity-50:disabled, html[data-theme="dark"] .ms-btn-primary:disabled, html[data-theme="dark"] .ms-btn-outline:disabled { opacity: 0.65 !important; } /* Legacy and low-frequency pages used custom light-only class names instead of Tailwind utilities. Keep their dark surfaces and small text readable. */ html[data-theme="dark"] .auth-card, html[data-theme="dark"] .cp-modal-panel { background: rgba(26, 26, 31, .94) !important; border-color: rgba(255, 255, 255, .10) !important; color: #F4F4F6 !important; } html[data-theme="dark"] .section-tab:not(.active) { background: #25252B !important; color: #D1D1D6 !important; } html[data-theme="dark"] .section-tab:hover:not(.active) { background: #303038 !important; } html[data-theme="dark"] [class~="bg-[#FFF5F9]"] { background-color: #0F0F12 !important; } html[data-theme="dark"] [class~="text-[#1D1D1F]"] { color: #F4F4F6 !important; } html[data-theme="dark"] [class~="text-[#86868B]"] { color: #B8B8C0 !important; } html[data-theme="dark"] [class~="text-[#FF8FB8]"] { color: #FFB6D9 !important; } /* Dashboard 动态生成的连接错误仍使用旧内联红色。 */ html[data-theme="dark"] #regen-grid [style*="#b91c1c"] { color: #F87171 !important; } /* 主题切换浮动按钮（由 theme.js 注入） */ .xiyu-theme-toggle { position: fixed; right: 16px; bottom: 16px; z-index: 9999; width: 50px; height: 50px; border-radius: 50%; background: var(--glass-bg-strong, rgba(255,255,255,0.85)); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); border: 1px solid var(--glass-border-soft, rgba(255,255,255,0.45)); box-shadow: 0 8px 24px -6px rgba(0,0,0,0.15); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 22px; color: var(--ink, #1D1D1F); transition: transform 0.18s var(--ease-silk, ease), box-shadow 0.18s ease; } .xiyu-theme-toggle:hover { transform: translateY(-2px); box-shadow: 0 12px 32px -6px rgba(0,0,0,0.20); } html[data-theme="dark"] .xiyu-theme-toggle { background: rgba(40,40,46,0.85); border-color: rgba(255,255,255,0.08); color: #F4F4F6; } /* v1.10.2 主题切换引导气泡（首次访问 + 点击反馈） */ .xiyu-theme-bubble { position: fixed; right: 74px; bottom: 24px; z-index: 9999; max-width: 220px; padding: 8px 12px; border-radius: 12px; background: var(--sakura-deep, #FF8FB8); color: #fff; font-size: 13px; font-weight: 600; line-height: 1.4; box-shadow: 0 8px 24px -6px rgba(255,143,184,0.5); opacity: 0; transform: translateX(8px); pointer-events: none; transition: opacity .25s var(--ease-silk, ease), transform .25s var(--ease-silk, ease); } .xiyu-theme-bubble.show { opacity: 1; transform: translateX(0); } /* Signed-in app shell: shared bottom navigation for status / memories / settings. */ .has-app-tab-bar { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); } .app-tab-bar { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; padding-bottom: env(safe-area-inset-bottom, 0px); background: rgba(255,255,255,.92); border-top: 1px solid var(--glass-border-soft, rgba(0,0,0,.08)); backdrop-filter: blur(20px) saturate(170%); -webkit-backdrop-filter: blur(20px) saturate(170%); } .app-tab-bar__inner { width: min(100%, 480px); min-height: 66px; margin: 0 auto; padding: 6px 10px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; } .app-tab-bar__item { min-width: 0; min-height: 54px; border-radius: 16px; color: var(--ink-mute, #86868B); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 650; line-height: 1; transition: color .18s ease, background-color .18s ease, transform .18s ease; -webkit-tap-highlight-color: transparent; } .app-tab-bar__item svg { width: 22px; height: 22px; } .app-tab-bar__item:hover { color: var(--ink, #1D1D1F); } .app-tab-bar__item:active { transform: scale(.97); } .app-tab-bar__item.is-active { color: var(--sakura-deep, #FF6FA3); background: rgba(255,182,217,.2); } html[data-theme="dark"] .app-tab-bar { background: rgba(22,22,27,.92); border-color: rgba(255,255,255,.08); } html[data-theme="dark"] .app-tab-bar__item.is-active { background: rgba(255,143,184,.13); } /* Existing floating controls sit above the tab bar instead of covering it. */ .has-app-tab-bar .xiyu-theme-toggle { bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important; } .has-app-tab-bar .xiyu-theme-bubble { bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important; } .has-app-tab-bar #silent-orb { right: 82px !important; bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important; } @media (min-width: 768px) { .has-app-tab-bar { padding-bottom: 112px; } .app-tab-bar { left: 50%; right: auto; bottom: 18px; width: min(440px, calc(100vw - 32px)); transform: translateX(-50%); border: 1px solid var(--glass-border-soft, rgba(0,0,0,.08)); border-radius: 24px; box-shadow: 0 18px 48px -18px rgba(0,0,0,.28); overflow: hidden; } .app-tab-bar__inner { min-height: 62px; } .has-app-tab-bar .xiyu-theme-toggle { bottom: 24px !important; } .has-app-tab-bar .xiyu-theme-bubble { bottom: 32px !important; } .has-app-tab-bar #silent-orb { bottom: 28px !important; } } /* ========================================================================== * Character semantic palette v2 * * Only pages with body[data-character-theme="true"] use the selected role's * palette. Admin/auth pages remain product-neutral. The selector never touches * message text; it replaces visual tokens and a small set of known widgets. * ========================================================================== */ :root { --role-primary: #E979A7; --role-strong: #CD4E82; --role-soft: #FFEAF3; --role-faint: rgba(233, 121, 167, .12); --role-border: #F3C7D9; --role-ink: #9C3D65; --role-glow: rgba(205, 78, 130, .24); --role-page: #FBF7F9; --role-aurora-a: rgba(233, 121, 167, .28); --role-aurora-b: rgba(188, 155, 224, .18); --role-present-label: "她在"; } html[data-companion-gender="male"] body[data-character-theme="true"] { --role-primary: #6593D6; --role-strong: #3569B7; --role-soft: #E6EFFC; --role-faint: rgba(53, 105, 183, .11); --role-border: #C6D8F1; --role-ink: #2D568E; --role-glow: rgba(53, 105, 183, .24); --role-page: #F2F6FB; --role-aurora-a: rgba(69, 119, 190, .24); --role-aurora-b: rgba(83, 153, 166, .16); --role-present-label: "他在"; --sakura: var(--role-primary); --sakura-deep: var(--role-strong); --sakura-soft: var(--role-soft); --mist-violet: #A9BDD9; --mist-blue: #93B8E7; --ring-grad: linear-gradient(135deg, #7BA5DE 0%, #5D89C7 52%, #5A9AA7 100%); --glass-shadow: 0 1px 0 rgba(255, 255, 255, .92) inset, 0 -1px 0 rgba(83, 130, 192, .13) inset, 0 14px 36px -16px rgba(36, 67, 111, .20), 0 5px 14px -8px rgba(53, 105, 183, .18); --glass-shadow-hover: 0 1px 0 rgba(255, 255, 255, .96) inset, 0 -1px 0 rgba(83, 130, 192, .18) inset, 0 24px 58px -18px rgba(36, 67, 111, .26), 0 9px 22px -10px rgba(53, 105, 183, .24); --glass-shadow-press: 0 1px 0 rgba(255, 255, 255, .88) inset, 0 5px 16px -6px rgba(53, 105, 183, .18); background: radial-gradient(ellipse 72% 52% at 12% -8%, rgba(69, 119, 190, .24), transparent 66%), radial-gradient(ellipse 54% 44% at 96% 92%, rgba(83, 153, 166, .16), transparent 72%), #F2F6FB !important; background-attachment: fixed !important; } html[data-companion-gender="male"] body[data-character-theme="true"]::before { background: radial-gradient(circle at 30% 30%, rgba(78, 127, 194, .58), rgba(78, 127, 194, 0) 70%) !important; opacity: .34; } html[data-companion-gender="male"] body[data-character-theme="true"]::after { background: radial-gradient(circle at 60% 60%, rgba(79, 153, 168, .42), rgba(113, 145, 188, .22) 42%, rgba(79, 153, 168, 0) 75%) !important; opacity: .30; } html[data-companion-gender="male"] body[data-character-theme="true"] > .glass-aurora { background: radial-gradient(circle, rgba(179, 205, 235, .52), rgba(179, 205, 235, 0) 70%) !important; } /* Tailwind semantic utilities used throughout status/chat/settings/memories. */ html[data-companion-gender="male"] body[data-character-theme="true"] [class~="text-sakura"], html[data-companion-gender="male"] body[data-character-theme="true"] [class~="text-sakura-deep"], html[data-companion-gender="male"] body[data-character-theme="true"] [class~="text-sakura-deep/60"], html[data-companion-gender="male"] body[data-character-theme="true"] [class~="text-pink-600"], html[data-companion-gender="male"] body[data-character-theme="true"] [class~="text-pink-700"], html[data-companion-gender="male"] body[data-character-theme="true"] [class~="text-rose-600"], html[data-companion-gender="male"] body[data-character-theme="true"] [class~="text-rose-700"] { color: var(--role-strong) !important; } html[data-companion-gender="male"] body[data-character-theme="true"] [class~="bg-sakura"], html[data-companion-gender="male"] body[data-character-theme="true"] [class~="bg-sakura-deep"], html[data-companion-gender="male"] body[data-character-theme="true"] [class~="bg-pink-500"], html[data-companion-gender="male"] body[data-character-theme="true"] .btn-primary { background: linear-gradient(135deg, #739CDA 0%, #4F7FC5 48%, #3569B7 100%) !important; border-color: rgba(45, 86, 142, .34) !important; box-shadow: 0 1px 0 rgba(255,255,255,.55) inset, 0 -1px 0 rgba(35,70,120,.18) inset, 0 12px 30px -12px rgba(53,105,183,.38) !important; color: #fff !important; } html[data-companion-gender="male"] body[data-character-theme="true"] [class~="bg-sakura"]:hover, html[data-companion-gender="male"] body[data-character-theme="true"] [class~="bg-sakura-deep"]:hover, html[data-companion-gender="male"] body[data-character-theme="true"] [class~="bg-pink-500"]:hover, html[data-companion-gender="male"] body[data-character-theme="true"] .btn-primary:hover { box-shadow: 0 1px 0 rgba(255,255,255,.62) inset, 0 -1px 0 rgba(35,70,120,.20) inset, 0 18px 40px -14px rgba(53,105,183,.46) !important; } html[data-companion-gender="male"] body[data-character-theme="true"] [class~="bg-sakura-soft"], html[data-companion-gender="male"] body[data-character-theme="true"] [class~="bg-sakura-soft/20"], html[data-companion-gender="male"] body[data-character-theme="true"] [class~="bg-sakura-soft/30"], html[data-companion-gender="male"] body[data-character-theme="true"] [class~="bg-sakura-soft/40"], html[data-companion-gender="male"] body[data-character-theme="true"] [class~="bg-sakura-soft/60"], html[data-companion-gender="male"] body[data-character-theme="true"] [class~="bg-sakura-soft/70"], html[data-companion-gender="male"] body[data-character-theme="true"] [class~="bg-pink-50"], html[data-companion-gender="male"] body[data-character-theme="true"] [class~="bg-pink-100"], html[data-companion-gender="male"] body[data-character-theme="true"] [class~="bg-rose-50"], html[data-companion-gender="male"] body[data-character-theme="true"] [class~="bg-rose-100"] { background-color: var(--role-soft) !important; } html[data-companion-gender="male"] body[data-character-theme="true"] [class~="border-sakura"], html[data-companion-gender="male"] body[data-character-theme="true"] [class~="border-sakura-deep"], html[data-companion-gender="male"] body[data-character-theme="true"] [class~="border-sakura-soft"], html[data-companion-gender="male"] body[data-character-theme="true"] [class~="border-pink-100"], html[data-companion-gender="male"] body[data-character-theme="true"] [class~="border-pink-200"], html[data-companion-gender="male"] body[data-character-theme="true"] [class~="border-rose-100"], html[data-companion-gender="male"] body[data-character-theme="true"] [class~="border-rose-200"] { border-color: var(--role-border) !important; } html[data-companion-gender="male"] body[data-character-theme="true"] [class~="from-sakura"], html[data-companion-gender="male"] body[data-character-theme="true"] [class~="from-sakura-deep"], html[data-companion-gender="male"] body[data-character-theme="true"] [class~="from-pink-400"], html[data-companion-gender="male"] body[data-character-theme="true"] [class~="from-rose-500"] { --tw-gradient-from: #739CDA var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(115 156 218 / 0) var(--tw-gradient-to-position) !important; } html[data-companion-gender="male"] body[data-character-theme="true"] [class~="from-sakura-soft"], html[data-companion-gender="male"] body[data-character-theme="true"] [class~="from-sakura-soft/40"] { --tw-gradient-from: var(--role-soft) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(230 239 252 / 0) var(--tw-gradient-to-position) !important; } html[data-companion-gender="male"] body[data-character-theme="true"] [class~="to-sakura-deep"], html[data-companion-gender="male"] body[data-character-theme="true"] [class~="to-pink-400"], html[data-companion-gender="male"] body[data-character-theme="true"] [class~="to-pink-500"], html[data-companion-gender="male"] body[data-character-theme="true"] [class~="to-rose-500"] { --tw-gradient-to: #3569B7 var(--tw-gradient-to-position) !important; } html[data-companion-gender="male"] body[data-character-theme="true"] [class~="shadow-sakura"], html[data-companion-gender="male"] body[data-character-theme="true"] [class~="shadow-sakura-lg"] { box-shadow: 0 14px 40px -16px rgba(53,105,183,.34) !important; } html[data-companion-gender="male"] body[data-character-theme="true"] .hover\:bg-sakura-soft:hover, html[data-companion-gender="male"] body[data-character-theme="true"] .hover\:bg-sakura-soft\/20:hover, html[data-companion-gender="male"] body[data-character-theme="true"] .hover\:bg-sakura-soft\/30:hover, html[data-companion-gender="male"] body[data-character-theme="true"] .hover\:bg-sakura-soft\/40:hover { background-color: rgba(53, 105, 183, .14) !important; } /* Inputs and selected controls: no pink focus rings or native accent leak. */ html[data-companion-gender="male"] body[data-character-theme="true"] input:focus, html[data-companion-gender="male"] body[data-character-theme="true"] textarea:focus, html[data-companion-gender="male"] body[data-character-theme="true"] select:focus { border-color: var(--role-primary) !important; box-shadow: 0 0 0 1px rgba(53, 105, 183, .42), 0 0 0 5px rgba(53, 105, 183, .13), 0 10px 24px -14px rgba(53, 105, 183, .34) !important; } html[data-companion-gender="male"] body[data-character-theme="true"] input[type="checkbox"], html[data-companion-gender="male"] body[data-character-theme="true"] input[type="radio"], html[data-companion-gender="male"] body[data-character-theme="true"] input[type="range"] { accent-color: var(--role-strong) !important; } html[data-theme="dark"][data-companion-gender="male"] body[data-character-theme="true"] select option:checked { background: #315889 !important; } html[data-companion-gender="male"] body[data-character-theme="true"] .chip.selected, html[data-companion-gender="male"] body[data-character-theme="true"] .section-tab.active, html[data-companion-gender="male"] body[data-character-theme="true"] [aria-selected="true"], html[data-companion-gender="male"] body[data-character-theme="true"] [aria-pressed="true"] { background: linear-gradient(135deg, #5F8BCB, #3569B7) !important; border-color: #7FA5D8 !important; color: #fff !important; } /* Known role widgets with colors hard-coded in legacy page-level CSS. */ html[data-companion-gender="male"] body[data-character-theme="true"] .mood-pill, html[data-companion-gender="male"] body[data-character-theme="true"] .pill, html[data-companion-gender="male"] body[data-character-theme="true"] #current-mood-pill { background: linear-gradient(135deg, #EAF1FB, #D7E5F7) !important; border-color: var(--role-border) !important; color: var(--role-ink) !important; } html[data-companion-gender="male"] body[data-character-theme="true"] .toggle input:checked + .slider, html[data-companion-gender="male"] body[data-character-theme="true"] .pro-chip, html[data-companion-gender="male"] body[data-character-theme="true"] .tag-btn.active { background: linear-gradient(135deg, #739CDA, #3569B7) !important; border-color: #4F7FC5 !important; color: #fff !important; box-shadow: 0 8px 22px -12px rgba(53,105,183,.34) !important; } html[data-companion-gender="male"] body[data-character-theme="true"] .tag-btn:hover:not(.active) { border-color: var(--role-primary) !important; color: var(--role-strong) !important; } html[data-companion-gender="male"] body[data-character-theme="true"] .proactive-slider { background: linear-gradient(90deg, var(--role-primary) var(--fill, 33%), #DCE3EC var(--fill, 33%)) !important; } html[data-companion-gender="male"] body[data-character-theme="true"] .proactive-slider::-webkit-slider-thumb, html[data-companion-gender="male"] body[data-character-theme="true"] .proactive-slider::-moz-range-thumb { background: linear-gradient(135deg, #87AEE1, #3569B7) !important; box-shadow: 0 3px 12px rgba(53, 105, 183, .38), inset 0 1px 0 rgba(255,255,255,.72) !important; } html[data-companion-gender="male"] body[data-character-theme="true"] .card:hover, html[data-companion-gender="male"] body[data-character-theme="true"] .diary-card:hover, html[data-companion-gender="male"] body[data-character-theme="true"] .memory-card:hover { box-shadow: 0 22px 58px -20px rgba(36, 67, 111, .28), 0 2px 0 rgba(255,255,255,.45) inset !important; } html[data-companion-gender="male"] body[data-character-theme="true"] .avatar-ring { background: conic-gradient(from 0deg, #8CB2E2, #B9CDE7, #5F8BCB, #6EA4AF, #8CB2E2) !important; } html[data-companion-gender="male"] body[data-character-theme="true"] .stage-seg-fill, html[data-companion-gender="male"] body[data-character-theme="true"] #missing-bar, html[data-companion-gender="male"] body[data-character-theme="true"] #regen-progress { background: linear-gradient(90deg, #739CDA, #3569B7) !important; } html[data-companion-gender="male"] body[data-character-theme="true"] .stage-seg.cur { box-shadow: 0 0 14px rgba(53, 105, 183, .38) !important; } html[data-companion-gender="male"] body[data-character-theme="true"] .stage-label.current { color: var(--role-strong) !important; } html[data-companion-gender="male"] body[data-character-theme="true"] .bubble-me { background: linear-gradient(135deg, #5F8BCB, #3569B7) !important; box-shadow: 0 8px 22px -14px rgba(53, 105, 183, .42); } html[data-companion-gender="male"] body[data-character-theme="true"] .typing-dots span { background: var(--role-primary) !important; } html[data-companion-gender="male"] body[data-character-theme="true"] .tl-item::before { background: linear-gradient(180deg, #A9C2E3, transparent) !important; } html[data-companion-gender="male"] body[data-character-theme="true"] .tl-dot { background: linear-gradient(135deg, #E6EFFC, #83A8D9) !important; box-shadow: 0 3px 10px rgba(53, 105, 183, .22) !important; } html[data-companion-gender="male"] body[data-character-theme="true"] .tl-dot.stage { background: linear-gradient(135deg, #5F8BCB, #315D9D) !important; color: #fff !important; } html[data-companion-gender="male"] body[data-character-theme="true"] .qr-frame { background: linear-gradient(135deg, #E6EFFC 0%, rgba(255,255,255,.92) 64%) !important; border-color: var(--role-border) !important; } html[data-companion-gender="male"] body[data-character-theme="true"] .corner { border-color: var(--role-strong) !important; } html[data-companion-gender="male"] body[data-character-theme="true"] .scan-line { background: linear-gradient(90deg, transparent, var(--role-strong), transparent) !important; } html[data-companion-gender="male"] body[data-character-theme="true"] .glass-chip, html[data-companion-gender="male"] body[data-character-theme="true"] .header-model-btn { background: var(--role-faint) !important; border-color: var(--role-border) !important; color: var(--role-ink) !important; } html[data-companion-gender="male"] body[data-character-theme="true"] .petal { display: none !important; } @keyframes maleSilentBreath { 0%, 100% { transform: scale(1); opacity: .58; box-shadow: 0 0 14px 6px rgba(53,105,183,.26); } 50% { transform: scale(1.2); opacity: 1; box-shadow: 0 0 24px 12px rgba(53,105,183,.38); } } html[data-companion-gender="male"] body[data-character-theme="true"] #silent-orb { background: radial-gradient(circle at 30% 30%, #9DBBE2, #3569B7 72%) !important; animation-name: maleSilentBreath !important; } html[data-companion-gender="male"] body[data-character-theme="true"] #silent-orb::after { content: var(--role-present-label) !important; color: var(--role-strong) !important; } /* Shared floating/navigation controls inherit the role instead of retaining the product's default pink. */ html[data-companion-gender="male"] body[data-character-theme="true"] .xiyu-theme-bubble { background: var(--role-strong) !important; box-shadow: 0 10px 26px -10px rgba(53,105,183,.42) !important; } html[data-companion-gender="male"] body[data-character-theme="true"] .app-tab-bar__item.is-active { color: var(--role-strong) !important; background: rgba(53, 105, 183, .11) !important; } html[data-companion-gender="male"] body[data-character-theme="true"] .tab-active::after { background: linear-gradient(90deg, #739CDA, #3569B7) !important; } html[data-companion-gender="male"] body[data-character-theme="true"] ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(53,105,183,.45), rgba(83,153,166,.32)) !important; background-clip: content-box !important; } /* Male dark mode is navy/graphite, not a pink glow painted over black. */ html[data-theme="dark"][data-companion-gender="male"] body[data-character-theme="true"] { --role-primary: #78A5E3; --role-strong: #9FC2F2; --role-soft: rgba(71, 117, 181, .17); --role-faint: rgba(71, 117, 181, .13); --role-border: rgba(126, 165, 216, .28); --role-ink: #B7D1F3; --role-glow: rgba(55, 105, 172, .30); --role-page: #0C131D; --role-aurora-a: rgba(50, 91, 151, .28); --role-aurora-b: rgba(48, 113, 126, .18); background: radial-gradient(ellipse 66% 48% at 10% -5%, rgba(50, 91, 151, .28), transparent 68%), radial-gradient(ellipse 48% 40% at 95% 100%, rgba(48, 113, 126, .18), transparent 72%), #0C131D !important; } html[data-theme="dark"][data-companion-gender="male"] body[data-character-theme="true"] .mood-pill, html[data-theme="dark"][data-companion-gender="male"] body[data-character-theme="true"] .pill, html[data-theme="dark"][data-companion-gender="male"] body[data-character-theme="true"] #current-mood-pill, html[data-theme="dark"][data-companion-gender="male"] body[data-character-theme="true"] [class~="bg-sakura-soft"], html[data-theme="dark"][data-companion-gender="male"] body[data-character-theme="true"] [class~="bg-sakura-soft/30"], html[data-theme="dark"][data-companion-gender="male"] body[data-character-theme="true"] [class~="bg-sakura-soft/40"], html[data-theme="dark"][data-companion-gender="male"] body[data-character-theme="true"] [class~="bg-sakura-soft/70"], html[data-theme="dark"][data-companion-gender="male"] body[data-character-theme="true"] [class~="bg-pink-50"], html[data-theme="dark"][data-companion-gender="male"] body[data-character-theme="true"] [class~="bg-pink-100"] { background: rgba(71, 117, 181, .16) !important; border-color: rgba(126, 165, 216, .28) !important; color: #9FC2F2 !important; } /* ========================================================================== * 初见暖橘品牌层 v3 * * 登录后的角色页面统一使用暖橘品牌色。角色性别仍只负责称谓和内容， * 不再让整套产品在粉色/蓝色之间跳变。此层特意放在旧兼容规则之后， * 以最小改动覆盖历史页面中零散的视觉常量，不触碰结构和交互。 * ========================================================================== */ html[data-companion-gender] body[data-character-theme="true"] { --role-primary: #FF9D80; --role-strong: #E85E42; --role-soft: #FFF0E7; --role-faint: rgba(255, 116, 87, .10); --role-border: #F2D5C7; --role-ink: #A44F38; --role-glow: rgba(255, 116, 87, .22); --role-page: #FFF9F5; --role-aurora-a: rgba(255, 173, 148, .28); --role-aurora-b: rgba(255, 208, 191, .20); --sakura: #FFAD94; --sakura-deep: #FF7457; --sakura-soft: #FFF0E7; --mist-violet: #FFDCCF; --mist-blue: #FFE8D8; --ink: #2C211D; --ink-mute: #8F776D; --ring-grad: linear-gradient(135deg, #FFAD94 0%, #FF8E70 52%, #FFD0BF 100%); --glass-shadow: 0 1px 0 rgba(255,255,255,.92) inset, 0 -1px 0 rgba(255,174,145,.16) inset, 0 14px 36px -16px rgba(92,54,39,.17), 0 5px 14px -8px rgba(255,116,87,.16); --glass-shadow-hover: 0 1px 0 rgba(255,255,255,.96) inset, 0 -1px 0 rgba(255,174,145,.20) inset, 0 24px 58px -18px rgba(92,54,39,.22), 0 9px 22px -10px rgba(255,116,87,.20); --glass-shadow-press: 0 1px 0 rgba(255,255,255,.88) inset, 0 5px 16px -6px rgba(255,116,87,.16); color: var(--ink) !important; background: radial-gradient(ellipse 72% 52% at 12% -8%, rgba(255,173,148,.30), transparent 66%), radial-gradient(ellipse 54% 44% at 96% 92%, rgba(255,218,200,.24), transparent 72%), #FFF9F5 !important; background-attachment: fixed !important; } html[data-companion-gender="male"] body[data-character-theme="true"] { --role-present-label: "他在"; } html[data-companion-gender="female"] body[data-character-theme="true"] { --role-present-label: "她在"; } html[data-companion-gender] body[data-character-theme="true"]::before { background: radial-gradient(circle at 30% 30%, rgba(255,173,148,.68), rgba(255,173,148,0) 70%) !important; opacity: .38; } html[data-companion-gender] body[data-character-theme="true"]::after { background: radial-gradient(circle at 60% 60%, rgba(255,218,200,.58), rgba(255,194,171,.28) 42%, rgba(255,218,200,0) 75%) !important; opacity: .34; } html[data-companion-gender] body[data-character-theme="true"] > .glass-aurora { background: radial-gradient(circle, rgba(255,235,224,.72), rgba(255,235,224,0) 70%) !important; } html[data-companion-gender] body[data-character-theme="true"] [class~="text-sakura"], html[data-companion-gender] body[data-character-theme="true"] [class~="text-sakura-deep"], html[data-companion-gender] body[data-character-theme="true"] [class~="text-sakura-deep/60"], html[data-companion-gender] body[data-character-theme="true"] [class~="text-pink-600"], html[data-companion-gender] body[data-character-theme="true"] [class~="text-pink-700"], html[data-companion-gender] body[data-character-theme="true"] [class~="text-rose-600"], html[data-companion-gender] body[data-character-theme="true"] [class~="text-rose-700"] { color: var(--role-strong) !important; } html[data-companion-gender] body[data-character-theme="true"] [class~="bg-sakura"], html[data-companion-gender] body[data-character-theme="true"] [class~="bg-sakura-deep"], html[data-companion-gender] body[data-character-theme="true"] [class~="bg-pink-500"], html[data-companion-gender] body[data-character-theme="true"] .btn-primary { background: linear-gradient(135deg, #FFAD94 0%, #FF8E70 48%, #FF7457 100%) !important; border-color: rgba(232,94,66,.28) !important; box-shadow: 0 1px 0 rgba(255,255,255,.58) inset, 0 -1px 0 rgba(155,61,39,.16) inset, 0 12px 30px -12px rgba(255,116,87,.36) !important; color: #fff !important; } html[data-companion-gender] body[data-character-theme="true"] [class~="bg-sakura-soft"], html[data-companion-gender] body[data-character-theme="true"] [class~="bg-sakura-soft/20"], html[data-companion-gender] body[data-character-theme="true"] [class~="bg-sakura-soft/30"], html[data-companion-gender] body[data-character-theme="true"] [class~="bg-sakura-soft/40"], html[data-companion-gender] body[data-character-theme="true"] [class~="bg-sakura-soft/60"], html[data-companion-gender] body[data-character-theme="true"] [class~="bg-sakura-soft/70"], html[data-companion-gender] body[data-character-theme="true"] [class~="bg-pink-50"], html[data-companion-gender] body[data-character-theme="true"] [class~="bg-pink-100"], html[data-companion-gender] body[data-character-theme="true"] [class~="bg-rose-50"], html[data-companion-gender] body[data-character-theme="true"] [class~="bg-rose-100"] { background-color: var(--role-soft) !important; } html[data-companion-gender] body[data-character-theme="true"] [class~="border-sakura"], html[data-companion-gender] body[data-character-theme="true"] [class~="border-sakura-deep"], html[data-companion-gender] body[data-character-theme="true"] [class~="border-sakura-soft"], html[data-companion-gender] body[data-character-theme="true"] [class~="border-pink-100"], html[data-companion-gender] body[data-character-theme="true"] [class~="border-pink-200"], html[data-companion-gender] body[data-character-theme="true"] [class~="border-rose-100"], html[data-companion-gender] body[data-character-theme="true"] [class~="border-rose-200"] { border-color: var(--role-border) !important; } html[data-companion-gender] body[data-character-theme="true"] [class~="from-sakura"], html[data-companion-gender] body[data-character-theme="true"] [class~="from-sakura-deep"], html[data-companion-gender] body[data-character-theme="true"] [class~="from-pink-400"], html[data-companion-gender] body[data-character-theme="true"] [class~="from-rose-500"] { --tw-gradient-from: #FFAD94 var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(255 173 148 / 0) var(--tw-gradient-to-position) !important; } html[data-companion-gender] body[data-character-theme="true"] [class~="from-sakura-soft"], html[data-companion-gender] body[data-character-theme="true"] [class~="from-sakura-soft/40"] { --tw-gradient-from: var(--role-soft) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(255 240 231 / 0) var(--tw-gradient-to-position) !important; } html[data-companion-gender] body[data-character-theme="true"] [class~="to-sakura-deep"], html[data-companion-gender] body[data-character-theme="true"] [class~="to-pink-400"], html[data-companion-gender] body[data-character-theme="true"] [class~="to-pink-500"], html[data-companion-gender] body[data-character-theme="true"] [class~="to-rose-500"] { --tw-gradient-to: #FF7457 var(--tw-gradient-to-position) !important; } html[data-companion-gender] body[data-character-theme="true"] [class~="shadow-sakura"], html[data-companion-gender] body[data-character-theme="true"] [class~="shadow-sakura-lg"] { box-shadow: 0 14px 40px -16px rgba(255,116,87,.30) !important; } html[data-companion-gender] body[data-character-theme="true"] .hover\:bg-sakura-soft:hover, html[data-companion-gender] body[data-character-theme="true"] .hover\:bg-sakura-soft\/20:hover, html[data-companion-gender] body[data-character-theme="true"] .hover\:bg-sakura-soft\/30:hover, html[data-companion-gender] body[data-character-theme="true"] .hover\:bg-sakura-soft\/40:hover { background-color: rgba(255,116,87,.12) !important; } html[data-companion-gender] body[data-character-theme="true"] input:focus, html[data-companion-gender] body[data-character-theme="true"] textarea:focus, html[data-companion-gender] body[data-character-theme="true"] select:focus { border-color: var(--role-primary) !important; box-shadow: 0 0 0 1px rgba(255,116,87,.38), 0 0 0 5px rgba(255,116,87,.12), 0 10px 24px -14px rgba(255,116,87,.30) !important; } html[data-companion-gender] body[data-character-theme="true"] input[type="checkbox"], html[data-companion-gender] body[data-character-theme="true"] input[type="radio"], html[data-companion-gender] body[data-character-theme="true"] input[type="range"] { accent-color: var(--role-strong) !important; } html[data-companion-gender] body[data-character-theme="true"] .chip.selected, html[data-companion-gender] body[data-character-theme="true"] .section-tab.active, html[data-companion-gender] body[data-character-theme="true"] [aria-selected="true"], html[data-companion-gender] body[data-character-theme="true"] [aria-pressed="true"] { background: linear-gradient(135deg, #FF9D80, #FF7457) !important; border-color: #FFAD94 !important; color: #fff !important; } html[data-companion-gender] body[data-character-theme="true"] .mood-pill, html[data-companion-gender] body[data-character-theme="true"] .pill, html[data-companion-gender] body[data-character-theme="true"] #current-mood-pill { background: linear-gradient(135deg, #FFF3EC, #FFE3D6) !important; border-color: var(--role-border) !important; color: var(--role-ink) !important; } html[data-companion-gender] body[data-character-theme="true"] .toggle input:checked + .slider, html[data-companion-gender] body[data-character-theme="true"] .pro-chip, html[data-companion-gender] body[data-character-theme="true"] .tag-btn.active { background: linear-gradient(135deg, #FF9D80, #FF7457) !important; border-color: #FF8E70 !important; color: #fff !important; box-shadow: 0 8px 22px -12px rgba(255,116,87,.32) !important; } html[data-companion-gender] body[data-character-theme="true"] .tag-btn:hover:not(.active) { border-color: var(--role-primary) !important; color: var(--role-strong) !important; } html[data-companion-gender] body[data-character-theme="true"] .proactive-slider { background: linear-gradient(90deg, var(--role-primary) var(--fill, 33%), #EEDFD8 var(--fill, 33%)) !important; } html[data-companion-gender] body[data-character-theme="true"] .proactive-slider::-webkit-slider-thumb, html[data-companion-gender] body[data-character-theme="true"] .proactive-slider::-moz-range-thumb { background: linear-gradient(135deg, #FFB69F, #FF7457) !important; box-shadow: 0 3px 12px rgba(255,116,87,.34), inset 0 1px 0 rgba(255,255,255,.72) !important; } html[data-companion-gender] body[data-character-theme="true"] .card, html[data-companion-gender] body[data-character-theme="true"] .memory-feature-card, html[data-companion-gender] body[data-character-theme="true"] .diary-card, html[data-companion-gender] body[data-character-theme="true"] .memory-card { border-color: rgba(242,213,199,.86) !important; } html[data-companion-gender] body[data-character-theme="true"] .card:hover, html[data-companion-gender] body[data-character-theme="true"] .diary-card:hover, html[data-companion-gender] body[data-character-theme="true"] .memory-card:hover { box-shadow: 0 22px 58px -20px rgba(122,68,47,.22), 0 2px 0 rgba(255,255,255,.48) inset !important; } html[data-companion-gender] body[data-character-theme="true"] .avatar-ring { background: conic-gradient(from 0deg, #FFAD94, #FFDCCF, #FF9273, #FFC0A9, #FFAD94) !important; } html[data-companion-gender] body[data-character-theme="true"] .stage-seg-fill, html[data-companion-gender] body[data-character-theme="true"] #missing-bar, html[data-companion-gender] body[data-character-theme="true"] #regen-progress { background: linear-gradient(90deg, #FFAD94, #FF7457) !important; } html[data-companion-gender] body[data-character-theme="true"] .stage-seg.cur { box-shadow: 0 0 14px rgba(255,116,87,.34) !important; } html[data-companion-gender] body[data-character-theme="true"] .stage-label.current { color: var(--role-strong) !important; } html[data-companion-gender] body[data-character-theme="true"] .bubble-me { background: linear-gradient(135deg, #FF9D80, #FF7457) !important; box-shadow: 0 8px 22px -14px rgba(255,116,87,.38); } html[data-companion-gender] body[data-character-theme="true"] .typing-dots span { background: var(--role-primary) !important; } html[data-companion-gender] body[data-character-theme="true"] .tl-item::before { background: linear-gradient(180deg, #FFDCCF, transparent) !important; } html[data-companion-gender] body[data-character-theme="true"] .tl-dot { background: linear-gradient(135deg, #FFF0E7, #FFAD94) !important; box-shadow: 0 3px 10px rgba(255,116,87,.20) !important; } html[data-companion-gender] body[data-character-theme="true"] .tl-dot.stage { background: linear-gradient(135deg, #FF9D80, #E85E42) !important; color: #fff !important; } html[data-companion-gender] body[data-character-theme="true"] .qr-frame { background: linear-gradient(135deg, #FFF0E7 0%, rgba(255,255,255,.94) 64%) !important; border-color: var(--role-border) !important; } html[data-companion-gender] body[data-character-theme="true"] .corner { border-color: var(--role-strong) !important; } html[data-companion-gender] body[data-character-theme="true"] .scan-line { background: linear-gradient(90deg, transparent, var(--role-strong), transparent) !important; } html[data-companion-gender] body[data-character-theme="true"] .glass-chip, html[data-companion-gender] body[data-character-theme="true"] .header-model-btn { background: var(--role-faint) !important; border-color: var(--role-border) !important; color: var(--role-ink) !important; } html[data-companion-gender] body[data-character-theme="true"] #silent-orb { background: radial-gradient(circle at 30% 30%, #FFC4B0, #FF7457 72%) !important; box-shadow: 0 0 18px 8px rgba(255,116,87,.30) !important; } html[data-companion-gender] body[data-character-theme="true"] #silent-orb::after { content: var(--role-present-label) !important; color: var(--role-strong) !important; } html[data-companion-gender] body[data-character-theme="true"] .xiyu-theme-bubble { background: var(--role-strong) !important; box-shadow: 0 10px 26px -10px rgba(255,116,87,.38) !important; } html[data-companion-gender] body[data-character-theme="true"] .app-tab-bar__item.is-active { color: var(--role-strong) !important; background: rgba(255,116,87,.10) !important; } html[data-companion-gender] body[data-character-theme="true"] .tab-active::after { background: linear-gradient(90deg, #FFAD94, #FF7457) !important; } html[data-companion-gender] body[data-character-theme="true"] ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(255,116,87,.44), rgba(255,173,148,.36)) !important; background-clip: content-box !important; } html[data-theme="dark"][data-companion-gender] body[data-character-theme="true"] { --role-primary: #FF9D80; --role-strong: #FFB19B; --role-soft: rgba(255,116,87,.15); --role-faint: rgba(255,116,87,.12); --role-border: rgba(255,173,148,.26); --role-ink: #FFC2B1; --role-glow: rgba(255,116,87,.26); --role-page: #15100E; --ink: #FFF8F4; --ink-mute: #B7A49B; background: radial-gradient(ellipse 66% 48% at 10% -5%, rgba(183,70,43,.26), transparent 68%), radial-gradient(ellipse 48% 40% at 95% 100%, rgba(141,71,48,.18), transparent 72%), #15100E !important; } html[data-theme="dark"][data-companion-gender] body[data-character-theme="true"] .mood-pill, html[data-theme="dark"][data-companion-gender] body[data-character-theme="true"] .pill, html[data-theme="dark"][data-companion-gender] body[data-character-theme="true"] #current-mood-pill, html[data-theme="dark"][data-companion-gender] body[data-character-theme="true"] [class~="bg-sakura-soft"], html[data-theme="dark"][data-companion-gender] body[data-character-theme="true"] [class~="bg-sakura-soft/30"], html[data-theme="dark"][data-companion-gender] body[data-character-theme="true"] [class~="bg-sakura-soft/40"], html[data-theme="dark"][data-companion-gender] body[data-character-theme="true"] [class~="bg-sakura-soft/70"], html[data-theme="dark"][data-companion-gender] body[data-character-theme="true"] [class~="bg-pink-50"], html[data-theme="dark"][data-companion-gender] body[data-character-theme="true"] [class~="bg-pink-100"] { background: rgba(255,116,87,.14) !important; border-color: rgba(255,173,148,.24) !important; color: #FFC2B1 !important; } html[data-theme="dark"][data-companion-gender] body[data-character-theme="true"] .tag-btn.active, html[data-theme="dark"][data-companion-gender] body[data-character-theme="true"] .chip.selected, html[data-theme="dark"][data-companion-gender] body[data-character-theme="true"] [aria-selected="true"], html[data-theme="dark"][data-companion-gender] body[data-character-theme="true"] [aria-pressed="true"] { background: linear-gradient(135deg, #C7583D, #963F2A) !important; border-color: #DB765D !important; color: #fff !important; }