.page {

  min-height: 100vh;

  background: linear-gradient(180deg, #080f18 0%, #0b1220 32%, #0b1220 100%);

  color: #fff;

  box-sizing: border-box;

  padding-bottom: calc(180rpx + env(safe-area-inset-bottom));

}



.nav-bar {

  position: fixed;

  left: 0;

  right: 0;

  top: 0;

  z-index: 10;

  display: flex;

  align-items: center;

  justify-content: space-between;

  height: 44px;

  padding: 0 24rpx;

  background: rgba(5, 11, 20, 0.92);

  border-bottom: 1rpx solid rgba(94, 234, 212, 0.08);

}

.nav-back {

  width: 64rpx;

  flex-shrink: 0;

  display: flex;

  align-items: center;

}

.nav-placeholder {

  width: 64rpx;

  flex-shrink: 0;

}

.nav-title {

  flex: 1;

  text-align: center;

  font-size: 32rpx;

  font-weight: 700;

}



/* ========== 主编曲面 ========== */

.composer-sheet {

  margin: 16rpx 24rpx 24rpx;

  border-radius: 28rpx;

  overflow: hidden;

  background: rgba(15, 23, 42, 0.92);

  border: 1rpx solid rgba(148, 163, 184, 0.22);

  box-shadow: 0 24rpx 48rpx rgba(0, 0, 0, 0.35);

}



.sheet-section {

  padding: 28rpx 28rpx 26rpx;

}



.sheet-section--body {

  padding-top: 24rpx;

  padding-bottom: 28rpx;

}



.sheet-section--ai {

  padding-top: 24rpx;

  padding-bottom: 30rpx;

  background: linear-gradient(

    180deg,

    rgba(8, 47, 73, 0.22) 0%,

    rgba(15, 23, 42, 0.05) 100%

  );

}



.section-divider {

  height: 1rpx;

  margin: 0 28rpx;

  background: rgba(148, 163, 184, 0.14);

}



.section-head {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16rpx;

  margin-bottom: 12rpx;

}



.section-title-text {

  font-size: 30rpx;

  font-weight: 700;

  color: #f1f5f9;

  letter-spacing: 1rpx;

}



.section-badge {

  font-size: 22rpx;

  font-weight: 600;

  color: #22d3ee;

  padding: 6rpx 16rpx;

  border-radius: 999rpx;

  background: rgba(34, 211, 238, 0.12);

  border: 1rpx solid rgba(34, 211, 238, 0.28);

}



.section-meta {

  font-size: 22rpx;

  color: #94a3b8;

}



.section-tag-ai {

  font-size: 22rpx;

  color: #a5f3fc;

  padding: 4rpx 14rpx;

  border-radius: 999rpx;

  border: 1rpx solid rgba(94, 234, 212, 0.35);

  background: rgba(34, 211, 238, 0.08);

}



.section-desc {

  display: block;

  font-size: 22rpx;

  color: #94a3b8;

  line-height: 1.55;

  margin-bottom: 16rpx;

}



.hint-micro {

  display: block;

  margin-top: 14rpx;

  font-size: 20rpx;

  color: #64748b;

}



.inline-toolbar {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 12rpx;

  margin-bottom: 14rpx;

}



.toolbar-label {

  font-size: 22rpx;

  color: #64748b;

  margin-right: 4rpx;

}



.tool-btn {

  padding: 12rpx 22rpx;

  border-radius: 999rpx;

  font-size: 24rpx;

  font-weight: 600;

  color: #67e8f9;

  border: 1rpx solid rgba(34, 211, 238, 0.4);

  background: rgba(8, 47, 73, 0.5);

}



.tool-btn-hover {

  opacity: 0.82;

}



.label-ai {

  display: block;

  font-size: 24rpx;

  color: #cbd5e1;

  margin-bottom: 10rpx;

  margin-top: 4rpx;

}



.textarea-wrap,

.textarea-wrap-ai {

  background: rgba(2, 6, 23, 0.78);

  border-radius: 18rpx;

  padding: 18rpx 20rpx;

  border: 1rpx solid rgba(148, 163, 184, 0.12);

}



.textarea-wrap-ai {

  margin-bottom: 16rpx;

}



.moment-textarea-wrap {

  padding: 20rpx 22rpx;

}



.textarea {

  width: 100%;

  min-height: 320rpx;

  color: #fff;

  font-size: 30rpx;

  line-height: 1.65;

  background: transparent;

}



.moment-textarea {

  min-height: 280rpx;

}



.prompt-textarea-inner {

  min-height: 160rpx;

  width: 100%;

  font-size: 28rpx;

  line-height: 1.55;

  color: #f1f5f9;

  background: transparent;

}



.generate-btn {

  margin-top: 8rpx;

  height: 88rpx;

  border-radius: 18rpx;

  border: 1rpx solid rgba(34, 211, 238, 0.5);

  color: #ecfeff;

  font-size: 28rpx;

  font-weight: 700;

  display: flex;

  align-items: center;

  justify-content: center;

  background: linear-gradient(135deg, rgba(8, 47, 73, 0.85), rgba(15, 118, 110, 0.35));

}



.generate-btn-loading {

  opacity: 0.65;

  pointer-events: none;

}



.bottom-publish-bar {

  position: fixed;

  left: 0;

  right: 0;

  bottom: 0;

  z-index: 50;

  padding: 20rpx 28rpx;

  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));

  background: rgba(11, 18, 32, 0.96);

  border-top: 1rpx solid rgba(94, 234, 212, 0.12);

}

.bottom-publish-btn {

  height: 92rpx;

  border-radius: 18rpx;

  background: linear-gradient(135deg, #22d3ee, #14b8a6);

  color: #032b35;

  font-size: 32rpx;

  font-weight: 700;

  display: flex;

  align-items: center;

  justify-content: center;

}

.bottom-publish-btn-disabled {

  opacity: 0.65;

  pointer-events: none;

}



/* 配图宫格 */

.moment-photo-grid {

  display: flex;

  flex-wrap: wrap;

  gap: 16rpx;

}

.moment-photo-cell {

  position: relative;

  width: calc((100% - 32rpx) / 3);

  padding-bottom: calc((100% - 32rpx) / 3);

  height: 0;

  border-radius: 14rpx;

  overflow: hidden;

  background: rgba(2, 6, 23, 0.65);

  border: 1rpx solid rgba(148, 163, 184, 0.15);

  box-sizing: border-box;

}

.moment-photo-img {

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  display: block;

}

.moment-photo-mask {

  position: absolute;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 22rpx;

  color: #94a3b8;

  background: rgba(15, 23, 42, 0.72);

  z-index: 1;

}

.moment-photo-remove {

  position: absolute;

  right: 6rpx;

  top: 4rpx;

  width: 44rpx;

  height: 44rpx;

  line-height: 40rpx;

  text-align: center;

  font-size: 32rpx;

  font-weight: 700;

  color: #fff;

  background: rgba(0, 0, 0, 0.45);

  border-radius: 999rpx;

  z-index: 2;

}

.moment-photo-add {

  border: 2rpx dashed rgba(148, 163, 184, 0.35);

  background: rgba(15, 23, 42, 0.35);

  display: flex;

  align-items: center;

  justify-content: center;

}

.moment-photo-add-plus {

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -52%);

  font-size: 64rpx;

  font-weight: 300;

  color: rgba(148, 163, 184, 0.85);

  line-height: 1;

}



/* AI 底部弹层 */

.ai-modal-root {

  position: fixed;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

  z-index: 600;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

}

.ai-modal-mask {

  position: absolute;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

  background: rgba(0, 0, 0, 0.58);

}

.ai-modal-panel {

  position: relative;

  z-index: 1;

  border-radius: 28rpx 28rpx 0 0;

  padding: 28rpx 28rpx 32rpx;

  padding-bottom: calc(32rpx + env(safe-area-inset-bottom));

  max-height: 78vh;

  overflow-y: auto;

  background: rgba(15, 23, 42, 0.98);

  border: 1rpx solid rgba(148, 163, 184, 0.22);

  border-bottom: none;

  box-shadow: 0 -12rpx 48rpx rgba(0, 0, 0, 0.45);

}

.ai-modal-head {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 12rpx;

}

.ai-modal-title {

  font-size: 32rpx;

  font-weight: 700;

  color: #f1f5f9;

}

.ai-modal-close {

  font-size: 26rpx;

  color: #67e8f9;

  padding: 12rpx 16rpx;

}

.ai-modal-desc {

  display: block;

  font-size: 22rpx;

  color: #94a3b8;

  line-height: 1.55;

  margin-bottom: 16rpx;

}



.audit-mode-mask {

  position: fixed;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

  z-index: 10000;

  display: flex;

  align-items: center;

  justify-content: center;

  background: rgba(11, 18, 32, 0.94);

}

.audit-mode-text {

  font-size: 36rpx;

  font-weight: 600;

  color: rgba(255, 255, 255, 0.88);

  letter-spacing: 4rpx;

}