/* ═══ Content Area ═══ */

    .content {

      flex: 1; min-width: 0; overflow-y: auto;

      display: flex; flex-direction: column; align-items: center;

    }

    .article-container {

      max-width: 800px; width: 100%; padding: 40px 32px 80px;

    }



    /* Welcome state */

    .welcome {

      display: flex; flex-direction: column; align-items: center;

      justify-content: center; min-height: 50vh; text-align: center;

      padding: 48px 24px;

    }

    .welcome-icon {

      width: 64px; height: 64px; display: grid; place-items: center;

      border-radius: var(--radius); background: var(--accent-bg);

      color: var(--accent-light); font-size: 1.5rem; margin-bottom: 20px;

    }

    .welcome h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: 8px; }

    .welcome p { color: var(--text-secondary); font-size: 0.95rem; max-width: 460px; line-height: 1.7; }



    /* Article header */

    .article-header {

      margin-bottom: 40px; padding-bottom: 24px;

      border-bottom: 1px solid var(--line);

    }

    .article-header h1 {

      font-size: 2rem; font-weight: 700; color: var(--heading-color);

      margin-bottom: 12px; letter-spacing: -0.01em; line-height: 1.3;

    }

    .article-meta {

      display: flex; flex-wrap: wrap; gap: 16px; align-items: center;

      font-size: 0.85rem; color: var(--text-secondary);

    }

    .article-meta .tag {

      display: inline-block; padding: 2px 10px; border-radius: 999px;

      background: var(--accent-bg); color: var(--accent-light); font-size: 0.78rem;

    }

    .meta-author {

      font-weight: 500; color: var(--heading-color);

    }

    .meta-author-link {

      font-weight: 500; color: var(--accent-light);

      text-decoration: none; border-bottom: 1px solid var(--accent-bg);

      transition: border-color 0.15s;

    }

    .meta-author-link:hover {

      border-bottom-color: var(--accent-light);

    }

    .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-muted); }

    .cmt-indicator {
      transition: opacity 0.2s; opacity: 0.72;
    }
    .cmt-indicator:hover { opacity: 1; color: var(--accent-light, #3b82f6); }
    .cmt-indicator .stat-num { font-weight: 700; }



    /* Article body */

    .article-body {

      font-size: 1rem; line-height: 1.85;

      overflow-wrap: anywhere;

      word-break: break-word;

    }

    .article-body h1 { font-size: 1.7rem; font-weight: 700; color: var(--heading-color); margin: 2.2em 0 0.5em; }

    /* 渲染时整张标题降一级（#→h2…），样式表同步上移一级以保留作者视觉层级：
       h2=原h1, h3=原h2, h4=原h3, h5=原h4。正文不会出现 h1（标题在 .article-header）。 */
    .article-body h2 {

      font-size: 1.7rem; font-weight: 700; color: var(--heading-color); margin: 2.2em 0 0.5em;

    }

    .article-body h3 { font-size: 1.35rem; font-weight: 600; color: var(--heading-sub); margin: 2em 0 0.5em; }

    .article-body h4 { font-size: 1.12rem; font-weight: 600; color: var(--text); margin: 1.6em 0 0.4em; }

    .article-body h5 { font-size: 1rem; font-weight: 600; color: var(--text-secondary); margin: 1.3em 0 0.3em; }

    .article-body h6 { font-size: 0.9rem; font-weight: 600; color: var(--text-secondary); margin: 1.1em 0 0.3em; }

    .article-body p { margin: 1em 0; }

    .article-body a { color: var(--accent-light); text-decoration: none; }

    .article-body a:hover { text-decoration: underline; }

    .article-body mark.article-hl {

      background: rgba(255, 200, 0, 0.3); color: inherit;

      padding: 1px 0; border-radius: 2px;

      transition: background 0.5s ease;

    }

    [data-theme="dark"] .article-body mark.article-hl {

      background: rgba(255, 200, 0, 0.25);

    }

    [data-theme="white"] .article-body mark.article-hl {

      background: rgba(255, 200, 0, 0.2);

    }

    .article-body img { max-width: 100%; height: auto; border-radius: 0; margin: 1.5em auto; display: block; }
    .article-body img.align-center { display: block; margin: 1.5em auto; }
    .article-body img.align-left { float: left; max-width: 60%; margin: 0.5em 1.5em 1em 0; }
    .article-body img.align-right { float: right; max-width: 60%; margin: 0.5em 0 1em 1.5em; }
    @media (max-width: 600px) {
      .article-body img.align-left, .article-body img.align-right { float: none; max-width: 100%; margin: 1.5em auto; }
    }

    .article-body pre {

      background: var(--code-bg); border-radius: var(--radius);

      padding: 16px 20px; overflow-x: auto; margin: 1.5em 0;

      border: 1px solid var(--code-border); font-size: 0.875rem;

    }

    .article-body pre code { background: none; padding: 0; color: var(--text); }

    /* ── Code block actions (copy / download) ── */
    .code-block-wrapper { position: relative; }
    .code-actions {
      position: absolute;
      top: 8px;
      right: 8px;
      display: flex;
      align-items: center;
      gap: 8px;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.2s ease, visibility 0.2s ease;
      z-index: 5;
    }
    .code-block-wrapper:hover .code-actions,
    .code-block-wrapper.is-active .code-actions {
      opacity: 1;
      visibility: visible;
    }
    /* Hide actions while the code is horizontally scrolled, so the rightmost
       code is never covered by the floating buttons (slide to the end to read it). */
    .code-block-wrapper:hover .code-actions.scrolled,
    .code-block-wrapper.is-active .code-actions.scrolled,
    .code-actions.scrolled {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }
    .code-action-btn {
      display: grid;
      place-items: center;
      width: 30px;
      height: 30px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--line);
      background: var(--surface-solid);
      color: var(--text-secondary);
      cursor: pointer;
      transition: all 0.15s ease;
      box-shadow: var(--shadow-sm);
    }
    .code-action-btn:hover {
      background: var(--surface-hover);
      color: var(--text);
      border-color: var(--line-strong);
    }
    .code-action-btn svg {
      width: 14px;
      height: 14px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      pointer-events: none;
    }
    .code-action-btn.copied,
    .code-action-btn.downloaded {
      color: var(--accent-light);
      border-color: var(--accent-light);
      background: var(--accent-bg);
    }

    /* Touch devices: default hidden, tap block to show */
    @media (hover: none) and (pointer: coarse) {
      .code-block-wrapper:hover .code-actions {
        opacity: 0;
        visibility: hidden;
      }
      .code-block-wrapper.is-active .code-actions {
        opacity: 1;
        visibility: visible;
      }
    }

    .article-body code {

      font-family: var(--font-mono); font-size: 0.875rem;

    }

    .article-body :not(pre) > code {

      background: var(--accent-bg); color: var(--accent-light);

      padding: 1px 6px; border-radius: 4px; font-size: 0.9em;

    }

    .article-body ul, .article-body ol { padding-left: 24px; margin: 1em 0; }

    .article-body li { margin: 0.4em 0; }

    .article-body li::marker { color: var(--text-muted); }

    .article-body blockquote {

      border-left: 3px solid var(--accent); padding: 10px 18px;

      margin: 1.5em 0; background: var(--accent-bg);

      color: var(--text-secondary); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;

    }

    .article-body hr { border: none; border-top: 1px solid var(--line); margin: 2em 0; }

    /* ── Toast notification ── */
    .endril-toast {
      position: fixed;
      top: 16px;
      left: 50%;
      transform: translateX(-50%) translateY(-8px);
      z-index: 9999;
      padding: 10px 18px;
      border-radius: var(--radius-sm);
      font-size: 0.875rem;
      font-weight: 500;
      color: #fff;
      background: rgba(34, 197, 94, 0.92);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      box-shadow: var(--shadow);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
      pointer-events: none;
      white-space: nowrap;
    }
    .endril-toast.show {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(0);
    }
    [data-theme="light"] .endril-toast,
    [data-theme="white"] .endril-toast {
      color: #fff;
      background: rgba(21, 128, 61, 0.92);
    }

    .article-body strong { color: var(--heading-color); font-weight: 600; }

    .article-body table {

      width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 0.9rem;

    }

    .article-body th, .article-body td {

      padding: 10px 14px; border: 1px solid var(--line); text-align: left;

    }

    .article-body th { background: var(--surface-solid); font-weight: 600; }



    /* Previous/Next navigation */

    .article-nav {

      display: flex; justify-content: space-between; gap: 16px;

      margin-top: 56px; padding-top: 24px;

      border-top: 1px solid var(--line);

    }

    .article-nav a, .article-nav span {

      flex: 1; min-width: 0;

      padding: 14px 18px; border-radius: var(--radius);

      text-decoration: none; transition: all 0.2s;

      border: none;

    }

    .article-nav .prev-article { text-align: left; }

    .article-nav .next-article { text-align: right; margin-left: auto; }

    .article-nav a:hover {

      border-color: var(--accent);

      background: var(--accent-bg);

    }

    .article-nav-label {

      display: block; font-size: 0.72rem; font-weight: 600;

      color: var(--text-muted); text-transform: uppercase;

      letter-spacing: 0.05em; margin-bottom: 4px;

    }

    .article-nav-title {

      display: block; font-size: 0.9rem; font-weight: 500;

      color: var(--text); white-space: nowrap; overflow: hidden;

      text-overflow: ellipsis;

    }

    .article-nav .placeholder { visibility: hidden; }



    /* Loading / Error / Footer */

    .loading, .error-state {

      display: flex; align-items: center; justify-content: center;

      padding: 60px 24px; color: var(--text-muted);

    }

    .loading-spinner {

      width: 24px; height: 24px; border: 2px solid var(--line-strong);

      border-top-color: var(--accent); border-radius: 50%;

      animation: spin 0.6s linear infinite; margin-right: 12px;

    }

    @keyframes spin { to { transform: rotate(360deg); } }

    .error-state { flex-direction: column; text-align: center; }

    .error-state code { font-size: 4rem; color: var(--line-strong); margin-bottom: 12px; }

    .article-footer {

      margin-top: 64px; padding-top: 24px;

      font-size: 0.8rem; color: var(--text-muted);

      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 18px;
      flex-wrap: wrap;

    }

    .article-footer-links {

      display: flex;
      gap: 18px;
      flex-wrap: wrap;

    }

    .article-footer-links a {

      color: inherit;
      text-decoration: none;

    }

    .article-footer-links a:hover {

      text-decoration: underline;

    }

    .article-footer-copy {

      text-align: right;
      white-space: nowrap;

    }

    @media (max-width: 520px) {

      .article-footer {

        flex-direction: column;
        align-items: center;
        gap: 8px;

      }

      .article-footer-copy {

        text-align: center;

      }

    }



    /* ── Article Stats ─────────────────────────── */

    .article-stats {

      display: flex; justify-content: center; gap: 20px; align-items: center;

      margin-top: 20px; padding: 12px 0;

      font-size: 0.85rem; color: var(--text-secondary);

    }

    .article-stats .stat-item {

      display: flex; align-items: center; gap: 6px;

    }

    .article-stats .stat-num {

      font-weight: 600; color: var(--heading-color); font-size: 1.05rem;

    }

    .article-stats .stat-divider {

      width: 1px; height: 16px; background: var(--line-strong);

    }



    /* ── Share Bar ───────────────────────────── */

    .share-bar {

      display: flex; justify-content: center; align-items: center;

      gap: 10px; margin-top: 24px; flex-wrap: wrap;

    }

    .share-bar-label {

      font-size: 0.78rem; font-weight: 600; color: var(--text-muted);

      margin-right: 4px; letter-spacing: 0.04em; text-transform: uppercase;

    }

    .share-btn {

      display: inline-flex; align-items: center; justify-content: center;

      width: 38px; height: 38px; border-radius: var(--radius-sm);

      border: none; background: transparent;

      cursor: pointer; font-size: 1.05rem; transition: all 0.15s;

      color: var(--text-muted); text-decoration: none;

      position: relative;

    }

    .share-btn:hover {

      background: var(--surface-hover); color: var(--text);

    }

    .share-btn.copied {

      background: var(--accent-bg); color: var(--accent-light);

    }

    .share-btn .tooltip {

      display: none; position: absolute; bottom: calc(100% + 8px); left: 50%;

      transform: translateX(-50%); white-space: nowrap; font-size: 0.72rem;

      background: var(--heading-color); color: var(--bg);

      padding: 4px 10px; border-radius: 4px; pointer-events: none;

    }

    .share-btn.copied .tooltip { display: block; }



    /* ── WeChat QR Modal ─────────────────────── */

    .qr-overlay {

      display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 300; /* 显式定位：inset 简写需 Chromium 87+，夸克 U4 等旧内核不识别 */

      background: rgba(0,0,0,0.5); align-items: center; justify-content: center;

    }

    .qr-overlay.open { display: flex; }

    .qr-dialog {

      background: var(--surface-solid); border-radius: var(--radius);

      padding: 32px 28px 24px; text-align: center; max-width: 280px; width: 90%;

      box-shadow: var(--shadow); border: 1px solid var(--line);

    }

    .qr-dialog h3 { font-size: 1rem; margin-bottom: 4px; color: var(--heading-color); }

    .qr-dialog p { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 16px; }

    .qr-dialog img { width: 200px; height: 200px; border-radius: var(--radius-sm); border: 1px solid var(--line); }

    .qr-dialog .qr-hint { margin-top: 12px; font-size: 0.74rem; color: var(--text-muted); }

    .qr-dialog .qr-close {

      margin-top: 14px; padding: 6px 24px; border-radius: var(--radius-sm);

      border: 1px solid var(--line); background: transparent; cursor: pointer;

      font-size: 0.85rem; color: var(--text-secondary);

    }

    .qr-dialog .qr-close:hover { background: var(--surface-hover); }