/* ============================================================ VLOG.YUSYUS — Advanced UI (dark glassmorphism) ============================================================ */
:root { --bg:#0b0d12; --bg2:#10131a; --card:rgba(255,255,255,.04); --card-border:rgba(255,255,255,.08); --text:#e9edf4; --muted:#8a93a6; --accent:#7c5cff; --accent2:#00d4ff; --glow:rgba(124,92,255,.45); --danger:#ff5470; --success:#2dd4a7; --radius:16px; --font-head:'Sora',sans-serif; --font-body:'Inter',sans-serif; }
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--text); font-family:var(--font-body); font-size:15px; line-height:1.65; min-height:100vh; }
::selection { background:var(--accent); color:#fff; }
::-webkit-scrollbar { width:10px; } ::-webkit-scrollbar-thumb { background:#262c3a; border-radius:8px; }
a { color:inherit; text-decoration:none; }

.bg-orbs { position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.bg-orbs span { position:absolute; border-radius:50%; filter:blur(110px); opacity:.22; animation:drift 26s ease-in-out infinite alternate; }
.bg-orbs span:nth-child(1) { width:520px; height:520px; background:var(--accent); top:-160px; left:-120px; }
.bg-orbs span:nth-child(2) { width:420px; height:420px; background:var(--accent2); bottom:-140px; right:-100px; animation-delay:-8s; }
.bg-orbs span:nth-child(3) { width:300px; height:300px; background:#ff5ea8; top:40%; left:55%; animation-delay:-16s; opacity:.13; }
@keyframes drift { from{transform:translate(0,0) scale(1)} to{transform:translate(70px,50px) scale(1.15)} }

.topbar { position:sticky; top:0; z-index:100; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); background:rgba(11,13,18,.75); border-bottom:1px solid var(--card-border); }
.topbar-inner { max-width:1280px; margin:0 auto; padding:0 20px; height:64px; display:flex; align-items:center; gap:20px; }
.brand { font-family:var(--font-head); font-weight:800; font-size:19px; letter-spacing:-.02em; display:inline-flex; align-items:center; gap:8px; background:linear-gradient(90deg,var(--accent2),var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent; white-space:nowrap; }
.brand i { color:var(--accent2); -webkit-text-fill-color:initial; font-size:21px; }
.brand em { font-style:normal; -webkit-text-fill-color:initial; color:var(--text); font-weight:600; }
.searchbar { flex:1; max-width:480px; display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--card-border); border-radius:999px; padding:8px 16px; transition:border .2s, box-shadow .2s; }
.searchbar:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px var(--glow); }
.searchbar i { color:var(--muted); }
.searchbar input { flex:1; background:none; border:none; outline:none; color:var(--text); font-size:14px; }
.topnav { margin-left:auto; display:flex; align-items:center; gap:12px; }
.icon-btn { position:relative; width:38px; height:38px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; color:var(--muted); border:1px solid var(--card-border); background:var(--card); font-size:17px; transition:all .2s; }
.icon-btn:hover { color:var(--text); border-color:var(--accent); }
.icon-btn.has-dot::after { content:''; position:absolute; top:8px; right:8px; width:8px; height:8px; border-radius:50%; background:var(--danger); box-shadow:0 0 6px var(--danger); }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:11px 22px; border-radius:12px; border:none; cursor:pointer; font-family:var(--font-body); font-weight:600; font-size:14px; transition:transform .15s, box-shadow .2s; }
.btn:active { transform:scale(.97); }
.btn-sm { padding:8px 16px; font-size:13px; }
.btn-glow { background:linear-gradient(135deg,var(--accent),#5e3bff); color:#fff; box-shadow:0 4px 18px var(--glow); }
.btn-glow:hover { box-shadow:0 6px 26px var(--glow); }
.btn-ghost { background:var(--card); color:var(--text); border:1px solid var(--card-border); }
.btn-ghost:hover { border-color:var(--accent); }
.btn-danger { background:var(--danger); color:#fff; }
.btn-success { background:var(--success); color:#06281f; }
.btn-outline { background:transparent; border:1px solid var(--card-border); color:var(--text); }
.btn-outline:hover { border-color:var(--accent); }
.btn[disabled] { opacity:.55; cursor:not-allowed; }

.user-menu { position:relative; }
.avatar-btn { background:none; border:none; cursor:pointer; border-radius:50%; display:block; }
.avatar-btn:hover { outline:2px solid var(--accent); outline-offset:2px; }
.dropdown { position:absolute; right:0; top:calc(100% + 10px); min-width:230px; background:var(--bg2); border:1px solid var(--card-border); border-radius:var(--radius); box-shadow:0 20px 60px rgba(0,0,0,.55); padding:8px; display:none; z-index:200; }
.dropdown.open { display:block; animation:pop .18s ease; }
@keyframes pop { from{opacity:0;transform:translateY(-6px) scale(.97)} to{opacity:1} }
.dd-head { padding:10px 12px; display:flex; flex-direction:column; gap:2px; }
.dd-head span { font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:5px; }
.dropdown a { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; font-size:14px; color:var(--text); }
.dropdown a:hover { background:rgba(124,92,255,.12); }
.dropdown a.danger { color:var(--danger); }
.dropdown hr { border:none; border-top:1px solid var(--card-border); margin:6px 0; }

.avatar { border-radius:50%; object-fit:cover; display:inline-block; flex-shrink:0; }
.avatar-fallback { display:inline-flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-family:var(--font-head); flex-shrink:0; }
.vbadge { color:var(--accent2); display:inline-flex; vertical-align:-2px; }

/* Layout */
.page { max-width:1280px; margin:0 auto; padding:32px 20px 80px; }
.layout { display:grid; grid-template-columns:1fr 320px; gap:28px; align-items:start; }
@media (max-width:900px){ .layout{grid-template-columns:1fr} .sidebar{position:static} }
.card { background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius); padding:24px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.flash { display:flex; align-items:center; gap:10px; margin-bottom:22px; padding:14px 18px; border-radius:12px; font-weight:500; }
.flash-success { background:rgba(45,212,167,.12); color:var(--success); border:1px solid rgba(45,212,167,.35); }
.flash-error { background:rgba(255,84,112,.12); color:var(--danger); border:1px solid rgba(255,84,112,.35); }
.section-title { font-family:var(--font-head); font-size:22px; font-weight:800; letter-spacing:-.02em; margin-bottom:20px; display:flex; align-items:center; gap:10px; }
.section-title i { color:var(--accent); }
.muted { color:var(--muted); }

/* Hero */
.hero { text-align:center; padding:64px 24px 56px; margin-bottom:40px; border-radius:24px; position:relative; overflow:hidden; background:radial-gradient(ellipse at 30% 0%,rgba(124,92,255,.25),transparent 55%),radial-gradient(ellipse at 75% 20%,rgba(0,212,255,.16),transparent 50%),var(--card); border:1px solid var(--card-border); }
.hero h1 { font-family:var(--font-head); font-size:clamp(30px,5vw,52px); font-weight:800; line-height:1.15; letter-spacing:-.03em; margin-bottom:14px; }
.hero h1 .grad { background:linear-gradient(90deg,var(--accent2),var(--accent),#ff5ea8); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p { color:var(--muted); font-size:17px; max-width:560px; margin:0 auto 28px; }
.hero .btn { font-size:15px; padding:13px 30px; }

/* Post cards */
.post-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:22px; }
.post-card { background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius); overflow:hidden; transition:transform .25s, border-color .25s, box-shadow .25s; display:flex; flex-direction:column; }
.post-card:hover { transform:translateY(-5px); border-color:rgba(124,92,255,.5); box-shadow:0 18px 44px rgba(0,0,0,.45); }
.post-thumb { aspect-ratio:16/9; background:linear-gradient(135deg,#1a1e29,#232a3c); position:relative; overflow:hidden; display:block; width:100%; }
.post-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.post-card:hover .post-thumb img { transform:scale(1.05); }
.play-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.25); opacity:0; transition:opacity .25s; }
.post-card:hover .play-overlay { opacity:1; }
.play-overlay i { width:58px; height:58px; border-radius:50%; background:rgba(255,255,255,.95); color:#111; display:flex; align-items:center; justify-content:center; font-size:22px; padding-left:4px; }
.thumb-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:40px; color:#3a4256; }
.post-body { padding:18px 20px 20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.post-title { font-family:var(--font-head); font-weight:700; font-size:17px; line-height:1.35; letter-spacing:-.01em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.post-title a:hover { color:var(--accent2); }
.post-excerpt { color:var(--muted); font-size:13.5px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.post-meta { display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:6px; }
.post-meta .who { display:flex; align-items:center; gap:9px; min-width:0; }
.post-meta .who b { font-size:13.5px; display:flex; align-items:center; gap:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.post-meta .who small { display:block; color:var(--muted); font-size:12px; }
.post-stats { margin-left:auto; display:flex; gap:14px; color:var(--muted); font-size:12.5px; flex-shrink:0; }
.post-stats i { margin-right:3px; }
.tag-chip { display:inline-block; font-size:11.5px; font-weight:600; color:var(--accent2); background:rgba(0,212,255,.09); border:1px solid rgba(0,212,255,.22); padding:3px 10px; border-radius:999px; align-self:flex-start; }

/* Sidebar */
.sidebar { display:flex; flex-direction:column; gap:22px; position:sticky; top:88px; }
.side-title { font-family:var(--font-head); font-weight:700; font-size:15px; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.creator-row { display:flex; align-items:center; gap:11px; padding:8px 0; }
.creator-row b { font-size:14px; display:flex; align-items:center; gap:4px; }
.creator-row small { color:var(--muted); display:block; font-size:12px; }
.creator-row .grow { min-width:0; flex:1; }
.follow-btn-sm { margin-left:auto; padding:6px 14px; border-radius:999px; font-size:12.5px; font-weight:600; border:1px solid var(--accent); background:transparent; color:var(--accent); cursor:pointer; transition:all .2s; }
.follow-btn-sm:hover { background:var(--accent); color:#fff; }
.follow-btn-sm.following { border-color:var(--card-border); color:var(--muted); }
.trend-item { display:flex; gap:12px; padding:9px 0; border-bottom:1px solid var(--card-border); align-items:baseline; }
.trend-item:last-child { border:none; }
.trend-rank { font-family:var(--font-head); font-weight:800; color:var(--accent); font-size:15px; min-width:22px; }
.trend-item a { font-size:13.5px; line-height:1.4; }
.trend-item small { color:var(--muted); display:block; font-size:11.5px; }

/* Forms */
.form-group { margin-bottom:18px; }
.form-label { display:block; font-weight:600; font-size:13px; margin-bottom:7px; }
.input, textarea.input, select.input { width:100%; background:var(--bg2); border:1px solid var(--card-border); border-radius:12px; padding:12px 15px; color:var(--text); font-family:var(--font-body); font-size:14.5px; outline:none; transition:border .2s, box-shadow .2s; }
.input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--glow); }
textarea.input { resize:vertical; min-height:130px; }
.auth-wrap { max-width:440px; margin:40px auto; }
.auth-wrap .card { padding:36px; }
.auth-title { font-family:var(--font-head); font-size:26px; font-weight:800; margin-bottom:6px; letter-spacing:-.02em; }
.auth-sub { color:var(--muted); margin-bottom:26px; font-size:14px; }
.form-error { color:var(--danger); font-size:13px; margin-bottom:14px; display:flex; gap:6px; align-items:center; }

/* Profile */
.profile-head { display:flex; gap:22px; align-items:flex-start; flex-wrap:wrap; padding:34px; margin-bottom:30px; background:radial-gradient(ellipse at 15% 0%,rgba(124,92,255,.2),transparent 55%),var(--card); border:1px solid var(--card-border); border-radius:20px; }
.profile-info h2 { font-family:var(--font-head); font-size:26px; font-weight:800; display:flex; align-items:center; gap:8px; }
.profile-info .handle { color:var(--muted); font-size:14.5px; }
.profile-bio { margin:10px 0 14px; max-width:640px; }
.profile-stats { display:flex; gap:26px; }
.pstat b { font-family:var(--font-head); font-size:19px; display:block; }
.pstat span { color:var(--muted); font-size:12.5px; }

/* Article view */
.article { max-width:820px; margin:0 auto; }
.video-frame { width:100%; aspect-ratio:16/9; border:none; border-radius:var(--radius); background:#000; box-shadow:0 24px 70px rgba(0,0,0,.5); margin-bottom:26px; }
.article h1.title { font-family:var(--font-head); font-size:clamp(26px,4vw,38px); font-weight:800; line-height:1.2; letter-spacing:-.02em; margin:18px 0 14px; }
.article .content { font-size:16.5px; line-height:1.85; color:#ccd3e0; margin:26px 0; white-space:pre-wrap; }
.action-bar { display:flex; align-items:center; gap:14px; padding:14px 0; border-top:1px solid var(--card-border); border-bottom:1px solid var(--card-border); margin:26px 0; flex-wrap:wrap; }
.like-btn { display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border-radius:999px; border:1px solid var(--card-border); background:var(--card); color:var(--text); font-weight:600; cursor:pointer; transition:all .2s; font-size:14px; }
.like-btn:hover { border-color:var(--danger); }
.like-btn.liked { background:rgba(255,84,112,.14); border-color:var(--danger); color:var(--danger); }
.comment { display:flex; gap:12px; padding:16px 0; border-bottom:1px solid var(--card-border); }
.comment-body b { font-size:13.5px; display:flex; align-items:center; gap:5px; }
.comment-body small { color:var(--muted); }
.comment-body p { margin-top:4px; font-size:14.5px; }

/* Admin */
.admin-nav { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:26px; }
.admin-nav .btn.active { background:var(--accent); color:#fff; }
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:18px; margin-bottom:30px; }
.stat-card { background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius); padding:22px; position:relative; overflow:hidden; }
.stat-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--accent),var(--accent2)); }
.stat-card i { font-size:22px; color:var(--accent2); margin-bottom:8px; display:block; }
.data-table { width:100%; border-collapse:collapse; font-size:14px; }
.data-table th { text-align:left; padding:11px 14px; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.06em; border-bottom:1px solid var(--card-border); }
.data-table td { padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.04); vertical-align:middle; }
.data-table tr:hover td { background:rgba(124,92,255,.05); }
.table-scroll { overflow-x:auto; }
.badge-pill { display:inline-block; padding:3px 11px; border-radius:999px; font-size:11.5px; font-weight:700; }
.badge-ok { background:rgba(45,212,167,.15); color:var(--success); }
.badge-off { background:rgba(255,255,255,.07); color:var(--muted); }
.badge-warn { background:rgba(255,196,0,.14); color:#ffc400; }
.notif-row { display:flex; gap:12px; align-items:center; padding:14px 4px; border-bottom:1px solid var(--card-border); }
.notif-row.unread { background:rgba(124,92,255,.06); border-radius:10px; padding-left:12px; }

.site-footer { max-width:1280px; margin:0 auto; padding:26px 20px 40px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; color:var(--muted); font-size:13px; border-top:1px solid var(--card-border); }
@media (max-width:720px) {
    .topbar-inner { gap:10px; padding:0 14px; }
    .searchbar { display:none; }
    .page { padding:20px 14px 60px; }
    .profile-head { padding:24px; }
}

/* --- Overlap guards for big counts --- */
.post-stats { white-space: nowrap; flex-shrink: 0; }
.post-meta .who { min-width: 0; overflow: hidden; }
.post-meta .who small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; display: block; }
@media (max-width:480px){ .post-meta .who small { max-width: 110px; } }
.action-bar span.muted { white-space: nowrap; }
.like-btn { flex-shrink: 0; }
.pstat b { font-size: 17px; }

/* --- Verified badge spacing & no-overlap fixes --- */
.vbadge { flex-shrink: 0; margin: 0 2px; }
.vbadge svg { display: block; }
.post-meta .who b { min-width: 0; }
.post-meta .who b .nm {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 140px;
}
@media (max-width:480px){ .post-meta .who b .nm { max-width: 90px; } }
.dd-head span { flex-wrap: wrap; }
.profile-info h2 { flex-wrap: wrap; }
.action-bar { row-gap: 10px; }
.comment-body b { flex-wrap: wrap; }