:root{--primary-color: #6366f1;--secondary-color: #a855f7;--bg-dark: #0f172a;--card-bg: #1e293b;--text-light: #f8fafc;--text-muted: #94a3b8;--accent-color: #10b981}body{margin:0;font-family:PingFang SC,Microsoft YaHei,sans-serif;background:radial-gradient(circle at top,#1e1b4b,#0f172a);color:var(--text-light);min-height:100vh}.app-container{max-width:1000px;margin:0 auto;padding:20px}.magic-header{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;background:#1e293bb3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:16px;border:1px solid rgba(255,255,255,.1);margin-bottom:30px}.logo{display:flex;align-items:center;gap:12px;cursor:pointer}.logo-icon{color:var(--secondary-color);width:28px;height:28px;filter:drop-shadow(0 0 8px var(--secondary-color))}.logo h1{font-size:20px;margin:0;font-weight:700;background:linear-gradient(135deg,#fff,#c084fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.subtitle{font-size:12px;font-weight:400;color:var(--text-muted);margin-left:8px}.bookshelf-btn{display:flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--primary-color) 0%,var(--secondary-color) 100%);color:#fff;border:none;padding:8px 16px;border-radius:20px;cursor:pointer;font-weight:600;transition:transform .2s,box-shadow .2s}.bookshelf-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px #a855f766}.bookshelf-btn.active{background:#334155;border:1px solid rgba(255,255,255,.2)}.quiz-card,.loading-card,.result-container,.bookshelf-container{background:#1e293bcc;border-radius:24px;padding:30px;border:1px solid rgba(255,255,255,.08);box-shadow:0 10px 30px #0000004d}.card-fade-in{animation:fadeIn .5s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}.welcome-section{text-align:center;margin-bottom:30px}.welcome-section h2{font-size:26px;margin-bottom:10px;background:linear-gradient(135deg,#fff 30%,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.welcome-section p{color:var(--text-muted);font-size:14px}.quiz-group{margin-bottom:25px}.quiz-group label{display:block;font-size:16px;font-weight:600;margin-bottom:12px;color:#e2e8f0}.flex-label{display:flex;justify-content:space-between;align-items:center}.label-tip{font-size:12px;color:var(--text-muted);font-weight:400}.options-grid{display:flex;flex-wrap:wrap;gap:10px}.grid-3{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}.option-button{background:#0f172a99;border:1px solid rgba(255,255,255,.1);color:var(--text-light);padding:12px 18px;border-radius:12px;cursor:pointer;transition:all .2s;font-size:14px;display:flex;align-items:center;justify-content:center;gap:8px}.option-button:hover{background:#ffffff14;border-color:var(--primary-color);transform:translateY(-1px)}.option-button.selected{background:linear-gradient(135deg,#6366f133,#a855f733);border-color:var(--secondary-color);box-shadow:0 0 12px #a855f74d;font-weight:600}.input-wrapper{position:relative;display:flex;align-items:center}.input-icon{position:absolute;left:15px;color:var(--secondary-color)}.magic-input{width:100%;padding:14px 14px 14px 45px;background:#0f172a99;border:1px solid rgba(255,255,255,.1);border-radius:12px;color:#fff;font-size:14px;outline:none;transition:all .3s}.magic-input:focus{border-color:var(--secondary-color);box-shadow:0 0 10px #a855f733;background:#0f172acc}.emoji{font-size:18px}.generate-button{width:100%;padding:16px;background:linear-gradient(135deg,#6366f1,#a855f7);border:none;border-radius:14px;color:#fff;font-size:18px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;margin-top:35px;transition:all .3s}.generate-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 25px #a855f780}.generate-button:disabled{background:#334155;color:#64748b;cursor:not-allowed}.sparkle-icon{animation:spin 3s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-card{text-align:center;padding:60px 20px}.magic-book-animation{width:80px;height:60px;margin:0 auto 30px;position:relative;perspective:1000px}.book-spine{width:4px;height:100%;background:#475569;position:absolute;left:50%;transform:translate(-50%)}.book-page{width:38px;height:100%;background:#f1f5f9;position:absolute;top:0;border-radius:0 4px 4px 0;transform-origin:left center}.page-1{left:50%;animation:flip-left 1.5s infinite ease-in-out}.page-2{right:50%;border-radius:4px 0 0 4px;transform-origin:right center;animation:flip-right 1.5s infinite ease-in-out}@keyframes flip-left{0%,to{transform:rotateY(0)}50%{transform:rotateY(-180deg)}}@keyframes flip-right{0%,to{transform:rotateY(0)}50%{transform:rotateY(180deg)}}.loading-text{font-size:18px;font-weight:600;color:#e2e8f0;margin-bottom:10px}.loading-sub{color:var(--text-muted);font-size:14px}.result-layout{display:grid;grid-template-columns:300px 1fr;gap:40px}@media (max-width: 768px){.result-layout{grid-template-columns:1fr}}.book-cover-wrapper{position:relative;display:flex;flex-direction:column;align-items:center}.book-cover{width:100%;aspect-ratio:2/3;border-radius:16px;object-fit:cover;box-shadow:0 15px 35px #00000080,0 0 20px #a855f733;border:4px solid rgba(255,255,255,.1)}.book-cover-placeholder{width:100%;aspect-ratio:2/3;background:#334155;border-radius:16px;display:flex;align-items:center;justify-content:center;color:var(--text-muted)}.cover-badge{position:absolute;bottom:15px;background:#0f172acc;padding:6px 12px;border-radius:20px;font-size:11px;border:1px solid rgba(255,255,255,.1);color:#c084fc}.tags{display:flex;gap:10px;margin-bottom:15px;flex-wrap:wrap}.tag{background:#ffffff14;padding:4px 12px;border-radius:20px;font-size:12px;color:#e2e8f0}.magic-tag{background:#a855f733;border:1px solid rgba(168,85,247,.4);color:#d8b4fe}.book-title{font-size:28px;margin:0 0 10px;font-weight:800;color:#fff}.book-author{color:var(--text-muted);font-size:15px;margin-bottom:25px}.match-reason,.book-summary{background:#0f172a66;padding:15px 20px;border-radius:12px;margin-bottom:20px;border-left:4px solid var(--secondary-color)}.match-reason h4,.book-summary h4{margin:0 0 8px;color:#c084fc;font-size:14px}.match-reason p,.book-summary p{margin:0;line-height:1.6;font-size:14px;color:#e2e8f0}.action-buttons{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.action-btn{display:flex;align-items:center;gap:8px;padding:12px 20px;border-radius:10px;font-weight:600;cursor:pointer;border:none;transition:all .2s;font-size:14px}.audio-btn{background:#0284c7;color:#fff}.audio-btn:hover{background:#0369a1}.audio-btn.playing{background:#ef4444;animation:pulse 1.5s infinite}@keyframes pulse{0%{opacity:1}50%{opacity:.7}to{opacity:1}}.save-btn{background:#10b981;color:#fff}.save-btn:hover{background:#059669}.save-btn.saved{background:#334155;border:1px solid rgba(255,255,255,.1)}.retry-btn{background:#ffffff1a;color:#fff}.retry-btn:hover{background:#fff3}.bookshelf-header{text-align:center;margin-bottom:30px}.bookshelf-header h2{font-size:24px;margin:0 0 8px}.bookshelf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:20px}.bookshelf-item{background:#0f172a66;border-radius:12px;overflow:hidden;cursor:pointer;transition:transform .2s,box-shadow .2s;border:1px solid rgba(255,255,255,.05)}.bookshelf-item:hover{transform:translateY(-5px);box-shadow:0 8px 20px #0006}.item-cover-wrapper{position:relative;aspect-ratio:2/3}.item-cover{width:100%;height:100%;object-fit:cover}.delete-btn{position:absolute;top:8px;right:8px;background:#ef4444e6;color:#fff;border:none;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s}.delete-btn:hover{background:#dc2626}.item-info{padding:12px}.item-title{font-size:14px;margin:0 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}.item-author{font-size:12px;color:var(--text-muted);margin:0}.empty-bookshelf{text-align:center;padding:60px 20px;color:var(--text-muted)}.empty-icon{margin-bottom:15px;color:#475569}.back-btn{background:var(--primary-color);color:#fff;border:none;padding:10px 24px;border-radius:20px;margin-top:15px;cursor:pointer;font-weight:600}