.single-post {
  background: #fff;
  /* border-radius: 22px; */
  /* box-shadow: 0 8px 38px rgba(26,70,200,0.09); */
  /* padding: 44px 22px 34px 22px; */
  /* max-width: 800px; */
  /* margin: 35px auto 40px auto; */
  color: #1c2d45;
  position: relative;
}
.rate-count { font-weight:600; margin-left:4px; color:#227cbe; }
.rate-btn[disabled] { opacity:0.55; pointer-events:none; }
.rate-btn.rated { background:#d6f6e4; }

#reading-progress {
  position: fixed; top: 0; left: 0; height: 4px;
  background: linear-gradient(90deg, #2579da 0%, #1ee3ff 100%);
  width: 0; z-index: 101; transition: width 0.17s;
}
.read-time {
  color: #3a7be2; font-size: 0.99em; background: #f3f8ff;
  display: inline-block; padding: 3px 13px; border-radius: 7px;
  margin: 0 0 12px 0; font-weight: 500;
}
.toc-block {
  background: #f6fbff; border: 1px dashed #29a3ff5b; border-radius: 10px;
  padding: 15px 19px; margin: 22px 0 30px 0; font-size: 1em;
}
.toc-block ul {margin: 8px 0 0 20px; padding: 0;}
.toc-block a {color: #1861c7; text-decoration: underline;}
.toc-block a:hover {color: #32b2ff; text-decoration: underline wavy;}
.share-block {
  margin: 23px 0 17px 0; font-size: 1em; opacity: 0.85;
}
.share-block a {
  background: #e9f2ff; color: #2062b8; margin: 0 7px; padding: 3px 10px;
  border-radius: 5px; text-decoration: none; transition: background .13s;
}
.share-block a:hover { background: #cbe3ff; }
.ai-callout {
  /* background: #eaf5ff40; */
  /* border-left: 5px solid #30b0ff33; */
  /* padding: 12px 18px; */
  /* border-radius: 11px; */
  /* margin: 29px 0; */
  font-size: 1.07em;
  color: #2267a9;
  /* font-weight: 500; */
  box-shadow: 0 1px 7px #c2e2ff2b;
  background: #f1f7ff54;
  border-left: 5px solid #3498db14;
  border-radius: 8px;
  padding: 19px 25px;
  box-shadow: 0 1px 7px #e4f3ff26;
}
.ai-callout span {font-weight: 700; margin-right: 8px;}
.faq-accordion {margin: 22px 0;}
.faq-item {margin-bottom: 11px;}
.faq-question {
  width:100%; text-align:left; background:#eaf2ff;
  border:none; border-radius:7px; padding:12px 16px;
  font-size:1.07em; font-weight:600; color:#1761c5;
  cursor:pointer; transition:background .11s; position:relative;
  display:flex; align-items:center; justify-content:space-between;
}
.faq-question.open, .faq-question:hover {background:#d2eaff;}
.faq-toggle {font-weight:bold;font-size:1.23em;margin-left:10px;}
.faq-answer {
  background: #f6fbff; border-radius: 0 0 7px 7px;
  padding: 15px 18px; font-size:1.04em; margin-top:0; display:none;
  color:#184977;
  box-shadow: 0 1px 7px #d8eefd17;
}
.rate-post {
  margin: 33px 0 18px 0; font-size: 1.06em; background: #f4faff;
  border-radius: 9px; padding: 11px 15px; display: inline-block;
  box-shadow: 0 1px 6px #d8eefd33;
}
.rate-post .rate-btn {
  margin: 0 7px; background: #eaf5ff; border: none; border-radius: 6px;
  padding: 4px 11px; cursor: pointer; font-size: 1.19em; transition: background .11s;
}
.rate-post .rate-btn:hover { background: #bde6ff; }
.rate-thanks { color:#2cb665; margin-left:9px; }
.more-interesting ul {list-style:none;padding:0;display:flex;gap:14px;}
.more-interesting ul li a { color: #217ee3; text-decoration: underline dotted; font-weight: 500;}
.more-interesting ul li a:hover { color: #19c8ff; }

.main-image {
  text-align:center;
  margin: 30px 0 23px 0;
}
.custom-img {
  max-width: 100%;
  height: auto;
  margin: 0 auto 28px auto;
  border-radius: 16px;
  box-shadow: 0 2px 18px #e0ecff2a;
}
.post-meta {
  color: #2461a7;
  font-size: 0.98em;
  margin-bottom: 11px;
}
.editor-quote {
  background: #f2f7ff;
  border-left: 5px solid #1972ca;
  padding: 16px 22px;
  margin: 25px 0 22px 0;
  font-size: 1.11em;
  color: #184977;
  border-radius: 10px;
  opacity: 0.92;
  position: relative;
}
.editor-quote::before {
  content: "“";
  color: #1972ca;
  font-size: 2.1em;
  position: absolute;
  left: 13px;
  top: -12px;
  opacity: 0.12;
}
.excerpt {
  margin: 19px 0 22px 0;
  font-size: 1.09em;
  background: #f9fafd91;
  padding: 13px 20px;
  border-radius: 8px;
  color: #185080;
  font-weight: 500;
  box-shadow: 0 1px 6px #e7f0ff2b;
}
.post-content {
  font-size: 1.11em;
  line-height: 1.7;
  margin-bottom: 38px;
}
.author-card {
  margin: 34px 0 26px 0;
  background: #f1f7ff54;
  border-left: 5px solid #3498db14;
  border-radius: 8px;
  padding: 19px 25px;
  box-shadow: 0 1px 7px #e4f3ff26;
}
.author-card strong { color:#1660c3; }
.author-card a { color: #217ee3; text-decoration: underline; }
.post-faq .faq-block {
  margin: 13px 0;
  background: #e7f3ff38;
  padding: 13px 17px;
  border-radius: 7px;
  font-size: 1em;
  box-shadow: 0 1px 3px #d4edff22;
}
.user-tip {
  background: #f5f8fa63;
  padding: 1em;
  border-radius: 8px;
  margin-top: 2em;
  box-shadow: 0 1px 7px #e4f3ff14;
}
.related-posts {
  margin-top: 60px;
  background: #f7fbff;
  border-radius: 12px;
  padding: 16px 24px;
  box-shadow: 0 1px 6px #e7f0ff22;
}
.related-posts h3 {
  font-size: 1.15em;
  color: #1761c5;
}
.related-posts ul {
  list-style: none;
  padding-left: 0;
  margin: 10px 0 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 13px 22px;
}
.related-posts li a {
  color: #1560c4;
  text-decoration: none;
  border-bottom: 1px dotted #a0cfff;
  transition: color .15s;
  font-weight: 500;
}
.related-posts li a:hover { color: #3ab2ff; }
.comments-area {
  background: #f3faff9a;
  border-radius: 8px;
  padding: 18px 24px 10px 24px;
  margin-top: 35px;
}
.comments-area h3 {color:#2461a7;}
@media (max-width:700px){
  .single-post{padding:8px 2vw;}
  .main-image img{border-radius:10px;}
  .related-posts{padding:10px 5px;}
  .author-card{padding:14px 9px;}
}