:root{--primary-color: #3b82f6;--primary-light: #eff6ff;--accent-color: #f59e0b;--text-main: #1e293b;--text-muted: #64748b;--bg-main: #f0f9ff;--card-bg: #ffffff;--border-radius: 20px;--shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, .05);--shadow-md: 0 10px 15px -3px rgba(0, 0, 0, .08)}body{margin:0;font-family:PingFang SC,Microsoft YaHei,sans-serif;background-color:var(--bg-main);color:var(--text-main)}.writer-app{min-height:100vh;display:flex;flex-direction:column}.app-header{background-color:var(--card-bg);box-shadow:var(--shadow-sm);padding:15px 30px;position:sticky;top:0;z-index:50;border-bottom:3px solid #e0f2fe}.header-container{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:15px}.logo-section{display:flex;align-items:center;gap:12px}.logo-icon{font-size:32px;background:#dbeafe;width:50px;height:50px;display:flex;align-items:center;justify-content:center;border-radius:15px;border:2px solid #93c5fd}.logo-section h1{margin:0;font-size:22px;color:#1d4ed8;font-weight:800}.slogan{margin:2px 0 0;font-size:13px;color:var(--text-muted);font-style:italic}.nav-tabs{display:flex;gap:10px}.nav-btn{background:none;border:none;padding:10px 18px;border-radius:12px;font-size:15px;font-weight:600;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .2s ease}.nav-btn:hover{background-color:var(--primary-light);color:var(--primary-color)}.nav-btn.active{background-color:var(--primary-color);color:#fff;box-shadow:0 4px 10px #3b82f64d}.badge{background-color:#ef4444;color:#fff;font-size:11px;padding:2px 6px;border-radius:10px;font-weight:700}.badge-blue{background-color:#3b82f6;color:#fff;font-size:11px;padding:2px 6px;border-radius:10px;font-weight:700}.main-content{flex:1;max-width:1200px;width:100%;margin:0 auto;padding:30px 20px;box-sizing:border-box}.quest-selection{text-align:center}.section-title{margin-bottom:30px}.section-title h2{font-size:28px;color:#1e3a8a;margin-bottom:10px}.section-title p{color:var(--text-muted);font-size:16px}.quest-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:25px;margin-top:20px}.quest-card{background-color:var(--card-bg);border-radius:var(--border-radius);overflow:hidden;box-shadow:var(--shadow-md);cursor:pointer;border:3px solid transparent;transition:all .3s ease;display:flex;flex-direction:column}.quest-card:hover{border-color:#93c5fd}.quest-header-bg{height:140px;display:flex;align-items:center;justify-content:center;position:relative}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-emerald-400{--tw-gradient-from: #34d399;--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(52, 211, 153, 0))}.to-teal-600{--tw-gradient-to: #0d9488}.from-blue-500{--tw-gradient-from: #3b82f6;--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(59, 130, 246, 0))}.to-indigo-700{--tw-gradient-to: #4338ca}.from-cyan-500{--tw-gradient-from: #06b6d4;--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(6, 182, 212, 0))}.to-blue-800{--tw-gradient-to: #1e40af}.quest-emoji{font-size:64px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.15))}.quest-body{padding:20px;text-align:left;display:flex;flex-direction:column;flex:1}.difficulty-tag{background-color:#fef3c7;color:#d97706;font-size:12px;font-weight:700;padding:4px 10px;border-radius:20px;align-self:flex-start;margin-bottom:12px}.quest-body h3{margin:0 0 10px;font-size:18px;color:#1e293b}.quest-body p{margin:0;font-size:14px;color:var(--text-muted);line-height:1.5;flex:1}.quest-footer{margin-top:20px;display:flex;align-items:center;justify-content:space-between;color:var(--primary-color);font-weight:700;font-size:14px}.workspace{display:flex;flex-direction:column;gap:20px}.back-btn{align-self:flex-start;background:none;border:none;color:var(--primary-color);font-weight:700;cursor:pointer;display:flex;align-items:center;gap:5px;font-size:15px}.workspace-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:25px}@media (max-width: 968px){.workspace-grid{grid-template-columns:1fr}}.panel{background-color:var(--card-bg);border-radius:var(--border-radius);padding:25px;box-shadow:var(--shadow-md);border:3px solid #e2e8f0}.panel-header{display:flex;align-items:center;gap:10px;margin-bottom:15px}.panel-badge{background-color:var(--primary-light);color:var(--primary-color);font-size:12px;font-weight:700;padding:4px 10px;border-radius:20px}.panel-header h3{margin:0;font-size:20px;color:#1e293b}.quest-desc{color:var(--text-muted);font-size:14px;line-height:1.6;margin-bottom:20px}.prompt-guide-box{background-color:#fffbeb;border-left:4px solid #f59e0b;padding:12px 15px;border-radius:8px;margin-bottom:20px;font-size:13px}.writing-area{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}.writing-area label{font-size:14px;font-weight:700;color:#475569}.writing-area textarea{width:100%;height:150px;padding:15px;border-radius:12px;border:2px solid #cbd5e1;font-size:15px;line-height:1.6;resize:none;box-sizing:border-box}.writing-area textarea:focus{outline:none;border-color:var(--primary-color)}.word-count{align-self:flex-end;font-size:12px;color:var(--text-muted)}.btn-primary{background-color:var(--primary-color);color:#fff;border:none;padding:14px 24px;border-radius:12px;font-size:16px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:all .2s ease;box-shadow:0 4px 12px #3b82f64d}.btn-primary:hover:not(:disabled){background-color:#2563eb;transform:translateY(-2px)}.btn-primary:disabled{background-color:#94a3b8;cursor:not-allowed;box-shadow:none}.generate-btn{width:100%}.btn-secondary{background-color:#f1f5f9;color:#475569;border:2px solid #e2e8f0;padding:14px 24px;border-radius:12px;font-size:16px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:all .2s ease}.btn-secondary:hover{background-color:#e2e8f0}.empty-result-state{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 20px;color:var(--text-muted)}.empty-icon{font-size:72px;margin-bottom:20px;animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.empty-result-state h4{font-size:18px;color:#475569;margin:0 0 10px}.empty-result-state p{font-size:14px;max-width:300px;line-height:1.6}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-height:350px;text-align:center}.magic-wand{font-size:48px;margin-bottom:20px;animation:pulse 1.5s infinite}@keyframes pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:.7}}.loading-state h4{font-size:18px;color:var(--primary-color);margin:0 0 10px}.loading-tip{font-size:13px;color:var(--text-muted);max-width:320px;margin-bottom:20px}.progress-bar-container{width:200px;height:6px;background-color:#e2e8f0;border-radius:10px;overflow:hidden}.progress-bar-fill{height:100%;background-color:var(--primary-color);width:40%;animation:progress 20s linear infinite}@keyframes progress{0%{width:0%}to{width:100%}}.spinner{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.masterpiece-book{display:flex;flex-direction:column;gap:20px}.book-header{display:flex;justify-content:space-between;align-items:center;border-bottom:2px dashed #e2e8f0;padding-bottom:15px}.badge-gold{background-color:#fef3c7;color:#d97706;font-weight:700;font-size:13px;padding:6px 12px;border-radius:20px;border:1px solid #fcd34d}.book-actions{display:flex;gap:8px}.action-icon-btn{background-color:#f8fafc;border:1px solid #cbd5e1;padding:6px 12px;border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:6px;font-size:13px;color:#475569}.action-icon-btn:hover{background-color:#f1f5f9}.action-icon-btn.playing{background-color:#dbeafe;color:#1d4ed8;border-color:#93c5fd}.book-content-layout{display:flex;flex-direction:column;gap:20px}.book-illustration{width:100%;border-radius:12px;overflow:hidden;border:3px solid #f1f5f9}.book-illustration img{width:100%;height:auto;max-height:250px;object-fit:cover;display:block}.illustration-caption{background-color:#f8fafc;padding:8px;font-size:12px;color:var(--text-muted);text-align:center}.book-text-area h4{font-size:20px;color:#1e3a8a;margin:0 0 12px;text-align:center}.story-paragraph{font-size:16px;line-height:1.8;color:#334155;text-indent:2em;white-space:pre-wrap}.unlocked-vocab-section{background-color:#f0fdf4;border:2px solid #bbf7d0;border-radius:12px;padding:15px}.unlocked-vocab-section h5{margin:0 0 12px;font-size:14px;color:#166534}.vocab-row{display:flex;flex-direction:column;gap:10px}.vocab-mini-card{background-color:#fff;padding:10px 12px;border-radius:8px;border-left:4px solid #22c55e}.vocab-word{font-weight:700;color:#15803d;font-size:14px;margin-bottom:4px}.vocab-meaning{font-size:12px;color:var(--text-muted);margin-bottom:4px}.vocab-sentence{font-size:12px;color:#475569}.result-footer-actions{display:flex;gap:10px;margin-top:15px}.result-footer-actions button{flex:1}.chest-container{display:flex;flex-direction:column;gap:25px}.chest-header{display:flex;justify-content:space-between;align-items:center;background-color:#fff;padding:20px;border-radius:var(--border-radius);box-shadow:var(--shadow-sm)}.chest-title-group{display:flex;align-items:center;gap:15px}.chest-title-group h2{margin:0;font-size:24px;color:#1e3a8a}.chest-title-group p{margin:5px 0 0;color:var(--text-muted);font-size:14px}.chest-stats{font-size:16px}.chest-stats strong{font-size:22px;color:#f59e0b}.empty-chest,.empty-showcase{text-align:center;padding:60px 20px;background-color:#fff;border-radius:var(--border-radius);box-shadow:var(--shadow-sm)}.chest-closed-icon,.showcase-empty-icon{font-size:80px;margin-bottom:20px}.empty-chest h3,.empty-showcase h3{margin:0 0 10px;color:#475569}.empty-chest p,.empty-showcase p{color:var(--text-muted);margin-bottom:25px}.vocab-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}.vocab-card{background-color:#fff;border-radius:16px;padding:20px;box-shadow:var(--shadow-sm);border:2px solid #e2e8f0}.vocab-card-header{display:flex;justify-content:space-between;font-size:11px;margin-bottom:10px}.vocab-tag{background-color:#fef3c7;color:#d97706;font-weight:700;padding:2px 6px;border-radius:4px}.vocab-source{color:var(--text-muted)}.vocab-card h3{margin:0 0 12px;font-size:20px;color:#1e293b}.vocab-divider{height:2px;background-color:#f1f5f9;margin-bottom:12px}.vocab-def{font-size:13px;color:#475569;line-height:1.5;margin:0 0 8px}.vocab-ex{font-size:13px;color:#64748b;line-height:1.5;margin:0}.showcase-container{display:flex;flex-direction:column;gap:25px}.showcase-header h2{margin:0 0 5px;font-size:24px;color:#1e3a8a}.showcase-header p{margin:0;color:var(--text-muted)}.showcase-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:25px}.showcase-card{background-color:#fff;border-radius:var(--border-radius);overflow:hidden;box-shadow:var(--shadow-md);border:2px solid #e2e8f0;display:flex;flex-direction:column}.showcase-image{position:relative;height:180px}.showcase-image img{width:100%;height:100%;object-fit:cover}.showcase-date{position:absolute;bottom:10px;right:10px;background-color:#0009;color:#fff;font-size:11px;padding:4px 8px;border-radius:4px}.showcase-body{padding:20px;display:flex;flex-direction:column;flex:1}.showcase-body h3{margin:0 0 8px;font-size:18px;color:#1e293b}.showcase-prompt{font-size:12px;color:var(--text-muted);background-color:#f8fafc;padding:6px 10px;border-radius:6px;margin-bottom:12px}.showcase-text-preview{font-size:14px;line-height:1.6;color:#475569;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:15px;flex:1}.showcase-footer{border-top:1px solid #f1f5f9;padding-top:12px;display:flex;justify-content:space-between;align-items:center}.showcase-actions{display:flex;gap:8px;width:100%}.action-btn-sm{flex:1;background-color:#f1f5f9;border:none;padding:8px;border-radius:8px;font-size:12px;font-weight:700;color:#475569;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px}.action-btn-sm:hover{background-color:#e2e8f0}.action-btn-sm.playing{background-color:#dbeafe;color:#1d4ed8}