/* =========================================================================
   AI 视频导演 · 分镜脚本生成器 — 共享设计系统
   对标 Framer 的视觉语言：近黑底、角落克制辉光、玻璃拟态、品红→紫渐变
   两级页面（着陆页 / 工具页）共用此文件，保证视觉完全统一
   ========================================================================= */

/* ---- Design tokens ---------------------------------------------------- */
:root {
  /* 背景与表面 */
  --bg:            #08090d;
  --bg-elev:       #0c0e14;
  --glass:         rgba(255, 255, 255, 0.045);
  --glass-strong:  rgba(255, 255, 255, 0.07);
  --glass-border:  rgba(255, 255, 255, 0.10);
  --glass-hi:      rgba(255, 255, 255, 0.16);  /* 1px 高光边框 */

  /* 文字 */
  --fg:            #f4f5f7;
  --fg-soft:       #c7cad2;
  --muted:         #8a8f9c;
  --faint:         #5a5f6b;

  /* 品牌强调：品红 → 紫 */
  --accent-a:      #ff3d6e;
  --accent-b:      #7b61ff;
  --grad:          linear-gradient(135deg, #ff3d6e 0%, #7b61ff 100%);
  --grad-soft:     linear-gradient(135deg, rgba(255,61,110,.18), rgba(123,97,255,.18));

  /* 半径 / 投影 */
  --r-lg:   20px;
  --r-md:   16px;
  --r-sm:   11px;
  --r-pill: 999px;

  --shadow:     0 24px 60px -20px rgba(0, 0, 0, .65);
  --shadow-sm:  0 12px 30px -14px rgba(0, 0, 0, .6);
  --glow:       0 14px 44px -10px rgba(255, 61, 110, .42);

  /* 字体：系统栈，含中文 */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Microsoft YaHei", "Hiragino Sans GB", "Source Han Sans SC",
          "Helvetica Neue", Arial, sans-serif;
  --mono: "SF Mono", "JetBrains Mono", "Fira Code", ui-monospace,
          "Cascadia Code", Consolas, "Liberation Mono", monospace;

  /* spring 缓动 */
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease:   cubic-bezier(.22, .61, .36, 1);
}

/* ---- Reset ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--fg);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  position: relative;
  overflow-x: hidden;
}

/* ---- 角落径向辉光（克制，藏在角落，不是满屏渐变）---------------------- */
body::before,
body::after {
  content: "";
  position: fixed;
  width: 60vw;
  height: 60vw;
  max-width: 820px;
  max-height: 820px;
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
  opacity: .55;
}
body::before {
  top: -22vw;
  left: -16vw;
  background: radial-gradient(circle at center,
              rgba(123, 97, 255, .28) 0%,
              rgba(123, 97, 255, .07) 42%,
              transparent 68%);
}
body::after {
  bottom: -26vw;
  right: -18vw;
  background: radial-gradient(circle at center,
              rgba(255, 61, 110, .24) 0%,
              rgba(255, 61, 110, .06) 44%,
              transparent 70%);
}

/* ---- 排版基元 --------------------------------------------------------- */
a { color: inherit; text-decoration: none; }

.eyebrow {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---- 玻璃卡片 --------------------------------------------------------- */
.glass {
  position: relative;
  background: var(--glass);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow),
              inset 0 1px 0 var(--glass-hi),          /* 顶部高光 */
              inset 0 0 40px -28px rgba(255,255,255,.5); /* 微妙内发光 */
}

/* ---- 渐变主按钮 ------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font);
  font-weight: 650;
  border: none;
  cursor: pointer;
  border-radius: var(--r-pill);
  transition: transform .14s var(--spring),
              box-shadow .25s var(--ease),
              filter .2s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: scale(.96); }

.btn-grad {
  background: var(--grad);
  color: #fff;
  font-size: 16px;
  padding: 15px 30px;
  box-shadow: var(--glow);
  position: relative;
  isolation: isolate;
}
.btn-grad::after {  /* hover 光晕 */
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: var(--grad);
  filter: blur(16px);
  opacity: 0;
  z-index: -1;
  transition: opacity .3s var(--ease);
}
.btn-grad:hover { transform: translateY(-2px); filter: brightness(1.06); }
.btn-grad:hover::after { opacity: .8; }

.btn-ghost {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  color: var(--fg-soft);
  font-size: 14px;
  padding: 11px 18px;
  backdrop-filter: blur(10px);
}
.btn-ghost:hover {
  background: var(--glass-strong);
  border-color: var(--glass-hi);
  color: var(--fg);
  transform: translateY(-1px);
}

/* ---- Pill 标签（可选中）---------------------------------------------- */
.pill {
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 550;
  color: var(--fg-soft);
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-pill);
  padding: 9px 16px;
  cursor: pointer;
  transition: transform .14s var(--spring),
              border-color .2s var(--ease),
              background .2s var(--ease),
              color .2s var(--ease);
  user-select: none;
}
.pill:hover { border-color: var(--glass-hi); transform: translateY(-1px); color: var(--fg); }
.pill[aria-pressed="true"],
.pill.is-active {
  color: #fff;
  background: var(--grad-soft);
  border-color: transparent;
  background-image: var(--grad-soft),
                    linear-gradient(var(--bg), var(--bg));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: inset 0 0 0 1px rgba(255, 61, 110, .55),
              0 6px 18px -10px rgba(255, 61, 110, .6);
}

/* ---- 入场动画（spring 物理感）---------------------------------------- */
@keyframes rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal {
  opacity: 0;
  animation: rise .7s var(--spring) forwards;
}

/* ---- Toast ------------------------------------------------------------ */
.toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(18, 20, 28, .92);
  backdrop-filter: blur(16px);
  border: 1px solid var(--glass-hi);
  color: var(--fg);
  font-size: 14px;
  font-weight: 550;
  padding: 12px 20px;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  transition: opacity .3s var(--ease), transform .35s var(--spring);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- 滚动条 ----------------------------------------------------------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .08);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .16); background-clip: padding-box; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}