#start-container{padding:35px;border:1px solid rgba(245,158,11,.1);background:linear-gradient(135deg,#ffffffe6,#f8fafce6);border-radius:24px;box-shadow:0 4px 15px #0000000d;position:relative;z-index:1;animation:fadeInUp .8s ease-out}#start-container h2{margin-bottom:40px;color:#f59e0b;font-size:var(--header-size-desktop);font-weight:800;font-family:Inter,Bubblegum Sans,sans-serif;letter-spacing:-.5px;background:linear-gradient(135deg,#f59e0b,#fbbf24);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:none;animation:slideInDown .8s ease-out;text-align:center}#start-container p{margin-bottom:20px;color:#6b7280;font-size:1.35em;font-weight:500}@media print{#create-container{box-shadow:none;border:1px solid #ccc}}.no-landing-bg #create-container{max-width:1100px!important;width:95%!important;margin:72px auto 0!important}#end-create-container{display:flex;justify-content:center;gap:20px;margin-top:30px;flex-wrap:wrap}#export-story-button,#return-home-button{padding:15px 25px;font-size:1.2em;font-weight:600;border:none;border-radius:25px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #0000001a;text-decoration:none;display:inline-block;text-align:center}#export-story-button{background:linear-gradient(135deg,#10b981,#059669);color:#fff}#export-story-button:hover{background:linear-gradient(135deg,#059669,#047857);transform:translateY(-3px);box-shadow:0 8px 25px #10b9814d}#return-home-button{background:#f59e0b!important;color:#fff!important}#return-home-button:hover{background:#d97706!important;transform:translateY(-3px);box-shadow:0 8px 25px #f59e0b4d}@media (max-width: 768px){#create-container{background:none!important;border-radius:0!important;padding:20px!important;box-shadow:none!important;border:none!important;margin:60px auto 0!important;width:100%!important;max-width:100%!important}#create-container:before,#create-container:after{display:none!important}#start-container{background:none!important;border-radius:0!important;padding:20px 0!important;box-shadow:none!important;border:none!important}#end-create-container{flex-direction:column;align-items:center}#image-container{background:none!important;border-radius:0!important;box-shadow:none!important;border:none!important;padding:0!important;margin-bottom:20px!important;width:100%!important;max-width:100%!important}#story-image{width:100%!important;max-width:100%!important;height:auto!important}#story-text{width:100%!important;max-width:100%!important;padding:20px 15px!important;font-size:1.1em;margin-bottom:20px!important}#choices-container{background:none!important;border-radius:0!important;box-shadow:none!important;border:none!important;padding:15px!important;margin-bottom:20px!important}#story-text.age-font-large{font-size:1.4em}.choice-button{padding:15px 20px;font-size:1em}.story-navigation{flex-direction:column;align-items:stretch}.nav-buttons,.action-buttons{justify-content:center;width:100%}}@media (max-width: 480px){#image-container{padding:15px;border-radius:12px}#story-text{padding:15px;border-radius:16px}#choices-container{padding:15px;border-radius:12px}.choice-button{padding:12px 15px;font-size:.95em;border-radius:15px}#free-text-input{padding:12px 16px;font-size:1em;border-radius:20px}#submit-input-button,#back-button{padding:10px 20px;font-size:1em;min-width:100px}}#create-container{background:linear-gradient(135deg,#ffffffe6,#f8fafce6);border-radius:24px;padding:35px;box-shadow:0 4px 15px #00000014;border:1px solid rgba(245,158,11,.1);max-width:1100px;width:95%;margin:72px auto 0;position:relative;display:flex;flex-direction:column;z-index:1;animation:fadeInUp .6s ease-out}#create-container:before{content:"";position:absolute;top:-20px;right:-20px;width:80px;height:80px;background:linear-gradient(45deg,#f59e0b,#fbbf24);border-radius:50%;opacity:.8;z-index:-1;animation:gentleFloat 4s ease-in-out infinite}#create-container:after{content:"";position:absolute;bottom:-20px;left:-20px;width:80px;height:80px;background:linear-gradient(45deg,#10b981,#34d399);border-radius:50%;opacity:.8;z-index:-1;animation:gentleFloat 4s ease-in-out infinite reverse}#image-container{position:relative;margin:0 auto 25px;width:100%;max-width:1100px;border-radius:18px;overflow:hidden;display:none;justify-content:center;align-items:center;background:linear-gradient(135deg,#ffffffe6,#f8fafce6);padding:20px;box-shadow:0 4px 15px #00000014;transition:all .3s ease}.story-active #image-container{display:flex}#image-container:hover{transform:translateY(-3px);box-shadow:0 12px 35px #0000001f}#story-image{width:100%;max-width:100%;height:auto;max-height:none;border-radius:15px;display:block;transition:all .3s ease}#loading-text{font-size:1.1em;color:#6b7280;font-weight:500;text-align:center;padding:20px}#story-text{font-family:Andika,Georgia,serif;margin-bottom:30px;line-height:1.7;color:#374151;min-height:100px;height:auto;max-height:none;display:none;justify-content:center;align-items:center;background:linear-gradient(135deg,#ffffffe6,#f8fafce6);border-radius:24px;padding:35px;box-shadow:0 4px 15px #00000014;transition:all .3s ease;border:1px solid rgba(245,158,11,.1);position:relative;z-index:1}.story-active #story-text{display:flex}#story-text:hover{transform:translateY(-2px);box-shadow:0 6px 20px #00000014}#choices-container{margin-bottom:25px;display:none;flex-direction:column;gap:15px;position:relative;z-index:1;min-height:50px;height:auto;max-height:none;overflow-y:visible;background:linear-gradient(135deg,#fffc,#f8fafccc);border-radius:20px;padding:25px;border:1px solid rgba(245,158,11,.1);box-shadow:0 2px 10px #0000000d}.story-active #choices-container{display:flex}.choice-button{padding:18px 25px;font-size:1.1em;font-weight:600;cursor:pointer;background:linear-gradient(135deg,#f59e0b,#fbbf24);color:#fff;border:none;border-radius:20px;transition:all .3s ease;box-shadow:0 4px 15px #f59e0b4d;position:relative;overflow:hidden;text-align:center;display:block;width:100%}.choice-button:hover{background:linear-gradient(135deg,#d97706,#f59e0b);transform:translateY(-3px);box-shadow:0 8px 25px #f59e0b66}.choice-button:active{transform:translateY(-1px);box-shadow:0 4px 15px #f59e0b4d}#input-container{margin-bottom:25px;display:none;flex-direction:column;gap:15px;position:relative;z-index:1}.story-active #input-container{display:flex}#free-text-input{width:100%;padding:15px 20px;font-size:1.1em;border:1px solid rgba(245,158,11,.2);border-radius:25px;background:#fff;color:#374151;transition:all .3s ease;box-shadow:0 2px 8px #0000000d;outline:none;font-family:inherit;box-sizing:border-box}#free-text-input:focus{border-color:#f59e0b;box-shadow:0 0 0 3px #f59e0b1a,0 4px 15px #0000001a}#free-text-input::placeholder{color:#9ca3af;font-style:italic}#input-buttons-container{display:flex;gap:15px;justify-content:center;flex-wrap:wrap}#submit-input-button,#back-button{padding:12px 25px;font-size:1.1em;font-weight:600;border:none;border-radius:20px;cursor:pointer;transition:all .3s ease;min-width:120px}#submit-input-button{background:linear-gradient(135deg,#10b981,#059669);color:#fff;box-shadow:0 4px 15px #10b9814d;width:100%}#submit-input-button:hover{background:linear-gradient(135deg,#059669,#047857);transform:translateY(-2px);box-shadow:0 6px 20px #10b98166}#submit-input-button:not(.highlight):hover{background:linear-gradient(135deg,#d1d5db,#9ca3af);color:#6b7280;box-shadow:0 2px 8px #9ca3af33;transform:none;cursor:default}#submit-input-button.highlight{animation:gentleGlow 1.5s ease-in-out infinite}#submit-input-button:not(.highlight):not(:hover){background:linear-gradient(135deg,#d1d5db,#9ca3af);color:#6b7280;box-shadow:0 2px 8px #9ca3af33;cursor:default;opacity:.6}#back-button{background:linear-gradient(135deg,#6b7280,#4b5563);color:#fff;box-shadow:0 4px 15px #6b72804d}#back-button:hover{background:linear-gradient(135deg,#4b5563,#374151);transform:translateY(-2px);box-shadow:0 6px 20px #6b728066}.story-navigation{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;padding-top:25px;border-top:1px solid rgba(245,158,11,.2);margin-top:20px}.nav-btn{background:linear-gradient(135deg,#6b7280,#4b5563);color:#fff;border:none;padding:12px 20px;border-radius:8px;cursor:pointer;font-weight:600;transition:all .2s ease;min-width:100px}#custom-start-input{flex:1;padding:15px 20px;border:1px solid rgba(245,158,11,.2);border-radius:25px;font-size:1.6em;font-weight:700;background:#fff;transition:all .3s ease;box-shadow:0 2px 10px #0000000d;height:68px!important;min-height:68px!important;max-height:none;box-sizing:border-box;line-height:1.4;color:#374151;outline:none;font-family:inherit}#custom-start-input:focus{border-color:#f59e0b;box-shadow:0 0 0 4px #f59e0b1a;transform:translateY(-2px)}#custom-start-input::placeholder{color:#9ca3af;font-style:italic;font-weight:500}#custom-start-button{padding:15px 30px;font-size:1.1em;font-weight:600;border:none;border-radius:25px;cursor:pointer;transition:all .3s ease;background:linear-gradient(135deg,#10b981,#059669);color:#fff;box-shadow:0 4px 15px #10b9814d;white-space:nowrap}#age-selector-container{margin-bottom:30px;padding:25px;background:linear-gradient(135deg,#fffc,#f8fafccc);border-radius:20px;border:1px solid rgba(245,158,11,.1);box-shadow:0 2px 10px #0000000d}#age-slider-container{margin-bottom:45px;transition:opacity .3s ease,visibility .3s ease}#age-slider-container label{display:block;margin-top:25px;margin-bottom:40px;font-weight:800;color:#f59e0b;font-size:2.5em;text-align:center}#age-text{transition:color .3s ease}@media (max-width: 768px){#age-slider-container label .years-old-text{display:none}}#age-slider{width:80%;cursor:pointer;margin:0 auto;display:block;-webkit-appearance:none;height:8px;background:linear-gradient(to right,#e5e7eb,#f59e0b);border-radius:10px;outline:none}#age-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#f59e0b,#fbbf24);cursor:pointer;box-shadow:0 4px 12px #f59e0b66;transition:all .3s ease}#age-slider::-webkit-slider-thumb:hover{transform:scale(1.1);box-shadow:0 6px 15px #f59e0b80}#age-slider::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#f59e0b,#fbbf24);cursor:pointer;box-shadow:0 4px 12px #f59e0b66;transition:all .3s ease;border:none}#age-display{display:none}.switch{position:relative;display:inline-block;width:60px;height:34px;margin:0}@keyframes gentleBounce{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.toggle-container{display:flex;flex-direction:row;align-items:center;margin-top:40px;justify-content:center;gap:15px;min-height:34px;width:100%;position:relative;box-sizing:border-box}.toggle-label{font-size:1.3em;color:#f59e0b;font-weight:700;margin-right:10px;white-space:nowrap;flex-shrink:0}.switch{position:relative;display:inline-block;width:60px;height:34px;flex-shrink:0;margin:0}.switch input{opacity:0;width:0;height:0;position:absolute;top:0;left:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#e5e7eb;transition:.4s;border-radius:34px;box-shadow:0 2px 8px #0000001a;transform:translateZ(0);will-change:background-color}.slider:before{position:absolute;content:"";height:26px;width:26px;left:4px;bottom:4px;background-color:#fff;transition:.4s;border-radius:50%;box-shadow:0 2px 8px #0003;will-change:transform}input:checked+.slider{background:linear-gradient(135deg,#f59e0b,#fbbf24)}input:checked+.slider:before{transform:translate(26px)}.help-button{display:inline-flex;justify-content:center;align-items:center;width:32px;height:32px;background:linear-gradient(135deg,#f59e0b,#d97706);border-radius:50%;font-size:16px;color:#fff;border:none;cursor:pointer;transition:all .3s ease;font-weight:700;box-shadow:0 2px 8px #f59e0b4d;flex-shrink:0;margin:0;transform-origin:center}.help-button:hover{background:linear-gradient(135deg,#d97706,#b45309);transform:scale(1.1);box-shadow:0 4px 12px #f59e0b66}.info-panel{display:none;width:92%;max-width:450px;margin:15px auto;padding:20px;background:linear-gradient(135deg,#fffffff2,#f8fafcf2);border:1px solid rgba(99,102,241,.15);border-radius:16px;box-shadow:0 4px 15px #0000001a;font-size:1em;text-align:left;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.info-panel.active{display:block;animation:fadeInScale .4s ease-out}@keyframes fadeInScale{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.info-panel p{margin:12px 0;color:#374151;line-height:1.6}.info-panel ul{margin:12px 0;padding-left:25px}.info-panel li{margin-bottom:8px;color:#4b5563;line-height:1.5}#custom-start-container{margin-bottom:25px;display:flex;gap:15px;align-items:center}#custom-start-input{flex:1;padding:15px 20px;border:1px solid rgba(245,158,11,.2);border-radius:25px;font-size:1.6em;font-weight:700;background:#fff;transition:all .3s ease;box-shadow:0 2px 10px #0000000d;height:68px!important;min-height:68px!important;max-height:none;box-sizing:border-box;line-height:1.4;resize:none;overflow-y:hidden;vertical-align:top;font-family:inherit}#custom-start-input::placeholder{color:#9ca3af;opacity:1;font-weight:400}#custom-start-input:focus{outline:none;border-color:#f59e0b;box-shadow:0 0 0 4px #f59e0b1a;transform:translateY(-2px)}#custom-start-button{padding:0 25px;font-size:1.1em;font-weight:600;background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;border-radius:25px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #10b9814d;white-space:nowrap;height:68px;box-sizing:border-box;display:flex;align-items:center;justify-content:center}#custom-start-button:hover{transform:translateY(-3px);box-shadow:0 8px 25px #10b98166}#custom-start-button.highlight{animation:gentleGlow 1.5s ease-in-out infinite}@keyframes gentleGlow{0%,to{box-shadow:0 4px 15px #10b9814d}50%{box-shadow:0 4px 20px #10b98180}}.accordion-content{max-height:0;overflow:hidden;transition:max-height .4s ease}.accordion-container.active .accordion-content{max-height:none;padding:25px;overflow-y:auto;max-height:80vh}.nested-accordion-button{width:100%;padding:15px 20px;border:none;background-color:#f9fafb;text-align:left;cursor:pointer;transition:all .3s ease;display:flex;justify-content:space-between;align-items:center;font-size:1em;font-weight:500}.nested-accordion-button.active{background-color:#e5e7eb}.nested-accordion-button.active h4{color:#1f2937}.nested-accordion-button.active .nested-accordion-icon{transform:rotate(45deg)}#phonics-rule-container{margin-top:10px;padding:10px;background-color:#ffffffb3;border-radius:8px;opacity:0;visibility:hidden;min-height:50px;transition:opacity .3s ease,visibility .3s ease;box-sizing:border-box;width:100%;position:relative}.loading-state{position:relative;pointer-events:none;opacity:.7}.loading-state:after{content:"";position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border:2px solid #f59e0b;border-top-color:transparent;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width: 768px){#custom-start-container{flex-direction:column;gap:30px}#custom-start-input{margin-bottom:0}#start-options{grid-template-columns:1fr}}@media (max-width: 480px){#start-container h2{font-size:var(--header-size-mobile);margin-bottom:10px}#age-selector-container{background:none!important;border:none!important;box-shadow:none!important;border-radius:0!important;padding:0!important;margin-top:50px!important;margin-bottom:20px!important}.toggle-container{margin-top:50px!important}#start-options{display:none!important}#custom-start-button{width:calc(100% + 50px)!important;margin:30px -25px 0!important;box-sizing:border-box!important}#mobile-dotted-line,#desktop-dotted-line{display:none!important}#custom-start-input{height:120px!important;width:calc(100% + 50px)!important;margin:0 -25px!important;box-sizing:border-box!important;resize:none!important;white-space:normal!important;word-wrap:break-word!important;overflow-wrap:break-word!important;font-size:1.2em!important;line-height:1.4!important;padding:15px!important}#custom-start-input::placeholder{content:"Describe your adventure"!important}#age-selector-container .toggle-container:after{content:"";display:block;border-top:2px dotted #f59e0b;margin:20px 0}#start-container>div[style*=border-bottom]{display:none!important}#start-container h2{font-size:var(--header-size-tablet);margin-bottom:12px}}@media (max-width: 768px){.phonics-selector select,.phase-selector-dropdown,.pattern-selector-dropdown{max-width:100%;font-size:14px}.pattern-selector-wrapper,.phase-selector-wrapper{width:100%!important;max-width:550px!important;margin:0 auto!important}.pattern-selector-dropdown,.phase-selector-dropdown{width:100%!important;max-width:none!important;margin-left:0!important;margin-right:0!important;box-sizing:border-box!important}#pattern-selector-container{width:100%!important;max-width:550px!important;margin:15px auto 0!important;box-sizing:border-box!important;padding:0!important}.toggle-container{position:relative!important;margin:20px 0!important}#age-slider-container{min-height:80px!important;box-sizing:border-box!important}}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background:#fff;border-radius:20px;padding:40px;max-width:380px;width:90%;max-height:90vh;overflow-y:auto;position:relative;animation:modalSlideIn .3s ease}.modal-close{position:absolute;top:15px;right:15px;background:none;border:none;font-size:24px;cursor:pointer;color:#999;padding:0}.modal-close:hover{color:#333}.modal-body{max-width:328px;margin:0 auto}.modal-body p{font-size:1.1rem;font-weight:400;line-height:1.6;color:#4b5563;margin-bottom:12px}.modal-body .highlight{color:#f59e0b;font-weight:700;animation:none!important;transition:none!important}#phonics-rule-container{opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;width:100%;position:relative}#phonics-rule-container.show,#phonics-rule-container[style*="display: block"]{opacity:1;visibility:visible}#phonics-rule-container.fade-out{opacity:0;visibility:hidden}#phonics-rule-container.fade-in{opacity:1;visibility:visible}.phase-selector-dropdown:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.phase-selector-dropdown.has-selection,.pattern-selector-dropdown.has-selection{color:#f59e0b!important}.highlight-error{border-color:#ef4444!important;box-shadow:0 0 0 3px #ef44441a!important;animation:shake .5s ease-in-out}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.phonics-highlight{transition:all .2s ease;border-radius:4px;padding:1px 3px;position:relative}.phonics-highlight:hover{transform:translateY(-1px);box-shadow:0 2px 8px #00000026}.accordion-container{margin-top:30px;border-radius:16px;background:linear-gradient(135deg,#fffffff2,#f8fafcf2);overflow:hidden;box-shadow:0 4px 15px #00000014;border:1px solid rgba(99,102,241,.1)}.accordion-button{width:100%;padding:25px;background:none;border:none;text-align:left;cursor:pointer;transition:all .3s ease;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(99,102,241,.1)}.accordion-button.active .accordion-icon{transform:rotate(180deg)}.accordion-content{max-height:0;overflow:hidden;transition:max-height .3s ease;background:#ffffff80}.accordion-container.active .accordion-content{max-height:1000px;padding:25px}.nested-accordion{margin:10px 0;border:1px solid rgba(99,102,241,.1);border-radius:8px;overflow:hidden}.nested-accordion-button{width:100%;padding:15px 20px;background:#ffffffb3;border:none;text-align:left;cursor:pointer;transition:all .3s ease;display:flex;justify-content:space-between;align-items:center;font-size:1rem;font-weight:600;color:#374151}.nested-accordion-button:hover{background:#f59e0b1a}.nested-accordion-icon{font-size:1.2rem;color:#f59e0b;transition:transform .3s ease}.nested-accordion.active .nested-accordion-icon{transform:rotate(180deg)}.nested-accordion-content{max-height:0;overflow:hidden;transition:max-height .3s ease;background:#ffffffe6;padding:0 20px}.nested-accordion.active .nested-accordion-content{max-height:500px;padding:15px 20px}.cover-generating-overlay{position:absolute;inset:0;background:#000000b3;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:15px;color:#fff;font-size:12px;gap:8px;z-index:10}.generating-spinner{width:24px;height:24px;border:2px solid rgba(255,255,255,.3);border-top:2px solid white;border-radius:50%;animation:spin 1s linear infinite}#stories-container-main{background:linear-gradient(135deg,#fff,#f8fafc);padding:35px;border-radius:24px;box-shadow:0 10px 30px #0000001a,0 1px 8px #0000000d;max-width:1100px;width:95%;margin:72px auto 0;text-align:center;border:1px solid rgba(99,102,241,.15);position:relative;overflow:visible;min-height:600px;height:auto;max-height:none;display:flex;flex-direction:column;z-index:1;animation:slideUpFade .6s ease-out}#stories-container-main:before{content:"";position:absolute;top:-20px;right:-20px;width:80px;height:80px;background:linear-gradient(45deg,#8b5cf6,#a855f7);border-radius:50%;opacity:.8;z-index:-1;animation:gentleFloat 4s ease-in-out infinite}#stories-container-main:after{content:"";position:absolute;bottom:-25px;left:-25px;width:100px;height:100px;background:linear-gradient(45deg,#8b5cf6,#a78bfa);border-radius:50%;opacity:.8;z-index:-1;animation:gentleFloat 4s ease-in-out infinite reverse}.stories-hero{text-align:center;margin-bottom:40px;animation:fadeInUp .7s ease-out;animation-delay:.2s;opacity:0;animation-fill-mode:forwards}.stories-hero h1{font-size:var(--header-size-desktop);font-weight:800;color:#667eea;margin-bottom:15px;font-family:Inter,sans-serif;text-shadow:0 0 8px rgba(255,255,255,1),0 0 16px rgba(255,255,255,.9),0 0 24px rgba(255,255,255,.8),0 0 32px rgba(255,255,255,.7),0 0 48px rgba(255,255,255,.6),0 0 64px rgba(255,255,255,.5),0 0 80px rgba(255,255,255,.3);letter-spacing:-.5px}.stories-hero .hero-subtitle{font-size:1.2rem;font-weight:500;color:#fff;opacity:.9;text-shadow:0 0 8px rgba(0,0,0,.8),0 0 16px rgba(0,0,0,.6),0 0 24px rgba(0,0,0,.4);max-width:600px;margin:20px auto 0;line-height:1.6}.stories-hero .signup-link{color:#f59e0b!important;text-decoration:underline!important;font-weight:600!important;transition:all .3s ease}.stories-hero .signup-link:hover{color:#fbbf24;text-shadow:0 0 5px rgba(255,255,255,.5)}.story-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:25px;width:100%;animation:fadeInUp .6s ease-out;animation-delay:.4s;opacity:0;animation-fill-mode:forwards}#stories-container-main.stories-loading .story-stats{animation:none;opacity:0}#stories-container-main.stories-loading .stat-card{animation:none;opacity:0}.stat-card .stat-value{font-size:3rem;font-weight:800;color:#8b5cf6;font-family:Inter,sans-serif;line-height:1}#stories-container-main.stories-loading .story-controls{animation:none;opacity:0}.search-container{margin-bottom:16px;width:100%}.search-input{width:100%;padding:12px 16px;border:1px solid var(--gray-300);border-radius:var(--radius-lg);font-size:1rem;transition:all var(--transition-fast);background:linear-gradient(135deg,#fff,#f8fafc)}.search-input:focus{outline:none;border-color:#8b5cf6;box-shadow:0 0 0 3px #4b3d9026}.filter-controls{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px}.right-controls{display:flex;align-items:center;gap:16px}.story-filters{display:flex;gap:8px;flex-wrap:wrap}.filter-btn{padding:8px 16px;background:var(--gray-100);border:1px solid var(--gray-300);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);font-size:.9rem;color:var(--gray-700);font-weight:500}.filter-btn:hover{background:var(--gray-200);border-color:var(--gray-400)}.filter-btn.active{background:#8b5cf6!important;color:#fff!important;border-color:#8b5cf6!important}.toggle-slider:before{content:"";position:absolute;height:30px;width:42px;left:2px;top:2px;background:#8b5cf6;border-radius:6px;transition:.3s ease;z-index:1}.sort-controls{display:flex;align-items:center;gap:8px}.sort-select{padding:8px 32px 8px 12px;border:1px solid var(--gray-300);border-radius:var(--radius-md);background:#fff;cursor:pointer;font-size:.9rem;appearance:none;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");background-position:right 12px center;background-repeat:no-repeat;background-size:16px}#stories-container-main.stories-loading .stories-main{animation:none;opacity:0}.story-card{background:#fff;border-radius:14px;box-shadow:var(--shadow-md);border:1px solid var(--gray-200);transition:all var(--transition-normal);position:relative;min-height:480px;height:auto;display:flex;flex-direction:column;overflow:hidden}.no-image{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#f3f4f6;color:#6b7280;font-weight:600;border-radius:0}.story-card-image .regenerate-cover-btn{position:absolute;bottom:8px;left:8px;background:#f59e0be6;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:none;padding:6px 8px;cursor:pointer;font-size:1.1rem;z-index:2;border-radius:6px;transition:all var(--transition-fast);box-shadow:0 2px 8px #0003}.story-card-image .regenerate-cover-btn:hover{background:#f59e0b;transform:scale(1.05);box-shadow:0 4px 12px #f59e0b66}.regenerate-cover-modal{max-width:500px;width:90%}.regenerate-cover-modal h3{color:#f59e0b;margin-bottom:16px;font-size:1.5rem}.regenerate-cover-modal .modal-action-btn{padding:12px 24px;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .2s ease;font-size:1rem}.regenerate-cover-modal .cancel-btn:hover{background:#e5e7eb}.regenerate-cover-modal .regenerate-btn:hover{background:linear-gradient(135deg,#d97706,#f59e0b);transform:translateY(-1px);box-shadow:0 4px 12px #f59e0b4d}.story-card-title{display:flex;justify-content:space-between;align-items:center;padding:16px;gap:12px}.story-card-title .story-title{font-size:1.1rem;font-weight:700;color:var(--gray-800);margin:0;line-height:1.3;text-align:left;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.story-card-title .info-toggle{background:transparent;border:2px solid #374151;border-radius:50%;cursor:pointer;transition:all var(--transition-fast);width:20px;height:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#374151;font-size:14px;font-weight:900;font-style:normal}.story-card-title .info-toggle:hover{border-color:#111827;transform:scale(1.1);color:#111827}.story-icons-row{display:flex;justify-content:center;align-items:center;gap:32px;padding:4px 16px 20px;width:100%}.story-content-front{opacity:1;padding:12px 16px 0;text-align:left}.story-title{font-size:1.1rem;font-weight:700;color:var(--gray-800);margin:0;line-height:1.3;text-align:left;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.story-icon{font-size:2rem;padding:6px;border-radius:50%;transition:all .2s ease;border:none;background:#0000000d;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:60px;height:60px;position:relative}.story-icon img{width:48px;height:48px;transition:all .2s ease}.story-icon:hover{background:#0000001a;transform:scale(1.1);box-shadow:0 2px 8px #00000026}.story-icon:hover img{transform:scale(.91)}.story-icon.phonics-icon.active,.story-icon.phonics-icon.inactive,.story-icon.publish-icon.published,.story-icon.publish-icon.unpublished,.story-icon.status-icon.finished,.story-icon.status-icon.unfinished{background:#0000000d}.info-detail{background:#8b5cf60d;border:1px solid rgba(139,92,246,.15);border-radius:12px;padding:12px 16px;font-size:1rem;color:#8b5cf6;font-weight:600;text-align:center}.info-detail.published{background:#22c55e0d;border:1px solid rgba(34,197,94,.15);color:#22c55e}.info-detail.unpublished{background:#ef44440d;border:1px solid rgba(239,68,68,.15);color:#ef4444}.info-item{display:flex;flex-direction:column;gap:4px;padding:12px 16px;background:#8b5cf60d;border-radius:12px;border:1px solid rgba(139,92,246,.15)}.info-item.published{background:#22c55e0d;border:1px solid rgba(34,197,94,.15)}.info-item.unpublished{background:#ef44440d;border:1px solid rgba(239,68,68,.15)}.info-label{color:var(--gray-600);font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.info-value{color:#8b5cf6;font-size:1.1rem;font-weight:700}.info-value.published{color:#22c55e}.info-value.unpublished{color:#ef4444}.story-row-icons .story-icon img{width:32px;height:32px}.modal-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#0009;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;align-items:center;justify-content:center;animation:fadeIn .3s ease-out}.story-info-modal{max-width:500px;width:90%;animation:slideUpFade .4s ease-out}.story-info-modal h3{margin-bottom:20px;color:#8b5cf6;font-size:1.5rem;font-weight:700;background:linear-gradient(135deg,#8b5cf6,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.story-info-details p{margin:12px 0;color:var(--gray-700);line-height:1.6;font-size:1.1rem}.story-info-actions{margin-top:24px;padding-top:20px;border-top:1px solid var(--gray-200);display:flex;justify-content:center}.delete-story-btn{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;border:none;border-radius:12px;padding:12px 24px;font-weight:600;font-size:1rem;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #ef44444d}.delete-story-btn:hover{background:linear-gradient(135deg,#dc2626,#b91c1c);transform:translateY(-2px);box-shadow:0 6px 18px #ef444466}.delete-confirm-modal{max-width:480px;width:90%;text-align:center}.delete-confirm-modal h3{color:#ef4444;font-size:1.6rem;font-weight:700;margin-bottom:20px}.delete-warning{margin:24px 0;text-align:left}.delete-warning p{margin:12px 0;color:var(--gray-700);line-height:1.6}.delete-warning strong{color:var(--gray-900)}.delete-actions{display:flex;gap:16px;justify-content:center;margin-top:32px}.cancel-delete-btn{background:var(--gray-100);color:var(--gray-700);border:1px solid var(--gray-300);border-radius:12px;padding:12px 24px;font-weight:600;font-size:1rem;cursor:pointer;transition:all .3s ease}.cancel-delete-btn:hover{background:var(--gray-200);color:var(--gray-800);transform:translateY(-1px)}.confirm-delete-btn{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;border:none;border-radius:12px;padding:12px 24px;font-weight:600;font-size:1rem;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #ef44444d}.confirm-delete-btn:hover{background:linear-gradient(135deg,#dc2626,#b91c1c);transform:translateY(-2px);box-shadow:0 6px 18px #ef444466}.modal-content{background:linear-gradient(135deg,#fff,#f8fafc);border-radius:32px;padding:32px;position:relative;max-width:90vw;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px #00000026,0 8px 32px #0000001a;border:1px solid rgba(139,92,246,.15)}.modal-close{position:absolute;top:16px;right:20px;background:#ffffffe6;border:1px solid rgba(139,92,246,.2);border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;color:#8b5cf6;z-index:10;transition:all .2s ease;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 2px 8px #0000001a}.modal-close:hover{background:#8b5cf6;color:#fff;transform:scale(1.05);box-shadow:0 4px 12px #8b5cf64d}.create-new-story-btn,.accounts-btn{background:var(--primary-color);color:#fff;border:none;padding:8px 16px;border-radius:var(--radius-md);font-size:.9rem;font-weight:600;cursor:pointer;transition:all var(--transition-fast);text-decoration:none}.create-new-story-btn:hover,.accounts-btn:hover{background:var(--primary-dark);transform:translateY(-1px)}.accounts-btn{background:var(--gray-100);color:var(--gray-700);border:1px solid var(--gray-300)}.accounts-btn:hover{background:var(--gray-200);color:var(--gray-800)}.story-text-container .icon-btn.edit-text{position:absolute;right:12px;bottom:12px;background:#ffffffe6;border:1px solid rgba(0,0,0,.1);border-radius:10px;padding:6px 8px;cursor:pointer;box-shadow:0 6px 14px #00000026;z-index:2;min-width:36px;min-height:36px;display:inline-flex;align-items:center;justify-content:center}.variant-controls{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:8px}.variant-indicator{background:#ffffffd9;padding:4px 8px;border-radius:8px;font-weight:600}.icon-btn{background:#ffffffe6;border:1px solid rgba(0,0,0,.1);border-radius:8px;padding:6px 8px;cursor:pointer}.story-text.editing{outline:2px dashed #f59e0b;background:#f59e0b0d}@media (max-width: 768px){#stories-container-main{background:none!important;padding:20px!important;border-radius:0!important;box-shadow:none!important;border:none!important;margin:60px auto 0!important;width:100%!important;max-width:100%!important}.story-controls,.filter-controls{display:flex!important;flex-direction:column!important;gap:12px!important;background:#fffffff2!important;-webkit-backdrop-filter:blur(10px)!important;backdrop-filter:blur(10px)!important;border-radius:16px!important;padding:16px!important;margin-bottom:20px!important}.search-container{display:flex!important;gap:8px!important;margin-bottom:0!important}.search-input{flex:1!important;padding:12px 16px!important;border:1px solid rgba(0,0,0,.1)!important;border-radius:12px!important;font-size:16px!important}.search-btn{padding:12px 20px!important;background:#f59e0b!important;color:#fff!important;border:none!important;border-radius:12px!important;font-weight:600!important}.sort-controls{display:flex!important;flex-direction:column!important;gap:8px!important}.sort-select{width:100%!important;padding:12px 16px!important;border:1px solid rgba(0,0,0,.1)!important;border-radius:12px!important;background:#fff!important;font-size:16px!important}#stories-container-main:before,#stories-container-main:after{display:none!important}.stories-hero h1{font-size:var(--header-size-mobile);margin-bottom:10px;margin-top:0}.story-stats{display:none}.story-controls{padding:20px 0;background:transparent!important;border-radius:0!important;box-shadow:none!important;border:none!important;margin-bottom:20px}.filter-controls{display:none}.story-filters,.right-controls,.view-toggle{display:none!important}.stories-grid,.stories-main{grid-template-columns:1fr!important;gap:16px;background:transparent!important;border-radius:0!important;margin-top:-30px!important;box-shadow:none!important;border:none!important;padding:0!important}.stories-container.list-view,.stories-container{display:grid!important;grid-template-columns:1fr!important}}#stories-container-main .stories-hero h1{color:#8b5cf6!important;text-shadow:0 0 8px rgba(255,255,255,1),0 0 16px rgba(255,255,255,.9),0 0 24px rgba(255,255,255,.8),0 0 32px rgba(255,255,255,.7),0 0 48px rgba(255,255,255,.6),0 0 64px rgba(255,255,255,.5),0 0 80px rgba(255,255,255,.3)}#stories-container-main:before{content:"";position:absolute;top:-20px;right:-20px;width:80px;height:80px;background:linear-gradient(135deg,#8b5cf6,#a855f7);border-radius:50%;opacity:.8;z-index:-1;animation:float-gentle 6s ease-in-out infinite}#stories-container-main:after{content:"";position:absolute;bottom:-25px;left:-25px;width:100px;height:100px;background:linear-gradient(135deg,#8b5cf6,#a855f7);border-radius:50%;opacity:.8;z-index:-1;animation:float-gentle 8s ease-in-out infinite reverse}@keyframes float-gentle{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.02)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUpFade{0%{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.publish-confirm-modal h3,.unpublish-modal h3{text-align:center;margin-bottom:0}.publish-confirm-modal p,.unpublish-modal p{margin-top:24px;margin-bottom:24px;line-height:1.6}.modal-actions,.unpublish-modal-actions{display:flex;justify-content:center;gap:12px;margin-top:32px}.modal-action-btn.unpublish-btn{width:100%;padding:16px 24px;background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;border:none;border-radius:12px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #ef44444d}.modal-action-btn.unpublish-btn:hover{background:linear-gradient(135deg,#dc2626,#b91c1c);transform:translateY(-2px);box-shadow:0 6px 20px #ef444466}.regenerate-chip{position:absolute;bottom:20px;left:20px;padding:6px 10px;border-radius:20px;font-weight:600;transition:all .2s ease;cursor:pointer;-webkit-user-select:none;user-select:none;z-index:10;background:#f59e0b1a;border:1px solid rgba(245,158,11,.3);color:#f59e0b;display:flex;align-items:center;justify-content:center}.regenerate-chip svg{width:20px;height:20px}.regenerate-chip:hover{background:#f59e0b33;border-color:#f59e0b80;transform:translateY(-1px);box-shadow:0 3px 8px #f59e0b4d}.pdf-chip{position:absolute;bottom:20px;right:20px;padding:8px 16px;border-radius:20px;font-size:.75rem;font-weight:600;transition:all .2s ease;cursor:pointer;-webkit-user-select:none;user-select:none;z-index:10}.pdf-chip.active{background:#f59e0b1a;border:1px solid rgba(245,158,11,.3);color:#f59e0b}.pdf-chip.active:hover{background:#f59e0b26;border-color:#f59e0b80;transform:translateY(-1px);box-shadow:0 3px 8px #f59e0b33}.pdf-chip.inactive{background:#9ca3af1a;border:1px solid rgba(156,163,175,.3);color:#9ca3af;cursor:not-allowed;opacity:.6}#accounts-page-wrapper{width:100%;max-width:1100px;margin:0 auto;padding:0}#accounts-container{background:linear-gradient(135deg,#ffffffe6,#f8fafce6);border-radius:24px;padding:35px;box-shadow:0 10px 30px #0000001a,0 1px 8px #0000000d;border:1px solid rgba(245,158,11,.15);max-width:1100px;width:95%;margin:72px auto 0;position:relative;z-index:1;animation:fadeInUp .8s ease-out}#accounts-container:before{content:"";position:absolute;top:-20px;right:-20px;width:80px;height:80px;background:linear-gradient(45deg,#f59e0b,#fbbf24);border-radius:50%;opacity:.8;z-index:-1;animation:gentleFloat 4s ease-in-out infinite}#accounts-container:after{content:"";position:absolute;bottom:-25px;left:-25px;width:100px;height:100px;background:linear-gradient(45deg,#10b981,#34d399);border-radius:50%;opacity:.8;z-index:-1;animation:gentleFloat 4s ease-in-out infinite reverse}#accounts-container h2{margin-bottom:25px;color:#f59e0b;font-size:var(--header-size-desktop);font-weight:800;font-family:Inter,Bubblegum Sans,sans-serif;letter-spacing:-.5px;background:linear-gradient(135deg,#f59e0b,#fbbf24);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:none;animation:slideInDown .8s ease-out;text-align:center}.accounts-hero{text-align:center;margin-bottom:40px}.accounts-hero h1{font-size:var(--header-size-desktop);font-weight:800;color:#f59e0b;margin-bottom:15px;font-family:Inter,sans-serif;letter-spacing:-.5px;background:linear-gradient(135deg,#f59e0b,#fbbf24);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.accounts-hero .hero-subtitle{font-size:1.1rem;color:var(--gray-600);max-width:600px;margin:0 auto}#accounts-container .account-overview,.account-overview{margin-bottom:30px;padding:25px;border:1px solid rgba(245,158,11,.1);background:linear-gradient(135deg,#ffffffe6,#f8fafccc);border-radius:18px;box-shadow:0 4px 15px #0000000d;position:relative;z-index:1;animation:fadeInUp .6s ease-out}#accounts-container .overview-card,.overview-card{background:none;border-radius:0;padding:0;box-shadow:none}.card-content{width:100%}.card-header{margin-bottom:25px}.card-header h3{font-size:1.5rem;font-weight:700;color:var(--gray-800);margin-bottom:5px}#accounts-container .account-profile{margin-bottom:30px}#accounts-container .profile-card{padding:25px;border:1px solid rgba(245,158,11,.1);background:linear-gradient(135deg,#ffffffe6,#f8fafccc);border-radius:18px;box-shadow:0 4px 15px #0000000d;display:flex;align-items:center;min-height:60px}#accounts-container .profile-content{width:100%}#accounts-container .profile-field{display:flex;align-items:center;gap:15px;margin-bottom:0;position:relative;width:100%}#accounts-container .profile-label{font-weight:700;font-size:1.1rem;color:#6b7280;font-family:Inter,sans-serif;min-width:140px;text-align:left}#accounts-container .profile-value{font-size:1.2rem;font-weight:600;color:#f59e0b;flex:1;text-align:left}#accounts-container .inline-action{position:absolute;right:0;top:50%;transform:translateY(-50%);background:linear-gradient(135deg,#f59e0b,#fbbf24);color:#fff;border:none;padding:6px 12px;border-radius:6px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .3s ease}#accounts-container .inline-action:hover{background:linear-gradient(135deg,#d97706,#f59e0b);transform:translateY(-50%) scale(1.05)}.inline-action{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:var(--white);border:1px solid var(--gray-300);color:var(--gray-700);padding:6px 10px;border-radius:10px;font-size:.85rem;cursor:pointer;transition:all var(--transition-fast)}.inline-action:hover{background:var(--gray-100)}#accounts-container .profile-edit{display:flex;align-items:center;gap:15px;margin-bottom:20px;padding:15px;background:#f59e0b0d;border-radius:12px}#accounts-container .edit-input-group{flex:1}#accounts-container .edit-input-group input{width:100%;padding:10px 12px;border:2px solid #e5e7eb;border-radius:10px;font-size:1rem}#accounts-container .edit-status{margin-top:6px;font-size:.9rem;color:#6b7280}#accounts-container .edit-buttons{display:flex;gap:8px}.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;margin-bottom:30px}.three-cols{grid-template-columns:repeat(3,1fr)!important}.four-cols{grid-template-columns:repeat(4,1fr)!important;gap:15px!important}.four-cols>div{display:flex;flex-direction:column}.four-cols .stat-item{width:100%;height:100%;min-height:100px;display:flex;align-items:center;justify-content:center}.four-cols .stat-info{text-align:center;display:flex;flex-direction:column;justify-content:center;min-height:70px;padding-top:8px}.four-cols .stat-value{text-align:center;margin:0 auto}.three-cols>div{display:flex;flex-direction:column}.three-cols .stat-item{width:100%;height:100%;min-height:96px;display:flex;align-items:center}.field-group{display:flex;flex-direction:column;gap:8px}.field-header{display:flex;align-items:center;justify-content:space-between;padding:0 4px 6px 18px}.field-label{font-size:.68rem;font-weight:700;color:var(--gray-500);text-transform:uppercase;letter-spacing:.02em;height:2.4em;line-height:1.2;display:flex;align-items:center;text-align:center;justify-content:center;padding:2px 4px;word-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}.stat-item{display:flex;align-items:center;gap:15px;padding:20px;background:#f59e0b0d;border-radius:16px;border:1px solid rgba(245,158,11,.1);transition:all var(--transition-normal);width:100%;box-sizing:border-box}.stat-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:#f59e0b33}.stat-info{flex:1;width:100%}#accounts-container .account-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:30px}#accounts-container .stat-card .stat-info{padding-top:8px;padding-bottom:8px}#accounts-container .stat-card .stat-value{margin-top:13px;color:#f59e0b!important}#accounts-container #plan-name{font-size:2.5rem!important;text-align:center!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:0 10px!important;color:#f59e0b!important}#plan-name{font-size:1.15rem;line-height:1.2;white-space:normal;overflow:visible;text-overflow:clip}.account-actions{text-align:center}.primary-btn{background:var(--primary-color);color:#fff;border:none;padding:14px 28px;border-radius:var(--radius-lg);font-size:1rem;font-weight:600;cursor:pointer;transition:all var(--transition-normal);box-shadow:var(--shadow-md)}.primary-btn:hover{background:#d97706;transform:translateY(-2px);box-shadow:var(--shadow-lg)}.primary-btn.loading{opacity:.7;pointer-events:none}.secondary-btn{background:var(--white);color:var(--primary-color);border:1px solid var(--primary-color);padding:12px 24px;border-radius:var(--radius-md);font-size:.95rem;font-weight:600;cursor:pointer;transition:all var(--transition-normal)}.secondary-btn:hover{background:var(--primary-color);color:#fff}.secondary-btn.loading{opacity:.7;pointer-events:none}.buy-tokens-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #f59e0b4d}#accounts-container .logout-floating-btn{position:relative;display:block;margin:30px 0 0 auto;width:fit-content;background:linear-gradient(135deg,#6b7280,#4b5563);color:#fff;border:none;padding:12px 24px;border-radius:25px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #6b72804d}#accounts-container .logout-floating-btn:hover{background:linear-gradient(135deg,#4b5563,#374151);transform:translateY(-2px);box-shadow:0 6px 20px #6b728066}#accounts-container .transaction-history,#accounts-container .story-history,.transaction-history{margin-bottom:30px;padding:25px;border:1px solid rgba(245,158,11,.1);background:linear-gradient(135deg,#ffffffe6,#f8fafccc);border-radius:18px;box-shadow:0 4px 15px #0000000d;position:relative;z-index:1;animation:fadeInUp .6s ease-out}#accounts-container .section-header,.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:15px}#accounts-container .section-header h3,.section-header h3{font-size:1.5rem;font-weight:700;color:var(--gray-800)}.refresh-btn{background:var(--gray-100);border:1px solid var(--gray-300);padding:8px 16px;border-radius:var(--radius-md);font-size:.9rem;cursor:pointer;transition:all var(--transition-fast);display:flex;align-items:center;gap:6px}.refresh-btn:hover{background:var(--gray-200);border-color:var(--gray-400)}.story-filters{display:flex;gap:10px;flex-wrap:wrap}.filter-btn{padding:8px 16px;border:1px solid var(--gray-300);background:var(--white);border-radius:var(--radius-full);font-size:.9rem;cursor:pointer;transition:all var(--transition-fast);box-shadow:var(--shadow-sm);width:95px;text-align:center;white-space:nowrap}.filter-btn:hover{border-color:#4b3d90;background:#4b3d9014}.filter-btn.active{background:#4b3d90;color:#fff;border-color:#4b3d90}.history-header-left{display:flex;align-items:center;gap:20px}.history-toggle{display:flex;background:#f3f4f6;border-radius:10px;padding:4px;box-shadow:inset 0 1px 3px #0000001a}.toggle-tab{padding:8px 20px;background:transparent;border:none;border-radius:8px;font-size:.95rem;font-weight:600;color:#6b7280;cursor:pointer;transition:all .2s ease;white-space:nowrap}.toggle-tab:hover:not(.active){color:#374151}.toggle-tab.active{background:#fff;color:#f59e0b;box-shadow:0 1px 3px #0000001a}.history-tab-content{animation:fadeIn .3s ease}.history-tab-content:not(.active){display:none}.scrollable-container{max-height:400px;overflow-y:auto;overflow-x:hidden;padding-right:8px}.scrollable-container::-webkit-scrollbar{width:8px}.scrollable-container::-webkit-scrollbar-track{background:#f3f4f6;border-radius:4px}.scrollable-container::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:4px}.scrollable-container::-webkit-scrollbar-thumb:hover{background:#9ca3af}.usage-period-info{padding:10px 20px;background:#f59e0b0d;border-radius:8px;margin-bottom:15px;display:flex;justify-content:space-between;align-items:center}.period-label{font-size:.9rem;color:#6b7280;font-weight:600}.usage-container{border:1px solid var(--gray-200);border-radius:12px;background:#fff}.usage-item{padding:15px 20px;border-bottom:1px solid var(--gray-200);display:flex;justify-content:space-between;align-items:center;transition:background-color .2s ease}.usage-item:last-child{border-bottom:none}.usage-item:hover{background:var(--gray-50)}.usage-info{flex:1}.usage-date{font-size:.85rem;color:var(--gray-500);margin-bottom:4px}.usage-description{font-weight:600;color:var(--gray-800);margin-bottom:2px}.usage-story{font-size:.9rem;color:#f59e0b}.usage-amount{display:flex;align-items:center;gap:8px}.pages-used{font-size:1.1rem;font-weight:700;color:#ef4444}.pages-label{font-size:.85rem;color:var(--gray-600)}.usage-item.grouped-item{background:linear-gradient(135deg,#f59e0b08,#fbbf2405);border-left:3px solid #f59e0b}.usage-item.grouped-item:hover{background:linear-gradient(135deg,#f59e0b14,#fbbf240d)}.daily-usage-group{margin-bottom:20px}.daily-usage-header{padding:12px 20px;background:linear-gradient(135deg,#f59e0b14,#fbbf240d);border-bottom:2px solid rgba(245,158,11,.15);display:flex;justify-content:space-between;align-items:center;font-weight:600}.daily-date{color:var(--gray-700)}.daily-total{color:#f59e0b;font-size:.95rem}.transactions-container,.transactions-list{divide-y:1px solid var(--gray-200)}.transaction-item{padding:20px;display:flex;justify-content:space-between;align-items:center;transition:background-color var(--transition-fast)}.transaction-item:hover{background:var(--gray-50)}.transaction-info{flex:1}.transaction-date{font-size:.9rem;color:var(--gray-500);margin-bottom:4px}.transaction-details{font-weight:600;color:var(--gray-800)}.transaction-status{padding:6px 12px;border-radius:var(--radius-full);font-size:.8rem;font-weight:600;text-transform:uppercase}.transaction-status.success{background:#10b9811a;color:var(--success-color)}.transaction-status.pending{background:#f59e0b1a;color:var(--warning-color)}.transaction-status.error{background:#ef44441a;color:var(--error-color)}.story-title{font-size:1.2rem;font-weight:700;color:var(--gray-800);margin:0;flex:1;line-height:1.4}.empty-state,.error-state,.loading-state{text-align:center;padding:40px 20px}.empty-state p,.error-state p,.loading-state{font-size:1.1rem;color:var(--gray-600);margin-bottom:20px}.action-card p{font-size:.9rem;color:var(--gray-600);margin:0}@media (max-width: 768px){#accounts-container{background:none!important;border-radius:0!important;padding:20px!important;box-shadow:none!important;border:none!important;margin:60px auto 0!important;width:100%!important;max-width:100%!important}#accounts-container:before,#accounts-container:after{display:none!important}#edit-username{display:none!important}#accounts-container .profile-field{flex-direction:column!important;align-items:center!important;gap:8px!important;text-align:center!important}#accounts-container .profile-label{min-width:auto!important}#accounts-container .profile-value,#accounts-container .stat-value#username-display,#accounts-container .stat-value#account-email{font-size:1rem!important;word-break:break-all!important;line-height:1.2!important}#accounts-container h2{font-size:2.2em}.accounts-hero{margin-top:0;margin-bottom:20px}.accounts-hero h1,#accounts-container h2{font-size:var(--header-size-tablet);margin-bottom:12px}.stat-grid{grid-template-columns:1fr;gap:15px}#accounts-container .account-stats{grid-template-columns:repeat(2,1fr);gap:12px}.section-header{flex-direction:column;align-items:flex-start;gap:15px}.history-header-left{width:100%}.history-toggle{width:100%;justify-content:stretch}.toggle-tab{flex:1;padding:8px 12px;font-size:.9rem}.scrollable-container{max-height:300px}.story-filters{width:100%;justify-content:center}.story-header{flex-direction:column;align-items:flex-start;gap:12px}.story-actions{width:100%;justify-content:flex-end}.transaction-item{flex-direction:column;align-items:flex-start;gap:12px}.transaction-status{align-self:flex-end}#accounts-container .account-overview,#accounts-container .transaction-history,.account-overview,.transaction-history{background:transparent!important;border-radius:0!important;box-shadow:none!important;border:none!important;padding:20px!important}}@media (max-width: 480px){.accounts-hero h1,#accounts-container h2{font-size:var(--header-size-mobile);margin-bottom:10px}#accounts-container .account-stats{grid-template-columns:1fr;gap:10px}}.story-viewer{min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;flex-direction:column}.story-nav-header{background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.2);padding:16px 24px;position:sticky;top:0;z-index:100}.nav-controls{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.story-title-header{text-align:center}.story-title-header h1{margin:0;font-size:1.5rem;color:var(--gray-800);font-weight:600}.story-content-area{flex:1;max-width:800px;margin:0 auto;padding:32px 24px;width:100%}.story-image-container{text-align:center;margin-bottom:24px;position:relative;display:flex;flex-direction:column;align-items:center;width:100%;justify-content:center}.story-image-container #story-image{width:100%;max-width:100%;height:auto;aspect-ratio:16 / 9;object-fit:cover;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}.story-image{max-width:100%;max-height:400px;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}#story-image-container #edit-image-btn.edit-image-icon{position:absolute;bottom:12px;right:12px;background:#ffffffe6;border:none;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px #00000026;transition:all .2s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;padding:0}#story-image-container #edit-image-btn.edit-image-icon:hover{background:#fff;transform:scale(1.1);box-shadow:0 4px 12px #00000040}#story-image-container #edit-image-btn.edit-image-icon img{width:20px;height:20px;opacity:.8}#story-image-container #edit-image-btn.edit-image-icon:hover img{opacity:1}.story-text-container{background:#fffffff2;border-radius:var(--radius-lg);padding:32px;margin-bottom:24px;box-shadow:var(--shadow-lg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.story-navigation-controls{display:flex;justify-content:space-between;gap:16px;margin-top:32px;padding-top:24px;border-top:1px solid rgba(245,158,11,.2)}.story-nav-btn{display:flex;align-items:center;padding:12px 24px;border:none;border-radius:25px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;width:120px;justify-content:center}.story-nav-btn.primary{background:linear-gradient(135deg,#f59e0b,#fbbf24);color:#fff;box-shadow:0 4px 15px #f59e0b4d}.story-nav-btn.primary:hover{background:linear-gradient(135deg,#d97706,#f59e0b);transform:translateY(-2px);box-shadow:0 6px 20px #f59e0b66}.story-nav-btn.secondary{background:#6b72801a;color:#6b7280;border:1px solid rgba(107,114,128,.2)}.story-nav-btn.secondary:hover:not(:disabled){background:#6b728033;color:#4b5563;transform:translateY(-1px)}.story-nav-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.story-nav-btn:disabled:hover{transform:none;box-shadow:none}.nav-text{font-weight:600}.story-text{font-size:1.1rem;line-height:1.7;color:var(--gray-700)}.story-nav-footer{background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.2);padding:20px 24px;position:sticky;bottom:0}.story-viewer-container{margin-top:70px;padding:20px;max-width:1200px;margin-left:auto;margin-right:auto}.story-viewer{background:linear-gradient(135deg,#fff,#f8fafc);border-radius:24px;padding:35px;box-shadow:0 4px 15px #0000000d;border:1px solid rgba(245,158,11,.1);overflow:visible;height:auto}.story-header h1.centered-orange-title{color:#f59e0b;text-align:center;font-size:2.5em;font-weight:800;margin:0 auto 10px;background:linear-gradient(135deg,#f59e0b,#fbbf24);-webkit-background-clip:text;-webkit-text-fill-color:transparent;display:block}.story-content-wrapper{margin-bottom:30px;overflow:visible;height:auto;min-height:fit-content}.variant-controls{position:absolute;bottom:12px;left:50%;transform:translate(-50%);display:flex;justify-content:center;align-items:center;gap:8px;width:fit-content;background:#0003;padding:4px 8px;border-radius:4px}.variant-controls>*{display:inline-flex;align-items:center}.variant-btn{background:linear-gradient(135deg,#f59e0b,#fbbf24);color:#fff;border:none;padding:4px 6px;border-radius:3px;cursor:pointer;font-weight:600;font-size:.7rem}.variant-btn:hover{background:linear-gradient(135deg,#d97706,#f59e0b);transform:scale(1.05)}#variant-indicator{color:#fff;font-weight:600;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:.65rem}.image-edit-inline{margin:15px 0;padding:15px;background:#f8fafccc;border-radius:12px;border:2px solid #e5e7eb;width:100%}.edit-buttons{margin-top:10px;display:flex;gap:16px;justify-content:center}.edit-buttons button{display:flex;align-items:center;padding:12px 24px;border:none;border-radius:25px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;width:120px;justify-content:center}.edit-buttons .secondary-btn{background:#6b72801a;color:#6b7280;border:1px solid rgba(107,114,128,.2)}.edit-buttons .secondary-btn:hover{background:#6b728033;color:#4b5563;transform:translateY(-1px)}#story-text{font-family:Andika,Georgia,serif;font-size:1.2rem;line-height:1.8;color:#374151;padding:35px;background:linear-gradient(135deg,#ffffffe6,#f8fafce6);border-radius:24px;border:1px solid rgba(245,158,11,.1);box-shadow:0 4px 15px #00000014}#story-text.age-font-large{font-size:1.8em;line-height:1.8}#story-text.age-font-medium{font-size:1.3em;line-height:1.7}#story-text.age-font-small{font-size:1.15em;line-height:1.6}.text-variant-controls{display:flex;justify-content:center;align-items:center;gap:8px;width:fit-content;margin:16px auto 0}.text-variant-controls .icon-btn{background:linear-gradient(135deg,#f59e0b,#fbbf24);color:#fff;border:none;padding:4px 6px;border-radius:3px;cursor:pointer;font-weight:600;font-size:.7rem}.text-variant-controls .icon-btn:hover{background:linear-gradient(135deg,#d97706,#f59e0b);transform:scale(1.05)}.text-variant-controls span{color:#374151;font-weight:600;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:.65rem}#edit-text-icon.edit-text{position:absolute;top:8px;right:8px;background:#ffffffe6;border:1px solid #e5e7eb;border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px}.publish-container{width:100%;margin:30px 0;text-align:center}.publish-btn{width:100%;padding:16px 24px;background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;border-radius:12px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #10b9814d;position:relative;z-index:10}.publish-btn:hover{background:linear-gradient(135deg,#059669,#047857);transform:translateY(-2px);box-shadow:0 6px 20px #10b98166}.publish-btn.unpublish{background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 4px 15px #ef44444d}.publish-btn.unpublish:hover{background:linear-gradient(135deg,#dc2626,#b91c1c);box-shadow:0 6px 20px #ef444466}.nav-buttons{display:flex;gap:15px;justify-content:space-between;max-width:800px;margin:0 auto}.nav-btn{background:linear-gradient(135deg,#6b7280,#4b5563);color:#fff;border:none;padding:12px 20px;border-radius:8px;cursor:pointer;font-weight:600;transition:all .2s ease}.nav-btn:hover:not(:disabled){background:linear-gradient(135deg,#4b5563,#374151);transform:translateY(-2px)}.nav-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.spinner{width:60px;height:60px;border:6px solid #f3f4f6;border-top:6px solid #f59e0b;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 20px}@media (max-width: 768px){.story-viewer-container{padding:0;margin-top:60px;width:100%;max-width:100%}.story-viewer{background:none!important;border-radius:0!important;padding:15px!important;box-shadow:none!important;border:none!important;width:100%;max-width:100%}.story-content-wrapper{margin-top:60px!important}.story-content-area{max-width:100%!important;padding:15px!important;width:100%!important}.story-image-container{background:none!important;border-radius:0!important;box-shadow:none!important;border:none!important;padding:0!important;margin-bottom:20px!important;width:100%!important;max-width:100%!important}.story-image-container #story-image{width:100%!important;max-width:100%!important;height:auto!important;border-radius:12px!important}.story-text-container{background:none!important;border-radius:0!important;box-shadow:none!important;border:none!important;padding:0!important;margin-bottom:20px!important;width:100%!important;max-width:100%!important}.story-text{width:100%!important;padding:15px!important;font-size:1.1rem!important;line-height:1.6!important}.story-header h1{display:none!important}.story-meta{flex-direction:column;gap:5px}.story-navigation{flex-direction:column;align-items:stretch}.nav-buttons,.action-buttons{justify-content:center;width:100%}.text-edit-controls{justify-content:center}#story-image-container #edit-image-btn.edit-image-icon,#image-edit-inline,.text-edit-controls{display:none}.variant-controls{display:none!important}#story-image-container #variant-controls.variant-controls,.nav-buttons{display:none}.phonics-controls{display:none!important}}.accordion-container{border-radius:16px;background:linear-gradient(135deg,#fffffff2,#f8fafcf2);overflow:hidden;box-shadow:0 4px 15px #00000014;border:1px solid rgba(245,158,11,.2)}.accordion-button{width:100%;padding:25px;background:none;border:none;text-align:left;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:background-color .3s ease}.accordion-button:hover{background:#f59e0b0d}.accordion-button h3{font-size:1.4rem;font-weight:700;color:#f59e0b;margin:0}.accordion-icon{font-size:1.8rem;color:#f59e0b;transition:transform .3s ease;font-weight:300}#phonics-notes-accordion .accordion-content{display:none!important;padding:0}#phonics-notes-accordion.active .accordion-content{display:block!important;padding:25px;background:#fff;border-top:1px solid #e5e7eb}.accordion-button.active .accordion-icon{transform:rotate(45deg)}.nested-accordion{margin:15px 0;border:1px solid #e5e7eb;border-radius:8px;overflow:hidden}.nested-accordion-button{width:100%;padding:15px 20px;border:none;background-color:#f9fafb;text-align:left;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:background-color .3s ease}.nested-accordion-button:hover{background-color:#f3f4f6}.nested-accordion-button h4{margin:0;color:#374151;font-size:1.1em;font-weight:600}.nested-accordion-icon{font-size:1.2em;color:#6b7280;transition:transform .3s ease}.nested-accordion-content{max-height:0;overflow:hidden;transition:max-height .3s ease}.nested-accordion.active .nested-accordion-content{max-height:1000px}.nested-accordion-content>div{padding:20px}.phonics-highlight{padding:0 1px;border-radius:3px;position:relative}.phonics-highlight:not(.tricky-word-highlight){background-color:#4caf5033!important;border-bottom:2px dotted #4CAF50!important}.tricky-word-highlight{background-color:#9c27b033!important;border-bottom:2px dotted #9C27B0!important}.disable-phonics-highlights .phonics-highlight:not(.tricky-word-highlight){background-color:transparent!important;color:inherit!important;border:none!important;font-weight:inherit!important}.disable-tricky-words .tricky-word-highlight{background-color:transparent!important;color:inherit!important;border:none!important;font-weight:inherit!important}.illuminated-block{display:flex;align-items:flex-start;justify-content:center;gap:20px;margin-bottom:40px;padding:30px;background:linear-gradient(135deg,#ffffff1a,#f8fafc0d);border:2px solid rgba(245,158,11,.3);border-radius:20px;box-shadow:0 8px 32px #0000001a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.illuminated-initial{height:120px;width:auto;float:left;margin-right:15px;margin-top:-10px;filter:drop-shadow(0 4px 8px rgba(245,158,11,.3))}.illuminated-text{flex:1;text-align:left}.hero-title-text{font-size:4rem;font-weight:900;background:linear-gradient(135deg,#f59e0b,#fbbf24);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 4px 20px rgba(245,158,11,.2);display:block;line-height:1;margin-bottom:15px}.hero-subtitle-inline{font-size:1.3rem;line-height:1.6;color:#ffffffe6;font-weight:400;margin:0;font-style:italic;text-shadow:0 2px 10px rgba(0,0,0,.3)}@media (max-width: 768px){.illuminated-block{flex-direction:column;text-align:center;gap:15px;padding:20px}.illuminated-initial{height:80px;float:none;margin:0 auto 10px;display:block}.hero-title-text{font-size:2.5rem}.hero-subtitle-inline{font-size:1.1rem}}.feature-img{width:100%;height:auto;border-radius:12px;box-shadow:0 8px 25px #00000026;transition:transform .3s ease,box-shadow .3s ease}.feature-img:hover{transform:translateY(-4px);box-shadow:0 12px 35px #0003}@media (max-width: 768px){.feature-img{box-shadow:0 6px 20px #0000001f}.feature-img:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000002e}}.cookie-consent{position:fixed;bottom:0;left:0;right:0;background:#000000f2;color:#fff;padding:20px;z-index:10000;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.1);transform:translateY(100%);transition:transform .3s ease-out}.cookie-consent.show{transform:translateY(0)}.cookie-consent-content{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}.cookie-consent-text{flex:1;min-width:300px}.cookie-consent-text p{margin:0 0 8px;font-size:.9rem;line-height:1.4}.cookie-consent-text a{color:#fbbf24;text-decoration:underline}.cookie-consent-buttons{display:flex;gap:12px;align-items:center}.cookie-btn{padding:10px 20px;border:none;border-radius:6px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease;white-space:nowrap}.cookie-btn-accept{background:#f59e0b;color:#fff}.cookie-btn-accept:hover{background:#d97706}.cookie-btn-decline{background:transparent;color:#9ca3af;border:1px solid #4b5563}.cookie-btn-decline:hover{background:#4b55631a;color:#fff}@media (max-width: 768px){.cookie-consent-content{flex-direction:column;text-align:center}.cookie-consent-text{min-width:auto}.cookie-consent-buttons{width:100%;justify-content:center}}body{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;background:#fff;min-height:100vh;color:#374151;overflow-x:hidden;display:flex;flex-direction:column;width:100%;position:relative}.landing-nav{position:fixed;top:0;left:0;right:0;background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 2px 20px #0000001a;z-index:1000;padding:16px 0}.nav-container{width:100%;margin:0;padding:0 20px;display:flex;justify-content:space-between;align-items:center}.nav-logo{font-size:1.5rem;font-weight:800;background:linear-gradient(135deg,#f59e0b,#fbbf24);-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-decoration:none}.nav-links{display:flex;align-items:center;gap:32px}.nav-link{text-decoration:none;color:#6b7280;font-weight:600;font-size:.95rem;padding:8px 10px;border-radius:8px;transition:color .2s ease,background-color .2s ease;cursor:pointer}.nav-link.primary{background:linear-gradient(135deg,#f59e0b,#fbbf24);color:#fff;padding:10px 24px;border-radius:8px;font-weight:600;transition:all .2s}.nav-link.primary:hover{transform:translateY(-2px);box-shadow:0 4px 12px #f59e0b4d}.landing-container{max-width:1200px;margin:0 auto;padding:100px 20px 40px;flex:1}.hero-section{text-align:center;padding:60px 0 80px;color:#fff}.hero-title{font-size:4rem;font-weight:900;margin-bottom:24px;text-shadow:0 4px 20px rgba(0,0,0,.2);line-height:1.1}.hero-subtitle{font-size:1.5rem;font-weight:500;opacity:.95;max-width:600px;margin:0 auto 40px;line-height:1.4}.hero-cta{display:inline-flex;align-items:center;justify-content:center;background:#fff;color:#f59e0b;padding:18px 36px;border-radius:12px;font-size:1.2rem;font-weight:700;text-decoration:none;box-shadow:0 8px 32px #00000026;transition:all .3s;cursor:pointer;border:none}.hero-cta:hover{transform:translateY(-3px);box-shadow:0 12px 40px #0003;background:#fef3c7}.hero-free{display:block;margin-top:16px;font-size:.9rem;color:#ffffffe6;font-weight:500}.features-container{background:#fffffffa;border-radius:24px;padding:5px 60px 60px;margin-bottom:60px}.feature-section{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-bottom:80px}.feature-section:last-child{margin-bottom:0}.feature-section.reverse{direction:rtl}.feature-section.reverse .feature-content{direction:ltr}.feature-content h2{font-size:2.5rem;font-weight:800;color:#1f2937;margin-bottom:20px;line-height:1.2}.feature-content h2 .highlight{background:linear-gradient(135deg,#f59e0b,#fbbf24);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.feature-content p{font-size:1.1rem;color:#6b7280;line-height:1.7;margin-bottom:16px}.feature-content ul{list-style:none;margin-top:24px}.feature-content li{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px;color:#4b5563;font-size:1rem;line-height:1.5}.feature-content li:before{content:"✓";display:inline-block;width:20px;height:20px;background:linear-gradient(135deg,#10b981,#34d399);color:#fff;border-radius:50%;text-align:center;line-height:20px;font-size:12px;font-weight:700;flex-shrink:0;margin-top:2px}.feature-image{background:linear-gradient(135deg,#f3f4f6,#e5e7eb);border-radius:16px;padding:40px;display:flex;align-items:center;justify-content:center;min-height:400px;box-shadow:0 4px 20px #0000000d;position:relative;overflow:hidden}.feature-image img{max-width:100%;height:auto;border-radius:12px;box-shadow:0 8px 32px #0000001a}.feature-placeholder{text-align:center;color:#9ca3af}.feature-placeholder-icon{font-size:4rem;margin-bottom:16px;opacity:.5}.phonics-section{background:linear-gradient(135deg,#f0f9ff,#e0f2fe);border-radius:24px;padding:60px;margin-bottom:60px;text-align:center}.phonics-section h2{font-size:2.5rem;font-weight:800;color:#1e40af;margin-bottom:20px}.phonics-section p{font-size:1.2rem;color:#3730a3;max-width:800px;margin:0 auto 40px;line-height:1.6}.phonics-phases{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px;max-width:900px;margin:0 auto}.phase-card{background:#fff;padding:24px;border-radius:12px;box-shadow:0 4px 16px #00000014;transition:all .3s}.phase-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px #0000001f}.phase-number{font-size:2rem;font-weight:800;color:#3b82f6;margin-bottom:8px}.phase-label{font-size:.9rem;color:#6b7280;font-weight:500}.cta-section{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:24px;padding:60px;text-align:center;color:#fff;margin-bottom:60px;box-shadow:0 20px 60px #0003}.cta-section h2{font-size:3rem;font-weight:800;margin-bottom:20px}.cta-section p{font-size:1.3rem;margin-bottom:32px;opacity:.95}.cta-button-group{display:flex;gap:20px;justify-content:center;flex-wrap:wrap}.landing-footer{width:100%;max-width:100%;margin:auto 0 0;background:#fffffffa;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:24px 24px 0 0;padding:40px 20px;text-align:center;color:#6b7280;flex-shrink:0;box-shadow:0 20px 60px #0000001a}.footer-links{display:flex;gap:32px;justify-content:center;margin-bottom:20px}.footer-link{color:#f59e0b;text-decoration:none;transition:color .2s;font-weight:500}.footer-link:hover{color:#d97706;text-decoration:underline}.footer-copyright{font-size:.9rem;opacity:.8}.mobile-nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px}.mobile-nav-toggle span{display:block;width:24px;height:2px;background:#6b7280;margin:5px 0;transition:.3s}.modal-overlay{position:fixed;inset:0;background:#000c;display:none;align-items:center;justify-content:center;z-index:10000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal-content{background:#fff;border-radius:20px;padding:40px;max-width:400px;width:90%;max-height:90vh;overflow-y:auto;position:relative;animation:modalSlideIn .3s ease-out;box-shadow:0 20px 60px #0000004d}.modal-close{position:absolute;top:20px;right:20px;background:none;border:none;font-size:24px;cursor:pointer;color:#9ca3af;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s}.modal-close:hover{color:#ef4444;background:#fef2f2}.auth-container{max-width:320px;margin:0 auto}.auth-tabs{display:flex;margin-bottom:30px;background:#f3f4f6;border-radius:10px;padding:4px}.auth-tab{flex:1;padding:12px 16px;background:none;border:none;border-radius:6px;cursor:pointer;font-weight:600;color:#6b7280;transition:all .2s}.auth-tab.active{background:#fff;color:#f59e0b;box-shadow:0 2px 4px #0000001a}.auth-form{display:none}.auth-form.active{display:block}.auth-form h3{font-size:1.5rem;font-weight:700;color:#1f2937;margin-bottom:8px;text-align:center}.auth-subtitle{color:#6b7280;text-align:center;margin-bottom:24px;font-size:.9rem}.form-group input{width:100%;padding:16px;border:2px solid #e5e7eb;border-radius:8px;font-size:1rem;transition:all .2s;background:#fafafa}.form-group input:focus{outline:none;border-color:#f59e0b;background:#fff;box-shadow:0 0 0 3px #f59e0b1a}.auth-button{width:100%;padding:16px;background:linear-gradient(135deg,#f59e0b,#fbbf24);color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s;margin-bottom:16px}.auth-button:hover:not(:disabled){background:linear-gradient(135deg,#d97706,#f59e0b);transform:translateY(-2px);box-shadow:0 4px 12px #f59e0b4d}.auth-button:disabled{opacity:.7;cursor:not-allowed;transform:none}.auth-note{text-align:center;color:#6b7280;font-size:.85rem;line-height:1.5}.auth-link{color:#f59e0b;cursor:pointer;font-weight:600;text-decoration:underline;transition:color .2s}.auth-link:hover{color:#d97706}.google-auth-button{width:100%;padding:14px 16px;background:#fff;color:#374151;border:2px solid #e5e7eb;border-radius:8px;font-size:.95rem;font-weight:500;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:20px}.google-auth-button:hover:not(:disabled){border-color:#d1d5db;background:#f9fafb;transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}.google-auth-button:disabled{opacity:.7;cursor:not-allowed;transform:none}.google-auth-button svg{flex-shrink:0}.auth-divider{position:relative;text-align:center;margin:20px 0}.auth-divider:before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:#e5e7eb}.auth-divider span{background:#fff;padding:0 16px;color:#6b7280;font-size:.85rem;font-weight:500;position:relative}.user-menu{position:relative;cursor:pointer}.user-name{color:#6b7280;font-weight:500;padding:8px 16px;border-radius:8px;transition:all .2s}.user-name:hover{background:#f59e0b1a;color:#f59e0b}.user-dropdown{position:absolute;top:100%;right:0;background:#fff;border-radius:8px;box-shadow:0 4px 20px #0000001a;padding:8px 0;min-width:180px;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all .2s}.user-menu:hover .user-dropdown{opacity:1;visibility:visible;transform:translateY(0)}.dropdown-link{display:block;padding:12px 16px;color:#6b7280;text-decoration:none;font-weight:500;transition:all .2s;cursor:pointer}.dropdown-link:hover{background:#f3f4f6;color:#f59e0b}@media (max-width: 768px){body{background-image:none!important;background-color:#fff;width:100%;max-width:100%}html,body{overflow-x:hidden;max-width:100vw}.landing-nav{padding:12px 0}.nav-container{padding:0 15px}.nav-logo{font-size:1.25rem}.nav-links{gap:20px;font-size:.9rem}.mobile-nav-toggle{display:none}.nav-container{justify-content:center;padding:0 15px}.nav-logo{display:none}.nav-links{display:flex;justify-content:space-between;width:100%;max-width:400px;gap:20px}.nav-link{font-size:1rem;padding:12px 16px;font-weight:600;flex:1;text-align:center}.landing-container{padding:80px 15px 20px}.hero-section{padding:40px 0 60px}.hero-title{font-size:2.2rem;line-height:1.2;margin-bottom:16px;color:#1f2937;text-shadow:none}.hero-subtitle{font-size:1.1rem;padding:0 10px;margin-bottom:30px;color:#6b7280;text-shadow:none}.hero-cta{padding:14px 28px;font-size:1rem}.hero-free{display:none}.feature-section{grid-template-columns:1fr;gap:30px;margin-bottom:50px}.feature-section.reverse{direction:ltr}.feature-content h2{font-size:1.8rem}.feature-content p{font-size:1rem}.feature-content li{font-size:.95rem}.feature-image{min-height:250px;padding:30px}.features-container,.phonics-section{padding:30px 15px;border-radius:16px;margin-bottom:40px}.phonics-section h2{font-size:1.8rem}.phonics-section p{font-size:1rem}.phonics-phases{grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:12px}.phase-card{padding:16px}.phase-number{font-size:1.5rem}.phase-label{font-size:.8rem}.cta-section{padding:30px 15px;border-radius:16px;margin-bottom:40px}.cta-section h2{font-size:2rem}.cta-section p{font-size:1.1rem}.landing-footer{padding:30px 15px;border-radius:16px 16px 0 0}.footer-links{flex-direction:column;gap:12px}.footer-copyright{font-size:.85rem}.modal-content{width:95%;max-width:none;padding:25px 20px;margin:10px;border-radius:16px;max-height:85vh}.modal-close{top:10px;right:10px;width:28px;height:28px;font-size:20px}.auth-container{max-width:none}.auth-tabs{margin-bottom:20px}.auth-tab{padding:10px 12px;font-size:.9rem}.auth-form h3{font-size:1.3rem;margin-bottom:6px}.auth-subtitle{font-size:.85rem;margin-bottom:20px}.form-group{margin-bottom:16px}.form-group input{padding:14px;font-size:.95rem}.auth-button{padding:14px;font-size:.95rem;margin-bottom:12px}.google-auth-button{padding:12px 14px;font-size:.9rem;margin-bottom:16px}.auth-divider{margin:16px 0}.auth-divider span{font-size:.8rem;padding:0 12px}.auth-note{font-size:.8rem}.auth-link{font-size:.85rem}.cf-turnstile{transform:scale(.9);transform-origin:center;margin:0 auto}}@media (max-width: 720px) and (min-width: 481px){body{overflow-x:hidden;width:100%;max-width:100vw}.landing-container{padding:85px 15px 25px;width:100%;max-width:100%;box-sizing:border-box}.hero-section{width:100%;max-width:100%;box-sizing:border-box;padding:40px 0 60px}.hero-title{font-size:2.5rem;max-width:100%;word-wrap:break-word}.hero-subtitle{font-size:1.2rem;padding:0 10px;max-width:100%;word-wrap:break-word}.hero-cta{padding:14px 28px;font-size:1rem;max-width:90%}.feature-grid{gap:20px;width:100%;max-width:100%;box-sizing:border-box}.feature-content{width:100%;max-width:100%;box-sizing:border-box;padding:0 10px}.feature-content h2{font-size:1.8rem;max-width:100%;word-wrap:break-word}.feature-content p{font-size:1rem;max-width:100%;word-wrap:break-word}*{max-width:100%;box-sizing:border-box}img{max-width:100%;height:auto}}@media (max-width: 480px){.nav-logo{font-size:1.1rem}.nav-links{gap:15px;font-size:.85rem}.hero-title{font-size:1.8rem}.hero-subtitle{font-size:1rem}.hero-cta{padding:12px 24px;font-size:.95rem}.feature-content h2{font-size:1.5rem}.feature-content p{font-size:.95rem}.phonics-phases{grid-template-columns:repeat(2,1fr)}}@media (max-width: 375px){.nav-container{padding:0 10px}.nav-links{gap:10px;font-size:.8rem}.landing-container{padding:70px 10px 20px}.hero-title{font-size:1.6rem}.hero-subtitle{font-size:.95rem}}.purchase-page-container{max-width:1400px;margin:0 auto;padding:40px 20px;min-height:calc(100vh - 80px)}.packages-container h2{margin-bottom:25px;color:#f59e0b;font-size:var(--header-size-desktop);font-weight:800;font-family:Inter,Bubblegum Sans,sans-serif;letter-spacing:-.5px;background:linear-gradient(135deg,#f59e0b,#fbbf24);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:none;animation:slideInDown .8s ease-out;text-align:center}.packages-container p{font-size:1.35em;font-weight:500;color:#f59e0b;margin-bottom:30px;text-align:center;max-width:600px;margin-left:auto;margin-right:auto}.billing-toggle-switch{position:relative;display:inline-block;width:130px;height:32px}.billing-toggle-switch input{opacity:0;width:0;height:0}.billing-toggle-slider{position:absolute;cursor:pointer;inset:0;background-color:#e5e7eb;border-radius:16px;transition:.4s}.billing-toggle-slider:before{position:absolute;content:"";height:24px;width:57px;left:4px;top:4px;background-color:#f59e0b;transition:all .3s ease;border-radius:12px}.billing-toggle-switch input:checked+.billing-toggle-slider:before{width:53px;left:73px}.billing-toggle-option{position:absolute;width:50%;height:100%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:#6b7280;z-index:2;transition:color .3s ease;padding:0 4px;box-sizing:border-box}.billing-toggle-option:first-child{left:1px}.billing-toggle-option:last-child{right:-2px}.billing-toggle-switch input:not(:checked)+.billing-toggle-slider .billing-toggle-option:first-child{color:#fff}.billing-toggle-switch input:checked+.billing-toggle-slider .billing-toggle-option:last-child{color:#fff}.savings-badge{position:absolute;top:-8px;right:-8px;background:#059669;color:#fff;font-size:.75rem;font-weight:600;padding:4px 8px;border-radius:12px;display:none;z-index:10}@keyframes slideInDown{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}.packages-container{background:linear-gradient(135deg,#ffffffe6,#f8fafce6);border-radius:24px;padding:35px;box-shadow:0 10px 30px #0000001a,0 1px 8px #0000000d;border:1px solid rgba(245,158,11,.15);max-width:1100px;width:95%;margin:72px auto 0;position:relative;z-index:1;animation:fadeInUp .8s ease-out}.packages-container:before{content:"";position:absolute;top:-20px;right:-20px;width:80px;height:80px;background:linear-gradient(45deg,#f59e0b,#fbbf24);border-radius:50%;opacity:.8;z-index:-1;animation:gentleFloat 4s ease-in-out infinite}.packages-container:after{content:"";position:absolute;bottom:-25px;left:-25px;width:100px;height:100px;background:linear-gradient(45deg,#10b981,#34d399);border-radius:50%;opacity:.8;z-index:-1;animation:gentleFloat 4s ease-in-out infinite reverse}@keyframes gentleFloat{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(3deg)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.package-section{margin-bottom:60px}.package-section:last-child{margin-bottom:40px}.section-title{font-size:2.5rem;font-weight:800;text-align:center;margin:0 0 40px;color:#1f2937;font-family:Inter,sans-serif;letter-spacing:-.5px;position:relative}.section-title:after{content:"";position:absolute;bottom:-10px;left:50%;transform:translate(-50%);width:80px;height:4px;background:linear-gradient(135deg,#f59e0b,#fbbf24);border-radius:2px}.price-period{font-size:.7em;color:#6b7280;font-weight:500}.subscription-management{margin:40px auto;max-width:800px;background:#f8fafc;border:2px solid #e2e8f0;border-radius:16px;padding:32px;text-align:center}.subscription-info h3{font-size:1.5rem;font-weight:700;color:#1f2937;margin:0 0 24px;font-family:Inter,sans-serif}.subscription-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:20px}.secondary-btn,.danger-btn{padding:12px 24px;border:none;border-radius:8px;font-weight:600;font-size:.9rem;cursor:pointer;transition:all .2s ease;font-family:Inter,sans-serif}.secondary-btn{background:#6366f1;color:#fff}.secondary-btn:hover{background:#4f46e5;transform:translateY(-1px)}.secondary-btn:disabled{background:#9ca3af;cursor:not-allowed;transform:none}.danger-btn{background:#ef4444;color:#fff}.danger-btn:hover{background:#dc2626;transform:translateY(-1px)}.danger-btn:disabled{background:#9ca3af;cursor:not-allowed;transform:none}.cancellation-notice{color:#dc2626;font-weight:600;margin:16px 0 0;padding:12px;background:#fef2f2;border:1px solid #fecaca;border-radius:8px}.package-toggle{display:flex!important;justify-content:center;margin:40px auto 20px;width:100%;position:relative;z-index:100}.package-toggle-switch{position:relative;display:inline-block;width:130px;height:32px}.package-toggle-switch input{opacity:0;width:0;height:0}.package-toggle-slider{position:absolute;cursor:pointer;inset:0;background-color:#e5e7eb;border-radius:16px;transition:.4s}.package-toggle-slider:before{position:absolute;content:"";height:24px;width:57px;left:4px;top:4px;background-color:#f59e0b;transition:all .3s ease;border-radius:12px}.package-toggle-switch input:checked+.package-toggle-slider:before{width:61px;left:65px;background-color:#8b5cf6}.package-toggle-option{position:absolute;width:50%;height:100%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:#6b7280;z-index:2;transition:color .3s ease;padding:0 4px;box-sizing:border-box}.package-toggle-option:first-child{left:0}.package-toggle-option:last-child{right:0}.package-toggle-switch input:not(:checked)+.package-toggle-slider .package-toggle-option:first-child{color:#fff}.package-toggle-switch input:checked+.package-toggle-slider .package-toggle-option:last-child{color:#fff}.token-package:hover{transform:translateY(-5px);box-shadow:0 15px 40px #f59e0b26;border-color:#f59e0b}.token-package:hover .package-price{color:#f59e0b}.token-package .package-btn{background:#fff!important;color:#f59e0b!important;border:2px solid #f59e0b!important;box-shadow:0 2px 4px #f59e0b33!important;transition:all .2s ease!important}.teacher-package .package-price,.token-package[data-package=teacher] .package-price{color:#8b5cf6}.teacher-package .package-btn,.token-package[data-package=teacher] .package-btn{background:#fff!important;color:#8b5cf6!important;border:2px solid #8b5cf6!important;box-shadow:0 2px 4px #8b5cf633!important;transition:all .2s ease!important}.teacher-package:hover .package-price,.token-package[data-package=teacher]:hover .package-price{color:#8b5cf6}.teacher-package .package-btn:hover,.token-package[data-package=teacher] .package-btn:hover{background:#8b5cf6!important;color:#fff!important;border-color:#8b5cf6!important;transform:translateY(-1px)!important;box-shadow:0 4px 8px #8b5cf64d!important}.teacher-package .package-btn.upgrade-btn:hover,.token-package[data-package=teacher] .package-btn.upgrade-btn:hover{background:#059669!important;color:#fff!important;border-color:#059669!important;box-shadow:0 4px 8px #10b9814d!important}.education-packages .token-package .package-price{color:#8b5cf6}.education-packages .token-package .package-btn{background:#fff!important;color:#8b5cf6!important;border:2px solid #8b5cf6!important;box-shadow:0 2px 4px #8b5cf633!important;transition:all .2s ease!important}.education-packages .token-package:hover{transform:translateY(-5px);box-shadow:0 15px 40px #8b5cf626;border-color:#8b5cf6}.education-packages .token-package:hover .package-price{color:#8b5cf6}.package-btn:hover{background:#f59e0b!important;box-shadow:0 4px 8px #f59e0b4d!important;color:#fff!important;transform:translateY(-1px)!important}.package-btn.featured-btn{background:#fff!important;color:#f59e0b!important;border:2px solid #f59e0b!important;box-shadow:0 2px 4px #f59e0b33!important}.package-btn.featured-btn:hover{background:#f59e0b!important;color:#fff!important;border-color:#f59e0b!important;transform:translateY(-1px)!important;box-shadow:0 4px 8px #f59e0b4d!important}.token-package.popular:hover,.token-package.featured:hover{transform:translateY(-5px);box-shadow:0 15px 40px #f59e0b26;border-color:#f59e0b}.packages-section{transition:opacity .3s ease,transform .3s ease}.packages-section.hidden{display:none}.package-btn.current-plan{background:#f59e0b!important;color:#fff!important;border-color:#f59e0b!important;cursor:pointer;transform:none!important}.package-btn.upgrade-btn{background:#10b981!important;color:#fff!important;border-color:#10b981!important}.package-btn.upgrade-btn:hover{background:#059669!important;border-color:#059669!important}.token-package[data-package=teacher] .package-btn.upgrade-btn,.teacher-package .package-btn.upgrade-btn,.education-packages .token-package[data-package=teacher] .package-btn.upgrade-btn{background:#10b981!important;color:#fff!important;border-color:#10b981!important;box-shadow:0 2px 4px #10b98133!important}.token-package[data-package=teacher] .package-btn.upgrade-btn:hover,.teacher-package .package-btn.upgrade-btn:hover,.education-packages .token-package[data-package=teacher] .package-btn.upgrade-btn:hover{background:#059669!important;color:#fff!important;border-color:#059669!important;box-shadow:0 4px 8px #10b9814d!important;transform:translateY(-1px)!important}.token-package[data-package=schools] .package-btn.upgrade-btn,.schools-package .package-btn.upgrade-btn,.education-packages .token-package[data-package=schools] .package-btn.upgrade-btn{background:#10b981!important;color:#fff!important;border-color:#10b981!important;box-shadow:0 2px 4px #10b98133!important}.token-package[data-package=schools] .package-btn.upgrade-btn:hover,.schools-package .package-btn.upgrade-btn:hover,.education-packages .token-package[data-package=schools] .package-btn.upgrade-btn:hover{background:#059669!important;color:#fff!important;border-color:#059669!important;box-shadow:0 4px 8px #10b9814d!important;transform:translateY(-1px)!important}.package-btn.downgrade-btn{background:#f59e0b!important;color:#fff!important}.package-btn.downgrade-btn:hover{background:#d97706!important}@media (max-width: 768px){.subscription-management{margin:20px;padding:24px}.subscription-actions{flex-direction:column;align-items:center}.secondary-btn,.danger-btn{width:100%;max-width:280px}}.renewal-info{font-size:.9rem;color:#6b7280;text-align:center;margin-bottom:15px;font-weight:500}#purchase-container .toggle-switch{display:none!important}.monthly-packages,.annual-packages{display:none}.monthly-packages.active,.annual-packages.active{display:block}.price-savings{font-size:.85rem;color:#10b981;font-weight:600;text-align:center;margin-top:5px}@media (max-width: 768px){.section-title{font-size:2rem;margin-bottom:30px}.package-section{margin-bottom:40px}}.token-packages-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-bottom:30px;width:100%}.token-package{background:linear-gradient(135deg,#fff,#f8f9fa);border-radius:16px;padding:24px;box-shadow:0 8px 24px #0000001a;transition:all .3s ease;position:relative;border:2px solid transparent;display:flex;flex-direction:column;min-height:420px}.token-package:hover{transform:translateY(-5px);box-shadow:0 15px 40px #00000026}.popular-badge,.package-badge{position:absolute;top:-10px;left:50%;transform:translate(-50%);background:linear-gradient(45deg,#f59e0b,#fbbf24);color:#fff;padding:5px 20px;border-radius:20px;font-size:.85rem;font-weight:600;box-shadow:0 4px 15px #f59e0b4d}.package-header{text-align:center;margin-bottom:20px}.package-header h3{font-size:1.5rem;color:#2c3e50;margin-bottom:10px;font-weight:700}.package-price{font-size:2.5rem;font-weight:800;color:#f59e0b;margin-bottom:5px}.package-savings{background:linear-gradient(45deg,#4caf50,#66bb6a);color:#fff;padding:4px 12px;border-radius:15px;font-size:.8rem;font-weight:600;display:inline-block}.package-content{display:flex;flex-direction:column;flex-grow:1;justify-content:space-between}.token-amount{font-size:1.8rem;font-weight:700;color:#2c3e50;text-align:center;margin-bottom:20px}.package-pages{font-size:1.1rem;font-weight:700;color:#f59e0b;margin-bottom:20px;padding:8px 16px;background:#f59e0b26;border-radius:12px;text-align:center}.education-packages .package-pages{color:#7c3aed;background:#7c3aed26}.package-features{list-style:none;padding:0;margin-bottom:30px;flex-grow:1}.package-features li{padding:8px 0;font-size:1rem;color:#555;display:flex;align-items:center}.package-btn{width:100%;padding:15px 30px;background:linear-gradient(45deg,#f59e0b,#fbbf24);color:#fff;border:none;border-radius:12px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #f59e0b4d;margin-top:auto}.package-btn:hover{background:linear-gradient(45deg,#d97706,#f59e0b);transform:translateY(-2px);box-shadow:0 6px 20px #f59e0b66}.package-btn:disabled{opacity:.7;cursor:not-allowed;transform:none}.package-btn.featured-btn{background:linear-gradient(45deg,#4caf50,#66bb6a);box-shadow:0 4px 15px #4caf504d}.package-btn.featured-btn:hover{background:linear-gradient(45deg,#388e3c,#4caf50);box-shadow:0 6px 20px #4caf5066}.back-to-game-btn{background:linear-gradient(45deg,#2196f3,#42a5f5);color:#fff;border:none;padding:12px 24px;border-radius:25px;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #2196f34d}.back-to-game-btn:hover{background:linear-gradient(45deg,#1976d2,#2196f3);transform:translateY(-2px);box-shadow:0 6px 20px #2196f366}.payment-success-message,.payment-cancelled-message{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;display:flex;align-items:center;justify-content:center;z-index:10000}.success-content,.cancelled-content{background:#fff;padding:40px;border-radius:20px;text-align:center;max-width:500px;box-shadow:0 20px 60px #0000004d}.success-content h3{color:#4caf50;font-size:1.8rem;margin-bottom:15px}.cancelled-content h3{color:#ff9800;font-size:1.8rem;margin-bottom:15px}.success-content button,.cancelled-content button{background:linear-gradient(45deg,#4caf50,#66bb6a);color:#fff;border:none;padding:12px 30px;border-radius:25px;font-weight:600;cursor:pointer;margin-top:20px;transition:all .3s ease}.cancelled-content button{background:linear-gradient(45deg,#ff9800,#ffb74d)}.success-content button:hover,.cancelled-content button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0003}.token-display{display:flex;align-items:center;gap:6px;background:linear-gradient(45deg,#f59e0b,#fbbf24);color:#fff;padding:6px 12px;border-radius:20px;font-weight:600;font-size:.9rem}.token-icon{font-size:1rem}.token-count{font-weight:700}.token-label{font-size:.8rem;opacity:.9}.buy-tokens-btn{background:linear-gradient(45deg,#f59e0b,#fbbf24);color:#fff;border:none;padding:8px 16px;border-radius:20px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease}.buy-tokens-btn:hover{transform:translateY(-1px);box-shadow:0 4px 15px #f59e0b4d}.token-modal-content{max-width:900px;width:95%;max-height:90vh;padding:30px}.token-modal-content h2{font-size:2rem;font-weight:700;text-align:center;color:#333;margin-bottom:8px;font-family:Bubblegum Sans,cursive}.modal-subtitle{text-align:center;color:#666;margin-bottom:30px;font-size:1.1rem}.token-packages{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-bottom:30px}.token-modal-content .token-package{background:#fff;border:2px solid #e5e7eb;border-radius:16px;padding:25px;text-align:center;transition:all .3s ease;position:relative;overflow:hidden}.token-modal-content .token-package:hover{transform:translateY(-3px);box-shadow:0 10px 30px #f59e0b26;border-color:#fbbf24}.token-modal-content .token-package.popular{border-color:#f59e0b;background:linear-gradient(135deg,#fff7ed,#fff);transform:scale(1.05)}.token-modal-content .popular-badge{position:absolute;top:-1px;left:50%;transform:translate(-50%);background:linear-gradient(45deg,#f59e0b,#fbbf24);color:#fff;padding:4px 16px;border-radius:0 0 12px 12px;font-size:.8rem;font-weight:600}.token-modal-content .package-header{margin-bottom:20px}.token-modal-content .package-header h3{font-size:1.4rem;font-weight:700;color:#333;margin-bottom:8px}.token-modal-content .package-price{font-size:2.5rem;font-weight:800;color:#f59e0b;margin-bottom:4px}.token-modal-content .package-savings{background:#dcfce7;color:#16a34a;padding:2px 8px;border-radius:12px;font-size:.8rem;font-weight:600;display:inline-block}.token-modal-content .token-amount{font-size:1.5rem;font-weight:700;color:#333;margin-bottom:16px}.token-modal-content .package-features{list-style:none;text-align:left;margin-bottom:25px}.token-modal-content .package-features li{padding:4px 0;color:#666;font-size:.95rem}.token-modal-content .package-btn{width:100%;background:linear-gradient(45deg,#f59e0b,#fbbf24);color:#fff;border:none;padding:12px 20px;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease}.token-modal-content .package-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px #f59e0b4d}.token-modal-content .token-package.popular .package-btn{background:linear-gradient(45deg,#d97706,#f59e0b);box-shadow:0 4px 15px #f59e0b4d}.payment-security{text-align:center;padding-top:20px;border-top:1px solid #e5e7eb}.security-badge{display:inline-flex;align-items:center;gap:8px;color:#666;font-size:.9rem}.security-icon{color:#10b981}.low-tokens-warning{background:linear-gradient(45deg,#fee2e2,#fef3f2);border:1px solid #fecaca;color:#dc2626;padding:12px 16px;border-radius:12px;margin:20px;text-align:center;font-weight:500}.low-tokens-warning .buy-link{color:#f59e0b;text-decoration:underline;cursor:pointer;font-weight:600}@media (max-width: 768px){.purchase-page-container{padding:20px 15px}.token-packages-grid{grid-template-columns:1fr;gap:20px}.token-package.popular,.token-package.featured{transform:none}.token-package.popular:hover,.token-package.featured:hover{transform:translateY(-5px)}.token-packages{grid-template-columns:1fr}.token-modal-content .token-package.popular{transform:none}.token-modal-content{padding:20px}.token-modal-content h2{font-size:1.6rem}.token-display{display:none!important}.packages-container>div[style*="gap: 30px"]{gap:15px!important}.billing-toggle-slider:before,.package-toggle-slider:before{width:calc(50% - 4px)}.billing-toggle-switch input:checked+.billing-toggle-slider:before,.package-toggle-switch input:checked+.package-toggle-slider:before{left:calc(50% + 2px);width:calc(50% - 6px)}.billing-toggle-option:first-child,.package-toggle-option:first-child{left:8px;width:calc(50% - 12px)}.billing-toggle-option:last-child,.package-toggle-option:last-child{right:8px;left:calc(50% + 4px);width:calc(50% - 12px)}}@media (max-width: 480px){.purchase-page-container{padding:15px 10px}.token-package{padding:20px}.package-price{font-size:2rem}.token-amount{font-size:1.5rem}.package-btn{padding:12px 24px;font-size:1rem}}@media (prefers-reduced-motion: reduce){.token-package,.package-btn,.back-to-game-btn,.buy-tokens-btn{animation:none;transition:none}}@media (prefers-contrast: high){.token-package{border:2px solid #000;background:#fff}.package-btn,.back-to-game-btn,.buy-tokens-btn,.token-display{background:#000;color:#fff;border:2px solid #fff}}.schools-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.schools-modal-content{background:#fff;border-radius:16px;max-width:600px;width:90%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px #0000004d;animation:modalSlideIn .3s ease-out}@keyframes modalSlideIn{0%{opacity:0;transform:scale(.9) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}.schools-modal-header{display:flex;justify-content:space-between;align-items:center;padding:24px 32px;border-bottom:1px solid #e5e7eb}.schools-modal-header h2{margin:0;font-size:1.5rem;font-weight:700;color:#1f2937}.close-modal{background:none;border:none;font-size:24px;color:#6b7280;cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s}.close-modal:hover{background:#f3f4f6;color:#374151}.schools-modal-body{padding:32px}.schools-modal-body p{font-size:1rem;color:#4b5563;margin:0 0 24px;line-height:1.6}.schools-features{list-style:none;margin:0 0 32px;padding:0}.schools-features li{display:flex;align-items:flex-start;margin-bottom:12px;font-size:.95rem;color:#374151;line-height:1.6}.schools-features li strong{color:#1f2937}.schools-form{background:#f9fafb;padding:24px;border-radius:12px;margin-bottom:32px}.schools-form h3{margin:0 0 20px;font-size:1.1rem;font-weight:600;color:#1f2937}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:6px;font-weight:500;color:#374151;font-size:.9rem}.form-group input,.form-group select{width:100%;padding:12px 16px;border:1px solid #d1d5db;border-radius:8px;font-size:1rem;transition:all .2s;box-sizing:border-box}.form-group input:focus,.form-group select:focus{outline:none;border-color:#f59e0b;box-shadow:0 0 0 3px #f59e0b1a}.schools-pricing{display:flex;align-items:center;justify-content:space-between;padding:24px;background:#f8fafc;border-radius:12px;margin-top:24px}.price-summary{display:flex;align-items:baseline;gap:4px}.price-summary .price{font-size:2rem;font-weight:700;color:#1f2937}.price-summary .period{font-size:1rem;color:#6b7280;font-weight:500}.schools-proceed-btn{background:linear-gradient(135deg,#f59e0b,#fbbf24);color:#fff;border:none;padding:14px 28px;border-radius:8px;font-weight:600;font-size:1rem;cursor:pointer;transition:all .2s;min-width:160px}.schools-proceed-btn:hover:not(:disabled){background:linear-gradient(135deg,#d97706,#f59e0b);transform:translateY(-2px);box-shadow:0 4px 12px #f59e0b4d}.schools-proceed-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.current-plan.package-btn,.current-plan .package-btn,button.current-plan,.current-plan.schools-btn,.schools-btn.current-plan{background:#f59e0b!important;color:#fff!important;border-color:#f59e0b!important;position:relative;overflow:hidden;box-shadow:0 4px 15px #f59e0b4d}.token-package[data-package=teacher] .current-plan.package-btn,.token-package[data-package=teacher] button.current-plan{background:#8b5cf6!important;color:#fff!important;border-color:#8b5cf6!important;box-shadow:0 4px 15px #8b5cf64d}.token-package .current-plan.package-btn .btn-text-default,.current-plan.package-btn .btn-text-default,.current-plan.schools-btn .btn-text-default,.schools-btn.current-plan .btn-text-default{display:block!important}.token-package .current-plan.package-btn .btn-text-hover,.current-plan.package-btn .btn-text-hover,.current-plan.schools-btn .btn-text-hover,.schools-btn.current-plan .btn-text-hover{display:none!important}.token-package .current-plan.package-btn:hover,.current-plan.package-btn:hover,.current-plan.schools-btn:hover,.schools-btn.current-plan:hover{background:#ef4444!important;border-color:#ef4444!important;transform:translateY(-2px);box-shadow:0 8px 25px #ef444466}.token-package .current-plan.package-btn:hover .btn-text-default,.current-plan.package-btn:hover .btn-text-default,.current-plan.schools-btn:hover .btn-text-default,.schools-btn.current-plan:hover .btn-text-default{display:none!important}.token-package .current-plan.package-btn:hover .btn-text-hover,.current-plan.package-btn:hover .btn-text-hover,.current-plan.schools-btn:hover .btn-text-hover,.schools-btn.current-plan:hover .btn-text-hover{display:block!important;color:#fff!important}.token-package:hover .current-plan.package-btn,.token-package:hover .current-plan,.token-package:hover button.current-plan,.token-package:hover .current-plan.schools-btn,.token-package:hover .schools-btn.current-plan{background:#f59e0b!important;color:#fff!important;border-color:#f59e0b!important;transform:none!important}.token-package[data-package=teacher]:hover .current-plan.package-btn,.token-package[data-package=teacher]:hover button.current-plan{background:#8b5cf6!important;color:#fff!important;border-color:#8b5cf6!important;transform:none!important}.token-package:hover .current-plan.package-btn:hover,.token-package:hover .current-plan.schools-btn:hover,.token-package:hover .schools-btn.current-plan:hover{background:#ef4444!important;color:#fff!important;border-color:#ef4444!important}.cancellation-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;display:none;justify-content:center;align-items:center;z-index:1000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.cancellation-modal.active{display:flex;animation:fadeInModal .3s ease-out}.cancellation-modal-content{background:linear-gradient(135deg,#fffffff2,#f8fafcf2);border-radius:20px;padding:40px;max-width:500px;width:90%;position:relative;box-shadow:0 20px 60px #0000004d;border:1px solid rgba(139,92,246,.2);animation:slideInModal .3s ease-out}.cancellation-modal-header{text-align:center;margin-bottom:25px}.cancellation-modal-header h3{color:#ef4444;font-size:1.8rem;font-weight:700;margin-bottom:10px;font-family:Inter,sans-serif}.cancellation-modal-header .warning-icon{font-size:3rem;color:#ef4444;margin-bottom:15px;display:block}.cancellation-modal-body{margin-bottom:30px}.cancellation-modal-body p{color:#4b5563;font-size:1.1rem;line-height:1.6;margin-bottom:15px;text-align:center}.cancellation-modal-body .highlight{color:#8b5cf6;font-weight:600}.cancellation-modal-actions{display:flex;gap:15px;justify-content:center}.cancellation-modal-btn{padding:12px 24px;border-radius:12px;font-size:1rem;font-weight:600;border:none;cursor:pointer;transition:all .3s ease;min-width:120px}.cancellation-modal-btn.cancel-btn{background:#f3f4f6;color:#6b7280;border:1px solid #d1d5db}.cancellation-modal-btn.cancel-btn:hover{background:#e5e7eb;color:#4b5563;transform:translateY(-1px)}.cancellation-modal-btn.confirm-btn{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;box-shadow:0 4px 15px #ef44444d}.cancellation-modal-btn.confirm-btn:hover{background:linear-gradient(135deg,#dc2626,#b91c1c);transform:translateY(-2px);box-shadow:0 8px 25px #ef444466}.cancellation-modal-close{position:absolute;top:15px;right:15px;background:none;border:none;font-size:24px;cursor:pointer;color:#9ca3af;transition:all .2s ease}.cancellation-modal-close:hover{color:#ef4444;transform:scale(1.1)}@keyframes fadeInModal{0%{opacity:0}to{opacity:1}}@keyframes slideInModal{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.schools-package{border:2px solid #8b5cf6;position:relative}.schools-package .package-header h3{color:#8b5cf6}.schools-btn{background:linear-gradient(135deg,#8b5cf6,#a78bfa);border-color:#8b5cf6}.schools-btn:hover{background:linear-gradient(135deg,#7c3aed,#8b5cf6);transform:translateY(-2px);box-shadow:0 8px 25px #8b5cf64d}.token-package[data-package=schools] .package-btn:not(.upgrade-btn):not(.current-plan):hover,.schools-package .package-btn:not(.upgrade-btn):not(.current-plan):hover,.education-packages .token-package[data-package=schools] .package-btn:not(.upgrade-btn):not(.current-plan):hover{background:#8b5cf6!important;color:#fff!important;border-color:#8b5cf6!important;transform:translateY(-1px)!important;box-shadow:0 4px 8px #8b5cf64d!important}.token-package[data-package=district] .package-btn:hover,.district-package .package-btn:hover,.education-packages .token-package[data-package=district] .package-btn:hover{background:#8b5cf6!important;color:#fff!important;border-color:#8b5cf6!important;transform:translateY(-1px)!important;box-shadow:0 4px 8px #8b5cf64d!important}@media (max-width: 768px){.schools-modal-content{width:95%;margin:20px;max-height:calc(100vh - 40px)}.schools-modal-header,.schools-modal-body{padding:20px}.schools-form{padding:16px}.schools-pricing{flex-direction:column;gap:16px;text-align:center}.schools-proceed-btn{width:100%}}*{margin:0;padding:0;box-sizing:border-box}:root{--header-size-desktop: 2.8rem;--header-size-tablet: 2rem;--header-size-mobile: 1.8rem;--primary-color: #f59e0b;--primary-light: #a5b4fc;--primary-dark: #4338ca;--secondary-color: #f59e0b;--secondary-light: #fbbf24;--accent-color: #ec4899;--accent-light: #f9a8d4;--success-color: #10b981;--success-light: #6ee7b7;--warning-color: #f59e0b;--error-color: #ef4444;--white: #ffffff;--gray-50: #f9fafb;--gray-100: #f3f4f6;--gray-200: #e5e7eb;--gray-300: #d1d5db;--gray-400: #9ca3af;--gray-500: #6b7280;--gray-600: #4b5563;--gray-700: #374151;--gray-800: #1f2937;--gray-900: #111827;--bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--card-gradient: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);--button-gradient: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--space-3xl: 4rem;--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-2xl: 1.5rem;--radius-full: 9999px;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / .25);--transition-fast: .15s ease-out;--transition-normal: .3s ease-out;--transition-slow: .5s ease-out}body{font-family:Inter,Comic Sans MS,Chalkboard SE,Comic Neue,sans-serif;display:flex;justify-content:center;align-items:flex-start;min-height:100vh;background-attachment:fixed;margin:0;padding:60px 0 100px;overflow-x:hidden;position:relative;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(circle at 20% 20%,rgba(99,102,241,.1) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(236,72,153,.1) 0%,transparent 50%);pointer-events:none;z-index:0}#create-container:not(.initialized){visibility:hidden}#create-container.initialized{visibility:visible}#start-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-bottom:30px;padding-bottom:25px}.start-button{padding:20px 15px;font-size:1.05em;font-weight:500;cursor:pointer;background:linear-gradient(135deg,#ffffffe6,#f8fafce6);color:#374151;border:1px solid rgba(245,158,11,.3);border-radius:20px;transition:all .3s ease;box-shadow:0 4px 15px #0000000d;position:relative;overflow:hidden;z-index:1;min-height:70px;display:flex;align-items:center;justify-content:center;text-align:center}.start-button:hover{background:#f59e0b0d;transform:translateY(-4px);box-shadow:0 8px 25px #f59e0b33;border-color:#fbbf24}.start-button:active{transform:translateY(-2px);box-shadow:0 4px 15px #f59e0b33}.floating-elements{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:-1;overflow:visible}.floating-star{position:absolute;background:linear-gradient(45deg,#fbbf24,#f59e0b);border-radius:50%;box-shadow:0 0 15px #fbbf2499;z-index:-1}.star1{top:20%;left:15%;width:6px;height:6px;animation:twinkle 3s ease-in-out infinite}.star2{top:50%;left:75%;width:8px;height:8px;animation:twinkle 2.5s ease-in-out infinite .5s}.star3{top:75%;left:30%;width:7px;height:7px;animation:twinkle 4s ease-in-out infinite 1s}.star4{top:10%;left:80%;width:5px;height:5px;animation:twinkle 3.5s ease-in-out infinite 1.5s}.star5{top:85%;left:65%;width:6px;height:6px;animation:twinkle 2.8s ease-in-out infinite 2s}.star6{top:30%;left:40%;width:7px;height:7px;animation:twinkle 3.2s ease-in-out infinite .8s}@keyframes twinkle{0%,to{opacity:.4;transform:scale(1)}50%{opacity:1;transform:scale(1.2)}}.floating-cloud{position:absolute;background:linear-gradient(135deg,#fffc,#f8fafc99);border-radius:50px;box-shadow:0 4px 15px #ffffff80;filter:blur(.5px);z-index:-1}.cloud1{top:20%;left:15%;width:120px;height:50px;animation:cloudFloat 20s infinite linear}.cloud2{bottom:25%;right:20%;width:100px;height:40px;animation:cloudFloat 25s infinite linear reverse}.cloud3{top:60%;right:10%;width:140px;height:60px;animation:cloudFloat 30s infinite linear}.cloud4{bottom:60%;left:25%;width:110px;height:45px;animation:cloudFloat 22s infinite linear reverse}.cloud5{top:10%;right:30%;width:90px;height:35px;animation:cloudFloat 28s infinite linear}@keyframes cloudFloat{0%,to{transform:translate(0) translateY(0)}25%{transform:translate(20px) translateY(-10px)}50%{transform:translate(0) translateY(-5px)}75%{transform:translate(-15px) translateY(5px)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}#story-pdf-container{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;z-index:1000;display:none;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}#close-pdf-preview{position:absolute;top:20px;right:20px;padding:12px 20px;background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;border:none;border-radius:25px;cursor:pointer;font-weight:600;transition:all .3s ease;box-shadow:0 4px 15px #ef44444d}#close-pdf-preview:hover{background:linear-gradient(135deg,#dc2626,#b91c1c);transform:translateY(-2px);box-shadow:0 6px 20px #ef444466}.highlight{animation:buttonPulse 1s ease-in-out infinite}@keyframes buttonPulse{0%,to{box-shadow:0 0 #f59e0bb3}50%{box-shadow:0 0 0 10px #f59e0b00}}@media (max-width: 768px){body{margin:0!important;padding:0!important}.container,.app-content,.story-viewer-container,.story-viewer-container.story-viewer-container,div.story-viewer{margin:0!important;padding:0!important;width:100%!important;max-width:100%!important;border-radius:0!important;box-shadow:none!important;border:none!important;background:none!important}#start-container h2{font-size:2.2em}#start-options{grid-template-columns:1fr}#create-container{width:100%!important;max-width:100%!important;margin:0!important;border-radius:0!important;padding:0!important;box-shadow:none!important;border:none!important}#image-container{width:100%!important;max-width:100%!important;margin:0 0 20px!important;border-radius:0!important;padding:0!important;box-shadow:none!important}#story-image{width:100%!important;max-width:100%!important;border-radius:12px!important;display:block!important}#story-text{width:100%!important;max-width:100%!important;margin:0 0 20px!important;padding:20px!important;font-size:1.1em;border-radius:0!important;box-shadow:none!important;border:none!important;background:transparent!important}#story-text.age-font-large{font-size:1.4em}#choices-container{width:100%!important;max-width:100%!important;margin:0 0 20px!important;padding:20px!important;border-radius:0!important;box-shadow:none!important;border:none!important;background:transparent!important}#input-container{width:100%!important;max-width:100%!important;margin:0!important;padding:20px!important}.story-header,.story-header h1,h1.centered-orange-title{padding-top:20px!important}}@media (max-width: 480px){#start-container h2{font-size:1.9em}.choice-button{padding:15px 20px;font-size:1em}}.no-break{white-space:nowrap;word-break:keep-all;overflow-wrap:normal}#download-message{position:fixed;bottom:30px;right:30px;background:linear-gradient(135deg,#10b981,#059669);color:#fff;padding:15px 25px;border-radius:25px;box-shadow:0 4px 15px #10b9814d;z-index:1000;opacity:0;transform:translateY(100%);transition:all .4s ease;font-weight:600}#download-message.show{opacity:1;transform:translateY(0)}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid rgba(245,158,11,.5);outline-offset:2px}@media print{body{background:#fff}.floating-elements{display:none}}.phase-selector-wrapper{margin:20px 0;display:flex;flex-direction:column;align-items:center}.phase-selector-dropdown{width:100%;max-width:550px;padding:12px 16px;border:2px solid #e5e7eb;border-radius:8px;font-size:16px;font-weight:700;background-color:#fff;cursor:pointer;transition:all .3s ease;text-align-last:center;margin-bottom:25px;-webkit-appearance:none;-moz-appearance:none;appearance:none}.phase-selector-dropdown:focus{outline:none!important;border-color:#e5e7eb!important;box-shadow:none!important}.phase-selector-dropdown:hover{border-color:#9ca3af}.phase-selector-dropdown option{padding:8px;font-weight:400;text-align:left}.pattern-selector-wrapper{margin:20px 0;display:flex;flex-direction:column;align-items:center}.pattern-selector-dropdown{width:100%;max-width:550px;padding:12px 16px;border:2px solid #e5e7eb;border-radius:8px;font-size:16px;font-weight:700;background-color:#fff;cursor:pointer;transition:all .3s ease;text-align-last:center;margin-bottom:20px;-webkit-appearance:none;-moz-appearance:none;appearance:none}.pattern-selector-dropdown:focus{outline:none!important;border-color:#e5e7eb!important;box-shadow:none!important}.pattern-selector-dropdown:hover{border-color:#9ca3af}.pattern-selector-dropdown option,.pattern-selector-dropdown optgroup{padding:8px;font-weight:400;text-align:left}.content-section{margin:20px 0;padding:15px;background-color:#f9fafb;border-radius:8px;border:1px solid #e5e7eb}.content-section h4{margin:0 0 15px;color:#374151;font-size:1.2em;font-weight:600}.content-section p{margin:8px 0;color:#6b7280;line-height:1.6}#tricky-words-section{margin:20px 0;padding:15px;background-color:#fef3c7;border-radius:8px;border:1px solid #f59e0b}#tricky-words-section h4{margin:0 0 15px;color:#92400e;font-size:1.2em;font-weight:600;text-align:center}.tricky-words-explanation{margin:15px 0;padding:12px;background-color:#fef9c3;border-radius:6px;color:#78350f;font-size:.95em;line-height:1.5}.tricky-words-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:15px 0}.tricky-word-item{background-color:#fbbf24;color:#92400e;padding:8px 12px;border-radius:6px;text-align:center;font-weight:600;font-size:.9em;transition:all .2s ease;cursor:pointer}.tricky-word-item:hover{background-color:#f59e0b;color:#78350f;transform:translateY(-2px);box-shadow:0 4px 8px #f59e0b4d}.user-header{position:fixed;top:0;left:0;right:0;background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(245,158,11,.2);padding:12px 20px;display:flex;justify-content:space-between;align-items:center;z-index:100;box-shadow:0 2px 10px #0000001a;transition:transform .3s ease-in-out}.user-header.hidden{transform:translateY(-100%)}.user-info{display:flex;align-items:center;gap:20px}.header-actions{display:flex;align-items:center;gap:12px}.nav-link{text-decoration:none;color:#6b7280;font-weight:600;font-size:.95rem;padding:8px 10px;border-radius:8px;transition:color .2s ease,background-color .2s ease,opacity .3s ease,visibility .3s ease}.nav-link:hover{color:#f59e0b;background-color:#f59e0b1f}.nav-link.active{color:#f59e0b;font-weight:700}.nav-dropdown{position:relative;display:inline-block;transition:opacity .3s ease,visibility .3s ease}.dropdown-toggle{cursor:default;position:relative;pointer-events:none}.dropdown-menu{position:absolute;top:100%;left:0;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 4px 12px #0000001a;min-width:140px;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .2s ease,transform .2s ease,visibility .2s ease;z-index:1000}.nav-dropdown:hover .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}.dropdown-link{display:block;padding:10px 16px;color:#374151;text-decoration:none;pointer-events:auto;font-weight:500;font-size:.9rem;border-radius:6px;margin:4px;transition:background-color .2s ease,color .2s ease}.dropdown-link:hover{background-color:#f3f4f6;color:#f59e0b}.dropdown-link.active{color:#f59e0b;font-weight:600}.page-transition-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#f8fafc,#e2e8f0);z-index:9999;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;display:flex;align-items:center;justify-content:center}.page-transition-overlay.active{opacity:1;visibility:visible}.page-transition-spinner{width:60px;height:60px;border:6px solid #f3f4f6;border-top:6px solid #f59e0b;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto}.user-header{opacity:1;transform:translateY(0);transition:opacity .2s ease,transform .2s ease}.user-header.loading{opacity:.7}.header-actions{min-width:320px;justify-content:flex-end}.nav-dropdown{min-width:70px}.nav-link{min-width:60px;text-align:center;white-space:nowrap}#accounts-btn{min-width:90px}#create-btn,#stories-btn{min-width:60px}.token-display{min-width:80px;text-align:center}.token-count{min-width:20px;display:inline-block;text-align:center}.logout-btn{background:none;border:1px solid #e5e7eb;color:#666;padding:8px 16px;border-radius:20px;font-size:.9rem;cursor:pointer;transition:all .2s ease}.logout-btn:hover{background:#f3f4f6;border-color:#d1d5db}@media (max-width: 768px){.user-header{flex-direction:column;gap:10px;padding:px;align-items:center}.user-info{flex-direction:column;gap:10px;text-align:center;align-items:center;width:100%}.user-header{justify-content:center;padding:0 15px}.user-header .nav-logo-link{display:none}.user-header .header-actions{display:flex;justify-content:space-between;width:100%;max-width:400px;gap:20px}.user-header .header-actions>*{font-size:1rem;padding:12px 16px;font-weight:600;flex:1;text-align:center}.header-actions .nav-link:nth-child(3){font-size:0}.header-actions .nav-link:nth-child(3):after{content:"Account";font-size:1rem}}.stories-grid{padding:20px}.story-item{padding:20px;border:1px solid var(--gray-200);border-radius:12px;margin-bottom:16px;transition:all var(--transition-normal);background:var(--white)}.story-item:last-child{margin-bottom:0}.story-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--primary-color)}.story-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;gap:15px}.story-title{font-size:1.2rem;font-weight:700;color:var(--gray-800);margin:0;flex:1;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.story-actions{display:flex;gap:8px;flex-shrink:0}.story-action-btn{padding:8px 14px;border:1px solid var(--gray-300);background:var(--white);border-radius:var(--radius-md);font-size:.85rem;cursor:pointer;transition:all var(--transition-fast);font-weight:500}.story-meta{display:flex;gap:15px;margin-bottom:12px;flex-wrap:wrap}.story-date,.story-age,.story-mode{font-size:.85rem;color:var(--gray-500);padding:4px 8px;background:var(--gray-100);border-radius:var(--radius-sm)}.story-preview{color:var(--gray-600);font-size:.95rem;line-height:1.5;font-style:italic}.empty-state,.error-state,.loading-state{text-align:center;padding:40px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:200px}.empty-icon,.error-icon{font-size:3rem;margin-bottom:15px;opacity:.7}.empty-state p,.error-state p,.loading-state p{font-size:1.1rem;color:var(--gray-600);margin-bottom:20px}.route-loading-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;padding:40px 20px}.route-loading-screen .loading-spinner{margin-bottom:20px}.token-restricted{opacity:.5!important;cursor:pointer!important}.token-restricted:hover{opacity:.5!important}.token-upgrade-modal{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:2000;animation:fadeIn .2s ease-in-out}.quick-actions{margin-bottom:40px}.actions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}.action-card{background:linear-gradient(135deg,#fff,#f8f9fa);border-radius:16px;padding:24px;text-decoration:none;color:inherit;transition:all var(--transition-normal);border:1px solid var(--gray-200);text-align:center}.action-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--primary-color)}.action-icon{font-size:2.5rem;margin-bottom:16px}.action-card h4{font-size:1.25rem;font-weight:700;color:var(--gray-800);margin-bottom:8px}.action-card p{color:var(--gray-600);font-size:.9rem;margin:0}.story-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:40px;width:100%;animation:fadeInUp .6s ease-out;animation-delay:.4s;opacity:0;animation-fill-mode:forwards}.stat-card{background:linear-gradient(135deg,#fff,#f8f9fa);border-radius:16px;padding:24px;text-align:center;box-shadow:var(--shadow-md);border:1px solid rgba(75,61,144,.1);transition:all var(--transition-normal);animation:fadeInScale .5s ease-out;animation-fill-mode:forwards;opacity:0}.stat-card:nth-child(1){animation-delay:.5s}.stat-card:nth-child(2){animation-delay:.6s}.stat-card:nth-child(3){animation-delay:.7s}.stat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:#4b3d9033}.stat-card .stat-label{font-weight:700;font-size:1.1rem;color:var(--gray-700);margin-bottom:8px;font-family:Inter,sans-serif}.stat-card .stat-value{font-size:3rem;font-weight:800;color:#9858f7;font-family:Inter,sans-serif;line-height:1}.story-controls{background:linear-gradient(135deg,#fff,#f8fafc);border-radius:24px;padding:30px;margin-bottom:30px;box-shadow:var(--shadow-md);border:1px solid rgba(99,102,241,.15);animation:fadeInUp .6s ease-out;animation-delay:.6s;opacity:0;animation-fill-mode:forwards}.view-toggle{display:flex;gap:8px}.toggle-switch{position:relative;display:inline-block;width:90px;height:36px;cursor:pointer}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;inset:0;background:var(--gray-100);border-radius:8px;transition:all .3s ease;display:flex;align-items:center;justify-content:space-between;padding:2px;border:1px solid var(--gray-300)}.toggle-option{flex:1;text-align:center;font-size:.75rem;font-weight:500;color:var(--gray-600);z-index:2;position:relative;transition:color .3s ease;padding:6px 4px}.toggle-slider:before{content:"";position:absolute;height:30px;width:42px;left:2px;top:2px;background:#9858f7;border-radius:6px;transition:.3s ease;z-index:1}.toggle-switch input:checked+.toggle-slider:before{transform:translate(42px)}.toggle-switch input:checked+.toggle-slider .toggle-option:first-child{color:var(--gray-600)}.toggle-switch input:checked+.toggle-slider .toggle-option:last-child{color:#fff}.toggle-switch input:not(:checked)+.toggle-slider .toggle-option:first-child{color:#fff}.toggle-switch input:not(:checked)+.toggle-slider .toggle-option:last-child{color:var(--gray-600)}.modal-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:1000;align-items:center;justify-content:center}.modal-content{background:#fff;border-radius:12px;padding:24px;position:relative;max-width:90vw;max-height:90vh;overflow-y:auto}.modal-close{position:absolute;top:12px;right:16px;background:none;border:none;font-size:24px;cursor:pointer;color:var(--gray-600);z-index:10}.modal-close:hover{color:var(--gray-800)}.stories-main{background:linear-gradient(135deg,#fff,#f8fafc);border-radius:16px;padding:24px;box-shadow:var(--shadow-md);border:1px solid rgba(99,102,241,.15);margin-bottom:60px;animation:fadeInUp .6s ease-out;animation-delay:.8s;opacity:0;animation-fill-mode:forwards}.stories-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}.story-card{background:#fff;border-radius:14px;box-shadow:var(--shadow-md);border:1px solid var(--gray-200);transition:all var(--transition-normal);position:relative;min-height:360px;height:auto;display:flex;flex-direction:column;overflow:hidden}.story-card-image{position:relative;overflow:hidden;flex:1;aspect-ratio:16 / 9}.story-content-wrapper{position:relative;flex:1;height:70px}.story-content-front,.story-content-back{display:flex;flex-direction:column;transition:opacity .3s ease}.story-content-front{opacity:1}.story-content-back{opacity:0;position:absolute;top:0;left:0;right:0;padding:8px 16px;height:auto;max-height:120px;overflow:hidden;pointer-events:none}.story-content-wrapper.flipped .story-content-front{opacity:0;pointer-events:none}.story-content-wrapper.flipped .story-content-back{opacity:1;pointer-events:auto}.story-info-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;border-bottom:1px solid var(--gray-200);padding-bottom:4px}.story-info-header h4{font-size:1rem;font-weight:600;color:var(--gray-800);margin:0}.info-close{background:none;border:none;font-size:1.2rem;cursor:pointer;padding:4px;color:var(--gray-500);transition:all var(--transition-fast);border-radius:50%}.info-close:hover{background:var(--gray-100);color:var(--gray-700);transform:scale(1.1)}.story-info-line{display:flex;flex-direction:row;gap:6px;padding:8px;flex:1}.info-detail{background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius-sm);padding:6px 10px;font-size:.85rem;color:var(--gray-700);text-align:center}.info-item{display:flex;flex-direction:column;gap:2px;padding:6px 8px;background:var(--gray-50);border-radius:var(--radius-sm);border:1px solid var(--gray-200)}.info-label{color:var(--gray-600);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.info-value{color:var(--gray-800);font-size:.85rem;font-weight:500}.story-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:#f59e0b40}.story-card.selected{border-color:var(--primary-color);box-shadow:0 0 0 3px #f59e0b1a}.story-card-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px 0}.story-checkbox{width:18px;height:18px;cursor:pointer}.favorite-btn{background:none;border:none;font-size:1.5rem;cursor:pointer;padding:4px;transition:all var(--transition-fast);border-radius:50%}.favorite-btn:hover{background:#f59e0b1a}.favorite-btn.favorited{color:#fbbf24}.story-content-front{padding:12px 16px 0;text-align:left}.story-spacer{flex:1;min-height:60px}.story-content-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}.story-title{font-size:1.1rem;font-weight:700;color:var(--gray-800);margin:0;line-height:1.3;text-align:left;flex:1}.story-meta-line{display:flex;align-items:center;justify-content:center;gap:48px;font-size:.8rem;color:var(--gray-600);margin-bottom:16px;margin-top:12px;flex-wrap:wrap;background:#fff;border-radius:var(--radius-md);padding:6px 10px;border:1px solid var(--gray-200);box-shadow:var(--shadow-sm)}.story-icons-group{display:flex;align-items:center;gap:6px}.story-date{color:var(--gray-900);font-weight:500;background:transparent}.story-divider{color:var(--gray-400);font-weight:300}.story-title .favorite-toggle{background:none;border:none;margin-left:8px;cursor:pointer;font-size:1.1rem}.story-title .favorite-toggle:hover{transform:scale(1.1)}.story-card-image .favorite-toggle{position:absolute;top:8px;right:8px;background:radial-gradient(circle,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,transparent 70%);border:none;padding:4px;cursor:pointer;font-size:1.1rem;z-index:2;transition:all var(--transition-fast);text-shadow:0 1px 3px rgba(0,0,0,.3);filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}.story-card-image .favorite-toggle:hover{transform:scale(1.1);filter:drop-shadow(0 3px 6px rgba(0,0,0,.3))}.info-toggle{background:transparent;border:2px solid #374151;border-radius:50%;cursor:pointer;transition:all var(--transition-fast);width:20px;height:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:8px;color:#374151;font-size:14px;font-weight:900;font-style:normal}.info-toggle:hover{border-color:#111827;transform:scale(1.1);color:#111827}.story-meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}.story-meta span{font-size:.8rem;color:var(--gray-500);background:var(--gray-100);padding:4px 8px;border-radius:var(--radius-sm);display:flex;align-items:center;gap:4px}.story-completed{background:#10b9811a!important;color:var(--success-color)!important}.story-preview{color:var(--gray-600);font-size:.9rem;line-height:1.4;margin-bottom:10px}.story-card-image img{display:block;width:100%;height:100%;object-fit:cover}.story-card-image:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0000 60%,#0000000f);pointer-events:none}.no-image{width:100%;height:160px;display:flex;align-items:center;justify-content:center;background:#f3f4f6;color:#6b7280;font-weight:600;border-radius:0}.no-image.small{width:120px;height:80px;border-radius:8px}.stories-list{display:flex;flex-direction:column;gap:12px}.story-row{display:grid;grid-template-columns:120px 1fr auto auto;gap:16px;align-items:center;background:#fff;border:1px solid var(--gray-200);border-radius:10px;padding:10px;box-shadow:var(--shadow-sm);transition:transform var(--transition-fast),box-shadow var(--transition-fast)}.story-row-image{position:relative;width:120px;height:80px}.story-row-image img{width:100%;height:100%;object-fit:cover;border-radius:8px}.story-row-favorite{position:absolute;top:4px;right:4px;background:#ffffffe6;border:none;border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:12px;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.story-row-content{text-align:left;align-self:start}.story-row-title{font-weight:700;margin-bottom:4px;color:var(--gray-800)}.story-row-meta{color:var(--gray-500);font-size:.85rem}.story-row-icons{display:flex;gap:6px;align-items:center;justify-content:center}.story-row-actions{display:flex;gap:8px}.story-row-status.published{color:#8b5cf6}.story-row-status.unpublished{color:#f97316}.story-row:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.story-actions{display:flex;justify-content:center;padding:8px 16px 16px;margin-top:auto;position:relative;z-index:1}.story-action-btn{padding:12px 24px;border:1px solid var(--primary-color);background:var(--white);border-radius:var(--radius-lg);font-size:.9rem;cursor:pointer;transition:all var(--transition-fast);font-weight:600;color:var(--primary-color);min-width:140px}.story-action-btn:hover{background:var(--primary-color);color:#fff;transform:translateY(-1px);box-shadow:0 4px 8px #f59e0b4d}.story-action-btn.continue-btn{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}.story-action-btn.continue-btn:hover{background:var(--primary-dark);border-color:var(--primary-dark)}.story-action-btn.view-btn{background:#fff;color:#8b5cf6;border-color:#8b5cf6}.story-action-btn.view-btn:hover{background:#8b5cf6;color:#fff;border-color:#8b5cf6;box-shadow:0 4px 8px #8b5cf64d}.story-action-btn.finish-btn{background:#fff;color:#f97316;border-color:#f97316}.story-action-btn.finish-btn:hover{background:#f97316;color:#fff;border-color:#f97316;box-shadow:0 4px 8px #f973164d}.story-action-btn.more-btn{flex:0 0 auto;width:40px;padding:10px 8px;font-size:1.2rem;text-align:center}.bulk-actions{position:fixed;bottom:20px;left:50%;transform:translate(-50%);background:#fff;border-radius:16px;box-shadow:var(--shadow-xl);border:1px solid var(--gray-200);z-index:100;max-width:calc(100% - 40px)}.bulk-actions-content{display:flex;align-items:center;gap:20px;padding:16px 24px;flex-wrap:wrap}.bulk-buttons{display:flex;gap:12px;flex-wrap:wrap}.bulk-btn{padding:8px 16px;border:1px solid var(--gray-300);background:#fff;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);font-size:.9rem;display:flex;align-items:center;gap:6px}.bulk-btn:hover{border-color:var(--primary-color);background:#f59e0b0d}.bulk-btn.delete-btn{color:var(--error-color);border-color:#ef44444d}.bulk-btn.delete-btn:hover{background:#ef44440d;border-color:var(--error-color)}.clear-selection-btn{background:var(--gray-100);border:1px solid var(--gray-300);padding:8px 12px;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);font-size:.85rem}.clear-selection-btn:hover{background:var(--gray-200)}.story-modal-content{max-width:500px;width:100%}.story-modal-meta{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:20px;font-size:.9rem;color:var(--gray-500)}.story-modal-preview{margin-bottom:24px}.story-modal-preview p{margin-bottom:12px}.story-modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}.modal-action-btn{padding:12px 16px;border:1px solid var(--gray-300);background:#fff;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);font-weight:500}.modal-action-btn:hover{border-color:var(--primary-color);background:#f59e0b0d}.modal-action-btn.continue-btn,.modal-action-btn.view-btn{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}.modal-action-btn.continue-btn:hover,.modal-action-btn.view-btn:hover{background:var(--primary-dark);border-color:var(--primary-dark)}.modal-action-btn.delete-btn{color:var(--error-color);border-color:#ef44444d}.modal-action-btn.delete-btn:hover{background:#ef44440d;border-color:var(--error-color)}.create-new-story-btn{background:var(--primary-color);color:#fff;border:none;padding:8px 16px;border-radius:var(--radius-md);font-size:.9rem;font-weight:600;cursor:pointer;transition:all var(--transition-fast);text-decoration:none}.create-new-story-btn:hover{background:var(--primary-dark);transform:translateY(-1px)}.stories-btn{background:var(--gray-100);color:var(--gray-700);border:1px solid var(--gray-300)}.stories-btn:hover{background:var(--gray-200);color:var(--gray-800)}@media (max-width: 1024px){.stories-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}}@media (max-width: 768px){body:before,body:after{display:none!important;content:none!important}#age-selector-container{background:none!important;border:none!important;box-shadow:none!important;border-radius:0!important;padding:0!important;margin-top:50px!important;margin-bottom:20px!important}.toggle-container{margin-top:50px!important}#start-options{display:none!important}#custom-start-button{width:calc(100% + 50px)!important;margin:0 -25px!important;box-sizing:border-box!important}#mobile-dotted-line,#desktop-dotted-line{display:none!important}#custom-start-input{height:120px!important;width:calc(100% + 50px)!important;margin:0 -25px!important;box-sizing:border-box!important;resize:none!important;white-space:normal!important;word-wrap:break-word!important;overflow-wrap:break-word!important;font-size:1.2em!important;line-height:1.4!important;padding:15px!important}#custom-start-input::placeholder{content:"Describe your adventure"!important}#age-selector-container .toggle-container:after{content:"";display:block;border-top:2px dotted #f59e0b;margin:20px 0}#start-container>div[style*=border-bottom]{display:none!important}#start-container{margin-top:60px!important}.no-landing-bg #start-container{margin-top:25px!important}.no-landing-bg #age-slider-container label{padding-top:30px!important}.floating-elements{display:none!important}.story-stats{display:none}.story-controls{padding:20px 0;background:transparent!important;border-radius:0!important;box-shadow:none!important;border:none!important;margin-bottom:20px}.filter-controls{display:none}.stories-grid,.stories-main{grid-template-columns:1fr!important;gap:16px;background:transparent!important;border-radius:0!important;box-shadow:none!important;border:none!important;padding:0!important}.stories-container.list-view,.stories-container{display:grid!important;grid-template-columns:1fr!important}#start-container,#story-text{background:transparent!important;border-radius:0!important;box-shadow:none!important;border:none!important;padding:20px!important}#choices-container{padding:0 20px!important}#input-container{padding:0 20px 20px!important}.story-viewer-container,.purchase-container,.community-container{margin:0!important;padding:20px!important;width:100%!important;max-width:none!important;border-radius:0!important;box-shadow:none!important;border:none!important;background:transparent!important}.card,.content-card{border-radius:0!important;box-shadow:none!important;border:none!important;margin:0!important}.modal-content{border-radius:32px!important;margin:20px!important}#phonics-info .modal-content{font-size:calc(1rem - 3pt)!important}.text-container,.content-wrapper,.main-content{background:transparent!important;border-radius:0!important;box-shadow:none!important;border:none!important;padding:20px!important}.inner-container,.wrapper,.container{background:transparent!important;border-radius:0!important;box-shadow:none!important;border:none!important;margin:0!important;padding:0!important}.bulk-actions-content{flex-direction:column;gap:16px;text-align:center}.bulk-buttons{justify-content:center}.story-modal-actions{grid-template-columns:1fr}}#app-content{width:100%;max-width:1100px;display:block;padding:20px;box-sizing:border-box;margin:0 auto;min-height:400px}#app-content:empty{opacity:0;pointer-events:none}.story-header{text-align:center;margin-bottom:30px}.story-header h1{color:#f59e0b;font-size:2.5em;font-weight:800;margin-bottom:10px;background:linear-gradient(135deg,#f59e0b,#fbbf24);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.story-meta{display:flex;justify-content:center;gap:20px;font-size:.9rem;color:#666;margin-bottom:10px}.phonics-controls{margin-bottom:20px;padding:15px;background:#f9f9f9cc;border-radius:12px;text-align:center}.phonics-controls label{font-weight:600;margin-right:10px;color:#374151}.phonics-controls select{padding:8px 12px;border:2px solid #e5e7eb;border-radius:8px;background:#fff;color:#374151}.story-content-wrapper{margin-bottom:30px}.story-image-container{position:relative;margin-bottom:25px;text-align:center}.story-image-container img{max-width:100%;height:auto;border-radius:16px;box-shadow:0 8px 25px #0000001a}.variant-controls{margin-top:10px;display:flex;justify-content:center;align-items:center;gap:15px}.variant-btn{background:linear-gradient(135deg,#f59e0b,#fbbf24);color:#fff;border:none;padding:8px 12px;border-radius:6px;cursor:pointer;font-weight:600}.variant-btn:hover{background:linear-gradient(135deg,#d97706,#f59e0b)}.image-edit-inline{margin-top:15px;padding:15px;background:#f8fafccc;border-radius:12px;border:2px solid #e5e7eb}.image-edit-inline textarea{width:100%;padding:12px;border:2px solid #e5e7eb;border-radius:8px;font-family:inherit;resize:vertical;min-height:60px}.edit-buttons{margin-top:10px;display:flex;gap:10px;justify-content:flex-start}.story-text-container{margin-bottom:20px}.story-text{font-size:1.2rem;line-height:1.8;color:#374151;padding:20px;background:#fffc;border-radius:16px;border:1px solid rgba(245,158,11,.1)}.story-text.editing{border:2px solid #f59e0b;outline:none}.text-edit-controls{margin-top:15px;display:flex;gap:10px;justify-content:flex-end}.edit-btn{background:none;border:1px solid #e5e7eb;color:#666;padding:8px 12px;border-radius:6px;cursor:pointer;font-size:.9rem}.edit-btn:hover{background:#f9f9f9;border-color:#d1d5db}.text-variant-controls{display:flex;gap:8px;justify-content:flex-end;margin-top:10px;align-items:center}.icon-btn{padding:6px 10px;border:1px solid #d1d5db;background:#f9f9f9;border-radius:4px;cursor:pointer;font-size:14px}.icon-btn:hover{background:#f3f4f6}.story-choices{margin:20px 0;padding:20px;background:#f8fafccc;border-radius:16px;border:1px solid rgba(245,158,11,.1)}.story-choices h3{color:#f59e0b;font-size:1.3rem;margin-bottom:15px}.choices-list{display:flex;flex-direction:column;gap:10px}.choice-item{padding:12px 16px;background:#fff;border-radius:8px;border:1px solid #e5e7eb;color:#374151}.phonics-explanations{margin:20px 0;padding:20px;background:#4caf500d;border-radius:16px;border:1px solid rgba(76,175,80,.2)}.phonics-explanation h3{color:#4caf50;margin-bottom:10px}.child-friendly{font-style:italic;color:#666;margin-top:10px}.story-navigation{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;padding-top:25px;border-top:1px solid rgba(245,158,11,.2)}.action-buttons{display:flex;gap:15px}.loading-screen,.error-screen{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:400px;text-align:center;position:relative;width:100%}.spinner{width:60px!important;height:60px!important;border:6px solid #f3f4f6!important;border-top:6px solid #f59e0b!important;border-radius:50%!important;animation:spin 1s linear infinite!important;margin:0 auto!important}.loading-spinner{width:60px;height:60px;border:6px solid #f3f4f6;border-top:6px solid #f59e0b;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.error-icon{font-size:3rem;margin-bottom:20px}@media (max-width: 768px){.story-viewer-container{padding:10px;margin-top:60px}.story-viewer{padding:20px}.story-header h1{font-size:2rem;padding-top:20px!important}.story-meta{flex-direction:column;gap:5px}.story-navigation{flex-direction:column;align-items:stretch}.nav-buttons,.action-buttons{justify-content:center;width:100%}.text-edit-controls{justify-content:center}}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;display:none;justify-content:center;align-items:center;z-index:1000}.modal-overlay.active{display:flex}.modal-content{background:#fff;border-radius:20px;padding:40px;max-width:450px;width:90%;max-height:90vh;overflow-y:auto;position:relative;animation:modalSlideIn .3s ease}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){body{background:linear-gradient(135deg,#f8fafc,#e2e8f0)!important;background-image:none!important}}