frontend/src/index.css

@import url('https://cdn.jsdelivr.net/npm/lxgw-wenkai-screen-webfont@1.1.0/style.css');

@tailwind base;
@tailwind components;
@tailwind utilities;

/* 亮色主题变量 */
:root {
  --bg-primary-rgb: 245, 245, 245;
  --bg-secondary-rgb: 238, 238, 238;
  --bg-tertiary-rgb: 224, 224, 224;
  --text-primary-rgb: 33, 33, 33;
  --text-secondary-rgb: 117, 117, 117;
  --text-tertiary-rgb: 158, 158, 158;
  --accent-rgb: 66, 66, 66;
  --accent-hover-rgb: 48, 48, 48;
  --border-rgb: 0, 0, 0;
}

/* 暗黑主题变量 */
.dark {
  --bg-primary-rgb: 18, 18, 18;
  --bg-secondary-rgb: 28, 28, 28;
  --bg-tertiary-rgb: 38, 38, 38;
  --text-primary-rgb: 245, 245, 245;
  --text-secondary-rgb: 189, 189, 189;
  --text-tertiary-rgb: 117, 117, 117;
  --accent-rgb: 138, 138, 138;
  --accent-hover-rgb: 158, 158, 158;
  --border-rgb: 255, 255, 255;
}

body {
  font-family: "LXGW WenKai Screen", "LXGW WenKai TC", "LXGW WenKai Lite", "LXGW WenKai", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  @apply bg-bg-primary text-text-primary transition-colors duration-300;
}

/* 自定义下拉菜单样式 */
select option {
  padding: 10px 16px;
  background-color: #ffffff;
  color: #212121;
}

select option:hover,
select option:focus {
  background-color: #f5f5f5;
}

select option:checked {
  background-color: #424242;
  color: #ffffff;
  font-weight: 500;
}

/* 极简滚动条 - MD3 风格 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 9999px;
}

.dark ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.2);
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* 代码高亮主题适配暗黑模式 */
.dark .react-syntax-highlighter {
  background: transparent !important;
}

/* 动画淡入效果 */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

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

@keyframes fade-in-soft {
  from { opacity: 0; transform: translateY(12px) scale(0.992); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.animate-fade-in-soft {
  animation: fade-in-soft 0.58s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes fade-out-soft {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(12px) scale(0.992); }
}

.animate-fade-out-soft {
  animation: fade-out-soft 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes overlay-wash-in {
  from { opacity: 0; backdrop-filter: blur(0px); }
  to { opacity: 1; backdrop-filter: blur(6px); }
}

.animate-overlay-wash-in {
  animation: overlay-wash-in 0.5s ease-out forwards;
}

@keyframes paw-stamp {
  0%, 100% { transform: translateY(0) rotate(-6deg) scale(0.96); opacity: 0.26; }
  35% { transform: translateY(7px) rotate(3deg) scale(1.04); opacity: 0.78; }
  60% { transform: translateY(-1px) rotate(-2deg) scale(0.99); opacity: 0.5; }
}

.problem-paw {
  animation: paw-stamp 1.2s ease-in-out infinite;
}

@keyframes studio-transition-enter {
  0% { opacity: 0; backdrop-filter: blur(0px); }
  100% { opacity: 1; backdrop-filter: blur(12px); }
}

@keyframes studio-cover-full {
  0% { opacity: 0; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes studio-grid-rise {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 0.15; transform: translateY(0); }
}

@keyframes studio-paw-fall {
  0% { opacity: 0; transform: translateY(40px) scale(0.85); filter: blur(8px); }
  100% { opacity: 0.25; transform: translateY(0) scale(1); filter: blur(0px); }
}

@keyframes studio-line-grow {
  0% { transform: scaleX(0); opacity: 0; }
  100% { transform: scaleX(1); opacity: 0.3; }
}

@keyframes studio-entrance {
  0% { opacity: 0; transform: scale(0.98); filter: blur(12px); }
  100% { opacity: 1; transform: scale(1); filter: blur(0px); }
}

@keyframes classic-entrance {
  0% { opacity: 0; transform: scale(1.02); filter: blur(8px); }
  100% { opacity: 1; transform: scale(1); filter: blur(0px); }
}

.animate-studio-entrance {
  animation: studio-entrance 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-studio-exit {
  animation: studio-entrance 1.2s cubic-bezier(0.16, 1, 0.3, 1) reverse forwards;
}

.animate-classic-entrance {
  animation: classic-entrance 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.studio-transition-enter {
  animation: studio-transition-enter 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.studio-transition-exit {
  animation: studio-transition-enter 0.8s cubic-bezier(0.16, 1, 0.3, 1) reverse forwards;
}

.studio-cover-full {
  animation: studio-cover-full 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.studio-cover-full-exit {
  animation: studio-cover-full 0.8s cubic-bezier(0.16, 1, 0.3, 1) reverse forwards;
}

.studio-transition-grid {
  background-image:
    linear-gradient(rgba(var(--border-rgb), 0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--border-rgb), 0.2) 1px, transparent 1px);
  background-size: 120px 120px;
  mask-image: radial-gradient(circle at center, black, transparent 75%);
  animation: studio-grid-rise 2s ease-out forwards;
}

.studio-paw-print {
  opacity: 0;
  transform-origin: center;
  animation: studio-paw-fall 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.studio-paw-print-1 { animation-delay: 0.4s; }
.studio-paw-print-2 { animation-delay: 0.6s; }
.studio-paw-print-3 { animation-delay: 0.8s; }

.studio-transition-line {
  opacity: 0;
  animation: studio-line-grow 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.2s forwards;
}

/* 移除 sweep 扫光，改为更高级的平滑渐变 */
.studio-transition-sweep {
  display: none;
}

/* Studio 终端光标闪烁 */
@keyframes blink-cursor {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Studio 猫爪轻浮动 */
@keyframes studio-paw-float {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-3px) rotate(3deg); }
}

.studio-paw-float {
  animation: studio-paw-float 3s ease-in-out infinite;
  display: inline-block;
}

.studio-cursor {
  animation: blink-cursor 1s step-end infinite;
  color: rgba(var(--text-secondary-rgb), 0.4);
  font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace;
}

@keyframes studio-dot-bounce {
  0%, 80%, 100% {
    transform: translateY(0) scale(0.9);
    opacity: 0.28;
  }
  40% {
    transform: translateY(-4px) scale(1);
    opacity: 0.88;
  }
}

@keyframes studio-type-caret-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.18; }
}

/* Studio 终端基础样式 */
.studio-terminal {
  font-family: "SF Mono", "Fira Code", "Cascadia Code", "LXGW WenKai Screen", monospace;
}

.studio-terminal ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
}

.studio-terminal ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.15);
}

.studio-thinking-dots {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.studio-thinking-dots span {
  width: 0.34rem;
  height: 0.34rem;
  border-radius: 9999px;
  background: rgba(var(--accent-rgb), 0.55);
  animation: studio-dot-bounce 1.1s ease-in-out infinite;
}

.studio-thinking-dots span:nth-child(2) {
  animation-delay: 0.14s;
}

.studio-thinking-dots span:nth-child(3) {
  animation-delay: 0.28s;
}

.studio-type-caret {
  margin-left: 0.18rem;
  color: rgba(var(--accent-rgb), 0.62);
  animation: studio-type-caret-blink 0.9s step-end infinite;
}

.canvas-transition-grid {
  background-image:
    linear-gradient(rgba(var(--border-rgb), 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--border-rgb), 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at center, black, transparent 80%);
}

.canvas-paper-grid {
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 62px,
      rgba(80, 80, 80, 0.12) 62px,
      rgba(80, 80, 80, 0.12) 63px,
      transparent 63px,
      transparent 124px
    ),
    repeating-linear-gradient(
      to right,
      transparent 0,
      transparent 70px,
      rgba(100, 100, 100, 0.08) 70px,
      rgba(100, 100, 100, 0.08) 71px,
      transparent 71px,
      transparent 142px
    );
}