:root{
  --navy:#0b141d; --panel:#0e1925; --card:#16222f; --card2:#1b2a39;
  --line:#243443; --green:#5ab81b; --green2:#72c635; --cream:#feebce;
  --text:#e9eff4; --muted:#9bb0c0;
  --shadow:0 10px 30px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--navy); color:var(--text);
  font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
a{color:inherit}

/* ---------- hero ---------- */
.hero{
  text-align:center; padding:64px 20px 40px;
  background:radial-gradient(1200px 500px at 50% -200px,#13243a 0,var(--navy) 70%);
  border-bottom:1px solid var(--line);
}
.logo-card{
  display:inline-block; background:var(--cream); border-radius:28px;
  padding:22px 30px; box-shadow:var(--shadow); margin-bottom:22px;
}
.logo-card img{display:block; width:min(440px,78vw); height:auto}
.tag{font-size:clamp(22px,4.4vw,34px); font-weight:800; margin:.2em 0 .15em; letter-spacing:-.01em}
.tag::after{content:""; display:block; width:120px; height:4px; margin:14px auto 0;
  background:linear-gradient(90deg,var(--green),var(--green2)); border-radius:3px}
.sub{color:var(--muted); max-width:560px; margin:18px auto 26px}
.cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.btn{
  display:inline-block; padding:13px 22px; border-radius:12px; font-weight:700;
  text-decoration:none; background:linear-gradient(90deg,var(--green),var(--green2));
  color:#06240a; border:1px solid transparent; transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 8px 22px rgba(90,184,27,.35)}
.btn.ghost{background:transparent; color:var(--text); border-color:var(--line)}
.btn.ghost:hover{border-color:var(--green2); box-shadow:none}

/* ---------- library ---------- */
#library{max-width:1180px; margin:0 auto; padding:48px 18px 70px}
.lib-head{text-align:center; margin-bottom:28px}
.lib-head h2{font-size:clamp(24px,4vw,34px); margin:0 0 6px}
.count{color:var(--muted); margin:0 0 20px}
#search{
  width:min(560px,92%); padding:14px 18px; border-radius:14px;
  background:var(--card); border:1px solid var(--line); color:var(--text); font-size:16px;
}
#search:focus{outline:none; border-color:var(--green2); box-shadow:0 0 0 3px rgba(114,198,53,.18)}

.grid{
  display:grid; gap:18px; margin-top:30px;
  grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
}
.card{
  position:relative; text-align:left; padding:0; cursor:pointer; color:inherit;
  background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden;
  font:inherit; transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.card:hover{transform:translateY(-4px); border-color:var(--green2); box-shadow:var(--shadow)}
.thumb-wrap{position:relative; aspect-ratio:9/16; background:var(--card2)}
.thumb-wrap img{width:100%; height:100%; object-fit:cover; display:block}
.num{position:absolute; top:8px; left:8px; z-index:2; font-size:12px; font-weight:700;
  background:rgba(11,20,29,.82); color:var(--green2); padding:3px 8px; border-radius:8px}
.play{position:absolute; inset:0; display:grid; place-items:center; z-index:2;
  font-size:34px; color:#fff; opacity:0; transition:opacity .12s ease; text-shadow:0 2px 8px #000}
.card:hover .play{opacity:1}
.card:hover .thumb-wrap::after{content:""; position:absolute; inset:0; background:rgba(90,184,27,.16)}
.meta{padding:11px 12px 13px}
.meta .t{font-weight:700; font-size:14.5px; line-height:1.25; margin-bottom:4px}
.meta .c{color:var(--muted); font-size:12.5px; line-height:1.35}
.empty{text-align:center; color:var(--muted); padding:40px}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line); text-align:center; padding:34px 20px; color:var(--muted)}
.foot-logo{width:120px; opacity:.85; background:var(--cream); padding:8px 12px; border-radius:12px; margin-bottom:12px}

/* ---------- modal ---------- */
.modal{position:fixed; inset:0; z-index:50; background:rgba(4,8,12,.86);
  display:grid; place-items:center; padding:20px; backdrop-filter:blur(4px)}
.modal[hidden]{display:none}
.modal-inner{position:relative; width:min(420px,94vw)}
#player{width:100%; aspect-ratio:9/16; border-radius:16px; background:#000; box-shadow:var(--shadow)}
.modal-meta{text-align:center; margin-top:14px}
.modal-meta h3{margin:0 0 4px}
.modal-meta p{margin:0; color:var(--muted)}
.close{position:absolute; top:-14px; right:-14px; width:40px; height:40px; border-radius:50%;
  border:none; background:var(--green); color:#06240a; font-size:18px; font-weight:800; cursor:pointer;
  box-shadow:var(--shadow)}
.close:hover{background:var(--green2)}
@media(max-width:480px){ .close{top:6px; right:6px} }