/* DeepL 设计系统变量 + 规则
   注：基于 https://www.deepl.com/zh/translator 公开样式 + 视觉风格提取
   所有 --inline/inferred 值已标注。
*/

:root {
  /* ============== 主色 ============== */
  --dl-primary: #0F2B46;          /* DeepL 深蓝主色——logo、按钮、hover */
  --dl-accent: #F77A2B;           /* 橙色 CTA (升级Pro、免费试用) */
  --dl-accent-hover: #E5691F;     /* 橙色 hover */

  /* ============== 中性色 ============== */
  --dl-text: #1F1F1F;              /* 主文字 */
  --dl-text-muted: #4A4A4A;        /* 次级文字 */
  --dl-text-link: #0F2B46;         /* 链接 */
  --dl-text-placeholder: #999;     /* placeholder */

  --dl-bg-page: #FFFFFF;           /* 页面背景 */
  --dl-bg-elevated: #FFFFFF;       /* 翻译卡片背景 */
  --dl-bg-soft: #F5F5F5;           /* 搜索框 hover 等 */
  --dl-bg-input: #FFFFFF;

  --dl-border: #E5E5E5;            /* 默认边框 */
  --dl-border-strong: #C9C9C9;     /* 重点边框 */

  /* ============== 字体 ============== */
  --dl-font-base: "Sora", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  --dl-font-serif: "Source Serif Pro", Georgia, serif;
  --dl-font-mono: "JetBrains Mono", "SF Mono", monospace;

  --dl-text-xs: 12px;
  --dl-text-sm: 13px;
  --dl-text-base: 15px;
  --dl-text-md: 16px;
  --dl-text-lg: 18px;
  --dl-text-xl: 20px;
  --dl-text-2xl: 24px;
  --dl-text-3xl: 32px;
  --dl-text-display: 48px;

  --dl-leading-tight: 1.2;
  --dl-leading-normal: 1.5;
  --dl-leading-relaxed: 1.7;

  /* ============== 间距 ============== */
  --dl-space-1: 4px;
  --dl-space-2: 8px;
  --dl-space-3: 12px;
  --dl-space-4: 16px;
  --dl-space-5: 24px;
  --dl-space-6: 32px;
  --dl-space-7: 48px;
  --dl-space-8: 64px;
  --dl-space-9: 96px;

  /* ============== 圆角 ============== */
  --dl-radius-sm: 4px;              /* 输入框、按钮 */
  --dl-radius-md: 8px;              /* 卡片、模态 */
  --dl-radius-lg: 12px;             /* 大卡片 */
  --dl-radius-pill: 999px;          /* 头像、徽章 */

  /* ============== 阴影 ============== */
  --dl-shadow-sm: 0 1px 2px rgba(15, 43, 70, 0.06);
  --dl-shadow-md: 0 4px 12px rgba(15, 43, 70, 0.10);
  --dl-shadow-lg: 0 12px 32px rgba(15, 43, 70, 0.16);

  /* ============== 动效 ============== */
  --dl-dur-fast: 120ms;
  --dl-dur-normal: 200ms;
  --dl-dur-slow: 320ms;
  --dl-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dl-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ============== 透明度 ============== */
  --dl-opacity-disabled: 0.4;
  --dl-opacity-hover: 0.08;        /* hover 时的 overlay */
  --dl-overlay-bg: rgba(15, 43, 70, 0.5);
}

/* ============== 全局基础 ============== */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  font-family: var(--dl-font-base);
  font-size: var(--dl-text-base);
  line-height: var(--dl-leading-normal);
  color: var(--dl-text);
  background: var(--dl-bg-page);
  -webkit-font-smoothing: antialiased;
}
a {
  color: var(--dl-text-link);
  text-decoration: none;
}
button {
  font-family: inherit;
  cursor: pointer;
}

/* ============== 顶部导航 ============== */
.nav {
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 24px;
  background: #fff;
  border-bottom: 1px solid var(--dl-border);
}
.nav-tabs { display: flex; gap: 32px; }
.nav-tab {
  font-size: 15px;
  font-weight: 500;
  color: var(--dl-text-muted);
  cursor: pointer;
  position: relative;
  padding: 18px 0;
}
.nav-tab.is-active {
  color: var(--dl-text);
  font-weight: 600;
}
.nav-tab.is-active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--dl-text);
}
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.btn-primary {
  background: var(--dl-accent);
  color: #fff;
  padding: 10px 20px;
  border-radius: var(--dl-radius-sm);
  font-weight: 600;
  font-size: 14px;
  border: none;
  transition: background var(--dl-dur-fast) var(--dl-ease-out);
}
.btn-primary:hover { background: var(--dl-accent-hover); }
.btn-secondary {
  background: var(--dl-primary);
  color: #fff;
  padding: 12px 28px;
  border-radius: var(--dl-radius-sm);
  font-weight: 600;
  font-size: 15px;
  border: none;
}

/* ============== 翻译主区 ============== */
.translate-shell {
  background: var(--dl-bg-page);
  padding: 32px 24px;
}
.translate-card {
  max-width: 1200px;
  margin: 0 auto;
  background: var(--dl-bg-elevated);
  border-radius: var(--dl-radius-md);
  box-shadow: var(--dl-shadow-md);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  overflow: hidden;
}
.translate-pane {
  padding: 28px 32px;
}
.translate-pane.is-src { border-right: 1px solid var(--dl-border); }
.lang-select {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: var(--dl-radius-sm);
  cursor: pointer;
  background: transparent;
  transition: background var(--dl-dur-fast) var(--dl-ease-out);
}
.lang-select:hover { background: var(--dl-bg-soft); }
.translate-textarea,
.translate-output {
  width: 100%;
  min-height: 280px;
  border: none;
  outline: none;
  resize: none;
  font: inherit;
  font-size: var(--dl-text-lg);
  line-height: var(--dl-leading-normal);
  background: transparent;
  color: var(--dl-text);
}
.translate-textarea::placeholder {
  color: var(--dl-text-placeholder);
}
.translate-output[data-empty="true"] { color: var(--dl-text-placeholder); }

/* ============== 卡片样式 ============== */
.card {
  background: #fff;
  border-radius: var(--dl-radius-lg);
  padding: var(--dl-space-6);
  box-shadow: var(--dl-shadow-sm);
  transition: transform var(--dl-dur-normal) var(--dl-ease-out),
              box-shadow var(--dl-dur-normal) var(--dl-ease-out);
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--dl-shadow-md);
}

/* ============== CTA 按钮 ============== */
.cta-group { display: flex; gap: 16px; }

/* ============== 入场动画 ============== */
@keyframes dl-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: dl-fade-up 480ms var(--dl-ease-out) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}