.fkm-video-library[hidden] { display: none !important; }

.fkm-video-library {
    margin: 1.25rem 0 1.75rem;
    padding: clamp(1rem, 3.5vw, 1.6rem);
    border: 1px solid rgba(176, 204, 255, .23);
    border-radius: 1.6rem;
    background:
        radial-gradient(circle at 94% 0%, rgba(255, 221, 127, .16), transparent 28rem),
        linear-gradient(145deg, rgba(37, 54, 82, .96), rgba(28, 34, 62, .97));
    box-shadow: 0 1rem 2.8rem rgba(8, 14, 30, .28);
    color: #f8faff;
}

.fkm-video-library-heading {
    display: flex;
    align-items: center;
    gap: .95rem;
    margin-bottom: 1.15rem;
}

.fkm-video-library-sparkle {
    display: grid;
    flex: 0 0 3.25rem;
    width: 3.25rem;
    height: 3.25rem;
    place-items: center;
    border: 1px solid rgba(255, 230, 164, .55);
    border-radius: 1.1rem;
    background: linear-gradient(145deg, #ffdc87, #f5a978);
    box-shadow: 0 .5rem 1.3rem rgba(255, 195, 106, .19);
    color: #47384a;
    font-size: 1.65rem;
}

.fkm-video-library-eyebrow {
    margin: 0 0 .2rem;
    color: #ffdf98;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.fkm-video-library-heading h2 {
    margin: 0;
    color: #fff;
    font-family: 'Quicksand', sans-serif;
    font-size: clamp(1.3rem, 4vw, 1.85rem);
    font-weight: 800;
    line-height: 1.15;
}

.fkm-video-library-heading p:last-child {
    margin: .35rem 0 0;
    color: #d0d9eb;
    font-size: .93rem;
}

.fkm-video-library-search {
    display: flex;
    gap: .6rem;
    padding: .45rem;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 1.15rem;
    background: rgba(11, 19, 39, .55);
}

.fkm-video-library-search input {
    min-width: 0;
    flex: 1;
    padding: .85rem .9rem;
    border: 0;
    border-radius: .8rem;
    outline: none;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 1rem;
}

.fkm-video-library-search input::placeholder { color: #aab7cb; }
.fkm-video-library-search input:focus-visible { box-shadow: inset 0 0 0 2px #92e5d0; }

.fkm-video-library-search button,
.fkm-video-result-action {
    display: inline-flex;
    min-height: 2.9rem;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .7rem 1rem;
    border: 0;
    border-radius: .85rem;
    background: linear-gradient(135deg, #ffe08b, #ffbd78);
    color: #352a43;
    font-weight: 800;
    cursor: pointer;
    transition: transform .16s ease, filter .16s ease;
}

.fkm-video-library-search button:hover,
.fkm-video-result-action:hover { filter: brightness(1.06); transform: translateY(-1px); }
.fkm-video-library-search button:focus-visible,
.fkm-video-result button:focus-visible,
.fkm-video-library-pages button:focus-visible { outline: 3px solid #9ce7d4; outline-offset: 3px; }

.fkm-video-library-filters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .7rem;
    margin: .85rem 0 .5rem;
}

.fkm-video-library-filters label {
    display: grid;
    gap: .35rem;
    color: #dce4f2;
    font-size: .76rem;
    font-weight: 700;
}

.fkm-video-library-filters select {
    width: 100%;
    min-height: 2.65rem;
    padding: .55rem 2rem .55rem .7rem;
    border: 1px solid rgba(200, 215, 244, .28);
    border-radius: .8rem;
    background: #192642;
    color: #fff;
    font: inherit;
    font-size: .84rem;
}

.fkm-video-library-status {
    min-height: 1.5rem;
    margin: .65rem .15rem;
    color: #d5deef;
    font-size: .85rem;
}

.fkm-video-library-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}

.fkm-video-result {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    overflow: hidden;
    border: 1px solid rgba(198, 212, 242, .19);
    border-radius: 1.1rem;
    background: linear-gradient(155deg, rgba(255,255,255,.095), rgba(255,255,255,.035));
    box-shadow: 0 .5rem 1.2rem rgba(3, 9, 24, .14);
}

.fkm-video-result-play {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: #18243a;
    cursor: pointer;
    aspect-ratio: 16 / 9;
}

.fkm-video-result-play img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .22s ease;
}

.fkm-video-result-play:hover img { transform: scale(1.035); }

.fkm-video-result-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    width: 3.15rem;
    height: 3.15rem;
    place-items: center;
    padding-left: .18rem;
    border: 2px solid rgba(255,255,255,.88);
    border-radius: 50%;
    background: rgba(30, 33, 61, .76);
    color: #fff;
    font-size: 1.15rem;
    transform: translate(-50%, -50%);
    box-shadow: 0 .4rem 1.2rem rgba(0,0,0,.28);
}

.fkm-video-result-copy { padding: .8rem .85rem 0; }

.fkm-video-result-copy h3 {
    display: -webkit-box;
    min-height: 2.65em;
    margin: 0;
    overflow: hidden;
    color: #fff;
    font-family: 'Quicksand', sans-serif;
    font-size: .98rem;
    font-weight: 800;
    line-height: 1.32;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.fkm-video-result-channel {
    overflow: hidden;
    margin: .38rem 0 .55rem;
    color: #b8d0ff;
    font-size: .82rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fkm-video-result-details { display: flex; flex-wrap: wrap; gap: .35rem; }

.fkm-video-result-badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.6rem;
    padding: .18rem .55rem;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    background: rgba(7, 15, 34, .42);
    color: #e6ecf7;
    font-size: .7rem;
    font-weight: 700;
}

.fkm-video-result-badge-age { border-color: rgba(128, 225, 191, .35); color: #9be8c7; }

.fkm-video-result-watched {
    min-height: 2.45rem;
    margin: .45rem 0 0;
    padding: 0 .85rem;
    color: #ffdf9a;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.4;
}

.fkm-video-result-action {
    min-height: 2.55rem;
    margin: 0 .75rem .75rem;
    padding: .6rem .8rem;
    border-radius: .75rem;
    font-size: .84rem;
}

.fkm-video-library-empty {
    grid-column: 1 / -1;
    margin: 0;
    padding: 1.4rem 1rem;
    border: 1px dashed rgba(210, 223, 248, .35);
    border-radius: 1rem;
    color: #e4eaf6;
    text-align: center;
}

.fkm-video-library-pages {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    margin-top: 1rem;
    color: #edf2fc;
    font-size: .83rem;
    font-weight: 700;
}

.fkm-video-library-pages[hidden] { display: none; }

.fkm-video-library-pages button {
    min-height: 2.65rem;
    padding: .55rem .9rem;
    border: 1px solid rgba(205, 219, 246, .25);
    border-radius: .8rem;
    background: rgba(9, 18, 39, .56);
    color: #fff;
    font: inherit;
    font-size: .78rem;
    cursor: pointer;
}

.fkm-video-library-pages button:disabled { opacity: .45; cursor: default; }

@media (max-width: 575px) {
    .fkm-video-library-filters { grid-template-columns: 1fr; gap: .55rem; }
    .fkm-video-library-filters label { grid-template-columns: 6.4rem minmax(0, 1fr); align-items: center; }
    .fkm-video-library-grid { grid-template-columns: 1fr; }
    .fkm-video-result { grid-template-columns: 41% minmax(0, 1fr); grid-template-rows: auto 1fr auto; }
    .fkm-video-result-play { grid-row: 1 / 3; height: 100%; min-height: 9.2rem; aspect-ratio: auto; }
    .fkm-video-result-play-icon { width: 2.5rem; height: 2.5rem; font-size: .95rem; }
    .fkm-video-result-copy { padding: .7rem .7rem 0; }
    .fkm-video-result-copy h3 { min-height: 2.55em; font-size: .88rem; }
    .fkm-video-result-channel { margin: .25rem 0 .4rem; font-size: .74rem; }
    .fkm-video-result-details { gap: .25rem; }
    .fkm-video-result-badge { min-height: 1.45rem; padding-inline: .4rem; font-size: .64rem; }
    .fkm-video-result-watched { grid-column: 2; min-height: 0; padding: .35rem .7rem .45rem; font-size: .67rem; }
    .fkm-video-result-action { grid-column: 1 / -1; margin: .05rem .6rem .6rem; min-height: 2.35rem; }
    .fkm-video-library-pages { gap: .5rem; }
    .fkm-video-library-pages button { padding-inline: .65rem; }
}

@media (prefers-reduced-motion: reduce) {
    .fkm-video-result-play img,
    .fkm-video-library-search button,
    .fkm-video-result-action { transition: none; }
}