/* 序列号：CSS枝-30~34
   坐标：公共⊂(0,4)⊂(0,3)⊂(0,2)⊂(0,1)⊂(1,30)
   地址：树库/CSS树库/公共/系0/枝干/账号菜单.css → 账号菜单（连侧弹面板一起）
   2026-10-21 第 252 批：整份从 合成/系0/枝干/面板弹窗用户.css 搬到这里 ——
   账号菜单要在商城也用，样式只准有一份，所以搬来公共，合成那边改成 @import 这一份。
   大白话：右侧滑出的面板骨架（侧弹面板）：定位、
             收起时滑走的动画、最小化后右下的小横条、
             还有 C 档预览滑块条。用它让参数面板能收能放，
             角色：枝干
             收起来也不挡着图。 */

/* 2026-10-21 第 252 批：这份样式用到的色料（原写在合成 样式叶子.css 里，商城页面没有那套）。
   只补色料、不写形状 —— 形状就在下面这一份文件里。 */
:root {
  --白瓷: rgba(255,255,255,.95);
  --白玻璃: rgba(255,255,255,.97);
  --白九成: rgba(255,255,255,.9);
  --白雾: rgba(255,255,255,.65);
  --白描: rgba(255,255,255,.85);
  --橘: #e8890c;
  --橘深: #c6740a;
  --红: #c62828;
  --红深: #a02020;
  --红圈: rgba(198,40,40,.75);
  --灰: #999;
  --亮蓝: #00b7ff;
  --亮蓝圈: rgba(0,183,255,.85);
  --按压蓝: #005f8a;
  --蓝边: rgba(0,120,176,.3);
  --蓝边淡: rgba(0,120,176,.2);
  --蓝边浓: rgba(0,120,176,.4);
  --蓝虚线: rgba(0,120,176,.25);
  --蓝玻璃浓: rgba(0,120,176,.92);
  --浅蓝底玻璃: rgba(232,247,255,.9);
}
/* ===== 侧弹面板 ===== */
.side-panel {
  position: fixed;
  top: 14px; right: 14px;
  width: calc(30% - 7px);
  max-height: calc(100% - 60px);
  overflow-y: auto;
  box-shadow: 0 8px 40px rgba(0,0,0,0.35);
  z-index: 150;
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 12px;
  /* 收起/展开滑动动画：用 visibility+位移，不用 display，动画才生效 */
  visibility: hidden;
  opacity: 0;
  transform: translateX(24px);
  transition: all 0.25s ease;
  pointer-events: none;
}
.side-panel.show {
  visibility: visible;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
/* ===== 参数面板最小化后的底部横条（右下角，避开底部按钮组） ===== */
.panel-minibar {
  position: fixed; right: 18px; bottom: 14px; z-index: 160;
  height: 32px; min-width: 110px; padding: 0 16px;
  border-radius: 16px; display: none; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.35);
  transition: all 0.2s;
}
.panel-minibar.show {
  display: flex;
}
.panel-minibar:hover {
  background: var(--按压蓝);
  transform: translateY(-2px);
}
/* ===== C档实时预览滑块条 ===== */
.c-preview-bar {
  position: absolute; bottom: 100px; left: 50%;
  transform: translateX(-50%);
  display: none; align-items: center; gap: 10px; z-index: 16;
  border-radius: 20px;
  padding: 8px 16px; width: min(86%, 480px);
}
.c-preview-bar.show {
  display: flex;
}
.c-preview-bar input[type=range] {
  flex: 1;
  accent-color: var(--深蓝);
}
.c-preview-label {
  white-space: nowrap;
}
.center-col.is-fullscreen .c-preview-bar,
.center-col.pseudo-fs .c-preview-bar {
  bottom: 20px;
}
/* 序列号：CSS枝-31 ｜ 坐标：合成⊂(0,2)⊂(0,1)⊂(1,31)
   地址：树库/CSS树库/公共/系0/枝干/账号菜单.css → 面板零件
   大白话：面板里的通用小件：标题 / 关闭叉、
             提示词大输入框、说明小字、确定钮、参数输入行、
             滑块行、虚线分隔、按钮上的小圆点。
             效果：各个面板拼出来长得一个样，
             用户学会一个就会用所有。 */
.panel-title {
  font-size: 17px; font-weight: 600; display: flex; justify-content: space-between; align-items: center;
  position: sticky; top: 0; z-index: 5;
  padding: 4px 0;
  background: inherit;
}
.panel-close {
  background: none; border: none; font-size: 22px;
  cursor: pointer; padding: 0 6px;
}
.prompt-input {
  min-height: 160px;
  flex: 1;
  border: 2px solid var(--蓝边);
  padding: 12px;
  font-family: inherit;
  resize: vertical;
  line-height: 1.6;
}
.prompt-input:focus {
  outline: none;
  border-color: var(--深蓝);
}
.prompt-input::placeholder {
  color: var(--深蓝);
  opacity: 0.32;
}
.field-input::placeholder {
  color: var(--深蓝);
  opacity: 0.32;
}
.panel-hint {
  opacity: 0.45;
  line-height: 1.6;
  font-size: 11px;
}
.panel-ok {
  border: none; cursor: pointer;
  align-self: flex-start; /* 任务3：按钮跟文字自适应，两字按钮不撑满 */
  white-space: nowrap;
}
.panel-ok:hover {
  background: var(--按压蓝);
}
/* 序列号：CSS枝-32 ｜ 坐标：合成⊂(0,2)⊂(0,1)⊂(1,32)
   地址：树库/CSS树库/公共/系0/枝干/账号菜单.css → 档位选择钮
   大白话：ABC 三档/灯型/渲染版本那些选项钮的通用长相：蓝玻璃底白字圆角（颜色从叶子 var 取）、
           横排纵排两式、选中发蓝光。未选中的钮不许是白方块——基样就管这件事。
           参数面板专用的那几条住系0。 */
/* ===== 版本/形状/档位选择按钮 ===== */
/* 任务1：ABC三档改横向一行（窄屏自动换行）；按钮全部自适应文字宽度 */
.ver-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.ver-col {
  display: flex;
  flex-direction: row;
  gap: 8px;
  flex-wrap: wrap;
}
.ver-btn {
  flex: none;
  width: auto;
  border: none;
  background: var(--蓝玻璃浓); color: #fff;
  border-radius: 10px;
  padding: 7px 14px; font-size: 13px; font-weight: bold;
  cursor: pointer; transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  white-space: nowrap;
}
.ver-btn small {
  display: block;
  font-size: 11px;
  font-weight: normal;
  opacity: 0.85;
  margin-top: 1px;
}
/* 任务1：选中态不变色，只加发光效果区分 */
.ver-btn.active {
  background: var(--蓝玻璃浓);
  box-shadow: 0 0 0 2px var(--亮蓝), 0 0 16px 5px var(--亮蓝圈);
}
/* 纵向排列（ABC三档）时：整行一个按钮、左对齐 */
.ver-col .ver-btn {
  flex: none;
  text-align: left;
}
/* 参数面板里的ABC三档：一行横排不换行，按钮按文字自适应宽度，不再三等分撑满 */
/* 参数输入行 */
.field-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.field-row label {
  white-space: nowrap;
}
.field-input {
  flex: 1; min-width: 0;
  border: 2px solid var(--蓝边);
  padding: 8px 10px; 
}
.field-input:focus {
  outline: none;
  border-color: var(--深蓝);
}
/* 任务5：参数面板填尺寸的数字输入框——缩短到约1/4、字体小一号、字虚淡一点 */
.field-unit {
  white-space: nowrap;
}
.slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.slider-row input[type=range] {
  flex: 1;
  accent-color: var(--深蓝);
}
.slider-val {
  min-width: 52px;
  text-align: right;
}
.panel-sep {
  display: none;
}

.btn-prompt.has-text::after {
  content: ''; display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: #ff5252; margin-left: 6px; vertical-align: middle;
}
.btn-params.has-text::after {
  content: ''; display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: #69f0ae; margin-left: 6px; vertical-align: middle;
}
/* 序列号：CSS枝-33 ｜ 坐标：合成⊂(0,2)⊂(0,1)⊂(1,33)
   地址：树库/CSS树库/公共/系0/枝干/账号菜单.css → 居中弹窗
   大白话：登录/注册/充值/协议共用的居中弹窗：黑半透明遮罩、
             白卡、弹窗里主钮通栏。
             用它让全站四张纸长得一模一样，
             一看就知道「这是要我填的那张」。 */
/* ===== 居中弹窗 ===== */
.modal-mask {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.45); z-index: 300;
  display: none; align-items: center; justify-content: center;
}
.modal-mask.show {
  display: flex;
}
.modal {
  padding: 20px; width: 320px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 12px 50px rgba(0,0,0,.4);
}
/* 弹窗里的主按钮（登录/提交审核）保持通栏，不跟随面板紧凑款 */
.modal .panel-ok {
  align-self: stretch;
  padding: 10px;
  font-size: 14px;
}
/* 序列号：CSS枝-34 ｜ 坐标：合成⊂(0,2)⊂(0,1)⊂(1,34)
   地址：树库/CSS树库/公共/系0/枝干/账号菜单.css → 用户条
   大白话：左上角的头像钮 + 点开的折叠菜单（余额 / 充值 / AI / 审核）
             + 菜单里的收款码行和登录/注册切换小字；
             余额为零时数字变红。
             效果：账号的事一个头像入口全包；余额见底变红，
             提醒得不动声色但看得见。 */
/* ===== 用户条（左上角折叠菜单：默认只一个头像按钮，点开才是余额/充值/AI/审核） ===== */
/* 2026-10-13：账号条要压在 AI 浮层之上（AI 浮层 99999）。
   为什么：念儿对话框左上角那个头像点一下，开的就是这张菜单（余额/充值）——
   菜单要是被 AI 浮层盖住，用户点了等于没反应；顺手还会让合成页那颗头像忽隐忽现。
   原来它在 120 的 AI 浮层之上（250），是后来 AI 浮层抬到 99999 时把它落下了。 */
.user-bar {
  position: fixed; top: 10px; left: 10px; z-index: 100000;
}
html[data-ai-system="合成"] .user-bar { display: block !important; }
html[data-ai-system="商城"] .user-bar:not(.ai来源) { display: none !important; }
.user-bar.ai来源 > .avatar-btn { display: none; }
.user-bar .avatar-btn {
  width: 42px; height: 42px; border-radius: 50%;
  border: none; cursor: pointer; font-size: 20px;
  background: var(--白瓷); color: var(--深蓝);
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s;
  padding: 0; overflow: hidden;
}
.user-bar .avatar-btn img {
  width: 100%; height: 100%;
  object-fit: cover; border-radius: 50%;
  display: block;
}
.user-bar .avatar-btn:hover {
  transform: scale(1.08);
}
/* 余额不足时头像加红圈提醒 */
.user-bar .avatar-btn.low {
  box-shadow: 0 0 0 3px var(--红圈), 0 2px 10px rgba(0,0,0,.25);
}
.user-menu {
  position: absolute; top: 50px; left: 0;
  display: none; flex-direction: column; gap: 6px;
  align-items: flex-start; /* 任务4：按钮宽度自适应内容，不拉满 */
  background: var(--白玻璃); padding: 10px 12px; min-width: 190px;
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0,0,0,.3);
}
.user-menu.show {
  display: flex;
}
/* 用户信息（账号+余额）：再小两号 */
.user-menu .user-info {
  color: var(--橘);
  font-weight: normal; padding-bottom: 6px; border-bottom: 1px dashed var(--蓝虚线);
  font-size: 11px;
  word-break: break-all; align-self: stretch; /* 这条拉满，虚线才通栏 */
}
.user-menu[data-source="ai"] #btnAccountAI { display: block !important; }
.user-menu .user-menu-close { align-self: flex-end; margin-top: 2px; }
/* 2026-10-21：账号菜单自己带齐长相，不再借合成页的工具类；
   商城和合成共用这一份，少一项都会把菜单撑变样。 */
.user-menu .recharge { background: #e8890c; color: #fff; border-radius: 8px; }
.user-menu #btnAccountAI { background: #1565c0; color: #fff; border-radius: 8px; }
.user-menu #btnAdminReview, .user-menu #btnAdminLogs { background: #1565c0; color: #fff; border-radius: 8px; }
.user-menu .user-menu-close { background: #eef4fa; color: #1565c0; border-radius: 8px; }
/* 充值/审核等按钮横向并排，紧凑自适应 */
.user-menu .menu-btn-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  align-self: stretch;
}
.user-menu .menu-btn-row button {
  width: 100%;
  padding: 4px 6px;
  font-size: 11px;
  border-radius: 8px;
  color: #fff;
  white-space: nowrap;
}
.user-menu .menu-btn-row .user-menu-close {
  grid-column: 1 / -1;
  justify-self: end;
  width: auto;
  min-width: 54px;
  padding-left: 12px;
  padding-right: 12px;
  color: #1565c0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.user-menu .user-info.credits-zero {
  color: var(--红);
}
/* 任务4：菜单按钮缩小一半、细体小字，圆角扁平；充值保留橘黄。 */
.user-menu button {
  border: none; padding: 4px 10px;
  font-weight: normal; cursor: pointer;
  text-align: center;
}

/* 充值弹窗里的两张收款码 */
.qr-row {
  display: flex;
  gap: 10px;
}
.qr-row .qr-box {
  flex: 1;
  text-align: center;
  
}
.qr-row img {
  width: 100%;
  border: 1px solid var(--蓝虚线);
}
.auth-switch {
  text-align: center;
  cursor: pointer;
  text-decoration: underline;
}
/* 序列号：CSS枝-35 ｜ 坐标：合成⊂(0,2)⊂(0,1)⊂(1,35)
   地址：树库/CSS树库/公共/系0/枝干/账号菜单.css → 协议勾选行
   大白话：注册页的协议勾选行，
             和点开看全文的那个弹窗（字高、能滚、
             没勾协议时登录钮是灰的）。
             效果：注册前协议看得清、勾没勾一眼明白，
             没勾就不让过，省得事后扯皮。 */
/* ===== 注册协议勾选行 + 协议查看弹窗 ===== */
.agree-row {
  display: flex; align-items: flex-start; gap: 8px;
  line-height: 1.5;
}
.agree-row input {
  margin-top: 3px;
  flex: none;
  accent-color: var(--深蓝);
}
.agree-row a {
  color: var(--深蓝);
  text-decoration: underline;
  cursor: pointer;
}
#loginSubmit:disabled {
  background: var(--灰);
  cursor: not-allowed;
}
.agree-text {
  white-space: pre-wrap; word-break: break-word;
  font-family: inherit; line-height: 1.7; padding: 12px;
  max-height: 55vh; overflow-y: auto; margin: 0;
}