:root{
  --bg:#0f0f0f; --bg2:#181818; --card:#1c1c1c; --txt:#f1f1f1; --muted:#aaaaaa;
  --red:#ff0033; --border:#303030; --chip:#272727;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Roboto','Segoe UI',Arial,sans-serif;background:var(--bg);color:var(--txt);line-height:1.5}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.muted{color:var(--muted)}
button{font-family:inherit;cursor:pointer}

/* header */
.hdr{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:16px;
  padding:10px 20px;background:var(--bg);border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:8px;font-size:20px;font-weight:800;letter-spacing:-.5px;white-space:nowrap}
.brand .play{width:30px;height:22px;background:var(--red);border-radius:6px;position:relative}
.brand .play::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-40%,-50%);
  border-left:9px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent}
.brand b{color:var(--red)}
.search{flex:1;min-width:0;max-width:560px;margin:0 auto;display:flex}
.search input{flex:1;min-width:0;padding:9px 16px;border:1px solid var(--border);border-right:none;border-radius:40px 0 0 40px;
  background:#121212;color:var(--txt);font-size:15px}
.search input:focus{outline:none;border-color:var(--red)}
.search button{padding:0 20px;border:1px solid var(--border);border-radius:0 40px 40px 0;background:var(--chip);color:var(--txt)}
.hdr-right{display:flex;align-items:center;gap:10px;white-space:nowrap}
.btn{display:inline-flex;align-items:center;gap:7px;border:none;border-radius:40px;padding:9px 16px;font-weight:600;font-size:14px}
.btn.red{background:var(--red);color:#fff}
.btn.ghost{background:transparent;border:1px solid var(--border);color:var(--txt)}
.btn.chip{background:var(--chip);color:var(--txt)}
.btn:hover{opacity:.9}
.avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--red),#ff6a00);
  display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff}

.wrap{max-width:1280px;margin:0 auto;padding:24px 20px}

/* video grid */
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:24px 16px}
.vcard{cursor:pointer}
.vthumb{position:relative;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden}
.vthumb img{width:100%;height:100%;object-fit:cover}
.vthumb .ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#1a1a1a,#2a2a2a);color:#555;font-size:34px}
.vthumb .proc{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.6);color:var(--muted);font-size:14px}
.vcard .info{display:flex;gap:12px;margin-top:10px}
.vcard .ava{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--red),#ff6a00);
  flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px}
.vcard h3{font-size:15px;font-weight:600;line-height:1.3;max-height:2.6em;overflow:hidden}
.vcard .sub{color:var(--muted);font-size:13px;margin-top:3px}

.empty{color:var(--muted);text-align:center;padding:60px 20px;font-size:16px}
.section-t{font-size:16px;font-weight:600;margin:0 0 16px}

/* watch page */
.watch{display:grid;grid-template-columns:1fr 360px;gap:24px;max-width:1280px;margin:0 auto;padding:24px 20px}
.player{aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden}
.player iframe{width:100%;height:100%;border:0}
.wtitle{font-size:20px;font-weight:700;margin:16px 0 10px}
.wbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--border)}
.chan{display:flex;align-items:center;gap:12px}
.chan .ava{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--red),#ff6a00);display:flex;align-items:center;justify-content:center;font-weight:700}
.chan .cn{font-weight:600}
.chan .cs{color:var(--muted);font-size:13px}
.actions{display:flex;gap:8px}
.desc{background:var(--card);border-radius:12px;padding:14px;margin-top:14px;font-size:14px;white-space:pre-wrap}
.cbox{margin-top:24px}
.comment{display:flex;gap:12px;margin-bottom:16px}
.comment .ava{width:36px;height:36px;border-radius:50%;background:#444;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}
.comment .cn{font-size:13px;font-weight:600}.comment .cd{color:var(--muted);font-size:12px;margin-left:6px}
.comment .cb{font-size:14px;margin-top:2px;white-space:pre-wrap;word-break:break-word}
.cform{display:flex;gap:12px;margin:14px 0 26px}
.cform textarea{flex:1;background:transparent;border:none;border-bottom:1px solid var(--border);color:var(--txt);padding:8px 0;font-family:inherit;font-size:14px;resize:vertical}
.cform textarea:focus{outline:none;border-color:var(--txt)}
@media(max-width:1000px){.watch{grid-template-columns:1fr}}
@media(max-width:600px){
  .brand span{display:none}
  .hdr-right .label{display:none}
  .hdr{flex-wrap:wrap;gap:8px;padding:10px 14px}
  .search{order:3;flex-basis:100%;max-width:none}
  .hdr-right{gap:6px}
  .hdr-right .btn{padding:8px 12px}
}

/* footer de site */
.site-foot{max-width:1280px;margin:40px auto 24px;padding:18px 24px;border-top:1px solid var(--border);
  display:flex;gap:18px;align-items:center;color:var(--muted);font-size:13px;flex-wrap:wrap}
.site-foot a{color:var(--muted)}
.site-foot a:hover{color:var(--txt)}

/* channel header */
.chanhead{display:flex;align-items:center;gap:20px;padding:30px 20px;max-width:1280px;margin:0 auto;flex-wrap:wrap}
.chanhead .big{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--red),#ff6a00);display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:800}
.chanhead h1{font-size:24px}

/* modal */
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:100;align-items:center;justify-content:center;padding:20px}
.modal.open{display:flex}
.mbox{background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:28px;max-width:400px;width:100%;position:relative}
.mbox h2{font-size:20px;margin-bottom:4px}
.mbox .tabs{display:flex;gap:8px;margin:16px 0}
.mbox .tabs button{flex:1;padding:9px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--muted)}
.mbox .tabs button.on{background:var(--red);color:#fff;border-color:var(--red)}
.mbox input,.mbox textarea{width:100%;padding:12px;margin-top:10px;border-radius:8px;border:1px solid var(--border);background:#121212;color:var(--txt);font-size:14px;font-family:inherit}
.mbox input:focus,.mbox textarea:focus{outline:none;border-color:var(--red)}
.mbox .mx{position:absolute;top:8px;right:10px;background:none;border:none;color:var(--muted);font-size:24px;
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;line-height:1;border-radius:50%}
.mbox .mx:hover{background:var(--chip)}
.msg{font-size:13px;margin-top:10px;min-height:16px}
.progress{height:6px;background:#333;border-radius:4px;margin-top:12px;overflow:hidden;display:none}
.progress div{height:100%;width:0;background:var(--red);transition:width .3s}

/* ===== PRO POLISH ===== */
/* duration badge */
.vthumb .dur{position:absolute;right:6px;bottom:6px;background:rgba(0,0,0,.85);color:#fff;
  font-size:12px;font-weight:600;padding:1px 5px;border-radius:5px;line-height:1.4}
.vcard .txt{min-width:0;flex:1}
.vcard:hover .vthumb{border-radius:0}
.vcard .vthumb{transition:border-radius .15s}

/* toast */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:#212121;color:#fff;
  padding:12px 20px;border-radius:10px;font-size:14px;box-shadow:0 8px 30px rgba(0,0,0,.5);
  opacity:0;pointer-events:none;transition:.25s;z-index:200;border:1px solid var(--border);max-width:90vw}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.ok{border-left:3px solid #2bd37e}.toast.err{border-left:3px solid var(--red)}

/* chips */
.chips{display:flex;gap:10px;overflow-x:auto;padding:4px 0 18px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip-f{background:var(--chip);color:var(--txt);border:none;border-radius:8px;padding:8px 14px;
  font-size:13px;white-space:nowrap;cursor:pointer}
.chip-f.on{background:#f1f1f1;color:#0f0f0f}

/* skeleton */
.skel{background:linear-gradient(90deg,#1a1a1a 25%,#232323 37%,#1a1a1a 63%);background-size:400% 100%;
  animation:sk 1.2s ease infinite;border-radius:12px}
@keyframes sk{0%{background-position:100% 0}100%{background-position:-100% 0}}
.sk-card .sk-th{aspect-ratio:16/9}
.sk-card .sk-l{height:14px;margin-top:10px;border-radius:4px}
.sk-card .sk-l.s{width:60%;margin-top:6px}

/* channel banner */
.chanbanner{height:140px;background:linear-gradient(120deg,var(--red),#ff6a00 60%,#7a1fff);
  border-radius:0 0 14px 14px;max-width:1280px;margin:0 auto}

/* watch description collapse */
.desc.collapsed{max-height:70px;overflow:hidden;position:relative}
.desc .more{color:var(--txt);font-weight:600;cursor:pointer;display:inline-block;margin-top:6px}
.wmeta{color:var(--muted);font-size:13px;margin-bottom:8px}

/* share/actions */
.actions .btn{gap:6px}

/* comment textarea grows */
.cform textarea{min-height:24px}