/* fixes.css - 头部与交互细节修复（最小覆盖） */
:root {
  /* 按钮通用尺寸变量（参考“解析”按钮与 .btn-label） */
  --btn-h: 40px;
  --btn-r: 12px;
  --btn-gap: 8px;

  /* 重绘配色与阴影变量 */
  --btn-bg: rgba(255, 255, 255, 0.75);
  --btn-bg-hover: rgba(255, 255, 255, 0.9);
  --btn-border: rgba(148, 163, 184, 0.35);
  --btn-border-hover: rgba(148, 163, 184, 0.55);
  --btn-shadow: 0 6px 20px rgba(15, 23, 42, 0.12);
  --btn-shadow-hover: 0 10px 28px rgba(15, 23, 42, 0.16);
  --primary: #3b82f6;             /* 解析按钮主色 */
  --primary-grad: linear-gradient(135deg, #60a5fa 0%, #3b82f6 60%, #2563eb 100%);
  --primary-text: #0f172a;        /* 深色文本 */
  --danger: #ef4444;              /* 清除按钮高亮色 */
  --danger-grad: linear-gradient(135deg, #f87171 0%, #ef4444 60%, #dc2626 100%);
}

/* 头部整体居中与安全留白 */
.header {
  text-align: center !important;
  margin-bottom: 28px !important;
}

/* Logo 行：水平居中、垂直对齐、合理间距 */
.header .logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
}

/* Logo 尺寸 */
.logo-image {
  width: 52px !important;
  height: 52px !important;
  border-radius: 14px !important;
  object-fit: contain !important;
  display: block !important;
}

/* 标题可读性增强 */
.header .logo span {
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: .2px !important;
  color: #0f172a !important;
  background: none !important;
  -webkit-text-fill-color: initial !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* 副标题可读性增强 */
.subtitle {
  margin-top: 8px !important;
  color: #334155 !important;
  font-weight: 600 !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

/* 防止主题文件中的偏移影响头部对齐 */
.logo {
  justify-content: center !important;
}

/* 层级统一，避免背景装饰遮挡 */
.header, .logo, .subtitle {
  position: relative !important;
  z-index: 1 !important;
}

/* ——— 清除按钮“固定”方案 —— */
/* 1) 固定解析按钮宽度，避免加载态/文案引起的宽度波动 */
.parse-btn {
  width: 136px !important;
  height: var(--btn-h) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--btn-gap) !important;
  border-radius: var(--btn-r) !important;

  /* 全新视觉重绘（现代玻璃拟态 + 主色渐变边） */
  background: var(--btn-bg) !important;
  backdrop-filter: saturate(1.4) blur(6px);
  -webkit-backdrop-filter: saturate(1.4) blur(6px);
  border: 1px solid var(--btn-border) !important;
  box-shadow: var(--btn-shadow) !important;
  color: var(--primary-text) !important;

  /* 内侧描边与渐变轮廓 */
  position: relative !important;
  overflow: hidden !important;
}
.parse-btn::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  padding: 1px !important;
  background: var(--primary-grad) !important;
  -webkit-mask: 
    linear-gradient(#000 0 0) content-box, 
    linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
          mask-composite: exclude !important;
  opacity: .35 !important; /* 低调的主色轮廓 */
}
.parse-btn:hover {
  background: var(--btn-bg-hover) !important;
  border-color: var(--btn-border-hover) !important;
  box-shadow: var(--btn-shadow-hover) !important;
  transform: translateY(-1px);
  transition: all .18s ease;
}
.parse-btn:active {
  transform: translateY(0);
  filter: brightness(.98);
}
.parse-btn:focus-visible {
  outline: 2px solid rgba(59,130,246,.45);
  outline-offset: 2px;
}
.parse-btn .btn-label {
  font-weight: 600 !important;
  letter-spacing: .2px !important;
}

/* 解析按钮加载态（脚本已切换 .loading），展示微型圆环动画 */
.parse-btn.loading {
  cursor: progress !important;
}
.parse-btn.loading::after {
  content: "" !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(59,130,246,.25) !important;
  border-top-color: #3b82f6 !important;
  margin-left: 6px !important;
  animation: spin .8s linear infinite !important;
}

/* 2) 输入框为清除按钮预留内边距，防止文字被遮挡 */
.url-input {
  /* 网格布局下无需为清除按钮额外预留空间 */
  padding-right: 16px !important;
}

/* 3) 输入区采用三列网格：输入框 | 解析按钮 | 清除按钮（固定并排） */
.input-container {
  display: grid !important;
  grid-template-columns: 1fr auto auto !important;
  align-items: center !important;
  gap: var(--btn-gap) !important;
  /* 保留变量以兼容脚本可能使用 */
  --parse-btn-w: 136px;
}
.clear-btn {
  /* 并排固定按钮（完全重绘）：与解析按钮一致的尺寸与风格 */
  position: static !important;
  z-index: 3 !important;
  pointer-events: auto;
  width: var(--btn-h) !important;
  height: var(--btn-h) !important;
  border-radius: var(--btn-r) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: var(--btn-gap) !important;

  background: var(--btn-bg) !important;
  backdrop-filter: saturate(1.4) blur(6px);
  -webkit-backdrop-filter: saturate(1.4) blur(6px);
  border: 1px solid var(--btn-border) !important;
  box-shadow: var(--btn-shadow) !important;
  color: var(--primary-text) !important;
  position: relative !important;
  overflow: hidden !important;
}
.clear-btn::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  padding: 1px !important;
  background: var(--danger-grad) !important;
  -webkit-mask: 
    linear-gradient(#000 0 0) content-box, 
    linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
          mask-composite: exclude !important;
  opacity: .28 !important; /* 低调的红色轮廓 */
}
.clear-btn:hover {
  background: var(--btn-bg-hover) !important;
  border-color: var(--btn-border-hover) !important;
  box-shadow: var(--btn-shadow-hover) !important;
  transform: translateY(-1px);
  transition: all .18s ease;
}
.clear-btn:active {
  transform: translateY(0);
  filter: brightness(.98);
}
.clear-btn:focus-visible {
  outline: 2px solid rgba(239,68,68,.45);
  outline-offset: 2px;
}

/* 小屏保持三列并排（根据可用宽度自动压缩按钮） */
@media (max-width: 899.98px) {
  .input-container { grid-template-columns: 1fr auto auto !important; }
}

/* 桌面端同样固定为三列并排布局 */
@media (min-width: 900px) {
  .input-container { grid-template-columns: 1fr auto auto !important; }
}

/* 与原有显示/隐藏机制兼容（.show 控制可见性） */
.clear-btn { opacity: inherit; visibility: inherit; }

/* 参考“解析”按钮的标签样式，提升可读性与一致性 */
.parse-btn .btn-label {
  font-weight: 600 !important;
  letter-spacing: .2px !important;
}
.clear-btn:hover { filter: brightness(1.05); }
.clear-btn:focus-visible {
  outline: 2px solid rgba(59,130,246,.5);
  outline-offset: 2px;
}

/* 通用动效 */
@keyframes spin { to { transform: rotate(360deg); } }

/* 图标按钮的图标统一居中尺寸（如果使用 fontawesome 或内置 ×） */
.parse-btn i, .clear-btn i {
  font-size: 16px !important;
  line-height: 1 !important;
}

/* 适配暗背景容器的微光描边（防止按钮与背景融合） */
.parse-btn, .clear-btn {
  isolation: isolate;
}

/* ===== 标题正中央的微信群大二维码 ===== */
.qr-hero {
  margin: 14px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.qr-hero img {
  width: 132px;
  height: 132px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--btn-border);
  box-shadow: var(--btn-shadow);
  padding: 8px;
}
.qr-hero-caption {
  font-size: 14px;
  color: #334155;
  font-weight: 600;
}
@media (max-width: 480px) {
  .qr-hero img { width: 120px; height: 120px; border-radius: 14px; }
  .qr-hero-caption { font-size: 13px; }
}

/* ===== 底部“客服微信”大卡片 ===== */
.footer-wx {
  margin-top: 12px;
  display: flex;
  justify-content: center;
}
.footer-wx-card {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;                    /* 与原有 footer 信息风格一致 */
  border: 1px solid rgba(148,163,184,.35);    /* 轻量边框 */
  border-radius: 12px;
  padding: 8px 12px;
  text-decoration: none;
  color: inherit;
  box-shadow: none;                            /* 去除重阴影，降低存在感 */
}
.footer-wx-card img {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #fff;
  padding: 4px;
  border: 1px solid rgba(148,163,184,.35);
}
.footer-wx-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.footer-wx-text strong {
  font-size: 15px;                             /* 与 footer 文案级别匹配 */
  color: #0f172a;
  font-weight: 700;
}
.footer-wx-text span {
  font-size: 13px;
  color: #475569;
}
.footer-wx-card:hover {
  background: rgba(255,255,255,.6);
  border-color: rgba(148,163,184,.55);
  transform: translateY(-1px);
  transition: all .18s ease;
}
@media (max-width: 480px) {
  .footer-wx { padding: 0 12px; }
  .footer-wx-card { width: 100%; justify-content: center; padding: 10px 12px; }
  .footer-wx-card img { width: 44px; height: 44px; }
  .footer-wx-text strong { font-size: 15px; }
  .footer-wx-text span { font-size: 12px; }
}

/* —— 移动端适配：≤480px 时按钮堆叠，增大触控面积 —— */
@media (max-width: 480px) {
  .input-container {
    grid-template-columns: 1fr !important;   /* 输入框一行，按钮依次在下方 */
    gap: 10px !important;
  }
  .url-input {
    height: 52px !important;                 /* 更大的触控高度 */
    font-size: 16px !important;
    padding-right: 16px !important;          /* 恢复正常内边距 */
  }
  .parse-btn {
    width: 100% !important;
    min-width: unset !important;
    height: 52px !important;
    padding: 0 20px !important;
    border-radius: 16px !important;
    font-size: 16px !important;
  }
  .clear-btn {
    width: 100% !important;
    height: 52px !important;
    border-radius: 16px !important;
    margin-left: 0 !important;
    font-size: 16px !important;
  }
  .parse-btn.loading::after {
    width: 20px !important;
    height: 20px !important;
    border-width: 2px !important;
  }
}
/* 超小屏兜底（≤360px），适度减小文字但保持触控面积 */
@media (max-width: 360px) {
  .url-input { font-size: 15px !important; }
  .parse-btn, .clear-btn { font-size: 15px !important; }
}

/* === 尺寸放大与视觉强化覆盖（不改结构/脚本） === */
:root {
  --btn-h: 48px;
  --btn-r: 14px;
  --btn-gap: 10px;
  --btn-px: 18px;   /* 按钮左右内边距 */
  --icon: 18px;     /* 图标字号 */
  --label: 15px;    /* 按钮文案字号 */
}

/* 输入框高度与按钮对齐 */
.url-input {
  height: var(--btn-h) !important;
  font-size: var(--label) !important;
}

/* 解析按钮更宽、更稳重 */
.parse-btn {
  min-width: 156px !important;
  padding: 0 var(--btn-px) !important;
}

/* 文案更清晰 */
.parse-btn .btn-label {
  font-size: var(--label) !important;
  font-weight: 700 !important;
}

/* 图标放大，统一视觉重心 */
.parse-btn i, .clear-btn i {
  font-size: var(--icon) !important;
}

/* 清除按钮随高度放大 */
.clear-btn {
  width: var(--btn-h) !important;
  height: var(--btn-h) !important;
}

/* 加载中小环尺寸放大匹配新高度 */
.parse-btn.loading::after {
  width: 18px !important;
  height: 18px !important;
  border-width: 2px !important;
}

/* ——— 按钮颜色状态：解析前白色，解析后蓝色 ——— */
/* 默认：解析前 白色玻璃风 */
.parse-btn {
  background: #ffffff !important;
  color: var(--primary-text) !important;
  border-color: var(--btn-border) !important;
}
.parse-btn:hover {
  background: #ffffff !important;
}
/* 已解析：蓝色渐变 + 白字 */
.parse-btn.parsed {
  background: var(--primary-grad) !important;
  color: #ffffff !important;
  border-color: rgba(59,130,246,.6) !important;
}
.parse-btn.parsed::before {
  opacity: .6 !important;
}
.parse-btn.parsed:hover {
  filter: brightness(1.02);
}

/* 头部二维码图标组（客服微信/微信群） */
.qr-group {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: 6px;
}
.qr-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  box-shadow: var(--btn-shadow);
  overflow: hidden;
}
.qr-chip img {
  width: 24px;
  height: 24px;
  display: block;
}
.qr-chip:hover {
  background: var(--btn-bg-hover);
  border-color: var(--btn-border-hover);
  transform: translateY(-1px);
  transition: all .18s ease;
}
@media (max-width: 480px) {
  .qr-chip { width: 32px; height: 32px; border-radius: 9px; }
  .qr-chip img { width: 22px; height: 22px; }
}