:root{
  --bs-primary: #111;
  --bs-primary-rgb: 17,17,17;
  --bs-dark: #111;
  --bs-dark-rgb: 17,17,17;
  --bs-body-color: #f2f2f2;
  --bs-body-bg: #000;
  --bs-border-color: #2a2a2a;
  --bs-link-color: #fff;
  --bs-link-hover-color: #cfcfcf;
  --topbar-h: 0px;
}

body { min-height: 100vh; }
body.bg-light { background-color: var(--bs-body-bg) !important; }
.bg-light { background-color: var(--bs-body-bg) !important; }
body { padding-top: var(--topbar-h, 56px); }

html[data-page-variant="desktop"] .ai-top-actions{
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 10060;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

html[data-page-variant="desktop"] .ai-top-actions #navUser{
  display: none;
}

html[data-page-variant="desktop"] .ai-top-actions #navUser .text-dark{
  color: rgba(255,255,255,.92) !important;
}

.ai-task-pill{
  --task-pill-bg: rgba(70,70,70,.82);
  --task-pill-progress-bg: rgba(255,255,255,.12);
  --task-progress: 0%;
  border: 0 !important;
  display: inline-flex;
  align-items: center;
  min-height: calc(1.5em + .5rem + 2px);
  background:
    linear-gradient(90deg,
      var(--task-pill-progress-bg) 0,
      var(--task-pill-progress-bg) var(--task-progress),
      transparent var(--task-progress),
      transparent 100%
    ),
    var(--task-pill-bg) !important;
  background-repeat: no-repeat;
  color: rgba(255,255,255,.92) !important;
  font-weight: 600;
  padding-left: 10px;
  padding-right: 10px;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
  transition: filter .2s ease, transform .2s ease, box-shadow .2s ease;
}

.ai-task-pill:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.ai-task-pill.is-queued,
.ai-task-pill.is-generating,
.ai-task-pill.is-processing{
  color: #fff !important;
}

.ai-task-pill:focus,
.ai-task-pill:active{
  box-shadow: 0 0 0 2px rgba(255,255,255,.14) !important;
}

.ai-task-pill.is-queued{
  --task-pill-bg: rgba(150,109,18,.92);
  --task-pill-progress-bg: rgba(255,225,153,.18);
}

.ai-task-pill.is-generating,
.ai-task-pill.is-processing{
  --task-pill-bg: rgba(184,104,32,.94);
  --task-pill-progress-bg: rgba(255,213,163,.38);
}

.ai-task-pill.is-success{
  --task-pill-bg: rgba(23,128,81,.92);
  --task-pill-progress-bg: rgba(160,233,198,.18);
}

.ai-task-pill.is-failed{
  --task-pill-bg: rgba(188,69,88,.92);
  --task-pill-progress-bg: rgba(255,187,198,.18);
}

.ai-task-pill.is-empty{
  --task-pill-bg: rgba(84,84,84,.76);
  --task-pill-progress-bg: rgba(255,255,255,.1);
  opacity: .75;
}

.ai-side-brand{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 18px 0 12px;
  margin: -16px -16px 0;
}

.ai-side-brand-logo{
  display: inline-flex;
  align-items: center;
  width: 90%;
  justify-content: center;
}

.ai-side-brand-logo-img{
  width: 240px;
  max-width: 100%;
  height: auto;
  display: block;
}

.ai-side-brand-name{
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: 18px;
  color: rgba(255,255,255,.92);
  line-height: 1.2;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-side-brand-popup{
  position: absolute;
  top: calc(100% + 6px);
  left: 18px;
  width: 280px;
  border-radius: 15px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  z-index: 10050;
  border: 1px solid #333;
  background-color: #111;
  color: #fff;
  padding: 12px;
}

.btn-primary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info,
.btn-dark{
  --bs-btn-color: #fff;
  --bs-btn-bg: #111;
  --bs-btn-border-color: #111;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #000;
  --bs-btn-hover-border-color: #000;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #000;
  --bs-btn-active-border-color: #000;
  --bs-btn-focus-shadow-rgb: 0,0,0;
}

.btn-outline-primary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info,
.btn-outline-dark,
.btn-outline-light{
  --bs-btn-color: #fff;
  --bs-btn-border-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #111;
  --bs-btn-hover-border-color: #111;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #000;
  --bs-btn-active-border-color: #000;
  --bs-btn-focus-shadow-rgb: 0,0,0;
}

.btn-secondary,
.btn-outline-secondary{
  --bs-btn-color: #fff;
  --bs-btn-border-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #111;
  --bs-btn-hover-border-color: #111;
  --bs-btn-focus-shadow-rgb: 0,0,0;
}

.form-control:focus,
.form-select:focus{
  border-color: #111;
  box-shadow: 0 0 0 .25rem rgba(0,0,0,.15);
}

.list-group-item.active{
  background-color: #111;
  border-color: #111;
}

.text-success,
.text-danger,
.text-warning,
.text-info{
  color: #111 !important;
}

.alert-success,
.alert-danger,
.alert-warning,
.alert-info{
  color: #111;
  background-color: #f0f0f0;
  border-color: var(--bs-border-color);
}

#categoryList .list-group-item { cursor: pointer; }
.task-card { cursor: pointer; }
.task-thumb { width: 100%; height: 140px; object-fit: cover; background: #111; }
#logoPopup { border-radius: 15px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); z-index: 9999; width: 280px; border: 1px solid #333; background-color: #111 !important; color: #fff; }
#logoPopup .list-group-item { cursor: pointer; }
#logoPopup .list-group-item:hover { background-color: rgba(255,255,255,.08); }
#navUser { cursor: pointer; user-select: none; }

.ai-history-btn{
  background-color: #1c2020;
  color: #fff;
  border: 1px solid #2a2a2a;
}

.ai-history-btn:hover,
.ai-history-btn:focus{
  background-color: #242a2a;
  color: #fff;
  border-color: #3a3a3a;
}

.ai-drawer-mask{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.42);
  z-index: 10030;
}

.ai-history-drawer{
  position: fixed;
  top: var(--topbar-h, 56px);
  right: 0;
  bottom: 0;
  width: 30vw;
  background: #1c2020;
  border-left: 1px solid #2a2a2a;
  z-index: 10040;
  transform: translateX(100%);
  transition: transform .22s ease;
  display: none;
  color: rgba(255,255,255,.92);
}

.ai-history-drawer.open{
  transform: translateX(0);
}

.ai-history-drawer-head{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 14px 14px;
  border-bottom: 1px solid #2a2a2a;
}

.ai-history-drawer-title{
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .2px;
}

#btnCloseHistoryDrawer{
  filter: invert(1) grayscale(100%);
}

.ai-history-drawer-body{
  height: 100%;
  overflow: auto;
  padding: 12px 14px 18px;
}

.ai-history-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ai-history-item{
  width: 100%;
  border: 0;
  background: rgba(255,255,255,.04);
  border-radius: 12px;
  padding: 10px;
  text-align: left;
  color: rgba(255,255,255,.92);
  cursor: pointer;
}

.ai-history-notice{
  margin-bottom: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  background: rgba(217,54,62,.78);
  color: #fff;
  font-size: 12px;
  line-height: 1.45;
}

.ai-history-item:hover{
  background: rgba(255,255,255,.07);
}

.ai-history-item-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.ai-history-time{
  font-size: 12px;
  color: rgba(255,255,255,.70);
}

.ai-history-cost{
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,.90);
}

.ai-history-thumb{
  width: 100%;
  height: 180px;
  border-radius: 10px;
  overflow: hidden;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-history-thumb img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.ai-history-ops{
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.ai-history-download{
  border: 0;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  font-size: 13px;
}

.ai-history-download:hover{
  background: rgba(255,255,255,.14);
}

.ai-history-empty{
  border: 1px dashed rgba(255,255,255,.18);
  border-radius: 12px;
  padding: 16px 12px;
  text-align: center;
  color: rgba(255,255,255,.68);
  font-size: 13px;
}

#navCategories{
  display: none !important;
}

/* 登录注册按钮样式 */
#btnLoginNav {
  background-color: #fff;
  color: #000;
  border: 1px solid #fff;
}

#btnLoginNav:hover,
#btnLoginNav:focus {
  background-color: #eaeaea;
  color: #000;
  border-color: #eaeaea;
}

#btnRegisterNav {
  background-color: transparent;
  color: #fff;
  border: 1px solid #fff;
}

/* 浮动窗口样式 */
#loginModal, #registerModal, #forgotPwdModal, #creditLogModal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

#loginModal > div, #registerModal > div, #forgotPwdModal > div, #creditLogModal > div {
  background-color: #111 !important;
  border: 1px solid #333;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  width: 100%;
  max-width: 400px;
  padding: 20px;
  position: relative;
  color: #fff;
}

.ai-recharge-modal{
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.ai-recharge-modal-card{
  position: relative;
  width: calc(100% - 32px);
  max-width: 380px;
  background: #fff;
  border-radius: 16px;
  padding: 28px 24px 24px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

.ai-recharge-close{
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 4px;
}

.ai-recharge-content{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
}

.ai-recharge-qrcode{
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  border-radius: 12px;
}

.ai-recharge-text{
  color: #111;
  font-size: 16px;
  line-height: 1.6;
}

#loginModal .btn-primary,
#registerModal .btn-primary,
#forgotPwdModal .btn-primary,
#creditLogModal .btn-primary,
#actionFloat .btn-primary{
  --bs-btn-color: #000;
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #fff;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #eaeaea;
  --bs-btn-hover-border-color: #eaeaea;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #d9d9d9;
  --bs-btn-active-border-color: #d9d9d9;
  --bs-btn-focus-shadow-rgb: 255,255,255;
}

#loginModal .btn-outline-primary,
#registerModal .btn-outline-primary,
#forgotPwdModal .btn-outline-primary,
#creditLogModal .btn-outline-primary{
  --bs-btn-color: #000;
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #fff;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #eaeaea;
  --bs-btn-hover-border-color: #eaeaea;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #d9d9d9;
  --bs-btn-active-border-color: #d9d9d9;
  --bs-btn-focus-shadow-rgb: 255,255,255;
}

/* 响应式调整 */
@media (min-width: 992px) {
  .col-lg-30 { flex: 0 0 auto; width: 30%; }
  .col-lg-70 { flex: 0 0 auto; width: 70%; }
}

/* 错误提示居中样式 */
.alert-center {
  border-radius: 8px 8px 0 0;
  padding: 10px 15px;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  font-size: 13px;
  margin: 0 auto;
}

.alert-danger-center {
  background-color: transparent;
  color: #dc3545;
  position: relative;
  z-index: 10;
  border: none;
  text-align: center;
}

/* 弹窗内提示容器 */
#loginAlertBox, #registerAlertBox, #forgotAlertBox {
  position: relative;
  min-height: 20px;
}

/* 弹窗内标题栏 */
#loginModal .d-flex, #registerModal .d-flex, #forgotPwdModal .d-flex {
  padding: 0 5px;
  margin: 0 -5px 8px -5px;
  justify-content: center;
}

#tagBox .btn-outline-dark{
  --bs-btn-color: #fff;
  --bs-btn-border-color: #333;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgba(255,255,255,.08);
  --bs-btn-hover-border-color: #555;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgba(255,255,255,.12);
  --bs-btn-active-border-color: #666;
  background-color: transparent;
}

#tagBox .btn-light{
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #fff;
  --bs-btn-hover-bg: #f3f3f3;
  --bs-btn-hover-border-color: #f3f3f3;
  --bs-btn-active-bg: #eaeaea;
  --bs-btn-active-border-color: #eaeaea;
  color: #000 !important;
}

#tagBox .btn-light:focus-visible{
  box-shadow: 0 0 0 .2rem rgba(255,255,255,.25);
}

.ai-upload-btn{
  width: 100%;
  padding: 50px;
  border-radius: 14px;
  background: rgba(255,255,255,.10);
  border: 0;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.ai-upload-btn:hover{
  background: rgba(255,255,255,.14);
  color: #fff;
}

.ai-upload-btn:focus-visible{
  box-shadow: 0 0 0 .2rem rgba(255,255,255,.18);
}

.ai-upload-btn-icon{
  font-size: 26px;
  line-height: 1;
}

.ai-upload-slots{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.ai-upload-slot{
  width: 100%;
  max-width: 360px;
}

.ai-upload-slot-text{
  text-align: center;
}

.ai-upload-slot-name{
  font-weight: 400;
  line-height: 1.2;
}

.ai-upload-slot-desc{
  margin-top: 10px;
}

#tagBox .ai-tag-icon{
  width: 60px;
  height: 60px;
  object-fit: contain;
  border-radius: 4px;
  background: rgba(255,255,255,.06);
}

#tagBox .ai-tag-item{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

#tagBox .ai-tag-item.has-icon{
  width: 23%;
}

@media (min-width: 992px) {
  #tagBox .ai-tag-item.has-icon{
    width: 10%;
  }
}

#tagBox .ai-tag-item.has-icon .btn{
  width: 100%;
  min-height: 95px;
  white-space: normal;
  line-height: 1.2;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 2px;
  text-align: center;
}

#tagBox .ai-tag-item.has-icon .ai-tag-icon{
  width: 45px;
  height: 45px;
}

#tagBox .ai-tag-text{
  display: block;
}

#btnGenerate {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #000 !important;
  border-color: #000 !important;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 16px;
}

#btnGenerate:disabled{
  background-color: #000 !important;
  border-color: #000 !important;
  color: #bdbdbd !important;
  opacity: 1 !important;
  cursor: not-allowed;
}

#costHint{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 登录后主布局：左侧导航 + 内容区 */
.ai-layout{
  display: flex;
  gap: 0;
  min-height: calc(100vh - var(--topbar-h, 56px));
  padding-left: 280px;
}

.ai-sidebar{
  flex: 0 0 280px;
  width: 280px;
  background: #1c2020;
  border-right: 1px solid #2a2a2a;
  padding: 16px;
  position: fixed;
  top: var(--topbar-h, 56px);
  left: 0;
  bottom: 0;
  height: calc(100vh - var(--topbar-h, 56px));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 9990;
}

.ai-side-content{
  flex: 1 1 auto;
  overflow: auto;
  padding-top: 28px;
  padding-right: 4px;
}

.ai-side-footer{
  flex: 0 0 auto;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #2a2a2a;
  position: relative;
}

.ai-side-user{
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: rgba(255,255,255,.78);
  line-height: 1.3;
}

.ai-side-user-balance-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: rgba(255,255,255,.88);
  padding-left: 20px;
  padding-right: 10px;
  margin-bottom: 10px;
}

#sideUserInfo > .ai-side-user-balance-row{
  padding-left: 30px;
  padding-right: 30px;
}

.ai-side-balance-left{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.ai-side-balance-text{
  display: inline-flex;
  align-items: baseline;
}

.ai-side-balance-left i{
  font-size: 16px;
}

.ai-side-balance-num{
  font-size: 16px;
  font-weight: 400;
  letter-spacing: .2px;
}

.ai-side-balance-delta{
  color: rgba(255,255,255,.70);
  font-weight: 400;
  font-size: 16px;
}

.ai-side-balance-delta-blink{
  animation: navBalanceBlink 0.8s steps(2, end) infinite;
}

.ai-side-recharge-btn{
  border: 1px solid rgba(255,255,255,.20);
  background: #fff;
  color: #111;
  border-radius: 9999px;
  padding: 6px 14px;
  font-size: 12px;
  line-height: 1;
}

.ai-side-recharge-btn:hover{
  background: rgba(255,255,255,.88);
}

.ai-side-user-account-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 9999px;
  padding: 8px 10px 8px 16px;
  margin-left: 16px;
  margin-right: 6px;
  color: rgba(255,255,255,.90);
  background: rgba(0,0,0,.18);
}

#sideUserInfo > .ai-side-user-account-row{
  padding-left: 22px;
  padding-right: 8px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.ai-side-user-account-text{
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.ai-side-user-account-text .ai-side-user-phone{
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,.95);
}

.ai-side-user-account-text .ai-side-user-phone{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-side-user-menu-btn{
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border: 0;
  border-radius: 9999px;
  background: rgba(255,255,255,.14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0;
}

#sideUserMenuBtn{
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

.ai-side-user-menu-btn:hover{
  background: rgba(255,255,255,.20);
}

.ai-side-user-menu-btn .dot{
  width: 4px;
  height: 4px;
  border-radius: 9999px;
  background: rgba(255,255,255,.92);
  display: inline-block;
}

.ai-side-user-menu{
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  min-width: 160px;
  background: #111;
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  padding: 6px;
  z-index: 2;
}

.ai-side-user-menu-item{
  width: 100%;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.92);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px;
  border-radius: 10px;
  font-size: 13px;
  text-align: left;
}

.ai-side-user-menu-item:hover{
  background: rgba(255,255,255,.08);
}

.ai-side-block + .ai-side-block{
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #2a2a2a;
}

.ai-side-title{
  font-size: 13px;
  color: #bdbdbd;
  margin-bottom: 10px;
}

.ai-side-cats{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ai-side-cat{
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: #f2f2f2;
  padding: 10px 10px;
  border-radius: 10px;
  text-align: left;
  font-size: 14px;
}

.ai-cat-icon{
  width: 18px;
  height: 18px;
  border-radius: 4px;
  object-fit: cover;
  flex: 0 0 auto;
}

.ai-side-cat-name{
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-cat-external-mark{
  font-size: 12px;
  opacity: .75;
}

.ai-side-cat .ai-cat-external-mark{
  margin-left: auto;
}

.ai-side-cat:hover{
  background: rgba(255,255,255,.06);
}

.ai-side-cat.active{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.12);
}

#userPrompt{
  background-color: #111 !important;
  border: 1px solid #333;
  color: #fff;
  resize: vertical;
}

#userPrompt::placeholder{
  color: #888;
  opacity: 1;
}

.ai-main{
  flex: 1 1 auto;
  padding: 24px;
  display: flex;
  justify-content: center;
}

.ai-main-inner{
  width: 100%;
  max-width: 980px;
}

.ai-main-actions{
  border: 1px solid #2a2a2a;
  background: rgba(255,255,255,.02);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 16px;
}

.ai-main-block + .ai-main-block{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #2a2a2a;
}

.ai-main-title{
  font-size: 13px;
  color: #bdbdbd;
  margin-bottom: 10px;
}

#uploadArea{
  width: 100%;
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 24px 0;
}

/* 导航分类样式 */
.nav-category-item {
  color: #fff;
  cursor: pointer;
  padding: 4px 8px;
  margin: 0 4px;
  font-size: 14px;
  transition: all 0.2s ease;
}

.nav-category-item-inner{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nav-category-icon{
  width: 14px;
  height: 14px;
  border-radius: 3px;
  object-fit: cover;
  flex: 0 0 auto;
}

.nav-category-item:hover {
  opacity: 0.7;
}

.nav-category-item.active {
  font-size: 18px;
  font-weight: bold;
}

#loginModal h5, #registerModal h5, #forgotPwdModal h5 {
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  width: 100%;
}

#loginModal .btn-close, #registerModal .btn-close, #forgotPwdModal .btn-close {
  position: absolute;
  top: 15px;
  right: 15px;
  padding: 2px;
  margin: 0;
  filter: invert(1) grayscale(100%);
}

.ai-preview-container{
  max-width: 260px;
  margin-left: auto;
  margin-right: auto;
}

#costHint{
  display: none;
}

#navUser .nav-balance-delta{
  margin-left: 4px;
  color: #fff;
  font-weight: 600;
}

#navUser .nav-balance-num{
  font-weight: 700;
}

#navUser .nav-balance-delta-blink{
  animation: navBalanceBlink 0.8s steps(2, end) infinite;
}

@keyframes navBalanceBlink {
  50% { opacity: 0; }
}

#resultOps{
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
  border-radius: 10px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  justify-content: center;
  margin: 0 auto 10px;
  width: 100%;
  max-width: 520px;
}

.ai-preview-ops{
  display: none;
  gap: 8px;
  margin-top: 10px;
  justify-content: center;
}

#resultOps .result-op-btn,
.ai-preview-ops .result-op-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: #fff;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1;
}

.ai-result-panel{
  width: 100%;
  max-width: 980px;
  margin: 0 auto 12px;
}

#resultModal > div{
  width: 100%;
  padding-top: 10px;
  box-sizing: border-box;
}

#resultHint{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.ai-result-hint-text{
  text-align: center;
}

.ai-result-recharge-btn{
  min-width: 92px;
}

.ai-result-modal-inner{
  text-align: center;
  width: 100%;
}

.ai-result-stage{
  position: relative;
  width: 100%;
  max-width: min(100%, 980px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-result-stage #resultHint{
  position: absolute;
  inset: 0;
  padding: 0 12px;
}

.ai-result-topbar{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
}

.ai-result-topbar #resultOps{
  margin: 0 auto;
}

.ai-result-loading{
  display: none;
  align-items: center;
  justify-content: center;
}

.ai-result-loading-pill{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #000;
  color: #fff;
  font-size: 13px;
  line-height: 1.3;
  max-width: 100%;
}

.ai-result-loading-pill > div{
  min-width: 0;
  white-space: normal;
  text-align: center;
}

.ai-result-loading-pill .ai-loading-title{
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
}

.ai-result-loading-pill .ai-loading-subtitle{
  min-height: 36px;
  color: #9a9a9a;
  width: 100%;
  max-width: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1.3;
  white-space: normal;
  text-align: center;
}

.ai-result-loading-img-wrap{
  position: relative;
  --ai-result-loading-size: 128px;
  --ai-result-loading-ring-stroke: 5px;
  width: var(--ai-result-loading-size);
  height: var(--ai-result-loading-size);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-result-loading-pill img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: var(--ai-result-loading-ring-stroke) solid #A85A00;
  box-sizing: border-box;
}

.ai-result-progress-ring{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}

.ai-result-progress-bg{
  fill: none;
  stroke: rgba(255, 223, 128, 0.35);
  stroke-width: var(--ai-result-loading-ring-stroke);
}

.ai-result-progress-bar{
  fill: none;
  stroke: #FFDF80;
  stroke-width: var(--ai-result-loading-ring-stroke);
  stroke-linecap: butt;
  stroke-dasharray: 386.42;
  stroke-dashoffset: 386.42;
  transition: stroke-dashoffset 0.3s ease;
  filter: drop-shadow(0 0 4px rgba(255, 223, 128, 0.7));
}

.ai-img-viewer{
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.78);
}

.ai-img-viewer-stage{
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.ai-img-viewer-loading{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  min-width: 140px;
  padding: 12px 18px;
  border-radius: 12px;
  background: rgba(0,0,0,.6);
  color: #fff;
  text-align: center;
  font-size: 14px;
  line-height: 1.4;
}

.ai-img-viewer-stage img{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translate(var(--tx, 0px), var(--ty, 0px));
  max-width: none;
  max-height: none;
  cursor: grab;
  user-select: none;
  -webkit-user-drag: none;
}

.ai-img-viewer-stage img.is-dragging{
  cursor: grabbing;
}

.ai-img-viewer-actions{
  position: absolute;
  left: 50%;
  top: 68px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  z-index: 2;
}

.ai-img-viewer-btn{
  background: #111;
  color: #fff;
  border: 0;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1;
  min-width: 96px;
}

.ai-img-viewer-btn:hover{
  background: rgba(0,0,0,.75);
}

#resultImg{
  cursor: zoom-in;
}

#resultOps .result-op-btn i,
.ai-preview-ops .result-op-btn i{
  font-size: 15px;
  line-height: 1;
}

#resultOps .result-op-btn:hover,
.ai-preview-ops .result-op-btn:hover{
  background: rgba(255,255,255,.12);
}

#resultOps .result-op-btn:disabled,
.ai-preview-ops .result-op-btn:disabled{
  opacity: .55;
  cursor: not-allowed;
}