/* ============================================================
   Lumina Transfer — 页面级补充样式
   基底: @lumina-ui/tokens v0.4.0 + @lumina-ui/web v0.4.0 (官方 dist)
   本文件仅补充官网组件库未覆盖的页面结构, 所有色值/间距/圆角
   一律取自官方令牌, 不硬编码颜色。
   ============================================================ */

/* 统一字体: 微软雅黑优先 (用户规范), 其余沿用官方回退栈 */
:root {
  --lm-sys-font-family-body: "Microsoft YaHei", "微软雅黑", var(--lm-ref-font-family-body);
  --lm-sys-font-family-display: "Microsoft YaHei", "微软雅黑", var(--lm-ref-font-family-display);
  --lm-container-max-width: 1120px;
}

html, body { margin: 0; padding: 0; }
body { background-color: var(--lm-sys-color-bg-canvas); }
.lm-app { min-height: 100vh; }

/* 卡片: 契约要求 1px 细边框分层 (官方 .lm-card 仅实色底) */
.lm-card {
  border: 1px solid var(--lm-sys-color-border-subtle);
  box-shadow: var(--lm-sys-shadow-sm);
}
.lm-card--elevated { box-shadow: var(--lm-sys-shadow-md); }

/* ---------- 顶栏 ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--lm-sys-space-4);
  padding: var(--lm-sys-space-5) 0 var(--lm-sys-space-4);
  border-bottom: 1px solid var(--lm-sys-color-border-subtle);
  margin-bottom: var(--lm-sys-space-6);
}
.brand { display: flex; align-items: center; gap: var(--lm-sys-space-3); }
.brand-mark {
  width: 38px; height: 38px; flex-shrink: 0;
  display: grid; place-items: center;
  border: 1px solid var(--lm-sys-color-border-default);
  border-radius: var(--lm-sys-radius-md);
  background: var(--lm-sys-color-bg-surface);
  color: var(--lm-sys-color-fg-accent);
}
.brand-mark svg { width: 20px; height: 20px; }
.brand-name { font-size: var(--lm-sys-font-size-lead); font-weight: 600; letter-spacing: -0.01em; }
.brand-sub { font-size: var(--lm-sys-font-size-caption); color: var(--lm-sys-color-fg-tertiary); margin-top: 2px; }
.conn-badge {
  display: inline-flex; align-items: center; gap: var(--lm-sys-space-2);
  font-size: var(--lm-sys-font-size-caption); color: var(--lm-sys-color-fg-secondary);
  border: 1px solid var(--lm-sys-color-border-subtle);
  border-radius: var(--lm-sys-radius-full);
  padding: 6px 12px; background: var(--lm-sys-color-bg-surface);
}
.conn-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lm-sys-color-fg-muted); }
.conn-dot.on { background: var(--lm-sys-color-solid-success); }
.conn-dot.off { background: var(--lm-sys-color-solid-danger); }

/* ---------- 功能切换 ---------- */
.tabs { display: flex; gap: var(--lm-sys-space-1); border-bottom: 1px solid var(--lm-sys-color-border-subtle); margin-bottom: var(--lm-sys-space-5); }
.tab-item {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font-family: inherit; font-size: var(--lm-sys-font-size-body-sm); font-weight: 500;
  color: var(--lm-sys-color-fg-tertiary);
  padding: var(--lm-sys-space-3) var(--lm-sys-space-4);
  border-bottom: 2px solid transparent;
  transition: color var(--lm-sys-duration-fast) var(--lm-sys-easing-breeze), border-color var(--lm-sys-duration-fast);
}
.tab-item:hover { color: var(--lm-sys-color-fg-primary); }
.tab-item.active { color: var(--lm-sys-color-fg-accent); border-bottom-color: var(--lm-sys-color-solid-accent); font-weight: 600; }
.tab-item svg { width: 15px; height: 15px; vertical-align: -3px; margin-right: 6px; }
.tab-pane { display: none; }
.tab-pane.active { display: block; animation: lt-bloom var(--lm-sys-duration-slow) var(--lm-sys-easing-bloom); }

@keyframes lt-bloom {
  from { opacity: 0; transform: translateY(6px) scale(0.995); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }

/* ---------- 布局 ---------- */
.main-grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: var(--lm-sys-space-5); align-items: start; }
@media (max-width: 900px) { .main-grid { grid-template-columns: 1fr; } }
.card-title-row { display: flex; align-items: center; justify-content: space-between; gap: var(--lm-sys-space-3); margin-bottom: var(--lm-sys-space-4); }
.section-title { font-size: var(--lm-sys-font-size-lead); font-weight: 600; }
.muted { color: var(--lm-sys-color-fg-tertiary); }
.caption { font-size: var(--lm-sys-font-size-caption); }
.mono { font-family: var(--lm-sys-font-family-mono); letter-spacing: 0.06em; }

/* ---------- 步骤条 ---------- */
.steps { display: flex; flex-direction: column; gap: var(--lm-sys-space-3); }
.step {
  display: flex; align-items: flex-start; gap: var(--lm-sys-space-3);
  padding: var(--lm-sys-space-4);
  border: 1px solid var(--lm-sys-color-border-subtle);
  border-radius: var(--lm-sys-radius-md);
  background: var(--lm-sys-color-bg-surface);
  opacity: 0.55; transition: opacity var(--lm-sys-duration-base), border-color var(--lm-sys-duration-base);
}
.step.active { opacity: 1; border-color: var(--lm-sys-color-border-focus); }
.step.done { opacity: 1; }
.step-num {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%;
  border: 1.5px solid var(--lm-sys-color-border-strong);
  display: grid; place-items: center; font-size: 12px; font-weight: 600;
  color: var(--lm-sys-color-fg-secondary);
  transition: all var(--lm-sys-duration-base) var(--lm-sys-easing-breeze);
}
.step.active .step-num { border-color: var(--lm-sys-color-solid-accent); background: var(--lm-sys-color-solid-accent); color: var(--lm-sys-color-fg-on-accent); }
.step.done .step-num { border-color: var(--lm-sys-color-solid-success); background: var(--lm-sys-color-solid-success); color: var(--lm-sys-color-fg-on-success); }
.step-body { flex: 1; min-width: 0; }
.step-title { font-size: var(--lm-sys-font-size-body-sm); font-weight: 600; }
.step-desc { font-size: var(--lm-sys-font-size-caption); color: var(--lm-sys-color-fg-tertiary); margin-top: 2px; }
.step-row { display: flex; align-items: center; gap: var(--lm-sys-space-3); flex-wrap: wrap; margin: var(--lm-sys-space-3) 0; }
.err-msg { font-size: var(--lm-sys-font-size-caption); color: var(--lm-sys-color-fg-danger); min-height: 18px; margin-top: var(--lm-sys-space-2); }
.ok-msg { font-size: var(--lm-sys-font-size-caption); color: var(--lm-sys-color-fg-success); min-height: 18px; margin-top: var(--lm-sys-space-2); }
.kbd-input { text-align: center; letter-spacing: 0.35em; }

/* ---------- 拖放区 ---------- */
.dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 172px; padding: var(--lm-sys-space-6); text-align: center; cursor: pointer;
  border: 1.5px dashed var(--lm-sys-color-border-strong);
  border-radius: var(--lm-sys-radius-lg);
  background: var(--lm-sys-color-bg-surface);
  transition: border-color var(--lm-sys-duration-fast) var(--lm-sys-easing-breeze), background-color var(--lm-sys-duration-fast);
}
.dropzone:hover, .dropzone.drag { border-color: var(--lm-sys-color-solid-accent); background: var(--lm-sys-color-soft-accent-bg); }
.dz-icon { color: var(--lm-sys-color-fg-accent); margin-bottom: var(--lm-sys-space-3); }
.dz-icon svg { width: 34px; height: 34px; }
.dz-title { font-size: var(--lm-sys-font-size-body-sm); font-weight: 600; }
.dz-hint { font-size: var(--lm-sys-font-size-caption); color: var(--lm-sys-color-fg-tertiary); margin-top: var(--lm-sys-space-2); line-height: 1.7; }
.dz-hint b { color: var(--lm-sys-color-fg-secondary); font-weight: 600; }

/* ---------- 进度 ---------- */
.progress-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--lm-sys-space-2); }
.progress-name { font-size: var(--lm-sys-font-size-body-sm); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.progress-pct { font-size: var(--lm-sys-font-size-body-sm); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--lm-sys-color-fg-accent); }
.lm-progress { height: 8px; }
.lm-progress__bar { width: 0; }
.lm-progress__bar.done { background-color: var(--lm-sys-color-solid-success); }
.speed-line { display: flex; justify-content: space-between; gap: var(--lm-sys-space-3); font-size: var(--lm-sys-font-size-caption); color: var(--lm-sys-color-fg-tertiary); margin-top: var(--lm-sys-space-2); }
.speed-line b { color: var(--lm-sys-color-fg-secondary); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ---------- 统计 / 链接框 ---------- */
.stat-row { display: flex; gap: var(--lm-sys-space-4); flex-wrap: wrap; }
.stat { display: flex; flex-direction: column; gap: 4px; min-width: 108px; }
.stat-label { font-size: var(--lm-sys-font-size-caption); color: var(--lm-sys-color-fg-tertiary); }
.stat-value { font-size: var(--lm-sys-font-size-lead); font-weight: 600; font-variant-numeric: tabular-nums; }
.link-box { display: flex; align-items: stretch; gap: var(--lm-sys-space-2); }
.link-field {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: flex; align-items: center; padding: 0 var(--lm-sys-space-3);
  border: 1px solid var(--lm-sys-color-border-default);
  border-radius: var(--lm-sys-radius-md);
  background: var(--lm-sys-color-bg-sunken);
  font-family: var(--lm-sys-font-family-mono); font-size: var(--lm-sys-font-size-body-sm);
  color: var(--lm-sys-color-fg-secondary);
}
.copy-btn { flex-shrink: 0; }
.copy-btn svg { width: 14px; height: 14px; }

/* ---------- 特性列表 ---------- */
.feature-row { display: flex; align-items: center; justify-content: space-between; gap: var(--lm-sys-space-3); padding: var(--lm-sys-space-3) 0; }
.feature-row + .feature-row { border-top: 1px solid var(--lm-sys-color-border-subtle); }
.feature-label { font-size: var(--lm-sys-font-size-body-sm); font-weight: 500; }
.feature-hint { font-size: var(--lm-sys-font-size-caption); color: var(--lm-sys-color-fg-tertiary); margin-top: 2px; line-height: 1.6; }

/* ---------- 分片位图 ---------- */
.chunk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13px, 1fr)); gap: 3px; margin-top: var(--lm-sys-space-3); }
.chunk-cell { height: 11px; border-radius: 2px; background: var(--lm-sys-color-bg-sunken); border: 1px solid var(--lm-sys-color-border-subtle); }
.chunk-cell.recv { background: var(--lm-sys-color-soft-accent-bg); border-color: var(--lm-sys-color-soft-accent-fg); }
.chunk-cell.done { background: var(--lm-sys-color-solid-success); border-color: var(--lm-sys-color-solid-success); }
.chunk-legend { display: flex; gap: var(--lm-sys-space-4); font-size: var(--lm-sys-font-size-caption); color: var(--lm-sys-color-fg-tertiary); margin-top: var(--lm-sys-space-2); }
.chunk-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; vertical-align: -1px; margin-right: 5px; }

/* ---------- Toast ---------- */
.toaster { position: fixed; right: var(--lm-sys-space-5); bottom: var(--lm-sys-space-5); z-index: 90; display: flex; flex-direction: column; gap: var(--lm-sys-space-2); pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: var(--lm-sys-space-2);
  max-width: 420px; padding: var(--lm-sys-space-3) var(--lm-sys-space-4);
  border: 1px solid var(--lm-sys-color-border-subtle);
  border-radius: var(--lm-sys-radius-md);
  background: var(--lm-sys-color-bg-raised);
  box-shadow: var(--lm-sys-shadow-lg);
  font-size: var(--lm-sys-font-size-body-sm); color: var(--lm-sys-color-fg-primary);
  animation: lt-bloom var(--lm-sys-duration-base) var(--lm-sys-easing-bloom);
}
.toast.out { opacity: 0; transform: translateY(6px); transition: opacity var(--lm-sys-duration-base) var(--lm-sys-easing-fall), transform var(--lm-sys-duration-base); }
.t-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--lm-sys-color-solid-accent); }
.toast.ok .t-dot { background: var(--lm-sys-color-solid-success); }
.toast.err .t-dot { background: var(--lm-sys-color-solid-danger); }

/* ---------- 结果面板 ---------- */
.result-panel { display: none; }
.result-panel.show { display: block; animation: lt-bloom var(--lm-sys-duration-slow) var(--lm-sys-easing-bloom); }

/* ---------- 中转站 ---------- */
.relay-url-row { display: flex; gap: var(--lm-sys-space-2); align-items: stretch; }
.relay-url-row .lm-input-wrapper { flex: 1; }
.strategy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--lm-sys-space-3); margin-top: var(--lm-sys-space-4); }
@media (max-width: 700px) { .strategy-grid { grid-template-columns: 1fr; } }
.strategy-item { padding: var(--lm-sys-space-3); border: 1px solid var(--lm-sys-color-border-subtle); border-radius: var(--lm-sys-radius-md); background: var(--lm-sys-color-bg-surface); }
.strategy-item .s-title { font-size: var(--lm-sys-font-size-body-sm); font-weight: 600; }
.strategy-item .s-desc { font-size: var(--lm-sys-font-size-caption); color: var(--lm-sys-color-fg-tertiary); margin-top: 4px; line-height: 1.6; }
.relay-meta { display: flex; flex-wrap: wrap; gap: var(--lm-sys-space-2); margin-top: var(--lm-sys-space-3); }
.relay-live { display: flex; align-items: center; gap: var(--lm-sys-space-2); font-size: var(--lm-sys-font-size-caption); color: var(--lm-sys-color-fg-secondary); }
.spin { display: inline-block; width: 13px; height: 13px; border: 2px solid var(--lm-sys-color-border-default); border-top-color: var(--lm-sys-color-solid-accent); border-radius: 50%; animation: lt-spin 0.8s linear infinite; }
@keyframes lt-spin { to { transform: rotate(360deg); } }
.source-url { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--lm-sys-font-family-mono); font-size: var(--lm-sys-font-size-caption); color: var(--lm-sys-color-fg-tertiary); }

/* ---------- 徽标语义色 (官方 soft 令牌) ---------- */
/* 官方 dist 只给 .lm-badge--neutral.lm-badge--soft 这类组合定义配色；
   页面里单用 lm-badge--soft 的徽标需要补一个默认 neutral 配色，
   否则无底色、文字继承默认色，观感很差。放在语义色之前以便被覆盖。 */
.lm-badge--soft {
  background-color: var(--lm-sys-color-soft-neutral-bg);
  color: var(--lm-sys-color-soft-neutral-fg);
  border-color: var(--lm-sys-color-border-subtle);
}
.badge-blue  { background: var(--lm-sys-color-soft-accent-bg);  color: var(--lm-sys-color-soft-accent-fg); }
.badge-green { background: var(--lm-sys-color-soft-success-bg); color: var(--lm-sys-color-soft-success-fg); }
.badge-red   { background: var(--lm-sys-color-soft-danger-bg);  color: var(--lm-sys-color-soft-danger-fg); }
.badge-amber { background: var(--lm-sys-color-soft-warning-bg); color: var(--lm-sys-color-soft-warning-fg); }

/* ---------- 空状态 / 错误 ---------- */
.empty-panel { display: none; text-align: center; padding: var(--lm-sys-space-8) var(--lm-sys-space-4); }
.empty-panel.show { display: block; }
.empty-icon { color: var(--lm-sys-color-fg-muted); margin-bottom: var(--lm-sys-space-3); }
.empty-icon svg { width: 40px; height: 40px; }

/* ============================================================
   UI 修复: 图标尺寸兜底 / 分段控件选中态 / 文字对比度
   ============================================================ */

/* 1) 官方 .lm-input-wrapper__icon 只给容器设了 font-size, 未约束内部 svg;
      内联 SVG 只有 viewBox 时会被渲染成 300x150 的巨大图形, 像盖了层水印。
      这里锁定所有内联图标尺寸。 */
.lm-input-wrapper__icon {
  flex: 0 0 16px; width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
}
.lm-input-wrapper__icon svg { width: 16px; height: 16px; flex-shrink: 0; }
.lm-app svg { max-width: 100%; }
button svg, .lm-badge svg, .lm-field svg { max-width: 18px; max-height: 18px; }

/* 2) 官方分段控件的蓝底来自 .lm-segmented__thumb 滑块, --active 只把文字改白;
      缺少滑块时就是白字压浅灰底, 几乎看不见。直接给选中项蓝色实底。 */
.lm-segmented .lm-segmented__item { color: var(--lm-sys-color-fg-secondary); }
.lm-segmented .lm-segmented__item--active,
.lm-segmented .lm-segmented__item--active:hover {
  background-color: var(--lm-sys-color-solid-accent);
  color: var(--lm-sys-color-fg-on-accent);
  box-shadow: var(--lm-sys-shadow-sm);
}

/* 3) 官方 tertiary 在白底上偏灰, 页面里大量小字发虚; 统一提到 secondary,
      关键数值用 primary, 层次更清晰。错误/成功提示保留语义色不动。 */
.caption, .muted, .feature-hint, .stat-label, .speed-line, .dz-hint,
.step-desc, .brand-sub, .lm-field__hint, .source-url, .chunk-legend,
.strategy-item .s-desc, .relay-live, .conn-badge, .progress-name {
  color: var(--lm-sys-color-fg-secondary);
}
.speed-line b, .dz-hint b { color: var(--lm-sys-color-fg-primary); font-weight: 600; }
.link-field { color: var(--lm-sys-color-fg-primary); }
.lm-input::placeholder { color: var(--lm-sys-color-fg-tertiary); opacity: 1; }
.lm-field__label { color: var(--lm-sys-color-fg-primary); }

/* 4) 未激活步骤原先 opacity 0.55, 整块文字发灰; 提高到 0.88 保留层次且可读 */
.step { opacity: 0.88; }
.step.active { opacity: 1; }

/* 5) 卡片/输入框边框略加深, 1px 细边框分层更清楚 */
.lm-card, .lm-input-wrapper, .link-field { border-color: var(--lm-sys-color-border-default); }

/* 6) 中文小字可读性: 官方 caption 仅 11px, 且 .lm-app 开了 antialiased,
      微软雅黑笔画会明显发虚发灰。页面级提到 12px / 字重 500, 关闭平滑细化。 */
.lm-app { -webkit-font-smoothing: auto; }
.caption, .muted, .feature-hint, .stat-label, .speed-line, .dz-hint,
.step-desc, .brand-sub, .lm-field__hint, .source-url, .chunk-legend,
.strategy-item .s-desc, .relay-live, .conn-badge, .lm-field__hint {
  font-size: var(--lm-sys-font-size-label);
  font-weight: 500;
}

/* 7) 徽标文字加深: soft 令牌的 700 级色在小字号下仍偏淡, 提升到近黑 / 800 级 */
.lm-badge--soft { color: var(--lm-sys-color-fg-primary); font-weight: 600; }
.badge-blue  { color: var(--lm-ref-color-blue-800); font-weight: 600; }
.badge-green { color: var(--lm-ref-color-green-800); font-weight: 600; }
.badge-red   { color: var(--lm-ref-color-red-800); font-weight: 600; }
.badge-amber { color: var(--lm-ref-color-amber-800); font-weight: 600; }

/* 8) 取消未激活步骤的整体淡化, 改用边框/底色的细微差异表达层级, 文字始终全对比度 */
.step { opacity: 1; }
.step:not(.active) { background: var(--lm-sys-color-bg-sunken); }
.step.active { opacity: 1; background: var(--lm-sys-color-bg-surface); }