/* ============================================================
   brand.css — 品牌组件样式（2026-11-07 收口）
   ------------------------------------------------------------
   作用：工作台 Hero / 三步路径 / 我的成片 / 下一步提醒 等组件的版式。
   主题色全部引用 wb.css 的变量（单一来源），本文件不再定义任何主题
   变量（避免和 wb.css 的 green 主题重复打架）。
   绿色主题相关 header/nav 配色走 wb.css + 下方第 2 节（仅 green 生效）。
   ============================================================ */


/* ── 2. 顶栏 / 侧栏统一深绿品牌色 ── */
[data-theme="green"] header{
  background:#0F3D2A;
  border-bottom:1px solid #14502F;
}
[data-theme="green"] header h1{ color:#FFFFFF; }
[data-theme="green"] header .sub{ color:#9FCBAE; }
[data-theme="green"] .logo{
  background:linear-gradient(135deg,#7FC24A,#1E9E5B);
  color:#fff;
}
[data-theme="green"] .right-h,
[data-theme="green"] .right-h span{ color:#CFE8D7; }
[data-theme="green"] .right-h select,
[data-theme="green"] .right-h .zoom{
  background:#14502F; border-color:#1E6B40; color:#CFE8D7;
}
[data-theme="green"] .right-h .zoom button{ background:#14502F; color:#9FCBAE; }
[data-theme="green"] .right-h .zoom button.on{ background:#1E9E5B; color:#fff; }
[data-theme="green"] .pg-tag{ background:#14502F; color:#9FCBAE; }
[data-theme="green"] .btn.ghost{ color:#CFE8D7; border-color:#1E6B40; }

[data-theme="green"] .layout{ background:var(--nav-bg); }
[data-theme="green"] nav{ background:var(--nav-bg); border-right:1px solid #14502F; }
[data-theme="green"] nav .item{ color:var(--nav-item); }
[data-theme="green"] nav .item:hover{ background:var(--nav-item-hover-bg); color:#fff; }
[data-theme="green"] nav .item.active{
  background:var(--nav-active-bg); color:var(--nav-active-fg);
  box-shadow:inset 0 0 0 1px rgba(110,240,154,.4);
}
[data-theme="green"] nav .group{ color:var(--nav-group); letter-spacing:.05em; font-weight:800; }
[data-theme="green"] nav .group.foldable{ color:var(--nav-group); }

[data-theme="green"] .accbar{ background:#0F3D2A; border-bottom:1px solid #14502F; }
[data-theme="green"] .accbar .ab-lab{ color:#9FCBAE; }
[data-theme="green"] .accbar .ab-btn{ background:#14502F; border:1px solid #1E6B40; color:#CFE8D7; }
[data-theme="green"] .accbar .ab-btn.on{ border-color:#7FC24A; color:#9CF3BC; }
[data-theme="green"] .accbar .ab-btn.add{ color:#9FCBAE; border-style:dashed; }
[data-theme="green"] .accbar .ab-meta .tag{ background:#14502F; color:#9FCBAE; }

[data-theme="green"] #main{ background:var(--bg); }

/* ── 3. 工作台 Hero：跟随主题配色（不再写死黑色）── */
/* 默认（夜间黑）：墨黑底 + 白字，与暗色页面一致 */
.hero{
  background:linear-gradient(135deg,#24241F 0%,#0E0E0C 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:1.1rem; padding:2rem 2.2rem; color:#FFFFFF;
  position:relative; overflow:hidden; margin-bottom:1.4rem;
  box-shadow:0 12px 30px rgba(0,0,0,.18);
}
.hero::after{
  content:""; position:absolute; right:-3rem; top:-3rem;
  width:14rem; height:14rem; border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.14),transparent 70%);
}
.hero h2{ font-size:1.7rem; font-weight:800; color:#FFFFFF; line-height:1.3; margin:0 0 .45rem; }
.hero p{ color:#FFFFFF; opacity:.9; font-size:.98rem; line-height:1.7; margin:0; max-width:44rem; position:relative; z-index:1; }
.hero .hero-cta{ margin-top:1.25rem; display:flex; gap:.7rem; flex-wrap:wrap; position:relative; z-index:1; }
.hero .hero-cta .btn{ background:#fff; color:var(--accent); font-weight:800; }
.hero .hero-cta .btn.ghost{ background:transparent; color:#FFFFFF; border:1px solid rgba(255,255,255,.7); }

/* 黑白简洁（默认浅色）：白底 + 黑字（奶白跟奶白配，不黑配）*/
[data-theme="light"] .hero{
  background:linear-gradient(135deg,#FFFFFF 0%,#F2F2EE 100%);
  border:1px solid var(--border);
  color:var(--text-strong);
  box-shadow:0 10px 26px rgba(0,0,0,.06);
}
[data-theme="light"] .hero h2,[data-theme="light"] .hero p{ color:var(--text-strong); }
[data-theme="light"] .hero::after{ background:radial-gradient(circle,rgba(20,20,16,.05),transparent 70%); }
[data-theme="light"] .hero .hero-cta .btn.ghost{ color:var(--text-strong); border:1px solid var(--text-strong); }

/* 奶白护眼：奶白底 + 深字（奶白跟奶白配）*/
[data-theme="cream"] .hero{
  background:linear-gradient(135deg,#FFFDF8 0%,#F3E9D6 100%);
  border:1px solid var(--border);
  color:var(--text-strong);
  box-shadow:0 10px 26px rgba(42,36,24,.10);
}
[data-theme="cream"] .hero h2,[data-theme="cream"] .hero p{ color:var(--text-strong); }
[data-theme="cream"] .hero::after{ background:radial-gradient(circle,rgba(46,36,24,.06),transparent 70%); }
[data-theme="cream"] .hero .hero-cta .btn{ background:var(--accent); color:var(--accent-ink); }
[data-theme="cream"] .hero .hero-cta .btn.ghost{ color:var(--text-strong); border:1px solid var(--text-strong); }

/* 蓝色数据大屏：蓝底 + 白字（蓝跟白配）*/
[data-theme="blue"] .hero{
  background:linear-gradient(135deg,#3AA6FF 0%,#1D6FD2 100%);
  border-color:transparent;
  color:#FFFFFF;
  box-shadow:0 12px 30px rgba(29,111,210,.28);
}
[data-theme="blue"] .hero h2,[data-theme="blue"] .hero p{ color:#FFFFFF; }
[data-theme="blue"] .hero .hero-cta .btn{ background:#fff; color:#1D6FD2; }
[data-theme="blue"] .hero .hero-cta .btn.ghost{ color:#FFFFFF; border:1px solid rgba(255,255,255,.75); }

/* 绿色护眼：绿底 + 白字（绿跟白配，绝不绿配黑）*/
[data-theme="green"] .hero{
  background:linear-gradient(135deg,#3EDC81 0%,#1B6B3E 100%);
  border-color:transparent;
  color:#FFFFFF;
  box-shadow:0 12px 30px rgba(27,107,62,.28);
}
[data-theme="green"] .hero h2,[data-theme="green"] .hero p{ color:#FFFFFF; }
[data-theme="green"] .hero .hero-cta .btn{ background:#fff; color:#1B6B3E; }
[data-theme="green"] .hero .hero-cta .btn.ghost{ color:#FFFFFF; border:1px solid rgba(255,255,255,.75); }

/* ── 4. 三步路径 ── */
.sec-title{ font-size:1.12rem; font-weight:800; color:var(--text-strong); margin:1.4rem 0 .9rem; display:flex; align-items:center; gap:.5rem; }
.sec-title .bar{ width:.28rem; height:1.05rem; background:var(--accent); border-radius:2px; display:inline-block; }
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.step{
  background:var(--panel); border:1px solid var(--border); border-radius:.95rem;
  padding:1.15rem 1.25rem; position:relative; transition:border-color .15s,transform .15s;
}
.step:hover{ border-color:var(--accent); transform:translateY(-3px); }
.step .num{
  width:1.95rem; height:1.95rem; border-radius:50%; background:var(--accent);
  color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center;
  font-size:.95rem; margin-bottom:.65rem;
}
.step h3{ font-size:1.02rem; color:var(--text-strong); margin:0 0 .3rem; }
.step p{ font-size:.85rem; color:var(--muted); line-height:1.6; margin:0 0 .8rem; }
.step .go{ font-size:.86rem; color:var(--accent-fg); font-weight:700; }

/* ── 5. 我的成片 + 下一步提醒 ── */
.dash-row{ display:grid; grid-template-columns:1.45fr 1fr; gap:1.2rem; margin-top:.4rem; }
.vid-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr)); gap:.9rem; }
.vid-card{
  background:var(--panel); border:1px solid var(--border); border-radius:.9rem;
  overflow:hidden; cursor:pointer; transition:border-color .15s,transform .15s;
}
.vid-card:hover{ border-color:var(--accent); transform:translateY(-3px); }
.vid-card .thumb{ width:100%; aspect-ratio:9/16; object-fit:cover; display:block; background:var(--well); }
.vid-card .vc-body{ padding:.7rem .85rem; }
.vid-card .vc-t{ font-size:.9rem; font-weight:700; color:var(--text-strong); line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.vid-card .vc-m{ font-size:.76rem; color:var(--muted); margin-top:.3rem; }
.vid-empty{
  background:var(--panel); border:1px dashed var(--border); border-radius:.9rem;
  padding:1.6rem 1.2rem; text-align:center; color:var(--muted); font-size:.9rem; line-height:1.7;
}
.vid-empty b{ color:var(--accent-fg); }

.nxt{ background:var(--panel); border:1px solid var(--border); border-radius:.95rem; padding:1.2rem 1.3rem; }
.nxt h3{ font-size:1.05rem; color:var(--text-strong); margin:0 0 .9rem; }
.nxt ul{ list-style:none; padding:0; margin:0; }
.nxt li{ display:flex; gap:.6rem; padding:.6rem 0; border-bottom:1px dashed var(--border-soft);
  font-size:.9rem; color:var(--text); line-height:1.5; align-items:flex-start; }
.nxt li:last-child{ border-bottom:none; }
.nxt li .dot{ flex:0 0 auto; width:1.45rem; height:1.45rem; border-radius:50%;
  background:var(--well); color:var(--accent-fg); display:flex; align-items:center;
  justify-content:center; font-size:.72rem; font-weight:800; margin-top:.1rem; }

/* 状态徽标（我的成片用） */
.vstat{ display:inline-block; font-size:.72rem; font-weight:700; padding:.12rem .5rem;
  border-radius:999px; background:var(--well); color:var(--muted); }
.vstat.run{ background:rgba(30,158,91,.14); color:var(--accent-fg); }
.vstat.done{ background:rgba(30,158,91,.18); color:var(--accent-fg); }
.vstat.fail{ background:rgba(224,138,30,.16); color:var(--warn-fg); }

/* ── 6. 响应式 ── */
@media (max-width:900px){
  .steps{ grid-template-columns:1fr; }
  .dash-row{ grid-template-columns:1fr; }
  .hero{ padding:1.5rem 1.3rem; }
  .hero h2{ font-size:1.4rem; }
}