body{font-family:Comic Sans MS,cursive,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;color:#333}.app{min-height:100vh;display:flex;flex-direction:column}.app-header{background:linear-gradient(45deg,#ff6b6b,#feca57,#48dbfb,#ff9ff3);background-size:400% 400%;animation:gradientShift 3s ease infinite;text-align:center;padding:2rem;box-shadow:0 4px 20px #0000001a}@keyframes gradientShift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.app-header h1{font-size:3rem;color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.3);margin-bottom:.5rem;animation:bounce 2s infinite}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-10px)}60%{transform:translateY(-5px)}}.app-header p{font-size:1.2rem;color:#fff;text-shadow:1px 1px 2px rgba(0,0,0,.3)}.app-main{flex:1;padding:2rem;display:flex;justify-content:center;align-items:flex-start}.story-input{background:#fff;border-radius:20px;padding:2rem;box-shadow:0 10px 30px #0003;max-width:600px;width:100%;animation:slideIn .5s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.input-section h2{color:#667eea;font-size:2rem;text-align:center;margin-bottom:1.5rem}.story-textarea{width:100%;padding:1rem;border:3px solid #feca57;border-radius:15px;font-family:inherit;font-size:1.1rem;resize:vertical;transition:all .3s ease}.story-textarea:focus{outline:none;border-color:#ff6b6b;box-shadow:0 0 15px #ff6b6b4d;transform:scale(1.02)}.or-divider{text-align:center;margin:2rem 0;position:relative}.or-divider:before{content:"";position:absolute;top:50%;left:0;right:0;height:2px;background:linear-gradient(to right,transparent,#ddd,transparent)}.or-divider span{background:#fff;padding:0 1rem;color:#666;font-weight:700}.image-upload{text-align:center;margin:1.5rem 0}.upload-label{display:inline-block;background:linear-gradient(45deg,#48dbfb,#0abde3);color:#fff;padding:1rem 2rem;border-radius:25px;cursor:pointer;font-size:1.1rem;transition:all .3s ease;box-shadow:0 4px 15px #48dbfb4d}.upload-label:hover{transform:translateY(-2px);box-shadow:0 6px 20px #48dbfb66}.upload-input{display:none}.uploaded-image{margin-top:1rem;text-align:center}.uploaded-image img{max-width:200px;max-height:200px;border-radius:15px;box-shadow:0 4px 15px #0003;animation:fadeIn .5s ease-in}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.generate-button{width:100%;background:linear-gradient(45deg,#ff6b6b,#feca57);color:#fff;border:none;padding:1.2rem 2rem;font-size:1.3rem;font-family:inherit;border-radius:25px;cursor:pointer;transition:all .3s ease;box-shadow:0 6px 20px #ff6b6b4d;margin-top:1.5rem}.generate-button:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 8px 25px #ff6b6b66}.generate-button:disabled{opacity:.7;cursor:not-allowed;animation:pulse 1.5s infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.story-display{background:#fff;border-radius:20px;padding:2rem;box-shadow:0 10px 30px #0003;max-width:800px;width:100%;animation:slideIn .5s ease-out}.story-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;flex-wrap:wrap;gap:1rem}.story-header h2{color:#667eea;font-size:2rem;flex:1}.reset-button{background:linear-gradient(45deg,#ff9ff3,#f368e0);color:#fff;border:none;padding:.8rem 1.5rem;border-radius:20px;cursor:pointer;font-family:inherit;font-size:1rem;transition:all .3s ease;box-shadow:0 4px 15px #ff9ff34d}.reset-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #ff9ff366}.story-image{text-align:center;margin-bottom:2rem}.story-image img{max-width:300px;max-height:300px;border-radius:15px;box-shadow:0 6px 20px #0003}.story-content{background:linear-gradient(135deg,#f8f9ff,#e8f4fd);padding:2rem;border-radius:15px;margin-bottom:2rem;border-left:5px solid #feca57}.story-content p{font-size:1.2rem;line-height:1.6;color:#444}.previous-choice{background:#e8f8f5;padding:.8rem 1.2rem;border-radius:10px;margin-bottom:1.5rem;border-left:4px solid #00d2d3}.previous-choice small{color:#666;font-style:italic}.story-choices h3{color:#667eea;font-size:1.5rem;margin-bottom:1.5rem;text-align:center}.generating{text-align:center;padding:2rem}.generating p{font-size:1.2rem;color:#667eea;animation:pulse 1.5s infinite}.choices-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.choice-button{background:linear-gradient(45deg,#48dbfb,#0abde3);color:#fff;border:none;padding:1.2rem 1.5rem;border-radius:15px;cursor:pointer;font-family:inherit;font-size:1.1rem;transition:all .3s ease;box-shadow:0 4px 15px #48dbfb4d;text-align:left}.choice-button:hover{transform:translateY(-3px);box-shadow:0 6px 20px #48dbfb66;background:linear-gradient(45deg,#0abde3,#006ba6)}@media (max-width: 768px){.app-header h1{font-size:2rem}.app-main{padding:1rem}.story-input,.story-display{padding:1.5rem}.story-header{flex-direction:column;text-align:center}.choices-grid{grid-template-columns:1fr}}.loading-spinner{display:inline-block;width:20px;height:20px;border:3px solid #f3f3f3;border-top:3px solid #667eea;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.header-content{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:1200px;margin:0 auto}.header-left{flex:1}.header-right{display:flex;gap:1rem}.nav-button{background:#fff3;color:#fff;border:2px solid rgba(255,255,255,.3);padding:.8rem 1.5rem;border-radius:20px;cursor:pointer;font-family:inherit;font-size:1rem;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.nav-button:hover{background:#ffffff4d;border-color:#ffffff80;transform:translateY(-2px)}.header-buttons{display:flex;gap:1rem;flex-wrap:wrap}.save-button{background:linear-gradient(45deg,#00d2d3,#0abde3);color:#fff;border:none;padding:.8rem 1.5rem;border-radius:20px;cursor:pointer;font-family:inherit;font-size:1rem;transition:all .3s ease;box-shadow:0 4px 15px #00d2d34d}.save-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #00d2d366}.story-library{background:#fff;border-radius:20px;padding:2rem;box-shadow:0 10px 30px #0003;max-width:1000px;width:100%;animation:slideIn .5s ease-out;max-height:80vh;overflow-y:auto}.library-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;flex-wrap:wrap;gap:1rem}.library-header h2{color:#667eea;font-size:2rem}.library-actions{display:flex;gap:1rem;flex-wrap:wrap}.export-btn,.import-btn{background:linear-gradient(45deg,#48dbfb,#0abde3);color:#fff;border:none;padding:.8rem 1.2rem;border-radius:15px;cursor:pointer;font-family:inherit;font-size:.9rem;transition:all .3s ease;text-decoration:none;display:inline-block}.export-btn:hover,.import-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px #48dbfb4d}.close-btn{background:linear-gradient(45deg,#ff6b6b,#feca57);color:#fff;border:none;padding:.8rem 1.2rem;border-radius:15px;cursor:pointer;font-family:inherit;font-size:.9rem;transition:all .3s ease}.close-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px #ff6b6b4d}.empty-library{text-align:center;padding:4rem 2rem;color:#666}.empty-icon{font-size:4rem;margin-bottom:1rem}.empty-library h3{font-size:1.5rem;margin-bottom:1rem;color:#667eea}.stories-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}.story-card{background:linear-gradient(135deg,#f8f9ff,#e8f4fd);border-radius:15px;padding:1.5rem;cursor:pointer;transition:all .3s ease;border:2px solid transparent}.story-card:hover{transform:translateY(-5px);box-shadow:0 8px 25px #00000026;border-color:#667eea}.story-card-header{display:flex;gap:1rem;align-items:flex-start}.story-thumbnail{width:60px;height:60px;border-radius:10px;object-fit:cover;flex-shrink:0}.story-info{flex:1}.story-info h3{color:#667eea;font-size:1.2rem;margin-bottom:.5rem}.story-date,.story-progress{font-size:.9rem;color:#666;margin-bottom:.25rem}.story-card-expanded{margin-top:1rem;padding-top:1rem;border-top:2px solid #e0e6ed}.story-preview{background:#fff;padding:1rem;border-radius:10px;margin-bottom:1rem;font-style:italic;color:#555}.story-actions{display:flex;gap:1rem;justify-content:flex-end}.load-story-btn{background:linear-gradient(45deg,#00d2d3,#0abde3);color:#fff;border:none;padding:.8rem 1.2rem;border-radius:10px;cursor:pointer;font-family:inherit;transition:all .3s ease}.load-story-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px #00d2d34d}.delete-story-btn{background:linear-gradient(45deg,#ff6b6b,#ff5252);color:#fff;border:none;padding:.8rem 1.2rem;border-radius:10px;cursor:pointer;font-family:inherit;transition:all .3s ease}.delete-story-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px #ff6b6b4d}.settings-panel{background:#fff;border-radius:20px;padding:2rem;box-shadow:0 10px 30px #0003;max-width:600px;width:100%;animation:slideIn .5s ease-out;max-height:80vh;overflow-y:auto}.settings-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.settings-header h2{color:#667eea;font-size:2rem}.settings-content{display:flex;flex-direction:column;gap:2rem}.setting-group{background:linear-gradient(135deg,#f8f9ff,#e8f4fd);padding:1.5rem;border-radius:15px;border-left:4px solid #667eea}.setting-group h3{color:#667eea;font-size:1.3rem;margin-bottom:1rem}.setting-item{margin-bottom:1rem;display:flex;align-items:center;gap:1rem}.setting-item label{font-weight:500;color:#444;display:flex;align-items:center;gap:.5rem}.setting-item select{padding:.5rem;border:2px solid #ddd;border-radius:8px;font-family:inherit;background:#fff;min-width:150px}.setting-item select:focus{outline:none;border-color:#667eea}.setting-item input[type=checkbox]{width:18px;height:18px;accent-color:#667eea}.danger-zone{border-left-color:#ff6b6b!important;background:linear-gradient(135deg,#fff5f5,#ffe8e8)!important}.danger-zone h3{color:#ff6b6b!important}.danger-btn{background:linear-gradient(45deg,#ff6b6b,#ff5252);color:#fff;border:none;padding:1rem 2rem;border-radius:10px;cursor:pointer;font-family:inherit;font-size:1rem;transition:all .3s ease;margin-bottom:1rem}.danger-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px #ff6b6b4d}.danger-text{color:#666;font-size:.9rem;font-style:italic}.theme-dark{background:linear-gradient(135deg,#2c3e50,#34495e)}.theme-dark .story-input,.theme-dark .story-display,.theme-dark .story-library,.theme-dark .settings-panel{background:#34495e;color:#ecf0f1}.theme-dark .story-content{background:linear-gradient(135deg,#2c3e50,#34495e);color:#ecf0f1}.theme-colorful{background:linear-gradient(45deg,#ff9a9e,#fecfef 25%,#fecfef 75%,#ffecd2)}.theme-colorful .app-header{background:linear-gradient(45deg,#ff6b6b,#feca57,#48dbfb,#ff9ff3,#a8e6cf);background-size:500% 500%;animation:gradientShift 4s ease infinite}@media (max-width: 768px){.header-content{flex-direction:column;gap:1rem;text-align:center}.header-right{justify-content:center}.library-header{flex-direction:column;text-align:center}.stories-grid{grid-template-columns:1fr}.story-card-header{flex-direction:column;text-align:center}.story-actions,.header-buttons{justify-content:center}}:root{--primary-color: #667eea;--secondary-color: #764ba2;--accent-color: #feca57;--success-color: #00d2d3;--warning-color: #ff6b6b;--text-color: #333;--light-bg: #f8f9ff}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:Comic Sans MS,cursive,sans-serif;line-height:1.6;color:var(--text-color);background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh}#root{min-height:100vh}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}.p-1{padding:.5rem}.p-2{padding:1rem}.p-3{padding:1.5rem}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}::-webkit-scrollbar-thumb{background:linear-gradient(45deg,var(--primary-color),var(--secondary-color));border-radius:10px}::-webkit-scrollbar-thumb:hover{background:linear-gradient(45deg,var(--secondary-color),var(--primary-color))}