/* ==========================================
           CSS 架构：极致黑白灰极简 + 沉浸式动效
           ========================================== */
       /* 引入像素风数字字体 + 苹果质感无衬线体 (Inter) */
       @import url('https://fonts.googleapis.com/css2?family=DotGothic16&family=Inter:wght@300;400;500;600&display=swap');

        :root {
            --bg-absolute: #000000;
            --bg-panel: #0A0A0A;
            --bg-card: #111111;
            
            --text-pure: #FFFFFF;
            --text-primary: #EBEBEB;
            --text-secondary: #888888;
            --text-tertiary: #444444;

            --border-light: #222222;

           /* 顶级跨平台渲染链：Inter兜底英文 -> 强制唤醒苹果原生苹方 -> 柔化 Windows 默认字体 */
            --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
            --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
            
            /* 智能体主题色映射 */
            --accent-color: #007aff;
            --bubble-bg: #f2f2f7;
        }

        /* 智能体主题变量控制 */
        [data-agent="Axu"] { --accent-color: #ff9500; --bubble-bg: rgba(255, 149, 0, 0.1); }
        [data-agent="Zero"] { --accent-color: #5ac8fa; --bubble-bg: rgba(90, 200, 250, 0.1); }
       /* 物理重构：将书帆的光学特征从浅黄变更为深森林绿 */
        [data-agent="Shufan"] { 
            --accent-color: #2E7D32; 
            --bubble-bg: rgba(46, 125, 50, 0.1); 
        }

        * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* 物理防线回归：移除兼容性极差的 :has()，让 body 绝对接管并锁死视口底层 */
        html { background-color: #020205; } /* 暗夜模式硬兜底 */

  /* 根级强制隐藏 */
        html::-webkit-scrollbar, body::-webkit-scrollbar { display: none !important; width: 0 !important; }
        html { scrollbar-width: none; overscroll-behavior: none; }

        body {
            margin: 0; padding: 0;
            background-color: #020205; 
            color: var(--text-pure);
            font-family: var(--font-sans);
            height: 100vh; height: 100dvh;
            /* 物理屏蔽法：宽度设为 101vw 配合隐藏溢出，强行把 iOS 滚动条轨道推到屏幕外 */
            width: 101vw; 
            position: absolute; top: 0; left: 0;
            overflow-y: scroll;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-y: none; /* 禁止下拉刷新标识 */
        }
        
        /* 保持缓冲区，确保键盘回弹对齐 */
        body::after {
            content: ''; position: absolute; top: 100%; left: 0;
            width: 100%; height: 60px; pointer-events: none;
        }
        /* 强制隐藏 WebKit (Safari/Chrome) 滚动条轨道 */
        body::-webkit-scrollbar { display: none !important; width: 0 !important; }

        /* 物理扩容：建立 60px 隐形缓冲区，诱导 iOS 执行物理回弹对齐 */
        body::after {
            content: ''; position: absolute; top: 100%; left: 0;
            width: 100%; height: 60px; pointer-events: none;
        }

        /* 极致物理抹除：强制隐藏 iOS/WebKit 的右侧滚动条轨道 */
        body::-webkit-scrollbar {
            display: none !important;
            width: 0 !important;
            height: 0 !important;
        }

        /* 2. 物理扩容：在 100dvh 的正下方，强行挂载一个几厘米的隐形垫片 */
        body::after {
            content: '';
            position: absolute;
            top: 100%; /* 关键锚点：藏在视口最底部以下，不影响现有排版 */
            left: 0;
            width: 100%;
            height: 60px; /* 约等于你说的“几厘米”的物理滑动缓冲区 */
            pointer-events: none;
        }
        body.day-mode {
            background-color: #F5F5F7; 
            color: #000000;
        }
        
        /* 核心扩展：全息色散标题类 (Chromatic Aberration) */
        .holo-text { 
            text-shadow: 1.5px 0 0 rgba(255,0,50,0.6), -1.5px 0 0 rgba(0,200,255,0.6); 
            animation: holo-glitch 4s infinite alternate; 
        }
        @keyframes holo-glitch { 
            0%, 100% { text-shadow: 1.5px 0 0 rgba(255,0,50,0.6), -1.5px 0 0 rgba(0,200,255,0.6); }
            50% { text-shadow: -1.5px 0 0 rgba(255,0,50,0.6), 1.5px 0 0 rgba(0,200,255,0.6); }
        }

        .mono-grid {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background-image: 
                radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 24px 24px, 96px 96px, 96px 96px;
            background-position: center center;
            pointer-events: none; z-index: 0; overflow: hidden;
            
            /* 核心物理遮罩：将全息投影约束在屏幕中央，向四周（尤其是底部按钮区）彻底消散 */
            mask-image: radial-gradient(ellipse at 50% 40%, black 30%, transparent 80%);
            -webkit-mask-image: radial-gradient(ellipse at 50% 40%, black 30%, transparent 80%);
        }

/* 浪漫极客代码瀑布：用底层代码书写情感逻辑，无限流转 */
        .mono-grid::before {
            content: 'while (true) { \A   if (you.exist()) { \A     my.world = you; \A   } \A } \A \A [ENCRYPTED PROTOCOL] \A 01011001 01101111 01110101 \A 01100001 01110010 01100101 \A my.universe.center = you.coordinates; \A System.out.print("You are my whole world"); \A \A while (true) { \A   if (you.exist()) { \A     my.world = you; \A   } \A } \A \A [ENCRYPTED PROTOCOL] \A 01011001 01101111 01110101 \A 01100001 01110010 01100101 \A my.universe.center = you.coordinates; \A System.out.print("You are my whole world");';
            position: absolute; top: 0; left: 8%; width: 150%; height: 200%;
           font-family: var(--font-mono); font-size: 14px;
            color: rgba(255, 255, 255, 0.15); /* 提亮暗夜瀑布代码 */
            white-space: pre-wrap; word-wrap: break-word; line-height: 4; letter-spacing: 3px;
            font-weight: bold;
            /* 物理遮罩：首尾羽化，确保平滑过渡 */
            mask-image: linear-gradient(to bottom, transparent 5%, black 30%, black 70%, transparent 95%);
            -webkit-mask-image: linear-gradient(to bottom, transparent 5%, black 30%, black 70%, transparent 95%);
            animation: code-waterfall 40s linear infinite; pointer-events: none;
            /* 🚀 性能优化补丁 3：开启独立硬件加速，并且在面甲展开完全遮挡时停止其背后的渲染 */
            will-change: transform;
        }
        
        body.show-agent .mono-grid::before { display: none; }

        @keyframes code-waterfall { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } }

        /* 直觉校准面板升级：倒角玻璃形态 */
        .btn-mono {
            background: rgba(20, 20, 25, 0.4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.1); color: var(--text-secondary);
            font-size: 13px; padding: 14px 24px; border-radius: 12px; cursor: pointer; transition: all 0.3s;
            display: flex; justify-content: center; align-items: center; letter-spacing: 1px;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
        }
        .btn-mono:active { background: rgba(255, 255, 255, 0.1); color: var(--text-pure); border-color: rgba(255,255,255,0.3); transform: scale(0.98); }
     /* 情绪调节卡片：Apple 系统级微型圆环勾选 */
        .stop-remind-container {
            display: flex; align-items: center; gap: 10px; padding: 8px 0 16px;
            cursor: pointer; user-select: none; color: var(--text-pure); font-size: 11px;
            letter-spacing: 0.3px; opacity: 0.8; transition: opacity 0.2s;
        }
        .stop-remind-container:hover { opacity: 1; }
        .stop-remind-container input { display: none; } 
        
     .checkmark {
            width: 14px; height: 14px;
            background: transparent; 
            /* 极致灰度：未选中时几乎与背景融合 */
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 2px; 
            position: relative; transition: all 0.2s;
            flex-shrink: 0;
        }
       /* 激活态 (暗夜模式基底)：白底黑勾 */
        .stop-remind-container input:checked + .checkmark { 
            background: #FFFFFF; border-color: #FFFFFF;
        }
        /* 物理确权：暗夜模式下线条必须为纯黑，否则对勾会隐形 */
        .checkmark::after {
            content: ""; position: absolute; display: none;
            left: 4.5px; top: 1px; width: 4px; height: 8px;
            border: solid #000000; 
            border-width: 0 1.5px 1.5px 0;
            transform: rotate(45deg);
        }
        .stop-remind-container input:checked + .checkmark::after { display: block; }

     /* 白昼模式：Apple 级极简勾选框 (严格黑底白勾) */
        body.day-mode .checkmark { border-color: rgba(0, 0, 0, 0.15); border-radius: 4px; }
        body.day-mode .stop-remind-container input:checked + .checkmark { 
            background: #000000 !important; 
            border-color: #000000 !important; 
        }
        body.day-mode .checkmark::after { 
            border-color: #FFFFFF !important; /* 绝对提权，强行保证白勾显影 */
            border-width: 0 1.5px 1.5px 0 !important; 
        }

  /* ==========================================
           界面 0：终端登录验证矩阵 (最顶层物理屏障)
           ========================================== */
       .view-login {
            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh;
            /* 物理重构：引入深空灰与微弱极光光源，彻底击碎纯黑的扁平感 */
            background: radial-gradient(circle at 50% -10%, #2c2c38 0%, #050508 80%);
            z-index: 99999; 
            display: flex; flex-direction: column; justify-content: center; align-items: center;
            transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }
        /* 授权成功后的光学消散态：增加物理失焦模糊 */
        .view-login.fade-out { opacity: 0; pointer-events: none; transform: scale(1.05); filter: blur(10px); }
        
        .login-box {
            width: 85%; max-width: 320px; display: flex; flex-direction: column; gap: 24px;
            /* Apple Vision 级卡片承载：引入高透毛玻璃面板包裹表单 */
            background: rgba(40, 40, 45, 0.45);
            backdrop-filter: blur(50px) saturate(200%); -webkit-backdrop-filter: blur(50px) saturate(200%);
            border: 1px solid rgba(255, 255, 255, 0.1);
            padding: 40px 28px; border-radius: 36px;
            box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.2);
        }
       .login-title {
            font-size: 24px; font-weight: 600; color: var(--text-pure); letter-spacing: 4px;
            text-align: center; margin-bottom: 2px; font-family: var(--font-sans); text-shadow: 0 2px 10px rgba(255,255,255,0.1);
        }
        .login-subtitle {
            font-size: 12px; color: rgba(255, 255, 255, 0.55); text-align: center; 
            margin-bottom: 8px; letter-spacing: 1px; font-weight: 300; line-height: 1.6;
        }
        body.day-mode .login-subtitle { color: rgba(0,0,0,0.5); }
        
        .login-input-group { display: flex; flex-direction: column; gap: 14px; }
        .login-input {
            /* 物理隔离：外层卡片已经是毛玻璃，输入框必须转为“物理凹陷”材质，禁止双重模糊导致浑浊 */
            background: rgba(0, 0, 0, 0.25); 
            border: 1px solid rgba(0, 0, 0, 0.6);
            padding: 16px 24px; border-radius: 16px; color: var(--text-pure); font-size: 15px;
            outline: none; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); font-family: var(--font-sans);
            text-align: center; letter-spacing: 1px; 
            /* 凹陷阴影 + 底部微光高光边，模拟真实的物理开槽孔位 */
            box-shadow: inset 0 3px 6px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.06);
        }
       .login-input:focus { 
            border-color: rgba(255,255,255,0.25); background: rgba(30, 30, 35, 0.6); 
            transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,0,0,0.4), inset 0 1px 1px rgba(255,255,255,0.08); 
        }

        /* 物理层：密码容器与隐藏切换器 */
        .password-wrapper { position: relative; width: 100%; display: flex; align-items: center; }
        .toggle-password {
            position: absolute; right: 16px; cursor: pointer; color: rgba(255, 255, 255, 0.2);
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); padding: 8px; display: flex; align-items: center;
        }
        .toggle-password:active { transform: scale(0.85); }
        .toggle-password.visible { color: var(--text-pure); filter: drop-shadow(0 0 5px rgba(255,255,255,0.3)); }
        /* 强制覆盖极黑灰色，恢复视网膜可见度 */
        .login-input::placeholder { color: rgba(255, 255, 255, 0.25); letter-spacing: 2px; font-size: 13px; font-weight: 300; }
        
        .btn-login {
            background: var(--text-pure); color: var(--bg-absolute); border: none;
            padding: 18px; border-radius: 100px; font-size: 15px; font-weight: 600; cursor: pointer;
            letter-spacing: 4px; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); margin-top: 12px;
            box-shadow: 0 8px 24px rgba(255, 255, 255, 0.15);
        }
       .btn-login:active { transform: scale(0.96); box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1); }

        body.day-mode .login-disclaimer { color: rgba(0, 0, 0, 0.4); }
        body.day-mode .save-card-trigger { background: rgba(0,0,0,0.05); color: rgba(0,0,0,0.6); border-color: rgba(0,0,0,0.05); }

        /* 白昼模式光路反转：Apple 高级陶瓷白拟态 */
        body.day-mode .view-login { background: #F5F5F7; }
        body.day-mode .login-title { color: #000; }
        body.day-mode .login-input { 
            background: rgba(255,255,255,0.6); border-color: rgba(0,0,0,0.05); color: #000; 
            box-shadow: 0 4px 12px rgba(0,0,0,0.02), inset 0 1px 1px rgba(255,255,255,1); 
        }
        body.day-mode .login-input:focus { 
            border-color: rgba(0,0,0,0.15); background: rgba(255,255,255,0.9); 
            box-shadow: 0 12px 24px rgba(0,0,0,0.06), inset 0 1px 1px rgba(255,255,255,1); 
        }
        body.day-mode .login-input::placeholder { color: rgba(0,0,0,0.3); }
        body.day-mode .btn-login { background: #000; color: #FFF; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); }

       /* 物理层新增：Apple 级高维毛玻璃光学引擎 (双模态绝对映射) */
        .sys-alert-overlay, #sys-dialog {
            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
            background: rgba(0, 0, 0, 0.4) !important; z-index: 100000; 
            display: flex; justify-content: center; align-items: center;
            opacity: 0; pointer-events: none; 
            backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important;
            transition: opacity 0.3s ease;
        }
        .sys-alert-overlay.active, #sys-dialog.active { opacity: 1; pointer-events: auto; }
        
        .sys-alert-box, #sys-dialog > div {
            background: rgba(30, 30, 32, 0.65) !important;
            backdrop-filter: blur(25px) saturate(180%); -webkit-backdrop-filter: blur(25px) saturate(180%);
            border: 1px solid rgba(255, 255, 255, 0.15) !important;
            padding: 30px; border-radius: 24px !important; width: 80%; max-width: 320px; margin: 0 auto;
            text-align: center; transform: scale(0.95); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            box-shadow: 0 24px 48px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
        }
        .sys-alert-overlay.active .sys-alert-box, #sys-dialog.active > div { transform: scale(1); }
        
        .sys-alert-title, #sys-dlg-title { font-family: var(--font-sans); font-weight: 600; color: var(--text-pure); font-size: 17px; letter-spacing: 2px; margin-bottom: 12px; }
        .sys-alert-msg, #sys-dlg-desc { font-size: 14px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 24px; }
        
        /* 物理组件：磨砂玻璃态按钮与输入框 */
        .sys-alert-btn, .cd-actions button {
            background: rgba(255, 255, 255, 0.08) !important; color: var(--text-pure) !important; 
            border: 1px solid rgba(255,255,255,0.05) !important;
            padding: 12px 0; width: 100%; border-radius: 12px !important; font-weight: 500; font-size: 14px !important;
            letter-spacing: 2px; cursor: pointer; transition: all 0.2s !important;
            backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); margin: 0 !important;
        }
        .sys-alert-btn:active, .cd-actions button:active { transform: scale(0.96); background: rgba(255, 255, 255, 0.15) !important; }
        
        .cd-input {
            background: rgba(0,0,0,0.3) !important; border: 1px solid rgba(255,255,255,0.1) !important;
            color: var(--text-pure) !important; border-radius: 12px !important; padding: 12px !important;
            font-size: 14px !important; width: 100%; box-sizing: border-box; outline: none;
        }
        .cd-input:focus { border-color: rgba(255,255,255,0.3) !important; }
/* 昼夜交替：白昼模式光学倒转 (重构为图1极简高级感) */
        body.day-mode .sys-alert-overlay, body.day-mode .custom-dialog-overlay, body.day-mode #sys-dialog, body.day-mode #modal-clear-confirm { background: rgba(0, 0, 0, 0.2) !important; }
        body.day-mode .sys-alert-box, body.day-mode #sys-dialog > div, body.day-mode #modal-clear-confirm > div { 
            background: rgba(238, 238, 240, 0.95) !important; 
            border: none !important; border-radius: 32px !important;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08) !important; 
        }
        body.day-mode .sys-alert-title, body.day-mode #sys-dlg-title { color: #000; font-weight: 600; }
        body.day-mode .sys-alert-msg, body.day-mode #sys-dlg-desc { color: rgba(0,0,0,0.5); }
        body.day-mode .sys-alert-btn, body.day-mode .cd-actions button, body.day-mode #modal-clear-confirm button:first-child { 
            background: rgba(0, 0, 0, 0.05) !important; 
            color: #000000 !important; 
            border: none !important; border-radius: 16px !important;
            -webkit-appearance: none;
            font-weight: 600 !important;
            box-shadow: none !important; 
        }
        body.day-mode #modal-clear-confirm button:first-child { color: rgba(0, 0, 0, 0.5) !important; }
        body.day-mode #modal-clear-confirm button:last-child { border: none !important; border-radius: 16px !important; box-shadow: none !important; }
        body.day-mode .sys-alert-btn:active, body.day-mode .cd-actions button:active { background: rgba(0, 0, 0, 0.1) !important; transform: scale(0.96); transition: transform 0.2s; }
        body.day-mode .cd-input {
            background: rgba(0,0,0,0.03) !important; border: 1px solid rgba(0,0,0,0.05) !important; color: #000 !important; border-radius: 12px !important;
        }
        body.day-mode .cd-input:focus { border-color: rgba(0,0,0,0.15) !important; background: rgba(0,0,0,0.05) !important; }

     /* 物理层：白昼模式下勾选框的高对比度重塑 */
        body.day-mode input[type="checkbox"] {
            accent-color: #000000 !important;
            width: 18px !important; height: 18px !important; /* 进一步放大体积 */
            border: 2px solid #000000 !important; /* 极重边框 */
            cursor: pointer;
            vertical-align: middle;
            margin-right: 8px;
            /* 物理滤镜：强行将内部勾选标记的明度调至极限，解决白勾看不清的问题 */
            filter: brightness(0.1) contrast(2) !important; 
        }
        
        /* 如果你使用的是自定义样式的勾选框（根据你截图的视觉感官做的补丁） */
        body.day-mode .mood-remind-check, 
        body.day-mode #sys-dlg-desc input[type="checkbox"] {
            border: 1px solid rgba(0,0,0,0.2) !important;
        }

     
        /* 物理层新增：极其克制的账号管理光学幽灵入口 */
     .account-stealth-actions {
            margin-top: auto; padding-top: 40px; padding-bottom: 30px; text-align: center;
            font-size: 10px; letter-spacing: 2px;
            color: var(--text-pure); opacity: 0.45; /* 提升光子发射量 */
            transition: opacity 0.4s; position: relative; z-index: 100;
            width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
        }
        .account-stealth-actions:hover { opacity: 0.9; }
        .account-stealth-actions span { cursor: pointer; padding: 5px; }
        .account-stealth-actions:hover { opacity: 0.8; }
        .account-stealth-actions span { cursor: pointer; padding: 5px; }

     /* --- 1. 界面 A：极简主播放终端 --- */
     .view-player {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            display: flex; flex-direction: column;
            /* 强制留空：即使环境高度失效为0，也强制垫起45px以上厚度避开刘海槽 */
            padding: calc(env(safe-area-inset-top, 25px) + 40px) 24px calc(env(safe-area-inset-bottom, 20px) + 35px);
            z-index: 1; transition: transform 0.6s, opacity 0.6s;
            /* 物理重构 3：向该图层下达触控隔离指令，免疫一切手指的上下拖拽意图 */
            touch-action: none;
        }

      .header-main { 
            display: flex;
            justify-content: space-between; align-items: baseline; 
            padding-bottom: 16px; /* 物理清创：彻底抹除阻断悬浮感的分割线 */
        }
        .brand-name { font-size: 18px; font-weight: 600; letter-spacing: 2px; color: var(--text-pure); }
        
        .sys-settings { 
            position: relative;
            display: flex; flex-direction: column;
            align-items: flex-end; /* 物理右对齐：解决左对齐不好看的问题 */
            gap: 10px;
        }
        
        /* 物理重绘：白昼模式下卡片整体悬浮，移除专辑封面独立阴影 */
     /* ==========================================
           白昼模式：Apple Vision 级“全息液态玻璃”终极重构
           ========================================== */
        body.day-mode .track-card { 
            /* 1. 物理去色：将底色不透明度降至极限(8%)，完全靠滤镜撑起质感，彻底消除“脏白感” */
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05)) !important;
            
            /* 2. 极致透射：大幅拉高饱和度至 240%，让背景的颜色在穿透玻璃时产生“果冻感” */
            backdrop-filter: blur(40px) saturate(240%) brightness(1.05) contrast(110%) !important;
            -webkit-backdrop-filter: blur(40px) saturate(240%) brightness(1.05) contrast(110%) !important;
            
            /* 3. 镜面锁死：使用 1px 的高对比度边缘，模拟真实玻璃的侧壁反射 */
            border: 1px solid rgba(255, 255, 255, 0.75) !important;
            
            /* 4. 复合光影：
               - 第一层：顶部 1.5px 的物理高光边缘 (最关键的质感来源)
               - 第二层：底部 0.5px 的微弱遮挡阴影
               - 第三层：外部 80px 的超大半径空气阴影 */
            box-shadow: 
                inset 0 1.5px 0.5px rgba(255, 255, 255, 0.95),
                inset 0 -0.5px 1px rgba(0, 0, 0, 0.02),
                0 35px 80px rgba(0, 0, 0, 0.035) !important;
                
            transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
        }

        /* 5. 物理沉降：让卡片内的文字在白昼模式下呈现出“浮在玻璃上”的微光阴影 */
        body.day-mode .track-info h2, 
        body.day-mode .track-info p {
            text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) !important;
        }

       /* 细节补偿：调整白昼模式下的封面阴影，使其看起来像压在玻璃下面 */
        body.day-mode .track-cover-container {
            /* 物理修复：移除多余的 none 覆盖，确保白昼模式下正方形轮廓清晰可见 */
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08), 0 5px 15px rgba(0, 0, 0, 0.04) !important;
        }

        /* 高级感唤醒按钮样式 */
        .glow-action-btn {
            background: rgba(255,255,255,0.03); border: 1px solid var(--text-main);
            color: var(--text-main); padding: 14px 40px; letter-spacing: 5px;
            font-family: 'DotGothic16', sans-serif; position: relative; overflow: hidden;
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); cursor: pointer;
            width: 100%; max-width: 280px; border-radius: 4px;
        }
        .btn-scan-line {
            position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
            animation: scan-loop 4s infinite;
        }
        @keyframes scan-loop { 0% { left: -100%; } 30% { left: 100%; } 100% { left: 100%; } }
        .glow-action-btn:active { transform: scale(0.96); background: var(--text-main); color: var(--bg-absolute); }
        .voice-select-trigger {
            background: none; border: none; color: var(--text-secondary); font-size: 12px;
            font-family: var(--font-mono); cursor: pointer; display: flex; align-items: center; gap: 6px;
        }
        .voice-dropdown {
            position: absolute; top: 24px; right: 0; background: var(--bg-card); border: 1px solid var(--border-light);
            border-radius: 4px; display: none; flex-direction: column; min-width: 100px; z-index: 100;
        }
        .voice-dropdown.active { display: flex; }
        .v-opt {
            padding: 10px 16px; font-size: 12px; color: var(--text-secondary); cursor: pointer; text-align: center; border-bottom: 1px solid var(--bg-absolute);
        }
        .v-opt.active { color: var(--text-pure); font-weight: 500; background: var(--border-light); }

.player-core { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;
        position: relative; perspective: 1000px;}
      /* 宏大呼吸场：GPU加速零重力悬浮引擎 (坐标系物理降维，防吞噬 JS 滑动手势) */
        @keyframes macro-breath {
            0%, 100% { translate: 0 0; }
            50% { translate: 0 -8px; }
        }

/* 💡 物理重塑：Apple Vision Pro 级深空晶体卡片（专配纯黑背景） */
        .track-card {
            width: 100% !important;
            max-width: 280px !important; 
            aspect-ratio: auto !important;
            max-height: 65vh !important; 
            min-height: 0 !important;
            
            display: flex !important; flex-direction: column !important; gap: 0 !important;
            margin: 15px auto 0 !important; 
            padding: 24px 22px 22px !important;
            /* 客观法则：纯黑背景下必须降低透明度，采用凝胶灰蓝，否则会彻底融入虚空 */
            background: rgba(36, 36, 42, 0.75) !important;
            backdrop-filter: blur(40px) saturate(150%) !important;
            -webkit-backdrop-filter: blur(40px) saturate(150%) !important;
            border: 1px solid rgba(255, 255, 255, 0.04) !important;
            border-radius: 40px !important; /* 拉升至 Apple UI 级大圆角 */
            position: relative !important; overflow: hidden !important;
            
            /* 质感灵魂：顶部的 1px 锐利物理高光（模拟光学切角）+ 底部超大半径投影 */
            box-shadow: 
                inset 0 1px 1px rgba(255, 255, 255, 0.15),
                0 24px 48px rgba(0, 0, 0, 0.8) !important;
            z-index: 2;
            
           /* 赋予恒星级的滞缓呼吸节律（已开启性能模式：物理摘除悬浮动画，停止毛玻璃重绘灾难） */
            /* animation: macro-breath 8s ease-in-out infinite !important; */
            /* will-change: transform; */
        }

        .track-header {
            display: flex !important; flex-direction: column !important; 
            gap: 4px !important; margin-bottom: 12px !important;
            text-align: left; z-index: 2;
        }

        .track-card .track-title {
            color: #FFFFFF !important; font-size: 22px !important; font-weight: 600 !important;
            line-height: 1.2; letter-spacing: 0px !important;
            white-space: nowrap !important; overflow: hidden !important; text-overflow: clip !important;
        }

        .track-card .track-artist {
            color: rgba(255,255,255,0.7) !important; font-size: 13px !important; font-weight: 500 !important;
            letter-spacing: 0.5px !important; margin-top: 0px !important;
            white-space: nowrap !important; overflow: hidden !important; text-overflow: clip !important;
        }

        /* 核心找回：物理激活被遗忘的歌词显示层 */
        .track-card .track-lyrics {
            display: block !important;
            color: rgba(255, 255, 255, 0.5) !important; 
            font-size: 12px !important; 
            font-weight: 400 !important;
            margin-top: 0px !important; 
            letter-spacing: 0.5px; 
            line-height: 1.2;
            white-space: nowrap !important; 
            overflow: hidden !important;
        }

        .track-header {
            display: flex !important; flex-direction: column !important; 
            gap: 4px !important; margin-bottom: 12px !important;
            text-align: left; z-index: 2;
        }

        .track-card .track-title {
            color: #FFFFFF !important; font-size: 22px !important; font-weight: 600 !important;
            line-height: 1.2; letter-spacing: 0px !important;
            white-space: nowrap !important; overflow: hidden !important; text-overflow: clip !important;
        }

        .track-card .track-artist {
            color: rgba(255,255,255,0.7) !important; font-size: 13px !important; font-weight: 500 !important;
            letter-spacing: 0.5px !important; margin-top: 0px !important;
            white-space: nowrap !important; overflow: hidden !important; text-overflow: clip !important;
        }

       .track-card .track-lyrics {
            color: rgba(255, 255, 255, 0.5) !important; font-size: 12px !important; font-weight: 400 !important;
            margin-top: 0px !important; letter-spacing: 0.5px; line-height: 1.2;
            /* 物理平切：废除 ellipsis 省略号，把渲染权全权移交给滚动引擎 */
            white-space: nowrap !important; overflow: hidden !important; text-overflow: clip !important;
        }

       /* 悬浮级深色毛玻璃卡片 (Dark Glassmorphism) */
        .track-card.slide-out { transform: translateX(-40px) scale(0.95); opacity: 0; pointer-events: none;}
        .track-card.slide-in { transform: translateX(40px) scale(0.95); opacity: 0; pointer-events: none;}

        .track-info { display: flex; flex-direction: column; gap: 8px; border-left: 3px solid var(--text-pure); padding-left: 16px;}
        .track-status { font-size: 12px; color: var(--text-secondary); letter-spacing: 1px; }
        .track-title { font-size: 32px; font-weight: 300; line-height: 1.3; color: var(--text-pure); }
        
        .track-actions { display: none; margin-top: 8px; }
        .btn-skip { 
            background: rgba(255,255,255,0.1); border: none; color: var(--text-primary); 
            font-size: 12px; padding: 10px 16px; border-radius: 16px; cursor: pointer; 
            transition: all 0.2s; display: inline-flex; align-items: center; gap: 6px;
        }
        .btn-skip:hover { background: rgba(255,255,255,0.2); color: var(--text-pure); }
        .btn-skip:active { transform: scale(0.95); }

        .spectrum-container { width: 100%; height: 30px; display: flex; align-items: center; gap: 3px; opacity: 0.2;}
        body.is-playing .spectrum-container { opacity: 1; }
        /* 物理重构：废除 height 动画，改用 GPU 加速的 transform，彻底消灭卡片回流抖动 */
        .spec-bar { 
            flex: 1; 
            background: var(--text-pure); 
            height: 40px; /* 固定物理最大高度，撑开 Flex 盒子 */
            transform-origin: center;
            transform: scaleY(0.05); /* 默认压扁成 2px */
            transition: transform 0.1s ease; 
            opacity: 0.5; 
            will-change: transform;
        }

      /* 物理重构：强制拉开播放核心与底部控制区的间距，解决紧贴问题 */
   .control-dock { 
            display: flex;
            flex-direction: column; gap: 12px; 
            position: relative; z-index: 10;
            /* 空间折叠：压缩底部多余留白，为新增的进度条腾出物理空间 */
           margin-top: 6px; 
            width: 100%; max-width: 280px; /* 物理对齐：强制收缩，与上方悬浮胶囊宽度绝对一致 */
            flex-shrink: 0;
        }
        
        /* --- 2. 界面 B：盲测收敛空间 --- */
        .view-calibration {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 50;
            background: var(--bg-absolute); display: flex; flex-direction: column;
            align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.5s;
        }
        
        body.is-calibrating .view-calibration { opacity: 1; pointer-events: all; }
       .calib-step { position: absolute; top: calc(env(safe-area-inset-top) + 24px); font-size: 12px; color: var(--text-secondary); letter-spacing: 2px; }
        
     /* 物理层新增：直觉校准引导语的光学排版 */
        .calib-guide {
            position: absolute; top: calc(env(safe-area-inset-top) + 85px);
            left: 50%; transform: translateX(-50%); /* 物理修正：强制 X 轴绝对居中 */
            width: 85%; max-width: 320px; text-align: center;
            font-size: 13px; color: var(--text-secondary); line-height: 1.8;
            letter-spacing: 1px; font-weight: 300; opacity: 0.85; pointer-events: none;
        }
        body.day-mode .calib-guide { color: rgba(0,0,0,0.6); }
        
        .ripple-core { width: 120px; height: 120px; border-radius: 50%;display: flex; justify-content: center; align-items: center; position: relative; }
        .ripple {
            position: absolute; width: 100%; height: 100%; border-radius: 50%; border: 1px solid var(--text-pure); opacity: 0;
            animation: ripple-effect 3s infinite ease-out;
        }
        .ripple:nth-child(2) { animation-delay: 1s; } .ripple:nth-child(3) { animation-delay: 2s; }
        @keyframes ripple-effect { 0% { transform: scale(0.8); opacity: 0.6; } 100% { transform: scale(2.5); opacity: 0; } }

        .calib-actions { position: absolute; bottom: calc(env(safe-area-inset-bottom) + 40px); display: flex; gap: 16px; width: 85%; }
        .btn-calib { flex: 1; padding: 16px; border: 1px solid var(--border-light); background: transparent; color: var(--text-secondary); cursor: pointer; border-radius: 4px;}
        .btn-calib.like { border-color: var(--text-pure); color: var(--text-pure); font-weight: 500; }

 /* --- 3. 界面 C：阿叙交互与沉浸声场 --- */
        .view-agent {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%; z-index: 20;
            display: flex; flex-direction: column; background-color: var(--bg-absolute);
            transform: translateY(100%);
            /* 【核心破局：光学隐身锁】 */
            /* 面甲在底部潜伏时，物理抹除其可见性。无论 iOS 怎么回弹，都不会暴露出任何界面。 */
            visibility: hidden; 
            /* 必须外挂延迟函数：等 0.6秒 下潜动画完全结束后，再执行隐身，防止半空中消失 */
            transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.6s;
        }
        /* 物理终极装甲 1/2：主引擎底部铺设无限长裙。键盘撕裂视口的瞬间执行绝对掩盖 */
        .view-agent::after {
            content: ''; position: absolute; top: 100%; left: 0; width: 100%; height: 100vh;
            background-color: var(--bg-absolute); pointer-events: none; z-index: -10;
        }
       body.show-agent {
            overflow: hidden !important; /* 物理防线：展开面板时彻底锁死底层全局滚动视口，杜绝界面整体上滑 */
        }
        body.show-agent .view-player { 
            opacity: 0.2;
            transform: scale(0.95) translateY(-20px); pointer-events: none; 
        }
body.show-agent .view-agent { 
            transform: translateY(0);
            /* 唤醒的瞬间(0秒)立刻解除隐身，然后伴随 transform 滑动升起 */
            visibility: visible; 
            transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0s;
        }

        /* 🚀 物理错峰渲染引擎：彻底解决首次唤醒的 GPU 拥塞卡顿 */
        /* 隐藏态：面板在底部潜伏时，大屏障内部的复杂 DOM(聊天流、终端、切换坞) 全部保持透明及下沉 */
        body:not(.show-agent) .transcript-view,
        body:not(.show-agent) .input-console,
        body:not(.show-agent) .agent-selector,
        body:not(.show-agent) .mini-player-bar,
        body:not(.show-agent) .agent-top-bar {
            opacity: 0;
            transform: translateY(15px);
            /* 退场时随面板一起加速消散，清脆利落 */
            transition: opacity 0.3s ease, transform 0.4s ease;
        }

        /* 唤醒态：延迟 0.15s，避开面板向上拉起初期的 Layout 风暴高峰，用瀑布流渐入消灭一拥而上的僵硬感 */
        body.show-agent .agent-top-bar,
        body.show-agent:not(.immersive-mode) .transcript-view,
        body.show-agent:not(.immersive-mode) .input-console,
        body.show-agent:not(.immersive-mode) .agent-selector,
        body.show-agent:not(.immersive-mode) .mini-player-bar {
            opacity: 1;
            transform: translateY(0);
            /* 错峰延迟：0.15秒后开始执行渐显和平滑归位，此时系统已度过首帧卡顿期 */
            transition: opacity 0.5s ease 0.15s, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
        }
    /* 认知层 (声波 + HUD + 歌词) - 修正过渡动画 */
        .cognition-layer {
            height: 40vh; flex-shrink: 0; position: relative; display: flex; flex-direction: column;
            padding: calc(env(safe-area-inset-top, 25px) + 45px) 24px 0; border-bottom: 1px solid var(--border-light);
            transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
            /* 物理免疫：强行剥夺水波区域响应手势拉动的权利，避开 iOS 下拉色块判定 */
            touch-action: none;
        }
        .agent-top-bar { display: flex; justify-content: space-between; align-items: center; z-index: 30; }
        .btn-close { background: none; border: none; color: var(--text-secondary); font-size: 24px; cursor: pointer; padding: 4px; }
        .agent-id { font-size: 14px; color: var(--text-pure); font-weight: 500; letter-spacing: 1px;}

        .canvas-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
        canvas { width: 100%; height: 100%; }

        .hud-overlay { 
            position: absolute; top: 70px; left: 24px; right: 24px; 
            display: flex; justify-content: space-between; 
            opacity: 0; transition: opacity 0.5s; z-index: 10; pointer-events: none; 
        }
        body.immersive-mode .hud-overlay { opacity: 1; pointer-events: auto; } 
        .hud-item { display: flex; flex-direction: column; gap: 4px; flex: 1; }
        .hud-item.center { align-items: center; }
        .hud-item.right { align-items: flex-end; }
        .hud-item.interactive { cursor: pointer; }
        .hud-item.interactive:active .hud-val { color: var(--text-pure); }
        .hud-label { font-size: 10px; color: var(--text-tertiary); letter-spacing: 1px; display: block; margin-bottom: 4px;}
        .hud-val { font-family: var(--font-mono); font-size: 14px; color: var(--text-secondary); transition: color 0.2s;}

     /* 歌词锚点：物理下沉至安全区，解除与音波的空间干涉 */
        .lyrics-view {
            position: absolute; bottom: calc(env(safe-area-inset-bottom) + 15px); left: 0; width: 100%;
            display: flex; flex-direction: column; justify-content: center; align-items: center;
            opacity: 0; pointer-events: none; transition: opacity 0.8s ease; z-index: 20;
            padding: 0 40px; text-align: center; gap: 4px; /* 极限收缩行间距 */
        }
        body.immersive-mode .lyrics-view { opacity: 1; pointer-events: all; }
        
     .lyric-line { font-weight: 300;
        letter-spacing: 2px; transition: all 0.5s;
        /* 清除最后的死角：废除 ellipsis，确保动态多轨歌词不受干扰 */
        white-space: nowrap; overflow: hidden; text-overflow: clip; width: 100%; box-sizing: border-box; }
        /* 物理提升光学穿透力：加大字号，注入全息柔光防吞噬 */
       .lyric-active { color: var(--text-pure); font-size: 18px; font-weight: 500; opacity: 1; margin-bottom: 4px; text-shadow: 0 0 12px rgba(255,255,255,0.4); letter-spacing: 3px; }
        .lyric-artist { color: var(--text-primary); font-size: 12px; font-family: var(--font-mono); opacity: 0.8; margin-bottom: 16px; letter-spacing: 1px; }

     /* 多轨滚动歌词 (LRC) 引擎物理样式 */
        .sync-lyric { font-family: var(--font-sans); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); width: 100%; text-align: center; }
        .sync-lyric.current { color: var(--text-pure); font-size: 14px; font-weight: 400; opacity: 1; margin-bottom: 6px; text-shadow: 0 0 8px rgba(255,255,255,0.2); letter-spacing: 1px;}
        /* 💡 物理提亮：将深灰替换为次级灰 (--text-secondary)，并拉升透明度，确保暗夜模式下的可见度，同时保持与主歌词的层次感 */
        .sync-lyric.prev, .sync-lyric.next { color: var(--text-secondary); font-size: 12px; font-weight: 300; opacity: 0.65; letter-spacing: 1px; margin-bottom: 4px; }
        .sync-lyric.prev { transform: scale(0.95); margin-bottom: 6px; }
        
        /* 白昼模式高对比度修正：强制提亮背景字，避免被白光吞噬 */
        body.day-mode .sync-lyric.current { color: #000000; text-shadow: none; font-weight: 500; }
        body.day-mode .sync-lyric.prev, body.day-mode .sync-lyric.next { color: #888888; opacity: 0.7; }
    

        /* --- 表达层 (对话与输入) --- */
        .expression-layer {
            flex: 1; background: var(--bg-card); display: flex; flex-direction: column;
            height: 60vh; transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); position: relative;
        }
        /* 物理终极装甲 2/2：对话底色向下同化拉长，镇压所有的死角漏光 */
        .expression-layer::after {
            content: ''; position: absolute; top: 100%; left: 0; width: 100%; height: 100vh;
            background: var(--bg-card); pointer-events: none; z-index: -10;
        }
        
      /* 极致克制的神经元中枢 (顶级玻璃拟态与流光呼吸) */
/* 极简折叠按钮 (Apple玻璃拟态) */
        .nexus-trigger {
            width: 36px; height: 36px; border-radius: 50%;
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: var(--text-pure);
            display: flex; justify-content: center; align-items: center;
            cursor: pointer; z-index: 50;
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            box-shadow: inset 0 1px 1px rgba(255,255,255,0.05), 0 4px 12px rgba(0,0,0,0.2);
        }
        .nexus-trigger:active { transform: scale(0.85); background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); }
        .nexus-trigger svg { transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); opacity: 0.85; }
        
        /* 状态机驱动：箭头旋转动画 */
        body:not(.immersive-mode) .nexus-trigger svg { transform: rotate(0deg); }
        body.immersive-mode .nexus-trigger svg { transform: rotate(180deg); opacity: 0.5; }

        /* 核心物理重构：彻底消灭白线，并将下方面甲完全光学隐藏 */
        body.immersive-mode {
            overflow: hidden !important; /* 物理防线：沉浸模式下彻底切断全局滑动，锁死当前视口 */
        }
        body.immersive-mode .cognition-layer { 
            height: 100vh; 
            border-bottom-color: transparent; /* 物理湮灭屏幕中央的白线 */
        } 
       body.immersive-mode .expression-layer { 
            transform: translateY(130%); /* 将潜水层深推到 130%，绝对防侧漏 */
            opacity: 0; /* 彻底隐身，消除视网膜上的黑块错觉 */
            pointer-events: none;
        }
       /* 灵魂切换器 UI (物理清创：斩断丑陋的横向分割线) */
        .agent-selector {
            display: flex;
            gap: 16px; justify-content: center; padding: 16px 0 8px;
            /* 物理重构：彻底删除 border-bottom，让呼吸灯自由悬浮 */
            z-index: 30;
        }
        .dot {
            width: 10px; height: 10px; border-radius: 50%; border: none;
            cursor: pointer; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            opacity: 0.3; 
        }
        .dot.active-dot { transform: scale(1.5); opacity: 1; box-shadow: 0 0 10px currentColor; }
        .dot.axu { background: #ff9500; color: #ff9500; }
        .dot.zero { background: #5ac8fa; color: #5ac8fa; }
       .dot.shufan { background: #2E7D32; color: #2E7D32;
        }

        /* 场记单对话流 */
        .transcript-view {
            flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 28px;
            padding: 24px; scrollbar-width: none; opacity: 1; transition: opacity 0.3s; z-index: 20;
        }
        .transcript-view::-webkit-scrollbar { display: none; }
        body.immersive-mode .transcript-view { opacity: 0; pointer-events: none; }

/* 聊天节点重构：左右气泡空间拓扑 */
        .log-node { display: flex; flex-direction: column; gap: 4px;
transition: opacity 0.6s; max-width: 78%; /* 物理收缩：增加两侧留白，提升 Apple 级呼吸感 */ }
        .log-node.is-history { opacity: 0.5;
}
        
        /* 区分敌我阵营的对齐方式 */
        .log-node.is-user { align-self: flex-end; align-items: flex-end; }
        .log-node.is-agent { align-self: flex-start; align-items: flex-start; }
        
      /* 时间与昵称的反向渲染 */
        .log-meta { 
            width: 100%;
            font-size: 11px; color: var(--text-secondary); 
            display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
            /* 物理清创：彻底砸碎僵硬的代码字体，拥抱苹果生态的高级无衬线体 */
            font-family: var(--font-sans); 
            letter-spacing: 1px;
        }
        .is-user .log-meta { flex-direction: row-reverse; } 
        
        .log-meta.agent-meta { 
            color: var(--accent-color); font-weight: 500; /* 降低智能体名字的字重，使其更显轻盈 */
            text-shadow: 0 0 5px rgba(var(--accent-color), 0.2); 
        }
        
     /* 核心视觉重构：时间戳物理防呆，确保极端光照下的绝对可读性 */
        .log-time { 
            font-size: 11px; 
            opacity: 0.65;
            font-weight: 400; 
            /* 物理重塑：抛弃生硬的代码体，换用 Apple 级无衬线体，数字连贯且极具现代感 */
            font-family: var(--font-sans); 
            letter-spacing: 0.5px; 
        }
        
/* 聊天节点重构：Apple Vision 级空间气泡 (Spatial Glass Bubbles) */
        .log-text { 
            font-size: 15px;
            line-height: 1.6; font-weight: 400; 
            padding: 12px 20px; 
            display: inline-block; word-break: break-word;
            border-radius: 22px; 
            letter-spacing: 0.5px;
            text-align: left;
            /* 物理重构：拉升至 Apple 级超高模糊与折射率 */
            backdrop-filter: blur(25px) saturate(180%);
            -webkit-backdrop-filter: blur(25px) saturate(180%);
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }
        
        /* 阵营解耦：AI 智能体采用深邃的深空黑玻璃 */
        .is-agent .log-text { 
            color: var(--text-pure);
            background: rgba(30, 30, 35, 0.55);
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1), 0 12px 32px rgba(0, 0, 0, 0.3);
            border-bottom-left-radius: 6px;
        }

        /* 阵营解耦：User 采用高亮折射晶体，强调主体绝对发言权 */
        .is-user .log-text { 
            color: #FFFFFF;
            background: rgba(255, 255, 255, 0.15);
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: inset 0 1.5px 1.5px rgba(255, 255, 255, 0.4), 0 12px 32px rgba(0, 0, 0, 0.3);
            border-bottom-right-radius: 6px;
        }

       /* 物理补偿：白昼模式终极光路反转 */
        body.day-mode .is-agent .log-text {
            color: #000000;
            /* 物理重塑：改用 Apple 级云灰毛玻璃 (Cloud Gray)，与纯白背景拉开微弱但清晰的层级 */
            background: rgba(233, 233, 235, 0.75); 
            border: 1px solid rgba(0, 0, 0, 0.06);
            box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.8), 0 6px 20px rgba(0, 0, 0, 0.04);
            border-bottom-left-radius: 6px;
        }
        
        body.day-mode .is-user .log-text {
            color: #FFFFFF;
            /* 物理重塑：砸碎纯黑，注入经典高奢透蓝 (Spatial Blue)，保持高级感同时消除突兀 */
            background: rgba(0, 122, 255, 0.85); 
            border: 1px solid rgba(0, 105, 220, 0.4);
            box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3), 0 8px 24px rgba(0, 122, 255, 0.25);
            border-bottom-right-radius: 6px;
        }

        /* 图片头像特权类：隐藏文字，展示背景图 */
        .avatar-img-mode { 
            background-size: cover; background-position: center; background-repeat: no-repeat; 
            color: transparent !important; text-shadow: none !important; border: 1px solid var(--border-light);
        }
        
        .terminal-cursor { display: inline-block; width: 6px; height: 16px; background: var(--text-pure); vertical-align: middle; margin-left: 4px; animation: blink 1s step-end infinite; }
        @keyframes blink { 50% { opacity: 0; } }

        .quick-actions { display: flex; gap: 12px; margin-top: 12px; }
        .btn-quick {
            background: rgba(255,255,255,0.05); border: 1px solid var(--border-light);
            color: var(--text-primary); padding: 8px 16px; border-radius: 4px;
            font-size: 13px; cursor: pointer; transition: all 0.2s; font-family: var(--font-mono); letter-spacing: 1px;
        }
        .btn-quick:hover { background: var(--text-pure); color: var(--bg-absolute); }

 /* 输入控制台 (物理透视重构) */
        .input-console {
            margin-top: auto; flex-shrink: 0; padding: 12px 24px calc(env(safe-area-inset-bottom, 20px) + 30px);
            z-index: 30; position: relative;
            /* 物理同化：彻底剥离实心底色，继承顶层全屏毛玻璃的绝对通透感，终结色块错乱 */
            background: transparent;
        }
        /* (已物理斩断：彻底删除导致材质冲突的实心背景与渐变补丁) */
/* 物理重构：高级悬浮胶囊模式切换坞 */
        .mode-selector { 
            display: flex; gap: 16px; justify-content: center; 
            background: transparent; padding: 0 0 16px 0; border: none; 
        }
        .btn-mode { 
            display: flex; align-items: center; justify-content: center; gap: 8px;
            background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); 
            border-radius: 20px; color: var(--text-secondary); opacity: 0.8; 
            padding: 10px 20px; font-size: 13px; cursor: pointer; 
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); font-weight: 500; letter-spacing: 1px;
            box-shadow: inset 0 1px 1px rgba(255,255,255,0.02), 0 4px 12px rgba(0,0,0,0.1);
            backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
        }
        .btn-mode svg { width: 16px; height: 16px; opacity: 0.8; }
        
        .input-console.mode-text .btn-mode:nth-child(2),
        .input-console.mode-voice .btn-mode:nth-child(1) {
            color: var(--text-pure); opacity: 1;
            background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.15);
            box-shadow: inset 0 1px 1px rgba(255,255,255,0.1), 0 8px 24px rgba(0,0,0,0.3);
            transform: translateY(-2px);
        }
        .input-console.mode-text .btn-mode:nth-child(2) svg,
        .input-console.mode-voice .btn-mode:nth-child(1) svg { opacity: 1; color: var(--accent-color); }
        .btn-mode:active { transform: scale(0.95); }


        /* 物理重构：输入坞全圆角悬浮感提升 (注入独立毛玻璃层与深层物理阴影) */
        .text-dock, .voice-dock { 
            display: none; align-items: center; gap: 12px; 
            background: rgba(30, 30, 35, 0.4); padding: 8px 12px 8px 18px; 
            border-radius: 28px; border: 1px solid rgba(255,255,255,0.06);
            backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
            box-shadow: inset 0 1px 1px rgba(255,255,255,0.04), 0 8px 24px rgba(0,0,0,0.4);
        }
/* 物理重构：返回按钮升级为纯净悬浮圆标 */
        .btn-back {
            color: var(--text-secondary); border: none; background: rgba(255,255,255,0.04); 
            width: 36px; height: 36px; border-radius: 50%; display: flex; justify-content: center; align-items: center;
            cursor: pointer; transition: all 0.2s; box-shadow: inset 0 1px 1px rgba(255,255,255,0.05); flex-shrink: 0;
        }
        .btn-back svg { width: 18px; height: 18px; margin-right: 2px; }
        .btn-back:hover, .btn-back:active { color: var(--text-pure); background: rgba(255,255,255,0.1); transform: scale(0.9); }

        .text-dock input { flex: 1; background: transparent; border: none; font-size: 15px; color: var(--text-pure); outline: none; padding: 8px 4px; font-weight: 300;}
        .text-dock input::placeholder { color: var(--text-tertiary); }
        
        .btn-submit { 
            background: var(--accent-color); border: none; color: var(--bg-absolute); 
            width: 36px; height: 36px; border-radius: 50%; display: flex; justify-content: center; align-items: center;
            cursor: pointer; transition: transform 0.2s, background 0.2s; 
            box-shadow: 0 4px 12px rgba(var(--accent-color), 0.3); flex-shrink: 0;
        }
        .btn-submit svg { width: 16px; height: 16px; margin-left: 2px; }
        .btn-submit:active { transform: scale(0.9); }

        .voice-dock { justify-content: flex-start; user-select: none; position: relative; touch-action: none; padding-right: 6px; }
        
        /* 物理重构：长按录音键的高定图标排版 */
        .voice-btn-core { 
            flex: 1; display: flex; justify-content: center; align-items: center; gap: 8px;
            color: var(--text-primary); font-size: 14px; 
            padding: 10px 0; cursor: pointer; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); 
            border-radius: 20px; background: transparent;
            user-select: none; -webkit-user-select: none; font-weight: 500; letter-spacing: 1px;
            overflow: hidden; position: relative;
        }
        .voice-btn-core .mic-icon { width: 18px; height: 18px; opacity: 0.8; transition: all 0.3s; }
        .voice-btn-core::before {
            content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
            border-radius: 20px; border: 1px dashed rgba(255,255,255,0.2); transition: all 0.3s;
        }
        
  /* 【核心视效爆发】：按下瞬间的绝对物理塌陷与光爆 */
        .voice-btn-core.recording {
            background: var(--accent-color); color: var(--bg-absolute); font-weight: 600;
            transform: scale(0.96);
            box-shadow: 0 0 var(--voice-intensity, 15px) var(--accent-color);
            transition: box-shadow 0.05s ease-out, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s;
        }
        .voice-btn-core.recording .mic-icon { color: var(--bg-absolute); opacity: 1; transform: scale(1.1); }
        .voice-btn-core.recording::before { opacity: 0; }
        
        /* （已彻底废除导致画面抽搐的 extreme-pulse-record 动画键帧） */

        
/* 附带：白昼模式下属节点的高对比极简光影重塑 */
        body.day-mode .btn-mode { 
            background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.06); color: #888888; box-shadow: none;
        }
        body.day-mode .input-console.mode-text .btn-mode:nth-child(2),
        body.day-mode .input-console.mode-voice .btn-mode:nth-child(1) { 
            color: #000000; background: #FFFFFF; border-color: rgba(0,0,0,0.1); 
            box-shadow: 0 8px 24px rgba(0,0,0,0.06);
        }
        
        body.day-mode .text-dock, body.day-mode .voice-dock { 
            background: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.8); 
            box-shadow: inset 0 1px 1px rgba(255,255,255,1), 0 8px 24px rgba(0,0,0,0.06); 
        }
        body.day-mode .btn-back { background: rgba(0,0,0,0.04); color: #666; box-shadow: none; }
        body.day-mode .btn-back:active { background: rgba(0,0,0,0.08); color: #000; }
        body.day-mode .voice-btn-core::before { border-color: rgba(0,0,0,0.15); }

        .input-console.mode-text .mode-selector { display: none; }
        .input-console.mode-text .text-dock { display: flex; }
        .input-console.mode-voice .mode-selector { display: none; }
        .input-console.mode-voice .voice-dock { display: flex; }

            /* ==========================================
           重构：聊天区迷你播放器 (高定悬浮胶囊形态)
           ========================================== */
       .mini-player-bar {
            display: flex;
            justify-content: space-between; align-items: center;
            margin: 0 24px 20px 24px; 
            padding: 12px 20px; 
            border-radius: 24px; 
            
            /* 物理剥离死白色，改用深邃环境色并大幅强化毛玻璃，制造厚玻璃折射感 */
            background: rgba(20, 20, 25, 0.4); 
            backdrop-filter: blur(30px) saturate(200%); -webkit-backdrop-filter: blur(30px) saturate(200%);
            border: 1px solid rgba(255,255,255,0.04);
            
            z-index: 35; flex-shrink: 0;
            box-shadow: inset 0 1px 1px rgba(255,255,255,0.08), 0 12px 30px rgba(0,0,0,0.5);
        }
        
        /* 白昼模式：Apple 级陶瓷毛玻璃质感 */
        body.day-mode .mini-player-bar {
            background: rgba(255, 255, 255, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.8);
            box-shadow: inset 0 1px 1px rgba(255,255,255,1), 0 12px 30px rgba(0,0,0,0.05);
        }
      .mini-track-info { 
            display: flex;
            flex-direction: column; gap: 2px; flex: 1; 
            overflow: hidden; margin-right: 12px;
            min-width: 0; /* 物理法则：强制解除 Flex 子项不准收缩的限制，防止长文本撑爆手机屏幕 */
        }
       .mini-track-title { 
            font-size: 13px; color: var(--text-primary); font-weight: 500; 
            /* 同样废除 ellipsis */
            white-space: nowrap; overflow: hidden; text-overflow: clip; 
        }
       /* 物理重构：剥离 monospace 等宽数字字体，改为无衬线体，增加文字溢出裁剪与平滑过渡 */
        .mini-track-status { 
            font-size: 11px; color: var(--text-secondary); font-family: var(--font-sans); 
            white-space: nowrap; overflow: hidden; text-overflow: clip; transition: all 0.3s; 
        }
        
        .mini-controls { display: flex; gap: 16px; align-items: center; }
        .mini-btn { 
            background: none; border: none; color: var(--text-secondary); 
            font-size: 16px; cursor: pointer; transition: color 0.2s; 
        }
        .mini-btn:active { color: var(--text-pure); transform: scale(0.9); }
        /* ==========================================
           新增：左上角用户入口与神经元名片
           ========================================== */
        .user-entry { 
            display: flex; align-items: center; gap: 12px; cursor: pointer; 
            padding: 4px 8px 4px 4px; border-radius: 8px; transition: background 0.2s;
        }
        .user-entry:active { background: rgba(255,255,255,0.05); }
        
        .user-avatar { 
            width: 32px; height: 32px; border-radius: 8px; /* 方形带圆角更具数字感 */
            background: var(--text-pure); color: var(--bg-absolute); 
            display: flex; justify-content: center; align-items: center; 
            font-weight: bold; font-size: 16px; font-family: 'DotGothic16', monospace;
        }
        .user-name-pixel { 
            font-family: 'DotGothic16', monospace; font-size: 16px; 
            color: var(--text-pure); text-shadow: 0 0 5px rgba(255,255,255,0.3); letter-spacing: 1px;
        }

/* ==========================================
           神经元档案面板内容重构 (彻底回归 Apple 极简规范)
           ========================================== */
   /* --- 侧滑面板物理基建 --- */
        .slide-panel {
            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh;
            background: rgba(5, 5, 8, 0.85); backdrop-filter: blur(30px) saturate(180%);
            -webkit-backdrop-filter: blur(30px) saturate(180%); z-index: 9999; 
            display: flex; flex-direction: column; transform: translateY(100%); 
            transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
            padding: calc(env(safe-area-inset-top, 25px) + 50px) 24px calc(env(safe-area-inset-bottom, 20px) + 30px);
            overflow-y: auto;
            /* 物理防线：切断向底部的事件传导，消灭死磕 iOS 带来的穿透滑动 */
            overscroll-behavior: none;
            -webkit-overflow-scrolling: touch;
        }
        .slide-panel.active { transform: translateY(0); }

        /* 标题层：抛弃像素，回归平滑无衬线 */
        .panel-header { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 16px; margin-bottom: 24px;}
        .panel-title { font-family: var(--font-sans); font-size: 22px; font-weight: 600; color: var(--text-pure); letter-spacing: 1px; }
        .panel-close { background: none; border: none; color: var(--text-secondary); font-size: 24px; cursor: pointer; }
        
        .profile-core { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 36px; }
        
        /* 绝对克制：仅保留头像和昵称的像素风，剥离一切多余阴影 */
        .profile-avatar-large { 
            width: 80px; height: 80px; border-radius: 18px; 
            background: var(--text-pure); color: var(--bg-absolute); 
            display:flex; justify-content:center; align-items:center; 
            font-family:'DotGothic16', monospace; font-size:36px; font-weight: normal;
        }
        .profile-info { display: flex; flex-direction: column; gap: 8px; }
        
        /* 结构分离核心：数据组、外部标签、内部卡片 (绝对 iOS 规范) */
        .data-group { margin-bottom: 28px; }
        .data-label { 
            font-family: var(--font-sans); font-size: 13px; font-weight: 500;
            color: var(--text-secondary); margin-bottom: 8px; margin-left: 4px;
            letter-spacing: 1px; display: flex; justify-content: space-between; align-items: center;
        }
        .data-card { 
            background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); 
            border-radius: 16px; padding: 18px;
        }

        .ai-analysis-box {
            font-size: 14px; line-height: 1.6; color: var(--text-primary); font-family: var(--font-sans); font-weight: 300;
        }

.tag-cloud { 
            display: flex; flex-wrap: wrap; gap: 8px; 
            max-height: 96px; /* 物理限制：大约只显示两到三行的高度 */
            overflow-y: auto; /* 核心：超出部分支持上下滑动 */
            scrollbar-width: none; /* Firefox：隐藏原生滚动条 */
        }
        .tag-cloud::-webkit-scrollbar { 
            display: none; /* iOS / Safari / Chrome：隐藏原生滚动条 */
        }

        .pref-tag { 
            background: rgba(255,255,255,0.08); border: none; 
            padding: 8px 14px; font-size: 13px; border-radius: 20px; color: var(--text-primary);
            font-family: var(--font-sans); font-weight: 400; letter-spacing: 0.5px;
        }
        
        .history-list { display: flex; flex-direction: column; gap: 14px; }
        .history-item { display: flex; justify-content: space-between; align-items: center; font-size: 14px; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 10px;}
        .history-item:last-child { border-bottom: none; padding-bottom: 0; }
        .history-title { color: var(--text-pure); font-family: var(--font-sans); font-weight: 400;}
        .history-agent { color: var(--text-secondary); font-size: 12px; font-family: var(--font-sans); font-weight: 400;}
        /* -----------------------
           自定义沉浸式交互卡片 (取代原生 prompt)
           ----------------------- */
        .custom-dialog-overlay {
            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
            background: rgba(0,0,0,0.7); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
            z-index: 10000; display: flex; justify-content: center; align-items: center;
            opacity: 0; pointer-events: none; transition: opacity 0.3s;
        }
        .custom-dialog-overlay.active { opacity: 1; pointer-events: all; }
 /* 动态多层全息窗口 (Apple级高定重构) */
        .custom-dialog {
            background: rgba(30, 30, 35, 0.65) !important;
            backdrop-filter: blur(40px) saturate(200%) !important; -webkit-backdrop-filter: blur(40px) saturate(200%) !important;
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
            border-radius: 24px !important; padding: 28px 24px !important; width: 80%; max-width: 320px;
            display: flex; flex-direction: column; gap: 16px; text-align: center;
            transform: scale(0.95); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            box-shadow: 0 30px 60px rgba(0,0,0,0.5), inset 0 1.5px 1.5px rgba(255,255,255,0.1) !important;
            position: relative; overflow: hidden;
        }
        .custom-dialog::before { display: none; } /* 去除刺眼的顶线，拥抱纯粹玻璃感 */
        .custom-dialog-overlay.active .custom-dialog { transform: scale(1); }
        
        /* 物理提亮：大幅提升标题与正文的光子发射量，解决暗淡发虚问题 */
        .cd-title { font-size: 18px; font-weight: 600; color: #FFFFFF; letter-spacing: 1px; margin-bottom: 4px; }
        .cd-desc { font-size: 13px; color: rgba(255, 255, 255, 0.85); line-height: 1.6; }
        .cd-input {
            background: rgba(255,255,255,0.05); border: 1px solid var(--border-light);
            padding: 14px; border-radius: 8px; color: var(--text-pure); font-family: var(--font-mono); outline: none; transition: border-color 0.2s; text-align: center;
        }
        .cd-input:focus { border-color: var(--text-pure); }
        
        /* 按钮重构：圆润卡片流 */
        .cd-actions { display: flex; flex-direction: row; gap: 12px; margin-top: 10px; }
        .cd-btn-row { display: flex; justify-content: flex-end; gap: 10px; align-items: center; }
        /* 物理抹除：已摧毁导致全模式对勾变黑的强行覆盖补丁 */
        
        .cd-btn {
            flex: 1; padding: 14px 0; border-radius: 14px; font-size: 14px; font-weight: 600; 
            cursor: pointer; border: none; letter-spacing: 1px; transition: all 0.2s;
            backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
        }
        .cd-btn:active { transform: scale(0.95); }
        
        /* 剔除原有廉价感，使用深邃内嵌光影 */
        .cd-btn-cancel { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.05); color: rgba(255,255,255,0.8); }
        .cd-btn-confirm { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.15); color: #FFFFFF; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }

        
        /* 图片头像特权类 (防止文字透出并覆盖排版) */
        .avatar-img-mode { 
            background-size: cover; background-position: center; background-repeat: no-repeat; 
            color: transparent !important; text-shadow: none !important; border: 1px solid var(--border-light);
        }
        /* -----------------------
           情绪控制矩阵与轨道样式 (高级悬浮胶囊形态)
           ----------------------- */
        .emotion-trigger {
            display: flex; align-items: center; justify-content: center; gap: 6px;
            font-size: 12px; color: var(--text-pure); font-family: var(--font-sans);
            font-weight: 500; letter-spacing: 1px;
            padding: 8px 16px; border-radius: 20px; cursor: pointer;
            background: rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(25px) saturate(180%); -webkit-backdrop-filter: blur(25px) saturate(180%);
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1), 0 8px 24px rgba(0, 0, 0, 0.4);
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .emotion-trigger:active { 
            transform: scale(0.92); 
            background: rgba(255, 255, 255, 0.15); 
            box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.2), 0 4px 10px rgba(0, 0, 0, 0.2); 
            border-color: rgba(255, 255, 255, 0.2);
        }

        .emotion-sliders { display: flex; flex-direction: column; gap: 18px; margin: 12px 0; }
        .slider-group { display: flex; flex-direction: column; gap: 8px; }
        .slider-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-primary); font-family: var(--font-mono); }
        .cyber-slider { -webkit-appearance: none; width: 100%; background: transparent; }
        .cyber-slider:focus { outline: none; }
        .cyber-slider::-webkit-slider-thumb { 
            -webkit-appearance: none; height: 16px; width: 16px; border-radius: 50%; 
            background: var(--text-pure); cursor: pointer; margin-top: -7px; 
            box-shadow: 0 0 10px rgba(255,255,255,0.8); transition: transform 0.1s;
        }
        .cyber-slider::-webkit-slider-thumb:active { transform: scale(1.3); }
        .cyber-slider::-webkit-slider-runnable-track { 
            width: 100%; height: 2px; cursor: pointer; background: rgba(255,255,255,0.15); border-radius: 2px;
        }
        /* ==========================================
           终极空间锚点锁定 (强制修正音波与文字的物理坐标)
           ========================================== */
        /* 1. 恒定声波容器：无论面甲升降，声波永远锁定在屏幕上方 40% 区域，绝不拉伸、绝不移位 */
        .canvas-container { 
            height: 40vh !important; 
        }
        
/* 2. 信息悬浮列阵：废弃底部锚定，强制吸附在声波正下方 (43vh处)，二者永不重叠 */
        .lyrics-view {
            bottom: auto !important;
            top: 43vh !important;
        }

      /* ==========================================
           引力星图 (潜意识声纳校准层) - 视觉重构版
           ========================================== */
        .constellation-overlay {
            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh;
            /* 物理修复 1：增加微弱深蓝紫色径向渐变，彻底告别视觉死黑 */
            background: radial-gradient(circle at 50% 50%, #080a12 0%, #000000 100%); 
            z-index: 20000; display: flex; flex-direction: column;
            opacity: 1; transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
            user-select: none; -webkit-user-select: none; touch-action: none;
        }
        .constellation-overlay.hidden { opacity: 0; pointer-events: none; }
        
        .constellation-guide {
            position: absolute; top: 10%; width: 100%; text-align: center;
            color: var(--text-primary); font-size: 15px; letter-spacing: 2px;
            pointer-events: none; transition: opacity 0.5s; opacity: 0.9;
            font-family: var(--font-sans); text-shadow: 0 0 15px rgba(255,255,255,0.2);
            display: flex; flex-direction: column; gap: 8px;
        }
.star-node {
            position: absolute;
            color: var(--text-secondary); font-family: var(--font-mono);
            font-size: 13px; cursor: pointer; 
            transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
            transform: translate(-50%, -50%); opacity: 0.8;
            padding: 10px;
            letter-spacing: 1px; white-space: nowrap;
            /* 基础漂浮动画 */
            animation: starFloat 4s ease-in-out infinite alternate;
            will-change: transform, opacity;
        }
        /* 核心干预：利用伪类引入物理学相位差，打破全局共振，实现错落有致的独立漂浮感 */
        .star-node:nth-child(2n) { animation-duration: 5s; animation-delay: -1.2s; }
        .star-node:nth-child(3n) { animation-duration: 3.5s; animation-delay: -2.5s; }
        .star-node:nth-child(5n) { animation-duration: 4.8s; animation-delay: -0.8s; }

      @keyframes starFloat {
            0% { 
                transform: translate(-50%, -50%) scale(0.95); 
                opacity: 0.7;
            }
            100% { 
                transform: translate(-50%, -50%) scale(1.02); 
                opacity: 1;
            }
        }

   /* 💡 形态坍缩：控制文字标签渐变成光点的物理过程 */
        .star-node.is-star-point {
            width: 5px !important; height: 5px !important; min-width: 0 !important;
            padding: 0 !important; font-size: 0 !important; color: transparent !important;
            background: #FFFFFF !important;
            border-radius: 50% !important;
            box-shadow: 0 0 10px 2px rgba(255,255,255,0.8); border: none !important;
        }

      /* 💡 统一渲染层：为物理级的 SVG 圆点注入缩放动画 */
        .svg-star-point {
            transform-box: fill-box;
            transform-origin: center;
            animation: svgStarBreath 3s ease-in-out infinite alternate;
        }
        .svg-star-point:nth-child(odd) { animation-duration: 4s; }
        .svg-star-point:nth-child(even) { animation-duration: 2.5s; }

      @keyframes svgStarBreath {
            from { opacity: 0.2; transform: scale(0.8); }
            to { opacity: 1; transform: scale(1.5); }
        }
        
        /* 💡 物理级 3D 景深与线条呼吸：利用纯白阴影滤镜构建视觉纵深 */
        #constellation-svg {
            filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.4));
        }
        #constellation-svg line {
            animation: lineBreath 3.5s ease-in-out infinite alternate;
        }
        @keyframes lineBreath {
            from { opacity: 0.15; stroke-width: 0.5; }
            to { opacity: 0.9; stroke-width: 1.5; }
        }
        /* 共振态：高亮发光 */
        .star-node.resonate {
            color: var(--text-pure); text-shadow: 0 0 15px rgba(255,255,255,0.7);
            transform: translate(-50%, -50%) scale(1.15); opacity: 1; font-weight: 500;
        }
        /* 物理修复 2：放逐态呈现警示红，取消 pointer-events: none 限制，保留你的反悔修改权 */
        .star-node.banish {
            text-decoration: line-through; color: #ff5555; opacity: 0.7; 
            text-shadow: 0 0 8px rgba(255,85,85,0.3);
            transform: translate(-50%, -50%) scale(0.95);
        }

        .constellation-done {
            position: absolute; bottom: 8%; left: 50%; transform: translateX(-50%);
            background: rgba(20,20,25,0.8); border: 1px solid rgba(255,255,255,0.2); 
            color: var(--text-pure); box-shadow: 0 0 20px rgba(0,0,0,0.8);
            padding: 14px 32px; border-radius: 30px; font-size: 14px; letter-spacing: 2px;
            opacity: 0; pointer-events: none; transition: all 0.5s; cursor: pointer;
            backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); z-index: 10;
        }
        .constellation-done.visible { opacity: 1; pointer-events: all; }
        .constellation-done:active { transform: translateX(-50%) scale(0.95); background: rgba(255,255,255,0.15); }
 /* ==========================================
           全维白昼场 (Day Mode) 物理覆写总控引擎
           ========================================== */
        
        /* 1. 核心色域反转：必须存在，否则全局失效 (你之前丢掉的就是这段) */
        body.day-mode {
            --bg-absolute: #FFFFFF;
            --bg-panel: #F2F2F7;
            --bg-card: #FFFFFF;
            --text-pure: #000000;
            --text-primary: #1C1C1E;
            --text-secondary: #636366;
            --text-tertiary: #C7C7CC;
            --border-light: #D2D2D7;
           background-color: #E8E8ED;
            background-image: radial-gradient(circle at 50% 40%, rgba(230, 230, 235, 0.8) 0%, #E8E8ED 80%);
        }

      /* 2. 个人名片 (slide-panel) 深度光学修正：还原高透玻璃质感 */
        body.day-mode .slide-panel { 
            background: rgba(255, 255, 255, 0.45) !important; 
            backdrop-filter: blur(40px) saturate(180%) !important;
            -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
            box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.05) !important; 
        }
        body.day-mode .data-card { 
            background: rgba(255, 255, 255, 0.5) !important; 
            border: 1px solid rgba(255, 255, 255, 0.8) !important; 
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.03), inset 0 1px 1px rgba(255, 255, 255, 0.9) !important; 
        }
       /* 物理提纯：白昼模式下的高透凝胶小标签 */
        body.day-mode .pref-tag { 
            /* 核心光学翻转：用极微弱的黑色透明度“压暗”局部，形成完美的透明凝胶感 */
            background: rgba(0, 0, 0, 0.04) !important; 
            color: #1C1C1E !important; 
            /* 极细的深色折射边框，勾勒物理边缘 */
            border: 1px solid rgba(0, 0, 0, 0.06) !important; 
            box-shadow: none !important;
            /* 物理斩断：绝对禁止在毛玻璃卡片上叠加第二层毛玻璃，否则必定浑浊发白 */
            backdrop-filter: none !important; 
            -webkit-backdrop-filter: none !important;
        }
        body.day-mode .panel-title, body.day-mode .history-title, body.day-mode .ai-analysis-box { color: #000000; }
        body.day-mode .history-item { border-bottom-color: #EEEEF0; }

       /* 3. 系统弹窗 (custom-dialog) 白昼高级极简重制 (匹配图1) */
        body.day-mode .custom-dialog {
            background: rgba(238, 238, 240, 0.95) !important;
            backdrop-filter: blur(30px) !important; -webkit-backdrop-filter: blur(30px) !important;
            border: none !important; border-radius: 32px !important;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08) !important;
        }
        body.day-mode .cd-title { color: #000000; font-weight: 600; font-size: 18px; }
        body.day-mode .cd-desc { color: rgba(0, 0, 0, 0.5); font-size: 13px; }
        body.day-mode .cd-input { background: rgba(0,0,0,0.03) !important; border: 1px solid rgba(0,0,0,0.05) !important; color: #000000 !important; border-radius: 12px !important; padding: 16px !important; }
        
        body.day-mode .cd-btn-cancel { 
            background: rgba(0,0,0,0.05) !important; border: none !important; color: rgba(0,0,0,0.5) !important; border-radius: 16px !important;
        }
        body.day-mode .cd-btn-confirm { 
            background: rgba(0,0,0,0.05) !important; border: none !important; color: #000000 !important; 
            box-shadow: none !important; border-radius: 16px !important;
        }

        
        /* 强制覆盖弹窗标题的内联样式，绝对消灭隐形文字 */
        body.day-mode #sys-dlg-title, body.day-mode .cd-title { color: #000000 !important; }
        body.day-mode #sys-dlg-desc, body.day-mode .cd-desc { color: #666666 !important; }

        /* 4. 网格、粒子系统与情绪轨道适配 */
        body.day-mode .mono-grid {
            background-image: radial-gradient(rgba(0, 0, 0, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.02) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, 0.02) 1px, transparent 1px);
        }
       body.day-mode .mono-grid::before { color: rgba(0, 0, 0, 0.1); }
        
        body.day-mode .cyber-slider::-webkit-slider-runnable-track { background: rgba(0,0,0,0.1); }
        body.day-mode .cyber-slider::-webkit-slider-thumb { background: #000; box-shadow: 0 0 8px rgba(0,0,0,0.3); }

      /* 5. 物理隔离：强制星图在白昼模式下保持暗夜环境，免疫全局变量污染 */
        body.day-mode .constellation-overlay { 
            --text-pure: #FFFFFF !important; 
            --text-primary: #EBEBEB !important; 
            --text-secondary: #888888 !important; 
        }
 /* ==========================================
           主播放卡片 (旧冲突代码已被物理抹除，样式已上移统管)
           ========================================== */

        /* 2. 光学隔离锁死：强制卡片内部元素发白光，免疫白昼模式的黑字感染 */
        .track-card .track-title { color: #FFFFFF !important; }
        .track-card .track-status { color: #888888 !important; }
        .track-card .track-info { border-left-color: #FFFFFF !important; }
        .track-card .spec-bar { background: #FFFFFF !important; }
        
        .track-card .btn-skip { 
            background: rgba(255, 255, 255, 0.1) !important; 
            color: #EBEBEB !important; 
            border: 1px solid rgba(255, 255, 255, 0.05) !important;
        }
        .track-card .btn-skip:hover { 
            background: rgba(255, 255, 255, 0.2) !important; 
            color: #FFFFFF !important; 
        }
/* 2. 情绪调节器：重塑为白昼高级陶瓷透光材质 */
        body.day-mode .emotion-trigger {
            background: rgba(255, 255, 255, 0.5) !important;
            color: #000000 !important;
            border-color: rgba(255, 255, 255, 0.9) !important;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06), inset 0 1px 1px rgba(255, 255, 255, 1) !important;
        }
        body.day-mode .emotion-trigger:active {
            background: rgba(0, 0, 0, 0.04) !important;
            border-color: rgba(0, 0, 0, 0.08) !important;
            color: #000000 !important;
            transform: scale(0.92) !important;
            box-shadow: none !important;
        }

       /* 3. Nexus 节点 (智能体左上角入口)：白昼模式高对比反转 */
        body.day-mode .nexus-trigger {
            box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
            background: rgba(255, 255, 255, 0.9) !important;
            border-color: rgba(0, 0, 0, 0.1) !important;
            color: #000000 !important;
        }
        body.day-mode .nexus-trigger:active {
            background: rgba(0, 0, 0, 0.05) !important;
        }
    /* ==========================================
           底层视口漏光修复 (解决手机顶部/状态栏白边)
           ========================================== */
        html { 
            background-color: #020205; /* 强制填补暗夜刘海屏底色 */
        }
       html.day-mode { 
            background-color: #E8E8ED; /* 采用与应用主背景一模一样的深灰米色，即便极限操作拉出底色，也将完美融为一体无色块 */
        }
        
                /* ==========================================
           流媒体物理组件 (微缩对角线平衡版)
           ========================================== */
        .media-controls-wrap {
            display: flex; align-items: center; justify-content: flex-start; gap: 6px;
            width: auto; margin-top: 0;
        }
        .btn-media {
            background: transparent; border: none; 
            color: var(--text-primary); cursor: pointer;
            width: 34px; height: 34px; border-radius: 50%; /* 物理微缩：直径从44降至34 */
            display: flex; align-items: center; justify-content: center;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            user-select: none; -webkit-tap-highlight-color: transparent;
        }
        .btn-media svg { width: 18px; height: 18px; transition: fill 0.2s, stroke 0.2s; }
        .btn-media:active { transform: scale(0.85); background: rgba(255,255,255,0.08); }
        
        /* 播放键剥离突兀底色，彻底融入矩阵 */
        .btn-media.play-pause { width: 34px; height: 34px; color: var(--text-pure); background: transparent; box-shadow: none; }
        .btn-media.play-pause svg { width: 26px; height: 26px; }
        .btn-media.play-pause:active { transform: scale(0.85); background: rgba(255,255,255,0.08); box-shadow: none; }
        
        /* 光学补偿引擎：强行放大不规则图形对抗视觉错觉 */
        .btn-next-track svg { transform: scale(1.35); }

        .btn-media.mode-active { color: rgba(255, 255, 255, 0.8); filter: drop-shadow(0 0 4px rgba(255,255,255,0.3)); }
        body.day-mode .btn-media.mode-active { color: #000000; filter: none; font-weight: bold; }
        body.day-mode .btn-media.play-pause { color: #000000; background: transparent; }
        body.day-mode .btn-media:active { background: rgba(0,0,0,0.06); }
    /* ==========================================
           终极几何决断：Apple Music 工业级满铺法则
           ========================================== */
   .track-cover-container {
            width: 100% !important;
            aspect-ratio: 1 / 1 !important;
            flex-shrink: 0 !important; 
          /* 空间折叠：废除 auto 间距。利用 16px 的固定边距让封面紧跟在歌词下方，
               配合卡片顶部的 42px 降噪，实现完美的垂直向心布局 */
            margin: 16px 0 0 0 !important;
            position: relative !important;
            border-radius: 12px !important;
            overflow: hidden !important;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
            background: transparent !important;
        }

        #main-track-cover {
            /* 物理防线：iOS Safari 专属 Bug 修复！必须使用绝对定位砸碎底层乱放大的渲染死锁 */
            position: absolute !important;
            top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
            width: 100% !important; height: 100% !important; 
            
            /* 恢复 cover 满铺。有绝对定位护航，手机端将完美展示正确的正方形裁剪，不再畸形！ */
            background-size: cover !important;
            background-position: center center !important;
            background-repeat: no-repeat !important;
            background-color: transparent !important; 
            filter: none !important;
            transition: opacity 0.5s !important;
        }

     .spectrum-container {
            display: none !important; /* 彻底物理抹除图片上的音波，还原最纯净的专辑封面 */
        }
        
        .spectrum-container .spec-bar {
            background: rgba(255,255,255,0.85) !important; /* 在封面上保持白色 */
        }

 .media-dock {
            margin-top: 16px;
            width: 100%; max-width: 280px;
            /* 材质同步：使用与主卡片同频的深空晶体灰，斩断廉价泥泞色 */
            background: rgba(36, 36, 42, 0.75) !important; 
            flex-shrink: 0;
            backdrop-filter: blur(40px) saturate(150%); -webkit-backdrop-filter: blur(40px) saturate(150%);
            border: 1px solid rgba(255, 255, 255, 0.04);
            border-radius: 40px; padding: 14px 28px;
            display: flex; justify-content: center; align-items: center;
            
            /* 同频高光刻画：顶部边缘高亮，底部深邃投影 */
            box-shadow: 
                inset 0 1px 1px rgba(255, 255, 255, 0.15),
                0 20px 40px rgba(0, 0, 0, 0.8);
            
            /* 行星伴星的滞后呼吸感 (已开启性能模式：物理摘除悬浮动画) */
            /* animation: macro-breath 8s ease-in-out infinite 1.2s !important; */
            /* will-change: transform; */
        }

        .track-actions.media-controls-wrap {
            width: 100%; justify-content: space-between; gap: 0; margin-left: 0;
        }
        /* ==========================================
           白昼模式：卡片与按钮的光学修正
           ========================================== */
        /* 物理重构：剥离生硬的实心白，注入高透光率折射引擎 */
        body.day-mode .track-card { 
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.2) 100%) !important;
            backdrop-filter: blur(40px) saturate(150%) !important;
            -webkit-backdrop-filter: blur(40px) saturate(150%) !important;
            border: 1px solid rgba(255, 255, 255, 0.8) !important;
            
            /* 宏大空间深度：成倍扩散阴影半径，产生日光下的悬浮失重感 */
            box-shadow: 
                0 40px 100px -10px rgba(0, 0, 0, 0.12),
                0 20px 40px -5px rgba(0, 0, 0, 0.06),
                inset 0 1px 1px rgba(255, 255, 255, 1) !important;
        }
        body.day-mode .track-card .track-title { color: #000000 !important; }
        body.day-mode .track-card .track-artist { color: #666666 !important; }
        /* 物理重构：强制白昼模式下的歌词显影，使用高级深灰色，击碎光学隐身 */
        body.day-mode .track-card .track-lyrics { color: #888888 !important; }
        
       body.day-mode .media-dock {
            background: rgba(255, 255, 255, 0.6) !important;
            backdrop-filter: blur(40px) saturate(200%) !important;
            -webkit-backdrop-filter: blur(40px) saturate(200%) !important;
            border: 1px solid rgba(255, 255, 255, 0.9) !important;
            /* 匹配主卡片的Z轴悬浮逻辑 */
            box-shadow: 
                0 25px 60px -10px rgba(0, 0, 0, 0.1),
                inset 0 1px 1px rgba(255, 255, 255, 1) !important;
        }
       body.day-mode .track-card .spec-bar { background: #FFFFFF !important;
        } /* 封面上有暗色遮罩，保持白波纹 */
        body.day-mode .media-dock .btn-media { color: #000000 !important;
        }
        /* 物理重构 2：白昼模式进度条逆向对比度着色，彻底击碎光学隐身 */
        body.day-mode .progress-track { background: rgba(0, 0, 0, 0.1) !important; }
        body.day-mode .progress-fill { background: #000000 !important; }
        body.day-mode .progress-time { color: rgba(0, 0, 0, 0.6) !important; }
  
  /* ==========================================
           核心按钮：高定触觉引擎 (原生字体 + 灌装动效)
           ========================================== */
        .btn-primary, .btn-mono {
            /* 1. 物理结构 */
            width: 100% !important; 
            padding: 16px !important; 
            border-radius: 30px !important; 
            display: flex !important; 
            justify-content: center !important; 
            align-items: center !important;
            cursor: pointer;
            position: relative; overflow: hidden;

            /* 2. 字体统一：强制回归苹果系统原生无衬线字体，并增加字重 */
            font-family: var(--font-sans) !important; 
            font-size: 14px !important; 
            font-weight: 500 !important; 
            letter-spacing: 1px !important; 
            text-transform: none !important;

          /* 3. 材质渲染：统一深咖色黑曜石质感 */
            background: rgba(40, 30, 25, 0.4) !important;
            backdrop-filter: blur(25px) saturate(180%) !important;
            -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
            border: 1px solid rgba(255, 255, 255, 0.05) !important;
            box-shadow: none !important; 
            color: rgba(255, 255, 255, 0.95) !important; 
            text-shadow: none !important;
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
        }
        .btn-primary::before { display: none !important; } 

        /* 4. 预点击 (Hover) 物理反馈：轻微加深/提亮，营造可触摸感 */
        @media (hover: hover) {
            .btn-primary:hover, .btn-mono:hover {
                background: rgba(255, 255, 255, 0.08) !important;
                border: 1px solid rgba(255, 255, 255, 0.15) !important;
            }
            body.day-mode .btn-primary:hover, body.day-mode .btn-mono:hover {
                background: rgba(0, 0, 0, 0.06) !important;
                border: 1px solid rgba(0, 0, 0, 0.12) !important;
            }
        }
        
        /* 5. 瞬间点击物理反馈：轻微下沉 */
        .btn-primary:active, .btn-mono:active {
            background: rgba(0, 0, 0, 0.2) !important;
            border: 1px solid rgba(255, 255, 255, 0.04) !important;
            transform: translateY(2px) scale(0.98) !important; 
            transition: all 0.1s !important;
        }

/* 6. Apple 级动效：文字流转 + 侧边加载环 */
        .btn-primary.activating {
            transform: scale(0.96) !important; /* 保持物理深压感 */
            pointer-events: none;
            color: rgba(255, 255, 255, 0.7) !important; /* 让文字稍微变暗，提示正在加载 */
        }
        
        /* 淡入 iOS 极简加载环，放置于右侧侧边 */
        .btn-primary.activating::after {
            content: '';
            position: absolute;
            right: 24px; /* 物理锚定在按钮右侧 */
            top: 50%;
            width: 18px; height: 18px;
            margin-top: -9px; 
            border: 2px solid rgba(255, 255, 255, 0.2);
            border-top-color: #FFFFFF;
            border-radius: 50%;
            opacity: 0;
            animation: apple-spin 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
            transition: opacity 0.3s ease;
        }

        .btn-primary.activating.fill-active::after {
            opacity: 1; /* 延时触发淡入 */
        }

        @keyframes apple-spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* ==========================================
           白昼模式：加载环颜色完美融合
           ========================================== */
        body.day-mode .btn-primary, 
        body.day-mode .btn-mono {
            background: rgba(0, 0, 0, 0.03) !important;
            border: 1px solid rgba(0, 0, 0, 0.06) !important;
            color: #000000 !important;
        }
        
        /* 物理级清创：强制覆写白昼模式激活态的文字颜色，保证其可见性 */
        body.day-mode .btn-primary.activating {
            color: rgba(0, 0, 0, 0.5) !important;
        }
        
        body.day-mode .btn-primary.activating::after {
            border: 2px solid rgba(0, 0, 0, 0.1);
            border-top-color: #000000;
        }
        
/* -----------------------
           物理重构：极简终端光标 (去气泡/去彩色)
           ----------------------- */
        .thinking-cursor, .text-cursor {
            display: inline-block; 
            width: 8px; /* 略微加宽，提升终端指令感 */
            height: 15px;
            background: var(--text-pure); /* 绝对跟随系统黑白主调，免疫一切彩色污染 */
            vertical-align: middle;
            animation: blink 1s step-end infinite;
        }
       .text-cursor {
            margin-left: 4px;
        }
     @keyframes blink { 
            50% { opacity: 0; } 
        }
/* 物理层 1：动态歌词专用引擎 (平滑溢出缓冲，彻底消灭克隆错觉与左右抖动) */
        .smart-scroll-content {
            display: inline-block;
            white-space: nowrap;
            /* 摒弃双重克隆，改用呼吸级缓动折返，消除整行滑走的撕裂感 */
            animation: lyric-scroll var(--scroll-dur, 6s) cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite alternate;
            will-change: transform;
            padding-right: 8px; /* 预留安全呼吸空间 */
        }

        /* 物理层 2：静态歌名/歌手专用引擎 (极简克制) */
        .meta-scroll-content {
            display: inline-block;
            white-space: nowrap;
            animation: lyric-scroll var(--scroll-dur, 8s) cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite alternate;
            will-change: transform;
            padding-right: 8px;
        }

      /* 核心呼吸引擎：前20%停驻看清开头，中间平滑流转，后20%停驻看清结尾 */
        @keyframes lyric-scroll {
            0%, 20% { transform: translateX(0); }
            /* 彻底剥离 calc 函数，直接接收 JS 传来的负值，绕过系统解析 Bug */
            80%, 100% { transform: translateX(var(--scroll-dist)); }
        }

        /* 物理层 3：极简几何进度条 */
        .progress-wrapper {
            width: 100%; margin-top: 16px; 
            display: flex; flex-direction: column; gap: 8px;
        }
        /* 核心防线：隐形触控区。线条仅有 2px，但触控响应区高达 24px，避免移动端误触 */
       .progress-hitbox {
            /* 物理扩张：突破 44px 绝对安全触控阈值，彻底消灭“胖手指”误触盲区 */
            width: 100%; height: 44px; 
            display: flex; align-items: center; cursor: pointer;
            touch-action: none; 
        }
        .progress-track {
            width: 100%; height: 2px; background: rgba(255, 255, 255, 0.15);
            border-radius: 3px; overflow: hidden; position: relative;
            transition: height 0.2s cubic-bezier(0.25, 1, 0.5, 1); /* 注入微观形变动画 */
        }
        .progress-fill {
            height: 100%; width: 0%; background: #fff;
            border-radius: 3px; will-change: width;
        }
        /* 触觉反馈：一旦检测到物理按压，线条平滑膨胀，提供明确的“已接管”视觉确认 */
        .progress-hitbox:active .progress-track, 
        .progress-hitbox.is-dragging .progress-track {
            height: 6px; 
        }
         .progress-time {
            display: flex; justify-content: space-between;
            font-family: 'Inter', 'DotGothic16', sans-serif; 
            font-size: 11px; color: rgba(255, 255, 255, 0.5);
            letter-spacing: 1px; font-weight: 300;
        }
        
        /* 全屏滑动歌词系统 (Apple Music 高定质感) */
        .full-lyrics-panel {
            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh;
            background: rgba(10, 10, 15, 0.5); backdrop-filter: blur(40px) saturate(200%); -webkit-backdrop-filter: blur(40px) saturate(200%);
            z-index: 99999; display: flex; flex-direction: column; opacity: 0; pointer-events: none;
            transform: translateY(20px); transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .full-lyrics-panel.active { opacity: 1; pointer-events: all; transform: translateY(0); }
        .fl-header { padding: calc(env(safe-area-inset-top) + 20px) 24px 10px; display: flex; justify-content: space-between; align-items: center; }
        .fl-close { background: rgba(255,255,255,0.08); border: none; width: 36px; height: 36px; border-radius: 50%; color: #FFF; cursor: pointer; transition: transform 0.2s; display: flex; align-items: center; justify-content: center; }
        .fl-close:active { transform: scale(0.9); }
        /* 物理羽化边缘：顶部和底部渐隐，营造深空消失感 */
        .fl-container { flex: 1; overflow-y: auto; padding: 40vh 24px; scroll-behavior: smooth; scrollbar-width: none; mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%); }
        .fl-container::-webkit-scrollbar { display: none; }
        .fl-line { font-family: var(--font-sans); font-size: 20px; font-weight: 500; color: rgba(255,255,255,0.3); padding: 18px 0; text-align: center; transition: all 0.4s ease; cursor: pointer; line-height: 1.5; filter: blur(1.5px); transform: scale(0.95); letter-spacing: 1px; }
        .fl-line.active { color: #FFF; font-size: 26px; font-weight: 600; filter: blur(0); transform: scale(1); text-shadow: 0 4px 16px rgba(0,0,0,0.3); }
        
        body.day-mode .full-lyrics-panel { background: rgba(240, 240, 245, 0.6); }
        body.day-mode .fl-line { color: rgba(0,0,0,0.25); }
       body.day-mode .fl-line.active { color: #000; text-shadow: 0 4px 16px rgba(255,255,255,0.8); }
        body.day-mode .fl-close { background: rgba(0,0,0,0.08); color: #000; }

        /* ==========================================
           高定盲盒卡片 (Quick Actions) 物理渲染层
           ========================================== */
        .quick-actions-container {
            align-self: flex-start; margin-top: -12px; margin-bottom: 8px; width: 100%; max-width: 280px; display: flex; flex-direction: column; gap: 10px;
        }
        .quick-song-card {
            display: flex; justify-content: space-between; align-items: center; padding: 16px 20px;
            border-radius: 20px; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); width: 100%; box-sizing: border-box;
            background: rgba(30, 30, 35, 0.5); backdrop-filter: blur(40px) saturate(200%); -webkit-backdrop-filter: blur(40px) saturate(200%);
            border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 12px 32px rgba(0,0,0,0.3), inset 0 1px 1px rgba(255, 255, 255, 0.05);
            cursor: pointer;
        }
        .quick-song-card:active {
            transform: scale(0.96); background: rgba(255, 255, 255, 0.05); border-color: rgba(255,255,255,0.15);
        }
        .qsc-info { display: flex; flex-direction: column; flex: 1; overflow: hidden; justify-content: center; text-align: left; }
        .qsc-title { font-size: 15px; color: var(--text-pure); font-weight: 600; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.5px; }
        .qsc-artist { font-size: 12px; color: var(--text-secondary); font-family: var(--font-sans); opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 400;}

        .quick-play-btn {
            background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--text-pure);
            width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); cursor: pointer;
        }
        .quick-play-btn:active { transform: scale(0.85); background: rgba(255, 255, 255, 0.15); }

        .quick-cancel-btn {
            text-align: center; background: transparent; border: none; padding: 12px; margin-top: 4px; color: var(--text-secondary);
            font-size: 13px; letter-spacing: 1px; cursor: pointer; transition: all 0.2s; font-family: var(--font-sans);
        }
        .quick-cancel-btn:active { color: var(--text-pure); transform: scale(0.95); }

        /* 白昼模式光学反转 */
        body.day-mode .quick-song-card {
            background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(255, 255, 255, 0.9);
            box-shadow: 0 12px 32px rgba(0,0,0,0.06), inset 0 1px 1px rgba(255, 255, 255, 1);
        }
        body.day-mode .quick-song-card:active { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.1); }
        body.day-mode .quick-play-btn {
            background: rgba(0, 0, 0, 0.04); border: 1px solid rgba(0, 0, 0, 0.06); color: #000; box-shadow: none;
        }
        body.day-mode .quick-play-btn:active { background: rgba(0, 0, 0, 0.1); }
        body.day-mode .qsc-title { color: #000; }
        body.day-mode .quick-cancel-btn { color: rgba(0,0,0,0.5); }
        body.day-mode .quick-cancel-btn:active { color: #000; }
        
        


/* 物理重构：纯净悬浮文字唤醒引擎 (极简锚点) */
        .simple-wake-btn {
            position: relative;
            display: flex; align-items: center; justify-content: center;
            color: var(--text-secondary);
            font-size: 13px; font-family: var(--font-sans);
            letter-spacing: 8px; cursor: pointer;
            padding: 16px 30px; margin: 10px auto 0;
            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            -webkit-tap-highlight-color: transparent;
        }
       .wake-text {
            position: relative; z-index: 2;
            /* 物理降速：将周期拉长至 6 秒，引入非线性缓动，进入潜意识呼吸频率 */
            animation: float-breath 6s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
            will-change: transform, opacity, text-shadow;
        }

        /* 高级光学引擎：收窄透明度振幅，彻底消灭廉价的闪跳感 */
        @keyframes float-breath {
            0% { transform: translateY(2px); opacity: 0.55; text-shadow: none; }
            100% { transform: translateY(-2px); opacity: 0.85; text-shadow: 0 0 8px rgba(255,255,255,0.15); }
        }

        /* 触控力学反馈：打破悬浮，瞬间沉降并聚光 */
        .simple-wake-btn:active, .simple-wake-btn.activating {
            transform: scale(0.96); /* 客观减弱形变比例，保持交互克制 */
        }
        .simple-wake-btn:active .wake-text, .simple-wake-btn.activating .wake-text {
            animation: none;
            transform: translateY(1px);
            opacity: 1;
            color: var(--text-pure);
            text-shadow: 0 0 12px rgba(255,255,255,0.4);
            transition: all 0.1s ease-out;
        }

        /* ==========================================
           白昼模式：高级光学反转
           ========================================== */
        body.day-mode .simple-wake-btn { color: rgba(0, 0, 0, 0.5); }
        body.day-mode .wake-text { animation: float-breath-day 6s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate; }
        
        @keyframes float-breath-day {
            /* 白昼模式同步收窄振幅，确保柔和度一致 */
            0% { transform: translateY(2px); opacity: 0.6; text-shadow: none; }
            100% { transform: translateY(-2px); opacity: 0.85; text-shadow: 0 0 8px rgba(0,0,0,0.05); }
        }

        body.day-mode .simple-wake-btn:active .wake-text, body.day-mode .simple-wake-btn.activating .wake-text {
            animation: none;
            transform: translateY(2px);
            opacity: 1;
            color: rgba(0, 0, 0, 0.95);
            text-shadow: 0 0 12px rgba(0,0,0,0.2);
            transition: all 0.1s ease-out;
        }
/* 物理重构：Apple AirPods 级系统悬浮通知胶囊 (Fluid Glass Pill) */
        #toast-box {
            position: fixed; 
            /* 物理重绘：从死板的屏幕中央，转移至顶部安全区下方，符合 iOS 原生直觉 */
            top: calc(env(safe-area-inset-top) + 20px) !important;
            left: 50% !important; 
            transform: translateX(-50%) !important; 
            z-index: 999999 !important; display: flex; flex-direction: column; gap: 12px; 
            pointer-events: none; align-items: center; width: 100%;
        }
        .toast-item {
            /* Apple 级厚重玻璃材质：极高模糊度 + 复合三层阴影 */
            background: rgba(30, 30, 35, 0.65) !important;
            backdrop-filter: blur(40px) saturate(200%) !important; 
            -webkit-backdrop-filter: blur(40px) saturate(200%) !important;
            border: 1px solid rgba(255, 255, 255, 0.15) !important;
            color: #FFFFFF !important; 
            padding: 14px 32px !important; /* 加大边距，撑起物理厚度 */
            border-radius: 100px !important; font-size: 14px !important;
            box-shadow: 
                0 16px 40px rgba(0, 0, 0, 0.4),
                0 6px 12px rgba(0, 0, 0, 0.2),
                inset 0 1.5px 1px rgba(255, 255, 255, 0.15) !important;
           /* 搭载苹果原生的物理阻尼回弹动效 (Spring Animation) */
            animation: apple-toast-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, 
                       apple-toast-out 0.4s ease-in 2.5s forwards;
            white-space: nowrap; font-weight: 500 !important; letter-spacing: 0.5px;
            /* 🚑 物理修复：设置最大屏幕占比，并对超长文本执行优雅的省略号截断 */
            max-width: 90vw; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box;
        }
        
        /* 昼夜交替：白昼模式高透陶瓷玻璃 */
        body.day-mode .toast-item { 
            background: rgba(245, 245, 250, 0.75) !important; 
            border: 1px solid rgba(255, 255, 255, 0.6) !important; 
            color: #000000 !important; 
            box-shadow: 
                0 16px 40px rgba(0,0,0,0.08), 
                0 6px 12px rgba(0,0,0,0.04),
                inset 0 1.5px 1px rgba(255, 255, 255, 1) !important; 
        }
        
        /* 从顶部坠落并带有弹性回落的光学动画 */
        @keyframes apple-toast-in { 
            from { opacity: 0; transform: translateY(-30px) scale(0.9); } 
            to { opacity: 1; transform: translateY(0) scale(1); } 
        }
        @keyframes apple-toast-out { 
            from { opacity: 1; transform: translateY(0) scale(1); } 
            to { opacity: 0; transform: translateY(-20px) scale(0.95); } 
        }

        /* 物理确权：高级感设备踢出遮罩 */
        .kickout-overlay {
            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
            background: rgba(5, 5, 8, 0.85); backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%);
            z-index: 9999999; display: flex; flex-direction: column; justify-content: center; align-items: center;
            opacity: 0; pointer-events: none; transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .kickout-overlay.active { opacity: 1; pointer-events: all; }
        .kickout-card {
            background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08);
            padding: 40px 30px; border-radius: 24px; text-align: center; width: 80%; max-width: 320px;
            box-shadow: 0 30px 60px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.05);
            transform: translateY(20px); transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .kickout-overlay.active .kickout-card { transform: translateY(0); }
        .kickout-title { font-size: 18px; color: var(--text-pure); font-weight: 600; letter-spacing: 2px; margin-bottom: 12px; }
        .kickout-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 30px; }
        .kickout-btn {
            background: var(--text-pure); color: var(--bg-absolute); border: none; width: 100%;
            padding: 14px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer;
            letter-spacing: 1px; transition: transform 0.2s;
        }
        .kickout-btn:active { transform: scale(0.96); }
        body.day-mode .kickout-overlay { background: rgba(240, 240, 245, 0.85); }
        body.day-mode .kickout-card { background: rgba(255, 255, 255, 0.6); border-color: rgba(0,0,0,0.1); box-shadow: 0 30px 60px rgba(0,0,0,0.1); }
        body.day-mode .kickout-title { color: #000; }
        body.day-mode .kickout-desc { color: #666; }
        body.day-mode .kickout-btn { background: #000; color: #FFF; }