/* basic */
body,
load {background-color: var(--111);}
body,a {color: var(--999);}
b {color: var(--orange);}
h1,h2,h3,h4,h5,h6 {color: white;}
empty.default {color: var(--666);font-size: 14px;}

/* color */
:root {
    --color: #DA3BFF;
    --lg: linear-gradient(120deg,#DA3BFF,#5F00AF);
}

/* ico */
.ico- {background-image: url(../images/ico/)}

/* frame */
.group {}
.contant {}
.item {}
.clause {}

/* btn */
.btn {border-radius: 100px;background-image: var(--lg);}
.btn-file input {width: 100%;position: absolute;top: 0;left: 0;opacity: 0;}

/* head */
.head {position: relative;z-index: 3;background-color: var(--222);}
.head-cont {padding: 5px 10px;position: absolute;right: 0;top: 0;}
.head-cont a.btn {width: 100px;height: 40px;margin: 5px;}
.head-cont .ico {color: var(--color);font-size: 32px;}
.head-cont .avatar {width: 50px;height: 50px;}
.head-cont .belance {white-space: nowrap;color: white;padding: 0 10px;}
.head-cont .belance b {padding-left: 10px;}

.logo {width: 50px;height: 50px;background-image: url(../images/ico.svg);margin: 5px;position: absolute;left: 5px;;top: 0;}

/* menu */
menu {flex: 1;}
menu x {color: white;}
menu-cont {}
menu-cont li {padding: 0 20px;}
menu-cont li a {color: white;font-size: 16px;height: 60px;line-height: 60px;}
menu-cont li.active a {border-bottom: 3px var(--color) solid;}

/*home*/
.home {height: calc(100vh - 60px);}
.home-cont {position: absolute;left: 0;bottom: 0;width: 100%;text-align: center;overflow: hidden;}
.home-list {padding: 30px;max-width: 2560px;margin: auto;animation-delay: .5s;}
.home-list img {border-radius: 10px;}
.home-title {display: inline-block;margin-bottom: 100px;animation-delay: 1s;}
.home-title h3 {font-size: 90px;display: flex;align-items: center;justify-content: center;margin: -70px 0 -30px;letter-spacing: 5px;}
.home-title h3 span {color: var(--color);background-image: url(../images/titile.svg);width: 446px;height: 240px;display: flex;align-items: center;justify-content: center;font-size: 70px;line-height: 0;margin-left: 30px;}
.home-title h5 {text-align: left;font-size: 30px;letter-spacing: 5px;}
.home-title a {height: 60px;padding: 0 50px;font-size: 18px;}

/*hop*/
hop {}
hop-cont {top: calc(100% + 5px);z-index: 3;}
hop-cont a {background-color: var(--333);border: 0;}
hop-cont a:hover {background-color: var(--666);}

/* crumb */
crumb {height: 50px;width: auto;margin-right: 50px;}
crumb li {}
crumb li i {color: var(--color);}
crumb li a {}

/* subject */
.subject {padding: 0 20px;}
.subject .btn:hover {transform: translateY(0);}
.subject-nav {min-height: 60px;height: auto;padding: 5px 0;display: flex;align-items: center;}
.subject-nav-cont {display: flex;align-items: center;}
.subject-nav-cont input {background-color: var(--222);width: 300px;border-radius: 100px;padding: 0 20px;height: 40px;color: white;}
.subject-nav-cont a {white-space: nowrap;height: 40px;margin-left: 5px;}
.subject-nav-cont a.btn-ai {height: auto;}

.subject-main {display: grid;grid-template-columns: repeat(8,1fr);grid-gap: 10px;grid-template-rows: 150px 150px auto auto;height: calc(100vh - 60px - 60px);padding-bottom: 20px;}
.subject-cont {background-color: var(--222);border-radius: 5px;border: 1px var(--333) solid;padding: 0 10px 10px;}
.subject-cont .ico-add {color: var(--666);width: 100%;height: 100%;display: flex;align-items: center;}
.subject-cont .ico-add:hover {color: white;}
.subject-cont .swiper {padding-top: 40px;margin-top: -40px;}
.subject-cont .swiper-slide {display: flex;flex-direction: column;border-radius: 10px;border: 2px var(--333) solid;padding: 0 10px;}
.subject-cont .swiper-pagination {top: 10px;height: 20px;}

.subject-title {min-height: 50px;height: auto;display: flex;align-items: center;padding: 5px 0;}
.subject-title i.ico {color: var(--color);margin: 0 5px 0 0;}
.subject-title h6 {font-weight: normal;}
.subject-title .btn {height: 24px;padding: 0 10px;margin: 0 2px;border-width: 1px;color: var(--999);position: relative;z-index: 2;}
.subject-title .btn-ai {height: auto;}

/* AI btn - two-line style */
.btn-ai {flex-direction: column !important;line-height: 1.3 !important;height: auto !important;padding: 6px 16px !important;white-space: nowrap;}
.btn-ai b {display: block;font-weight: normal;font-size: 13px;}
.btn-ai small {display: block;font-size: 10px;opacity: .55;font-weight: normal;margin-top: 1px;}
.table table th .btn-ai,
.table table td .btn-ai {height: auto !important;padding: 4px 10px !important;margin: 2px 0;}
.subject-title .btn:hover {transform: translateY(0);}
.subject-title a:hover {color: white;}

/* ====== project.php 2列布局（侧边栏 + 主内容） ====== */
.proj-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 16px;
    height: calc(100vh - 60px);
    padding: 16px 0 20px;
    align-items: start;
}
.proj-layout.proj-sidebar-collapsed {
    grid-template-columns: 48px 1fr;
}
/* 折叠状态下只显示收缩按钮 */
.proj-layout.proj-sidebar-collapsed .proj-back-link,
.proj-layout.proj-sidebar-collapsed .proj-sidebar-name,
.proj-layout.proj-sidebar-collapsed .proj-nav {
    display: none;
}
.proj-layout.proj-sidebar-collapsed .proj-sidebar-head {
    border-bottom: none;
    margin-bottom: 0;
    padding: 0;
    display: flex;
}
.proj-layout.proj-sidebar-collapsed .proj-sidebar-toggle {
    margin: 0;
    width: 100%;
}

/* 覆盖 uigg.css 中 nav 的全局样式 */
.proj-layout nav.proj-nav {
    width: auto !important;
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    right: auto !important;
    margin: 0 !important;
    z-index: auto !important;
    background-color: transparent !important;
    filter: none !important;
    max-width: none !important;
    display: flex !important;
    overflow: visible !important;
}

/* 侧边栏 */
.proj-sidebar {
    background: var(--222);
    border: 1px var(--333) solid;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}
.proj-sidebar-inner {
    padding: 14px 0 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.proj-sidebar-head {
    padding: 0 14px 12px;
    border-bottom: 1px var(--333) solid;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.proj-back-link {
    font-size: 12px;
    color: var(--666);
    text-decoration: none;
    flex-shrink: 0;
}
.proj-back-link:hover { color: var(--color); }
.proj-sidebar-name {
    font-size: 14px;
    color: white;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

/* 导航 */
.proj-nav {
    padding: 0 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: visible;
    min-height: 0;
}
.proj-nav-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 12px !important;
    border-radius: 8px !important;
    color: var(--999) !important;
    text-decoration: none !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    margin-bottom: 4px !important;
    cursor: pointer !important;
    transition: background 0.15s, color 0.15s;
    line-height: 1.4 !important;
    height: auto !important;
    white-space: nowrap !important;
    width: 100%;
    box-sizing: border-box;
}
.proj-nav-item:hover { background: var(--333) !important; color: white !important; }
.proj-nav-item.proj-nav-active { background: rgba(218,59,255,0.15) !important; color: var(--color) !important; }
.proj-nav-icon { font-style: normal; font-size: 20px; flex-shrink: 0; }

/* 折叠按钮 */
.proj-sidebar-toggle {
    flex-shrink: 0;
    background: var(--333);
    border: 1px var(--444) solid;
    border-radius: 100px;
    color: var(--999);
    font-size: 14px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.proj-sidebar-toggle:hover { color: white; }

/* 主内容区 */

/* ====== script.php 3列布局（导航 + 剧集 + 分镜） ====== */
.script-layout {
    display: grid;
    grid-template-columns: 220px 1fr 2fr;
    gap: 16px;
    height: calc(100vh - 60px);
    padding: 16px 0 20px;
    align-items: start;
}
.script-layout.script-sidebar-collapsed {
    grid-template-columns: 48px 1fr 3fr;
}

/* 剧集列表操作列 */
.script-episode-list .episode-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
}
.script-episode-list .episode-item .episode-info { min-width: 0; }
.script-episode-list .episode-item .episode-actions { flex-shrink: 0; }

/* 剧集列表行高亮 */
.table table tbody tr:not(.empty-row) { cursor: pointer; }
.table table tbody tr:not(.empty-row):hover { background-color: rgba(218,59,255,0.15) !important; }
.table table tbody tr.selected { background-color: rgba(218,59,255,0.2) !important; }

/* 侧边栏（与 project.php 共用样式） */
.script-sidebar {
    background: var(--222);
    border: 1px var(--333) solid;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
}
.script-sidebar-inner {
    padding: 14px 0 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.script-sidebar-head {
    padding: 0 14px 12px;
    border-bottom: 1px var(--333) solid;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.script-back-link {
    font-size: 12px;
    color: var(--666);
    text-decoration: none;
    flex-shrink: 0;
}
.script-sidebar-name {
    font-size: 14px;
    color: white;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}
.script-sidebar-toggle {
    flex-shrink: 0;
    background: var(--333);
    border: 1px var(--444) solid;
    border-radius: 100px;
    color: var(--999);
    font-size: 14px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.script-sidebar-toggle:hover { color: white; }

/* 导航 */
.script-nav {
    padding: 0 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: visible;
    min-height: 0;
}
.script-nav-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 12px !important;
    border-radius: 8px !important;
    color: var(--999) !important;
    text-decoration: none !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    margin-bottom: 4px !important;
    cursor: pointer !important;
    transition: background 0.15s, color 0.15s;
    line-height: 1.4 !important;
    height: auto !important;
    white-space: nowrap !important;
    width: 100%;
    box-sizing: border-box;
}
.script-nav-item:hover { background: var(--333) !important; color: white !important; }
.script-nav-item.script-nav-active { background: rgba(218,59,255,0.15) !important; color: var(--color) !important; }
.script-nav-icon { font-style: normal; font-size: 20px; flex-shrink: 0; }

/* 折叠状态 */
.script-layout.script-sidebar-collapsed .script-back-link,
.script-layout.script-sidebar-collapsed .script-sidebar-name,
.script-layout.script-sidebar-collapsed .script-nav {
    display: none;
}
.script-layout.script-sidebar-collapsed .script-sidebar-head {
    border-bottom: none;
    margin-bottom: 0;
    padding: 0;
    display: flex;
}
.script-layout.script-sidebar-collapsed .script-sidebar-toggle {
    margin: 0;
    width: 100%;
}

/* AI任务序列 */
.ai-task-section {
    margin-top: auto;
    border-top: 1px var(--333) solid;
    padding-top: 8px;
}
.ai-task-header {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 4px;
    user-select: none;
}
.ai-task-header:hover {
    background: var(--333);
}
.ai-task-title {
    font-size: 12px;
    color: var(--999);
    flex: 1;
}
.ai-task-badge {
    background: var(--color);
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}
.ai-task-arrow {
    font-size: 10px;
    color: var(--666);
    margin-left: 4px;
    transition: transform 0.2s;
}
.ai-task-section.expanded .ai-task-arrow {
    transform: rotate(180deg);
}
.ai-task-list {
    max-height: 300px;
    overflow-y: auto;
    padding: 0 8px 8px;
}
.ai-task-item {
    display: flex;
    align-items: center;
    padding: 6px 8px;
    background: var(--333);
    border-radius: 4px;
    margin-bottom: 4px;
    font-size: 11px;
    color: var(--ccc);
}
.ai-task-item .task-type {
    flex-shrink: 0;
    width: 40px;
    color: var(--aaa);
}
.ai-task-item .task-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 8px;
}
.ai-task-item .task-status {
    flex-shrink: 0;
    color: var(--999);
}
.ai-task-item .task-status.waiting { color: var(--orange, #f90); }
.ai-task-item .task-status.running { color: var(--color); }
.ai-task-item .task-status.done { color: #5a5; }
.ai-task-item .task-status.failed { color: #f55; }

/* 飞入动画 */
@keyframes flyToAiTask {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.5);
    }
}
.fly-to-ai-task {
    position: fixed;
    z-index: 99999;
    animation: flyToAiTask 0.6s ease-in forwards;
    pointer-events: none;
}

/* 侧边栏折叠时隐藏AI任务 */
.script-layout.script-sidebar-collapsed .ai-task-section,
.proj-layout.proj-sidebar-collapsed .ai-task-section,
.assets-layout.assets-sidebar-collapsed .ai-task-section {
    display: none;
}

/* 剧集面板 */
.script-episode-panel {
    background: var(--222);
    border: 1px var(--333) solid;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 100%;
}
.panel-header {
    padding: 14px 16px;
    border-bottom: 1px var(--333) solid;
    display: flex;
    align-items: center;
    gap: 12px;
}
.panel-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: white;
    flex: 1;
}
.panel-actions {
    display: flex;
    gap: 8px;
}
.panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}
.panel-footer {
    padding: 12px 16px;
    border-top: 1px var(--333) solid;
    display: flex;
    gap: 8px;
}
.panel-footer .btn {
    flex: 1;
}

/* 分镜面板 */
.script-shot-panel {
    background: var(--222);
    border: 1px var(--333) solid;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 100%;
}

/* 剧集详情区块 */
.episode-detail-section {
    padding: 16px;
    border-bottom: 1px var(--333) solid;
}
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.section-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: white;
    flex: 1;
}
.section-content {
    padding: 0;
}

/* 分镜列表区块 */
.shot-list-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.shot-list-section .panel-header {
    padding: 12px 16px;
}
.shot-list-section .panel-content {
    flex: 1;
    overflow-y: auto;
}

/* 底部批量操作按钮 */
.shot-batch-actions {
    padding: 12px 16px;
    border-top: 1px var(--333) solid;
    display: flex;
    gap: 8px;
}
.shot-batch-actions .btn {
    flex: 1;
}

/* ========== 选中行高亮（统一强制覆盖） ========== */

/* 通用表格选中行 - 最高优先级 */
html body .table table tbody tr.selected,
html body .table table tbody tr.selected:hover,
html body #episode-tbody tr.selected,
html body #episode-tbody tr.selected:hover,
html body #shot-tbody tr.selected,
html body #shot-tbody tr.selected:hover {
    background-color: rgba(218,59,255,0.25) !important;
    color: inherit !important;
}

/* 表格hover不干扰selected */
html body .table table tbody tr:hover:not(.selected) {
    background-color: transparent !important;
}
html body .table table tbody tr.selected:hover {
    background-color: rgba(218,59,255,0.3) !important;
}

/* 主内容区 */
.proj-main {
    background: var(--222);
    border: 1px var(--333) solid;
    border-radius: 8px;
    overflow: hidden;
    min-height: 300px;
}

/* ---- 只读视图 ---- */
.proj-cover-view {
    display: flex;
    gap: 0;
    min-height: 280px;
    align-items: stretch;
}
.proj-cover-img-wrap {
    flex: 0 0 50%;
    background: var(--111);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    max-height: calc(100vh - 200px);
    border-radius: 8px 0 0 8px;
    overflow: hidden;
}
.proj-cover-img {
    width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}
.proj-cover-noimg {
    color: var(--555);
    font-size: 13px;
    text-align: center;
}
.proj-cover-info {
    flex: 1;
    padding: 20px 24px;
    min-width: 0;
}
.proj-cover-info-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 12px;
    gap: 12px;
}
.proj-title {
    font-size: 22px;
    font-weight: 700;
    color: white;
    margin: 0;
    line-height: 1.3;
    word-break: break-all;
}
.proj-edit-btn {
    flex-shrink: 0;
    height: 32px;
    padding: 0 16px;
    font-size: 13px;
    border: none;
    cursor: pointer;
}
.proj-info-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}
.proj-tag {
    background: var(--333);
    color: var(--999);
    border-radius: 100px;
    padding: 3px 10px;
    font-size: 12px;
}
.proj-info-intro {
    margin-bottom: 14px;
}
.proj-info-intro-text {
    font-size: 14px;
    color: var(--999);
    line-height: 1.8;
    white-space: pre-wrap;
    max-height: 72px;
    overflow: hidden;
}
.proj-intro-toggle {
    font-size: 12px;
    color: var(--color);
    text-decoration: none;
    display: inline-block;
    margin-top: 4px;
}
.proj-info-label {
    font-size: 12px;
    color: var(--666);
    margin-bottom: 6px;
}
.proj-info-prompt-text {
    font-size: 13px;
    color: var(--777);
    line-height: 1.7;
    word-break: break-all;
}

/* ---- 编辑视图 ---- */
.proj-cover-edit {
    display: flex;
    gap: 0;
    min-height: 280px;
    align-items: stretch;
}
.proj-cover-edit-img-wrap {
    flex: 0 0 auto;
    width: 360px;
    aspect-ratio: 2/3;
    background: var(--111);
    border-radius: 8px 0 0 8px;
    overflow: hidden;
    position: relative;
    align-self: flex-start;
}
.proj-cover-edit-img {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.proj-cover-edit-img #proj-edit-img-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
    top: 0; left: 0;
}
.proj-cover-noimg-edit {
    position: relative;
    z-index: 1;
    color: var(--555);
    font-size: 13px;
}
.proj-cover-edit-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    padding: 30px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 2;
}
.proj-cover-upload-label {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.12);
    border: 1px rgba(255,255,255,0.2) solid;
    border-radius: 6px;
    padding: 7px 10px;
    font-size: 12px;
    color: white;
    cursor: pointer;
    gap: 5px;
}
.proj-cover-upload-label:hover { background: rgba(255,255,255,0.2); }
.proj-ai-cover-btn {
    height: 30px;
    font-size: 12px;
    padding: 0 10px;
    border: none;
    cursor: pointer;
}

/* 编辑表单 */
.proj-cover-edit-form {
    flex: 1;
    padding: 20px 24px;
    overflow-y: auto;
    max-height: calc(100vh - 130px);
}
.proj-edit-row {
    margin-bottom: 14px;
}
.proj-edit-label {
    display: block;
    font-size: 12px;
    color: var(--666);
    margin-bottom: 6px;
}
.proj-edit-label em { color: #f44; font-style: normal; }
.proj-edit-input {
    width: 100%;
    padding: 9px 12px;
    background: var(--333);
    color: white;
    border: 1px var(--444) solid;
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
}
.proj-edit-input:focus { border-color: var(--color); outline: none; }
.proj-edit-textarea {
    width: 100%;
    padding: 9px 12px;
    background: var(--333);
    color: white;
    border: 1px var(--444) solid;
    border-radius: 6px;
    font-size: 14px;
    resize: vertical;
    box-sizing: border-box;
    line-height: 1.6;
}
.proj-edit-textarea:focus { border-color: var(--color); outline: none; }
.proj-edit-type-btns { display: flex; gap: 8px; }
.proj-type-btn {
    padding: 6px 16px;
    background: var(--333);
    border: 1px var(--444) solid;
    border-radius: 100px;
    color: var(--999);
    font-size: 13px;
    cursor: pointer;
}
.proj-type-btn.active { background: var(--color); color: white; border-color: var(--color); }

/* ===== 风格卡片 ===== */
.proj-edit-style-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.style-card {
    width: 90px;
    cursor: pointer;
    border-radius: 10px;
    overflow: hidden;
    background: var(--333);
    border: 2px solid transparent;
    transition: opacity 0.2s, border-color 0.2s, box-shadow 0.2s;
    opacity: 0.35;
}
.style-card:hover {
    opacity: 0.7;
}
.style-card.active {
    opacity: 1;
    border-color: var(--color);
    box-shadow: 0 0 0 1px var(--color);
}
.style-card-img {
    width: 100%;
    height: 60px;
    background-size: cover;
    background-position: center;
    background-color: #2a2a2a;
}
.style-card-name {
    padding: 4px 6px;
    font-size: 12px;
    text-align: center;
    color: var(--ccc);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.proj-edit-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px var(--333) solid;
}
.proj-save-btn {
    height: 36px;
    padding: 0 24px;
    font-size: 14px;
    border: none;
    cursor: pointer;
}
.proj-cancel-btn {
    height: 36px;
    padding: 0 20px;
    font-size: 14px;
    cursor: pointer;
}

/* ====== 旧样式保留（用于其他页面） ====== */
.subject-view {display: none;}
.subject-control {min-height: 50px;height: auto;background-color: var(--111);padding: 5px;}
.subject-control a {height: 30px;margin: 5px 3px;}
.subject-control a.btn-ai {height: auto;}

/* work.php 项目卡片样式 */
.subject-group {display: grid;grid-template-columns: repeat(8,1fr);grid-gap: 20px;}
@media(max-width:2800px){.subject-group {grid-template-columns: repeat(7,1fr);}}
@media(max-width:2400px){.subject-group {grid-template-columns: repeat(6,1fr);}}
@media(max-width:2000px){.subject-group {grid-template-columns: repeat(5,1fr);}}
@media(max-width:1500px){.subject-group {grid-template-columns: repeat(4,1fr);}}

.subject-blcok {background-color: var(--222);border: 1px var(--333) solid;border-radius: 10px;position: relative;min-width: 0;}
.subject-blcok .subject-title {position: absolute;top: 0;left: 0;width: 100%;padding: 0 10px;}
.subject-blcok .subject-title .btn {color: white;}
.subject-blcok em {width: 100%;display: block;border-radius: 10px 10px 0 0;overflow: hidden;aspect-ratio: 2/3;}
.subject-info {padding: 10px;}
.subject-info h5 {font-weight: normal;}
.subject-info p {padding: 5px 0;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.subject-info ul {display: flex;background-color: var(--111);padding: 5px 0;border-radius: 5px;}
.subject-info ul li {flex: 1;text-align: center;}
.subject-info ul li span {display: block;}
.subject-info ul li t {color: white;}
.subject-info .btn {width: 100%;}
.subject-author {padding: 10px 0;}

.subject-manage {display: flex;height: calc(100vh - 60px - 60px);padding-bottom: 20px;}
.subject-sider {width: 420px;margin-right: 10px;}
.subject-sider .subject-list {height: auto;}
.subject-sider .subject-list em {height: 100px;}
.subject-sider-title {display: flex;align-items: center;padding: 10px 0;}
.subject-sider-title h5 {font-weight: normal;}
.subject-content {flex: 1;min-width: 0;}
.subject-sider .subject-cont,
.subject-content .subject-cont {height: 100%;padding: 10px;overflow: auto;}
.subject-content .subject-cont {display: flex;flex-direction: column;}
.subject-content .table {flex: 1;overflow: auto;}

/* clue */
[clue]:hover::after {background-color: var(--666);}

/* pop */
pop {}
pop .flex > *:last-child {margin-left: 20px;}
pop .title {padding: 10px 0 20px;}
pop-main {}
pop-main > *:last-child {border-radius: 0 0 10px 10px;}
pop-title {background-color: var(--333);border: 0;border-radius: 10px 10px 0 0;}
pop-title h3 {font-size: 16px;}
pop-title a {}
pop-title a:hover {color: white;}
pop-cont {background-color: var(--222);}
pop-solve {overflow: hidden;}

.pop-wide pop-main {max-width: 1200px;}
.pop-wide .form {width: 700px;}

.pop-petty pop-main {max-width: 480px;}

.pop-add-role-timbre {display: none;}

/* ================================================================
   弹窗层级体系（彻底解决嵌套弹窗遮挡问题）
   分层策略：
   - L1=100：普通弹窗（创建项目、编辑元素等）
   - L2=200：一级子弹窗（选择音色、选择风格、选择元素等）
   - L3=300：二级子弹窗（AI确认、视频选择等）
   - L4=10000+：资产/图片/视频详情相关弹窗链
   ================================================================ */

/* --- L1 普通弹窗 (z-index: 100) --- */
pop[pop="create"],
pop[pop="create"] pop-main,
pop[pop="type"],
pop[pop="type"] pop-main,
pop[pop="storyboard"],
pop[pop="storyboard"] pop-main,
pop[pop="episode"],
pop[pop="episode"] pop-main,
pop[pop="novel"],
pop[pop="novel"] pop-main,
pop[pop="add-episode"],
pop[pop="add-episode"] pop-main,
pop[pop="add-shot"],
pop[pop="add-shot"] pop-main,
pop[pop="batch-shot-split"],
pop[pop="batch-shot-split"] pop-main,
pop[pop="ai-shot-split"],
pop[pop="ai-shot-split"] pop-main,
pop[pop="ai-shot-progress"],
pop[pop="ai-shot-progress"] pop-main,
pop[pop="ai-cover-preview"],
pop[pop="ai-cover-preview"] pop-main,
pop[pop="shot-detail"],
pop[pop="shot-detail"] pop-main { z-index: 100 !important; }

/* --- L2 一级子弹窗 (z-index: 200) --- */
pop[pop="sound"],
pop[pop="sound"] pop-main,
pop[pop="tone"],
pop[pop="tone"] pop-main,
pop[pop="select"],
pop[pop="select"] pop-main,
pop[pop="picture"],
pop[pop="picture"] pop-main,
pop[pop="video"],
pop[pop="video"] pop-main,
pop[pop="extract-asset"],
pop[pop="extract-asset"] pop-main,
pop[pop="help-tip"],
pop[pop="help-tip"] pop-main,
pop[pop="shotpic-zoom"],
pop[pop="shotpic-zoom"] pop-main,
pop[pop="shotpic-tip"],
pop[pop="shotpic-tip"] pop-main,
pop[pop="shotvideo-zoom"],
pop[pop="shotvideo-zoom"] pop-main,
pop[pop="jianying-export"],
pop[pop="jianying-export"] pop-main { z-index: 200 !important; }

/* --- L3 二级子弹窗 (z-index: 300) --- */
pop[pop="video-select"],
pop[pop="video-select"] pop-main,
pop[pop="shotvideo-video-player"],
pop[pop="shotvideo-video-player"] pop-main { z-index: 300 !important; }

/* --- ai-confirm 确认弹窗 (z-index: 10050，始终在最上层) --- */
pop[pop="ai-confirm"],
pop[pop="ai-confirm"] pop-main { z-index: 10050 !important; }

/* --- L4 资产/详情弹窗链 (z-index: 10000+) --- */
pop[pop="asset-detail"],
pop[pop="asset-detail"] pop-main { z-index: 10000 !important; }
pop[pop="ai-gen-asset"],
pop[pop="ai-gen-asset"] pop-main { z-index: 10010 !important; }
pop[pop="asset-zoom"],
pop[pop="asset-zoom"] pop-main { z-index: 10020 !important; }
pop[pop="sequence-urls"],
pop[pop="sequence-urls"] pop-main { z-index: 10030 !important; }
pop[pop="long-video-player"],
pop[pop="long-video-player"] pop-main { z-index: 10040 !important; }

.pop-additional {flex: 1;}
.pop-additional-tool {margin-bottom: 20px;}

/* form */
textarea {background-color: var(--333);color: white;border-radius: 10px;}

.form {}
.form li {}
.form li choice,
.form li input,
.form li select,
.form li textarea {background-color: var(--333);color: white;border-radius: 10px;}
.form li input::placeholder,
.form li textarea::placeholder {color: var(--666);}
.form li .code {}
.form li .btn {border-radius: 10px;}
.form li .avatar {position: relative;width: 70px;height: 70px;}
.form li .avatar input {position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;}

.form .upload {}
.form .upload-add,
.form .upload-group {background-color: var(--333);color: var(--666);border-radius: 10px;overflow: hidden;font-size: 24px;}

scaler .btn {background: none;border: 2px var(--333) solid;color: var(--666);font-size: 20px;}
scaler .btn:hover {color: white;transform: translateY(0);}

choice-list {background-color: var(--333);border-radius: 10px;overflow: hidden;}
choice-list a:not(:last-child) {border: 0;}
choice-list a:hover {background-color: var(--666);}

/* page */
page {margin: 20px 0;}
page a {background-color: var(--333);}
page a.active,
page a:hover {background-color: var(--666);}
page input {border-color: var(--333);color: white;}
page span {font-size: 14px;}

/* notice */
notice {}
notice marquee {}
notice .ico {}

/* tab */
tab {}
tab-list {margin-bottom: 20px;}
tab-list li {margin: 0 5px 5px 0;}
tab-list li a {height: 50px;display: flex;align-items: center;background-color: var(--333);border-radius: 100px;color: white;font-weight: normal;}
tab-list li.active {}
tab-list li.active a {background-image: var(--lg);}
tab-cont {}
tab-group {}

/* table */
.table {}
.table table thead th, .table table thead td {font-weight: normal;color: white;background-color: var(--333);}
.table table th, .table table td {background-color: var(--222);}
.table table tbody tr:hover {background-color: transparent;}
.table table tbody tr:nth-child(2n) th, .table table tbody tr:nth-child(2n) td {background-color: var(--333);}
.table table thead {white-space: nowrap;}
.table table td {}
.table table td em {width: 40px;height: 40px;display: block;margin: auto;border-radius: 5px;overflow: hidden;}
.table table td a.ico:hover {color: white;}
.table table th .btn,
.table table td .btn {height: 26px;margin: 2px 0;padding: 0 10px;font-weight: normal;border-width: 1px;color: var(--999);white-space: nowrap;}
.table table th .btn:hover,
.table table td .btn:hover {color: white;}
.table table td .checkbox,
.table table thead td .checkbox,
.table table th .checkbox {color: var(--color);font-size:18px;cursor:pointer;}

/* cpt */
.cpt {padding: 5px;background-color: var(--111);border-radius: 5px;margin: 5px;}
.cpt-img,
.cpt-control {display: flex;justify-content: center;}
.cpt-img aside {width: 100px;height: 100px;display: block;position: relative;border-radius: 10px;overflow: hidden;margin: 3px;}
.cpt-control a {margin: 3px !important;overflow: hidden;}
.cpt-control a input {position: absolute;top: 0;left: 0;opacity: 0;}

/* sound */
.sound {display: grid;grid-template-columns: repeat(4,1fr);grid-gap: 10px;}
.sound li {position: relative;}
.sound li a {padding: 10px 40px 10px 10px;border: 2px var(--333) solid;border-radius: 10px;cursor: pointer;display: grid;grid-template-columns: 1fr;height: 62px;}
.sound li a.active {border-color: var(--color);}
.sound li a cite,
.sound li a span {grid-column: span 3;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.sound li a span {color: white;}

.sound-control {position: absolute;right: 0;top: 0;bottom: 0;width: 40px;display: flex;flex-direction: column;padding: 5px 0;}
.sound li i:hover {color: white;}

/* title */
.title {text-align: left;padding: 30px 0;}
.title h3 {}
.title em {}
.title span {}

/* chronicle */
.chronicle {display: grid;grid-template-columns: repeat(2,1fr);grid-gap: 10px;}
.chronicle li {height: 200px;position: relative;}
.chronicle li img,
.chronicle li video {border-radius: 10px;}
.chronicle li .subject-title {position: absolute;top: 0;left: 0;width: 100%;padding: 0 10px;background-image: linear-gradient(var(--000-5),transparent);border-radius: 10px 10px 0 0;}
.chronicle li .subject-title .btn {color: white;}
.chronicle li aside {position: absolute;bottom: 0;left: 0;padding: 5px 20px;background-color: var(--000-9);border-radius: 0 20px 0 10px;}
.chronicle li aside p {display: none;}
.chronicle li aside:hover {width: 100%;height: calc(100% - 40px); top: 40px;border-radius: 10px;overflow: auto;padding: 10px;}
.chronicle li aside:hover span {color: white;}
.chronicle li aside:hover p {display: block;}
.chronicle li.active .subject-title h6::after {content: '主演';}

/* recharge */
.recharge { display: flex; flex-direction: column; gap: 16px; }
.recharge-section-title { font-size: 12px; color: #555; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 8px; }
.recharge-packages-wrap {}
.recharge-packages-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 10px; }
.recharge-packages-grid a { text-align: center; border: 2px var(--333) solid; border-radius: 10px; padding: 14px 10px; cursor: pointer; transition: border-color .15s, background .15s; }
.recharge-packages-grid a:hover { background-color: var(--333); }
.recharge-packages-grid a.active { border-color: var(--color); background: rgba(218,59,255,.08); }
.recharge-packages-grid a .pkg-credits { display: block; font-size: 17px; font-weight: 700; color: #ccc; line-height: 1.3; margin-bottom: 4px; }
.recharge-packages-grid a .pkg-credits em { font-size: 12px; font-weight: 400; color: #888; font-style: normal; }
.recharge-packages-grid a .pkg-price { display: block; font-size: 14px; font-weight: 700; color: var(--color); margin-top: 2px; }
.recharge-packages-grid a small { display: block; font-size: 11px; color: #666; margin-top: 3px; }
.recharge-pay-row {}
.recharge-select { display: flex; flex-wrap: wrap; gap: 10px; }
.recharge-pay a { display: flex; align-items: center; gap: 6px; border: 2px var(--333) solid; border-radius: 10px; padding: 8px 18px; cursor: pointer; font-size: 14px; color: #aaa; transition: border-color .15s, background .15s; }
.recharge-pay a:hover { background-color: var(--333); }
.recharge-pay a.active { border-color: var(--color); color: #ccc; }
.recharge-pay a i.ico-wechat { color: var(--green); font-size: 20px; }

/* reminder */
reminder {background-color: transparent;border-color: var(--333);}

/* enroll */
.enroll {display: flex;}
.enroll .form {flex: 1;}
.enroll .form li {position: relative;}
.enroll .form li i {position: absolute;left: 0;top: 0;z-index: 1;margin: auto 10px;height: 60px;width: 40px;display: flex;align-items: center;}
.enroll .form .btn-submit {width: 100%;margin-top: 20px;}
.enroll-switch {width: 240px;}
.enroll-switch .btn {padding: 0 30px;}
.enroll-other {padding: 20px 5px 0;}
.enroll-other a {color: white;}
.enroll-other a:hover {color: var(--color);}

/* tone */
.tone {display: grid;grid-template-columns: repeat(5,1fr);grid-gap: 10px;}
.tone li {min-width: 0;}
.tone li a {border: 2px var(--333) solid;padding: 5px;border-radius: 10px;display: block;}
.tone li a em {height: 80px;display: block;overflow: hidden;border-radius: 5px;margin-bottom: 5px;}
.tone li a span {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display: block;text-align: center;}
.tone li a.active {border-color: var(--color);}

/* sider */
.sider {width: 220px;margin-right: 20px;}

/* user */
.user {padding: 20px;}

/* foot */
.foot {}
.foot-cont {}
.foot-copy {}

/* list */
.list {}
.list li {}
.list li a {}
.list li i {}

/* step */
step {}
step ul {}
step ul li {}
step ul li i {}
step ul li span {}
step.column {}

/* ==================== shotpic.php 分镜融图页面样式 ==================== */

/* 三列布局 - 第二列和第三列 1:1 */
.shotpic-layout {
    display: grid;
    grid-template-columns: 220px 1fr 1fr;
    grid-gap: 10px;
    height: calc(100vh - 60px);
    padding-bottom: 20px;
}

/* 侧边栏折叠状态 */
.shotpic-layout.shotpic-sidebar-collapsed {
    grid-template-columns: 48px 1fr 1fr;
}

/* 第一列：侧边栏 - 与 project.php 统一 */
.shotpic-sidebar {
    background: var(--222);
    border: 1px var(--333) solid;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.shotpic-sidebar-inner {
    padding: 14px 0 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.shotpic-sidebar-head {
    padding: 0 14px 12px;
    border-bottom: 1px var(--333) solid;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    position: relative;
}

.shotpic-back-link {
    display: block;
    color: var(--666);
    font-size: 12px;
    margin-right: 8px;
    flex-shrink: 0;
}

.shotpic-back-link:hover {
    color: white;
}

.shotpic-sidebar-name {
    font-size: 14px;
    color: white;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.shotpic-sidebar-toggle {
    flex-shrink: 0;
    background: var(--333);
    border: 1px var(--444) solid;
    border-radius: 100px;
    color: var(--999);
    font-size: 14px;
    width: 32px;
    height: 32px;
    cursor: pointer;
}

.shotpic-sidebar-toggle:hover {
    background: var(--666);
    color: white;
}

/* 导航菜单 - 覆盖 uigg.css 的 nav 样式，与 project.php 统一 */
.shotpic-layout nav.shotpic-nav {
    width: auto !important;
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    right: auto !important;
    margin: 0 !important;
    z-index: auto !important;
    background-color: transparent !important;
    filter: none !important;
    max-width: none !important;
    padding: 0 12px !important;
    flex: 1;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
    min-height: 0;
}

.shotpic-nav-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 12px !important;
    border-radius: 8px !important;
    color: var(--999) !important;
    text-decoration: none !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    margin-bottom: 4px !important;
    box-sizing: border-box !important;
}

.shotpic-nav-item:hover {
    background-color: var(--333);
    color: white;
}

.shotpic-nav-item.shotpic-nav-active {
    background-image: var(--lg);
    color: white;
}

.shotpic-nav-icon {
    font-style: normal;
    font-size: 20px;
    flex-shrink: 0;
}

/* 折叠状态隐藏文字 */
.shotpic-sidebar-collapsed .shotpic-back-link,
.shotpic-sidebar-collapsed .shotpic-sidebar-name,
.shotpic-sidebar-collapsed .shotpic-nav-item span,
.shotpic-sidebar-collapsed .ai-task-title,
.shotpic-sidebar-collapsed .ai-task-badge,
.shotpic-sidebar-collapsed .ai-task-arrow {
    display: none;
}

.shotpic-sidebar-collapsed .shotpic-nav-item {
    justify-content: center;
    padding: 10px;
}

.shotpic-sidebar-collapsed .shotpic-nav-icon {
    margin-right: 0 !important;
    font-size: 18px;
}

/* AI任务序列 */
.ai-task-section {
    border-top: 1px var(--333) solid;
    padding: 10px;
}

.ai-task-header {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 5px;
    border-radius: 5px;
}

.ai-task-header:hover {
    background-color: var(--333);
}

.ai-task-title {
    flex: 1;
    font-size: 12px;
    color: var(--999);
}

.ai-task-badge {
    background: var(--color);
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    margin-right: 5px;
}

.ai-task-arrow {
    font-size: 10px;
    color: var(--666);
}

.ai-task-list {
    max-height: 200px;
    overflow-y: auto;
    margin-top: 8px;
}

.ai-task-item {
    display: flex;
    align-items: center;
    padding: 6px 8px;
    font-size: 11px;
    border-radius: 4px;
    margin-bottom: 3px;
    background: var(--333);
}

.ai-task-item .task-type {
    color: var(--color);
    margin-right: 6px;
    white-space: nowrap;
}

.ai-task-item .task-name {
    flex: 1;
    color: var(--999);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-task-item .task-status {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    background: var(--666);
    color: white;
}

.ai-task-item .task-status.running {
    background: var(--color);
    color: #fff;
}

.ai-task-item .task-status.done {
    background: #4caf50;
    color: #fff;
}

.ai-task-item .task-status.failed {
    background: #f44336;
    color: #fff;
}

/* 第二列：列表面板 */
.shotpic-list-panel {
    background-color: var(--222);
    border-radius: 5px;
    border: 1px var(--333) solid;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.panel-header {
    padding: 15px;
    border-bottom: 1px var(--333) solid;
}

.panel-header h3 {
    font-size: 14px;
    color: white;
    margin: 0;
}

.panel-footer {
    padding: 15px;
    border-top: 1px var(--333) solid;
    display: flex;
    gap: 10px;
}

/* 剧集列表 */
.shotpic-episode-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}

.shotpic-ep-group {
    margin-bottom: 8px;
}

.shotpic-ep-header {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: var(--333);
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
}

.shotpic-ep-header:hover {
    background: var(--666);
}

.shotpic-ep-arrow {
    font-size: 10px;
    color: var(--666);
    margin-right: 8px;
    width: 12px;
}

.shotpic-ep-title {
    flex: 1;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shotpic-ep-count {
    font-size: 11px;
    color: var(--666);
    background: var(--222);
    padding: 2px 8px;
    border-radius: 10px;
}

/* 分镜列表 */
.shotpic-shot-list {
    padding: 5px 0 5px 20px;
}

.shotpic-shot-loading {
    padding: 10px;
    font-size: 12px;
    color: var(--666);
    text-align: center;
}

.shotpic-shot-row {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    margin-bottom: 3px;
    background: transparent;
    transition: all 0.2s;
}

.shotpic-shot-row:hover {
    background: var(--333);
}

.shotpic-shot-row.active {
    background: var(--color);
}

.shotpic-shot-row.active .shotpic-shot-num,
.shotpic-shot-row.active .shotpic-shot-elem {
    color: white;
}

.shotpic-shot-check {
    margin-right: 8px;
}

.shotpic-shot-check input {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: var(--color);
}

.shotpic-shot-num {
    color: var(--666);
    font-weight: bold;
    margin-right: 4px;
    white-space: nowrap;
}

.shotpic-shot-thumb {
    margin-right: 8px;
}

.shotpic-shot-elem {
    flex: 1;
    color: var(--999);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11px;
}

.shotpic-shot-del {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 10px;
    color: var(--666);
}

.shotpic-shot-del:hover {
    background: #f44336;
    color: white;
}

/* 第三列：详情面板 */
.shotpic-detail-panel {
    background-color: var(--222);
    border-radius: 5px;
    border: 1px var(--333) solid;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.shotpic-empty-state {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shotpic-detail-content {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
}

.shotpic-detail-section {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px var(--333) solid;
}

.shotpic-detail-section:last-child {
    border-bottom: none;
}

.shotpic-detail-label {
    font-size: 13px;
    color: white;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
}

/* 分镜图片 */
.shotpic-img-wrap {
    position: relative;
    background: var(--333);
    border-radius: 10px;
    overflow: hidden;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.shotpic-img-wrap img {
    max-width: 100%;
    max-height: 300px;
    object-fit: contain;
}

.shotpic-noimg {
    color: var(--666);
    font-size: 14px;
}

.shotpic-shot-num {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--000-5);
    color: white;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
}

/* 图片计数器 */
.shotpic-pic-counter {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--000-5);
    color: rgba(255,255,255,0.8);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
}

/* 缩略图列表 */
.shotpic-thumb-list {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    overflow-x: auto;
    padding: 4px 0;
    scrollbar-width: thin;
}

.shotpic-thumb-item {
    position: relative;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s;
    background: var(--333);
}

.shotpic-thumb-item.active {
    border-color: var(--color);
}

.shotpic-thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shotpic-thumb-main-badge {
    position: absolute;
    top: 2px;
    left: 2px;
    font-size: 10px;
    color: #FFD700;
    text-shadow: 0 0 3px rgba(0,0,0,0.8);
    pointer-events: none;
}

.shotpic-thumb-actions {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    padding: 4px 0 2px;
    opacity: 0;
    transition: opacity 0.2s;
}

.shotpic-thumb-item:hover .shotpic-thumb-actions {
    opacity: 1;
}

.shotpic-thumb-set-main,
.shotpic-thumb-del {
    font-size: 12px;
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
}

.shotpic-thumb-set-main:hover {
    color: #FFD700;
}

.shotpic-thumb-del:hover {
    color: #f55;
}

/* 分镜列表中的编号样式 */
.shotpic-shot-num-list {
    color: var(--666);
    font-weight: bold;
    margin-right: 6px;
    white-space: nowrap;
    font-size: 12px;
}

/* 关联元素 */
.shotpic-elem-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.shotpic-elem-group {
    background: var(--333);
    border-radius: 8px;
    padding: 10px;
}

.shotpic-elem-group-title {
    font-size: 11px;
    color: var(--666);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.shotpic-elem-group-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.shotpic-elem-group-items .empty-hint {
    color: var(--666);
    font-size: 12px;
}

.shotpic-elem-item {
    display: flex;
    align-items: center;
    background: var(--222);
    border-radius: 20px;
    padding: 4px 4px 4px 4px;
    font-size: 12px;
    gap: 6px;
}

.shotpic-elem-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}

.shotpic-elem-name {
    color: white;
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shotpic-elem-rm {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 10px;
    color: var(--666);
    cursor: pointer;
}

.shotpic-elem-rm:hover {
    background: #f44336;
    color: white;
}

/* 镜头角度/景别按钮组 */
.shotpic-option-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.shotpic-opt-btn {
    padding: 8px 16px;
    background: var(--333);
    border: 2px solid transparent;
    border-radius: 20px;
    color: var(--999);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.shotpic-opt-btn:hover {
    background: var(--666);
    color: white;
}

.shotpic-opt-btn.active {
    border-color: var(--color);
    background: var(--222);
    color: white;
}

/* 最终提示词 */
.shotpic-prompt-box {
    background: var(--333);
    border-radius: 8px;
    padding: 12px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--999);
    min-height: 60px;
    white-space: pre-wrap;
    word-break: break-all;
}

.shotpic-prompt-box .empty-hint {
    color: var(--666);
}

/* 响应式调整 */
@media (max-width: 1200px) {
    .shotpic-layout {
        grid-template-columns: 200px 1fr 1fr;
    }
}

@media (max-width: 992px) {
    .shotpic-layout {
        grid-template-columns: 48px 1fr 1fr;
    }
    .shotpic-back-link,
    .shotpic-sidebar-name,
    .shotpic-nav-item span,
    .ai-task-title,
    .ai-task-badge,
    .ai-task-arrow {
        display: none;
    }
    .shotpic-nav-item {
        justify-content: center;
        padding: 10px;
    }
    .shotpic-nav-icon {
        margin-right: 0;
        font-size: 18px;
    }
}

/* ==================== shotpic.php 样式结束 ==================== */

/* ==================== videotask.php 样式 ==================== */
/* 视频序列区块 */
.video-sequence-section {
    padding: 16px;
    border-bottom: 1px var(--333) solid;
}
.video-sequence-section .section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.video-sequence-section .section-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: white;
    flex: 1;
}

/* 长视频预览区块 */
.video-preview-section {
    padding: 16px;
    border-bottom: 1px var(--333) solid;
}
.video-preview-section .section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.video-preview-section .section-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: white;
    flex: 1;
}

/* 操作按钮区块 */
.video-actions-section {
    padding: 16px;
}

/* 长视频列表区块 */
.long-video-section {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-top: 1px var(--333) solid;
}
.long-video-section .section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.long-video-section .section-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: white;
    flex: 1;
}
.long-video-section .section-content {
    flex: 1;
    overflow-y: auto;
}
.long-video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}
.long-video-card {
    background: var(--333);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;
}
.long-video-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.long-video-thumb {
    position: relative;
}
.long-video-thumb video {
    width: 100%;
    aspect-ratio: 16/9;
    display: block;
    object-fit: cover;
    border-radius: 8px 8px 0 0;
}
.long-video-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background: rgba(0,0,0,0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    margin-left: 3px;
}
.long-video-meta {
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--999);
}
.long-video-delete {
    color: var(--666);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
}
.long-video-delete:hover {
    color: #f55;
    background: rgba(245,85,85,0.1);
}