@import"https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=DM+Sans:wght@400;500;600;700&display=swap";:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Noto Sans,PingFang SC,Microsoft YaHei,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh}#root{min-height:100vh}:root{--bg-primary: #0a0a0c;--bg-secondary: #121218;--bg-card: #1a1a22;--bg-card-hover: #222230;--gold-primary: #d4a853;--gold-light: #e8c87a;--gold-dark: #b8923f;--amber: #f59e0b;--copper: #c77d4a;--accent-cyan: #22d3d8;--accent-rose: #e11d48;--accent-violet: #8b5cf6;--text-primary: #f5f5f5;--text-secondary: #a1a1aa;--text-muted: #71717a;--text-gold: #d4a853;--border-subtle: rgba(212, 168, 83, .15);--border-active: rgba(212, 168, 83, .4);--glow-gold: rgba(212, 168, 83, .3);--glow-amber: rgba(245, 158, 11, .2);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);--shadow-md: 0 4px 20px rgba(0, 0, 0, .5);--shadow-lg: 0 8px 40px rgba(0, 0, 0, .6);--shadow-glow: 0 0 30px var(--glow-gold);--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--space-2xl: 48px;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-xl: 24px}*{margin:0;padding:0;box-sizing:border-box}body{font-family:DM Sans,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg-primary);color:var(--text-primary);line-height:1.6;min-height:100vh;overflow-x:hidden}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");opacity:.03;pointer-events:none;z-index:9999}.app{min-height:100vh;display:flex;flex-direction:column;background:radial-gradient(ellipse at 20% 0%,rgba(212,168,83,.08) 0%,transparent 50%),radial-gradient(ellipse at 80% 100%,rgba(139,92,246,.06) 0%,transparent 50%),linear-gradient(180deg,var(--bg-primary) 0%,var(--bg-secondary) 100%)}.header{background:linear-gradient(180deg,#121218fa,#121218e6);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--border-subtle);padding:var(--space-md) var(--space-xl);position:sticky;top:0;z-index:100}.header-content{max-width:1800px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}.logo{display:flex;align-items:center;gap:var(--space-md)}.logo i{font-size:1.75rem;color:var(--gold-primary);filter:drop-shadow(0 0 10px var(--glow-gold));animation:flicker 3s infinite}@keyframes flicker{0%,to{opacity:1}92%{opacity:1}93%{opacity:.8}94%{opacity:1}96%{opacity:.9}97%{opacity:1}}.logo span{font-family:"Noto Serif SC",serif;font-size:1.5rem;font-weight:700;background:linear-gradient(135deg,var(--gold-light) 0%,var(--gold-primary) 50%,var(--gold-dark) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:2px}.subtitle{font-size:.85rem;color:var(--text-muted);letter-spacing:1px;text-transform:uppercase}.main{flex:1;display:flex;max-width:1800px;margin:0 auto;width:100%;padding:var(--space-lg);gap:var(--space-lg)}.sidebar{width:260px;flex-shrink:0;background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border-subtle);padding:var(--space-lg);height:fit-content;position:sticky;top:90px}.sidebar-title{display:flex;align-items:center;gap:var(--space-sm);color:var(--gold-primary);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:2px;margin-bottom:var(--space-lg);padding-bottom:var(--space-md);border-bottom:1px solid var(--border-subtle)}.sidebar-title i{font-size:.9rem}.category-nav{display:flex;flex-direction:column;gap:var(--space-xs)}.category-btn{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md);background:transparent;border:1px solid transparent;border-radius:var(--radius-md);color:var(--text-secondary);font-size:.9rem;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);text-align:left;position:relative;overflow:hidden}.category-btn:before{content:"";position:absolute;left:0;top:0;height:100%;width:3px;background:var(--gold-primary);transform:scaleY(0);transition:transform .3s ease}.category-btn:hover{background:var(--bg-card-hover);color:var(--text-primary);border-color:var(--border-subtle);transform:translate(4px)}.category-btn.active{background:linear-gradient(135deg,#d4a85326,#d4a8530d);border-color:var(--border-active);color:var(--gold-primary)}.category-btn.active:before{transform:scaleY(1)}.category-btn.combinable{border-color:#8b5cf666;animation:combinablePulse 2s ease-in-out infinite}.category-btn.combinable:hover{border-color:#8b5cf699}.category-btn.combinable .category-btn-icon{color:var(--accent-violet)}.combinable-hint{position:absolute;right:8px;top:50%;transform:translateY(-50%);color:var(--accent-violet);font-size:.7rem;animation:hintBlink 1.5s ease-in-out infinite}@keyframes combinablePulse{0%,to{box-shadow:0 0 #8b5cf600}50%{box-shadow:0 0 15px 2px #8b5cf64d}}@keyframes hintBlink{0%,to{opacity:1}50%{opacity:.4}}.category-btn i{width:20px;text-align:center;font-size:1rem}.category-btn span{flex:1}.badge{background:var(--gold-primary);color:var(--bg-primary);font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:20px;min-width:20px;text-align:center}.content{flex:1;min-width:0}.content-header{margin-bottom:var(--space-lg)}.content-header h2{font-family:"Noto Serif SC",serif;font-size:1.75rem;font-weight:600;color:var(--text-primary);display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-xs)}.content-header h2 i{color:var(--gold-primary)}.content-header p{color:var(--text-muted);font-size:.9rem;padding-left:36px}.selection-summary{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;padding:10px 14px;background:#ffffff08;border:1px solid var(--border-subtle);border-radius:var(--radius-md);animation:hintSlideIn .5s ease}@keyframes hintSlideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.selection-summary .selected-cats{color:var(--gold-light);font-size:.85rem;font-weight:500}.selection-summary .can-combine{color:var(--accent-violet);font-size:.8rem;padding-left:12px;border-left:1px solid var(--border-subtle)}.selection-summary .no-combine{color:var(--accent-cyan);font-size:.8rem;padding-left:12px;border-left:1px solid var(--border-subtle);display:flex;align-items:center;gap:6px}.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--space-md)}.option-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-md);cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;align-items:center;position:relative;overflow:hidden}.option-card:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 0%,rgba(212,168,83,.05) 100%);opacity:0;transition:opacity .3s ease}.option-card:hover{transform:translateY(-4px);border-color:var(--border-active);box-shadow:var(--shadow-glow)}.option-card:hover:before{opacity:1}.option-card.selected{border-color:var(--gold-primary);background:linear-gradient(135deg,#d4a8531f,#d4a8530a);box-shadow:0 0 20px var(--glow-gold)}.option-card.selected:after{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold-dark),var(--gold-light),var(--gold-dark))}.option-card .option-image{position:relative;width:100%;height:100px;border-radius:var(--radius-sm);overflow:hidden;margin-bottom:var(--space-sm)}.option-card .option-image img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.4,0,.2,1)}.option-card:hover .option-image img{transform:scale(1.08)}.option-card .option-image-overlay{position:absolute;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s ease}.option-card:hover .option-image-overlay{opacity:1}.option-card .option-image-overlay i{color:var(--gold-light);font-size:1.25rem;transform:scale(.8);transition:transform .3s ease}.option-card:hover .option-image-overlay i{transform:scale(1)}.option-zh{font-family:"Noto Serif SC",serif;font-size:1rem;font-weight:600;color:var(--text-primary);margin-bottom:2px}.option-en{font-size:.7rem;color:var(--text-muted);text-align:center;margin-bottom:var(--space-xs)}.option-level{font-size:.65rem;padding:2px 8px;border-radius:10px;font-weight:500}.option-level.level-beginner{background:#22d3d826;color:var(--accent-cyan)}.option-level.level-intermediate{background:#f59e0b26;color:var(--amber)}.option-level.level-advanced{background:#e11d4826;color:var(--accent-rose)}.option-card>i:last-child{position:absolute;top:var(--space-sm);right:var(--space-sm);font-size:.9rem;color:var(--text-muted);transition:color .3s ease}.option-card.selected>i:last-child{color:var(--gold-primary)}.translation-panel{width:320px;flex-shrink:0;background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border-subtle);height:fit-content;position:sticky;top:90px;max-height:calc(100vh - 130px);overflow:hidden;display:flex;flex-direction:column}.panel-header{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-lg);border-bottom:1px solid var(--border-subtle);background:linear-gradient(180deg,rgba(212,168,83,.08) 0%,transparent 100%)}.panel-header i{color:var(--gold-primary);font-size:1.1rem}.panel-header span{font-family:"Noto Serif SC",serif;font-size:1rem;font-weight:600;color:var(--gold-light);letter-spacing:1px}.panel-content{padding:var(--space-md);overflow-y:auto;flex:1}.panel-content::-webkit-scrollbar{width:6px}.panel-content::-webkit-scrollbar-track{background:transparent}.panel-content::-webkit-scrollbar-thumb{background:var(--border-subtle);border-radius:3px}.panel-content::-webkit-scrollbar-thumb:hover{background:var(--border-active)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-2xl) var(--space-md);color:var(--text-muted);text-align:center}.empty-state i{font-size:2.5rem;margin-bottom:var(--space-md);opacity:.3;color:var(--gold-primary)}.prompt-item{background:#ffffff05;border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--space-md);margin-bottom:var(--space-md);transition:all .3s ease;animation:slideIn .4s ease}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.prompt-item:hover{border-color:var(--border-active);background:#ffffff0a}.prompt-item-header{margin-bottom:var(--space-xs)}.prompt-zh{font-family:"Noto Serif SC",serif;font-size:1.2rem;font-weight:700;color:var(--gold-light);display:block}.prompt-en{font-size:.8rem;color:var(--text-secondary);display:block;margin-bottom:var(--space-sm)}.prompt-description{margin-bottom:var(--space-sm)}.prompt-description p{color:var(--text-secondary);font-size:.8rem;line-height:1.6}.prompt-text{background:linear-gradient(135deg,#d4a8531a,#8b5cf60d);border-radius:var(--radius-sm);padding:var(--space-sm);margin-bottom:var(--space-sm);border-left:2px solid var(--gold-primary)}.prompt-text-label{color:var(--gold-primary);font-size:.65rem;text-transform:uppercase;letter-spacing:1px;margin-bottom:4px}.prompt-text p{color:var(--text-primary);font-size:.8rem;line-height:1.7}.prompt-section{margin-bottom:var(--space-sm)}.prompt-section-label{color:var(--text-muted);font-size:.65rem;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}.prompt-keywords{display:flex;flex-wrap:wrap;gap:6px}.keyword-tag{background:#22d3d81f;color:var(--accent-cyan);font-size:.7rem;padding:4px 10px;border-radius:12px}.prompt-equipment{display:flex;flex-wrap:wrap;gap:6px}.equipment-tag{background:#f59e0b1f;color:var(--amber);font-size:.7rem;padding:4px 10px;border-radius:12px}.footer{background:linear-gradient(180deg,#121218fa,#121218fc);border-top:1px solid var(--border-subtle);padding:var(--space-lg) var(--space-xl);position:sticky;bottom:0;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.footer-content{max-width:1800px;margin:0 auto}.prompts-textbox{width:100%;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-md);transition:all .3s ease}.prompts-textbox:hover{border-color:var(--border-active);box-shadow:0 0 20px var(--glow-gold)}.textbox-header{display:flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-sm);color:var(--gold-primary)}.textbox-header i{font-size:.9rem}.textbox-header span{font-size:.85rem;font-weight:600}.prompt-count{margin-left:auto;color:var(--text-muted);font-size:.75rem;font-weight:400}.prompts-textarea{width:100%;min-height:60px;max-height:120px;background:#0000004d;border:1px solid rgba(212,168,83,.1);border-radius:var(--radius-md);padding:var(--space-md);color:var(--text-primary);font-size:.9rem;line-height:1.8;resize:vertical;font-family:"Noto Serif SC",serif;cursor:pointer;transition:all .3s ease}.prompts-textarea:focus{outline:none;border-color:var(--gold-primary)}.prompts-textarea::placeholder{color:var(--text-muted);font-family:DM Sans,sans-serif}.prompts-textarea:hover{background:#0006}.textbox-tip{font-size:.7rem;color:var(--text-muted);text-align:right;margin-top:var(--space-xs)}.textbox-actions{display:flex;gap:var(--space-sm);margin-top:var(--space-sm);justify-content:flex-end}.btn-optimize{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);font-size:.85rem;font-weight:600;cursor:pointer;transition:all .3s ease;border:none;background:linear-gradient(135deg,#8b5cf6,#6366f1);color:#fff}.btn-optimize:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 15px #8b5cf666}.btn-optimize:disabled{opacity:.5;cursor:not-allowed}.optimized-result{margin-top:var(--space-md);padding:var(--space-md);background:linear-gradient(135deg,#8b5cf61a,#6366f10d);border:1px solid rgba(139,92,246,.3);border-radius:var(--radius-md);animation:slideIn .4s ease}.optimized-result-header{display:flex;align-items:center;gap:var(--space-sm);color:var(--accent-violet);font-weight:600;margin-bottom:var(--space-sm);font-size:.85rem}.optimized-result-header i{font-size:.9rem}.optimized-scene{margin-left:auto;font-size:.75rem;color:var(--text-muted);font-weight:400}.optimized-result-content{color:var(--text-primary);font-size:.85rem;line-height:1.7}.btn-clear,.btn-copy{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);font-size:.85rem;font-weight:500;cursor:pointer;transition:all .3s ease;border:none}.btn-clear{background:transparent;border:1px solid var(--border-subtle);color:var(--text-secondary)}.btn-clear:hover{border-color:var(--accent-rose);color:var(--accent-rose)}.btn-copy{background:linear-gradient(135deg,var(--gold-dark) 0%,var(--gold-primary) 100%);color:var(--bg-primary);font-weight:600}.btn-copy:hover:not(:disabled){background:linear-gradient(135deg,var(--gold-primary) 0%,var(--gold-light) 100%);transform:translateY(-2px);box-shadow:0 4px 15px var(--glow-gold)}.btn-copy:disabled{opacity:.5;cursor:not-allowed}.image-preview-modal{position:fixed;inset:0;background:#000000eb;display:flex;align-items:center;justify-content:center;z-index:9999;animation:fadeIn .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.image-preview-content{position:relative;max-width:85vw;max-height:85vh;display:flex;flex-direction:column;align-items:center;animation:scaleIn .4s cubic-bezier(.4,0,.2,1)}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.image-preview-content img{max-width:100%;max-height:75vh;object-fit:contain;border-radius:var(--radius-lg);box-shadow:0 25px 80px #0009;border:2px solid var(--border-subtle)}.image-preview-close{position:absolute;top:-50px;right:0;background:#ffffff1a;border:1px solid var(--border-subtle);color:var(--text-primary);font-size:1.25rem;width:44px;height:44px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.image-preview-close:hover{background:var(--gold-primary);color:var(--bg-primary);transform:rotate(90deg)}.image-preview-name{color:var(--gold-light);font-family:"Noto Serif SC",serif;font-size:1.25rem;font-weight:600;margin-top:var(--space-lg);text-shadow:0 2px 20px rgba(0,0,0,.5)}@media(max-width:1200px){.main{flex-direction:column}.sidebar,.translation-panel{width:100%;position:static;max-height:none}.category-nav{flex-direction:row;flex-wrap:wrap}.cards-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}@media(max-width:768px){.header-content{flex-direction:column;gap:var(--space-sm);text-align:center}.logo span{font-size:1.25rem}.cards-grid{grid-template-columns:repeat(2,1fr)}.footer-content{flex-direction:column;gap:var(--space-sm)}.selected-prompts{text-align:center;padding:var(--space-sm) 0}}.option-card{animation:cardFadeIn .5s ease;animation-fill-mode:both}@keyframes cardFadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.cards-grid .option-card:nth-child(1){animation-delay:.02s}.cards-grid .option-card:nth-child(2){animation-delay:.04s}.cards-grid .option-card:nth-child(3){animation-delay:.06s}.cards-grid .option-card:nth-child(4){animation-delay:.08s}.cards-grid .option-card:nth-child(5){animation-delay:.1s}.cards-grid .option-card:nth-child(6){animation-delay:.12s}.cards-grid .option-card:nth-child(7){animation-delay:.14s}.cards-grid .option-card:nth-child(8){animation-delay:.16s}.cards-grid .option-card:nth-child(9){animation-delay:.18s}.cards-grid .option-card:nth-child(10){animation-delay:.2s}.cards-grid .option-card:nth-child(11){animation-delay:.22s}.cards-grid .option-card:nth-child(12){animation-delay:.24s}.cards-grid .option-card:nth-child(13){animation-delay:.26s}.cards-grid .option-card:nth-child(14){animation-delay:.28s}.cards-grid .option-card:nth-child(15){animation-delay:.3s}.cards-grid .option-card:nth-child(16){animation-delay:.32s}.cards-grid .option-card:nth-child(17){animation-delay:.34s}.cards-grid .option-card:nth-child(18){animation-delay:.36s}.cards-grid .option-card:nth-child(19){animation-delay:.38s}.cards-grid .option-card:nth-child(20){animation-delay:.4s}@keyframes selectionPulse{0%,to{box-shadow:0 0 20px var(--glow-gold)}50%{box-shadow:0 0 35px var(--glow-amber)}}.option-card.selected{animation:selectionPulse 2s infinite}
