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

:root {
  --bg-page: #f8fafc;
  --bg-card: #ffffff;
  --bg-soft: #f1f5f9;
  --text: #111827;
  --text-muted: #64748b;
  --text-faint: #94a3b8;
  --line: #e8edf3;
  --line-strong: #e2e8f0;
  --shadow: rgba(15, 23, 42, 0.08);
  --accent: #111827;
  --accent-text: #ffffff;
  --fluid-ease: cubic-bezier(0.3, 0, 0, 1);
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.72) transparent;
}

*::-webkit-scrollbar { width: 10px; height: 10px; background: transparent; }
*::-webkit-scrollbar-thumb {
  background-color: rgba(148, 163, 184, 0.72);
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--bg-page) !important;
  color: var(--text);
}

.primary-50 { color: #f8fafc !important; }
.hover\:primary-50:hover { color: #f8fafc !important; }
.bg-primary-50 { background-color: #f8fafc !important; }
.hover\:bg-primary-50:hover { background-color: #f8fafc !important; }
.border-primary-50 { border-color: #f8fafc !important; }
.hover\:border-primary-50:hover { border-color: #f8fafc !important; }
.ring-primary-50 { --tw-ring-color: #f8fafc !important; }
.focus\:ring-primary-50:focus { --tw-ring-color: #f8fafc !important; }
.shadow-primary-50 { --tw-shadow-color: rgba(15,23,42,0.040600000000000004) !important; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important; }
.from-primary-50 { --tw-gradient-from: #f8fafc var(--tw-gradient-from-position); --tw-gradient-to: #f8fafc var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-primary-50 { --tw-gradient-to: #f8fafc var(--tw-gradient-to-position); }
.via-primary-50 { --tw-gradient-to: #f8fafc var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #f8fafc var(--tw-gradient-via-position), var(--tw-gradient-to); }
.primary-100 { color: #f1f5f9 !important; }
.hover\:primary-100:hover { color: #f1f5f9 !important; }
.bg-primary-100 { background-color: #f1f5f9 !important; }
.hover\:bg-primary-100:hover { background-color: #f1f5f9 !important; }
.border-primary-100 { border-color: #f1f5f9 !important; }
.hover\:border-primary-100:hover { border-color: #f1f5f9 !important; }
.ring-primary-100 { --tw-ring-color: #f1f5f9 !important; }
.focus\:ring-primary-100:focus { --tw-ring-color: #f1f5f9 !important; }
.shadow-primary-100 { --tw-shadow-color: rgba(15,23,42,0.0412) !important; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important; }
.from-primary-100 { --tw-gradient-from: #f1f5f9 var(--tw-gradient-from-position); --tw-gradient-to: #f1f5f9 var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-primary-100 { --tw-gradient-to: #f1f5f9 var(--tw-gradient-to-position); }
.via-primary-100 { --tw-gradient-to: #f1f5f9 var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #f1f5f9 var(--tw-gradient-via-position), var(--tw-gradient-to); }
.primary-200 { color: #e2e8f0 !important; }
.hover\:primary-200:hover { color: #e2e8f0 !important; }
.bg-primary-200 { background-color: #e2e8f0 !important; }
.hover\:bg-primary-200:hover { background-color: #e2e8f0 !important; }
.border-primary-200 { border-color: #e2e8f0 !important; }
.hover\:border-primary-200:hover { border-color: #e2e8f0 !important; }
.ring-primary-200 { --tw-ring-color: #e2e8f0 !important; }
.focus\:ring-primary-200:focus { --tw-ring-color: #e2e8f0 !important; }
.shadow-primary-200 { --tw-shadow-color: rgba(15,23,42,0.0424) !important; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important; }
.from-primary-200 { --tw-gradient-from: #e2e8f0 var(--tw-gradient-from-position); --tw-gradient-to: #e2e8f0 var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-primary-200 { --tw-gradient-to: #e2e8f0 var(--tw-gradient-to-position); }
.via-primary-200 { --tw-gradient-to: #e2e8f0 var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #e2e8f0 var(--tw-gradient-via-position), var(--tw-gradient-to); }
.primary-300 { color: #cbd5e1 !important; }
.hover\:primary-300:hover { color: #cbd5e1 !important; }
.bg-primary-300 { background-color: #cbd5e1 !important; }
.hover\:bg-primary-300:hover { background-color: #cbd5e1 !important; }
.border-primary-300 { border-color: #cbd5e1 !important; }
.hover\:border-primary-300:hover { border-color: #cbd5e1 !important; }
.ring-primary-300 { --tw-ring-color: #cbd5e1 !important; }
.focus\:ring-primary-300:focus { --tw-ring-color: #cbd5e1 !important; }
.shadow-primary-300 { --tw-shadow-color: rgba(15,23,42,0.0436) !important; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important; }
.from-primary-300 { --tw-gradient-from: #cbd5e1 var(--tw-gradient-from-position); --tw-gradient-to: #cbd5e1 var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-primary-300 { --tw-gradient-to: #cbd5e1 var(--tw-gradient-to-position); }
.via-primary-300 { --tw-gradient-to: #cbd5e1 var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #cbd5e1 var(--tw-gradient-via-position), var(--tw-gradient-to); }
.primary-400 { color: #94a3b8 !important; }
.hover\:primary-400:hover { color: #94a3b8 !important; }
.bg-primary-400 { background-color: #94a3b8 !important; }
.hover\:bg-primary-400:hover { background-color: #94a3b8 !important; }
.border-primary-400 { border-color: #94a3b8 !important; }
.hover\:border-primary-400:hover { border-color: #94a3b8 !important; }
.ring-primary-400 { --tw-ring-color: #94a3b8 !important; }
.focus\:ring-primary-400:focus { --tw-ring-color: #94a3b8 !important; }
.shadow-primary-400 { --tw-shadow-color: rgba(15,23,42,0.0448) !important; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important; }
.from-primary-400 { --tw-gradient-from: #94a3b8 var(--tw-gradient-from-position); --tw-gradient-to: #94a3b8 var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-primary-400 { --tw-gradient-to: #94a3b8 var(--tw-gradient-to-position); }
.via-primary-400 { --tw-gradient-to: #94a3b8 var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #94a3b8 var(--tw-gradient-via-position), var(--tw-gradient-to); }
.primary-500 { color: #64748b !important; }
.hover\:primary-500:hover { color: #64748b !important; }
.bg-primary-500 { background-color: #64748b !important; }
.hover\:bg-primary-500:hover { background-color: #64748b !important; }
.border-primary-500 { border-color: #64748b !important; }
.hover\:border-primary-500:hover { border-color: #64748b !important; }
.ring-primary-500 { --tw-ring-color: #64748b !important; }
.focus\:ring-primary-500:focus { --tw-ring-color: #64748b !important; }
.shadow-primary-500 { --tw-shadow-color: rgba(15,23,42,0.046) !important; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important; }
.from-primary-500 { --tw-gradient-from: #64748b var(--tw-gradient-from-position); --tw-gradient-to: #64748b var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-primary-500 { --tw-gradient-to: #64748b var(--tw-gradient-to-position); }
.via-primary-500 { --tw-gradient-to: #64748b var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #64748b var(--tw-gradient-via-position), var(--tw-gradient-to); }
.primary-600 { color: #475569 !important; }
.hover\:primary-600:hover { color: #475569 !important; }
.bg-primary-600 { background-color: #475569 !important; }
.hover\:bg-primary-600:hover { background-color: #475569 !important; }
.border-primary-600 { border-color: #475569 !important; }
.hover\:border-primary-600:hover { border-color: #475569 !important; }
.ring-primary-600 { --tw-ring-color: #475569 !important; }
.focus\:ring-primary-600:focus { --tw-ring-color: #475569 !important; }
.shadow-primary-600 { --tw-shadow-color: rgba(15,23,42,0.0472) !important; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important; }
.from-primary-600 { --tw-gradient-from: #475569 var(--tw-gradient-from-position); --tw-gradient-to: #475569 var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-primary-600 { --tw-gradient-to: #475569 var(--tw-gradient-to-position); }
.via-primary-600 { --tw-gradient-to: #475569 var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #475569 var(--tw-gradient-via-position), var(--tw-gradient-to); }
.primary-700 { color: #334155 !important; }
.hover\:primary-700:hover { color: #334155 !important; }
.bg-primary-700 { background-color: #334155 !important; }
.hover\:bg-primary-700:hover { background-color: #334155 !important; }
.border-primary-700 { border-color: #334155 !important; }
.hover\:border-primary-700:hover { border-color: #334155 !important; }
.ring-primary-700 { --tw-ring-color: #334155 !important; }
.focus\:ring-primary-700:focus { --tw-ring-color: #334155 !important; }
.shadow-primary-700 { --tw-shadow-color: rgba(15,23,42,0.0484) !important; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important; }
.from-primary-700 { --tw-gradient-from: #334155 var(--tw-gradient-from-position); --tw-gradient-to: #334155 var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-primary-700 { --tw-gradient-to: #334155 var(--tw-gradient-to-position); }
.via-primary-700 { --tw-gradient-to: #334155 var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #334155 var(--tw-gradient-via-position), var(--tw-gradient-to); }
.primary-800 { color: #1e293b !important; }
.hover\:primary-800:hover { color: #1e293b !important; }
.bg-primary-800 { background-color: #1e293b !important; }
.hover\:bg-primary-800:hover { background-color: #1e293b !important; }
.border-primary-800 { border-color: #1e293b !important; }
.hover\:border-primary-800:hover { border-color: #1e293b !important; }
.ring-primary-800 { --tw-ring-color: #1e293b !important; }
.focus\:ring-primary-800:focus { --tw-ring-color: #1e293b !important; }
.shadow-primary-800 { --tw-shadow-color: rgba(15,23,42,0.0496) !important; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important; }
.from-primary-800 { --tw-gradient-from: #1e293b var(--tw-gradient-from-position); --tw-gradient-to: #1e293b var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-primary-800 { --tw-gradient-to: #1e293b var(--tw-gradient-to-position); }
.via-primary-800 { --tw-gradient-to: #1e293b var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #1e293b var(--tw-gradient-via-position), var(--tw-gradient-to); }
.primary-900 { color: #0f172a !important; }
.hover\:primary-900:hover { color: #0f172a !important; }
.bg-primary-900 { background-color: #0f172a !important; }
.hover\:bg-primary-900:hover { background-color: #0f172a !important; }
.border-primary-900 { border-color: #0f172a !important; }
.hover\:border-primary-900:hover { border-color: #0f172a !important; }
.ring-primary-900 { --tw-ring-color: #0f172a !important; }
.focus\:ring-primary-900:focus { --tw-ring-color: #0f172a !important; }
.shadow-primary-900 { --tw-shadow-color: rgba(15,23,42,0.0508) !important; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important; }
.from-primary-900 { --tw-gradient-from: #0f172a var(--tw-gradient-from-position); --tw-gradient-to: #0f172a var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-primary-900 { --tw-gradient-to: #0f172a var(--tw-gradient-to-position); }
.via-primary-900 { --tw-gradient-to: #0f172a var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #0f172a var(--tw-gradient-via-position), var(--tw-gradient-to); }
.cyan-50 { color: #f8fafc !important; }
.hover\:cyan-50:hover { color: #f8fafc !important; }
.bg-cyan-50 { background-color: #f8fafc !important; }
.hover\:bg-cyan-50:hover { background-color: #f8fafc !important; }
.border-cyan-50 { border-color: #f8fafc !important; }
.hover\:border-cyan-50:hover { border-color: #f8fafc !important; }
.ring-cyan-50 { --tw-ring-color: #f8fafc !important; }
.focus\:ring-cyan-50:focus { --tw-ring-color: #f8fafc !important; }
.shadow-cyan-50 { --tw-shadow-color: rgba(15,23,42,0.040600000000000004) !important; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important; }
.from-cyan-50 { --tw-gradient-from: #f8fafc var(--tw-gradient-from-position); --tw-gradient-to: #f8fafc var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-cyan-50 { --tw-gradient-to: #f8fafc var(--tw-gradient-to-position); }
.via-cyan-50 { --tw-gradient-to: #f8fafc var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #f8fafc var(--tw-gradient-via-position), var(--tw-gradient-to); }
.cyan-100 { color: #f1f5f9 !important; }
.hover\:cyan-100:hover { color: #f1f5f9 !important; }
.bg-cyan-100 { background-color: #f1f5f9 !important; }
.hover\:bg-cyan-100:hover { background-color: #f1f5f9 !important; }
.border-cyan-100 { border-color: #f1f5f9 !important; }
.hover\:border-cyan-100:hover { border-color: #f1f5f9 !important; }
.ring-cyan-100 { --tw-ring-color: #f1f5f9 !important; }
.focus\:ring-cyan-100:focus { --tw-ring-color: #f1f5f9 !important; }
.shadow-cyan-100 { --tw-shadow-color: rgba(15,23,42,0.0412) !important; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important; }
.from-cyan-100 { --tw-gradient-from: #f1f5f9 var(--tw-gradient-from-position); --tw-gradient-to: #f1f5f9 var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-cyan-100 { --tw-gradient-to: #f1f5f9 var(--tw-gradient-to-position); }
.via-cyan-100 { --tw-gradient-to: #f1f5f9 var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #f1f5f9 var(--tw-gradient-via-position), var(--tw-gradient-to); }
.cyan-200 { color: #e2e8f0 !important; }
.hover\:cyan-200:hover { color: #e2e8f0 !important; }
.bg-cyan-200 { background-color: #e2e8f0 !important; }
.hover\:bg-cyan-200:hover { background-color: #e2e8f0 !important; }
.border-cyan-200 { border-color: #e2e8f0 !important; }
.hover\:border-cyan-200:hover { border-color: #e2e8f0 !important; }
.ring-cyan-200 { --tw-ring-color: #e2e8f0 !important; }
.focus\:ring-cyan-200:focus { --tw-ring-color: #e2e8f0 !important; }
.shadow-cyan-200 { --tw-shadow-color: rgba(15,23,42,0.0424) !important; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important; }
.from-cyan-200 { --tw-gradient-from: #e2e8f0 var(--tw-gradient-from-position); --tw-gradient-to: #e2e8f0 var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-cyan-200 { --tw-gradient-to: #e2e8f0 var(--tw-gradient-to-position); }
.via-cyan-200 { --tw-gradient-to: #e2e8f0 var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #e2e8f0 var(--tw-gradient-via-position), var(--tw-gradient-to); }
.cyan-300 { color: #cbd5e1 !important; }
.hover\:cyan-300:hover { color: #cbd5e1 !important; }
.bg-cyan-300 { background-color: #cbd5e1 !important; }
.hover\:bg-cyan-300:hover { background-color: #cbd5e1 !important; }
.border-cyan-300 { border-color: #cbd5e1 !important; }
.hover\:border-cyan-300:hover { border-color: #cbd5e1 !important; }
.ring-cyan-300 { --tw-ring-color: #cbd5e1 !important; }
.focus\:ring-cyan-300:focus { --tw-ring-color: #cbd5e1 !important; }
.shadow-cyan-300 { --tw-shadow-color: rgba(15,23,42,0.0436) !important; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important; }
.from-cyan-300 { --tw-gradient-from: #cbd5e1 var(--tw-gradient-from-position); --tw-gradient-to: #cbd5e1 var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-cyan-300 { --tw-gradient-to: #cbd5e1 var(--tw-gradient-to-position); }
.via-cyan-300 { --tw-gradient-to: #cbd5e1 var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #cbd5e1 var(--tw-gradient-via-position), var(--tw-gradient-to); }
.cyan-400 { color: #94a3b8 !important; }
.hover\:cyan-400:hover { color: #94a3b8 !important; }
.bg-cyan-400 { background-color: #94a3b8 !important; }
.hover\:bg-cyan-400:hover { background-color: #94a3b8 !important; }
.border-cyan-400 { border-color: #94a3b8 !important; }
.hover\:border-cyan-400:hover { border-color: #94a3b8 !important; }
.ring-cyan-400 { --tw-ring-color: #94a3b8 !important; }
.focus\:ring-cyan-400:focus { --tw-ring-color: #94a3b8 !important; }
.shadow-cyan-400 { --tw-shadow-color: rgba(15,23,42,0.0448) !important; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important; }
.from-cyan-400 { --tw-gradient-from: #94a3b8 var(--tw-gradient-from-position); --tw-gradient-to: #94a3b8 var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-cyan-400 { --tw-gradient-to: #94a3b8 var(--tw-gradient-to-position); }
.via-cyan-400 { --tw-gradient-to: #94a3b8 var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #94a3b8 var(--tw-gradient-via-position), var(--tw-gradient-to); }
.cyan-500 { color: #64748b !important; }
.hover\:cyan-500:hover { color: #64748b !important; }
.bg-cyan-500 { background-color: #64748b !important; }
.hover\:bg-cyan-500:hover { background-color: #64748b !important; }
.border-cyan-500 { border-color: #64748b !important; }
.hover\:border-cyan-500:hover { border-color: #64748b !important; }
.ring-cyan-500 { --tw-ring-color: #64748b !important; }
.focus\:ring-cyan-500:focus { --tw-ring-color: #64748b !important; }
.shadow-cyan-500 { --tw-shadow-color: rgba(15,23,42,0.046) !important; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important; }
.from-cyan-500 { --tw-gradient-from: #64748b var(--tw-gradient-from-position); --tw-gradient-to: #64748b var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-cyan-500 { --tw-gradient-to: #64748b var(--tw-gradient-to-position); }
.via-cyan-500 { --tw-gradient-to: #64748b var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #64748b var(--tw-gradient-via-position), var(--tw-gradient-to); }
.cyan-600 { color: #475569 !important; }
.hover\:cyan-600:hover { color: #475569 !important; }
.bg-cyan-600 { background-color: #475569 !important; }
.hover\:bg-cyan-600:hover { background-color: #475569 !important; }
.border-cyan-600 { border-color: #475569 !important; }
.hover\:border-cyan-600:hover { border-color: #475569 !important; }
.ring-cyan-600 { --tw-ring-color: #475569 !important; }
.focus\:ring-cyan-600:focus { --tw-ring-color: #475569 !important; }
.shadow-cyan-600 { --tw-shadow-color: rgba(15,23,42,0.0472) !important; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important; }
.from-cyan-600 { --tw-gradient-from: #475569 var(--tw-gradient-from-position); --tw-gradient-to: #475569 var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-cyan-600 { --tw-gradient-to: #475569 var(--tw-gradient-to-position); }
.via-cyan-600 { --tw-gradient-to: #475569 var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #475569 var(--tw-gradient-via-position), var(--tw-gradient-to); }
.cyan-700 { color: #334155 !important; }
.hover\:cyan-700:hover { color: #334155 !important; }
.bg-cyan-700 { background-color: #334155 !important; }
.hover\:bg-cyan-700:hover { background-color: #334155 !important; }
.border-cyan-700 { border-color: #334155 !important; }
.hover\:border-cyan-700:hover { border-color: #334155 !important; }
.ring-cyan-700 { --tw-ring-color: #334155 !important; }
.focus\:ring-cyan-700:focus { --tw-ring-color: #334155 !important; }
.shadow-cyan-700 { --tw-shadow-color: rgba(15,23,42,0.0484) !important; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important; }
.from-cyan-700 { --tw-gradient-from: #334155 var(--tw-gradient-from-position); --tw-gradient-to: #334155 var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-cyan-700 { --tw-gradient-to: #334155 var(--tw-gradient-to-position); }
.via-cyan-700 { --tw-gradient-to: #334155 var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #334155 var(--tw-gradient-via-position), var(--tw-gradient-to); }
.cyan-800 { color: #1e293b !important; }
.hover\:cyan-800:hover { color: #1e293b !important; }
.bg-cyan-800 { background-color: #1e293b !important; }
.hover\:bg-cyan-800:hover { background-color: #1e293b !important; }
.border-cyan-800 { border-color: #1e293b !important; }
.hover\:border-cyan-800:hover { border-color: #1e293b !important; }
.ring-cyan-800 { --tw-ring-color: #1e293b !important; }
.focus\:ring-cyan-800:focus { --tw-ring-color: #1e293b !important; }
.shadow-cyan-800 { --tw-shadow-color: rgba(15,23,42,0.0496) !important; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important; }
.from-cyan-800 { --tw-gradient-from: #1e293b var(--tw-gradient-from-position); --tw-gradient-to: #1e293b var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-cyan-800 { --tw-gradient-to: #1e293b var(--tw-gradient-to-position); }
.via-cyan-800 { --tw-gradient-to: #1e293b var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #1e293b var(--tw-gradient-via-position), var(--tw-gradient-to); }
.cyan-900 { color: #0f172a !important; }
.hover\:cyan-900:hover { color: #0f172a !important; }
.bg-cyan-900 { background-color: #0f172a !important; }
.hover\:bg-cyan-900:hover { background-color: #0f172a !important; }
.border-cyan-900 { border-color: #0f172a !important; }
.hover\:border-cyan-900:hover { border-color: #0f172a !important; }
.ring-cyan-900 { --tw-ring-color: #0f172a !important; }
.focus\:ring-cyan-900:focus { --tw-ring-color: #0f172a !important; }
.shadow-cyan-900 { --tw-shadow-color: rgba(15,23,42,0.0508) !important; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important; }
.from-cyan-900 { --tw-gradient-from: #0f172a var(--tw-gradient-from-position); --tw-gradient-to: #0f172a var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-cyan-900 { --tw-gradient-to: #0f172a var(--tw-gradient-to-position); }
.via-cyan-900 { --tw-gradient-to: #0f172a var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #0f172a var(--tw-gradient-via-position), var(--tw-gradient-to); }

/* Remove violet gradient text, use solid dark text instead */
.bg-clip-text.text-transparent {
  background: none !important;
  -webkit-text-fill-color: var(--text) !important;
  color: var(--text) !important;
}

/* Cards: clean white surface with subtle border/shadow */
.glass-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 10px 28px var(--shadow) !important;
  backdrop-filter: none !important;
}

/* Sidebar: clean white with right edge shadow */
.glass-sidebar {
  background: var(--bg-card) !important;
  border-right: 1px solid var(--line) !important;
  box-shadow: 4px 0 24px rgba(15, 23, 42, 0.04) !important;
  backdrop-filter: none !important;
}

/* Buttons: black primary / white secondary */
.gradient-btn,
.gradient-btn-cyan {
  background: var(--accent) !important;
  color: var(--accent-text) !important;
  border: 1px solid var(--accent) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
}
.gradient-btn:hover,
.gradient-btn-cyan:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12) !important;
  background: #1f2937 !important;
}
.gradient-btn:disabled,
.gradient-btn-cyan:disabled,
.gradient-btn[disabled],
.gradient-btn-cyan[disabled] {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Tag badge: neutral pill */
.tag-badge {
  background: var(--bg-soft) !important;
  color: var(--text-muted) !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  box-shadow: none !important;
}

/* Select dropdown arrow color to gray */
.select-custom {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
}

/* Inputs / selects: white surface, gray border, dark focus ring */
input[type='text'], input[type='password'], input[type='number'], textarea, select,
input[class*='bg-white/70'], textarea[class*='bg-white/70'], select[class*='bg-white/70'] {
  background-color: var(--bg-card) !important;
  border-color: var(--line-strong) !important;
  color: var(--text) !important;
}
input:focus, textarea:focus, select:focus {
  --tw-ring-color: rgba(0, 0, 0, 0.08) !important;
  border-color: #94a3b8 !important;
  outline: none !important;
}

/* History container empty state */
.history-empty {
  border: 1px dashed var(--line-strong) !important;
  background: var(--bg-soft) !important;
  color: var(--text-faint) !important;
}

/* Modal overlay: Apple-like translucent blur */
.modal {
  background-color: rgba(15, 23, 42, 0.38) !important;
  backdrop-filter: blur(12px) !important;
}

/* History items: calmer hover */
.history-item:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
}

/* History widget (from history.js) */
.history-widget {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08) !important;
}
.history-widget:hover {
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.1) !important;
}

/* Reopen button: black instead of purple gradient */
.history-reopen-btn {
  background: #111827 !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18) !important;
}
.history-reopen-btn:hover {
  background: #334155 !important;
  transform: scale(1.05);
}

/* 改密 / 退出 → same gray as "保存历史" */
#history-change-pwd,
#history-logout {
  color: #4b5563 !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}
#history-change-pwd:hover,
#history-logout:hover {
  color: #111827 !important;
}

/* Login / change-password modal inputs & primary button */
.history-login-card input {
  border-color: #e2e8f0 !important;
  background: #ffffff !important;
}
.history-login-card input:focus {
  border-color: #94a3b8 !important;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.15) !important;
}
.history-btn-primary {
  background: #111827 !important;
  color: #ffffff !important;
}
.history-btn-primary:hover {
  background: #334155 !important;
}

/* Lasso selection: neutral gray */
.history-lasso {
  border-color: #64748b !important;
  background: rgba(100, 116, 139, 0.1) !important;
}

/* History record cards: image fills the whole rounded frame */
.history-item,
.history-container > .history-item,
.history-container > [data-history-id] {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  aspect-ratio: 1 / 1 !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06) !important;
  width: 100% !important;
}
.history-item > div,
.history-container > .history-item > div,
.history-container > [data-history-id] > div {
  width: 100% !important;
  height: 100% !important;
}
.history-item img,
.history-container > .history-item img,
.history-container > [data-history-id] img,
.history-container > .history-item canvas,
.history-container > [data-history-id] canvas {
  border: none !important;
  border-radius: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.history-item:hover,
.history-container > .history-item:hover,
.history-container > [data-history-id]:hover {
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1) !important;
}

/* Upload / drop-zone icons: gray instead of purple */
.drop-zone svg,
#upload-area svg,
.upload-slot svg,
[data-slot-placeholder] {
  color: #94a3b8 !important;
  transition: color 0.2s ease;
}
.drop-zone:hover svg,
#upload-area:hover svg,
.upload-slot:hover svg,
[data-slot-placeholder]:hover {
  color: #64748b !important;
}

/* styleRender Lora cards: horizontal scroll + Apple gray style */
#lora-grid {
  display: flex !important;
  gap: 0.75rem !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
#lora-grid::-webkit-scrollbar {
  display: none !important;
}
#lora-grid .lora-card {
  flex: 0 0 auto !important;
  width: 84px !important;
  background: transparent !important;
}
#lora-grid .lora-thumb {
  border-color: #e2e8f0 !important;
  background: #f1f5f9 !important;
  border-radius: 12px !important;
}
#lora-grid .lora-card:hover .lora-thumb {
  border-color: #cbd5e1 !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08) !important;
}
#lora-grid .lora-card.selected .lora-thumb {
  border-color: #94a3b8 !important;
  box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.35) !important;
}
#lora-grid .lora-check {
  border-color: #e2e8f0 !important;
  background: rgba(255, 255, 255, 0.95) !important;
  color: transparent !important;
}
#lora-grid .lora-card.selected .lora-check {
  background: #111827 !important;
  border-color: #111827 !important;
  color: #ffffff !important;
}
#lora-grid .lora-label {
  color: #64748b !important;
}
#lora-grid .lora-card.selected .lora-label {
  color: #334155 !important;
  font-weight: 600 !important;
}

/* Nav active state uses dark instead of purple */
.nav-item.active,
.nav-item[data-active='true'] {
  background: var(--accent) !important;
  color: var(--accent-text) !important;
}

/* Page headings */
h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.015em;
}
/* Neutralize translucent white utility backgrounds used across pages */
.bg-white\/80,
.bg-white\/70,
.bg-white\/60,
.bg-white\/50,
.bg-white\/40 {
  background-color: #ffffff !important;
}

/* ========== Canvas (无限画布) 节点与网格 ========== */

/* Canvas body already neutral via body rule above */

/* Board: subtle dot grid instead of purple-tinted line grid */
#board {
  background-color: #f8fafc !important;
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.08) 1.5px, transparent 1.5px) !important;
  background-size: 40px 40px !important;
}

/* Nodes: clean white cards */
.node {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08) !important;
}
.node-header {
  border-bottom: 1px solid #f1f5f9 !important;
  font-weight: 650 !important;
}
.node:hover {
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.1) !important;
}
.node.dragging {
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.14) !important;
}
.node.selected {
  border-color: #334155 !important;
  box-shadow: 0 0 0 3px rgba(51, 65, 85, 0.15), 0 12px 36px rgba(15, 23, 42, 0.12) !important;
}

/* Node type headers: muted neutral tints */
.node-prompt .node-header,
.node-image .node-header,
.node-generate .node-header,
.node-output .node-header,
.node-tool .node-header {
  background: #f8fafc !important;
  color: #334155 !important;
}

/* Ports: neutral slate */
.port {
  background: #ffffff !important;
  border-color: #94a3b8 !important;
  width: 16px !important;
  height: 16px !important;
  border-width: 2.5px !important;
}
.port:hover {
  background: #f1f5f9 !important;
  transform: scale(1.2) !important;
}
.port.drag-hover {
  background: #e2e8f0 !important;
  box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.2) !important;
}
.port.output { border-color: #64748b !important; }
.port.input { border-color: #64748b !important; }

/* Links: neutral gray */
.link-path {
  stroke: #cbd5e1 !important;
  stroke-width: 2px !important;
}
.link-path:hover {
  stroke: #64748b !important;
}
.temp-link {
  stroke: #64748b !important;
  filter: drop-shadow(0 0 3px rgba(100, 116, 139, 0.3)) !important;
}

/* Selection box */
#selection-box {
  border-color: #64748b !important;
  background: rgba(100, 116, 139, 0.08) !important;
}

/* Output image items */
.output-img-item {
  border-color: #e2e8f0 !important;
  border-radius: 10px !important;
}
.output-img-item.generating {
  background: #f8fafc !important;
  color: #64748b !important;
}
.output-img-item.pending {
  background: #f8fafc !important;
  color: #94a3b8 !important;
}
.output-img-item.error {
  background: #fef2f2 !important;
  color: #b91c1c !important;
}

/* Canvas theme widget inherits glass-card styling; refine list items */
.canvas-theme-item:hover {
  background: #f1f5f9 !important;
}
.canvas-theme-item.active {
  background: #e2e8f0 !important;
  border-color: #cbd5e1 !important;
}
.canvas-theme-actions button:hover {
  background: #f1f5f9 !important;
  color: #334155 !important;
}

/* Toolbar / topbar on canvas */
#toolbar,
.canvas-toolbar {
  background: rgba(255, 255, 255, 0.92) !important;
  border-bottom: 1px solid #e2e8f0 !important;
  backdrop-filter: blur(16px) !important;
}

/* Node textarea / inputs inside canvas */
.node textarea,
.node input[type="text"],
.node select {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #111827 !important;
}
.node textarea:focus,
.node input[type="text"]:focus,
.node select:focus {
  border-color: #94a3b8 !important;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05) !important;
}
.node-img-placeholder {
  border-color: #e2e8f0 !important;
  color: #94a3b8 !important;
  background: #f8fafc !important;
}
.node-img-placeholder:hover {
  border-color: #94a3b8 !important;
  color: #64748b !important;
  background: #f1f5f9 !important;
}

/* Node delete / link delete buttons: Apple-style neutral */
.node-delete-btn {
  background: transparent !important;
  box-shadow: none !important;
  color: #94a3b8 !important;
}
.node-delete-btn:hover {
  color: #111827 !important;
}
.link-delete-btn {
  background: transparent !important;
  box-shadow: none !important;
  color: #111827 !important;
  border: none !important;
}
.link-delete-btn:hover {
  background: transparent !important;
  color: #111827 !important;
}

/* Canvas nav active state */
.nav-item.active {
  background: #111827 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12) !important;
}
.nav-item:hover {
  color: #111827 !important;
}
.nav-item::before {
  background: rgba(15, 23, 42, 0.06) !important;
}
.logo-text {
  background: none !important;
  -webkit-text-fill-color: #111827 !important;
  color: #111827 !important;
}
.logo-glow {
  filter: none !important;
}

/* ---------- Dynamic Y logo (Apple-style, frameless) ---------- */
.logo-icon-wrap {
  transition: transform 0.45s cubic-bezier(0.3, 0, 0, 1);
  cursor: pointer;
}
.logo-icon-wrap:hover {
  transform: scale(1.1) rotate(-8deg);
}
.logo-icon-wrap.pinned::after {
  content: '';
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 7px;
  height: 7px;
  background: #111827;
  border-radius: 50%;
  border: 2px solid #ffffff;
}

.logo-icon {
  width: 52px;
  height: 52px;
  overflow: visible;
}

.logo-arm,
.logo-stem {
  transition: transform 0.45s cubic-bezier(0.3, 0, 0, 1);
  transform-box: fill-box;
  transform-origin: center;
}

.logo-icon-wrap:hover .logo-arm-left {
  transform: translate(-1.5px, -1.5px);
}
.logo-icon-wrap:hover .logo-arm-right {
  transform: translate(1.5px, -1.5px);
}
.logo-icon-wrap:hover .logo-stem {
  transform: translateY(1.5px);
}

/* Hover "rewrite" stroke animation */
.logo-arm,
.logo-stem {
  stroke-dasharray: 30;
  stroke-dashoffset: 0;
}
.logo-icon-wrap:hover .logo-arm-left {
  animation: logo-rewrite 0.55s ease forwards;
}
.logo-icon-wrap:hover .logo-arm-right {
  animation: logo-rewrite 0.55s ease 0.08s forwards;
}
.logo-icon-wrap:hover .logo-stem {
  animation: logo-rewrite 0.55s ease 0.16s forwards;
}
@keyframes logo-rewrite {
  0% { stroke-dashoffset: 0; }
  50% { stroke-dashoffset: 30; }
  100% { stroke-dashoffset: 0; }
}

/* ---------- Sidebar auto-collapse / expand (desktop only) ---------- */
#sidebar {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
#sidebar::-webkit-scrollbar {
  display: none !important;
}

@media (min-width: 768px) {
  #sidebar {
    width: 72px !important;
    transition: width 0.35s cubic-bezier(0.3, 0, 0, 1), box-shadow 0.35s ease !important;
    overflow-x: hidden !important;
    box-shadow: 2px 0 16px rgba(15, 23, 42, 0.04) !important;
    will-change: width;
  }

  #sidebar:hover,
  #sidebar.nav-pinned {
    width: 256px !important;
    box-shadow: 4px 0 30px rgba(15, 23, 42, 0.08) !important;
  }

  /* Nav item fills sidebar width so it doesn't grow independently during expansion */
  #sidebar .nav-item {
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 20px !important;
    padding-right: 16px !important;
    gap: 12px !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
  }

  /* Icon must never shrink */
  #sidebar .nav-item > svg,
  #sidebar .nav-item .nav-icon {
    flex-shrink: 0 !important;
    width: 20px !important;
    height: 20px !important;
  }

  /* Text / badge: blockified so max-width and overflow work reliably */
  #sidebar .nav-item span,
  #sidebar .nav-item .new-badge {
    display: inline-block !important;
    vertical-align: middle !important;
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    transition: max-width 0.3s ease, opacity 0.2s ease !important;
  }

  /* Collapsed state: text hidden but layout unchanged */
  #sidebar:not(:hover):not(.nav-pinned) .nav-item span,
  #sidebar:not(:hover):not(.nav-pinned) .nav-item .new-badge {
    max-width: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Expanded state: text expands from left to right and fades in */
  #sidebar:hover .nav-item span,
  #sidebar.nav-pinned .nav-item span,
  #sidebar:hover .nav-item .new-badge,
  #sidebar.nav-pinned .nav-item .new-badge {
    max-width: 180px !important;
    opacity: 1 !important;
    transition: max-width 0.3s ease 0.08s, opacity 0.2s ease 0.12s !important;
  }
}

/* ---------- Upload / drop zones (neutral Apple style) ---------- */
.drop-zone,
.upload-slot,
#upload-area {
  border-color: #e2e8f0 !important;
  background: rgba(255, 255, 255, 0.7) !important;
}
.drop-zone:hover,
.upload-slot:hover,
#upload-area:hover {
  border-color: #cbd5e1 !important;
  background: rgba(255, 255, 255, 0.95) !important;
}
.upload-slot.dragover,
.drop-zone.dragover {
  border-color: #94a3b8 !important;
  background: #f8fafc !important;
}

/* Empty history placeholder icon */
.history-empty svg {
  color: #94a3b8 !important;
}

/* Canvas image placeholder & selection box */
.node-img-placeholder {
  border-color: #e2e8f0 !important;
  color: #94a3b8 !important;
  background: #f8fafc !important;
}
.node-img-placeholder:hover {
  border-color: #cbd5e1 !important;
  color: #64748b !important;
  background: #f1f5f9 !important;
}
#selection-box {
  border-color: #64748b !important;
  background: rgba(100, 116, 139, 0.08) !important;
}
.nav-item-highlight {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}
.nav-item-highlight:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}


/* ---------- Canvas toolbar buttons (Apple light gray/white) ---------- */
.toolbar .btn-add-prompt,
.toolbar .btn-add-image,
.toolbar .btn-add-tool,
.toolbar .btn-clear,
.toolbar .btn-focus {
  background: #f8fafc !important;
  color: #334155 !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
.toolbar .btn-add-prompt:hover,
.toolbar .btn-add-image:hover,
.toolbar .btn-add-tool:hover,
.toolbar .btn-clear:hover,
.toolbar .btn-focus:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

/* Generate button: very subtle gradient so it keeps a primary feel */
.toolbar .btn-add-generate {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
  color: #111827 !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
.toolbar .btn-add-generate:hover {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%) !important;
  border-color: #cbd5e1 !important;
}

/* Tone down the destructive / utility icons */
.toolbar .btn-clear,
.toolbar .btn-focus {
  color: #64748b !important;
}

/* ---------- Canvas theme widget (Apple light gray/white) ---------- */
.canvas-theme-widget {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.08) !important;
  backdrop-filter: blur(20px) !important;
}

.canvas-theme-header {
  color: #111827 !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.canvas-theme-header button {
  color: #64748b !important;
  border-radius: 6px !important;
}

.canvas-theme-header button:hover {
  background: #f1f5f9 !important;
  color: #334155 !important;
}

.canvas-theme-save-btn {
  background: #111827 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12) !important;
  border: none !important;
}

.canvas-theme-save-btn:hover {
  background: #334155 !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.16) !important;
  transform: translateY(-1px) !important;
}

.canvas-theme-item {
  background: rgba(255, 255, 255, 0.7) !important;
  border-color: #e2e8f0 !important;
}

.canvas-theme-name {
  color: #334155 !important;
}

.canvas-theme-name input {
  border-color: #e2e8f0 !important;
  background: #ffffff !important;
  color: #111827 !important;
}

.canvas-theme-name input:focus {
  border-color: #94a3b8 !important;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.15) !important;
}

.canvas-theme-empty {
  color: #94a3b8 !important;
}


/* ---------- Range sliders: black Apple-style ---------- */
input[type="range"],
input[type="range"].size-slider,
input[type="range"].remove-size-slider,
.controls input[type="range"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  height: 6px !important;
  background: transparent !important;
  border-radius: 9999px !important;
  outline: none !important;
  cursor: pointer !important;
}

input[type="range"]::-webkit-slider-runnable-track,
.controls input[type="range"]::-webkit-slider-runnable-track {
  width: 100% !important;
  height: 6px !important;
  border-radius: 9999px !important;
  background: #e5e7eb !important;
}

input[type="range"]::-webkit-slider-thumb,
.controls input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 2px solid #111827 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
  cursor: pointer !important;
  margin-top: -6px !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

input[type="range"]:hover::-webkit-slider-thumb,
.controls input[type="range"]:hover::-webkit-slider-thumb {
  transform: scale(1.08) !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2) !important;
}

input[type="range"]:focus::-webkit-slider-thumb,
.controls input[type="range"]:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.12) !important;
}

input[type="range"]::-moz-range-track,
.controls input[type="range"]::-moz-range-track {
  width: 100% !important;
  height: 6px !important;
  border-radius: 9999px !important;
  background: #e5e7eb !important;
}

input[type="range"]::-moz-range-thumb,
.controls input[type="range"]::-moz-range-thumb {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 2px solid #111827 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

input[type="range"]:hover::-moz-range-thumb,
.controls input[type="range"]:hover::-moz-range-thumb {
  transform: scale(1.08) !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2) !important;
}


/* ---------- Sidebar submenu: 增效工具 dropdown ---------- */
@media (min-width: 768px) {
  #sidebar {
    overflow: visible !important;
  }
}

.nav-group {
  position: relative;
}

.nav-group-trigger {
  cursor: pointer;
  user-select: none;
}

.nav-chevron {
  transition: opacity 0.2s ease;
}

#sidebar:hover .nav-chevron,
#sidebar.nav-pinned .nav-chevron {
  opacity: 1;
}

.nav-submenu {
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  width: 11rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
  padding: 0.5rem 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 50;
  transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
}

.nav-group:hover .nav-submenu,
.nav-group:focus-within .nav-submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.nav-subitem {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  color: #374151;
  font-size: 0.875rem;
  line-height: 1.25rem;
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-subitem:hover {
  background: #f1f5f9;
  color: #111827;
}

.nav-subitem.active {
  background: #111827 !important;
  color: #ffffff !important;
}

.nav-subitem.active svg {
  color: #ffffff !important;
}

.nav-subitem svg {
  flex-shrink: 0;
  color: #64748b;
}

/* =========================================================
   输出卡片与左侧操作面板等高对齐，内部画布/图片保持 16:9 比例居中
   ========================================================= */

/* 上排操作区/输出区容器改为等高拉伸，让右侧输出卡片与左侧操作面板上下对齐 */
.flex-1.flex.gap-6.min-h-0.mb-6 {
  align-items: stretch !important;
}

/* 输出画布卡片：填满右侧卡片高度，并在内部居中放置固定比例的 canvas/img/video */
.output-canvas-area {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}

/* 真正的输出内容区域保持 16:9 比例，宽度占满，高度由比例决定，且不超过容器 */
.output-canvas-area > canvas,
.output-canvas-area > img,
.output-canvas-area > video {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  flex: none !important;
  object-fit: contain !important;
}

/* =========================================================
   处理中遮罩层仅保留优雅的黑白灰旋转圈圈，隐藏文字
   ========================================================= */

#processing-overlay .animate-spin.rounded-full {
  width: 40px !important;
  height: 40px !important;
  margin-bottom: 0 !important;
  border: 2px solid rgba(0, 0, 0, 0.08) !important;
  border-top-color: #111827 !important;
  border-radius: 9999px !important;
  animation: spin 1s linear infinite;
}

#processing-text,
#processing-overlay .text-primary-700,
#processing-overlay .font-bold {
  display: none !important;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}