.is-video-gallery .online-main { max-width: 1220px; padding-block: clamp(2rem, 5vw, 4.5rem); }

.online-video-gallery__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  align-items: center;
  gap: 2rem;
  overflow: hidden;
  padding: clamp(1.8rem, 4vw, 3.6rem);
  border-radius: 28px;
  background: radial-gradient(circle at 8% 5%, rgba(226, 172, 26, .22), transparent 35%), linear-gradient(135deg, #101b2f, #243b60);
  box-shadow: 0 28px 70px rgba(20, 31, 51, .18);
  color: #fff;
}

.online-video-gallery__eyebrow { margin: 0 0 .6rem; color: #f2ce62; font-size: .88rem; font-weight: 900; }
.online-video-gallery__hero h1 { margin: 0 0 .8rem; color: #fff; font-size: clamp(2.4rem, 5vw, 4.4rem); }
.online-video-gallery__hero p:last-child { max-width: 700px; margin: 0; color: rgba(255,255,255,.76); font-size: 1.04rem; }
.online-video-gallery__hero-mark { display: grid; place-items: center; width: 155px; aspect-ratio: 1; margin-inline: auto; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 20px rgba(255,255,255,.035); }
.online-video-gallery__hero-mark span { display: grid; place-items: center; width: 65px; aspect-ratio: 1; border-radius: 50%; background: #e0aa1b; color: #17243a; font-size: 1.5rem; }

.online-video-gallery__controls { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-block: 1.5rem; padding: .85rem 1rem; border: 1px solid #e3e7ed; border-radius: 15px; background: #fff; box-shadow: 0 8px 25px rgba(20,31,51,.05); }
.online-video-gallery__controls p { margin: 0; color: #68758a; font-size: .85rem; }
.online-video-gallery__controls strong { color: #17243a; font-size: 1.1rem; }
.online-video-gallery__search { display: flex; align-items: center; gap: .55rem; min-width: min(440px, 70%); }
.online-video-gallery__search > span:first-child { color: #9a7107; font-size: 1.3rem; }
.online-video-gallery__search input { width: 100%; border: 0 !important; background: transparent !important; box-shadow: none !important; }

.online-video-gallery__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.15rem; }
.online-video-card { overflow: hidden; border: 1px solid #e4e8ee; border-radius: 19px; background: #fff; box-shadow: 0 12px 35px rgba(23,36,58,.07); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.online-video-card:hover { border-color: rgba(224,170,27,.65); box-shadow: 0 20px 42px rgba(23,36,58,.14); transform: translateY(-6px); }
.online-video-card__trigger { position: relative; display: grid; width: 100%; min-height: 215px; place-items: center; overflow: hidden; padding: 0; border: 0; border-radius: 0; background: radial-gradient(circle at 15% 15%, rgba(224,170,27,.2), transparent 32%), linear-gradient(145deg, #14233b, #2a4269); cursor: pointer; }
.online-video-card__trigger img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.online-video-card:hover img { transform: scale(1.06); }
.online-video-card__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,16,29,.72), transparent 62%); }
.online-video-card__play { position: relative; z-index: 2; display: grid; place-items: center; width: 62px; aspect-ratio: 1; border-radius: 50%; background: #e0aa1b; color: #17243a; box-shadow: 0 10px 28px rgba(0,0,0,.25); font-size: 1.15rem; transition: transform .25s ease; }
.online-video-card:hover .online-video-card__play { transform: scale(1.1); }
.online-video-card__index { position: absolute; z-index: 2; inset: auto auto 1rem 1rem; color: rgba(255,255,255,.75); font-size: .75rem; font-weight: 800; }
.online-video-card__body { min-height: 145px; padding: 1.15rem; }
.online-video-card__meta { display: flex; justify-content: space-between; gap: .6rem; margin-bottom: .65rem; color: #7a8596; font-size: .7rem; }
.online-video-card__meta > span { padding: .2rem .5rem; border-radius: 999px; background: #fff4d0; color: #8d6500; font-weight: 850; }
.online-video-card h2 { margin: 0; color: #17243a; font-size: 1.05rem; line-height: 1.6; }
.online-video-gallery__empty { padding: 3rem 1rem; border: 1px dashed #d5dae2; border-radius: 18px; text-align: center; color: #6b7688; }

.online-video-player { width: min(960px, calc(100% - 2rem)); max-width: none; padding: 0; border: 0; border-radius: 20px; overflow: hidden; background: #090f1a; color: #fff; box-shadow: 0 30px 90px rgba(0,0,0,.45); }
.online-video-player::backdrop { background: rgba(5,10,18,.82); backdrop-filter: blur(7px); }
.online-video-player__header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; }
.online-video-player__header h2 { margin: 0; color: #fff; font-size: 1rem; }
.online-video-player__header button { display: grid; min-height: 0; width: 38px; aspect-ratio: 1; place-items: center; padding: 0; border-radius: 50%; background: rgba(255,255,255,.1); font-size: 1.5rem; }
.online-video-player video { display: block; width: 100%; max-height: 75vh; background: #000; }

@media (max-width: 900px) { .online-video-gallery__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 680px) { .online-video-gallery__hero { grid-template-columns: 1fr; } .online-video-gallery__hero-mark { display: none; } .online-video-gallery__controls { align-items: stretch; flex-direction: column; } .online-video-gallery__search { min-width: 100%; } }
@media (max-width: 520px) { .is-video-gallery .online-main { padding-inline: .85rem; } .online-video-gallery__hero { padding: 1.4rem; border-radius: 20px; } .online-video-gallery__grid { grid-template-columns: 1fr; } .online-video-card__trigger { min-height: 200px; } }

[data-color-mode="dark"] .online-video-gallery__controls,
[data-color-mode="dark"] .online-video-card { border-color: #334155; background: #172033; }
[data-color-mode="dark"] .online-video-card h2,
[data-color-mode="dark"] .online-video-gallery__controls strong { color: #f8fafc; }