*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--bg-base: #050505;--bg-surface: #0a0a0a;--bg-elevated: #111111;--glass: rgba(255, 255, 255, .025);--cyan: #00f0ff;--cyan-dim: rgba(0, 240, 255, .08);--cyan-glow: rgba(0, 240, 255, .35);--green: #00ff88;--green-dim: rgba(0, 255, 136, .08);--green-glow: rgba(0, 255, 136, .3);--purple: #a855f7;--purple-glow: rgba(168, 85, 247, .3);--yellow: #facc15;--yellow-dim: rgba(250, 204, 21, .1);--text-primary: #e4e4e7;--text-secondary: #a1a1aa;--text-muted: #71717a;--danger: #ef4444;--danger-dim: rgba(239, 68, 68, .1);--radius: 2px;--transition: .2s cubic-bezier(.4, 0, .2, 1);--glow-sm: 0 0 8px;--glow-md: 0 0 20px;--glow-lg: 0 0 40px}html{font-size:16px}body{font-family:JetBrains Mono,SF Mono,Cascadia Code,Fira Code,Segoe UI,PingFang SC,Microsoft YaHei,monospace;background:var(--bg-base);color:var(--text-primary);min-height:100vh;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(60deg,transparent,transparent 100px,rgba(0,240,255,.015) 100px,rgba(0,240,255,.015) 101px),repeating-linear-gradient(-60deg,transparent,transparent 100px,rgba(0,240,255,.015) 100px,rgba(0,240,255,.015) 101px),repeating-linear-gradient(90deg,transparent 0px,transparent 79px,rgba(0,240,255,.02) 79px,rgba(0,240,255,.02) 80px),repeating-linear-gradient(0deg,transparent 0px,transparent 1px,rgba(0,240,255,.008) 1px,rgba(0,240,255,.008) 2px),radial-gradient(circle .5px at 1px 1px,rgba(255,255,255,.025) 50%,transparent 50%) 0 0 / 24px 24px,radial-gradient(ellipse 100% 100% at 50% 50%,transparent 35%,rgba(0,0,0,.55) 100%);pointer-events:none;z-index:0}.app-container{position:relative;z-index:1;max-width:900px;margin:0 auto;padding:40px 28px 80px;min-height:100vh;display:flex;flex-direction:column}.app-container:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0%,var(--cyan) 50%,transparent 100%);opacity:.6;z-index:10}.header{text-align:center;padding:50px 0 44px;position:relative}.header:after{content:"";position:absolute;bottom:0;left:50%;transform:translate(-50%);width:120px;height:1px;background:linear-gradient(90deg,transparent,var(--cyan-glow),transparent)}.logo{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:14px}.logo-icon{font-size:2rem;color:var(--cyan);filter:drop-shadow(var(--glow-md) var(--cyan-glow));animation:pulse-icon 2.5s ease-in-out infinite}@keyframes pulse-icon{0%,to{transform:scale(1)}50%{transform:scale(1.15)}}.logo h1{font-family:Inter,Segoe UI,PingFang SC,sans-serif;font-size:2.6rem;font-weight:900;letter-spacing:1px;background:linear-gradient(135deg,var(--cyan) 0%,var(--green) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(var(--glow-sm) var(--cyan-glow))}.logo h1 .highlight{letter-spacing:3px;background:linear-gradient(135deg,var(--green) 0%,var(--purple) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.subtitle{color:var(--text-secondary);font-size:.75rem;font-weight:400;letter-spacing:1.5px;text-transform:uppercase;font-family:JetBrains Mono,monospace}.subtitle-cn{color:var(--text-muted);font-size:.82rem;font-weight:400;margin-top:6px;letter-spacing:.5px;font-family:PingFang SC,Microsoft YaHei,sans-serif}.main-content{display:flex;flex-direction:column;gap:24px;flex:1}.card{background:var(--glass);border:1px solid rgba(255,255,255,.05);border-radius:var(--radius);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);overflow:hidden;position:relative;transition:border-color var(--transition),box-shadow var(--transition)}.card:before{content:"";position:absolute;top:0;left:16px;right:16px;height:1px;background:linear-gradient(90deg,transparent,rgba(0,240,255,.2),transparent)}.card:hover{border-color:#00f0ff26;box-shadow:var(--glow-md) var(--cyan-dim)}.card:after{content:"";position:absolute;top:0;right:0;width:24px;height:24px;background:linear-gradient(135deg,transparent 48%,rgba(0,240,255,.2) 48%);pointer-events:none}.card-header{display:flex;align-items:center;gap:8px;padding:14px 20px;border-bottom:1px solid rgba(255,255,255,.05);font-size:.75rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--text-secondary)}.card-icon{color:var(--cyan);font-size:1rem;filter:drop-shadow(var(--glow-sm) var(--cyan-glow))}.streaming-badge{margin-left:auto;font-size:.65rem;padding:3px 10px;border-radius:1px;background:var(--cyan-dim);color:var(--cyan);letter-spacing:1px;text-transform:uppercase;border:1px solid rgba(0,240,255,.15);animation:pulse-badge 1.5s ease-in-out infinite}@keyframes pulse-badge{0%,to{opacity:1}50%{opacity:.4}}.prompt-input{width:100%;border:none;outline:none;background:transparent;color:var(--text-primary);font-size:.9rem;line-height:1.8;padding:24px 20px 12px;resize:vertical;min-height:150px;font-family:inherit}.prompt-input::placeholder{color:var(--text-muted)}.prompt-input:disabled{opacity:.4}.input-actions{padding:0 20px 12px;display:flex}.tabs-bar{display:flex;align-items:center;gap:0;padding:0 20px;border-bottom:1px solid rgba(255,255,255,.05)}.tab-btn{display:flex;align-items:center;gap:6px;padding:10px 16px;background:transparent;border:none;border-bottom:2px solid transparent;color:var(--text-muted);font-size:.72rem;font-weight:600;letter-spacing:1px;cursor:pointer;transition:all var(--transition);font-family:inherit;margin-bottom:-1px}.tab-btn:hover:not(.active){color:var(--text-secondary)}.tab-btn.active{color:var(--text-primary);border-bottom-color:var(--cyan)}.tab-dot{width:6px;height:6px;border-radius:1px;opacity:.7;transition:opacity var(--transition)}.tab-btn.active .tab-dot{opacity:1;box-shadow:0 0 6px currentColor}.output-content{padding:24px 20px;min-height:200px;max-height:440px;overflow-y:auto;scroll-behavior:smooth;position:relative}.output-content:before{content:"";position:absolute;left:0;top:20px;bottom:20px;width:2px;background:linear-gradient(180deg,transparent,var(--green-glow),transparent);opacity:.3}.output-content::-webkit-scrollbar{width:4px}.output-content::-webkit-scrollbar-track{background:transparent}.output-content::-webkit-scrollbar-thumb{background:var(--text-muted);border-radius:var(--radius)}.output-content::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}.compare-view{display:flex;gap:0;min-height:200px;max-height:440px;overflow:hidden}.compare-col{flex:1;display:flex;flex-direction:column;overflow:hidden;padding:20px}.compare-col.original-col{border-right:1px solid rgba(255,255,255,.05)}.compare-label{font-size:.65rem;letter-spacing:1px;text-transform:uppercase;color:var(--text-muted);margin-bottom:12px;flex-shrink:0}.compare-text{font-size:.85rem;line-height:1.8;overflow-y:auto;flex:1;white-space:pre-wrap;word-break:break-word}.compare-col.original-col .compare-text{color:var(--text-secondary)}.compare-col.result-col .compare-text{color:var(--green)}.compare-col::-webkit-scrollbar{width:3px}.compare-col::-webkit-scrollbar-track{background:transparent}.compare-col::-webkit-scrollbar-thumb{background:var(--text-muted);border-radius:var(--radius)}.output-actions{margin-left:auto;display:flex;align-items:center;gap:6px;position:relative}.btn-toggle{background:var(--cyan-dim);color:var(--cyan);border:1px solid rgba(0,240,255,.12);font-size:.68rem;padding:6px 12px}.btn-toggle.active{background:#00f0ff2e;border-color:#00f0ff4d}.btn-export{background:var(--green-dim);color:var(--green);border:1px solid rgba(0,255,136,.12);font-size:.68rem;padding:6px 12px}.btn-export:hover{background:#00ff881f;border-color:#00ff884d}.export-menu{position:absolute;top:calc(100% + 6px);right:0;background:var(--bg-elevated);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);z-index:20;display:flex;flex-direction:column;box-shadow:var(--glow-md) #0006}.export-menu button{padding:8px 18px;background:transparent;border:none;color:var(--text-primary);font-size:.72rem;font-family:inherit;letter-spacing:1px;cursor:pointer;text-align:left;transition:background var(--transition)}.export-menu button:hover{background:#00f0ff0f;color:var(--cyan)}.export-menu button+button{border-top:1px solid rgba(255,255,255,.04)}.advanced-panel{margin:0 20px;border:1px solid rgba(255,255,255,.04);border-radius:var(--radius);overflow:hidden;transition:border-color var(--transition)}.advanced-panel[open]{border-color:#00f0ff1a}.advanced-toggle{display:flex;align-items:center;gap:6px;padding:8px 14px;background:#ffffff05;color:var(--text-muted);font-size:.7rem;letter-spacing:1px;cursor:pointer;list-style:none;-webkit-user-select:none;user-select:none;transition:all var(--transition)}.advanced-toggle::-webkit-details-marker{display:none}.advanced-toggle span{font-size:.8rem}.advanced-toggle:hover{color:var(--text-secondary);background:#ffffff08}.advanced-panel[open] .advanced-toggle{border-bottom:1px solid rgba(255,255,255,.04)}.advanced-body{padding:10px}.selected-tags{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:10px;padding:8px 10px;border:1px dashed rgba(0,240,255,.15);border-radius:var(--radius);background:#00f0ff05}.selected-label{font-size:.65rem;letter-spacing:1px;text-transform:uppercase;color:var(--text-muted);flex-shrink:0}.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;background:#00f0ff14;border:1px solid rgba(0,240,255,.2);border-radius:var(--radius);color:var(--cyan);font-size:.72rem;letter-spacing:.5px;transition:all var(--transition)}.chip:hover{background:#00f0ff1f}.chip-remove{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--cyan);opacity:.5;font-size:.8rem;cursor:pointer;padding:0;width:16px;height:16px;line-height:1;transition:all var(--transition)}.chip-remove:hover{opacity:1;color:var(--danger)}.preset-btns{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}.btn-preset{background:transparent;color:var(--text-muted);border:1px solid rgba(255,255,255,.08);padding:6px 14px;font-size:.7rem;letter-spacing:.5px}.btn-preset:hover{background:#00f0ff0a;border-color:#00f0ff33;color:var(--text-secondary)}.btn-preset.active{background:#00f0ff14;border-color:#00f0ff40;color:var(--cyan)}.advanced-input{width:100%;border:none;outline:none;background:transparent;color:var(--text-primary);font-size:.8rem;line-height:1.6;padding:6px 8px;resize:vertical;min-height:60px;font-family:inherit}.advanced-input::placeholder{color:var(--text-muted)}.history-card .card-header .btn-mini{background:transparent;color:var(--text-muted);border:1px solid rgba(255,255,255,.06);padding:4px 10px;font-size:.62rem;border-radius:var(--radius);letter-spacing:1px;cursor:pointer;font-family:inherit;transition:all var(--transition)}.history-card .card-header .btn-mini:hover{color:var(--danger);border-color:#ef444433}.history-list{padding:0}.history-item{padding:12px 20px;border-bottom:1px solid rgba(255,255,255,.03);cursor:pointer;display:flex;align-items:center;justify-content:space-between;transition:background var(--transition)}.history-item:last-child{border-bottom:none}.history-item:hover{background:#00f0ff08}.history-main{display:flex;flex-direction:column;gap:4px;min-width:0}.history-input{font-size:.82rem;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.history-time{font-size:.62rem;color:var(--text-muted);letter-spacing:.5px}.history-dots{display:flex;gap:6px;flex-shrink:0}.history-dot{width:8px;height:8px;border-radius:1px;opacity:.4;transition:all var(--transition)}.history-dot.active{opacity:1;box-shadow:0 0 6px currentColor;transform:scale(1.3)}.card-footer{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-top:1px solid rgba(255,255,255,.05)}.char-count{font-size:.7rem;color:var(--text-secondary);letter-spacing:1px;font-family:JetBrains Mono,monospace}.btn-group,.footer-btns{display:flex;gap:10px}.btn{display:inline-flex;align-items:center;gap:6px;padding:10px 24px;border:1px solid transparent;border-radius:var(--radius);font-size:.8rem;font-weight:600;letter-spacing:.5px;cursor:pointer;transition:all var(--transition);font-family:inherit}.btn:disabled{opacity:.25;cursor:not-allowed}.btn-clear{background:transparent;color:var(--text-secondary);border:1px solid rgba(255,255,255,.1)}.btn-clear:hover:not(:disabled){background:#ffffff0d;border-color:#ffffff2e;color:var(--text-primary)}.btn-optimize{background:linear-gradient(135deg,var(--cyan) 0%,var(--green) 100%);color:var(--bg-base);border:1px solid var(--cyan);box-shadow:var(--glow-md) var(--cyan-glow);min-width:140px;justify-content:center}.btn-optimize:hover:not(:disabled){box-shadow:var(--glow-lg) var(--cyan-glow),inset 0 0 20px #00f0ff1a;transform:translateY(-1px)}.btn-optimize:active:not(:disabled){transform:translateY(0)}.btn-random{background:var(--yellow-dim);color:var(--yellow);border:1px solid rgba(250,204,21,.2);font-size:.72rem;padding:8px 18px}.btn-random:hover:not(:disabled){background:#facc152e;border-color:#facc1566;box-shadow:var(--glow-sm) #facc1526}.btn-copy{background:var(--cyan-dim);color:var(--cyan);border:1px solid rgba(0,240,255,.15);font-size:.72rem;padding:8px 16px}.btn-copy:hover{background:#00f0ff1f;border-color:#00f0ff4d}.placeholder{display:flex;align-items:center;justify-content:center;height:100%;min-height:160px}.placeholder-text{font-size:.82rem;letter-spacing:3px;text-transform:uppercase;color:var(--text-muted);font-family:JetBrains Mono,monospace}.placeholder-text:after{content:"_";animation:blink .8s step-end infinite;color:var(--cyan)}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.error-message{color:var(--danger);font-size:.8rem;padding:10px 14px;background:var(--danger-dim);border-radius:var(--radius);border:1px solid rgba(239,68,68,.12);display:flex;align-items:center;gap:10px;font-family:JetBrains Mono,monospace}.error-prefix{font-size:.6rem;font-weight:700;padding:2px 6px;background:#ef444433;border-radius:1px;letter-spacing:1px;flex-shrink:0}.output-text{font-size:.9rem;line-height:1.9;white-space:pre-wrap;word-break:break-word;color:var(--green);text-shadow:0 0 8px rgba(0,255,136,.08)}.cursor-blink{color:var(--cyan);font-weight:400;animation:blink .6s step-end infinite;text-shadow:var(--glow-sm) var(--cyan-glow)}.spinner{width:14px;height:14px;border:2px solid rgba(5,5,5,.25);border-top-color:var(--bg-base);border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.btn-arrow{display:inline-flex;align-items:center;justify-content:center;font-size:1rem;line-height:1}.footer{text-align:center;padding-top:50px;position:relative}.footer-line{width:80px;height:1px;margin:0 auto 14px;background:linear-gradient(90deg,transparent,var(--text-muted),transparent)}.footer p{color:var(--text-muted);font-size:.7rem;letter-spacing:2px;text-transform:uppercase}.footer strong{color:var(--cyan);text-shadow:var(--glow-sm) var(--cyan-glow)}.footer-stats{margin-top:6px;text-transform:none;letter-spacing:1px}@media (max-width: 640px){.app-container{padding:20px 14px 60px}.header{padding:30px 0 24px}.logo h1{font-size:2rem;letter-spacing:1px}.btn{padding:9px 16px;font-size:.72rem}.card-footer{flex-direction:column;gap:12px;align-items:stretch}.btn-group,.footer-btns,.compare-view{flex-direction:column}.compare-col.original-col{border-right:none;border-bottom:1px solid rgba(255,255,255,.05)}.output-actions{flex-wrap:wrap}.advanced-panel{margin:0 14px}}
