/* Videos section — self-contained theme, matching logansandivar.com's palette. */
:root{
  --bg:#0b0b0f; --surface:#111118; --elevated:#16161f;
  --border:rgba(122,162,255,.15); --border-hover:rgba(122,162,255,.40);
  --accent:#7aa2ff; --accent-deep:#4a6dad;
  --text:#e5e5e5; --muted:#8a96b8; --dim:#5a6480;
  --danger:#ff5555; --success:#3ba55d;
  --radius:10px; --nav-h:56px;
  --font:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none !important}   /* beat explicit display: rules (e.g. flex) */
html{background:var(--bg)}          /* paint the whole viewport, not just body height */
html,body{margin:0}
body{
  background:var(--bg); color:var(--text); font-family:var(--font);
  min-height:100vh; line-height:1.5; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:1.4rem; margin:0 0 .3em}
h2{font-size:1.1rem}

/* ---- Nav ---- */
.v-nav{
  position:sticky; top:0; z-index:20; height:var(--nav-h);
  display:flex; align-items:center; gap:14px; padding:0 16px;
  background:rgba(12,12,16,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.v-nav-left{display:flex; align-items:center; gap:10px}
.v-back{font-size:1.2rem; color:var(--muted); text-decoration:none}
.v-back:hover{color:var(--accent)}
.v-brand{font-weight:700; font-size:1.15rem; color:var(--text); text-decoration:none; letter-spacing:.3px}
.v-brand:hover{color:var(--accent); text-decoration:none}
.v-search{flex:1; max-width:520px; display:flex}
.v-search input{
  flex:1; min-width:0; padding:8px 12px; background:var(--surface);
  border:1px solid var(--border); border-right:none;
  border-radius:20px 0 0 20px; color:var(--text); font-size:.9rem;
}
.v-search input:focus{outline:none; border-color:var(--border-hover)}
.v-search button{
  padding:0 16px; background:var(--elevated); border:1px solid var(--border);
  border-radius:0 20px 20px 0; cursor:pointer; color:var(--text);
}
.v-nav-right{display:flex; align-items:center; gap:8px; margin-left:auto}
.v-me{max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ---- Buttons ---- */
.v-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 14px; border-radius:20px; cursor:pointer;
  background:var(--elevated); border:1px solid var(--border);
  color:var(--text); font:inherit; font-size:.85rem; text-decoration:none;
  transition:border-color .15s, background .15s; white-space:nowrap;
}
.v-btn:hover{border-color:var(--border-hover); text-decoration:none}
.v-btn-accent{background:var(--accent); border-color:var(--accent); color:#0b0b0f; font-weight:600}
.v-btn-accent:hover{background:#98b6ff}
.v-btn-danger{color:var(--danger); border-color:rgba(255,85,85,.3)}
.v-btn-danger:hover{border-color:var(--danger); background:rgba(255,85,85,.08)}
.v-btn-lg{padding:11px 20px; font-size:.95rem; border-radius:8px}
.v-link-btn{background:none; border:none; color:var(--dim); cursor:pointer; font:inherit; font-size:.8rem; padding:0}
.v-link-btn:hover{color:var(--danger)}
.v-inline{display:inline}

/* ---- Layout ---- */
.v-main{max-width:1280px; margin:0 auto; padding:22px 16px 60px}
.v-dim{color:var(--dim); font-size:.85rem}
.v-empty{padding:40px 0; text-align:center}
.v-feed-head{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; flex-wrap:wrap}
.v-sort{display:flex; gap:6px}
.v-sort a{padding:5px 12px; border-radius:16px; border:1px solid var(--border); color:var(--muted); font-size:.82rem}
.v-sort a.on{background:var(--accent); color:#0b0b0f; border-color:var(--accent)}

/* ---- Video grid / cards ---- */
.v-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px 16px}
.v-card{display:flex; flex-direction:column}
.v-card-thumb{display:block; position:relative; aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; background:var(--elevated)}
.v-card-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.v-card:hover .v-card-thumb{outline:2px solid var(--border-hover)}
.v-card-dur{position:absolute; right:6px; bottom:6px; background:rgba(0,0,0,.82); color:#fff; font-size:.72rem; padding:1px 6px; border-radius:4px}
.v-card-meta{padding:9px 2px}
.v-card-title{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:var(--text); text-decoration:none; font-weight:600; font-size:.95rem; line-height:1.3}
.v-card-title:hover{text-decoration:none; color:#fff}
.v-card-sub{color:var(--dim); font-size:.8rem; margin-top:3px}
.v-card-chan{color:var(--muted)}

/* ---- Watch ---- */
.v-watch{max-width:960px; margin:0 auto}
.v-player{background:#000; border-radius:var(--radius); overflow:hidden; aspect-ratio:16/9}
.v-player video{width:100%; height:100%; display:block; background:#000}
.v-watch-title{margin:16px 0 10px; font-size:1.3rem}
.v-watch-bar{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-bottom:14px; border-bottom:1px solid var(--border)}
.v-chan-block{display:flex; flex-direction:column}
.v-chan-name{font-weight:700; font-size:1rem; color:var(--text)}
.v-actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.v-votes{display:flex; background:var(--elevated); border-radius:20px; overflow:hidden}
.v-vote{display:inline-flex; align-items:center; gap:5px; padding:7px 14px; background:none; border:none; color:var(--text); cursor:pointer; font:inherit; font-size:.85rem}
.v-vote:hover{background:rgba(122,162,255,.1)}
.v-vote.on{color:var(--accent); font-weight:700}
.v-vote span{font-size:.9rem}
.v-report{position:relative}
.v-report summary{list-style:none}
.v-report summary::-webkit-details-marker{display:none}
.v-report-form{position:absolute; right:0; top:110%; z-index:5; width:280px; background:var(--elevated); border:1px solid var(--border); border-radius:var(--radius); padding:12px}
.v-watch-meta{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px; margin:14px 0}
.v-desc{margin-top:8px; white-space:pre-wrap; word-break:break-word}

/* ---- Comments ---- */
.v-comments{margin-top:24px}
.v-comment-form,.v-report-form,.v-comment{margin-bottom:16px}
.v-comment-form textarea,.v-form textarea,.v-report-form textarea{width:100%}
.v-comment{border-top:1px solid var(--border); padding-top:12px}
.v-comment-head{display:flex; gap:8px; align-items:baseline}
.v-comment-author{font-weight:600; font-size:.9rem; color:var(--text)}
.v-comment-body{margin:3px 0; white-space:pre-wrap; word-break:break-word}
.v-comment-actions{display:flex; gap:12px}

/* ---- Forms ---- */
.v-form{display:flex; flex-direction:column; gap:12px; max-width:440px}
.v-form label{display:flex; flex-direction:column; gap:5px; font-size:.85rem; color:var(--muted)}
.v-form input,.v-form textarea,.v-comment-form textarea{
  padding:9px 11px; background:var(--surface); border:1px solid var(--border);
  border-radius:8px; color:var(--text); font:inherit; font-size:.92rem;
}
.v-form input:focus,.v-form textarea:focus,textarea:focus{outline:none; border-color:var(--border-hover)}
.v-auth,.v-upload{max-width:440px; margin:30px auto}
.v-upload{max-width:560px}
.v-error{background:rgba(255,85,85,.1); border:1px solid rgba(255,85,85,.35); color:#ffb0b0; padding:10px 12px; border-radius:8px; font-size:.9rem; margin-bottom:14px}
.v-flash{max-width:960px; margin:0 auto 14px; background:rgba(59,165,93,.12); border:1px solid rgba(59,165,93,.4); color:#a5e0b8; padding:10px 14px; border-radius:8px}
.v-pw{font-family:'Consolas','Courier New',monospace; font-size:1.05rem; font-weight:700; color:#fff; background:rgba(122,162,255,.2); border:1px solid var(--border-hover); border-radius:6px; padding:2px 8px; letter-spacing:1px; user-select:all}
.v-pwreset-form{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:6px 0 14px}
.v-pwreset-form input{background:var(--surface); border:1px solid var(--border); border-radius:8px; color:var(--text); font:inherit; padding:8px 11px; width:230px}
.v-thumbwrap{display:flex; flex-direction:column; gap:8px; padding:12px; background:var(--surface); border:1px solid var(--border); border-radius:8px}
.v-thumbwrap img{max-width:240px; border-radius:6px; border:1px solid var(--border)}
.v-thumb-custom{font-size:.8rem}
.v-progress{height:8px; background:var(--elevated); border-radius:6px; overflow:hidden}
.v-progress-bar{height:100%; width:0; background:var(--accent); transition:width .15s}

/* ---- Channel ---- */
.v-channel-head{display:flex; gap:18px; align-items:center; margin-bottom:24px; flex-wrap:wrap}
.v-avatar,.v-chip-av{display:grid; place-items:center; background:linear-gradient(135deg,var(--accent),var(--accent-deep)); color:#0b0b0f; font-weight:800; border-radius:50%}
.v-avatar{width:72px; height:72px; font-size:1.8rem}
.v-channel-info{flex:1; min-width:200px}
.v-channel-info h1{display:flex; align-items:center; gap:10px}
.v-about{margin:8px 0 0; color:var(--muted); font-size:.9rem; white-space:pre-wrap}
.v-badge{font-size:.65rem; text-transform:uppercase; letter-spacing:.5px; background:var(--accent); color:#0b0b0f; padding:2px 7px; border-radius:10px; font-weight:700}
.v-channel-actions{display:flex; gap:8px}

/* ---- Subscriptions chips ---- */
.v-chips{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px}
.v-chip{display:inline-flex; align-items:center; gap:8px; padding:6px 12px 6px 6px; background:var(--surface); border:1px solid var(--border); border-radius:20px; color:var(--text); font-size:.85rem}
.v-chip-av{width:26px; height:26px; font-size:.8rem}

/* ---- Admin ---- */
.v-stats{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:10px}
.v-stat{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:12px 18px; min-width:96px}
.v-stat b{display:block; font-size:1.4rem}
.v-stat span{color:var(--dim); font-size:.78rem}
.v-section{margin:26px 0 12px; border-bottom:1px solid var(--border); padding-bottom:6px}

/* ---- Personal dashboard (me.php) ---- */
.v-dash-head{display:flex; align-items:center; gap:18px; margin-bottom:6px; flex-wrap:wrap}
.v-dash-id{flex:1; min-width:200px}
.v-dash-id h1{font-size:1.6rem; display:flex; align-items:center; gap:8px}
.v-dash-actions{display:flex; gap:10px; flex-wrap:wrap}
.v-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:12px; margin:18px 0 6px}
.v-stat{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px; display:flex; flex-direction:column; gap:4px}
.v-stat-num{font-size:1.2rem; font-weight:700; white-space:nowrap}
.v-stat-lbl{font-size:.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:.5px}
.v-dash-sec{margin-top:10px}
.v-sec-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:26px 0 14px; border-bottom:1px solid var(--border); padding-bottom:8px; flex-wrap:wrap}
.v-sec-head .v-section{margin:0; border:none; padding:0}
.v-sec-actions{display:flex; gap:8px; flex-wrap:wrap}
.v-wallet{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px; display:flex; flex-direction:column; gap:9px}
.v-wallet-bal{font-size:1.5rem}
.v-wallet-bal b{color:var(--accent)}
.v-net{color:var(--accent)}
.v-items{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
.v-item-chip{display:inline-flex; align-items:center; gap:7px; background:var(--elevated); border:1px solid var(--border); border-radius:999px; padding:6px 12px; font-size:.82rem}
.v-item-dot{width:8px; height:8px; border-radius:50%; flex:0 0 auto}
.v-item-name{color:var(--text)}
.v-item-val{color:var(--muted); font-size:.76rem}
.v-item-more{align-self:center; color:var(--accent); font-size:.82rem; text-decoration:none; padding:6px 4px}
.v-report-row{display:flex; justify-content:space-between; gap:14px; padding:14px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:10px; flex-wrap:wrap}
.v-report-main{flex:1; min-width:220px}
.v-report-quote,.v-report-reason{margin:5px 0; font-size:.85rem}
.v-report-reason{color:var(--text)}
.v-report-quote{color:var(--muted); border-left:2px solid var(--border); padding-left:8px}
.v-report-buttons{display:flex; gap:8px; align-items:flex-start; flex-wrap:wrap}
.v-tag{display:inline-block; font-size:.68rem; text-transform:uppercase; letter-spacing:.5px; background:var(--elevated); border:1px solid var(--border); color:var(--muted); padding:2px 7px; border-radius:6px; margin-right:6px}

/* ---- Avatars (image variant of the letter tiles) ---- */
.v-av-img{object-fit:cover; padding:0}
img.v-avatar{background:none}

/* ---- Warning banner ---- */
.v-warn-banner{max-width:960px; margin:0 auto 16px; background:rgba(250,166,26,.1); border:1px solid rgba(250,166,26,.5); border-radius:var(--radius); padding:14px 16px}
.v-warn-head{font-weight:700; color:#ffcf7a; margin-bottom:6px}
.v-warn-reason{margin:3px 0}
.v-warn-foot{color:var(--muted); font-size:.85rem; margin:8px 0}

/* ---- Settings ---- */
.v-settings-avatar{display:flex; gap:18px; align-items:flex-start; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:14px}
.v-checkline{flex-direction:row !important; align-items:center; gap:6px; margin-top:8px; color:var(--muted)}
.v-checkline input{width:auto}
.v-form-row{display:flex; gap:10px}

/* ---- Comments with avatar ---- */
.v-comment{display:flex; gap:12px}
.v-comment-av{flex:0 0 auto}
.v-comment-main{flex:1; min-width:0}

/* ---- User management (admin) ---- */
.v-usersearch{display:flex; gap:8px; margin-bottom:16px; max-width:420px}
.v-usersearch input{flex:1; padding:8px 12px; background:var(--surface); border:1px solid var(--border); border-radius:8px; color:var(--text); font:inherit}
.v-usertable{display:flex; flex-direction:column; gap:6px}
.v-userrow{display:grid; grid-template-columns:2fr 1fr .7fr .8fr .9fr; gap:12px; align-items:center; padding:10px 14px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); color:var(--text); text-decoration:none}
a.v-userrow:hover{border-color:var(--border-hover); text-decoration:none}
.v-userhead{background:none; border:none; color:var(--dim); font-size:.78rem; text-transform:uppercase; letter-spacing:.5px; padding-bottom:0}
.v-usercell{display:flex; align-items:center; gap:10px; min-width:0}
.v-usercell b{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.v-warn-count{color:var(--warning,#faa61a); font-weight:700}
.v-tag-owner{color:var(--accent); border-color:var(--accent)}
.v-tag-banned{color:var(--danger); border-color:rgba(255,85,85,.4)}
.v-tag-muted{color:#faa61a; border-color:rgba(250,166,26,.4)}

/* ---- Moderation panel ---- */
.v-modpanel{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px; margin-bottom:8px; display:flex; flex-direction:column; gap:12px}
.v-warnform{display:flex; flex-direction:column; gap:8px; max-width:560px}
.v-warnform textarea{width:100%; padding:9px 11px; background:var(--bg); border:1px solid var(--border); border-radius:8px; color:var(--text); font:inherit}
.v-modbtns{display:flex; gap:8px; flex-wrap:wrap}
.v-modlist{display:flex; flex-direction:column; gap:6px}
.v-modline{display:flex; align-items:center; gap:12px; padding:9px 12px; background:var(--surface); border:1px solid var(--border); border-radius:8px; flex-wrap:wrap}
.v-modline a:first-child{font-weight:600}
.v-modcomment{flex:1; min-width:160px}
.v-modline form{margin-left:auto}

/* ---- Footer ---- */
.v-footer{max-width:1280px; margin:40px auto 0; padding:20px 16px; border-top:1px solid var(--border); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; color:var(--dim); font-size:.8rem}

@media(max-width:640px){
  .v-search{order:3; flex-basis:100%; max-width:none}
  .v-nav{height:auto; flex-wrap:wrap; padding:10px 12px; gap:10px}
  .v-me{display:none}
}