@import"https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;800;900&display=swap";:root{--swiper-theme-color: #007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function, initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translateZ(0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-slide,.swiper-3d .swiper-cube-shadow{transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-css-mode.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-slides-offset-before);scroll-margin-inline-start:var(--swiper-slides-offset-before)}.swiper-css-mode.swiper-horizontal>.swiper-wrapper>.swiper-slide:last-child{margin-inline-end:var(--swiper-slides-offset-after)}.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-slides-offset-before);scroll-margin-block-start:var(--swiper-slides-offset-before)}.swiper-css-mode.swiper-vertical>.swiper-wrapper>.swiper-slide:last-child{margin-block-end:var(--swiper-slides-offset-after)}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper:before{content:"";flex-shrink:0;order:9999}.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper:before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper:before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-slide-shadow-bottom{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:#00000026}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,#00000080,#0000)}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,#00000080,#0000)}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,#00000080,#0000)}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,#00000080,#0000)}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color, var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color: #fff}.swiper-lazy-preloader-black{--swiper-preloader-color: #000}@keyframes swiper-preloader-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.swiper-creative .swiper-slide{backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper.swiper-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;backface-visibility:hidden;overflow:hidden}body{font-family:Poppins,sans-serif;display:flex;justify-content:center;background-color:#ccc}*{margin:0;padding:0;box-sizing:border-box}button,a,input,textarea,select,p{-webkit-tap-highlight-color:transparent}.wrapper{display:flex;flex-direction:column;height:100svh;background-color:#fff;width:100vw;max-width:450px}nav{position:fixed;bottom:48px;display:flex;align-self:center;height:60px;width:230px;padding:5px;gap:3px;border-radius:50px;background:#f2f3f5;box-shadow:0 10px 30px #00000014}nav>button{height:100%;flex:1;min-width:56px;display:flex;align-items:center;justify-content:center;gap:6px;border:none;border-radius:50px;cursor:pointer;background:transparent;color:#8e9392;transition:flex-grow .28s ease,background-color .28s ease,color .28s ease,transform .18s ease}nav>button.active-nav{flex-grow:2.6;padding-inline:14px;background-color:#5c7aff;color:#fff}.nav-label{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;opacity:0;transform:translate(-6px);transition:opacity .2s ease,transform .2s ease}.active-nav .nav-label{opacity:1;transform:translate(0)}.home,.search-page,.library,.user,.flashcard,.set-details{width:100%;height:100%;display:flex;flex-direction:column;gap:6px;padding-inline:6px;padding-block:6px;overflow-y:auto}.set-details{overflow-y:auto}.header{width:100%;display:flex;align-items:center;gap:12px;justify-content:space-between;padding-inline:6px}.header button{width:80px;height:40px;font-size:12px;background-color:#5c7aff;color:#fff;border-radius:12px;border:none;outline:none}.logo{height:40px;width:80px}.search{display:flex;align-items:center;gap:12px;background-color:#f4f4f4;height:40px;padding-inline:12px;flex-grow:1;border-radius:50px;color:#bfc1c0;flex-shrink:0}.search>p{font-size:14px;font-weight:500}.search>input{flex-grow:1;height:100%;border:none;outline:none;background:transparent;flex-shrink:0}.search-page>.search{flex-grow:0}.search>input::placeholder{font-family:Poppins;font-size:14px;font-weight:500;color:#bfc1c0}.library-body{width:100%;display:flex;flex-direction:column;gap:12px;overflow-y:auto;min-height:100svh - 60px}.flashcard-item{width:100%;height:52px;display:flex;align-items:center;gap:6px;padding:6px 0;padding-inline:6px}.flashcard-item:active{background-color:#ccc}.icon-box{height:100%;width:40px;display:flex;align-items:center;justify-content:center;border-radius:6px;background-color:#f2f3f5;font-size:20px}.card-data{height:100%;flex-grow:1;display:flex;flex-direction:column}.card-data>p{font-size:14px;font-weight:500}.card-info{width:100%;display:flex;align-items:center;gap:4px;font-size:14px}.add-float{width:50px;height:50px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:none;background-color:#111;color:#fff;font-size:20px;position:fixed;right:12px;bottom:24px;box-shadow:0 0 3px #ccc}.library{padding-inline:0}.library-form{width:100%;display:flex;flex-direction:column;gap:12px;padding-inline:12px;padding-block-end:24px;flex-grow:1;padding-block-end:40px}.title-input{display:flex;flex-direction:column;gap:4px}.title-input>label,.card-input>label{font-size:14px;font-weight:500;color:#8e9392}.title-input>input{height:40px;border:none;outline:none;border-bottom:1px solid #8e9392;background-color:transparent}.title-input>select{height:40px;border:none;outline:none;border-bottom:1px solid #8e9392;background-color:transparent}.title-input>input:focus{border-bottom:2px solid #111111}.title-input>input::placeholder{color:#8e9392}.data-container{width:100%;display:flex;flex-direction:column;gap:6px}.card-item{width:100%;height:175px;background:#fff;display:flex;flex-direction:column;justify-content:space-between;padding-inline:12px;box-shadow:0 0 3px #ccc;padding-block:6px}.card-input{width:100%;display:flex;flex-direction:column;gap:4px}.card-input>input{height:40px;border:none;outline:none;border-bottom:1px solid #8e9392;background:transparent}.card-input>input:focus{border-bottom:2px solid #111111}.fixed-bar{width:100%;height:40px;background:#fff;padding-inline:18px;padding-block:6px;position:fixed;display:flex;bottom:0;left:0;box-shadow:0 0 3px #ccc}.fixed-bar>button{font-size:20px;border:none;aspect-ratio:1 / 1;background-color:transparent;border-radius:50%}.fixed-bar>button:active{background-color:#ccc}.library>.header{padding-inline:12px}.set-details table{width:100%;border-collapse:collapse;font-size:14px}.set-details thead td{font-weight:600;font-size:12px;text-transform:uppercase;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.1);text-align:center;border:1px solid #ccc}.set-details tbody tr{border-bottom:1px solid rgba(255,255,255,.06);text-align:center;border:1px solid #ccc;font-size:14px}.set-details tbody tr:last-child{border-bottom:none}.set-details tbody td{padding:12px 0;vertical-align:top;padding-inline:6px;border:1px solid #ccc}.set-details tbody td:first-child{width:50%}.play-buttons{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:100px 100px;gap:6px;padding-inline:6px}.play-buttons button{width:100%;height:100%;font-weight:500;border:none;border-radius:12px;display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;text-align:center;background-color:#fff;box-shadow:0 0 3px #ccc;color:#111;font-size:16px;font-weight:600;cursor:pointer}.action-buttons{width:100%;display:flex;flex-direction:column;gap:6px}.action-buttons>button{width:100%;height:40px;border:none;border-radius:6px;font-size:16px;background-color:#5c7aff;color:#fff}.action-buttons>button:last-child{background-color:transparent;border:1px solid red;color:red}.flashcard-body{padding-inline:12px;width:100%;padding-block:12px;align-items:center;display:flex;flex-direction:column;position:relative;flex-grow:1;background-color:#f2f3f5}.navigation-buttons{position:fixed;width:100vw;display:flex;align-items:center;justify-content:space-between;left:0;padding-inline:24px;bottom:100px}.navigation-buttons>button{width:60px!important;box-shadow:0 0 3px #ccc;height:60px;display:flex;align-items:center;justify-content:center;background-color:#fff;flex-shrink:0;border:none;outline:none;font-size:20px;border-radius:50%;transition:.3s}.navigation-buttons>button:active{transform:scale(.9);font-size:18px}.progress-container{display:flex;align-items:center;gap:6px;width:60%}.progress-container>span{font-size:13px;text-align:right}progress{height:8px;border-radius:8px;overflow:hidden;-moz-appearance:none;appearance:none;-webkit-appearance:none;flex:1;margin:0}progress::-webkit-progress-bar{background-color:#e5e7eb;border-radius:8px}progress::-webkit-progress-value{background-color:#8e9392;border-radius:8px;transition:width .4s ease-in-out}progress::-moz-progress-bar{background-color:#8e9392;border-radius:8px;transition:width .4s ease-in-out}.card{width:80vw;aspect-ratio:4 / 3;max-width:310px;justify-self:center;border-radius:12px;padding-inline:12px;padding-bottom:12px;margin-block:3px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:18px;background-color:#fff;box-shadow:0 0 3px #ccc}.test-card{width:100%;height:100%;display:flex;align-items:center;justify-content:space-between;flex-direction:column;gap:24px;padding-block:3px;padding-inline:3px}.test-card>p{min-height:100px}.write>p{min-height:100px}.options{display:flex;flex-direction:column;gap:12px;width:100%;padding-inline:3px;padding-block:3px}.options>button{width:100%;height:40px;border:none;background-color:#fff;box-shadow:0 0 3px #ccc;border-radius:6px;outline:none;display:flex;align-items:center;justify-content:center;font-size:16px;text-align:center}.options>button:active{background-color:#f4f4f4}.options button:disabled{cursor:not-allowed;opacity:1}.options button.correct{background:#22c55e;color:#fff;border-color:#22c55e}.options button.wrong{background:#ef4444;color:#fff;border-color:#ef4444}.test-actions{width:100%;display:flex;align-items:center;justify-content:space-between;margin-top:12px}.test-actions>button{height:40px;width:100px;outline:none;background-color:#fff;box-shadow:0 0 3px #ccc;border:none;border-radius:6px}.test-actions>button:active{background-color:#f4f4f4}.write{width:100%;height:100%;display:flex;flex-direction:column}.write-field{display:flex;flex-direction:column;gap:6px}.write-field>textarea{resize:vertical;outline:none;padding-inline:6px;padding-block:6px;border-radius:6px;border:1px solid #ccc;min-height:89px;font-family:inherit}.write-field>textarea::placeholder{font-family:inherit}.write-field>textarea:focus{border:1px solid #111111}.write-field>textarea:disabled{background-color:#fff}.write-field>button{height:40px;border:none;outline:none;background-color:#5c7aff;border-radius:6px;color:#fff}.write-field>button:active{background-color:#8e9392}.write-field>p{width:100%;padding-inline:12px;padding-block:6px;background-color:#fff;border-radius:6px;font-size:13px}.match-stats{display:flex;gap:12px}.stat-box{flex:1;border-radius:18px;padding:12px;display:flex;flex-direction:column;gap:6px;align-items:center;color:#111;box-shadow:0 0 3px #ccc}.stat-box span{font-size:13px;opacity:.8}.stat-box strong{font-size:20px}.match-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;width:100%}.match-card{min-height:60px;flex:1;border-radius:18px;color:#fff;padding-inline:12px;padding-block:12px;font-size:16px;text-align:center;cursor:pointer;transition:.2s ease;outline:none;border:none;background:#fff;box-shadow:0 0 3px #ccc;color:#111}.match-card.selected{background:#5c7aff;color:#fff;transform:scale(1.02)}.match-card.matched{opacity:0}.match-card:disabled{cursor:default}.finished-text{opacity:.8}.profile-picture img{width:120px;height:120px;object-fit:contain}.user-body{display:flex;gap:6px;flex-wrap:wrap}.user-body>.user-name{display:flex;flex-grow:1;justify-content:space-between}.user-name>div:last-child{display:flex;flex-direction:column;align-items:end}.user-name>div:last-child>p{font-weight:500}.category-container{width:100%;display:flex;align-items:center;gap:6px;overflow-x:auto}.category{display:grid;width:200px;position:relative;flex-shrink:0;border-radius:12px}.category>img{width:100%;aspect-ratio:16 / 9;object-fit:cover;object-position:top;border-radius:12px}.category>p{display:flex;align-self:center;justify-self:center;color:#fff;position:absolute;z-index:2;font-size:20px;font-weight:500}.filter{width:100%;height:100%;position:absolute;top:0;left:0;background-color:#000;opacity:.3;border-radius:12px;z-index:1}div::-webkit-scrollbar{display:none}.loading{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.set-container{width:100%;flex-grow:1;padding-block-end:120px;display:flex;flex-direction:column;gap:6px}.empty{width:100%;flex-grow:1;display:flex;flex-direction:column;gap:6px;justify-content:center;align-items:center}.empty img{width:150px;border-radius:12px}.empty>p{font-size:14px;font-weight:500;text-align:center}.empty>button{width:150px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;background-color:#5c7aff;color:#fff;border:none;outline:none}.search-page select{width:100px;align-self:end;height:30px;border:none;outline:none;background-color:#f4f4f4;padding-inline:6px;border-radius:12px}.user-name select{height:30px;width:100px;display:flex;align-items:center;justify-content:center;border:none;outline:none;background-color:#f4f4f4;padding-inline:6px;border-radius:12px}.data-container>button{width:100%;height:40px;display:flex;align-items:center;justify-content:center;background-color:#5c7aff;color:#fff;border-radius:6px;border:none;outline:none;margin-top:12px}