* { box-sizing: border-box; }
body { margin: 0; overflow: hidden; background: #020617; font-family: 'Inter', sans-serif; -webkit-tap-highlight-color: transparent; }

#bgCanvas {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100dvh;
    z-index: 0;
    pointer-events: none;
}

#videoContainer {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100dvh;
    z-index: 1;
    overflow: hidden;
    background: #020617;
}

#videoSlider {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    flex-direction: column;
    will-change: transform;
}

.video-slide {
    width: 100%; height: 100dvh;
    flex-shrink: 0;
    position: relative;
    background: #020617;
    display: flex;
    align-items: center;
    justify-content: center;
}

#videoCanvas {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100dvh;
    z-index: 2;
    touch-action: none;
}

.overlay { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.ptr { pointer-events: auto; }

.tab-active {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.4) !important;
    color: #34d399 !important;
}

#toast { transition: opacity 0.3s ease; }

.pt-safe { padding-top: max(12px, env(safe-area-inset-top)); }
.pb-safe { padding-bottom: max(16px, env(safe-area-inset-bottom)); }

#commentPanel {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 65dvh;
    background: #0f172a;
    border-top: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94);
    z-index: 30;
    display: flex;
    flex-direction: column;
}
#commentPanel.open { transform: translateY(0); }
#commentScrim {
    position: fixed; inset: 0; z-index: 29;
    background: transparent;
    display: none;
}
#commentScrim.open { display: block; }
#commentList { overflow-y: auto; flex: 1; }
#commentList::-webkit-scrollbar { width: 3px; }
#commentList::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

#swipePanel {
    will-change: transform, opacity;
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s ease;
}

#swipePanel h3,
#swipePanel p,
#swipePanel div {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 2px 6px rgba(0, 0, 0, 0.6);
}

.tag-badge {
    background: rgba(16, 185, 129, 0.18) !important;
    border: 1.5px solid rgba(16, 185, 129, 0.3) !important;
    color: #a7f3d0 !important;
    backdrop-filter: blur(4px);
    text-shadow: none !important;
}

#progressContainer.show {
    opacity: 1 !important;
    pointer-events: auto !important;
}

#btnDockPrev, #btnDockNext {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(8px) !important;
}

#swipeHint {
    position: fixed;
    left: 50%;
    transform: translateX(-50%) scale(0.6);
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: none;
    z-index: 20;
}
#swipeHint.show {
    opacity: 0.7;
    transform: translateX(-50%) scale(1);
}