.outline-panel{width:280px;height:100%;background:#fff;border-right:1px solid #e0e0e0;display:flex;flex-direction:column;overflow:hidden;transition:all .3s ease}.outline-panel.collapsed{width:48px}.outline-header{padding:16px;border-bottom:1px solid #f0f0f0;display:flex;justify-content:space-between;align-items:center;background:#fafafa}.outline-title{margin:0;font-size:14px;font-weight:600;color:#333;display:flex;align-items:center;gap:8px}.outline-title .icon{font-size:16px}.outline-title .count{font-size:12px;color:#999;font-weight:400}.outline-collapse-btn{background:none;border:none;cursor:pointer;color:#999;font-size:16px;padding:4px;line-height:1;border-radius:4px;transition:all .2s}.outline-collapse-btn:hover{background:#0000000d;color:#333}.outline-stats{padding:6px 12px;display:flex;flex-wrap:nowrap;gap:8px;font-size:11px;color:#999;background:#f9f9f9;border-bottom:1px solid #f0f0f0;overflow-x:auto;white-space:nowrap}.outline-stats::-webkit-scrollbar{height:3px}.outline-stats::-webkit-scrollbar-thumb{background:#ddd;border-radius:2px}.outline-stats .stat-item{display:inline-flex;align-items:center;gap:2px;flex-shrink:0;padding:2px 6px;background:#fff;border-radius:4px;font-size:10px}.outline-list{flex:1;overflow-y:auto;padding:8px 0}.outline-list::-webkit-scrollbar{width:6px}.outline-list::-webkit-scrollbar-thumb{background:#ddd;border-radius:3px}.outline-list::-webkit-scrollbar-thumb:hover{background:#ccc}.outline-node{padding:8px 12px;cursor:pointer;display:flex;align-items:center;gap:8px;font-size:13px;color:#555;transition:all .2s;position:relative;border-left:3px solid transparent}.outline-node:hover{background:#f5f5f5;color:#333}.outline-node.active{background:#e3f2fd;color:#2196f3;border-left-color:#2196f3;font-weight:500}.outline-node.level-1{font-weight:600;color:#333}.outline-node.level-2{color:#555}.outline-node.level-3{color:#666;font-size:12px}.outline-node.level-4,.outline-node.level-5,.outline-node.level-6{color:#888;font-size:12px}.level-indicator{flex-shrink:0;font-size:10px;color:#bbb;font-weight:400;font-family:monospace}.outline-node.active .level-indicator{color:#2196f3}.node-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.node-line{flex-shrink:0;font-size:10px;color:#ccc;font-family:monospace;opacity:0;transition:opacity .2s}.outline-node:hover .node-line{opacity:1}.collapse-btn{background:none;border:none;cursor:pointer;color:#999;font-size:10px;padding:0;width:14px;height:14px;display:flex;align-items:center;justify-content:center;border-radius:2px;transition:all .2s}.collapse-btn:hover{background:#0000001a;color:#333}.outline-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#999;padding:20px}.empty-icon{font-size:48px;margin-bottom:12px;opacity:.5}.empty-text{font-size:14px;margin-bottom:8px;color:#666}.empty-hint{font-size:12px;color:#999;background:#f5f5f5;padding:4px 12px;border-radius:12px}.outline-footer{padding:12px 16px;border-top:1px solid #f0f0f0;background:#fafafa}.hint{display:flex;align-items:center;gap:6px;font-size:11px;color:#999}.hint-icon{font-size:14px}.outline-toggle-btn{width:100%;height:48px;background:none;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#999;transition:all .2s;border-bottom:1px solid #f0f0f0}.outline-toggle-btn:hover{background:#f5f5f5;color:#333}.outline-toggle-btn .icon{font-size:20px}.outline-toggle-btn .label{font-size:10px;writing-mode:vertical-rl;text-orientation:upright;letter-spacing:2px}.dark .outline-panel{background:#1e1e1e;border-right-color:#333}.dark .outline-header{background:#252525;border-bottom-color:#333}.dark .outline-title{color:#ddd}.dark .outline-stats{background:#252525;border-bottom-color:#333;color:#888}.dark .outline-node{color:#aaa}.dark .outline-node:hover{background:#2a2a2a;color:#ddd}.dark .outline-node.active{background:#1e3a5f;color:#64b5f6;border-left-color:#64b5f6}.dark .outline-node.level-1{color:#ddd}.dark .empty-hint{background:#2a2a2a;color:#888}.dark .outline-footer{background:#252525;border-top-color:#333}.dark .outline-toggle-btn:hover{background:#2a2a2a}@media (max-width: 1024px){.outline-panel{width:240px}}@media (max-width: 768px){.outline-panel{position:fixed;left:0;top:0;width:280px;height:100vh;z-index:1000;box-shadow:2px 0 8px #0000001a}.outline-panel.collapsed{transform:translate(-100%)}}.smart-paste-hero{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:20px;padding:48px;margin:32px 0;color:#fff;position:relative;overflow:hidden;box-shadow:0 20px 60px #667eea4d}.smart-paste-hero:before{content:"";position:absolute;top:-50%;right:-10%;width:400px;height:400px;background:radial-gradient(circle,rgba(255,255,255,.1) 0%,transparent 70%);border-radius:50%}.smart-paste-badge{display:inline-flex;align-items:center;gap:8px;background:#fff3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:8px 16px;border-radius:20px;font-size:14px;font-weight:600;margin-bottom:24px}.badge-pulse{animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:.8}}.badge-text{text-shadow:0 2px 4px rgba(0,0,0,.1)}.smart-paste-content{max-width:800px;margin-bottom:40px}.smart-paste-title{font-size:42px;font-weight:800;margin-bottom:16px;display:flex;align-items:center;gap:12px;text-shadow:0 2px 20px rgba(0,0,0,.2)}.title-icon{font-size:48px}.smart-paste-description{font-size:18px;line-height:1.6;opacity:.95;margin-bottom:24px}.platform-support{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.platform-label{font-size:14px;opacity:.9;font-weight:600}.platform-icons{display:flex;gap:12px;flex-wrap:wrap}.platform-icon{background:#ffffff26;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:8px 16px;border-radius:12px;font-size:14px;font-weight:500;transition:all .3s ease;cursor:default}.platform-icon:hover{background:#ffffff40;transform:translateY(-2px)}.smart-paste-demo{margin-top:40px}.demo-flow{display:flex;align-items:center;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:24px}.demo-step{background:#ffffff26;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:20px;border-radius:16px;text-align:center;min-width:120px;position:relative;transition:all .3s ease}.demo-step:hover{background:#ffffff40;transform:scale(1.05)}.step-number{position:absolute;top:-10px;left:50%;transform:translate(-50%);width:24px;height:24px;background:#fff;color:#667eea;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}.step-icon{font-size:32px;margin-bottom:8px}.step-text{font-size:14px;font-weight:600}.demo-arrow{font-size:24px;opacity:.7}.demo-time{text-align:center;display:flex;flex-direction:column;gap:8px;align-items:center}.time-badge{background:#fff3;padding:10px 20px;border-radius:20px;font-size:16px;font-weight:700}.time-comparison{font-size:13px;opacity:.8}.smart-paste-compact{background:linear-gradient(135deg,#f093fb,#f5576c);border-radius:16px;padding:24px;color:#fff;display:flex;gap:20px;align-items:flex-start;margin:24px 0;box-shadow:0 10px 30px #f093fb4d}.compact-icon{font-size:48px;flex-shrink:0}.compact-content{flex:1}.compact-title{font-size:20px;font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:8px}.new-badge{background:#ffffff4d;padding:2px 8px;border-radius:8px;font-size:12px;font-weight:800}.compact-description{font-size:14px;opacity:.95;line-height:1.5}.compact-features{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}.feature-tag{background:#fff3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:6px 12px;border-radius:12px;font-size:13px;font-weight:600}.smart-paste-guide{background:#fff;border-radius:16px;padding:24px;box-shadow:0 4px 20px #0000001a;border:2px solid #f0f0f0;position:relative;max-width:500px;margin:16px auto;animation:slideDown .3s ease}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.guide-close{position:absolute;top:12px;right:12px;width:32px;height:32px;border:none;background:#f5f5f5;border-radius:50%;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.guide-close:hover{background:#e0e0e0;transform:rotate(90deg)}.guide-header{display:flex;align-items:center;gap:12px;margin-bottom:20px;padding-bottom:16px;border-bottom:2px solid #f0f0f0}.guide-icon{font-size:32px}.guide-title{font-size:20px;font-weight:700;color:#333;margin:0}.guide-content{display:flex;flex-direction:column;gap:16px;margin-bottom:20px}.guide-step{display:flex;gap:16px;align-items:flex-start}.step-badge{width:32px;height:32px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}.step-info{flex:1}.step-info strong{display:block;font-size:15px;color:#333;margin-bottom:4px}.step-info p{font-size:13px;color:#666;margin:0;line-height:1.5}.guide-footer{display:flex;flex-direction:column;gap:12px;padding-top:16px;border-top:2px solid #f0f0f0}.guide-tip{display:flex;align-items:center;gap:8px;padding:12px;background:#f8f9fa;border-radius:8px;font-size:13px;color:#666}.tip-icon{font-size:16px}.guide-action{width:100%;padding:12px 24px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;transition:all .3s ease}.guide-action:hover{transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}@media (max-width: 768px){.smart-paste-hero{padding:32px 24px}.smart-paste-title{font-size:28px}.smart-paste-description{font-size:16px}.demo-flow{flex-direction:column}.demo-arrow{transform:rotate(90deg)}.smart-paste-compact{flex-direction:column;text-align:center}.compact-icon{align-self:center}}.paywall-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.paywall-modal{background:#fff;border-radius:16px;max-width:500px;width:100%;max-height:90vh;overflow-y:auto;padding:32px;position:relative;box-shadow:0 20px 60px #0000004d}.paywall-close{position:absolute;top:16px;right:16px;width:32px;height:32px;border:none;background:#f0f0f0;border-radius:50%;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}.paywall-close:hover{background:#e0e0e0}.paywall-header{text-align:center;margin-bottom:24px}.paywall-header h2{font-size:24px;margin:0 0 8px;color:#1a1a1a}.paywall-subtitle{color:#666;font-size:14px;margin:0}.paywall-selected{background:#f8f9ff;border-radius:12px;padding:16px;margin-bottom:24px;border-left:4px solid #1e6fff}.paywall-selected p{margin:0 0 4px;font-size:14px}.paywall-desc{color:#666;font-size:13px!important}.paywall-features{margin-bottom:24px}.paywall-features h3{font-size:16px;margin:0 0 12px;color:#1a1a1a}.paywall-features ul{list-style:none;padding:0;margin:0}.paywall-features li{padding:8px 0;font-size:14px;color:#333;border-bottom:1px solid #f0f0f0}.paywall-features li:last-child{border-bottom:none}.paywall-templates{margin-bottom:24px}.paywall-templates h3{font-size:16px;margin:0 0 12px;color:#1a1a1a}.paywall-template-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.paywall-template-card{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:8px;font-size:13px}.paywall-template-card.free{background:#f0f9ff;border:1px solid #1e6fff33}.paywall-template-card.paid{background:#fff5f5;border:1px solid #ff6b6b33}.paywall-template-name{font-weight:500}.paywall-template-badge{font-size:11px;padding:2px 6px;border-radius:4px;font-weight:600}.free-badge{background:#1e6fff;color:#fff}.paid-badge{background:#ff6b6b;color:#fff}.paywall-pricing{text-align:center;padding:24px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:12px;margin-bottom:24px;color:#fff}.paywall-price-tag{display:flex;align-items:baseline;justify-content:center;gap:8px;margin-bottom:8px}.paywall-original{font-size:14px;text-decoration:line-through;opacity:.8}.paywall-current{font-size:48px;font-weight:700}.paywall-unit{font-size:14px;opacity:.9}.paywall-save{font-size:14px;margin:0 0 4px;font-weight:600}.paywall-compare{font-size:12px;margin:0;opacity:.8}.paywall-payment{margin-bottom:24px}.paywall-payment h3{font-size:16px;margin:0 0 12px;color:#1a1a1a}.paywall-qr-section{text-align:center;padding:20px;background:#f8f8f8;border-radius:12px;margin-bottom:16px}.paywall-qr-title{font-weight:600;margin:0 0 12px;color:#07c160}.paywall-qr-placeholder{display:flex;flex-direction:column;align-items:center}.paywall-qr-code{width:180px;height:180px;background:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;border:1px solid #e0e0e0}.paywall-qr-mock{display:flex;flex-direction:column;align-items:center;gap:8px;color:#666;font-size:14px}.paywall-qr-amount{font-size:24px;font-weight:700;color:#07c160}.paywall-qr-tip{font-size:12px;color:#999;margin:0}.paywall-alternative{text-align:center;padding:12px;background:#fffbeb;border-radius:8px;border:1px dashed #f59e0b}.paywall-alternative p{margin:0;font-size:13px;color:#666}.paywall-unlock-btn{width:100%;padding:16px;background:linear-gradient(135deg,#07c160,#05a050);color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s;margin-bottom:16px}.paywall-unlock-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px #07c1604d}.paywall-guarantee{text-align:center;font-size:12px;color:#999;margin:0}@media (max-width: 480px){.paywall-modal{padding:20px}.paywall-current{font-size:36px}.paywall-template-grid{grid-template-columns:1fr}}.template-gallery{width:100%}.gallery-compact{display:flex;align-items:center;gap:12px;padding:8px 12px;background:#f8f9fa;border-radius:6px}.current-template-btn{display:flex;align-items:center;gap:8px;padding:6px 12px;background:#fff;border:1px solid #e1e4e8;border-radius:6px;font-size:14px;cursor:pointer;transition:all .2s;min-width:140px}.current-template-btn:hover{border-color:#667eea;background:#f6f8ff}.template-info{display:flex;align-items:center;gap:6px;flex:1}.template-icon{font-size:16px}.template-name{font-weight:500;color:#333}.expand-icon{font-size:10px;color:#999;transition:transform .2s}.color-editor-inline{display:flex;align-items:center;gap:6px}.color-picker-compact{position:relative;width:28px;height:28px}.color-input-compact{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}.color-preview{width:28px;height:28px;border-radius:6px;border:2px solid white;box-shadow:0 0 0 1px #0000001a,0 2px 4px #0000001a;cursor:pointer;transition:transform .2s,box-shadow .2s}.color-picker-compact:hover .color-preview{transform:scale(1.1);box-shadow:0 0 0 1px #0003,0 4px 8px #00000026}.reset-colors-btn{width:28px;height:28px;border:1px solid #e1e4e8;background:#fff;border-radius:6px;font-size:14px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.reset-colors-btn:hover{background:#f6f8ff;border-color:#667eea;transform:rotate(180deg)}.gallery-expanded{position:absolute;top:100%;left:0;right:0;margin-top:8px;background:#fff;border:1px solid #e1e4e8;border-radius:8px;box-shadow:0 8px 24px #0000001f;padding:16px;z-index:100;max-height:500px;overflow-y:auto;animation:slideDown .2s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.gallery-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #e1e4e8}.gallery-header h3{margin:0;font-size:16px;font-weight:600;color:#333}.close-gallery-btn{width:28px;height:28px;border:none;background:#f8f9fa;border-radius:6px;font-size:16px;color:#666;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.close-gallery-btn:hover{background:#e9ecef;color:#333}.templates-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-bottom:12px}.template-card{position:relative;padding:16px;background:#f8f9fa;border:2px solid transparent;border-radius:8px;cursor:pointer;transition:all .2s;min-height:140px}.template-card:hover{background:#f0f4ff;border-color:#667eea;transform:translateY(-2px);box-shadow:0 4px 12px #667eea26}.template-card.active{background:linear-gradient(135deg,#667eea,#764ba2);border-color:#667eea;color:#fff}.card-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}.card-icon{font-size:20px}.card-name{font-weight:600;font-size:14px;flex:1}.template-card.active .card-name,.template-card.active .card-description{color:#fff}.active-badge{font-size:11px;padding:2px 6px;background:#ffffff4d;border-radius:4px;font-weight:500}.card-description{font-size:12px;color:#666;line-height:1.5;margin-bottom:12px}.card-scenarios{position:absolute;top:100%;left:0;right:0;margin-top:4px;padding:12px;background:#fff;border:1px solid #e1e4e8;border-radius:8px;box-shadow:0 4px 12px #0000001a;z-index:10;animation:fadeIn .2s}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.scenarios-label{font-size:11px;color:#666;margin-bottom:6px}.scenarios-tags{display:flex;flex-wrap:wrap;gap:4px}.scenario-tag{display:inline-block;padding:3px 8px;background:#f0f4ff;color:#667eea;font-size:11px;border-radius:4px;font-weight:500}.card-colors{display:flex;gap:6px;margin-top:auto}.color-dot{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.8);box-shadow:0 1px 3px #0003}.template-card.active .color-dot{border-color:#ffffff80}.gallery-footer{padding-top:12px;border-top:1px solid #e1e4e8}.gallery-hint{margin:0;font-size:12px;color:#666;text-align:center;line-height:1.6}@media (max-width: 768px){.templates-grid{grid-template-columns:1fr}.gallery-compact{flex-direction:column;align-items:stretch}.color-editor-inline{justify-content:center}}:root{--glass-bg: rgba(255, 255, 255, .45);--glass-bg-dark: rgba(255, 255, 255, .1);--glass-border: rgba(255, 255, 255, .4);--glass-edge: rgba(255, 255, 255, .5);--glass-blur: 24px;--glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, .15);--primary-accent: #1e6fff;--secondary-accent: #764ba2;--liquid-color-1: rgba(102, 126, 234, .5);--liquid-color-2: rgba(118, 75, 162, .5);--liquid-color-3: rgba(255, 107, 107, .4);--liquid-color-4: rgba(72, 219, 251, .4);--text-main: #1d1d1f;--text-secondary: #86868b}body{font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,PingFang SC,sans-serif;background-color:#f5f5f7;color:var(--text-main);margin:0;overflow:hidden}.liquid-background{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:-1;background:#f5f5f7;overflow:hidden;filter:blur(80px)}.blob{position:absolute;border-radius:50%;opacity:.6}.blob-1{width:500px;height:500px;background:var(--liquid-color-1);top:-100px;left:-100px;animation:move-1 25s infinite alternate}.blob-2{width:600px;height:600px;background:var(--liquid-color-2);bottom:-150px;right:-100px;animation:move-2 30s infinite alternate}.blob-3{width:400px;height:400px;background:var(--liquid-color-3);top:40%;left:30%;animation:move-3 20s infinite alternate}.blob-4{width:450px;height:450px;background:var(--liquid-color-4);bottom:20%;left:10%;animation:move-1 22s infinite alternate-reverse}@keyframes move-1{0%{transform:translate(0) scale(1)}to{transform:translate(200px,100px) scale(1.2)}}@keyframes move-2{0%{transform:translate(0) scale(1)}to{transform:translate(-150px,-200px) scale(.8)}}@keyframes move-3{0%{transform:translate(0) rotate(0)}to{transform:translate(100px,-50px) rotate(180deg)}}.glass-panel{background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);box-shadow:var(--glass-shadow)}.glass-card{background:#ffffffb3;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.5);border-radius:16px;box-shadow:0 4px 24px -1px #0000000f;transition:all .3s cubic-bezier(.4,0,.2,1)}.glass-card:hover{transform:translateY(-2px);box-shadow:0 12px 32px -4px #0000001a;background:#fffc}.app{display:flex;flex-direction:column;height:100vh;overflow:hidden}.app-header{display:flex;justify-content:space-between;align-items:center;padding:0 24px;height:64px;background:#fff6;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.3);box-shadow:0 4px 30px #0000000d;z-index:100}.header-left{display:flex;align-items:center;gap:12px}.sidebar-toggle{background:none;border:none;font-size:18px;padding:8px;cursor:pointer;border-radius:4px;transition:background .2s}.sidebar-toggle:hover{background:#f5f5f5}.app-title{font-size:22px;font-weight:700;color:#2c3e50;font-family:"Source Han Serif CN","Noto Serif SC",KaiTi,serif,-apple-system,sans-serif;letter-spacing:1px}.header-right{display:flex;align-items:center;gap:16px}.template-info{font-size:14px;color:#666}.header-actions{display:flex;gap:8px}.header-btn{padding:8px 18px;background:linear-gradient(135deg,#1e6fff,#4facfe);color:#fff;border:none;border-radius:10px;cursor:pointer;font-size:14px;font-weight:600;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 15px #1e6fff4d}.header-btn:hover{transform:translateY(-2px);box-shadow:0 8px 25px #1e6fff66;filter:brightness(1.1)}.header-btn.preview-toggle{background:#f5f5f5;color:#333;border:1px solid #e1e4e8}.header-btn.preview-toggle:hover{background:#e9ecef}.header-btn.back-btn{background:#fff;color:#2c3e50;border:2px solid #d4af37;margin-right:12px;font-size:14px;padding:6px 12px;box-shadow:none}.header-btn.back-btn:hover{background:#f9f6f0;color:#d32f2f;border-color:#d32f2f;transform:translateY(-2px);box-shadow:0 4px 8px #2c3e5026}.app-main{display:flex;flex:1;overflow:hidden;background:transparent;gap:20px;padding:20px}.app-sidebar{background:#fff;border-right:1px solid #e5e7eb;display:flex;flex-direction:column;box-shadow:1px 0 3px #00000005}.sidebar-nav{display:flex;border-bottom:1px solid #e1e4e8;background:#fff}.nav-tab{flex:1;padding:16px 20px;background:none;border:none;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s;border-bottom:2px solid transparent;color:#6c757d}.nav-tab:hover{background:#f8f9fa;color:#495057}.nav-tab.active{background:#e3f2fd;border-bottom-color:#1e6fff;color:#1e6fff;font-weight:500}.sidebar-content{flex:1;overflow-y:auto;display:flex;flex-direction:column;background:#fff}.content-group{display:flex;flex-direction:column;height:100%}.sub-nav{display:flex;background:#f8f9fa;border-bottom:1px solid #e1e4e8}.sub-nav-btn{flex:1;padding:12px 16px;background:none;border:none;cursor:pointer;font-size:13px;color:#666;transition:all .2s;border-bottom:2px solid transparent}.sub-nav-btn:hover{background:#e9ecef;color:#333}.sub-nav-btn.active{color:#1e6fff;background:#fff;border-bottom-color:#1e6fff}.sub-content{flex:1;overflow-y:auto;padding:20px 24px}.editor-section{flex:2;display:flex;flex-direction:column;background:#ffffff73;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.3);border-radius:20px;box-shadow:0 8px 32px #00000014;overflow:hidden;min-width:400px;transition:all .3s ease}.editor-container{display:flex;flex-direction:column;height:100%;background:#fff}.editor-main-content{display:flex;flex:1;overflow:hidden}.editor-toolbar{display:flex;align-items:center;padding:12px 16px;background:#fff6;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.2);gap:10px}.toolbar-group{display:flex;gap:8px;padding:4px;border-radius:10px;background:#fff6;border:1px solid rgba(255,255,255,.3);box-shadow:0 2px 10px #0000000d}.toolbar-group.primary{background:#1e6fff1a;border-color:#1e6fff33}.toolbar-group.primary .toolbar-btn{background:#fff;border:2px solid #d4af37;font-weight:700}.toolbar-group.primary .toolbar-btn:hover{background:#d4af3714;border-color:#d4af37;color:#2c3e50;box-shadow:0 4px 12px #d4af3740}.toolbar-divider{width:1px;height:20px;background:#e1e4e8;margin:0 4px}.toolbar-btn{padding:8px 14px;background:#fff9;border:1px solid rgba(255,255,255,.4);border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;transition:all .3s cubic-bezier(.4,0,.2,1);color:var(--text-main);display:flex;align-items:center;gap:6px}.toolbar-btn:hover{background:#fff;transform:translateY(-1px);box-shadow:0 4px 12px #00000014;border-color:var(--primary-accent)}.toolbar-btn:active{transform:translateY(0)}.toolbar-btn.image-upload{background:linear-gradient(135deg,#2c3e50f2,#5a6c7de6);color:#fff;border:2px solid #d4af37;font-weight:600;box-shadow:0 4px 16px #2c3e5040}.toolbar-btn.image-upload:hover{background:linear-gradient(135deg,#2c3e50,#5a6c7df2);transform:translateY(-2px);box-shadow:0 6px 20px #2c3e5059;border-color:#d32f2f}.toolbar-btn.uploading{background:#ffc107!important;color:#000;cursor:not-allowed;animation:uploadingPulse 1.5s infinite}@keyframes uploadingPulse{0%,to{opacity:1}50%{opacity:.7}}.editor-wrapper{flex:1;position:relative;display:flex;flex-direction:column;transition:all .2s ease;min-width:0}.editor-wrapper.dragging{background:#f0f8ff;border:2px dashed #1e6fff;border-radius:8px}.drag-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#1e6fff1a;display:flex;align-items:center;justify-content:center;z-index:10;border-radius:8px;pointer-events:none}.drag-message{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:16px;color:#1e6fff;font-weight:500}.drag-icon{font-size:48px}.upload-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#ffffffe6;display:flex;align-items:center;justify-content:center;z-index:15;border-radius:8px}.upload-message{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:16px;color:#1e6fff;font-weight:500}.upload-icon{font-size:32px;animation:pulse 1.5s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.editor-textarea{flex:1;padding:24px;border:none;outline:none;font-family:SF Mono,Monaco,Menlo,monospace;font-size:15px;line-height:1.7;resize:none;background:#ffffff4d;color:var(--text-main);transition:background .3s ease}.editor-textarea:focus{background:#ffffff80}.editor-status{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:#f8f9fa;border-top:1px solid #e1e4e8;font-size:13px;min-height:40px}.status-left{display:flex;align-items:center;color:#666}.status-center{display:flex;justify-content:center;flex:1}.status-right{display:flex;align-items:center;color:#666}.status-item{display:flex;align-items:center;gap:4px;font-size:12px;margin-right:16px}.document-status{padding:4px 10px;border-radius:12px;font-size:11px;font-weight:600;cursor:help;transition:all .2s ease}.document-status.temp{background:#e3f2fd;color:#1976d2}.document-status.draft{background:#fff3cd;color:#856404}.document-status.normal{background:#d4edda;color:#155724}.document-status:hover{transform:scale(1.05)}.word-count{font-weight:500;color:#495057}.save-status-main{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:16px;font-weight:500;transition:all .3s ease;background:#fff;border:1px solid #e1e4e8;box-shadow:0 1px 3px #0000000d}.save-status-main.saving{background:#fff3cd;border-color:#ffc107;color:#856404}.save-status-main.unsaved{background:#f8d7da;border-color:#dc3545;color:#721c24}.save-status-main.saved{background:#d4edda;border-color:#28a745;color:#155724}.save-status-main.guest{background:#e2e3e5;border-color:#6c757d;color:#495057}.status-icon{font-size:14px}.status-text{font-size:13px;font-weight:500}.status-hint{font-size:11px;opacity:.7;background:#0000001a;padding:2px 6px;border-radius:8px;margin-left:4px}.status-time{font-size:11px;opacity:.8;margin-left:4px}.document-info{font-size:11px;opacity:.6;font-family:monospace}.save-status .save-icon{font-size:14px}.save-status.saving{color:#ffc107;animation:saving-pulse 1.5s infinite}.save-status.unsaved{color:#dc3545}.save-status.saved{color:#28a745}@keyframes saving-pulse{0%,to{opacity:1}50%{opacity:.6}}.document-id{font-family:monospace;background:#f8f9fa;padding:2px 6px;border-radius:3px;color:#6c757d;font-size:11px}.toolbar-btn.save-btn{background:#fff;color:var(--primary-accent);border:1px solid var(--primary-accent)}.toolbar-btn.save-btn:hover:not(:disabled){background:var(--primary-accent);color:#fff}.toolbar-btn.save-btn.saving{background:linear-gradient(135deg,#d4af37,#e6c975)!important;color:#2c3e50;cursor:not-allowed;animation:savingPulse 1.5s infinite;border-color:#d4af37}@keyframes savingPulse{0%,to{opacity:1}50%{opacity:.7}}.toolbar-btn.ai-studio-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;font-weight:600;box-shadow:0 4px 15px #764ba24d;transition:all .3s ease;animation:sparkleGlow 3s infinite}.toolbar-btn.ai-studio-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 25px #764ba266;filter:brightness(1.1)}.toolbar-btn.ai-studio-btn:active:not(:disabled){transform:translateY(0) scale(1);box-shadow:0 2px 8px #667eea4d}@keyframes sparkleGlow{0%,to{box-shadow:0 2px 8px #667eea33}50%{box-shadow:0 4px 16px #667eea80}}.shortcut-hint{font-size:10px;opacity:.7;margin-left:4px;font-style:italic}.preview-section{flex:1.3;display:flex;flex-direction:column;background:#ffffff73;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.3);border-radius:20px;box-shadow:0 8px 32px #00000014;overflow:hidden;min-width:340px;transition:all .3s ease}.preview-section.collapsed{flex:0;width:0;min-width:0;overflow:hidden}.preview-container{display:flex;flex-direction:column;height:100%;background:transparent}.preview-toolbar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#fff;border-bottom:1px solid #e5e7eb;font-size:13px}.toolbar-left{display:flex;align-items:center;gap:16px}.device-switcher{display:flex;gap:4px}.device-btn{padding:6px 12px;background:none;border:1px solid #d1d9e0;border-radius:4px;cursor:pointer;font-size:16px;transition:all .2s}.device-btn:hover{background:#f5f5f5}.device-btn.active{background:#1e6fff;color:#fff;border-color:#1e6fff}.preview-actions{display:flex;align-items:center;gap:12px}.copy-tip-inline{font-size:12px;color:#666;display:flex;align-items:center;gap:4px}.copy-tip-inline kbd{background:#e9ecef;color:#495057;padding:1px 4px;border-radius:2px;font-size:11px;font-family:monospace;border:1px solid #ced4da}.preview-stats{display:flex;align-items:center;gap:4px;color:#666}.stat-item{font-size:12px}.stat-divider{color:#ccc}.action-btn{padding:8px 16px;border:1px solid #d1d9e0;border-radius:4px;cursor:pointer;font-size:14px;transition:all .2s;background:#fff}.action-btn.primary{background:#1e6fff;color:#fff;border-color:#1e6fff}.action-btn:hover{opacity:.8}.preview-frame{flex:1;overflow:auto;padding:24px 20px;background:#fafbfc}.preview-frame.mobile .preview-content{max-width:375px;margin:0 auto}.preview-frame.desktop .preview-content{max-width:800px;margin:0 auto}.preview-content.selectable{background:#fff;border:2px dashed transparent;border-radius:12px;padding:24px;transition:all .2s ease;overflow:hidden;box-shadow:0 2px 8px #0000000a;margin-bottom:16px}.preview-content img{max-width:100%!important;height:auto!important;display:block}.preview-content.selectable:hover{border-color:#1e6fff;box-shadow:0 4px 12px #1e6fff1a}.preview-content.selectable:focus{border-color:#1e6fff;box-shadow:0 4px 12px #1e6fff26}.preview-content.selectable:focus:after{content:"✓ 已选中预览区域，现在可以按 Ctrl+A 全选内容";position:absolute;top:-30px;left:50%;transform:translate(-50%);background:#1e6fff;color:#fff;padding:4px 8px;border-radius:4px;font-size:12px;white-space:nowrap;z-index:1000}.preview-frame{position:relative}.preview-cursor-indicator{position:absolute;left:0;width:3px;height:60px;background:linear-gradient(180deg,#667eea,#764ba2);border-radius:0 2px 2px 0;transition:top .15s ease-out,opacity .2s ease;box-shadow:0 0 8px #667eea80;z-index:10;pointer-events:none}.preview-frame::-webkit-scrollbar{width:8px;height:8px}.preview-frame::-webkit-scrollbar-track{background:#0000000d;border-radius:4px}.preview-frame::-webkit-scrollbar-thumb{background:#667eea4d;border-radius:4px;transition:background .2s}.preview-frame::-webkit-scrollbar-thumb:hover{background:#667eea80}.template-selector{max-height:100%;overflow-y:auto}.section-title{font-size:16px;font-weight:600;margin-bottom:16px;color:#333}.template-grid{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}.template-card{border:1px solid #e1e4e8;border-radius:8px;padding:16px;cursor:pointer;transition:all .2s;position:relative}.template-card:hover{border-color:#1e6fff;box-shadow:0 2px 8px #1e6fff1a}.template-card.active{border-color:#1e6fff;background:#f8fbff}.template-preview{display:flex;gap:12px;margin-bottom:8px}.template-icon{font-size:24px}.template-name{font-size:14px;font-weight:600;margin-bottom:4px;color:#333}.template-desc{font-size:12px;color:#666;line-height:1.4}.template-tags{display:flex;gap:4px;flex-wrap:wrap}.template-tag{padding:2px 6px;background:#f0f0f0;border-radius:12px;font-size:10px;color:#666}.template-active-indicator{position:absolute;top:8px;right:8px;background:#1e6fff;color:#fff;padding:2px 8px;border-radius:12px;font-size:10px;font-weight:500}.template-variables{margin-top:24px}.variables-title{font-size:14px;font-weight:600;margin-bottom:12px;color:#333}.variable-group{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}.variable-label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:500;color:#555}.variable-input{padding:8px 12px;border:1px solid #d1d9e0;border-radius:4px;font-size:14px;transition:border-color .2s}.variable-input:focus{outline:none;border-color:#1e6fff}.fixed-assets{margin-top:16px;padding-top:16px;border-top:1px solid #e1e4e8}.assets-title{font-size:13px;font-weight:600;margin-bottom:4px;color:#333}.assets-desc{font-size:11px;color:#666;margin-bottom:12px;line-height:1.4}.template-description{margin-top:20px;padding-top:20px;border-top:1px solid #e1e4e8}.template-description h4{font-size:13px;margin-bottom:8px;color:#333}.template-description p{font-size:12px;color:#666;line-height:1.4;margin-bottom:12px}.template-features h5{font-size:12px;margin-bottom:4px;color:#333}.template-features ul{font-size:11px;color:#666;margin-left:16px}.template-features li{margin-bottom:2px}.app-footer{display:flex;justify-content:space-between;align-items:center;padding:8px 20px;background:#f5f5f5;border-top:1px solid #e1e4e8;font-size:12px;color:#666}.status-text{font-weight:500}.version-info{opacity:.7}.document-list-container{display:flex;flex-direction:column;height:100%;overflow:hidden}.document-toolbar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid #e1e4e8;background:#fafbfc}.toolbar-left{display:flex;gap:8px;align-items:center}.new-document-btn{display:flex;align-items:center;gap:6px;padding:8px 16px;background:#28a745;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;transition:background .2s}.new-document-btn:hover{background:#218838}.batch-action-btn{display:flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid #d1d9e0;border-radius:6px;cursor:pointer;font-size:14px;background:#fff;transition:all .2s}.batch-action-btn.delete{border-color:#dc3545;color:#dc3545}.batch-action-btn.delete:hover{background:#dc3545;color:#fff}.toolbar-right{display:flex;align-items:center}.search-box{position:relative;display:flex;align-items:center}.search-icon{position:absolute;left:12px;color:#6c757d;font-size:14px}.search-input{padding:8px 12px 8px 32px;border:1px solid #d1d9e0;border-radius:6px;font-size:14px;width:200px;transition:border-color .2s}.search-input:focus{outline:none;border-color:#1e6fff}.document-filters{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;border-bottom:1px solid #e1e4e8;background:#fff;flex-wrap:wrap;gap:12px}.filter-group,.sort-group{display:flex;align-items:center;gap:8px}.filter-label,.sort-label{font-size:12px;color:#6c757d;font-weight:500}.filter-btn,.sort-btn{padding:6px 12px;border:1px solid #d1d9e0;border-radius:4px;background:#fff;cursor:pointer;font-size:12px;transition:all .2s}.filter-btn:hover,.sort-btn:hover{background:#f5f5f5}.filter-btn.active,.sort-btn.active{background:#1e6fff;color:#fff;border-color:#1e6fff}.sort-indicator{margin-left:4px;font-size:10px}.loading-state,.empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:#6c757d;text-align:center}.loading-icon,.empty-icon{font-size:48px}.empty-state h3{margin:0;font-size:18px;color:#333}.empty-state p{margin:0;font-size:14px;color:#666}.empty-action-btn{padding:10px 20px;background:#1e6fff;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;transition:background .2s}.empty-action-btn:hover{background:#0052d9}.document-list-header{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;border-bottom:1px solid #e1e4e8;background:#f8f9fa;font-size:12px}.select-all-label{display:flex;align-items:center;gap:6px;cursor:pointer;-webkit-user-select:none;user-select:none}.document-count{color:#6c757d}.document-list{flex:1;overflow-y:auto}.document-item{display:flex;align-items:center;padding:16px;border-bottom:1px solid #e1e4e8;transition:background .2s}.document-item:hover{background:#f8f9fa}.document-select{margin-right:12px}.document-content{flex:1;cursor:pointer;min-width:0}.document-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px;gap:12px}.document-title{font-size:16px;font-weight:600;margin:0;color:#333;line-height:1.3;word-break:break-word}.document-status{padding:2px 8px;border-radius:12px;font-size:11px;font-weight:500;white-space:nowrap}.document-preview{font-size:14px;color:#666;line-height:1.4;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.document-meta{display:flex;gap:12px;font-size:12px;color:#6c757d;flex-wrap:wrap}.meta-item{display:flex;align-items:center;gap:2px}.document-actions{display:flex;gap:4px;margin-left:12px}.action-btn{padding:8px;border:1px solid #d1d9e0;border-radius:4px;background:#fff;cursor:pointer;font-size:14px;transition:all .2s}.action-btn:hover{background:#f5f5f5;transform:translateY(-1px)}.pagination{display:flex;justify-content:center;align-items:center;gap:16px;padding:16px;border-top:1px solid #e1e4e8;background:#fff}.page-btn{padding:8px 16px;border:1px solid #d1d9e0;border-radius:6px;background:#fff;cursor:pointer;font-size:14px;transition:all .2s}.page-btn:hover:not(:disabled){background:#f5f5f5}.page-btn:disabled{opacity:.5;cursor:not-allowed}.page-info{font-size:14px;color:#6c757d}.version-history-container{display:flex;flex-direction:column;height:100%;overflow:hidden}.version-toolbar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid #e1e4e8;background:#fafbfc}.toolbar-title{font-size:16px;font-weight:600;margin:0;color:#333}.current-doc-info{font-size:14px;font-weight:400;color:#666}.toolbar-right{display:flex;gap:8px;align-items:center}.toolbar-btn{padding:6px 12px;border:1px solid #d1d9e0;border-radius:4px;background:#fff;cursor:pointer;font-size:12px;transition:all .2s}.toolbar-btn:hover:not(:disabled){background:#f5f5f5}.toolbar-btn.create-snapshot{background:#28a745;color:#fff;border-color:#28a745}.toolbar-btn.create-snapshot:hover:not(:disabled){background:#218838}.toolbar-btn:disabled{opacity:.5;cursor:not-allowed}.current-version-indicator{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;background:#e3f2fd;border-bottom:1px solid #e1e4e8;font-size:12px}.current-version-badge{background:#1e6fff;color:#fff;padding:2px 8px;border-radius:12px;font-weight:500}.version-count{color:#666}.version-list{flex:1;overflow-y:auto}.version-item{padding:16px;border-bottom:1px solid #e1e4e8;transition:all .2s;cursor:pointer}.version-item:hover{background:#f8f9fa}.version-item.selected{background:#e3f2fd;border-left:3px solid #1e6fff}.version-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.version-info{display:flex;align-items:center;gap:8px}.version-number{font-family:monospace;font-size:12px;background:#f8f9fa;padding:2px 6px;border-radius:4px;color:#6c757d;font-weight:600}.version-type{padding:2px 8px;border-radius:12px;font-size:11px;color:#fff;font-weight:500}.version-time{font-size:12px;color:#6c757d}.version-content{margin-bottom:8px}.version-title{font-size:14px;font-weight:600;margin-bottom:4px;color:#333}.version-reason{font-size:12px;color:#666;font-style:italic}.version-metadata{display:flex;gap:12px;margin-bottom:8px}.meta-item{font-size:11px;color:#6c757d;display:flex;align-items:center;gap:2px}.version-actions{display:flex;gap:4px;justify-content:flex-end}.action-btn{padding:4px 8px;border:1px solid #d1d9e0;border-radius:4px;background:#fff;cursor:pointer;font-size:14px;transition:all .2s}.action-btn:hover{transform:translateY(-1px)}.action-btn.view:hover{background:#007bff;color:#fff;border-color:#007bff}.action-btn.restore:hover{background:#28a745;color:#fff;border-color:#28a745}.action-btn.delete:hover{background:#dc3545;color:#fff;border-color:#dc3545}.version-detail-modal{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;display:flex;align-items:center;justify-content:center}.modal-backdrop{position:absolute;top:0;left:0;right:0;bottom:0;background:#00000080}.version-detail-content{position:relative;background:#fff;border-radius:8px;box-shadow:0 4px 20px #00000026;max-width:600px;max-height:80vh;width:90%;overflow:hidden;display:flex;flex-direction:column}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #e1e4e8;background:#f8f9fa}.modal-header h3{margin:0;font-size:18px;color:#333}.close-btn{background:none;border:none;font-size:20px;cursor:pointer;padding:4px;color:#6c757d}.close-btn:hover{color:#333}.modal-body{padding:20px;overflow-y:auto;flex:1}.version-meta-info{margin-bottom:20px}.meta-row{display:flex;margin-bottom:8px;align-items:center}.meta-label{font-weight:600;min-width:80px;color:#333;font-size:14px}.meta-value{font-size:14px;color:#666}.version-type-badge{color:#fff!important;padding:2px 8px;border-radius:12px;font-size:11px;font-weight:500}.version-content-preview h4{font-size:14px;margin:16px 0 8px;color:#333;font-weight:600}.content-text{background:#f8f9fa;padding:12px;border-radius:4px;font-size:13px;line-height:1.4;color:#333;margin-bottom:12px}.title-text{font-weight:600}.content-preview{font-family:monospace;white-space:pre-wrap;max-height:200px;overflow-y:auto}.version-actions-detail{display:flex;gap:12px;margin-top:20px;padding-top:16px;border-top:1px solid #e1e4e8}.detail-action-btn{flex:1;padding:10px 16px;border:none;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s}.restore-btn{background:#28a745;color:#fff}.restore-btn:hover{background:#218838}.delete-btn{background:#dc3545;color:#fff}.delete-btn:hover{background:#c82333}@media (max-width: 1024px){.app-sidebar{width:280px}.editor-section{min-width:320px}.preview-section{min-width:300px}}@media (max-width: 768px){.app-header{padding:0 16px;height:56px}.app-title{font-size:18px}.header-btn{padding:6px 12px;font-size:13px}.app-main{flex-direction:column}.app-sidebar{width:100%;height:280px;box-shadow:none;border-right:none;border-bottom:1px solid #e1e4e8}.editor-section,.preview-section{flex:none;height:400px;border-right:none}.editor-section{border-bottom:1px solid #e1e4e8}.header-right .template-info{display:none}.document-toolbar{flex-direction:column;gap:8px;align-items:stretch}.toolbar-left,.toolbar-right{justify-content:center}.document-filters{flex-direction:column;align-items:stretch}.filter-group,.sort-group{justify-content:center}.search-input{width:100%}.document-header{flex-direction:column;align-items:flex-start}.document-meta{justify-content:space-between}.document-actions{flex-direction:column}.editor-toolbar{padding:12px 16px;flex-wrap:wrap;gap:8px}.toolbar-group{margin-bottom:4px}.preview-toolbar{padding:12px 16px;font-size:12px}.preview-frame{padding:16px 12px}}@media (max-width: 480px){.app-header{padding:0 12px}.header-left{gap:8px}.app-title{font-size:16px}.editor-textarea{padding:16px;font-size:16px}.toolbar-btn{padding:6px 8px;font-size:12px}.preview-content.selectable{padding:16px;margin-bottom:12px}}.document-info-bar{background:#f8fafc;border-bottom:2px solid #e5e7eb;padding:12px 16px;display:flex;flex-direction:column;gap:8px}.doc-info-row{display:flex;gap:12px;align-items:center}.doc-info-row.compact{gap:16px}.doc-info-field{flex:1;display:flex;gap:8px;align-items:center}.doc-info-label{font-size:13px;color:#64748b;font-weight:500;min-width:48px;text-align:right}.doc-info-input{flex:1;padding:6px 10px;border:1px solid #e5e7eb;border-radius:6px;font-size:14px;color:#1f2937;background:#fff;transition:all .2s}.doc-info-input:hover{border-color:#cbd5e1}.doc-info-input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.doc-info-input.title-input{font-size:15px;font-weight:500}.doc-info-input::placeholder{color:#cbd5e1}.brand-settings-container h4{margin-bottom:8px}.brand-settings-container .settings-description{font-size:14px;color:#6b7280;margin-bottom:20px;line-height:1.6}.preview-toolbar-wrapper{position:relative;background:#fff;border-bottom:1px solid #e1e4e8;padding:8px 12px}.preview-toolbar{background:#fff;border-bottom:1px solid #e5e7eb;padding:16px;display:flex;flex-direction:column;gap:12px}.preview-toolbar-content{display:flex;flex-direction:column;gap:16px}.toolbar-title{font-size:16px;font-weight:600;color:#1f2937;margin:0}.toolbar-section{display:flex;flex-direction:column;gap:8px}.toolbar-label{font-size:13px;color:#64748b;font-weight:500}.template-select-wrapper{position:relative;display:flex;gap:8px;align-items:center}.template-select.preview-select{flex:1;padding:8px 12px;border:2px solid #e5e7eb;border-radius:8px;font-size:14px;color:#1f2937;background:#fff;cursor:pointer;transition:all .2s}.template-help-btn.small{width:32px;height:32px;font-size:14px}.template-tooltip.preview-tooltip{max-height:300px}.tooltip-content.compact{padding:12px}.template-scenarios.compact{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 12px;background:#f8fafc;border-radius:6px}.scenarios-label-small{font-size:12px;color:#64748b;font-weight:500}.scenario-tag.small{padding:3px 8px;font-size:11px}.color-editor-compact{display:flex;flex-direction:column;gap:8px}.color-editor-item-inline{display:flex;align-items:center;gap:12px}.color-label-inline{font-size:12px;color:#64748b;font-weight:500;min-width:50px}.color-editor-input-wrapper.inline{flex:1}.color-display-swatch.compact{height:32px}.color-hex-value.small{font-size:11px}.reset-colors-btn.compact{margin-top:8px;padding:6px 10px;font-size:12px}.template-indicator-compact{display:flex;align-items:center;gap:8px;padding:8px 12px;margin-top:8px;background:#fef3c7;border:1px solid #fde68a;border-radius:6px;font-size:13px}.indicator-label{color:#92400e;font-weight:500}.indicator-value{color:#78350f;font-weight:600}.indicator-action{margin-left:auto;padding:4px 12px;background:#fbbf24;color:#78350f;border:none;border-radius:4px;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s}.indicator-action:hover{background:#f59e0b;color:#fff}.writing-assistant{padding:20px}.assistant-section{margin-bottom:24px}.assistant-hint{font-size:14px;color:#6b7280;line-height:1.6;margin:8px 0 0}.assistant-info{display:flex;flex-direction:column;gap:16px}.info-card{display:flex;gap:12px;padding:16px;background:#f8fafc;border:1px solid #e5e7eb;border-radius:12px;transition:all .2s}.info-card:hover{background:#f1f5f9;border-color:#cbd5e1;transform:translate(4px)}.info-icon{font-size:32px;line-height:1;flex-shrink:0}.info-text h4{font-size:15px;font-weight:600;color:#1f2937;margin:0 0 4px}.info-text p{font-size:13px;color:#6b7280;line-height:1.5;margin:0}@media (max-width: 1200px){.preview-toolbar-content{gap:12px}.color-editor-compact{gap:6px}.info-card{padding:12px}}.preview-toolbar-mini{background:#fff;border-bottom:1px solid #e5e7eb;padding:8px 16px}.toolbar-row{display:flex;align-items:center;gap:16px}.toolbar-item{display:flex;align-items:center;gap:8px}.toolbar-item.colors{margin-left:auto}.template-select-mini{padding:6px 10px;border:1px solid #e5e7eb;border-radius:6px;font-size:13px;color:#1f2937;background:#fff;cursor:pointer;transition:all .2s;min-width:140px}.template-select-mini:hover{border-color:#3b82f6}.template-select-mini:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f61a}.color-picker-mini{position:relative;width:32px;height:32px}.color-input-mini{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:2}.color-swatch-mini{width:100%;height:100%;border-radius:6px;border:2px solid #e5e7eb;cursor:pointer;transition:all .2s;box-shadow:0 1px 3px #0000001a}.color-picker-mini:hover .color-swatch-mini{border-color:#3b82f6;transform:translateY(-2px);box-shadow:0 2px 6px #3b82f64d}.reset-btn-mini{width:32px;height:32px;border:1px solid #e5e7eb;border-radius:6px;background:#fff;cursor:pointer;font-size:14px;transition:all .2s;display:flex;align-items:center;justify-content:center;padding:0}.reset-btn-mini:hover{background:#f1f5f9;border-color:#cbd5e1}.reset-btn-mini:active{transform:scale(.95)}.writing-assistant-simple{padding:20px}.assistant-header{margin-bottom:16px}.quick-tips{display:flex;flex-direction:column;gap:12px}.tip-item{display:flex;align-items:center;gap:12px;padding:12px;background:#f8fafc;border:1px solid #e5e7eb;border-radius:8px;transition:all .2s}.tip-item:hover{background:#eff6ff;border-color:#bfdbfe}.tip-icon{font-size:24px;flex-shrink:0;line-height:1}.tip-text{font-size:13px;color:#1f2937;line-height:1.4}@media (max-width: 1400px){.toolbar-row{gap:12px}.template-select-mini{min-width:120px;font-size:12px}}.spell-check-status{cursor:pointer;padding:4px 8px;border-radius:4px;transition:all .2s;-webkit-user-select:none;user-select:none}.spell-check-status.disabled{color:#999;opacity:.7}.spell-check-status.disabled:hover{background:#0000000d}.spell-check-status.enabled{color:#2196f3;font-weight:500}.spell-check-status.enabled:hover{background:#2196f31a}.status-btn{background:none;border:1px solid #dee2e6;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:11px;color:#2196f3;transition:all .2s}.status-btn:hover{background:#2196f31a;border-color:#2196f3}.spell-errors-list-bottom{max-height:200px;overflow-y:auto;background:#fff;border-top:1px solid #e0e0e0;margin-top:8px;box-shadow:0 -2px 8px #0000000d}.spell-errors-list-bottom .spell-errors-list-header{position:sticky;top:0;background:#f5f5f5;padding:8px 16px;border-bottom:1px solid #e0e0e0;font-weight:600;font-size:12px;color:#333;display:flex;justify-content:space-between;align-items:center;z-index:1}.spell-errors-list-bottom .close-btn{background:none;border:none;cursor:pointer;color:#999;font-size:16px;line-height:1;padding:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .2s}.spell-errors-list-bottom .close-btn:hover{background:#0000001a;color:#333}.spell-errors-items{padding:4px 0}.spell-errors-items .spell-error-item{padding:8px 16px;border-bottom:1px solid #f0f0f0;transition:background .2s;cursor:pointer}.spell-errors-items .spell-error-item:hover{background:#2196f30d}.spell-errors-items .spell-error-item:last-child{border-bottom:none}.spell-error-item-word{display:flex;align-items:center;gap:8px;margin-bottom:4px;font-size:13px}.spell-error-item-word .wrong{color:#ff6b6b;font-weight:600;text-decoration:line-through}.spell-error-item-word .arrow{color:#999}.spell-error-item-word .correct{color:#4caf50;font-weight:600}.spell-error-item-context{font-size:11px;color:#999;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-sidebar{width:280px;background:#ffffff59;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-right:1px solid rgba(255,255,255,.2);display:flex;flex-direction:column;height:100%}.sidebar-nav{display:flex;background:#fff3;border-bottom:1px solid rgba(255,255,255,.1);padding:4px;gap:4px;margin:12px 16px;border-radius:12px}.nav-tab{flex:1;padding:8px 12px;background:transparent;border:none;cursor:pointer;font-size:13px;color:#64748b;border-radius:8px;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;gap:6px}.nav-tab:hover{color:#1e40af;background:#ffffff80}.nav-tab.active{color:#1e40af;background:#fff;box-shadow:0 2px 8px #0000000d;font-weight:600}.sidebar-content{flex:1;overflow-y:auto;padding:0}.template-selector{display:flex;flex-direction:column;height:100%}.section-title{padding:20px 20px 0;margin:0 0 16px;font-size:18px;font-weight:600;color:#1f2937}.template-grid{padding:0 20px;display:flex;flex-direction:column;gap:12px;margin-bottom:24px}.template-card{border:1px solid rgba(255,255,255,.4);border-radius:16px;padding:16px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);background:#ffffff80;position:relative;overflow:hidden}.template-card:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,#fff3,#fff0);pointer-events:none}.template-card:hover{background:#fffc;transform:translateY(-2px);box-shadow:0 8px 24px #00000014;border-color:#1e6fff4d}.template-card.active{background:#ffffffe6;border-color:#1e6fff;box-shadow:0 8px 32px #1e6fff26}.template-preview{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}.template-icon{font-size:24px;flex-shrink:0}.template-info{flex:1}.template-name{font-size:16px;font-weight:600;color:#1f2937;margin:0 0 4px}.template-desc{font-size:14px;color:#6b7280;margin:0;line-height:1.4}.template-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}.template-tag{background:#f1f5f9;color:#475569;padding:4px 8px;border-radius:6px;font-size:12px;font-weight:500}.template-active-indicator{background:#10b981;color:#fff;padding:6px 12px;border-radius:6px;font-size:12px;font-weight:600;text-align:center;margin-top:8px}.template-settings{border-top:1px solid #e5e7eb;background:#f9fafb;padding:20px;flex:1;overflow-y:auto}.settings-title{font-size:16px;font-weight:600;color:#1f2937;margin:0 0 16px;display:flex;align-items:center;gap:8px}.variable-group{display:flex;flex-direction:column;gap:16px;margin-bottom:24px}.variable-label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:500;color:#374151}.variable-input{padding:8px 12px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;transition:border-color .2s ease}.variable-input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.fixed-assets{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px;margin-bottom:20px}.assets-title{font-size:15px;font-weight:600;color:#1f2937;margin:0 0 6px}.assets-desc{font-size:13px;color:#6b7280;margin:0 0 16px;line-height:1.4}.template-usage-guide{background:#fef3c7;border:1px solid #fcd34d;border-radius:12px;padding:16px;margin-top:16px}.template-usage-guide h5{font-size:14px;font-weight:600;color:#92400e;margin:0 0 12px}.usage-content{font-size:13px;line-height:1.5}.usage-content h6{color:#92400e;font-size:13px;font-weight:600;margin:12px 0 8px}.usage-content div,.usage-content p{color:#a16207;margin:4px 0}.publish-guide{padding:20px;height:100%;overflow-y:auto}.guide-header h3{font-size:18px;font-weight:600;color:#1f2937;margin:0 0 20px;display:flex;align-items:center;gap:8px}.guide-section{margin-bottom:32px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:20px}.guide-section h4{font-size:16px;font-weight:600;color:#1f2937;margin:0 0 16px;display:flex;align-items:center;gap:8px}.publish-steps{display:flex;flex-direction:column;gap:16px}.step{display:flex;gap:12px;align-items:flex-start}.step-number{background:#3b82f6;color:#fff;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex-shrink:0}.step-content h5{font-size:14px;font-weight:600;color:#1f2937;margin:0 0 4px}.step-content p{font-size:13px;color:#6b7280;margin:0;line-height:1.5}.tips-list{list-style:none;padding:0;margin:0}.tips-list li{padding:8px 0;border-bottom:1px solid #f3f4f6;font-size:13px;color:#374151;line-height:1.5}.tips-list li:last-child{border-bottom:none}.advanced-features{display:flex;flex-direction:column;gap:16px}.feature{background:#f8fafc;padding:12px;border-radius:8px}.feature h5{font-size:14px;font-weight:600;color:#1f2937;margin:0 0 6px}.feature p{font-size:13px;color:#6b7280;margin:0;line-height:1.4}.settings-container{padding:20px;height:100%;overflow-y:auto}.settings-section{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:20px;margin-bottom:20px}.settings-subtitle{font-size:16px;font-weight:600;color:#1f2937;margin:0 0 8px;display:flex;align-items:center;gap:8px}.settings-desc{font-size:13px;color:#6b7280;margin:0 0 16px;line-height:1.4}.input-help{font-size:12px;color:#9ca3af;margin-top:4px;line-height:1.3}.color-group{display:flex;flex-direction:column;gap:12px}.color-item{display:flex;flex-direction:column}.color-label{display:flex;flex-direction:column;gap:8px;font-size:14px;font-weight:500;color:#374151}.color-input-wrapper{display:flex;align-items:center;gap:12px;padding:8px 12px;border:1px solid #d1d5db;border-radius:8px;background:#fff}.color-input{width:40px;height:30px;border:none;border-radius:6px;cursor:pointer}.color-value{font-family:Monaco,Menlo,monospace;font-size:13px;color:#6b7280;-webkit-user-select:all;user-select:all}.advanced-options{display:flex;flex-direction:column;gap:12px}.checkbox-label{display:flex;align-items:center;gap:8px;font-size:14px;color:#374151;cursor:pointer}.checkbox-label input[type=checkbox]{width:16px;height:16px;accent-color:#3b82f6}.wechat-config{padding:0}.config-title{font-size:16px;font-weight:600;color:#1f2937;margin:0 0 16px;display:flex;align-items:center;gap:8px}.config-form{display:flex;flex-direction:column;gap:20px}.config-desc{padding:16px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:12px}.config-desc p{margin:0 0 16px;font-size:14px;color:#1e40af}.config-steps{display:flex;flex-direction:column;gap:8px}.config-step{display:flex;align-items:center;gap:8px;font-size:13px;color:#374151}.step-num{width:20px;height:20px;background:#3b82f6;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;flex-shrink:0}.form-group{display:flex;flex-direction:column;gap:16px}.form-label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:500;color:#374151}.form-input{padding:10px 12px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;transition:border-color .2s ease;font-family:Monaco,Menlo,monospace}.form-input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.connect-btn{padding:12px 24px;background:#10b981;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:background .2s ease;display:flex;align-items:center;justify-content:center;gap:8px}.connect-btn:hover:not(:disabled){background:#059669}.connect-btn:disabled{opacity:.6;cursor:not-allowed}.btn-spinner{width:16px;height:16px;border:2px solid transparent;border-top:2px solid white;border-radius:50%;animation:spin 1s linear infinite}.connected-info{display:flex;flex-direction:column;gap:16px}.account-card{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:12px;padding:16px}.account-header{display:flex;gap:12px;align-items:center;margin-bottom:16px}.account-avatar{width:48px;height:48px;border-radius:50%;background:#10b981;display:flex;align-items:center;justify-content:center;flex-shrink:0}.avatar-placeholder{font-size:20px;font-weight:700;color:#fff}.account-details{flex:1}.account-name{margin:0 0 4px;font-size:16px;font-weight:600;color:#1f2937}.account-meta{display:flex;align-items:center;gap:8px;margin-bottom:4px}.account-type{font-size:13px;color:#059669;background:#dcfce7;padding:2px 8px;border-radius:12px}.verified-badge{font-size:13px;color:#0369a1;background:#dbeafe;padding:2px 8px;border-radius:12px}.account-id{font-size:12px;color:#6b7280;font-family:Monaco,Menlo,monospace}.account-stats{display:flex;gap:24px}.stat-item{text-align:center}.stat-value{font-size:18px;font-weight:600;color:#059669;margin-bottom:2px}.stat-label{font-size:12px;color:#6b7280}.connection-actions{display:flex;gap:12px}.permission-info{margin-top:8px}.permission-info h6{margin:0 0 8px;font-size:14px;font-weight:600;color:#374151}.permission-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px}.permission-item{display:flex;align-items:center;gap:8px;font-size:13px;padding:4px 0}.permission-item.granted{color:#059669}.permission-item.limited{color:#d97706}.permission-icon{font-size:14px}.template-selector .template-settings{display:none}.template-selector .section-title{padding:20px 20px 0;margin:0 0 16px}.template-selector{padding-bottom:20px}.template-selector-compact{padding:20px}.template-select-group{position:relative;display:flex;gap:8px;align-items:center;margin-bottom:16px}.template-select{flex:1;padding:10px 14px;border:2px solid #e5e7eb;border-radius:8px;font-size:14px;color:#1f2937;background:#fff;cursor:pointer;transition:all .2s}.template-select:hover{border-color:#3b82f6}.template-select:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.template-help-btn{width:36px;height:36px;border:2px solid #e5e7eb;border-radius:8px;background:#fff;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:all .2s}.template-help-btn:hover{border-color:#3b82f6;background:#eff6ff}.template-tooltip{position:absolute;top:100%;left:0;right:0;margin-top:8px;z-index:1000;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.tooltip-content{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px;box-shadow:0 10px 40px #00000026;max-height:400px;overflow-y:auto}.tooltip-content h4{margin:0 0 12px;font-size:16px;color:#1f2937}.usage-text{font-size:13px;color:#6b7280;line-height:1.6}.usage-subtitle{font-weight:600;color:#1f2937;margin:12px 0 8px}.usage-item{margin:4px 0;padding-left:8px}.usage-text-line{margin:8px 0}.template-scenarios{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:16px;padding:12px;background:#f8fafc;border-radius:8px}.scenarios-label{font-size:13px;color:#64748b;font-weight:500}.scenario-tag{background:#fff;color:#475569;padding:4px 10px;border-radius:6px;font-size:12px;font-weight:500;border:1px solid #e5e7eb}.color-editor-group{margin-top:16px;padding:16px;background:#f8fafc;border-radius:12px;border:1px solid #e5e7eb}.color-editor-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.color-label{font-size:14px;color:#1f2937;font-weight:600}.color-hint{font-size:12px;color:#94a3b8}.color-editor-swatches{display:flex;flex-direction:column;gap:10px}.color-editor-item{display:flex;align-items:center}.color-editor-label{display:flex;align-items:center;gap:12px;font-size:13px;color:#64748b;font-weight:500;cursor:pointer;flex:1;min-width:80px}.color-editor-input-wrapper{position:relative;display:flex;align-items:center;flex:1}.color-picker-input{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:2}.color-display-swatch{width:100%;height:36px;border-radius:8px;border:2px solid #e5e7eb;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 4px #0000000d;position:relative;overflow:hidden}.color-display-swatch:hover{border-color:#3b82f6;box-shadow:0 4px 8px #3b82f633;transform:translateY(-1px)}.color-display-swatch:active{transform:translateY(0);box-shadow:0 2px 4px #0000001a}.color-hex-value{font-size:12px;font-weight:600;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3);padding:2px 8px;background:#00000026;border-radius:4px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);pointer-events:none;-webkit-user-select:none;user-select:none}.reset-colors-btn{margin-top:12px;width:100%;padding:8px 12px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;font-size:13px;color:#64748b;cursor:pointer;transition:all .2s ease;font-weight:500}.reset-colors-btn:hover{background:#f1f5f9;border-color:#cbd5e1;color:#475569}.reset-colors-btn:active{background:#e2e8f0;transform:scale(.98)}.color-picker-input::-webkit-color-swatch-wrapper{padding:0}.color-picker-input::-webkit-color-swatch{border:none;border-radius:0}.color-picker-input::-moz-color-swatch{border:none;border-radius:0}@media (max-width: 1200px){.app-sidebar{width:280px}.template-grid{padding:0 16px}.settings-container,.publish-guide{padding:16px}}.ai-usage-badge{margin-top:8px;font-size:12px}.usage-count{display:inline-block;padding:4px 12px;background:#e3f2fd;color:#1976d2;border-radius:12px;font-weight:500}.usage-count.warning{background:#fff3e0;color:#f57c00}.usage-unlimited{display:inline-block;padding:4px 12px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-radius:12px;font-weight:500}.settings{padding:20px;max-width:100%;height:100%;overflow-y:auto}.settings-header{margin-bottom:24px;border-bottom:2px solid #f0f0f0;padding-bottom:16px}.settings-header h3{margin:0 0 16px;font-size:18px;font-weight:600;color:#333}.settings-tabs{display:flex;gap:8px;flex-wrap:wrap}.settings-tab{padding:8px 16px;border:1px solid #e0e0e0;border-radius:6px;background:#fff;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s;white-space:nowrap}.settings-tab:hover{background:#f8f9fa;border-color:#007bff}.settings-tab.active{background:#007bff;color:#fff;border-color:#007bff}.settings-content{margin-top:20px}.general-settings{max-width:500px}.general-settings h4{margin:0 0 16px;font-size:16px;font-weight:600;color:#333}.general-settings h5{margin:20px 0 12px;font-size:14px;font-weight:600;color:#666}.setting-group{display:flex;flex-direction:column;gap:12px;margin-bottom:24px;padding:16px;background:#f8f9fa;border-radius:8px}.setting-item{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;padding:8px 12px;border-radius:6px;transition:background .2s}.setting-item:hover{background:#ffffffb3}.setting-item span{font-size:14px;font-weight:500;color:#333}.setting-item input[type=checkbox]{width:18px;height:18px;cursor:pointer}.storage-settings-container,.backup-settings-container{max-width:100%;overflow:hidden}.storage-settings-container .data-backup-container,.backup-settings-container .data-backup-container{padding:0;max-width:none}.storage-settings-container .backup-header,.backup-settings-container .backup-header{text-align:left;margin-bottom:16px}.storage-settings-container .close-btn,.backup-settings-container .close-btn{display:none}.settings-container{max-width:100%}.section-title{margin:0 0 24px;font-size:20px;font-weight:600;color:#333}.settings-section{margin-bottom:32px;padding:20px;background:#f8f9fa;border-radius:12px;border:1px solid #e5e7eb}.settings-section:last-child{margin-bottom:0}.settings-subtitle{margin:0 0 8px;font-size:16px;font-weight:600;color:#333;display:flex;align-items:center;gap:6px}.settings-desc{margin:0 0 16px;font-size:13px;color:#6b7280;line-height:1.5}.user-info{display:flex;flex-direction:column;gap:12px;padding:16px;background:#fff;border-radius:8px;border:1px solid #e5e7eb}.info-item{display:flex;align-items:center;font-size:14px}.info-label{font-weight:500;color:#6b7280;min-width:80px}.info-value{color:#333;font-weight:400}.preference-group{display:flex;flex-direction:column;gap:12px}.preference-item{display:flex;flex-direction:row;align-items:flex-start;gap:12px;padding:16px;background:#fff;border-radius:8px;border:1px solid #e5e7eb;cursor:pointer;transition:all .2s;position:relative}.preference-item:hover{border-color:#1e6fff;box-shadow:0 2px 8px #1e6fff1a}.preference-item input[type=checkbox]{position:absolute;opacity:0;width:20px;height:20px;margin:0;cursor:pointer}.preference-item:before{content:"";display:block;width:20px;height:20px;min-width:20px;border:2px solid #d1d5db;border-radius:4px;background:#fff;transition:all .2s;margin-top:2px}.preference-item:has(input[type=checkbox]:checked):before{background:#1e6fff;border-color:#1e6fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");background-size:14px;background-position:center;background-repeat:no-repeat}.preference-content{display:flex;flex-direction:column;gap:4px;flex:1}.preference-label{font-size:14px;font-weight:500;color:#333;line-height:1.5}.preference-desc{font-size:13px;color:#6b7280;line-height:1.5}.brand-settings-container{max-width:100%}.brand-settings-container h4{margin:0 0 12px;font-size:16px;font-weight:600;color:#333}.settings-description{margin:0 0 16px;font-size:13px;color:#6b7280;line-height:1.6}@media (max-width: 768px){.settings{padding:16px}.settings-tabs{flex-direction:column}.settings-tab{text-align:center}.setting-item{flex-direction:column;align-items:flex-start;gap:8px}.setting-item input[type=checkbox]{align-self:flex-end}.settings-section{padding:16px;margin-bottom:20px}.preference-item{padding:14px;gap:10px}.preference-item:before{width:18px;height:18px;min-width:18px}.preference-label{font-size:13px}.preference-desc{font-size:12px}.info-item{flex-direction:column;align-items:flex-start;gap:4px}.info-label{min-width:auto;font-size:12px}.info-value{font-size:13px}.section-title{font-size:18px;margin-bottom:20px}.settings-subtitle{font-size:15px}}