/* ==================== 内容索引 ====================
 * 修改指南：
 *  - 换色/字体/圆角   -> 改顶部 :root 变量
 *  - 改布局/组件      -> 跳到下方对应分区注释
 *  - 改动画          -> 找下方 @keyframes 名
 *  - 改手机端        -> 找下方 @media 块
 *
 * 分区列表:
 *   - 页面预加载动画 - 小猪眨眼 + 信号格子
 *   - 折叠区域动画 - 从上向下展开，从下向上收起
 *   - Button 按钮组件 - 基于 .tb-btn
 *   - Button 大尺寸 - 基于 .w-btn
 *   - 兼容旧样式 - 保留 .tb-btn 和 .w-btn 作为别名
 *   - 设置页面
 *   - 遮罩层
 *   - 主窗口
 *   - 头部 - 渐变设计
 *   - 主体布局
 *   - 左侧面板
 *   - 中间预览面板
 *   - 右侧面板
 *   - 卡片式区块
 *   - 分区标签
 *   - 上传按钮组
 *   - 文件信息卡片
 *   - 右侧面板占位符
 *   - 批量处理
 *   - 确认关闭弹窗
 *   - 操作按钮
 *   - 预设按钮
 *   - 参数控制
 *   - 预览区域
 *   - 响应式适配
 *   - 音量滑块
 *   - 基础开关
 *   - 开启状态
 *   - 滑块
 *   - 开启状态滑块位置
 *   - RO云盘样式
 *   - 云盘右键菜单
 *   - 云盘弹窗
 *   - 云盘预览弹窗
 *   - 云盘确认弹窗
 *   - 云盘文件预览
 *   - 云盘提示消息
 *   - 云盘加载状态
 *   - 上传进度条
 *   - 法律条款弹窗样式
 *
 * 动画(@keyframes 26 个):
 *   loaderFadeOut, pigAppear, pigDisappear, signalWave, pulse, shimmer, fadeIn, pageIn, contextMenuIn, fadeIn, spin, bounceDown, modalDropIn, modalDropOut, slideInRight, slideOutLeft, slideDown, pulse, fadeIn, schemeFadeIn, pixelBlink, digitChange, minimalBlink, steamRise, pendulumSwing, gaugeSwing
 * 响应式(@media 14 个)
 * ================================================================ */


        @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700;900&display=swap');
        *,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
        :root{
            --bg:#F6EFDD;--bg2:#F0E6CC;--bg3:#E9DBB6;--bg4:#E0CE9F;
            --sidebar:#F3EBD5;--sidebar-w:220px;
            --card:#FBF6E7;
            --border:#1A1A1A;--border2:#444444;
            --shadow:#1A1A1A;
            --text:#1A1A1A;--text2:#4A4A4A;--text3:#8A8A8A;
            --pink:#E8A100;--pink-bg:#FFF3CC;--pink-text:#9A6B00;
            --blue:#4A90D9;--blue-bg:#E1ECF8;
            --green:#5CBF6B;--green-bg:#E3F5E6;
            --orange:#FF8C1A;--orange-bg:#FFEEDD;
            --purple:#8B6BE6;--purple-bg:#ECE6FA;
            --red:#E5484D;--red-bg:#FCE4E4;
            --yellow:#FFC800;--yellow-bg:#FFF3CC;
            --radius:16px;--radius-sm:12px;--radius-lg:24px;
            --bw:3px;
            --font:'Nunito','Noto Sans SC',-apple-system,sans-serif;
        }
        html{-webkit-font-smoothing:antialiased}
        body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.6;overflow:hidden;height:100vh}
        ::selection{background:var(--pink);color:#1A1A1A}
        ::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--pink);border-radius:3px}

        /* 页面预加载动画 - 小猪眨眼 + 信号格子 */
        #page-loader{position:fixed;inset:0;background:var(--bg);z-index:99999;display:flex;flex-direction:column;align-items:center;justify-content:center}
        #page-loader.hiding{animation:loaderFadeOut 0.25s ease-in forwards}
        #page-loader.hidden{opacity:0;visibility:hidden;pointer-events:none}
        @keyframes loaderFadeOut{0%{opacity:1}100%{opacity:0}}
        .loader-container{position:relative;display:flex;flex-direction:column;align-items:center;gap:20px}
        .loader-logo-small{position:absolute;top:-180px;left:-200px;width:40px;height:40px;opacity:0.4}
        .loader-logo-small img{width:100%;height:100%;object-fit:contain}
        .pig-blink-container{width:240px;height:240px;display:flex;align-items:center;justify-content:center;animation:pigAppear 0.6s cubic-bezier(0.34, 1.56, 0.64, 1)}
        .pig-blink-container.hiding{animation:pigDisappear 0.25s ease-in forwards}
        .pig-blink-container img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
        @keyframes pigAppear{0%{opacity:0;transform:scale(0.3) translateY(30px)}50%{transform:scale(1.1) translateY(-10px)}100%{opacity:1;transform:scale(1) translateY(0)}}
        @keyframes pigDisappear{0%{opacity:1;transform:scale(1)}30%{opacity:0.9;transform:scale(1.08)}100%{opacity:0;transform:scale(0.3)}}
        .signal-bars{display:flex;align-items:center;gap:6px;height:50px;margin-top:8px}
        .signal-bar{width:10px;background:var(--pink);border-radius:3px;animation:signalWave 1.2s ease-in-out infinite}
        .signal-bar:nth-child(1){animation-delay:0s}
        .signal-bar:nth-child(2){animation-delay:.15s}
        .signal-bar:nth-child(3){animation-delay:.3s}
        .signal-bar:nth-child(4){animation-delay:.45s}
        @keyframes signalWave{
            0%,100%{height:8px;opacity:.3;background:var(--pink-bg)}
            25%{height:36px;opacity:1;background:var(--pink)}
            50%{height:8px;opacity:.3;background:var(--pink-bg)}
        }

        .app-layout{display:flex;height:100vh;overflow:hidden}

        .sidebar{width:var(--sidebar-w);min-width:var(--sidebar-w);height:100vh;background:var(--sidebar);border-right:var(--bw) solid var(--border);display:flex;flex-direction:column;overflow-y:auto;z-index:10;transition:transform .25s cubic-bezier(.4,0,.2,1)}
        .sidebar-head{padding:16px 16px 12px;display:flex;align-items:center;gap:10px;border-bottom:2px dashed var(--border2)}
        .sidebar-logo{width:36px;height:36px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;position:relative}
        .sidebar-logo img{width:100%;height:100%;object-fit:contain}
        .sidebar-brand{font-weight:900;font-size:1rem;letter-spacing:-.02em}
        .sidebar-sub{font-size:.5625rem;color:var(--text3);font-weight:700}

        .sidebar-nav{flex:1;padding:10px 8px;display:flex;flex-direction:column;gap:2px}
        .sn-label{font-size:.5625rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--text3);padding:10px 10px 4px;margin-top:6px}
        .sn-label:first-child{margin-top:0}
        .sn-label.collapsible{cursor:pointer;display:flex;align-items:center;transition:all .2s ease;padding:10px 10px 4px;border-radius:var(--radius-sm)}
        .sn-label.collapsible:hover{color:var(--text);background:var(--bg2)}
        .sn-label.collapsible i{transition:transform .25s cubic-bezier(.4,0,.2,1)}
        .sn-label.collapsible.expanded i{transform:rotate(90deg)}

        /* 折叠区域动画 - 从上向下展开，从下向上收起 */
        .collapsible-section{
            display:flex;
            flex-direction:column;
            gap:2px;
            overflow:hidden;
            transform-origin:top center;
            transition:all .35s cubic-bezier(0.4, 0, 0.2, 1);
            max-height:300px;
            opacity:1;
            transform:scaleY(1);
            margin-top:2px;
        }
        .collapsible-section.collapsed{
            max-height:0;
            opacity:0;
            transform:scaleY(0);
            margin-top:0;
            margin-bottom:0;
        }
        .collapsible-section > .sn-item{
            transform-origin:center top;
            transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);
            opacity:1;
            transform:translateY(0);
        }
        .collapsible-section.collapsed > .sn-item{
            opacity:0;
            transform:translateY(-10px);
        }
        .sn-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--radius-sm);font-size:.8125rem;font-weight:700;color:var(--text2);cursor:pointer;transition:all .15s;border:2px solid transparent;text-decoration:none;position:relative}
        .sn-item:hover{color:var(--text);background:var(--bg2);border-color:var(--bg3)}
        .sn-item.active{color:var(--pink-text);background:var(--pink-bg);border-color:var(--pink-text)}
        .sn-item i{width:18px;text-align:center;font-size:.875rem}
        .sn-badge{margin-left:auto;padding:1px 7px;border-radius:6px;font-size:.5625rem;font-weight:800;background:var(--pink);color:#1A1A1A;border:1.5px solid var(--border)}
        .sn-badge.new{background:var(--green);color:#fff}.sn-badge.hot{background:var(--orange);color:#fff}
        .sn-badge.notification-dot{background:var(--red);animation:pulse 1.5s ease-in-out infinite}
        @keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}
        @keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

        .sidebar-foot{padding:12px;border-top:2px dashed var(--border2)}
        .sf-btn{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--radius-sm);font-size:.75rem;font-weight:700;color:var(--text2);cursor:pointer;transition:all .15s;border:2px solid transparent;text-decoration:none;width:100%;background:none}
        .sf-btn:hover{color:var(--text);background:var(--bg2);border-color:var(--bg3)}
        .sf-btn i{width:16px;text-align:center}

        .main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
        .topbar{height:52px;min-height:52px;border-bottom:var(--bw) solid var(--border);display:flex;align-items:center;padding:0 20px;gap:12px;background:var(--card);backdrop-filter:blur(10px);z-index:5}
        .topbar-hamburger{display:none;width:34px;height:34px;border-radius:var(--radius-sm);border:var(--bw) solid var(--border);background:var(--card);color:var(--text);cursor:pointer;align-items:center;justify-content:center;font-size:.8rem;box-shadow:2px 2px 0 var(--shadow);flex-shrink:0}
        .topbar-title{font-weight:900;font-size:1rem;letter-spacing:-.02em;flex:1}
        .topbar-title i{margin-right:6px;font-size:.8rem}
        .topbar-actions{display:flex;gap:6px}
        /* ==================== ROACH UI 组件库 ==================== */
        
        /* Button 按钮组件 - 基于 .tb-btn */
        .ro-btn{padding:6px 14px;border-radius:var(--radius-sm);font-size:.75rem;font-weight:700;cursor:pointer;transition:all .15s;border:var(--bw) solid var(--border);background:var(--card);color:var(--text);box-shadow:2px 2px 0 var(--shadow);text-decoration:none;display:inline-flex;align-items:center;gap:5px;position:relative}
        .ro-btn:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--shadow)}
        .ro-btn:active{transform:translate(1px,1px);box-shadow:0 0 0 var(--shadow)}
        .ro-btn-primary{background:var(--pink);color:#1A1A1A}
        
        /* Button 大尺寸 - 基于 .w-btn */
        .ro-btn-lg{padding:8px 16px;font-size:.8125rem;box-shadow:3px 3px 0 var(--shadow)}
        .ro-btn-lg:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--shadow)}
        
        /* 兼容旧样式 - 保留 .tb-btn 和 .w-btn 作为别名 */
        .tb-btn, .w-btn{padding:6px 14px;border-radius:var(--radius-sm);font-size:.75rem;font-weight:700;cursor:pointer;transition:all .15s;border:var(--bw) solid var(--border);background:var(--card);color:var(--text);box-shadow:2px 2px 0 var(--shadow);text-decoration:none;display:inline-flex;align-items:center;gap:5px;position:relative}
        .tb-btn:hover, .w-btn:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--shadow)}
        .tb-btn:active, .w-btn:active{transform:translate(1px,1px);box-shadow:0 0 0 var(--shadow)}
        .tb-btn.primary, .w-btn.pink{background:var(--pink);color:#1A1A1A}
        .w-btn{padding:8px 16px;font-size:.8125rem;box-shadow:3px 3px 0 var(--shadow)}
        .w-btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--shadow)}
        .mail-badge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;background:var(--red);color:#fff;font-size:.625rem;font-weight:800;border-radius:9px;border:2px solid var(--bg);display:flex;align-items:center;justify-content:center}

        .content{flex:1;overflow-y:auto;overflow-x:hidden;padding:20px;scroll-behavior:smooth}



        /* 设置页面 */
        #page-settings {
            padding: 20px;
        }

        /* ==================== 网站工具页面 ==================== */
        #page-tools {
            padding: 20px;
            min-height: 100%;
        }

        .tools-page-container {
            max-width: 900px;
            margin: 0 auto;
        }

        .tools-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
            flex-wrap: wrap;
            gap: 12px;
        }

        .tools-title {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 1.25rem;
            font-weight: 900;
            color: var(--text);
        }

        .tools-title i {
            color:var(--pink-text);
            font-size: 1.1rem;
        }

        .tools-search {
            position: relative;
            flex: 1;
            max-width: 300px;
        }

        .tools-search i {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text3);
            font-size: 0.875rem;
        }

        .tools-search input {
            width: 100%;
            padding: 10px 12px 10px 36px;
            border: var(--bw) solid var(--border);
            border-radius: var(--radius);
            font-size: 0.875rem;
            font-family: var(--font);
            background:var(--card);
            transition: all 0.15s;
        }

        .tools-search input:focus {
            outline: none;
            border-color:var(--pink-text);
            box-shadow: 0 0 0 3px var(--pink-bg);
        }

        .tools-tabs {
            display: flex;
            gap: 8px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        .tools-tab {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px 14px;
            border: var(--bw) solid var(--border);
            border-radius: var(--radius-sm);
            background:var(--card);
            font-size: 0.8125rem;
            font-weight: 700;
            color: var(--text2);
            cursor: pointer;
            transition: all 0.15s;
            box-shadow: 2px 2px 0 var(--shadow);
        }

        .tools-tab:hover {
            transform: translate(-2px, -2px);
            box-shadow: 4px 4px 0 var(--shadow);
        }

        .tools-tab.active {
            background: var(--pink);
            color: #1A1A1A;
            border-color: var(--border);
        }

        .tools-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
            gap: 16px;
        }

        .tool-card {
            background:var(--card);
            border: var(--bw) solid var(--border);
            border-radius: var(--radius);
            padding: 16px;
            display: flex;
            align-items: center;
            gap: 12px;
            transition: all 0.15s;
            box-shadow: 3px 3px 0 var(--shadow);
        }

        .tool-card:hover {
            transform: translate(-3px, -3px);
            box-shadow: 6px 6px 0 var(--shadow);
        }

        .tool-card.placeholder {
            opacity: 0.7;
        }

        .tool-icon {
            width: 48px;
            height: 48px;
            border-radius: var(--radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
            flex-shrink: 0;
        }

        .tool-info {
            flex: 1;
            min-width: 0;
        }

        .tool-info h3 {
            font-size: 0.9375rem;
            font-weight: 800;
            color: var(--text);
            margin-bottom: 4px;
        }

        .tool-info p {
            font-size: 0.75rem;
            color: var(--text2);
            font-weight: 600;
        }

        .tool-btn {
            padding: 6px 14px;
            border: var(--bw) solid var(--border);
            border-radius: var(--radius-sm);
            background: var(--pink);
            color: #1A1A1A;
            font-size: 0.75rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.15s;
            box-shadow: 2px 2px 0 var(--shadow);
            flex-shrink: 0;
        }

        .tool-btn:hover {
            transform: translate(-2px, -2px);
            box-shadow: 4px 4px 0 var(--shadow);
        }

        .tool-soon {
            padding: 4px 10px;
            background: var(--bg3);
            color: var(--text2);
            font-size: 0.6875rem;
            font-weight: 700;
            border-radius: var(--radius-sm);
            flex-shrink: 0;
        }

        .tools-no-results {
            text-align: center;
            padding: 60px 20px;
            color: var(--text2);
        }

        .tools-no-results i {
            font-size: 3rem;
            margin-bottom: 16px;
            color: var(--text3);
        }

        .tools-no-results p {
            font-size: 0.9375rem;
            font-weight: 600;
        }

        /* ==================== 图片转像素工具 - 全新设计 ==================== */
        
        /* 遮罩层 */
        /* .pixel-tool-overlay 公共样式已统一到上方基类（z-index:9999 / blur 8px / padding 24px） */

        .pixel-tool-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        /* 主窗口 */
        .pixel-tool-modal {
            background: linear-gradient(145deg, var(--card) 0%, var(--bg2) 100%);
            border: var(--bw) solid var(--border);
            border-radius: 24px;
            box-shadow: 
                0 25px 50px -12px rgba(0, 0, 0, 0.25),
                0 0 0 1px rgba(255, 255, 255, 0.5) inset;
            max-width: 1200px;
            width: 92vw;
            max-height: 90vh;
            height: 85vh;
            display: flex;
            flex-direction: column;
            transform: scale(0.92) translateY(20px);
            opacity: 0;
            transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
            overflow: hidden;
        }

        .pixel-tool-overlay.active .pixel-tool-modal {
            transform: scale(1) translateY(0);
            opacity: 1;
        }

        /* 头部 - 渐变设计 */
        .pixel-tool-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 24px;
            background: linear-gradient(135deg, var(--pink) 0%, #FFB347 100%);
            border-bottom: var(--bw) solid var(--border);
            flex-shrink: 0;
        }

        .pixel-tool-head h3 {
            font-size: 1.1rem;
            font-weight: 800;
            display: flex;
            align-items: center;
            gap: 10px;
            color: #1A1A1A;
            text-shadow: 1px 1px 0 rgba(0,0,0,0.1);
        }

        .pixel-tool-head h3 i {
            font-size: 1.25rem;
        }

        .pixel-tool-version {
            font-size: 0.6875rem;
            color: rgba(255,255,255,0.9);
            font-weight: 700;
            margin-left: 8px;
            padding: 3px 10px;
            background: rgba(255,255,255,0.25);
            border-radius: 20px;
            border: 1.5px solid rgba(255,255,255,0.4);
        }

        .pixel-tool-close {
            width: 36px;
            height: 36px;
            border: 2px solid rgba(255,255,255,0.5);
            border-radius: 10px;
            background: rgba(255,255,255,0.15);
            color: #fff;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
        }

        .pixel-tool-close:hover {
            background: rgba(255,255,255,0.3);
            transform: rotate(90deg);
        }

        /* 主体布局 */
        .pixel-tool-body {
            display: flex;
            gap: 20px;
            padding: 20px;
            overflow: hidden;
            flex: 1;
            min-height: 0;
        }

        /* 左侧面板 */
        .pixel-left-panel {
            flex: 0 0 260px;
            display: flex;
            flex-direction: column;
            gap: 14px;
            overflow-y: auto;
            overflow-x: hidden;
            padding-right: 6px;
        }

        .pixel-left-panel::-webkit-scrollbar {
            width: 5px;
        }

        .pixel-left-panel::-webkit-scrollbar-track {
            background: transparent;
        }

        .pixel-left-panel::-webkit-scrollbar-thumb {
            background: var(--border2);
            border-radius: 3px;
        }

        /* 中间预览面板 */
        .pixel-center-panel {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            background:var(--card);
            border: var(--bw) solid var(--border);
            border-radius: 16px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.06) inset;
        }

        /* 右侧面板 */
        .pixel-right-panel {
            flex: 0 0 240px;
            display: flex;
            flex-direction: column;
            gap: 14px;
            overflow-y: auto;
            overflow-x: hidden;
            padding-right: 6px;
        }

        .pixel-right-panel::-webkit-scrollbar {
            width: 5px;
        }

        .pixel-right-panel::-webkit-scrollbar-track {
            background: transparent;
        }

        .pixel-right-panel::-webkit-scrollbar-thumb {
            background: var(--border2);
            border-radius: 3px;
        }

        /* 卡片式区块 */
        .pixel-card {
            background:var(--card);
            border: var(--bw) solid var(--border);
            border-radius: 14px;
            padding: 14px;
            box-shadow: 3px 3px 0 var(--shadow);
            transition: all 0.2s ease;
        }

        .pixel-card:hover {
            box-shadow: 4px 4px 0 var(--shadow);
        }

        /* 分区标签 */
        .pixel-section-label {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.75rem;
            font-weight: 800;
            color: var(--text);
            text-transform: uppercase;
            letter-spacing: 0.08em;
            margin-bottom: 10px;
            padding-bottom: 8px;
            border-bottom: 2px dashed var(--bg3);
        }

        .pixel-section-label i {
            color:var(--pink-text);
            font-size: 0.875rem;
        }

        /* 上传按钮组 */
        .pixel-upload-buttons {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }

        .pixel-upload-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            padding: 14px 8px;
            border: var(--bw) solid var(--border);
            border-radius: 12px;
            background: linear-gradient(145deg, var(--card) 0%, var(--bg2) 100%);
            font-size: 0.75rem;
            font-weight: 700;
            color: var(--text);
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
            box-shadow: 2px 2px 0 var(--shadow);
        }

        .pixel-upload-btn:hover {
            transform: translateY(-2px);
            box-shadow: 3px 4px 0 var(--shadow);
            background: linear-gradient(145deg, var(--pink-bg) 0%, var(--card) 100%);
            border-color:var(--pink-text);
        }

        .pixel-upload-btn i {
            font-size: 1.25rem;
            color:var(--pink-text);
        }

        .pixel-upload-btn.full-width {
            grid-column: 1 / -1;
            flex-direction: row;
            justify-content: center;
            padding: 10px;
        }

        .pixel-upload-area {
            border: 2px dashed var(--border2);
            border-radius: var(--radius);
            padding: 24px;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s;
            background: var(--bg2);
        }

        .pixel-upload-area:hover {
            border-color:var(--pink-text);
            background: var(--pink-bg);
        }

        .pixel-upload-area.dragover {
            border-color:var(--pink-text);
            background: var(--pink-bg);
        }

        .pixel-upload-content i {
            font-size: 2rem;
            color:var(--pink-text);
            margin-bottom: 8px;
        }

        .pixel-upload-content p {
            font-size: 0.875rem;
            font-weight: 700;
            color: var(--text);
            margin-bottom: 4px;
        }

        .pixel-upload-content span {
            font-size: 0.6875rem;
            color: var(--text2);
        }

        /* 文件信息卡片 */
        .pixel-file-info {
            background: linear-gradient(145deg, var(--card) 0%, var(--bg2) 100%);
        }

        .pixel-file-thumb {
            width: 100%;
            aspect-ratio: 1;
            border-radius: 10px;
            overflow: hidden;
            border: var(--bw) solid var(--border);
            margin-bottom: 12px;
            background: var(--bg3);
            box-shadow: 2px 2px 0 var(--shadow);
        }

        .pixel-file-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .pixel-file-details {
            margin-bottom: 12px;
            text-align: center;
        }

        .pixel-file-name {
            font-size: 0.8125rem;
            font-weight: 700;
            color: var(--text);
            word-break: break-all;
            margin-bottom: 4px;
            line-height: 1.4;
        }

        .pixel-file-size {
            font-size: 0.75rem;
            color: var(--text2);
            background: var(--bg3);
            padding: 2px 10px;
            border-radius: 10px;
            display: inline-block;
        }

        .pixel-file-download {
            width: 100%;
            padding: 12px;
            border: var(--bw) solid var(--border);
            border-radius: 10px;
            background: linear-gradient(135deg, var(--green) 0%, #3DD4C0 100%);
            color: #fff;
            font-size: 0.8125rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 2px 2px 0 var(--shadow);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }

        .pixel-file-download:hover {
            transform: translateY(-2px);
            box-shadow: 3px 3px 0 var(--shadow);
        }

        /* 右侧面板占位符 */
        .pixel-right-placeholder {
            background: linear-gradient(145deg, var(--bg2) 0%, var(--bg3) 100%);
            border: var(--bw) solid var(--border);
            border-radius: 14px;
            padding: 30px 20px;
            text-align: center;
            color: var(--text3);
            box-shadow: 3px 3px 0 var(--shadow);
        }

        .pixel-right-placeholder i {
            font-size: 2.5rem;
            margin-bottom: 14px;
            opacity: 0.5;
            color:var(--pink-text);
        }

        .pixel-right-placeholder p {
            font-size: 0.8125rem;
            line-height: 1.6;
            font-weight: 500;
        }

        /* 批量处理 */
        .pixel-batch-info {
            background: linear-gradient(145deg, var(--blue-bg) 0%, #E8F4FF 100%);
        }

        .pixel-batch-progress {
            margin-bottom: 14px;
        }

        .pixel-batch-count {
            font-size: 0.875rem;
            font-weight: 800;
            color: var(--text);
            margin-bottom: 8px;
            text-align: center;
        }

        .pixel-batch-count span {
            color: var(--blue);
            font-size: 1.1rem;
        }

        .pixel-batch-bar {
            height: 10px;
            background: rgba(255,255,255,0.5);
            border-radius: 5px;
            overflow: hidden;
            border: 1.5px solid var(--border);
        }

        .pixel-batch-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--blue) 0%, #7EC8E3 100%);
            border-radius: 4px;
            transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            width: 0%;
        }

        .pixel-batch-nav {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            margin-bottom: 12px;
        }

        .pixel-batch-btn {
            padding: 10px;
            border: var(--bw) solid var(--border);
            border-radius: 8px;
            background:var(--card);
            font-size: 0.75rem;
            font-weight: 700;
            color: var(--text);
            cursor: pointer;
            transition: all 0.15s ease;
            box-shadow: 2px 2px 0 var(--shadow);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
        }

        .pixel-batch-btn:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: 3px 3px 0 var(--shadow);
        }

        .pixel-batch-btn:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }

        .pixel-batch-download-all {
            width: 100%;
            padding: 12px;
            border: var(--bw) solid var(--border);
            border-radius: 10px;
            background: linear-gradient(135deg, var(--green) 0%, #3DD4C0 100%);
            color: #fff;
            font-size: 0.8125rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 2px 2px 0 var(--shadow);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }

        .pixel-batch-download-all:hover {
            transform: translateY(-2px);
            box-shadow: 3px 3px 0 var(--shadow);
        }

        /* 确认关闭弹窗 */
        .pixel-confirm-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(45, 45, 45, 0.8);
            backdrop-filter: blur(4px);
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            opacity: 0;
            visibility: hidden;
            transition: all 0.25s ease;
        }

        .pixel-confirm-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .pixel-confirm-modal {
            background: linear-gradient(145deg, var(--card) 0%, var(--bg2) 100%);
            border: var(--bw) solid var(--border);
            border-radius: 20px;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            padding: 32px 36px;
            max-width: 380px;
            width: 100%;
            text-align: center;
            transform: scale(0.9);
            transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .pixel-confirm-overlay.active .pixel-confirm-modal {
            transform: scale(1);
        }

        .pixel-confirm-icon {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--orange-bg) 0%, #FFE8D6 100%);
            color: var(--orange);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.75rem;
            margin: 0 auto 18px;
            border: var(--bw) solid var(--border);
            box-shadow: 3px 3px 0 var(--shadow);
        }

        .pixel-confirm-modal h4 {
            font-size: 1.25rem;
            font-weight: 800;
            color: var(--text);
            margin-bottom: 10px;
        }

        .pixel-confirm-modal p {
            font-size: 0.9375rem;
            color: var(--text2);
            margin-bottom: 24px;
            line-height: 1.6;
        }

        .pixel-confirm-actions {
            display: flex;
            gap: 12px;
        }

        .pixel-confirm-btn {
            flex: 1;
            padding: 14px 18px;
            border: var(--bw) solid var(--border);
            border-radius: 12px;
            font-size: 0.9375rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
            box-shadow: 2px 2px 0 var(--shadow);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }

        .pixel-confirm-btn:hover {
            transform: translateY(-2px);
            box-shadow: 4px 4px 0 var(--shadow);
        }

        .pixel-confirm-btn.cancel {
            background: var(--bg3);
            color: var(--text);
        }

        .pixel-confirm-btn.confirm {
            background: linear-gradient(135deg, var(--orange) 0%, #FFB347 100%);
            color: #fff;
        }

        /* 操作按钮 */
        .pixel-actions {
            display: flex;
            gap: 10px;
        }

        .pixel-btn {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 12px;
            border: var(--bw) solid var(--border);
            border-radius: 10px;
            font-size: 0.8125rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 2px 2px 0 var(--shadow);
            background:var(--card);
        }

        .pixel-btn:hover {
            transform: translateY(-2px);
            box-shadow: 3px 3px 0 var(--shadow);
        }

        .pixel-btn.secondary {
            background: linear-gradient(145deg, var(--bg3) 0%, var(--bg4) 100%);
        }

        /* 预设按钮 */
        .pixel-preset-buttons {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
        }

        .pixel-preset-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            padding: 12px 6px;
            border: var(--bw) solid var(--border);
            border-radius: 10px;
            background:var(--card);
            cursor: pointer;
            transition: all 0.15s ease;
            box-shadow: 2px 2px 0 var(--shadow);
        }

        .pixel-preset-btn:hover {
            transform: translateY(-2px);
            box-shadow: 3px 3px 0 var(--shadow);
        }

        .pixel-preset-btn.active {
            background: linear-gradient(135deg, var(--pink) 0%, #FFB347 100%);
            color: #1A1A1A;
            border-color: var(--border);
            box-shadow: 2px 2px 0 var(--shadow);
        }

        .pixel-preset-btn i {
            font-size: 1.1rem;
            margin-bottom: 2px;
        }

        .pixel-preset-btn span {
            font-size: 0.6875rem;
            font-weight: 700;
        }

        .pixel-preset-btn small {
            font-size: 0.5625rem;
            opacity: 0.8;
        }

        /* 参数控制 */
        .pixel-control-group {
            margin-bottom: 14px;
        }

        .pixel-control-group:last-child {
            margin-bottom: 0;
        }

        .pixel-control-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 8px;
        }

        .pixel-control-header label {
            font-size: 0.8125rem;
            font-weight: 700;
            color: var(--text);
        }

        .pixel-control-header span {
            font-size: 0.6875rem;
            font-weight: 800;
            color:var(--pink-text);
            background: var(--pink-bg);
            padding: 3px 10px;
            border-radius: 20px;
            border: 1.5px solid var(--pink);
        }

        .pixel-slider-container {
            position: relative;
            padding: 8px 0;
        }

        .pixel-slider-container input[type="range"] {
            width: 100%;
            -webkit-appearance: none;
            height: 14px;
            border-radius: 7px;
            background: linear-gradient(90deg, var(--bg3) 0%, var(--bg4) 100%);
            outline: none;
            margin-bottom: 8px;
            border: 2px solid var(--border2);
            cursor: pointer;
        }

        .pixel-slider-container input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: linear-gradient(145deg, var(--pink) 0%, #FF8FB0 100%);
            border:3px solid var(--card);
            cursor: grab;
            box-shadow: 0 3px 12px rgba(255, 107, 157, 0.5), 2px 2px 0 var(--shadow);
            transition: all 0.15s ease;
            margin-top: -7px;
        }

        .pixel-slider-container input[type="range"]::-webkit-slider-thumb:hover {
            transform: scale(1.2);
            box-shadow: 0 5px 16px rgba(255, 107, 157, 0.6);
        }

        .pixel-slider-container input[type="range"]::-webkit-slider-thumb:active {
            cursor: grabbing;
            transform: scale(1.1);
        }

        .pixel-slider-marks {
            display: flex;
            justify-content: space-between;
            font-size: 0.6875rem;
            color: var(--text3);
            font-weight: 600;
            padding: 0 8px;
        }

        /* 预览区域 */
        .pixel-preview-container {
            flex: 1;
            min-height: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: auto;
            background: 
                linear-gradient(45deg, #f0f0f0 25%, transparent 25%),
                linear-gradient(-45deg, #f0f0f0 25%, transparent 25%),
                linear-gradient(45deg, transparent 75%, #f0f0f0 75%),
                linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
            background-size: 20px 20px;
            background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
            background-color: var(--card);
        }

        .pixel-preview-container.dragover {
            background: var(--pink-bg);
        }

        .pixel-preview-placeholder {
            text-align: center;
            color: var(--text3);
            padding: 40px;
            background: rgba(255,255,255,0.9);
            border-radius: 16px;
            border: 2px dashed var(--border2);
        }

        .pixel-preview-placeholder i {
            font-size: 4rem;
            margin-bottom: 16px;
            opacity: 0.4;
            color:var(--pink-text);
        }

        .pixel-preview-placeholder p {
            font-size: 1rem;
            font-weight: 700;
            margin-bottom: 8px;
            color: var(--text);
        }

        .pixel-preview-placeholder span {
            font-size: 0.8125rem;
            color: var(--text2);
        }

        .pixel-preview-wrapper {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            min-height: 100%;
            animation: fadeIn 0.4s ease;
            padding: 24px;
        }

        .pixel-preview-wrapper canvas {
            max-width: 100%;
            max-height: 70vh;
            width: auto;
            height: auto;
            object-fit: contain;
            border-radius: 8px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.15);
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: scale(0.95); }
            to { opacity: 1; transform: scale(1); }
        }

        .pixel-preview-container {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 16px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        .pixel-preview-box {
            flex: 1;
            min-width: 200px;
            max-width: 300px;
            background: var(--bg2);
            border: var(--bw) solid var(--border);
            border-radius: var(--radius);
            padding: 12px;
            text-align: center;
        }

        .pixel-preview-label {
            display: block;
            font-size: 0.75rem;
            font-weight: 700;
            color: var(--text2);
            margin-bottom: 8px;
        }

        .pixel-preview-box canvas {
            max-width: 100%;
            max-height: 200px;
            border-radius: var(--radius-sm);
            display: block;
            margin: 0 auto;
        }

        .pixel-preview-arrow {
            font-size: 1.5rem;
            color:var(--pink-text);
        }

        .pixel-controls {
            background: var(--bg2);
            border: var(--bw) solid var(--border);
            border-radius: var(--radius);
            padding: 16px;
            margin-bottom: 20px;
        }

        .pixel-control-group {
            margin-bottom: 16px;
        }

        .pixel-control-group:last-child {
            margin-bottom: 0;
        }

        .pixel-control-group label {
            display: block;
            font-size: 0.8125rem;
            font-weight: 700;
            color: var(--text);
            margin-bottom: 8px;
        }

        .pixel-slider-container {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .pixel-slider-container input[type="range"] {
            flex: 1;
            -webkit-appearance: none;
            height: 8px;
            border-radius: 4px;
            background: var(--bg3);
            outline: none;
        }

        .pixel-slider-container input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--pink);
            border: var(--bw) solid var(--border);
            cursor: pointer;
            box-shadow: 2px 2px 0 var(--shadow);
        }

        .pixel-slider-container span {
            font-size: 0.75rem;
            font-weight: 700;
            color: var(--text2);
            min-width: 50px;
            text-align: right;
        }

        .pixel-actions {
            display: flex;
            gap: 12px;
            justify-content: center;
        }

        .pixel-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 20px;
            border: var(--bw) solid var(--border);
            border-radius: var(--radius-sm);
            font-size: 0.875rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.15s;
            box-shadow: 3px 3px 0 var(--shadow);
        }

        .pixel-btn.primary {
            background: var(--pink);
            color: #1A1A1A;
        }

        .pixel-btn.secondary {
            background: var(--bg3);
            color: var(--text);
        }

        .pixel-btn:hover {
            transform: translate(-2px, -2px);
            box-shadow: 5px 5px 0 var(--shadow);
        }

        /* 响应式适配 */
        @media (max-width: 1024px) {
            .pixel-tool-modal {
                width: 96vw;
            }
            
            .pixel-left-panel {
                flex: 0 0 220px;
            }
            
            .pixel-right-panel {
                flex: 0 0 200px;
            }
        }

        @media (max-width: 768px) {
            .pixel-tool-overlay {
                padding: 0;
            }

            .pixel-tool-modal {
                max-width: 100vw;
                width: 100vw;
                max-height: 100vh;
                height: 100vh;
                border-radius: 0;
            }

            .pixel-tool-body {
                flex-direction: column;
                padding: 16px;
                gap: 16px;
            }

            .pixel-left-panel {
                flex: none;
                width: 100%;
                order: 2;
                max-height: 35vh;
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 12px;
            }

            .pixel-left-panel .pixel-card {
                margin-bottom: 0;
            }

            .pixel-center-panel {
                flex: none;
                width: 100%;
                order: 1;
                min-height: 40vh;
                max-height: 45vh;
            }

            .pixel-right-panel {
                flex: none;
                width: 100%;
                order: 3;
                max-height: 15vh;
                flex-direction: row;
                gap: 12px;
            }

            .pixel-right-panel .pixel-card {
                flex: 1;
            }

            .pixel-preview-wrapper {
                padding: 16px;
            }

            .pixel-preview-wrapper canvas {
                max-height: 40vh;
            }

            .pixel-preset-buttons {
                grid-template-columns: repeat(3, 1fr);
            }

            .pixel-upload-buttons {
                grid-template-columns: 1fr 1fr;
            }

            .pixel-file-info {
                display: flex;
                align-items: center;
                gap: 12px;
            }

            .pixel-file-thumb {
                width: 50px;
                height: 50px;
                flex-shrink: 0;
                margin-bottom: 0;
            }

            .pixel-file-details {
                flex: 1;
                text-align: left;
                margin-bottom: 0;
            }

            .pixel-file-download {
                width: auto;
                padding: 10px 16px;
            }

            .pixel-batch-nav {
                grid-template-columns: 1fr 1fr;
            }
        }

        @media (max-width: 480px) {
            .pixel-left-panel {
                grid-template-columns: 1fr;
                max-height: 45vh;
            }

            .pixel-preset-buttons {
                grid-template-columns: repeat(2, 1fr);
            }

            .pixel-tool-head {
                padding: 12px 16px;
            }

            .pixel-tool-head h3 {
                font-size: 0.9375rem;
            }
        }

        .settings-page-content {
            max-width: 600px;
        }

        .settings-section {
            margin-bottom: 24px;
        }

        .settings-section:last-child {
            margin-bottom: 0;
        }

        .settings-section-title {
            font-size: 0.75rem;
            font-weight: 800;
            color: var(--text3);
            text-transform: uppercase;
            letter-spacing: 0.08em;
            margin-bottom: 12px;
            padding-left: 4px;
        }

        .settings-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 16px;
            background:var(--card);
            border: var(--bw) solid var(--border);
            border-radius: var(--radius);
            margin-bottom: 10px;
            transition: all 0.15s;
            box-shadow: 3px 3px 0 var(--shadow);
        }

        .settings-item:hover {
            transform: translate(-2px, -2px);
            box-shadow: 5px 5px 0 var(--shadow);
        }

        .settings-item-label {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 700;
            font-size: 0.9rem;
        }

        .settings-item-label i {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--bg2);
            border-radius: 6px;
            color:var(--pink-text);
            font-size: 0.8rem;
        }

        /* 音量滑块 */
        .volume-control {
            display: flex;
            align-items: center;
            gap: 12px;
            flex: 1;
            margin-left: 16px;
        }

        .volume-slider-wrap {
            flex: 1;
            height: 6px;
            background: var(--bg3);
            border-radius: 3px;
            position: relative;
            cursor: pointer;
        }

        .volume-slider-fill {
            height: 100%;
            background: var(--pink);
            border-radius: 3px;
            transition: width 0.1s;
        }

        .volume-slider-input {
            position: absolute;
            inset: -8px 0;
            width: 100%;
            opacity: 0;
            cursor: pointer;
        }

        .volume-value {
            font-size: 0.75rem;
            font-weight: 800;
            color: var(--text3);
            min-width: 36px;
            text-align: right;
        }

        /*
         * Switch 开关组件
         * 使用规范:
         *   - 基础类: .ro-switch
         *   - 状态: .ro-switch.active (开启)
         *   - 兼容: .ios-switch (旧版别名)
         */

        /* 基础开关 */
        .ro-switch, .ios-switch {
            width: 50px;
            height: 28px;
            background: var(--bg3);
            border-radius: 14px;
            position: relative;
            cursor: pointer;
            transition: background 0.3s;
            border: 2px solid var(--border);
            flex-shrink: 0;
            display: inline-block;
        }

        /* 开启状态 */
        .ro-switch.active, .ios-switch.active {
            background: var(--pink);
        }

        /* 滑块 */
        .ro-switch::after, .ios-switch::after {
            content: '';
            position: absolute;
            width: 20px;
            height: 20px;
            background:var(--card);
            border-radius: 50%;
            top: 2px;
            left: 2px;
            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
            border: 1px solid var(--border);
        }

        /* 开启状态滑块位置 */
        .ro-switch.active::after, .ios-switch.active::after {
            transform: translateX(22px);
        }

        .page{display:none;animation:pageIn .3s ease}
        .page.active{display:block}
        @keyframes pageIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

        /* 欢迎横幅 - 黄黑工业动漫描边风 */
        .welcome{background-color:#F7CE46;border:var(--bw) solid var(--border);border-radius:var(--radius-lg);padding:42px 36px 34px;margin-bottom:20px;box-shadow:6px 6px 0 var(--shadow);position:relative;overflow:hidden;color:#1A1A1A;isolation:isolate;background-image:radial-gradient(circle at center,#3A3A3A 2px,#8A8A8A 3px,rgba(215,215,215,0.95) 4px,transparent 5px),radial-gradient(circle at center,#3A3A3A 2px,#8A8A8A 3px,rgba(215,215,215,0.95) 4px,transparent 5px),radial-gradient(circle at center,#3A3A3A 2px,#8A8A8A 3px,rgba(215,215,215,0.95) 4px,transparent 5px),radial-gradient(circle at center,#3A3A3A 2px,#8A8A8A 3px,rgba(215,215,215,0.95) 4px,transparent 5px);background-position:14px 14px,calc(100% - 14px) 14px,14px calc(100% - 14px),calc(100% - 14px) calc(100% - 14px);background-repeat:no-repeat;background-size:12px 12px}
        .welcome::before{content:'';position:absolute;top:0;left:0;right:0;height:14px;background:repeating-linear-gradient(-45deg,#1A1A1A 0 14px,#FFC800 14px 28px);border-bottom:3px solid #1A1A1A;z-index:1}
        .welcome::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(26,26,26,0.05) 0 2px,transparent 2px 16px);pointer-events:none;z-index:0}
        .welcome h1{font-size:2rem;font-weight:900;letter-spacing:-.03em;margin-bottom:6px;position:relative;z-index:2;text-shadow:3px 3px 0 rgba(255,255,255,0.65)}
        /* 监控圆点 - 圆圈+红点（监控摄像头意象） */
        .cam-dot{display:inline-block;width:15px;height:15px;border-radius:50%;background:#1A1A1A;border:2px solid #1A1A1A;position:relative;vertical-align:-2px;margin-left:6px;box-shadow:1px 1px 0 rgba(255,255,255,0.55)}
        .cam-dot::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:5px;height:5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#FF8A8A,#E5484D 55%,#B91C1C);box-shadow:0 0 4px rgba(229,72,77,0.9);animation:camBlink 2s ease-in-out infinite}
        @keyframes camBlink{0%,100%{opacity:1}50%{opacity:0.55}}
        .welcome h1 .accent{color:#FFC800;background:#1A1A1A;padding:2px 14px;border-radius:8px;box-shadow:3px 3px 0 rgba(255,255,255,0.75);display:inline-block;text-shadow:none}
        .welcome p{color:#1A1A1A;background:rgba(255,255,255,0.55);font-size:.9375rem;font-weight:800;padding:5px 14px;border-radius:8px;border:2px solid #1A1A1A;display:inline-block;position:relative;z-index:2}
        .welcome-actions{display:flex;gap:10px;margin-top:16px;position:relative;z-index:2;flex-wrap:wrap}
        .w-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--radius-sm);font-size:.8125rem;font-weight:700;cursor:pointer;transition:all .15s;border:var(--bw) solid var(--border);text-decoration:none;box-shadow:3px 3px 0 var(--shadow)}
        .w-btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--shadow)}
        .w-btn:active{transform:translate(1px,1px);box-shadow:0 0 0 var(--shadow)}
        .w-btn.pink{background:var(--pink);color:#1A1A1A}.w-btn.white{background:var(--card);color:var(--text)}

        .quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px}
        .quick{background-color:var(--card);border:var(--bw) solid var(--border);border-radius:var(--radius);padding:16px;cursor:pointer;transition:all .15s;box-shadow:3px 3px 0 var(--shadow);text-decoration:none;color:inherit;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;background-image:radial-gradient(circle at center,#3A3A3A 1.5px,#8A8A8A 2.5px,rgba(215,215,215,0.95) 3.5px,transparent 4.5px),radial-gradient(circle at center,#3A3A3A 1.5px,#8A8A8A 2.5px,rgba(215,215,215,0.95) 3.5px,transparent 4.5px),radial-gradient(circle at center,#3A3A3A 1.5px,#8A8A8A 2.5px,rgba(215,215,215,0.95) 3.5px,transparent 4.5px),radial-gradient(circle at center,#3A3A3A 1.5px,#8A8A8A 2.5px,rgba(215,215,215,0.95) 3.5px,transparent 4.5px);background-position:8px 8px,calc(100% - 8px) 8px,8px calc(100% - 8px),calc(100% - 8px) calc(100% - 8px);background-repeat:no-repeat;background-size:10px 10px}
        .quick:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--shadow)}
        .quick:active{transform:translate(1px,1px);box-shadow:0 0 0 var(--shadow)}
        .quick-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;border:2px solid var(--border)}
        .quick-name{font-weight:800;font-size:.8125rem;letter-spacing:-.01em}
        .quick-sub{font-size:.625rem;color:var(--text3);font-weight:600}

        .section-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
        .section-hd h2{font-size:1.0625rem;font-weight:900;letter-spacing:-.02em;display:flex;align-items:center;gap:6px}
        .section-hd h2 i{font-size:.75rem;color:var(--text3)}
        .section-hd a{font-size:.75rem;font-weight:700;color:var(--pink-text);cursor:pointer;text-decoration:none}

        .feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px}
        .feat{background-color:var(--card);border:var(--bw) solid var(--border);border-radius:var(--radius);padding:16px;cursor:pointer;transition:all .15s;box-shadow:3px 3px 0 var(--shadow);text-decoration:none;color:inherit;background-image:radial-gradient(circle at center,#3A3A3A 1.5px,#8A8A8A 2.5px,rgba(215,215,215,0.95) 3.5px,transparent 4.5px),radial-gradient(circle at center,#3A3A3A 1.5px,#8A8A8A 2.5px,rgba(215,215,215,0.95) 3.5px,transparent 4.5px),radial-gradient(circle at center,#3A3A3A 1.5px,#8A8A8A 2.5px,rgba(215,215,215,0.95) 3.5px,transparent 4.5px),radial-gradient(circle at center,#3A3A3A 1.5px,#8A8A8A 2.5px,rgba(215,215,215,0.95) 3.5px,transparent 4.5px);background-position:8px 8px,calc(100% - 8px) 8px,8px calc(100% - 8px),calc(100% - 8px) calc(100% - 8px);background-repeat:no-repeat;background-size:10px 10px}
        .feat:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--shadow)}
        .feat:active{transform:translate(1px,1px);box-shadow:0 0 0 var(--shadow)}
        .feat-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:.875rem;margin-bottom:8px;border:2px solid var(--border)}
        .feat-name{font-weight:800;font-size:.875rem;margin-bottom:2px;letter-spacing:-.01em}
        .feat-desc{font-size:.75rem;color:var(--text2);line-height:1.5;font-weight:600}
        .feat.lg{grid-column:span 2;grid-row:span 2}
        .feat.lg .feat-icon{width:48px;height:48px;font-size:1.1rem}
        .feat.lg .feat-name{font-size:1rem}
        .feat.lg .feat-desc{font-size:.8125rem}
        .feat.wide{grid-column:span 2}

        .svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:20px}
        .svc{background:var(--card);border:var(--bw) solid var(--border);border-radius:var(--radius);padding:18px;cursor:pointer;transition:all .15s;box-shadow:3px 3px 0 var(--shadow);position:relative;overflow:hidden}
        .svc:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--shadow)}
        .svc-num{position:absolute;top:6px;right:10px;font-size:2rem;font-weight:900;opacity:.04;line-height:1}
        .svc-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:.8rem;margin-bottom:8px;border:2px solid var(--border)}
        .svc h3{font-weight:800;font-size:.875rem;margin-bottom:3px;letter-spacing:-.01em}
        .svc p{font-size:.75rem;color:var(--text2);line-height:1.5;font-weight:600}
        .svc ul{font-size:.75rem;color:var(--text2);margin-top:4px;padding-left:1rem;font-weight:600}
        .svc-cta{display:inline-flex;align-items:center;gap:4px;margin-top:8px;font-size:.6875rem;font-weight:700;color:var(--pink-text);transition:gap .15s}
        .svc:hover .svc-cta{gap:8px}

        .app-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:20px}
        .app{background:var(--card);border:var(--bw) solid var(--border);border-radius:var(--radius);padding:16px;transition:all .15s;box-shadow:3px 3px 0 var(--shadow);display:flex;flex-direction:column}
        .app:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--shadow)}
        .app-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
        .app-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:.85rem;flex-shrink:0;border:2px solid var(--border)}
        .app-name{font-weight:800;font-size:.875rem;letter-spacing:-.01em}
        .app-ver{font-size:.5rem;padding:1px 5px;border-radius:4px;font-weight:800;margin-left:4px;vertical-align:middle;border:1.5px solid var(--border)}
        .app-sub{font-size:.625rem;color:var(--text3);margin-top:1px;font-weight:600}
        .app-desc{font-size:.75rem;color:var(--text2);line-height:1.5;margin-bottom:8px;font-weight:600;flex:1}
        .app-feats{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:10px}
        .app-f{font-size:.625rem;padding:2px 6px;border-radius:4px;background:var(--bg2);color:var(--text2);font-weight:700;border:1.5px solid var(--border2)}
        .app-dl{display:flex;align-items:center;justify-content:center;gap:4px;padding:7px;border-radius:8px;font-size:.75rem;font-weight:800;cursor:pointer;border:var(--bw) solid var(--border);transition:all .15s;width:100%;text-decoration:none;text-align:center;box-shadow:2px 2px 0 var(--shadow);margin-top:auto}
        .app-dl:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--shadow)}
        .app-dl:active{transform:translate(1px,1px);box-shadow:0 0 0 var(--shadow)}

        .tabs{display:inline-flex;gap:3px;padding:3px;border-radius:var(--radius-sm);border:var(--bw) solid var(--border);background:var(--card);box-shadow:2px 2px 0 var(--shadow);margin-bottom:12px}
        .tab{padding:5px 12px;border-radius:7px;font-size:.6875rem;font-weight:700;cursor:pointer;color:var(--text3);background:none;border:2px solid transparent;transition:all .15s}
        .tab:hover{color:var(--text2);border-color:var(--bg3)}
        .tab.active{background:var(--pink);color:#1A1A1A;border-color:var(--border)}

        .g-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
        .g-card{background:var(--card);border:var(--bw) solid var(--border);border-radius:var(--radius);overflow:hidden;transition:all .15s;cursor:pointer;text-decoration:none;color:inherit;display:flex;flex-direction:column;box-shadow:3px 3px 0 var(--shadow)}
        .g-card:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--shadow)}
        .g-card:active{transform:translate(1px,1px);box-shadow:0 0 0 var(--shadow)}
        .g-top{height:70px;display:flex;align-items:center;justify-content:center;position:relative;border-bottom:2px solid var(--border)}
        .g-top i{font-size:1.5rem;transition:all .2s}
        .g-card:hover .g-top i{transform:scale(1.15) rotate(-5deg)}
        .g-badge{position:absolute;top:5px;left:5px;padding:1px 6px;border-radius:4px;font-size:.5rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;border:1.5px solid var(--border)}
        .gb-new{background:var(--green-bg);color:var(--green)}.gb-hot{background:var(--orange-bg);color:var(--orange)}.gb-beta{background:var(--yellow-bg);color:#B8860B}
        .g-body{padding:8px 10px;flex:1;display:flex;flex-direction:column}
        .g-name{font-weight:800;font-size:.75rem;margin-bottom:1px;letter-spacing:-.01em}
        .g-desc{font-size:.625rem;color:var(--text2);line-height:1.4;margin-bottom:4px;flex:1;font-weight:600}
        .g-tags{display:flex;gap:2px;flex-wrap:wrap;margin-bottom:6px}
        .g-tag{font-size:.5rem;padding:1px 5px;border-radius:3px;background:var(--bg2);color:var(--text3);font-weight:700;border:1px solid var(--border2)}
        .g-play{display:flex;align-items:center;justify-content:center;gap:3px;padding:5px;border-radius:7px;background:var(--pink);color:#1A1A1A;font-size:.625rem;font-weight:800;cursor:pointer;border:2px solid var(--border);transition:all .15s;width:100%}
        .g-play:hover{transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--shadow)}

        .banner-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
        .banner{background:var(--card);border:var(--bw) solid var(--border);border-radius:var(--radius);padding:10px 14px;display:flex;align-items:center;gap:10px;cursor:pointer;transition:all .15s;text-decoration:none;color:inherit;box-shadow:3px 3px 0 var(--shadow)}
        .banner:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--shadow)}
        .banner-icon{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:.8rem;flex-shrink:0;border:2px solid var(--border)}
        .banner-title{font-weight:800;font-size:.75rem;margin-bottom:1px}.banner-desc{font-size:.625rem;color:var(--text3);font-weight:600}

        #page-about{padding:24px}
        .about-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:24px}
        .about-main h2{font-size:1.25rem;font-weight:900;margin-bottom:1rem;letter-spacing:-.02em}
        .about-text{color:var(--text2);font-size:.9375rem;line-height:1.8;margin-bottom:1.5rem;font-weight:600}
        .about-values{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:1.5rem}
        .val{background:var(--card);border:var(--bw) solid var(--border);border-radius:var(--radius-sm);padding:12px;cursor:pointer;transition:all .15s;box-shadow:2px 2px 0 var(--shadow)}
        .val:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--shadow)}
        .val i{font-size:.9rem;margin-bottom:4px;display:block}.val h4{font-weight:800;font-size:.75rem;margin-bottom:1px}.val p{font-size:.625rem;color:var(--text3);font-weight:600}
        .faq-list{display:flex;flex-direction:column;gap:10px}
        .faq-row{background:var(--card);border:var(--bw) solid var(--border);border-radius:var(--radius-sm);overflow:hidden;box-shadow:2px 2px 0 var(--shadow)}
        .faq-q{padding:12px 16px;font-size:.8125rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:space-between;border:none;background:none;width:100%;text-align:left;color:inherit;transition:background .15s}
        .faq-q:hover{background:var(--bg2)}
        .faq-q i{color:var(--text3);font-size:.5625rem;transition:transform .2s}
        .faq-q.open i{transform:rotate(180deg)}
        .faq-a{padding:0 12px;font-size:.75rem;color:var(--text2);line-height:1.5;font-weight:600;max-height:0;overflow:hidden;opacity:0;transform:translateY(-8px);transition:max-height 0.35s cubic-bezier(0.4,0,0.2,1),opacity 0.3s ease,transform 0.3s ease,padding 0.3s ease}
        .faq-a.open{max-height:200px;opacity:1;transform:translateY(0);padding:0 12px 12px}
        .about-side{display:flex;flex-direction:column;gap:8px}
        .sup{background:var(--card);border:var(--bw) solid var(--border);border-radius:var(--radius);padding:14px;cursor:pointer;transition:all .15s;box-shadow:3px 3px 0 var(--shadow)}
        .sup:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--shadow)}
        .sup i{font-size:.9rem;margin-bottom:4px;display:block}.sup h3{font-weight:800;font-size:.8125rem;margin-bottom:1px}.sup p{font-size:.6875rem;color:var(--text3);line-height:1.4;font-weight:600}
        .sup-cta{display:inline-flex;align-items:center;gap:4px;margin-top:6px;font-size:.6875rem;font-weight:700;color:var(--pink-text)}

        /* RO云盘样式 */
        #page-cloud{padding:20px}
        .cloud-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:12px}
        .cloud-title{display:flex;align-items:center;gap:10px;font-size:1.25rem;font-weight:900;letter-spacing:-.02em}
        .cloud-badge{padding:2px 8px;border-radius:6px;font-size:.5625rem;font-weight:800;background:var(--blue);color:#fff;border:1.5px solid var(--border)}
        .cloud-stats{display:flex;gap:20px}
        .cloud-stat{text-align:center}
        .cloud-stat-value{display:block;font-size:1.1rem;font-weight:800;color:var(--text)}
        .cloud-stat-label{display:block;font-size:.625rem;color:var(--text3);font-weight:600;margin-top:2px}
        .cloud-storage-bar{height:8px;background:var(--bg3);border-radius:4px;overflow:hidden;margin-bottom:6px;border:var(--bw) solid var(--border)}
        .cloud-storage-fill{height:100%;background:linear-gradient(90deg,var(--blue),var(--purple));border-radius:3px;transition:width .3s ease}
        .cloud-storage-text{font-size:.6875rem;color:var(--text3);font-weight:600;margin-bottom:16px}
        .cloud-actions{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap}
        .cloud-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--radius-sm);font-size:.8125rem;font-weight:700;cursor:pointer;transition:all .15s;border:var(--bw) solid var(--border);background:var(--card);color:var(--text);box-shadow:3px 3px 0 var(--shadow)}
        .cloud-btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--shadow)}
        .cloud-btn:active{transform:translate(1px,1px);box-shadow:0 0 0 var(--shadow)}
        .cloud-btn.primary{background:var(--blue);color:#fff}
        .cloud-breadcrumb{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:.75rem;font-weight:600;color:var(--text2);flex-wrap:wrap}
        .cloud-bc-item{cursor:pointer;padding:4px 8px;border-radius:var(--radius-sm);transition:all .15s}
        .cloud-bc-item:hover{background:var(--bg2);color:var(--text)}
        .cloud-bc-item.active{color:var(--blue);font-weight:700}
        .cloud-bc-sep{color:var(--text3)}
        .cloud-file-list{background:var(--card);border:var(--bw) solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:3px 3px 0 var(--shadow);min-height:300px}
        .cloud-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}
        .cloud-file-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--bg3);cursor:pointer;transition:all .15s}
        .cloud-file-item:hover{background:var(--bg2)}
        .cloud-file-item:last-child{border-bottom:none}
        .cloud-file-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1rem;border:2px solid var(--border);flex-shrink:0}
        .cloud-file-icon.folder{background:var(--yellow-bg);color:var(--orange)}
        .cloud-file-icon.image{background:var(--pink-bg);color:var(--pink-text)}
        .cloud-file-icon.video{background:var(--red-bg);color:var(--red)}
        .cloud-file-icon.audio{background:var(--purple-bg);color:var(--purple)}
        .cloud-file-icon.document{background:var(--blue-bg);color:var(--blue)}
        .cloud-file-icon.other{background:var(--green-bg);color:var(--green)}
        .cloud-file-info{flex:1;min-width:0}
        .cloud-file-name{font-weight:700;font-size:.875rem;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        .cloud-file-meta{font-size:.625rem;color:var(--text3);font-weight:600}
        .cloud-file-actions{display:flex;gap:6px;opacity:0;transition:opacity .15s}
        .cloud-file-item:hover .cloud-file-actions{opacity:1}
        .cloud-file-btn{width:28px;height:28px;border-radius:var(--radius-sm);border:var(--bw) solid var(--border);background:var(--card);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;font-size:.75rem}
        .cloud-file-btn:hover{background:var(--bg2);transform:scale(1.1)}
        .cloud-file-btn.delete:hover{background:var(--red-bg);color:var(--red)}
        
        /* 云盘右键菜单 */
        .cloud-context-menu{position:fixed;background:var(--card);border:var(--bw) solid var(--border);border-radius:var(--radius-sm);box-shadow:4px 4px 0 var(--shadow);z-index:1000;min-width:140px;padding:6px;animation:contextMenuIn .15s ease}
        @keyframes contextMenuIn{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}
        .cloud-context-item{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--radius-sm);font-size:.8125rem;font-weight:600;color:var(--text);cursor:pointer;transition:all .15s}
        .cloud-context-item:hover{background:var(--bg2)}
        .cloud-context-item.delete{color:var(--red)}
        .cloud-context-item.delete:hover{background:var(--red-bg)}
        .cloud-context-divider{height:1px;background:var(--bg3);margin:4px 0}
        
        /* 云盘弹窗 */
        /* .cloud-modal-overlay 公共样式已统一到上方基类 */
        .cloud-modal-overlay.open{opacity:1;visibility:visible}
        .cloud-modal{background:var(--card);border:var(--bw) solid var(--border);border-radius:var(--radius);box-shadow:6px 6px 0 var(--shadow);width:90%;max-width:400px;padding:24px;animation:modalDropIn .4s cubic-bezier(0.4, 0, 0.2, 1)}
        
        /* 云盘预览弹窗 */
        .cloud-preview-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.9);z-index:400;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
        .cloud-preview-overlay.open{opacity:1;visibility:visible}
        .cloud-preview-container{position:relative;max-width:90vw;max-height:90vh;display:flex;flex-direction:column;align-items:center}
        .cloud-preview-content{max-width:100%;max-height:80vh;display:flex;align-items:center;justify-content:center}
        .cloud-preview-content img{max-width:100%;max-height:80vh;object-fit:contain;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,0.5)}
        .cloud-preview-content video{max-width:100%;max-height:80vh;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,0.5)}
        .cloud-preview-close{position:absolute;top:-40px;right:0;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.2);border:none;color:#fff;font-size:1.2rem;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}
        .cloud-preview-close:hover{background:rgba(255,255,255,0.3);transform:scale(1.1)}
        .cloud-preview-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,0.2);border:none;color:#fff;font-size:1.2rem;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;z-index:10}
        .cloud-preview-nav:hover{background:rgba(255,255,255,0.3);transform:translateY(-50%) scale(1.1)}
        .cloud-preview-nav.prev{left:-60px}
        .cloud-preview-nav.next{right:-60px}
        .cloud-preview-nav:disabled{opacity:0.3;cursor:not-allowed}
        .cloud-preview-info{position:absolute;bottom:-50px;left:50%;transform:translateX(-50%);color:#fff;font-size:.875rem;text-align:center;white-space:nowrap}
        .cloud-preview-info .filename{font-weight:600;margin-bottom:4px}
        .cloud-preview-info .counter{font-size:.75rem;opacity:.8}
        @media (max-width:768px){
            .cloud-preview-nav.prev{left:10px}
            .cloud-preview-nav.next{right:10px}
            .cloud-preview-nav{width:36px;height:36px;font-size:1rem}
        }
        .cloud-modal-title{font-size:1.1rem;font-weight:800;margin-bottom:16px;display:flex;align-items:center;gap:8px}
        .cloud-modal-input{width:100%;padding:10px 14px;border:var(--bw) solid var(--border);border-radius:var(--radius-sm);font-size:.875rem;font-family:var(--font);margin-bottom:16px;outline:none;transition:all .15s}
        .cloud-modal-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-bg)}
        .cloud-modal-actions{display:flex;gap:10px;justify-content:flex-end}
        .cloud-modal-btn{padding:8px 16px;border-radius:var(--radius-sm);font-size:.8125rem;font-weight:700;cursor:pointer;transition:all .15s;border:var(--bw) solid var(--border);background:var(--card)}
        .cloud-modal-btn:hover{transform:translate(-1px,-1px);box-shadow:2px 2px 0 var(--shadow)}
        .cloud-modal-btn.primary{background:var(--blue);color:#fff;border-color:var(--blue)}
        .cloud-modal-btn.danger{background:var(--red);color:#fff;border-color:var(--red)}
        
        /* 云盘确认弹窗 */
        .cloud-modal-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding-bottom:12px;border-bottom:2px dashed var(--bg3)}
        .cloud-modal-header i{font-size:1.5rem}
        .cloud-modal-header span{font-size:1.1rem;font-weight:800;color:var(--text)}
        .cloud-modal-body{font-size:.9375rem;color:var(--text2);line-height:1.6;margin-bottom:20px;padding:8px 0}
        .cloud-modal-body strong{color:var(--text);font-weight:700}
        .cloud-modal-footer{display:flex;gap:10px;justify-content:flex-end}
        .cloud-modal-footer .cloud-modal-btn{min-width:80px}
        
        /* 云盘文件预览 */
        .cloud-preview-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.85);backdrop-filter:blur(8px);z-index:500;display:flex;align-items:center;justify-content:center;animation:fadeIn 0.2s ease}
        .cloud-preview-content{display:flex;flex-direction:column;align-items:center;gap:16px;padding:20px}
        .cloud-preview-close{position:absolute;top:20px;right:20px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,0.1);border:2px solid rgba(255,255,255,0.3);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;font-size:1.2rem}
        .cloud-preview-close:hover{background:rgba(255,255,255,0.2);transform:scale(1.1)}
        .cloud-preview-filename{color:#fff;font-size:1rem;font-weight:600;text-align:center;max-width:80vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        @keyframes fadeIn{from{opacity:0}to{opacity:1}}
        
        /* 云盘提示消息 */
        .cloud-toast{position:fixed;top:20px;left:50%;transform:translateX(-50%) translateY(-20px);background:var(--card);border:var(--bw) solid var(--border);border-radius:var(--radius-sm);padding:12px 20px;box-shadow:4px 4px 0 var(--shadow);z-index:400;font-size:.875rem;font-weight:600;display:flex;align-items:center;gap:8px;opacity:0;visibility:hidden;transition:all .3s ease}
        .cloud-toast.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
        .cloud-toast.success{border-color:var(--green);color:var(--green)}
        .cloud-toast.error{border-color:var(--red);color:var(--red)}
        .cloud-toast.info{border-color:var(--blue);color:var(--blue)}
        
        /* 云盘加载状态 */
        .cloud-loading{display:flex;align-items:center;justify-content:center;padding:40px;gap:10px;color:var(--text3);font-size:.875rem;font-weight:600}
        .cloud-loading i{animation:spin 1s linear infinite}
        @keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
        
        /* 上传进度条 */
        .cloud-upload-progress{position:fixed;top:0;left:0;right:0;z-index:500;background:var(--card);border-bottom:var(--bw) solid var(--border);padding:12px 20px;box-shadow:0 4px 0 var(--shadow);transform:translateY(-100%);transition:transform .3s ease}
        .cloud-upload-progress.show{transform:translateY(0)}
        .cloud-upload-progress-content{display:flex;align-items:center;gap:12px;max-width:600px;margin:0 auto}
        .cloud-upload-progress-icon{width:36px;height:36px;border-radius:var(--radius-sm);background:var(--blue-bg);display:flex;align-items:center;justify-content:center;color:var(--blue);font-size:1rem;flex-shrink:0}
        .cloud-upload-progress-info{flex:1;min-width:0}
        .cloud-upload-progress-title{font-weight:700;font-size:.875rem;margin-bottom:4px;display:flex;align-items:center;gap:8px}
        .cloud-upload-progress-bar{height:6px;background:var(--bg3);border-radius:3px;overflow:hidden}
        .cloud-upload-progress-fill{height:100%;background:var(--blue);border-radius:3px;transition:width .1s linear}
        .cloud-upload-progress-text{font-size:.75rem;color:var(--text3);font-weight:600;margin-top:2px}
        .cloud-upload-progress-close{width:28px;height:28px;border-radius:var(--radius-sm);border:var(--bw) solid var(--border);background:var(--card);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;flex-shrink:0}
        .cloud-upload-progress-close:hover{background:var(--red-bg);color:var(--red)}

        .footer{border-top:var(--bw) solid var(--border);padding:14px 20px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem;background:var(--bg2);margin-top:auto}
        .footer-brand{display:flex;align-items:center;gap:8px}
        .footer-mark{width:24px;height:24px;border-radius:7px;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--card)}
        .footer-mark img{width:100%;height:100%;object-fit:contain}
        .footer-name{font-weight:800;font-size:.75rem}.footer-tag{font-size:.5625rem;color:var(--text3);font-weight:600}
        .footer-links{display:flex;gap:5px}
        .footer-link{width:30px;height:30px;border-radius:7px;border:var(--bw) solid var(--border);background:var(--card);display:flex;align-items:center;justify-content:center;color:var(--text2);cursor:pointer;transition:all .15s;text-decoration:none;font-size:.7rem;box-shadow:2px 2px 0 var(--shadow)}
        .footer-link:hover{transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--shadow);color:var(--pink-text)}
        .footer-beian{width:100%;text-align:center;margin-top:.5rem;padding-top:.5rem;border-top:2px dashed var(--border2)}
        .footer-beian a{color:var(--text3);font-size:.5625rem;text-decoration:none;font-weight:600}

        .mobile-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.3);z-index:9}

        @media(max-width:1024px){.quick-grid{grid-template-columns:repeat(2,1fr)}.feat-grid{grid-template-columns:1fr 1fr}.feat.lg{grid-column:span 2;grid-row:span 1}.feat.wide{grid-column:span 1}.svc-grid{grid-template-columns:1fr}.about-grid{grid-template-columns:1fr}}
        @media(max-width:768px){
            .sidebar{position:fixed;left:0;top:0;transform:translateX(-100%);box-shadow:none}
            .sidebar.open{transform:translateX(0);box-shadow:8px 0 0 var(--shadow)}
            .mobile-overlay.open{display:block}
            .topbar-hamburger{display:flex}
            .main{margin-left:0}
            .quick-grid{grid-template-columns:1fr 1fr}
            .feat-grid{grid-template-columns:1fr}
            .feat.lg,.feat.wide{grid-column:span 1}
            .g-grid{grid-template-columns:1fr 1fr}
            .banner-row{grid-template-columns:1fr}
            .about-values{grid-template-columns:1fr}
        }
        @media(max-width:480px){.g-grid{grid-template-columns:1fr}.quick-grid{grid-template-columns:1fr}}

        /* ===== 组件规范：弹窗遮罩基类（Modal Overlay Base）2026-08-02 =====
         * 所有 *-overlay 共用此基类；差异只写 z-index / background / blur
         * 打开类统一 .open（旧弹窗 .active 兼容）
         * 规范见 SERVER-MAINTENANCE.md §13 前端组件规范 */
        .auth-overlay,.terms-overlay,.support-overlay,.list-overlay,.dl-disclaimer-overlay,.cloud-modal-overlay,.clock-settings-overlay,.pixel-tool-overlay{
            position:fixed;inset:0;
            background:rgba(45,45,45,.5);
            backdrop-filter:blur(4px);
            display:flex;align-items:center;justify-content:center;
            opacity:0;visibility:hidden;
            transition:opacity .2s,visibility .2s;
        }
        .auth-overlay{background:rgba(45,45,45,.4);z-index:200}
        .terms-overlay,.support-overlay,.list-overlay{background:rgba(45,45,45,.5);z-index:300}
        .cloud-modal-overlay{background:rgba(45,45,45,.4);z-index:300}
        .dl-disclaimer-overlay{background:rgba(45,45,45,.55);backdrop-filter:blur(6px);z-index:400}
        .clock-settings-overlay{background:rgba(0,0,0,.5);z-index:1000;transition:all .3s ease}
        .pixel-tool-overlay{background:rgba(45,45,45,.75);backdrop-filter:blur(8px);z-index:9999;padding:24px;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1)}
        .auth-overlay.open{opacity:1;visibility:visible}

        /* ===== 邮件风格弹窗装饰（黄黑顶线 + 四角铆钉）2026-08-02 =====
         * 参考站内邮件弹窗（css/roach-ui/mail/index.css）+ 组件库 ui-components.html §04
         * 纯 CSS 装饰，不触碰 HTML/JS；mail 系统保留原样 */
        .terms-modal,.dl-disclaimer-modal,.support-modal,.list-modal,.auth-modal,.cloud-modal{position:relative;overflow:hidden}
        .terms-modal::before,.dl-disclaimer-modal::before,.support-modal::before,.list-modal::before,.auth-modal::before,.cloud-modal::before{
            content:'';position:absolute;top:0;left:0;right:0;height:8px;
            background:repeating-linear-gradient(-45deg,#1A1A1A 0 8px,#FFC800 8px 16px);
            border-bottom:2px solid #1A1A1A;
            border-radius:inherit;
            z-index:2;pointer-events:none;
        }
        .terms-modal::after,.dl-disclaimer-modal::after,.support-modal::after,.list-modal::after,.auth-modal::after,.cloud-modal::after{
            content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
            background:
                radial-gradient(circle at 14px 18px,#D9E2EA 0 4px,var(--border) 4.5px 6px,transparent 6.5px),
                radial-gradient(circle at calc(100% - 14px) 18px,#D9E2EA 0 4px,var(--border) 4.5px 6px,transparent 6.5px),
                radial-gradient(circle at 14px calc(100% - 14px),#D9E2EA 0 4px,var(--border) 4.5px 6px,transparent 6.5px),
                radial-gradient(circle at calc(100% - 14px) calc(100% - 14px),#D9E2EA 0 4px,var(--border) 4.5px 6px,transparent 6.5px);
        }
        /* 头部统一米色 + 关闭按钮统一硬阴影 */
        .terms-head,.support-head,.list-head,.cloud-modal-header{background:var(--card)}
        .terms-close,.support-close,.list-close,.auth-close{box-shadow:2px 2px 0 var(--border)}
        /* support/auth 关闭按钮绝对定位于右上角，右上角不放铆钉（被按钮占据） */
        .support-modal::after,.auth-modal::after{
            background:
                radial-gradient(circle at 14px 18px,#D9E2EA 0 4px,var(--border) 4.5px 6px,transparent 6.5px),
                radial-gradient(circle at 14px calc(100% - 14px),#D9E2EA 0 4px,var(--border) 4.5px 6px,transparent 6.5px),
                radial-gradient(circle at calc(100% - 14px) calc(100% - 14px),#D9E2EA 0 4px,var(--border) 4.5px 6px,transparent 6.5px);
        }
        /* 法律条款弹窗样式 */
        /* .terms-overlay 公共样式已统一到上方基类 */
        .terms-overlay.open{opacity:1;visibility:visible}
        .terms-modal{background:var(--bg);border:var(--bw) solid var(--border);border-radius:var(--radius-lg);width:800px;max-width:92vw;max-height:85vh;box-shadow:10px 10px 0 var(--shadow);position:relative;animation:modalDropIn .4s cubic-bezier(0.4, 0, 0.2, 1);transform-origin:top center;display:flex;flex-direction:column;overflow:hidden}
        .terms-head{padding:24px;border-bottom:2px dashed var(--text2);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
        .terms-head h2{font-size:1.25rem;font-weight:800;color:var(--text)}
        .terms-close{width:36px;height:36px;border-radius:var(--radius-sm);border:var(--bw) solid var(--border);background:var(--bg2);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1rem;color:var(--text);transition:all .15s}
        .terms-close:hover{background:var(--pink);color:#1A1A1A}
        .terms-body{padding:24px;overflow-y:auto;flex:1}
        .terms-section{margin-bottom:24px}
        .terms-section:last-child{margin-bottom:0}
        .terms-section h3{font-size:1rem;font-weight:800;color:var(--pink-text);margin-bottom:12px;display:flex;align-items:center;gap:8px}
        .terms-section p{font-size:.875rem;line-height:1.7;color:var(--text);margin-bottom:8px}
        .terms-section p strong{font-weight:700}
        .terms-list{margin:8px 0 8px 20px}
        .terms-list li{font-size:.875rem;line-height:1.7;color:var(--text);margin-bottom:4px;list-style-type:disc}
        .terms-footer{padding:16px 24px;border-top:2px dashed var(--text2);display:flex;justify-content:center}
        @media (max-width:768px){.terms-modal{width:95vw;max-height:90vh}.terms-head{padding:16px}.terms-body{padding:16px}}
        /* 下载免责声明弹窗 */
        /* .dl-disclaimer-overlay 公共样式已统一到上方基类 */
        .dl-disclaimer-overlay.open{opacity:1;visibility:visible}
        .dl-disclaimer-modal{background:var(--bg);border:var(--bw) solid var(--border);border-radius:var(--radius-lg);width:650px;max-width:93vw;max-height:88vh;box-shadow:10px 10px 0 var(--shadow);position:relative;animation:modalDropIn .4s cubic-bezier(0.4, 0, 0.2, 1);transform-origin:top center;display:flex;flex-direction:column;overflow:hidden}
        .dl-disclaimer-head{background:linear-gradient(135deg,var(--red),var(--red-bg));padding:20px 24px;border-bottom:var(--bw) solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:space-between}
        .dl-disclaimer-head h2{font-size:1.1rem;font-weight:800;color:#fff;display:flex;align-items:center;gap:10px}
        .dl-disclaimer-close{width:34px;height:34px;border-radius:50%;border:2px solid rgba(255,255,255,0.5);background:rgba(255,255,255,0.15);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.9rem;color:#fff;transition:all .15s}
        .dl-disclaimer-close:hover{background:rgba(255,255,255,0.3);border-color:#fff}
        .dl-disclaimer-body{padding:20px 24px;overflow-y:auto;flex:1}
        .dl-disclaimer-body .dl-warning-banner{background:var(--red-bg);border:var(--bw) solid var(--red);border-radius:var(--radius-sm);padding:12px 16px;margin-bottom:20px;display:flex;align-items:flex-start;gap:12px}
        .dl-disclaimer-body .dl-warning-banner i{font-size:1.25rem;color:var(--red);flex-shrink:0;margin-top:2px}
        .dl-disclaimer-body .dl-warning-banner span{font-size:.8125rem;font-weight:700;color:var(--red);line-height:1.5}
        .dl-disclaimer-section{margin-bottom:18px}
        .dl-disclaimer-section:last-child{margin-bottom:0}
        .dl-disclaimer-section h3{font-size:.9375rem;font-weight:800;color:var(--text);margin-bottom:8px;display:flex;align-items:center;gap:6px}
        .dl-disclaimer-section p,.dl-disclaimer-section li{font-size:.8125rem;line-height:1.7;color:var(--text2);margin-bottom:4px}
        .dl-disclaimer-section ul{margin:4px 0 4px 16px}
        .dl-disclaimer-section ul li{list-style-type:disc}
        .dl-disclaimer-section .dl-important{background:var(--yellow-bg);border-left:3px solid var(--orange);padding:8px 12px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:.8125rem;line-height:1.6;color:var(--text);margin-top:8px}
        .dl-disclaimer-footer{padding:16px 24px;border-top:var(--bw) solid var(--border);display:flex;gap:12px;justify-content:flex-end;flex-shrink:0;background:var(--bg2)}
        .dl-disclaimer-footer button{padding:10px 24px;border-radius:var(--radius-sm);font-size:.875rem;font-weight:700;cursor:pointer;transition:all .15s;border:var(--bw) solid var(--border)}
        .dl-disclaimer-btn-cancel{background:var(--card);color:var(--text)}
        .dl-disclaimer-btn-cancel:hover{transform:translate(-1px,-1px);box-shadow:2px 2px 0 var(--shadow)}
        .dl-disclaimer-btn-agree{background:var(--green);color:#fff;border-color:var(--green);box-shadow:2px 2px 0 var(--shadow)}
        .dl-disclaimer-btn-agree:hover:not(:disabled){transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--shadow)}
        .dl-disclaimer-btn-agree:active:not(:disabled){transform:translate(1px,1px);box-shadow:0 0 0 var(--shadow)}
        .dl-disclaimer-btn-agree:disabled{opacity:0.45;cursor:not-allowed;transform:none;box-shadow:2px 2px 0 var(--shadow);background:var(--text3);border-color:var(--text3)}
        .dl-disclaimer-scroll-hint{text-align:center;padding:8px 0 0;font-size:.7rem;color:var(--orange);display:flex;align-items:center;justify-content:center;gap:4px}
        .dl-disclaimer-scroll-hint i{animation:bounceDown 1s ease-in-out infinite}
        @keyframes bounceDown{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
        @media (max-width:768px){.dl-disclaimer-modal{width:96vw;max-height:92vh}.dl-disclaimer-head{padding:16px}.dl-disclaimer-body{padding:16px}.dl-disclaimer-footer{padding:14px 16px;flex-direction:column}.dl-disclaimer-footer button{width:100%}}
        /* 支持弹窗样式 */
        /* .support-overlay 公共样式已统一到上方基类 */
        .support-overlay.open{opacity:1;visibility:visible}
        .support-modal{background:var(--bg);border:var(--bw) solid var(--border);border-radius:var(--radius-lg);width:360px;max-width:92vw;box-shadow:10px 10px 0 var(--shadow);position:relative;animation:modalDropIn .4s cubic-bezier(0.4, 0, 0.2, 1);transform-origin:top center}
        .support-close{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:var(--radius-sm);border:var(--bw) solid var(--border);background:var(--bg2);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.875rem;color:var(--text);transition:all .15s;z-index:10}
        .support-close:hover{background:var(--pink);color:#1A1A1A}
        .support-head{padding:24px 24px 16px;text-align:center;border-bottom:2px dashed var(--text2)}
        .support-icon{width:56px;height:56px;border-radius:50%;background:var(--pink-bg);border:var(--bw) solid var(--pink);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:1.5rem;color:var(--pink-text)}
        .support-head h3{font-size:1.125rem;font-weight:800;color:var(--text)}
        .support-body{padding:20px 24px 24px;text-align:center}
        .support-body>p{font-size:.875rem;color:var(--text2);line-height:1.6;margin-bottom:16px}
        .support-qr{width:160px;height:160px;margin:0 auto 12px;border:var(--bw) solid var(--border);border-radius:var(--radius-sm);overflow:hidden;background:var(--card);display:none;align-items:center;justify-content:center}
        .support-qr.show{display:flex}
        .support-qr img{width:100%;height:100%;object-fit:contain}
        .support-qr-loading{width:56px;height:56px;color:var(--text3);animation:supportGearSpin 1.6s linear infinite}
        @keyframes supportGearSpin{to{transform:rotate(360deg)}}
        .qr-fallback{display:none;flex-direction:column;align-items:center;gap:8px;color:var(--text2)}
        .qr-fallback i{font-size:3rem}
        .qr-fallback span{font-size:.875rem;font-weight:700}
        .qr-hint{font-size:.75rem;color:var(--text3);margin-bottom:16px;display:none}
        .qr-hint.show{display:block}
        .support-open{margin-bottom:16px;display:none}
        .support-open-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;font-weight:800;font-size:.85rem;color:#fff;background:var(--border);border:var(--bw) solid var(--border);border-radius:var(--radius-sm);box-shadow:3px 3px 0 var(--shadow);text-decoration:none;transition:transform .15s,box-shadow .15s}
        .support-open-btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--border)}
        .support-open-btn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--border)}
        .support-mail{margin-bottom:16px;display:none}
        .support-mail-box{width:100%;padding:12px 14px;margin-bottom:12px;background:var(--bg2);border:var(--bw) solid var(--border);border-radius:var(--radius-sm);font-size:.9rem;font-weight:800;color:var(--text);box-shadow:2px 2px 0 var(--shadow);box-sizing:border-box}
        .support-mail-actions{display:flex;gap:10px;justify-content:center}
        .support-mail-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;font-weight:800;font-size:.82rem;color:var(--text);background:var(--card);border:var(--bw) solid var(--border);border-radius:var(--radius-sm);box-shadow:3px 3px 0 var(--shadow);text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .15s;font-family:inherit}
        .support-mail-btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--border)}
        .support-mail-btn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--border)}
        .support-mail-ok{display:none;margin-top:12px;font-size:.78rem;font-weight:800;color:var(--green-text)}
        .support-mail-ok.show{display:block;animation:modalDropIn .3s}
        .support-terms{font-size:.75rem;margin-top:12px}
        .support-terms a{color:var(--pink-text);text-decoration:none;display:flex;align-items:center;justify-content:center;gap:6px}
        .support-terms a:hover{text-decoration:underline}
        /* 名单弹窗样式 */
        /* .list-overlay 公共样式已统一到上方基类 */
        .list-overlay.open{opacity:1;visibility:visible}
        .list-modal{background:var(--bg);border:var(--bw) solid var(--border);border-radius:var(--radius-lg);width:480px;max-width:92vw;max-height:80vh;box-shadow:10px 10px 0 var(--shadow);position:relative;animation:modalDropIn .4s cubic-bezier(0.4, 0, 0.2, 1);transform-origin:top center;display:flex;flex-direction:column}
        .list-head{padding:20px 24px;border-bottom:2px dashed var(--text2);display:flex;align-items:center;justify-content:space-between}
        .list-head h3{font-size:1.125rem;font-weight:800;color:var(--text);display:flex;align-items:center;gap:10px}
        .list-close{width:36px;height:36px;border-radius:var(--radius-sm);border:var(--bw) solid var(--border);background:var(--bg2);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1rem;color:var(--text);transition:all .15s}
        .list-close:hover{background:var(--pink);color:#1A1A1A}
        .list-body{padding:16px 24px 24px;overflow-y:auto;flex:1}
        .list-loading{display:flex;align-items:center;justify-content:center;gap:12px;padding:40px;color:var(--text2);font-size:.875rem}
        .list-loading i{font-size:1.25rem}
        .list-item{display:flex;align-items:center;gap:12px;padding:12px;border:var(--bw) solid var(--border);border-radius:var(--radius-sm);margin-bottom:10px;background:var(--card);box-shadow:2px 2px 0 var(--shadow)}
        .list-item:last-child{margin-bottom:0}
        .list-avatar{width:40px;height:40px;border-radius:50%;background:var(--bg2);display:flex;align-items:center;justify-content:center;font-size:1rem;color:var(--text);border:var(--bw) solid var(--border)}
        .list-info{flex:1}
        .list-name{font-weight:700;font-size:.875rem;color:var(--text);margin-bottom:2px}
        .list-desc{font-size:.75rem;color:var(--text2)}
        .list-amount{font-size:.875rem;font-weight:800;color:var(--green)}
        .btn-primary{background:var(--pink);color:#1A1A1A;border:var(--bw) solid var(--border);border-radius:var(--radius-sm);padding:10px 24px;font-size:.875rem;font-weight:700;cursor:pointer;transition:all .15s;box-shadow:3px 3px 0 var(--shadow)}
        .btn-primary:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--shadow)}

        /* 邮件系统弹窗样式 */
        .mail-overlay{position:fixed;inset:0;background:rgba(45,45,45,0.5);backdrop-filter:blur(4px);z-index:300;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
        .mail-overlay.open{opacity:1;visibility:visible}
        .mail-modal{background:var(--bg);border:var(--bw) solid var(--border);border-radius:var(--radius-lg);width:520px;max-width:92vw;max-height:80vh;box-shadow:10px 10px 0 var(--shadow);position:relative;animation:modalDropIn .4s cubic-bezier(0.4, 0, 0.2, 1);transform-origin:top center;display:flex;flex-direction:column;overflow:hidden}
        .mail-header{padding:20px 24px;border-bottom:2px dashed var(--text2);display:flex;align-items:center;justify-content:space-between;background:var(--pink-bg)}
        .mail-title{display:flex;align-items:center;gap:10px;font-size:1.125rem;font-weight:800;color:var(--text)}
        .mail-title i{color:var(--pink-text);font-size:1.25rem}
        .mail-count{background:var(--pink);color:#1A1A1A;font-size:.625rem;padding:2px 8px;border-radius:10px;border:var(--bw) solid var(--border);margin-left:4px}
        .mail-header-actions{display:flex;align-items:center;gap:8px}
        .mail-action-btn{padding:6px 12px;border-radius:var(--radius-sm);border:var(--bw) solid var(--border);background:var(--card);cursor:pointer;display:flex;align-items:center;gap:5px;font-size:.6875rem;font-weight:700;color:var(--text);transition:all .15s;box-shadow:2px 2px 0 var(--shadow)}
        .mail-action-btn:hover{background:var(--green);color:#fff;transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--shadow)}
        .mail-action-btn:active{transform:translate(1px,1px);box-shadow:0 0 0 var(--shadow)}
        .mail-close{width:36px;height:36px;border-radius:var(--radius-sm);border:var(--bw) solid var(--border);background:var(--card);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1rem;color:var(--text);transition:all .15s;box-shadow:2px 2px 0 var(--shadow)}
        .mail-close:hover{background:var(--pink);color:#1A1A1A;transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--shadow)}
        .mail-content{padding:4px 0;overflow-y:auto;flex:1;background:var(--bg2);scrollbar-width:none;-ms-overflow-style:none}
        .mail-content::-webkit-scrollbar{display:none}
        .mail-loading{display:flex;align-items:center;justify-content:center;gap:12px;padding:40px;color:var(--text2);font-size:.875rem}
        .mail-loading i{font-size:1.25rem;color:var(--pink-text)}
        .mail-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;color:var(--text2);text-align:center}
        .mail-empty i{font-size:3rem;margin-bottom:16px;color:var(--text3);opacity:.5}
        .mail-empty span{font-size:.9375rem;font-weight:600}
        .mail-item{padding:16px 20px;border-bottom:var(--bw) solid var(--border);background:var(--card);cursor:pointer;transition:all .15s;position:relative;margin:0 4px;border-radius:var(--radius-sm)}
        .mail-item:hover{background:var(--bg2);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.12);z-index:1}
        .mail-item:last-child{border-bottom:none}
        .mail-item.unread{background:linear-gradient(90deg, var(--pink-bg) 0%, var(--card) 20px)}
        .mail-item-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
        .mail-item-title{font-weight:800;font-size:.9375rem;color:var(--text);display:flex;align-items:center;gap:8px}
        .mail-item-title .unread-dot{width:8px;height:8px;background:var(--pink);border-radius:50%;border:2px solid var(--border)}
        .mail-reward-badge{display:inline-flex;align-items:center;gap:4px;margin-left:8px;padding:2px 8px;background:var(--orange);color:#fff;font-size:.625rem;font-weight:800;border-radius:6px;border:1.5px solid var(--border);animation:pulse 2s ease-in-out infinite}
        .mail-reward-badge.claimed{background:var(--text3);animation:none}
        .mail-item-time{font-size:.75rem;color:var(--text3);font-weight:600}
        .mail-item-content{color:var(--text2);font-size:.8125rem;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        .mail-detail{padding:24px;background:var(--card);min-height:100%}
        .mail-detail-back{display:inline-flex;align-items:center;gap:6px;margin-bottom:16px;padding:8px 14px;border:var(--bw) solid var(--border);border-radius:var(--radius-sm);background:var(--bg);cursor:pointer;transition:all .15s;font-size:.8125rem;font-weight:700;box-shadow:2px 2px 0 var(--shadow)}
        .mail-detail-back:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--shadow);background:var(--pink);color:#1A1A1A}
        .mail-detail-title{font-size:1.125rem;font-weight:800;color:var(--text);margin-bottom:8px;line-height:1.4}
        .mail-detail-time{font-size:.75rem;color:var(--text3);margin-bottom:16px;padding-bottom:12px;border-bottom:1px dashed var(--border2)}
        .mail-detail-content{font-size:.9375rem;line-height:1.8;color:var(--text);white-space:pre-wrap}
        .mail-detail-reward{margin:16px 0;padding:16px;background:var(--orange-bg);border:2px dashed var(--orange);border-radius:var(--radius-sm)}
        .mail-reward-box{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--card);border:var(--bw) solid var(--border);border-radius:var(--radius-sm);box-shadow:3px 3px 0 var(--shadow);font-weight:700;color:var(--text)}
        .mail-reward-box i{color:var(--orange);font-size:1.25rem}
        .mail-reward-box.claimed{opacity:.7;background:var(--bg2)}
        .mail-reward-box.claimed i{color:var(--text3)}
        .reward-status{margin-left:auto;padding:4px 10px;background:var(--orange);color:#fff;font-size:.625rem;font-weight:800;border-radius:6px;border:1.5px solid var(--border)}
        .reward-status.pending{background:var(--green);animation:pulse 1.5s ease-in-out infinite}

        .auth-modal{background:var(--bg);border:var(--bw) solid var(--border);border-radius:var(--radius-lg);width:400px;max-width:92vw;max-height:90vh;overflow:hidden;box-shadow:10px 10px 0 var(--shadow);position:relative;animation:modalDropIn .4s cubic-bezier(0.4, 0, 0.2, 1);transform-origin:top center;display:flex;flex-direction:column}
        .auth-modal-content{flex:1;overflow-y:auto;min-height:0}
        @keyframes modalDropIn{0%{opacity:0;transform:translateY(-40px) scaleY(0.85)}100%{opacity:1;transform:translateY(0) scaleY(1)}}
        @keyframes modalDropOut{0%{opacity:1;transform:translateY(0) scaleY(1)}100%{opacity:0;transform:translateY(-40px) scaleY(0.85)}}
        @keyframes slideInRight{0%{opacity:0;transform:translateX(30px)}100%{opacity:1;transform:translateX(0)}}
        @keyframes slideOutLeft{0%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(-30px)}}
        @keyframes slideDown{0%{opacity:0;transform:translateX(-50%) translateY(-20px)}100%{opacity:1;transform:translateX(-50%) translateY(0)}}
        .auth-close{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:8px;border:var(--bw) solid var(--border);background:var(--card);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.75rem;box-shadow:2px 2px 0 var(--shadow);transition:all .15s;z-index:2}
        .auth-close:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--shadow)}
        .auth-head{padding:28px 28px 0;text-align:center;position:relative}
        .auth-logo{width:56px;height:56px;border-radius:16px;border:3px solid var(--border);display:inline-flex;align-items:center;justify-content:center;box-shadow:4px 4px 0 var(--shadow);margin-bottom:12px;overflow:hidden;background:var(--card)}
        .auth-logo img{width:100%;height:100%;object-fit:contain}
        .auth-head h2{font-size:1.25rem;font-weight:900;letter-spacing:-.02em;margin-bottom:2px}
        .auth-head p{font-size:.8125rem;color:var(--text2);font-weight:600}
        .auth-body{padding:20px 28px 24px}
        .auth-field{margin-bottom:12px}
        .auth-field label{display:flex;align-items:center;gap:6px;font-size:.75rem;font-weight:700;color:var(--text2);margin-bottom:4px}
        .auth-field label i{font-size:.7rem;width:14px;text-align:center}
        .auth-input{width:100%;padding:10px 14px;border-radius:var(--radius-sm);border:var(--bw) solid var(--border);background:var(--card);font-family:var(--font);font-size:.875rem;font-weight:600;color:var(--text);transition:all .15s;outline:none;box-shadow:2px 2px 0 var(--shadow)}
        .auth-input:focus{border-color:var(--pink-text);box-shadow:2px 2px 0 var(--shadow),0 0 0 3px var(--pink-bg)}
        .auth-input::placeholder{color:var(--text3);font-weight:500}
        .auth-pw-wrap{position:relative}
        .auth-pw-wrap .auth-input{padding-right:42px}
        .auth-pw-toggle{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:7px;border:none;background:none;color:var(--text3);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.75rem;transition:color .15s}
        .auth-pw-toggle:hover{color:var(--pink-text)}
        .auth-code-row{display:flex;gap:6px}
        .auth-code-row .auth-input{flex:1}
        .auth-code-btn{padding:0 14px;border-radius:var(--radius-sm);border:var(--bw) solid var(--border);background:var(--blue);color:#fff;font-family:var(--font);font-size:.6875rem;font-weight:800;cursor:pointer;white-space:nowrap;box-shadow:2px 2px 0 var(--shadow);transition:all .15s}
        .auth-code-btn:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--shadow)}
        .auth-code-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:2px 2px 0 var(--shadow)}
        .auth-error{padding:8px 12px;border-radius:8px;background:var(--red-bg);border:2px solid var(--red);color:var(--red);font-size:.75rem;font-weight:700;margin-bottom:10px;display:none}
        .auth-error.show{display:block}
        .auth-submit{width:100%;padding:11px;border-radius:var(--radius-sm);border:var(--bw) solid var(--border);background:var(--pink);color:#1A1A1A;font-family:var(--font);font-size:.9375rem;font-weight:800;cursor:pointer;box-shadow:4px 4px 0 var(--shadow);transition:all .15s;display:flex;align-items:center;justify-content:center;gap:6px}
        .auth-submit:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--shadow)}
        .auth-submit:active{transform:translate(1px,1px);box-shadow:0 0 0 var(--shadow)}
        .auth-submit:disabled{opacity:.6;cursor:not-allowed;transform:none}
        .auth-foot{text-align:center;padding:0 28px 20px;font-size:.8125rem;font-weight:600;color:var(--text2)}
        .auth-foot button{background:none;border:none;color:var(--pink-text);font-weight:800;cursor:pointer;font-family:var(--font);font-size:.8125rem;text-decoration:underline;text-underline-offset:2px}
        .auth-foot .auth-forgot{display:block;margin-top:6px;font-size:.75rem}
        .auth-sep{display:flex;align-items:center;gap:10px;margin:14px 0;font-size:.6875rem;color:var(--text3);font-weight:700}
        .auth-sep::before,.auth-sep::after{content:'';flex:1;height:2px;background:var(--bg3);border-radius:1px}

        .sidebar-user{padding:12px;border-top:2px dashed var(--border2)}
        .sidebar-audio{padding:10px 12px;border-top:2px dashed var(--border2);display:flex;align-items:center;gap:10px}
        .audio-btn{width:32px;height:32px;border-radius:var(--radius-sm);border:var(--bw) solid var(--border);background:var(--card);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.875rem;color:var(--text);transition:all .15s;box-shadow:2px 2px 0 var(--shadow);flex-shrink:0}
        .audio-btn:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--shadow)}
        .audio-btn.muted{color:var(--text3)}
        .audio-slider-wrap{flex:1;display:flex;align-items:center;position:relative}
        .audio-slider{width:100%;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;padding:6px 0;margin:0;outline:none;position:relative;z-index:2}
        .audio-slider::-webkit-slider-runnable-track{width:100%;height:8px;background:transparent;border-radius:4px;border:var(--bw) solid var(--border)}
        .audio-slider::-moz-range-track{width:100%;height:8px;background:transparent;border-radius:4px;border:var(--bw) solid var(--border)}
        .audio-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;background:var(--pink);border:2px solid var(--border);border-radius:50%;cursor:pointer;box-shadow:2px 2px 0 var(--shadow);margin-top:-5px;position:relative;z-index:3}
        .audio-slider::-moz-range-thumb{width:16px;height:16px;background:var(--pink);border:2px solid var(--border);border-radius:50%;cursor:pointer;box-shadow:2px 2px 0 var(--shadow);position:relative;z-index:3}
        .audio-progress{position:absolute;left:0;top:50%;transform:translateY(-50%);height:8px;background:var(--pink);border-radius:4px 0 0 4px;pointer-events:none;z-index:1}
        .audio-track-bg{position:absolute;left:0;top:50%;transform:translateY(-50%);width:100%;height:8px;background:var(--bg2);border-radius:4px;border:var(--bw) solid var(--border);pointer-events:none;z-index:0}
        .su-card{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-sm);border:2px solid transparent;transition:all .15s;cursor:pointer}
        .su-card:hover{background:var(--bg2);border-color:var(--bg3)}
        .su-avatar{width:32px;height:32px;border-radius:9px;background:var(--bg3);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.7rem;color:var(--text3);flex-shrink:0;overflow:hidden}
        .su-avatar img{width:100%;height:100%;object-fit:cover}
        .su-avatar.logged{background:var(--pink);color:#1A1A1A}
        .su-info{flex:1;min-width:0}
        .su-name{font-weight:800;font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        .su-sub{font-size:.5625rem;color:var(--text3);font-weight:600}
        .su-dropdown{position:absolute;bottom:calc(100% + 4px);left:12px;right:12px;background:var(--card);border:var(--bw) solid var(--border);border-radius:var(--radius-sm);box-shadow:4px 4px 0 var(--shadow);overflow:hidden;z-index:20;opacity:0;visibility:hidden;transform:translateY(10px) scale(0.95);transform-origin:bottom center;transition:opacity 0.25s cubic-bezier(0.4,0,0.2,1),transform 0.25s cubic-bezier(0.4,0,0.2,1),visibility 0.25s}
        .su-dropdown.open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
        .su-dd-item{display:flex;align-items:center;gap:8px;padding:9px 12px;font-size:.75rem;font-weight:700;color:var(--text2);cursor:pointer;transition:all .12s;border:none;background:none;width:100%;text-align:left}
        .su-dd-item:hover{background:var(--bg2);color:var(--text)}
        .su-dd-item i{width:16px;text-align:center;font-size:.7rem}
        .su-dd-sep{height:2px;background:var(--bg3);margin:2px 0}
        .su-dd-item.danger{color:var(--red)}.su-dd-item.danger:hover{background:var(--red-bg)}
        
        /* 聊天室样式 */
        .chat-container-embed{display:grid;grid-template-columns:1fr 280px;gap:1.25rem;height:calc(100vh - 180px);min-height:500px}
        .chat-box{background:var(--card);border:var(--bw) solid var(--border);border-radius:var(--radius);box-shadow:4px 4px 0 var(--shadow);display:flex;flex-direction:column;overflow:hidden}
        .chat-header-embed{display:flex;align-items:center;justify-content:space-between;padding:.875rem 1.25rem;border-bottom:var(--bw) solid var(--border);background:var(--bg2)}
        .chat-status{display:flex;align-items:center;gap:.5rem}
        .status-dot{width:8px;height:8px;border-radius:50%;background:var(--text3);animation:pulse 2s infinite}
        .status-dot.connected{background:var(--green);animation:none}
        @keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
        .status-text{font-size:.75rem;font-weight:700;color:var(--text3)}
        .online-count-embed{font-size:.75rem;font-weight:700;color:var(--pink-text);background:var(--pink-bg);padding:.25rem .75rem;border-radius:20px;border:var(--bw) solid var(--border)}
        .chat-messages-embed{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.75rem;background:var(--bg)}
        .chat-empty{text-align:center;padding:3rem 1rem;color:var(--text3)}
        .chat-empty i{font-size:3rem;margin-bottom:1rem;opacity:.5}
        .chat-empty p{font-size:.875rem;font-weight:600}
        .chat-message{display:flex;gap:.75rem;align-items:flex-start;animation:fadeIn .3s ease}
        @keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
        .chat-message.me{flex-direction:row-reverse}
        .message-avatar{width:36px;height:36px;border-radius:50%;background:var(--bg3);border:var(--bw) solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.875rem;font-weight:700;color:var(--text);flex-shrink:0;overflow:hidden}
        .message-avatar img{width:100%;height:100%;object-fit:cover}
        .message-content{max-width:70%}
        .chat-message.me .message-content{align-items:flex-end}
        .message-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.25rem}
        .chat-message.me .message-header{flex-direction:row-reverse}
        .message-author{font-size:.75rem;font-weight:700;color:var(--text2)}
        .message-bio{font-size:.625rem;color:var(--pink-text);background:linear-gradient(135deg,var(--pink-bg),var(--card));padding:1px 6px;border-radius:10px;border:1px solid var(--pink);max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:default}
        .message-time{font-size:.625rem;color:var(--text3)}
        .message-text{background:var(--card);padding:.625rem .875rem;border-radius:var(--radius-sm);border:var(--bw) solid var(--border);font-size:.875rem;line-height:1.5;word-break:break-word;box-shadow:2px 2px 0 var(--shadow)}
        .chat-message.me .message-text{background:var(--pink);color:#1A1A1A;border-color:var(--pink-dark)}
        .chat-input-embed{display:flex;gap:.75rem;padding:1rem;border-top:var(--bw) solid var(--border);background:var(--card)}

        /* ==================== 时钟展示页面 ==================== */
        .clock-page-container {
            padding: 40px 20px;
            min-height: calc(100vh - 120px);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 40px;
        }

        /* 时钟头部 */
        .clock-header {
            width: 100%;
            display: flex;
            justify-content: flex-end;
            max-width: 700px;
        }

        .clock-settings-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 18px;
            background:var(--card);
            border: var(--bw) solid var(--border);
            border-radius: var(--radius);
            font-size: 0.875rem;
            font-weight: 700;
            color: var(--text);
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 3px 3px 0 var(--shadow);
        }

        .clock-settings-btn:hover {
            transform: translate(-2px, -2px);
            box-shadow: 5px 5px 0 var(--shadow);
        }

        .clock-settings-btn:active {
            transform: translate(0, 0);
            box-shadow: 1px 1px 0 var(--shadow);
        }

        .clock-settings-btn i {
            color:var(--pink-text);
        }

        .clock-settings-btn.hidden {
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
        }

        /* 时钟方案容器 */
        .clock-scheme {
            width: 100%;
            display: flex;
            justify-content: center;
            animation: schemeFadeIn 0.3s ease;
        }

        .clock-scheme.hidden {
            display: none;
        }

        @keyframes schemeFadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* ==================== 设备信息卡片 ==================== */
        .device-info-card {
            background:var(--card);
            border: var(--bw) solid var(--border);
            border-radius: var(--radius-lg);
            padding: 24px 28px;
            box-shadow: 6px 6px 0 var(--shadow);
            max-width: 500px;
            width: 100%;
        }

        .device-info-header {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 1rem;
            font-weight: 800;
            color: var(--text);
            margin-bottom: 20px;
            padding-bottom: 16px;
            border-bottom: 2px solid var(--bg2);
        }

        .device-info-header i {
            color:var(--pink-text);
            font-size: 1.125rem;
        }

        .device-info-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }

        .device-info-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 14px;
            background: var(--bg);
            border: 2px solid var(--bg2);
            border-radius: var(--radius);
            transition: all 0.2s ease;
        }

        .device-info-item:hover {
            border-color:var(--pink-text);
            box-shadow: 2px 2px 0 var(--shadow);
        }

        .device-info-icon {
            width: 40px;
            height: 40px;
            border-radius: var(--radius);
            background: var(--pink-bg);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .device-info-icon i {
            font-size: 1rem;
            color:var(--pink-text);
        }

        .device-info-body {
            flex: 1;
            min-width: 0;
        }

        .device-info-label {
            font-size: 0.6875rem;
            font-weight: 600;
            color: var(--text3);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 3px;
        }

        .device-info-value {
            font-size: 0.8125rem;
            font-weight: 700;
            color: var(--text);
            word-break: break-all;
            line-height: 1.3;
        }

        /* ==================== 方案2：像素风时钟 ==================== */
        .pixel-clock-container {
            background: #1a1a2e;
            border: var(--bw) solid var(--border);
            border-radius: var(--radius-lg);
            padding: 40px 50px;
            box-shadow: 8px 8px 0 var(--shadow);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 24px;
        }

        .pixel-clock-display {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .pixel-digit-group {
            display: flex;
            gap: 8px;
        }

        .pixel-digit {
            width: 60px;
            height: 100px;
            position: relative;
        }

        .pixel-grid {
            width: 100%;
            height: 100%;
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            grid-template-rows: repeat(7, 1fr);
            gap: 2px;
        }

        .pixel-cell {
            background: #2d2d44;
            border-radius: 1px;
            transition: background 0.15s ease;
        }

        .pixel-cell.active {
            background: var(--pink);
            box-shadow: 0 0 8px var(--pink);
        }

        .pixel-separator {
            display: flex;
            flex-direction: column;
            gap: 20px;
            padding: 0 4px;
        }

        .pixel-dot {
            width: 10px;
            height: 10px;
            background: var(--pink);
            border-radius: 2px;
            box-shadow: 0 0 8px var(--pink);
            animation: pixelBlink 1s ease-in-out infinite;
        }

        @keyframes pixelBlink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.3; }
        }

        .pixel-date {
            font-family: 'Courier New', monospace;
            font-size: 0.875rem;
            color:var(--pink-text);
            letter-spacing: 2px;
        }

        /* ==================== 方案5：极简线框时钟 ==================== */
        .minimal-clock-container {
            background: transparent;
            border: var(--bw) solid var(--border);
            border-radius: var(--radius-lg);
            padding: 60px 80px;
            box-shadow: 6px 6px 0 var(--shadow);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 30px;
            position: relative;
        }

        .minimal-time {
            display: flex;
            align-items: baseline;
            gap: 8px;
        }

        .minimal-digit {
            font-size: 5rem;
            font-weight: 200;
            color: var(--text);
            letter-spacing: -2px;
            font-variant-numeric: tabular-nums;
            position: relative;
            display: inline-block;
            min-width: 2ch;
            text-align: center;
        }

        .minimal-digit.changing {
            animation: digitChange 0.4s ease-out;
        }

        @keyframes digitChange {
            0% {
                transform: translateY(-10px);
                opacity: 0;
            }
            50% {
                transform: translateY(5px);
            }
            100% {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .minimal-colon {
            font-size: 3rem;
            font-weight: 300;
            color:var(--pink-text);
            animation: minimalBlink 2s ease-in-out infinite;
        }

        @keyframes minimalBlink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.4; }
        }

        .minimal-date {
            font-size: 0.875rem;
            font-weight: 500;
            color: var(--text2);
            letter-spacing: 3px;
            text-transform: uppercase;
        }

        .minimal-line {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            width: 40px;
            height: 3px;
            background: var(--pink);
            border-radius: 2px;
        }

        /* ==================== 圆环进度时钟 ==================== */
        .ring-clock-container {
            background:var(--card);
            border: var(--bw) solid var(--border);
            border-radius: var(--radius-lg);
            padding: 40px 50px;
            box-shadow: 6px 6px 0 var(--shadow);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 28px;
        }

        .ring-clock-face {
            position: relative;
            width: 220px;
            height: 220px;
        }

        .ring-svg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transform: rotate(-90deg);
        }

        .ring-track {
            fill: none;
            stroke: var(--bg2);
            stroke-width: 8;
        }

        .ring-fill {
            fill: none;
            stroke-width: 8;
            stroke-linecap: round;
            transition: stroke-dashoffset 0.5s ease;
        }

        .ring-fill-seconds {
            stroke: var(--green);
        }

        .ring-fill-minutes {
            stroke: var(--blue);
        }

        .ring-fill-hours {
            stroke: var(--pink);
        }

        .ring-center {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
        }

        .ring-time {
            font-size: 2.5rem;
            font-weight: 800;
            color: var(--text);
            letter-spacing: -1px;
            line-height: 1;
        }

        .ring-seconds-text {
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--green);
            margin-top: 4px;
        }

        .ring-clock-labels {
            display: flex;
            gap: 28px;
        }

        .ring-label {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 0.8125rem;
            font-weight: 700;
            color: var(--text2);
        }

        .ring-label-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
        }

        .ring-date {
            font-size: 0.9375rem;
            font-weight: 600;
            color: var(--text2);
        }

        /* 响应式 */
        @media (max-width: 480px) {
            .ring-clock-face {
                width: 180px;
                height: 180px;
            }
            .ring-time {
                font-size: 2rem;
            }
        }

        /* ==================== 蒸汽朋克时钟 ==================== */
        .steampunk-container {
            background: linear-gradient(180deg, #3d2e20 0%, #2a1f15 8%, #4a3828 25%, #1a1510 40%, #4a3828 60%, #2a1f15 100%);
            border: 8px solid #1a1510;
            border-radius: 20px;
            padding: 0;
            box-shadow: 
                8px 8px 0 #1a1510,
                inset 0 0 0 3px #5a3d20,
                inset 0 0 0 5px rgba(180,140,100,0.15),
                inset 0 0 100px rgba(0,0,0,0.6),
                0 0 50px rgba(0,0,0,0.5);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0;
            position: relative;
            overflow: hidden;
            max-width: 520px;
            width: 100%;
            min-height: 520px;
        }

        /* === 蒸汽粒子 === */
        .steam-particles {
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            pointer-events: none;
            z-index: 1;
        }
        .steam-particle {
            position: absolute;
            width: 12px; height: 12px;
            background: radial-gradient(circle, rgba(255,255,255,0.3), rgba(200,200,200,0.08));
            border-radius: 50%;
            animation: steamRise linear infinite;
            filter: blur(2px);
        }
        @keyframes steamRise {
            0% { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
            10% { opacity: 0.5; }
            40% { opacity: 0.25; }
            100% { transform: translateY(-300px) translateX(30px) scale(3); opacity: 0; }
        }

        /* === 镂空机械骨架 === */
        .steampunk-frame {
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            z-index: 0;
        }
        .frame-ring {
            border-radius: 50%;
            border: 3px solid rgba(180,140,100,0.12);
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
        }
        .frame-outer { width: 360px; height: 360px; border-color: rgba(180,140,100,0.08); border-style: dashed; }
        .frame-mid  { width: 280px; height: 280px; border-color: rgba(180,140,100,0.1); }
        .frame-spoke {
            position: absolute;
            top: 50%; left: 50%;
            width: 2px; height: 360px;
            background: linear-gradient(180deg, transparent, rgba(180,140,100,0.08) 15%, rgba(180,140,100,0.15) 50%, rgba(180,140,100,0.08) 85%, transparent);
            transform-origin: center center;
        }
        .frame-spoke.s1{transform:translate(-50%,-50%) rotate(0deg);}
        .frame-spoke.s2{transform:translate(-50%,-50%) rotate(30deg);}
        .frame-spoke.s3{transform:translate(-50%,-50%) rotate(60deg);}
        .frame-spoke.s4{transform:translate(-50%,-50%) rotate(90deg);}
        .frame-spoke.s5{transform:translate(-50%,-50%) rotate(120deg);}
        .frame-spoke.s6{transform:translate(-50%,-50%) rotate(150deg);}

        /* === 表盘外齿轮环 === */
        .steampunk-face-gear-ring {
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            width: 230px; height: 230px;
            border-radius: 50%;
            pointer-events: none;
            z-index: 1;
        }
        .face-gear-tooth {
            position: absolute;
            width: 4px;
            height: 10px;
            background: linear-gradient(180deg, #6b5040, #4a3828);
            border-radius: 2px;
            top: 50%;
            left: 50%;
            transform-origin: 0px -111px;
        }

        /* === 蒸汽阀门 === */
        .steampunk-valve {
            position: absolute;
            z-index: 4;
        }
        .valve-left  { top: 90px; left: 8px; }
        .valve-right { top: 90px; right: 8px; }
        .valve-body {
            width: 8px; height: 50px;
            background: linear-gradient(180deg, #C49A6C, #8B6914, #5a3d20);
            border-radius: 4px;
            border: 1.5px solid #3d2e20;
            margin: 0 auto;
        }
        .valve-wheel {
            width: 24px; height: 24px;
            border-radius: 50%;
            border: 3px solid #C49A6C;
            background: radial-gradient(circle, #8B6914, #5a3d20);
            margin: 0 auto;
            position: relative;
            box-shadow: 0 0 0 2px #2a1f15;
        }
        .valve-wheel span {
            position: absolute;
            top: 50%; left: 50%;
            width: 8px; height: 8px;
            background: #D4A574;
            border-radius: 50%;
            transform: translate(-50%, -50%);
        }

        /* === 主表盘 === */
        .steampunk-face {
            position: relative;
            z-index: 2;
            padding: 36px 0 12px;
        }
        .steampunk-face-rim {
            width: 200px; height: 200px;
            border-radius: 50%;
            background: linear-gradient(145deg, #5a4030, #3d2e20, #5a4030);
            border: 3px solid #2a1f15;
            box-shadow:
                0 0 0 4px #C49A6C,
                0 0 0 8px #5a3d20,
                0 0 0 12px #8B6914,
                0 0 0 15px #3d2e20,
                inset 0 0 20px rgba(0,0,0,0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        .steampunk-face-inner {
            width: 170px; height: 170px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--card), var(--bg2), var(--bg3));
            border: 2px solid #5a3d20;
            position: relative;
            box-shadow: inset 0 3px 15px rgba(0,0,0,0.12);
        }

        /* 铆钉 */
        .steampunk-rivets {
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            border-radius: 50%;
            pointer-events: none;
            z-index: 5;
        }
        .steampunk-rivet-dot {
            position: absolute;
            width: 5px; height: 5px;
            background: radial-gradient(circle, #D4A574, #8B6914);
            border-radius: 50%;
            box-shadow: 0 0 2px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.4);
        }

        /* 分钟刻度线 */
        .steampunk-minute-ticks {
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            border-radius: 50%;
            pointer-events: none;
            z-index: 1;
        }
        .steampunk-minute-tick {
            position: absolute;
            width: 2px;
            height: 8px;
            background: #5a3d20;
            border-radius: 1px;
            top: 8px;
            left: 50%;
            transform-origin: 50% 77px;
        }

        /* 指针增强 */
        .steampunk-center-hub {
            position: absolute;
            top: 50%; left: 50%;
            width: 14px; height: 14px;
            background: radial-gradient(circle at 40% 40%, #D4A574, #5a3d20);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            z-index: 10;
            box-shadow: 0 0 0 3px #C49A6C, 0 0 0 6px #3d2e20, 0 0 0 8px rgba(0,0,0,0.3);
        }
        .steampunk-hour-hand {
            position: absolute;
            bottom: 50%; left: 50%;
            width: 6px; height: 42px;
            background: linear-gradient(180deg, #2a1f15 70%, #D4A574 70%, #D4A574 75%, #2a1f15 75%);
            border-radius: 2px;
            transform-origin: bottom center;
            transform: translate(-50%, 0) rotate(0deg);
            z-index: 5;
            box-shadow: 3px 3px 0 rgba(0,0,0,0.3);
        }
        .steampunk-minute-hand {
            position: absolute;
            bottom: 50%; left: 50%;
            width: 5px; height: 58px;
            background: linear-gradient(180deg, #3d2e20 73%, #D4A574 73%, #D4A574 78%, #3d2e20 78%);
            border-radius: 2px;
            transform-origin: bottom center;
            transform: translate(-50%, 0) rotate(0deg);
            z-index: 6;
            box-shadow: 3px 3px 0 rgba(0,0,0,0.3);
        }
        .steampunk-second-hand {
            position: absolute;
            bottom: 50%; left: 50%;
            width: 2px; height: 68px;
            background: #FF6B9D;
            border-radius: 1px;
            transform-origin: bottom center;
            transform: translate(-50%, 0) rotate(0deg);
            z-index: 7;
            transition: transform 0.05s linear;
        }
        .hand-counterweight {
            position: absolute;
            top: 65%;
            left: 50%;
            width: 10px; height: 10px;
            background: #D4A574;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            border: 1px solid #5a3d20;
        }
        .steampunk-second-hand .hand-counterweight {
            width: 6px; height: 6px;
            background: #FF6B9D;
        }

        /* 刻度 */
        .steampunk-tick {
            position: absolute;
            font-size: 0.7rem;
            font-weight: 800;
            color: #5a3d20;
            z-index: 2;
            font-family: Georgia, serif;
        }
        .steampunk-tick span { display: block; }
        .tick-12 { top: 12px; left: 50%; transform: translateX(-50%); }
        .tick-3 { top: 50%; right: 14px; transform: translateY(-50%); }
        .tick-6 { bottom: 12px; left: 50%; transform: translateX(-50%); }
        .tick-9 { top: 50%; left: 14px; transform: translateY(-50%); }

        /* === 钟摆 === */
        .steampunk-pendulum {
            position: relative;
            z-index: 2;
            margin-top: 8px;
        }
        .steampunk-pendulum-rod {
            width: 3px; height: 70px;
            background: linear-gradient(180deg, #D4A574, #8B6914, #D4A574);
            border-radius: 2px;
            margin: 0 auto;
            position: relative;
            box-shadow: 1px 0 0 rgba(0,0,0,0.3);
        }
        .pendulum-hinge {
            position: absolute;
            top: -6px; left: 50%;
            width: 16px; height: 8px;
            background: linear-gradient(180deg, #D4A574, #5a3d20);
            border-radius: 4px;
            transform: translateX(-50%);
            border: 1px solid #3d2e20;
        }
        .steampunk-pendulum {
            transform-origin: top center;
            animation: pendulumSwing 2s ease-in-out infinite;
        }
        .steampunk-pendulum-bob {
            position: absolute;
            bottom: -24px; left: 50%;
            width: 40px; height: 40px;
            border-radius: 50%;
            background: radial-gradient(circle at 45% 40%, #D4A574, #8B6914, #5a3d20);
            border: 3px solid #C49A6C;
            transform: translateX(-50%);
            box-shadow: 3px 6px 0 rgba(0,0,0,0.3), inset 0 2px 6px rgba(255,255,255,0.2);
        }
        .steampunk-pendulum-bob-inner {
            position: absolute;
            top: 50%; left: 50%;
            width: 14px; height: 14px;
            background: radial-gradient(circle, #FF6B9D, #c0392b);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            border: 1.5px solid #3d2e20;
            box-shadow: 0 0 10px rgba(255,107,157,0.5);
        }
        .steampunk-pendulum-bolt {
            position: absolute;
            width: 5px; height: 5px;
            background: #D4A574;
            border-radius: 50%;
            border: 1px solid #5a3d20;
        }
        .steampunk-pendulum-bolt.b1 { top: 8px; left: 12px; }
        .steampunk-pendulum-bolt.b2 { top: 8px; right: 12px; }
        .steampunk-pendulum-bolt.b3 { bottom: 8px; left: 50%; transform: translateX(-50%); }
        @keyframes pendulumSwing {
            0%, 100% { transform: rotate(-6deg); }
            50% { transform: rotate(6deg); }
        }

        /* === 压力表 === */
        .steampunk-gauge {
            position: absolute;
            top: 45%;
            right: -16px;
            z-index: 3;
            width: 44px; height: 44px;
            border-radius: 50%;
            background: radial-gradient(circle, var(--card), var(--bg3));
            border: 3px solid #5a3d20;
            box-shadow: 2px 2px 0 rgba(0,0,0,0.3), 0 0 0 2px #C49A6C;
        }
        .gauge-face {
            width: 100%; height: 100%;
            border-radius: 50%;
            position: relative;
        }
        .gauge-needle {
            position: absolute;
            bottom: 50%; left: 50%;
            width: 2px; height: 14px;
            background: #c0392b;
            border-radius: 1px;
            transform-origin: bottom center;
            transform: translate(-50%, 0) rotate(-45deg);
            animation: gaugeSwing 2s ease-in-out infinite;
        }
        @keyframes gaugeSwing {
            0%, 100% { transform: translate(-50%, 0) rotate(-30deg); }
            50% { transform: translate(-50%, 0) rotate(30deg); }
        }
        .gauge-label {
            position: absolute;
            bottom: -18px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 0.5rem;
            font-weight: 700;
            color: #C49A6C;
            letter-spacing: 2px;
        }

        /* === 底座 === */
        .steampunk-base {
            position: relative;
            z-index: 2;
            padding: 4px 20px 0;
        }
        .steampunk-base-plate {
            width: 260px; height: 14px;
            background: linear-gradient(180deg, #6b5040, #4a3828, #3d2e20);
            border-radius: 0 0 6px 6px;
            border: 2px solid #2a1f15;
            position: relative;
            box-shadow: inset 0 2px 4px rgba(255,255,255,0.05);
        }
        .base-rivet {
            position: absolute;
            top: 3px;
            width: 7px; height: 7px;
            background: radial-gradient(circle at 40% 40%, #D4A574, #8B6914);
            border-radius: 50%;
            border: 1px solid #5a3d20;
        }
        .base-rivet.r1 { left: 20px; }
        .base-rivet.r2 { left: 50%; transform: translateX(-50%); }
        .base-rivet.r3 { right: 20px; }
        .steampunk-base-feet {
            display: flex;
            justify-content: space-between;
            padding: 0 30px;
            margin-top: 2px;
        }
        .steampunk-foot {
            width: 44px; height: 10px;
            background: linear-gradient(180deg, #8B6914, #5a3d20, #3d2e20);
            border-radius: 0 0 8px 8px;
            border: 1.5px solid #2a1f15;
            box-shadow: 0 3px 4px rgba(0,0,0,0.3);
        }

        /* === 链条 === */
        .steampunk-chain { display: none; }
        .chain-left { display: none; }
        .chain-right { display: none; }
        .chain-link { display: none; }

        /* 数字时间 */
        .steampunk-digital-time {
            position: relative;
            z-index: 2;
            font-size: 1.125rem;
            font-weight: 700;
            color: #C49A6C;
            font-family: 'Courier New', monospace;
            letter-spacing: 4px;
            padding: 8px 20px;
            background: rgba(0,0,0,0.3);
            border-radius: 6px;
            margin-top: 10px;
            border: 1.5px solid rgba(180,140,100,0.3);
            text-shadow: 0 0 8px rgba(196,154,108,0.4);
        }
        .steampunk-date {
            position: relative;
            z-index: 2;
            font-size: 0.75rem;
            font-weight: 600;
            color: rgba(180,140,100,0.6);
            padding-bottom: 20px;
            padding-top: 4px;
            letter-spacing: 1px;
        }
        @media (max-width: 480px) {
            .steampunk-face-rim { width: 160px; height: 160px; }
            .steampunk-face-inner { width: 136px; height: 136px; }
            .steampunk-hour-hand { height: 34px; }
            .steampunk-minute-hand { height: 46px; }
            .steampunk-second-hand { height: 54px; }
            .steampunk-base-plate { width: 200px; }
            .steampunk-gauge { right: -8px; width: 36px; height: 36px; display:none; }
            .valve-left { top: 70px; left: 4px; }
            .valve-right { top: 70px; right: 4px; }
        }

        /* ==================== 时钟设置弹窗 ==================== */
        /* .clock-settings-overlay 公共样式已统一到上方基类（z-index:1000 / 无blur / transition all） */

        .clock-settings-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .clock-settings-modal {
            background:var(--card);
            border: var(--bw) solid var(--border);
            border-radius: var(--radius-lg);
            box-shadow: 8px 8px 0 var(--shadow);
            width: 90%;
            max-width: 500px;
            max-height: 80vh;
            overflow: hidden;
            transform: scale(0.9) translateY(20px);
            transition: all 0.3s ease;
        }

        .clock-settings-overlay.active .clock-settings-modal {
            transform: scale(1) translateY(0);
        }

        .clock-settings-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px 24px;
            border-bottom: 2px solid var(--border);
            background: var(--bg);
        }

        .clock-settings-head h3 {
            font-size: 1.125rem;
            font-weight: 800;
            color: var(--text);
            margin: 0;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .clock-settings-close {
            width: 36px;
            height: 36px;
            border: 2px solid var(--border);
            border-radius: var(--radius-sm);
            background:var(--card);
            color: var(--text);
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .clock-settings-close:hover {
            border-color:var(--pink-text);
            color:var(--pink-text);
            transform: rotate(90deg);
        }

        .clock-settings-body {
            padding: 24px;
            overflow-y: auto;
            max-height: calc(80vh - 140px);
        }

        .clock-settings-section h4 {
            font-size: 0.875rem;
            font-weight: 700;
            color: var(--text2);
            margin: 0 0 16px 0;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .clock-scheme-options {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .clock-scheme-option {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 16px;
            border: 2px solid var(--border);
            border-radius: var(--radius);
            background: var(--bg);
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .clock-scheme-option:hover {
            border-color:var(--pink-text);
            transform: translateX(4px);
        }

        .clock-scheme-option.active {
            border-color:var(--pink-text);
            background: var(--pink-bg);
            box-shadow: 3px 3px 0 var(--pink);
        }

        .clock-scheme-preview {
            width: 80px;
            height: 60px;
            border-radius: var(--radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .pixel-preview {
            background: #1a1a2e;
            border: 2px solid var(--border);
        }

        .pixel-preview-digit {
            font-family: 'Courier New', monospace;
            font-size: 1.5rem;
            font-weight: 900;
            color:var(--pink-text);
            text-shadow: 0 0 10px var(--pink);
            letter-spacing: 2px;
        }

        .minimal-preview {
            background:var(--card);
            border: 2px solid var(--border);
        }

        .minimal-preview-digit {
            font-size: 1.25rem;
            font-weight: 200;
            color: var(--text);
            letter-spacing: -1px;
        }

        .ring-preview {
            background:var(--card);
            border: 2px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .clock-scheme-info {
            flex: 1;
        }

        .clock-scheme-name {
            font-size: 1rem;
            font-weight: 700;
            color: var(--text);
            margin-bottom: 4px;
        }

        .clock-scheme-desc {
            font-size: 0.75rem;
            color: var(--text2);
        }

        /* 搜索框 */
        .clock-scheme-search {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 14px;
            background:var(--card);
            border: 2px solid var(--border);
            border-radius: var(--radius);
            margin-bottom: 12px;
        }

        .clock-scheme-search i {
            color: var(--text3);
            font-size: 0.875rem;
        }

        .clock-scheme-search input {
            flex: 1;
            border: none;
            outline: none;
            font-size: 0.875rem;
            font-weight: 500;
            color: var(--text);
            background: transparent;
        }

        .clock-scheme-search input::placeholder {
            color: var(--text3);
        }

        .clock-scheme-no-results {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            padding: 24px;
            color: var(--text3);
            font-size: 0.875rem;
            font-weight: 500;
        }

        .clock-scheme-no-results i {
            font-size: 1.5rem;
            opacity: 0.5;
        }

        /* 折叠系统 */
        .settings-collapse-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            user-select: none;
            padding: 4px 0;
        }

        .settings-collapse-header:hover {
            color:var(--pink-text);
        }

        .collapse-arrow {
            font-size: 0.75rem;
            transition: transform 0.3s ease;
        }

        .settings-collapse-header.collapsed .collapse-arrow {
            transform: rotate(-90deg);
        }

        .settings-collapse-body {
            overflow: hidden;
            max-height: 600px;
            transition: max-height 0.4s ease, opacity 0.3s ease;
            opacity: 1;
        }

        .settings-collapse-body.collapsed {
            max-height: 0;
            opacity: 0;
        }

        /* 蒸汽朋克预览 */
        .steampunk-preview {
            background: linear-gradient(160deg, var(--card), var(--bg2));
            border: 2px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .steampunk-preview-face {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--card);
            border: 2px solid var(--border);
            position: relative;
        }

        .steampunk-preview-hand {
            position: absolute;
            bottom: 50%;
            left: 50%;
            width: 2px;
            height: 14px;
            background: var(--border);
            border-radius: 1px;
            transform-origin: bottom center;
        }

        .steampunk-preview-hand.short {
            height: 10px;
            background: var(--text2);
        }

        .clock-sound-toggle {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px;
            background: var(--bg);
            border: 2px solid var(--border);
            border-radius: var(--radius);
        }

        .clock-sound-info {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 0.9375rem;
            font-weight: 600;
            color: var(--text);
        }

        .clock-sound-info i {
            color:var(--pink-text);
            font-size: 1.125rem;
        }

        .clock-settings-foot {
            padding: 16px 24px;
            border-top: 2px solid var(--border);
            background: var(--bg);
            display: flex;
            justify-content: center;
        }

        .clock-settings-hint {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--text2);
        }

        .clock-settings-hint i {
            color:var(--pink-text);
        }

        /* 响应式 */
        @media (max-width: 768px) {
            .clock-showcase {
                padding: 30px 15px;
                gap: 40px;
            }

            .pixel-clock-container {
                padding: 30px 35px;
            }

            .pixel-digit {
                width: 48px;
                height: 80px;
            }

            .minimal-clock-container {
                padding: 40px 50px;
            }

            .minimal-digit {
                font-size: 3.5rem;
            }

            .minimal-colon {
                font-size: 2rem;
            }

            .device-info-card {
                padding: 18px 20px;
            }

            .device-info-grid {
                grid-template-columns: 1fr 1fr;
                gap: 8px;
            }

            .device-info-item {
                padding: 10px 12px;
            }
        }

        @media (max-width: 480px) {
            .pixel-digit {
                width: 36px;
                height: 60px;
            }

            .pixel-grid {
                gap: 1px;
            }

            .minimal-digit {
                font-size: 2.5rem;
            }

            .minimal-colon {
                font-size: 1.5rem;
            }

            .device-info-grid {
                grid-template-columns: 1fr;
            }
        }
        .input-wrapper-embed{flex:1;position:relative}
        .input-wrapper-embed textarea{width:100%;padding:.625rem .875rem;padding-right:3rem;border:var(--bw) solid var(--border);border-radius:var(--radius-sm);font-family:inherit;font-size:.875rem;resize:none;outline:none;transition:all .15s;background:var(--bg)}
        .input-wrapper-embed textarea:focus{border-color:var(--pink-text);background:var(--card)}
        .char-count{position:absolute;right:.625rem;bottom:.5rem;font-size:.625rem;color:var(--text3);font-weight:600}
        .send-btn-embed{width:44px;height:44px;border-radius:var(--radius-sm);border:var(--bw) solid var(--border);background:var(--pink);color:#1A1A1A;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1rem;transition:all .15s;box-shadow:2px 2px 0 var(--shadow);flex-shrink:0}
        .send-btn-embed:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--shadow-dark)}
        .send-btn-embed:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--shadow)}
        .chat-sidebar{display:flex;flex-direction:column;gap:1rem}
        .chat-info-card{background:var(--card);border:var(--bw) solid var(--border);border-radius:var(--radius);box-shadow:3px 3px 0 var(--shadow);padding:1rem}
        .chat-info-card h3{font-size:.875rem;font-weight:800;color:var(--text);margin-bottom:.75rem;display:flex;align-items:center;gap:.5rem}
        .chat-info-card ul{list-style:none;font-size:.75rem;color:var(--text2);line-height:1.8}
        .chat-info-card li:before{content:"•";color:var(--pink-text);margin-right:.5rem;font-weight:700}
        .online-users-list{font-size:.75rem;color:var(--text2)}
        .online-users-list .empty-text{color:var(--text3);text-align:center;padding:1rem 0}
        .online-user-item{display:flex;align-items:center;gap:.5rem;padding:.375rem 0;border-bottom:1px dashed var(--border2)}
        .online-user-item:last-child{border-bottom:none}
        .online-user-avatar{width:24px;height:24px;border-radius:50%;background:var(--bg3);border:var(--bw) solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.625rem;font-weight:700}
        @media (max-width:900px){.chat-container-embed{grid-template-columns:1fr}.chat-sidebar{display:none}}
    
        /* ==================== 黄黑工业风装饰 ====================
         * 追加装饰，回滚删本块即可
         * ① 侧边栏淡黄黑斜纹（工业警示质感）
         * ② 侧边栏头部黄黑警戒条纹
         * ③ 页面背景极淡斜纹
         * ========================================================= */
        body{
            background-color:var(--bg);
            background-image:repeating-linear-gradient(45deg,rgba(26,26,26,0.025) 0 2px,transparent 2px 22px);
        }
        .sidebar{
            background-image:repeating-linear-gradient(45deg,rgba(26,26,26,0.05) 0 2px,transparent 2px 18px);
        }
        .sidebar-head{
            border-bottom:var(--bw) solid var(--border);
        }
        .sidebar-head::after{
            content:"";display:block;height:6px;
            background:repeating-linear-gradient(-45deg,var(--yellow) 0 12px,var(--border) 12px 24px);
        }
        .topbar{
            border-bottom:var(--bw) solid var(--border);
        }

/* ==================== 首页施工横幅（construction-banner）====================
 * 视觉：动漫描边工业风 — 蟑螂工程师 + 流动黄黑警戒线 + 双齿轮咬合
 * 位置：首页 hero 区 h1 下方，包裹 slogan 文字
 * 用途：营造"工地施工中"叙事，与"监控中"彩蛋互文
 * 帧序列占位：.frame-sequence-slot 当前 hidden，未来 JS 注入 sprite 帧替换 CSS 动画
 * 画作：纯 SVG + CSS keyframes，无外部依赖，GPU 合成器线程友好
 * ==================================================================== */

.construction-banner{
    display:inline-flex;
    flex-direction:column;
    position:relative;
    margin:4px 0 4px;
    border:var(--bw) solid var(--border);
    border-radius:10px;
    box-shadow:3px 3px 0 var(--shadow);
    background:var(--bg2);
    overflow:hidden;
    max-width:100%;
}

/* 顶部/底部流动警戒线（黄黑斜纹循环位移）*/
.hazard-strip{
    height:4px;
    background:repeating-linear-gradient(-45deg,#1A1A1A 0 8px,#FFC800 8px 16px);
    background-size:22.63px 4px; /* 一个完整周期 = sqrt(8^2+8^2)*2 ≈ 22.63 */
    animation:hazardFlow 1.2s linear infinite;
}
.hazard-bottom{animation-direction:reverse;}
@keyframes hazardFlow{
    from{background-position:0 0;}
    to{background-position:22.63px 0;}
}

/* 主体：slogan 文字 */
.construction-main{
    padding:5px 14px;
    background:var(--card);
}

/* ===== slogan 文字 ===== */
.construction-text{
    font-size:0.9rem;
    font-weight:700;
    color:var(--text);
    margin:0;
    letter-spacing:0.02em;
    line-height:1.4;
}

/* ===== 帧序列动画占位（未来启用）===== */
.frame-sequence-slot{
    display:none;
}
.frame-sequence-slot.active{
    display:block;
    position:absolute;
    inset:0;
    background:var(--bg2);
    z-index:2;
}
.frame-sequence-slot img{
    display:none;
    width:100%;
    height:100%;
    object-fit:contain;
}
.frame-sequence-slot img.active{
    display:block;
}

/* ===== 响应式：移动端紧凑 ===== */
@media (max-width:600px){
    .construction-main{
        padding:4px 10px;
    }
    .construction-text{
        font-size:0.8rem;
    }
}

/* 尊重用户偏好：减少动画 */
@media (prefers-reduced-motion:reduce){
    .hazard-strip{
        animation:none !important;
    }
}