/* sm-cinema 基础样式 */
:root {
    --primary: #e50914;
    --dark: #141414;
    --dark2: #181818;
    --card: #1f1f1f;
    --text: #e5e5e5;
    --muted: #8c8c8c;
    --border: #2c2c2c;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, "Segoe UI", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;
    background: var(--dark);
    color: var(--text);
    line-height: 1.6;
}

a { color: inherit; text-decoration: none; }

.navbar {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; gap: 24px;
    padding: 14px 32px;
    background: linear-gradient(180deg, rgba(0,0,0,.95), rgba(0,0,0,.75));
    border-bottom: 1px solid var(--border);
}
.brand { font-size: 22px; font-weight: 800; color: var(--primary); letter-spacing: 1px; }
.nav-link { color: var(--text); font-size: 15px; padding: 6px 10px; border-radius: 6px; transition: .15s; }
.nav-link:hover, .nav-link.active { background: rgba(255,255,255,.08); color: #fff; }
.nav-spacer { flex: 1; }
.nav-user { color: var(--muted); font-size: 14px; }

.container { max-width: 1200px; margin: 0 auto; padding: 24px; }

.btn {
    display: inline-block; border: none; cursor: pointer;
    padding: 9px 18px; border-radius: 6px; font-size: 14px;
    background: #333; color: #fff; transition: .15s;
}
.btn:hover { filter: brightness(1.15); }
.btn-primary { background: var(--primary); }
.btn-sm { padding: 4px 10px; font-size: 13px; }
.btn-danger { background: #7a0f16; }
.btn-green { background: #1d6f3f; }
.btn-ghost { background: transparent; border: 1px solid #555; color: var(--text); }

.muted { color: var(--muted); }
.video-title { font-size: 20px; font-weight: 700; margin: 4px 0; }
.text-sm { font-size: 13px; }
.h1 { font-size: 24px; font-weight: 700; margin: 8px 0 18px; }
.h1-sub { font-size: 14px; font-weight: 400; color: var(--muted); margin-left: 8px; }

/* 视频网格 */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.card {
    background: var(--card); border-radius: 10px; overflow: hidden;
    transition: transform .15s, box-shadow .15s;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0,0,0,.5); }
.card-cover { display: block; position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.cover-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.play-badge { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 52px; height: 52px; background: rgba(0,0,0,.45); border: 2px solid rgba(255,255,255,.85);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 20px; padding-left: 4px;
    transition: background .15s, transform .15s; }
.card-cover:hover .play-badge { background: var(--primary, #e50914); transform: translate(-50%, -50%) scale(1.08); }
.poster-thumb { width: 72px; height: 40px; object-fit: cover; border-radius: 4px; background: #000; display: block; }
.poster-form { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.poster-form input[type=file] { font-size: 11px; max-width: 140px; margin: 0; }
.btn-xs { padding: 3px 8px; font-size: 12px; }
.card-body { padding: 10px 12px 14px; }
.card-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-meta { color: var(--muted); font-size: 12px; margin-top: 4px; display:flex; justify-content:space-between; }

/* 分页 */
.pagination { display: flex; gap: 8px; justify-content: center; margin: 26px 0; align-items: center; flex-wrap: wrap; }
.page-btn { padding: 6px 12px; border-radius: 6px; background: #333; color: #fff; }
.page-btn:hover { background: var(--primary); }
.page-current { background: var(--primary); font-weight: bold; cursor: default; }
.page-current:hover { background: var(--primary); }
.page-ellipsis { color: var(--muted); padding: 6px 4px; }
.page-info { color: var(--muted); font-size: 14px; margin: 0 8px; }

/* 搜索栏 */
.search-bar { display: flex; gap: 10px; margin-bottom: 22px; }
.search-input {
    flex: 1; max-width: 420px; padding: 10px 14px; font-size: 15px;
    border-radius: 8px; border: 1px solid var(--border); background: var(--card); color: var(--text);
}

/* 表单卡片 */
.form-card { max-width: 420px; margin: 40px auto; background: var(--card); padding: 30px; border-radius: 12px; border: 1px solid var(--border); }
.form-card h1 { margin-top: 0; }
.field { margin-bottom: 16px; }
.field label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 14px; }
.field input, .field select, .field textarea {
    width: 100%; padding: 10px 12px; font-size: 15px; border-radius: 8px;
    border: 1px solid var(--border); background: #232323; color: var(--text);
}
.field textarea { resize: vertical; min-height: 90px; }
.alert { padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; }
.alert-error { background: #4a0f14; color: #ffb3b3; border: 1px solid #7a1a22; }
.alert-info { background: #0e2b3a; color: #aee0ff; border: 1px solid #13506e; }
.hint { color: var(--muted);}

/* 播放页 */
.player-wrap { max-width: 1000px; margin: 0 auto; }
video { width: 100%; border-radius: 10px; background: #000; aspect-ratio: 16/9; }
.player-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; align-items:center; }
.stat-chip { color: var(--muted); font-size: 14px; }

/* 表格 */
table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: 10px; overflow: hidden; }
th, td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border); font-size: 14px; }
th { background: #232323; color: var(--muted); font-weight: 600; }
tr:hover td { background: #232323; }

.badge { display:inline-block; padding: 2px 10px; border-radius: 20px; font-size: 12px; }
.badge-admin { background: #6b1a1a; color: #ffcaca; }
.badge-user { background: #14354a; color: #cfe9ff; }
.badge-enabled { background: #143b1e; color: #b8ffcf; }
.badge-disabled { background: #3a2c0e; color: #ffe1a1; }

/* 操作列按钮分两行显示，每行两个 */
.admin-actions { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; align-items: center; }
.admin-actions > .btn, .admin-actions > form { margin: 0; flex: 0 0 calc(50% - 2px); box-sizing: border-box; }
.admin-actions form { display: flex; }
.admin-actions form .btn { width: 100%; }
.admin-actions .btn { padding-left: 0; padding-right: 0; text-align: center; }

@media (max-width: 720px) {
    .navbar { flex-wrap: wrap; padding: 12px 16px; gap: 10px; }
    .container { padding: 16px; }
}
/* 手动刷新按钮 */
.refresh-icon { display: inline-block; }
.refresh-icon.spinning { animation: refresh-spin 0.8s linear infinite; }
@keyframes refresh-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* 视频库分类筛选面板 */
.filter-panel { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 6px 16px; margin-bottom: 22px; }
.filter-row { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--border); }
.filter-row:last-child { border-bottom: none; }
.filter-label { flex: none; width: 44px; padding-top: 2px; color: var(--muted); font-size: 13px; }
.filter-links { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.filter-links a { color: var(--text); font-size: 13px; text-decoration: none; padding: 2px 8px; border-radius: 5px; white-space: nowrap; }
.filter-links a:hover { color: var(--primary); background: rgba(255,255,255,0.06); }
.filter-links a.filter-active { background: var(--primary); color: #fff; }
.filter-links-compact { gap: 2px 6px; }
.filter-links-compact a { padding: 2px 5px; }

/* 上传表单两列布局 */
.upload-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.upload-grid .field { margin-bottom: 0; }
.upload-grid .span-2 { grid-column: span 2; }
@media (max-width: 600px) { .upload-grid { grid-template-columns: 1fr; } .upload-grid .span-2 { grid-column: auto; } }

/* 多选下拉（类型选择）——上传页和视频编辑页共用 */
.multi-dropdown { position: relative; }
.multi-dropdown-btn { width: 100%; padding: 8px 12px; border-radius: 6px; border: 1px solid var(--border); background: #232323; color: var(--text); font-size: 14px; cursor: pointer; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.multi-dropdown-btn:hover { border-color: var(--primary); }
.multi-dropdown-panel { position: absolute; top: 100%; left: 0; z-index: 100; background: #1c1c1c; border: 1px solid var(--border); border-radius: 6px; max-height: 240px; overflow-y: auto; padding: 6px 0; box-shadow: 0 4px 16px rgba(0,0,0,.4); min-width: 100%; white-space: nowrap; }
/* label.multi-dropdown-item 优先级(0,1,1) > .field label(0,1,0) 和  .multi-dropdown-item(0,1,0)，彻底覆盖 */
label.multi-dropdown-item { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 4px !important; padding: 4px 10px !important; margin: 0 !important; color: var(--text) !important; background: transparent !important; cursor: pointer; font-size: 14px; flex-shrink: 0; }
label.multi-dropdown-item:hover { background: rgba(255,255,255,.06) !important; }
label.multi-dropdown-item input[type="checkbox"] { flex-shrink: 0; margin: 0 !important; padding: 0 !important; width: auto; height: auto; }

.alert-success { background: #0e3a1e; color: #b3ffcc; border: 1px solid #1a7a3a; }
/* 用户管理内联编辑 */
.edit-row td { background: rgba(255,255,255,0.03); overflow: visible !important; }
.edit-form { display: flex; align-items: center; gap: 12px; padding: 6px 0; flex-wrap: wrap; }
.edit-form label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; }
.edit-form input { width: 220px; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--border); background: #232323; color: var(--text); font-size: 14px; }

/* 视频管理内联编辑 */
.video-edit-form { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr auto; gap: 10px 14px; align-items: end; padding: 8px 0; }
.video-edit-form label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 13px; }
/* label.multi-dropdown-item 的 flex-direction: row 已经在上面用 !important 覆盖了 */
.video-edit-form input:not([type="checkbox"]), .video-edit-form select { padding: 8px 10px; border-radius: 6px; border: 1px solid var(--border); background: #232323; color: var(--text); font-size: 14px; }
.video-edit-form button { white-space: nowrap; }
.video-edit-form .multi-dropdown { width: 100%; }
.visible-checkbox-wrap { display: flex; align-items: center; gap: 6px; color: var(--text); font-size: 14px; padding: 6px 0; }
.visible-checkbox-wrap input[type="checkbox"] { width: auto; }
.video-edit-actions { grid-column: 1 / -1; display: flex; gap: 10px; margin-top: 4px; }
@media (max-width: 900px) { .video-edit-form { grid-template-columns: 1fr 1fr; } }

/* 管理表格横向滚动 + 固定列宽 */
.table-scroll { width: 100%; overflow-x: auto; }
.video-table { min-width: 1320px; table-layout: fixed; border-collapse: separate; border-spacing: 0; overflow: visible; border-radius: 0; }
.video-table td, .video-table th { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.video-table td.poster-cell, .video-table th.poster-cell { white-space: normal; }
/* 操作列允许换行，避免按钮被 overflow:hidden 裁掉看不见 */
.video-table td.admin-actions { overflow: visible; white-space: normal; }

/* 操作列固定在右侧 */
.video-table th:last-child,
.video-table tbody tr:not(.edit-row) td:last-child {
    position: sticky;
    right: 0;
    z-index: 2;
    background: var(--card);
    box-shadow: -4px 0 6px -4px rgba(0,0,0,0.4);
}
.video-table th:last-child { background: #232323; z-index: 3; }
.video-table tbody tr:not(.edit-row):hover td:last-child { background: #232323; }