:root {
   --nano-primary: #f3c535;
   --nano-secondary: #f3c535;
   --nano-accent: #f3c535;
   --nano-surface: rgba(255, 255, 255, 0.95);
   --nano-border: rgba(243, 197, 53, 0.3);
   --nano-shadow: 0 20px 40px rgba(243, 197, 53, 0.2);
}

/* Dark mode overrides */
.dark {
   --nano-surface: rgba(26, 26, 30, 0.95);
   --nano-border: rgba(243, 197, 53, 0.2);
   --nano-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

body {
   font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   background: #FFFEF7;
   color: #333333;
   transition: background-color 0.3s ease, color 0.3s ease;
}

.dark body {
   background: #111113;
   color: #e4e4e7;
}

/* 修改span元素的字体样式 */
span {
   color: #000000;
   font-weight: normal;
}

.dark span {
   color: #e4e4e7;
}

/* 修改注册按钮的字体样式 */
button.bg-primary {
   color: #000000;
   font-weight: normal;
}

.dark button.bg-primary {
   color: #000000;
}

.glass-panel {
   background: var(--nano-surface);
   border: 1px solid var(--nano-border);
   border-radius: 1rem;
   box-shadow: var(--nano-shadow);
   backdrop-filter: blur(12px);
}

.btn-gradient {
   background-image: linear-gradient(120deg, var(--nano-primary), var(--nano-accent));
   color: #333333;
   border: none;
   border-radius: 999px;
   padding: 0.85rem 1.5rem;
   font-weight: 600;
   transition: opacity 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
   opacity: 1;
}

.btn-gradient:hover {
   transform: translateY(-1px);
   box-shadow: 0 12px 24px rgba(243, 197, 53, 0.4);
}

.dark .btn-gradient {
   color: #1a1a1e;
}

.badge-soft {
   padding: 0.15rem 0.55rem;
   border-radius: 999px;
   font-size: 0.75rem;
   font-weight: 600;
   background: rgba(243, 197, 53, 0.3);
   color: #8B7355;
}

.dark .badge-soft {
   background: rgba(243, 197, 53, 0.2);
   color: #d4a84a;
}

.history-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
   gap: 1.25rem;
}

.history-card {
   border-radius: 1rem;
   border: 1px solid var(--nano-border);
   overflow: hidden;
   background: #fff;
   box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
   transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.history-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 15px 35px rgba(15, 23, 42, 0.1);
}

.dark .history-card {
   background: #1a1a1e;
   border-color: rgba(55, 55, 60, 0.6);
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.dark .history-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

.history-card img {
   display: block;
   width: 100%;
   height: 180px;
   object-fit: cover;
}

.reference-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
   gap: 0.75rem;
}

.reference-grid img {
   width: 100%;
   height: 120px;
   object-fit: cover;
   border-radius: 0.75rem;
   border: 1px solid var(--nano-border);
}

.dark .reference-grid img {
   border-color: rgba(55, 55, 60, 0.6);
}

.cache-badge {
   position: absolute;
   top: 0.75rem;
   left: 0.75rem;
   background: rgba(15, 118, 110, 0.95);
   color: #ecfeff;
   padding: 0.1rem 0.6rem;
   border-radius: 999px;
   font-size: 0.65rem;
   text-transform: uppercase;
   letter-spacing: 0.05em;
}

/* 添加UI元素的过渡效果，减少闪烁 */
#user-panel, #guest-actions {
   transition: opacity 0.3s ease, transform 0.3s ease;
   opacity: 1;
   transform: translateY(0);
}

#user-panel.hidden, #guest-actions.hidden {
   opacity: 0;
   transform: translateY(-10px);
}

.user-avatar, #user-balance {
   transition: opacity 0.3s ease, transform 0.3s ease;
}

select#model, select#image-size, select#aspect-ratio {
   transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 为模态框添加平滑过渡 */
.modal {
   transition: opacity 0.3s ease, transform 0.3s ease;
   opacity: 1;
   transform: scale(1);
}

.modal.hidden {
   opacity: 0;
   transform: scale(0.95);
}

/* 为覆盖层添加平滑过渡 */
#user-panel-overlay {
   transition: opacity 0.3s ease;
}

#user-panel-overlay.hidden {
   opacity: 0;
}

/* 为生成结果添加平滑过渡 */
.result-panel {
   transition: opacity 0.3s ease, transform 0.3s ease;
}

.loading-state, .error-state, .image-result {
   transition: opacity 0.3s ease, transform 0.3s ease;
}

.lightbox-backdrop {
   background: rgba(2, 6, 23, 0.85);
   backdrop-filter: blur(6px);
}

/* 用户信息右侧面板样式 */
#user-modal {
   transform: translateX(100%);
}

#user-modal:not(.hidden) {
   transform: translateX(0);
}

/* 用户面板打开时主内容区域的偏移效果 */
.user-panel-open main {
   transform: translateX(-80px);
   transition: transform 0.3s ease-in-out;
}

/* 确保页面滚动行为正常 */
#user-panel-overlay {
   transition: background-color 0.3s ease-in-out;
}

.user-panel-open #user-panel-overlay {
   background-color: rgba(0, 0, 0, 0.05);
}

.dark .user-panel-open #user-panel-overlay {
   background-color: rgba(0, 0, 0, 0.3);
}

/* 弹窗淡入动画 */
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-fade-in {
  animation: fadeIn 0.3s ease-out forwards;
}

/* ===== Mobile Responsiveness Fixes ===== */

/* User info side panel: full-width on mobile */
@media (max-width: 639px) {
  #user-modal {
    width: 100% !important;
    top: 0 !important;
    height: 100vh !important;
  }

  /* Reduce header action spacing */
  #header-actions {
    gap: 0.5rem;
  }
  #header-actions > div {
    gap: 0.25rem;
  }

  /* Make modals full-width on mobile */
  .nano-modal > div {
    max-width: 100%;
    margin: 0.5rem;
    border-radius: 1rem;
  }

  /* History detail / recharge modals */
  .fixed > .bg-white.rounded-2xl {
    max-width: calc(100vw - 1rem) !important;
    margin: 0.5rem;
  }

  /* Shift effect too aggressive on small screens */
  .user-panel-open main {
    transform: none;
  }

  /* Stack footer vertically */
  footer .flex.space-x-6 {
    gap: 1rem;
  }
}

/* Tablet refinements */
@media (min-width: 640px) and (max-width: 1023px) {
  #user-modal {
    width: 320px;
  }

  .user-panel-open main {
    transform: translateX(-40px);
  }
}

/* Ensure modals don't overflow viewport on any size */
.nano-modal {
  padding: 0.5rem;
}

/* Lightbox responsive */
@media (max-width: 639px) {
  .lightbox-backdrop img {
    max-width: 95vw;
    max-height: 85vh;
  }
}