/* ==========================================================================
   帧流 FrameFlow · 配色扩展层（v2）
   原版只有中性灰 + 青柠。这里在保留青柠品牌色的前提下，加入
   青绿 / 天蓝 / 琥珀 / 珊瑚 / 紫罗兰 五个辅助色相：
   · 每个栏目分配一个"栏目色"，用于导航、页眉标签与面板标记；
   · 统计卡、状态标签、进度条、演员卡与存储条各自着色；
   · 插画封面同步换成更鲜明的季节与光线。
   ========================================================================== */

:root{
  --c-lime:#d6ef83;
  --c-lime-soft:#f1f7e2;
  --c-lime-chip:#dcecab;
  --c-lime-line:#e2edcb;
  --c-lime-ink:#41571f;

  --c-teal:#7ccbbd;
  --c-teal-soft:#e9f7f3;
  --c-teal-chip:#c8eade;
  --c-teal-line:#d6eee7;
  --c-teal-ink:#1f6559;

  --c-sky:#8cc0e8;
  --c-sky-soft:#edf6fd;
  --c-sky-chip:#cfe7f8;
  --c-sky-line:#dcebf8;
  --c-sky-ink:#205c86;

  --c-amber:#ecc179;
  --c-amber-soft:#fdf6e8;
  --c-amber-chip:#f5e1b9;
  --c-amber-line:#f0e2c7;
  --c-amber-ink:#855817;

  --c-rose:#eb9f92;
  --c-rose-soft:#fdeeeb;
  --c-rose-chip:#f8d5cd;
  --c-rose-line:#f4ddd7;
  --c-rose-ink:#964434;

  --c-violet:#ab9ce3;
  --c-violet-soft:#f2eefc;
  --c-violet-chip:#ded3f7;
  --c-violet-line:#e8e1f8;
  --c-violet-ink:#544590;

  --c-slate-soft:#f0f3f7;
  --c-slate-line:#e2e8ef;
  --c-slate-ink:#4d5866;

  --page-hue:var(--c-lime);
  --page-soft:var(--c-lime-soft);
  --page-ink:var(--c-lime-ink);
}

/* 栏目色：总览=青柠，演员=珊瑚，队列=天蓝，视频库=紫罗兰，设置=琥珀 */
body[data-page="overview"]{--page-hue:var(--c-lime);--page-soft:var(--c-lime-soft);--page-ink:var(--c-lime-ink)}
body[data-page="actors"]{--page-hue:var(--c-rose);--page-soft:var(--c-rose-soft);--page-ink:var(--c-rose-ink)}
body[data-page="queue"]{--page-hue:var(--c-sky);--page-soft:var(--c-sky-soft);--page-ink:var(--c-sky-ink)}
body[data-page="library"]{--page-hue:var(--c-violet);--page-soft:var(--c-violet-soft);--page-ink:var(--c-violet-ink)}
body[data-page="settings"]{--page-hue:var(--c-amber);--page-soft:var(--c-amber-soft);--page-ink:var(--c-amber-ink)}

/* 页面底色：四角极薄的彩色雾面，让大面积留白不再发灰 */
body{
  background:
    radial-gradient(1000px 560px at -6% -12%, #edf7d9 0%, #edf7d900 60%),
    radial-gradient(900px 540px at 104% -8%, #e4f2fc 0%, #e4f2fc00 58%),
    radial-gradient(880px 600px at 58% 116%, #fdf4e9 0%, #fdf4e900 58%),
    radial-gradient(760px 520px at 104% 92%, #f1ecfd 0%, #f1ecfd00 58%),
    var(--bg);
  background-attachment:fixed;
}

/* —— 侧边栏 —— */
.sidebar{
  background:linear-gradient(180deg,#fdfefa 0%,#fff 26%,#fff 100%);
  border-right-color:#eceff2;
}
.brand-icon{
  background:linear-gradient(142deg,#e6f8ac 0%,#cfee8c 46%,#9fe2c6 100%);
  box-shadow:0 8px 18px -8px #a8cf5980;
}
.workspace-avatar{
  background:linear-gradient(135deg,#f4f2e8,#eaf4e2);
  color:#7e8a70;
}
.nav-caption{color:#a6abb3}
.nav-item[data-page="overview"].active{--nav-bg:#ecf4d7;--nav-ink:#3f5720;--nav-chip:#e8f0d5}
.nav-item[data-page="actors"].active{--nav-bg:var(--c-rose-soft);--nav-ink:#8f412f;--nav-chip:#f8dcd5}
.nav-item[data-page="queue"].active{--nav-bg:var(--c-sky-soft);--nav-ink:#1f5a84;--nav-chip:#d9ebf9}
.nav-item[data-page="library"].active{--nav-bg:var(--c-violet-soft);--nav-ink:#4e4189;--nav-chip:#e6dcf9}
.nav-item[data-page="settings"].active{--nav-bg:var(--c-amber-soft);--nav-ink:#7d5314;--nav-chip:#f6e5c4}
.nav-item.active{background:var(--nav-bg,#edf4de);color:var(--nav-ink,#41572a)}
.nav-item.active .nav-count{background:var(--nav-chip,#e5ebdb);color:var(--nav-ink,#607049)}

/* —— 顶栏：一条很淡的色谱细线 —— */
.topbar{
  position:relative;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(12px);
  border-bottom-color:#eceff2;
}
.topbar::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:2px;
  background:linear-gradient(90deg,#d6ef83 0%,#9bdcc8 26%,#9cc8ec 52%,#c2b4ee 76%,#f0bba8 100%);
  opacity:.45;
  pointer-events:none;
}
.preview-pill{
  background:linear-gradient(96deg,#f2f8e3 0%,#eaf6f2 48%,#f0eefb 100%);
  color:#68786a;
  border:1px solid #eaf0e8;
}
.notification-button i{background:#ef9384;box-shadow:0 0 0 3px #fdeeea}

/* —— 页标题：栏目色只出现在小标签上 —— */
.eyebrow{color:var(--page-ink);opacity:.72}

/* —— 按钮 —— */
.button{border-color:#e4e8ec}
.button:hover{background:#f6f9fb;border-color:#dbe5ee}
.button.primary{
  background:linear-gradient(135deg,#e4f6a4 0%,#cbe97c 55%,#b6e18f 100%);
  border-color:#cfe97f;
  color:#33451c;
  box-shadow:0 8px 16px -10px #9dc247;
}
.button.primary:hover{
  background:linear-gradient(135deg,#dcf194 0%,#c3e36f 55%,#abe084 100%);
  border-color:#c6e274;
}

/* —— 统计卡：四种色相各占一格 —— */
.stat{
  background:linear-gradient(168deg,var(--tint,#fff) 0%,#fff 74%);
  border-color:var(--stat-line,var(--line));
}
.stat:nth-child(1){--tint:#ece6fa;--chip:var(--c-violet-chip);--stat-ink:var(--c-violet-ink);--stat-line:#ece4f9}
.stat:nth-child(2){--tint:#e3f5ef;--chip:var(--c-teal-chip);--stat-ink:var(--c-teal-ink);--stat-line:#d9efe8}
.stat:nth-child(3){--tint:#fcf1dd;--chip:var(--c-amber-chip);--stat-ink:var(--c-amber-ink);--stat-line:#f1e5cd}
.stat:nth-child(4){--tint:#eaf4d6;--chip:var(--c-lime-chip);--stat-ink:#4c6422;--stat-line:#e4edd2;
  background:linear-gradient(168deg,#eaf4d6 0%,#fafdee 78%)}
.stat .stat-symbol{background:var(--chip,#f5f7f2);color:var(--stat-ink,#839477)}
.stat-footer b{color:var(--stat-ink,#81985b)}
.stat:nth-child(4) .live-dot{background:#7fa73c}

/* —— 面板标题前的栏目色小方块 —— */
.panel-heading h2::before{
  content:"";
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:2px;
  background:var(--page-hue);
  margin-right:8px;
  vertical-align:1px;
}

/* —— 队列 —— */
.tab.active{color:var(--page-ink);border-bottom-color:var(--page-hue)}
.tab-count{background:var(--page-soft);color:var(--page-ink);border-radius:4px;padding:1px 4px}
.queue-columns{background:#fbfcfe}

/* 状态标签：六种状态六种颜色 */
.task-status{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  justify-self:start;
  font-size:0;
  color:var(--st-ink,#779452);
}
.status-pill{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 9px;
  border-radius:999px;
  font-size:9px;
  line-height:1.25;
  font-weight:600;
  letter-spacing:.2px;
  white-space:nowrap;
  color:var(--st-ink);
  background:var(--st-bg);
  border:1px solid var(--st-line);
}
.status-note{display:block;font-size:8.5px;line-height:1.35;color:#98a2ad;white-space:nowrap;margin:0}
.task-status.running{--st-bg:var(--c-teal-soft);--st-ink:var(--c-teal-ink);--st-line:var(--c-teal-line)}
.task-status.waiting{--st-bg:var(--c-slate-soft);--st-ink:var(--c-slate-ink);--st-line:var(--c-slate-line)}
.task-status.paused{--st-bg:var(--c-amber-soft);--st-ink:var(--c-amber-ink);--st-line:var(--c-amber-line)}
.task-status.failed{--st-bg:var(--c-rose-soft);--st-ink:var(--c-rose-ink);--st-line:var(--c-rose-line)}
.task-status.merging{--st-bg:var(--c-violet-soft);--st-ink:var(--c-violet-ink);--st-line:var(--c-violet-line)}
.task-status.completed{--st-bg:var(--c-lime-soft);--st-ink:var(--c-lime-ink);--st-line:var(--c-lime-line)}
.task-status.running .status-pill::before,
.task-status.merging .status-pill::before{
  content:"";
  width:5px;
  height:5px;
  border-radius:50%;
  background:currentColor;
  opacity:.75;
}

/* 进度条跟随状态变色 */
.progress-track{background:#eef2f6}
.progress-fill{background:linear-gradient(90deg,#8ed8c8,#c3e88d)}
.task-row[data-status="paused"] .progress-fill{background:linear-gradient(90deg,#f2d196,#e6bd74)}
.task-row[data-status="failed"] .progress-fill{background:linear-gradient(90deg,#f0b2a4,#e69582)}
.task-row[data-status="merging"] .progress-fill{background:linear-gradient(90deg,#c3b4ef,#a99ae0)}
.task-row[data-status="completed"] .progress-fill{background:linear-gradient(90deg,#9ad3a6,#cfe58c)}
.task-title:hover{color:var(--page-ink)}
.thumb{background:#e6ece8}

/* —— 演员 —— */
.actor-avatar{background:var(--c-lime-soft);color:var(--c-lime-ink)}
.actor-avatar.rose{background:#fbe6e0;color:#9a4735}
.actor-avatar.blue{background:#e2f0fb;color:#2b6491}
.actor-avatar.amber{background:#fbeed4;color:#855817}
.actor-avatar.violet{background:#eae2fb;color:#544590}
.actor-avatar.teal{background:#ddf3ed;color:#1f6559}
.actor-card{
  --wash:var(--c-lime-soft);
  background:linear-gradient(180deg,var(--wash) 0,#fff 190px);
  border-color:#eceff3;
}
.actor-card[data-color="rose"]{--wash:#fdf0ed}
.actor-card[data-color="blue"]{--wash:#eef7fd}
.actor-card[data-color="amber"]{--wash:#fdf6e8}
.actor-card[data-color="violet"]{--wash:#f4effd}
.actor-card[data-color="teal"]{--wash:#edf9f6}
.actor-card-stats>div:nth-child(2) strong{color:#2c7f6f}
.actor-card-stats>div:nth-child(3) strong{color:#a06a12}
.path-line{background:#f8faf7}
.actor-mini-button:hover{background:var(--c-lime-soft)}

/* —— 存储与动态 —— */
.storage-panel{
  background:linear-gradient(165deg,#f6f2fd 0%,#fff 70%);
  border-color:#efeaf9;
}
.storage-head svg{color:#a99ad9}
.storage-bar{background:#f2eff9}
.storage-bar i:nth-child(1){background:linear-gradient(90deg,#7ccbbd,#a3dbc9)}
.storage-bar i:nth-child(2){background:#cbe6a1}
.storage-bar i:nth-child(3){background:#f3d29a}
.storage-legend i{background:#7ccbbd}
.storage-legend span:nth-child(2) i{background:#cbe6a1}
.storage-legend span:nth-child(3) i{background:#f3d29a}
.activity-icon{background:var(--c-violet-soft);color:var(--c-violet-ink)}
.activity-icon[data-kind="checkCircle"]{background:var(--c-teal-soft);color:var(--c-teal-ink)}
.activity-icon[data-kind="refresh"]{background:var(--c-sky-soft);color:var(--c-sky-ink)}
.activity-icon[data-kind="download"]{background:var(--c-violet-soft);color:var(--c-violet-ink)}
.activity-label{background:#f2eefb;color:#6f5fa8}

/* —— 提示条：信息用天蓝，左侧加一道色条 —— */
.info-banner{
  background:linear-gradient(92deg,#eef6fd 0%,#f6fafd 62%,#f8f7fd 100%);
  border-color:#e0ecf7;
  border-left:3px solid #a3cdec;
  color:#4e6c86;
}

/* —— 视频库 —— */
.filter-select{border-color:#e5ddf6;color:#5b4f88;background:#fbf9ff}
.media-card:hover{border-color:#e3daf5;box-shadow:0 16px 34px -18px #6b5a9c66}
.media-description p span:last-child{color:#9a8fc4}

/* —— 表单与设置 —— */
.field input,.field select{background:#fbfcfe;border-color:#e3e9f0;color:#4f5f6e}
.setting-toggle input{accent-color:#8b7bc8}
.settings-panel .button.primary{box-shadow:0 8px 16px -10px #9dc247}

/* —— 弹窗与扫描 —— */
.modal-header{background:linear-gradient(180deg,#fbfdf9,#fff)}
.modal-footer{background:#fafbfd}
.scan-summary>div:nth-child(1){background:#f3eefc}
.scan-summary>div:nth-child(2){background:#eaf7f3}
.scan-summary>div:nth-child(3){background:#fdf6e8}
.scan-summary>div:nth-child(1) strong{color:var(--c-violet-ink)}
.scan-summary>div:nth-child(2) strong{color:var(--c-teal-ink)}
.scan-summary>div:nth-child(3) strong{color:var(--c-amber-ink)}
.scan-spinner{border-color:#f1edf9;border-top-color:#a99ae0}
.scan-video input,.scan-select-all input{accent-color:#8f7fd0}
.scan-actor{color:#5b4f8f}
.scan-loader{color:#8b7bc8}

/* —— 通知、Toast 与零散元素 —— */
.notification-row svg{color:#8f7fd0}
.toast{background:linear-gradient(120deg,#30392c 0%,#263a37 100%);box-shadow:0 12px 34px -10px #1f2e2a80}
.error-text{color:#b25b48}
.empty-state svg{color:#b9c7d6}
.demo-dot{background:#7ccbbd}
::selection{background:#d6ef83}

/* —— 窄屏：状态改为右上角的胶囊，避免压住进度条 —— */
@media(max-width:1200px){
  .status-note{font-size:8px}
}
@media(max-width:760px){
  .task-status{top:9px;right:72px;max-width:none;align-items:flex-end}
  .status-pill{font-size:8px;padding:2px 7px;gap:4px}
  .status-note{display:none}
  .task-title{max-width:calc(100% - 56px)}
  .task-meta{padding-right:0}
  .stat{padding:14px 15px}
  .actor-card{background:linear-gradient(180deg,var(--wash) 0,#fff 150px)}
}