/*
Theme Name: 易歪歪 YiWaiWai
Theme URI: https://www.yiwaiwai.com
Author: Suncrest Technology
Author URI: https://www.yiwaiwai.com
Description: 易歪歪官网主题 - 客服聊天助手与单机版下载，包含首页、关于我们、价钱、FAQ、用户评价等完整区块。
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: yiwaiai
*/

/* ========== 通用图标 ========== */
.icon {
  width: 5em;
  height: 5em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

/* ========== 下载按钮 ========== */
.button-download{
  width: 150px;
  height: 50px;
  background: #366bb3;
  border-radius: 5px;
  border: 1px solid #3f60a1;
  cursor: pointer;
  margin: 8px;
}
.button-download:hover{ background: #0047a6; }
.button-download-icon{
  width: 50px;
  height: 100%;
  color: white;
  font-size: 25px;
}
.button-download-value{
  font-weight: bold;
  font-size: 18px;
  color: white;
}

.text-shadow{
  text-shadow:#000 2px 0 0,#000 0 2px 0,#000 -2px 0 0,#000 0 -2px 0;
}

/* ========== 功能卡片 ========== */
.g-card{
  min-width: 150px;height: 150px;margin: 5px;border-radius: 15px;border: 1px solid #DAE2EC
}
.g-card:hover{ border: 1px solid #ADBED4; }

/* ========== 博客卡片 ========== */
.blog-card { transition: transform 0.2s, box-shadow 0.2s; }
.blog-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.05);
}

/* ========== 单机版专区 ========== */
.standalone-card{
  border: 1px solid #DAE2EC;
  border-radius: 14px;
  background: #fff;
  padding: 18px 14px;
  height: 100%;
  transition: border-color .2s, box-shadow .2s;
}
.standalone-card:hover{
  border-color: #ADBED4;
  box-shadow: 0 8px 20px rgba(0,0,0,.05);
}
.standalone-card .st-title{
  font-weight: 600;
  color: #2b333a;
  margin-bottom: 6px;
}
.standalone-card .st-desc{
  font-size: 13px;
  color: #7b8794;
  margin-bottom: 0;
}

/* ========== FAQ 手风琴 ========== */
#faqAccordion .card{
  border: 1px solid #DAE2EC;
  border-radius: 12px !important;
  margin-bottom: 12px;
  overflow: hidden;
}
#faqAccordion .card-header{
  background: #fff;
  border-bottom: 0;
  padding: 0;
}
#faqAccordion .btn-link{
  color: #2b333a;
  font-weight: 600;
  text-decoration: none;
  padding: 16px 18px;
  white-space: normal;
  font-size: 15px;
}
#faqAccordion .btn-link:hover,
#faqAccordion .btn-link:focus{
  color: #366bb3;
  text-decoration: none;
  box-shadow: none;
}
#faqAccordion .btn-link::before{
  content: "Q ";
  color: #366bb3;
  font-weight: 700;
}
#faqAccordion .btn-link[aria-expanded="true"]{
  color: #366bb3;
  background: #F4F8FF;
}
#faqAccordion .card-body{
  font-size: 14px;
  color: #5b6673;
  line-height: 1.9;
  background: #FBFCFE;
}

/* ========== 教程卡片 ========== */
.tutorial-card{
  border: 1px solid #DAE2EC;
  border-radius: 14px;
  background: #fff;
  padding: 20px 16px;
  height: 100%;
  transition: border-color .2s, box-shadow .2s;
  text-align: center;
}
.tutorial-card:hover{
  border-color: #ADBED4;
  box-shadow: 0 8px 20px rgba(0,0,0,.05);
}
.tutorial-card .t-icon{ font-size: 32px; margin-bottom: 10px; }
.tutorial-card h5{
  font-size: 16px;
  font-weight: 600;
  color: #2b333a;
  margin-bottom: 6px;
}
.tutorial-card p{
  font-size: 13px;
  color: #7b8794;
  margin-bottom: 12px;
}

/* ========== 更新日志时间线 ========== */
.changelog-item{
  border-left: 2px solid #366bb3;
  padding-left: 18px;
  margin-bottom: 24px;
  position: relative;
}
.changelog-item::before{
  content: "";
  position: absolute;
  left: -6px;
  top: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #366bb3;
}
.changelog-item .cl-version{
  font-weight: 700;
  color: #2b333a;
  font-size: 15px;
}
.changelog-item .cl-date{
  font-size: 12px;
  color: #93a0ad;
  margin-left: 10px;
}
.changelog-item ul{
  margin-top: 6px;
  padding-left: 18px;
  font-size: 13px;
  color: #5b6673;
  line-height: 1.9;
}

/* ========== 价钱 / 套餐卡片 ========== */
.price-card{
  position: relative;
  border: 1px solid #DAE2EC;
  border-radius: 16px;
  background: #fff;
  padding: 28px 22px 22px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.price-card:hover{
  border-color: #ADBED4;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  transform: translateY(-3px);
}
.price-card.featured{
  border: 2px solid #366bb3;
  box-shadow: 0 10px 30px rgba(54,107,179,.14);
}
.price-card .price-badge{
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: #366bb3;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 14px;
  border-radius: 20px;
  white-space: nowrap;
}
.price-card .price-name{
  font-size: 16px;
  font-weight: 700;
  color: #2b333a;
  margin-bottom: 8px;
  text-align: center;
}
.price-card .price-amount{
  text-align: center;
  font-size: 38px;
  font-weight: 700;
  color: #366bb3;
  line-height: 1.1;
  margin-bottom: 4px;
}
.price-card .price-unit{
  font-size: 14px;
  font-weight: 500;
  color: #93a0ad;
  margin-left: 2px;
}
.price-card .price-desc{
  text-align: center;
  font-size: 13px;
  color: #93a0ad;
  margin-bottom: 16px;
}
.price-card .price-list{
  list-style: none;
  padding-left: 0;
  margin: 0 0 18px;
  font-size: 13.5px;
  color: #5b6673;
  line-height: 2.1;
  flex: 1;
}
.price-card .price-list li::before{
  content: "✓";
  color: #2e9e5b;
  font-weight: 700;
  margin-right: 8px;
}
.price-card .price-list li.muted{
  color: #b6bec7;
  text-decoration: line-through;
}
.price-card .price-list li.muted::before{
  content: "✕";
  color: #d0d6dd;
}

/* ========== 用户评价卡片 ========== */
.review-card{
  border: 1px solid #DAE2EC;
  border-radius: 14px;
  background: #fff;
  padding: 20px 18px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.review-card:hover{
  border-color: #ADBED4;
  box-shadow: 0 8px 20px rgba(0,0,0,.05);
  transform: translateY(-3px);
}
.review-stars{
  color: #ffb400;
  font-size: 14px;
  letter-spacing: 2px;
  margin-bottom: 10px;
}
.review-text{
  font-size: 13.5px;
  color: #5b6673;
  line-height: 1.95;
  flex: 1;
  margin-bottom: 16px;
}
.review-avatar{
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #366bb3;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 15px;
  margin-right: 10px;
  flex: 0 0 38px;
}
.review-name{ font-size: 14px; font-weight: 600; color: #2b333a; line-height: 1.3; }
.review-role{ font-size: 12px; color: #93a0ad; line-height: 1.3; }
.review-summary{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 26px;
  background: #fff;
  border: 1px solid #DAE2EC;
  border-radius: 14px;
  padding: 16px 22px;
  margin-bottom: 26px;
}
.review-summary .rs-item{ font-size: 13px; color: #7b8794; }
.review-summary .rs-num{ font-size: 22px; font-weight: 700; color: #366bb3; margin-right: 4px; }

/* ========== 关于我们页面 ========== */
.about-hero{
  background: linear-gradient(135deg, #2b333a 0%, #35435a 55%, #2f4a72 100%);
  color: #fff;
  padding: 70px 0 60px;
  position: relative;
  overflow: hidden;
}
.about-hero::after{
  content: "";
  position: absolute;
  right: -120px;
  top: -120px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: rgba(54,107,179,.28);
  filter: blur(10px);
}
.about-hero::before{
  content: "";
  position: absolute;
  left: -140px;
  bottom: -180px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(18,192,255,.14);
}
.about-hero .hero-inner{ position: relative; z-index: 2; }
.about-hero h1{ font-size: 34px; font-weight: 700; line-height: 1.5; margin-bottom: 16px; }
.about-hero h1 strong{ color: #12c0ff; }
.about-hero p.lead{ font-size: 16px; color: #d7dfe8; line-height: 2; max-width: 760px; }
.hero-tags span{
  display: inline-block;
  font-size: 12.5px;
  padding: 5px 13px;
  border-radius: 20px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  color: #e6edf5;
  margin: 6px 8px 0 0;
}

.stat-box{
  background: #fff;
  border: 1px solid #DAE2EC;
  border-radius: 14px;
  padding: 24px 14px;
  text-align: center;
  height: 100%;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.stat-box:hover{
  border-color: #ADBED4;
  box-shadow: 0 8px 20px rgba(0,0,0,.05);
  transform: translateY(-3px);
}
.stat-box .stat-num{ font-size: 32px; font-weight: 700; color: #366bb3; line-height: 1.2; }
.stat-box .stat-num small{ font-size: 15px; font-weight: 600; margin-left: 2px; }
.stat-box .stat-label{ font-size: 13px; color: #7b8794; margin-top: 4px; }

.about-card{
  background: #fff;
  border: 1px solid #DAE2EC;
  border-radius: 16px;
  padding: 26px 24px;
  height: 100%;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.about-card:hover{
  border-color: #ADBED4;
  box-shadow: 0 8px 22px rgba(0,0,0,.05);
  transform: translateY(-3px);
}
.about-card .ac-icon{ font-size: 30px; line-height: 1; margin-bottom: 12px; }
.about-card h5{ font-size: 16px; font-weight: 700; color: #2b333a; margin-bottom: 8px; }
.about-card p{ font-size: 13.5px; color: #5b6673; line-height: 1.95; margin-bottom: 0; }

.timeline{ position: relative; padding-left: 26px; }
.timeline::before{
  content: "";
  position: absolute;
  left: 5px; top: 6px; bottom: 6px;
  width: 2px;
  background: #DAE2EC;
}
.timeline-item{ position: relative; margin-bottom: 26px; }
.timeline-item::before{
  content: "";
  position: absolute;
  left: -26px; top: 5px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #366bb3;
  box-sizing: content-box;
}
.timeline-item .tl-year{ font-size: 15px; font-weight: 700; color: #366bb3; margin-right: 10px; }
.timeline-item .tl-title{ font-size: 14.5px; font-weight: 600; color: #2b333a; }
.timeline-item p{ font-size: 13.5px; color: #5b6673; line-height: 1.9; margin: 6px 0 0; }

.team-card{
  background: #fff;
  border: 1px solid #DAE2EC;
  border-radius: 16px;
  padding: 26px 18px;
  text-align: center;
  height: 100%;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.team-card:hover{
  border-color: #ADBED4;
  box-shadow: 0 8px 22px rgba(0,0,0,.05);
  transform: translateY(-3px);
}
.team-avatar{
  width: 74px; height: 74px;
  border-radius: 50%;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #366bb3, #5a8fd8);
  box-shadow: 0 6px 16px rgba(54,107,179,.25);
}
.team-card h6{ font-size: 15.5px; font-weight: 700; color: #2b333a; margin-bottom: 3px; }
.team-card .team-role{ font-size: 12.5px; color: #366bb3; font-weight: 600; margin-bottom: 10px; }
.team-card p{ font-size: 13px; color: #7b8794; line-height: 1.85; margin-bottom: 0; }

.contact-card{
  background: #fff;
  border: 1px solid #DAE2EC;
  border-radius: 16px;
  padding: 22px 20px;
  height: 100%;
  transition: border-color .2s, box-shadow .2s;
}
.contact-card:hover{ border-color: #ADBED4; box-shadow: 0 8px 20px rgba(0,0,0,.05); }
.contact-card .cc-icon{
  width: 44px; height: 44px;
  border-radius: 12px;
  background: #EEF4FD;
  color: #366bb3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 12px;
}
.contact-card h6{ font-size: 14.5px; font-weight: 700; color: #2b333a; margin-bottom: 6px; }
.contact-card p{ font-size: 13.5px; color: #5b6673; line-height: 1.9; margin-bottom: 0; }
.contact-card a{ color: #366bb3; text-decoration: none; }
.contact-card a:hover{ text-decoration: underline; }

.cta-band{
  background: linear-gradient(135deg, #366bb3, #2b333a);
  border-radius: 18px;
  color: #fff;
  padding: 40px 30px;
  text-align: center;
}
.cta-band h3{ font-size: 22px; font-weight: 700; margin-bottom: 10px; }
.cta-band p{ font-size: 14px; color: #d7dfe8; margin-bottom: 20px; }
.btn-cta{
  background: #ffc107;
  border: 1px solid #e0aa00;
  color: #333;
  font-weight: 700;
  padding: 10px 26px;
  border-radius: 6px;
}
.btn-cta:hover{ background: #ffcd3c; color: #222; }

/* ========== 锚点滚动留白 ========== */
section[id]{ scroll-margin-top: 80px; }