.preloader{background-color:var(--bg);display:flex;height:100%;flex-direction:column;justify-content:center;align-items:center}.preloader-logo{width:70%;height:auto;margin-bottom:20px}.big-spinner{width:40px;height:40px;border:5px solid var(--white);border-top:5px solid var(--logo-bg);border-radius:50%;animation:spin 1s linear infinite}.load-screen{display:flex;align-items:center;justify-content:center;background:#000;position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999}.load-video{width:100%;height:100%;object-fit:cover}.load-overlay{display:flex;justify-content:center;position:absolute;bottom:50px;left:0;right:0}.load-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:calc(100% - 60px);padding:14px 24px;font-size:20px;font-weight:600;border:none;border-radius:var(--brs-lg);background:var(--secondary);color:#fff;cursor:pointer}.load-btn svg{fill:var(--white)}.load-btn:hover{opacity:.9}.levels-wrapper{display:flex;height:calc(100% - 90px)}.card.level-select{overflow:auto}.card.level-select .card-header{padding:12px 18px 10px;display:flex;flex-direction:column;align-items:start}.card.level-select .card-body{padding:10px 12px;border-bottom-left-radius:var(--brs-md);border-bottom-right-radius:var(--brs-md);border:1px solid transparent;transition:border .3s ease}.card.level-select .levels{display:block;padding:10px;border-radius:var(--brs-sm)}.card.level-select .level-name{display:flex;align-items:center;gap:8px;font-size:var(--fs-l);line-height:1.125;color:var(--white)}.card.level-select .level-name svg{width:12px;height:12px;fill:var(--white)}.card.level-select .levels.active{background-color:var(--gray-600)}.card.level-select .levels.active .level-name{color:var(--logo-bg)}.card.level-select .levels.active svg{fill:var(--logo-bg)}.card.level-select .level-description:not(:empty){font-size:var(--fs-s);margin-top:8px;color:var(--gray-200);font-weight:400}.card.level-select .levels:not(:last-child){margin-bottom:8px}.level-select.error .card-body{border:1px solid var(--danger-dark)}.btn.levels-btn{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:auto;font-size:20px}.btn.levels-btn svg path{width:100%;height:100%;fill:var(--white)}.btn.levels-btn:disabled{background-color:var(--gray-400)}.error-text{color:#ed6363;margin-top:12px;text-align:center;font-size:14px}.nav-item{display:flex;flex-direction:column;justify-content:space-between;align-items:center;gap:2px;border-radius:var(--brs-sm);text-decoration:none}.nav-item svg{fill:var(--gray-200)}.nav-item span{color:var(--gray-200);font-size:var(--fs-xxs)}.nav-item.active svg{fill:var(--white)}.nav-item.active span{color:var(--white)}.bottom-nav{display:flex;justify-content:space-between;width:calc(100vw - 40px);max-width:560px;padding:16px 24px;margin-inline:20px;border-radius:var(--brs-lg);border:1px solid var(--gray-200-05);overflow:hidden;position:absolute;bottom:20px;z-index:100}.bottom-nav:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background:#1010104d;z-index:0}.bottom-nav>*{position:relative;z-index:1;color:var(--white)}.bottom-nav-locked{display:flex;justify-content:center;align-items:center;gap:14px;font-size:var(--fs-s);font-weight:500;line-height:1;color:var(--gray-100)}.bottom-nav-locked svg{flex-shrink:0;fill:var(--gray-200)}.bottom-gradient-overlay{background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.85) 100%);bottom:0;height:150px;left:0;pointer-events:none;position:fixed;right:0;z-index:99;max-width:600px;margin-inline:auto}.header{display:flex;align-items:center;gap:16px;margin-bottom:24px}.header-text{display:flex;flex-direction:column}.avatar{width:32px;height:32px;border-radius:50%}.header h2{font-size:var(--fs-xxxl);margin-bottom:0;line-height:1.1}.header .username{font-size:var(--fs-s);line-height:1;color:var(--gray-100)}.header .image{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:38px;height:38px;background-color:var(--white);border-radius:50%}.header svg{fill:var(--logo-bg)}.btn{display:inline-block;padding:14px 20px;background-color:var(--gray-600);color:var(--white);font-size:var(--fs-l);font-weight:500;line-height:1;text-align:center;border-radius:var(--brs-md);border:none;cursor:pointer}.btn-dropdown{background-color:var(--gray-600);display:flex;align-items:center;gap:8px}.btn-dropdown svg{transition:rotate .3s ease}.btn-dropdown.expanded svg{rotate:90deg}.btn-dropdown svg{width:10px;height:10px;fill:var(--white);rotate:0deg}.btn-green{background-color:var(--green)}.btn-full-width{width:100%}.btn-flex{display:flex;align-items:center;justify-content:center;gap:8px}.btn-flex svg{height:10px}.btn-accent{background-color:var(--logo-bg);color:var(--white)}.btn-accent svg{fill:var(--white)}.btn-white{background-color:var(--white);color:var(--secondary)}.btn-white svg{fill:var(--secondary)}.btn-danger{background-color:var(--danger);color:var(--white)}.btn-danger svg{fill:var(--danger)}.btn-p12{padding-block:12px}.btn-p9{padding-block:9px;font-size:var(--fs-s)}@font-face{font-family:SF Pro Display;src:url(/fonts/SF-PRO-DISPLAY-BLACK.OTF) format("opentype");font-weight:900;font-style:normal}@font-face{font-family:SF Pro Display;src:url(/fonts/SF-PRO-DISPLAY-HEAVY.OTF) format("opentype");font-weight:800;font-style:normal}@font-face{font-family:SF Pro Display;src:url(/fonts/SF-PRO-DISPLAY-BOLD.OTF) format("opentype");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;src:url(/fonts/SF-PRO-DISPLAY-SEMIBOLD.OTF) format("opentype");font-weight:600;font-style:normal}@font-face{font-family:SF Pro Display;src:url(/fonts/SF-PRO-DISPLAY-MEDIUM.OTF) format("opentype");font-weight:500;font-style:normal}@font-face{font-family:SF Pro Display;src:url(/fonts/SF-PRO-DISPLAY-REGULAR.OTF) format("opentype");font-weight:400;font-style:normal}@font-face{font-family:SF Pro Display;src:url(/fonts/SF-PRO-DISPLAY-LIGHT.OTF) format("opentype");font-weight:300;font-style:normal}@font-face{font-family:SF Pro Display;src:url(/fonts/SF-PRO-DISPLAY-ULTRALIGHT.OTF) format("opentype");font-weight:200;font-style:normal}@font-face{font-family:SF Pro Display;src:url(/fonts/SF-PRO-DISPLAY-THIN.OTF) format("opentype");font-weight:100;font-style:normal}:root{--primary: var(--gray-400);--secondary: #191919;--bg: #202020;--logo-bg: #246AFF;--white: #fff;--success: #4caf50;--danger: #FF3E3E;--danger-dark: #651616;--green: #2E9D69;--primary-transparent: rgba(65, 133, 244, .25);--gray: #c6c6c6;--gray-700: #181818;--gray-600: #272727;--gray-500: #3A3A3A;--gray-400: #515151;--gray-300: #787878;--gray-200: #676767;--gray-200-05: rgba(103, 103, 103, .5);--gray-100: rgba(174, 174, 174, .6);--badge-level-base-bg: var(--success);--badge-level-middle-bg: var(--logo-bg);--badge-level-pro-bg: #e18f40;--brs-lg: 40px;--brs-md: 24px;--brs-sm: 12px;--fs-xxxs: 10px;--fs-xxs: 12px;--fs-xs: 14px;--fs-s: 16px;--fs-m: 18px;--fs-l: 20px;--fs-xl: 22px;--fs-xxl: 24px;--fs-xxxl: 26px}*,*:before,*:after{box-sizing:border-box;padding:0;margin:0;-webkit-tap-highlight-color:transparent}body,button,input{color:var(--white);font-family:SF Pro Display,"serif";font-weight:500}#root{height:100vh}.container{display:flex;flex-direction:column;max-width:600px;height:100%;margin-inline:auto;background-color:var(--bg)}main{flex-grow:1;padding:20px;height:calc(100% - 90px);overflow:auto;position:relative;z-index:1}.container-logo:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:url(/images/logo-icon.svg) no-repeat center/cover;background-size:60%;opacity:.3;pointer-events:none;z-index:0}main:has([data-blur=true]){overflow:hidden}.container:has(.modal-backdrop) .bottom-nav,.container:has(.modal-backdrop) .bottom-gradient-overlay{display:none}.wrapper{display:flex;flex-direction:column;gap:24px}.quiz-wrapper,.materials-wrapper{display:flex;flex-direction:column}.materials-wrapper .btn{margin-top:16px}.content{display:flex;flex-direction:column;overflow:auto;-webkit-overflow-scrolling:touch;min-height:calc(100% - 100px);margin-bottom:100px}.main-content h2{font-size:var(--fs-xxxl);margin-bottom:0}[data-blur=true]{position:fixed;top:0;right:0;bottom:0;left:0;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#101010b3;z-index:90}[data-blur=true] .lock-icon{width:54px;height:70px;fill:var(--white);position:absolute;left:calc(50% - 27px);top:calc(60vh - 35px)}a{text-decoration:none;color:var(--logo-bg)}.logo{width:104px;margin-right:10px}.header-logo{margin:auto}.icon-wrapper{width:20px;height:20px;display:flex;align-items:center;justify-content:center;background-color:var(--logo-bg);border-radius:50%;font-size:var(--fs-xs);font-weight:600}.icon-wrapper svg{fill:var(--white)}.icon-wrapper.green{background-color:var(--white)}.icon-wrapper.green svg{fill:var(--green)}.icon-wrapper.danger{background-color:var(--white)}.icon-wrapper.danger svg{fill:var(--danger)}.icon-wrapper.accent{background-color:var(--white);color:var(--logo-bg)}.icon-wrapper.accent svg{fill:var(--logo-bg)}h1,h2,h3{font-weight:500}h1{font-size:var(--fs-xxxl)}h2{font-size:var(--fs-xl)}h3{font-size:var(--fs-l)}p{font-size:var(--fs-s)}.card{border-radius:var(--brs-md)}.card-title{font-size:var(--fs-l);margin-bottom:10px}.card-title-wrapper{align-items:center;justify-content:space-between}.card{border-radius:var(--brs-md);overflow:hidden}.card-header{background:var(--logo-bg);color:var(--white);padding:12px 24px;display:flex;align-items:center}.card-body{background:var(--secondary);color:var(--white);padding:16px 24px 24px}.card-footer{display:flex;justify-content:space-between;align-items:center}.white-header-card .card-header{background-color:var(--white);color:var(--logo-bg)}.tag{display:flex;align-items:center;gap:8px;flex-shrink:0;font-size:var(--fs-xs)}hr{border:none;height:2px;background:linear-gradient(to right,var(--gray-600),var(--gray-200),var(--gray-600));margin-top:24px}.badge{width:min-content;background-color:var(--white);color:var(--secondary);font-size:var(--fs-xxs);padding:4px 10px;border-radius:var(--brs-md);font-weight:500;white-space:nowrap}.back-link{display:flex;align-items:center;gap:4px;margin-bottom:20px;color:var(--white);text-decoration:none;cursor:pointer}.back-link svg path{fill:var(--white)}.d-flex{display:flex;align-items:center;gap:8px}.accent-color{color:var(--logo-bg);font-size:var(--fs-l)}.text-gray-300{color:var(--gray-300)!important;font-weight:400;font-size:var(--fs-s);line-height:1.125}.text-danger{color:var(--danger)}.spinner{border:2px solid rgba(255,255,255,.3);border-top:2px solid #fff;border-radius:50%;width:16px;height:16px;display:inline-block;margin-right:8px;animation:spin .6s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}input::placeholder{font-weight:400}