/* ========================================
 * 作品预览弹层（全局，风格对齐暗色主题）
 * ======================================== */
#wp-overlay {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(10, 10, 12, 0.96);
  display: none;
}
#wp-overlay.wp-show { display: block; }

.wp-topbar {
  /* 仅浮于左侧主区域上方，右侧信息栏/资产栏从顶部开始对齐 */
  position: absolute; top: 0; left: 0; right: 448px; height: 56px;
  display: flex; align-items: center; gap: 14px;
  padding: 0 18px;
  background: linear-gradient(180deg, rgba(0,0,0,.75), rgba(0,0,0,0));
  z-index: 5;
}
.wp-back-btn {
  width: 36px; height: 36px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.08); color: #e8e8e8;
  font-size: 15px; cursor: pointer; flex-shrink: 0;
  transition: background .2s;
}
.wp-back-btn:hover { background: rgba(255,255,255,.18); }
.wp-title-wrap { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.wp-title-input {
  flex: 1 1 auto; width: 100%;
  max-width: 680px; min-width: 120px;
  font-size: 15px; font-weight: 600; color: #f0f0f0;
  background: transparent; border: 1px solid transparent;
  border-radius: 8px; padding: 6px 10px; outline: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wp-title-input:focus {
  background: rgba(255,255,255,.06);
  border-color: rgba(77,124,255,.5);
}
.wp-title-pencil {
  font-size: 13px; color: #8a8a8a; cursor: pointer; flex-shrink: 0;
  transition: color .2s;
}
.wp-title-pencil:hover { color: #4d7cff; }
.wp-title-wrap.wp-readonly .wp-title-pencil { display: none; }
.wp-topbar-tip { font-size: 12px; color: #888; }

/* 主区域：整高布局，顶部预留浮动标题栏空间 */
.wp-main {
  position: absolute; top: 0; bottom: 0; left: 0; right: 448px;
  display: flex; align-items: center; justify-content: center;
  padding: 64px 28px 28px;
  overflow: hidden;
}
.wp-main-media { max-width: 100%; max-height: 100%; border-radius: 10px; }
.wp-main-media video { width: 100%; max-height: calc(100vh - 110px); border-radius: 10px; background: #000; }
.wp-main-media img { max-width: 100%; max-height: calc(100vh - 110px); object-fit: contain; border-radius: 10px; }

/* 同批多图并列对比：等分主区域，当前查看的一张白边高亮 */
.wp-main-media .wp-batch {
  display: flex; gap: 16px; max-width: 100%; max-height: calc(100vh - 110px);
  align-items: center; justify-content: center;
}
.wp-batch-cell {
  position: relative; flex: 1 1 0; min-width: 0; max-height: 100%;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.wp-batch-cell img {
  max-width: 100%; max-height: calc(100vh - 110px); object-fit: contain;
  border-radius: 10px; border: 2px solid transparent; box-sizing: border-box;
  transition: border-color .18s;
}
.wp-batch-cell.on img { border-color: #fff; }
.wp-batch-cell:not(.on):hover img { border-color: rgba(255,255,255,.45); }
.wp-batch-idx {
  position: absolute; left: 8px; top: 8px; font-size: 11px; line-height: 1.5;
  background: rgba(0,0,0,.55); color: #fff; border-radius: 6px; padding: 1px 7px;
}

/* 右侧信息栏：靠顶部对齐 */
.wp-info {
  position: absolute; top: 0; bottom: 0; right: 68px; width: 360px;
  background: #111114;
  border-left: 1px solid #26262d;
  overflow-y: auto;
  padding: 18px 20px 30px;
}
.wp-info::-webkit-scrollbar { width: 6px; }
.wp-info::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }

.wp-info-head { display: flex; align-items: center; gap: 8px; }
.wp-info-tag {
  font-size: 12px; color: #4d7cff;
  background: rgba(77,124,255,.12);
  border: 1px solid rgba(77,124,255,.3);
  border-radius: 6px; padding: 2px 8px;
}
.wp-info-time { font-size: 12px; color: #888; }

.wp-tools {
  display: flex; align-items: center; gap: 10px;
  margin: 12px 0 14px;
}
.wp-tool {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: none; color: #9a9aa4; cursor: pointer;
  font-size: 10.5px; position: relative; padding: 0;
}
.wp-tool i { font-size: 13px; width: 28px; height: 28px; line-height: 28px; text-align: center;
  border-radius: 50%; background: rgba(255,255,255,.05); transition: all .2s; }
.wp-tool:hover i { background: rgba(255,255,255,.12); color: #fff; }
/* 满意/不满意/收藏 激活态样式保持一致 */
.wp-tool.is-active { color: #4d7cff; }
.wp-tool.is-active i { background: rgba(77,124,255,.15); color: #4d7cff; }

/* ... 更多菜单：紧贴图标右下侧 */
.wp-more-wrap { position: relative; display: flex; flex-direction: column; align-items: center; }
.wp-more-menu {
  position: absolute; top: 38px; right: 0;
  background: #202026; border: 1px solid #34343e; border-radius: 10px;
  min-width: 124px; padding: 5px; display: none;
  box-shadow: 0 14px 36px rgba(0,0,0,.6); z-index: 30;
}
.wp-more-menu.wp-show { display: block; }
.wp-more-menu a {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; font-size: 11.5px; color: #cfcfd6; cursor: pointer;
  white-space: nowrap; border-radius: 7px;
}
.wp-more-menu a:hover { background: #2c2c34; color: #fff; }
.wp-more-menu a.wp-danger { color: #ff6b6b; }

.wp-section { margin-bottom: 14px; }
.wp-section-title {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12.5px; font-weight: 600; color: #e2e2e8; margin-bottom: 8px;
}
.wp-section-title .wp-copy-btn {
  font-size: 11px; color: #7c7c86; cursor: pointer; background: none; border: none;
}
.wp-section-title .wp-copy-btn:hover { color: #4d7cff; }

/* 创意描述固定高度，超出可滚动查看完整内容 */
.wp-prompt-box {
  font-size: 11.5px; line-height: 1.6; color: #c9c9d2;
  background: #17171b;
  border: 1px solid #2c2c33; border-radius: 10px;
  padding: 9px 11px;
  height: 140px; overflow-y: auto;
  word-break: break-all; scrollbar-width: thin;
}
.wp-prompt-box::-webkit-scrollbar { width: 5px; }
.wp-prompt-box::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 3px; }
.wp-meta-list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.wp-meta-list .wp-meta-row {
  display: flex; justify-content: space-between; font-size: 11.5px; color: #8a8a92;
}
.wp-meta-list .wp-meta-row span:last-child { color: #cfcfd6; max-width: 60%; text-align: right; }

/* 使用 / 编辑 按钮组：紧凑小按钮，图标文字同一行。
   列宽自适应（minmax 76px），文案变短后 4 字名称不再溢出/遮盖/撑出滚动条 */
.wp-actions-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px;
}
.wp-actions-grid.wp-two { grid-template-columns: repeat(2, 1fr); }
.wp-action-item {
  display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 4px;
  background: #17171b;
  border: 1px solid #2c2c33; border-radius: 8px;
  padding: 7px 6px; cursor: pointer; color: #cfcfd6;
  font-size: 11px; line-height: 1.2; transition: all .18s;
  white-space: nowrap; font-family: inherit; min-width: 0;
}
.wp-action-item span { overflow: hidden; text-overflow: ellipsis; }
.wp-action-item i { font-size: 11px; line-height: 1; color: #9a9aa4; }
.wp-action-item:hover { border-color: rgba(77,124,255,.55); color: #cfe0ff; background: #1c2536; }
.wp-action-item:hover i { color: #8ab4ff; }
.wp-action-item.wp-disabled { opacity: .55; cursor: not-allowed; }
.wp-action-item.wp-disabled:hover { border-color: #2a2a2a; color: #ccc; }
.wp-action-item.wp-disabled:hover i { color: #b8b8b8; }

/* 最右侧资产栏：与「生成」页右列视觉一致（68px 栏 / 50×50 缩略图 / 日期分组） */
.wp-rail {
  position: absolute; top: 0; bottom: 0; right: 0; width: 68px;
  background: #101012;
  border-left: 1px solid #1e1e22;
  overflow-y: auto; overflow-x: hidden; padding: 10px 6px 20px;
  scroll-behavior: smooth;
}
.wp-rail::-webkit-scrollbar { width: 5px; }
.wp-rail::-webkit-scrollbar-thumb { background: #2b2b31; border-radius: 3px; }
.wp-rail-date {
  font-size: 10px; color: #7a7a84; padding: 8px 0 5px;
  font-variant-numeric: tabular-nums; text-align: center;
}
.wp-rail-items { display: grid; grid-template-columns: 50px; gap: 6px; justify-content: center; }
.wp-rail-item {
  position: relative; width: 50px; height: 50px; flex-shrink: 0;
  border-radius: 7px; overflow: hidden; cursor: pointer;
  border: 2px solid transparent; box-sizing: border-box; background: #19191d;
  transition: border-color .15s, box-shadow .15s;
}
.wp-rail-item::after {
  content: ''; position: absolute; inset: 0; background: rgba(8,8,10,.46);
  transition: opacity .18s; pointer-events: none;
}
.wp-rail-item:hover::after { opacity: 0; }
.wp-rail-item:hover { border-color: rgba(255,255,255,.55); }
.wp-rail-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wp-rail-item .wp-rail-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; background: rgba(0,0,0,.25); font-size: 15px;
}
.wp-rail-item.wp-active {
  border-color: #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,.25), 0 4px 14px rgba(0,0,0,.5);
}
.wp-rail-item.wp-active::after { opacity: 0; }

/* 右侧浮窗提醒 */
#wp-toast {
  position: fixed; top: 76px; right: 24px; z-index: 100003;
  display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
.wp-toast-item {
  background: rgba(35,35,35,.96); border: 1px solid #333;
  border-left: 3px solid #4d7cff;
  color: #e2e2e8; font-size: 12px; border-radius: 8px;
  padding: 9px 16px; box-shadow: 0 10px 28px rgba(0,0,0,.5);
  animation: wpToastIn .25s ease;
}
.wp-toast-item.wp-error { border-left-color: #ff6b6b; }
@keyframes wpToastIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }

/* 子弹层（反馈 / 删除确认 / 发布器） */
.wp-submask {
  position: absolute; inset: 0; z-index: 50;
  background: rgba(0,0,0,.55); display: none;
  align-items: center; justify-content: center;
}
.wp-submask.wp-show { display: flex; }
.wp-submodal {
  width: 420px; background: #17171b; border: 1px solid #2c2c33;
  border-radius: 14px; padding: 22px;
}
.wp-submodal.wp-wide {
  width: 1020px; max-width: 94vw;
  height: min(88vh, 680px); max-height: 92vh;
  padding: 14px 22px 12px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.wp-submodal-title {
  flex-shrink: 0;
  font-size: 16px; font-weight: 600; color: #f0f0f0; margin-bottom: 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.wp-title-tabs { display: flex; align-items: center; gap: 14px; flex: 1; }
.wp-submodal-title .wp-close-x { cursor: pointer; color: #888; background: none; border: none; font-size: 18px; }
.wp-field { margin-bottom: 14px; }
.wp-field label { display: block; font-size: 13px; color: #bbb; margin-bottom: 6px; }
.wp-field input[type=text], .wp-field textarea, .wp-field select {
  width: 100%; background: #101014; border: 1px solid #2c2c33; border-radius: 8px;
  color: #eee; font-size: 13px; padding: 9px 12px; outline: none; box-sizing: border-box;
}
.wp-field input:focus, .wp-field textarea:focus, .wp-field select:focus { border-color: rgba(77,124,255,.5); }
.wp-field textarea { resize: vertical; min-height: 80px; }
.wp-field .wp-counter { float: right; font-size: 11px; color: #777; }
.wp-btn {
  border: none; border-radius: 9px; padding: 10px 22px;
  font-size: 14px; cursor: pointer;
}
.wp-btn-primary { background: #4d7cff; color: #fff; font-weight: 600; }
.wp-btn-primary:hover { background: #5f8bff; }
.wp-btn-ghost { background: rgba(255,255,255,.08); color: #ddd; }
.wp-btn-danger { background: rgba(255,107,107,.15); color: #ff6b6b; border: 1px solid rgba(255,107,107,.3); }
.wp-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }

/* ========== 发布器 ========== */
/* 左侧预览区比右侧表单区大；主体填满头尾之间的剩余空间 */
.wp-publisher {
  flex: 1 1 auto; min-height: 0;
  display: grid; grid-template-columns: 1.35fr 1fr; gap: 22px; align-items: stretch;
}
.wp-pub-left { min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.wp-pub-tabs { display: flex; gap: 10px; }
.wp-pub-tab {
  padding: 7px 20px; font-size: 14px; color: #8a8a92; cursor: pointer;
  border: 1px solid #2c2c33; border-radius: 8px; background: #17171b;
}
.wp-pub-tab.wp-active { color: #fff; background: #26262d; border-color: #3a3a46; font-weight: 600; }

/* 左侧：舞台（弹性占满剩余高度，媒体区为主）+ 模板 */
.wp-pub-stage {
  position: relative; flex: 1 1 auto; min-height: 240px;
  width: 100%; background: #000;
  border-radius: 12px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.wp-pub-stage img, .wp-pub-stage video { display: block; }
/* 默认模板：铺满舞台 */
.wp-frame-default { width: 100%; height: 100%; }
.wp-frame-default img, .wp-frame-default video { width: 100%; height: 100%; object-fit: cover; }
/* 竖屏模板：9:16 手机画框 */
.wp-frame-portrait {
  height: 100%; aspect-ratio: 9 / 16;
  background: #111; border-radius: 10px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 1px #2a2a2a;
}
.wp-frame-portrait img, .wp-frame-portrait video { width: 100%; height: 100%; object-fit: cover; }
/* 横屏模板：16:9 画框 */
.wp-frame-landscape {
  width: 100%; aspect-ratio: 16 / 9;
  background: #111; border-radius: 10px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 1px #2a2a2a;
}
.wp-frame-landscape img, .wp-frame-landscape video { width: 100%; height: 100%; object-fit: cover; }

.wp-pub-clear {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 36px; height: 36px; border-radius: 8px; border: none;
  background: rgba(30,30,30,.72); color: #ddd; font-size: 14px; cursor: pointer;
}
.wp-pub-clear:hover { background: rgba(255,107,107,.85); color: #fff; }

/* 空舞台：从历史创作选择 */
.wp-pub-empty { text-align: center; color: #888; font-size: 13px; padding: 20px; cursor: pointer; }
.wp-pub-empty i { font-size: 30px; display: block; margin-bottom: 10px; color: #666; }
.wp-pub-history {
  position: absolute; inset: 0; z-index: 2; background: #0f0f0f;
  overflow-y: auto; padding: 16px;
}
.wp-pub-history-title { font-size: 13px; color: #999; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; }
.wp-pub-history-title .wp-history-back { color: #4d7cff; cursor: pointer; }
.wp-history-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.wp-history-grid .wp-rail-item { width: 100%; height: auto; aspect-ratio: 1; margin: 0; }

/* 选择模板（固定高度，不参与压缩） */
.wp-tpl-head { margin: 10px 2px 8px; font-size: 13px; color: #eee; flex-shrink: 0; }
.wp-tpl-head b { font-weight: 600; margin-right: 10px; }
.wp-tpl-head span { font-size: 12px; color: #777; }
.wp-tpl-list { display: flex; gap: 10px; flex-shrink: 0; }
.wp-tpl-card {
  width: 92px; height: 102px; border-radius: 10px; cursor: pointer;
  background: #262626; border: 1px solid #333;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  color: #999; font-size: 12px; transition: all .15s; flex-shrink: 0;
}
.wp-tpl-card:hover { border-color: #4c4c4c; }
.wp-tpl-card.wp-active { border: 1px solid #4d7cff; background: rgba(77,124,255,.08); color: #4d7cff; }
.wp-tpl-mini { background: rgba(255,255,255,.08); border-radius: 4px; color: #bbb;
  display: flex; align-items: center; justify-content: center; }
.wp-tpl-card.wp-active .wp-tpl-mini { background: rgba(77,124,255,.25); color: #4d7cff; }
.wp-mini-default { width: 28px; height: 28px; border-radius: 50%; font-size: 11px; }
.wp-mini-portrait { width: 21px; height: 35px; font-size: 10px; }
.wp-mini-landscape { width: 37px; height: 22px; font-size: 10px; }
.wp-tpl-mini-lines { width: 70%; }
.wp-tpl-mini-lines i { display: block; height: 3px; border-radius: 2px; background: rgba(255,255,255,.25); margin: 4px auto; }
.wp-tpl-card.wp-active .wp-tpl-mini-lines i { background: rgba(77,124,255,.55); }

/* 右侧：作品描述 + 创作详情（超矮屏时仅右栏内部滚动，整页不滚动） */
.wp-pub-right { min-width: 0; min-height: 0; overflow-y: auto; padding-right: 4px; }
.wp-pub-right::-webkit-scrollbar { width: 4px; }
.wp-pub-right::-webkit-scrollbar-thumb { background: #333; border-radius: 2px; }
.wp-block-label { font-size: 14px; font-weight: 600; color: #eee; margin: 0 0 8px; }
.wp-desc-card {
  background: #17171b; border: 1px solid #2c2c33; border-radius: 12px; padding: 2px 14px 8px;
}
.wp-desc-card .wp-line-input {
  flex: 1; min-width: 0;
  background: transparent; border: none; outline: none;
  color: #eee; font-size: 13px; padding: 9px 0; box-sizing: border-box;
}
.wp-title-row { display: flex; align-items: center; gap: 8px; }
.wp-desc-divider { height: 1px; background: #2c2c2c; }
.wp-desc-card textarea {
  width: 100%; background: transparent; border: none; outline: none; resize: none;
  color: #eee; font-size: 13px; padding: 8px 0; min-height: 60px; box-sizing: border-box;
  font-family: inherit;
}
.wp-desc-foot { display: flex; align-items: center; justify-content: space-between; }
.wp-add-activity {
  display: inline-flex; align-items: center; gap: 5px;
  background: #26262d; border: none; border-radius: 8px; color: #cfcfd6;
  font-size: 12px; padding: 5px 12px; cursor: pointer;
}
.wp-add-activity:hover { color: #fff; }
.wp-desc-count { font-size: 12px; color: #777; }
.wp-title-count { font-size: 12px; color: #777; float: right; padding-top: 11px; }

.wp-pub-detail {
  margin-top: 12px; font-size: 13px; color: #ccc; line-height: 1.7;
}
.wp-pub-detail .wp-pub-detail-type { font-weight: 600; color: #eee; margin-bottom: 2px; }
.wp-pub-detail .wp-prompt-box {
  height: auto; max-height: 78px; overflow: hidden; margin: 4px 0 6px;
  padding: 6px 10px; font-size: 12px; line-height: 1.6;
  background: transparent; border: none; border-radius: 0;
}
.wp-pub-detail .wp-pub-spec { font-size: 12px; color: #888; }

/* 底部栏：固定不压缩 */
.wp-pub-footer {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 10px; padding-top: 10px;
}
.wp-pub-tip { font-size: 12px; color: #888; display: flex; align-items: center; gap: 7px; }
.wp-pub-tip i { color: #4d7cff; }
.wp-pub-footer-actions { display: flex; gap: 12px; }

/* 工作区卡片收藏高亮 */
.favorite-btn.is-fav { color: #4d7cff !important; }
.favorite-btn.is-fav i { color: #4d7cff !important; }

/* ========================================
 * 移动端适配（max-width: 768px）
 * ======================================== */
@media (max-width: 768px) {
  /* 顶栏：占满全宽（右侧栏/资产栏已隐藏） */
  .wp-topbar {
    right: 0 !important;
    height: 48px;
    padding: 0 10px;
    gap: 8px;
  }
  .wp-back-btn { width: 32px; height: 32px; font-size: 13px; }
  .wp-title-input { font-size: 13px; padding: 4px 8px; }
  .wp-topbar-tip { display: none; }

  /* 主区域：顶部媒体区，占全宽、限高，不被信息栏遮挡 */
  .wp-main {
    right: 0 !important;
    bottom: auto !important;
    height: 44vh;
    height: 44dvh;
    padding: 52px 10px 10px;
  }
  .wp-main-media video {
    width: 100%;
    max-height: calc(44vh - 62px);
    max-height: calc(44dvh - 62px);
  }
  .wp-main-media img {
    max-width: 100%;
    max-height: calc(44vh - 62px);
    max-height: calc(44dvh - 62px);
    object-fit: contain;
  }

  /* 右侧信息栏：移到媒体区下方，占剩余高度，全宽可滚动 */
  .wp-info {
    right: 0 !important;
    width: 100% !important;
    top: calc(48px + 44vh) !important;
    top: calc(48px + 44dvh) !important;
    bottom: 0;
    padding: 12px 14px 24px;
    border-left: none;
    border-top: 1px solid #262626;
    overflow-y: auto;
  }

  /* 最右资产栏：隐藏 */
  .wp-rail { display: none !important; }

  /* 发布器子弹层：占满全宽 */
  .wp-submodal.wp-wide {
    width: 100% !important;
    max-width: 100vw;
    max-width: 100dvw;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
    border: none;
    padding: 10px 14px 8px;
  }

  /* 发布器内部：改为单列纵向堆叠 */
  .wp-publisher {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 14px;
  }
  .wp-pub-stage {
    min-height: 200px;
    height: 30vh;
    height: 30dvh;
    flex: none;
  }
  .wp-history-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}