/* Fab Hub — Floating Action Button + Feedback/Tip/Share/Comment panels */
/* Shared across ALL pages. CSS Variables with hardcoded fallbacks ensure */
/* compatibility with both themed (articles.html) and unthemed (index.html) pages. */
/* ── 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; }
    .fab-main {
      width:48px; height:48px; border-radius:50%;
      border:1px solid var(--line, rgba(7,19,47,0.12)); background:var(--bg-glass, rgba(255,255,255,0.88));
      backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
      box-shadow:0 2px 14px rgba(7,19,66,0.14); cursor:pointer;
      display:grid; place-items:center; transition:all 0.2s ease;
      color:var(--muted, #60708f); user-select:none;
    }
    .fab-main:hover { transform:scale(1.08); box-shadow:0 4px 24px rgba(7,19,66,0.18); color:var(--blue, #0068ff); }
    .fab-main svg { width:22px; height:22px; transition:transform 0.3s ease; }
    .fab-main.open svg { transform:rotate(45deg); }
    .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(--muted, #60708f); white-space:nowrap;
      background:var(--bg-glass, rgba(255,255,255,0.88)); backdrop-filter:blur(8px);
      -webkit-backdrop-filter:blur(8px);
      padding:3px 10px; border-radius:8px;
      border:1px solid var(--line, rgba(7,19,47,0.08));
      box-shadow:0 1px 4px rgba(7,19,66,0.06);
    }
    .fab-action-btn {
      width:42px; height:42px; border-radius:50%; border:1px solid var(--line, rgba(7,19,47,0.1));
      background:var(--bg-glass, rgba(255,255,255,0.92)); backdrop-filter:blur(12px);
      box-shadow:0 2px 10px rgba(7,19,66,0.1); cursor:pointer;
      display:grid; place-items:center; transition:all 0.18s ease; color:var(--muted, #60708f);
    }
    .fab-action-btn:hover { transform:scale(1.1); color:var(--blue, #0068ff); box-shadow:0 4px 16px rgba(7,19,66,0.16); }
    .fab-action-btn svg { width:18px; height:18px; }
    .fab-panel {
      display:none; position:absolute; bottom:60px; right:0;
      min-width:320px; max-width:420px;
      background:var(--surface-solid, rgba(255,255,255,0.96)); border-radius:10px;
      border:1px solid var(--line, rgba(7,19,47,0.1));
      box-shadow:0 8px 40px rgba(7,19,66,0.16); overflow:auto;
      backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
      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(--ink, #07132f); margin:0; }
    .fab-panel-close {
      width:28px; height:28px; border-radius:50%; border:none;
      background:var(--surface-hover, rgba(7,19,47,0.05)); cursor:pointer; font-size:1.1rem;
      color:var(--muted, #60708f); display:grid; place-items:center; transition:all 0.15s;
    }
    .fab-panel-close:hover { background:var(--accent-bg, rgba(7,19,47,0.1)); color:var(--ink, #07132f); }
    .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, rgba(7,19,47,0.1)); border-radius:8px;
      font:inherit; font-size:0.85rem; outline:none;
      background:var(--surface-solid, #fff); color:var(--ink, #07132f); 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(--blue, #0068ff); }
    .fb-editor:empty::before { content:attr(placeholder); color:#a0aec0; pointer-events:none; }
    .fb-editor img { max-width:100%; border-radius:6px; margin:8px 0; border:1px solid var(--line, rgba(7,19,47,0.08)); }
    .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(--muted, #60708f);
      display:grid; place-items:center; transition:all 0.15s;
    }
    .fb-tool-btn:hover { background:rgba(0,104,255,0.08); color:var(--blue, #0068ff); }
    .fb-sep { width:1px; background:var(--line, rgba(7,19,47,0.1)); 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, rgba(7,19,47,0.1)); border-radius:8px;
      font:inherit; font-size:0.85rem; outline:none;
      background:var(--surface-solid, #fff); color:var(--ink, #07132f); transition:border-color 0.15s;
    }
    .fab-input:focus { border-color:var(--blue, #0068ff); }
    .fab-input::placeholder { color:#a0aec0; }
    .fab-btn {
      width:100%; padding:10px; border:none; border-radius:8px;
      background:linear-gradient(135deg,#0068ff,#3b82f6); 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, rgba(7,19,47,0.06)); color:var(--ink, #07132f); margin-top:8px;
    }
    .fab-msg { text-align:center; padding:16px; font-size:0.85rem; color:var(--muted, #60708f); }
    .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, rgba(7,19,47,0.1)); cursor:pointer; transition:transform 0.15s; }
    .tip-qr-wrap img:hover { transform:scale(1.02); }
    .tip-trust-note {
      font-size:0.72rem; color:#94a3b8; line-height:1.5;
      background:var(--surface-hover, rgba(7,19,47,0.03)); 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(--muted, #60708f); cursor:pointer; user-select:none;
    }
    .tip-section-divider { text-align:center; color:#a0aec0; 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, rgba(7,19,47,0.08));
    }
    .tip-section-divider::before { left:0; } .tip-section-divider::after { right:0; }

    /* ── QR lightbox for tip panel ── */
    .qr-lightbox {
      display:none; position:fixed; z-index:99999; left:0; top:0; width:100%; height:100%;
      background:rgba(7,19,47,0.82); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
      justify-content:center; align-items:center;
    }
    .qr-lightbox.open { display:flex; }
    .qr-lightbox-inner {
      background:#fff; border-radius:10px; padding:24px; text-align:center;
      box-shadow:0 24px 64px rgba(0,0,0,0.3); max-width:90vw;
    }
    .qr-lightbox-inner img { width:280px; height:280px; border-radius:8px; display:block; }
    .qr-lightbox-inner p { font-size:0.85rem; color:#60708f; margin:12px 0 6px; }
    .qr-lightbox-close {
      margin-top:12px; padding:8px 28px; border:none; border-radius:8px;
      background:rgba(7,19,47,0.08); color:#07132f; font-size:0.85rem; cursor:pointer;
    }
    .qr-lightbox-close:hover { background:rgba(7,19,47,0.14); }

    /* ── 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(--muted, #60708f); }
    .share-url-row { display:flex; gap:6px; margin-top:12px; }
    .share-url-input {
      flex:1; padding:8px 12px; border:1px solid var(--line, rgba(7,19,47,0.1)); border-radius:8px;
      font:inherit; font-size:0.8rem; color:var(--muted, #60708f); background:#f9fafb; outline:none;
    }
    .share-copy-btn {
      padding:8px 16px; border:none; border-radius:8px;
      background:#0068ff; color:#fff; font:inherit; font-size:0.82rem; cursor:pointer;
      transition:opacity 0.15s; white-space:nowrap;
    }
    .share-copy-btn:hover { opacity:0.88; }

    /* ── QR code lightbox ── */
    .qr-lightbox {
      display:none; position:fixed; z-index:99999; left:0; top:0; width:100%; height:100%;
      background:rgba(7,19,47,0.82); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
      justify-content:center; align-items:center;
    }
    .qr-lightbox.open { display:flex; }
    .qr-lightbox-inner {
      background:var(--surface-solid, #fff); border-radius:10px; padding:24px; text-align:center;
      box-shadow:0 24px 64px rgba(0,0,0,0.3); max-width:90vw;
    }
    .qr-lightbox-inner img { width:280px; height:280px; border-radius:8px; display:block; }
    .qr-lightbox-inner p { font-size:0.85rem; color:var(--muted, #60708f); margin:12px 0 6px; }
    .qr-lightbox-close {
      margin-top:12px; padding:8px 28px; border:none; border-radius:8px;
      background:var(--surface-hover, rgba(7,19,47,0.08)); color:var(--ink, #07132f);
      font-size:0.85rem; cursor:pointer;
    }
    .qr-lightbox-close:hover { opacity:0.8; }

    /* ── Comments section (WeChat style public display) ── */
    .comments-section {
      width:calc(100% - 40px); max-width:var(--max, 740px); margin:32px auto 0; padding:0 24px; box-sizing:border-box;
    }
    .comments-section .cmt-header {
      font-size:1rem; font-weight:600; color:var(--text, #07132f); margin:0 0 20px;
      display:flex; align-items:center; gap:8px;
      padding-bottom:12px; border-bottom:1px solid var(--line, rgba(7,19,47,0.06));
    }
    .comments-section .cmt-header .count { font-size:0.78rem; color:var(--text-muted, #94a3b8); font-weight:400; }
    .comment-card {
      display:flex; gap:10px; padding:14px 0;
      border-bottom:1px solid var(--line, rgba(7,19,47,0.04));
    }
    .comment-card:last-child { border-bottom:none; }
    .comment-avatar {
      width:28px; height:28px; border-radius:4px; flex-shrink:0;
      display:grid; place-items:center; font-size:0.85rem; font-weight:700; color:#fff;
      background:var(--accent, linear-gradient(135deg,#0068ff,#3b82f6));
    }
    .comment-main { flex:1; min-width:0; }
    .comment-top {
      display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:4px;
    }
    .comment-name {
      font-size:0.82rem; font-weight:600; color:#576b95;
      text-decoration:none; display:flex; align-items:center; gap:4px;
    }
    .comment-name:hover { text-decoration:underline; }
    .comment-name.anonymous { color:var(--text-muted, #94a3b8); pointer-events:none; text-decoration:none; }
    .comment-name .homepage-icon { opacity:0.5; width:12px; height:12px; }
    .comment-time {
      font-size:0.7rem; color:var(--text-muted, #94a3b8); white-space:nowrap; flex-shrink:0;
    }
    .comment-body {
      font-size:0.85rem; color:var(--text-secondary, #334155); line-height:1.6; word-break:break-word;
      margin-bottom:6px;
    }
    .comment-footer {
      display:flex; align-items:center; justify-content:space-between; gap:8px;
    }
    .comment-page-tag {
      font-size:0.68rem; color:var(--text-muted, #94a3b8);
    }
    .comment-page-tag a { color:var(--accent, #0068ff); text-decoration:none; }
    .comment-like-btn {
      display:flex; align-items:center; gap:3px; padding:2px 8px;
      border:none; border-radius:10px; background:transparent;
      cursor:pointer; font:inherit; font-size:0.72rem; color:var(--text-muted, #94a3b8);
      transition:all 0.15s; white-space:nowrap;
    }
    .comment-like-btn:hover { color:var(--accent, #0068ff); background:var(--accent-bg, rgba(0,104,255,0.06)); }
    .comment-like-btn.liked { color:var(--accent, #0068ff); }
    .comment-like-btn svg { width:14px; height:14px; }
    .comment-empty { text-align:center; padding:32px 24px; color:var(--text-muted, #94a3b8); font-size:0.82rem; }

    /* ── Reply ── */
    .comment-reply-btn {
      display:inline-flex; align-items:center; gap:3px; padding:2px 8px;
      border:none; border-radius:8px; background:transparent;
      cursor:pointer; font:inherit; font-size:0.72rem; color:var(--text-muted, #94a3b8);
      transition:all 0.15s;
    }
    .comment-reply-btn:hover { color:var(--accent, #0068ff); background:var(--accent-bg, rgba(0,104,255,0.06)); }
    .reply-indicator {
      font-size:0.7rem; color:var(--accent, #0068ff); font-weight:500; margin-right:2px;
    }
    /* ── Reply container (B站/知乎 style) ── */
    .comment-reply-section {
      margin-left: 38px;
      margin-top: 4px;
      background: var(--reply-bg, rgba(7,19,47,0.025));
      border-radius: 10px;
      padding: 4px 14px 6px;
    }
    .comment-reply-section .comment-card {
      padding: 8px 0;
      border-bottom: none;
      gap: 8px;
    }
    .comment-reply-section .comment-card:last-child {
      border-bottom: none;
    }
    .comment-reply-section .comment-card + .comment-card {
      border-top: 1px solid rgba(7,19,47,0.04);
    }
    .comment-reply-section .comment-body {
      font-size: 0.82rem; margin-bottom: 3px;
    }
    .comment-reply-section .comment-name {
      font-size: 0.78rem;
    }
    .comment-reply-section .comment-time {
      font-size: 0.68rem;
    }
    .comment-reply-section .comment-like-btn,
    .comment-reply-section .comment-reply-btn {
      font-size: 0.68rem;
    }

    /* ── Expand button ── */
    .comment-replies-hidden { margin-top: 2px; }
    .comment-expand-btn {
      display:inline-flex; align-items:center; gap:4px;
      padding:5px 0; border:none; background:transparent;
      cursor:pointer; font:inherit; font-size:0.76rem;
      color:var(--accent, #0068ff); transition:all 0.15s;
    }
    .comment-expand-btn:hover { opacity:0.7; }

    /* ── Floating reply modal ── */
    .reply-modal-overlay {
      display:none; position:fixed; z-index:10000; left:0; top:0; width:100%; height:100%;
      background:rgba(7,19,47,0.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
      justify-content:center; align-items:center; opacity:0; transition:opacity 0.2s ease;
    }
    .reply-modal-overlay.open { display:flex; opacity:1; }
    .reply-modal {
      background:var(--surface-solid, rgba(255,255,255,0.96)); border-radius:10px;
      border:1px solid var(--line, rgba(7,19,47,0.1)); box-shadow:0 24px 64px rgba(7,19,47,0.2);
      width:92vw; max-width:480px; max-height:90vh; overflow:auto;
      backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
      transform:translateY(10px) scale(0.97); transition:transform 0.2s ease;
    }
    .reply-modal-overlay.open .reply-modal { transform:translateY(0) scale(1); }
    .reply-modal-hdr {
      display:flex; justify-content:space-between; align-items:center;
      padding:16px 20px; border-bottom:1px solid var(--line, rgba(7,19,47,0.06));
    }
    .reply-modal-hdr h4 { margin:0; font-size:0.95rem; font-weight:600; color:var(--text, #07132f); }
    .reply-modal-hdr h4 .reply-modal-target { color:var(--accent, #0068ff); font-weight:700; }
    .reply-modal-close {
      width:32px; height:32px; border:none; border-radius:50%; background:transparent;
      cursor:pointer; color:var(--text-muted, #94a3b8); font-size:1.3rem; line-height:1;
      display:grid; place-items:center; transition:all 0.15s;
    }
    .reply-modal-close:hover { background:var(--surface-hover, rgba(7,19,47,0.06)); color:var(--text, #07132f); }
    .reply-modal-body { padding:18px 20px; }
    .reply-modal-body textarea,
    .reply-modal-body input {
      width:100%; box-sizing:border-box; padding:10px 12px;
      border:1px solid var(--line, rgba(7,19,47,0.12)); border-radius:8px;
      font:inherit; font-size:0.85rem; background:var(--surface-solid, #fff);
      color:var(--text, #07132f); margin-bottom:10px; transition:border-color 0.15s;
    }
    .reply-modal-body textarea:focus,
    .reply-modal-body input:focus { outline:none; border-color:var(--accent, #0068ff); }
    .reply-modal-body textarea { min-height:100px; resize:vertical; }
    .reply-modal-body input::placeholder { color:#a0aec0; }
    .reply-modal-msg { display:none; font-size:0.8rem; margin:2px 0 8px; text-align:center; }
    .reply-modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:4px; }
    .reply-modal-btn {
      padding:8px 18px; border:none; border-radius:8px; font:inherit; font-size:0.85rem;
      cursor:pointer; transition:opacity 0.15s;
    }
    .reply-modal-btn:hover { opacity:0.9; }
    .reply-modal-btn.cancel { background:var(--surface-hover, rgba(7,19,47,0.06)); color:var(--text, #07132f); }
    .reply-modal-btn.submit { background:var(--accent, #0068ff); color:#fff; font-weight:600; }
    .reply-modal-btn:disabled { opacity:0.5; cursor:default; }

    /* ── Save credentials checkbox ── */
    .fab-save-row {
      display:flex; align-items:flex-start; gap:7px;
      margin-bottom:12px; cursor:pointer; user-select:none;
    }
    .fab-save-row input[type="checkbox"] {
      margin-top:2px; flex-shrink:0; accent-color:var(--accent, #0068ff);
      width:14px; height:14px; cursor:pointer;
    }
    .fab-save-row span {
      font-size:0.74rem; color:var(--muted, #60708f); line-height:1.4;
    }

    /* ── Sort tabs ── */
    .cmt-sort-tabs {
      margin-left:auto; display:flex; gap:4px;
    }
    .cmt-sort-tab {
      padding:4px 12px; border:none; border-radius:6px;
      background:transparent; cursor:pointer; font:inherit;
      font-size:0.75rem; color:var(--text-muted, #94a3b8);
      transition:all 0.15s;
    }
    .cmt-sort-tab:hover { background:var(--surface-hover, rgba(7,19,47,0.06)); }
    .cmt-sort-tab.active {
      color:var(--accent, #0068ff); background:var(--accent-bg, rgba(0,104,255,0.08));
      font-weight:600;
    }

    /* ── Comment meta row (time + actions) ── */
    .comment-meta {
      display:flex; align-items:center; gap:8px;
    }

    @media(max-width:768px){
      .fab-panel { width:calc(100vw - 48px); right:0; }
      .fab-hub { bottom:16px; right:16px; }
      .comment-reply-section { margin-left: 28px; padding: 4px 10px 6px; }
    }