:root{
  --accent: #1b7f3a;
  --bg: #0f0f0f;
  --card: #181818;
  --text: #f1f1f1;
  --muted: #a7a7a7;
  --line: rgba(255,255,255,.08);
  --chip: rgba(255,255,255,.08);
  --chip2: rgba(255,255,255,.12);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}
a{color:inherit;text-decoration:none}
.small{font-size:12px}
.muted{color:var(--muted)}
.app .wrap{max-width:1180px;margin:18px auto;padding:0 14px}
.wrap.narrow{max-width:560px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px}
.alert{background:rgba(27,127,58,.18);border:1px solid rgba(27,127,58,.35);padding:10px 12px;border-radius:12px;margin:10px 0}
.h1{font-size:20px;margin:0 0 12px}
.h2{font-size:16px;margin:0 0 10px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:transparent;color:var(--text);cursor:pointer}
.btn:hover{border-color:rgba(255,255,255,.18)}
.btn-primary{background:var(--accent);border-color:rgba(0,0,0,.2);color:#fff}
.btn-danger{background:rgba(255,60,60,.18);border-color:rgba(255,60,60,.35)}
.btn-sm{padding:7px 10px;border-radius:10px;font-size:13px}
.link{color:var(--text);opacity:.9}
.link:hover{opacity:1;text-decoration:underline}
.linkbtn{background:none;border:none;color:var(--text);cursor:pointer;opacity:.9}
.linkbtn:hover{opacity:1;text-decoration:underline}

.lbl{display:block;font-size:12px;color:var(--muted);margin:10px 0 6px}
.inp{width:100%;padding:12px;border-radius:12px;border:1px solid var(--line);background:#111;color:var(--text);outline:none}
.inp:focus{border-color:rgba(27,127,58,.6);box-shadow:0 0 0 3px rgba(27,127,58,.18)}
textarea.inp{resize:vertical}

.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 14px;border-bottom:1px solid var(--line);background:#0b0b0b;position:sticky;top:0;z-index:50}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.dot{width:10px;height:10px;border-radius:999px;background:var(--accent);display:inline-block}
.toplinks{display:flex;gap:14px;align-items:center}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.kpis{display:flex;gap:18px}
.kpi{font-size:26px;font-weight:800}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.table{margin-top:10px}
.trow{display:grid;grid-template-columns:2.2fr 1.2fr .8fr .8fr 1.2fr;gap:10px;padding:12px 0;border-top:1px solid var(--line);align-items:center}
.thead{color:var(--muted);font-size:12px}

.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.colspan{grid-column:1 / -1}

.yt-top{
  display:grid;
  grid-template-columns:260px 1fr 200px;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  border-bottom:1px solid var(--line);
  background:#0b0b0b;
  position:sticky;top:0;z-index:50
}
.yt-logo{display:flex;align-items:center;gap:10px;font-weight:800}
.yt-logo img{height:50px;width:auto;display:block}
.logo-text{letter-spacing:.2px}
.search{display:flex;gap:10px;justify-content:center}
.search-inp{width:min(760px, 100%);padding:11px 14px;border-radius:999px;border:1px solid var(--line);background:#111;color:var(--text);outline:none}
.search-btn{padding:11px 16px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--text);cursor:pointer}
.search-btn:hover{border-color:rgba(255,255,255,.18)}

.yt-shell{display:grid;grid-template-columns:240px 1fr;gap:14px;max-width:1400px;margin:0 auto;padding:14px}
.yt-side{position:sticky;top:64px;align-self:start;border-right:1px solid var(--line);padding-right:14px;height:calc(100vh - 74px);overflow:auto}
.side-title{font-size:12px;color:var(--muted);margin:6px 0 10px}
.side-item{display:block;padding:10px 10px;border-radius:10px;color:var(--text);opacity:.92}
.side-item:hover{background:rgba(255,255,255,.06)}
.side-item.active{background:rgba(27,127,58,.18);border:1px solid rgba(27,127,58,.35)}
.side-item .count{float:right;color:var(--muted);font-size:12px}

.badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:18px;padding:0 6px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid var(--line);font-size:12px;color:var(--muted)}

.vs-footer{margin-top:18px;border-top:1px solid var(--line);background:#0b0b0b}
.vs-footer .wrap{max-width:1180px;margin:0 auto;padding:18px 14px}
.vs-footer .cols{display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:14px}
.vs-footer h4{margin:0 0 10px;font-size:13px;color:var(--text)}
.vs-footer a{display:block;color:var(--muted);font-size:13px;padding:3px 0}
.vs-footer a:hover{color:var(--text)}
.vs-footer .fine{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;color:var(--muted);font-size:12px}
.vs-footer .secure{font-weight:700;letter-spacing:.4px;color:var(--text);opacity:.9}

@media (max-width:820px){
  .vs-footer .cols{grid-template-columns:repeat(2, minmax(0,1fr))}
}

.grid{display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:14px}
@media (max-width:1100px){ .grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:820px){
  .yt-shell{grid-template-columns:1fr}
  .yt-side{position:relative;top:0;height:auto;border-right:none;padding-right:0}
  .grid{grid-template-columns:repeat(2,1fr)}
  .yt-top{grid-template-columns:1fr}
}
@media (max-width:520px){ .grid{grid-template-columns:1fr} }

.cardv{display:block;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--card)}
.thumb{aspect-ratio:16/9;background:#111;display:flex;align-items:center;justify-content:center}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb-ph{color:var(--muted);font-weight:700}
.thumb-ph.small{font-size:12px}
.meta{padding:10px 10px 12px}
.title{font-size:14px;font-weight:700;line-height:1.25}
.sub{margin-top:6px;font-size:12px;color:var(--muted)}

.watch-shell{max-width:1400px;margin:0 auto;padding:14px;display:grid;grid-template-columns:1fr 390px;gap:16px}
@media (max-width:1100px){ .watch-shell{grid-template-columns:1fr} }

.player-wrap{background:#000;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.player{width:100%;height:auto;display:block;background:#000}
.player-actions{display:flex;gap:10px;padding:10px;background:#0b0b0b;border-top:1px solid var(--line)}
.watch-title{font-size:18px;margin:12px 0 6px}
.watch-sub{font-size:13px;margin-bottom:10px}

.tagrow{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 10px}
.tag{display:inline-flex;align-items:center;padding:7px 10px;border-radius:999px;background:var(--chip);border:1px solid var(--line);font-size:12px}
.tag:hover{background:var(--chip2)}

.desc{margin-top:10px}
.desc-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.desc-body{
  margin-top:10px;
  max-height:72px;
  overflow:hidden;
  color:var(--text);
  opacity:.95;
  line-height:1.45;
}
.desc.expanded .desc-body{max-height:none}

.rel{display:grid;grid-template-columns:160px 1fr;gap:10px;padding:10px;border-radius:14px}
.rel:hover{background:rgba(255,255,255,.06)}
.rel-thumb{aspect-ratio:16/9;background:#111;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.rel-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.rel-title{font-size:13px;font-weight:700;line-height:1.25;margin-bottom:6px}