:root{
  --bg:#08090c;
  --card:#151820;
  --card2:#1c202a;
  --text:#f4f5f7;
  --muted:#9ba1ad;
  --line:#292e39;
  --accent:#ff9f1c;
  --accent2:#ffb84d;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{min-height:100vh}
a{color:inherit;text-decoration:none}
.topbar{
  height:64px;display:flex;align-items:center;justify-content:space-between;
  padding:0 22px;border-bottom:1px solid #171a21;background:#090a0d;
  position:sticky;top:0;z-index:20
}
.brand{font-size:21px;font-weight:900;letter-spacing:.7px}
.brand span{color:var(--accent)}
.admin-link,.back-link{color:#c8ccd4;font-size:14px}
.container{width:min(1180px,calc(100% - 28px));margin:0 auto;padding:24px 0 44px}
.hero-title{display:flex;justify-content:space-between;align-items:end;margin-bottom:20px}
.hero-title h1{font-size:28px;margin:0 0 4px}
.hero-title p,.muted{color:var(--muted);margin:0}
.video-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 22px
}
.video-card{min-width:0;cursor:pointer}
.thumb{
  width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;
  background:#20242e;display:block;border:1px solid #232834
}
.thumb-wrap{position:relative}
.duration{
  position:absolute;right:8px;bottom:8px;background:rgba(8,9,12,.84);
  padding:4px 7px;border-radius:6px;font-size:12px;font-weight:700
}
.video-card-title{
  font-size:15px;font-weight:700;line-height:1.3;margin:8px 2px 0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.pagination{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.page-btn{
  min-width:38px;height:38px;border:1px solid var(--line);background:#11141a;color:#ddd;
  border-radius:8px;cursor:pointer
}
.page-btn.active{background:var(--accent);color:#111;border-color:var(--accent);font-weight:800}
.empty{text-align:center;color:var(--muted);padding:70px 10px}
.hidden{display:none}
.watch-container{max-width:1000px}
.watch-box{background:#0d0f14}
.player-wrap{
  width:100%;background:#000;border-radius:12px;overflow:hidden;
  border:1px solid #222733
}
.player{display:block;width:100%;max-height:70vh;background:#000}
.watch-title{font-size:22px;line-height:1.3;margin:15px 0 6px}
.watch-description{color:var(--muted);line-height:1.5;margin:0}
.similar-section{margin-top:34px}
.section-heading{margin-bottom:16px}
.section-heading h2{font-size:20px;margin:0}
.admin-container{max-width:760px}
.admin-card{
  background:#101319;border:1px solid var(--line);border-radius:12px;
  padding:20px;margin-bottom:18px
}
.admin-card h1,.admin-card h2{margin:0 0 8px}
label{display:block;font-size:14px;font-weight:700;margin-top:14px}
input,textarea{
  width:100%;margin-top:7px;background:#0a0c10;color:#f4f5f7;
  border:1px solid #303541;border-radius:8px;padding:12px;font:inherit;outline:none
}
input:focus,textarea:focus{border-color:#666d7b}
.primary-btn,.small-btn{
  border:0;border-radius:8px;padding:11px 16px;font-weight:800;cursor:pointer
}
.primary-btn{margin-top:16px;background:var(--accent);color:#111}
.small-btn{background:#272c36;color:#fff}
.form-message{margin-top:12px;color:#c9ced8}
.admin-list-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.admin-item{
  display:grid;grid-template-columns:100px 1fr auto;gap:12px;align-items:center;
  padding:10px 0;border-top:1px solid var(--line)
}
.admin-item img{width:100px;aspect-ratio:16/9;object-fit:cover;border-radius:7px;background:#222}
.admin-item-title{font-weight:700;font-size:14px}
.delete-btn{background:#3a2020;color:#ffb1b1;border:1px solid #633838;border-radius:7px;padding:8px 10px;cursor:pointer}
@media(max-width:600px){
  .topbar{height:58px;padding:0 14px}
  .container{width:calc(100% - 20px);padding-top:18px}
  .video-grid{gap:14px 10px}
  .video-card-title{font-size:14px}
  .hero-title h1{font-size:23px}
  .watch-title{font-size:19px}
  .admin-item{grid-template-columns:76px 1fr}
  .admin-item img{width:76px}
  .delete-btn{grid-column:2;justify-self:start}
}