/* ==========================================
   Viewsob Frontend - Consolidated Styles
   ========================================== */

:root{
    --primary:#2f54eb;
    --secondary:#3b82f6;
    --bg:#08111f;
    --card:#0f1d33;
    --text:#ffffff;
    --text2:#b5bfd3;
    --border:rgba(255,255,255,.08);
    --radius:14px;
    --transition:.30s ease;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ overflow-x:hidden; max-width:100%; }
body{ background:var(--bg); font-family:Inter,sans-serif; color:var(--text); overflow-x:hidden; max-width:100%; }
a{ text-decoration:none; }
button{ border:none; outline:none; cursor:pointer; font-family:inherit; }
img{ max-width:100%; display:block; }

/* ---------- Navbar ---------- */

.vs-header{
    position:sticky; top:0; left:0; width:100%; z-index:9999;
    background:rgba(8,17,31,.92); backdrop-filter:blur(15px); border-bottom:1px solid var(--border);
}
.vs-container{ width:min(1400px,92%); margin:auto; height:82px; display:flex; align-items:center; justify-content:space-between; }
.vs-logo img{ height:44px; }
.vs-nav{ overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; scrollbar-color:var(--primary) transparent; min-width:0; flex:1 1 auto; }
.vs-nav::-webkit-scrollbar{ height:4px; }
.vs-nav::-webkit-scrollbar-thumb{ background:var(--primary); border-radius:10px; }
.vs-nav ul{ display:flex; align-items:center; gap:45px; list-style:none; flex-wrap:nowrap; }
.vs-nav a{ color:var(--text2); font-size:15px; font-weight:600; transition:var(--transition); white-space:nowrap; }
.vs-nav a:hover, .vs-nav a.active{ color:#fff; }
.vs-right{ display:flex; align-items:center; gap:15px; }
.vs-btn{ height:46px; padding:0 26px; border-radius:999px; background:linear-gradient(135deg,var(--primary),var(--secondary)); color:#fff; font-weight:700; transition:var(--transition); }
.vs-btn:hover{ transform:translateY(-2px); box-shadow:0 10px 25px rgba(47,84,235,.45); }
.vs-btn-outline{ height:46px; padding:0 24px; border-radius:999px; color:#fff; background:transparent; border:1px solid var(--border); transition:var(--transition); }
.vs-btn-outline:hover{ background:#15233b; }
.vs-mobile-toggle{ display:none; width:46px; height:46px; border-radius:12px; background:#15233b; flex-direction:column; justify-content:center; align-items:center; gap:5px; }
.vs-mobile-toggle span{ width:22px; height:2px; background:#fff; border-radius:20px; }
.vs-mobile-menu{ display:none; }

.vs-user-area{ display:flex; align-items:center; gap:18px; }
.vs-notification-btn{ position:relative; width:48px; height:48px; display:flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:50%; background:#15233b; color:#fff; transition:var(--transition); }
.vs-notification-btn:hover{ background:#1d3153; transform:translateY(-2px); }
.vs-notification-count{ position:absolute; top:-5px; right:-5px; min-width:20px; height:20px; padding:0 5px; display:flex; align-items:center; justify-content:center; background:#ff3b30; color:#fff; border-radius:20px; font-size:11px; font-weight:700; }
.vs-profile-button{ width:48px; height:48px; border-radius:50%; overflow:hidden; border:2px solid var(--border); background:#15233b; transition:var(--transition); position:relative; }
.vs-profile-button:hover{ border-color:var(--primary); }
.vs-profile-button img{ width:100%; height:100%; object-fit:cover; }

.vs-profile-dropdown{
    position:absolute; top:68px; right:0; width:330px; background:var(--card); border:1px solid var(--border);
    border-radius:18px; box-shadow:0 18px 45px rgba(0,0,0,.35);
    opacity:0; visibility:hidden; transform:translateY(15px); transition:.30s ease; z-index:9999;
    max-height:calc(100vh - 100px); overflow-y:auto;
}
.vs-profile-dropdown.active{ opacity:1; visibility:visible; transform:translateY(0); }
.vs-profile-balance{ padding:22px; border-bottom:1px solid var(--border); }
.vs-balance-label{ display:block; color:#aab7d0; font-size:13px; margin-bottom:8px; }
.vs-balance-points{ color:#fff; font-size:28px; font-weight:700; }
.vs-dropdown-section{ padding:18px 0; border-bottom:1px solid rgba(255,255,255,.06); }
.vs-dropdown-title{ display:block; color:#7f90b1; font-size:12px; font-weight:700; letter-spacing:1px; padding:0 22px 12px; }
.vs-dropdown-section a{ display:flex; align-items:center; gap:12px; padding:13px 22px; color:#fff; font-size:15px; transition:.25s; }
.vs-dropdown-section a:hover{ background:#182a47; }
a.vs-mobile-only{ display:none; }
.vs-disabled-link{ opacity:.6; pointer-events:none; }
.vs-disabled-link small{ margin-left:auto; font-size:11px; color:#ffcb5a; }
.vs-dropdown-footer{ padding:18px; }
.vs-logout-btn{ width:100%; height:48px; border-radius:12px; background:#e53935; color:#fff; font-size:15px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:10px; transition:.25s; }
.vs-logout-btn:hover{ background:#c62828; }

/* ---------- Popups (Login/Signup) ---------- */

.vs-popup-overlay{
    position:fixed; inset:0; display:flex; align-items:flex-start; justify-content:center;
    background:rgba(0,0,0,.75); backdrop-filter:blur(6px); opacity:0; visibility:hidden;
    transition:.30s; z-index:99999; overflow-y:auto; padding:40px 16px;
}
.vs-popup-overlay.active{ opacity:1; visibility:visible; }
.vs-popup{ width:100%; max-width:460px; max-height:none; background:var(--card); border:1px solid var(--border); border-radius:20px; padding:35px; position:relative; transform:translateY(20px); transition:.30s; margin:auto; }
.vs-popup-overlay.active .vs-popup{ transform:translateY(0); }
.vs-popup-close{ position:absolute; top:18px; right:18px; width:40px; height:40px; border-radius:50%; background:#182a47; color:#fff; font-size:24px; }
.vs-popup-header{ text-align:center; margin-bottom:28px; }
.vs-popup-header img{ height:46px; margin:0 auto 18px; }
.vs-popup-header h2{ color:#fff; font-size:28px; margin-bottom:8px; }
.vs-popup-header p{ color:#9eb0cf; font-size:15px; }
.vs-popup-header .vs-session-notice{ margin:14px 0 0; padding:10px 14px; border-radius:12px; background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.35); color:#fbbf24; font-size:13px; font-weight:600; line-height:1.4; }
/* Session-ended login popup: always above any other popup that may be open, and not dismissible when the page behind it is stale. */
#loginPopup.vs-session-ended{ z-index:100001; }
#loginPopup.vs-popup-locked .vs-popup-close{ display:none; }

/* ---------- PTC task result icon ---------- */
.vs-ptc-popup-icon{ display:none; width:64px; height:64px; margin:0 auto 18px; border-radius:50%; align-items:center; justify-content:center; font-size:30px; font-weight:800; line-height:1; animation:vsPtcIconPop .35s ease; }
.vs-ptc-popup-icon:empty{ display:none !important; }
.vs-ptc-icon-success{ display:flex; background:rgba(34,197,94,.15); color:#22c55e; box-shadow:0 0 0 6px rgba(34,197,94,.10); }
.vs-ptc-icon-failed{ display:flex; background:rgba(245,158,11,.15); color:#f59e0b; box-shadow:0 0 0 6px rgba(245,158,11,.10); }
.vs-ptc-icon-pending{ display:flex; background:rgba(77,141,255,.15); color:#4d8dff; box-shadow:0 0 0 6px rgba(77,141,255,.10); }
.vs-ptc-icon-verifying{ display:flex; background:rgba(77,141,255,.12); color:#4d8dff; }
/* ---- PTC popup: paused + completed cards ---- */
.vs-popup.vs-ptc-card-success{
    overflow:hidden;
    border-color:rgba(34,197,94,.38);
    background:radial-gradient(120% 70% at 50% 0%, rgba(34,197,94,.16), transparent 62%), var(--card);
    box-shadow:0 24px 70px rgba(0,0,0,.5), 0 0 0 1px rgba(34,197,94,.08), 0 0 60px rgba(34,197,94,.10);
}
.vs-popup.vs-ptc-card-paused{
    border-color:rgba(245,158,11,.38);
    background:radial-gradient(120% 70% at 50% 0%, rgba(245,158,11,.13), transparent 62%), var(--card);
    box-shadow:0 24px 70px rgba(0,0,0,.5), 0 0 0 1px rgba(245,158,11,.08);
}
.vs-ptc-icon-paused{ display:flex; background:rgba(245,158,11,.15); color:#f59e0b; box-shadow:0 0 0 6px rgba(245,158,11,.10); }
#ptcTaskTimer.vs-ptc-timer-paused{ color:#fbbf24 !important; animation:vsPtcBlink 1.6s ease-in-out infinite; }
.vs-ptc-reopen-btn{ width:100%; margin-top:4px; }
@keyframes vsPtcBlink{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }

.vs-ptc-popup-icon.vs-ptc-icon-check{ position:relative; width:78px; height:78px; margin-bottom:22px; overflow:visible; box-shadow:0 0 0 7px rgba(34,197,94,.10), 0 0 34px rgba(34,197,94,.30); }
.vs-ptc-icon-check svg{ width:100%; height:100%; display:block; }
.vs-ptc-check-ring{ fill:none; stroke:#22c55e; stroke-width:2.5; stroke-dasharray:146; stroke-dashoffset:146; animation:vsPtcDraw .6s ease forwards; }
.vs-ptc-check-mark{ fill:none; stroke:#4ade80; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:42; stroke-dashoffset:42; animation:vsPtcDraw .4s .45s ease forwards; }
.vs-ptc-icon-check::after{ content:""; position:absolute; inset:-9px; border-radius:50%; border:2px solid rgba(34,197,94,.5); opacity:0; animation:vsPtcRing 1.5s ease-out .5s 2; }
.vs-ptc-spark{ position:absolute; left:50%; top:50%; width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:50%; background:#4ade80; opacity:0; animation:vsPtcSpark .9s ease-out .55s forwards; }
.vs-ptc-spark.s2,.vs-ptc-spark.s5,.vs-ptc-spark.s7{ background:#fbbf24; width:5px; height:5px; }
.vs-ptc-spark.s1{ --x:0px;   --y:-58px; }
.vs-ptc-spark.s2{ --x:41px;  --y:-41px; }
.vs-ptc-spark.s3{ --x:58px;  --y:0px; }
.vs-ptc-spark.s4{ --x:41px;  --y:41px; }
.vs-ptc-spark.s5{ --x:0px;   --y:58px; }
.vs-ptc-spark.s6{ --x:-41px; --y:41px; }
.vs-ptc-spark.s7{ --x:-58px; --y:0px; }
.vs-ptc-spark.s8{ --x:-41px; --y:-41px; }
@keyframes vsPtcDraw{ to{ stroke-dashoffset:0; } }
@keyframes vsPtcRing{ 0%{ transform:scale(.85); opacity:.7; } 100%{ transform:scale(1.35); opacity:0; } }
@keyframes vsPtcSpark{ 0%{ transform:translate(0,0) scale(.4); opacity:1; } 100%{ transform:translate(var(--x),var(--y)) scale(1); opacity:0; } }

.vs-popup-header p .vs-ptc-win-amount,
.vs-ptc-win-amount{ display:block; font-size:44px; font-weight:800; line-height:1.1; letter-spacing:-.5px; background:linear-gradient(135deg,#86efac,#22c55e 55%,#4ade80); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.vs-ptc-win-label{ display:block; margin-top:8px; font-size:12px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:#7e93b8; }

@media (prefers-reduced-motion:reduce){
    .vs-ptc-check-ring,.vs-ptc-check-mark{ animation:none; stroke-dashoffset:0; }
    .vs-ptc-icon-check::after,.vs-ptc-spark{ animation:none; opacity:0; }
    #ptcTaskTimer.vs-ptc-timer-paused{ animation:none; }
}

/* ---- Account > Withdrawal History ---- */
.vs-wh-summary{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:22px; }
.vs-wh-stat{ background:#0b1626; border:1px solid var(--border); border-radius:14px; padding:16px 18px; min-width:0; }
.vs-wh-stat.hero{ grid-column:1/-1; border-color:rgba(34,197,94,.28); background:radial-gradient(120% 150% at 0% 0%, rgba(34,197,94,.16), transparent 60%), #0b1626; }
.vs-wh-stat-label{ color:#6f86b3; font-size:11.5px; font-weight:700; letter-spacing:.9px; text-transform:uppercase; }
.vs-wh-stat-value{ color:#fff; font-size:22px; font-weight:800; margin-top:6px; line-height:1.15; overflow-wrap:anywhere; }
.vs-wh-stat-value small{ font-size:12px; font-weight:600; color:#7e93b8; margin-left:5px; }
.vs-wh-stat-value.pending{ color:#fbbf24; }
.vs-wh-stat.hero .vs-wh-stat-value{ font-size:34px; background:linear-gradient(135deg,#86efac,#22c55e 60%,#4ade80); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.vs-wh-stat.hero .vs-wh-stat-value small{ -webkit-text-fill-color:#7e93b8; }
.vs-wh-stat-sub{ color:#6f86b3; font-size:12.5px; margin-top:6px; }

.vs-wh-card{ background:#0b1626; border:1px solid var(--border); border-left:3px solid #2a3d5e; border-radius:16px; padding:18px; margin-bottom:14px; transition:border-color .25s, box-shadow .25s; }
.vs-wh-card:hover{ box-shadow:0 10px 30px rgba(0,0,0,.35); }
.vs-wh-card.s-approved{ border-left-color:#22c55e; }
.vs-wh-card.s-pending{ border-left-color:#f59e0b; }
.vs-wh-card.s-processing{ border-left-color:#3b82f6; }
.vs-wh-card.s-rejected{ border-left-color:#ef4444; }
.vs-wh-enter{ animation:vsWhIn .4s cubic-bezier(.2,.8,.2,1) backwards; animation-delay:var(--d,0s); }
@keyframes vsWhIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

.vs-wh-top{ display:flex; align-items:center; gap:12px; }
.vs-wh-method-icon{ flex-shrink:0; width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:800; color:#fff; box-shadow:0 4px 14px rgba(0,0,0,.35); }
.vs-wh-method{ flex:1; min-width:0; }
.vs-wh-method-name{ color:#fff; font-weight:700; font-size:15.5px; }
.vs-wh-account{ color:#6f86b3; font-size:12.5px; margin-top:3px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; overflow-wrap:anywhere; }
.vs-wh-chip{ flex-shrink:0; padding:5px 11px; border-radius:20px; font-size:11px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; }
.vs-wh-chip.pending{ background:rgba(245,158,11,.15); color:#fbbf24; }
.vs-wh-chip.processing{ background:rgba(59,130,246,.15); color:#60a5fa; }
.vs-wh-chip.approved{ background:rgba(34,197,94,.15); color:#4ade80; }
.vs-wh-chip.rejected{ background:rgba(239,68,68,.15); color:#f87171; }

.vs-wh-amount-row{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:16px 0 14px; padding:13px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.vs-wh-points{ color:#fff; font-size:24px; font-weight:800; }
.vs-wh-points small{ font-size:12px; font-weight:600; color:#7e93b8; margin-left:5px; }
.vs-wh-ref{ color:#6f86b3; font-size:12px; }

.vs-wh-timeline{ list-style:none; margin:0; padding:0; }
.vs-wh-step{ position:relative; display:flex; flex-wrap:wrap; justify-content:space-between; gap:2px 12px; padding:0 0 14px 24px; font-size:13px; }
.vs-wh-step:last-child{ padding-bottom:0; }
.vs-wh-step::before{ content:""; position:absolute; left:0; top:3px; width:12px; height:12px; border-radius:50%; box-sizing:border-box; background:#13233d; border:2px solid #2a3d5e; }
.vs-wh-step::after{ content:""; position:absolute; left:5px; top:17px; bottom:-1px; width:2px; background:#1b2b47; }
.vs-wh-step:last-child::after{ display:none; }
.vs-wh-step.done::before{ background:#22c55e; border-color:#22c55e; }
.vs-wh-step.done::after{ background:rgba(34,197,94,.45); }
.vs-wh-step.current::before{ background:#f59e0b; border-color:#f59e0b; animation:vsWhPulse 1.7s ease-out infinite; }
.vs-wh-step.fail::before{ background:#ef4444; border-color:#ef4444; }
.vs-wh-step-label{ color:#9eb0cf; font-weight:600; }
.vs-wh-step.done .vs-wh-step-label, .vs-wh-step.current .vs-wh-step-label, .vs-wh-step.fail .vs-wh-step-label{ color:#fff; }
.vs-wh-step-date{ color:#6f86b3; font-size:12.5px; }
@keyframes vsWhPulse{ 0%{ box-shadow:0 0 0 0 rgba(245,158,11,.55); } 100%{ box-shadow:0 0 0 9px rgba(245,158,11,0); } }

.vs-wh-note{ margin-top:14px; padding:10px 12px; border-radius:10px; background:rgba(148,163,184,.08); color:#9eb0cf; font-size:12.5px; line-height:1.5; }
.vs-wh-note strong{ color:#d5deed; }

.vs-wh-more{ display:none; width:100%; margin-top:6px; padding:13px; border-radius:12px; border:1px solid var(--border); background:transparent; color:#d5deed; font-size:14px; font-weight:700; cursor:pointer; transition:.25s; }
.vs-wh-more:hover{ border-color:var(--primary); color:#fff; }

.vs-wh-empty{ text-align:center; padding:40px 18px; border:1px dashed var(--border); border-radius:16px; background:#0b1626; }
.vs-wh-empty-icon{ font-size:38px; margin-bottom:10px; }
.vs-wh-empty h4{ color:#fff; font-size:17px; margin:0 0 6px; }
.vs-wh-empty p{ color:#9eb0cf; font-size:13.5px; margin:0 auto 18px; max-width:340px; }
.vs-wh-empty-btn{ display:inline-block; width:auto; padding:12px 26px; text-decoration:none; text-align:center; }

.vs-wh-skel{ border-left-color:#1b2b47; }
.vs-wh-sk{ display:block; border-radius:8px; background:linear-gradient(100deg, rgba(255,255,255,.035) 30%, rgba(255,255,255,.10) 50%, rgba(255,255,255,.035) 70%); background-size:300% 100%; animation:vsSkShimmer 1.7s ease-in-out infinite; }
.vs-wh-sk-icon{ width:46px; height:46px; border-radius:13px; flex-shrink:0; }
.vs-wh-sk-line{ height:13px; margin-bottom:8px; }
.vs-wh-sk-line.a{ width:55%; }
.vs-wh-sk-line.b{ width:35%; height:10px; margin-bottom:0; }
.vs-wh-sk-chip{ width:64px; height:22px; border-radius:20px; flex-shrink:0; }
.vs-wh-sk-block{ height:96px; margin-top:16px; }

@media (min-width:900px){
    .vs-wh-summary{ grid-template-columns:2fr 1fr 1fr; }
    .vs-wh-stat.hero{ grid-column:auto; }
}
@media (max-width:480px){
    .vs-wh-card{ padding:16px 14px; }
    .vs-wh-points{ font-size:22px; }
    .vs-wh-stat.hero .vs-wh-stat-value{ font-size:30px; }
}
@media (prefers-reduced-motion:reduce){
    .vs-wh-enter, .vs-wh-sk, .vs-wh-step.current::before{ animation:none; }
}

/* ---- Forgot / reset password ---- */
.vs-forgot-row{ text-align:right; margin-top:8px; }
.vs-forgot-link{ color:var(--primary); font-size:13px; font-weight:600; text-decoration:none; }
.vs-forgot-link:hover{ text-decoration:underline; }

.vs-popup-msg{ margin:4px 0 14px; padding:10px 14px; border-radius:12px; font-size:13px; font-weight:600; line-height:1.45; text-align:left; background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.35); color:#f87171; }
.vs-popup-msg.success{ background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.35); color:#4ade80; text-align:center; }
.vs-popup-msg.error{ background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.35); color:#f87171; }

.vs-auth-icon{ width:68px; height:68px; margin:0 auto 14px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#4d8dff; background:rgba(77,141,255,.14); box-shadow:0 0 0 7px rgba(77,141,255,.07); }
.vs-auth-icon.mail{ width:78px; height:78px; color:#4d8dff; animation:vsAuthFloat 3s ease-in-out infinite; }
.vs-auth-icon.error{ color:#f59e0b; background:rgba(245,158,11,.14); box-shadow:0 0 0 7px rgba(245,158,11,.07); }
.vs-auth-icon.success{ width:78px; height:78px; background:rgba(34,197,94,.12); box-shadow:0 0 0 7px rgba(34,197,94,.08), 0 0 34px rgba(34,197,94,.25); }
.vs-auth-icon.success svg{ width:100%; height:100%; display:block; }
@keyframes vsAuthFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }

.vs-auth-state{ text-align:center; padding:6px 0 4px; }
.vs-auth-state h2{ color:#fff; font-size:22px; margin:0 0 10px; }
.vs-auth-state p{ color:#9eb0cf; font-size:14px; line-height:1.6; margin:0 0 16px; }
.vs-auth-state p strong{ color:#fff; overflow-wrap:anywhere; }
.vs-auth-state .vs-auth-tip{ font-size:12.5px; color:#6f86b3; }
.vs-auth-secondary-btn{ width:100%; padding:13px; border-radius:12px; border:1px solid var(--border); background:transparent; color:#d5deed; font-size:14px; font-weight:700; cursor:pointer; transition:.25s; }
.vs-auth-secondary-btn:hover:not(:disabled){ border-color:var(--primary); color:#fff; }
.vs-auth-secondary-btn:disabled{ opacity:.55; cursor:not-allowed; }
.vs-auth-help{ font-size:12.5px; }

.vs-auth-spinner{ width:46px; height:46px; margin:8px auto 18px; border-radius:50%; border:3px solid rgba(77,141,255,.2); border-top-color:#4d8dff; animation:vsAuthSpin .9s linear infinite; }
@keyframes vsAuthSpin{ to{ transform:rotate(360deg); } }

.vs-pass-wrap{ position:relative; }
.vs-pass-wrap input{ padding-right:64px; }
.vs-pass-toggle{ position:absolute; top:50%; right:8px; transform:translateY(-50%); padding:6px 10px; border:0; border-radius:8px; background:transparent; color:#7e93b8; font-size:12.5px; font-weight:700; cursor:pointer; }
.vs-pass-toggle:hover{ color:#fff; }

.vs-strength{ display:flex; gap:5px; margin-top:10px; }
.vs-strength i{ flex:1; height:5px; border-radius:4px; background:#1b2b47; transition:background .25s; }
.vs-strength[data-level="1"] i:nth-child(1){ background:#ef4444; }
.vs-strength[data-level="2"] i:nth-child(-n+2){ background:#f59e0b; }
.vs-strength[data-level="3"] i:nth-child(-n+3){ background:#84cc16; }
.vs-strength[data-level="4"] i{ background:#22c55e; }
.vs-strength-label{ display:block; min-height:16px; margin-top:6px; color:#7e93b8; font-size:12px; font-weight:600; }

@media (prefers-reduced-motion:reduce){
    .vs-auth-icon.mail, .vs-auth-spinner{ animation:none; }
}

.vs-ptc-gear-spin{ animation:vsGearSpin 1.6s linear infinite; transform-origin:50% 50%; }
@keyframes vsGearSpin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
@keyframes vsPtcIconPop{ from{ transform:scale(.6); opacity:0; } to{ transform:scale(1); opacity:1; } }

.vs-form-group{ margin-bottom:18px; }
.vs-form-group label{ display:block; color:#fff; margin-bottom:8px; font-size:14px; }
.vs-form-group input{ width:100%; height:50px; padding:0 16px; border:1px solid var(--border); background:#15233b; color:#fff; border-radius:12px; outline:none; }
.vs-form-group input:focus{ border-color:var(--primary); }
.vs-hp-field{ display:none; }
.vs-submit-btn{ width:100%; height:52px; border-radius:12px; background:linear-gradient(135deg,var(--primary),var(--secondary)); color:#fff; font-size:16px; font-weight:700; transition:.25s; }
.vs-submit-btn:hover{ transform:translateY(-2px); }
.vs-switch-text{ margin-top:18px; text-align:center; color:#9eb0cf; font-size:14px; }
.vs-switch-text a{ color:#4d8dff; font-weight:700; }
.vs-switch-text a:hover{ text-decoration:underline; }

/* ---------- Hero ---------- */

.vs-hero{
    padding:90px 0;
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at 15% 20%, rgba(47,84,235,.35) 0%, transparent 45%),
        radial-gradient(circle at 85% 10%, rgba(59,130,246,.30) 0%, transparent 40%),
        radial-gradient(circle at 75% 85%, rgba(99,102,241,.25) 0%, transparent 50%),
        linear-gradient(180deg,#08111f 0%,#0d1b31 100%);
}
.vs-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0px, rgba(255,255,255,.03) 1px, transparent 1px, transparent 60px);
    pointer-events:none;
}
.vs-hero::after{
    content:"";
    position:absolute;
    top:-120px;
    right:-120px;
    width:420px;
    height:420px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(77,141,255,.35) 0%, transparent 70%);
    filter:blur(10px);
    pointer-events:none;
}
.vs-hero .vs-container{ display:flex; align-items:center; justify-content:space-between; gap:60px; height:auto; position:relative; z-index:1; }
.vs-hero-content{ flex:1; max-width:100%; }
.vs-hero-badge{ display:inline-flex; padding:10px 18px; border-radius:999px; background:rgba(47,84,235,.15); color:#76a8ff; font-size:14px; font-weight:600; margin-bottom:24px; }
.vs-hero-content h1{ color:#fff; font-size:56px; line-height:1.2; font-weight:800; margin-bottom:20px; }
.vs-hero-content p{ color:#aeb9cf; font-size:18px; line-height:1.8; margin-bottom:35px; }
.vs-hero-stats{ display:flex; gap:22px; margin-bottom:40px; flex-wrap:wrap; }
.vs-stat-card{ min-width:220px; background:#101d33; border:1px solid var(--border); border-radius:18px; padding:22px; }
.vs-stat-card h3{ color:#fff; font-size:34px; margin-bottom:8px; }
.vs-stat-card span{ color:#9eb0cf; font-size:15px; }
.vs-hero-button{ height:56px; padding:0 34px; border-radius:14px; background:linear-gradient(135deg,var(--primary),var(--secondary)); color:#fff; font-size:16px; font-weight:700; transition:.3s; }
.vs-hero-button:hover{ transform:translateY(-3px); box-shadow:0 12px 30px rgba(47,84,235,.35); }

/* ---------- Section headers / grids / cards ---------- */

.vs-picsob-section, .vs-latest-section, .vs-most-viewed-section{ padding:50px 0; }

/* ---------- Three Steps section ---------- */

.vs-steps-section{ padding:50px 0; }
.vs-steps-section .vs-section-header{ display:block; text-align:center; }
.vs-steps-section .vs-section-badge{ position:relative; padding-left:26px; }
.vs-steps-section .vs-section-badge::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:18px; height:2px; background:#4d8dff; }
.vs-steps-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; width:min(1400px,92%); margin:0 auto; }
.vs-step-card{
    position:relative; background:#101d33; border:1px solid var(--border); border-radius:18px;
    padding:32px 28px; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.vs-step-card:hover{ transform:scale(1.02); border-color:rgba(47,84,235,.5); box-shadow:0 16px 40px rgba(47,84,235,.18); }
.vs-step-number{ position:absolute; top:26px; right:28px; color:#3a4b6d; font-size:15px; font-weight:800; letter-spacing:.05em; }
.vs-step-icon{
    width:56px; height:56px; border-radius:14px; display:flex; align-items:center; justify-content:center;
    margin-bottom:22px; color:#fff;
}
.vs-step-icon-register{ background:linear-gradient(135deg,#f5a623,#c47d0b); }
.vs-step-icon-tasks{ background:linear-gradient(135deg,#17c3a2,#0e8c78); }
.vs-step-icon-cashout{ background:linear-gradient(135deg,#4d8dff,#2f54eb); }
.vs-step-card h3{ color:#fff; font-size:19px; font-weight:800; margin-bottom:10px; }
.vs-step-card p{ color:#9eb0cf; font-size:14.5px; line-height:1.7; }

/* ---------- Payment Method showcase section ---------- */

.vs-payment-methods-section{ padding:50px 0 70px; }
.vs-payment-methods-section .vs-section-header{ display:block; text-align:center; }
.vs-payment-methods-section .vs-section-badge{ position:relative; padding-left:26px; }
.vs-payment-methods-section .vs-section-badge::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:18px; height:2px; background:#4d8dff; }
.vs-payment-methods-grid{
    display:grid; grid-template-columns:repeat(5,1fr); gap:22px; width:min(1400px,92%); margin:0 auto;
}
.vs-payment-method-box{
    background:#101d33; border:1px solid var(--border); border-radius:18px; padding:30px 18px;
    display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.vs-payment-method-box:hover{ transform:scale(1.03); border-color:rgba(47,84,235,.5); box-shadow:0 16px 40px rgba(47,84,235,.18); }
.vs-payment-method-icon{
    width:60px; height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:26px; font-weight:800; color:#fff; flex-shrink:0;
}
.vs-payment-method-box h3{ color:#fff; font-size:16px; font-weight:700; }

@media (max-width:992px){
    .vs-steps-grid{ grid-template-columns:1fr; }
    .vs-payment-methods-grid{ grid-template-columns:repeat(2,1fr); }
}
.vs-picsob-section .vs-container,
.vs-latest-section .vs-container,
.vs-most-viewed-section .vs-container,
.vs-steps-section .vs-container,
.vs-payment-methods-section .vs-container{ display:block; height:auto; }
.vs-section-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:35px; }
.vs-section-badge{ display:inline-block; color:#4d8dff; font-size:14px; font-weight:700; margin-bottom:10px; }
.vs-section-header h2{ color:#fff; font-size:34px; font-weight:800; }
.vs-view-more{ height:48px; padding:0 24px; border-radius:12px; background:var(--primary); color:#fff; font-weight:700; transition:.25s; display:inline-flex; align-items:center; }
.vs-view-more:hover{ transform:translateY(-2px); }

.vs-picsob-card, .vs-video-card, .vs-featured-card{
    display:block; background:#101d33; border:1px solid var(--border); border-radius:18px; overflow:hidden; transition:.30s;
}
.vs-picsob-card:hover, .vs-video-card:hover, .vs-featured-card:hover{ transform:translateY(-6px); border-color:var(--primary); }
.vs-picsob-image{ aspect-ratio:1/1; overflow:hidden; }
.vs-picsob-image img{ width:100%; height:100%; object-fit:cover; transition:.4s; }
.vs-picsob-card:hover .vs-picsob-image img{ transform:scale(1.08); }
.vs-picsob-content{ padding:18px; }
.vs-picsob-content h3{ color:#fff; font-size:16px; font-weight:700; line-height:1.5; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }

.vs-video-thumbnail, .vs-featured-thumbnail{ position:relative; aspect-ratio:16/9; overflow:hidden; background:#0b1424; }
.vs-featured-ad-box{
    width:100%; min-height:250px; display:flex; align-items:center; justify-content:center;
    overflow:visible; background:#0b1424; border-radius:14px;
}
.vs-video-thumbnail img, .vs-featured-thumbnail img{ width:100%; height:100%; object-fit:cover; transition:.35s; }
.vs-video-card:hover .vs-video-thumbnail img, .vs-featured-card:hover .vs-featured-thumbnail img{ transform:scale(1.08); }
.vs-video-duration, .vs-featured-duration{ position:absolute; right:12px; bottom:12px; padding:5px 10px; background:rgba(0,0,0,.75); color:#fff; border-radius:8px; font-size:12px; font-weight:600; }
.vs-video-content, .vs-featured-body{ padding:18px; }
.vs-video-content h3, .vs-featured-body h3{ color:#fff; font-size:16px; line-height:1.5; font-weight:700; margin-bottom:16px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.vs-video-meta, .vs-featured-meta{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
.vs-video-views, .vs-featured-views{ color:#9eb0cf; font-size:14px; }
.vs-video-points, .vs-featured-points{ color:#4d8dff; font-size:14px; font-weight:700; }

.swiper-wrapper{ display:flex; gap:20px; }
.swiper .swiper-wrapper > *{ flex:0 0 auto; width:270px; }

/* ---------- Footer ---------- */

.vs-footer{ margin-top:90px; padding:60px 0 30px; background:var(--bg); border-top:1px solid var(--border); }
.vs-footer-top{ display:flex; align-items:center; justify-content:space-between; gap:30px; padding-bottom:35px; border-bottom:1px solid var(--border); }
.vs-footer-logo img{ height:44px; }
.vs-footer-menu{ display:flex; align-items:center; gap:30px; flex-wrap:wrap; }
.vs-footer-menu a{ color:#aeb9cf; font-size:15px; transition:.25s; }
.vs-footer-menu a:hover{ color:#fff; }
.vs-footer-bottom{ padding-top:30px; text-align:center; }
.vs-footer-bottom p{ color:#8e9ab5; font-size:14px; }

/* ---------- Breadcrumb / Sidebar / Featured page ---------- */

.vs-breadcrumb{ display:block; color:#7f90b1; font-size:14px; margin:20px 0 10px; }
.vs-content-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; }
.vs-content-header h2{ color:#fff; font-size:34px; font-weight:800; }

.vs-featured-layout{ display:flex; gap:30px; align-items:flex-start; width:min(1400px,92%); margin:20px auto 60px; }
.vs-sidebar{ width:300px; flex-shrink:0; display:flex; flex-direction:column; gap:12px; }
.vs-sidebar-card{ background:#101d33; border:1px solid var(--border); border-radius:18px; padding:24px; display:block; transition:.25s; }
.vs-sidebar-card:hover{ border-color:var(--primary); }
.vs-sidebar-label{ display:block; color:#9eb0cf; font-size:14px; margin-bottom:10px; }
.vs-sidebar-card h2{ color:#fff; font-size:32px; font-weight:800; }
.vs-sidebar-menu{ background:#101d33; border:1px solid var(--border); border-radius:18px; padding:0; overflow:visible; }
.vs-sidebar-title{ display:block; color:#6f86b3; font-size:12px; font-weight:700; letter-spacing:1px; padding:0 22px 14px; }
.vs-sidebar-menu-toggle{ width:100%; display:flex; align-items:center; justify-content:space-between; padding:18px 22px; color:#d7deef; font-size:15px; font-weight:700; transition:.25s; background:transparent; }
.vs-sidebar-menu-toggle:hover, .vs-sidebar-menu-toggle.active{ background:#182a47; color:#fff; }
.vs-sidebar-submenu + .vs-sidebar-menu-toggle{ border-top:1px solid var(--border); }
.vs-sidebar-menu-arrow{ transition:.25s; color:#6f86b3; }
.vs-sidebar-menu-toggle.active .vs-sidebar-menu-arrow{ transform:rotate(180deg); }
.vs-sidebar-submenu{ max-height:0; overflow:hidden; transition:max-height .3s ease; background:#0a1425; }
.vs-sidebar-submenu.active{ max-height:400px; overflow-y:auto; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.vs-sidebar-menu a, .vs-category-link{ display:flex; align-items:center; padding:14px 22px; color:#d7deef; font-size:15px; transition:.25s; }
.vs-sidebar-menu a:hover, .vs-category-link:hover{ background:#182a47; color:#fff; }
.vs-sidebar-menu a.active, .vs-category-link.active{ background:var(--primary); color:#fff; font-weight:700; }

/* Submenu items specifically: darker distinct background (set above on
   .vs-sidebar-submenu itself), indented and with a subtle divider
   between rows, so the hierarchy (top-level menu vs its submenu) is
   immediately clear at a glance instead of blending into one flat list. */
.vs-sidebar-submenu a, .vs-sidebar-submenu .vs-category-link{
    padding-left:44px;
    font-size:14px;
    color:#9fb0d4;
    border-top:1px solid rgba(255,255,255,0.04);
}
.vs-sidebar-submenu a:first-child, .vs-sidebar-submenu .vs-category-link:first-child{ border-top:none; }
.vs-sidebar-submenu a:hover, .vs-sidebar-submenu .vs-category-link:hover{ background:#16233d; color:#fff; }
.vs-sidebar-submenu a.active, .vs-sidebar-submenu .vs-category-link.active{ background:var(--primary); color:#fff; font-weight:700; }

.vs-sidebar-submenu-divider{
    display:block; padding:12px 22px 6px; color:#5c729c; font-size:11px; font-weight:800;
    text-transform:uppercase; letter-spacing:.06em; border-top:1px solid rgba(255,255,255,0.06);
}
.vs-featured-content{ flex:1; min-width:0; }
.vs-video-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.vs-grid-footer{ margin-top:40px; text-align:center; }
.vs-load-more{ height:52px; padding:0 34px; border-radius:14px; background:var(--primary); color:#fff; font-size:15px; font-weight:700; }

/* ---------- Video Post (Watch) page ---------- */

.vs-watch-page{ padding:40px 0 80px; }
.vs-watch-layout{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:32px; align-items:start; width:min(1400px,92%); margin:auto; }
.vs-watch-main{ min-width:0; }
.vs-player-box{ background:#101d33; border:1px solid var(--border); border-radius:18px; overflow:hidden; }
#videoPlayerEmbed{ aspect-ratio:16/9; background:#000; position:relative; overflow:hidden; }
#videoPlayerEmbed iframe,
#videoPlayerEmbed video,
#videoPlayerEmbed object,
#videoPlayerEmbed embed,
#videoPlayerEmbed > div{
    position:absolute;
    top:0;
    left:0;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    border:0;
}
.vs-balance-bar{ margin-top:24px; padding:22px 24px; display:flex; align-items:center; justify-content:space-between; background:#101d33; border:1px solid var(--border); border-radius:18px; }
.vs-balance-left h2{ color:#fff; font-size:30px; font-weight:800; margin-bottom:6px; }
.vs-balance-left span{ color:#9eb0cf; font-size:14px; }
.vs-redeem-btn{ height:50px; padding:0 28px; border-radius:12px; background:var(--primary); color:#fff; font-size:15px; font-weight:700; transition:.3s; }
.vs-redeem-btn:disabled{ opacity:.45; cursor:not-allowed; }
.vs-video-info{ margin-top:24px; padding:24px; background:#101d33; border:1px solid var(--border); border-radius:18px; }
.vs-video-info h1{ color:#fff; font-size:30px; margin-bottom:18px; }
.vs-video-meta{ display:flex; gap:20px; color:#9eb0cf; font-size:14px; margin-bottom:20px; }
.vs-report-btn{ margin-bottom:20px; background:none; color:#ff6b6b; padding:0; }
.vs-video-description{ color:#d4dceb; line-height:1.8; }
.vs-watch-sidebar{ position:sticky; top:90px; padding:22px; background:#101d33; border:1px solid var(--border); border-radius:18px; }
.vs-watch-sidebar h3{ color:#fff; margin-bottom:20px; }
.vs-popular-item{ display:flex; gap:12px; margin-bottom:16px; }
.vs-popular-item img{ width:100px; height:60px; object-fit:cover; border-radius:8px; }
.vs-popular-item h4{ color:#fff; font-size:14px; margin-bottom:4px; }
.vs-popular-item span{ color:#9eb0cf; font-size:12px; }

.vs-mobile-latest, .vs-mobile-popular{ display:none; margin-top:30px; width:min(1400px,92%); margin-left:auto; margin-right:auto; }
.vs-mobile-latest h3, .vs-mobile-popular h3{ color:#fff; font-size:24px; font-weight:700; margin-bottom:20px; }

/* ---------- Comments ---------- */

.vs-comments-section{ margin-top:32px; padding:24px; background:#101d33; border:1px solid var(--border); border-radius:18px; width:min(1400px,92%); margin-left:auto; margin-right:auto; }
.vs-comments-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.vs-comments-header h3{ color:#fff; font-size:22px; font-weight:700; }
#commentsCount{ color:#9eb0cf; font-size:14px; }
.vs-comment-form textarea{ width:100%; min-height:120px; padding:16px; border:1px solid var(--border); border-radius:12px; background:#08111f; color:#fff; resize:vertical; outline:none; }
.vs-comment-submit{ margin-top:16px; height:48px; padding:0 28px; border-radius:12px; background:var(--primary); color:#fff; font-size:15px; font-weight:700; }
.vs-comments-list{ margin-top:30px; display:flex; flex-direction:column; gap:20px; }
.vs-comment-item{ display:flex; gap:16px; }
.vs-comment-avatar{ width:46px; height:46px; border-radius:50%; background:var(--primary); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; flex-shrink:0; }
.vs-comment-user{ color:#fff; }
.vs-comment-time{ color:#8ea0bd; font-size:13px; }
.vs-comment-text{ color:#d5deed; line-height:1.7; }
.vs-no-comments{ text-align:center; color:#8ea0bd; padding:30px 0; }

/* ---------- Referral page ---------- */

.vs-referral-page{ padding:40px 0 80px; }
.vs-referral-hero{ display:grid; grid-template-columns:2fr 1fr; gap:30px; margin-top:30px; }
.vs-referral-left, .vs-referral-right{ background:#101d33; border:1px solid var(--border); border-radius:18px; padding:30px; min-width:0; }
.vs-referral-left h1{ color:#fff; font-size:38px; font-weight:800; margin:18px 0; }
.vs-referral-left p{ color:#9eb0cf; line-height:1.8; }
.vs-tier-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:30px 0; }
.vs-tier-card{ background:#08111f; border:1px solid var(--border); border-radius:14px; padding:20px; min-width:0; }
.vs-tier-card strong{ display:block; color:#fff; margin-bottom:10px; }
.vs-tier-card span{ color:#4d8dff; font-size:26px; font-weight:800; }
.vs-referral-link-box{ display:flex; gap:14px; margin-bottom:20px; }

.vs-withdraw-methods-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:18px; margin-top:8px; }
.vs-withdraw-method-card{ background:#08111f; border:1px solid var(--border); border-radius:14px; padding:24px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; transition:.25s; }
.vs-withdraw-method-card:hover{ border-color:var(--primary); }
.vs-withdraw-method-card.vs-locked{ opacity:.55; }
.vs-withdraw-method-icon{ width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:800; color:#fff; flex-shrink:0; }
.vs-withdraw-method-card h3{ color:#fff; font-size:17px; font-weight:700; }
.vs-withdraw-method-card span{ color:#9eb0cf; font-size:14px; }
.vs-withdraw-method-card .vs-redeem-btn{ width:100%; }
.vs-referral-link-box input{ flex:1; min-width:0; height:52px; padding:0 16px; background:#08111f; border:1px solid var(--border); border-radius:12px; color:#fff; }
.vs-referral-link-box button{ width:120px; border-radius:12px; background:var(--primary); color:#fff; font-weight:700; }
.vs-referral-users{ color:#9eb0cf; }
.vs-referral-balance-card{ text-align:center; }

.vs-ptc-offer-card{ background:#08111f; border:1px solid var(--border); border-radius:14px; overflow:hidden; transition:.25s; display:flex; flex-direction:column; position:relative; }
.vs-ptc-offer-card:hover{ border-color:var(--primary); transform:translateY(-3px); }
.vs-ptc-provider-badge{
    position:absolute; top:10px; right:10px; z-index:2;
    background:linear-gradient(135deg,var(--primary),var(--secondary)); color:#fff;
    font-size:10px; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
    padding:4px 10px; border-radius:20px; box-shadow:0 2px 6px rgba(0,0,0,.3);
}
/* "Featured" -- Visit Tasks the admin pinned with Show Top. Gold
   accent so it reads as special next to the blue provider badge. */
.vs-ptc-offer-card.vs-ptc-featured{ border-color:rgba(245,158,11,.45); box-shadow:0 0 0 1px rgba(245,158,11,.12), 0 8px 24px rgba(245,158,11,.08); }
.vs-ptc-offer-card.vs-ptc-featured:hover{ border-color:#fbbf24; }
.vs-ptc-offer-card.vs-ptc-featured .vs-ptc-offer-body{ padding-top:44px; }
.vs-ptc-featured-badge{
    position:absolute; top:10px; left:10px; z-index:2;
    background:linear-gradient(135deg,#f59e0b,#fbbf24); color:#1a1204;
    font-size:10px; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
    padding:4px 10px; border-radius:20px; box-shadow:0 2px 6px rgba(0,0,0,.3);
}
/* ---- PTC loading: shimmer placeholders + card entrance ---- */
@keyframes vsSkShimmer{ 0%{ background-position:100% 0; } 100%{ background-position:-100% 0; } }
@keyframes vsPtcCardIn{ from{ opacity:0; transform:translateY(12px) scale(.985); } to{ opacity:1; transform:none; } }
.vs-ptc-card-enter{ animation:vsPtcCardIn .45s cubic-bezier(.2,.8,.2,1) backwards; animation-delay:var(--d,0s); }
.vs-ptc-skeleton{ background:#08111f; border:1px solid var(--border); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; position:relative; pointer-events:none; }
.vs-ptc-skeleton .vs-sk{
    display:block; border-radius:8px;
    background:linear-gradient(100deg, rgba(255,255,255,.035) 30%, rgba(255,255,255,.10) 50%, rgba(255,255,255,.035) 70%);
    background-size:300% 100%;
    animation:vsSkShimmer 1.7s ease-in-out infinite;
    animation-delay:var(--d,0s);
}
.vs-ptc-skeleton .vs-sk-badge{ position:absolute; top:10px; right:10px; width:64px; height:20px; border-radius:20px; }
.vs-ptc-skeleton .vs-sk-title{ height:16px; width:72%; margin-top:2px; }
.vs-ptc-skeleton .vs-sk-line{ height:12px; width:46%; }
.vs-ptc-skeleton .vs-sk-pill{ height:18px; width:92px; }
.vs-ptc-skeleton .vs-sk-dur{ height:14px; width:34px; }
.vs-ptc-skeleton .vs-sk-btn{ height:50px; border-radius:12px; margin-top:6px; }
@media (prefers-reduced-motion:reduce){
    .vs-ptc-skeleton .vs-sk{ animation:none; }
    .vs-ptc-card-enter{ animation:none; }
}
.vs-ptc-offer-image{ width:100%; aspect-ratio:16/9; background:#101d33; overflow:hidden; }
.vs-ptc-offer-image img{ width:100%; height:100%; object-fit:cover; }
.vs-ptc-offer-body{ padding:18px; display:flex; flex-direction:column; gap:10px; flex:1; }
.vs-ptc-offer-title{ color:#fff; font-size:15px; font-weight:700; }
.vs-ptc-offer-meta{ display:flex; justify-content:space-between; align-items:center; margin-top:auto; }
.vs-ptc-offer-reward{ color:var(--primary); font-weight:800; }
.vs-ptc-offer-duration{ color:#9eb0cf; font-size:13px; }

.vs-offerwall-provider-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:18px; }
.vs-offerwall-provider-card{
    background:#08111f; border:1px solid var(--border); border-radius:14px; padding:28px 22px;
    display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center;
    cursor:pointer; transition:.25s;
}
.vs-offerwall-provider-card:hover{ border-color:var(--primary); transform:translateY(-3px); }
.vs-offerwall-provider-icon{
    width:56px; height:56px; border-radius:14px; background:var(--primary);
    display:flex; align-items:center; justify-content:center; color:#fff; font-size:22px; font-weight:800;
    overflow:hidden;
}
.vs-offerwall-provider-icon:has(img){ background:#fff; padding:8px; }
.vs-offerwall-provider-name{ color:#fff; font-size:16px; font-weight:700; }
.vs-offerwall-provider-cta{ color:var(--primary); font-size:13px; font-weight:600; }

.vs-referral-balance-card span{ color:#9eb0cf; }
.vs-referral-balance-card h2{ color:#fff; font-size:40px; margin:20px 0; overflow-wrap:break-word; word-break:break-word; }
.vs-primary-btn{ width:100%; height:52px; border-radius:12px; background:var(--primary); color:#fff; font-weight:700; margin-bottom:20px; }
.vs-primary-btn:disabled{ opacity:.45; cursor:not-allowed; }
.vs-referral-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:30px; margin-top:35px; }
.vs-referral-table-card{ background:#101d33; border:1px solid var(--border); border-radius:18px; padding:28px; min-width:0; }
.vs-referral-table-card h3{ color:#fff; margin-bottom:20px; }
.vs-referral-empty{ color:#9eb0cf; }
.vs-referral-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 0; border-bottom:1px solid var(--border); }
.vs-referral-row:last-child{ border-bottom:none; }
.vs-referral-row-name{ color:#fff; font-weight:700; }
.vs-referral-row-sub{ color:#9eb0cf; font-size:13px; margin-top:2px; }
.vs-referral-row-right{ text-align:right; }
.vs-referral-row-points{ color:#4d8dff; font-weight:800; }

/* ---------- Points History (Account > History) ---------- */
.vs-history-row{ display:flex; align-items:center; gap:14px; padding:16px 0; border-bottom:1px solid var(--border); }
.vs-history-row:last-child{ border-bottom:none; }
.vs-history-icon{ flex-shrink:0; width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:19px; }
.vs-history-icon.cat-watch{ background:rgba(59,130,246,.15); color:#3b82f6; }
.vs-history-icon.cat-referral{ background:rgba(168,85,247,.15); color:#a855f7; }
.vs-history-icon.cat-ptc{ background:rgba(245,158,11,.15); color:#f59e0b; }
.vs-history-icon.cat-task{ background:rgba(34,211,238,.15); color:#22d3ee; }
.vs-history-icon.cat-offerwall{ background:rgba(20,184,166,.15); color:#14b8a6; }
.vs-history-icon.cat-shortlink{ background:rgba(236,72,153,.15); color:#ec4899; }
.vs-history-icon.cat-admin{ background:rgba(148,163,184,.15); color:#94a3b8; }
.vs-history-icon.cat-other{ background:rgba(77,141,255,.15); color:#4d8dff; }
.vs-history-details{ flex:1; min-width:0; }
.vs-history-source{ color:#fff; font-weight:600; font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vs-history-date{ color:#6f86b3; font-size:12.5px; margin-top:3px; }
/* "Referral commission from Tareq": the start shrinks with "...", the end stays visible. */
.vs-history-source.split{ display:flex; align-items:baseline; overflow:visible; text-overflow:clip; }
.vs-hs-head{ flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vs-hs-tail{ flex:0 0 auto; max-width:55%; margin-left:.35em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:420px){
    .vs-history-row{ gap:11px; }
    .vs-history-icon{ width:38px; height:38px; font-size:17px; border-radius:11px; }
    .vs-history-source{ font-size:13.5px; }
    .vs-history-date{ font-size:12px; }
}
@media (max-width:360px){
    .vs-history-icon{ width:34px; height:34px; font-size:15px; }
    .vs-history-source{ font-size:12.5px; }
}
.vs-history-points{ flex-shrink:0; color:#22c55e; font-weight:800; font-size:15px; }
@media (max-width:420px){ .vs-history-points{ font-size:14px; } }
@media (max-width:360px){ .vs-history-points{ font-size:13px; } }


/* ---------- Account page ---------- */

.vs-account-page{ padding:40px 0 80px; }
.vs-account-layout{ display:grid; grid-template-columns:260px 1fr; gap:30px; }
.vs-account-content{ min-width:0; }
.vs-account-sidebar{ background:#101d33; border:1px solid var(--border); border-radius:18px; padding:24px; height:fit-content; min-width:0; }
.vs-account-sidebar a{ display:block; padding:12px 16px; margin-bottom:8px; border-radius:10px; color:#d5deed; transition:.25s; }
.vs-account-sidebar a:hover, .vs-account-sidebar a.active{ background:var(--primary); color:#fff; }
.vs-account-card{ background:#101d33; border:1px solid var(--border); border-radius:18px; padding:30px; }
.vs-profile-header{ display:flex; align-items:center; gap:20px; margin-bottom:35px; }
.vs-profile-avatar{ width:90px; height:90px; border-radius:50%; overflow:hidden; background:#08111f; position:relative; cursor:pointer; flex-shrink:0; }
.vs-profile-avatar img{ width:100%; height:100%; object-fit:cover; }
.vs-avatar-edit-hint{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center;
    background:rgba(0,0,0,.55); color:#fff; font-size:11px; font-weight:700; padding:0 6px;
    opacity:0; transition:.25s;
}
.vs-profile-avatar:hover .vs-avatar-edit-hint{ opacity:1; }
.vs-avatar-uploading{ cursor:default; }
.vs-avatar-uploading .vs-avatar-edit-hint{ opacity:0 !important; }
.vs-avatar-uploading::after{
    content:""; position:absolute; inset:0; margin:auto; width:28px; height:28px;
    border:3px solid rgba(255,255,255,.25); border-top-color:#fff; border-radius:50%;
    animation:vsSpin .8s linear infinite; background:rgba(0,0,0,.55);
}
#accountUsername{ color:#fff; font-size:28px; margin-bottom:6px; }
#accountEmail{ color:#9eb0cf; }
.vs-account-user-id{ color:#6f86b3; font-size:13px; margin-top:6px; }
.vs-account-form{ margin-top:30px; padding-top:30px; border-top:1px solid var(--border); }
.vs-account-form h3{ color:#fff; margin-bottom:20px; }
.vs-account-form input{ width:100%; height:50px; margin-bottom:16px; padding:0 16px; background:#08111f; border:1px solid var(--border); border-radius:12px; color:#fff; outline:none; }
.vs-account-form button{ height:50px; padding:0 28px; border-radius:12px; background:var(--primary); color:#fff; font-weight:700; }

/* ---------- Notifications page ---------- */

.vs-notification-page{ padding:40px 0 80px; }
.vs-notification-card{ margin-top:30px; background:#101d33; border:1px solid var(--border); border-radius:18px; padding:30px; }
.vs-notification-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:25px; flex-wrap:wrap; gap:14px; }
.vs-notification-header h2{ color:#fff; font-size:28px; font-weight:700; }
#markAllRead{ height:46px; padding:0 22px; border-radius:12px; background:var(--primary); color:#fff; font-weight:700; }
.vs-notification-list{ display:flex; flex-direction:column; gap:18px; }
.vs-notification-item{ display:flex; align-items:flex-start; gap:18px; padding:20px; background:#08111f; border:1px solid rgba(255,255,255,.06); border-radius:14px; }
.vs-notification-icon{ width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--primary); font-size:20px; flex-shrink:0; }
.vs-notification-content{ flex:1; min-width:0; }
.vs-notification-title{ color:#fff; font-size:15px; margin-bottom:4px; overflow-wrap:break-word; }
.vs-notification-message{ color:#b5c0d6; font-size:14px; line-height:1.6; margin-bottom:6px; overflow-wrap:break-word; word-break:break-word; }
.vs-notification-status{ flex-shrink:0; }
.vs-notification-title{ color:#fff; font-size:17px; margin-bottom:8px; }
.vs-notification-message{ color:#cfd8e8; line-height:1.7; margin-bottom:8px; }
.vs-notification-time{ color:#8ea0bd; }
.vs-notification-status{ background:#1bbf6b; color:#fff; padding:6px 12px; border-radius:20px; font-size:12px; font-weight:700; }
.vs-empty-notification{ text-align:center; color:#8ea0bd; padding:40px 0; }

/* ---------- Static pages ---------- */

.vs-static-page{ padding:50px 0 80px; }
.vs-static-card{ margin-top:30px; padding:50px 40px; background:#101d33; border:1px solid var(--border); border-radius:18px; text-align:center; }
.vs-static-card h1{ color:#fff; font-size:38px; font-weight:800; margin-bottom:18px; }
.vs-static-card p{ max-width:650px; margin:0 auto; color:#9eb0cf; line-height:1.8; font-size:16px; }

/* ---------- Responsive ---------- */

@media (max-width:992px){
    .vs-nav{ display:none; }
    .vs-mobile-toggle{ display:flex; }
    .vs-desktop-only{ display:none !important; }
    .vs-mobile-only{ display:flex !important; }
    .vs-container{ height:76px; }
    .vs-profile-button{ width:40px; height:40px; }
    .vs-header-sidebar-toggle{ width:40px; height:40px; }
    .vs-profile-dropdown{ top:58px; }
    .vs-hero .vs-container{ flex-direction:column; text-align:center; }
    .vs-hero-stats{ justify-content:center; }
    .vs-video-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
    .vs-featured-layout{ flex-direction:column; }
    .vs-sidebar{ width:100%; }
    .vs-watch-layout{ grid-template-columns:1fr; }
    .vs-watch-sidebar{ display:none; }
    .vs-mobile-latest, .vs-mobile-popular{ display:block; }
    .vs-account-layout{ grid-template-columns:1fr; }
    .vs-referral-hero, .vs-referral-grid{ grid-template-columns:1fr; }
    .vs-referral-left h1{ font-size:28px; }
    .vs-referral-balance-card h2{ font-size:30px; }
}

@media (max-width:768px){
    .vs-btn, .vs-btn-outline{ display:none; }
    .vs-mobile-menu{
        position:fixed; top:76px; left:0; width:100%; background:#0f1d33; border-top:1px solid var(--border);
        padding:22px; display:flex; flex-direction:column; gap:18px;
        transform:translateY(-120%); opacity:0; pointer-events:none; transition:.35s ease; z-index:9998;
    }
    .vs-mobile-menu.active{ transform:translateY(0); opacity:1; pointer-events:auto; }
    .vs-mobile-menu a{ color:#fff; font-size:16px; font-weight:600; }
    .vs-mobile-menu button{ height:48px; border-radius:12px; font-size:15px; font-weight:700; }
    #mobileLogin{ background:#15233b; color:#fff; }
    #mobileSignup{ background:linear-gradient(135deg,#2f54eb,#3b82f6); color:#fff; }
    .vs-hero-content h1{ font-size:36px; }
    .vs-video-grid{ grid-template-columns:1fr; }
    .vs-tier-list{ grid-template-columns:1fr; }
    .vs-balance-bar{ flex-direction:column; align-items:flex-start; gap:18px; }
    .vs-redeem-btn{ width:100%; }
}

@media (max-width:480px){
    .vs-logo img{ height:38px; }
    .vs-payment-methods-grid{ grid-template-columns:1fr; }
    .vs-step-card{ padding:26px 22px; }
    .vs-referral-left, .vs-referral-right{ padding:22px; }
}

/* ---------- Polish: fade-in, ripple, loader ---------- */

.fade-in{ animation:vsFade .45s ease; }
@keyframes vsFade{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:translateY(0); } }

.vs-page-loader{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:#08111f; z-index:99999; opacity:1; visibility:visible; transition:.3s; }
.vs-page-loader.hide{ opacity:0; visibility:hidden; }
.vs-loader-ring{ width:56px; height:56px; border:5px solid rgba(255,255,255,.12); border-top-color:#2f54eb; border-radius:50%; animation:vsSpin .8s linear infinite; }
@keyframes vsSpin{ to{ transform:rotate(360deg); } }

#globalRipple{ position:fixed; width:12px; height:12px; border-radius:50%; pointer-events:none; background:rgba(255,255,255,.35); transform:translate(-50%,-50%) scale(0); z-index:999999; }

/* Broken/missing thumbnail fallback: instead of the browser's
   broken-image icon, show a subtle gradient tile with a play glyph. */
.vs-picsob-image.vs-no-thumb,
.vs-video-thumbnail.vs-no-thumb,
.vs-featured-thumbnail.vs-no-thumb{
    background:linear-gradient(135deg,#182a47,#0f1d33);
    display:flex;
    align-items:center;
    justify-content:center;
}
.vs-picsob-image.vs-no-thumb::after,
.vs-video-thumbnail.vs-no-thumb::after,
.vs-featured-thumbnail.vs-no-thumb::after{
    content:"\25B6";
    color:rgba(255,255,255,.25);
    font-size:32px;
}

/* ---------- Sitewide sidebar: off-canvas on every screen size, ---------- */
/* ---------- toggled via the hamburger icon, closed by the X or ---------- */
/* ---------- by tapping the overlay -- same behavior desktop and mobile. */

.vs-sidebar-toggle{
    display:flex;
    width:46px;
    height:46px;
    border-radius:12px;
    background:#15233b;
    border:1px solid rgba(255,255,255,.08);
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;
    position:sticky;
    top:96px;
    margin:16px 0 0 4vw;
    z-index:998;
}
.vs-sidebar-toggle span{ width:22px; height:2px; background:#fff; border-radius:20px; }

.vs-header-sidebar-toggle{
    position:static;
    margin:0;
    width:48px;
    height:48px;
    border-radius:50%;
}

.vs-sidebar-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.6);
    z-index:9997;
    opacity:0;
    transition:.25s;
}
.vs-sidebar-overlay.active{ display:block; opacity:1; }

#mainSidebar{
    display:flex;
    position:fixed;
    top:0;
    left:0;
    height:100vh;
    width:70vw;
    min-width:240px;
    max-width:300px;
    background:#0b1424;
    z-index:9998;
    padding:90px 18px 24px;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    transform:translateX(-105%);
    transition:transform .3s ease;
}

#mainSidebar.active{ transform:translateX(0); }

.vs-sidebar-close{
    display:flex;
    align-items:center;
    justify-content:center;
    position:absolute;
    top:16px;
    right:16px;
    width:34px;
    height:34px;
    border-radius:50%;
    background:#15233b;
    color:#fff;
    font-size:22px;
    line-height:1;
    z-index:1;
}

/* ============================================================
 * Shortlink
 * ============================================================ */

.vs-shortlink-task-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px; }

.vs-shortlink-task-card{
    background:#08111f; border:1px solid var(--border); border-radius:16px; padding:24px;
    display:flex; flex-direction:column; gap:16px;
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.vs-shortlink-task-card:hover{
    transform:scale(1.03);
    border-color:rgba(47,84,235,.5);
    box-shadow:0 12px 32px rgba(47,84,235,.18);
}

.vs-shortlink-task-name{ color:#fff; font-size:17px; font-weight:800; text-align:center; }

.vs-shortlink-task-name-row{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.vs-shortlink-task-name-text{ color:#fff; font-size:16px; font-weight:800; }
.vs-shortlink-via-badge{ color:#6f86b3; font-size:11px; font-weight:600; white-space:nowrap; flex-shrink:0; }

.vs-shortlink-task-stats{ display:flex; gap:10px; }
.vs-shortlink-stat-box{
    flex:1; background:var(--bg,#0b1424); border:1px solid var(--border); border-radius:12px;
    padding:12px 10px; text-align:center; display:flex; flex-direction:column; gap:4px;
}
.vs-shortlink-stat-label{ color:#6f86b3; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.vs-shortlink-stat-value{ color:#fff; font-size:17px; font-weight:800; }
.vs-shortlink-stat-value.points{ color:var(--primary); }

.vs-shortlink-task-locked{ color:#f87171; font-size:13px; font-weight:600; text-align:center; }
.vs-shortlink-claim-btn:disabled{ opacity:.5; cursor:not-allowed; }
.vs-shortlink-claim-btn:active:not(:disabled){ transform:scale(.98); }

.vs-shortlink-claim-btn.locked{
    display:flex; align-items:center; justify-content:center; gap:8px;
    background:#1a2540 !important; color:#9eb0cf !important; opacity:1 !important;
}
.vs-shortlink-claim-btn.locked svg{ flex-shrink:0; opacity:.8; }
.vs-shortlink-claim-btn.locked .vs-shortlink-countdown-text{ font-variant-numeric:tabular-nums; }

.vs-shortlink-done-btn{ font-variant-numeric:tabular-nums; }

/* ============================================================
 * Giveaway
 * ============================================================ */

/* ---------- Menu "HOT" mark ---------- */

.vs-giveaway-menu-link > span:first-child{ display:flex; align-items:center; gap:8px; }
.vs-hot-mark{
    display:inline-flex; align-items:center; gap:3px; padding:3px 8px; border-radius:20px;
    background:linear-gradient(135deg,#ff5e3a,#ff2d55); color:#fff; font-size:10px; font-weight:800;
    letter-spacing:.03em; animation:vsHotPulse 1.6s ease-in-out infinite;
}
@keyframes vsHotPulse{
    0%,100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(255,45,85,.5); }
    50%{ transform:scale(1.08); box-shadow:0 0 0 6px rgba(255,45,85,0); }
}

/* ---------- Page shell ---------- */

.vs-giveaway-page{ width:min(900px,92%); margin:20px auto 60px; }
.vs-giveaway-number-badge{
    display:inline-block; padding:6px 16px; border-radius:20px; background:rgba(47,84,235,.15);
    color:var(--primary); font-size:13px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
    margin-bottom:16px;
}
.vs-giveaway-title{ color:#fff; font-size:28px; font-weight:800; text-align:center; margin:0 0 24px; line-height:1.3; }

/* ---------- Image slideshow ---------- */

.vs-giveaway-slideshow{
    position:relative; width:100%; max-width:520px; aspect-ratio:1/1; margin:0 auto 32px;
    border-radius:20px; overflow:hidden; background:#0b1424; border:1px solid var(--border);
    box-shadow:0 20px 60px rgba(47,84,235,.15);
}
.vs-giveaway-slide{
    position:absolute; inset:0; opacity:0; transition:opacity .6s ease; width:100%; height:100%; object-fit:cover;
}
.vs-giveaway-slide.active{ opacity:1; }
.vs-giveaway-slideshow-dots{
    position:absolute; bottom:14px; left:50%; transform:translateX(-50%); display:flex; gap:6px; z-index:2;
}
.vs-giveaway-slideshow-dot{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.35); transition:.3s; }
.vs-giveaway-slideshow-dot.active{ background:#fff; width:20px; border-radius:4px; }

/* ---------- Countdown (digit-box / flip-clock style) ---------- */

.vs-giveaway-countdown{ display:flex; align-items:flex-start; justify-content:center; gap:10px; flex-wrap:wrap; }
.vs-countdown-group{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.vs-countdown-digits{ display:flex; gap:4px; }
.vs-countdown-digit-box{
    width:38px; height:52px; border-radius:10px;
    background:linear-gradient(180deg,#182a4a,#0b1424); border:1px solid rgba(255,255,255,.08);
    display:flex; align-items:center; justify-content:center; color:#fff; font-size:26px; font-weight:800;
    font-variant-numeric:tabular-nums; box-shadow:0 8px 20px rgba(47,84,235,.2), inset 0 1px 0 rgba(255,255,255,.06);
}
.vs-countdown-label{ color:#6f86b3; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.vs-countdown-colon{ color:var(--primary); font-size:28px; font-weight:800; align-self:center; margin:0 -2px 26px; }

.vs-giveaway-extra-time-note{
    text-align:center; color:#4ade80; font-size:13px; font-weight:600; margin-top:16px;
}

/* ---------- Increase Winning Chance (task list placeholder-ready) ---------- */

.vs-giveaway-section-title{ color:#fff; font-size:19px; font-weight:800; margin:44px 0 16px; text-align:center; }
.vs-giveaway-tasks-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; }
.vs-giveaway-empty-note{ text-align:center; color:#6f86b3; font-size:14px; padding:20px 0; }

.vs-giveaway-task-card{
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    background:#08111f; border:1px solid var(--border); border-radius:14px; padding:16px 20px;
    margin-bottom:12px; transition:.22s;
}
.vs-giveaway-task-card:hover{ border-color:rgba(47,84,235,.4); }
.vs-giveaway-task-title{ color:#fff; font-weight:700; font-size:15px; }
.vs-giveaway-task-credit{ color:var(--primary); font-size:13px; font-weight:600; margin-top:3px; }
.vs-giveaway-task-note{ color:#6f86b3; font-size:12px; margin-top:5px; }
.vs-giveaway-browse-btn{
    height:42px; padding:0 24px; border-radius:10px; background:var(--primary); color:#fff;
    font-weight:700; border:none; cursor:pointer; flex-shrink:0; display:flex; align-items:center; gap:6px;
}
.vs-giveaway-browse-btn:disabled{ background:#1a2540; color:#9eb0cf; cursor:not-allowed; }
.vs-giveaway-browse-btn.pending{ background:#1a2540; color:#9eb0cf; }

/* ---------- Leaderboard ---------- */

.vs-giveaway-leaderboard{ background:#0b1424; border:1px solid var(--border); border-radius:16px; padding:20px; }
.vs-leaderboard-row{
    display:grid; grid-template-columns:44px 1fr 70px; align-items:center; gap:12px; padding:12px 8px;
    border-radius:10px; transition:.2s;
}
.vs-leaderboard-row:hover{ background:#101d33; }
.vs-leaderboard-rank{ color:#6f86b3; font-weight:800; font-size:15px; text-align:center; }
.vs-leaderboard-row:nth-child(1) .vs-leaderboard-rank{ color:#ffd700; }
.vs-leaderboard-row:nth-child(2) .vs-leaderboard-rank{ color:#c0c0c0; }
.vs-leaderboard-row:nth-child(3) .vs-leaderboard-rank{ color:#cd7f32; }
.vs-leaderboard-user{ display:flex; align-items:center; gap:10px; color:#fff; font-weight:600; font-size:14px; }
.vs-leaderboard-avatar{ width:32px; height:32px; border-radius:50%; object-fit:cover; background:#182a4a; flex-shrink:0; }
.vs-leaderboard-credits{ color:var(--primary); font-weight:800; text-align:right; }
.vs-leaderboard-me{
    margin-top:12px; padding-top:16px; border-top:1px dashed var(--border);
}
.vs-leaderboard-me .vs-leaderboard-row{ background:rgba(47,84,235,.08); }

/* ---------- Winner Congratulations ---------- */

.vs-giveaway-congrats{
    text-align:center; padding:50px 20px; position:relative; overflow:hidden;
    background:radial-gradient(circle at 50% 0%, rgba(47,84,235,.15), transparent 60%);
    border-radius:20px;
}
.vs-congrats-avatar{
    width:110px; height:110px; border-radius:50%; object-fit:cover; margin:0 auto 20px;
    border:4px solid var(--primary); box-shadow:0 0 0 8px rgba(47,84,235,.15);
    animation:vsCongratsPop .6s cubic-bezier(.34,1.56,.64,1);
}
@keyframes vsCongratsPop{
    0%{ transform:scale(0); opacity:0; }
    100%{ transform:scale(1); opacity:1; }
}
.vs-congrats-heading{ color:#fff; font-size:24px; font-weight:800; margin-bottom:8px; }
.vs-congrats-username{ color:var(--primary); font-size:20px; font-weight:800; margin-bottom:6px; }
.vs-congrats-sub{ color:#9eb0cf; font-size:14px; }

.vs-confetti{ position:absolute; top:-10px; width:8px; height:14px; opacity:.9; animation:vsConfettiFall 3.2s linear infinite; }
@keyframes vsConfettiFall{
    0%{ transform:translateY(-20px) rotate(0deg); opacity:1; }
    100%{ transform:translateY(340px) rotate(540deg); opacity:0; }
}

/* ---------- Public Giveaway Winners page ---------- */

.vs-winners-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:18px; }
.vs-winner-card{
    background:#08111f; border:1px solid var(--border); border-radius:16px; padding:22px; text-align:center;
    transition:.22s;
}
.vs-winner-card:hover{ transform:scale(1.02); border-color:rgba(47,84,235,.4); }
.vs-winner-card-number{ color:#6f86b3; font-size:12px; font-weight:700; text-transform:uppercase; margin-bottom:10px; }
.vs-winner-card-avatar{ width:64px; height:64px; border-radius:50%; object-fit:cover; margin:0 auto 12px; background:#182a4a; }
.vs-winner-card-name{ color:#fff; font-weight:700; margin-bottom:4px; }
.vs-winner-card-mobile{ color:#6f86b3; font-size:13px; margin-bottom:14px; }

.vs-winner-mine-card{
    background:linear-gradient(160deg,#152a52,#08111f); border:1px solid rgba(47,84,235,.4); border-radius:18px;
    padding:28px; text-align:center; grid-column:1/-1;
}

/* ============================================================
 * Signup -- Terms & Privacy checkboxes
 * ============================================================ */

.vs-terms-group{ display:flex; flex-direction:column; gap:10px; margin:14px 0 18px; }

.vs-checkbox-label{
    display:flex; align-items:flex-start; gap:10px; cursor:pointer; user-select:none;
}
.vs-checkbox-label input[type="checkbox"]{
    position:absolute; opacity:0; width:0; height:0;
}
.vs-checkbox-box{
    flex-shrink:0; width:20px; height:20px; margin-top:1px; border-radius:6px;
    border:1.5px solid var(--border); background:#0b1424; position:relative; transition:.2s;
}
.vs-checkbox-box::after{
    content:""; position:absolute; left:6px; top:2px; width:5px; height:10px;
    border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg) scale(0);
    transition:transform .18s ease;
}
.vs-checkbox-label input[type="checkbox"]:checked + .vs-checkbox-box{
    background:var(--primary); border-color:var(--primary);
}
.vs-checkbox-label input[type="checkbox"]:checked + .vs-checkbox-box::after{
    transform:rotate(45deg) scale(1);
}
.vs-checkbox-label input[type="checkbox"]:focus-visible + .vs-checkbox-box{
    box-shadow:0 0 0 3px rgba(47,84,235,.3);
}
.vs-checkbox-text{ color:#9eb0cf; font-size:13px; line-height:1.5; }
.vs-checkbox-text a{ color:var(--primary); text-decoration:underline; }
.vs-checkbox-text a:hover{ color:#fff; }

.vs-submit-btn:disabled{ opacity:.5; cursor:not-allowed; }

/* ============================================================
 * Watch Break Popup (closable, with PTC / Task skip cards)
 * ============================================================ */

#vsBreakOverlay{
    position:fixed; inset:0; z-index:2147483000;
    display:flex; align-items:center; justify-content:center;
    padding:16px; box-sizing:border-box;
    background:rgba(4,8,18,.82);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    overflow-y:auto;
    animation:vsBreakFadeIn .25s ease;
}
@keyframes vsBreakFadeIn{ from{ opacity:0; } to{ opacity:1; } }

.vs-break-card{
    position:relative; width:100%; max-width:430px; margin:auto;
    padding:34px 24px 24px; box-sizing:border-box; text-align:center;
    background:radial-gradient(130% 70% at 50% 0%, rgba(77,141,255,.15), transparent 62%), #0e1829;
    border:1px solid rgba(77,141,255,.28); border-radius:24px;
    box-shadow:0 30px 80px rgba(0,0,0,.6);
    animation:vsBreakPopIn .32s cubic-bezier(.2,.9,.3,1.1);
}
.vs-break-card.is-finished{
    background:radial-gradient(130% 70% at 50% 0%, rgba(34,197,94,.17), transparent 62%), #0e1829;
    border-color:rgba(34,197,94,.35);
}
@keyframes vsBreakPopIn{ from{ opacity:0; transform:translateY(14px) scale(.96); } to{ opacity:1; transform:none; } }

.vs-break-close{
    position:absolute; top:12px; right:12px; width:34px; height:34px;
    border:0; border-radius:50%; cursor:pointer;
    background:rgba(255,255,255,.07); color:#c4d0e8; font-size:22px; line-height:34px; padding:0;
    transition:.2s;
}
.vs-break-close:hover{ background:rgba(255,255,255,.14); color:#fff; }

.vs-break-ring-wrap{ position:relative; width:128px; height:128px; margin:0 auto 14px; }
.vs-break-ring{ width:100%; height:100%; transform:rotate(-90deg); }
.vs-break-ring-track{ fill:none; stroke:rgba(255,255,255,.08); stroke-width:7; }
.vs-break-ring-progress{ fill:none; stroke:var(--primary); stroke-width:7; stroke-linecap:round; transition:stroke-dashoffset 1s linear; }
.vs-break-card.is-finished .vs-break-ring-progress{ stroke:#22c55e; stroke-dashoffset:0 !important; }
.vs-break-ring-center{
    position:absolute; inset:0; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:2px;
}
.vs-break-clock-icon{ color:#7ea6ff; opacity:.9; }
.vs-break-check-icon{ color:#22c55e; }
.vs-break-ring-center span{ font-size:22px; font-weight:800; color:#fff; font-variant-numeric:tabular-nums; letter-spacing:.5px; }

.vs-break-title{ margin:0 0 8px; font-size:22px; line-height:1.25; color:#fff; }
.vs-break-sub{ margin:0 0 16px; font-size:14px; line-height:1.55; color:#9eb0cf; }

.vs-break-reqs{ display:flex; flex-direction:column; gap:0; text-align:left; }
.vs-break-join{
    display:flex; align-items:center; gap:10px; margin:9px 0;
    color:#6f86b3; font-size:11.5px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase;
}
.vs-break-join::before, .vs-break-join::after{ content:""; flex:1; height:1px; background:rgba(255,255,255,.09); }

.vs-break-req{
    display:flex; align-items:center; gap:12px; padding:13px 14px;
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09); border-radius:16px;
    text-decoration:none; transition:.22s;
}
.vs-break-req:hover{ border-color:rgba(77,141,255,.55); background:rgba(77,141,255,.09); transform:translateY(-1px); }
.vs-break-req-icon{
    flex-shrink:0; width:42px; height:42px; border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    color:#7ea6ff; background:rgba(77,141,255,.14);
}
.vs-break-req-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.vs-break-req-title{ color:#fff; font-size:14px; font-weight:700; }
.vs-break-req-bar{ display:block; height:6px; border-radius:6px; background:rgba(255,255,255,.09); overflow:hidden; }
.vs-break-req-bar i{ display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,#4d8dff,#22c55e); transition:width .5s ease; }
.vs-break-req-count{ color:#7e93b8; font-size:12px; font-weight:600; }
.vs-break-req-go{
    flex-shrink:0; padding:8px 13px; border-radius:10px; font-size:13px; font-weight:800;
    color:#fff; background:var(--primary);
}

.vs-break-leave{ margin:12px 0 0; text-align:center; color:#fbbf24; font-size:12.5px; font-weight:600; }
.vs-break-note{ margin:14px 0 0; color:#6f86b3; font-size:12px; line-height:1.5; }

.vs-break-btn{
    display:block; width:100%; margin-top:18px; padding:14px; box-sizing:border-box;
    border:0; border-radius:14px; cursor:pointer;
    background:var(--primary); color:#fff; font-size:15px; font-weight:800; transition:.22s;
}
.vs-break-btn:hover{ transform:translateY(-1px); box-shadow:0 10px 26px rgba(47,84,235,.45); }
.vs-break-btn-ghost{ background:rgba(255,255,255,.07); color:#d5deed; font-weight:700; }
.vs-break-btn-ghost:hover{ background:rgba(255,255,255,.12); box-shadow:none; }
.vs-break-card.is-finished .vs-break-btn{ background:#16a34a; }
.vs-break-card.is-finished .vs-break-btn:hover{ box-shadow:0 10px 26px rgba(22,163,74,.4); }

@media (max-width:420px){
    .vs-break-card{ padding:30px 16px 18px; border-radius:20px; }
    .vs-break-ring-wrap{ width:112px; height:112px; }
    .vs-break-req{ padding:11px 11px; gap:10px; }
    .vs-break-req-icon{ width:38px; height:38px; }
    .vs-break-req-go{ padding:7px 10px; font-size:12.5px; }
}
@media (prefers-reduced-motion:reduce){
    #vsBreakOverlay, .vs-break-card{ animation:none; }
    .vs-break-ring-progress, .vs-break-req-bar i{ transition:none; }
}

/* ============================================================
 * Recently Viewed badge (on-cooldown indicator on video thumbnails)
 * ============================================================ */

.vs-recently-viewed-badge{
    position:absolute; left:8px; top:8px; z-index:2;
    padding:4px 10px; border-radius:999px;
    font-size:10.5px; font-weight:600; letter-spacing:.2px; color:#fff;
    background:rgba(8,17,31,.65);
    backdrop-filter:blur(4px);
    border:1px solid rgba(255,255,255,.14);
    pointer-events:none;
}

.vs-popular-thumb-wrap{
    position:relative; width:100px; height:60px; flex-shrink:0;
    border-radius:8px; overflow:hidden;
}

.vs-recently-viewed-badge-sm{
    left:5px; top:5px; padding:2px 6px; font-size:9px; border-radius:6px;
}

/* ============================================================
 * Load More Videos (Latest Videos / Most Viewed pages)
 * ============================================================ */

#featuredLoadMoreWrap{
    display:flex; justify-content:center; margin:34px 0 12px;
}

.vs-load-more-btn{
    position:relative; overflow:hidden;
    padding:14px 40px; border:none; border-radius:999px;
    font-size:15px; font-weight:600; color:#fff; cursor:pointer;
    background:linear-gradient(135deg, var(--primary), var(--secondary));
    box-shadow:0 10px 28px rgba(47,84,235,.35);
    transition:transform .25s ease, box-shadow .25s ease, opacity .25s ease;
    display:inline-flex; align-items:center; gap:10px;
}

.vs-load-more-btn::before{
    content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
    background:linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
    transform:skewX(-20deg);
    transition:left .6s ease;
}

.vs-load-more-btn:hover:not(:disabled)::before{ left:130%; }

.vs-load-more-btn:hover:not(:disabled){
    transform:translateY(-2px);
    box-shadow:0 14px 34px rgba(47,84,235,.5);
}

.vs-load-more-btn:disabled{ opacity:.75; cursor:not-allowed; transform:none; }

.vs-load-more-spinner{
    width:16px; height:16px; border:2.5px solid rgba(255,255,255,.35);
    border-top-color:#fff; border-radius:50%;
    animation:vsSpin .7s linear infinite;
    display:none;
}

.vs-load-more-btn.is-loading .vs-load-more-spinner{ display:inline-block; }
.vs-load-more-btn.is-loading .vs-load-more-label{ opacity:.85; }

/* ===== Visit Task stage (tab 6) ===== */
.vs-visit-stage{position:fixed;inset:0;z-index:99999;display:flex;flex-direction:column;background:var(--bg,#08111f);color:#fff;overflow:auto}
.vs-visit-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border,rgba(255,255,255,.1))}
.vs-visit-brand{font-weight:800;font-size:16px;letter-spacing:.2px}
.vs-visit-chip{padding:6px 12px;border-radius:999px;font-size:13px;font-weight:700;background:rgba(255,255,255,.08);border:1px solid var(--border,rgba(255,255,255,.1))}
.vs-visit-chip.is-timer{background:rgba(47,84,235,.18);border-color:#2f54eb}
.vs-visit-chip.is-ok{background:rgba(34,197,94,.16);border-color:#22c55e;color:#4ade80}
.vs-visit-chip.is-warn{background:rgba(239,68,68,.16);border-color:#ef4444;color:#f87171}
.vs-visit-main{flex:1;display:flex;align-items:center;justify-content:center;padding:16px}
.vs-visit-card{width:100%;max-width:420px;text-align:center;background:var(--card,#0f1d33);border:1px solid var(--border,rgba(255,255,255,.1));border-radius:20px;padding:28px 20px;box-shadow:0 20px 50px rgba(0,0,0,.4)}
.vs-visit-icon{width:64px;height:64px;margin:0 auto 16px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(47,84,235,.18);color:#6d8bff}
.vs-visit-icon svg{width:30px;height:30px}
.vs-visit-icon.is-ok{background:rgba(34,197,94,.16);color:#4ade80}
.vs-visit-icon.is-warn{background:rgba(239,68,68,.16);color:#f87171}
.vs-visit-icon.is-paused{background:rgba(245,158,11,.16);color:#fbbf24}
.vs-visit-title{margin:0 0 8px;font-size:22px;font-weight:800}
.vs-visit-text{margin:0 0 14px;font-size:14px;line-height:1.5;color:rgba(255,255,255,.7)}
.vs-visit-meta{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:18px;font-size:13px;font-weight:600}
.vs-visit-btn{display:block;width:100%;padding:14px;border:0;border-radius:12px;background:#2f54eb;color:#fff;font-size:16px;font-weight:800;cursor:pointer}
.vs-visit-btn:hover{filter:brightness(1.1)}
.vs-visit-btn:disabled{opacity:.6;cursor:default}
.vs-visit-spin{animation:vsVisitSpin 1s linear infinite}
@keyframes vsVisitSpin{to{transform:rotate(360deg)}}

/* ===== Task page: cooldown / no-task card ===== */
.vs-task-wait-card{position:relative;grid-column:1/-1;max-width:520px;text-align:center;background:var(--card,#0f1d33);border:1px solid var(--border,rgba(255,255,255,.08));border-radius:20px;padding:34px 20px 28px}
.vs-task-wait-icon{width:56px;height:56px;margin:0 auto 14px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:26px;background:rgba(47,84,235,.18);color:#8aa2ff}
.vs-task-wait-title{font-size:20px;font-weight:800;margin-bottom:6px}
.vs-task-wait-text{font-size:14px;color:var(--text2,#b5bfd3)}
.vs-task-wait-text strong{color:#fff;font-variant-numeric:tabular-nums;letter-spacing:.5px}