/* 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 {
      position:absolute; bottom:60px; right:0;
      display:flex; flex-direction:column; align-items:flex-end; gap:8px;
      opacity:0; transform:translateY(10px) scale(0.95);
      pointer-events:none; visibility:hidden;
      transition:opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
    }
    .fab-actions.open { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; visibility:visible; transition:opacity 0.22s ease, transform 0.22s ease, visibility 0s; }
    .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:5px;
      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:6px;
      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:5px;
      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:4px; 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:4px; 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:5px;
      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:5px;
      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; }
    .fab-msg.hint { color:#ec4899; }

    /* ── Tip panel styles ── */
    .tip-qr-wrap { text-align:center; padding:8px 0 16px; }
    .tip-qr-wrap img { width:180px; height:180px; border-radius:8px; 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:5px; 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-anon-toggle input { width:14px; height:14px; accent-color:var(--accent, #0068ff); cursor:pointer; }
    /* ── Tip foldable section ── */
    .tip-fold-toggle {
      width:100%; display:flex; align-items:center; justify-content:center; gap:8px;
      padding:9px 12px; margin-bottom:12px; border:1px dashed var(--line, rgba(7,19,47,0.18));
      border-radius:6px; background:var(--surface-hover, rgba(7,19,47,0.02));
      color:var(--muted, #60708f); font:inherit; font-size:0.82rem; cursor:pointer;
      transition:all 0.2s ease; user-select:none;
    }
    .tip-fold-toggle:hover { background:var(--surface-hover, rgba(7,19,47,0.05)); color:var(--ink, #07132f); }
    .tip-fold-toggle.expanded { background:var(--accent-bg, rgba(0,104,255,0.06)); border-color:rgba(0,104,255,0.25); color:var(--accent, #0068ff); }
    .tip-fold-toggle:disabled { opacity:0.5; cursor:not-allowed; }
    .tip-fold-icon { font-size:1.4rem; line-height:1; transition:transform 0.2s; }
    .tip-fold-content { animation:tipFoldOpen 0.25s ease; }
    @keyframes tipFoldOpen { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
    .tip-fold-content.tip-anon-simple .tip-public-row,
    .tip-fold-content.tip-anon-simple .cmt-fields-labeled,
    .tip-fold-content.tip-anon-simple .fab-save-row { display:none; }
    .tip-message-wrap { margin-bottom:8px; }
    .tip-public-row {
      display:flex; align-items:center; gap:10px; margin-bottom:12px;
    }
    .tip-public-switch {
      position:relative; display:inline-block; width:38px; height:20px; flex-shrink:0;
    }
    .tip-public-switch input { opacity:0; width:0; height:0; }
    .tip-public-slider {
      position:absolute; cursor:pointer; inset:0;
      background:#cbd5e1; border-radius:999px; transition:background 0.2s;
    }
    .tip-public-slider::before {
      content:""; position:absolute; height:16px; width:16px; left:2px; bottom:2px;
      background:#fff; border-radius:50%; transition:transform 0.2s;
      box-shadow:0 1px 3px rgba(0,0,0,0.15);
    }
    .tip-public-switch input:checked + .tip-public-slider { background:linear-gradient(135deg, #f59e0b, #fbbf24); }
    .tip-public-switch input:checked + .tip-public-slider::before { transform:translateX(18px); }
    .tip-public-hint {
      font-size:0.74rem; color:#94a3b8; line-height:1.4; user-select:none;
    }
    /* ── Tip Sticker Picker ── */
    .tip-sticker-picker { margin: 0 0 12px; border: 2px solid transparent; border-radius: 8px; }
    .tip-sticker-picker.picker-highlight { border-color: #ec4899; animation: tipPickerPulse 1.1s ease-in-out infinite; }
    @keyframes tipPickerPulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(236,72,153,0); }
      50% { box-shadow: 0 0 10px 2px rgba(236,72,153,0.5); }
    }
    .tip-sticker-cats { display: flex; gap: 4px; margin-bottom: 8px; flex-wrap: wrap; }
    .tip-sticker-cat { padding: 3px 10px; border-radius: 12px; border: 1px solid var(--line, #e2e8f0); background: transparent; font-size: 0.72rem; color: var(--muted, #60708f); cursor: pointer; transition: all 0.15s; }
    .tip-sticker-cat.active { background: #07132f; color: white; border-color: #07132f; }
    .tip-sticker-cat:hover:not(.active) { background: var(--surface-hover, #f0f4f8); }
    .tip-sticker-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; max-height: 140px; overflow-y: auto; }
    .tip-sticker-item { display: flex; flex-direction: column; align-items: center; cursor: pointer; padding: 4px 2px; border-radius: 6px; transition: all 0.15s; border: 2px solid transparent; }
    .tip-sticker-item:hover { background: var(--surface-hover, #f0f4f8); }
    .tip-sticker-item.selected { border-color: #FFD54F; background: #FFFDE7; }
    .tip-sticker-item img { width: 42px; height: 42px; object-fit: contain; }
    .tip-sticker-item span { font-size: 0.62rem; color: var(--muted, #60708f); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    .tip-sticker-selected { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; min-height: 0; }
    .tip-sticker-tag { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px 2px 4px; background: var(--surface-hover, #f0f4f8); border-radius: 12px; font-size: 0.72rem; color: var(--ink, #1a1a2e); }
    .tip-sticker-tag img { width: 18px; height: 18px; }
    .tip-sticker-tag button { background: none; border: none; cursor: pointer; color: var(--muted, #94a3b8); font-size: 0.8rem; padding: 0 0 0 2px; line-height: 1; }
    .tip-sticker-tag button:hover { color: #ef4444; }
    .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; }
    /* ── Public tip comment golden gradient animation ── */
    .comment-body.is-tip {
      font-weight:600;
      background:linear-gradient(90deg, #b8860b 0%, #b8860b 45%, #ffd700 50%, #b8860b 55%, #b8860b 100%);
      background-size:200% auto;
      -webkit-background-clip:text;
      background-clip:text;
      -webkit-text-fill-color:transparent;
      animation:tipShine 4s linear infinite;
    }
    /* Tip comment links keep the plain link style (no gold-gradient upgrade) */
    .comment-body.is-tip a {
      -webkit-text-fill-color:var(--accent, #0068ff);
      color:var(--accent, #0068ff);
      font-weight:400;
    }
    @keyframes tipShine { to { background-position:200% center; } }

    /* ── 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:6px; 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:5px; 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:5px;
      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); }

    /* ── Comment/Tip labeled input rows ── */
    .cmt-fields-labeled { display:flex; flex-direction:column; }
    .cmt-field-row {
      display:flex; align-items:stretch; border:1px solid var(--line, rgba(7,19,47,0.12));
      border-radius:6px; background:#fff; overflow:hidden; margin-bottom:10px;
    }
    .cmt-field-label {
      flex-shrink:0; padding:10px 14px; font-size:0.85rem; color:var(--text, #1a2332);
      background:#fff; border-right:1px solid var(--line, rgba(7,19,47,0.12));
      display:flex; align-items:center; white-space:nowrap;
    }
    .cmt-field-row .fab-input {
      border:none; border-radius:0; box-shadow:none; margin-bottom:0; flex:1;
    }
    .cmt-field-row .fab-input:focus { border:none; box-shadow:none; }

    /* ── Share panel styles ── */
    /* 分享按钮：flex 换行 + 整体居中。每个按钮 = (容器宽 - 2×列间距)/3，
       故任意面板宽度下都严格每行 3 个；按钮组铺满面板内容区，左右留白≈面板内边距，
       与按钮间距协调统一；最后一行不足 3 个时（如共 5 个：3+2）整体相对面板水平居中。 */
    .share-grid {
      display:flex; flex-wrap:wrap; justify-content:center;
      gap:18px; margin:0 auto 8px;
    }
    .share-btn-item {
      display:flex; flex-direction:column; align-items:center; gap:6px;
      flex:0 0 calc((100% - 36px) / 3); max-width:calc((100% - 36px) / 3);
      border:none; background:transparent; cursor:pointer; font:inherit; padding:4px;
      transition:transform 0.15s;
    }
    .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:5px;
      font:inherit; font-size:0.8rem; color:var(--muted, #60708f); background:#f9fafb; outline:none;
    }
    .share-copy-btn {
      padding:8px 16px; border:none; border-radius:5px;
      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:6px; 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:5px; 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:5px;
      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; }
    .cmt-write-btn {
      display:inline-flex; align-items:center; gap:4px;
      padding:6px 12px; border:1px solid var(--line, rgba(7,19,47,0.12));
      border-radius:4px; background:var(--bg-glass, rgba(255,255,255,0.88));
      backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
      color:var(--text, #07132f); font:inherit; font-size:0.9rem; font-weight:600;
      cursor:pointer; transition:all 0.15s; box-shadow:0 1px 2px rgba(7,19,66,0.03);
    }
    .cmt-write-btn:hover { background:var(--surface-hover, rgba(0,104,255,0.08)); color:var(--accent, #0068ff); border-color:rgba(0,104,255,0.25); }
    .comment-empty { cursor:pointer; transition:background 0.15s; border-radius:6px; }
    .comment-empty:hover { background:var(--surface-hover, rgba(7,19,47,0.03)); }
    .comment-card {
      display:flex; gap:10px; padding:14px 0;
      border-bottom:none;
    }
    .comment-card:last-child { border-bottom:none; }
    .comment-avatar {
      width:28px; height:28px; border-radius:50%; overflow:hidden; 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-row {
      display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0;
    }
    .comment-date {
      font-size:0.72rem; font-weight:400; color:var(--text-muted, #94a3b8);
      white-space:nowrap; flex-shrink:0;
    }
    .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-actions {
      display:flex; align-items:center; gap:4px; margin-left:auto; white-space:nowrap; flex-shrink:0;
    }
    .comment-actions .comment-time {
      margin-right:8px;
    }
    .comment-body {
      font-size:0.85rem; color:var(--text-secondary, #334155); line-height:1.6; word-break:break-word;
    }
    .comment-body a {
      color:var(--accent, #0068ff); text-decoration:none; word-break:break-all;
      position:relative;
    }
    /* Underline draws left→right on hover (transform = GPU-composited, lightweight) */
    .comment-body a::after {
      content:"";
      position:absolute; left:0; right:0; bottom:-1px;
      height:1px; background:currentColor;
      transform:scaleX(0); transform-origin:left center;
      transition:transform 0.3s ease;
      pointer-events:none;
    }
    .comment-body a:hover::after { transform:scaleX(1); }
    @media (prefers-reduced-motion: reduce) {
      .comment-body a::after { transition:none; }
    }
    .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:6px; 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:5px; 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)); }
    .comment-delete-btn {
      display:inline-flex; align-items:center; gap:3px; padding:2px 8px;
      border:none; border-radius:5px; background:transparent;
      cursor:pointer; font:inherit; font-size:0.72rem; color:var(--text-muted, #94a3b8);
      transition:all 0.15s;
    }
    .comment-delete-btn:hover { color:#dc2626; background:rgba(220,38,38,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: 6px;
      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:none;
    }
    .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:6px;
      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:5px;
      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:5px; 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:4px;
      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; }
      /* 手机端留言区调宽：减少左右内边距，释放横向空间 */
      .comments-section { width:100%; padding:0 12px; }
      /* 取消强制换行，让「时间·点赞·回复」与昵称保持同一行 */
      .comment-top { flex-wrap:nowrap; align-items:flex-start; }
      .comment-actions { width:auto; justify-content:flex-end; margin-top:0; }
      .comment-name-row { gap:6px; }
      /* 窄屏留言头像统一为 34px 圆形，与文章页(mobile.css 未设 radius、沿用基础 50%)保持一致；仅调大小不改形状。桌面端 36px 方形在 min-width:769px 块中已设定 */
      .comment-avatar { width:34px; height:34px; font-size:0.95rem; border-radius:50%; }
      .comment-reply-section .comment-avatar { width:34px; height:34px; font-size:0.95rem; border-radius:50%; }
    }
      /* 极窄屏（如 iPhone SE 375px）：隐藏绝对日期，仅保留相对时间，确保一行放得下 */
    @media(max-width:380px){
      .comment-date { display:none; }
    }

    /* ── Poster generation lightbox + loading ── */
    .poster-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;
    }
    .poster-lightbox.open { display:flex; }
    .poster-lightbox-inner {
      background:var(--surface-solid, #fff); border-radius:6px; padding:24px; text-align:center;
      box-shadow:0 24px 64px rgba(0,0,0,0.3); max-width:90vw; max-height:90vh; overflow:auto;
    }
    .poster-lightbox-inner img,
    .poster-img { max-width:min(720px,80vw); max-height:70vh; border-radius:6px; display:block; margin:0 auto; cursor:default; -webkit-touch-callout:default; touch-callout:default; }
    .poster-lightbox-inner p { font-size:0.85rem; color:var(--muted, #60708f); margin:12px 0 6px; }
    .poster-download-btn {
      display:inline-block; margin-top:12px; padding:10px 28px; border:none; border-radius:6px;
      background:#0068ff; color:#fff; font-size:0.85rem; text-decoration:none; cursor:pointer; transition:opacity 0.15s;
    }
    .poster-download-btn:hover { opacity:0.9; }
    .poster-lightbox-close {
      display:inline-block; margin-top:12px; margin-left:8px; padding:10px 28px; border:none; border-radius:6px;
      background:var(--surface-hover, rgba(7,19,47,0.08)); color:var(--ink, #07132f); font-size:0.85rem; cursor:pointer; transition:opacity 0.15s;
    }
    .poster-lightbox-close:hover { opacity:0.8; }
    .poster-loading {
      display:none; position:fixed; z-index:100000; 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;
    }
    .poster-loading.open { display:flex; }
    .poster-loading-inner {
      background:var(--surface-solid, #fff); border-radius:6px; padding:24px 32px;
      box-shadow:0 16px 48px rgba(0,0,0,0.2); text-align:center;
    }
    .poster-loading-spinner {
      width:32px; height:32px; border:3px solid rgba(0,104,255,0.2); border-top-color:#0068ff;
      border-radius:50%; animation:posterSpin 1s linear infinite; margin:0 auto 12px;
    }
    @keyframes posterSpin { to { transform:rotate(360deg); } }
    .poster-loading-text { font-size:0.85rem; color:var(--muted, #60708f); }

    /* ── Desktop comment scale-up (shared across all pages) ──
       Bigger text/avatars/buttons on desktop so all pages (home + section pages)
       match the article-reader treatment. Reply cards use the same sizes as
       top-level cards. Mobile rules above are intentionally untouched. */
    @media (min-width: 769px) {
      .comments-section .cmt-header {
        font-size: 1.05rem;
        padding-bottom: 14px;
        margin: 0 0 16px;
      }
      .comments-section .cmt-header .count { font-size: 0.85rem; }
      .cmt-write-btn {
        font-size: 0.95rem;
        padding: 8px 16px;
        border-radius: 6px;
      }
      .cmt-sort-tab {
        font-size: 0.82rem;
        padding: 5px 14px;
      }
      .comment-card {
        gap: 14px;
        padding: 18px 0;
      }
      .comment-avatar {
        width: 36px;
        height: 36px;
        font-size: 1rem;
        border-radius: 6px;
      }
      .comment-name { font-size: 0.92rem; }
      .comment-name .homepage-icon { width: 14px; height: 14px; }
      .comment-date { font-size: 0.78rem; }
      .comment-time { font-size: 0.76rem; }
      .comment-body {
        font-size: 0.95rem;
        line-height: 1.7;
      }
      .comment-like-btn,
      .comment-reply-btn,
      .comment-delete-btn {
        font-size: 0.8rem;
        padding: 4px 10px;
      }
      .comment-like-btn svg { width: 16px; height: 16px; }
      .comment-empty {
        font-size: 0.9rem;
        padding: 40px 24px;
      }
      .comment-expand-btn { font-size: 0.84rem; }

      /* Reply cards share the same element sizes as top-level cards */
      .comment-reply-section {
        margin-left: 50px;
        padding: 8px 16px 10px;
      }
      .comment-reply-section .comment-card {
        gap: 14px;
        padding: 18px 0;
      }
      .comment-reply-section .comment-avatar {
        width: 36px;
        height: 36px;
        font-size: 1rem;
        border-radius: 6px;
      }
      .comment-reply-section .comment-name { font-size: 0.92rem; }
      .comment-reply-section .comment-body {
        font-size: 0.95rem;
        line-height: 1.7;
      }
      .comment-reply-section .comment-time,
      .comment-reply-section .comment-like-btn,
      .comment-reply-section .comment-reply-btn {
        font-size: 0.8rem;
        padding: 4px 10px;
      }
    }