.sidebar-backdrop{position:fixed;inset:0;background:#00000080;z-index:90;opacity:0;pointer-events:none;transition:opacity .3s ease}.sidebar-backdrop.open{opacity:1;pointer-events:all}.sidebar{position:fixed;top:0;left:0;width:280px;height:100%;background:#0f1423fa;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-right:1px solid var(--border);z-index:100;transform:translate(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column}.sidebar.open{transform:translate(0)}.sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}.sidebar-logo{height:24px;object-fit:contain}.sidebar-close{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:10px;border:none;background:#ffffff0d;color:var(--text-secondary);cursor:pointer;transition:background .15s}.sidebar-close:hover{background:#ffffff1a}.sidebar-nav{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:2px}.sidebar-item{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:12px;border:none;background:transparent;color:var(--text-secondary);font-size:14px;font-weight:500;cursor:pointer;transition:all .15s;width:100%;text-align:left}.sidebar-item:hover{background:#ffffff0d;color:var(--text-primary)}.sidebar-item.active{background:#818cf826;color:var(--accent)}.sidebar-item.active .sidebar-item-icon{color:var(--accent)}.sidebar-item.disabled{opacity:.4;cursor:not-allowed}.sidebar-item-icon{display:flex;align-items:center;color:var(--text-secondary);transition:color .15s}.sidebar-item-label{flex:1}.sidebar-item-badge{font-size:10px;padding:2px 8px;border-radius:6px;background:#ffffff0f;color:var(--text-secondary)}.sidebar-footer{padding:16px;border-top:1px solid var(--border)}.sidebar-user{display:flex;align-items:center;justify-content:space-between}.sidebar-user-info{display:flex;align-items:center;gap:10px}.sidebar-user-avatar{font-size:22px}.sidebar-user-name{font-size:13px;font-weight:600;color:var(--text-primary)}.sidebar-user-tier{font-size:11px;color:var(--text-secondary)}.sidebar-logout{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:10px;border:none;background:#f871711a;color:#f87171;cursor:pointer;transition:background .15s}.sidebar-logout:hover{background:#f8717133}.sidebar-login-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:10px;border-radius:12px;border:1px solid rgba(129,140,248,.3);background:#818cf814;color:var(--accent);font-size:14px;font-weight:500;cursor:pointer;transition:all .15s}.sidebar-login-btn:hover{background:#818cf826}.home-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--header-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border);position:relative;z-index:10}.header-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:12px;border:none;background:#1e293b80;color:var(--text-primary);cursor:pointer;transition:background .15s,transform .15s}.header-btn:hover{background:#1e293bcc}.header-btn:active{transform:scale(.9)}.brand{display:flex;align-items:center;gap:8px}.brand-logo{height:28px;object-fit:contain}.user-btn{display:flex;align-items:center;gap:6px;padding:6px 14px;border-radius:20px;border:1px solid var(--border);background:#1e293b66;color:var(--text-primary);font-size:13px;font-weight:500;cursor:pointer;transition:all .2s}.user-btn:hover{background:#1e293bb3}.user-btn.premium{border-color:#fbbf244d;background:#fbbf2414}.avatar-emoji{font-size:16px}.user-btn-label{max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.auth-overlay{position:fixed;inset:0;background:#0009;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:200;display:flex;align-items:center;justify-content:center;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.auth-modal{background:#161c2df2;border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:32px 28px;width:340px;max-width:90vw;position:relative;box-shadow:0 20px 60px #0006}.auth-modal h2{text-align:center;font-size:20px;font-weight:700;margin-bottom:20px;color:var(--text-primary)}.auth-close{position:absolute;top:12px;right:16px;background:none;border:none;color:var(--text-secondary);font-size:20px;cursor:pointer}.auth-error{color:#f87171;font-size:12px;text-align:center;margin-bottom:8px;min-height:16px}.auth-input{width:100%;padding:12px 16px;margin-bottom:12px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:#ffffff0a;color:var(--text-primary);font-size:14px;outline:none;transition:border-color .2s}.auth-input:focus{border-color:var(--accent)}.auth-input::placeholder{color:var(--text-secondary)}.auth-submit{width:100%;padding:12px;border-radius:12px;border:none;background:var(--accent);color:#fff;font-size:15px;font-weight:600;cursor:pointer;transition:opacity .15s;margin-top:4px}.auth-submit:hover{opacity:.9}.auth-submit:disabled{opacity:.5;cursor:not-allowed}.auth-switch{text-align:center;margin-top:16px;font-size:13px;color:var(--text-secondary)}.auth-switch a{color:var(--accent);cursor:pointer;text-decoration:none;margin-left:4px}.home-page{overflow-y:auto;height:100%;padding-bottom:40px}.home-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;height:200px;color:var(--text-secondary);font-size:14px}.loading-spinner{width:24px;height:24px;border:2px solid rgba(255,255,255,.1);border-top-color:var(--accent);border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.hero-carousel{position:relative;margin:12px 0 8px}.hero-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 16px}.hero-slide{flex:0 0 85%;max-width:400px;scroll-snap-align:start;position:relative;border-radius:16px;overflow:hidden;cursor:pointer;aspect-ratio:16 / 9}.hero-slide img{width:100%;height:100%;object-fit:cover}.hero-slide-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.85) 0%,transparent 60%)}.hero-slide.locked{opacity:.6}.lock-badge{position:absolute;top:10px;left:10px;font-size:16px;z-index:2}.hero-slide-content{position:absolute;bottom:0;left:0;right:0;padding:16px}.hero-slide-badge{display:inline-block;font-size:11px;font-weight:600;color:var(--accent);background:#818cf826;padding:3px 8px;border-radius:6px;margin-bottom:6px}.hero-slide-title{font-size:16px;font-weight:700;color:#fff;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.hero-slide-meta{font-size:12px;color:#ffffff80;margin-top:4px}.hero-dots{display:flex;justify-content:center;gap:6px;margin-top:10px}.hero-dot{width:6px;height:6px;border-radius:50%;background:#ffffff26;cursor:pointer;transition:all .2s}.hero-dot.active{width:20px;border-radius:3px;background:var(--accent)}.cat-section{padding:12px 0}.cat-section-header{display:flex;align-items:center;justify-content:space-between;padding:4px 16px 8px}.cat-section-title{font-size:16px;font-weight:700;color:var(--text-primary);display:flex;align-items:center;gap:6px}.cat-level-badge{font-size:10px;font-weight:600;padding:2px 6px;border-radius:4px}.cat-section-more{font-size:12px;color:var(--text-secondary)}.card-row{display:flex;gap:12px;overflow-x:auto;padding:0 16px;scroll-snap-type:x proximity}.v-card{flex:0 0 140px;cursor:pointer;scroll-snap-align:start;transition:transform .15s}.v-card:hover{transform:scale(1.02)}.v-card.locked{opacity:.5}.v-card-thumb{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:16 / 10;background:var(--card-bg)}.v-card-thumb img{width:100%;height:100%;object-fit:cover}.v-card-thumb-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.3) 0%,transparent 50%)}.v-card-duration{position:absolute;bottom:6px;right:6px;font-size:10px;font-weight:600;color:#fff;background:#000000a6;padding:2px 6px;border-radius:4px}.card-lock-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0000004d}.card-lock-icon{font-size:22px}.v-card-title{font-size:12px;font-weight:600;color:var(--text-primary);margin-top:6px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.v-card-meta{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:10px;color:var(--text-secondary)}.v-card-level,.v-card-tier{padding:1px 5px;border-radius:4px;font-weight:600}.v-card-tier.free{background:#86efac26;color:#86efac}.v-card-tier.premium{background:#fbbf2426;color:#fbbf24}.cat-detail{height:100%;overflow-y:auto;background:var(--bg)}.cat-detail-header{display:flex;align-items:center;gap:12px;padding:16px;border-bottom:1px solid var(--border);font-size:16px;font-weight:700}.cat-detail-back{border:none;background:#ffffff0d;color:var(--text-primary);width:32px;height:32px;border-radius:10px;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center}.cat-detail-count{font-size:12px;font-weight:400;color:var(--text-secondary);margin-left:auto}.cat-detail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px;padding:16px}.cat-detail-grid .v-card{flex:unset}.home-footer{text-align:center;padding:24px;font-size:12px;color:var(--text-secondary);opacity:.5}:root{--bg: #0a0e1a;--surface: rgba(22, 28, 45, .7);--text-primary: #f1f5f9;--text-secondary: rgba(203, 213, 225, .55);--accent: #818cf8;--accent-glow: rgba(129, 140, 248, .25);--card-bg: rgba(30, 41, 59, .5);--header-bg: rgba(10, 14, 26, .85);--border: rgba(255, 255, 255, .06);--cat-wisdom: #a78bfa;--cat-wisdom-bg: rgba(167, 139, 250, .12);--cat-science: #67e8f9;--cat-science-bg: rgba(103, 232, 249, .12);--cat-ted: #fbbf24;--cat-ted-bg: rgba(251, 191, 36, .12);--cat-story: #86efac;--cat-story-bg: rgba(134, 239, 172, .12);--cat-lifestyle: #c4b5fd;--cat-lifestyle-bg: rgba(196, 181, 253, .12);--cat-peppa: #f472b6;--cat-peppa-bg: rgba(244, 114, 182, .12)}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%;overflow:hidden}body{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg);color:var(--text-primary);-webkit-font-smoothing:antialiased}body:after{content:"";position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");pointer-events:none;z-index:0}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:2px}.page-overlay{position:fixed;inset:0;background:var(--bg);z-index:9999;pointer-events:none;animation:overlayFadeOut .4s ease-out .05s forwards;opacity:1}.page-overlay.leaving{animation:overlayFadeIn .3s ease-in forwards;pointer-events:all}@keyframes overlayFadeOut{0%{opacity:1}to{opacity:0}}@keyframes overlayFadeIn{0%{opacity:0}to{opacity:1}}.level-a1{background:#86efac2e;color:#86efac}.level-a2{background:#67e8f92e;color:#67e8f9}.level-b1{background:#818cf82e;color:#a5b4fc}.level-b2{background:#c4b5fd2e;color:#c4b5fd}.level-c1{background:#fb923c2e;color:#fdba74}.level-c2{background:#f871712e;color:#fca5a5}.level-a1a2{background:#86efac2e;color:#86efac}.hide-scrollbar::-webkit-scrollbar{display:none}.hide-scrollbar{-ms-overflow-style:none;scrollbar-width:none}