/* ============================================================
   PatentLab 多工具首页原型
   ============================================================ */

:root {
  --color-bg: #050505;
  --color-bg-elevated: #0a0a0f;
  --color-bg-grain: #0c0a14;
  --color-surface: rgba(255, 255, 255, 0.035);
  --color-surface-hover: rgba(255, 255, 255, 0.06);
  --color-surface-border: rgba(255, 255, 255, 0.08);
  --color-surface-border-strong: rgba(255, 255, 255, 0.14);

  --color-fg: #fafafa;
  --color-fg-muted: #a1a1aa;
  --color-fg-subtle: #71717a;
  --color-fg-faint: #3f3f46;
  --color-beian: #838389;

  --color-accent: #818cf8;
  --color-accent-strong: #6366f1;
  --color-accent-soft: rgba(129, 140, 248, 0.12);
  --color-accent-glow: rgba(99, 102, 241, 0.45);
  --color-violet: #c084fc;
  --color-violet-strong: #a855f7;
  --color-violet-soft: rgba(192, 132, 252, 0.12);
  --color-cyan: #67e8f9;
  --color-cyan-soft: rgba(103, 232, 249, 0.10);

  --color-success: #4ade80;
  --color-success-bg: rgba(74, 222, 128, 0.08);
  --color-success-border: rgba(74, 222, 128, 0.25);
  --color-warning-bg: rgba(251, 191, 36, 0.06);
  --color-warning-border: rgba(251, 191, 36, 0.25);
  --color-warning-fg: #fcd34d;
  --color-danger: #f87171;
  --color-danger-bg: rgba(248, 113, 113, 0.08);
  --color-danger-border: rgba(248, 113, 113, 0.25);
  --color-toast-border: #f97316;

  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "PingFang SC", "Helvetica Neue", "Microsoft YaHei", system-ui, sans-serif;
  --font-serif: "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman",
    "Source Han Serif SC", "Songti SC", "Noto Serif CJK SC", serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "JetBrains Mono", monospace;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-full: 9999px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color-scheme: dark;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  color: var(--color-fg);
  background-color: var(--color-bg);
  line-height: 1.55;
  min-height: 100vh;
  overflow-x: hidden;
  margin: 0;
}

* { border-color: var(--color-surface-border); }

[x-cloak] { display: none !important; }

/* 背景层 */
.particles-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
}

.grain-overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>");
  mix-blend-mode: overlay;
}

.bg-gradient-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 25% 10%, rgba(99, 102, 241, 0.18), transparent 60%),
    radial-gradient(ellipse 50% 50% at 80% 30%, rgba(168, 85, 247, 0.14), transparent 65%),
    radial-gradient(ellipse 70% 60% at 50% 100%, rgba(56, 189, 248, 0.08), transparent 65%);
}

main, header, footer { position: relative; z-index: 10; }

/* 字体与排版 */
.font-serif { font-family: var(--font-serif); letter-spacing: -0.02em; }
.font-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.display-1 {
  font-size: clamp(3rem, 9vw, 7rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-weight: 600;
}

.display-2 {
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 600;
}

.display-3 {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 500;
}

.eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-fg-subtle);
}

.text-gradient-accent {
  background: linear-gradient(135deg, #818cf8 0%, #a855f7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.pill-label__dot {
  width: 6px; height: 6px; border-radius: var(--radius-full);
  background: var(--color-accent);
  box-shadow: 0 0 8px var(--color-accent);
}

/* 玻璃态卡片 */
.glass-card {
  background: var(--color-surface);
  backdrop-filter: saturate(140%) blur(24px) brightness(110%);
  -webkit-backdrop-filter: saturate(140%) blur(24px) brightness(110%);
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg), inset 0 1px 0 0 rgba(255, 255, 255, 0.06);
  position: relative;
  overflow: hidden;
}

.glass-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.18) 50%, transparent 100%);
  pointer-events: none;
}

.glass-card--accent {
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.08) 0%, rgba(255, 255, 255, 0.035) 60%);
  border-color: rgba(129, 140, 248, 0.18);
}

/* 按钮 */
.btn-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 32px;
  background: var(--color-fg);
  color: var(--color-bg);
  font-size: 1rem;
  font-weight: 500;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-fg);
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-out);
  overflow: hidden;
  isolation: isolate;
}

.btn-primary::before {
  content: "";
  position: absolute; inset: -2px;
  background: linear-gradient(135deg, #818cf8, #a855f7, #ec4899);
  border-radius: var(--radius-full);
  opacity: 0; z-index: -1;
  filter: blur(12px);
  transition: opacity var(--duration-base) var(--ease-out);
}

.btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #818cf8 0%, #a855f7 100%);
  color: var(--color-fg);
  border-color: transparent;
  box-shadow: 0 0 32px -4px var(--color-accent-glow);
  transform: translateY(-1px);
}

.btn-primary:hover:not(:disabled)::before { opacity: 1; }
.btn-primary:active:not(:disabled) { transform: translateY(0) scale(0.985); }
.btn-primary:disabled {
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-fg-subtle);
  border-color: var(--color-surface-border);
  cursor: not-allowed;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 32px;
  background: linear-gradient(135deg, var(--color-accent-strong) 0%, var(--color-violet-strong) 100%);
  color: var(--color-fg);
  font-size: 1rem;
  font-weight: 500;
  border-radius: var(--radius-full);
  border: 1px solid rgba(129, 140, 248, 0.4);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--duration-base) var(--ease-out);
  box-shadow: 0 8px 24px -8px var(--color-accent-glow);
}

.btn-secondary:hover {
  background: linear-gradient(135deg, #6366f1 0%, #9333ea 100%);
  color: var(--color-fg);
  box-shadow: 0 12px 32px -8px var(--color-accent-glow), 0 0 32px -4px var(--color-accent-glow);
  transform: translateY(-1px);
}

/* CAD 转化运行态：按钮内嵌进度条，按钮从 52px 撑高到约 96px */
.btn-primary.is-running {
  min-height: 96px;
  padding: 14px 28px;
  align-items: stretch;
  cursor: progress;
}
.cad-running {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.cad-running__row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.cad-running__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #ffffff;
}
.cad-progress {
  position: relative;
  width: 100%;
  height: 6px;
  border-radius: var(--radius-full, 9999px);
  background: rgba(0, 0, 0, 0.12);
  overflow: hidden;
}
.cad-progress__fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6366f1, #a855f7);
  transition: width 240ms ease-out;
  box-shadow: 0 0 12px -2px rgba(168, 85, 247, 0.6);
}

.demo-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-violet-strong);
  background: var(--color-violet-soft);
  border: 1px solid rgba(168, 85, 247, 0.4);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  user-select: none;
  box-shadow: 0 0 16px -4px rgba(168, 85, 247, 0.45);
}

.demo-cta:hover {
  color: var(--color-fg);
  background: rgba(168, 85, 247, 0.22);
  border-color: rgba(168, 85, 247, 0.6);
  box-shadow: 0 0 20px -2px rgba(168, 85, 247, 0.65);
}

/* 仅图标的演示案例下载按钮（无文字）—— 中性常规色，与紫色上传按钮形成主次对比 */
.demo-cta--icon {
  gap: 0;
  padding: 6px 10px;
  align-self: stretch;
  color: var(--color-fg-muted);
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--color-surface-border);
  box-shadow: none;
}
.demo-cta--icon:hover {
  color: var(--color-fg);
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--color-surface-border-strong);
  box-shadow: none;
}

/* 上传区 */
.upload-zone {
  position: relative;
  border: 2px dashed rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-xl);
  padding: 48px 24px;
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-out);
}

.upload-zone:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  box-shadow: inset 0 0 32px -8px var(--color-accent-glow);
}

.upload-zone--active {
  border-color: var(--color-accent);
  border-style: solid;
  background: var(--color-accent-soft);
  box-shadow: inset 0 0 48px -8px var(--color-accent-glow);
}

.upload-file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-lg);
}

.upload-file__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--color-fg-muted);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.upload-file__remove:hover {
  color: var(--color-danger);
  background: var(--color-danger-bg);
  border-color: var(--color-danger-border);
}

/* 单选卡片 */
.radio-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-surface-border);
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-out);
}

.radio-card:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}

.radio-card.is-active {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  box-shadow: 0 0 24px -8px var(--color-accent-glow);
  ring: 1px solid var(--color-accent);
}

.radio-card input { position: absolute; opacity: 0; pointer-events: none; }

/* 开关 */
.toggle {
  width: 48px; height: 28px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
  position: relative;
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-out);
  padding: 0;
}

.toggle__thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--color-fg-muted);
  transition: all var(--duration-base) var(--ease-out);
}

.toggle.is-on {
  background: var(--color-accent-strong);
  border-color: var(--color-accent);
  box-shadow: 0 0 16px -4px var(--color-accent-glow);
}

.toggle.is-on .toggle__thumb {
  left: 23px;
  background: var(--color-fg);
}

/* 步骤徽章 */
.step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: var(--radius-full);
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-size: 11px; font-weight: 600;
  font-family: var(--font-mono);
  border: 1px solid rgba(129, 140, 248, 0.3);
}

/* 工具卡片轮播 */
.carousel-wrapper {
  width: 100%;
  overflow: hidden;
  padding: 24px 0 40px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
}

.carousel-track {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  gap: 44px;
  transition: transform var(--duration-slow) var(--ease-out);
  will-change: transform;
}

/* 瞬移期间禁用卡片自身（及子元素）过渡，避免 is-active 切换/内容变化被动画化产生"二次选中"观感 */
.carousel-track.is-snapping .carousel-card,
.carousel-track.is-snapping .carousel-card * {
  transition: none !important;
}

.carousel-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  margin: 0 auto 4px;
  padding: 7px 16px;
  border-radius: var(--radius-full);
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.28);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-warning-fg);
  box-shadow: 0 0 20px -6px rgba(251, 191, 36, 0.35);
}

.carousel-hint svg {
  color: var(--color-warning-fg);
  transform: rotate(0deg);
}

/* 工具卡片（图片封面风格，沿用设计稿 cards-redesign.html） */
.carousel-card {
  position: relative;
  flex: 0 0 auto;
  width: 340px;
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--color-fg);
  padding: 0;
  transition: transform var(--duration-slow) var(--ease-out),
    box-shadow var(--duration-slow) var(--ease-out),
    border-color var(--duration-slow) var(--ease-out),
    background var(--duration-slow) var(--ease-out),
    filter var(--duration-slow) var(--ease-out);
  transform: scale(0.9);
  box-shadow: none;
}

/* 顶部高光细线 */
.carousel-card::before {
  content: "";
  position: absolute;
  top: 0; left: 16px; right: 16px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-surface-border-strong), transparent);
  z-index: 3;
  pointer-events: none;
}

.carousel-card:hover:not(.is-active):not(.is-disabled) {
  background: rgba(255, 255, 255, 0.05);
  transform: scale(0.94);
  border-color: rgba(129, 140, 248, 0.35);
}

.carousel-card.is-active {
  background: rgba(255, 255, 255, 0.05);
  transform: scale(1.06);
  border-color: rgba(168, 85, 247, 0.55);
  box-shadow:
    0 0 0 1px rgba(168, 85, 247, 0.25),
    0 24px 80px rgba(0, 0, 0, 0.55),
    0 0 60px rgba(168, 85, 247, 0.22);
  z-index: 2;
}

.carousel-card.is-disabled {
  cursor: default;
  opacity: 0.6;
  filter: grayscale(0.45);
}

/* 图片区 */
.image-wrap {
  width: 100%;
  height: 210px;
  position: relative;
  overflow: hidden;
  transition: opacity var(--duration-slow) var(--ease-out);
  opacity: 1;
}

.carousel-card.is-active .image-wrap {
  opacity: 1;
}

.carousel-card.is-disabled .image-wrap {
  opacity: 0.35;
}

.image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.carousel-card.is-disabled .image-wrap img {
  filter: saturate(0.6);
}

.image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5, 5, 5, 0.92) 0%, rgba(5, 5, 5, 0.4) 40%, transparent 70%);
  pointer-events: none;
}

/* NEW 角标：醒目标识新上线工具 */
.carousel-card__new-ribbon {
  position: absolute;
  top: 16px;
  right: 0;
  z-index: 5;
  padding: 6px 14px 6px 16px;
  background: linear-gradient(90deg, #818cf8 0%, #a855f7 100%);
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 6px 0 0 6px;
  box-shadow: 0 4px 20px -4px rgba(129, 140, 248, 0.55);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

/* 文字区（作用域限定在 .carousel-card，避免影响全局 .eyebrow） */
.card-body {
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: opacity var(--duration-slow) var(--ease-out);
  opacity: 1;
}

.carousel-card.is-active .card-body {
  opacity: 1;
}

.carousel-card .eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-fg-subtle);
  margin: 0;
  transition: color var(--duration-slow) var(--ease-out);
}

.carousel-card.is-active .eyebrow {
  color: var(--color-violet);
}

.carousel-card .title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-fg);
  transition: color var(--duration-slow) var(--ease-out);
}

.carousel-card.is-active .title {
  color: var(--color-fg);
}

.carousel-card .desc {
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-fg-muted);
  min-height: 70px;
  transition: color var(--duration-slow) var(--ease-out);
}

.carousel-card.is-active .desc {
  color: var(--color-fg-muted);
}

.card-body__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 2px;
}

.badge {
  align-self: flex-start;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.85);
  transition: opacity var(--duration-slow) var(--ease-out),
    background var(--duration-slow) var(--ease-out),
    border-color var(--duration-slow) var(--ease-out);
  opacity: 1;
}

.carousel-card.is-active .badge {
  opacity: 1;
}

.badge--new {
  background: rgba(103, 232, 249, 0.12);
  border-color: rgba(103, 232, 249, 0.3);
  color: var(--color-cyan);
}

.badge--active {
  background: rgba(168, 85, 247, 0.18);
  border-color: rgba(168, 85, 247, 0.4);
  color: #d8b4fe;
}

.carousel-card__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-fg);
  font-weight: 600;
  opacity: 0.95;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}

.carousel-card__action:hover {
  color: var(--color-accent);
}

/* 轮播指示点 */
.carousel-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-out);
}

.carousel-dot.is-active {
  width: 24px;
  border-radius: 4px;
  background: var(--color-accent);
  box-shadow: 0 0 12px var(--color-accent);
}

/* FAQ */
.faq-item { border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.faq-item:first-child { border-top: 1px solid rgba(255, 255, 255, 0.06); }

.faq-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 24px 4px;
  background: transparent;
  border: none;
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--color-fg);
  text-align: left;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out);
}

.faq-trigger:hover { color: var(--color-accent); }

.faq-trigger__chevron {
  flex-shrink: 0;
  margin-left: 16px;
  color: var(--color-fg-subtle);
  transition: transform var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
}

.faq-trigger[aria-expanded="true"] .faq-trigger__chevron {
  transform: rotate(180deg);
  color: var(--color-accent);
}

.faq-panel {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height var(--duration-slow) var(--ease-out), opacity var(--duration-base) var(--ease-out);
}

.faq-panel.is-open {
  max-height: 800px;
  opacity: 1;
}

.faq-panel__content {
  padding: 0 4px 24px 48px;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-fg-muted);
}

/* FAQ 答案里的高亮：仅文字层面加粗+变色，不加底色/边框/胶囊（沿用原站） */
.faq-panel__content strong {
  color: var(--color-fg);
  font-weight: 600;
  font-feature-settings: "kern" 1;
}

/* Footer */
.editorial-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.beian {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-beian);
  font-size: 10px;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.beian:hover { color: var(--color-fg-muted); }

.beian::before, .beian::after { content: "\200b\200b"; display: inline; }

/* Toast */
.toast {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  align-items: center;
  text-align: center;
  gap: 12px;
  min-width: 300px;
  max-width: 420px;
  padding: 16px 20px;
  background: rgba(15, 15, 20, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid var(--color-toast-border);
  border-radius: var(--radius-md);
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.7);
  font-size: 0.875rem;
  color: var(--color-fg);
  transition-property: opacity;
  transition-duration: 200ms;
  transition-timing-function: var(--ease-out);
  will-change: opacity;
}

.toast__close {
  margin-left: auto;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--color-fg-subtle);
  cursor: pointer;
}

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

@keyframes pulse-glow {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.animate-fade-up { opacity: 1; }
.animate-pulse-glow { animation: pulse-glow 3s var(--ease-in-out) infinite; }

/* 反馈 popover（仿原站） */
.tools-trigger__chevron {
  transition: transform var(--duration-base) var(--ease-out);
}
.tools-popover {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 280px;
  padding: 8px;
  background: rgba(15, 15, 20, 0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--color-surface-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 50;
}

@media (prefers-reduced-motion: no-preference) {
  .animate-fade-up { animation: fade-in 300ms var(--ease-out) both; }
  .animate-fade-up-1 { animation-delay: 60ms; }
  .animate-fade-up-2 { animation-delay: 120ms; }
  .animate-fade-up-3 { animation-delay: 180ms; }
  .animate-fade-up-4 { animation-delay: 240ms; }
}

/* 响应式 */
@media (max-width: 900px) {
  .editorial-grid { grid-template-columns: 1fr; gap: 32px; }
  .carousel-card { width: 280px; }
  .carousel-card__media { height: 160px; }
  .carousel-card__icon { width: 60px; height: 60px; padding: 14px; }
  .carousel-card__body { padding: 20px; }
  .carousel-card__title { font-size: 1.2rem; }
  .carousel-card__desc { font-size: 0.82rem; }
}

@media (max-width: 640px) {
  .display-1 { font-size: clamp(2.2rem, 10vw, 3.5rem) !important; }
  .upload-zone { padding: 32px 16px; }
  .carousel-card { width: 240px; }
  .carousel-card__media { height: 140px; }
  .carousel-card__icon { width: 52px; height: 52px; padding: 12px; }
  .carousel-card__body { padding: 18px; }
  .carousel-card__footer { flex-wrap: wrap; }
  .carousel-card__action { display: none; }
  .btn-primary, .btn-secondary { padding: 0 20px; }
}

/* 无障碍 reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .particles-canvas, .grain-overlay { display: none; }
}

/* ===== 设计变量补充（供走案包预览抽屉样式使用） ===== */
:root {
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-16: 64px;
}

/* ===== 走案包预览抽屉样式（移植自旧站 styles.css） ===== */
.preview-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-out);
}

.preview-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.preview-drawer {
  /* 浮窗定位:默认占满整个浏览器高度(顶天立地),水平居中,宽 ~2/3 屏。
     不再 fixed 到右侧(脱离抽屉),改由 JS 在 startDrag/startResize
     首次触发时把 top/left 落到 style,后续保留用户位置。 */
  position: fixed;
  top: 0;
  left: 50%;
  width: 67vw;
  height: 100vh;
  min-width: 480px;
  min-height: 360px;
  max-width: calc(100vw - 40px);
  max-height: 100vh;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-surface-border-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;                        /* 4 角圆角裁切子元素,避免 resize 句柄/背景漏出造成右下缺损 */
  box-shadow:
    -24px 0 48px -12px rgba(0, 0, 0, 0.7),
    0 24px 60px -12px rgba(0, 0, 0, 0.5);
  z-index: 50;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity var(--duration-base) var(--ease-out);
}

.preview-drawer.is-open {
  opacity: 1;
}

.preview-tabs {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--color-surface-border);
  padding: 0 var(--space-4) 0 var(--space-6);
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.15);
  overflow-x: auto;
  cursor: move;                            /* 提示可拖动(mac 浮窗感) */
  user-select: none;                       /* 拖动时不选中 tab 文字 */
}

.preview-tabs__close {
  margin-left: auto;                       /* 推到 tabs 行最右 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--color-fg-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--duration-fast) var(--ease-out);
}

.preview-tabs__close:hover {
  color: var(--color-fg);
  background: var(--color-surface-hover);
}

/* 右面板内的迷你 × 关闭按钮(退出双屏回到单屏)。
   比外层 .preview-tabs__close 更小,放在右面板 tabs 行最右。 */
.preview-tabs__close--mini {
  margin-left: auto;
  width: 22px;
  height: 22px;
}

/* 4 角 resize 句柄:命中区 14×14px,贴在 .preview-drawer 4 角内侧
   (top/left/right/bottom: 0)。父级 overflow:hidden 会自动裁切圆角处
   多出的部分,不再让方块越过圆角造成右下角"缺损"。
   cursor 设为 nwse-resize / nesw-resize 对应 macOS 文件夹惯例。 */
.preview-resize {
  position: absolute;
  width: 14px;
  height: 14px;
  z-index: 2;
  /* 默认透明;hover 时才显示微弱 cyan 提示,平时不打扰视觉 */
  transition: background var(--duration-fast) var(--ease-out);
}

.preview-resize--nw { top: 0;    left: 0;   cursor: nwse-resize; }
.preview-resize--ne { top: 0;    right: 0;  cursor: nesw-resize; }
.preview-resize--sw { bottom: 0; left: 0;   cursor: nesw-resize; }
.preview-resize--se { bottom: 0; right: 0;  cursor: nwse-resize; }

.preview-resize:hover {
  background: rgba(103, 232, 249, 0.15);
  border-radius: 6px;
}

/* ─── 布局变体(snap-left / snap-right / dual) ─────────────────
   优先级:写在 .preview-resize 之后,避免被 !important 干扰。
   snap-* 模式禁 resize(去掉圆角,4 角都直角 — resize 句柄已隐藏,
   圆角无处可用还容易让用户以为可以抓角缩放),仍允许拖动。
   dual 模式同时隐藏 4 角句柄 + 禁 tabs 拖动。 */
.preview-drawer.is-snap-left {
  left: 0;
  transform: none;
  width: 50vw;
  min-width: 320px;
  max-width: 50vw;
  border-radius: 0;                       /* resize 已禁用,圆角无意义 */
}

.preview-drawer.is-snap-right {
  left: 50vw;
  transform: none;
  width: 50vw;
  min-width: 320px;
  max-width: 50vw;
  border-radius: 0;                       /* 同上 */
}

.preview-drawer.is-dual {
  left: 0;
  transform: none;
  width: 100vw;
  min-width: 0;
  max-width: 100vw;
  border-radius: 0;
  /* 阴影保留一点视觉层级,但不画外发光,免得遮住左右两侧边缘 */
  box-shadow: inset 0 0 0 1px var(--color-surface-border-strong);
}

/* snap-* / dual 模式:禁 resize(隐藏 4 角句柄),仅允许拖动 */
.preview-drawer.is-snap-left .preview-resize,
.preview-drawer.is-snap-right .preview-resize,
.preview-drawer.is-dual .preview-resize { display: none; }

.preview-drawer.is-dual .preview-tabs { cursor: default; }

/* ─── tabs 行布局按钮(双屏 / 吸左 / 吸右) ─────────────────── */
.preview-tabs__spacer {
  flex: 1 1 auto;                              /* 把后续按钮全推到右侧 */
}

.preview-tabs__layout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: var(--space-2);
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--color-fg-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--duration-fast) var(--ease-out);
}

.preview-tabs__layout:hover {
  color: var(--color-fg);
  background: var(--color-surface-hover);
  border-color: var(--color-surface-border);
}

.preview-tabs__layout.is-active {
  color: #6ee7b7;                              /* emerald-300,亮绿色文字:与 active tab 同色 */
  background: linear-gradient(180deg,
    rgba(110, 231, 183, 0.10) 0%,
    rgba(74, 222, 128, 0.22) 100%);
  border-color: rgba(74, 222, 128, 0.35);
  box-shadow:
    inset 0 0 0 1px rgba(110, 231, 183, 0.15),
    0 0 12px -2px rgba(74, 222, 128, 0.35);
}

/* ─── 双屏/单屏面板(dual 模式时 .preview-content 变 flex 两列) ─── */
.preview-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
}

/* dual 模式:.preview-content 由块级变 flex 两列。
   覆盖原 .preview-content 的辐射渐变背景(默认 radial-gradient + var(--color-bg)),
   改纯色,避免滚动时透过面板间隙/边框漏出深紫蓝渐变。 */
.preview-drawer.is-dual .preview-content {
  display: flex;
  flex-direction: row;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-bg);                 /* 纯色兜底,无渐变 */
}

/* dual 模式:主面板/右面板背景改成跟 A4 纸同色(#fafafa)。
   原 .preview-pane--main 用深色 (--color-bg-elevated) 时,滚到 .a4-page 末尾会露出深色
   "空白"区(因为 .a4-page 只有 min-height 297mm,长内容增长后页面结束处仍有空间)。
   改成米白色后,面板和纸张无缝衔接,无论滚到哪里都是纸面观感。
   边框:不要画 — 原 border 用 var(--color-surface-border(=白色 8% 透明),
   在 #fafafa 浅色背景上会显白边(亮于背景),像 tab 行下方多了一条亮边。
   双屏不需要面板外框,深色 tab 行本身的视觉层次已经够用,
   面板边缘由浅色背景与 .preview-content 深色背景自然区分。 */
.preview-drawer.is-dual .preview-pane--main,
.preview-drawer.is-dual .preview-pane--second {
  flex: 1 1 50%;
  border: none;
  border-radius: var(--radius-sm);
  background: #fafafa;                       /* 与 .a4-page 同色 */
  overflow: auto;
}

/* dual 模式:A4 纸本身填满面板可视区(避免纸面比面板矮时下方露出"另一层纸边"的感觉)。
   min-height: 100% 让 .a4-page 至少等于面板内容区高度。
   关键:box-shadow 必须关掉 — 原阴影在浅色面板上向下散开成"深色渐变带",
   即便纸张填满面板,纸张边缘外的阴影区域在浅底上仍可见,看起来像渐变残留。
   dual 模式本来就跟单屏观感不同(面板一体感),不需要再保留"漂浮纸"的阴影。 */
.preview-drawer.is-dual .a4-page {
  min-height: 100%;
  box-sizing: border-box;
  box-shadow: none;
}

/* 面板内嵌 tab 行(dual 模式专用):背景色必须跟外层 .preview-tabs 一致,
   否则在浅色面板背景上 12% 黑叠加会显得很怪、跟单屏观感脱节。
   这里直接用深色实底 + 微透明叠加,跟 .preview-tabs 视觉一致。
   position: sticky 让 tabs 在面板滚动时冻结在顶部,跟单屏外层 tabs 行为一致。
   边框:外层单屏 .preview-tabs 用的是 --color-surface-border(= rgba(255,255,255,0.08)
   偏白 8% 透明),在单屏深色背景下看着自然;但双屏 tabs 背景是紫色叠加 + 黑深底,
   白色 8% 透明边框会显白边。统一改成黑色半透明(rgba(0,0,0,0.4)),任何底色上都像
   "在深色面板里嵌了一条暗槽",跟单屏观感一致。 */
.preview-pane__tabs {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
  padding: 0 var(--space-3);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 3;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.08)),
    var(--color-bg-elevated);                 /* 与外层 .preview-tabs 同色调 */
  gap: var(--space-1);
}

.preview-tab--mini {
  padding: var(--space-2) var(--space-3) !important;   /* 比外层 tab 更矮 */
  font-size: var(--text-xs) !important;
  padding-left: var(--space-5) !important;            /* 左间距比竖条位置(left: var(--space-3)=12px)多 4px,避免竖条贴字 */
}

.preview-tab {
  position: relative;
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: color var(--duration-fast) var(--ease-out),
    background var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    text-shadow var(--duration-fast) var(--ease-out);
}

/* 左侧细色条 — 仅 active 显示(辅助视觉锚) */
.preview-tab::before {
  content: "";
  position: absolute;
  left: var(--space-3);
  top: 25%;
  bottom: 25%;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--color-success), #6ee7b7);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.preview-tab:hover {
  color: var(--color-fg);
  background: rgba(255, 255, 255, 0.025);
}

.preview-tab.is-active {
  color: #6ee7b7;                          /* emerald-300,亮绿色文字:在深色背景里最亮的"霓虹"色 */
  font-weight: 700;
  letter-spacing: 0.02em;
  border-bottom-color: var(--color-success);
  background: linear-gradient(180deg,
    rgba(110, 231, 183, 0.10) 0%,
    rgba(74, 222, 128, 0.22) 100%);
  text-shadow: 0 0 20px rgba(110, 231, 183, 0.55), 0 0 4px rgba(110, 231, 183, 0.9);
  box-shadow:
    inset 0 -2px 16px -2px rgba(74, 222, 128, 0.5),
    0 0 18px -4px rgba(74, 222, 128, 0.4);
}

.preview-tab.is-active::before {
  opacity: 1;
}

.preview-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-6);
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(99, 102, 241, 0.08), transparent 60%),
    var(--color-bg);
}

.preview-loading,
.preview-error,
.preview-empty {
  text-align: center;
  padding: var(--space-16) var(--space-6);
  color: var(--color-fg-muted);
  font-size: var(--text-sm);
}

.preview-error {
  color: var(--color-danger);
}

/* ============================================================
   A4 预览顶部页眉（嵌在 .a4-page 内部，作为纸张视觉延伸。
   灰线 + 居中宋体 + 灰线，模拟 Word 打印预览的章节页眉。
   注意：这是 tab 级装饰，多张 A4 纵向堆叠时仅顶部一份，不每页重复）
   ============================================================ */

.a4-header {
  /* 贴到 .a4-page padding(上 25mm)内的最顶部:
     -25mm 把页眉的顶边拉到纸张最上沿,只保留下方分隔线。
     顶 padding 4px 留呼吸(原 0 太贴边),margin-bottom 6mm 拉大正文章距。 */
  margin: -25mm 0 6mm 0;
  padding-top: 4px;
}

.a4-header__line {
  height: 1px;
  background: #71717a;                     /* zinc-500,米白纸张上的清晰灰 */
  margin: 5px 0 0 0;
}

.a4-header__text {
  text-align: center;
  font-family: "SimHei", "STHeiti", "Heiti SC", "Microsoft YaHei",
               "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
  font-size: 14pt;                          /* 四号 = 14pt */
  font-weight: 600;
  color: #1f1f23;
  letter-spacing: 0.4em;                    /* 字间距拉开,模拟中文印刷"权 利 要 求 书" */
  padding-right: 0.4em;                    /* 抵消 letter-spacing 末字右偏移 */
  line-height: 1.5;
  margin: 0;
}

.a4-body {
  /* 正文容器:与原 .a4-page 内的 p/claim/figure 等保持完全相同的样式继承 */
  margin: 0;
}

/* ============================================================
   A4 预览纸
   ============================================================ */

.a4-page {
  width: 210mm;
  /* 高度不锁死，长内容自然延伸；多张 A4 时上下间距由 .preview-content 留出。
     min-height = 真 A4 高度 297mm，让空页/稀疏内容视觉上对齐 Word 单页比例 */
  min-height: 297mm;
  max-width: 100%;
  margin: 0 auto;
  padding: 25mm 20mm 25mm 25mm;   /* 模拟打印页边距 */
  background: #fafafa;
  color: #1f1f23;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 24px 48px -12px rgba(0, 0, 0, 0.7),
    0 4px 8px -4px rgba(0, 0, 0, 0.5);
  border-radius: 2px;
  font-family: "Source Han Serif SC", "Songti SC", "Noto Serif CJK SC",
               "SimSun", "宋体", serif;
  font-size: 10.5pt;                /* 宋体五号 */
  line-height: 1.75;
  word-break: break-word;
  overflow-wrap: break-word;
}

.a4-page + .a4-page {
  margin-top: var(--space-8);
}

.a4-page p {
  margin: 0 0 0.5em 0;
  text-indent: 2em;                 /* 中文段落首行缩进 2 字 */
}

/* 覆盖 Tailwind preflight 的 img{display:block} — 行内图片必须保持 inline,
   否则文字/公式/图片混排时,每张图都会强制换行,破坏原 docx 排版 */
.a4-page p img,
.a4-page .claim img,
.a4-page .claim-sub img {
  display: inline;
  vertical-align: middle;
}

/* 附图 tab 内的 img 仍是 block（居中显示） */
.a4-page .figure img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  background: rgba(0, 0, 0, 0.03);
}

.a4-page p.no-indent,
.a4-page .invention-title,
.a4-page .spec-heading {
  text-indent: 0;
}

.a4-page .invention-title {
  text-align: center;
  font-size: 14pt;
  font-weight: 700;
  margin: 0 0 1.2em 0;
  letter-spacing: 0.04em;
}

.a4-page .spec-heading {
  font-size: 12pt;
  font-weight: 700;
  margin: 1.2em 0 0.6em 0;
}

.a4-page .spec-section {
  margin: 0 0 1em 0;
}

.a4-page .claim {
  display: flex;
  align-items: flex-start;
  gap: 0.4em;
  margin: 0.6em 0;
}

.a4-page .claim-num {
  display: inline-block;
  min-width: 2em;
  font-weight: 500;
  flex-shrink: 0;
  text-indent: 0;
}

.a4-page .claim-body {
  flex: 1;
  text-indent: 0;
}

/* 权利要求书的子项：每段 claim-text 独立一行，缩进避开编号列 */
.a4-page .claim-sub {
  margin: 0.15em 0 0.15em 2em;     /* 2em 缩进 = 编号列宽 */
  text-indent: 0;
  color: #1f1f23;
}

.a4-page .para-num {
  display: inline-block;
  margin-right: 0.4em;
  color: #444;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.85em;
  font-weight: 500;
  text-indent: 0;
}

.a4-page .figure {
  text-align: center;
  margin: 1.5em 0;
  text-indent: 0;
}

.a4-page .figure-label {
  margin-top: 0.5em;
  font-size: 10pt;
  color: #333;
  font-weight: 500;
}

.a4-page .empty-hint {
  text-align: center;
  color: #888;
  font-style: italic;
  text-indent: 0;
  padding: 4em 0;
}

.a4-page sup,
.a4-page sub {
  font-size: 0.75em;
  line-height: 0;
}

.a4-page sup {
  vertical-align: super;
}

.a4-page sub {
  vertical-align: sub;
}

/* ============================================================
   预览抽屉按钮组（在成功卡片里）
   ============================================================ */

.action-row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.action-row > * {
  flex: 1;
  min-width: 200px;
}

/* ============================================================
   预览抽屉移动端微调
   ============================================================ */

@media (max-width: 768px) {
  .preview-drawer {
    /* 移动端:全屏浮窗,无圆角,水平不偏移(JS startDrag 也不会触发) */
    width: 100vw;
    height: 100vh;
    min-width: 0;
    min-height: 0;
    max-width: 100vw;
    max-height: 100vh;
    top: 0;
    left: 0;
    transform: none;
    border-radius: 0;
    border: none;
  }

  /* 移动端固定全屏,不显示 4 角句柄、不允许拖动 */
  .preview-resize { display: none; }
  .preview-tabs { cursor: default; }

  .a4-page {
    padding: 16mm 12mm;
    min-height: 200mm;
  }

  .action-row > * {
    min-width: 0;
  }
}

/* ============================================================
   隐私政策 / 用户协议 长文版式
   目标：紧凑、标题突出、正文段落自然
   ============================================================ */

.legal-doc {
  /* 长文容器，无额外样式，仅做命名空间 */
}

.legal-block {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-surface-border);
}

.legal-block:first-of-type {
  border-top: 0;
  margin-top: var(--space-6);
  padding-top: 0;
}

.legal-h2 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-fg);
  letter-spacing: 0;
  margin-bottom: var(--space-3);
}

.legal-h3 {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-fg);
  margin-top: var(--space-3);
  margin-bottom: var(--space-2);
}

.legal-ul {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-3) 0;
}

.legal-ul > li {
  padding-left: 0;
  margin-bottom: var(--space-2);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-fg-muted);
}

.legal-ul > li::before {
  content: none;
}

.legal-ul > li strong {
  color: var(--color-fg);
  font-weight: 600;
}

.legal-doc p {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--color-fg-muted);
  margin-bottom: var(--space-2);
}

.legal-doc a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-accent-soft);
  transition: color 0.2s, text-decoration-color 0.2s;
}

.legal-doc a:hover {
  color: var(--color-violet);
  text-decoration-color: var(--color-accent);
}

/* 注入的后端 CAD 预览 SVG：等比缩放至容器内，不溢出
   注意：app.js 的 _stripSvgSize() 已剥掉 SVG 自身的 width/height 物理单位属性
   （如 width="270.9mm"），此处只需让 SVG 完全靠 viewBox 自适应容器 */
.cad-preview-frame {
  border: 1px solid var(--color-surface-border, rgba(255, 255, 255, 0.14));
  border-radius: var(--radius-md);
  background: #fafafa;
  overflow: hidden;
  padding: 8px;
  width: 100%;
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cad-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.cad-preview svg {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
  /* 保留 viewBox 比例缩放 */
  object-fit: contain;
}

/* ===== 更新日志弹窗 ===== */
.changelog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.changelog-modal {
  width: 100%;
  max-width: 560px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  background: rgba(18, 18, 20, 0.92);
  border: 1px solid var(--color-surface-border);
  border-radius: 16px;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.changelog-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--color-surface-border);
}
.changelog-modal__title {
  margin-top: 0.25rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-fg);
}
.changelog-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: var(--color-fg-muted);
  transition: color 0.15s, background 0.15s;
}
.changelog-modal__close:hover {
  color: var(--color-fg);
  background: var(--color-surface-hover);
}
.changelog-modal__body {
  padding: 0.5rem 1.5rem 1.5rem;
  overflow-y: auto;
}
.changelog-item {
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-surface-border);
}
.changelog-item:last-child {
  border-bottom: none;
}
.changelog-item__date {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--color-fg-subtle);
  margin-bottom: 0.35rem;
}
.changelog-item__text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-fg);
}
.changelog-empty {
  padding: 2rem 0;
  text-align: center;
  color: var(--color-fg-muted);
  font-size: 0.9rem;
}