@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --bg:#07111d;
  --bg2:#0a1b2d;
  --panel:rgba(13,34,56,.84);
  --panel-solid:#0d2238;
  --line:rgba(124,187,240,.17);
  --text:#f5f9fd;
  --muted:#92a8bb;
  --blue:#2b9cff;
  --blue2:#65c8ff;
  --shadow:0 28px 72px rgba(0,0,0,.34);
}

* { box-sizing:border-box; }

html { min-height:100%; background:var(--bg); }

body {
  margin:0;
  min-height:100vh;
  color:var(--text);
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  background:
    radial-gradient(circle at 84% 8%,rgba(28,137,255,.17),transparent 30rem),
    radial-gradient(circle at 8% 65%,rgba(28,172,255,.08),transparent 31rem),
    linear-gradient(145deg,#050c15,#08182a 48%,#06111d);
}

body::before {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px);
  background-size:50px 50px;
  mask-image:linear-gradient(to bottom,#000,transparent 90%);
}

.site-shell {
  position:relative;
  z-index:1;
  width:min(1220px,calc(100% - 38px));
  margin:0 auto;
  padding:24px 0 38px;
}

.topbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-bottom:26px;
}

.brand img {
  display:block;
  width:auto;
  height:72px;
  max-width:310px;
  object-fit:contain;
}

nav {
  display:flex;
  gap:8px;
  padding:5px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(9,27,46,.55);
}

nav a {
  padding:9px 13px;
  border-radius:10px;
  color:#96abc0;
  text-decoration:none;
  font-size:.83rem;
  font-weight:700;
}

nav a:hover,
nav a.active {
  color:white;
  background:rgba(46,151,242,.17);
}

.eyebrow {
  margin:0 0 9px;
  color:#52b4ff;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.16em;
}

.video-hero {
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:1fr .78fr;
  gap:48px;
  align-items:center;
  min-height:340px;
  padding:48px 52px;
  border:1px solid var(--line);
  border-radius:30px;
  background:
    radial-gradient(circle at 76% 45%,rgba(44,157,255,.16),transparent 24rem),
    linear-gradient(135deg,rgba(15,43,71,.91),rgba(7,23,40,.82));
  box-shadow:var(--shadow);
}

.video-hero::after {
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  right:-170px;
  bottom:-210px;
  border:1px solid rgba(84,184,255,.11);
  border-radius:50%;
}

h1,h2,h3 { margin-top:0; }

h1 {
  margin-bottom:18px;
  font-size:clamp(3.2rem,7vw,6.2rem);
  line-height:.92;
  letter-spacing:-.06em;
}

.hero-text {
  max-width:660px;
  margin:0;
  color:#a9bbcc;
  line-height:1.7;
  font-size:1.02rem;
}

.hero-visual {
  position:relative;
  display:grid;
  place-items:center;
}

.screen {
  position:relative;
  width:min(100%,410px);
  aspect-ratio:16/9;
  overflow:hidden;
  border:1px solid rgba(122,196,255,.28);
  border-radius:21px;
  background:
    radial-gradient(circle at 50% 40%,rgba(52,161,255,.18),transparent 45%),
    linear-gradient(145deg,#123b5e,#081929);
  box-shadow:0 30px 55px rgba(0,0,0,.34);
  transform:perspective(900px) rotateY(-8deg) rotateX(3deg);
}

.screen::before {
  content:"";
  position:absolute;
  inset:14px;
  border:1px solid rgba(255,255,255,.05);
  border-radius:14px;
}

.screen-glow {
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent 20%,rgba(83,187,255,.09),transparent 65%);
}

.hero-play {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
}

.hero-play svg {
  width:78px;
  height:78px;
  padding:19px;
  border:1px solid rgba(134,208,255,.40);
  border-radius:50%;
  background:rgba(9,40,65,.68);
  stroke:#d8f0ff;
  fill:none;
  stroke-width:1.6;
  filter:drop-shadow(0 12px 28px rgba(0,0,0,.30));
}

.player-section,
.category-section,
.library-section { margin-top:55px; }

.section-heading,
.library-toolbar {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:20px;
}

.section-heading h2,
.library-toolbar h2 {
  margin:0;
  font-size:clamp(1.7rem,3vw,2.5rem);
  letter-spacing:-.04em;
}

.heading-actions {
  display:flex;
  align-items:center;
  gap:14px;
}

.heading-actions > span {
  color:var(--muted);
  font-size:.82rem;
  font-weight:700;
}

.admin-link {
  padding:9px 13px;
  border:1px solid rgba(81,177,255,.28);
  border-radius:11px;
  color:#d9edff;
  background:rgba(35,129,211,.14);
  text-decoration:none;
  font-size:.79rem;
  font-weight:800;
}

.player-panel {
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:22px;
  background:rgba(10,29,48,.75);
  box-shadow:0 20px 50px rgba(0,0,0,.23);
}

.player-wrap {
  position:relative;
  aspect-ratio:16/9;
  background:#02060a;
}

.player-wrap video {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  background:#000;
}

.player-empty {
  position:absolute;
  inset:0;
  display:grid;
  place-content:center;
  justify-items:center;
  gap:8px;
  color:#89a0b5;
  text-align:center;
  background:
    radial-gradient(circle at 50% 45%,rgba(36,138,226,.14),transparent 30%),
    #06111d;
}

.player-empty.hidden { display:none; }

.empty-play {
  width:74px;
  height:74px;
  display:grid;
  place-items:center;
  margin-bottom:8px;
  border:1px solid rgba(105,189,255,.26);
  border-radius:50%;
  background:rgba(19,62,98,.48);
}

.empty-play svg {
  width:36px;
  height:36px;
  stroke:#78c8ff;
  fill:none;
  stroke-width:1.8;
}

.player-empty strong {
  color:#d6e5f2;
  font-size:1.1rem;
}

.player-empty span { font-size:.82rem; }

.video-details {
  display:flex;
  justify-content:space-between;
  gap:25px;
  align-items:flex-end;
  padding:20px 22px;
}

.category-badge {
  display:inline-block;
  margin-bottom:8px;
  color:#55b6fb;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.12em;
}

.video-details h3 {
  margin:0 0 6px;
  font-size:1.4rem;
}

.video-details p {
  max-width:760px;
  margin:0;
  color:#90a5b8;
  line-height:1.5;
  font-size:.84rem;
}

.detail-actions {
  display:flex;
  gap:7px;
  flex-shrink:0;
}

.detail-button {
  padding:8px 11px;
  border:1px solid rgba(115,185,240,.22);
  border-radius:9px;
  background:#102941;
  color:#d9ecfb;
  font:inherit;
  font-size:.73rem;
  font-weight:800;
  cursor:pointer;
}

.detail-button:disabled {
  opacity:.35;
  cursor:not-allowed;
}

.category-cards {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}

.category-card {
  min-height:145px;
  position:relative;
  overflow:hidden;
  padding:19px;
  border:1px solid var(--line);
  border-radius:18px;
  background:
    radial-gradient(circle at 90% 10%,rgba(44,157,255,.17),transparent 58%),
    rgba(13,34,56,.76);
  color:white;
  text-align:left;
  cursor:pointer;
  transition:transform .18s ease,border-color .18s ease;
}

.category-card:hover,
.category-card.active {
  transform:translateY(-3px);
  border-color:rgba(76,177,255,.55);
}

.category-card h3 {
  margin:0 0 5px;
  font-size:1.2rem;
}

.category-card p {
  margin:0;
  min-height:2.6em;
  color:#8ea5b9;
  font-size:.75rem;
  line-height:1.45;
}

.category-count {
  position:absolute;
  left:19px;
  bottom:16px;
  color:#5dbbff;
  font-size:.68rem;
  font-weight:800;
}

.search-wrap {
  display:flex;
  align-items:center;
  gap:8px;
  min-width:295px;
  padding:9px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(11,31,51,.74);
  color:#7e9bb4;
}

.search-wrap input {
  width:100%;
  border:0;
  outline:0;
  color:white;
  background:transparent;
  font:inherit;
  font-size:.86rem;
}

.search-wrap input::placeholder { color:#71899f; }

.video-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

.video-card {
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:17px;
  background:#0b2034;
  color:white;
  cursor:pointer;
  box-shadow:0 14px 34px rgba(0,0,0,.19);
  transition:transform .18s ease,border-color .18s ease;
}

.video-card:hover,
.video-card.active {
  transform:translateY(-4px);
  border-color:rgba(74,177,255,.51);
}

.poster-wrap {
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  background:
    radial-gradient(circle at 70% 30%,rgba(50,165,255,.22),transparent 32%),
    linear-gradient(145deg,#123b5f,#071827);
}

.poster-wrap img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.poster-placeholder {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
}

.poster-placeholder svg {
  width:52px;
  height:52px;
  padding:12px;
  border:1px solid rgba(113,194,255,.26);
  border-radius:50%;
  background:rgba(8,33,54,.55);
  stroke:#72c6ff;
  fill:none;
  stroke-width:1.7;
}

.card-play {
  position:absolute;
  inset:auto auto 12px 12px;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.18);
  border-radius:50%;
  background:rgba(5,17,29,.74);
  backdrop-filter:blur(7px);
}

.card-play svg {
  width:20px;
  height:20px;
  stroke:white;
  fill:none;
  stroke-width:2;
}

.video-card-copy {
  padding:14px;
}

.video-card-copy strong {
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:.95rem;
}

.video-card-copy p {
  display:-webkit-box;
  overflow:hidden;
  min-height:2.7em;
  margin:6px 0 9px;
  color:#8da4b8;
  font-size:.75rem;
  line-height:1.45;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

.card-meta {
  color:#54b5fb;
  font-size:.67rem;
  font-weight:800;
}

.empty-state {
  padding:70px 24px;
  text-align:center;
  border:1px dashed rgba(124,186,239,.22);
  border-radius:22px;
  background:rgba(10,29,48,.42);
}

.empty-state.hidden { display:none; }

.empty-icon svg {
  width:50px;
  height:50px;
  stroke:#43a8f5;
  fill:none;
  stroke-width:1.4;
}

.empty-state h3 { margin:12px 0 6px; }
.empty-state p { margin:0;color:var(--muted); }

footer {
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:55px;
  padding:25px 3px 3px;
  border-top:1px solid rgba(124,186,239,.12);
  color:#6f879c;
  font-size:.75rem;
}

@media(max-width:920px) {
  .video-hero { grid-template-columns:1fr; }
  .hero-visual { display:none; }
  .category-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .video-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media(max-width:640px) {
  .site-shell { width:min(100% - 20px,1220px);padding-top:14px; }
  .topbar { align-items:flex-start;flex-direction:column; }
  .brand img { height:62px;max-width:78vw; }
  nav { width:100%;overflow-x:auto; }
  nav a { white-space:nowrap; }

  .video-hero { min-height:auto;padding:31px 23px;border-radius:22px; }

  .section-heading,
  .library-toolbar { align-items:flex-start;flex-direction:column; }

  .heading-actions { width:100%;justify-content:space-between; }
  .search-wrap { width:100%;min-width:0; }

  .video-details { align-items:flex-start;flex-direction:column; }
  .detail-actions { width:100%; }
  .detail-button { flex:1; }

  .category-cards,
  .video-grid { grid-template-columns:1fr; }

  footer { flex-direction:column; }
}