/* Style + right drawer */
:root{
  --bg:#0b0b0d; --surface:#121216; --muted:#1b1b22; --text:#e9e9ee; --subtext:#a8a8b3;
  --brand:#4f46e5; --brand-2:#22d3ee; --accent:#ef4444; --ring: rgba(79,70,229,.4);
  --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.30), 0 2px 10px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu; color:var(--text);
  background: radial-gradient(1100px 600px at 10% -10%, rgba(79,70,229,.08), transparent 40%),
              radial-gradient(1100px 600px at 110% 10%, rgba(34,211,238,.06), transparent 30%), var(--bg);}
a{color:inherit; text-decoration:none}
.container{width:min(1200px,92vw); margin-inline:auto}
header{position:sticky; top:0; z-index:60; backdrop-filter:saturate(1.2) blur(10px);
  background: linear-gradient( to bottom, rgba(11,11,13,.85), rgba(11,11,13,.6) ); border-bottom:1px solid rgba(255,255,255,.06);}
.nav{display:flex; align-items:center; gap:12px; padding:12px 0}
.logo{display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:999px; background:linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow:var(--shadow)}
.logo b{letter-spacing:.3px}
.spacer{flex:1}
.search{position:relative; width:min(540px,55vw)}
.search input{width:100%; padding:12px 44px 12px 14px; border-radius:999px; background:#0f0f14; border:1px solid rgba(255,255,255,.08); color:var(--text); outline:none}
.search input:focus{border-color:var(--ring); box-shadow:0 0 0 6px var(--ring)}
.search .ic{position:absolute; right:10px; top:50%; translate:0 -50%; opacity:.8}
.btn{padding:10px 14px; border-radius:999px; background:transparent; color:var(--text); border:1px solid rgba(255,255,255,.12); cursor:pointer; font-weight:600}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand-2)); border:none}
.badge-admin{background:#4f46e5; color:#fff; padding:2px 8px; border-radius:999px; font-size:12px}
.badge-verified{display:inline-flex; align-items:center; gap:6px; font-size:13px; color:#22d3ee}
.badge-verified svg{vertical-align:middle}
/* Drawer right */
.drawer{position:fixed; top:0; right:0; height:100dvh; width:min(320px, 86vw); background:var(--surface); border-left:1px solid rgba(255,255,255,.08); transform:translateX(100%); transition:transform .25s ease; z-index:100; display:flex; flex-direction:column}
.drawer.open{transform:translateX(0)}
.drawer header{display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.08)}
.drawer .menu{padding:12px; display:grid; gap:8px}
.drawer .menu a{padding:10px 12px; border-radius:10px; background:var(--muted); border:1px solid rgba(255,255,255,.06)}
.overlay{position:fixed; inset:0; background:rgba(0,0,0,.6); opacity:0; visibility:hidden; transition:.2s; z-index:90}
.overlay.show{opacity:1; visibility:visible}
/* Cards, grid */
section{padding:18px 0}
h1,h2{margin:8px 0 12px}
.grid{display:grid; grid-template-columns: repeat( auto-fill, minmax(260px, 1fr)); gap:14px}
.card{background:linear-gradient(160deg, #121217, #0e0e12); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); overflow:hidden; transition:.25s; position:relative}
.card:hover{transform: translateY(-2px); box-shadow: var(--shadow)}
.thumb{position:relative}
.thumb img{display:block; width:100%; aspect-ratio:16/9; object-fit:cover; background:#0a0a0d}
.duration{position:absolute; right:8px; bottom:8px; background:rgba(0,0,0,.7); color:#fff; padding:4px 8px; font-size:12px; border-radius:8px}
.badge{position:absolute; left:8px; top:8px; background:rgba(0,0,0,.7); color:#fff; padding:4px 8px; font-size:12px; border-radius:8px}
.meta{display:grid; grid-template-columns:auto 1fr; gap:10px; padding:12px}
.avatar{width:36px; height:36px; border-radius:999px; object-fit:cover; border:1px solid rgba(255,255,255,.1)}
.title{font-weight:700; line-height:1.3; margin:2px 0 6px; font-size:15px}
.channel{font-size:13px; color:#e9e9ee}
.channel small{color:var(--subtext); display:block}
.stats{display:flex; gap:8px; color:var(--subtext); font-size:12px}
/* Form blocks */
.form{background:#121216; border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:18px}
label{display:block; margin:12px 0 6px}
input[type=text],input[type=url],input[type=email],input[type=password],input[type=number],input[type=file],select{width:100%; padding:10px; border-radius:10px; border:1px solid rgba(255,255,255,.15); background:#0f0f14; color:#e9e9ee}
.row{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
.alert{padding:12px 14px; border-radius:10px; margin-bottom:12px}
.alert.error{background:#2a0e0e; border:1px solid #5f1e1e}
.alert.success{background:#0e2a1a; border:1px solid #1e5f3e}
.table{width:100%; border-collapse:collapse}
.table th,.table td{padding:10px; border-bottom:1px solid rgba(255,255,255,.08); text-align:left}
.table th{color:#a8a8b3; font-weight:700}
/* Modal */
.modal{position:fixed; inset:0; background:rgba(0,0,0,.75); display:none; align-items:center; justify-content:center; padding:18px; z-index:80}
.modal[open]{display:flex}
.dialog{width:min(1100px,96vw); background:var(--surface); border-radius:var(--radius); overflow:hidden; border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow)}
.dialog header{display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.06); background:linear-gradient( to bottom, rgba(18,18,22,.9), rgba(18,18,22,.7) )}
.dialog h3{margin:0; font-size:16px}
.dialog .close{border:none; background:transparent; color:var(--subtext); font-size:20px; cursor:pointer}
.video-wrap{background:#000}
video{display:block; width:100%; height:auto}
.dialog .info{padding:12px 14px; display:flex; align-items:center; gap:12px}
.dialog .info img{width:40px; height:40px; border-radius:999px}
.dialog .info .who{display:grid}
.dialog .info .who small{color:var(--subtext)}
footer{padding:32px 0 50px; color:var(--subtext); font-size:13px}
footer .links{display:flex; flex-wrap:wrap; gap:10px}
footer .links a{padding:8px 10px; border-radius:999px; background:var(--muted); border:1px solid rgba(255,255,255,.06)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (max-width:760px){ .search{width:42vw} .row{grid-template-columns:1fr} }

/* --- Admin UI --- */
.subnav{position:sticky; top:58px; z-index:55; background:linear-gradient(to bottom, rgba(18,18,22,.95), rgba(18,18,22,.8)); border-bottom:1px solid rgba(255,255,255,.06); backdrop-filter: blur(10px);}
.subnav-inner{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0}
.subnav .left{display:flex; align-items:center; gap:10px; color:#cfd0f6}
.subnav .tabs{display:flex; gap:8px; flex-wrap:wrap}
.subtab{padding:8px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.08); background:#0f0f14; color:#e9e9ee; font-weight:600}
.subtab:hover{background:#15151c}
.subtab[aria-current="page"]{outline:2px solid rgba(79,70,229,.6)}

.card.admin{background:linear-gradient(160deg, #121217, #0e0e12); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:16px}
.filters{display:grid; grid-template-columns: repeat( auto-fit, minmax(200px, 1fr) ); gap:10px; margin-bottom:10px}
.badge-pub{background:rgba(34,197,94,.15); border:1px solid rgba(34,197,94,.4); color:#86efac; padding:3px 8px; border-radius:999px; font-size:12px}
.badge-draft{background:rgba(239,68,68,.15); border:1px solid rgba(239,68,68,.4); color:#fca5a5; padding:3px 8px; border-radius:999px; font-size:12px}
.chip{display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:999px; background:var(--muted); border:1px solid rgba(255,255,255,.06);}
.table-wrap{overflow:auto; border:1px solid rgba(255,255,255,.08); border-radius:14px}
.table{width:100%; border-collapse:separate; border-spacing:0}
.table thead th{position:sticky; top:0; background:#14141a; z-index:1}
.table tr:nth-child(even) td{background:rgba(255,255,255,.02)}
.btn-group{display:inline-flex; gap:8px; flex-wrap:wrap}
.stat-card{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px}
.stat-card b{font-size:14px; color:#a8a8b3}
.stat-num{font-size:28px; font-weight:800}


/* ===== Enhanced Admin & UI Styles (extended) ===== */
:root{
  --bg:#0b0b10; --panel:#12121a; --muted:#181824; --border:rgba(255,255,255,.08);
  --text:#e9e9f2; --subtext:#a0a0b8; --brand:#4f46e5; --brand-2:#22d3ee; --danger:#ef4444;
}
.container-watch{max-width:1100px}
.watch-main.card{background:var(--panel); padding:12px; border:1px solid var(--border); border-radius:16px}
.watch-title{margin:10px 0 6px 0; font-size:20px}
.channel-row{display:flex; align-items:center; gap:12px}
.channel-name{font-weight:700}
.subline{color:var(--subtext); font-size:14px}
.card-link{display:block; color:inherit; text-decoration:none}

.form input[type="text"], .form input[type="url"], .form input[type="number"], .form input[type="file"], .form select, .form textarea {
  width:100%; padding:10px 12px; border-radius:10px; background:#0f0f16; border:1px solid var(--border); color:var(--text);
}
.form label{font-size:14px; color:var(--subtext); margin:6px 0 4px 0; display:block}
.btn{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:10px; border:1px solid var(--border); background:#151521; color:var(--text); cursor:pointer; text-decoration:none}
.btn:hover{background:#1b1b2a}
.btn.primary{background:linear-gradient(90deg, var(--brand), var(--brand-2)); border:none; color:#fff}
.btn.danger{background:#2b0d10; color:#ffb4b4; border:1px solid rgba(239,68,68,.4)}

.table-wrap{overflow:auto; border:1px solid var(--border); border-radius:14px}
.table{width:100%; border-collapse:separate; border-spacing:0}
.table th, .table td{padding:10px}
.table thead th{position:sticky; top:0; background:#14141a; z-index:1; text-align:left}
.table tr:nth-child(even) td{background:rgba(255,255,255,.02)}
.filters{display:grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap:10px}

.alert{padding:10px 12px; border-radius:10px; margin:8px 0; background:#12121a; border:1px solid var(--border)}
.alert.error{background:#2b0d10; border-color:rgba(239,68,68,.3); color:#ffd2d2}
.alert.success{background:#0b2a18; border-color:rgba(34,197,94,.3); color:#c8ffd7}

.badge-verified{display:inline-flex; align-items:center; gap:6px; font-size:13px; color:#22d3ee}
.empty{padding:16px; border:1px dashed var(--border); border-radius:12px; color:#a5a6bf}

.admin .form .row{display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:10px}
.admin .btn-group{display:flex; flex-wrap:wrap; gap:8px}