@charset "UTF-8";

.rating-section{
  display:flex;
  justify-content:center;
  margin:1.5rem 0;
  width:100%;
}

.rating-card{
  width:100%;
  max-width:1000px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:14px;
  box-shadow:0 6px 18px rgba(0,0,0,0.05);
  box-sizing:border-box;
}

/* =========================
   HEADER
   ========================= */

.rating-header-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.rating-header{
  flex:0 0 120px;
}

.overall-label{
  font-size:0.72rem;
  font-weight:600;
  color:#6b7280;
}

.overall-score-num{
  font-size:2rem;
  font-weight:800;
  color:#16a34a;
}

/* =========================
   SCORE GRID (IMPORTANT FIX)
   ========================= */

.score-grid{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* 🖥 DESKTOP = 6 COLUMNS (FIXED) */
.score-row{
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:10px;
  width:100%;
  align-items:start;
}

.score-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  min-width:0;
  gap:4px;
}

/* ⭐ FIX: prevent visual distortion */
.label{
  font-size:0.74rem;
  font-weight:600;
  color:#111827;
  line-height:1.2;
  white-space:normal;
  overflow:visible;
  text-overflow:unset;
  word-break:break-word;
}

.star{
  font-size:0.85rem;
  color:#f59e0b;
  line-height:1;
}

/* =========================
   DIVIDER
   ========================= */

.rating-divider{
  height:1px;
  background:#e5e7eb;
  margin:10px 0;
  border:none;
}

/* =========================
   PROS & CONS
   ========================= */

.pros-cons{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

.pros,.cons{
  flex:1 1 300px;
}

.section-title{
  font-size:0.82rem;
  font-weight:700;
  margin-bottom:5px;
  padding-bottom:3px;
  border-bottom:2px solid #e5e7eb;
}

.pros-title{
  color:#16a34a;
}

.cons-title{
  color:#dc2626;
}

.score-desc-item{
  font-size:0.9rem;
  color:#475569;
  margin-bottom:3px;
  line-height:1.25;
  padding:6px 8px;
  background:#f9fafb;
  border-radius:8px;
  display:flex;
  gap:6px;
}

.score-desc-item strong{
  font-weight:600;
  color:#0f172a;
  white-space:nowrap;
}

.score-desc-item strong::after{
  content:":";
  margin-left:2px;
  color:#9ca3af;
}

/* =========================
   MOBILE (3 × 2 GRID)
   ========================= */

@media (max-width:768px){

  .rating-header{
    flex:0 0 110px;
  }

  .overall-score-num{
    font-size:1.6rem;
  }

  .score-row{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:10px;
  }

  .score-item{
    padding:2px 0;
  }

  .label{
    font-size:0.7rem;
  }

  .star{
    font-size:0.8rem;
  }

  .pros-cons{
    flex-direction:column;
    gap:10px;
  }

  .pros,.cons{
    flex:unset;
    width:100%;
  }    
}


.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 20px auto;
    max-width: 80%; 
}

@media (max-width: 768px) {
    .table-responsive {
        max-width: 100%;
    }
}

.table-responsive table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px; 
    line-height: 1.4; 
    color: #3a2e5d;
    font-family: system-ui, -apple-system, sans-serif;
}

.table-responsive th, 
.table-responsive td {
    padding: 8px 12px; 
    border: 1px solid #d1c9e6;
    text-align: center;
}

.table-responsive th {
    background-color: #6c54a3;
    color: #ffffff;
    font-weight: 600;
}

.table-responsive td:first-child {
    background-color: #f8f7ff; 
    color: #5a2d9a;           
    font-weight: normal;     
    text-align: left;
    width: 20%;           
}

.table-responsive tr:nth-child(even) {
    background-color: #fcfaff;
}

.table-responsive tr:hover {
    background-color: #f1edff;
}

/* 链接样式 */
.table-responsive table a {
    color: #8b5cf6;
    text-decoration: none;
}

.table-responsive table a:hover {
    text-decoration: underline;
}    
.note-box-grid {
  background: #f8f7ff; /* very light purple background */
  border: 1px solid #e6e0ff;
  border-radius: 12px;
  padding: 16px 18px;
  margin: 20px 0;
  transition: all 0.2s ease;
}

.note-box-grid:hover {
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.12);
  transform: translateY(-2px);
}

.note-title {
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 1.2;
  font-size: 15px;
  color: #5b21b6; /* purple */
  display: flex;
  align-items: center;
  gap: 6px;
}

.note-title::before {
  content: "⚠";
  font-size: 20px;
  color: #f59e0b; /* orange accent */
}

.note-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
}

.note-item {
  font-size: 16px;
  line-height: 1.3;
  color: #3f3f46;
  position: relative;
  padding: 6px 10px 6px 20px;
  border-radius: 8px;
  transition: all 0.2s ease;
  cursor: default;
}

.note-item::before {
  content: "•";
  position: absolute;
  left: 8px;
  color: #f59e0b;
  font-size: 16px;
}

.note-item:hover {
  background: #ede9fe;
  color: #1f1f1f;
  transform: translateX(2px);
}

@media (max-width: 768px) {
  .note-grid {
    grid-template-columns: 1fr;
    gap: 6px;
   }
} 

.tool-section {
  border: 2px dashed #7ec8ff;
  border-radius: 12px;
  padding: 16px;
  background: #fff;
  max-width: 1100px;
  margin: 20px auto;   /* ⭐关键：整体居中 */
}

/* 标题 */
.tool-title {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 500;
  color: #ff9800;
}

/* 按钮容器 */
.tool-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* pill 按钮 */
.tool-btn {
  display: inline-block;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe8b3, #ffd27a);
  color: #333;
  font-size: 14px;
  border: 1px solid rgba(0,0,0,0.08);
  transition: all 0.2s ease;
  white-space: nowrap;
}

/* hover效果 */
.tool-btn:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg, #fff2cc, #ffc85c);
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* ==========================================================================
   整体实测卡片外框 - 彻底区分传统的虚线导航栏
   ========================================================================== */
.review-section {
  border: 1px solid #e2e8f0;               /* 现代感浅灰色细实线 */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04); /* 极其轻微细腻的阴影，营造卡片悬浮感 */
  border-radius: 12px;                      /* 卡片大圆角 */
  padding: 20px;                            /* 稍微加宽内边距，让数据排版更从容 */
  background: #f8fafc;                      /* 干净的浅灰底色，与网页纯白背景形成错落层级 */
  max-width: 1100px;
  margin: 25px auto;                        /* 整体居中，并与上下段落拉开间距 */
}

/* 实测栏目的大标题 */
.review-title {
  margin: 0 0 16px 0;
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;                           /* 深石板灰，更有质感 */
  letter-spacing: 0.5px;
}

/* 测试数据方块的容器 */
.review-container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;                                /* 方块之间的间距稍微拉开 */
}

/* 基础测试方块 - 摒弃按钮胶囊圆角，改用数据报表专属的“小方块”样式 */
.review-tag {
  display: inline-block;
  padding: 8px 16px;                        /* 上下左右适度留白 */
  border-radius: 6px;                       /* 关键改变：6px小圆角，彻底告别“按钮点击感” */
  font-size: 13.5px;
  border: 1px solid rgba(0, 0, 0, 0.06);    /* 极其轻透的微边框 */
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: default;                          /* 标明是纯数据展示，不可点击 */
  
  /* 📱 移动端防溢出核心修正 */
  white-space: normal;                      /* 允许文本在空间不足时自动换行，防止撑破边框 */
  word-break: break-word;                   /* 确保长单词或连字符在边界内能正常折行 */
}

/* 悬浮微动交互 - 仅做细腻的物理升起，不做夸张的按钮发光效果 */
.review-tag:hover {
  transform: translateY(-2.5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* ----------------- 三种专业实测配色（纯色扁平化，易读性极高） ----------------- */

/* 1. 重点核心指标（黄橙色调：用于展示切频、时长、采样率等 Spek 实测硬数据） */
.tag-highlight {
  background: #fef3c7;                      /* 琥珀黄 */
  border-color: #fde68a;
  color: #92400e;                           /* 深琥珀色文字，确保文本易读性 */
  font-weight: 600;                         /* 硬核物理指标加粗显示 */
}
.tag-highlight:hover {
  background: #fde68a;
}

/* 2. 优点/推荐项（薄荷绿调：用于展示实测表现优异的功能点） */
.tag-pro {
  background: #dcfce7;                      /* 薄荷绿 */
  border-color: #bbf7d0;
  color: #166534;                           /* 深森林绿文字 */
  font-weight: 500;
}
.tag-pro:hover {
  background: #bbf7d0;
}

/* 3. 缺点/避坑项（玫瑰红调：用于展示实测广告多、假320kbps、解析失败等不足） */
.tag-con {
  background: #fee2e2;                      /* 玫瑰粉红 */
  border-color: #fecaca;
  color: #991b1b;                           /* 深酒红文字 */
  font-weight: 500;
}
.tag-con:hover {
  background: #fecaca;
}

/* ==========================================================================
   📱 移动端屏幕响应式适配（屏幕宽度小于 768px 时自动生效）
   ========================================================================== */
@media (max-width: 768px) {
  .review-section {
    padding: 16px;                          /* 略微缩小大卡片的内边距，为方块腾出更多横向空间 */
    margin: 15px 12px;                      /* 在手机屏幕左右留出安全页边距，防止卡片贴边 */
  }
  
  .review-container {
    display: flex;                          /* 确保维持弹性布局 */
    flex-wrap: wrap;                        /* 允许自动换行 */
    gap: 8px;                               /* 紧凑化方块间距，提高屏幕利用率 */
  }

  .review-tag {
    padding: 6px 12px;                      /* 适度收紧小方块内边距，使长句换行后的视觉感更精致 */
    font-size: 12.5px;                      /* 稍微降低手机端字号，优化排版 */
    
    /* 🚀 移动端多方块并排自适应核心 */
    flex: 1 1 auto;                         /* 自动伸缩填满一行的剩余空间，允许短方块同在一行并排展示 */
    max-width: 100%;                        /* 确保特长的文本不会超出屏幕 */
    text-align: center;                     /* 文本在方块内居中对齐，看起来更整齐 */
  }
}
	
/* Common Section */
.audience-section {
    margin: 30px 0;
}


.audience-title {
    font-size: 20px;
    font-weight: 700;
    color: #222;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}


.title-icon {
    width: 22px;
    height: 22px;
    font-size: 20px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


/* =====================
   Best For
===================== */

.best-for-box {
    background: #eaf4ff;
    border-radius: 14px;
    padding: 8px 22px;
}


.best-for-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 0;
    font-size: 16px;
    line-height: 1.55;
    color: #333;
}


.best-for-item:not(:last-child) {
    border-bottom: 1px solid rgba(0,0,0,0.1);
}


.check-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 3px;
    background: #3778d4;
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}


.best-for-item strong {
    font-weight: 700;
    color: #222;
}



/* =====================
   Not Ideal
===================== */

.not-ideal-section {
    margin-top: 35px;
}


.not-ideal-box {
    background: #f7f7f7;
    border-radius: 14px;
    padding: 20px 22px;
    font-size: 16px;
    line-height: 1.6;
    color: #666;
}



/* =====================
   Mobile
===================== */

@media(max-width:768px){

    .audience-section {
        margin: 25px 0;
    }


    .audience-title {
        font-size: 18px;
        margin-bottom: 12px;
    }


    .title-icon {
        font-size: 18px;
    }


    .best-for-box {
        padding: 8px 16px;
        border-radius: 12px;
    }


    .best-for-item {
        gap: 10px;
        padding: 15px 0;
        font-size: 15px;
        line-height: 1.5;
    }


    .check-icon {
        width: 17px;
        height: 17px;
        font-size: 11px;
    }


    .not-ideal-box {
        padding: 16px;
        font-size: 15px;
        line-height: 1.55;
        border-radius: 12px;
    }
	
} /* 👈 注意：这个大括号是原本移动端 @media 的闭合终点！新代码必须写在它的外面 */


/* ==========================================================================
   顶部表格转卡片式导航样式（必须在所有大括号的最外层，独立存在）
   ========================================================================== */

/* 1. 彻底根除表头和多余的空白空间 */
.nav-table table thead,
.nav-table table th,
.nav-table table tr:first-child {
    display: none !important;
}

/* 2. 清除原表格外层可能自带的 max-width 限制，让卡片撑满容器 */
.nav-table.table-responsive {
    max-width: 100% !important;
    overflow: visible !important;
}

/* 3. 基础卡片样式（移动端默认上下堆叠） */
.nav-table table tr {
    display: flex !important;
    flex-direction: column !important; 
    padding: 18px !important;
    background: #fdfbfe !important; 
    border: 1px solid #e6e0ff !important;
    border-radius: 12px !important;
    margin-bottom: 15px !important;
    box-shadow: 0 4px 10px rgba(108, 84, 163, 0.03) !important;
}

/* 彻底取消原有的表格行 hover 变色效果 */
.nav-table tr:hover {
    background-color: #fdfbfe !important;
}

/* 4. 单元格文字排版重置 */
.nav-table table td {
    display: block !important;
    padding: 5px 0 !important;
    border: none !important;
    text-align: left !important;
    width: 100% !important;
    color: #475569 !important;
    font-size: 14px !important;
    background: transparent !important; /* 清除原有 td 的背景色 */
}

/* 5. 第一列：胶囊式按钮 */
.nav-table table td:first-child {
    padding-bottom: 10px !important;
}

.nav-table table td:first-child a {
    display: inline-block !important;
    padding: 6px 18px !important;
    background-color: #6c54a3 !important; 
    color: #ffffff !important;
    text-decoration: none !important;
    border-radius: 999px !important; 
    font-weight: 600 !important;
    font-size: 13.5px !important;
    transition: all 0.2s ease !important;
}

.nav-table table td:first-child a:hover {
    background-color: #5a438c !important; 
    transform: translateY(-1px) !important;
}

/* 6. 优缺点前缀注入 */
.nav-table table td:nth-child(3)::before {
    content: "👍 Advantages: " !important;
    font-weight: bold !important;
    color: #16a34a !important;
}

.nav-table table td:nth-child(4)::before {
    content: "👎 Limitations: " !important;
    font-weight: bold !important;
    color: #dc2626 !important;
}

/* 7. 🖥️ 核心修复：大屏幕（电脑端）强制横向并排 3 列 */
@media (min-width: 768px) {
    /* 强制表格本体变成 Flex 布局，并排其子项（tr） */
    .nav-table table, 
    .nav-table table tbody {
        display: flex !important;
        gap: 16px !important;
        width: 100% !important;
        align-items: stretch !important; /* 卡片等高 */
    }
    
    .nav-table table tr {
        flex: 1 !important; /* 均分三列 */
        margin-bottom: 0 !important; /* 去掉电脑端的下边距 */
        transition: all 0.25s ease !important;
    }
    
    /* 鼠标悬浮在卡片上的精致微动效 */
    .nav-table table tr:hover {
        box-shadow: 0 8px 24px rgba(108, 84, 163, 0.12) !important;
        transform: translateY(-3px) !important;
        border-color: #c0b3e5 !important;
    }
}
/* ==========================================================================
   🛠️ 专门为 TunePat 功能参数表定制的轻量重置（与对比表完美区分）
   ========================================================================== */

/* 1. 当表格同时具备 table-responsive 和 spec-table 类名时生效 */
.table-responsive.spec-table th {
    background-color: #f4f1fa !important; /* 换成极淡的紫灰色背景，不抢对比表的风头 */
    color: #3a2e5d !important;           /* 文字换成深紫色，而不是白色 */
    font-weight: 700 !important;
}

/* 2. 重置单元格的对齐方式和边框，去掉竖线，只留极简的横线 */
.table-responsive.spec-table th, 
.table-responsive.spec-table td {
    text-align: left !important;         /* 强制改为左对齐，极大提升长文本的可读性 */
    border-left: none !important;        /* 去掉左边框线 */
    border-right: none !important;       /* 去掉右边框线 */
    border-bottom: 1px solid #eae6f5 !important; /* 仅保留淡淡的紫色横向分割线 */
}

/* 3. 彻底解放第一列的宽度锁定，并清除它自带的底色 */
.table-responsive.spec-table td:first-child {
    width: 28% !important;               /* 给功能名称预留足够空间，防止疯狂折行 */
    background-color: transparent !important; /* 去掉原本淡紫色的侧边栏背景 */
    font-weight: 600 !important;          /* 将功能项加粗 */
    color: #3a2e5d !important;
}

/* 4. 清除参数表不需要的斑马纹和悬浮变色，保持干净整洁 */
.table-responsive.spec-table tr:nth-child(even),
.table-responsive.spec-table tr:hover {
    background-color: transparent !important;
}