@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);
}