@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
  --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --nav-bg: #f8f9fb;
  --nav-surface: rgba(0,0,0,0.02);
  --nav-border: #e5e7eb;
  --nav-text: #1f2937;
  --nav-text-muted: #6b7280;
  --nav-hover: rgba(0,0,0,0.04);
  --nav-active: rgba(99,102,241,0.08);
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #f8f9fc;
  color: #1a1a2e;
  letter-spacing: -0.01em;
}
#root { min-height: 100vh; }

/* ── Scrollbar ─────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* ── Electric Border Animation ─────────── */
@keyframes electric-pulse {
  0%, 100% { opacity: 0.4; filter: blur(1px); }
  50% { opacity: 1; filter: blur(0); }
}
@keyframes electric-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.electric-border-card {
  position: relative;
}

.electric-border {
  position: absolute;
  inset: -2px;
  border-radius: 16px;
  background: linear-gradient(
    90deg,
    #6366f1,
    #8b5cf6,
    #a855f7,
    #6366f1,
    #8b5cf6,
    #a855f7,
    #6366f1
  );
  background-size: 300% 100%;
  animation: electric-flow 3s linear infinite, electric-pulse 2s ease-in-out infinite;
  z-index: 0;
}

.electric-border-inner {
  position: absolute;
  inset: 2px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  z-index: 0;
}

.electric-border-card:hover .electric-border {
  animation-duration: 1.5s, 1s;
  opacity: 0.8;
}

/* ── Shiny Text Animation ─────────────── */
@keyframes shiny {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

.shiny-text-container {
  margin-bottom: 16px;
}

.shiny-text {
  font-size: 24px;
  font-weight: 700;
  background: linear-gradient(
    90deg,
    #6366f1 0%,
    #8b5cf6 20%,
    #a855f7 40%,
    #c084fc 50%,
    #a855f7 60%,
    #8b5cf6 80%,
    #6366f1 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shiny 3s linear infinite;
  display: inline-block;
  letter-spacing: 1px;
}

/* ── Keyframe Animations ───────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes float1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(20px, -30px) scale(1.05); }
}
@keyframes float2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-15px, 20px) scale(0.95); }
}
@keyframes float3 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(10px, -15px) rotate(3deg); }
}
@keyframes slideInCard {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.animate-fadeInUp { animation: fadeInUp 0.45s ease-out both; }
.animate-fadeInLeft { animation: fadeInLeft 0.55s ease-out both; }
.animate-fadeInRight { animation: fadeInRight 0.55s ease-out both; }
.animate-slideInCard { animation: slideInCard 0.4s ease-out both; }
.animate-float1 { animation: float1 8s ease-in-out infinite; }
.animate-float2 { animation: float2 10s ease-in-out infinite; }
.animate-float3 { animation: float3 12s ease-in-out infinite; }

.ref-thumb:hover .ref-delete { opacity: 1 !important; }

.stagger-children > *:nth-child(1) { animation-delay: 0.04s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.10s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.16s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.22s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.28s; }
.stagger-children > *:nth-child(6) { animation-delay: 0.34s; }

/* ── Ant Design Overrides ──────────────── */
.ant-input, .ant-input-affix-wrapper, .ant-select-selector, .ant-input-number {
  border-radius: 10px !important;
  transition: all 0.25s ease !important;
}
.ant-input:focus, .ant-input-affix-wrapper:focus, .ant-input-affix-wrapper-focused,
.ant-select-focused .ant-select-selector {
  box-shadow: 0 0 0 3px rgba(99,102,241,0.12) !important;
  border-color: #6366f1 !important;
}
.ant-btn {
  border-radius: 10px !important;
  transition: all 0.25s ease !important;
  font-weight: 500 !important;
}
.ant-btn:hover { transform: none; }
.ant-btn:active { transform: translateY(0); }
.ant-card { border-radius: 16px !important; transition: all 0.3s ease !important; }
.ant-modal-content { border-radius: 20px !important; overflow: hidden; }
.ant-tag { font-size: 12px; border-radius: 8px !important; }

/* ── Recharge card hover ───────────────── */
.recharge-card {
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer;
}
.recharge-card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow: 0 20px 40px rgba(99,102,241,0.15) !important;
}
.recharge-card .recharge-price { transition: all 0.3s ease; }
.recharge-card:hover .recharge-price { transform: scale(1.08); }

/* ── Project card hover ────────────────── */
.project-card {
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative;
  overflow: visible;
}
.project-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 40px rgba(99,102,241,0.12) !important;
  border-color: #6366f1 !important;
}

/* ── Mobile Bottom Nav ─────────────────── */
.mobile-bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
  height: 60px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(24px);
  border-top: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.06);
}
.mobile-bottom-nav .nav-item {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  cursor: pointer; transition: all 0.2s;
  color: #8b8fa3; font-size: 9px; font-weight: 400;
  letter-spacing: 0;
}
.mobile-bottom-nav .nav-item.active {
  color: #08080c;
}
.mobile-bottom-nav .nav-item .nav-icon {
  font-size: 18px; transition: transform 0.2s;
}
.mobile-bottom-nav .nav-item.active .nav-icon {
  transform: scale(1.05);
}

/* ── Responsive Breakpoints ────────────── */
@media (max-width: 768px) {
  .desktop-sidebar { display: none !important; }
  .desktop-content { margin-left: 0 !important; padding: 16px !important; padding-bottom: 80px !important; overflow-x: hidden !important; }
  .desktop-sidebar-toggle-zone { display: none !important; }
  .mobile-bottom-nav { display: flex !important; }

  /* Prevent horizontal overflow globally */
  html, body { overflow-x: hidden !important; }

  .mobile-hide { display: none !important; }
  .mobile-full { width: 100% !important; max-width: 100% !important; }
  .mobile-stack { flex-direction: column !important; }
  .mobile-p-16 { padding: 16px !important; }
  .mobile-gap-12 { gap: 12px !important; }

  /* Login page */
  .login-page { flex-direction: column !important; }
  .login-left { display: none !important; }
  .login-right { padding: 24px 16px !important; }
  .login-card { width: 100% !important; }

  /* Project list */
  .project-item { flex-direction: column !important; align-items: flex-start !important; }
  .project-item .project-actions { margin-left: 0 !important; margin-top: 12px; width: 100%; justify-content: flex-end; }

  /* Generate page header */
  .gen-header { flex-direction: column !important; gap: 12px !important; padding: 16px 18px !important; }

  /* Operation flow bar */
  .gen-flow-bar { flex-direction: column !important; gap: 14px !important; padding: 16px !important; }
  .gen-flow-divider { display: none !important; }

  /* Config form params row */
  .gen-form-row { flex-direction: column !important; gap: 0 !important; }

  /* Credits estimate bar */
  .gen-credits-bar { flex-direction: column !important; gap: 8px !important; text-align: center; }

  /* Prompt rows */
  .gen-prompt-row { flex-direction: column !important; }
  .gen-prompt-row > * { width: 100% !important; }
  .gen-params { flex-wrap: wrap !important; gap: 8px !important; }
  .gen-params > div { flex: 1 1 45% !important; min-width: 0; }

  /* Expanded detail left+right stacks */
  .gen-detail-row { flex-direction: column !important; }
  .gen-detail-row > * { width: 100% !important; min-width: 0 !important; flex: 1 1 auto !important; }

  /* Record filter bar stacks */
  .record-filter-bar { flex-direction: column !important; }
  .record-filter-bar .ant-space { flex-wrap: wrap !important; }
  .record-filter-bar .ant-select { width: 100% !important; }

  /* Record summary row stacks */
  .record-item { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; overflow: hidden !important; }
  .record-item .record-actions { width: 100% !important; justify-content: flex-end; }
  .record-item > span[style*="textOverflow"] { white-space: normal !important; overflow: visible !important; text-overflow: unset !important; }

  /* Hide less important meta on mobile */
  .mobile-meta { display: none !important; }

  /* Credits page */
  .credits-balance { flex-direction: column !important; }
  .recharge-grid { flex-direction: column !important; }
  .recharge-grid > * { width: 100% !important; }

  /* Video player fits mobile */
  video { max-width: 100% !important; }

  /* InitialReplication page */
  .replication-container {
    flex-direction: column !important;
    gap: 16px !important;
    padding: 16px !important;
    height: calc(100vh - 64px) !important;
  }
  .replication-preview {
    width: 100% !important;
    height: 30vh !important;
    border-radius: 12px !important;
  }
  .replication-form {
    width: 100% !important;
    height: auto !important;
    max-height: calc(70vh - 32px) !important;
    border-radius: 12px !important;
  }
  .replication-form-content {
    padding: 16px !important;
    max-height: calc(70vh - 64px) !important;
  }
}

/* ── Date Display ──────────────────────── */
.date-display { font-family: 'SF Mono', 'Menlo', 'Consolas', monospace; }

/* ── Small Mobile Breakpoint (max-width: 480px) ────────────── */
@media (max-width: 480px) {
  /* Base styles */
  html, body { font-size: 14px !important; }

  /* Login page */
  .login-card { width: 100% !important; }
  .login-right { padding: 16px !important; }

  /* Header adjustments */
  .gen-header { padding: 12px 14px !important; }

  /* Form elements */
  .gen-form-row { gap: 8px !important; }
  
  /* Button adjustments */
  .ant-btn { height: 36px !important; font-size: 13px !important; padding: 0 12px !important; }
  
  /* Input adjustments */
  .ant-input, .ant-input-affix-wrapper, .ant-select-selector { 
    height: 36px !important; 
    font-size: 13px !important;
  }

  /* Card padding */
  .ant-card { padding: 12px !important; }

  /* Mobile bottom nav adjustments */
  .mobile-bottom-nav { height: 56px !important; }
  .mobile-bottom-nav .nav-item .nav-icon { font-size: 18px !important; }
  .mobile-bottom-nav .nav-item { font-size: 9px !important; gap: 2px !important; }

  /* InitialReplication page - Small Mobile */
  .replication-container {
    padding: 12px !important;
    gap: 12px !important;
  }
  .replication-preview {
    height: 25vh !important;
    border-radius: 10px !important;
  }
  .replication-form-content {
    padding: 12px !important;
  }
  .replication-form-content .ant-btn {
    height: 36px !important;
    font-size: 13px !important;
  }
  .replication-form-content .ant-input,
  .replication-form-content .ant-input-affix-wrapper {
    height: 36px !important;
    font-size: 13px !important;
  }

  /* Video and image containers */
  video, img { 
    max-height: 160px !important; 
    border-radius: 6px !important;
  }

  /* Upload areas */
  .upload-area { padding: 12px !important; }

  /* Spacing adjustments */
  .mobile-p-16 { padding: 12px !important; }
  .mobile-gap-12 { gap: 8px !important; }

  /* Font size adjustments */
  h1 { font-size: 18px !important; }
  h2 { font-size: 16px !important; }
  h3 { font-size: 14px !important; }
  p { font-size: 12px !important; }

  /* Button text */
  .btn-text-sm { font-size: 12px !important; }

  /* Margin adjustments */
  .mobile-mb-8 { margin-bottom: 8px !important; }
  .mobile-mb-12 { margin-bottom: 12px !important; }
}

/* ── Tablet Breakpoint (769px to 1024px) ────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
  /*
    左侧栏宽度必须统一由 AppLayout.tsx 的 sidebarW 控制。
    不要在这里覆盖 .desktop-sidebar width 或 .desktop-content margin-left，
    否则展开/折叠状态会和真实布局宽度不一致。
  */

  /* Card max-width */
  .ant-card { max-width: calc(50% - 8px) !important; }

  /* Font adjustments */
  html, body { font-size: 15px !important; }
}

/* ── Large Desktop Breakpoint (min-width: 1200px) ────────────── */
@media (min-width: 1200px) {
  /* Max width container */
  .max-w-container { max-width: 1400px; margin: 0 auto; }

  /* Card grid */
  .card-grid { grid-template-columns: repeat(3, 1fr) !important; }
}