/* ============================================
   一路旺 · AI混剪导演 H5
   墨青 #182742 × 旺金 #D9A94F × 宣纸白 #F5F3EE
   签名元素：名片上自左下升向右上的鎏金路径线
   与 16w.cn 主站完全统一色彩语言体系
   ============================================ */
:root {
  --ink: #182742;          /* 墨青 - 主色/深色块 */
  --ink-deep: #0F1A2E;     /* 深墨青 - 最深 */
  --ink-light: #1E3050;    /* 浅墨青 - 渐变起点 */
  --gold: #D9A94F;         /* 旺金 - 品牌强调色 */
  --gold-light: #F0DCA8;   /* 浅旺金 - 高亮/渐变 */
  --gold-deep: #B0852E;    /* 深旺金 - 文字 */
  --paper: #F5F3EE;        /* 宣纸白 - 页面背景 */
  --card-bg: #FFFFFF;      /* 卡片白 */
  --cinnabar: #C2482F;     /* 朱砂红 - 警示/数量 */
  --green: #3E7D53;        /* 翠绿 - 成功/已完成 */
  --text: #2B3345;         /* 主文字 */
  --muted: #7B8398;        /* 次要文字 */
  --line: #E8E4DA;         /* 分割线/边框 */
  --radius: 14px;          /* 圆角 */
  --radius-sm: 8px;
  --shadow: 0 8px 24px rgba(15,26,46,.10);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { height:100%; overflow-x:hidden; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--paper); color: var(--text);
  font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.serif { font-family: "Songti SC","STSong","Noto Serif SC",serif; }
a { color: inherit; text-decoration:none; }
button { font-family: inherit; cursor:pointer; border:none; background:none; color:inherit; outline:none; }
input, textarea, select {
  font-family: inherit; background: #FCFAF4; color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 14px; font-size: 15px; width: 100%; outline: none;
  transition: border-color .2s;
}
input:focus, textarea:focus, select:focus { border-color: var(--gold); }
textarea { resize: vertical; min-height: 80px; }
img { max-width: 100%; }

/* ===== 主容器 ===== */
#app { max-width:480px; margin:0 auto; min-height:100vh; background:var(--paper); position:relative;
  padding: 0 0 calc(80px + var(--safe-bottom)); overflow-x:hidden; }
.page-enter { animation: fadeUp .3s ease; }
@keyframes fadeUp { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform:translateY(0); } }
.hidden { display:none !important; }

/* ===== 导航栏 ===== */
.navbar {
  position: sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding: calc(var(--safe-top) + 12px) 20px 10px;
  background: linear-gradient(var(--paper),var(--paper) 70%,rgba(245,243,238,0));
}
.navbar-back {
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  color: var(--ink); font-size:18px;
}
.navbar-back:active { opacity:.5; }
.navbar-title { font-size:18px; font-weight:900; color:var(--ink); letter-spacing:.08em; flex:1; text-align:center; }
.navbar-right { width:32px; }

/* ===== 区块标签 ===== */
.section-label { display:flex; align-items:center; gap:8px; margin:22px 16px 10px;
  font-size:13px; font-weight:700; color:var(--ink); letter-spacing:.08em; }
.section-label::before { content:""; width:3px; height:13px; background:var(--gold); border-radius:2px; }

/* ===== AI说明条 ===== */
.ai-notice {
  background: #FCF8EE; border-bottom: 1px solid var(--line);
  padding: 6px 16px; font-size: 12px; color: var(--muted);
  display: flex; align-items: center; gap: 6px; justify-content: center;
}
.ai-notice i { color: var(--gold-deep); }

/* ===== Loading ===== */
#loading-mask {
  position:fixed; inset:0; z-index:9999;
  background: rgba(245,243,238,.88); backdrop-filter: blur(4px);
  display:none; align-items:center; justify-content:center; flex-direction:column;
}
#loading-mask.show { display:flex; }
.spinner {
  width:40px; height:40px; border:3px solid var(--line);
  border-top-color: var(--gold); border-radius:50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text { margin-top:12px; font-size:14px; color:var(--muted); }

/* ===== 按钮 ===== */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 12px 24px; border-radius: var(--radius-sm); font-size:15px; font-weight:600;
  background: #FFF; color: var(--ink); border:1px solid var(--line);
  transition: all .15s;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--ink); color: #F3E9CF; border-color: var(--ink); }
.btn-primary:active { background: var(--ink-deep); }
.btn-gold { background: linear-gradient(135deg, var(--gold-light), var(--gold)); color: var(--ink); border:none; font-weight:700; }
.btn-gold:active { opacity:.85; }
.btn-success { background: var(--green); color:#fff; border-color: var(--green); }
.btn-outline { background: transparent; border:1px solid var(--line); color:var(--text); }
.btn-danger { background: var(--cinnabar); color:#fff; border-color: var(--cinnabar); }
.btn-block { display:flex; width:100%; }
.btn-sm { padding:8px 14px; font-size:13px; }
.btn-lg { padding:14px 32px; font-size:16px; }
.btn:disabled { opacity:.4; pointer-events:none; }

/* ===== 卡片 ===== */
.card {
  background: var(--card-bg); border-radius: var(--radius); padding:16px;
  border: 1px solid var(--line); margin-bottom:12px; box-shadow: 0 2px 8px rgba(15,26,46,.04);
}
.card-tap:active { transform: scale(.98); transition: transform .1s; }

/* ===== Hero区（墨青渐变底+旺金字） ===== */
.hero-card {
  margin:6px 16px 0; border-radius:18px; padding:20px 22px;
  background: linear-gradient(150deg, var(--ink-light), var(--ink-deep));
  color:#EFEDE6; position:relative; overflow:hidden;
}
.hero-card::after {
  content:""; position:absolute; right:-24px; top:-28px;
  width:130px; height:130px; border-radius:50%;
  background: radial-gradient(circle, rgba(240,220,168,.22), rgba(240,220,168,0) 70%);
}
.hero-title { font-size:20px; font-weight:900; letter-spacing:.1em; }
.hero-sub { font-size:12.5px; color: rgba(239,237,230,.72); margin-top:4px; }
.hero-big { font-size:34px; font-weight:900; color: var(--gold-light); margin-top:8px; }
.hero-big small { font-size:12px; font-weight:400; color: rgba(239,237,230,.7); margin-left:6px; }

/* ===== 项目列表 ===== */
.project-item {
  display:flex; align-items:center; gap:12px;
  background: var(--card-bg); border-radius: var(--radius); padding:14px;
  border:1px solid var(--line); margin-bottom:10px;
  transition: border-color .2s; box-shadow: 0 2px 8px rgba(15,26,46,.04);
}
.project-item:active { border-color: var(--gold); }
.project-icon {
  width:48px; height:48px; border-radius:12px;
  background: linear-gradient(135deg, #F7EAC6, var(--gold-light));
  display:flex; align-items:center; justify-content:center;
  font-size:22px; color: var(--ink); flex-shrink:0;
}
.project-info { flex:1; min-width:0; }
.project-name { font-size:15px; font-weight:700; color:var(--ink); margin-bottom:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.project-meta { font-size:12px; color:var(--muted); display:flex; gap:8px; }
.project-status {
  font-size:11px; padding:2px 8px; border-radius:10px; font-weight:500;
}
.st-draft { background:#F2F0EB; color:var(--muted); }
.st-analyzing { background:#FCF3E2; color:var(--gold-deep); }
.st-plan_ready { background:#FCF3E2; color:var(--gold-deep); }
.st-preview_rendering { background:#EDF1F8; color:#4C6396; }
.st-preview_ready { background:#EAF3EC; color:var(--green); }
.st-final_rendering { background:#EDF1F8; color:#4C6396; }
.st-completed { background:#EAF3EC; color:var(--green); }

/* ===== 空状态 ===== */
.empty-state { text-align:center; padding:60px 20px; color:var(--muted); }
.empty-state i { font-size:48px; margin-bottom:16px; display:block; color:var(--line); }
.empty-state p { font-size:14px; }

/* ===== 步骤条 ===== */
.steps { display:flex; gap:0; margin-bottom:20px; overflow-x:auto; padding:0 16px; }
.step {
  flex:1; min-width:50px; text-align:center; position:relative;
  font-size:11px; color:var(--muted); padding:8px 2px;
}
.step-num {
  width:28px; height:28px; border-radius:50%; margin:0 auto 6px;
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700;
  background:#FFF; color:var(--muted); border:1px solid var(--line); transition: all .2s;
}
.step.active .step-num { background:var(--ink); color:#F3E9CF; border-color:var(--ink); }
.step.done .step-num { background:var(--green); color:#fff; border-color:var(--green); }
.step.active { color:var(--ink); font-weight:600; }
.step.done { color:var(--green); }
.step::after {
  content:""; position:absolute; top:22px; right:-50%; width:100%; height:2px;
  background:var(--line); z-index:0;
}
.step:last-child::after { display:none; }
.step.done::after { background:var(--green); }

/* ===== 表单 ===== */
.form-group { margin-bottom:16px; padding:0 16px; }
.form-label { display:block; font-size:13px; color:var(--ink); margin-bottom:6px; font-weight:600; letter-spacing:.05em; }
.form-label::before { content:""; display:inline-block; width:3px; height:12px; background:var(--gold); border-radius:2px; margin-right:6px; vertical-align:-1px; }
.form-hint { font-size:12px; color:var(--muted); margin-top:4px; }
.tag-group { display:flex; flex-wrap:wrap; gap:8px; }
.tag {
  padding:8px 14px; border-radius:20px; font-size:13px;
  background:#FFF; color:var(--muted); border:1px solid var(--line);
  transition: all .15s;
}
.tag.active { background:var(--ink); color:#F3E9CF; border-color:var(--ink); font-weight:600; }
.tag:active { transform: scale(.95); }

/* ===== 上传区 ===== */
.upload-zone {
  border: 2px dashed var(--line); border-radius: var(--radius);
  padding: 40px 20px; text-align:center; transition: border-color .2s; margin:0 16px;
  background: #FCFAF4;
}
.upload-zone:active { border-color: var(--gold); }
.upload-zone i { font-size:36px; color:var(--gold); margin-bottom:12px; }
.upload-zone p { color:var(--muted); font-size:14px; }

.asset-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:0 16px; }
.asset-thumb {
  aspect-ratio:9/16; background:#F2F0EB; border-radius:8px;
  overflow:hidden; position:relative; border:1px solid var(--line);
}
.asset-thumb img { width:100%; height:100%; object-fit:cover; }
.asset-status {
  position:absolute; bottom:4px; left:4px; right:4px;
  font-size:10px; text-align:center; padding:2px;
  background:rgba(0,0,0,.5); border-radius:4px; color:#fff;
}
.asset-status.ready { background:rgba(62,125,83,.85); }
.asset-status.processing { background:rgba(217,169,79,.85); color:var(--ink); }
.asset-status.failed { background:rgba(194,72,47,.85); }

/* ===== 方案卡片 ===== */
.plan-card {
  background: var(--card-bg); border-radius: var(--radius); padding:16px;
  border:2px solid var(--line); margin-bottom:12px; transition: border-color .2s;
  box-shadow: 0 2px 8px rgba(15,26,46,.04);
}
.plan-card.selected { border-color: var(--gold); }
.plan-card:active { border-color: var(--gold); }
.plan-name { font-size:13px; color:var(--gold-deep); margin-bottom:6px; font-weight:700; }
.plan-title { font-size:16px; font-weight:700; color:var(--ink); margin-bottom:8px; line-height:1.4; }
.plan-hook { font-size:13px; color:var(--muted); margin-bottom:12px; font-style:italic; }
.plan-sections { font-size:12px; color:var(--muted); }
.plan-warnings { margin-top:8px; }
.plan-warning { font-size:12px; color:var(--gold-deep); display:flex; align-items:center; gap:4px; }

/* ===== 时间线预览 ===== */
.timeline-clip {
  display:flex; gap:10px; padding:10px; background:#FCFAF4;
  border-radius:8px; margin-bottom:6px; align-items:center; border:1px solid var(--line);
}
.clip-thumb { width:40px; height:40px; border-radius:6px; background:linear-gradient(135deg,#E8CE93,var(--gold)); display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--ink); flex-shrink:0; }
.clip-info { flex:1; min-width:0; }
.clip-role { font-size:11px; color:var(--muted); }
.clip-text { font-size:13px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.clip-duration { font-size:11px; color:var(--muted); flex-shrink:0; }

/* ===== 渲染进度 ===== */
.progress-bar { width:100%; height:8px; background:#F2F0EB; border-radius:4px; overflow:hidden; }
.progress-fill {
  height:100%; background: linear-gradient(90deg, var(--gold), var(--gold-light));
  border-radius:4px; transition: width .3s;
}

/* ===== 成片卡片 ===== */
.output-card {
  background: var(--card-bg); border-radius: var(--radius); overflow:hidden;
  border:1px solid var(--line); margin-bottom:12px; box-shadow: 0 2px 8px rgba(15,26,46,.04);
}
.output-thumb { width:100%; aspect-ratio:9/16; background:#F2F0EB; object-fit:cover; }
.output-info { padding:12px; }
.output-type { font-size:11px; color:var(--gold-deep); font-weight:600; }
.output-meta { font-size:12px; color:var(--muted); margin-top:4px; }

/* ===== Toast ===== */
.toast {
  position:fixed; bottom:calc(100px + var(--safe-bottom)); left:50%; transform:translateX(-50%);
  background:var(--ink); color:#F3E9CF; padding:10px 20px; border-radius:20px;
  font-size:14px; z-index:9998; box-shadow: var(--shadow); opacity:0; transition: opacity .3s;
  white-space:nowrap; max-width:90vw;
}
.toast.show { opacity:1; }
.toast.error { background:var(--cinnabar); color:#fff; }
.toast.success { background:var(--green); color:#fff; }

/* ===== 底部操作栏 ===== */
.bottom-bar {
  position:fixed; bottom:0; left:0; right:0;
  padding:12px 16px calc(12px + var(--safe-bottom));
  background: linear-gradient(var(--paper),var(--paper) 60%,rgba(245,243,238,0));
  border-top:1px solid var(--line); z-index:50;
  display:flex; gap:10px;
}
.bottom-bar .btn { flex:1; }

/* ===== 底部AI说明 ===== */
.ai-footer {
  position:fixed; bottom:0; left:0; right:0; z-index:49;
  padding:4px 16px calc(4px + var(--safe-bottom));
  background:var(--paper); text-align:center;
  font-size:11px; color:var(--muted);
}

/* ===== 统计卡片 ===== */
.stats { display:flex; margin:10px 16px 0; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:14px 0; }
.stat { flex:1; text-align:center; position:relative; }
.stat+.stat::before { content:""; position:absolute; left:0; top:20%; height:60%; width:1px; background:var(--line); }
.stat .num { font-size:20px; font-weight:900; color:var(--ink); }
.stat .lbl { font-size:10.5px; color:var(--muted); margin-top:2px; }

/* ===== 拍摄清单 ===== */
.checklist-item {
  display:flex; gap:12px; padding:12px; background:#FCFAF4;
  border-radius:8px; margin-bottom:8px; align-items:flex-start; border:1px solid var(--line);
}
.checklist-icon {
  width:32px; height:32px; border-radius:8px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:14px;
}
.checklist-icon.must { background:#FBEDE9; color:var(--cinnabar); }
.checklist-icon.optional { background:#F2F0EB; color:var(--muted); }
.checklist-name { font-size:14px; font-weight:600; color:var(--ink); }
.checklist-desc { font-size:12px; color:var(--muted); margin-top:2px; }
.checklist-meta { font-size:11px; color:var(--muted); margin-top:4px; }

/* ===== 算力 ===== */
.credit-card {
  background: linear-gradient(150deg, var(--ink-light), var(--ink-deep));
  border-radius: var(--radius); padding:20px; text-align:center; position:relative; overflow:hidden;
  margin:6px 16px 0;
}
.credit-card::after {
  content:""; position:absolute; right:-24px; top:-28px; width:130px; height:130px; border-radius:50%;
  background: radial-gradient(circle, rgba(240,220,168,.22), rgba(240,220,168,0) 70%);
}
.credit-num { font-size:36px; font-weight:900; color:var(--gold-light); }
.credit-label { font-size:13px; color: rgba(239,237,230,.72); margin-top:4px; }
.ledger-item {
  display:flex; justify-content:space-between; padding:10px 0;
  border-bottom:1px solid var(--line); font-size:13px;
}
.ledger-item:last-child { border-bottom:none; }

/* ===== 通用工具 ===== */
.flex { display:flex; }
.flex-col { display:flex; flex-direction:column; }
.items-center { align-items:center; }
.justify-between { justify-content:space-between; }
.gap-8 { gap:8px; } .gap-12 { gap:12px; }
.flex-1 { flex:1; }
.text-sm { font-size:13px; } .text-xs { font-size:12px; }
.text-dim { color:var(--muted); } .text-muted { color:var(--muted); }
.text-primary { color:var(--gold-deep); } .text-ink { color:var(--ink); }
.text-success { color:var(--green); } .text-warning { color:var(--gold-deep); }
.text-cinnabar { color:var(--cinnabar); }
.text-center { text-align:center; }
.mt-8 { margin-top:8px; } .mt-12 { margin-top:12px; } .mt-16 { margin-top:16px; }
.mb-8 { margin-bottom:8px; } .mb-12 { margin-bottom:12px; } .mb-16 { margin-bottom:16px; }
.rounded { border-radius:var(--radius); }
.shadow { box-shadow:var(--shadow); }
.w-full { width:100%; }
.px-16 { padding-left:16px; padding-right:16px; }

/* ===== 弹层 ===== */
.modal-overlay { position:fixed; inset:0; z-index:200; background:rgba(15,26,46,.55); display:flex; align-items:flex-end; justify-content:center; }
.modal-panel { background:var(--paper); width:100%; max-width:480px; border-radius:20px 20px 0 0; padding:20px; max-height:85vh; overflow-y:auto; }
.modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.modal-title { font-size:17px; font-weight:900; color:var(--ink); letter-spacing:.08em; }
.modal-close { width:32px; height:32px; display:flex; align-items:center; justify-content:center; font-size:18px; color:var(--muted); }

/* ===== 列表项 ===== */
.list-item {
  display:flex; align-items:center; gap:12px; background:var(--card-bg);
  border:1px solid var(--line); border-radius:var(--radius); padding:14px; margin:0 16px 10px;
  transition: border-color .2s; box-shadow: 0 2px 8px rgba(15,26,46,.04);
}
.list-item:active { border-color: var(--gold); }
.list-icon {
  width:42px; height:42px; border-radius:10px; flex-shrink:0;
  background: linear-gradient(135deg, #F7EAC6, var(--gold-light));
  display:flex; align-items:center; justify-content:center; font-size:18px; color:var(--ink);
}
.list-info { flex:1; min-width:0; }
.list-name { font-size:14px; font-weight:600; color:var(--ink); }
.list-desc { font-size:12px; color:var(--muted); margin-top:2px; }
.list-arrow { color:var(--line); font-size:14px; }