:root {
    --sf-accent: var(--tpl-accent, #40cc92);
    --sf-accent-rgb: var(--tpl-accent-rgb, 64, 204, 146);
    --sf-nav-height: calc(60px + env(safe-area-inset-bottom, 0px));
}

html, body.shortfeed-page {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: #08090b;
}

body.shortfeed-page {
    box-sizing: border-box;
    padding: 0 !important;
    color: #fff;
    overscroll-behavior: none;
    -webkit-tap-highlight-color: transparent;
}

.shortfeed-shell {
    position: relative;
    width: min(100%, 540px);
    height: calc(100vh - var(--sf-nav-height));
    height: calc(100dvh - var(--sf-nav-height));
    min-height: 420px;
    margin: 0 auto;
    overflow: hidden;
    background: #08090b;
    isolation: isolate;
}

.shortfeed-stage {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
}
.shortfeed-stage::-webkit-scrollbar { display: none; }

.shortfeed-item {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background: #07080a;
}

.shortfeed-ad-item {
    background: #07080a;
}
.shortfeed-ad-item.is-locked { touch-action: none; }
.shortfeed-ad__backdrop {
    position: absolute;
    inset: -34px;
    background-position: center;
    background-size: cover;
    filter: blur(30px) brightness(.34) saturate(1.12);
    opacity: .9;
    transform: scale(1.13);
}
.shortfeed-ad-item::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,.18), transparent 46%, rgba(0,0,0,.72));
}
.shortfeed-ad__media {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
}
.shortfeed-ad__image {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    flex: 0 0 auto;
}
.shortfeed-ad__info {
    position: absolute;
    z-index: 9;
    left: 18px;
    right: 106px;
    bottom: 22px;
    text-shadow: 0 1px 5px rgba(0,0,0,.72);
    pointer-events: none;
}
.shortfeed-ad__title {
    display: -webkit-box;
    overflow: hidden;
    color: rgba(255,255,255,.96);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
.shortfeed-ad__title strong { font-weight: 800; }
.shortfeed-ad__skip {
    position: absolute;
    z-index: 10;
    right: 14px;
    bottom: 18px;
    min-width: 76px;
    height: 34px;
    padding: 0 13px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 999px;
    color: #fff;
    background: rgba(10,12,15,.48);
    box-shadow: 0 5px 18px rgba(0,0,0,.2);
    font-size: 12px;
    font-weight: 650;
    backdrop-filter: blur(13px);
}
.shortfeed-ad__skip:disabled { color: rgba(255,255,255,.78); cursor: default; }
.shortfeed-ad__skip:not(:disabled):active { transform: scale(.94); }

.shortfeed-media {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #07080a;
}

.shortfeed-media__backdrop {
    position: absolute;
    inset: -34px;
    background-position: center;
    background-size: cover;
    filter: blur(28px) brightness(.38) saturate(1.1);
    transform: scale(1.12);
    opacity: .78;
}

.shortfeed-media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(0,0,0,.32) 0, transparent 22%, transparent 58%, rgba(0,0,0,.78) 100%),
        radial-gradient(circle at 50% 45%, transparent 35%, rgba(0,0,0,.16) 100%);
}

.shortfeed-video {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: transparent;
}

.shortfeed-tap-layer {
    position: absolute;
    z-index: 4;
    inset: 82px 78px 115px 0;
    border: 0;
    padding: 0;
    background: transparent;
}

.shortfeed-play-state {
    position: absolute;
    z-index: 7;
    left: 50%;
    top: 50%;
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(.86);
    color: #fff;
    background: rgba(8, 10, 13, .45);
    border: 1px solid rgba(255,255,255,.25);
    backdrop-filter: blur(14px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}
.shortfeed-item.is-paused .shortfeed-play-state { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.shortfeed-play-state svg { width: 26px; height: 26px; margin-left: 3px; fill: currentColor; }

.shortfeed-buffering {
    position: absolute;
    z-index: 7;
    left: 50%;
    top: 50%;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border: 2px solid rgba(255,255,255,.25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: shortfeed-spin .75s linear infinite;
    opacity: 0;
    pointer-events: none;
}
.shortfeed-item.is-buffering .shortfeed-buffering { opacity: 1; }
@keyframes shortfeed-spin { to { transform: rotate(360deg); } }

.shortfeed-top {
    position: absolute;
    z-index: 20;
    top: 0;
    left: 0;
    right: 0;
    padding: max(12px, env(safe-area-inset-top, 0px)) 58px 28px 12px;
    display: flex;
    justify-content: center;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,.52), transparent);
}

.shortfeed-tabs {
    display: flex;
    width: auto;
    max-width: 100%;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    padding: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 999px;
    background: rgba(15,17,20,.34);
    box-shadow: 0 8px 28px rgba(0,0,0,.2);
    backdrop-filter: blur(18px) saturate(1.25);
    pointer-events: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.shortfeed-tabs::-webkit-scrollbar { display: none; }

.shortfeed-tab {
    position: relative;
    min-width: 58px;
    height: 34px;
    padding: 0 15px;
    border: 0;
    border-radius: 999px;
    color: rgba(255,255,255,.7);
    background: transparent;
    font-size: 14px;
    font-weight: 650;
    letter-spacing: .02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color .2s ease, background .2s ease, transform .2s ease;
}
.shortfeed-tab:active { transform: scale(.96); }
.shortfeed-tab.is-active {
    color: #fff;
    background: rgba(var(--sf-accent-rgb), .85);
    box-shadow: 0 5px 16px rgba(var(--sf-accent-rgb), .28);
}

.shortfeed-info {
    position: absolute;
    z-index: 9;
    left: 18px;
    right: 92px;
    bottom: 48px;
    text-shadow: 0 1px 5px rgba(0,0,0,.65);
    pointer-events: none;
}
.shortfeed-info__author {
    margin: 0 0 6px;
    color: #fff;
    font-size: 15px;
    font-weight: 750;
    line-height: 1.35;
}
.shortfeed-info__title {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: rgba(255,255,255,.94);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.shortfeed-actions {
    position: absolute;
    z-index: 12;
    right: 13px;
    bottom: 48px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.shortfeed-action {
    display: flex;
    width: 58px;
    padding: 0;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    border: 0;
    color: #fff;
    background: transparent;
    font-size: 11px;
    text-shadow: 0 1px 4px rgba(0,0,0,.72);
}
.shortfeed-action__icon {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;
    background: rgba(10,12,15,.35);
    box-shadow: 0 6px 20px rgba(0,0,0,.2);
    backdrop-filter: blur(13px);
    transition: transform .16s ease, background .16s ease;
}
.shortfeed-action:active .shortfeed-action__icon { transform: scale(.88); }
.shortfeed-action svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.shortfeed-action.is-active .shortfeed-action__icon { color: #fff; background: var(--sf-accent); border-color: transparent; }
.shortfeed-action.is-active svg.shortfeed-heart { fill: currentColor; }

.shortfeed-progress-controls {
    position: absolute;
    z-index: 18;
    left: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    margin: 0;
    padding: 2px 12px 5px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.34));
}
.shortfeed-time {
    flex: 0 0 auto;
    min-width: 32px;
    color: rgba(255,255,255,.86);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-align: center;
    text-shadow: 0 1px 4px rgba(0,0,0,.72);
}
.shortfeed-progress {
    min-width: 0;
    height: 24px;
    margin: 0;
    padding: 9px 0;
    flex: 1 1 auto;
    border: 0;
    outline: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    cursor: pointer;
    touch-action: pan-x;
}
.shortfeed-progress::-webkit-slider-runnable-track {
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--sf-accent) 0 var(--sf-progress), rgba(255,255,255,.3) var(--sf-progress) 100%);
}
.shortfeed-progress::-webkit-slider-thumb {
    width: 12px;
    height: 12px;
    margin-top: -4.5px;
    border: 2px solid #fff;
    border-radius: 50%;
    appearance: none;
    -webkit-appearance: none;
    background: var(--sf-accent);
    box-shadow: 0 1px 6px rgba(0,0,0,.38);
}
.shortfeed-progress::-moz-range-track { height:3px; border:0; border-radius:3px; background:rgba(255,255,255,.3); }
.shortfeed-progress::-moz-range-progress { height:3px; border-radius:3px; background:var(--sf-accent); }
.shortfeed-progress::-moz-range-thumb { width:10px; height:10px; border:2px solid #fff; border-radius:50%; background:var(--sf-accent); }
.shortfeed-progress:disabled { opacity:.35; cursor:default; }
.shortfeed-volume {
    display: grid;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: rgba(255,255,255,.10);
    backdrop-filter: blur(9px);
}
.shortfeed-volume:active { transform: scale(.9); }
.shortfeed-volume.is-muted { color: rgba(255,255,255,.72); }
.shortfeed-volume svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

.shortfeed-accent {
    position: absolute;
    z-index: 24;
    top: max(14px, env(safe-area-inset-top, 0px));
    right: 14px;
}
.shortfeed-accent__toggle {
    display: grid;
    width: 38px;
    height: 38px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 50%;
    color: #fff;
    background: rgba(12,14,17,.36);
    backdrop-filter: blur(14px);
}
.shortfeed-accent__toggle svg { width: 20px; height: 20px; fill: currentColor; }
.shortfeed-accent__panel {
    position: absolute;
    top: 47px;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 9px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 18px;
    background: rgba(13,15,18,.78);
    box-shadow: 0 12px 32px rgba(0,0,0,.3);
    backdrop-filter: blur(18px);
}
.shortfeed-accent__panel[hidden] { display: none !important; }
.shortfeed-accent__panel button {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 2px solid rgba(255,255,255,.82);
    border-radius: 50%;
    background: var(--swatch);
}
.shortfeed-accent__panel button[aria-pressed="true"] { box-shadow:0 0 0 3px rgba(255,255,255,.3), 0 0 0 5px var(--swatch); }

.shortfeed-loading {
    position: absolute;
    z-index: 30;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: #08090b;
}
.shortfeed-loading[hidden] { display: none; }
.shortfeed-loading span { width: 7px; height: 7px; border-radius: 50%; background: var(--sf-accent); animation: shortfeed-dot 1s ease-in-out infinite; }
.shortfeed-loading span:nth-child(2) { animation-delay: .12s; }
.shortfeed-loading span:nth-child(3) { animation-delay: .24s; }
@keyframes shortfeed-dot { 0%,100% { opacity:.3; transform:translateY(0) } 50% { opacity:1; transform:translateY(-7px) } }

.shortfeed-empty {
    position: absolute;
    z-index: 29;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: rgba(255,255,255,.7);
    background: #08090b;
}
.shortfeed-empty[hidden] { display: none; }
.shortfeed-empty button { height: 38px; padding: 0 18px; border: 0; border-radius: 999px; color:#fff; background:var(--sf-accent); }

.shortfeed-sheet-backdrop {
    position: fixed;
    z-index: 10020;
    inset: 0 0 var(--sf-nav-height);
    background: rgba(0,0,0,.46);
    opacity: 0;
    transition: opacity .24s ease;
}
.shortfeed-sheet-backdrop.is-open { opacity: 1; }

.shortfeed-comments {
    position: fixed;
    z-index: 10021;
    left: 50%;
    bottom: var(--sf-nav-height);
    display: flex;
    width: min(100%, 540px);
    max-height: min(72dvh, 680px);
    min-height: 46dvh;
    flex-direction: column;
    overflow: hidden;
    color: #1b2027;
    background: rgba(255,255,255,.97);
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -18px 55px rgba(0,0,0,.26);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, calc(100% + var(--sf-nav-height) + 28px));
    transition: transform .28s cubic-bezier(.2,.75,.2,1), opacity .18s ease, visibility 0s linear .28s;
}
.shortfeed-comments.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
    transition-delay: 0s;
}
.shortfeed-comments__handle { width: 38px; height: 4px; margin: 8px auto 0; border-radius:4px; background:#d7dbe0; }
.shortfeed-comments__head { display:flex; align-items:center; justify-content:center; min-height:48px; padding:0 48px; border-bottom:1px solid #eceef1; }
.shortfeed-comments__head strong { font-size:14px; }
.shortfeed-comments__head button { position:absolute; right:14px; top:10px; width:32px; height:32px; padding:0; border:0; border-radius:50%; color:#626a75; background:#f1f3f5; font-size:24px; line-height:1; }
.shortfeed-comments__list { flex:1; min-height:120px; padding:4px 18px 14px; overflow-y:auto; overscroll-behavior:contain; }
.shortfeed-comment { display:flex; gap:10px; padding:13px 0; border-bottom:1px solid #f0f1f3; }
.shortfeed-comment__avatar { display:grid; flex:0 0 36px; width:36px; height:36px; place-items:center; overflow:hidden; border-radius:50%; color:#fff; background:var(--sf-accent); font-weight:700; }
.shortfeed-comment__avatar img { width:100%; height:100%; object-fit:cover; }
.shortfeed-comment__body { min-width:0; flex:1; }
.shortfeed-comment__name { margin:0 0 4px; color:#8a9098; font-size:12px; }
.shortfeed-comment__text { margin:0; color:#252a31; font-size:14px; line-height:1.55; overflow-wrap:anywhere; }
.shortfeed-comment__time { margin-top:5px; color:#a2a7ad; font-size:11px; }
.shortfeed-comment--reply { margin-left:38px; padding-top:9px; }
.shortfeed-comment--reply .shortfeed-comment__avatar { width:30px; height:30px; flex-basis:30px; font-size:12px; }
.shortfeed-comment-ad {
    display: flex;
    gap: 10px;
    margin: 5px 0 2px;
    padding: 13px 0 14px;
    border-bottom: 1px solid #eceef1;
    color: inherit;
    text-decoration: none;
}
.shortfeed-comment-ad__avatar {
    display: block;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    overflow: hidden;
    border-radius: 50%;
    background: #eef1f4;
}
.shortfeed-comment-ad__avatar img { display:block; width:100%; height:100%; object-fit:cover; }
.shortfeed-comment-ad__body { display:block; min-width:0; flex:1; }
.shortfeed-comment-ad__head { display:flex; align-items:center; gap:7px; margin-bottom:5px; }
.shortfeed-comment-ad__head strong { overflow:hidden; color:#7b838e; font-size:12px; font-weight:650; text-overflow:ellipsis; white-space:nowrap; }
.shortfeed-comment-ad__head small { padding:1px 5px; border:1px solid #dfe3e8; border-radius:5px; color:#a0a6ae; font-size:9px; font-weight:500; line-height:1.3; }
.shortfeed-comment-ad__content { display:block; overflow-wrap:anywhere; color:#252a31; font-size:14px; line-height:1.55; }
.shortfeed-comment-ad__content strong { font-weight:800; }
.shortfeed-comments__status { min-height:20px; padding:0 18px; color:#969ca4; font-size:12px; text-align:center; }
.shortfeed-comments__form { display:flex; align-items:flex-end; gap:9px; padding:10px 12px max(10px, env(safe-area-inset-bottom, 0px)); border-top:1px solid #eceef1; background:#fff; }
.shortfeed-comments__compose { min-width:0; flex:1; }
.shortfeed-comments__form textarea { box-sizing:border-box; width:100%; min-height:40px; max-height:100px; resize:none; padding:10px 14px; border:1px solid #e5e8ec; border-radius:19px; outline:0; color:#222; background:#f5f6f7; font:14px/1.4 inherit; }
.shortfeed-comments__form textarea:focus { border-color:rgba(var(--sf-accent-rgb),.55); box-shadow:0 0 0 3px rgba(var(--sf-accent-rgb),.10); }
.shortfeed-comments__form button { height:40px; padding:0 17px; border:0; border-radius:20px; color:#fff; background:var(--sf-accent); font-weight:700; }
.shortfeed-comments__verify { display:flex; align-items:center; gap:8px; padding:7px 4px 0; }
.shortfeed-comments__verify[hidden] { display:none; }
.shortfeed-comments__verify input { box-sizing:border-box; width:96px; height:34px; padding:0 10px; border:1px solid #e5e8ec; border-radius:10px; outline:0; background:#f5f6f7; }
.shortfeed-comments__verify img { width:92px; height:34px; object-fit:cover; border-radius:8px; background:#f0f1f3; cursor:pointer; }

.shortfeed-toast {
    position: fixed;
    z-index: 10100;
    left: 50%;
    bottom: calc(var(--sf-nav-height) + 28px);
    max-width: calc(100vw - 40px);
    padding: 9px 15px;
    border-radius: 999px;
    color: #fff;
    background: rgba(18,20,24,.86);
    box-shadow: 0 10px 30px rgba(0,0,0,.28);
    font-size: 13px;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 8px);
    transition: opacity .18s ease, transform .18s ease;
}
.shortfeed-toast.is-show { opacity:1; transform:translate(-50%,0); }

.shortfeed-bottom-nav #bottomNav { z-index: 10010; }
body.shortfeed-sheet-open { overflow:hidden; }

.shortfeed-media:fullscreen,
.shortfeed-media:-webkit-full-screen { background:#000; }
.shortfeed-media:fullscreen .shortfeed-media__backdrop,
.shortfeed-media:fullscreen::after,
.shortfeed-media:-webkit-full-screen .shortfeed-media__backdrop,
.shortfeed-media:-webkit-full-screen::after { display:none; }
.shortfeed-media:fullscreen .shortfeed-video,
.shortfeed-media:-webkit-full-screen .shortfeed-video { object-fit:contain; background:#000; }
.shortfeed-media:fullscreen .shortfeed-tap-layer,
.shortfeed-media:fullscreen .shortfeed-play-state,
.shortfeed-media:fullscreen .shortfeed-buffering,
.shortfeed-media:-webkit-full-screen .shortfeed-tap-layer,
.shortfeed-media:-webkit-full-screen .shortfeed-play-state,
.shortfeed-media:-webkit-full-screen .shortfeed-buffering { display:none; }

@media (min-width: 821px) {
    body.shortfeed-page { background:radial-gradient(circle at 50% 35%, #222831 0, #0a0c10 58%, #050608 100%); }
    .shortfeed-shell { height:100vh; height:100dvh; box-shadow:0 0 70px rgba(0,0,0,.58); }
    .shortfeed-sheet-backdrop { bottom:0; }
    .shortfeed-comments { bottom:0; }
    .shortfeed-toast { bottom:28px; }
}

@media (prefers-reduced-motion: reduce) {
    .shortfeed-stage { scroll-behavior:auto; }
    .shortfeed-comments, .shortfeed-toast, .shortfeed-tab { transition:none; }
}