/* ============================================================================
   VKEY VCLIPS CONTENT SAFETY UI 2.0
   Native first-party gate for protected +18 VClips.
   It intentionally does not reveal the underlying media while access is locked.
   ============================================================================ */

html body.mode-vclips[data-discover-view="videos"] #view-tab-videos .vclip-sensitive-gate {
    position: relative !important;
    width: 100vw !important;
    height: 100dvh !important;
    overflow: hidden !important;
    background: #050506 !important;
    color: #fff !important;
    isolation: isolate;
}

.vclip-sensitive-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background:
        radial-gradient(70% 54% at 50% 26%, rgba(255,221,0,.16), rgba(255,221,0,0) 68%),
        radial-gradient(54% 42% at 18% 66%, rgba(255,255,255,.055), transparent 72%),
        linear-gradient(165deg,#050506 0%,#101114 52%,#050506 100%);
    z-index: 0;
}
.vclip-sensitive-bg::before {
    content:"";
    position:absolute;
    inset:-12%;
    background:
        repeating-linear-gradient(112deg,rgba(255,255,255,.026) 0 1px,transparent 1px 13px),
        radial-gradient(circle at 62% 42%,rgba(255,221,0,.12),transparent 27%);
    filter: blur(1px);
    transform: rotate(-4deg) scale(1.08);
    opacity:.78;
}
.vclip-sensitive-bg::after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to top,rgba(0,0,0,.92),transparent 44%,rgba(0,0,0,.24));
}

.vclip-sensitive-center {
    position:absolute;
    z-index:20;
    top:50%;
    left:50%;
    width:min(86vw,340px);
    transform:translate(-50%,-52%);
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    pointer-events:auto;
}

.vclip-sensitive-lockmark {
    width:64px;
    height:64px;
    border-radius:24px;
    display:grid;
    place-items:center;
    margin-bottom:16px;
    background:rgba(255,221,0,.12);
    border:1px solid rgba(255,221,0,.36);
    color:#ffdd00;
    box-shadow:0 20px 70px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.035);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}
.vclip-sensitive-lockmark i { font-size:28px; line-height:1; }

.vclip-sensitive-kicker {
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin:0 0 10px;
    color:#ffdd00;
    font-size:10px;
    line-height:1;
    font-weight:950;
    letter-spacing:.16em;
    text-transform:uppercase;
}
.vclip-sensitive-kicker::before {
    content:"";
    width:5px;
    height:5px;
    border-radius:50%;
    background:#ffdd00;
    box-shadow:0 0 16px rgba(255,221,0,.75);
}

.vclip-sensitive-center h2 {
    margin:0;
    max-width:310px;
    color:#fff;
    font-size:clamp(25px,7vw,34px);
    line-height:.98;
    font-weight:950;
    letter-spacing:-.045em;
    text-wrap:balance;
    text-shadow:0 7px 30px rgba(0,0,0,.5);
}
.vclip-sensitive-center p {
    margin:13px auto 0;
    max-width:300px;
    color:rgba(255,255,255,.66);
    font-size:12px;
    line-height:1.5;
    font-weight:650;
    text-wrap:balance;
}

.vclip-sensitive-cta {
    min-width:190px;
    min-height:46px;
    margin-top:20px;
    padding:0 22px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border-radius:999px;
    border:0;
    background:#ffdd00;
    color:#060606 !important;
    text-decoration:none !important;
    font-size:10px;
    font-weight:950;
    letter-spacing:.10em;
    text-transform:uppercase;
    box-shadow:0 14px 42px rgba(255,221,0,.18);
    -webkit-tap-highlight-color:transparent;
}
.vclip-sensitive-cta:active { transform:scale(.975); }
.vclip-sensitive-cta i { font-size:16px; }

.vclip-sensitive-private-note {
    margin-top:13px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    color:rgba(255,255,255,.42);
    font-size:9px;
    line-height:1.2;
    font-weight:800;
    letter-spacing:.045em;
}
.vclip-sensitive-private-note i { color:rgba(255,221,0,.70); font-size:13px; }

.vclip-sensitive-creator {
    position:absolute;
    z-index:30;
    left:20px;
    right:88px;
    bottom:max(110px,calc(env(safe-area-inset-bottom) + 94px));
    display:flex;
    align-items:center;
    gap:11px;
    pointer-events:auto;
}
.vclip-sensitive-creator img {
    width:46px;
    height:46px;
    flex:0 0 46px;
    object-fit:cover;
    border-radius:50%;
    border:2px solid rgba(255,221,0,.92);
    background:#080808;
    box-shadow:0 10px 28px rgba(0,0,0,.38);
}
.vclip-sensitive-creator-copy { min-width:0; }
.vclip-sensitive-creator strong {
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#fff;
    font-size:15px;
    line-height:1.15;
    font-weight:950;
    text-shadow:0 3px 14px rgba(0,0,0,.72);
}
.vclip-sensitive-creator span {
    display:flex;
    align-items:center;
    gap:5px;
    margin-top:4px;
    color:#ffdd00;
    font-size:9px;
    line-height:1;
    font-weight:900;
    letter-spacing:.09em;
    text-transform:uppercase;
}

.vclip-sensitive-skip {
    position:absolute !important;
    top:204px !important;
    right:20px !important;
    left:auto !important;
    z-index:1420 !important;
    width:36px !important;
    height:36px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 !important;
    border-radius:50% !important;
    border:1px solid rgba(255,255,255,.18) !important;
    background:rgba(0,0,0,.44) !important;
    color:#fff !important;
    backdrop-filter:blur(12px) !important;
    -webkit-backdrop-filter:blur(12px) !important;
    box-shadow:0 8px 22px rgba(0,0,0,.26) !important;
}
.vclip-sensitive-skip i { font-size:18px !important; }

@media (max-height:720px) {
    .vclip-sensitive-center { transform:translate(-50%,-46%); }
    .vclip-sensitive-lockmark { width:54px;height:54px;border-radius:20px;margin-bottom:12px; }
    .vclip-sensitive-center h2 { font-size:26px; }
    .vclip-sensitive-center p { margin-top:9px; }
    .vclip-sensitive-cta { margin-top:14px;min-height:42px; }
}

@media (min-width:768px) {
    .vclip-sensitive-center { width:min(420px,72vw); }
    .vclip-sensitive-center h2 { max-width:390px;font-size:38px; }
    .vclip-sensitive-center p { max-width:360px;font-size:13px; }
    .vclip-sensitive-creator { left:32px;bottom:40px; }
}