:root{--bg-primary: #292d32;--bg-secondary: #292d32;--bg-card: #292d32;--bg-hover: #292d32;--text-primary: #e0e5ec;--text-secondary: #9baacf;--accent: #6366f1;--accent-hover: #818cf8;--success: #22c55e;--shadow-neu-flat: 8px 8px 16px #1d2023, -8px -8px 16px #353b41;--shadow-neu-pressed: inset 8px 8px 16px #1d2023, inset -8px -8px 16px #353b41;--shadow-neu-sm: 4px 4px 8px #1d2023, -4px -4px 8px #353b41;--shadow-neu-hover: 12px 12px 20px #1d2023, -12px -12px 20px #353b41;--border: transparent;--radius-lg: 20px;--radius-md: 12px;--gradient-1: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);--gradient-2: linear-gradient(135deg, #22c55e 0%, #10b981 100%)}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg-primary);color:var(--text-primary);line-height:1.6;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}.app-container{min-height:100vh;display:flex;flex-direction:column;background:var(--bg-primary)}.header{background:var(--bg-primary);padding:1.5rem 2rem;display:flex;align-items:center;gap:1rem;position:sticky;top:0;z-index:100;box-shadow:0 4px 20px #0000001a}.header-logo{font-size:1.5rem;font-weight:700;color:var(--text-primary);text-shadow:2px 2px 4px rgba(0,0,0,.3)}.header-nav{display:flex;gap:1.5rem;margin-left:auto}.nav-link{padding:.75rem 1.5rem;border-radius:var(--radius-md);font-size:.875rem;font-weight:600;color:var(--text-secondary);background:var(--bg-primary);box-shadow:var(--shadow-neu-flat);transition:all .3s ease}.nav-link:hover,.nav-link.active{color:var(--accent);box-shadow:var(--shadow-neu-pressed);transform:translateY(1px)}.main-content{flex:1;padding:2rem;max-width:1400px;margin:0 auto;width:100%}.hero{text-align:center;padding:4rem 0;margin-bottom:3rem}.hero-title{font-size:3.5rem;font-weight:800;margin-bottom:1rem;color:var(--text-primary);text-shadow:2px 2px 4px rgba(0,0,0,.3),-2px -2px 4px rgba(255,255,255,.05)}.hero-subtitle{font-size:1.25rem;color:var(--text-secondary);max-width:600px;margin:0 auto}.hero-stats{display:flex;justify-content:center;gap:3rem;margin-top:3rem}.stat-item{text-align:center;padding:1.5rem 2rem;border-radius:var(--radius-lg);background:var(--bg-primary);box-shadow:var(--shadow-neu-flat)}.stat-value{font-size:2.5rem;font-weight:700;color:var(--accent);text-shadow:1px 1px 2px rgba(0,0,0,.2)}.stat-label{font-size:.875rem;color:var(--text-secondary);margin-top:.5rem}.levels-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1.5rem;padding:1rem}.level-card{background:var(--bg-primary);border-radius:var(--radius-lg);padding:1.5rem;text-align:center;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden;box-shadow:var(--shadow-neu-flat);border:1px solid rgba(255,255,255,.02)}.level-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-neu-hover)}.level-card:active{box-shadow:var(--shadow-neu-pressed);transform:translateY(0)}.level-card-content{position:relative;z-index:1}.level-name{font-size:2rem;font-weight:700;margin-bottom:.25rem;color:var(--text-primary)}.level-count{font-size:.875rem;color:var(--text-secondary)}.page-header{display:flex;align-items:center;gap:1.5rem;margin-bottom:3rem;padding:1rem}.back-button{background:var(--bg-primary);border-radius:var(--radius-md);padding:.75rem 1.5rem;color:var(--text-primary);cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .2s;border:none;box-shadow:var(--shadow-neu-flat);font-weight:600}.back-button:hover{color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-neu-hover)}.back-button:active{box-shadow:var(--shadow-neu-pressed);transform:translateY(0)}.page-title{font-size:2.5rem;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.books-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:2rem;padding:1rem}.book-card{background:var(--bg-primary);border-radius:var(--radius-lg);padding:1.5rem;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:1.5rem;box-shadow:var(--shadow-neu-flat);border:1px solid rgba(255,255,255,.02)}.book-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-neu-hover)}.book-card:active{box-shadow:var(--shadow-neu-pressed);transform:translateY(0)}.book-number{font-size:1.5rem;font-weight:700;color:var(--accent);min-width:50px;text-shadow:1px 1px 2px rgba(0,0,0,.2)}.book-info{flex:1;min-width:0}.book-title{font-size:1.1rem;font-weight:600;color:var(--text-primary);margin-bottom:.5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.book-meta{font-size:.875rem;color:var(--text-secondary)}.book-icons{display:flex;gap:.5rem;color:var(--text-secondary);opacity:.7}.book-view-container{display:flex;justify-content:center;align-items:center;perspective:1500px;padding:2rem;background:var(--bg-primary);height:100%}.book-spread{display:flex;box-shadow:0 20px 50px #00000080;transition:transform .3s ease;position:relative}.pdf-page-left,.pdf-page-right,.pdf-page-single{background-color:#fdfbf7!important;position:relative;overflow:hidden}.pdf-page-left:after,.pdf-page-right:after,.pdf-page-single:after{content:"";position:absolute;top:0;bottom:0;pointer-events:none;z-index:10}.pdf-page-left{border-radius:4px 0 0 4px;box-shadow:-1px 1px #e0e0e0,-2px 2px #e0e0e0,-3px 3px #e0e0e0,-4px 4px #e0e0e0,-5px 5px 20px #0003;transform-origin:right center}.pdf-page-left:after{left:0;right:0;background:linear-gradient(90deg,#00000008,#ffffff1a 10%,#00000005 85%,#00000026)}.pdf-page-right{border-radius:0 4px 4px 0;box-shadow:1px 1px #e0e0e0,2px 2px #e0e0e0,3px 3px #e0e0e0,4px 4px #e0e0e0,5px 5px 20px #0003;transform-origin:left center}.pdf-page-right:after{left:0;right:0;background:linear-gradient(90deg,#00000026,#00000005 15%,#ffffff1a 90%,#00000008)}.pdf-page-single{border-radius:4px;box-shadow:1px 1px #e0e0e0,2px 2px #e0e0e0,3px 3px #e0e0e0,0 10px 30px #0000004d}.pdf-page-single:after{left:0;right:0;background:linear-gradient(90deg,#0000000d,#ffffff1a 10% 90%,#0000000d)}.book-spine-overlay{position:absolute;top:0;bottom:0;left:50%;width:40px;margin-left:-20px;background:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.1) 35%,rgba(0,0,0,.2) 50%,rgba(0,0,0,.1) 65%,transparent 100%);z-index:20;pointer-events:none}.reader-header{display:flex;align-items:center;gap:1rem;padding:.5rem 1rem;min-height:48px}.pdf-container{flex:1;background:var(--bg-primary);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;min-height:0;box-shadow:var(--shadow-neu-pressed);padding:1rem}.pdf-viewer{flex:1;overflow:hidden;display:flex;justify-content:center;align-items:center;padding:4px;border-radius:var(--radius-md)}.pdf-controls{display:flex;align-items:center;justify-content:center;gap:1.5rem;padding:1.5rem;background:var(--bg-primary);border-radius:var(--radius-lg);box-shadow:var(--shadow-neu-flat);margin-top:1rem}.pdf-control-btn{background:var(--bg-primary);border:none;border-radius:var(--radius-md);padding:.75rem 1.5rem;color:var(--text-primary);cursor:pointer;transition:all .2s;box-shadow:var(--shadow-neu-sm)}.pdf-control-btn:hover:not(:disabled){color:var(--accent);box-shadow:var(--shadow-neu-hover);transform:translateY(-2px)}.pdf-control-btn:active:not(:disabled){box-shadow:var(--shadow-neu-pressed);transform:translateY(0)}.pdf-control-btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}.audio-player{background:var(--bg-primary);border-radius:var(--radius-lg);padding:1.5rem 2rem;display:flex;align-items:center;gap:2rem;box-shadow:var(--shadow-neu-flat);margin-top:1rem}.play-button{width:56px;height:56px;border-radius:50%;background:var(--bg-primary);border:none;color:var(--accent);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.5rem;transition:all .3s;box-shadow:var(--shadow-neu-flat)}.play-button:hover{transform:scale(1.05);box-shadow:var(--shadow-neu-hover)}.play-button:active{box-shadow:var(--shadow-neu-pressed);transform:scale(.95)}.audio-progress{flex:1;display:flex;flex-direction:column;gap:.75rem}.progress-bar{width:100%;height:12px;background:var(--bg-primary);border-radius:6px;cursor:pointer;overflow:hidden;box-shadow:var(--shadow-neu-pressed)}.progress-fill{height:100%;background:var(--accent);border-radius:6px;transition:width .1s;box-shadow:2px 0 5px #0003}.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem;gap:1rem}.spinner{width:48px;height:48px;border:4px solid var(--bg-primary);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite;box-shadow:var(--shadow-neu-flat)}@keyframes spin{to{transform:rotate(360deg)}}.error-message{background:var(--bg-primary);border-radius:var(--radius-md);padding:1rem 1.5rem;color:#ef4444;text-align:center;box-shadow:var(--shadow-neu-pressed)}@media(max-width:768px){.header,.main-content{padding:1rem}.hero-title{font-size:2.5rem}.hero-stats{gap:1.5rem;flex-wrap:wrap}.stat-item{min-width:120px}.stat-value{font-size:1.75rem}.levels-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:1rem}.books-grid{grid-template-columns:1fr}.audio-player{flex-wrap:wrap;padding:1rem}.volume-control{display:none}}