/*!
 * eyou-seo-article-righttoc.css
 * Namespaced, conflict-free styles for EyouCMS content pages
 * Namespace: .sx
 */

/* ===== Theme ===== */
.sx{
  --sx-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
                  "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --sx-text:#1d2228; --sx-sub:#5c6670; --sx-muted:#8a95a0;
  --sx-bg:#ffffff; --sx-bg-soft:#f6f9fc; --sx-card:#ffffff; --sx-border:#e6eef2;
  --sx-brand:#116bc4; --sx-brand-2:#0b4d8d;
  --sx-fz:16px; --sx-lh:1.85; --sx-h1:30px; --sx-h2:22px; --sx-h3:18px;
  --sx-radius:14px; --sx-radius-sm:10px;
  --sx-shadow:0 8px 28px rgba(17,107,196,.08); --sx-shadow-sm:0 3px 12px rgba(0,0,0,.06);
}
.sx, .sx *{ box-sizing:border-box; }
.sx{ font-family:var(--sx-font-sans); color:var(--sx-text); line-height:var(--sx-lh); background:transparent; }
.sx .sx-container{ max-width:1050px; margin:0 auto; padding:18px 16px; }

/* ===== Cards / Buttons ===== */
.sx .sx-card{ background:var(--sx-card); border:1px solid var(--sx-border); border-radius:var(--sx-radius); box-shadow:var(--sx-shadow); }
.sx .sx-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 18px; border-radius:10px; background:var(--sx-brand); color:#fff; text-decoration:none; box-shadow:var(--sx-shadow-sm); transition:transform .18s ease, box-shadow .18s ease, background .2s ease; }
.sx .sx-btn:hover{ transform:translateY(-1px); background:var(--sx-brand-2); box-shadow:var(--sx-shadow); }
.sx .sx-btn-ghost{ background:transparent; color:var(--sx-brand); border:1px solid var(--sx-brand); }

/* ===== Article header ===== */
.sx .sx-article-head{ margin:6px 0 12px; text-align:center; }
.sx .sx-h1{ font-size:var(--sx-h1); line-height:1.25; letter-spacing:.2px; color:#0f1a24; margin:8px 0 6px; font-weight:800; }
.sx .sx-meta{ display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; justify-content:center; color:var(--sx-sub); font-size:13.5px; margin:6px 0 8px; }
.sx .sx-meta i{ font-style:normal; color:var(--sx-muted); }
.sx .sx-tagbar{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 14px; justify-content:center; }
.sx .sx-tag{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border:1px solid var(--sx-border); border-radius:999px; font-size:13px; color:#334155; text-decoration:none; background:#fff; box-shadow:var(--sx-shadow-sm); transition:all .18s ease; }
.sx .sx-tag:hover{ border-color:var(--sx-brand); color:var(--sx-brand); transform:translateY(-1px); }

/* ===== Ribbon ===== */
.sx .sx-ribbon{ height:4px; border-radius:999px; margin:2px 0 10px; background:var(--sx-brand); }

/* ===== Breadcrumb / Links emphasis ===== */
.sx .sx-breadcrumb a,
.sx .sx-recom-head .sx-more,
.sx .sx-content a{ color:var(--sx-brand); font-weight:600; text-decoration:none; }
.sx .sx-content a:hover{ text-decoration:underline; }

/* ===== Content ===== */
.sx .sx-content{ font-size:var(--sx-fz); color:var(--sx-text); }
.sx .sx-content p{ margin:0 0 1em; }
.sx .sx-content h2{ font-size:var(--sx-h2); margin:1.6em 0 .6em; font-weight:800; color:#0b1220; position:relative; padding-left:16px; }
.sx .sx-content h3{ font-size:var(--sx-h3); margin:1.2em 0 .4em; font-weight:700; color:#0b1220; }
.sx .sx-content h2:before{ content:""; position:absolute; left:0; top:.2em; bottom:.2em; width:6px; background:var(--sx-h2-accent, var(--sx-brand)); border-radius:6px; }
.sx .sx-content ul,.sx .sx-content ol{ padding-left:1.2em; margin:0 0 1em; }
.sx .sx-content img{ max-width:100%; height:auto; display:block; border-radius:10px; margin:12px auto; box-shadow:var(--sx-shadow-sm); }
.sx .sx-content table{ width:100%; border-collapse:collapse; margin:1em 0; font-size:15px; background:#fff; box-shadow:var(--sx-shadow-sm); }
.sx .sx-content th,.sx .sx-content td{ border:1px solid var(--sx-border); padding:.7em .85em; text-align:left; }
.sx .sx-content th{ background:var(--sx-bg-soft); color:#0f172a; }
.sx .sx-content blockquote{ margin:1em 0; padding:.75em 1em; border-left:4px solid var(--sx-brand); background:#f2f8ff; color:#1f2a37; border-radius:0 12px 12px 0; }
.sx .sx-content :is(h2,h3){ scroll-margin-top:88px; } /* sticky header compensation */

/* ===== Layout: main + right aside ===== */
.sx .sx-layout{ display:grid; grid-template-columns:1fr 300px; gap:22px; }
.sx .sx-main{ background:transparent; }
.sx .sx-aside{ min-width:0; }
.sx .sx-sticky{ position:sticky; top:88px; }

/* ===== Right ToC card ===== */
.sx .sx-toc-card{ margin-bottom:14px; }
.sx .sx-toc-card .sx-toc-title{ font-weight:800; margin-bottom:8px; color:#0f172a; }
.sx .sx-toc-inner{ max-height:calc(100vh - 260px); overflow:auto; padding-right:4px; }
.sx .sx-toc-inner a{ display:block; line-height:1.8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#334155; text-decoration:none; }
.sx .sx-toc-inner a.sx-l2{ margin-left:12px; opacity:.9; font-size:.95em; }
.sx .sx-toc-inner a:hover{ color:var(--sx-brand); text-decoration:underline; }
/* scrollbar */
.sx .sx-toc-inner::-webkit-scrollbar{ width:8px; }
.sx .sx-toc-inner::-webkit-scrollbar-thumb{ background:#d9e4ef; border-radius:8px; }
.sx .sx-toc-inner:hover::-webkit-scrollbar-thumb{ background:#c1d6ea; }

/* ===== CTA card ===== */
.sx .sx-aside-card{ background:var(--sx-card); border:1px solid var(--sx-border); border-radius:var(--sx-radius); box-shadow:var(--sx-shadow); padding:16px; }
.sx .sx-aside-hd{ font-size:18px; font-weight:800; color:#0b1220; margin-bottom:8px; }
.sx .sx-aside-sub{ color:var(--sx-sub); font-size:13.5px; margin-bottom:12px; }
.sx .sx-aside-list{ list-style:none; padding:0; margin:10px 0 12px; }
.sx .sx-aside-list li{ display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px dashed var(--sx-border); }
.sx .sx-aside-list li:last-child{ border-bottom:0; }
.sx .sx-aside-tel{ font-weight:800; color:#0b1220; text-decoration:none; }
.sx .sx-aside-list a{ color:var(--sx-brand); text-decoration:none; font-weight:600; }
.sx .sx-aside-list a:hover{ text-decoration:underline; }
.sx .sx-aside-btn{ width:100%; margin:6px 0 0; justify-content:center; }
.sx .sx-aside-note{ margin-top:10px; font-size:12.5px; color:var(--sx-muted); }

/* ===== Prev/Next & Recommend ===== */
.sx .sx-pn{ margin:18px 0 6px; border-top:1px solid var(--sx-border); padding-top:12px; color:#475569; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.sx .sx-pn a{ color:var(--sx-brand); text-decoration:none; font-weight:600; }
.sx .sx-pn a:hover{ text-decoration:underline; }
.sx .sx-pn .sx-prev{ justify-self:start; }
.sx .sx-pn .sx-next{ justify-self:end; }
.sx .sx-recom{ margin:20px 0 8px; }
.sx .sx-recom-head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.sx .sx-recom-head h2{ font-size:18px; margin:0; }
.sx .sx-recom-head .sx-more{ margin-left:auto; }
.sx .sx-recom-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.sx .sx-recom-item{ border:1px solid var(--sx-border); border-radius:12px; background:#fff; overflow:hidden; box-shadow:var(--sx-shadow-sm); transition:transform .18s ease, box-shadow .18s ease; }
.sx .sx-recom-item:hover{ transform:translateY(-2px); box-shadow:var(--sx-shadow); }
.sx .sx-recom-item img{ width:100%; height:140px; object-fit:cover; display:block; }
.sx .sx-recom-item h3{ font-size:15px; margin:8px 10px 2px; color:#0b1220; }
.sx .sx-recom-item .sx-desc{ font-size:13px; color:var(--sx-sub); margin:0 10px 12px; }

/* ===== Responsive ===== */
@media (max-width:1200px){ .sx .sx-recom-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:992px){
  .sx .sx-container{ padding:16px 12px; }
  .sx .sx-h1{ font-size:26px; }
  .sx .sx-recom-grid{ grid-template-columns:repeat(2,1fr); }
  .sx .sx-layout{ grid-template-columns:1fr; }
  .sx .sx-sticky{ position:static; }
  .sx .sx-toc-inner{ max-height:none; overflow:visible; }
}
@media (max-width:480px){ .sx .sx-recom-grid{ grid-template-columns:1fr; } }

/* ===== Print ===== */
@media print{
  .sx .sx-toc-inner{ max-height:none; overflow:visible; }
  .sx .sx-recom, .sx .sx-pn{ display:none; }
}

/* ===== Dark mode ===== */
@media (prefers-color-scheme: dark){
  .sx{ --sx-text:#e8edf2; --sx-sub:#a6b1bb; --sx-muted:#8fa1b1; --sx-bg:#0b1220; --sx-bg-soft:#0f1a2a; --sx-card:#101827; --sx-border:#243445; }
  .sx .sx-recom-item img{ opacity:.98; }
}
/* 去掉浏览器自带的三角 */
.sx .sx-faq summary::-webkit-details-marker{ display:none; }

/* 浅浮雕卡片 */
.sx .sx-faq details{
  border: 1px solid #e8eef4;
  border-radius: 12px;
  background: #ffffff;
  padding: 14px 16px;
  margin: 10px 0;
  /* 关键：一深一浅的双阴影，形成浮雕 */
  box-shadow:
    8px 8px 16px rgba(15, 23, 42, 0.08),
    -8px -8px 16px rgba(255, 255, 255, 0.80);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.sx .sx-faq details:hover{
  transform: translateY(-1px);
  box-shadow:
    10px 10px 20px rgba(15, 23, 42, 0.10),
    -10px -10px 20px rgba(255, 255, 255, 0.85);
  border-color: #dbe7f3;
}
.sx .sx-faq details[open]{
  border-color: #cfe1f5;
}

/* 标题行：左侧小凹凸圆点 + 右侧箭头 */
.sx .sx-faq summary{
  position: relative;
  cursor: pointer;
  font-weight: 700;
  color: #0b1220;
  padding-left: 32px;
  padding-right: 24px;
}
.sx .sx-faq summary:before{
  content:"";
  position: absolute;
  left: 8px; top: 50%;
  width: 14px; height: 14px; border-radius: 50%;
  transform: translateY(-50%);
  background: linear-gradient(145deg, #f7fbff, #eef4fb);
  /* 内凹高光阴影，模拟“按压”的质感 */
  box-shadow:
    inset 2px 2px 4px rgba(0,0,0,.12),
    inset -2px -2px 4px rgba(255,255,255,.9);
}
.sx .sx-faq summary:after{
  content:"";
  position: absolute;
  right: 6px; top: 50%;
  width: 10px; height: 10px;
  border-right: 2px solid #6b7280;
  border-bottom: 2px solid #6b7280;
  transform: translateY(-50%) rotate(-45deg);
  transition: transform .2s ease;
}
.sx .sx-faq details[open] summary:after{
  transform: translateY(-50%) rotate(45deg);
}

/* 答案区域 */
.sx .sx-faq .sx-faq-a{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #e6eef2;
  color: #5c6670;
  font-size: 15px;
  line-height: 1.85;
}

/* 暗色模式微调 */
@media (prefers-color-scheme: dark){
  .sx .sx-faq details{
    background:#101827; border-color:#243445;
    box-shadow:
      8px 8px 16px rgba(0,0,0,.45),
      -8px -8px 16px rgba(255,255,255,.03);
  }
  .sx .sx-faq summary:before{
    background: linear-gradient(145deg, #111b28, #0e1622);
    box-shadow:
      inset 2px 2px 4px rgba(0,0,0,.5),
      inset -2px -2px 4px rgba(255,255,255,.06);
  }
}