* {
margin: 0;
padding: 0;
box-sizing: border-box
}

body {
background: #091838;
color: #fff;
font-family: 'Plus Jakarta Sans', sans-serif;
overflow: hidden
}

button,
input, a {
font: inherit;
-webkit-tap-highlight-color: transparent;
}

button {
cursor: pointer
}

.app {
display: flex;
width: 100%;
height: 100vh;
overflow: hidden
}

.sidebar {
display: flex;
flex: 0 0 18rem;
flex-direction: column;
background: rgba(4, 9, 23, .84);
border-right: .0625rem solid rgba(56, 189, 248, .1);
backdrop-filter: blur(.875rem);
transition: flex-basis .2s ease
}

.sidebar-header {
display: flex;
height: 5rem;
flex: 0 0 5rem;
align-items: center;
gap: .75rem;
padding: 1.25rem
}

.brand {
color: #fff;
font-size: 1.25rem;
font-weight: 700;
letter-spacing: .04em
}

.sidebar-toggle {
display: grid;
width: 2.5rem;
height: 2.5rem;
margin-left: auto;
place-items: center;
padding: 0;
border: 0;
border-radius: .5rem;
color: #fff;
background: transparent;
font-size: 1.5rem
}

.category-nav {
display: flex;
flex: 1;
flex-direction: column;
gap: .25rem;
min-height: 0;
padding: 1rem .75rem .1rem .5625rem;
overflow-y: auto
}

.category-button {
display: flex;
width: 100%;
align-items: center;
gap: .875rem;
padding: .75rem 1rem .75rem 1.1875rem;
border: 0;
border-radius: .75rem;
color: rgba(226, 232, 240, .72);
background: transparent;
text-align: left
}

.category-button:hover {
background: rgba(255, 255, 255, .05);
color: #fff
}

.category-button.active {
background: rgba(14, 165, 233, .18);
color: #fff
}

.category-button i {
width: 1.125rem;
color: #fff;
text-align: center
}

.sidebar.collapsed {
flex-basis: 4.75rem
}

.sidebar.collapsed .sidebar-header {
width: 4.75rem;
justify-content: center;
padding: 1.25rem .5625rem
}

.sidebar.collapsed .brand {
display: none
}

.sidebar.collapsed .sidebar-toggle {
margin: 0
}

.sidebar.collapsed .category-nav {
align-items: center;
padding-left: .5625rem;
padding-right: .5625rem
}

.sidebar.collapsed .category-button {
width: 3.5rem;
justify-content: center;
padding: .75rem .5rem
}

.sidebar.collapsed .category-button span {
display: none
}

.sidebar.collapsed .category-button i {
width: auto
}

.main {
display: flex;
min-width: 0;
flex: 1;
flex-direction: column;
background: #091838
}

.header {
display: flex;
position: relative;
min-height: 4.5rem;
align-items: center;
justify-content: space-between;
padding: 1rem 1.5rem
}

.header-title {
font-size: 1.25rem;
font-weight: 400;
white-space: nowrap
}

.mobile-menu {
display: none;
width: 2.5rem;
height: 2.5rem;
border: .0625rem solid rgba(255, 255, 255, .2);
border-radius: .625rem;
color: #fff;
background: transparent
}

.heading {
display: flex;
align-items: center;
gap: .75rem
}

.search {
position: absolute;
top: 50%;
right: 1.5rem;
width: 18rem;
transform: translateY(-50%)
}

.search i {
position: absolute;
top: 50%;
left: .875rem;
transform: translateY(-50%);
color: #fff
}

.search input {
width: 100%;
padding: .5625rem 1rem .5625rem 2.5rem;
border: .0625rem solid rgba(148, 163, 184, .35);
border-radius: .75rem;
outline: 0;
color: #f8fafc;
background: rgba(15, 23, 42, .6)
}

.search input::placeholder {
color: #94a3b8
}

.search input:focus {
border-color: rgba(56, 189, 248, .5)
}

.pagination {
position: absolute;
top: 50%;
left: 50%;
display: flex;
align-items: center;
gap: .5rem;
transform: translate(-50%, -50%)
}

.pagination button {
display: grid;
width: 2rem;
height: 2rem;
place-items: center;
border: 0;
border-radius: .5rem;
color: #7dd3fc;
background: transparent
}

.pagination button:hover {
background: rgba(56, 189, 248, .2)
}

.pagination span {
padding: 0 .5rem;
font-size: .875rem;
white-space: nowrap
}

.catalog {
flex: 1;
min-height: 0;
padding: 1.5rem;
overflow-y: auto
}

.grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 1.5rem
}

.card {
display: block;
min-width: 0;
color: inherit;
text-decoration: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}

.poster {
aspect-ratio: 3 / 4;
overflow: hidden;
background: #0f172a;
border: .0625rem solid rgba(56, 189, 248, .2);
border-radius: .75rem
}

.poster img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: right;
transition: filter .2s ease
}

.card:hover .poster img {
filter: brightness(1.1)
}

.title {
margin-top: .75rem;
padding: 0 .25rem;
color: #fff;
font-size: 1rem;
font-weight: 400;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}

.empty {
grid-column: 1 / -1;
padding: 4rem 1rem;
color: rgba(186, 230, 253, .5);
text-align: center
}

.empty i {
display: block;
margin-bottom: .5rem;
font-size: 3rem
}

.overlay {
display: none
}

dialog {
width: min(52rem, calc(100% - 2rem));
max-height: 90vh;
margin: auto;
padding: 0;
border: .0625rem solid rgba(56, 189, 248, .15);
border-radius: .75rem;
color: #fff;
background: #091838;
overflow: hidden
}

dialog::backdrop {
background: rgba(2, 6, 23, .72);
backdrop-filter: blur(.125rem)
}

.course-modal {
position: relative;
max-height: 90vh;
padding: 2rem;
overflow-y: auto
}

.modal-close {
position: absolute;
top: 1rem;
right: 1rem;
z-index: 2;
display: grid;
width: 2.25rem;
height: 2.25rem;
place-items: center;
padding: 0;
border: 0;
outline: 0;
box-shadow: none;
border-radius: .5rem;
color: #fff;
background: rgba(15, 23, 42, .8);
font-size: 1rem
}

.modal-close:hover {
background: rgba(255, 255, 255, .1)
}

.modal-close:focus,
.modal-close:focus-visible,
.modal-close:active {
outline: 0;
box-shadow: none;
border: 0
}

.modal-header {
display: flex;
gap: 2rem;
align-items: stretch
}

.modal-thumb {
width: 15rem;
flex-shrink: 0;
align-self: stretch;
object-fit: cover;
object-position: right;
border-radius: .75rem;
border: .0625rem solid rgba(56, 189, 248, .2)
}

.modal-info {
display: flex;
min-width: 0;
flex: 1;
flex-direction: column;
gap: .75rem
}

.modal-info h2 {
padding-right: 3rem;
font-size: 1.75rem;
font-weight: 600
}

.meta-line {
display: flex;
gap: .75rem;
min-width: 0;
font-size: .875rem
}

.meta-line strong {
min-width: 5.5rem;
flex-shrink: 0;
color: rgba(103, 232, 249, .6)
}

.meta-line span {
min-width: 0
}

.modal-info .meta-line:last-of-type {
align-items: flex-start
}

.modal-info .meta-line:last-of-type span {
line-height: 1.7
}

.modal-actions {
display: flex;
align-items: center;
gap: .75rem;
margin-top: 1rem;
flex-shrink: 0
}

.watch {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .5rem 1.25rem;
border: .12rem solid #fbbf24;
border-radius: .5rem;
color: #091838;
background: #fbbf24;
font-size: .9rem;
font-weight: 600;
text-decoration: none
}

.watch:hover {
background: #fcd34d;
border-color: #fcd34d
}

.watch svg {
width: 1rem;
height: 1rem;
display: block
}

.favorite-modal {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .5rem 1.25rem;
border: 0;
border-radius: .5rem;
color: #fff;
background: #1e293b;
font-size: .9rem;
font-weight: 600
}

.favorite-modal:hover {
background: #334155
}

.favorite-modal.active {
color: #fff;
background: #1e293b
}

.favorite-modal.active:hover {
background: #334155
}

.favorite-modal svg {
width: 1rem;
height: 1rem;
display: block
}

.favorite-modal svg path {
fill: none;
stroke: #fff
}

.favorite-modal.active svg path {
fill: #fbbf24;
stroke: #fbbf24
}

.sidebar-toggle:active,
.mobile-menu:active,
.category-button:active,
.pagination button:active {
background: transparent;
color: inherit;
border-color: transparent;
outline: 0
}

@media (max-width:1200px) {
.grid {
    grid-template-columns: repeat(4, minmax(0, 1fr))
}
}

@media (max-width:768px) {
body {
    overflow: auto
}

.app {
    min-height: 100vh;
    height: auto;
    overflow: visible
}

.sidebar {
    position: fixed;
    z-index: 20;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: min(70vh, 32.5rem);
    flex-basis: auto;
    border-top: .0625rem solid rgba(56, 189, 248, .15);
    border-right: 0;
    transform: translateY(100%);
    transition: transform .2s ease
}

.sidebar.open {
    transform: translateY(0)
}

.sidebar.collapsed {
    flex-basis: auto
}

.sidebar-header {
    height: 5rem;
    flex: 0 0 5rem;
    padding: 1.25rem
}

.sidebar.collapsed .sidebar-header {
    width: auto;
    justify-content: initial;
    padding: 1.25rem
}

.sidebar.collapsed .brand {
    display: block
}

.sidebar-toggle {
    display: none
}

.mobile-close {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    margin-left: auto;
    place-items: center;
    border: 0;
    color: #fff;
    background: transparent;
    font-size: 1.25rem
}

.category-nav,
.sidebar.collapsed .category-nav {
    display: flex;
    align-items: stretch;
    padding: 1rem .75rem;
    overflow-y: auto
}

.category-button,
.sidebar.collapsed .category-button {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    gap: .875rem;
    padding: .75rem 1rem
}

.category-button span,
.sidebar.collapsed .category-button span {
    display: inline
}

.category-button i,
.sidebar.collapsed .category-button i {
    width: 1.125rem
}

.main {
    min-height: 100vh
}

.header {
    align-items: stretch;
    flex-direction: column;
    gap: .75rem;
    padding: 1rem
}

.heading {
    position: static
}

.mobile-menu {
    display: block;
    flex: 0 0 2.5rem
}

.header-title {
    font-size: 1.1rem
}

.search {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    transform: none
}

.search i {
    position: absolute;
    top: 50%;
    left: .875rem;
    transform: translateY(-50%);
    color: #fff
}

.search input {
    width: 100%
}

.pagination {
    position: static;
    justify-content: center;
    width: 100%;
    transform: none
}

.catalog {
    padding: 1rem 1rem 3rem;
    overflow: visible
}

.grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem .75rem
}

.overlay {
    position: fixed;
    z-index: 10;
    inset: 0;
    display: block;
    border: 0;
    background: rgba(2, 6, 23, .65);
    backdrop-filter: blur(.125rem)
}

.overlay.hidden {
    display: none
}

dialog {
    width: calc(100% - 1rem);
    max-height: 94vh
}

.course-modal {
    padding: 1.25rem
}

.modal-thumb {
    display: none
}

.modal-header {
    display: block
}

.modal-info h2 {
    padding-right: 3rem;
    font-size: 1.5rem
}

.modal-actions {
    flex-wrap: wrap
}
}