*{margin:0;padding:0;box-sizing:border-box}
        html,body{height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:#fff;overflow:hidden;-webkit-overflow-scrolling:touch}
        
        .splash-screen{position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:2000;animation:fadeOut .5s ease 2s forwards}
        .splash-logo{width:100px;height:100px;background:#fff;border:4px solid #000;display:flex;align-items:center;justify-content:center;font-size:50px;color:#000;box-shadow:8px 8px 0 #000;border-radius:50%;animation:bounce 1s ease-in-out infinite}
        .splash-logo svg{width:48px;height:48px;stroke:#000;stroke-width:2.5;fill:none}
        @keyframes bounce{0%,100%{transform:translateY(0);box-shadow:8px 8px 0 #000}50%{transform:translateY(-20px);box-shadow:8px 28px 0 #000}}
        .splash-text{margin-top:24px;font-size:24px;font-weight:800;letter-spacing:4px}
        .splash-loading{position:absolute;bottom:80px;display:flex;flex-direction:column;align-items:center;gap:12px}
        .splash-loading svg{width:36px;height:36px;stroke:#000;stroke-width:2;fill:none;animation:spin 1.5s linear infinite}
        .splash-loading-text{font-size:12px;font-weight:700;color:#000}
        @keyframes spin{to{transform:rotate(360deg)}}
        @keyframes fadeOut{to{opacity:0;visibility:hidden;pointer-events:none}}
        
        .lock-screen{position:fixed;top:0;left:0;right:0;bottom:0;background:#000;display:flex;flex-direction:column;align-items:center;z-index:1500;transition:transform .4s cubic-bezier(.25,.46,.45,.94)}
        .lock-screen.unlocked{transform:translateY(-100%)}
        .lock-time{font-size:72px;font-weight:800;color:#fff;margin-top:80px;letter-spacing:-2px;text-shadow:4px 4px 0 #333}
        .lock-date{font-size:18px;color:#fff;margin-top:8px;font-weight:600}
        .lock-hint{position:absolute;bottom:80px;color:#fff;font-size:14px;font-weight:600;animation:pulse 2s ease-in-out infinite;border:2px solid #fff;padding:8px 16px;cursor:pointer}
        @keyframes pulse{0%,100%{opacity:.6}50%{opacity:1}}
        .lock-swipe{position:absolute;bottom:30px;width:40px;height:4px;background:#fff}
        
        .passcode-screen{position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;display:none;flex-direction:column;align-items:center;z-index:1600;padding-top:60px}
        .passcode-screen.active{display:flex}
        .passcode-title{font-size:18px;font-weight:800;margin-bottom:4px}
        .passcode-subtitle{font-size:12px;color:#666;margin-bottom:32px}
        .passcode-dots{display:flex;gap:12px;margin-bottom:32px}
        .passcode-dot{width:12px;height:12px;border:3px solid #000;border-radius:0;transition:all .15s}
        .passcode-dot.filled{background:#000}
        .passcode-keypad{display:grid;grid-template-columns:repeat(3,70px);gap:12px}
        .passcode-key{width:70px;height:70px;border:3px solid #000;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:28px;font-weight:700;cursor:pointer;transition:all .1s;box-shadow:4px 4px 0 #000}
        .passcode-key:active{transform:translate(2px,2px);box-shadow:2px 2px 0 #000}
        .passcode-key span{font-size:9px;color:#666;margin-top:2px}
        .passcode-error{color:#f44336;font-size:12px;margin-top:16px;font-weight:600;min-height:20px}
        @keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
        
        .phone-container{width:100%;height:100vh;height:100dvh;margin:0 auto;background:#fff;overflow:hidden;position:relative;display:flex;flex-direction:column;box-sizing:border-box}
        
        .status-bar{height:28px;min-height:28px;background:#000;color:#fff;display:flex;justify-content:space-between;align-items:center;padding:0 12px;font-size:12px;font-weight:600;flex-shrink:0}
        .status-bar .time{font-weight:700}
        .status-bar .icons{display:flex;gap:6px;align-items:center}
        
        .battery-bar{width:24px;height:12px;border:2px solid #fff;border-radius:2px;position:relative;display:flex;align-items:center;padding:1px}
        .battery-bar-inner{height:100%;background:#fff;border-radius:1px;transition:width 0.3s}
        .battery-bar-tip{position:absolute;right:-4px;top:50%;transform:translateY(-50%);width:2px;height:6px;background:#fff;border-radius:0 1px 1px 0}
        
        .header{height:50px;min-height:50px;background:#fff;border-bottom:2px solid #000;display:flex;align-items:center;justify-content:space-between;padding:0 12px;flex-shrink:0}
        .header-title{font-size:18px;font-weight:800;letter-spacing:-0.5px}
        .header-right{display:flex;gap:4px}
        .header-btn{width:36px;height:36px;border:2px solid #000;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;transition:all .15s}
        .header-btn:hover{background:#000;color:#fff}
        .header-btn:active{transform:translate(2px,2px)}
        
        .main-content{flex:1;overflow:hidden;position:relative;min-height:0;display:flex;flex-direction:column}
        
        .page{position:absolute;top:0;left:0;width:100%;height:100%;background:#fff;display:none;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
        .page.active{display:flex}
        .page.no-scroll{overflow:hidden}
        
        .bottom-nav{height:56px;min-height:56px;background:#fff;border-top:2px solid #000;display:flex;flex-shrink:0;padding:0;padding-bottom:env(safe-area-inset-bottom,0);position:relative;z-index:100}
        .nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;border-right:2px solid #000;transition:all .15s;min-width:0;padding:4px 2px}
        .nav-item:last-child{border-right:none}
        .nav-item:hover{background:#f0f0f0}
        .nav-item.active{background:#000;color:#fff}
        .nav-icon-wrapper{width:22px;height:22px;display:flex;align-items:center;justify-content:center}
        .nav-icon{width:100%;height:100%}
        .nav-item span{font-size:9px;font-weight:700;white-space:nowrap}
        
        .chat-list{flex:1;overflow-y:auto;padding:8px}
        .chat-item{display:flex;align-items:center;padding:12px;border:2px solid #000;margin-bottom:8px;background:#fff;cursor:pointer;transition:all .15s;box-shadow:3px 3px 0 #000}
        .chat-item:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 #000}
        .active-persona{background:#f0f0f0;border-color:#000}
        .chat-item:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #000}
        .chat-avatar{width:50px;height:50px;border:2px solid #000;border-radius:0;overflow:hidden;flex-shrink:0;background:#f0f0f0;display:flex;align-items:center;justify-content:center;font-size:24px}
        .chat-avatar img{width:100%;height:100%;object-fit:cover}
        .chat-info{flex:1;margin-left:12px;min-width:0}
        .chat-name{font-weight:800;font-size:15px;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        .chat-preview{font-size:12px;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        .chat-meta{text-align:right;flex-shrink:0}
        .chat-time{font-size:11px;color:#999;margin-bottom:4px}
        .chat-badge{display:inline-block;min-width:18px;height:18px;background:#000;color:#fff;font-size:10px;font-weight:700;line-height:18px;text-align:center;border-radius:0;padding:0 4px}
        
        .chat-page{display:flex;flex-direction:column}
        .chat-messages{flex:1;overflow-y:auto;padding:12px;background:#f5f5f5;background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:fixed}
        .load-more-btn{padding:12px;text-align:center;color:#666;font-size:13px;cursor:pointer;border:2px solid #000;background:#fff;margin-bottom:12px;transition:all .15s}
        .load-more-btn:hover{background:#000;color:#fff}
        .load-more-btn:active{transform:translate(2px,2px)}
        .message{display:flex;margin-bottom:12px;align-items:flex-start;max-width:85%}
        .message.user{flex-direction:row-reverse;margin-left:auto}
        .message.ai{margin-right:auto}
        .message-avatar-wrapper{display:flex;flex-direction:column;align-items:center;flex-shrink:0}
        .message-avatar{width:36px;height:36px;border-radius:6px;overflow:hidden;background:#e0e0e0}
        .message-avatar img{width:100%;height:100%;object-fit:cover}
        .message-time{font-size:10px;color:#999;margin-top:4px;text-align:center}
        .message-body{display:flex;flex-direction:column;margin:0 8px}
        .message.user .message-body{align-items:flex-end}
        .message.ai .message-body{align-items:flex-start}
        .message-content{padding:10px 14px;border-radius:16px;font-size:14px;line-height:1.5;word-wrap:break-word;word-break:break-all;white-space:pre-wrap;position:relative;box-shadow:0 1px 2px rgba(0,0,0,.1);max-width:100%;overflow-x:auto}
        .message.user .message-content{background:#000;color:#fff}
        .message.ai .message-content{background:#fff;color:#333;border:2px solid #000}
        .message.transfer .message-content{padding:0;background:transparent;border:none;box-shadow:none;border-radius:0}
        
        .blocked-error-icon{width:20px;height:20px;background:#e74c3c;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;margin-left:8px;flex-shrink:0}
        .message.is-blocked .message-body{flex-direction:row;align-items:center;flex-wrap:wrap}
        .message.is-blocked .message-content{order:1}
        .message.is-blocked .blocked-error-icon{order:2}
        .message.is-blocked .message-time{order:3;width:100%;margin-top:4px}
        
        .chat-messages[data-bubble="default"] .message-content{backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3)}
        .chat-messages[data-bubble="default"] .message.user .message-content{background:rgba(0,0,0,.7);color:#fff}
        .chat-messages[data-bubble="default"] .message.assistant .message-content{background:rgba(255,255,255,.8);color:#333}
        .chat-messages[data-bubble="rounded"] .message-content{border-radius:12px;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3)}
        .chat-messages[data-bubble="rounded"] .message.user .message-content{background:rgba(0,0,0,.7);color:#fff}
        .chat-messages[data-bubble="rounded"] .message.assistant .message-content{background:rgba(255,255,255,.8);color:#333}
        .chat-messages[data-bubble="pill"] .message-content{border-radius:24px;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3)}
        .chat-messages[data-bubble="pill"] .message.user .message-content{background:rgba(0,0,0,.7);color:#fff}
        .chat-messages[data-bubble="pill"] .message.assistant .message-content{background:rgba(255,255,255,.8);color:#333}
        .chat-messages[data-bubble="sharp"] .message-content{border-radius:0;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3)}
        .chat-messages[data-bubble="sharp"] .message.user .message-content{background:rgba(0,0,0,.7);color:#fff;clip-path:polygon(0 0,100% 0,100% 100%,12px 100%)}
        .chat-messages[data-bubble="sharp"] .message.assistant .message-content{background:rgba(255,255,255,.8);color:#333;clip-path:polygon(12px 0,100% 0,100% 100%,0 100%)}
        .chat-messages[data-bubble="neumorphic"] .message-content{border:none;box-shadow:8px 8px 16px #d0d0d0,-8px -8px 16px #fff}
        .chat-messages[data-bubble="neumorphic"] .message.user .message-content{background:#e0e0e0;color:#333}
        .chat-messages[data-bubble="neumorphic"] .message.assistant .message-content{background:#e8e8e8;color:#333;box-shadow:8px 8px 16px #d0d0d0,-8px -8px 16px #fff}
        .chat-messages[data-bubble="glass"] .message-content{backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.5)}
        .chat-messages[data-bubble="glass"] .message.user .message-content{background:rgba(0,0,0,.6);color:#fff}
        .chat-messages[data-bubble="glass"] .message.assistant .message-content{background:rgba(255,255,255,.7);color:#333}
        .chat-messages[data-bubble="gradient"] .message-content{border:2px solid #000;border-radius:20px}
        .chat-messages[data-bubble="gradient"] .message.user .message-content{background:#000;color:#fff}
        .chat-messages[data-bubble="gradient"] .message.assistant .message-content{background:#fff;color:#000}
        .chat-messages[data-bubble="outline"] .message-content{background:transparent;border:2px solid #000}
        .chat-messages[data-bubble="outline"] .message.user .message-content{color:#000}
        .chat-messages[data-bubble="outline"] .message.assistant .message-content{color:#333}
        .chat-messages[data-bubble="shadow"] .message-content{box-shadow:4px 4px 0 #000}
        .chat-messages[data-bubble="shadow"] .message.user .message-content{background:#000;color:#fff}
        .chat-messages[data-bubble="shadow"] .message.assistant .message-content{background:#fff;color:#333;border:2px solid #000;box-shadow:4px 4px 0 #000}
        .chat-messages[data-bubble="custom"] .message-content{border:none;box-shadow:none}
        
        .message-content code{display:block;white-space:pre-wrap;word-break:break-all;font-family:monospace;font-size:12px;background:rgba(0,0,0,.05);padding:8px;border-radius:8px;margin:4px 0;max-height:300px;overflow-y:auto}
        .message.user .message-content code{background:rgba(255,255,255,.1)}
        
        .message-sender-name{font-size:12px;font-weight:600;color:#666;margin-bottom:4px;padding-left:4px}
        .message.ai .message-sender-name{color:#333}
        
        .message.selected{background:rgba(0,0,0,.05)}
        .message.selected .message-content{border-color:#000;box-shadow:0 0 0 2px rgba(0,0,0,.2)}
        .message-checkbox{width:24px;height:24px;background:#000;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;margin-bottom:4px}
        
        .bubble-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:8px}
        .bubble-option{cursor:pointer;border:2px solid #000;padding:4px;transition:all .15s}
        .bubble-option:hover{transform:translate(-1px,-1px);box-shadow:2px 2px 0 #000}
        .bubble-option.selected{background:#000}
        .bubble-option.selected .bubble-preview{border-color:#fff}
        .bubble-preview{height:36px;border:2px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;transition:all .15s;backdrop-filter:blur(10px)}
        .bubble-preview.user{background:rgba(0,0,0,.7);color:#fff}
        .bubble-preview.rounded{border-radius:12px}
        .bubble-preview.pill{border-radius:18px}
        .bubble-preview.sharp{border-radius:0;clip-path:polygon(0 0,100% 0,100% 100%,10px 100%)}
        .bubble-preview.neumorphic{background:#e0e0e0;color:#333;box-shadow:8px 8px 16px #bebebe,-8px -8px 16px #fff;border:none}
        .bubble-preview.glass{background:rgba(255,255,255,.25);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3);color:#333}
        .bubble-preview.gradient{background:#000;color:#fff;border:2px solid #000;border-radius:10px}
        .bubble-preview.outline{background:transparent;color:#000;border:2px solid #000}
        .bubble-preview.shadow{background:#fff;color:#333;box-shadow:4px 4px 0 #000}
        .bubble-preview.custom{background:linear-gradient(45deg,#ff6b6b,#feca57,#48dbfb,#ff9ff3);border:none;background-size:400% 400%;animation:gradientShift 3s ease infinite}
        @keyframes gradientShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
        
        .color-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:8px}
        .color-option{width:100%;aspect-ratio:1;border:2px solid #000;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center}
        .color-option:hover{transform:scale(1.1)}
        .color-option.selected{box-shadow:0 0 0 3px #000}
        .color-option.selected::after{content:'✓';color:#fff;text-shadow:0 0 2px #000}
        
        .message-menu{position:fixed;background:#fff;border:2px solid #000;padding:8px;z-index:1000;min-width:120px;box-shadow:3px 3px 0 #000}
        .message-menu-item{padding:12px 16px;cursor:pointer;font-weight:600;border-bottom:2px solid #000;display:flex;align-items:center;gap:8px}
        .message-menu-item:last-child{border-bottom:none}
        .message-menu-item:hover{background:#f5f5f5}
        .message-menu-item.danger{color:#f44336}
        
        .quote-preview{display:flex;align-items:center;justify-content:space-between;background:#f5f5f5;border:2px solid #000;padding:8px 12px;margin-bottom:8px}
        .quote-content{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
        .quote-label{font-size:11px;color:#666;font-weight:600}
        .quote-text{font-size:13px;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        .quote-cancel{background:none;border:none;font-size:16px;cursor:pointer;color:#999;padding:4px;margin-left:8px}
        .quote-cancel:hover{color:#f44336}
        
        .message-quote{display:flex;align-items:stretch;background:#f0f0f0;border-radius:4px;margin-bottom:6px;cursor:pointer;overflow:hidden;max-width:100%}
        .message-quote-bar{width:3px;background:#999;flex-shrink:0}
        .message-quote-content{padding:6px 10px;min-width:0;flex:1;overflow:hidden}
        .message-quote-label{font-size:11px;color:#666;margin-bottom:2px}
        .message-quote-text{font-size:12px;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        
        .multi-select-bar{position:fixed;bottom:70px;left:50%;transform:translateX(-50%);background:#000;color:#fff;padding:12px 20px;border-radius:8px;display:none;align-items:center;gap:16px;box-shadow:0 4px 12px rgba(0,0,0,.3);z-index:100}
        .multi-select-bar.active{display:flex}
        .multi-select-count{font-weight:700}
        .multi-select-btn{background:#fff;color:#000;border:none;padding:8px 16px;font-weight:700;cursor:pointer;border-radius:4px}
        .multi-select-btn:hover{background:#f5f5f5}
        .multi-select-btn.danger{background:#f44336;color:#fff}
        .multi-select-btn.danger:hover{background:#d32f2f}
        
        .message.transfer{align-items:flex-start;max-width:none}
        .message.transfer .message-avatar{align-self:flex-start;margin-top:0}
        .message.user.transfer{flex-direction:row-reverse}
        .message.ai.transfer{flex-direction:row}
        
        .chat-input-area{padding:10px;background:#fff;border-top:3px solid #000;display:flex;flex-direction:column;gap:8px;position:relative}
        .chat-input-tools{display:flex;gap:8px;padding:8px 0;justify-content:flex-start;animation:slideUp 0.2s ease}
        @keyframes slideUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
        
        .emoticon-picker{display:none;position:absolute;bottom:70px;left:10px;right:10px;background:#fff;border:2px solid #000;max-height:200px;overflow-y:auto;padding:8px;z-index:500;grid-template-columns:repeat(auto-fill,minmax(50px,1fr));gap:8px}
        .emoticon-picker.show{display:grid;animation:slideUp 0.2s ease}
        .emoticon-item{cursor:pointer;padding:4px;border:2px solid transparent;display:flex;align-items:center;justify-content:center;transition:all 0.15s}
        .emoticon-item:hover{border-color:#000;background:#f5f5f5}
        .emoticon-item img{width:40px;height:40px;object-fit:contain}
        .emoticon-empty{text-align:center;color:#666;font-size:12px;grid-column:1/-1;padding:20px}
        .emoticon-add-btn{cursor:pointer;padding:4px;border:2px dashed #000;display:flex;align-items:center;justify-content:center;transition:all 0.15s;min-height:48px}
        .emoticon-add-btn:hover{background:#f5f5f5;border-style:solid}
        .emoticon-add-btn i{font-size:20px;color:#000}
        
        .emoticon-config-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:8px;max-height:200px;overflow-y:auto;padding:4px;border:2px solid #000}
        .emoticon-config-item{background:#fff;border:2px solid #000;padding:4px;position:relative;cursor:pointer}
        .emoticon-config-item:hover{background:#f5f5f5}
        .emoticon-config-item img{width:100%;aspect-ratio:1;object-fit:contain}
        .emoticon-config-name{font-size:9px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        .emoticon-config-checkbox{position:absolute;top:2px;left:2px;width:14px;height:14px;cursor:pointer}
        
        .game-center-container{padding:16px;height:calc(100vh - 60px);overflow-y:auto;background:#fff}
        .game-list{display:flex;flex-direction:column;gap:12px}
        .game-card{display:flex;align-items:center;padding:16px;background:#fff;border:2px solid #000;cursor:pointer;transition:all 0.15s}
        .game-card:active{background:#f5f5f5}
        .game-icon{width:48px;height:48px;background:#000;color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;margin-right:12px}
        .game-info{flex:1}
        .game-name{font-size:16px;font-weight:700;margin-bottom:4px}
        .game-desc{font-size:12px;color:#666}
        .game-arrow{color:#000;font-size:14px}
        
        .gomoku-container{padding:12px;display:flex;flex-direction:column;align-items:center;gap:12px;height:calc(100vh - 60px);overflow-y:auto;background:#fff}
        .gomoku-info{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:400px;padding:10px 14px;background:#fff;border:2px solid #000}
        .gomoku-player{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700}
        .gomoku-indicator{width:20px;height:20px;border:2px solid #000}
        .gomoku-indicator.black{background:#000}
        .gomoku-indicator.white{background:#fff}
        .gomoku-difficulty{font-size:12px;font-weight:700;padding:4px 10px;background:#FFE135;border:2px solid #000}
        .gomoku-board-wrapper{position:relative;background:#fff;border:3px solid #000;padding:8px}
        #gomokuBoard{display:block;cursor:pointer;touch-action:none}
        .gomoku-win-msg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#FFE135;border:3px solid #000;padding:16px 32px;font-size:20px;font-weight:800;display:none;text-align:center}
        .gomoku-win-msg.show{display:block;animation:gomokuBounce 0.5s ease}
        @keyframes gomokuBounce{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.1)}}
        .gomoku-controls{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%;max-width:400px}
        .gomoku-btn{padding:10px 8px;font-size:12px;font-weight:700;background:#fff;border:2px solid #000;cursor:pointer;transition:all 0.1s}
        .gomoku-btn:active{background:#f5f5f5}
        .gomoku-btn.danger{background:#e74c3c;color:#fff;border-color:#e74c3c}
        .gomoku-status{width:100%;max-width:400px;padding:10px;background:#000;color:#fff;font-weight:700;text-align:center;border:2px solid #000}
        
        .sudoku-container{padding:12px;display:flex;flex-direction:column;align-items:center;gap:12px;height:calc(100vh - 60px);overflow-y:auto;background:#fff}
        .sudoku-info{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:400px;padding:10px 14px;background:#fff;border:2px solid #000}
        .sudoku-timer{font-size:18px;font-weight:800;font-family:'Courier New',monospace;color:#000}
        .sudoku-difficulty{font-size:12px;font-weight:700;padding:4px 10px;background:#FFE135;border:2px solid #000}
        .sudoku-mistakes{font-size:12px;font-weight:700;color:#e74c3c}
        .sudoku-board-wrapper{position:relative;background:#fff;border:3px solid #000;padding:8px}
        .sudoku-board{display:grid;grid-template-columns:repeat(9,1fr);gap:0;width:320px;height:320px;border:2px solid #000}
        .sudoku-cell{display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:600;cursor:pointer;border:1px solid #ddd;background:#fff;transition:all 0.15s ease;position:relative;-webkit-user-select:none;user-select:none}
        .sudoku-cell:nth-child(3n){border-right:2px solid #000}
        .sudoku-cell:nth-child(n+19):nth-child(-n+27),
        .sudoku-cell:nth-child(n+46):nth-child(-n+54){border-bottom:2px solid #000}
        .sudoku-cell.selected{background:#FFE135!important;z-index:1}
        .sudoku-cell.highlight{background:#f0f0f0}
        .sudoku-cell.same-number{background:#e8f4fd}
        .sudoku-cell.fixed{color:#000;font-weight:800}
        .sudoku-cell.user-input{color:#2980b9}
        .sudoku-cell.error{color:#e74c3c;background:#ffe6e6!important}
        .sudoku-cell .notes{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;width:100%;height:100%;position:absolute;top:0;left:0;padding:2px}
        .sudoku-cell .notes span{font-size:9px;font-weight:400;color:#999;width:33%;text-align:center;line-height:1.2}
        .sudoku-win-msg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#FFE135;border:3px solid #000;padding:24px 40px;text-align:center;display:none;z-index:10}
        .sudoku-win-msg.show{display:block;animation:sudokuBounce 0.5s ease}
        @keyframes sudokuBounce{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.1)}}
        .sudoku-win-icon{font-size:48px;margin-bottom:8px}
        .sudoku-win-text{font-size:22px;font-weight:800;margin-bottom:8px}
        .sudoku-win-time{font-size:14px;font-weight:600;color:#666}
        .sudoku-controls{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%;max-width:400px}
        .sudoku-btn{padding:10px 8px;font-size:12px;font-weight:700;background:#fff;border:2px solid #000;cursor:pointer;transition:all 0.1s}
        .sudoku-btn:active{background:#f5f5f5}
        .sudoku-btn.danger{background:#e74c3c;color:#fff;border-color:#e74c3c}
        .sudoku-btn.active{background:#FFE135}
        .sudoku-numpad{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;width:100%;max-width:400px}
        .sudoku-num-btn{padding:14px;font-size:18px;font-weight:700;background:#fff;border:2px solid #000;cursor:pointer;transition:all 0.1s}
        .sudoku-num-btn:active{background:#FFE135}
        .sudoku-num-btn.erase{background:#f5f5f5;color:#666}
        .sudoku-status{width:100%;max-width:400px;padding:10px;background:#000;color:#fff;font-weight:700;text-align:center;border:2px solid #000}
        
        .sheep-container{padding:12px;display:flex;flex-direction:column;align-items:center;height:calc(100vh - 60px);overflow:hidden;background:#fff;gap:12px}
        .sheep-info-bar{display:flex;justify-content:space-between;width:100%;max-width:500px;padding:10px 16px;background:#fff;border:2px solid #000;font-weight:700}
        .sheep-level{font-size:16px;color:#000}
        .sheep-remaining{font-size:14px;color:#666}
        .sheep-game-area{display:flex;flex-direction:column;align-items:center;width:100%;max-width:500px;flex:1;position:relative;gap:12px}
        .sheep-slot-area{display:flex;gap:8px;padding:12px;background:#f5f5f5;border:3px solid #000;border-radius:0;width:100%;justify-content:center;min-height:70px}
        .sheep-slot{width:50px;height:65px;border:2px solid #ddd;background:#fff;display:flex;align-items:center;justify-content:center;font-size:28px;transition:all 0.15s ease;-webkit-user-select:none;user-select:none;cursor:pointer}
        .sheep-slot.filled{border-color:#000}
        .sheep-board-wrapper{flex:1;width:100%;min-height:300px;position:relative;overflow-y:auto;overflow-x:hidden;padding:20px 0}
        .sheep-board{position:relative;margin:0 auto;width:320px;height:400px}
        .sheep-card{position:absolute;width:52px;height:68px;background:#fff;border:3px solid #000;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:30px;cursor:pointer;transition:all 0.15s ease;z-index:1;box-shadow:2px 2px 0 rgba(0,0,0,.2);-webkit-user-select:none;user-select:none}
        .sheep-card:hover{transform:translateY(-2px);box-shadow:4px 4px 0 rgba(0,0,0,.3)}
        .sheep-card.selected{z-index:100!important;border-color:#FFE135;box-shadow:0 0 0 3px #FFE135,4px 4px 0 rgba(0,0,0,.3)}
        .sheep-card.blocked{opacity:.75;pointer-events:none}
        .sheep-card.removing{animation:sheepRemove 0.3s ease forwards}
        @keyframes sheepRemove{0%{transform:scale(1);opacity:1}100%{transform:scale(0);opacity:0}}
        .sheep-controls{display:flex;gap:12px;width:100%;max-width:500px;justify-content:center;padding-bottom:12px}
        .sheep-btn{padding:12px 24px;font-size:14px;font-weight:700;background:#fff;border:3px solid #000;cursor:pointer;transition:all 0.15s}
        .sheep-btn:active{background:#FFE135;transform:scale(.98)}
        .sheep-result-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);display:none;align-items:center;justify-content:center;z-index:1000}
        .sheep-result-overlay.show{display:flex}
        .sheep-result-modal{background:#fff;border:4px solid #000;padding:32px 40px;text-align:center;max-width:340px;box-shadow:8px 8px 0 #000;animation:sheepBounceIn 0.4s ease}
        @keyframes sheepBounceIn{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.05)}100%{transform:scale(1);opacity:1}}
        .sheep-result-icon{font-size:64px;margin-bottom:16px}
        .sheep-result-title{font-size:24px;font-weight:800;margin-bottom:12px}
        .sheep-result-desc{font-size:14px;color:#666;margin-bottom:24px;line-height:1.6}
        .sheep-result-btn{padding:14px 36px;font-size:16px;font-weight:700;background:#000;color:#fff;border:3px solid #000;cursor:pointer;transition:all .15s}
        .sheep-result-btn:active{background:#333}
        
        @media (max-width:400px){
            .sheep-board{width:280px;height:360px}
            .sheep-card{width:44px;height:58px;font-size:24px}
            .sheep-slot{width:42px;height:55px;font-size:22px}
            .sheep-slot-area{gap:6px;padding:10px}
        }
        
        @media (min-width:768px){
            .sheep-board{width:380px;height:480px}
            .sheep-card{width:58px;height:76px;font-size:34px}
            .sheep-slot{width:56px;height:72px;font-size:30px}
        }
        
        .mbti-container{padding:20px;height:calc(100vh - 60px);overflow-y:auto;background:#fff;display:flex;flex-direction:column}
        .mbti-progress{padding:20px;background:#fff;border:2px solid #000;margin-bottom:16px}
        .mbti-progress-bar{height:8px;background:#f0f0f0;border-radius:4px;overflow:hidden}
        .mbti-progress-fill{height:100%;background:#FFE135;transition:width 0.3s}
        .mbti-progress-text{text-align:center;font-size:12px;font-weight:600;margin-top:8px}
        .mbti-question-card{background:#fff;border:2px solid #000;padding:20px;flex:1}
        .mbti-question{font-size:16px;font-weight:600;line-height:1.6;margin-bottom:20px;text-align:center}
        .mbti-options{display:flex;flex-direction:column;gap:12px;margin-top:16px}
        .mbti-option-btn{padding:14px;border:2px solid #000;background:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all 0.1s;text-align:left}
        .mbti-option-btn:hover{background:#f0f0f0}
        .mbti-option-btn:active{transform:scale(0.98)}
        .mbti-option-btn.selected{background:#FFE135}
        .mbti-result{text-align:center;padding:20px}
        .mbti-result-type{font-size:48px;font-weight:900;margin-bottom:8px}
        .mbti-result-name{font-size:20px;font-weight:700;color:#666;margin-bottom:12px}
        .mbti-result-desc{font-size:14px;line-height:1.6;color:#666;margin-bottom:16px}
        .mbti-result-traits{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:16px}
        .mbti-trait{padding:10px;border:2px solid #000;text-align:center}
        .mbti-trait-label{font-size:12px;font-weight:600;margin-bottom:4px}
        .mbti-trait-value{font-size:18px;font-weight:700}
        .mbti-btn{padding:12px 24px;border:2px solid #000;background:#FFE135;font-size:14px;font-weight:700;cursor:pointer;margin-top:16px}
        
        .personality-radar{display:flex;justify-content:center;margin:16px 0}
        .radar-container{position:relative;width:200px;height:200px}
        .radar-bg{position:absolute;top:0;left:0;width:100%;height:100%}
        .radar-polygon{fill:rgba(255,225,53,0.3);stroke:#000;stroke-width:2}
        .radar-label{position:absolute;font-size:10px;font-weight:600;white-space:nowrap}
        .radar-value{font-size:11px;font-weight:700;color:#FFE135}
        
        .personality-dimension{display:flex;align-items:center;margin:8px 0;padding:8px;border:2px solid #000}
        .dimension-label{flex:1;font-size:12px;font-weight:600}
        .dimension-bar{flex:2;height:8px;background:#f0f0f0;border:1px solid #000;position:relative}
        .dimension-fill{height:100%;background:#FFE135;transition:width 0.5s}
        .dimension-value{font-size:12px;font-weight:700;margin-left:8px;min-width:36px;text-align:right}
        
        .forum-container{padding:12px;padding-bottom:80px;height:calc(100vh - 60px);overflow-y:auto;background:#f5f5f5}
        .forum-tabs{display:flex;gap:8px;margin-bottom:12px;padding:0 4px}
        .forum-tab{flex:1;padding:10px;border:2px solid #000;background:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all 0.1s}
        .forum-tab.active{background:#FFE135}
        .forum-tab:hover{background:#f0f0f0}
        .forum-list{display:flex;flex-direction:column;gap:12px}
        .forum-thread{background:#fff;border:2px solid #000;padding:12px;cursor:pointer;transition:all 0.1s}
        .forum-thread:hover{transform:translateY(-2px);box-shadow:4px 4px 0 #000}
        .forum-thread-header{display:flex;align-items:center;gap:10px;margin-bottom:8px}
        .forum-thread-avatar{width:36px;height:36px;border:2px solid #000;border-radius:50%;overflow:hidden}
        .forum-thread-avatar img{width:100%;height:100%;object-fit:cover}
        .forum-thread-author{font-size:14px;font-weight:700}
        .forum-thread-time{font-size:11px;color:#999;margin-left:auto}
        .forum-thread-title{font-size:16px;font-weight:700;margin-bottom:6px;line-height:1.4}
        .forum-thread-content{font-size:13px;color:#666;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
        .forum-thread-footer{display:flex;align-items:center;gap:16px;margin-top:10px;padding-top:10px;border-top:1px solid #eee}
        .forum-thread-stat{font-size:12px;color:#999;display:flex;align-items:center;gap:4px}
        .forum-empty{text-align:center;padding:40px 20px;color:#999}
        .forum-empty i{font-size:48px;margin-bottom:12px;color:#ddd}
        
        .my-forum-profile{background:#fff;border:2px solid #000;padding:20px;margin-bottom:12px;text-align:center}
        .my-forum-avatar{width:80px;height:80px;border:3px solid #000;border-radius:50%;margin:0 auto 12px;position:relative;cursor:pointer;overflow:hidden}
        .my-forum-avatar img{width:100%;height:100%;object-fit:cover}
        .my-forum-avatar-edit{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,0.5);color:#fff;padding:4px;font-size:12px;opacity:0;transition:opacity 0.2s}
        .my-forum-avatar:hover .my-forum-avatar-edit{opacity:1}
        .my-forum-switch-btn{position:absolute;top:0;right:0;width:32px;height:32px;background:#000;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.1s}
        .my-forum-switch-btn:hover{transform:scale(1.1)}
        .my-forum-switch-btn i{font-size:14px}
        .my-forum-name{font-size:18px;font-weight:700;margin-top:8px;cursor:pointer;display:flex;align-items:center;justify-content:center}
        .my-forum-section{background:#fff;border:2px solid #000;padding:12px}
        .my-forum-section-title{font-size:14px;font-weight:700;margin-bottom:12px;padding-bottom:8px;border-bottom:2px solid #000}
        
        .account-option{display:flex;align-items:center;gap:12px;padding:12px;border:2px solid #000;margin-bottom:8px;cursor:pointer;transition:all 0.1s}
        .account-option:hover{background:#f5f5f5}
        .account-option.active{background:#FFE135;border-color:#000}
        .account-option-avatar{width:48px;height:48px;border:2px solid #000;border-radius:50%;overflow:hidden}
        .account-option-avatar img{width:100%;height:100%;object-fit:cover}
        .account-option-info{flex:1}
        .account-option-name{font-size:14px;font-weight:700}
        .account-option-desc{font-size:12px;color:#666}
        .account-option-check{width:24px;height:24px;background:#000;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center}
        
        .forum-bottom-nav{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:center;gap:40px;background:#fff;border-top:2px solid #000;padding:12px 0;z-index:100}
        .forum-nav-item{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;padding:8px 16px;border:2px solid transparent;border-radius:8px;transition:all 0.1s}
        .forum-nav-item i{font-size:20px}
        .forum-nav-item span{font-size:12px;font-weight:600}
        .forum-nav-item.active{background:#FFE135;border-color:#000}
        .forum-nav-item:hover{background:#f5f5f5}
        
        .chat-tool-btn{width:36px;height:36px;border:2px solid #000;background:#fff;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;transition:all 0.1s}
        .chat-tool-btn:hover{background:#f0f0f0;transform:scale(1.05)}
        .chat-tool-btn:active{transform:scale(0.95)}
        .chat-tool-toggle{width:36px;height:36px;border:2px solid #000;background:#fff;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;transition:all 0.2s;flex-shrink:0}
        .chat-tool-toggle:hover{background:#f0f0f0}
        .chat-tool-toggle.active{background:#000;color:#fff;transform:rotate(45deg)}
        .chat-input-row{display:flex;gap:8px;align-items:flex-end}
        .media-hint{cursor:pointer;opacity:0.8}
        .media-hint:hover{opacity:1;text-decoration:underline}
        .gift-hint{font-weight:600}
        .transfer-hint{display:inline-block;padding:8px 16px;background:#3498db;color:#fff;border-radius:8px;font-weight:600;cursor:pointer;transition:all .15s}
        .transfer-hint:hover{background:#2980b9;transform:translateY(-1px)}
        .red-packet-hint{display:inline-flex;flex-direction:column;align-items:center;padding:12px 20px;background:#e74c3c;color:#fff;border-radius:8px;font-weight:600;cursor:pointer;transition:all .15s;min-width:120px}
        .red-packet-hint:hover{background:#c0392b;transform:translateY(-1px)}
        .red-packet-hint.opened{background:#95a5a6;cursor:default}
        .red-packet-hint.opened:hover{transform:none}
        .red-packet-status{font-size:11px;opacity:0.8;margin-top:4px}
        .media-content-display{text-align:center;padding:20px}
        .chat-input{flex:1;border:2px solid #000;padding:10px 14px;font-size:14px;resize:none;max-height:100px;outline:none;font-family:inherit}
        .chat-input:focus{box-shadow:3px 3px 0 #000}
        .send-btn{width:44px;height:44px;border:2px solid #000;background:#000;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;transition:all .15s;flex-shrink:0}
        .send-btn:hover{background:#333}
        .send-btn:active{transform:translate(2px,2px)}
        
        .gen-btn{width:44px;height:44px;border:2px solid #000;background:#fff;color:#000;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;transition:all .15s;flex-shrink:0}
        .gen-btn:hover{background:#f5f5f5}
        .gen-btn:active{transform:translate(2px,2px)}
        .gen-btn.spinning i{animation:spin 1s linear infinite}
        @keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
        
        .moments-page{display:flex;flex-direction:column}
        .moments-header-bg{height:200px;background:linear-gradient(135deg,#000 0%,#333 100%);position:relative;border-bottom:3px solid #000;background-size:cover;background-position:center}
        .moments-profile{position:absolute;bottom:-30px;right:20px;display:flex;align-items:flex-end;gap:12px}
        .moments-avatar{width:70px;height:70px;border:3px solid #000;background:#fff;overflow:hidden}
        .moments-avatar img{width:100%;height:100%;object-fit:cover}
        .moments-name{font-size:18px;font-weight:800;color:#fff;text-shadow:2px 2px 0 #000;margin-bottom:8px}
        .moments-list{flex:1;overflow-y:auto;padding:50px 12px 12px}
        
        .moment-item{display:flex;padding:12px;border-bottom:2px solid #000;background:#fff}
        .moment-avatar{width:44px;height:44px;border:2px solid #000;background:#000;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;font-weight:700}
        .moment-avatar img{width:100%;height:100%;object-fit:cover}
        .moment-content{flex:1;margin-left:10px;min-width:0}
        .moment-author{font-size:14px;font-weight:700;color:#000}
        .moment-text{font-size:13px;color:#333;margin-top:4px;line-height:1.5;word-break:break-word}
        .moment-image{width:100%;max-width:200px;margin-top:8px;border:2px solid #000}
        .moment-meta{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:11px;color:#666}
        .moment-actions{display:flex;gap:8px}
        .moment-action-btn{background:none;border:2px solid #000;padding:4px 8px;font-size:11px;cursor:pointer;font-weight:600}
        .moment-action-btn.liked{background:#000;color:#fff}
        .moment-comments{margin-top:8px;padding:10px 12px;background:#f7f7f7;border-radius:8px;border:none}
        .likes-section{padding:6px 8px;margin-bottom:6px;font-size:13px;border-bottom:1px solid #e8e8e8}
        .likes-section:last-child{border-bottom:none;margin-bottom:0}
        .likes-names{color:#576b95;font-weight:500}
        .comment-item{font-size:13px;padding:6px 8px;margin-bottom:2px;border-radius:6px;cursor:pointer;transition:background .15s;line-height:1.5}
        .comment-item:hover{background:#ebebeb}
        .comment-item:last-child{margin-bottom:0}
        .comment-author{font-weight:600;color:#576b95}
        .comment-text{color:#333}
        .comment-reply-to{color:#888;font-size:12px;margin-right:6px}
        .comment-author-inline{color:#576b95;font-weight:600}
        .comment-input-area{display:flex;flex-direction:column;gap:8px;padding:12px;border-top:1px solid #eee;background:#fff}
        .reply-preview{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:#f0f2f5;border-radius:6px;border-left:3px solid #576b95}
        .reply-preview span{color:#576b95;font-size:12px;font-weight:500}
        .reply-cancel{background:none;border:none;cursor:pointer;padding:4px 8px;color:#888;font-size:12px;transition:color .15s}
        .reply-cancel:hover{color:#576b95}
        .comment-input{flex:1;border:1px solid #ddd;border-radius:20px;padding:10px 16px;font-size:13px;outline:none;transition:border-color .15s,box-shadow .15s}
        .comment-input:focus{border-color:#576b95;box-shadow:0 0 0 2px rgba(87,107,149,0.1)}
        .comment-input-area .moment-action-btn{border-radius:20px;padding:8px 16px;background:#576b95;color:#fff;border:none;font-size:12px}
        .comment-input-area .moment-action-btn:hover{background:#4a5a7a}
        
        .profile-page{display:flex;flex-direction:column}
        .profile-header{padding:30px 20px;background:#fff;border-bottom:3px solid #000;text-align:center}
        .profile-avatar{width:100px;height:100px;border:4px solid #000;margin:0 auto 16px;overflow:hidden;cursor:pointer;position:relative}
        .profile-avatar img{width:100%;height:100%;object-fit:cover}
        .profile-avatar-edit{position:absolute;bottom:0;left:0;right:0;background:#000;color:#fff;font-size:10px;padding:2px;opacity:0;transition:opacity .2s}
        .profile-avatar:hover .profile-avatar-edit{opacity:1}
        .profile-name{font-size:22px;font-weight:800;margin-bottom:8px;cursor:pointer;transition:all .2s;padding:8px 16px;margin-left:-16px;margin-right:-16px;border-radius:8px;display:inline-block}
        .profile-name:hover{background:#f5f5f5}
        .profile-name:active{transform:scale(0.98)}
        .profile-name::after{content:"✏️";font-size:12px;margin-left:6px;opacity:0;transition:opacity .2s}
        .profile-name:hover::after{opacity:1}
        .profile-menu{flex:1;overflow-y:auto}
        
        .mini-programs-container{padding:16px;flex:1;overflow-y:auto;background:#f5f5f5}
        .mini-program-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:16px}
        .mini-program-item{display:flex;flex-direction:column;align-items:center;cursor:pointer;transition:all .15s}
        .mini-program-item:active{transform:scale(0.95)}
        .mini-program-icon{width:60px;height:60px;border-radius:16px;display:flex;align-items:center;justify-content:center;border:2px solid #000;box-shadow:4px 4px 0 rgba(0,0,0,0.1)}
        .mini-program-icon i{font-size:24px;color:#000}
        .mini-program-name{margin-top:8px;font-size:13px;font-weight:600;text-align:center}
        
        .persona-preview-box{background:#f5f5f5;border:2px dashed #000;padding:16px;min-height:80px}
        .persona-preview-empty{color:#999;font-size:14px;text-align:center;padding:20px}
        .menu-item{display:flex;align-items:center;padding:16px 20px;border-bottom:2px solid #000;cursor:pointer;transition:all .15s}
        .menu-item:hover{background:#f5f5f5}
        .menu-item:active{background:#000;color:#fff}
        .menu-item i{width:24px;font-size:18px;margin-right:12px}
        .menu-item span:not(.arrow){flex:1;font-weight:600}
        .menu-item .arrow{font-size:12px;color:#999}
        
        .shopping-page{display:flex;flex-direction:column;background:#f5f5f5}
        .shopping-header{background:#fff;padding:12px;border-bottom:2px solid #000}
        .shopping-search{display:flex;align-items:center;background:#f5f5f5;border:2px solid #000;padding:8px 12px}
        .shopping-search i{color:#999;margin-right:8px}
        .shopping-search input{flex:1;border:none;outline:none;background:none;font-size:14px}
        .shopping-content{flex:1;overflow-y:auto;position:relative}
        .shopping-panel{display:none;position:absolute;top:0;left:0;right:0;bottom:0;overflow-y:auto}
        .shopping-panel.active{display:block}
        #shoppingCart{display:none;flex-direction:column}
        #shoppingCart.active{display:flex;overflow:hidden}
        .shopping-tabs{display:flex;background:#fff;border-top:2px solid #000;height:56px;flex-shrink:0}
        .shopping-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;position:relative;border-right:1px solid #eee}
        .shopping-tab:last-child{border-right:none}
        .shopping-tab i{font-size:18px}
        .shopping-tab span{font-size:10px;font-weight:600}
        .shopping-tab.active{color:#f44336}
        .shopping-tab:active{background:#f5f5f5}
        .cart-badge{position:absolute;top:4px;right:50%;transform:translateX(12px);background:#f44336;color:#fff;font-size:10px;padding:2px 6px;border-radius:10px;min-width:16px;text-align:center}
        
        .shopping-banner{height:150px;background:#fff;border-bottom:2px solid #000;position:relative;overflow:hidden}
        .banner-slide{position:absolute;top:0;left:0;right:0;bottom:0;display:none;align-items:center;justify-content:center}
        .banner-slide.active{display:flex}
        .banner-placeholder{display:flex;flex-direction:column;align-items:center;gap:12px;color:#999}
        .banner-placeholder i{font-size:48px}
        .banner-placeholder span{font-size:14px;font-weight:600}
        .banner-dots{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:6px}
        .banner-dot{width:8px;height:8px;border-radius:50%;background:#ccc;cursor:pointer}
        .banner-dot.active{background:#000}
        
        .shopping-categories{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:12px;background:#fff;border-bottom:2px solid #000}
        .shopping-category-item{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;padding:8px}
        .shopping-category-item:active{transform:scale(0.95)}
        .shopping-category-icon{width:40px;height:40px;border-radius:50%;background:#f5f5f5;border:2px solid #000;display:flex;align-items:center;justify-content:center;font-size:18px}
        .shopping-category-name{font-size:11px;font-weight:600;text-align:center}
        
        .shopping-products-header{display:flex;justify-content:space-between;align-items:center;padding:12px;background:#fff;border-bottom:2px solid #000}
        .shopping-products-header span{font-weight:700}
        .refresh-btn{background:#000;color:#fff;border:none;padding:6px 12px;font-size:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:4px}
        .refresh-btn:active{transform:scale(0.95)}
        .shopping-products{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:8px}
        
        .product-card{background:#fff;border:2px solid #000;overflow:hidden;cursor:pointer;transition:all .15s}
        .product-card:active{transform:scale(0.98)}
        .product-image{height:120px;background:#f5f5f5;display:flex;align-items:center;justify-content:center;border-bottom:2px solid #000;font-size:48px}
        .product-image img{width:100%;height:100%;object-fit:cover}
        .product-info{padding:8px}
        .product-name{font-size:13px;font-weight:600;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        .product-price{color:#f44336;font-weight:800;font-size:16px}
        .product-price::before{content:"¥";font-size:12px}
        .product-sales{font-size:11px;color:#999;margin-top:2px}
        .product-shop{font-size:10px;color:#666;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        
        .category-sidebar{position:absolute;left:0;top:0;bottom:0;width:80px;background:#fff;border-right:2px solid #000;overflow-y:auto}
        .category-item{padding:14px 8px;text-align:center;font-size:12px;font-weight:600;cursor:pointer;border-bottom:1px solid #eee}
        .category-item.active{background:#000;color:#fff}
        .category-item:active{background:#f5f5f5}
        .category-products{position:absolute;left:80px;top:0;right:0;bottom:0;overflow-y:auto;padding:8px}
        
        .cart-list{padding:8px;padding-bottom:70px;overflow-y:auto;flex:1}
        .cart-item{display:flex;background:#fff;border:2px solid #000;padding:8px;margin-bottom:8px}
        .cart-item-image{width:80px;height:80px;background:#f5f5f5;border:2px solid #000;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:36px}
        .cart-item-image i{font-size:24px;color:#ccc}
        .cart-item-info{flex:1;margin-left:8px;display:flex;flex-direction:column;justify-content:space-between}
        .cart-item-name{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        .cart-item-price{color:#f44336;font-weight:700}
        .cart-item-price::before{content:"¥";font-size:11px}
        .cart-item-actions{display:flex;align-items:center;gap:8px}
        .cart-item-qty{display:flex;align-items:center;border:2px solid #000}
        .cart-item-qty button{width:28px;height:28px;border:none;background:#fff;font-size:16px;cursor:pointer;font-weight:700}
        .cart-item-qty button:active{background:#f5f5f5}
        .cart-item-qty span{width:32px;text-align:center;font-weight:600}
        .cart-item-delete{background:none;border:none;color:#f44336;cursor:pointer;font-size:12px}
        .cart-footer{background:#fff;border-top:2px solid #000;padding:12px;display:flex;justify-content:space-between;align-items:center;flex-shrink:0}
        .cart-total{font-size:16px;font-weight:700}
        .cart-total span{color:#f44336;font-size:20px}
        .cart-checkout-btn{background:#f44336;color:#fff;border:none;padding:12px 24px;font-weight:700;font-size:14px;cursor:pointer}
        .cart-checkout-btn:active{transform:scale(0.98)}
        
        .gift-items-list{max-height:300px;overflow-y:auto}
        .gift-item-option{display:flex;align-items:center;background:#fff;border:2px solid #000;padding:10px;margin-bottom:8px;cursor:pointer;position:relative}
        .gift-item-option:active{background:#f5f5f5}
        .gift-item-option.selected{border-color:#f44336;background:#fff5f5}
        .gift-item-option.selected .gift-item-check{opacity:1}
        .gift-item-emoji{width:50px;height:50px;background:#f5f5f5;border:2px solid #000;display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}
        .gift-item-info{flex:1;margin-left:10px}
        .gift-item-name{font-size:14px;font-weight:600;margin-bottom:4px}
        .gift-item-price{font-size:12px;color:#f44336;font-weight:700}
        .gift-item-check{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:24px;height:24px;background:#f44336;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;opacity:0;transition:opacity 0.2s}
        .gift-item-check i{font-size:12px}
        
        .orders-tabs{display:flex;background:#fff;border-bottom:2px solid #000}
        .orders-tab{flex:1;padding:12px;text-align:center;font-size:12px;font-weight:600;cursor:pointer;border-right:1px solid #eee}
        .orders-tab:last-child{border-right:none}
        .orders-tab.active{color:#f44336;border-bottom:2px solid #f44336}
        .orders-list{padding:8px}
        .order-card{background:#fff;border:2px solid #000;margin-bottom:8px}
        .order-header{display:flex;justify-content:space-between;padding:8px;border-bottom:1px solid #eee;font-size:12px}
        .order-shop{font-weight:600}
        .order-status{color:#f44336}
        .order-items{padding:8px}
        .order-item{display:flex;gap:8px;margin-bottom:8px}
        .order-item-image{width:60px;height:60px;background:#f5f5f5;border:1px solid #eee;display:flex;align-items:center;justify-content:center;font-size:28px}
        .order-item-image i{font-size:20px;color:#ccc}
        .order-item-info{flex:1}
        .order-item-name{font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        .order-item-price{font-size:12px;color:#f44336;font-weight:600}
        .order-footer{display:flex;justify-content:space-between;align-items:center;padding:8px;border-top:1px solid #eee}
        .order-total{font-size:12px}
        .order-total span{color:#f44336;font-weight:700;font-size:14px}
        .order-actions{display:flex;gap:8px}
        .order-btn{padding:6px 12px;border:2px solid #000;font-size:12px;font-weight:600;cursor:pointer;background:#fff}
        .order-btn.primary{background:#000;color:#fff}
        .order-btn:active{transform:scale(0.95)}
        
        .shop-info{padding:20px;background:#fff;border-bottom:2px solid #000}
        .shop-empty{display:flex;flex-direction:column;align-items:center;gap:16px;padding:40px 0}
        .shop-empty i{font-size:48px;color:#ccc}
        .shop-empty p{color:#999;font-size:14px}
        .primary-btn{background:#000;color:#fff;border:2px solid #000;padding:12px 24px;font-weight:700;cursor:pointer}
        .primary-btn:active{transform:scale(0.98)}
        .shop-products{padding:8px}
        .shop-products-header{display:flex;justify-content:space-between;align-items:center;padding:8px;background:#fff;border:2px solid #000;margin-bottom:8px}
        .shop-products-header span{font-weight:700}
        .add-btn{background:#000;color:#fff;border:none;padding:8px 12px;font-size:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:4px}
        .add-btn:active{transform:scale(0.95)}
        .shop-products-list{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
        
        /* 黑白粗野主义风格"我的"页面样式 */
        .mine-page{display:flex;flex-direction:column;background:#f5f5f5;min-height:100%}
        .mine-header{background:#000;padding:24px 16px;position:relative;overflow:hidden}
        .mine-header::before{content:'';position:absolute;top:-30%;right:-20%;width:150px;height:150px;border:3px solid #333;border-radius:50%}
        .mine-header::after{content:'';position:absolute;bottom:-40%;left:-10%;width:120px;height:120px;border:3px solid #333;transform:rotate(45deg)}
        .mine-user-card{display:flex;align-items:center;gap:14px;position:relative;z-index:1}
        .mine-avatar{width:68px;height:68px;border:3px solid #fff;background:#fff;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:800;color:#000;overflow:hidden;cursor:pointer;transition:all .15s;box-shadow:4px 4px 0 #fff}
        .mine-avatar:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #fff}
        .mine-avatar img{width:100%;height:100%;object-fit:cover}
        .mine-user-info{flex:1}
        .mine-username{font-size:18px;font-weight:800;color:#fff;display:flex;align-items:center;gap:8px}
        .mine-vip-badge{background:linear-gradient(135deg,#FFD700,#FFA500);color:#8B4513;font-size:9px;padding:2px 6px;border:2px solid #fff;font-weight:800;letter-spacing:1px}
        
        .mine-order-section{background:#fff;margin:12px;border:3px solid #000;overflow:hidden;box-shadow:4px 4px 0 #000}
        .mine-section-header{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:3px solid #000}
        .mine-section-title{font-size:15px;font-weight:800;color:#000}
        .mine-section-more{font-size:12px;color:#666;display:flex;align-items:center;gap:4px;cursor:pointer;font-weight:600;transition:color .15s}
        .mine-section-more:hover{color:#000}
        .mine-order-grid{display:grid;grid-template-columns:repeat(4,1fr);padding:16px 8px}
        .mine-order-item{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;transition:all .15s;padding:8px}
        .mine-order-item:hover{transform:translateY(-3px)}
        .mine-order-item:hover .mine-order-icon{box-shadow:4px 4px 0 #000}
        .mine-order-icon{width:48px;height:48px;border:3px solid #000;display:flex;align-items:center;justify-content:center;font-size:20px;position:relative;transition:all .15s;box-shadow:2px 2px 0 #000;background:#fff;color:#000}
        .mine-order-badge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;background:#f44336;color:#fff;font-size:10px;border:2px solid #fff;display:flex;align-items:center;justify-content:center;padding:0 4px;font-weight:700}
        .mine-order-label{font-size:12px;color:#333;font-weight:600}
        
        .wallet-page{display:flex;flex-direction:column}
        .wallet-balance{padding:40px 20px;background:#000;color:#fff;text-align:center;border-bottom:3px solid #000}
        .balance-label{font-size:12px;margin-bottom:8px}
        .balance-amount{font-size:36px;font-weight:800}
        .balance-amount::before{content:"¥";font-size:20px;margin-right:4px}
        .wallet-actions{display:flex;gap:12px;padding:20px;border-bottom:3px solid #000}
        .wallet-btn{flex:1;padding:14px;border:2px solid #000;font-weight:700;cursor:pointer;transition:all .15s;font-size:14px}
        .wallet-btn.recharge{background:#fff;color:#000}
        .wallet-btn.withdraw{background:#000;color:#fff}
        .wallet-btn:hover{transform:translate(-2px,-2px);box-shadow:3px 3px 0 #000}
        .wallet-btn:active{transform:translate(2px,2px);box-shadow:none}
        .wallet-records{flex:1;overflow-y:auto;padding:12px}
        .record-item{display:flex;align-items:center;padding:12px;border:2px solid #000;margin-bottom:8px;background:#fff}
        
        .profile-header{padding:30px 20px;background:linear-gradient(135deg,#000 0%,#333 100%);text-align:center;border-bottom:3px solid #000;position:relative;overflow:hidden;cursor:pointer}
        .profile-bg{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;z-index:0}
        .profile-bg-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.3);z-index:1}
        .profile-header-content{position:relative;z-index:2}
        .profile-avatar{width:80px;height:80px;border:3px solid #fff;background:#fff;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:800;color:#000;overflow:hidden;cursor:pointer;position:relative}
        .profile-avatar img{width:100%;height:100%;object-fit:cover}
        .profile-avatar-edit{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.7);color:#fff;font-size:10px;padding:2px;text-align:center}
        .profile-name{font-size:20px;font-weight:800;color:#fff;margin-bottom:4px;cursor:pointer}
        .profile-actions{display:flex;gap:12px;padding:16px;border-bottom:3px solid #000}
        .profile-action-btn{flex:1;padding:14px;border:2px solid #000;background:#fff;font-weight:700;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;transition:all .15s;font-size:14px}
        .profile-action-btn i{font-size:20px}
        .profile-action-btn:hover{background:#000;color:#fff}
        .profile-action-btn:active{transform:translate(2px,2px)}
        .record-icon{width:40px;height:40px;border:2px solid #000;display:flex;align-items:center;justify-content:center;font-size:18px;margin-right:12px}
        .record-icon.income{background:#000;color:#fff}
        .record-icon.expense{background:#fff}
        .record-info{flex:1}
        .record-title{font-weight:700;font-size:14px}
        .record-time{font-size:11px;color:#999;margin-top:2px}
        .record-amount{font-weight:800;font-size:16px}
        .record-amount.income{color:#000}
        .record-amount.expense{color:#666}
        
        .settings-page{display:flex;flex-direction:column}
        .settings-section{padding:12px;border-bottom:3px solid #000}
        .settings-title{font-size:12px;font-weight:800;color:#666;margin-bottom:12px;padding:0 8px}
        .settings-item{display:flex;align-items:center;justify-content:space-between;padding:12px;border:2px solid #000;margin-bottom:8px;background:#fff;cursor:pointer}
        .settings-item:hover{background:#f5f5f5}
        .settings-label{flex:1;font-weight:600}
        .settings-value{font-size:13px;color:#666;margin-right:8px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        .settings-input{flex:1;border:2px solid #000;padding:8px 12px;font-size:14px;outline:none}
        .settings-input:focus{box-shadow:2px 2px 0 #000}
        
        .modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.7);display:none;align-items:center;justify-content:center;z-index:1000}
        .modal-overlay.active{display:flex}
        .modal{width:90%;max-width:360px;background:#fff;border:4px solid #000;max-height:80vh;overflow-y:auto}
        .modal-header{padding:16px;border-bottom:3px solid #000;display:flex;align-items:center;justify-content:space-between}
        .modal-title{font-size:16px;font-weight:800}
        .modal-close{width:32px;height:32px;border:2px solid #000;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px}
        .modal-close:hover{background:#000;color:#fff}
        .modal-body{padding:16px}
        .modal-footer{padding:16px;border-top:3px solid #000;display:flex;gap:12px}
        .modal-btn{flex:1;padding:12px;border:2px solid #000;font-weight:700;cursor:pointer;transition:all .15s}
        .modal-btn.primary{background:#000;color:#fff}
        .modal-btn.secondary{background:#fff}
        .modal-btn.danger{background:#e74c3c;color:#fff;border-color:#e74c3c}
        .modal-btn.danger:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 #c0392b;background:#c0392b}
        .modal-btn:hover{transform:translate(-1px,-1px);box-shadow:2px 2px 0 #000}
        
        .delete-moment-modal{max-width:300px;border:4px solid #000;border-radius:0;overflow:hidden}
        .delete-icon{width:64px;height:64px;margin:0 auto 16px;background:#fff;border:4px solid #000;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:4px 4px 0 rgba(0,0,0,0.1)}
        .delete-icon i{font-size:28px;color:#e74c3c}
        .delete-title{font-size:18px;font-weight:800;margin-bottom:8px}
        .delete-desc{font-size:14px;color:#666;line-height:1.5}
        .delete-footer{display:flex;gap:12px;padding:16px;border-top:4px solid #000}
        
        .avatar-source-btn{flex:1;padding:10px;border:2px solid #000;background:#fff;font-weight:700;cursor:pointer;font-size:12px;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:6px}
        .avatar-source-btn.active{background:#000;color:#fff}
        .avatar-source-btn:hover:not(.active){background:#f5f5f5}
        .avatar-upload-area{border:2px dashed #000;padding:24px;text-align:center;cursor:pointer;transition:all .15s}
        .avatar-upload-area:hover{background:#f5f5f5}
        .avatar-upload-area i{color:#666}
        
        .diary-container{flex:1;overflow-y:auto;padding:16px}
        .diary-bookshelf{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
        .memory-bookshelf{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;padding:16px}
        .memory-bookshelf-empty{grid-column:1/-1;text-align:center;padding:60px 20px}
        .memory-book{border:3px solid #000;border-radius:12px;padding:16px;background:linear-gradient(135deg,#fff 0%,#f8f8f8 100%);cursor:pointer;transition:all 0.2s;box-shadow:4px 4px 0 #000;position:relative;overflow:hidden}
        .memory-book:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #000}
        .memory-book:active{transform:translate(0,0);box-shadow:2px 2px 0 #000}
        .memory-book-avatar{width:48px;height:48px;border-radius:50%;border:2px solid #000;margin-bottom:8px;background:#f0f0f0;display:flex;align-items:center;justify-content:center;font-size:20px;overflow:hidden}
        .memory-book-avatar img{width:100%;height:100%;object-fit:cover}
        .memory-book-name{font-size:14px;font-weight:700;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        .memory-book-stats{font-size:11px;color:#666;display:flex;gap:8px}
        .memory-book-stat{display:flex;align-items:center;gap:2px}
        .memory-book-tabs{display:flex;border-bottom:2px solid #000}
        .memory-book-tab{flex:1;padding:12px;text-align:center;font-size:13px;font-weight:600;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;transition:all 0.2s}
        .memory-book-tab:hover{background:#f5f5f5}
        .memory-book-tab.active{border-bottom-color:#000;background:#fff}
        .memory-book-content{padding:16px;max-height:400px;overflow-y:auto}
        .memory-item{padding:12px;border:2px solid #000;border-radius:8px;margin-bottom:8px;background:#fff;cursor:pointer;transition:all 0.1s}
        .memory-item:hover{background:#f5f5f5}
        .memory-item-content{font-size:13px;line-height:1.4;margin-bottom:4px}
        .memory-item-meta{font-size:11px;color:#999;display:flex;justify-content:space-between}
        .memory-add-btn{border:2px dashed #ccc;border-radius:8px;padding:12px;text-align:center;color:#999;cursor:pointer;transition:all 0.2s;margin-top:8px}
        .memory-add-btn:hover{border-color:#000;color:#000}
        .memory-list-item{display:flex;align-items:center;padding:12px;border:2px solid #000;border-radius:8px;margin-bottom:8px;background:#fff;cursor:pointer;transition:all 0.1s}
        .memory-list-item:hover{background:#f5f5f5}
        .memory-list-content{flex:1;font-size:13px;line-height:1.4}
        .memory-list-meta{font-size:11px;color:#999;margin-top:4px}
        .memory-delete-btn{width:32px;height:32px;border:2px solid #e74c3c;background:#fff;color:#e74c3c;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s;margin-left:8px}
        .memory-delete-btn:hover{background:#e74c3c;color:#fff}
        .memory-list-entry{display:flex;justify-content:space-between;align-items:center;padding:12px;border:2px solid #000;border-radius:8px;margin-bottom:8px;background:#fff;cursor:pointer;transition:all 0.1s}
        .memory-list-entry:hover{background:#f5f5f5;transform:translate(-2px,-2px);box-shadow:4px 4px 0 #000}
        
        .pomodoro-container{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;align-items:center}
        .pomodoro-timer{width:200px;height:200px;border-radius:50%;border:6px solid #000;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff;box-shadow:6px 6px 0 #000;margin-bottom:24px}
        .pomodoro-time{font-size:48px;font-weight:800;font-family:'Courier New',monospace}
        .pomodoro-status{font-size:14px;color:#666;margin-top:8px}
        .pomodoro-controls{display:flex;gap:16px;margin-bottom:24px}
        .pomodoro-btn{width:60px;height:60px;border-radius:50%;border:3px solid #000;background:#000;color:#fff;font-size:24px;cursor:pointer;transition:all .15s;box-shadow:4px 4px 0 #000}
        .pomodoro-btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #000}
        .pomodoro-btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 #000}
        .pomodoro-btn.secondary{background:#fff;color:#000}
        .pomodoro-stats{display:flex;gap:32px;margin-bottom:24px}
        .pomodoro-stat-item{text-align:center}
        .pomodoro-stat-value{font-size:32px;font-weight:800}
        .pomodoro-stat-label{font-size:12px;color:#666;margin-top:4px}
        .pomodoro-tasks{width:100%;max-width:400px}
        .pomodoro-task-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-weight:700}
        .pomodoro-task-list{display:flex;flex-direction:column;gap:8px}
        .pomodoro-task-item{display:flex;align-items:center;gap:12px;padding:12px;border:2px solid #000;background:#fff}
        .pomodoro-task-item.completed{background:#f5f5f5;opacity:.7}
        .pomodoro-task-checkbox{width:24px;height:24px;border:2px solid #000;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
        .pomodoro-task-item.completed .pomodoro-task-checkbox{background:#000;color:#fff}
        .pomodoro-task-name{flex:1;font-weight:600}
        .pomodoro-task-item.completed .pomodoro-task-name{text-decoration:line-through;color:#999}
        .pomodoro-task-delete{width:24px;height:24px;border:none;background:transparent;color:#f44336;cursor:pointer;font-size:14px}
        
        .pomodoro-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.95);z-index:9999;display:flex;align-items:center;justify-content:center;flex-direction:column}
        .pomodoro-overlay-content{text-align:center;color:#fff}
        .pomodoro-overlay-time{font-size:80px;font-weight:800;font-family:'Courier New',monospace;margin-bottom:16px}
        .pomodoro-overlay-status{font-size:20px;color:#fff;opacity:.7;margin-bottom:40px}
        .pomodoro-overlay-controls{display:flex;gap:20px;justify-content:center}
        .pomodoro-overlay-controls .pomodoro-btn{width:70px;height:70px;font-size:28px;background:#fff;color:#000;border-color:#fff;box-shadow:none}
        .pomodoro-overlay-controls .pomodoro-btn.secondary{background:transparent;color:#fff;border-color:#fff}
        
        .love-calendar-container{flex:1;overflow-y:auto;padding:16px}
        
        .nearby-people-container{flex:1;overflow-y:auto}
        .nearby-location-bar{padding:12px 16px;background:#fff;border-bottom:2px solid #000;display:flex;align-items:center;gap:8px;font-size:13px}
        .nearby-location-bar i{color:#f44336}
        .nearby-filter-bar{display:flex;padding:8px 16px;gap:8px;background:#f5f5f5;border-bottom:2px solid #000}
        .nearby-filter-btn{padding:6px 16px;border:2px solid #000;background:#fff;font-weight:600;font-size:12px;cursor:pointer;transition:all .15s}
        .nearby-filter-btn:hover{background:#f0f0f0}
        .nearby-filter-btn.active{background:#000;color:#fff}
        .nearby-people-list{padding:8px 0}
        .nearby-person-item{display:flex;align-items:center;padding:12px 16px;border-bottom:1px solid #eee;cursor:pointer;transition:background .15s}
        .nearby-person-item:hover{background:#f5f5f5}
        .nearby-person-item:last-child{border-bottom:none}
        .nearby-person-avatar{width:50px;height:50px;border-radius:8px;border:2px solid #000;object-fit:cover;margin-right:12px;flex-shrink:0}
        .nearby-person-info{flex:1;min-width:0}
        .nearby-person-name{font-weight:700;font-size:15px;margin-bottom:4px;display:flex;align-items:center;gap:6px}
        .nearby-person-name .gender{font-size:12px}
        .nearby-person-name .gender.male{color:#3498db}
        .nearby-person-name .gender.female{color:#e91e63}
        .nearby-person-distance{font-size:12px;color:#666;margin-bottom:2px}
        .nearby-person-signature{font-size:12px;color:#999;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        .nearby-person-time{font-size:11px;color:#999;text-align:right}
        
        .gacha-container{padding:16px;display:flex;flex-direction:column;align-items:center;gap:16px;height:calc(100vh - 60px);overflow-y:auto}
        .gacha-machine{width:280px;background:linear-gradient(180deg,#ff6b6b 0%,#ee5a5a 100%);border-radius:20px;border:4px solid #000;box-shadow:8px 8px 0 #000;overflow:hidden;position:relative}
        .gacha-machine-body{padding:16px;position:relative}
        .gacha-add-btn{position:absolute;top:8px;left:8px;width:32px;height:32px;border-radius:50%;background:#fff;border:2px solid #000;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;box-shadow:2px 2px 0 #000;transition:all 0.1s;z-index:10}
        .gacha-add-btn:hover{transform:translate(1px,1px);box-shadow:1px 1px 0 #000}
        .gacha-machine-top{text-align:center;color:#fff;margin-bottom:12px}
        .gacha-ball-count{font-size:36px;font-weight:800;text-shadow:2px 2px 0 rgba(0,0,0,0.2)}
        .gacha-ball-count-label{font-size:14px;opacity:0.9}
        .gacha-balls-container{height:150px;background:rgba(255,255,255,0.2);border-radius:12px;border:2px solid #000;display:flex;flex-wrap:wrap;align-content:flex-start;padding:8px;gap:6px;overflow:hidden}
        .gacha-ball{width:36px;height:36px;border-radius:50%;border:2px solid #000;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;cursor:pointer;transition:transform 0.2s;animation:ballPop 0.3s ease-out}
        .gacha-ball:hover{transform:scale(1.1)}
        @keyframes ballPop{0%{transform:scale(0)}100%{transform:scale(1)}}
        .gacha-machine-bottom{padding:12px;text-align:center}
        .gacha-pull-btn{background:#fff;color:#000;border:3px solid #000;padding:12px 24px;font-size:16px;font-weight:700;border-radius:30px;cursor:pointer;box-shadow:4px 4px 0 #000;transition:all 0.1s}
        .gacha-pull-btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 #000}
        .gacha-pull-btn:active{transform:translate(4px,4px);box-shadow:none}
        .gacha-question-list{width:100%;max-width:400px}
        .gacha-question-item{background:#fff;border:2px solid #000;padding:12px;margin-bottom:8px;border-radius:8px;box-shadow:3px 3px 0 #000}
        .gacha-question-text{font-size:14px;line-height:1.4}
        .gacha-question-actions{display:flex;gap:8px;margin-top:8px}
        .gacha-question-btn{font-size:12px;padding:4px 8px;border:1px solid #000;background:#f5f5f5;cursor:pointer;border-radius:4px}
        .gacha-question-btn:hover{background:#e0e0e0}
        .gacha-edit-list{max-height:200px;overflow-y:auto;border:2px solid #000;border-radius:8px}
        .gacha-edit-item{display:flex;align-items:center;padding:8px;border-bottom:1px solid #eee;gap:8px}
        .gacha-edit-item:last-child{border-bottom:none}
        .gacha-edit-text{flex:1;font-size:13px;line-height:1.4}
        .gacha-edit-btn{width:28px;height:28px;border:1px solid #000;background:#fff;cursor:pointer;border-radius:4px;display:flex;align-items:center;justify-content:center;color:#e74c3c}
        
        .divination-container{padding:16px;display:flex;flex-direction:column;align-items:center;gap:16px;height:calc(100vh - 60px);overflow-y:auto;background:#fff}
        .divination-menu{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;width:100%;max-width:400px}
        .divination-card{background:#fff;border:3px solid #000;padding:20px;border-radius:8px;box-shadow:4px 4px 0 #000;cursor:pointer;transition:all 0.15s;text-align:center}
        .divination-card:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #000}
        .divination-card:active{transform:translate(2px,2px);box-shadow:2px 2px 0 #000}
        .divination-card-icon{font-size:32px;margin-bottom:8px}
        .divination-card-title{font-size:14px;font-weight:700;color:#000}
        .divination-card-desc{font-size:11px;color:#666;margin-top:4px}
        
        .tarot-container{width:100%;max-width:400px;text-align:center}
        .tarot-deck{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:20px 0}
        .tarot-card{width:70px;height:110px;background:#fff;border:2px solid #000;border-radius:6px;cursor:pointer;transition:all 0.3s;position:relative;box-shadow:2px 2px 0 #000}
        .tarot-card:hover{transform:translateY(-10px);box-shadow:4px 4px 0 #000}
        .tarot-card.selected{background:#000;color:#fff;transform:translateY(-15px)}
        .tarot-card.flipped{background:#fff}
        .tarot-card-back{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:24px;background:linear-gradient(45deg,#000 25%,#222 25%,#222 50%,#000 50%,#000 75%,#222 75%);background-size:10px 10px;border-radius:4px}
        .tarot-card-front{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px}
        .tarot-card-name{font-size:10px;font-weight:700;text-align:center}
        .tarot-card-icon{font-size:28px;margin:4px 0}
        .tarot-result{background:#fff;border:3px solid #000;padding:16px;border-radius:8px;box-shadow:4px 4px 0 #000;text-align:left;margin-top:16px}
        .tarot-result-title{font-size:16px;font-weight:700;margin-bottom:12px;text-align:center;border-bottom:2px solid #000;padding-bottom:8px}
        .tarot-result-card{margin-bottom:12px}
        .tarot-result-card-name{font-weight:700;font-size:14px}
        .tarot-result-card-meaning{font-size:12px;color:#333;margin-top:4px;line-height:1.5}
        
        .dice-container{text-align:center}
        .dice-display{display:flex;justify-content:center;gap:16px;margin:20px 0}
        .dice{width:80px;height:80px;background:#fff;border:3px solid #000;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;box-shadow:4px 4px 0 #000;transition:all 0.3s}
        .dice.rolling{animation:diceRoll 0.5s ease-in-out}
        @keyframes diceRoll{0%,100%{transform:rotate(0deg)}25%{transform:rotate(15deg)}75%{transform:rotate(-15deg)}}
        .dice-label{font-size:12px;color:#666;margin-top:8px}
        .dice-result{background:#fff;border:3px solid #000;padding:16px;border-radius:8px;box-shadow:4px 4px 0 #000;margin-top:16px;text-align:left}
        
        .crystal-ball-container{text-align:center}
        .crystal-ball{width:200px;height:200px;margin:20px auto;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff 0%,#ccc 30%,#999 60%,#666 100%);border:3px solid #000;box-shadow:8px 8px 0 #000,inset 0 0 30px rgba(255,255,255,0.5);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.3s;position:relative;overflow:hidden}
        .crystal-ball:hover{box-shadow:10px 10px 0 #000,inset 0 0 40px rgba(255,255,255,0.6)}
        .crystal-ball.glowing{animation:crystalGlow 1s ease-in-out infinite}
        @keyframes crystalGlow{0%,100%{box-shadow:8px 8px 0 #000,inset 0 0 30px rgba(255,255,255,0.5)}50%{box-shadow:8px 8px 0 #000,inset 0 0 50px rgba(255,255,255,0.8)}}
        .crystal-ball-text{font-size:14px;font-weight:700;color:#000;text-shadow:0 0 10px #fff;z-index:1}
        .crystal-result{background:#fff;border:3px solid #000;padding:16px;border-radius:8px;box-shadow:4px 4px 0 #000;margin-top:16px}
        
        .lot-container{text-align:center}
        .lot-box{width:120px;height:200px;margin:20px auto;background:linear-gradient(180deg,#8B4513 0%,#654321 100%);border:3px solid #000;border-radius:8px;box-shadow:4px 4px 0 #000;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all 0.3s;position:relative}
        .lot-box:hover{transform:translateY(-5px);box-shadow:6px 6px 0 #000}
        .lot-box.shaking{animation:lotShake 0.5s ease-in-out}
        @keyframes lotShake{0%,100%{transform:rotate(0deg)}20%{transform:rotate(-5deg)}40%{transform:rotate(5deg)}60%{transform:rotate(-3deg)}80%{transform:rotate(3deg)}}
        .lot-stick{width:8px;height:80px;background:#fff;border:2px solid #000;margin:2px;transition:all 0.3s}
        .lot-stick.pulled{transform:translateY(-60px)}
        .lot-result{background:#fff;border:3px solid #000;padding:16px;border-radius:8px;box-shadow:4px 4px 0 #000;margin-top:16px}
        .lot-number{font-size:36px;font-weight:800;text-align:center;margin-bottom:8px}
        .lot-type{font-size:14px;font-weight:700;text-align:center;margin-bottom:8px}
        .lot-content{font-size:13px;line-height:1.6}
        
        .fortune-container{text-align:center}
        .fortune-wheel{width:250px;height:250px;margin:20px auto;border-radius:50%;border:4px solid #000;box-shadow:6px 6px 0 #000;position:relative;background:conic-gradient(from 0deg,#fff 0deg 45deg,#000 45deg 90deg,#fff 90deg 135deg,#000 135deg 180deg,#fff 180deg 225deg,#000 225deg 270deg,#fff 270deg 315deg,#000 315deg 360deg);transition:transform 3s cubic-bezier(0.17,0.67,0.12,0.99)}
        .fortune-wheel-pointer{position:absolute;top:-15px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:15px solid transparent;border-right:15px solid transparent;border-top:20px solid #000}
        .fortune-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60px;height:60px;background:#fff;border:3px solid #000;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px}
        .fortune-result{background:#fff;border:3px solid #000;padding:16px;border-radius:8px;box-shadow:4px 4px 0 #000;margin-top:16px}
        .fortune-score{font-size:48px;font-weight:800;text-align:center}
        .fortune-aspects{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:12px}
        .fortune-aspect{background:#f5f5f5;border:2px solid #000;padding:8px;border-radius:4px}
        .fortune-aspect-name{font-size:12px;font-weight:700}
        .fortune-aspect-score{font-size:16px;font-weight:800}
        
        .divination-btn{background:#fff;color:#000;border:3px solid #000;padding:12px 32px;font-size:14px;font-weight:700;border-radius:8px;cursor:pointer;box-shadow:4px 4px 0 #000;transition:all 0.15s;margin-top:16px}
        .divination-btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #000}
        .divination-btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 #000}
        .divination-btn:disabled{opacity:0.5;cursor:not-allowed}
        
        .divination-back{display:flex;align-items:center;gap:8px;margin-bottom:16px;cursor:pointer;font-weight:600}
        .divination-title{font-size:20px;font-weight:800;text-align:center;margin-bottom:8px}
        .divination-subtitle{font-size:12px;color:#666;text-align:center;margin-bottom:16px}
        .gacha-edit-btn:hover{background:#e74c3c;color:#fff}
        .gacha-result-modal{text-align:center}
        .gacha-result-ball{width:80px;height:80px;border-radius:50%;border:3px solid #000;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;animation:ballBounce 0.5s ease-out}
        @keyframes ballBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}
        .gacha-result-question{font-size:16px;font-weight:600;margin-bottom:16px;line-height:1.5}
        .gacha-result-answer{background:#f5f5f5;border:2px solid #000;padding:12px;border-radius:8px;text-align:left;margin-top:12px;max-height:200px;overflow-y:auto}
        .nearby-empty{text-align:center;padding:60px 20px;color:#999}
        .nearby-empty i{font-size:48px;margin-bottom:16px;opacity:.3}
        .nearby-empty p{font-size:14px}
        .love-calendar-bookshelf{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
        .love-calendar-item{aspect-ratio:3/4;border-radius:8px;padding:16px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;cursor:pointer;background-size:cover;background-position:center;position:relative;overflow:hidden;box-shadow:4px 4px 0 #000;transition:all .15s ease;border:3px solid #000;background-color:#ff6b6b}
        .love-calendar-item::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.6) 100%);pointer-events:none;z-index:1}
        .love-calendar-item:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #000}
        .love-calendar-item-title{font-size:1.1rem;font-weight:800;text-shadow:0 2px 4px rgba(0,0,0,.8);position:relative;z-index:2;letter-spacing:.5px;padding:4px 8px}
        .love-calendar-item-stats{position:relative;z-index:2;font-size:12px;opacity:.9;padding:4px 8px}
        .love-calendar-add{aspect-ratio:3/4;border-radius:8px;padding:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#999;cursor:pointer;border:3px dashed #000;background:#f5f5f5;transition:all .15s ease}
        .love-calendar-add:hover{background:#eee;color:#666}
        .love-calendar-add i{font-size:32px;margin-bottom:8px}
        
        .love-calendar-view{padding:16px}
        .love-calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
        .love-calendar-nav{display:flex;gap:8px}
        .love-calendar-nav button{padding:8px 12px;border:2px solid #000;background:#fff;font-weight:700;cursor:pointer}
        .love-calendar-nav button:hover{background:#000;color:#fff}
        .love-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:16px}
        .love-calendar-weekday{text-align:center;font-weight:700;font-size:12px;padding:8px 0;color:#666}
        .love-calendar-day{aspect-ratio:1;border:2px solid #000;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:700;font-size:14px;cursor:pointer;background:#fff;transition:all .15s}
        .love-calendar-day:hover{background:#f5f5f5}
        .love-calendar-day.today{background:#000;color:#fff}
        .love-calendar-day.has-mood{position:relative}
        .love-calendar-day .mood-indicator{position:absolute;bottom:4px;width:8px;height:8px;border-radius:50%}
        .love-calendar-day.other-month{opacity:.3}
        
        .mood-selector{display:flex;gap:8px;flex-wrap:wrap;padding:16px}
        .mood-item{width:60px;height:60px;border:2px solid #000;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;background:#fff}
        .mood-item:hover{transform:scale(1.1)}
        .mood-item.selected{background:#000;color:#fff}
        .mood-icon{font-size:24px;margin-bottom:4px}
        .mood-label{font-size:10px;font-weight:700}
        
        .custom-bubble-preview-container .message-content{padding:8px 12px;max-width:70%;display:inline-block}
        .custom-bubble-preview-container .message{display:flex}
        
        .diary-book-item{aspect-ratio:3/4;border-radius:8px;padding:16px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;cursor:pointer;background-size:cover;background-position:center;position:relative;overflow:hidden;box-shadow:4px 4px 0 #000;transition:all .15s ease;border:3px solid #000;background-color:#1a1a1a}
        .diary-book-item::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.6) 100%);pointer-events:none;z-index:1}
        .diary-book-item:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #000}
        .diary-book-item-title{font-size:1.1rem;font-weight:800;text-shadow:0 2px 4px rgba(0,0,0,.8);position:relative;z-index:2;letter-spacing:.5px;padding:4px 8px}
        .diary-cover-edit-btn{position:absolute;top:8px;right:8px;width:28px;height:28px;background:#fff;color:#000;border:2px solid #000;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:all .15s ease;z-index:10}
        .diary-book-item:hover .diary-cover-edit-btn{opacity:1}
        .diary-cover-edit-btn:hover{background:#000;color:#fff}
        
        .diary-book-container{position:relative;width:92vw;max-width:420px;height:85vh;max-height:680px}
        .diary-book{width:100%;height:100%;background:#fff;border:4px solid #000;display:flex;flex-direction:column;overflow:hidden;box-shadow:8px 8px 0 #000}
        .diary-cover{background:#000;background-size:cover;background-position:center;padding:20px 16px;text-align:center;position:relative;flex-shrink:0;border-bottom:4px solid #000}
        .diary-cover::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);pointer-events:none}
        .diary-cover h2{font-size:1.4rem;font-weight:800;color:#fff;margin-bottom:6px;position:relative;z-index:2;padding:6px 12px;display:block}
        .diary-cover p{font-size:.85rem;color:#fff;font-weight:600;position:relative;z-index:2;padding:4px 8px;display:block;cursor:pointer;transition:all .15s}
        .diary-cover p:hover{background:#fff;color:#000}
        .diary-pages{flex:1;overflow-y:auto;padding:20px 16px;background:#fff;position:relative}
        .diary-pages::before{content:'';position:absolute;top:0;left:40px;right:0;bottom:0;border-left:2px dashed #ccc;pointer-events:none}
        .diary-page-content{position:relative;z-index:1;min-height:100%;padding-left:16px}
        .diary-delete-btn{width:28px;height:28px;border:2px solid #000;background:#fff;color:#000;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;margin-bottom:12px}
        .diary-delete-btn:hover{background:#000;color:#fff}
        .diary-page-text{font-size:14px;line-height:1.8;color:#333;min-height:180px;outline:none;padding:8px 0;background:transparent;font-family:inherit}
        .diary-page-text:focus{background:rgba(0,0,0,.02)}
        .diary-close-btn{position:absolute;top:8px;right:8px;width:28px;height:28px;background:#fff;color:#000;border:2px solid #000;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;z-index:20;transition:all .15s}
        .diary-close-btn:hover{background:#000;color:#fff}
        .diary-nav-btn{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px;background:#fff;color:#000;border:3px solid #000;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;box-shadow:2px 2px 0 #000;z-index:20;transition:all .15s}
        .diary-nav-btn:hover{background:#000;color:#fff;transform:translateY(-50%) translate(-1px,-1px);box-shadow:3px 3px 0 #000}
        .diary-prev-btn{left:-16px}
        .diary-next-btn{right:-16px}
        .diary-add-btn{position:absolute;bottom:12px;right:12px;width:36px;height:36px;background:#000;color:#fff;border:3px solid #000;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;box-shadow:3px 3px 0 #666;z-index:20;transition:all .15s}
        .diary-add-btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 #666}
        .diary-date-option{padding:12px 16px;border:2px solid #000;margin:4px 0;cursor:pointer;font-weight:600;transition:all .15s}
        .diary-date-option:hover{background:#f5f5f5}
        .diary-date-option.active{background:#000;color:#fff}
        .generator-item{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border:2px solid #000;margin-bottom:8px;background:#fff;cursor:pointer;transition:all .15s}
        .generator-item:hover{background:#f5f5f5}
        .generator-checkbox{width:20px;height:20px;cursor:pointer}
        
        .form-group{margin-bottom:16px}
        .form-label{display:block;font-weight:700;font-size:12px;margin-bottom:6px}
        .form-input{width:100%;border:2px solid #000;padding:10px 12px;font-size:14px;outline:none}
        .form-input:focus{box-shadow:3px 3px 0 #000}
        .form-select{width:100%;border:2px solid #000;padding:10px 12px;font-size:14px;outline:none;background:#fff;cursor:pointer}
        .form-textarea{width:100%;border:2px solid #000;padding:10px 12px;font-size:14px;outline:none;resize:vertical;min-height:80px}
        .form-textarea:focus{box-shadow:3px 3px 0 #000}
        
        .model-select-container{position:relative}
        .model-select-input{width:100%;border:2px solid #000;padding:10px 60px 10px 12px;font-size:14px;outline:none;background:#fff;cursor:pointer}
        .model-select-input:focus{box-shadow:3px 3px 0 #000}
        .model-search-btn{position:absolute;right:32px;top:50%;transform:translateY(-50%);color:#666;cursor:pointer;padding:4px;transition:color .2s}
        .model-search-btn:hover{color:#000}
        .model-select-arrow{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#666;pointer-events:none;transition:transform .2s}
        .model-select-arrow.open{transform:translateY(-50%) rotate(180deg)}
        .model-search-box{position:absolute;top:100%;left:0;right:0;background:#fff;border:2px solid #000;border-bottom:none;padding:8px;display:none;z-index:101}
        .model-search-box.show{display:block}
        .model-search-input{width:100%;border:2px solid #000;padding:8px 10px;font-size:14px;outline:none}
        .model-search-input:focus{box-shadow:2px 2px 0 #000}
        .model-dropdown{position:absolute;top:100%;left:0;right:0;background:#fff;border:2px solid #000;border-top:none;max-height:200px;overflow-y:auto;display:none;z-index:100}
        .model-dropdown.show{display:block}
        .model-dropdown.with-search{top:52px}
        .model-option{padding:10px 12px;cursor:pointer;border-bottom:1px solid #eee;font-size:14px}
        .model-option:last-child{border-bottom:none}
        .model-option:hover{background:#f5f5f5}
        .model-option.selected{background:#000;color:#fff}
        .model-option.hidden{display:none}
        .fetch-models-btn{width:100%;padding:10px;border:2px solid #000;background:#fff;font-weight:700;cursor:pointer;font-size:14px;margin-top:8px;transition:all .15s}
        .fetch-models-btn:hover{background:#000;color:#fff}
        .fetch-models-btn:active{transform:translate(2px,2px)}
        
        .temp-slider-container{width:100%;padding:10px 0}
        .temp-slider{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:4px;background:linear-gradient(90deg,#000 0%,#333 50%,#000 100%);outline:none;cursor:pointer}
        .temp-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid #000;cursor:pointer;box-shadow:2px 2px 0 #000;transition:transform .15s,box-shadow .15s}
        .temp-slider::-webkit-slider-thumb:hover{transform:scale(1.1);box-shadow:3px 3px 0 #000}
        .temp-slider::-webkit-slider-thumb:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #000}
        .temp-slider::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid #000;cursor:pointer;box-shadow:2px 2px 0 #000}
        .temp-labels{display:flex;justify-content:space-between;margin-top:8px;font-size:12px;color:#666}
        .temp-labels span:nth-child(2){font-weight:700;color:#000;font-size:14px}
        
        .toggle-switch{position:relative;width:50px;height:28px;flex-shrink:0;display:inline-block}
        .toggle-switch input{position:absolute;opacity:0;width:100%;height:100%;top:0;left:0;z-index:1;cursor:pointer}
        .toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#fff;border:2px solid #000;transition:.2s;border-radius:14px}
        .toggle-slider:before{position:absolute;content:"";height:20px;width:20px;left:2px;bottom:2px;background:#fff;border:2px solid #000;transition:.2s;border-radius:50%}
        .toggle-switch input:checked+.toggle-slider{background:#000}
        .toggle-switch input:checked+.toggle-slider:before{transform:translateX(22px);background:#fff}
        
        .personas-list{max-height:300px;overflow-y:auto}
        .persona-item{display:flex;align-items:center;padding:12px;border:2px solid #000;margin-bottom:8px;background:#fff;cursor:pointer;transition:all .15s}
        .persona-item:hover{background:#f5f5f5}
        .persona-item.selected{background:#000;color:#fff}
        .persona-avatar{width:40px;height:40px;border:2px solid #000;overflow:hidden;margin-right:12px;flex-shrink:0}
        .persona-avatar img{width:100%;height:100%;object-fit:cover}
        .persona-name{font-weight:700}
        
        .worldbook-item{padding:12px;border:2px solid #000;margin-bottom:8px;background:#fff}
        .worldbook-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
        .worldbook-name{font-weight:700}
        .worldbook-toggle{width:40px;height:22px;border:2px solid #000;background:#fff;position:relative;cursor:pointer}
        .worldbook-toggle.active{background:#000}
        .worldbook-toggle::after{content:"";position:absolute;width:14px;height:14px;background:#000;top:2px;left:2px;transition:all .15s}
        .worldbook-toggle.active::after{left:20px;background:#fff}
        .worldbook-content{font-size:13px;color:#666;line-height:1.5}
        
        .preset-item{padding:12px;border:2px solid #000;margin-bottom:8px;background:#fff}
        .preset-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
        .preset-name{font-weight:700}
        .preset-toggle{width:40px;height:22px;border:2px solid #000;background:#fff;position:relative;cursor:pointer}
        .preset-toggle.active{background:#000}
        .preset-toggle::after{content:"";position:absolute;width:14px;height:14px;background:#000;top:2px;left:2px;transition:all .15s}
        .preset-toggle.active::after{left:20px;background:#fff}
        .preset-content{font-size:13px;color:#666;line-height:1.5}
        .preset-tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:8px}
        
        .empty-state{text-align:center;padding:40px 20px;color:#999}
        .empty-state i{font-size:48px;margin-bottom:16px}
        .empty-state p{font-size:14px}
        .dropdown-menu{position:absolute;background:#fff;border:2px solid #000;box-shadow:4px 4px 0 #000;z-index:100;min-width:150px}
        .dropdown-item{padding:12px 16px;cursor:pointer;font-weight:600;display:flex;align-items:center;gap:8px;transition:all .15s}
        .dropdown-item:hover{background:#000;color:#fff}
        .dropdown-item:not(:last-child){border-bottom:2px solid #000}
        
        .toast{position:fixed;top:20px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.8);color:#fff;padding:12px 24px;font-weight:700;z-index:2000;opacity:0;transition:opacity .3s;pointer-events:none;border-radius:8px;white-space:nowrap;display:flex;align-items:center}
        .toast.show{opacity:1}
        .toast-loading{background:rgba(0,0,0,0.9);min-width:150px}
        .toast-success{background:rgba(39,174,96,0.9)}
        .toast-error{background:rgba(231,76,60,0.9)}
        .toast-progress{position:absolute;bottom:0;left:0;height:3px;background:#FFE135;transition:width 0.3s;border-radius:0 0 8px 8px}
        
        .header-title{cursor:pointer;transition:opacity .15s}
        .header-title:hover{opacity:.7}
        .header-title:active{opacity:.5}
        
        .loading{display:inline-block;width:20px;height:20px;border:2px solid #fff;border-top-color:transparent;border-radius:50%;animation:spin .8s linear infinite}
        @keyframes spin{to{transform:rotate(360deg)}}
        
        .typing-indicator{display:flex;gap:4px;padding:10px 14px;border:2px solid #000;background:#fff;width:fit-content}
        .typing-dot{width:8px;height:8px;background:#000;border-radius:50%;animation:typing 1.4s infinite}
        .typing-dot:nth-child(2){animation-delay:.2s}
        .typing-dot:nth-child(3){animation-delay:.4s}
        @keyframes typing{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-8px)}}
        
        ::-webkit-scrollbar{width:6px}
        ::-webkit-scrollbar-track{background:#f0f0f0}
        ::-webkit-scrollbar-thumb{background:#000}
        
        /* ========================================
           新版预设管理器样式 - Neo-Brutalism
           ======================================== */
        
        .st-preset-page{position:fixed;inset:0;height:100dvh;background:#fff;z-index:1100;overflow:hidden;display:none}
        .st-preset-page.show{display:block}
        
        .st-preset-list-view,.st-preset-edit-view{position:absolute;inset:0;display:none;flex-direction:column}
        .st-preset-list-view.show,.st-preset-edit-view.show{display:flex}
        
        .st-preset-nav{display:flex;align-items:center;padding:0 16px;height:56px;background:#fff;border-bottom:2px solid #000;flex-shrink:0;position:relative}
        .st-back-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;background:#fff;border:2px solid #000;flex-shrink:0}
        .st-back-btn:active{background:#000;color:#fff}
        .st-back-btn::before{content:'';width:8px;height:8px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateX(1px)}
        .st-preset-title{position:absolute;left:50%;transform:translateX(-50%);font-size:15px;font-weight:700}
        .st-editable-title{cursor:pointer;padding:4px 8px;border:2px solid transparent}
        .st-editable-title:hover{border-color:#000}
        
        .st-nav-actions{position:absolute;right:16px;display:flex;gap:8px}
        .st-nav-add-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;background:#000;border:2px solid #000}
        .st-nav-add-btn svg{width:18px;height:18px;stroke:#fff}
        .st-nav-add-btn:active{background:#333}
        .st-nav-dropdown{position:absolute;top:48px;right:0;background:#fff;border:2px solid #000;opacity:0;visibility:hidden;transform:translateY(-4px);transition:all .15s ease;z-index:100;min-width:140px}
        .st-nav-dropdown.show{opacity:1;visibility:visible;transform:translateY(0)}
        .st-nav-dropdown-item{display:flex;align-items:center;gap:10px;width:100%;padding:12px 14px;background:#fff;border:none;font-size:13px;font-weight:700;cursor:pointer;text-align:left}
        .st-nav-dropdown-item:hover{background:#000;color:#fff}
        .st-nav-dropdown-item svg{width:16px;height:16px;flex-shrink:0}
        .st-nav-dropdown-item:not(:last-child){border-bottom:1px solid #000}
        
        .st-nav-action-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;background:#fff;border:2px solid #000}
        .st-nav-action-btn svg{width:18px;height:18px}
        .st-nav-action-btn:active{background:#f5f5f5}
        .st-nav-action-btn-danger{background:#000;color:#fff}
        
        .st-preset-list-scroll{flex:1;overflow-y:auto;overflow-x:hidden;background:#fff;padding:16px}
        .st-preset-list-scroll::-webkit-scrollbar{width:8px}
        .st-preset-list-scroll::-webkit-scrollbar-track{background:#fff}
        .st-preset-list-scroll::-webkit-scrollbar-thumb{background:#000}
        
        .st-preset-list{display:flex;flex-direction:column;gap:12px}
        .st-preset-empty{padding:60px 20px;text-align:center;font-size:14px;font-weight:600;color:#666}
        .st-preset-empty::before{content:'[ ]';display:block;font-size:36px;margin-bottom:16px;font-family:monospace;color:#000}
        
        .st-preset-card{background:#fff;border:2px solid #000;cursor:pointer}
        .st-preset-card:active{background:#f5f5f5}
        .st-preset-card.selected{background:#000;color:#fff}
        .st-preset-card.selected .st-preset-card-meta{color:#ccc}
        .st-preset-card-main{display:flex;align-items:center;padding:16px;gap:12px}
        .st-preset-card-icon{width:48px;height:48px;background:#000;color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;flex-shrink:0}
        .st-preset-card.selected .st-preset-card-icon{background:#fff;color:#000}
        .st-preset-card-info{flex:1;min-width:0}
        .st-preset-card-name{font-size:16px;font-weight:700;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        .st-preset-card-meta{display:flex;gap:12px;font-size:12px;color:#666}
        .st-preset-card-actions{display:flex;gap:6px;flex-shrink:0}
        .st-preset-card-btn{width:36px;height:36px;background:#fff;border:2px solid #000;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#000}
        .st-preset-card-btn svg{width:16px;height:16px;stroke:currentColor}
        .st-preset-card-btn:active{background:#f5f5f5}
        .st-preset-card-btn-danger{background:#e74c3c;color:#fff;border-color:#e74c3c}
        .st-preset-card-btn-danger:active{background:#c0392b}
        .st-preset-card.selected .st-preset-card-btn{border-color:#fff;background:#000;color:#fff}
        .st-preset-card.selected .st-preset-card-btn-danger{background:#e74c3c;color:#fff;border-color:#e74c3c}
        
        .st-content-scroll{flex:1;overflow-y:auto;overflow-x:hidden;background:#fff}
        .st-content-scroll::-webkit-scrollbar{width:8px}
        .st-content-scroll::-webkit-scrollbar-track{background:#fff}
        .st-content-scroll::-webkit-scrollbar-thumb{background:#000}
        
        .st-prompt-list{padding:16px;display:flex;flex-direction:column;gap:8px}
        
        .st-prompt-item{background:#fff;border:2px solid #000;position:relative}
        .st-prompt-item.dragging{opacity:.5}
        .st-prompt-item.expanded{background:#f5f5f5}
        
        .st-prompt-header{display:flex;align-items:center;padding:12px;gap:10px;cursor:pointer}
        .st-prompt-main{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
        
        .st-prompt-drag{font-size:16px;cursor:grab;opacity:.4;user-select:none;padding:8px;margin:-8px;touch-action:none;position:relative}
        .st-prompt-item:hover .st-prompt-drag{opacity:1}
        .st-prompt-drag::before{content:'';position:absolute;left:-12px;top:-8px;right:-12px;bottom:-8px}
        
        .st-prompt-toggle{width:40px;height:22px;background:#fff;border:2px solid #000;position:relative;cursor:pointer;flex-shrink:0}
        .st-prompt-toggle::after{content:'';position:absolute;width:14px;height:14px;background:#fff;border:2px solid #000;top:2px;left:2px}
        .st-prompt-toggle.on{background:#000}
        .st-prompt-toggle.on::after{left:20px}
        
        .st-prompt-sys-tag{font-size:9px;font-weight:700;color:#fff;background:#000;padding:3px 6px;flex-shrink:0}
        .st-prompt-position-tag{font-size:9px;font-weight:700;border:1px solid #000;padding:2px 5px;flex-shrink:0}
        
        .st-prompt-name-display{flex:1;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        
        .st-prompt-expand-icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center;font-size:9px;flex-shrink:0}
        .st-prompt-item.expanded .st-prompt-expand-icon{transform:rotate(180deg)}
        
        .st-prompt-tools{display:flex;align-items:center;gap:6px;flex-shrink:0}
        .st-prompt-token{font-size:10px;font-weight:700;background:#f5f5f5;border:1px solid #000;padding:2px 6px}
        .st-prompt-edit-btn{height:28px;padding:0 10px;background:#fff;border:2px solid #000;font-size:12px;font-weight:700;cursor:pointer}
        .st-prompt-edit-btn:active{background:#f5f5f5}
        .st-prompt-delete{width:28px;height:28px;background:#fff;border:2px solid #000;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center}
        .st-prompt-delete:hover{background:#000;color:#fff}
        
        .st-prompt-preview{padding:0 12px 12px;display:none}
        .st-prompt-item.expanded .st-prompt-preview{display:block}
        .st-prompt-preview-content{background:#fff;border:2px solid #000;padding:12px;font-size:12px;line-height:1.6;white-space:pre-wrap;word-break:break-word;max-height:160px;overflow-y:auto;font-family:monospace}
        
        .st-prompt-meta{display:flex;gap:12px;padding:10px 12px;border-top:2px solid #000;background:#fff;display:none}
        .st-prompt-item.expanded .st-prompt-meta{display:flex}
        .st-prompt-meta-item{display:flex;align-items:center;gap:4px;font-size:10px}
        .st-prompt-meta-label{font-weight:700}
        .st-prompt-meta-value{font-weight:600}
        
        .st-preset-btn{height:40px;padding:0 16px;background:#fff;border:2px solid #000;font-size:13px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
        .st-preset-btn:active{background:#f5f5f5}
        .st-preset-btn.primary{background:#000;color:#fff}
        .st-preset-btn.primary:active{background:#333}
        .st-preset-btn.danger{background:#000;color:#fff}
        
        .favor-type-btn{padding:8px 20px;border:2px solid #000;background:#fff;font-weight:700;font-size:13px;cursor:pointer;transition:all .15s}
        .favor-type-btn:hover{background:#f5f5f5}
        .favor-type-btn.active{background:#000;color:#fff}
        
        .st-edit-modal,.st-confirm-modal,.st-input-modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;z-index:30020;padding:16px}
        .st-edit-modal.show,.st-confirm-modal.show,.st-input-modal.show{display:flex}
        
        .st-edit-box,.st-confirm-box,.st-input-box{animation:modalIn .15s ease}
        @keyframes modalIn{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}
        
        .st-edit-box{width:min(600px,96vw);max-height:90vh;background:#fff;border:2px solid #000;display:flex;flex-direction:column;overflow:hidden}
        .st-edit-modal-head{display:flex;align-items:center;gap:10px;padding:16px;border-bottom:2px solid #000;flex-shrink:0}
        .st-edit-modal-head .st-edit-name{flex:1;height:36px;margin:0}
        .st-edit-close{width:32px;height:32px;background:#fff;border:2px solid #000;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center}
        .st-edit-close:active{background:#f5f5f5}
        .st-edit-simple-form{padding:16px;display:flex;flex-direction:column;gap:12px;overflow-y:auto;flex:1}
        .st-edit-name{width:100%;height:40px;padding:0 12px;background:#fff;border:2px solid #000;font-size:14px;font-weight:600;outline:none}
        .st-edit-name:focus{border-color:#000}
        .st-edit-name::placeholder{color:#999}
        .st-edit-simple-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
        .st-edit-select{width:100%;height:40px;padding:0 12px;background:#fff;border:2px solid #000;font-size:13px;outline:none;cursor:pointer;font-weight:600}
        .st-edit-metrics-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
        .st-edit-depth{display:flex;align-items:center;gap:8px;padding:0 12px;background:#fff;border:2px solid #000;height:40px}
        .st-edit-depth span{font-size:11px;font-weight:700}
        .st-edit-depth input{flex:1;height:100%;background:transparent;border:none;font-size:13px;font-weight:600;text-align:center;outline:none}
        .st-edit-content{width:100%;min-height:200px;padding:12px;background:#fff;border:2px solid #000;font-size:13px;line-height:1.6;resize:vertical;outline:none;font-family:monospace}
        .st-edit-content::placeholder{color:#999}
        .st-edit-footer{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:12px 16px;border-top:2px solid #000;background:#fff;flex-shrink:0}
        .st-edit-footer .st-preset-btn{min-width:80px;height:36px}
        
        .st-confirm-box{width:min(320px,92vw);background:#fff;border:2px solid #000;padding:24px;text-align:center}
        .st-confirm-title{font-size:14px;font-weight:600;margin-bottom:20px;line-height:1.5}
        .st-confirm-actions{display:flex;gap:10px}
        .st-confirm-actions .st-preset-btn{flex:1;height:40px}
        
        .st-input-box{width:min(320px,92vw);background:#fff;border:2px solid #000;padding:24px;text-align:center}
        .st-input-title{font-size:14px;font-weight:700;margin-bottom:16px}
        .st-input-field{width:100%;height:40px;padding:0 12px;background:#fff;border:2px solid #000;font-size:14px;text-align:center;outline:none}
        .st-input-field::placeholder{color:#999}
        .st-input-actions{display:flex;gap:10px;margin-top:16px}
        .st-input-actions .st-preset-btn{flex:1;height:40px}
        
        /* 正则管理弹窗 */
        .st-regex-modal,.st-regex-edit-modal{position:fixed;inset:0;background:rgba(0,0,0,.7);display:none;align-items:center;justify-content:center;z-index:30010;padding:24px}
        .st-regex-modal.show,.st-regex-edit-modal.show{display:flex}
        .st-regex-manage-box{width:min(560px,92vw);max-height:90vh;background:#fff;border:3px solid #000;box-shadow:12px 12px 0 #000;display:flex;flex-direction:column;overflow:hidden;animation:modalIn .2s ease}
        .st-regex-content{flex:1;overflow-y:auto;padding:16px 20px}
        .st-regex-content::-webkit-scrollbar{width:10px}
        .st-regex-content::-webkit-scrollbar-track{background:#f5f5f5;border-left:2px solid #000}
        .st-regex-content::-webkit-scrollbar-thumb{background:#000;border:2px solid #000}
        
        /* 正则编辑弹窗 */
        .st-regex-edit-box{width:min(480px,92vw);background:#fff;border:3px solid #000;box-shadow:12px 12px 0 #000;animation:modalIn .2s ease}
        .st-edit-header{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:3px solid #000}
        .st-edit-header .st-edit-name{flex:1;height:42px;font-size:15px}
        .st-edit-header .st-edit-close{width:42px;height:42px}
        
        /* 正则表单 */
        .st-regex-form{padding:24px}
        .st-form-group{margin-bottom:20px}
        .st-form-group label{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;color:#000}
        .st-form-input{width:100%;height:46px;padding:0 16px;background:#fff;border:2px solid #000;font-size:14px;font-family:monospace;outline:none;transition:all .15s ease;box-shadow:4px 4px 0 #000}
        .st-form-input:focus{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #000}
        .st-form-input::placeholder{color:#999}
        .st-checkbox-label{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;cursor:pointer}
        .st-checkbox-label input[type="checkbox"]{width:20px;height:20px;border:2px solid #000;accent-color:#000;cursor:pointer}
        
        /* 正则列表项 */
        .st-regex-item{background:#fff;border:2px solid #000;transition:all .15s ease;margin-bottom:8px;position:relative}
        .st-regex-item:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #000}
        .st-regex-header{display:flex;align-items:center;padding:12px 40px 12px 14px;gap:10px;cursor:pointer}
        .st-regex-toggle{width:40px;height:22px;background:#fff;border:2px solid #000;position:relative;cursor:pointer;transition:all .15s ease;flex-shrink:0}
        .st-regex-toggle::after{content:'';position:absolute;width:14px;height:14px;background:#fff;border:2px solid #000;top:2px;left:2px;transition:all .15s ease}
        .st-regex-toggle.on{background:#000}
        .st-regex-toggle.on::after{left:20px;background:#fff}
        .st-regex-name{flex:1;font-size:14px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        .st-regex-expand{font-size:11px;transition:transform .2s ease;flex-shrink:0;color:#666}
        .st-regex-item.expanded .st-regex-expand{transform:rotate(180deg)}
        .st-regex-delete{position:absolute;top:6px;right:6px;width:28px;height:28px;background:transparent;border:none;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:all .15s ease;color:#999;line-height:1}
        .st-regex-item:hover .st-regex-delete{opacity:1}
        .st-regex-delete:hover{color:#f44336;transform:scale(1.15)}
        .st-regex-edit{height:26px;padding:0 8px;background:#fff;border:2px solid #000;font-size:11px;font-weight:700;cursor:pointer;transition:all .15s ease;flex-shrink:0}
        .st-regex-edit:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 #000}
        .st-regex-preview{display:none;padding:10px 14px 12px;animation:slideDown .2s ease}
        .st-regex-item.expanded .st-regex-preview{display:block}
        @keyframes slideDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
        .st-regex-preview-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
        .st-regex-preview-row:last-child{margin-bottom:0}
        .st-regex-preview-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#666;flex-shrink:0;min-width:32px}
        .st-regex-preview-content{flex:1;padding:7px 10px;border:1px solid #000;font-size:12px;font-family:monospace;word-break:break-all;overflow-wrap:break-word;background:#f5f5f5}
        .st-regex-replace-text{background:#000;color:#fff}
        
        .st-regex-add-bar{padding:12px 0 4px;display:flex;justify-content:center;border-top:2px solid #000;margin-top:8px}
        .st-regex-add-bar .st-add-regex-btn{height:38px;padding:0 24px}
        
        /* 空状态 */
        .st-regex-empty{padding:60px 20px;text-align:center;font-size:14px;font-weight:600;color:#666}
        .st-regex-empty::before{content:'[ ]';display:block;font-size:32px;margin-bottom:16px;font-family:monospace;color:#000}
        
        #st-preset-manager-toast{position:fixed;top:20px;left:50%;transform:translateX(-50%) translateY(-10px);opacity:0;background:rgba(0,0,0,0.7);color:#fff;padding:12px 20px;font-size:13px;font-weight:700;border-radius:8px;z-index:2000;max-width:min(80vw,320px);text-align:center;pointer-events:none;transition:all .15s ease}
        #st-preset-manager-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
        #st-preset-manager-toast.success{background:rgba(0,0,0,0.7);color:#fff}
        #st-preset-manager-toast.error{background:rgba(0,0,0,0.7);color:#fff}
        
        @keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
        .st-loading{animation:pulse 1.5s ease-in-out infinite}
        
        .st-preset-btn:focus-visible,.st-preset-tab:focus-visible{outline:2px solid #000;outline-offset:2px}
        .st-prompt-item.selected{border-color:#000;background:#f5f5f5}
        ::selection{background:#000;color:#fff}
        
        @media(max-width:768px){
        .st-preset-nav{padding:0 12px;height:52px}
        .st-preset-title{font-size:14px}
        .st-preset-list-scroll{padding:12px}
        .st-preset-card-main{padding:12px}
        .st-preset-card-icon{width:40px;height:40px;font-size:16px}
        .st-preset-card-name{font-size:14px}
        .st-preset-card-meta{gap:8px;font-size:11px}
        .st-edit-simple-row,.st-edit-metrics-row{grid-template-columns:1fr}
        .st-prompt-header{flex-wrap:wrap}
        .st-prompt-tools{width:100%;justify-content:flex-end;margin-top:6px}
        }
        
        @media(max-width:480px){
        .st-preset-nav{height:48px}
        .st-nav-add-btn{width:36px;height:36px}
        .st-nav-action-btn{width:36px;height:36px}
        .st-preset-card-icon{width:36px;height:36px;font-size:14px}
        .st-preset-card-meta{flex-wrap:wrap}
        .st-prompt-list{padding:12px}
        .st-edit-modal{padding:0;align-items:flex-end}
        .st-edit-box{width:100%;max-height:92dvh;border-width:2px 2px 0 2px}
        .st-confirm-modal,.st-input-modal{padding:12px}
        }
    
    /* 线下模式 */
    .offline-mode-indicator{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:#666;margin-left:8px}
    .offline-mode-content{flex:1;display:flex;flex-direction:column;overflow:hidden}
    .offline-story-container{flex:1;display:flex;flex-direction:column;overflow:hidden}
    .offline-story-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:#fff;border-bottom:2px solid #000;flex-shrink:0}
    .offline-story-meta{display:flex;gap:12px;font-size:12px;font-weight:600;color:#666}
    .offline-clear-btn{width:32px;height:32px;border:2px solid #000;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;transition:all .15s}
    .offline-clear-btn:hover{background:#000;color:#fff}
    .offline-story-display{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
    .offline-story-placeholder{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#999}
    .offline-story-placeholder i{font-size:40px;color:#ccc}
    .offline-story-placeholder>div:nth-child(2){font-size:16px;font-weight:700;color:#333}
    .offline-story-item{padding:14px 16px;border-bottom:2px solid #000;animation:fadeInUp .25s ease}
    @keyframes fadeInUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
    .offline-story-item.user-input{background:#f5f5f5}
    .offline-story-item.ai-reply{background:#fff}
    .offline-story-item.loading{opacity:.7}
    .offline-story-item-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
    .offline-story-item-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#666}
    .offline-story-item-actions{display:flex;gap:4px}
    .offline-story-item-btn{width:28px;height:28px;border:2px solid #000;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:11px;transition:all .15s}
    .offline-story-item-btn:hover:not(.disabled):not(.delete){background:#000;color:#fff;transform:translate(-1px,-1px);box-shadow:3px 3px 0 #000}
    .offline-story-item-btn.delete:hover{background:#f44336;color:#fff;border-color:#f44336}
    .offline-story-item-btn.disabled{opacity:.35;pointer-events:none}
    .offline-story-item-loading{display:flex;align-items:center;gap:8px;padding:20px 0;color:#999;font-size:13px}
    .offline-story-item-loading i{font-size:18px}
    .offline-story-item-content{font-size:14px;line-height:1.75;white-space:pre-wrap;word-break:break-word}
    .offline-input-area{padding:12px 16px;background:#fff;border-top:3px solid #000;display:flex;flex-direction:column;gap:8px;flex-shrink:0}
    .offline-input{width:100%;min-height:60px;max-height:120px;padding:12px 14px;border:2px solid #000;font-size:14px;font-family:inherit;resize:none;outline:none;transition:all .15s;box-shadow:4px 4px 0 #000}
    .offline-input:focus{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #000}
    .offline-input::placeholder{color:#bbb}
    .offline-input-actions{display:flex;align-items:center;justify-content:space-between}
    .offline-settings-preview{display:flex;align-items:center;gap:6px;font-size:12px;color:#666;font-weight:600}
    
    /* 线下模式选择弹窗 */
    .offline-mode-option{display:flex;align-items:center;gap:14px;padding:16px;border:2px solid #000;background:#fff;cursor:pointer;transition:all .15s}
    .offline-mode-option:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #000}
    .offline-mode-option:active{transform:translate(0,0);box-shadow:none}
    .offline-mode-icon-wrapper{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:#000;color:#fff;font-size:20px;flex-shrink:0}
    .offline-mode-info{flex:1}
    .offline-mode-title{font-size:15px;font-weight:700;margin-bottom:4px}
    .offline-mode-desc{font-size:12px;color:#666;line-height:1.5}
    
    .st-add-inline-btn{width:100%;height:40px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:13px;font-weight:700}
    
    .test-mode-btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #000}
    .test-mode-btn:active{transform:translate(0,0);box-shadow:none}
    
    @media(max-width:768px){
        .offline-story-item{padding:10px 12px}
        .offline-story-item-content{font-size:13px}
        .offline-input-area{padding:8px 12px}
        .offline-input{min-height:50px;padding:10px 12px}
        .offline-mode-option{padding:12px}
        .offline-mode-icon-wrapper{width:40px;height:40px;font-size:16px}
        }