/* Neo-Brutalism Custom Theme & Responsive Breakpoints */
:root {
  --color-neo-yellow: #FFE66D;
  --color-neo-green: #10A37F;
  --color-neo-bg: #F0F0F0;
  --color-neo-card: #FFFFFF;
  --color-neo-blue-tag: #BFDBFE;
  --color-neo-blue-text: #1E40AF;
  --border-black: #000000;
}

body {
  background-color: var(--color-neo-bg);
  color: #000000;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Neo-Brutalism Utilities */
.neo-border-2 {
  border: 2px solid var(--border-black);
}

.neo-border-4 {
  border: 4px solid var(--border-black);
}

.neo-shadow-sm {
  box-shadow: 2px 2px 0px 0px var(--border-black);
}

.neo-shadow {
  box-shadow: 3px 3px 0px 0px var(--border-black);
}

.neo-shadow-lg {
  box-shadow: 5px 5px 0px 0px var(--border-black);
}

.neo-shadow-xl {
  box-shadow: 8px 8px 0px 0px var(--border-black);
}

.neo-btn {
  border: 2px solid var(--border-black);
  box-shadow: 3px 3px 0px 0px var(--border-black);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  user-select: none;
}

.neo-btn:hover {
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0px 0px var(--border-black);
}

.neo-btn:active {
  transform: translate(3px, 3px);
  box-shadow: 0px 0px 0px 0px var(--border-black);
}

/* 提示词高亮蓝色药丸变量标签 (1:1 还原 YouMind 风格) */
.prompt-variable-tag {
  background-color: #BFDBFE;
  color: #1E40AF;
  padding: 1px 6px;
  border: 1.5px solid var(--border-black);
  font-weight: 700;
  font-family: inherit;
  display: inline-block;
  margin: 1px 2px;
  border-radius: 2px;
  box-shadow: 1px 1px 0px 0px var(--border-black);
}

/* 隐藏滚动条但保留平滑触摸滑动 */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* 响应式断点策略 (Mobile-First) */
/* Zero-G: < 576px (手机端，默认基准样式) */
.waterfall-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

/* Low-G: ≥ 576px 向上适配到平板 (中屏) */
@media (min-width: 576px) {
  .waterfall-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
  }
}

/* Standard-G: ≥ 992px (桌面端全功能) */
@media (min-width: 992px) {
  .waterfall-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }
}

/* 动画效果 */
@keyframes neo-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.neo-pulse {
  animation: neo-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}