/* =============================================================================
 * tech-style.css —— 科技感视觉 token 与动效（multi-entry-creative-platform / 任务 13.2）
 *
 * 在既有主题样式层（base.css + theme-dark/light.css）之上**追加**一套统一的「科技感」
 * 设计 token 与工具类：霓虹发光 / glassmorphism / 发光描边 / 扫描线 / 脉冲环。
 * 不引入第二套 UI 框架，全部基于既有 CSS 变量（--brand-* / --accent-* / --surface-* 等）
 * 派生，保证暗 / 亮双主题自动适配（Requirement 13.1–13.7）。
 *
 * 使用约定（与既有 surface-card / gradient-border-card / aurora-canvas 同级的工具类）：
 *   - .tech-neon-text      文本霓虹渐变 + 微发光（入口/区块标题）
 *   - .tech-glass          玻璃拟态表面（毛玻璃 + 细描边 + 内高光）
 *   - .tech-glow-border    发光描边（hover/激活时品牌色描边 + 外发光）；.is-active 常驻
 *   - .tech-scanline       叠加细扫描线纹理（::after，pointer-events:none）
 *   - .tech-pulse-ring     脉冲环（::before 扩散，用于"进行中/在线"状态点）
 *   - .tech-chip           科技感小标签（发光描边 + glass 底）
 *
 * 关爱：所有动效统一在文件末尾 `@media (prefers-reduced-motion: reduce)` 内降级为
 * 静态（去除 animation / transition），不影响可读性与布局（Requirement 13.7）。
 * ============================================================================= */

:root {
  /* === 科技感色板（由既有品牌色派生，保证暗/亮主题一致语言） === */
  --tech-neon-cyan: var(--brand-cyan, #22d3ee);
  --tech-neon-violet: var(--brand-violet, #a78bfa);
  --tech-neon-indigo: var(--brand-indigo, #818cf8);

  /* 霓虹渐变（文本/描边复用）。 */
  --tech-neon-gradient: linear-gradient(
    100deg,
    var(--tech-neon-violet) 0%,
    var(--tech-neon-indigo) 45%,
    var(--tech-neon-cyan) 100%
  );

  /* 发光描边的发光色（外发光阴影用，半透明品牌色）。 */
  --tech-glow-color: rgba(129, 140, 248, 0.45);
  --tech-glow-color-strong: rgba(129, 140, 248, 0.65);

  /* glassmorphism 表面：底色 + 描边 + 内高光（暗主题默认值）。 */
  --tech-glass-bg: rgba(20, 22, 36, 0.55);
  --tech-glass-border: rgba(255, 255, 255, 0.10);
  --tech-glass-highlight: rgba(255, 255, 255, 0.06);
  --tech-glass-blur: 14px;

  /* 扫描线纹理（细横纹）：颜色 + 行距。 */
  --tech-scanline-color: rgba(255, 255, 255, 0.04);
  --tech-scanline-gap: 3px;

  /* 脉冲环基色（在线/进行中状态点）。 */
  --tech-pulse-color: var(--brand-indigo, #818cf8);

  /* 动效时长（与 base.css 的 --ease-smooth 配合；缺省兜底） */
  --tech-ease: var(--ease-smooth, cubic-bezier(0.22, 1, 0.36, 1));
  --tech-pulse-duration: 2.4s;
  --tech-scan-duration: 6s;
}

/* 亮主题下重新平衡 glass / 扫描线 / 发光，避免在浅底上过曝或不可见。 */
[data-theme='light'] {
  --tech-glass-bg: rgba(255, 255, 255, 0.62);
  --tech-glass-border: rgba(15, 23, 42, 0.10);
  --tech-glass-highlight: rgba(255, 255, 255, 0.85);
  --tech-glow-color: rgba(99, 102, 241, 0.30);
  --tech-glow-color-strong: rgba(99, 102, 241, 0.50);
  --tech-scanline-color: rgba(15, 23, 42, 0.045);
  --tech-pulse-color: var(--brand-indigo, #6366f1);
}

/* -----------------------------------------------------------------------------
 * 1) 霓虹文本：品牌渐变填充 + 轻微发光。
 *    与 base.css 的 .text-gradient 兼容（这里额外加 drop-shadow 发光）。
 * --------------------------------------------------------------------------- */
.tech-neon-text {
  background: var(--tech-neon-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 6px var(--tech-glow-color));
}

/* -----------------------------------------------------------------------------
 * 2) Glassmorphism 表面：毛玻璃 + 细描边 + 顶部内高光。
 *    作为 surface-card 的"加强版"，用于入口卡片 / 任务中心 / 浮层。
 * --------------------------------------------------------------------------- */
.tech-glass {
  position: relative;
  background: var(--tech-glass-bg);
  border: 1px solid var(--tech-glass-border);
  -webkit-backdrop-filter: blur(var(--tech-glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--tech-glass-blur)) saturate(140%);
  box-shadow: inset 0 1px 0 var(--tech-glass-highlight), var(--shadow-soft, 0 4px 12px rgba(0, 0, 0, 0.14));
  border-radius: var(--radius-lg, 14px);
}

/* -----------------------------------------------------------------------------
 * 3) 发光描边：默认描边低亮，hover / .is-active 时品牌色描边 + 外发光。
 *    用于入口卡片 / 模型卡片 / 主按钮 / 时间轴选中段。
 * --------------------------------------------------------------------------- */
.tech-glow-border {
  position: relative;
  border: 1px solid var(--tech-glass-border);
  border-radius: var(--radius-lg, 14px);
  transition: border-color 220ms var(--tech-ease), box-shadow 220ms var(--tech-ease),
    transform 220ms var(--tech-ease);
}
.tech-glow-border:hover,
.tech-glow-border.is-active {
  border-color: var(--accent-border, rgba(129, 140, 248, 0.5));
  box-shadow: 0 0 0 1px var(--tech-glow-color), 0 8px 28px var(--tech-glow-color);
}
.tech-glow-border:hover {
  transform: translateY(-2px);
}

/* 主按钮的科技感发光（与既有 .btn-brand 叠加使用：class="btn-brand tech-glow-btn"）。 */
.tech-glow-btn {
  position: relative;
  box-shadow: 0 0 0 1px var(--tech-glow-color), 0 6px 18px var(--tech-glow-color);
  transition: box-shadow 220ms var(--tech-ease), transform 220ms var(--tech-ease);
}
.tech-glow-btn:hover {
  box-shadow: 0 0 0 1px var(--tech-glow-color-strong), 0 10px 26px var(--tech-glow-color-strong);
  transform: translateY(-1px);
}

/* -----------------------------------------------------------------------------
 * 4) 扫描线纹理：在容器上叠一层细横纹 + 缓慢竖向飘移，营造"信号面板"质感。
 *    ::after 覆盖、pointer-events:none，不影响交互。容器需 position 非 static。
 * --------------------------------------------------------------------------- */
.tech-scanline {
  position: relative;
}
.tech-scanline::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--tech-scanline-color) 0,
    var(--tech-scanline-color) 1px,
    transparent 1px,
    transparent var(--tech-scanline-gap)
  );
  opacity: 0.6;
  mix-blend-mode: screen;
  animation: tech-scan-drift var(--tech-scan-duration) linear infinite;
}
@keyframes tech-scan-drift {
  from {
    background-position-y: 0;
  }
  to {
    background-position-y: calc(var(--tech-scanline-gap) * 40);
  }
}

/* -----------------------------------------------------------------------------
 * 5) 脉冲环：用于"进行中 / 在线"状态点（如任务中心进行中、模型在线）。
 *    在元素外侧扩散一圈渐隐的品牌色环。元素自身需 position 非 static。
 * --------------------------------------------------------------------------- */
.tech-pulse-ring {
  position: relative;
}
.tech-pulse-ring::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 var(--tech-pulse-color);
  opacity: 0.7;
  animation: tech-pulse-ring var(--tech-pulse-duration) var(--tech-ease) infinite;
  pointer-events: none;
}
@keyframes tech-pulse-ring {
  0% {
    box-shadow: 0 0 0 0 var(--tech-pulse-color);
    opacity: 0.55;
  }
  70% {
    box-shadow: 0 0 0 10px transparent;
    opacity: 0;
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
    opacity: 0;
  }
}

/* -----------------------------------------------------------------------------
 * 6) 科技感小标签（chip）：glass 底 + 发光描边 + 等宽数字友好。
 *    用于入口角标 / 模型场景标签 / 状态徽章。
 * --------------------------------------------------------------------------- */
.tech-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.15em 0.6em;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--accent-text, #c7d2fe);
  background: var(--tech-glass-bg);
  border: 1px solid var(--accent-border, rgba(129, 140, 248, 0.4));
  box-shadow: 0 0 0 1px var(--tech-glow-color);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* =============================================================================
 * 关爱：尊重 prefers-reduced-motion —— 关闭所有科技感动效，保留静态视觉。
 * （Requirement 13.7：动效包裹降级；暗/亮双主题适配由上方变量保证。）
 * ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  .tech-scanline::after {
    animation: none !important;
  }
  .tech-pulse-ring::before {
    animation: none !important;
    /* 降级为静态细环，仍传达"激活"语义但不闪动。 */
    box-shadow: 0 0 0 2px var(--tech-pulse-color);
    opacity: 0.4;
  }
  .tech-glow-border,
  .tech-glow-btn {
    transition: none !important;
  }
  .tech-glow-border:hover {
    transform: none !important;
  }
  .tech-glow-btn:hover {
    transform: none !important;
  }
}

/* =============================================================================
 * 7) 玻璃拟态工具类（qixiang-inspired-revamp / 任务 1.3）
 *
 * 借鉴奇想AI 的玻璃拟态质感，**仅增质感、不改品牌色相**。着色全部取自既有玻璃 /
 * 投影 token（--surface-card-* / --shadow-*），暗 / 亮双主题自动跟随 [data-theme]。
 * 不引用 / 不修改任何 --accent* / --brand-* / --aurora-* 的色相。
 *
 *   - .glass-panel   毛玻璃面板：现有玻璃底 + 品牌色派生描边 + 柔光投影（Banner / 头部 / 区块）
 *   - .glass-tile    轻量玻璃贴片：热门模型 / 画风 / 作品卡片容器（更轻的模糊）
 *   - .media-scrim   媒体可读性遮罩：封面图上叠标题 / 角标时保证对比度（纯黑透明，无新色相）
 *
 * 退化策略：不支持 backdrop-filter 的环境退回 --surface-card-bg 实色（见文末 @supports）。
 * 关爱：prefers-reduced-motion 下不附加任何动效 / 过渡（见文末 reduced-motion 块）。
 * ============================================================================= */

/* 玻璃面板：毛玻璃 + 现有品牌色派生描边 + 柔光（着色取自既有 token，不改色相）。 */
.glass-panel {
  background: var(--surface-card-bg);
  border: 1px solid var(--surface-card-border);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: var(--shadow-lift);
  border-radius: var(--radius-lg, 14px);
  transition: border-color 220ms var(--tech-ease);
}
.glass-panel:hover {
  border-color: var(--surface-card-border-hover);
}

/* 玻璃贴片：用于热门模型 / 画风 / 作品卡片的轻量毛玻璃容器（更轻的模糊）。 */
.glass-tile {
  background: var(--surface-card-bg);
  border: 1px solid var(--surface-card-border);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-lg, 14px);
}

/* 媒体卡的可读性遮罩：封面图上叠标题 / 角标时用，纯黑透明渐变、不引入新色相。 */
.media-scrim {
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.1) 45%,
    rgba(0, 0, 0, 0.62) 100%
  );
}

/* 退化：不支持 backdrop-filter 时退回实色表面，保证可读性（带 -webkit- 变体）。 */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .glass-panel,
  .glass-tile {
    background: var(--surface-card-bg);
  }
}

/* 关爱：prefers-reduced-motion 下，这些玻璃类不附加任何动效 / 过渡。 */
@media (prefers-reduced-motion: reduce) {
  .glass-panel {
    transition: none !important;
  }
}

/* =============================================================================
 * AI 漫创 / 剧本清洗工作台主题
 * 仅作用于流程式剧本页和它的顶部步骤条变量，保留全局亮/暗主题切换。
 * ============================================================================= */
[data-theme='dark'] {
  --studio-header-bg: rgba(23, 27, 32, 0.95);
  --studio-header-border: #303842;
  --studio-header-shadow: 0 1px 0 rgba(255, 255, 255, 0.03);
  --studio-control-bg: #20262e;
  --studio-control-hover-bg: #262d36;
  --studio-control-border: #343d49;
  --studio-control-hover-border: #46515f;
  --studio-control-text: #a3adbb;
  --studio-step-text: #a3adbb;
  --studio-step-separator: #5f6977;
  --studio-subtitle-text: #98a3b3;
  --studio-step-hover-bg: rgba(255, 255, 255, 0.04);
  --studio-step-active-bg: rgba(245, 194, 107, 0.10);
  --studio-step-active-border: rgba(245, 194, 107, 0.38);
  --studio-step-active-text: #f5c26b;
  --studio-step-active-ring: rgba(251, 191, 36, 0.04);
}

[data-theme='light'] {
  --studio-header-bg: rgba(255, 255, 255, 0.92);
  --studio-header-border: #e6e1d8;
  --studio-header-shadow: 0 1px 0 rgba(24, 24, 31, 0.04);
  --studio-control-bg: #ffffff;
  --studio-control-hover-bg: #f6f1e8;
  --studio-control-border: #e1ded7;
  --studio-control-hover-border: #d3c6b2;
  --studio-control-text: #5f6470;
  --studio-step-text: #5f6470;
  --studio-step-separator: #a39b90;
  --studio-subtitle-text: #73717b;
  --studio-step-hover-bg: rgba(120, 89, 42, 0.07);
  --studio-step-active-bg: rgba(184, 119, 31, 0.12);
  --studio-step-active-border: rgba(184, 119, 31, 0.32);
  --studio-step-active-text: #8a4f00;
  --studio-step-active-ring: rgba(184, 119, 31, 0.06);
}

[data-theme='dark'] .stage-script-surface {
  --bg-base: #161a20;
  --bg-primary: #161a20;
  --bg-deep: #12161b;
  --bg-secondary: #1a1f26;
  --bg-surface: #222832;
  --bg-elevated: #29313b;
  --bg-hover: #303844;
  --border-primary: #37414d;
  --border-secondary: #4a5563;
  --border-subtle: #2e3742;
  --surface-card-border: #37414d;
  --surface-card-bg: #20262e;
  --accent-text: #f5c26b;
  --accent-text-hover: #ffe0a3;
  --accent-border: rgba(245, 194, 107, 0.38);
  --accent-bg: rgba(245, 194, 107, 0.10);
  --accent-bg-hover: rgba(245, 194, 107, 0.16);
  --brand-gradient-soft: linear-gradient(135deg, rgba(245, 194, 107, 0.16), rgba(255, 255, 255, 0.03));
  --btn-primary-bg: #f0b85b;
  --btn-primary-hover: #ffd17d;
  --btn-primary-text: #17120a;
  --btn-primary-shadow: rgba(240, 184, 91, 0.18);
  --text-primary: #f3f6fb;
  --text-secondary: #c9d1dc;
  --text-tertiary: #98a3b3;
  --text-muted: #6f7b8d;
}

[data-theme='light'] .stage-script-surface {
  --bg-base: #f6f4ef;
  --bg-primary: #ffffff;
  --bg-deep: #ece7de;
  --bg-secondary: #f3efe7;
  --bg-surface: #ffffff;
  --bg-elevated: #f8f5ef;
  --bg-hover: #eee7dc;
  --border-primary: #e3ddd3;
  --border-secondary: #d0c5b6;
  --border-subtle: #ece7df;
  --surface-card-border: #e2dbcf;
  --surface-card-bg: rgba(255, 255, 255, 0.88);
  --accent-text: #8a4f00;
  --accent-text-hover: #6f3f00;
  --accent-border: rgba(184, 119, 31, 0.32);
  --accent-bg: rgba(184, 119, 31, 0.10);
  --accent-bg-hover: rgba(184, 119, 31, 0.16);
  --brand-gradient-soft: linear-gradient(135deg, rgba(184, 119, 31, 0.12), rgba(255, 255, 255, 0.64));
  --btn-primary-bg: #1f2933;
  --btn-primary-hover: #334150;
  --btn-primary-text: #ffffff;
  --btn-primary-shadow: rgba(31, 41, 51, 0.12);
  --text-primary: #20242b;
  --text-secondary: #424954;
  --text-tertiary: #6d7280;
  --text-muted: #8a8991;
}