/* ============================================================
   小离短视频 —— 全局基础样式（仿抖音）
   ============================================================ */

:root {
    /* 抖音品牌色 */
    --dy-red:  #FE2C55;
    --dy-cyan: #25F4EE;
    --dy-red-dark: #E62248;

    --dy-bg:    #000;
    --dy-panel: #1c1c1e;
    --dy-panel-2: #2c2c2e;
    --dy-line:  rgba(255,255,255,.10);

    --dy-text:  #fff;
    --dy-text-2: rgba(255,255,255,.72);
    --dy-text-3: rgba(255,255,255,.45);

    /* 抖音使用的顺滑缓动 */
    --dy-ease: cubic-bezier(.22,.61,.36,1);

    --nav-h: 56px;
}

/* ---------- 全局重置 ---------- */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body {
    width:100%; height:100%; overflow:hidden;
    background: var(--dy-bg);
    color: var(--dy-text);
    font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', 'Microsoft YaHei', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overscroll-behavior: none;
}
button { font-family: inherit; }
.page { display:none; width:100%; height:100%; }
.page.active { display:block; }
svg { display:block; }

/* ============================================================
   Toast 提示
   ============================================================ */
.error-toast {
    position: fixed; bottom: calc(var(--nav-h) + 28px); left:50%;
    transform: translateX(-50%) translateY(8px);
    max-width: calc(100% - 48px);
    background: rgba(28,28,30,.92);
    color:#fff; padding:11px 20px; border-radius:99px;
    text-align:center; z-index:200; font-size:14px;
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border:1px solid rgba(255,255,255,.12);
    box-shadow: 0 8px 26px rgba(0,0,0,.45);
    display:none;
    animation: toastIn .24s var(--dy-ease);
}
@keyframes toastIn {
    from { opacity:0; transform: translateX(-50%) translateY(16px) scale(.96); }
    to   { opacity:1; transform: translateX(-50%) translateY(8px) scale(1); }
}

/* ============================================================
   静音提示（可点击开启声音）
   ============================================================ */
.auto-play-tip {
    position: fixed; bottom: calc(var(--nav-h) + 34px); left:50%;
    transform: translateX(-50%) translateY(8px);
    display:inline-flex; align-items:center; gap:7px;
    background: rgba(28,28,30,.8);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    color:#fff; padding:9px 18px;
    border-radius:99px; font-size:13.5px;
    z-index:60; white-space:nowrap;
    border:1px solid rgba(255,255,255,.16);
    box-shadow: 0 6px 22px rgba(0,0,0,.4);
    opacity:0; visibility:hidden;
    transition: opacity .3s var(--dy-ease), transform .3s var(--dy-ease), visibility .3s;
    pointer-events:none; cursor:pointer;
    -webkit-appearance:none; appearance:none;
}
.auto-play-tip svg { fill:#fff; flex-shrink:0; }
.auto-play-tip.show { opacity:1; visibility:visible; transform: translateX(-50%) translateY(0); pointer-events:auto; }
.auto-play-tip:active { transform: translateX(-50%) scale(.95); }

/* ============================================================
   长按菜单
   ============================================================ */
.context-menu {
    position: fixed; background: rgba(28,28,30,.96);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-radius: 14px; padding: 5px;
    z-index: 300; min-width: 168px;
    box-shadow: 0 12px 32px rgba(0,0,0,.6);
    display:none; border:1px solid rgba(255,255,255,.1);
    animation: menuIn .16s var(--dy-ease);
}
@keyframes menuIn { from { opacity:0; transform: scale(.92); } to { opacity:1; transform: scale(1); } }
.context-menu.show { display:block; }
.context-item {
    padding: 12px 16px; color:#fff; font-size:15px; cursor:pointer;
    border-radius:10px;
    display:flex; align-items:center; gap:10px;
    transition: background .15s;
}
.context-item svg { fill: rgba(255,255,255,.8); flex-shrink:0; }
.context-item:active { background: rgba(255,255,255,.09); }

/* ============================================================
   公告弹窗
   ============================================================ */
.announcement-modal {
    position: fixed; inset:0; background: rgba(0,0,0,.72);
    z-index:1000; display:flex; align-items:center; justify-content:center;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.announcement-content {
    background: var(--dy-panel); border-radius:20px;
    max-width:330px; width:88%; padding:22px;
    border:1px solid rgba(255,255,255,.1);
    box-shadow: 0 20px 50px rgba(0,0,0,.6); color:#fff;
    animation: popIn .28s var(--dy-ease);
}
@keyframes popIn { from { opacity:0; transform: scale(.92) translateY(12px); } to { opacity:1; transform: scale(1) translateY(0); } }
.announcement-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.announcement-header h3 { margin:0; font-size:17px; color:#fff; display:flex; align-items:center; gap:8px; }
.announcement-close {
    background:none; border:none; color:var(--dy-text-3); cursor:pointer; padding:2px;
    display:flex; align-items:center; justify-content:center;
    transition: color .2s, transform .2s;
}
.announcement-close svg { fill: currentColor; }
.announcement-close:hover { color:#fff; transform: rotate(90deg); }
.announcement-body { margin-bottom:20px; font-size:15px; line-height:1.55; color:#e5e5ea; max-height:220px; overflow-y:auto; }
.announcement-footer { display:flex; gap:10px; }
.announcement-footer .btn { flex:1; padding:11px; border:none; border-radius:99px; font-size:14px; cursor:pointer; font-weight:600; transition: transform .16s var(--dy-ease); }
.announcement-footer .btn:active { transform: scale(.96); }
.announcement-footer .btn-primary { background: var(--dy-red) !important; border-color: var(--dy-red) !important; color:#fff !important; box-shadow:0 6px 16px rgba(254,44,85,.32) !important; }
.announcement-footer .btn-primary:hover { background: var(--dy-red-dark) !important; }
.announcement-footer .btn-secondary { background: var(--dy-panel-2); color:#d1d1d6; }

/* ============================================================
   播放设置面板
   ============================================================ */
.play-settings-panel {
    position:absolute; right:14px; bottom: calc(var(--nav-h) + 110px);
    background: rgba(28,28,30,.94);
    backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
    border-radius:20px; padding:18px; width:210px; color:#fff;
    box-shadow: 0 14px 40px rgba(0,0,0,.55);
    border:1px solid rgba(255,255,255,.1);
    z-index:200; display:none; pointer-events:auto;
    transform-origin: bottom right;
}
.play-settings-panel.show { display:block; animation: panelIn .2s var(--dy-ease); }
@keyframes panelIn { from { opacity:0; transform: scale(.9) translateY(10px); } to { opacity:1; transform: scale(1) translateY(0); } }
.panel-section { margin-bottom:18px; }
.panel-section:last-child { margin-bottom:0; }
.panel-label { font-size:13px; font-weight:600; color: var(--dy-text-2); margin-bottom:11px; }
.speed-options { display:flex; gap:7px; justify-content:space-between; }
.speed-option {
    flex:1; text-align:center; padding:8px 0;
    background: rgba(255,255,255,.09);
    border-radius:99px; font-size:13px; font-weight:600; color:#d1d1d6;
    cursor:pointer; transition: all .2s var(--dy-ease); border:1px solid transparent;
}
.speed-option.active { background: var(--dy-red); color:#fff; box-shadow:0 4px 12px rgba(254,44,85,.4); }
.auto-next-section { display:flex; align-items:center; justify-content:space-between; }
.switch { position:relative; display:inline-block; width:46px; height:26px; }
.switch input { opacity:0; width:0; height:0; }
.slider { position:absolute; cursor:pointer; inset:0; background-color:#48484a; transition:.28s var(--dy-ease); border-radius:26px; }
.slider:before { position:absolute; content:""; height:20px; width:20px; left:3px; bottom:3px; background-color:#fff; transition:.28s var(--dy-ease); border-radius:50%; box-shadow:0 1px 4px rgba(0,0,0,.3); }
input:checked + .slider { background-color: var(--dy-red); }
input:checked + .slider:before { transform: translateX(20px); }
.next-video-btn {
    width:100%; padding:10px;
    background: rgba(255,255,255,.09);
    border:1px solid rgba(255,255,255,.12); border-radius:99px;
    color:#fff; font-size:13px; font-weight:600; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:7px;
    transition: all .18s var(--dy-ease);
}
.next-video-btn svg { fill:#fff; }
.next-video-btn:hover { background: rgba(255,255,255,.14); }
.next-video-btn:active { transform: scale(.97); }

/* ============================================================
   评论面板
   ============================================================ */
.comment-panel {
    position:absolute; bottom:0; left:0; right:0;
    background: rgba(24,24,26,.98);
    backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
    border-radius:20px 20px 0 0;
    z-index:150; display:none; flex-direction:column;
    max-height:64vh;
    border-top:1px solid rgba(255,255,255,.1);
    box-shadow: 0 -10px 40px rgba(0,0,0,.5);
}
.comment-panel.show { display:flex; animation: sheetUp .3s var(--dy-ease); }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.comment-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 20px 12px;
    border-bottom:1px solid rgba(255,255,255,.08);
    flex-shrink:0;
}
.comment-title { font-size:15px; font-weight:700; color:#fff; }
.comment-close {
    background:none; border:none; color:var(--dy-text-3); cursor:pointer; padding:2px;
    display:flex; align-items:center; justify-content:center;
    transition: color .2s, transform .2s;
}
.comment-close svg { fill: currentColor; }
.comment-close:hover { color:#fff; transform: rotate(90deg); }
.comment-audit-tip, .comment-closed-tip {
    display:flex; align-items:center; justify-content:center; gap:6px;
    padding:10px 20px; font-size:12.5px;
    border-bottom:1px solid rgba(255,255,255,.05);
    flex-shrink:0;
}
.comment-audit-tip { color:#ffa500; background: rgba(255,165,0,.08); }
.comment-audit-tip svg { fill:#ffa500; }
.comment-closed-tip { color:#8e8e93; background: rgba(150,150,150,.07); }
.comment-closed-tip svg { fill:#8e8e93; }
.comment-list { flex:1; overflow-y:auto; padding:10px 0; max-height:42vh; -webkit-overflow-scrolling:touch; }
.comment-item { display:flex; padding:11px 20px; gap:11px; }
.comment-avatar { width:36px; height:36px; border-radius:50%; object-fit:cover; flex-shrink:0; background:#2c2c2e; border:1px solid rgba(255,255,255,.08); }
.comment-content { flex:1; min-width:0; }
.comment-name { font-size:12.5px; font-weight:600; color:var(--dy-text-2); margin-bottom:4px; display:block; }
.comment-text { font-size:14.5px; color:#fff; margin:0 0 5px; line-height:1.42; word-break:break-word; }
.comment-time { font-size:11px; color:var(--dy-text-3); }
.comment-input-area {
    display:flex; align-items:center; padding:11px 18px calc(11px + env(safe-area-inset-bottom)); gap:9px;
    border-top:1px solid rgba(255,255,255,.08);
    flex-shrink:0;
}
.comment-input {
    flex:1; min-width:0;
    background: rgba(255,255,255,.09);
    border:1px solid rgba(255,255,255,.1);
    border-radius:99px; padding:10px 16px; color:#fff; font-size:14px; outline:none;
    transition: border-color .2s, background .2s;
}
.comment-input::placeholder { color: rgba(255,255,255,.42); }
.comment-input:focus { border-color: rgba(254,44,85,.55); background: rgba(255,255,255,.12); }
.image-upload-label {
    cursor:pointer; padding:6px; color:var(--dy-text-2);
    display:flex; align-items:center; justify-content:center;
    transition: color .2s, transform .18s var(--dy-ease);
    border-radius:50%;
}
.image-upload-label svg { fill: currentColor; }
.image-upload-label:hover { color: var(--dy-red); }
.image-upload-label:active { transform: scale(.88); }
.comment-send-btn {
    background: var(--dy-red); border:none; border-radius:99px;
    padding:10px 18px; color:#fff; font-size:14px; font-weight:600;
    cursor:pointer; transition: background .2s, transform .16s var(--dy-ease);
    flex-shrink:0;
}
.comment-send-btn:hover { background: var(--dy-red-dark); }
.comment-send-btn:active { transform: scale(.95); }
.comment-send-btn:disabled { background:#48484a; cursor:not-allowed; }
.comment-image-preview { max-width:80px; max-height:80px; border-radius:10px; margin:5px 0; }
.remove-image-btn {
    background:none; border:none; color: var(--dy-red);
    margin-left:10px; cursor:pointer; font-size:13px;
    display:inline-flex; align-items:center; gap:4px; vertical-align:top;
}
.remove-image-btn svg { fill: currentColor; }

/* ============================================================
   通用模态框
   ============================================================ */
.modal-overlay {
    position: fixed; inset:0; background: rgba(0,0,0,.72);
    display:flex; align-items:center; justify-content:center;
    z-index:300; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.modal-dialog-box {
    background: var(--dy-panel); border-radius:22px; padding:24px;
    width:90%; max-width:330px; border:1px solid rgba(255,255,255,.1);
    box-shadow: 0 20px 50px rgba(0,0,0,.6);
    animation: popIn .28s var(--dy-ease);
}
.modal-dialog-box h3 { margin:0 0 18px; font-size:18px; font-weight:700; color:#fff; }
.modal-dialog-box .form-group { margin-bottom:14px; }
.modal-dialog-box input {
    width:100%; padding:12px 16px; background: var(--dy-panel-2);
    border:1px solid rgba(255,255,255,.12);
    border-radius:14px; color:#fff; font-size:15px; outline:none;
}
.modal-dialog-box input:focus { border-color: var(--dy-red); }
.modal-btn-group { display:flex; gap:10px; justify-content:flex-end; margin-top:8px; }
.modal-btn-group .btn-primary {
    background: linear-gradient(135deg, var(--dy-red), #ff5c7c); border:none;
    color:#fff; padding:10px 22px; border-radius:99px; font-weight:600; cursor:pointer;
}
.modal-btn-group .btn-secondary {
    background: var(--dy-panel-2); border:none; color:#d1d1d6; padding:10px 22px;
    border-radius:99px; font-weight:600; cursor:pointer;
}

/* ============================================================
   Bootstrap 深色主题覆盖（编辑资料弹窗）
   ============================================================ */
.modal-content { background: var(--dy-panel) !important; color:#fff !important; border-radius:20px !important; border:none !important; }
.modal-header { border-bottom:1px solid rgba(255,255,255,.1) !important; }
.modal-footer { border-top:1px solid rgba(255,255,255,.1) !important; }
.modal-body label { color: var(--dy-text-2); font-weight:500; }
.close { color:#fff !important; opacity:.75; }
.close:hover { opacity:1; }
.form-control { background: var(--dy-panel-2) !important; border:1px solid rgba(255,255,255,.12) !important; color:#fff !important; border-radius:12px !important; box-shadow:none !important; }
.form-control:focus { border-color: var(--dy-red) !important; box-shadow: 0 0 0 3px rgba(254,44,85,.2) !important; }
.form-control[disabled], .form-control[readonly] { background: #141416 !important; color:#8e8e93 !important; cursor:not-allowed; }
.help-block { color: var(--dy-text-3) !important; font-size:12px; }
.btn-danger { background:#3a3a3c !important; border:none !important; }
.btn-danger:hover { background:#48484a !important; }
.btn-primary { background: var(--dy-red) !important; border-color: var(--dy-red) !important; }