/* ═══ Mobile ═══ */

    @media (max-width: 768px) {

      .menu-toggle { display: block; }

      .sidebar-toggle-btn { display: none; }

      .sidebar {

        position: fixed; top: 0; left: 0; height: 100vh; height: 100dvh;

        z-index: 100; transform: translateX(-100%);

        box-shadow: none; padding-top: calc(var(--topbar-h) + 8px);

        transition: transform 0.3s ease;

        /* 2026-08-29: Admin 侧栏宽度滑块调到 400px 时，移动端窄屏（320/375px iPhone）会被截断。
           在 ≤768px 强制把 sidebar 宽度上限设为视口宽减 32px 的安全余量，
           桌面端 (>768px) 完全不受此规则影响，仍以 --sidebar-w 为准。 */
        max-width: calc(100vw - 32px);

      }

      .sidebar.open { transform: translateX(0); box-shadow: 4px 0 24px rgba(0,0,0,0.4); }

      .sidebar-overlay.open { display: block; }

      .sidebar.collapsed { opacity: 1; pointer-events: auto; }

      .article-container { padding: 28px 20px 60px; }

      .article-header h1 { font-size: 1.5rem; }

      .search-box input { width: 120px; }

      .search-box input:focus { width: 180px; }

      .search-results { width: calc(100vw - 32px); right: -140px; }

      .article-stats { flex-direction: row; gap: 16px; }

      .article-stats .stat-divider { display: block; }

      .share-bar { gap: 6px; }

      .share-btn { width: 34px; height: 34px; font-size: 0.95rem; }

      .fb-panel { width: calc(100vw - 48px); }

    }



    /* ── Floating Action Hub ─────────────────────────────── */
    .fab-hub { position:fixed; bottom:24px; right:24px; z-index:9999; display:flex; flex-direction:column; align-items:flex-end; gap:10px; cursor:grab; }
    .fab-hub:active { cursor:grabbing; }

    /* Main toggle button */
    .fab-main {
      width:48px; height:48px; border-radius:50%;
      border:1px solid var(--line); background: var(--bg-glass);
      backdrop-filter:blur(var(--glass-blur)); -webkit-backdrop-filter:blur(var(--glass-blur));
      box-shadow: var(--shadow-sm); cursor:pointer;
      display:grid; place-items:center; transition:all 0.2s ease;
      color: var(--text-secondary); user-select:none;
    }
    .fab-main:hover { transform:scale(1.08); box-shadow: var(--shadow); color: var(--accent-light); }
    .fab-main svg { width:22px; height:22px; transition:transform 0.3s ease; }
    .fab-main.open svg { transform:rotate(45deg); }

    /* Sub-action buttons */
    .fab-actions {
      display:flex; flex-direction:column; align-items:flex-end; gap:8px;
      opacity:0; transform:translateY(10px) scale(0.95);
      pointer-events:none;
      transition:opacity 0.22s ease, transform 0.22s ease;
    }
    .fab-actions.open { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
    .fab-action-item { display:flex; align-items:center; gap:8px; cursor:pointer; }
    .fab-action-label { font-size:0.75rem; color:var(--text-muted); white-space:nowrap; }
    .fab-action-btn {
      width:42px; height:42px; border-radius:50%; border:1px solid var(--line);
      background: var(--bg-glass); backdrop-filter:blur(var(--glass-blur));
      box-shadow: var(--shadow-sm); cursor:pointer;
      display:grid; place-items:center; transition:all 0.18s ease; color: var(--text-secondary);
    }
    .fab-action-btn:hover { transform:scale(1.1); color: var(--accent-light); box-shadow: var(--shadow); }
    .fab-action-btn svg { width:18px; height:18px; }

    /* Panels (feedback/tip/share) */
    .fab-panel {
      display:none; position:absolute; bottom:60px; right:0;
      min-width:320px; max-width:420px;
      background: var(--surface-solid); border-radius:var(--radius); border:1px solid var(--line-strong);
      box-shadow: var(--shadow); overflow:auto;
      backdrop-filter:blur(var(--glass-blur)); -webkit-backdrop-filter:blur(var(--glass-blur));
      resize:both;
    }
    .fab-panel.open { display:block; }
    .fab-panel-hdr {
      display:flex; align-items:center; justify-content:space-between;
      padding:14px 18px 8px;
    }
    .fab-panel-hdr h3 { font-size:0.92rem; font-weight:600; color:var(--heading-color); margin:0; }
    .fab-panel-close {
      width:28px; height:28px; border-radius:50%; border:none;
      background:var(--surface-hover); cursor:pointer; font-size:1.1rem;
      color:var(--text-muted); display:grid; place-items:center; transition:all 0.15s;
    }
    .fab-panel-close:hover { background:var(--accent-bg); color:var(--text); }
    .fab-panel-body { padding:16px 18px; }

    /* ── Feedback styles ── */
    .fb-editor {
      width:100%; min-height:100px; max-height:300px; padding:10px 12px;
      border:1px solid var(--line); border-radius:var(--radius-sm);
      font:inherit; font-size:0.85rem; outline:none;
      background:var(--surface-solid); color:var(--text); transition:border-color 0.15s;
      margin-bottom:10px; overflow-y:auto; line-height:1.6; resize:both; box-sizing:border-box;
    }
    .fb-editor:focus { border-color:var(--accent); }
    .fb-editor:empty::before { content:attr(placeholder); color:var(--text-muted); pointer-events:none; }
    .fb-editor img { max-width:100%; border-radius:6px; margin:8px 0; border:1px solid var(--line); }
    .fb-editor ul,.fb-editor ol { padding-left:20px; margin:4px 0; }
    .fb-toolbar { display:flex; gap:2px; margin-bottom:8px; flex-wrap:wrap; }
    .fb-tool-btn {
      width:28px; height:28px; border-radius:6px; border:none;
      background:transparent; cursor:pointer; font-size:0.78rem; color:var(--text-muted);
      display:grid; place-items:center; transition:all 0.15s;
    }
    .fb-tool-btn:hover { background:var(--accent-bg); color:var(--accent-light); }
    .fb-sep { width:1px; background:var(--line); margin:0 4px; align-self:stretch; }
    .fab-input {
      width:100%; padding:10px 12px; margin-bottom:12px; box-sizing:border-box;
      border:1px solid var(--line); border-radius:var(--radius-sm);
      font:inherit; font-size:0.85rem; outline:none;
      background:var(--surface-solid); color:var(--text); transition:border-color 0.15s;
    }
    .fab-input:focus { border-color:var(--accent); }
    .fab-input::placeholder { color:var(--text-muted); }
    .fab-btn {
      width:100%; padding:10px; border:none; border-radius:var(--radius-sm);
      background:var(--accent); color:#fff;
      font:inherit; font-size:0.88rem; font-weight:600; cursor:pointer;
      transition:opacity 0.15s;
    }
    .fab-btn:hover { opacity:0.9; }
    .fab-btn:disabled { opacity:0.5; cursor:default; }
    .fab-btn.secondary {
      background:var(--surface-hover); color:var(--text); margin-top:8px;
    }
    .fab-msg { text-align:center; padding:16px; font-size:0.85rem; color:var(--text-secondary); }
    .fab-msg.success { color:#16a34a; }
    .fab-msg.error { color:#dc2626; }

    /* ── Tip panel styles ── */
    .tip-qr-wrap { text-align:center; padding:8px 0 16px; }
    .tip-qr-wrap img { width:180px; height:180px; border-radius:12px; border:1px solid var(--line); }
    .tip-trust-note {
      font-size:0.72rem; color:var(--text-muted); line-height:1.5;
      background:var(--surface-hover); border-radius:8px; padding:8px 12px; margin-bottom:12px;
    }
    .tip-anon-toggle {
      display:flex; align-items:center; gap:8px; margin-bottom:12px;
      font-size:0.82rem; color:var(--text-secondary); cursor:pointer; user-select:none;
    }
    .tip-section-divider { text-align:center; color:var(--text-muted); font-size:0.78rem; margin:12px 0; position:relative; }
    .tip-section-divider::before, .tip-section-divider::after {
      content:""; position:absolute; top:50%; width:40%; height:1px; background:var(--line);
    }
    .tip-section-divider::before { left:0; } .tip-section-divider::after { right:0; }

    /* ── Share panel styles ── */
    .share-grid { display:flex; gap:12px; justify-content:center; margin-bottom:6px; flex-wrap:wrap; }
    .share-btn-item {
      display:flex; flex-direction:column; align-items:center; gap:6px;
      border:none; background:transparent; cursor:pointer; font:inherit; padding:4px;
      transition:transform 0.15s; min-width:64px;
    }
    .share-btn-item:hover { transform:scale(1.08); }
    .share-btn-item .share-icon-circle {
      width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
      box-shadow:0 2px 10px rgba(0,0,0,0.12); transition:box-shadow 0.15s;
    }
    .share-btn-item:hover .share-icon-circle { box-shadow:0 4px 16px rgba(0,0,0,0.2); }
    .share-btn-item .share-icon-circle svg { width:22px; height:22px; color:#fff; }
    .share-btn-item .share-label { font-size:0.72rem; color:var(--text-muted,#94a3b8); }
    .share-url-row { display:flex; gap:6px; margin-top:12px; }
    .share-url-input {
      flex:1; padding:8px 12px; border:1px solid var(--line); border-radius:var(--radius-sm);
      font:inherit; font-size:0.8rem; color:var(--text-secondary); background:var(--surface-hover); outline:none;
    }
    .share-copy-btn {
      padding:8px 16px; border:none; border-radius:var(--radius-sm);
      background:var(--accent); color:#fff; font:inherit; font-size:0.82rem; cursor:pointer;
      transition:opacity 0.15s; white-space:nowrap;
    }
    .share-copy-btn:hover { opacity:0.88; }





    /* ── 视频链接自动识别 / 内嵌播放器 ── */
    .video-embed {
      position: relative;
      width: 100%;
      max-width: 880px;
      margin: 1.6rem auto;
      aspect-ratio: 16 / 9;
      background: #0b0e14;
      border-radius: 6px;
      overflow: hidden;
      box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
      cursor: pointer;
    }
    .video-embed__poster {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0; /* 显式定位（inset 需 Chromium 87+） */
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #1b2233, #0b0e14);
    }
    .video-embed__poster::after {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0; /* 显式定位（inset 需 Chromium 87+） */
      background: radial-gradient(circle at center, rgba(0,0,0,0) 40%, rgba(0,0,0,.45) 100%);
    }
    .video-embed__play {
      position: relative;
      z-index: 2;
      width: 68px;
      height: 68px;
      border: none;
      border-radius: 50%;
      background: rgba(255, 255, 255, .92);
      color: #111;
      font-size: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: transform .15s ease, box-shadow .15s ease;
      box-shadow: 0 4px 20px rgba(0, 0, 0, .35);
    }
    .video-embed__play:hover {
      transform: scale(1.06);
      box-shadow: 0 6px 26px rgba(0, 0, 0, .45);
    }
    .video-embed__badge {
      position: absolute;
      left: 12px;
      bottom: 12px;
      z-index: 2;
      padding: 3px 10px;
      border-radius: 999px;
      background: rgba(0, 0, 0, .55);
      color: #fff;
      font-size: 12px;
      letter-spacing: .3px;
      backdrop-filter: blur(4px);
    }
    .video-embed__fallback {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0; /* 显式定位（inset 需 Chromium 87+） */
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      color: #fff;
      padding: 24px;
      text-align: center;
    }
    .video-embed__fallback small { opacity: .7; font-size: 12px; }
    .video-embed iframe {
      position: absolute;
      top: 0; left: 0; /* 显式定位（inset 需 Chromium 87+），尺寸由下方 width/height 100% 决定 */
      width: 100%;
      height: 100%;
      border: 0;
    }
    .article-body video {
      max-width: 100%;
      border-radius: 6px;
      margin: 1.4rem 0;
      background: #000;
    }


    /* ═══ Comments section — mobile avatar size bump (articles page only) ═══
       Slightly larger avatars on mobile for better readability/tap target. */
    @media (max-width: 768px) {
      .article-container .comment-avatar {
        width: 34px;
        height: 34px;
        font-size: 0.95rem;
      }
      .article-container .comment-reply-section .comment-avatar {
        width: 34px;
        height: 34px;
        font-size: 0.95rem;
      }
    }

    /* ═══ Comments section — desktop width & scale (articles page only) ═══
       fab-hub.css is the global source of truth and must not be edited.
       These rules are scoped to .article-container and wrapped in min-width:769px
       so they only widen/enlarge the comments area on desktop, never on mobile. */
    @media (min-width: 769px) {
      .article-container .comments-section {
        width: 100%;
        max-width: 100%;
        margin: 48px 0 0;
        padding: 0;
        box-sizing: border-box;
      }
      .article-container .comments-section .cmt-header {
        font-size: 1.05rem;
        padding-bottom: 14px;
        margin: 0 0 16px;
      }
      .article-container .comments-section .cmt-header .count {
        font-size: 0.85rem;
      }
      .article-container .cmt-write-btn {
        font-size: 0.95rem;
        padding: 8px 16px;
        border-radius: 6px;
      }
      .article-container .cmt-sort-tab {
        font-size: 0.82rem;
        padding: 5px 14px;
      }
      .article-container .comment-card {
        gap: 14px;
        padding: 18px 0;
      }
      .article-container .comment-avatar {
        width: 36px;
        height: 36px;
        font-size: 1rem;
        border-radius: 6px;
      }
      .article-container .comment-name {
        font-size: 0.92rem;
      }
      .article-container .comment-name .homepage-icon {
        width: 14px;
        height: 14px;
      }
      .article-container .comment-date {
        font-size: 0.78rem;
      }
      .article-container .comment-time {
        font-size: 0.76rem;
      }
      .article-container .comment-body {
        font-size: 0.95rem;
        line-height: 1.7;
      }
      .article-container .comment-like-btn,
      .article-container .comment-reply-btn,
      .article-container .comment-delete-btn {
        font-size: 0.8rem;
        padding: 4px 10px;
      }
      .article-container .comment-like-btn svg {
        width: 16px;
        height: 16px;
      }
      .article-container .comment-empty {
        font-size: 0.9rem;
        padding: 40px 24px;
      }
      .article-container .comment-reply-section {
        margin-left: 50px;
        padding: 8px 16px 10px;
      }
      .article-container .comment-reply-section .comment-card {
        gap: 14px;
        padding: 18px 0;
      }
      .article-container .comment-reply-section .comment-avatar {
        width: 36px;
        height: 36px;
        font-size: 1rem;
        border-radius: 6px;
      }
      .article-container .comment-reply-section .comment-name {
        font-size: 0.92rem;
      }
      .article-container .comment-reply-section .comment-body {
        font-size: 0.95rem;
        line-height: 1.7;
      }
      .article-container .comment-reply-section .comment-time,
      .article-container .comment-reply-section .comment-like-btn,
      .article-container .comment-reply-section .comment-reply-btn {
        font-size: 0.8rem;
        padding: 4px 10px;
      }
      .article-container .comment-expand-btn {
        font-size: 0.84rem;
      }
    }


    /* ═══ Mobile comments — slightly wider on articles page ═══ */
    @media (max-width: 768px) {
      .article-container .comments-section {
        padding: 0 8px;
      }
    }