/**
 * 2Live 全站按钮 — Aurora Teal 系
 * 主色：深青 → 薄荷渐变 + 柔光悬停
 */

/* ── 重置旧动效伪元素 ── */
.primary-btn::before,
.primary-btn::after,
.secondary-btn::before,
.index-hero-card .primary-btn::before {
  display: none !important;
  content: none !important;
}

/* ── 主按钮 ── */
.primary-btn,
.index-hero-card .primary-btn,
.tutorial-tour-next,
.quick-help-demo-btn,
.tool-action-btn.primary-btn,
.export-btn {
  font-family: var(--btn-font, 'Outfit', 'DM Sans', system-ui, sans-serif);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #f0fdfa !important;
  background: var(--btn-gradient) !important;
  background-size: 100% 100% !important;
  border: 1px solid color-mix(in srgb, var(--btn-teal-bright) 42%, transparent) !important;
  border-radius: var(--btn-radius-pill) !important;
  box-shadow: var(--btn-shadow) !important;
  cursor: pointer;
  transition:
    transform var(--fx-fast) var(--fx-ease),
    box-shadow var(--fx-normal) var(--fx-ease),
    filter var(--fx-fast) ease,
    background var(--fx-normal) var(--fx-ease) !important;
  text-shadow: 0 1px 2px rgba(4, 47, 46, 0.25);
  position: relative;
  overflow: hidden;
}

.index-hero-card .primary-btn {
  padding: 13px 32px !important;
  font-size: 15px !important;
  letter-spacing: 0.1em !important;
}

.primary-btn:hover,
.index-hero-card .primary-btn:hover,
.tutorial-tour-next:hover:not(:disabled),
.quick-help-demo-btn:hover,
.tool-action-btn.primary-btn:hover,
.export-btn:hover {
  transform: translateY(-2px) !important;
  background: var(--btn-gradient-hover) !important;
  box-shadow: var(--btn-shadow-hover) !important;
  filter: brightness(1.03);
}

.primary-btn:active,
.index-hero-card .primary-btn:active,
.quick-help-demo-btn:active,
.export-btn:active {
  transform: translateY(0) scale(0.98) !important;
  box-shadow: 0 4px 14px rgba(13, 148, 136, 0.22) !important;
}

/* ── 次按钮 / 幽灵 ── */
.secondary-btn,
.tool-ghost-btn,
.quick-help-toggle,
.tutorial-tour-btn:not(.tutorial-tour-next),
.copy-btn,
.copy-all-btn {
  font-family: var(--btn-font, 'Outfit', 'DM Sans', system-ui, sans-serif);
  font-weight: 600;
  color: var(--text-secondary) !important;
  background: var(--btn-ghost-bg) !important;
  border: 1px solid var(--btn-ghost-border) !important;
  border-radius: var(--btn-radius) !important;
  box-shadow: inset 0 1px 0 var(--glass-highlight) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  transition:
    transform var(--fx-fast) var(--fx-ease),
    color var(--fx-fast) ease,
    border-color var(--fx-fast) ease,
    background var(--fx-fast) ease,
    box-shadow var(--fx-fast) ease !important;
}

.secondary-btn:hover,
.tool-ghost-btn:hover,
.quick-help-toggle:hover,
.tutorial-tour-btn:not(.tutorial-tour-next):hover:not(:disabled),
.copy-btn:hover,
.copy-all-btn:hover {
  color: var(--btn-teal-bright) !important;
  background: var(--btn-ghost-hover) !important;
  border-color: color-mix(in srgb, var(--btn-teal) 45%, transparent) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 4px 16px color-mix(in srgb, var(--btn-teal) 14%, transparent) !important;
  transform: translateY(-1px) !important;
}

.quick-help-toggle.is-open {
  color: var(--btn-teal-bright) !important;
  border-color: color-mix(in srgb, var(--btn-teal) 40%, transparent) !important;
  background: color-mix(in srgb, var(--btn-teal) 10%, var(--glass-surface-2)) !important;
}

/* ── 导航 Pill：仅锁尺寸，颜色/背景由 nav-controls.css 控制 ── */
.nav-pill:not(.nav-pill-toolbox),
.nav-pill:not(.nav-pill-toolbox):hover,
.nav-pill:not(.nav-pill-toolbox):active,
.nav-pill:not(.nav-pill-toolbox).active,
.nav-pill:not(.nav-pill-toolbox):focus,
.nav-pill:not(.nav-pill-toolbox):focus-visible {
  box-shadow: none !important;
  transform: none !important;
  outline: none !important;
}

.nav-pill:not(.nav-pill-toolbox) .nav-pill-icon,
.nav-pill:not(.nav-pill-toolbox):hover .nav-pill-icon,
.nav-pill:not(.nav-pill-toolbox):active .nav-pill-icon,
.nav-pill:not(.nav-pill-toolbox).active .nav-pill-icon {
  transform: none !important;
  box-shadow: none !important;
}

/* ── 顶栏控件按钮 ── */
.nav-controls-v3 .nav-ctrl-btn:hover,
.nav-controls-v3 .theme-toggle-btn:hover {
  background: color-mix(in srgb, var(--btn-teal) 10%, transparent) !important;
  border-color: color-mix(in srgb, var(--btn-teal) 22%, transparent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--btn-teal) 10%, transparent) !important;
}

.nav-controls-v3 .nav-ctrl-btn:active,
.nav-controls-v3 .theme-toggle-btn:active {
  background: color-mix(in srgb, var(--btn-teal) 16%, transparent) !important;
}

.nav-controls-v3 .lang-dropdown-item:hover {
  background: color-mix(in srgb, var(--btn-teal) 8%, transparent) !important;
}

.nav-controls-v3 .lang-dropdown-item.active {
  background: color-mix(in srgb, var(--btn-teal) 14%, transparent) !important;
  border-color: color-mix(in srgb, var(--btn-teal) 22%, transparent) !important;
}

/* ── 工具页图标按钮 ── */
.tools-index-view-btn {
  border-radius: 10px !important;
  border: 1px solid var(--btn-ghost-border) !important;
  background: var(--btn-ghost-bg) !important;
  transition: background var(--fx-fast) ease, border-color var(--fx-fast) ease, box-shadow var(--fx-fast) ease !important;
}

.tools-index-view-btn:hover {
  border-color: color-mix(in srgb, var(--btn-teal) 38%, transparent) !important;
  background: var(--btn-ghost-hover) !important;
}

.tools-index-view-btn.is-active {
  background: color-mix(in srgb, var(--btn-teal-deep) 50%, var(--glass-surface)) !important;
  border-color: color-mix(in srgb, var(--btn-teal) 42%, transparent) !important;
  box-shadow: 0 0 12px color-mix(in srgb, var(--btn-teal) 20%, transparent) !important;
}

.tool-icon-btn:hover {
  border-color: color-mix(in srgb, var(--btn-teal) 35%, transparent) !important;
  background: color-mix(in srgb, var(--btn-teal) 10%, var(--glass-surface-2)) !important;
}

/* ── IP 工具按钮 ── */
.ip-refresh-btn,
.ip-copy-btn,
.ip-text-btn {
  border-radius: var(--btn-radius) !important;
  border: 1px solid var(--btn-ghost-border) !important;
  background: var(--btn-ghost-bg) !important;
  color: var(--text-secondary) !important;
  font-weight: 600 !important;
  transition: transform var(--fx-fast) var(--fx-ease), background var(--fx-fast) ease, border-color var(--fx-fast) ease, color var(--fx-fast) ease, box-shadow var(--fx-fast) ease !important;
}

.ip-refresh-btn:hover,
.ip-copy-btn:hover,
.ip-text-btn:hover {
  color: var(--btn-teal-bright) !important;
  border-color: color-mix(in srgb, var(--btn-teal) 40%, transparent) !important;
  background: var(--btn-ghost-hover) !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--btn-teal) 12%, transparent) !important;
  transform: translateY(-1px) !important;
}

.ip-copy-btn.is-copied {
  color: var(--btn-teal-bright) !important;
  border-color: color-mix(in srgb, var(--btn-teal) 50%, transparent) !important;
  background: color-mix(in srgb, var(--btn-teal) 14%, var(--glass-surface-2)) !important;
}

.copy-btn.is-copied,
.copy-all-btn.is-copied {
  color: var(--brand-emerald, #059669) !important;
  border-color: color-mix(in srgb, var(--brand-emerald, #10b981) 42%, transparent) !important;
  background: color-mix(in srgb, var(--brand-emerald, #10b981) 14%, var(--glass-surface-2)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 2px 10px color-mix(in srgb, var(--brand-emerald, #10b981) 12%, transparent) !important;
  transform: none !important;
}

/* ── 管理后台 ── */
.admin-btn {
  border-radius: var(--btn-radius) !important;
  font-weight: 600 !important;
  transition: transform var(--fx-fast) var(--fx-ease), background var(--fx-fast) ease, box-shadow var(--fx-fast) ease !important;
}

.admin-btn.primary,
.submit-btn {
  color: #f0fdfa !important;
  background: var(--btn-gradient) !important;
  border: 1px solid color-mix(in srgb, var(--btn-teal-bright) 40%, transparent) !important;
  box-shadow: var(--btn-shadow) !important;
}

.admin-btn.primary:hover,
.submit-btn:hover {
  background: var(--btn-gradient-hover) !important;
  box-shadow: var(--btn-shadow-hover) !important;
  transform: translateY(-1px) !important;
}

.admin-btn.ghost,
.refresh-btn {
  background: var(--btn-ghost-bg) !important;
  border: 1px solid var(--btn-ghost-border) !important;
  color: var(--text-secondary) !important;
}

.admin-btn.ghost:hover,
.refresh-btn:hover {
  background: var(--btn-ghost-hover) !important;
  border-color: color-mix(in srgb, var(--btn-teal) 40%, transparent) !important;
  color: var(--btn-teal-bright) !important;
}

/* ── 亮色主题 ── */
[data-theme="light"] .primary-btn,
.theme-light .primary-btn,
[data-theme="light"] .index-hero-card .primary-btn,
.theme-light .index-hero-card .primary-btn,
[data-theme="light"] .quick-help-demo-btn,
.theme-light .quick-help-demo-btn,
[data-theme="light"] .export-btn,
.theme-light .export-btn {
  color: #fff !important;
  background: linear-gradient(152deg, #0f766e 0%, #14b8a6 50%, #2dd4bf 100%) !important;
  box-shadow: 0 6px 22px rgba(13, 148, 136, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

[data-theme="light"] .secondary-btn,
.theme-light .secondary-btn,
[data-theme="light"] .tool-ghost-btn,
.theme-light .tool-ghost-btn,
[data-theme="light"] .copy-btn,
.theme-light .copy-btn {
  background: color-mix(in srgb, var(--btn-teal) 5%, #fff) !important;
  color: #134e4a !important;
  border-color: color-mix(in srgb, var(--btn-teal) 28%, #e2e8f0) !important;
}

/* ── 首页快捷引导：紧凑按钮 ── */
.index-hero-help .quick-help-demo-btn,
.index-hero-help .quick-help-toggle {
  min-height: 0 !important;
  padding: 5px 11px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  border-radius: 999px !important;
  transform: none !important;
}

.index-hero-help .quick-help-demo-btn:hover,
.index-hero-help .quick-help-demo-btn:active,
.index-hero-help .quick-help-toggle:hover,
.index-hero-help .quick-help-toggle.is-open {
  transform: translateY(-1px) !important;
}