* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    height: 100%;
    background: #000;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    color: #fff;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}

/* ---------------- single shared player (fixed overlay) ---------------- */
#playerLayer {
    position: fixed;
    inset: 0;
    /* 视频层在页面内容之下：边栏(10)、页点(12)、遮罩(9)、边缘提示(8)都要显示在视频之上 */
    z-index: 5;
    pointer-events: none;
}

.video-container {
    position: absolute;
    inset: 0;
    background: #000;
    /* 视频层不接收指针事件，让 wheel/touch 命中下方的 feed，
       恢复浏览器原生垂直滚动（滚动链不再被全屏覆盖层截断）。
       需要交互的元素（如设置页按钮）单独开启 pointer-events。 */
    pointer-events: none;
}

.video-container video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
    /* 翻页动画期间的 transform 过渡：video 元素本身 translateY 离开/回到屏幕中央，
       配合 .is-flip-up / .is-flip-down / .is-flip-pre-up / .is-flip-pre-down /
       .is-flipping-in 五个状态切换，模拟"翻一张卡片"。 */
    transition: transform .3s cubic-bezier(.4, 0, .2, 1), opacity .3s ease-out;
    will-change: transform, opacity;
}

/* 切源翻页动画：单 video 元素做整页滚动。
   .is-flip-up：旧视频向上翻出（切下一个）；.is-flip-down：旧视频向下翻出（切上一个）
   .is-flip-pre-up：新视频在屏幕下方起始、即将翻入；.is-flip-pre-down：屏幕上方
   .is-flipping-in：新视频从屏幕外翻入到中央 */
.video-container.is-flip-up video {
    transform: translateY(-100%);
    opacity: 0;
}
.video-container.is-flip-down video {
    transform: translateY(100%);
    opacity: 0;
}
.video-container.is-flip-pre-up video {
    transform: translateY(100%);
    opacity: 0;
}
.video-container.is-flip-pre-down video {
    transform: translateY(-100%);
    opacity: 0;
}
.video-container.is-flipping-in video {
    transform: translateY(0);
    opacity: 1;
}

.video-container .v-label {
    position: absolute;
    left: 14px;
    bottom: 30px;
    right: 14px;
    z-index: 6;
    font-size: 15px;
    font-weight: 600;
    text-shadow: 0 1px 4px rgba(0,0,0,.8);
    word-break: break-all;
    pointer-events: none;
}
.video-container .v-label.hidden { display: none; }
.video-container .v-label { display: none; }  /* 默认隐藏 */

/* Overlay buttons: 默认隐藏 */
.video-overlay-btns {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 7;
    display: flex;
    gap: 8px;
    display: none;  /* 默认隐藏 */
}
.page[data-page="2"] .video-overlay-btns {
    opacity: 1;
    pointer-events: auto;
}

.video-overlay-btns .v-delete,
.video-overlay-btns .v-compress {
    background: rgba(0,0,0,.45);
    border: none;
    color: #fff;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    backdrop-filter: blur(4px);
    pointer-events: auto;
}
.video-overlay-btns .v-compress[disabled] { opacity: .5; cursor: default; }

/* ---------------- viewport / pages ---------------- */
.viewport {
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
    touch-action: pan-y;
    z-index: 1;
}

.pages {
    display: flex;
    width: 300%;
    height: 100%;
    /* 必须 position:relative 才能让 z-index 生效（static 元素 z-index 无效） */
    position: relative;
    /* 页面内容整体在视频层(playerLayer z-index:5)之上，确保边栏/页点/边缘提示可见 */
    z-index: 6;
    transform: translateX(calc(-1 * var(--page, 1) * (100% / 3)));
    /* cubic-bezier(.32,.72,0,1) = "expo-out" 风格：起步快、收尾缓，
       给三页切换一种"跟手"的弹性观感 */
    transition: transform .42s cubic-bezier(.32, .72, 0, 1);
    will-change: transform;
}

.pages {
    --page: 1;
}

.page {
    width: calc(100% / 3);
    height: 100%;
    position: relative;
    flex-shrink: 0;
    /* 背景透明：让底层视频层(playerLayer)透出，视频在任意页面持续可见 */
    background: transparent;
    overflow: hidden;
}

/* ---------------- center page (feed only, no video element inside) ---------------- */
.page[data-page="1"] {
    /* Center page: empty background, playerLayer shows through */
}

/* ---------------- vertical feed (for scroll/list, no video elements rendered) ---------------- */
.feed {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /* 原生纵向滚动由 JS 接管（app.js 实现抖音式跟手 + 吸附动画）：
       overflow hidden 关掉原生滚动条，touch-action none 让触摸不触发浏览器滚动 */
    overflow-y: hidden;
    touch-action: none;
    scrollbar-width: none;
    z-index: 1;
}
.feed::-webkit-scrollbar { display: none; }

/* Video always covers the center page via fixed overlay. Side pages have
   their feed transparent so the video shows through. */

/* Feed items: height 100%, snap-align start.
   These are placeholders for scroll positioning only — no video element inside. */
.video-item {
    position: relative;
    height: 100%;
    background: transparent;
    overflow: hidden;
    cursor: pointer;
}

/* ---------------- empty state ---------------- */
.empty-state {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: rgba(255,255,255,.7);
}
.empty-state .empty-icon { font-size: 56px; }
.empty-state p { font-size: 16px; }
.empty-state .sub { font-size: 13px; color: rgba(255,255,255,.45); }

/* ---------------- side panels ---------------- */
.side-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    min-width: 240px;
    z-index: 10;
    background: rgba(18, 18, 20, 0.82);
    backdrop-filter: blur(14px);
    display: flex;
    flex-direction: column;
    transform: translateX(105%);
    transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.page[data-page="0"] .side-panel {
    right: auto;
    left: 0;
    border-left: none;
    border-right: 1px solid rgba(255,255,255,.08);
    transform: translateX(0);
}
.page[data-page="2"] .side-panel {
    /* 设置页边栏贴右缘显示 */
    left: auto;
    right: 0;
    border-left: 1px solid rgba(255,255,255,.08);
    border-right: none;
    transform: translateX(0);
}

.panel-head {
    padding: 18px 16px 12px;
    font-size: 16px;
    font-weight: 700;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
}

/* 播放列表条：固定在设置页 (page 2) 上方，竖向滚动 11 格 (uuid, t) 视图；
   每行显示：pos（前 N / 当前 / 后 N）+ 状态徽标（未播/看到/播放中）+ uuid
   + 当前已播时长 / 总时长 mm:ss + 进度条
   鼠标 / 键盘 / 触摸切换视频时高亮当前条目（中央 playlistWindow[5]） */
.playlist-strip {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 200px;
    flex-shrink: 0;
    scrollbar-width: none;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: rgba(0,0,0,.18);
    scroll-behavior: smooth;
}
.playlist-strip::-webkit-scrollbar { display: none; }
.playlist-strip .pl-item {
    flex: 0 0 auto;
    width: 100%;
    min-height: 38px;
    border-radius: 8px;
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.85);
    font-size: 12px;
    line-height: 1.3;
    padding: 6px 9px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 4px;
    border: 1px solid transparent;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
    user-select: none;
    pointer-events: auto;
}
.playlist-strip .pl-item:hover {
    background: rgba(255,255,255,.12);
    transform: translateX(-1px);
}
.playlist-strip .pl-item.active {
    border-color: #fe2c55;
    background: rgba(254, 44, 85, .18);
    color: #fff;
    box-shadow: 0 0 0 1px rgba(254, 44, 85, .55);
}
.playlist-strip .pl-item .pl-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.playlist-strip .pl-item .pl-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}
.playlist-strip .pl-item .pl-pos {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    opacity: .8;
}
.playlist-strip .pl-item.active .pl-pos {
    opacity: 1;
    color: #ffd0db;
}
.playlist-strip .pl-item .pl-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    word-break: break-all;
    flex: 1 1 auto;
    min-width: 0;
}
.playlist-strip .pl-item .pl-status {
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 6px;
    white-space: nowrap;
    letter-spacing: .02em;
    flex: 0 0 auto;
}
.playlist-strip .pl-item .pl-status-unwatched {
    background: rgba(255,255,255,.10);
    color: rgba(255,255,255,.55);
}
.playlist-strip .pl-item .pl-status-watched {
    background: rgba(84, 197, 255, .18);
    color: #54c5ff;
}
.playlist-strip .pl-item .pl-status-playing {
    background: rgba(254, 44, 85, .25);
    color: #ffd0db;
}
.playlist-strip .pl-item.active .pl-status-playing {
    background: rgba(254, 44, 85, .45);
    color: #fff;
}
.playlist-strip .pl-item .pl-time {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: rgba(255,255,255,.65);
    display: inline-block;
    margin-right: 6px;
    flex: 0 0 auto;
    white-space: nowrap;
}
.playlist-strip .pl-item.active .pl-time {
    color: #fff;
}
.playlist-strip .pl-item .pl-bar {
    height: 4px;
    width: 100%;
    background: rgba(255,255,255,.10);
    border-radius: 2px;
    overflow: hidden;
}
.playlist-strip .pl-item .pl-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #fe2c55, #ff6680);
    width: 0%;
    transition: width .35s ease;
}
.playlist-strip .pl-item.active .pl-bar-fill {
    background: linear-gradient(90deg, #ff6680, #ffd0db);
}

.info-row, .setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
    font-size: 14px;
}
.info-row span, .setting-row span { color: rgba(255,255,255,.6); }
.info-row b, .setting-row b { font-weight: 600; word-break: break-all; max-width: 60%; text-align: right; }

.setting-row .switch {
    position: relative;
    width: 46px;
    height: 26px;
    flex-shrink: 0;
}
.setting-row .switch input { display: none; }
.setting-row .switch i {
    position: absolute;
    inset: 0;
    background: #48484a;
    border-radius: 13px;
    transition: background .2s;
}
.setting-row .switch i::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    transition: transform .2s;
}
.setting-row .switch input:checked + i { background: #fe2c55; }
.setting-row .switch input:checked + i::after { transform: translateX(20px); }

/* Playback speed selector（竖向：标签占一行，档位各自占一行） */
.speed-row { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.speed-options { display: flex; flex-direction: column; gap: 6px; }
.speed-btn {
    padding: 4px 10px;
    width: 100%;          /* 每个档位各占一整行 */
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 6px;
    background: transparent;
    color: rgba(255,255,255,.6);
    font-size: 13px;
    cursor: pointer;
    transition: all .15s;
}
.speed-btn.active {
    background: #fe2c55;
    border-color: #fe2c55;
    color: #fff;
}
.speed-btn:hover { border-color: rgba(255,255,255,.5); color: #fff; }

/* ---------------- seek bar ---------------- */
.seek-section {
    margin-top: auto;
    padding: 12px 16px 16px;
    flex-shrink: 0;
}
.seek-label {
    font-size: 12px;
    color: rgba(255,255,255,.55);
    text-align: center;
    margin-bottom: 8px;
}
.seek-label { display: none; }  /* 默认隐藏 */
.seek-track {
    position: relative;
    height: 100px;   /* 进度条厚度：100px（用户要求，原 24px） */
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 0;
}
.seek-track::before {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 100px;   /* 进度条底槽厚度：100px */
    background: rgba(255,255,255,.2);
    border-radius: 8px;
}
.seek-fill {
    position: absolute;
    left: 0;
    height: 100px;   /* 已播填充厚度：100px */
    background: linear-gradient(90deg, #fe2c55, #ff7a45);
    border-radius: 8px;
    width: 0%;
    pointer-events: none;
}
.seek-thumb {
    position: absolute;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    top: 50%;
    left: 0%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(0,0,0,.4);
    transition: left .1s linear;
}
.seek-track:active .seek-thumb {
    width: 20px;
    height: 20px;
    box-shadow: 0 2px 10px rgba(254,44,85,.6);
}

/* ---------------- page dot ---------------- */
.page-dot {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 12;
    pointer-events: none;
}
.page-dot { display: none; }  /* 默认隐藏 */
.page-dot span {
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: rgba(255,255,255,.35);
    transition: all .25s;
}
.page-dot span.on { background: #fff; width: 16px; }

/* ---------------- panel mask ---------------- */
.panel-mask {
    position: absolute;
    inset: 0;
    z-index: 9;
    background: rgba(0,0,0,.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}
.page[data-page="0"] .panel-mask,
.page[data-page="2"] .panel-mask {
    opacity: 1;
    pointer-events: auto;
}

/* ---------------- edge hint ---------------- */
.edge-hint {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3px;
    z-index: 8;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s ease;
}
.edge-hint-left {
    left: 0;
    background: linear-gradient(to right, rgba(254,44,85,.6), transparent);
}
.edge-hint-right {
    right: 0;
    background: linear-gradient(to left, rgba(254,44,85,.6), transparent);
}
.viewport.edge-hint-active .edge-hint-left { opacity: 1; }
.viewport.edge-hint-active .edge-hint-right { opacity: 1; }

/* ---------------- settings panel head buttons (left = 删除, right = 上传) ----------------
   两个按钮共用 .panel-head-btn 基类，保证格式（尺寸/圆角/配色/阴影/交互）完全一致；
   各自只负责左右定位。
   使用位置：
     - .btn-delete-current → #btnDeleteCurrent（替换原「设置」二字）→ deleteCurrentVideo()
     - .fab-upload → #fabUpload → 打开上传弹窗 */
.panel-head { position: relative; }

.panel-head-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: linear-gradient(135deg, #fe2c55, #ff6680);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    padding: 8px 14px;
    border-radius: 18px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(254,44,85,.45);
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}
.panel-head-btn:hover {
    transform: translateY(-50%) scale(1.04);
    box-shadow: 0 4px 12px rgba(254,44,85,.55);
}
.panel-head-btn:active {
    transform: translateY(-50%) scale(.96);
}
.panel-head-btn:disabled { opacity: .5; cursor: not-allowed; }
.panel-head-btn.hidden { display: none; }

/* 删除按钮：设置在左 */
.btn-delete-current { left: 12px; }

/* 上传按钮：设置在右 */
.fab-upload { right: 12px; }

/* ---------------- modal ---------------- */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.78);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    backdrop-filter: blur(8px);
}
.modal.hidden { display: none; }

.modal-card {
    width: min(360px, 90vw);
    background: #1c1c1e;
    border-radius: 16px;
    padding: 20px;
}
.modal-title { font-size: 17px; font-weight: 700; text-align: center; margin-bottom: 16px; }

.modal-drop {
    border: 2px dashed rgba(255,255,255,.25);
    border-radius: 12px;
    padding: 34px 16px;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s, background .2s;
}
.modal-drop.dragover { border-color: #fe2c55; background: rgba(254,44,85,.08); }
.modal-drop .drop-icon { font-size: 40px; margin-bottom: 8px; }
.modal-drop p { font-size: 14px; }
.modal-drop .sub { font-size: 12px; color: rgba(255,255,255,.45); margin-top: 4px; }

.progress-area { margin-top: 16px; }
.progress-area.hidden { display: none; }
.progress-title { font-size: 13px; word-break: break-all; margin-bottom: 8px; color: rgba(255,255,255,.85); }
.progress-bar { height: 8px; border-radius: 4px; background: #3a3a3c; overflow: hidden; }
#progressFill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, #fe2c55, #ff7a45); transition: width .2s ease; }
.progress-text { margin-top: 8px; font-size: 13px; color: rgba(255,255,255,.7); text-align: center; }

.modal-actions { margin-top: 16px; display: flex; justify-content: center; align-items: center; gap: 14px; }
.upload-opt {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: rgba(255,255,255,.75);
    cursor: pointer;
    user-select: none;
}
.upload-opt input { accent-color: #fe2c55; width: 15px; height: 15px; }
.cancel-btn {
    padding: 10px 26px;
    border: none;
    border-radius: 8px;
    background: #48484a;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}
.cancel-btn:hover { background: #5a5a5c; }