/* ================================================================
   畅响教育 front-v2 — 改版主题 v3
   theme-v3.css  (新增覆盖文件，不删除已有规则)
   ================================================================ */

/* ── Part A：CSS 变量声明 ── */
:root {
  --cx-primary:        #1552a8;
  --cx-primary-dark:   #0d3d80;
  --cx-primary-mid:    #2a6fcc;
  --cx-primary-light:  #e8f1fb;
  --cx-primary-bg:     linear-gradient(135deg, #1552a8 0%, #2a7fd4 100%);

  --cx-accent:         #f59e0b;
  --cx-accent-dark:    #d97706;
  --cx-danger:         #e74c3c;
  --cx-success:        #10b981;

  /* 页面背景 */
  --cx-body-gradient:  linear-gradient(160deg, #e4ecf5 0%, #eaeff5 25%, #f0ede8 55%, #ede5dc 100%);
  --cx-body-glow-1:    radial-gradient(ellipse 80% 60% at 15% 5%, rgba(21,82,168,.07) 0%, transparent 60%);
  --cx-body-glow-2:    radial-gradient(ellipse 70% 50% at 85% 85%, rgba(245,158,11,.06) 0%, transparent 60%);

  --cx-gray-50:        #f8fafc;
  --cx-gray-100:       #f1f5f9;
  --cx-gray-200:       #e2e8f0;
  --cx-gray-400:       #94a3b8;
  --cx-gray-600:       #475569;
  --cx-gray-800:       #1e293b;
  --cx-gray-900:       #0f172a;

  --cx-shadow-xs:  0 1px 3px rgba(0,0,0,.06);
  --cx-shadow-sm:  0 2px 8px rgba(0,0,0,.08);
  --cx-shadow-md:  0 4px 16px rgba(0,0,0,.10);
  --cx-shadow-lg:  0 8px 32px rgba(21,82,168,.15);
  --cx-shadow-xl:  0 16px 48px rgba(21,82,168,.20);

  --cx-radius-sm:   6px;
  --cx-radius-md:   12px;
  --cx-radius-lg:   20px;
  --cx-radius-pill: 99px;

  --cx-transition:       0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --cx-transition-slow:  0.4s cubic-bezier(0.4, 0, 0.2, 1);

  --cx-font: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --cx-section-py: 70px;
}

/* ── Part B：全局字体 ── */
@import url('https://fonts.lug.ustc.edu.cn/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap');

body.register-container {
  overflow-x: hidden;
}
body {
  font-family: var(--cx-font) !important;
  color: var(--cx-gray-800);
  background:
    var(--cx-body-glow-1),
    var(--cx-body-glow-2),
    var(--cx-body-gradient) !important;
  background-attachment: fixed !important;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ── Part C：全局链接、滚动条、选中颜色 ── */
a:hover { color: var(--cx-primary); }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { background: var(--cx-gray-200); border-radius: 3px; }
::selection { background: var(--cx-primary-light); color: var(--cx-primary-dark); }

/* ── Part D：通用按钮组件 ── */
.cx-btn-primary {
  display: inline-block;
  padding: 10px 28px;
  background: var(--cx-primary-bg);
  color: #fff !important;
  border-radius: var(--cx-radius-pill);
  font-weight: 600;
  font-size: 14px;
  border: none;
  cursor: pointer;
  transition: var(--cx-transition);
  text-decoration: none;
  box-shadow: var(--cx-shadow-sm);
}
.cx-btn-primary:hover {
  background: linear-gradient(135deg, #0d3d80 0%, #1552a8 100%);
  box-shadow: var(--cx-shadow-md);
  transform: translateY(-1px);
  color: #fff !important;
}
.cx-btn-accent {
  display: inline-block;
  padding: 10px 28px;
  background: linear-gradient(135deg, var(--cx-accent) 0%, #fbbf24 100%);
  color: #fff !important;
  border-radius: var(--cx-radius-pill);
  font-weight: 700;
  font-size: 14px;
  border: none;
  cursor: pointer;
  transition: var(--cx-transition);
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(245,158,11,.3);
}
.cx-btn-accent:hover {
  background: linear-gradient(135deg, var(--cx-accent-dark) 0%, var(--cx-accent) 100%);
  transform: translateY(-2px);
  color: #fff !important;
}

/* ── Part E：通用卡片组件 ── */
.cx-card {
  background: #fff;
  border-radius: var(--cx-radius-md);
  box-shadow: var(--cx-shadow-sm);
  overflow: hidden;
  transition: var(--cx-transition);
}
.cx-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--cx-shadow-xl);
}

/* ── Part F：标签角标 ── */
.cx-tag-hot, .cx-tag-new, .cx-tag-live, .cx-tag-free {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--cx-radius-pill);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
}
.cx-tag-hot  { background: #fef3c7; color: #d97706; }
.cx-tag-new  { background: #dbeafe; color: #1d4ed8; }
.cx-tag-live { background: #fee2e2; color: #dc2626; }
.cx-tag-free { background: #d1fae5; color: #059669; }

/* ── Part G：section 标题升级 ── */
.hd-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--cx-gray-800) !important;
  position: relative;
  padding-bottom: 12px !important;
  display: inline-block;
}
.hd-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 3px;
  background: var(--cx-primary-bg);
  border-radius: var(--cx-radius-pill);
}
.hd-title strong {
  color: var(--cx-primary) !important;
}

/* ================================================================
   阶段二：front-v2 Header 颜色同步
   ================================================================ */

.topbar {
  background: var(--cx-primary-bg) !important;
}
.nav-contain {
  background: #fff !important;
  border-bottom: 3px solid var(--cx-primary-light) !important;
  box-shadow: var(--cx-shadow-xs) !important;
}
.nav-contain .nav-inner .am-nav li a {
  color: var(--cx-gray-800) !important;
  font-weight: 500;
  transition: color var(--cx-transition);
}
.nav-contain .nav-inner .am-nav li a:hover {
  color: var(--cx-primary) !important;
}
.nav-contain .nav-inner .am-nav li.am-active > a {
  color: var(--cx-primary) !important;
}

/* ================================================================
   阶段六：课程卡片升级（front-v2 的 .guessLikeIn-d）
   ================================================================ */

/* 课程卡片容器：flex 网格布局 */
.lcnIn-ri-in {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.guessLikeIn-d {
  border-radius: var(--cx-radius-md) !important;
  box-shadow: var(--cx-shadow-sm) !important;
  overflow: hidden !important;
  transition: var(--cx-transition) !important;
  border: none !important;
  float: none !important;
  background: #fff !important;
  margin: 0 !important;
  width: calc((100% - 40px) / 3) !important;
  flex: 0 0 calc((100% - 40px) / 3) !important;
  box-sizing: border-box !important;
}
.guessLikeIn-d:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--cx-shadow-xl) !important;
}
/* 价格色：从红色改为主色 */
.guessLikeIn-d .price {
  color: var(--cx-primary) !important;
  font-weight: 700 !important;
}
.guessLikeIn-d .price .old-price {
  color: var(--cx-gray-400) !important;
  font-weight: 400 !important;
}

/* 筛选 Tag */
.filter-tag {
  display: inline-block;
  padding: 6px 16px;
  border-radius: var(--cx-radius-pill);
  border: 1.5px solid var(--cx-gray-200);
  font-size: 13px;
  cursor: pointer;
  transition: var(--cx-transition);
  color: var(--cx-gray-600);
  text-decoration: none;
  background: #fff;
}
.filter-tag.active,
.filter-tag:hover {
  background: var(--cx-primary);
  color: #fff;
  border-color: var(--cx-primary);
}

/* ================================================================
   阶段五：登录/注册页
   ================================================================ */

.cx-auth-page {
  display: flex;
  min-height: 100vh;
  align-items: stretch;
  background: var(--cx-gray-50);
  width: 100%;
}
.cx-auth-left {
  flex: 0 0 420px;
  min-height: 100vh;
  background: var(--cx-primary-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 50px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.cx-auth-left::before {
  content: '';
  position: absolute;
  top: -80px;
  left: -80px;
  width: 280px;
  height: 280px;
  background: rgba(255,255,255,.06);
  border-radius: 50%;
}
.cx-auth-left::after {
  content: '';
  position: absolute;
  bottom: -60px;
  right: -60px;
  width: 200px;
  height: 200px;
  background: rgba(255,255,255,.06);
  border-radius: 50%;
}
.cx-auth-left-title {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}
.cx-auth-left-desc {
  font-size: 14px;
  color: rgba(255,255,255,.8);
  line-height: 1.8;
  margin-bottom: 30px;
  position: relative;
  z-index: 1;
}
.cx-auth-features {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 1;
}
.cx-auth-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.9);
  font-size: 14px;
  margin-bottom: 12px;
}
.cx-auth-features li::before {
  content: '✓';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: rgba(255,255,255,.2);
  border-radius: 50%;
  font-size: 12px;
  flex-shrink: 0;
}
.cx-auth-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 60px;
}
.cx-auth-right-inner {
  width: 100%;
  max-width: 540px;
  background: #fff;
  border-radius: var(--cx-radius-lg);
  box-shadow: var(--cx-shadow-xl);
  padding: 40px 50px;
}
/* 输入框升级 */
.cx-auth-right input[type="text"],
.cx-auth-right input[type="password"],
.cx-auth-right input[type="tel"],
.cx-auth-right .am-form-control {
  border-radius: var(--cx-radius-sm) !important;
  border: 1.5px solid var(--cx-gray-200) !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  transition: border-color var(--cx-transition), box-shadow var(--cx-transition) !important;
}
.cx-auth-right input:focus,
.cx-auth-right .am-form-control:focus {
  border-color: var(--cx-primary) !important;
  box-shadow: 0 0 0 3px rgba(21,82,168,.12) !important;
  outline: none !important;
}
/* 注册页验证码行：输入框+图片对齐 */
.cx-auth-right .am-u-md-4 #img_captcha {
  width: 110px;
  height: 40px;
  display: block;
  cursor: pointer;
  border-radius: var(--cx-radius-sm);
  border: 1.5px solid var(--cx-gray-200);
  object-fit: cover;
}
/* 注册页注册按钮居中 */
.cx-auth-right #registerBtn {
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: 164px;
}

/* ================================================================
   阶段七：个人中心 Dashboard
   ================================================================ */

.cx-member-layout {
  display: flex;
  gap: 24px;
  padding: 24px 0;
}
.cx-member-sidebar {
  flex: 0 0 240px;
  background: #fff;
  border-radius: var(--cx-radius-md);
  box-shadow: var(--cx-shadow-sm);
  overflow: hidden;
  height: fit-content;
  position: sticky;
  top: 80px;
}
.cx-member-content {
  flex: 1;
  min-width: 0;
}
/* 侧边菜单项 */
.cx-member-sidebar .menu-item,
.cx-member-sidebar li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  color: var(--cx-gray-600) !important;
  font-size: 14px;
  text-decoration: none;
  transition: var(--cx-transition);
  border-left: 3px solid transparent;
}
.cx-member-sidebar .menu-item:hover,
.cx-member-sidebar li a:hover {
  background: var(--cx-primary-light);
  color: var(--cx-primary) !important;
  border-left-color: var(--cx-primary);
}
.cx-member-sidebar .menu-item.active,
.cx-member-sidebar li.active a {
  background: var(--cx-primary-light);
  color: var(--cx-primary) !important;
  border-left-color: var(--cx-primary);
  font-weight: 600;
}

/* 交易记录表格 */
.cx-table-v3 {
  width: 100%;
  border-collapse: collapse;
}
.cx-table-v3 thead th {
  background: var(--cx-primary-light);
  color: var(--cx-primary);
  font-weight: 600;
  padding: 12px 16px;
  font-size: 13px;
  text-align: left;
}
.cx-table-v3 tbody tr {
  border-bottom: 1px solid var(--cx-gray-100);
  transition: background var(--cx-transition);
}
.cx-table-v3 tbody tr:hover {
  background: var(--cx-primary-light);
}
.cx-table-v3 tbody td {
  padding: 12px 16px;
  font-size: 13px;
  color: var(--cx-gray-800);
}
.cx-table-v3 .amount {
  color: var(--cx-primary);
  font-weight: 700;
}
.cx-status-success { display: inline-block; padding: 2px 8px; background: #d1fae5; color: #059669; border-radius: var(--cx-radius-pill); font-size: 12px; }
.cx-status-pending { display: inline-block; padding: 2px 8px; background: #fef3c7; color: #d97706; border-radius: var(--cx-radius-pill); font-size: 12px; }
.cx-status-fail    { display: inline-block; padding: 2px 8px; background: #fee2e2; color: #dc2626; border-radius: var(--cx-radius-pill); font-size: 12px; }

/* ================================================================
   阶段八：支付页面
   ================================================================ */

.cx-pay-page {
  background: var(--cx-gray-50);
  min-height: 100vh;
  padding: 40px 20px;
}
.cx-pay-card {
  background: #fff;
  border-radius: var(--cx-radius-lg);
  box-shadow: var(--cx-shadow-xl);
  max-width: 480px;
  margin: 0 auto;
  overflow: hidden;
}
.cx-pay-card .cx-pay-amount {
  font-size: 36px;
  font-weight: 700;
  color: var(--cx-primary);
}

/* 支付完成 ✓ 动画 */
@keyframes cx-check-in {
  0%   { transform: scale(0) rotate(-45deg); opacity: 0; }
  60%  { transform: scale(1.1) rotate(5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.cx-success-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #10b981, #34d399);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  color: #fff;
  margin: 0 auto 20px;
  animation: cx-check-in 0.5s ease forwards;
}

/* 纸屑动画 */
@keyframes cx-confetti {
  0%   { transform: translateY(0) rotate(0); opacity: 1; }
  100% { transform: translateY(80px) rotate(360deg); opacity: 0; }
}
.cx-confetti-piece {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  animation: cx-confetti 1.2s ease-in forwards;
}

/* ================================================================
   阶段九：各频道 Hero 区
   ================================================================ */

.cx-channel-hero {
  background: var(--cx-primary-bg);
  padding: 50px 0;
  text-align: center;
  color: #fff;
}
.cx-channel-hero h1 {
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}
.cx-channel-hero p {
  font-size: 16px;
  color: rgba(255,255,255,.8);
}

/* 直播状态标签 */
.cx-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fee2e2;
  color: #dc2626;
  padding: 3px 10px;
  border-radius: var(--cx-radius-pill);
  font-size: 12px;
  font-weight: 600;
}
.cx-live-dot {
  width: 7px;
  height: 7px;
  background: #dc2626;
  border-radius: 50%;
  animation: cx-pulse 1.2s ease-in-out infinite;
}
@keyframes cx-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: .6; }
}

/* ================================================================
   front-v2 Footer 升级
   ================================================================ */
.cx-footer-v3 {
  background: #0c1e3c !important;
  color: rgba(255,255,255,.7) !important;
  padding: 40px 0 !important;
}
.cx-footer-v3 a {
  color: rgba(255,255,255,.6) !important;
  text-decoration: none;
  transition: color var(--cx-transition);
}
.cx-footer-v3 a:hover {
  color: #fff !important;
}
.cx-footer-icp-v3 {
  background: #060f1e !important;
  padding: 12px 0 !important;
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,.4) !important;
}

/* ================================================================
   移动端适配
   ================================================================ */

/* ── 阶段十：移动端媒体查询补丁 ── */

/* 平板适配 */
@media (max-width: 1200px) {
  .cx-auth-left {
    flex: 0 0 320px;
  }
  .cx-channel-hero h1 {
    font-size: 26px;
  }
}

/* 移动端适配 */
@media (max-width: 768px) {
  /* 登录/注册：隐藏左侧品牌区 */
  .cx-auth-left { display: none !important; }
  .cx-auth-right { padding: 16px; }
  .cx-auth-right-inner { padding: 24px 20px; }

  /* 个人中心：隐藏左侧菜单，全宽内容 */
  .cx-member-sidebar {
    display: none !important;
  }
  .cx-member-layout {
    flex-direction: column;
    gap: 12px;
  }
  .cx-member-content {
    width: 100%;
  }

  /* 频道 Hero 调小 */
  .cx-channel-hero {
    padding: 30px 0;
  }
  .cx-channel-hero h1 { font-size: 22px; }
  .cx-channel-hero p { font-size: 14px; }

  /* 课程卡片：移除 hover transform */
  .guessLikeIn-d:hover {
    transform: none !important;
    box-shadow: var(--cx-shadow-sm) !important;
  }

  /* cx-card hover 移除 */
  .cx-card:hover {
    transform: none !important;
    box-shadow: var(--cx-shadow-sm) !important;
  }

  /* 资讯列表：单列 */
  .news-list-v3 {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* 支付卡片 */
  .cx-pay-card {
    max-width: 100% !important;
    border-radius: var(--cx-radius-md) !important;
    padding: 24px 20px !important;
  }

  /* 支付完成按钮 */
  .pay-finish-btns {
    flex-direction: column;
    align-items: center;
  }

  /* 表格横向滚动 */
  .cx-table-v3 {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* 触摸优化 */
a, button { -webkit-tap-highlight-color: transparent; }

/* 按钮最小点击区域（全局） */
.cx-btn-primary,
.cx-btn-outline,
.cx-btn-accent,
.cx-btn-outline-white {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}