/* ============================================================
 *  浅色主题 · L3 香槟米金
 *  暖米金底 + 象牙白卡片 + 深金主色，高定贵气感
 *  加载顺序：必须位于 style.css 之后
 * ============================================================ */

:root {
  /* 底色三层 */
  --bg: #F6EFE2;
  --panel: #FFFDF8;
  --panel2: #FAF4E8;

  /* 文字：暖棕黑三级 */
  --txt: #241E15;
  --txt2: #665C4C;
  --txt3: #7F7566;

  /* 描边 */
  --line: rgba(58, 45, 26, .12);
  --line2: rgba(58, 45, 26, .20);

  /* 金色：白底上用深金，避免发飘 */
  --gold: #A37E22;
  --gold-lt: #8C6A16;
  --gold-dk: #7A5D14;
  --gold-dim: rgba(163, 126, 34, .38);
  --gold-soft: rgba(163, 126, 34, .10);
}

/* ---- 滚动条 ---- */
::-webkit-scrollbar-thumb { background: rgba(58, 45, 26, .18); }
::-webkit-scrollbar-thumb:hover { background: rgba(163, 126, 34, .5); }

/* ---- 顶栏 ---- */
header { background: rgba(255, 253, 248, .86); backdrop-filter: blur(18px); border-bottom-color: var(--line); }
/* 首页为深紫 hero，顶栏随之转为深紫半透明，避免白条割裂 */
header#app-header.home-mode {
  --gold: #D4AF37; --gold-lt: #F3E5AB;
  --gold-dim: rgba(212, 175, 55, .38); --gold-soft: rgba(212, 175, 55, .08);
  background: linear-gradient(180deg, rgba(14, 8, 20, .88), rgba(14, 8, 20, .30));
  border-bottom-color: transparent;
  backdrop-filter: blur(14px);
}
header#app-header.home-mode .logo-name { color: #f2eaf9; }
header#app-header.home-mode .logo-badge {
  background: linear-gradient(135deg, rgba(255, 255, 255, .10), transparent);
  color: var(--gold);
}
header#app-header.home-mode .nav-btn { color: #ded5ea; }
header#app-header.home-mode .nav-btn:hover { color: #fff; background: rgba(255, 255, 255, .12); }
header#app-header.home-mode .pill {
  background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .20); color: #e4dcee;
}
header#app-header.home-mode .pill:hover { background: rgba(255, 255, 255, .12); }
.logo-name { color: var(--txt); }
.logo-badge {
  background: linear-gradient(135deg, rgba(163, 126, 34, .14), rgba(255, 255, 255, .5));
  color: var(--gold);
}
.nav-btn { color: var(--txt2); }
.nav-btn:hover { color: var(--txt); background: rgba(58, 45, 26, .05); }
.nav-btn.active { color: var(--gold); background: var(--gold-soft); }
.pill { background: rgba(58, 45, 26, .04); border-color: var(--line); }
.pill:hover { background: rgba(58, 45, 26, .08); }
.pill.gold { background: rgba(163, 126, 34, .10); }
.pill.gold:hover { background: rgba(163, 126, 34, .18); }
.pill.gold-outline b { color: var(--gold); }
.pill.gold-outline:hover { background: rgba(163, 126, 34, .10); }

/* ---- 通用文字：原本的 #fff 全部改深 ---- */
.sb-head b, .params-head h3, .model-select option, .result-caption b,
.gal-head h2, .pf-name, .pf-works-head h3, .page-head h2, .price-card h4,
.tut-card h4, .placeholder-page h2, .login-brand h2, .detail-info h2,
.confirm-modal h3 { color: var(--txt); }
.tool:hover, .rand:hover { color: var(--txt); }
.modal-close:hover, .hist-close:hover, .lb-close:hover { color: var(--txt); background: rgba(58, 45, 26, .07); }

/* ---- 左侧工具栏 ---- */
.tool { background: rgba(58, 45, 26, .025); border-color: var(--line); }
.tool:hover { border-color: var(--line2); }
.tool.active { color: var(--gold); }
.sb-tools--grid .tool {
  background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(250, 244, 232, .55));
  border-color: rgba(58, 45, 26, .09);
}
.sb-tools--grid .tool:hover { background: #fff; border-color: rgba(163, 126, 34, .35); }
.sb-tools--grid .tool.active {
  border-color: var(--gold-dim);
  background: rgba(163, 126, 34, .10);
  box-shadow: 0 4px 14px rgba(163, 126, 34, .14);
}
.sb-tools--grid .tool svg { filter: drop-shadow(0 2px 5px rgba(90, 68, 24, .22)); }
.sb-group--card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(252, 247, 236, .72));
  border-color: rgba(58, 45, 26, .10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 3px rgba(90, 68, 24, .06);
}
.sb-head { background: linear-gradient(135deg, rgba(163, 126, 34, .12), rgba(255, 255, 255, .4)); border-color: var(--line); }

/* ---- 参数面板 ---- */
.params { background: var(--panel); border-color: var(--line); }
textarea { background: #fff; border-color: rgba(58, 45, 26, .15); color: var(--txt); }
textarea:focus { border-color: var(--gold-dim); }
textarea::placeholder { color: #B5AA98; }
.chip { background: rgba(58, 45, 26, .035); border-color: var(--line); }
.chip:hover { background: #fff; border-color: rgba(163, 126, 34, .4); }
.chip.on { background: rgba(163, 126, 34, .12); border-color: var(--gold-dim); color: var(--gold); }
.opt { background: transparent; border-color: var(--line); }
.opt:hover { background: rgba(58, 45, 26, .04); }
.opt.sel { color: #fff; }
.gen-btn {
  background: linear-gradient(90deg, #D9B44A, #F5E7BC, #D9B44A);
  color: #2A2109;
  box-shadow: 0 6px 18px rgba(163, 126, 34, .24);
}
.gen-btn:hover:not(:disabled) { box-shadow: 0 10px 26px rgba(163, 126, 34, .34); }

/* ---- 主舞台 ---- */
.stage-main { background: var(--bg); background-image: radial-gradient(rgba(58, 45, 26, .08) 1px, transparent 1px); }
.model-select { background: #fff; border-color: var(--line); }
.model-select option { background: #fff; }
.btn-hist:hover, .btn-hist.open { background: rgba(58, 45, 26, .05); }
.icon-btn { background: #fff; box-shadow: 0 1px 4px rgba(90, 68, 24, .10); }
.placeholder .ph-icon { border-color: rgba(58, 45, 26, .18); color: rgba(58, 45, 26, .22); }
.upload-zone { background: #fff; border-color: rgba(58, 45, 26, .18); }
.result-caption { color: var(--txt2); }

/* ---- AI 对话 ---- */
.chat-scroll { background: var(--bg); }
.chat-composer { background: linear-gradient(180deg, rgba(246, 239, 226, 0), var(--panel2) 42%); }
.cc-box {
  background: #fff; border-color: rgba(58, 45, 26, .14);
  box-shadow: 0 12px 30px rgba(90, 68, 24, .10), inset 0 1px 0 #fff;
}
.cc-box textarea { background: transparent; border: none; }
.cc-ico { background: #fff; border-color: rgba(58, 45, 26, .14); color: var(--txt2); }
.cc-ico:hover { background: rgba(163, 126, 34, .08); color: var(--gold); }
.cc-hint b { background: #fff; border-color: rgba(58, 45, 26, .15); color: var(--txt2); }
.cc-send { color: #fff; background: linear-gradient(180deg, #B8912A, #96721C); box-shadow: 0 4px 12px rgba(120, 90, 20, .22); }
.msg.ai .msg-body { background: #fff; border-color: rgba(58, 45, 26, .10); }
.msg.user .msg-body { background: rgba(163, 126, 34, .12); border-color: rgba(163, 126, 34, .28); color: #5A4410; }
.msg.user .msg-av { background: rgba(58, 45, 26, .08); color: var(--txt2); }
.cr-temp, .cr-item { background: linear-gradient(180deg, rgba(58, 45, 26, .03), rgba(58, 45, 26, .008)); border-color: var(--line); }
.cr-item:hover { background: #fff; border-color: rgba(163, 126, 34, .38); }
.cr-clear { background: #fff; border-color: var(--line); }
#temp-range { background: rgba(58, 45, 26, .16); }

/* ---- 历史 / 画廊 / 卡片 ---- */
.history { background: #fff; border-color: var(--line); }
.hi-thumb { background: #EFE6D5; }
.hist-item { background: rgba(58, 45, 26, .02); }
.hist-item:hover { background: rgba(163, 126, 34, .07); }
.gal-card { background: #fff; box-shadow: 0 1px 5px rgba(90, 68, 24, .07); border-color: var(--line); }
.gal-card:hover { box-shadow: 0 16px 36px rgba(90, 68, 24, .16); }
.gal-thumb { background: #EFE6D5; }
.price-card, .tut-card, .pf-card { background: var(--panel); box-shadow: 0 1px 5px rgba(90, 68, 24, .06); border-color: var(--line); }
.price-card.hot {
  background: linear-gradient(160deg, rgba(163, 126, 34, .12), transparent 60%), var(--panel);
  border-color: var(--gold-dim);
}

/* ---- 弹窗 ---- */
.modal { background: #fff; box-shadow: 0 30px 80px rgba(50, 36, 12, .30); }
.modal-mask { background: rgba(46, 36, 22, .38); }
.detail-img, .detail-img img { background: #F2EADA; }
.toast { background: rgba(38, 30, 18, .94); color: #fff; }

/* ---- 营销按钮 ---- */
.btn-gold { color: #2A2109; background: linear-gradient(90deg, #D9B44A, #F5E7BC, #D9B44A); box-shadow: 0 0 22px rgba(163, 126, 34, .26); }
.btn-gold:hover:not(:disabled) { box-shadow: 0 0 40px rgba(163, 126, 34, .4); }
.btn-ghost { background: var(--gold-soft); border-color: var(--gold-dim); }
.btn-ghost:hover { background: rgba(163, 126, 34, .16); }
.price-card li::before { color: var(--gold); }

/* ---- 首页：深紫 hero 区块内保持亮金与浅紫，避免深金压暗 ---- */
#view-home { --gold: #D4AF37; --gold-lt: #F3E5AB; --gold-dim: rgba(212, 175, 55, .38); --gold-soft: rgba(212, 175, 55, .08); }

/* ---- 浅色下的深色块修正 ---- */
.ra-btn { background: #fff; border-color: var(--line); color: var(--txt2); box-shadow: 0 1px 4px rgba(90, 68, 24, .07); }
.ra-btn:hover { background: #fff; border-color: var(--gold-dim); }
.ra-btn.on { background: var(--gold-soft); }
.mode-card { background: #fff; border-color: var(--line); color: var(--txt2); }
.mode-card:hover { border-color: var(--gold-dim); color: var(--txt); }
.mode-card.on, .mode-card.active, .mode-card.sel { border-color: var(--gold-dim); background: var(--gold-soft); color: var(--gold); }
.v-select { background: #fff; border-color: var(--line); color: var(--txt); }
/* 首尾帧角标：深底金字在白底上会成黑块，改白底金字 */
.frame-tag {
  background: rgba(255, 255, 255, .94); color: var(--gold);
  border-color: var(--gold-dim); box-shadow: 0 1px 3px rgba(90, 68, 24, .14);
}
.frame-slot { border-color: rgba(58, 45, 26, .20); }
.frame-slot:hover { border-color: var(--gold); }
.loading-mask { background: rgba(246, 239, 226, .82); backdrop-filter: blur(6px); color: var(--txt2); }
.cc-note, .login-tip { color: var(--txt3); }
.login-tabs { background: rgba(58, 45, 26, .05); border-color: var(--line); }
.hist-thumb { background: #EFE6D5; }
/* 工作区内查看历史作品 */
.work-prompt { background: #fff; border-color: var(--line); }
.work-noimg { border-color: rgba(58, 45, 26, .18); }
.hist-item.active { box-shadow: inset 0 0 0 1px var(--gold-dim), 0 2px 12px rgba(163, 126, 34, .14); }

/* 移动端历史抽屉（原样式在媒体查询里写死深色） */
@media (max-width: 980px) {
  .history { background: #fff; }
}


/* ============================================================
 *  移动端补充（2026-11-11）
 *  style.css 的 860px 断点只处理了暗色主题的结构，浅色主题在
 *  ≤640px 下仍有横向溢出、信息条遮挡、比例选项挤成一列的问题。
 *  这里做最后一道覆盖，仅用媒体查询，不动任何 JS。
 * ============================================================ */
@media (max-width: 640px) {
  /* 顶栏：允许换行，隐藏次要按钮，避免把页面撑宽 */
  #app-header { flex-wrap: wrap; row-gap: 6px; padding: 8px 10px; }
  #main-nav { order: 3; width: 100%; overflow-x: auto; justify-content: flex-start; }
  .nav-btn span { display: inline; font-size: 12px; }
  #btn-admin, #btn-service, #btn-avatar { display: none; }
  #btn-gold { display: inline-flex; }

  /* 工坊：竖向堆叠，侧栏变横向滚动条 */
  #view-workspace { flex-direction: column; overflow-x: hidden; }
  .sidebar {
    width: 100%; min-width: 0; max-height: 96px;
    flex-direction: row; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
  }
  .sb-tools--grid .tool { min-width: 84px; }

  /* 参数面板整宽、限高，避免把内容挤出屏幕 */
  .params { width: 100%; min-width: 0; max-height: 46vh; overflow-y: auto; }

  /* 顶部信息条改为静态流式，不再浮在内容上 */
  .stage-top { position: static; flex-wrap: wrap; height: auto; min-height: 0; gap: 8px; padding: 8px 12px; }
  .model-select { max-width: 132px; }

  /* 选项按钮两列，避免被裁切（比例选项更窄，用两列刚好） */
  .opt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .opt-grid .opt { min-width: 0; padding: 8px 4px; }
  .opt-grid .opt b { font-size: 13px; }

  /* 结果区与底部工具按钮 */
  .stage-main { min-height: 42vh; }
  .stage-corner { right: 12px; bottom: 12px; }

  /* 通用容器不产生横向滚动 */
  .view, .home-inner, .params, .stage { max-width: 100vw; overflow-x: hidden; }
}