/* === BEGIN: Light (v7 unchanged) === */

/* -------------------------------------------------------------
   Typora-like look for Hexo Butterfly post pages (v7, per screenshots)
   Targets Butterfly 5.4.x DOM: #article-container / .post-content
   ------------------------------------------------------------- */

:root{
  --text-color:#0F1A3A;
  --bg-color:#F4F7FA;       /* 稍淡的页背景更像截图 */
  --ink:#351D35;
  --accent:#C09A21;
  --accent-ink:#0F1A3A;
  --ring:rgba(255,166,17,.55);
  --ring-strong:rgba(255,166,17,.95);
  --ring-fill: rgba(255,166,17,.18);
  --h3-num-color:#E9E9EC;
  --h3-num-color-hover:#B2B4BD;
  --h3-line-color: var(--text-color);
}

html[data-theme="light"] body{ background: var(--bg-color); }

/* Article container card */
.post #article-container,
.post .post-content{
  max-width: 45rem;
  margin: 2rem auto;
  padding: 2rem 4rem;
  border-radius: 15px;
  background: linear-gradient(145deg,#fff 0%,#F9FCFF 5%,#f2f2f3 35%,#f0eafb 75%,#e0e3e6) !important;
  box-shadow: 15px 15px 66px #a2a4a6, -15px -15px 66px #ffffff !important;
  color: var(--text-color);
  font-size: 18px;
  line-height: 2;
  text-align: justify;
  counter-reset: h2 0 h3 0 h4 0 h5 0;
  overflow: visible;
}

/* Typography */
.post #article-container, 
.post #article-container p,
.post #article-container li,
.post .post-content, 
.post .post-content p,
.post .post-content li{
  font-family: "Bellota","Tw Cen MT","HYHuaGuan","霞鹜文楷","STLibianSC-Regular","华文中宋",
               -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans","Helvetica Neue",Arial,
               "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji",sans-serif;
}

/* Headings base */
.post #article-container h1,
.post #article-container h2,
.post #article-container h3,
.post #article-container h4,
.post #article-container h5,
.post #article-container h6,
.post .post-content h1,
.post .post-content h2,
.post .post-content h3,
.post .post-content h4,
.post .post-content h5,
.post .post-content h6{
  font-family:"Old Standard TT",Didot,"Modern No. 20","FZJuZXFK--GBK1-0","FZJZFS","STBaoliSC-Regular","华文隶书",Georgia,serif;
  font-weight:700;
  color:var(--ink);
  position:relative;
  text-shadow:0 0 1px rgba(255,255,255,.3);
  isolation:isolate;
  z-index:0;
}

/* H1 */
.post #article-container h1,
.post .post-content h1{
  text-align:center;
  font-size:2.25rem;
  text-transform:capitalize;
  counter-reset:h2 0 h3 0 h4 0 h5 0;
}

/* ================= H2 ================= */
.post #article-container h2,
.post .post-content h2{
  /* size & layout */
  --outer-d: 100px;      /* 外环直径 */
  --inner-d: 90px;       /* 内环直径 */
  --outer-b: 5px;        /* 外环线宽 */
  --inner-b: 8px;        /* 内环线宽 */
  --outer-scale: .22;    /* 初始外环缩放 */
  --inner-scale: .82;    /* 初始内环缩放 */
  --num-scale:   .82;    /* 初始序号缩放（跟内环一致） */

  /* 文字落点：圆左下角（与直径联动） */
  padding-left: calc(var(--outer-d)/2 + 1.6rem);
  padding-top:  calc(var(--outer-d) * 0.36);
  padding-bottom: 1rem;

  margin: 1rem 1.25rem;
  counter-reset:h3 0 h4 0 h5 0;
  counter-increment:h2;
  font-size:2rem;
}

/* hover：不位移，只增强与放大 */
.post #article-container h2:hover,
.post .post-content h2:hover{
  --outer-scale: .98;
  --inner-scale: 1;
  --num-scale:   1;
  --ring-fill: rgba(255,166,17,.26);
}

/* 填充圆盘（柔和金色，位于两环之下） */
.post #article-container h2::after,
.post .post-content h2::after{
  content:"";
  position:absolute;
  left:0; top:50%;
  width: var(--inner-d);
  height: var(--inner-d);
  border-radius:50%;
  background: radial-gradient(ellipse at center, var(--ring-fill) 0%, var(--ring-fill) 60%, transparent 61%);
  transform: translate(-50%,-50%) scale(var(--inner-scale));
  z-index:-2;
  transition: transform .45s cubic-bezier(.22,.61,.36,1), opacity .3s ease;
}

/* 大号序号：内圈正中，跟内圈同步 */
.post #article-container h2::before,
.post .post-content h2::before{
  content: counter(h2) " ";
  position:absolute;
  left:0; top:50%;
  width: var(--inner-d);
  height: var(--inner-d);
  display:flex; align-items:center; justify-content:center;
  font-style: italic;
  font-size: calc(var(--inner-d) * 0.6);
  color:#cfcbd3;
  z-index:-1;
  pointer-events:none;
  transform: translate(-50%,-50%) scale(var(--num-scale));
  transition: transform .45s cubic-bezier(.22,.61,.36,1), color .3s ease;
}
.post #article-container h2:hover::before,
.post .post-content h2:hover::before{ color:#1a1a1a; }

/* 用 .headerlink 画两枚同心环（固定在左侧，不移动） */
.post #article-container h2 .headerlink,
.post .post-content h2 .headerlink{
  position:absolute;
  left:0; top:50%;
  width: var(--outer-d);
  height: var(--outer-d);
  transform: translate(-50%,-50%);
  z-index:-1;
  pointer-events:none;
}

/* 外环 */
.post #article-container h2 .headerlink::before,
.post .post-content h2 .headerlink::before{
  content:"";
  position:absolute; left:50%; top:50%;
  width: var(--outer-d); height: var(--outer-d);
  border: var(--outer-b) solid var(--ring);
  border-radius:50%;
  transform: translate(-50%,-50%) scale(var(--outer-scale));
  transition: transform .45s cubic-bezier(.22,.61,.36,1), border-color .3s ease, opacity .3s ease;
  opacity:.9;
}

/* 内环 */
.post #article-container h2 .headerlink::after,
.post .post-content h2 .headerlink::after{
  content:"";
  position:absolute; left:50%; top:50%;
  width: var(--inner-d); height: var(--inner-d);
  border: var(--inner-b) solid var(--ring);
  border-radius:50%;
  transform: translate(-50%,-50%) scale(var(--inner-scale));
  transition: transform .45s cubic-bezier(.22,.61,.36,1), border-color .3s ease, opacity .3s ease;
  opacity:.85;
}
.post #article-container h2:hover .headerlink::after,
.post .post-content h2:hover .headerlink::after{ border-color: var(--ring-strong); }

/* ================= H3（上粗下细；序号在文字下方） ================= */
.post #article-container h3,
.post .post-content h3{
  /* 可调参数 */
  --top-h0: 2px;         /* 顶线初始厚度 */
  --top-h1: 8px;         /* 悬停后顶线厚度 */
  --bot-h:  2px;         /* 底线厚度 */
  --line-left: 2rem;     /* 线条左边距（序号也会与此左对齐） */
  --line-right: 2rem;    /* 线条右边距 */

  padding: 1.5rem 2rem 2.2rem; /* 给底线与序号留空间 */
  counter-reset: h4 0 h5 0;
  counter-increment: h3;
  font-size: 1.85rem;

  /* 让 ::before 可以安全放到“文字下方” */
  position: relative;
  z-index: 0;
  isolation: isolate;
}

/* 顶线：从上到下变粗 */
.post #article-container h3::after,
.post .post-content h3::after{
  content:"";
  position:absolute;
  left: var(--line-left);
  right: var(--line-right);
  top: 0;
  height: var(--top-h0);
  background: var(--h3-line-color);
  opacity:.18;
  transform-origin: top;
  transition: height .35s ease, opacity .35s ease;
}
.post #article-container h3:hover::after,
.post .post-content h3:hover::after{
  height: var(--top-h1);
  opacity:.25;
}

/* 底线：自上而下显现（用 headerlink 作画布） */
.post #article-container h3 .headerlink,
.post .post-content h3 .headerlink{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
}
.post #article-container h3 .headerlink::after,
.post .post-content h3 .headerlink::after{
  content:"";
  position:absolute;
  left: var(--line-left);
  right: var(--line-right);
  bottom: 0.4rem;               /* 稍抬高，序号贴其上方 */
  height: var(--bot-h);
  background: var(--h3-line-color);
  opacity: 0;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .35s ease .05s, opacity .35s ease .05s;
}
.post #article-container h3:hover .headerlink::after,
.post .post-content h3:hover .headerlink::after{
  transform: scaleY(1);
  opacity: .22;
}

/* 序号：更大，贴“第二条线”上方，且在文字下层 */
.post #article-container h3::before,
.post .post-content h3::before{
  content: counter(h2) "." counter(h3) " ";
  position:absolute;
  left: var(--line-left);
  bottom: calc(0.4rem + var(--bot-h) + 0.2rem);  /* 紧贴底线上方 */
  font-style: italic;
  font-size: 5rem;       /* 你要的大号效果，可改小到 3–4rem */
  line-height: 1;
  color: var(--h3-num-color);
  z-index: -1;           /* 关键：压到标题文字下方 */
  pointer-events: none;
  transition: color .3s ease;
}
.post #article-container h3:hover::before,
.post .post-content h3:hover::before{
  color: var(--h3-num-color-hover);
}

/* ================= H4（仅左上序号，无上下线） ================= */
.post #article-container h4,
.post .post-content h4{
  /* 可调参数 */
  --h4-num-color: #d2d2d2;       /* 序号默认色 */
  --h4-num-hover: #4d4d4d;       /* 序号悬停色 */
  --h4-num-size: 2.1rem;         /* 序号大小 */
  --h4-num-left: 1.0rem;        /* 序号相对标题左上角的水平偏移（负值更往左） */
  --h4-num-top:  0.8rem;        /* 序号相对标题左上角的垂直偏移（负值更往上） */

  padding: 1.2rem 2rem 1rem;     /* 基本内边距（可按需微调） */
  counter-increment: h4;
  counter-reset: h5 0;
  font-size: 1.8rem;

  /* 让序号能在文字下层显示且不跑出容器 */
  position: relative;
  z-index: 0;
  isolation: isolate;
}

/* 左上角序号（叠放，不占位；默认在文字下层） */
.post #article-container h4::before,
.post .post-content h4::before{
  content: counter(h2) "." counter(h3) "." counter(h4) " ";
  position: absolute;
  left: var(--h4-num-left);
  top:  var(--h4-num-top);
  font-style: italic;
  font-size: var(--h4-num-size);
  line-height: 1;
  color: var(--h4-num-color);
  z-index: -1;                 /* 放到标题文字下面，如需盖在上面改为 z-index: 1; */
  pointer-events: none;
  transition: color .25s ease;
}

/* 悬停颜色变化 */
.post #article-container h4:hover::before,
.post .post-content h4:hover::before{
  color: var(--h4-num-hover);
}


/* ---------------- Code, Blockquote etc. remain as in v7 ---------------- */
.post #article-container figure.highlight,
.post .post-content figure.highlight{
  background: transparent !important;
  border: none !important;
  border-left: none !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: -5px -8px 20px #040f30, inset -20px -20px 15px #374d90 !important;
}
.post #article-container figure.highlight table,
.post .post-content figure.highlight table{
  width:100%;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: linear-gradient(225deg, #101c3e, #0e1734) !important;
}
.post #article-container pre,
.post #article-container figure.highlight pre,
.post .post-content pre,
.post .post-content figure.highlight pre{
  background: transparent !important;
  color: #e6dcff !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 12px 14px !important;
  box-shadow: none !important;
  overflow:auto !important;
}

/* inline code */
.post #article-container code,
.post .post-content code{
  padding: 0 .5rem;
  border-radius: 2px;
  background: linear-gradient(225deg, #101c3e, #0e1734);
  color: #e6dcff;
  box-shadow: inset 5px 5px 15px #374d90;
  font-size: .85rem;
}

/* Blockquote */
.post #article-container blockquote,
.post .post-content blockquote{
  margin: 2rem auto !important;
  padding: .5rem 3rem .5rem 1rem !important;
  border: none !important;
  border-left: none !important;
  border-inline-start: 0 !important;
  background: linear-gradient(12deg, #ededfc, #efeffb 45%, #f7f6ff) !important;
  box-shadow: -5px 5px 10px #e6e6e6, 5px -5px 10px #f0f0f0 !important;
  border-radius: 5px !important;
  position: relative !important;
  transition: all .5s ease-in-out !important;
}
.post #article-container blockquote:hover,
.post .post-content blockquote:hover{
  background:#f0eafb !important;
  box-shadow: inset 9px -9px 25px #e4deee, inset -9px 9px 25px #fcf6ff !important;
}
.post #article-container blockquote::after,
.post #article-container blockquote::before,
.post .post-content blockquote::after,
.post .post-content blockquote::before{
  content:"" !important;
  position: absolute !important;
  right:-16px; bottom:-16px;
  border-radius:50% !important;
  background: linear-gradient(225deg, #fefbf7, #d5d4d0) !important;
  box-shadow: -5px 5px 10px #bebcb9bf, 5px -5px 10px #ffffff !important;
}
.post #article-container blockquote::after,
.post .post-content blockquote::after{ width:4rem; height:4rem; }
.post #article-container blockquote::before,
.post .post-content blockquote::before{ width:2rem; height:2rem; right:25px; bottom:-16px; }

/* Tables & misc */
.post #article-container table,
.post .post-content table{
  width:100%;
  padding:.5rem 1rem;
  border-radius: 5px;
  background: linear-gradient(315deg, #d8d3e2, #fffaff);
  box-shadow: -6px -6px 12px #d8d3e2, 6px 6px 12px #ffffff;
}
.post #article-container thead,
.post .post-content thead{ font-weight:700; }
.post #article-container table tr:hover,
.post #article-container thead,
.post .post-content table tr:hover,
.post .post-content thead{
  box-shadow: 2px 5px 10px 0px #e6950f, inset 0px 5px 20px 10px #ffb713;
  border-radius: 20px;
}

.post #article-container img,
.post .post-content img{
  display:block;
  margin: 1rem auto;
  border-radius: 5px;
  box-shadow: -5px 5px 10px #e6e6e6, 5px -5px 10px #f0f0f0;
  max-width: 100%;
  height: auto;
}

.post #article-container kbd,
.post .post-content kbd{
  margin: 0 .2em;
  padding: .1em .6em;
  font-size: .8em;
  color:#242729;
  background: #fff;
  border: 1px solid #adb3b9;
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(12,13,14,.2), 0 0 0 2px #fff inset;
}



/* =======================================================================
   DARK THEME (bulletproof) for Hexo Butterfly post pages
   Triggers:
     1) html[data-theme="dark"]
     2) html.dark  (some switches add this)
     3) body.dark  (some older snippets)
     4) Fallback: @media (prefers-color-scheme: dark) when no explicit theme
   Targets both DOMs:
     - .post #article-container / .post .post-content   (Butterfly >= 5.x)
     - .layout-post .post-body                          (older mapping / custom)
   ======================================================================= */

/* ---- Switch variables when dark ---- */
html[data-theme="dark"],
html.dark,
body.dark{
  --text-color:#f0eafb;
  --bg-color:#0F1A3A;
  --ink:#FDFEFD;
  --accent:#C09A21;
  --accent-ink:#0F1A3A;
  --ring:rgba(255,166,17,.55);
  --ring-strong:rgba(255,166,17,.95);
  --ring-fill: rgba(255,166,17,.18);
  --h3-num-color:#8A899A;
  --h3-num-color-hover:#3C3B53;
  --h3-line-color: var(--h3-num-color);
}

/* ---- Fallback to system dark if no explicit theme ---- */
@media (prefers-color-scheme: dark){
  html:not([data-theme]):not(.dark) body{
    --text-color:#f0eafb;
    --bg-color:#0F1A3A;
    --ink:#FDFEFD;
    --accent:#C09A21;
    --accent-ink:#0F1A3A;
    --ring:rgba(255,166,17,.55);
    --ring-strong:rgba(255,166,17,.95);
    --ring-fill: rgba(255,166,17,.18);
    --h3-num-color:#8A899A;
    --h3-num-color-hover:#3C3B53;
    --h3-line-color: var(--h3-num-color);
  }
}

/* ---- Page background ---- */
html[data-theme="dark"] body,
html.dark body,
body.dark{
  background:#0F1A3A !important;
}
@media (prefers-color-scheme: dark){
  html:not([data-theme]):not(.dark) body{
    background:#0F1A3A !important;
  }
}

/* ---- Article container card (BTF 5.x) ---- */
html[data-theme="dark"] .post #article-container,
html[data-theme="dark"] .post .post-content,
html.dark .post #article-container,
html.dark .post .post-content,
body.dark .post #article-container,
body.dark .post .post-content{
  background:#171736 !important;
  box-shadow: 10px 10px 20px #1a1628, -10px -10px 20px #1c172f !important;
  color: var(--text-color) !important;
}
@media (prefers-color-scheme: dark){
  html:not([data-theme]):not(.dark) .post #article-container,
  html:not([data-theme]):not(.dark) .post .post-content{
    background:#171736 !important;
    box-shadow: 10px 10px 20px #1a1628, -10px -10px 20px #1c172f !important;
    color: var(--text-color) !important;
  }
}

/* ---- Article container card (older mapping) ---- */
html[data-theme="dark"] .layout-post .post-body,
html.dark .layout-post .post-body,
body.dark .layout-post .post-body{
  background:#171736 !important;
  box-shadow: 10px 10px 20px #1a1628, -10px -10px 20px #1c172f !important;
  color: var(--text-color) !important;
}
@media (prefers-color-scheme: dark){
  html:not([data-theme]):not(.dark) .layout-post .post-body{
    background:#171736 !important;
    box-shadow: 10px 10px 20px #1a1628, -10px -10px 20px #1c172f !important;
    color: var(--text-color) !important;
  }
}

/* ---- Headings ---- */
html[data-theme="dark"] .post #article-container h1,
html[data-theme="dark"] .post #article-container h2,
html[data-theme="dark"] .post #article-container h3,
html[data-theme="dark"] .post #article-container h4,
html[data-theme="dark"] .post #article-container h5,
html[data-theme="dark"] .post #article-container h6,
html[data-theme="dark"] .post .post-content h1,
html[data-theme="dark"] .post .post-content h2,
html[data-theme="dark"] .post .post-content h3,
html[data-theme="dark"] .post .post-content h4,
html[data-theme="dark"] .post .post-content h5,
html[data-theme="dark"] .post .post-content h6,
html[data-theme="dark"] .layout-post .post-body h1,
html[data-theme="dark"] .layout-post .post-body h2,
html[data-theme="dark"] .layout-post .post-body h3,
html[data-theme="dark"] .layout-post .post-body h4,
html[data-theme="dark"] .layout-post .post-body h5,
html[data-theme="dark"] .layout-post .post-body h6,
html.dark .post #article-container h1,
html.dark .post #article-container h2,
html.dark .post #article-container h3,
html.dark .post #article-container h4,
html.dark .post #article-container h5,
html.dark .post #article-container h6,
html.dark .post .post-content h1,
html.dark .post .post-content h2,
html.dark .post .post-content h3,
html.dark .post .post-content h4,
html.dark .post .post-content h5,
html.dark .post .post-content h6,
html.dark .layout-post .post-body h1,
html.dark .layout-post .post-body h2,
html.dark .layout-post .post-body h3,
html.dark .layout-post .post-body h4,
html.dark .layout-post .post-body h5,
html.dark .layout-post .post-body h6,
body.dark .post #article-container h1,
body.dark .post #article-container h2,
body.dark .post #article-container h3,
body.dark .post #article-container h4,
body.dark .post #article-container h5,
body.dark .post #article-container h6,
body.dark .post .post-content h1,
body.dark .post .post-content h2,
body.dark .post .post-content h3,
body.dark .post .post-content h4,
body.dark .post .post-content h5,
body.dark .post .post-content h6,
body.dark .layout-post .post-body h1,
body.dark .layout-post .post-body h2,
body.dark .layout-post .post-body h3,
body.dark .layout-post .post-body h4,
body.dark .layout-post .post-body h5,
body.dark .layout-post .post-body h6{
  color: var(--ink) !important;
}

/* ---- Links ---- */
html[data-theme="dark"] .post #article-container a,
html[data-theme="dark"] .post .post-content a,
html[data-theme="dark"] .layout-post .post-body a,
html.dark .post #article-container a,
html.dark .post .post-content a,
html.dark .layout-post .post-body a,
body.dark .post #article-container a,
body.dark .post .post-content a,
body.dark .layout-post .post-body a{
  color: var(--accent) !important;
}
html[data-theme="dark"] .post #article-container a:hover,
html[data-theme="dark"] .post .post-content a:hover,
html[data-theme="dark"] .layout-post .post-body a:hover,
html.dark .post #article-container a:hover,
html.dark .post .post-content a:hover,
html.dark .layout-post .post-body a:hover,
body.dark .post #article-container a:hover,
body.dark .post .post-content a:hover,
body.dark .layout-post .post-body a:hover{
  color: var(--text-color) !important;
}

/* ---- Inline code ---- */
html[data-theme="dark"] .post #article-container code,
html[data-theme="dark"] .post .post-content code,
html[data-theme="dark"] .layout-post .post-body code,
html.dark .post #article-container code,
html.dark .post .post-content code,
html.dark .layout-post .post-body code,
body.dark .post #article-container code,
body.dark .post .post-content code,
body.dark .layout-post .post-body code{
  background: linear-gradient(225deg, #101c3e, #0e1734) !important;
  color:#e6dcff !important;
  box-shadow: inset 5px 5px 15px #374d90 !important;
}

/* ---- Code blocks ---- */
html[data-theme="dark"] .post #article-container figure.highlight,
html[data-theme="dark"] .post .post-content figure.highlight,
html[data-theme="dark"] .layout-post .post-body figure.highlight,
html.dark .post #article-container figure.highlight,
html.dark .post .post-content figure.highlight,
html.dark .layout-post .post-body figure.highlight,
body.dark .post #article-container figure.highlight,
body.dark .post .post-content figure.highlight,
body.dark .layout-post .post-body figure.highlight{
  box-shadow: -5px -8px 20px #040f30, inset -20px -20px 15px #374d90 !important;
}
html[data-theme="dark"] .post #article-container figure.highlight table,
html[data-theme="dark"] .post .post-content figure.highlight table,
html[data-theme="dark"] .layout-post .post-body figure.highlight table,
html.dark .post #article-container figure.highlight table,
html.dark .post .post-content figure.highlight table,
html.dark .layout-post .post-body figure.highlight table,
body.dark .post #article-container figure.highlight table,
body.dark .post .post-content figure.highlight table,
body.dark .layout-post .post-body figure.highlight table{
  background: linear-gradient(225deg, #101c3e, #0e1734) !important;
}

/* ---- Blockquote ---- */
html[data-theme="dark"] .post #article-container blockquote,
html[data-theme="dark"] .post .post-content blockquote,
html[data-theme="dark"] .layout-post .post-body blockquote,
html.dark .post #article-container blockquote,
html.dark .post .post-content blockquote,
html.dark .layout-post .post-body blockquote,
body.dark .post #article-container blockquote,
body.dark .post .post-content blockquote,
body.dark .layout-post .post-body blockquote{
  background: linear-gradient(1deg, #101c3e, #0e1734) !important;
  box-shadow: -5px 5px 10px #0a1024, 5px -5px 10px #121e44 !important;
}
html[data-theme="dark"] .post #article-container blockquote:hover,
html[data-theme="dark"] .post .post-content blockquote:hover,
html[data-theme="dark"] .layout-post .post-body blockquote:hover,
html.dark .post #article-container blockquote:hover,
html.dark .post .post-content blockquote:hover,
html.dark .layout-post .post-body blockquote:hover,
body.dark .post #article-container blockquote:hover,
body.dark .post .post-content blockquote:hover,
body.dark .layout-post .post-body blockquote:hover{
  background: #103048 !important;
  box-shadow: inset 9px -9px 25px #0d263a, inset -9px 9px 25px #133a56 !important;
}

/* ---- Tables ---- */
html[data-theme="dark"] .post #article-container table,
html[data-theme="dark"] .post .post-content table,
html[data-theme="dark"] .layout-post .post-body table,
html.dark .post #article-container table,
html.dark .post .post-content table,
html.dark .layout-post .post-body table,
body.dark .post #article-container table,
body.dark .post .post-content table,
body.dark .layout-post .post-body table{
  background: linear-gradient(225deg, #0e2b41, #11334d) !important;
  box-shadow: -6px -6px 12px #0d263a, 6px 6px 12px #133a56 !important;
  color: var(--text-color);
}
html[data-theme="dark"] .post #article-container table tr:hover,
html[data-theme="dark"] .post #article-container thead,
html[data-theme="dark"] .post .post-content table tr:hover,
html[data-theme="dark"] .post .post-content thead,
html[data-theme="dark"] .layout-post .post-body table tr:hover,
html[data-theme="dark"] .layout-post .post-body thead,
html.dark .post #article-container table tr:hover,
html.dark .post #article-container thead,
html.dark .post .post-content table tr:hover,
html.dark .post .post-content thead,
html.dark .layout-post .post-body table tr:hover,
html.dark .layout-post .post-body thead,
body.dark .post #article-container table tr:hover,
body.dark .post #article-container thead,
body.dark .post .post-content table tr:hover,
body.dark .post .post-content thead,
body.dark .layout-post .post-body table tr:hover,
body.dark .layout-post .post-body thead{
  box-shadow: 2px 5px 10px 0px #0e1734, inset 0px 5px 20px 10px #2d3966 !important;
}

/* ---- HR ---- */
html[data-theme="dark"] .post #article-container hr,
html[data-theme="dark"] .post .post-content hr,
html[data-theme="dark"] .layout-post .post-body hr,
html.dark .post #article-container hr,
html.dark .post .post-content hr,
html.dark .layout-post .post-body hr,
body.dark .post #article-container hr,
body.dark .post .post-content hr,
body.dark .layout-post .post-body hr{
  border: 1px solid var(--accent) !important;
}

/* ---- Images ---- */
html[data-theme="dark"] .post #article-container img,
html[data-theme="dark"] .post .post-content img,
html[data-theme="dark"] .layout-post .post-body img,
html.dark .post #article-container img,
html.dark .post .post-content img,
html.dark .layout-post .post-body img,
body.dark .post #article-container img,
body.dark .post .post-content img,
body.dark .layout-post .post-body img{
  box-shadow: -5px 5px 10px #0a1024, 5px -5px 10px #121e44 !important;
}

/* === END: Dual (v8.1) === */

/* === BEGIN: Hover color for blockquote dots (two circles at bottom-right) === */
/* Theme variables: default (light) */
:root{
  --bq-dot1: #fefbf7;
  --bq-dot2: #d5d4d0;
  --bq-dot1-hover: #ffe8b3;
  --bq-dot2-hover: #ffc766;
}

/* Theme variables: dark */
html[data-theme="dark"],
html.dark,
body.dark{
  --bq-dot1: #1a213d;
  --bq-dot2: #2a3255;
  --bq-dot1-hover: #8a6a1a;
  --bq-dot2-hover: #c3921e;
}

/* Override the two decorative dots' background and add a smooth transition */
.post #article-container blockquote::after,
.post #article-container blockquote::before,
.post .post-content blockquote::after,
.post .post-content blockquote::before,
.layout-post .post-body blockquote::after,
.layout-post .post-body blockquote::before{
  background: linear-gradient(225deg, var(--bq-dot1), var(--bq-dot2)) !important;
  transition: background .35s ease, box-shadow .35s ease, transform .35s ease;
  will-change: background, transform;
}

/* On hover, switch to highlight palette (plus a subtle lift) */
.post #article-container blockquote:hover::after,
.post #article-container blockquote:hover::before,
.post .post-content blockquote:hover::after,
.post .post-content blockquote:hover::before,
.layout-post .post-body blockquote:hover::after,
.layout-post .post-body blockquote:hover::before{
  background: linear-gradient(225deg, var(--bq-dot1-hover), var(--bq-dot2-hover)) !important;
  box-shadow: -5px 5px 12px rgba(230,149,15,.55), 5px -5px 12px rgba(255,255,255,.9) !important;
  transform: scale(1.03);
}
/* === END: Hover color for blockquote dots === */