/* ============================================================================
 * message-board.css — Stage 2G-03C. Scope: /link/ (page 354) only (enqueued via
 * is_page(354) in functions.php). Two parts:
 *   (1) .moe-separator — the 留言板 divider (prod has the markup but NO CSS anywhere),
 *       a centered heading with a horizontal rule on each side.
 *   (2) Comment-list readability — the user reported the board's comments look messy
 *       (faint separators, unclear reply hierarchy). MINIMAL CSS only; no markup/JS
 *       change, no comments.php rewrite, comment-reply untouched. The friends grid
 *       (.links ul li) already styles via the parent style.css.
 * ========================================================================== */

/* ---------------------------------------------------------- 留言板 separator -- */
body.page-id-354 .moe-separator {
    display: flex;
    align-items: center;
    margin: 48px auto 28px;
    max-width: 730px;
}
body.page-id-354 .moe-separator h2 {
    margin: 0 18px;
    padding: 0;
    font-size: 22px;
    color: #797979;
    letter-spacing: 3px;
    white-space: nowrap;
}
body.page-id-354 .moe-separator .moe-separator-border {
    flex: 1 1 auto;
    height: 2px;
    background-color: #d8d8d8;
}

/* ------------------------------------------------- comment-list readability -- */
/* Clearer card boundary + spacing between top-level comments. The theme renders
   each comment as .contents > .comment-arrow > .main.shadow, then a faint <hr>. */
body.page-id-354 .comments .commentwrap > li {
    margin-bottom: 6px;
}
body.page-id-354 .comments .commentwrap .main.shadow {
    border: 1px solid #ececec;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
}
/* Strengthen the inter-comment separator (was barely visible). */
.comments .commentwrap > li > hr,
body.page-id-354 .comments .commentwrap hr {
    border: 0;
    height: 1px;
    background: #ededed;
    margin: 16px 0;
}

/* Reply hierarchy: indent nested replies and add a left connector line so it is
   clear WHO replied to WHOM (the theme nests replies in <ul class="children">). */
body.page-id-354 .comments .commentwrap .children {
    margin-top: 16px;                 /* gap so nested reply cards don't touch the parent's reply button */
    margin-left: 22px;
    padding-left: 16px;
    border-left: 2px solid #87CEFA;   /* reply spine (sky blue) */
}
@media (max-width: 600px) {
body.page-id-354 .comments .commentwrap .children {
        margin-left: 10px;
        padding-left: 10px;
    }
}
/* Make the "Blogger / author" badge + author name a touch clearer. */
body.page-id-354 .comments .commentwrap .commeta .author {
    font-weight: 600;
}
body.page-id-354 .comments .commentwrap .bb-comment.isauthor {
    border-radius: 4px;
}
/* Keep the reply button reliably visible (not only on hover). */
body.page-id-354 .comments .commentwrap .comment-reply-link {
    opacity: .9;
}

/* ============================================================================
 * 2G-05C-FIX7K — /link/ message board: clean self-contained comment form.
 * Single-column card; submit lives in its own .ww-cf-actions block (never inside
 * an avatar wrapper). Logged-in and guest states share the same wrapper, so the
 * old `.cmt-info-container` flex break cannot happen. Local-only, no remote fonts.
 * ========================================================================== */
#commentform.ww-comment-form {
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}
.ww-comment-form .ww-cf-row { margin: 0 0 14px; }
.ww-comment-form .ww-cf-input,
.ww-comment-form .ww-cf-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 12px;
    background: rgba(255, 255, 255, .65);
    font-size: 14px;
    line-height: 1.6;
    transition: border-color .2s, box-shadow .2s, background .2s;
    -webkit-appearance: none;
}
.ww-comment-form .ww-cf-textarea { min-height: 116px; resize: vertical; }
.ww-comment-form .ww-cf-input:focus,
.ww-comment-form .ww-cf-textarea:focus {
    outline: none;
    border-color: #FE9600;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(254, 150, 0, .14);
}
/* guest identity row: nickname + email side by side on wider screens */
.ww-comment-form .ww-cf-author,
.ww-comment-form .ww-cf-email,
.ww-comment-form .ww-cf-url { display: block; }
@media (min-width: 560px) {
    .ww-comment-form .ww-cf-author,
    .ww-comment-form .ww-cf-email {
        display: inline-block;
        width: calc(50% - 7px);
        vertical-align: top;
    }
    .ww-comment-form .ww-cf-author { margin-right: 14px; }
}
.ww-comment-form .ww-cf-note {
    margin: 6px 2px 0;
    font-size: 12px;
    color: rgba(0, 0, 0, .4);
}
.ww-comment-form .ww-cf-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(0, 0, 0, .6);
    cursor: pointer;
    user-select: none;
}
.ww-comment-form .ww-cf-hp { display: none !important; }
.ww-comment-form .ww-cf-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
}
.ww-comment-form .ww-cf-submit {
    display: inline-block;
    padding: 10px 26px;
    border: none;
    border-radius: 999px;
    background: #FE9600;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .12s, box-shadow .2s, background .2s;
}
.ww-comment-form .ww-cf-submit:hover {
    background: #ff8400;
    box-shadow: 0 6px 18px -6px rgba(254, 150, 0, .7);
    transform: translateY(-1px);
}
.ww-comment-form .ww-cf-submit:active { transform: translateY(0); }
.ww-comment-form .ww-cf-loggedin {
    margin: 0 0 14px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(254, 150, 0, .08);
    font-size: 13px;
    line-height: 1.6;
    color: rgba(0, 0, 0, .6);
}
.ww-comment-form .ww-cf-loggedin a { color: #FE9600; }
body.dark .ww-comment-form .ww-cf-input,
body.dark .ww-comment-form .ww-cf-textarea {
    background: rgba(49, 54, 59, .85);
    border-color: rgba(255, 255, 255, .14);
    color: #eee;
}
body.dark .ww-comment-form .ww-cf-note,
body.dark .ww-comment-form .ww-cf-check,
body.dark .ww-comment-form .ww-cf-loggedin { color: #bebebe; }

/* ============================================================================
 * 2G-05C-FIX7K2 — /link/ Sakurairo-style comment UI (ported structure). The avatar
 * preview (.cmt-info-container/.comment-user-avatar), .popup inputs and .emotion-box
 * are already styled by the parent Sakura style.css; this only adds light polish +
 * the logged-in note + checks/action layout. Local-only, no remote fonts.
 * ========================================================================== */
#commentform.ww-comment-form .commentbody {
    border-radius: 12px;
}
#commentform.ww-comment-form .comment-checks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin: 10px 0 2px;
}
#commentform.ww-comment-form .ww-cf-hp { display: none !important; }
#commentform.ww-comment-form .form-submit.ww-mb-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}
#commentform.ww-comment-form .ww-mb-submit {
    border-radius: 999px;
    padding: 8px 26px;
    cursor: pointer;
}
.ww-mb-comments .ww-mb-loggedin {
    margin: 0 0 14px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(254, 150, 0, .08);
    font-size: 13px;
    line-height: 1.6;
    color: rgba(0, 0, 0, .6);
}
.ww-mb-comments .ww-mb-loggedin a { color: #FE9600; }
body.dark .ww-mb-comments .ww-mb-loggedin { color: #bebebe; }
/* keep the emotion panel anchored under the textarea (never floats to the header) */
.ww-mb-comments .emotion-box { position: static; margin-top: 8px; }

/* ============================================================================
 * 2G-05C-FIX7L — flandre.vip/friends-style (Sakurairo-flavoured) comment card for /link/.
 * EQUIVALENT re-implementation (not a copy of Sakurairo's GPL CSS). Scoped to .ww-fl so it
 * never affects article comments. Overrides the parent Sakura comment look on this page only.
 * ========================================================================== */
.ww-fl .comments-main {
    background: rgba(255, 255, 255, .55);
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 20px;
    padding: 22px 22px 26px;
    box-shadow: 0 10px 40px -22px rgba(0, 0, 0, .35);
    backdrop-filter: saturate(120%) blur(2px);
}
.ww-fl #commentform.ww-fl-form { max-width: 100%; margin: 0; }

/* textarea = the visual centre */
.ww-fl .ww-fl-textarea-wrap { position: relative; margin: 6px 0 12px; }
.ww-fl .ww-fl-textarea {
    width: 100%; box-sizing: border-box; min-height: 130px; resize: vertical;
    padding: 16px 18px; border: 1.5px solid rgba(0, 0, 0, .08); border-radius: 16px;
    background: rgba(255, 255, 255, .85); font-size: 15px; line-height: 1.7;
    transition: border-color .2s, box-shadow .2s, background .2s; -webkit-appearance: none;
}
.ww-fl .ww-fl-textarea:focus {
    outline: none; border-color: #ff9bb3; background: #fff;
    box-shadow: 0 0 0 4px rgba(255, 155, 179, .16);
}

/* emoji toggle pill near the textarea + panel under it */
.ww-fl .ww-fl-emotion-toggle {
    display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 10px;
    padding: 6px 14px; border-radius: 999px; cursor: pointer; user-select: none;
    background: rgba(255, 155, 179, .12); color: #e26d8a; font-size: 13px; width: auto;
}
.ww-fl .ww-fl-emotion-toggle:hover { background: rgba(255, 155, 179, .2); }
.ww-fl .ww-fl-emotion.emotion-box {
    position: static !important; margin: 0 0 14px; padding: 12px;
    border-radius: 14px; background: rgba(0, 0, 0, .03); border: 1px solid rgba(0, 0, 0, .05);
}
.ww-fl .ww-fl-emotion .motion-switcher-table th {
    border-radius: 8px; padding: 4px 10px; cursor: pointer; font-size: 13px;
}
.ww-fl .ww-fl-emotion .motion-switcher-table th.on-hover { background: rgba(255, 155, 179, .18); }

/* identity row: round avatar (left) + pill fields (right). Override parent flex/avatar. */
.ww-fl .cmt-info-container.ww-fl-identity {
    display: flex !important; flex-wrap: wrap; align-items: center; gap: 12px;
    width: 100% !important; margin: 0 0 12px; padding: 0; background: none !important;
}
.ww-fl .comment-user-avatar.ww-fl-avatar {
    position: relative; width: 54px !important; height: 54px !important; min-width: 54px;
    margin: 0 !important; border-radius: 50%; overflow: visible; flex: 0 0 auto;
    /* neutralise the parent's absolute-avatar offsets (esp. the mobile `right:11%`) that
       shifted this now-relative avatar out past the form's left edge on small screens. */
    left: auto; right: auto; top: auto; bottom: auto; padding-top: 0;
}
.ww-fl .ww-fl-avatar img {
    width: 54px; height: 54px; border-radius: 50%; object-fit: cover;
    border: 2px solid #fff; box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .4); background: #fff;
}
.ww-fl .ww-fl-avatar .socila-check {
    position: absolute; right: -3px; bottom: -3px; width: 20px; height: 20px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 11px; color: #fff;
    border: 2px solid #fff;
}
.ww-fl .ww-fl-avatar .qq-check { background: #12b7f5; }
.ww-fl .ww-fl-avatar .gravatar-check { background: #ff9bb3; }
.ww-fl .ww-fl-identity .ww-fl-field {
    flex: 1 1 150px; min-width: 0; margin: 0;
}
.ww-fl .ww-fl-identity .ww-fl-field input {
    width: 100%; box-sizing: border-box; padding: 9px 14px; border-radius: 999px;
    border: 1.5px solid rgba(0, 0, 0, .08); background: rgba(255, 255, 255, .85);
    font-size: 14px; transition: border-color .2s, box-shadow .2s; -webkit-appearance: none;
}
.ww-fl .ww-fl-identity .ww-fl-field input:focus {
    outline: none; border-color: #ff9bb3; background: #fff; box-shadow: 0 0 0 3px rgba(255, 155, 179, .14);
}

/* QQ state-machine status line */
.ww-fl .ww-fl-qq-status { min-height: 0; margin: 0 0 8px; font-size: 12.5px; line-height: 1.5; }
.ww-fl .ww-fl-qq-status:empty { display: none; }
.ww-fl .ww-fl-qq-status[data-kind="ok"]   { color: #1aa179; }
.ww-fl .ww-fl-qq-status[data-kind="warn"] { color: #e08a00; }

/* options row: click-to-verify pill + mail-notify */
.ww-fl .ww-fl-checks { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 4px 0 2px; }
.ww-fl .ww-cf-hp { display: none !important; }
.ww-fl .ww-fl-verify {
    display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none;
    padding: 8px 16px; border-radius: 999px; font-size: 13px; color: #7a7f87;
    border: 1.5px dashed rgba(0, 0, 0, .18); background: rgba(255, 255, 255, .6); transition: all .25s;
}
.ww-fl .ww-fl-verify:hover { border-color: #ff9bb3; color: #e26d8a; }
.ww-fl .ww-fl-verify-dot {
    width: 14px; height: 14px; border-radius: 50%; background: #fff;
    border: 2px solid rgba(0, 0, 0, .25); transition: all .25s; flex: 0 0 auto;
}
.ww-fl .ww-fl-verify.verified {
    border-style: solid; border-color: #34c759; color: #1aa179; background: rgba(52, 199, 89, .1);
}
.ww-fl .ww-fl-verify.verified .ww-fl-verify-dot { background: #34c759; border-color: #34c759; box-shadow: 0 0 0 3px rgba(52, 199, 89, .18); }
.ww-fl .ww-fl-check { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: #6b7079; cursor: pointer; user-select: none; }

/* submit */
.ww-fl .form-submit.ww-fl-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 16px; }
.ww-fl .ww-fl-submit {
    border: none; cursor: pointer; padding: 11px 34px; border-radius: 999px; color: #fff; font-size: 15px; font-weight: 600;
    background: linear-gradient(135deg, #4f9be0, #3d7fc4); box-shadow: 0 8px 22px -8px rgba(61, 127, 196, .75);
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    transition: transform .12s, box-shadow .2s, filter .2s;
}
.ww-fl .ww-fl-submit:hover { filter: brightness(1.04); transform: translateY(-1px); }
.ww-fl .ww-fl-submit:active { transform: translateY(0); }

/* logged-in card */
.ww-fl .ww-fl-loggedin { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px 16px; border-radius: 16px; background: rgba(255, 155, 179, .1); }
.ww-fl .ww-fl-loggedin .ww-fl-me-avatar, .ww-fl .ww-fl-loggedin img { width: 44px; height: 44px; border-radius: 50%; }
.ww-fl .ww-fl-loggedin-txt { font-size: 13.5px; color: #6b7079; line-height: 1.6; }
.ww-fl .ww-fl-logout { margin-left: 10px; color: #e26d8a; }

/* mobile: never overflow horizontally */
@media (max-width: 560px) {
    .ww-fl .comments-main { padding: 16px 14px 20px; border-radius: 16px; }
    .ww-fl .cmt-info-container.ww-fl-identity { gap: 10px; }
    .ww-fl .ww-fl-identity .ww-fl-field { flex: 1 1 100%; }
    .ww-fl .form-submit.ww-fl-actions { justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
    .ww-fl .ww-fl-submit { width: auto; padding: 10px 26px; font-size: 14.5px; }
}

/* dark mode readability */
body.dark .ww-fl .comments-main { background: rgba(40, 44, 50, .6); border-color: rgba(255, 255, 255, .08); }
body.dark .ww-fl .ww-fl-textarea,
body.dark .ww-fl .ww-fl-identity .ww-fl-field input { background: rgba(49, 54, 59, .85); border-color: rgba(255, 255, 255, .12); color: #eee; }
body.dark .ww-fl .ww-fl-emotion.emotion-box { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .08); }
body.dark .ww-fl .ww-fl-verify { background: rgba(49, 54, 59, .6); color: #bdc2c9; }
body.dark .ww-fl .ww-fl-check, body.dark .ww-fl .ww-fl-loggedin-txt { color: #bdc2c9; }
body.dark .ww-fl .ww-fl-loggedin { background: rgba(255, 155, 179, .08); }

/* ============================================================================
 * 2G-05C-FIX7M — flandre/comment-style thread-card comment LIST + toolbar (/link/ only, .ww-fl).
 * ========================================================================== */
.ww-fl .ww-fl-title { font-size: 20px; font-weight: 700; margin: 0 0 18px; }
.ww-fl ul.ww-fl-list, .ww-fl ul.ww-fl-list ul.children { list-style: none; margin: 0; padding: 0; }

/* main comment = a roomy thread card; threads clearly separated */
.ww-fl .ww-fl-c-main {
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 18px;
    padding: 18px 20px;
    margin: 0 0 20px;
    box-shadow: 0 8px 26px -18px rgba(0, 0, 0, .4);
}
.ww-fl .ww-fl-c-row { display: flex; gap: 14px; align-items: flex-start; }
.ww-fl .ww-fl-c-ava { flex: 0 0 auto; }
.ww-fl .ww-fl-c-ava img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: block; max-width: 44px; border: 2px solid #fff; box-shadow: 0 3px 10px -4px rgba(0,0,0,.4); }
.ww-fl .ww-fl-c-body { flex: 1 1 auto; min-width: 0; }
.ww-fl .ww-fl-c-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ww-fl .ww-fl-c-name { font-weight: 600; font-size: 14.5px; }
.ww-fl .ww-fl-c-name a { color: inherit; }
.ww-fl .ww-fl-c-badge { font-size: 11px; font-weight: 600; color: #fff; background: #ff9bb3; padding: 1px 8px; border-radius: 999px; }
.ww-fl .ww-fl-c-time { font-size: 12px; color: #9aa0a8; }
.ww-fl .ww-fl-c-content { margin: 7px 0 4px; font-size: 14.5px; line-height: 1.75; word-wrap: break-word; overflow-wrap: break-word; }
.ww-fl .ww-fl-c-content img { max-width: 100%; height: auto; }
.ww-fl .ww-fl-c-actions { font-size: 12.5px; }
.ww-fl .ww-fl-c-actions a { color: #e26d8a; }

/* reply toggle (compact icon + count); replies guide line + indented smaller cards */
.ww-fl .ww-fl-toggle {
    display: inline-flex; align-items: center; gap: 4px; margin: 10px 0 0 58px; cursor: pointer;
    padding: 5px 14px; border-radius: 999px; border: 1px solid rgba(0,0,0,.1);
    background: rgba(255,155,179,.1); color: #e26d8a; font-size: 12.5px; transition: all .2s;
}
.ww-fl .ww-fl-toggle:hover { background: rgba(255,155,179,.2); }
.ww-fl .ww-fl-toggle.open { background: rgba(255,155,179,.22); }
.ww-fl .ww-fl-toggle-n { font-weight: 700; }
.ww-fl ul.children.ww-fl-replies {
    margin: 12px 0 0 26px; padding: 4px 0 0 22px; border-left: 2px solid #87CEFA;
}
.ww-fl .ww-fl-c-reply {
    background: rgba(0,0,0,.018); border: 1px solid rgba(0,0,0,.05); border-radius: 14px;
    padding: 12px 14px; margin: 0 0 12px;
}
.ww-fl .ww-fl-c-reply .ww-fl-c-ava img { width: 36px; height: 36px; max-width: 36px; }
.ww-fl .ww-fl-c-reply .ww-fl-c-row { gap: 11px; }
.ww-fl #comments-navi { margin-top: 8px; }

/* form toolbar (Markdown / image / emoji) */
.ww-fl .ww-fl-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 0 12px; }
.ww-fl .ww-fl-md { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border-radius: 12px; background: rgba(0,0,0,.04); }
.ww-fl .ww-fl-tool {
    border: none; background: transparent; cursor: pointer; width: 32px; height: 32px; border-radius: 9px;
    font-size: 14px; color: #6b7079; display: inline-flex; align-items: center; justify-content: center; transition: background .15s, color .15s;
}
.ww-fl .ww-fl-tool:hover { background: rgba(65,131,196,.14); color: #3a72ac; }
.ww-fl .ww-fl-emoji-btn { width: 32px; padding: 0; }
.ww-fl .ww-fl-tool .ww-fl-ico, .ww-fl .ww-fl-tool > svg { width: 20px; height: 20px; flex: none; display: block; margin: auto; }  /* flex:none = SVG 不被 flex 压缩(反复变小的根) */
.ww-fl .ww-fl-tool .emotion-toggle-off, .ww-fl .ww-fl-tool .emotion-toggle-on { display: inline-flex; }
/* ww(toolbar align): upload + emote are the SAME 32x32 tool button with a 19px centred icon, on one row. */
.ww-fl .ww-fl-toolbar > .ww-fl-tool { width: 32px; height: 32px; padding: 0; flex: none; align-self: center; }
.ww-fl .ww-fl-tool .emotion-toggle-off, .ww-fl .ww-fl-tool .emotion-toggle-on { display: inline-flex; align-items: center; justify-content: center; line-height: 0; height: 19px; }
.ww-fl #emotion-toggle .emotion-toggle-on .ww-fl-ico { color: #4183c4; }  /* 打开表情面板时图标变蓝,给反馈 */

/* symmetric verify (left) + mail-notify (right) */
.ww-fl .ww-fl-checks { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }

/* QQ focus bubble ABOVE the nickname input */
.ww-fl .ww-fl-author-wrap { position: relative; }
.ww-fl .ww-fl-qq-bubble {
    position: absolute; left: 12px; bottom: calc(100% + 8px); z-index: 5;
    background: #333; color: #fff; font-size: 12px; padding: 5px 11px; border-radius: 8px; white-space: nowrap;
    opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .18s, transform .18s;
}
.ww-fl .ww-fl-qq-bubble.show { opacity: 1; transform: translateY(0); }
.ww-fl .ww-fl-qq-bubble::after { content: ""; position: absolute; left: 16px; top: 100%; border: 6px solid transparent; border-top-color: #333; }

@media (max-width: 560px) {
    .ww-fl .ww-fl-c-main { padding: 14px 14px; }
    .ww-fl .ww-fl-toggle { margin-left: 50px; }
    .ww-fl ul.children.ww-fl-replies { margin-left: 8px; padding-left: 14px; }
    .ww-fl .ww-fl-c-content { font-size: 14px; }
}
body.dark .ww-fl .ww-fl-c-main { background: rgba(40,44,50,.6); border-color: rgba(255,255,255,.08); }
body.dark .ww-fl .ww-fl-c-reply { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.07); }
body.dark .ww-fl .ww-fl-c-content, body.dark .ww-fl .ww-fl-c-name { color: #e6e6e6; }
body.dark .ww-fl .ww-fl-md { background: rgba(255,255,255,.06); }
body.dark .ww-fl .ww-fl-tool { color: #bdc2c9; }

/* ============================================================================
 * 2G-05C-FIX7N — /link/-only fixes. EVERYTHING here is scoped to body.page-id-354 so it can NEVER
 * affect the home, articles, /test/ or Contact (anti-leak hardening for the FIX7M regression report).
 * Width widen + reply toggle/button contrast + cancel-reply reposition + spacing + comment images.
 * ========================================================================== */
/* (A) widen ONLY the /link/ content column (does NOT touch global #page/.site-content elsewhere) */
body.page-id-354 #content.site-content,
body.page-id-354 #content .content-area,
body.page-id-354 #primary,
body.page-id-354 .ww-fl .comments-main { max-width: 1180px; margin-left: auto; margin-right: auto; }
body.page-id-354 .ww-fl { width: 100%; }
@media (max-width: 1240px) { body.page-id-354 #content.site-content, body.page-id-354 #content .content-area, body.page-id-354 #primary, body.page-id-354 .ww-fl .comments-main { max-width: 96%; } }

/* (B) more generous thread spacing + clearer separation */
body.page-id-354 .ww-fl .ww-fl-c-main { padding: 22px 24px; margin: 0 0 28px; }
body.page-id-354 .ww-fl ul.children.ww-fl-replies { margin-top: 16px; }
body.page-id-354 .ww-fl .ww-fl-c-reply { margin-bottom: 14px; }
body.page-id-354 .ww-fl .ww-fl-c-content { margin: 9px 0 8px; }

/* (C) REPLY link readable: dark text on light pill (was pink-on-orange) */
body.page-id-354 .ww-fl .ww-fl-c-actions a,
body.page-id-354 .ww-fl .comment-reply-link {
    display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 12.5px;
    color: #2f6d99 !important; background: rgba(135,206,250,.16); border: 1px solid rgba(135,206,250,.55);
    text-decoration: none; transition: background .15s, color .15s;
}
body.page-id-354 .ww-fl .ww-fl-c-actions a:hover,
body.page-id-354 .ww-fl .comment-reply-link:hover { background: #5cabe6; color: #fff !important; }

/* (D) cancel-reply: readable + floated to the LEFT of the textarea, NOT over the textarea text/插图 */
body.page-id-354 .ww-fl .comment-respond { position: relative; }
body.page-id-354 .ww-fl #cancel-comment-reply-link {
    display: inline-flex; align-items: center; gap: 4px; margin: 0 0 10px 0;
    padding: 6px 14px; border-radius: 999px; font-size: 12.5px;
    color: #fff !important; background: #8a8f98; border: none; text-decoration: none;
}
body.page-id-354 .ww-fl #cancel-comment-reply-link:hover { background: #e26d8a; }
/* graybar (Leave a Reply to …) sits above the form; cancel link inside it floats left, clear of textarea */
body.page-id-354 .ww-fl .graybar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* (E) comment images: main bigger, replies smaller, never overflow */
body.page-id-354 .ww-fl .ww-fl-c-main > .ww-fl-c-row .ww-fl-c-content img { max-width: 360px; max-height: 320px; height: auto; border-radius: 10px; border: 1px solid rgba(0,0,0,.08); }
body.page-id-354 .ww-fl .ww-fl-c-reply .ww-fl-c-content img { max-width: 240px; max-height: 220px; }
@media (max-width: 560px) { body.page-id-354 .ww-fl .ww-fl-c-content img { max-width: 100% !important; } }

/* 2G-05C-FIX7N: device/source meta line under the author */
body.page-id-354 .ww-fl .ww-fl-c-meta { font-size: 11.5px; color: #9aa0a8; margin: 2px 0 0; line-height: 1.5; }
body.page-id-354 .ww-fl .ww-fl-c-meta i { margin: 0 2px; }
body.page-id-354 .ww-fl .ww-fl-c-loc { margin-left: 4px; }
body.dark body.page-id-354 .ww-fl .ww-fl-c-meta, body.dark .ww-fl .ww-fl-c-meta { color: #888f99; }

/* 2G-05C-FIX7O: /link UA/IP meta icons — fixed SMALL size (parent uses 14px); never enlarged by the
   comment-content image rule (.ww-fl-c-content img). Only the named .useragent-info shows; the
   icon-only mobile variant stays hidden (we output only one variant now). */
body.page-id-354 .ww-fl .ww-fl-c-meta .useragent-info img,
body.page-id-354 .ww-fl .ww-fl-c-meta img {
    width: 14px !important; height: 14px !important; max-width: 14px !important; max-height: 14px !important;
    vertical-align: sub; border: 0; display: inline; margin: 0 1px; border-radius: 0; box-shadow: none;
}
body.page-id-354 .ww-fl .ww-fl-c-meta .useragent-info-m { display: none !important; }
body.page-id-354 .ww-fl .ww-fl-c-meta .useragent-info { color: #9aa0a8; }


/* ===== 2G(emote): Sakurairo-style emote popup — tabs (bilibili / 颜文字) + clean card. Blue accent. ===== */
.ww-fl .emotion-box.ww-fl-emotion {
    display: none; margin: 4px 0 14px; padding: 10px; width: 100%; box-sizing: border-box;
    background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: 16px;
    box-shadow: 0 12px 30px -12px rgba(30,50,80,.28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ww-fl .ww-emo-tabs { display: flex; gap: 6px; margin-bottom: 8px; }
.ww-fl .ww-emo-tab {
    border: none; cursor: pointer; padding: 6px 14px; border-radius: 10px; font-size: 13px; font-weight: 600;
    color: #6b7079; background: rgba(0,0,0,.045); transition: background .15s, color .15s;
}
.ww-fl .ww-emo-tab:hover { background: rgba(65,131,196,.12); color: #3a72ac; }
.ww-fl .ww-emo-tab.active { background: #4183c4; color: #fff; box-shadow: 0 4px 12px -4px rgba(65,131,196,.7); }
.ww-fl .ww-emo-panel { max-height: 172px; overflow-y: auto; overflow-x: hidden; border-radius: 10px; }
.ww-fl .ww-emo-panel::-webkit-scrollbar { width: 7px; }
.ww-fl .ww-emo-panel::-webkit-scrollbar-thumb { background: rgba(65,131,196,.35); border-radius: 4px; }
/* bilibili grid uses the parent .emotion-item cells (already local sprites) */
.ww-fl .ww-emo-panel.bili-container { display: flex; flex-wrap: wrap; align-content: flex-start; padding: 4px 2px; }
/* 颜文字 chips */
.ww-fl .ww-kao-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; padding: 4px 2px; }
.ww-fl .ww-kao {
    cursor: pointer; border: 1px solid rgba(0,0,0,.06); background: #fafbfc; border-radius: 9px;
    padding: 7px 4px; text-align: center; font-size: 13px; color: #4a5058; user-select: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .13s, border-color .13s, color .13s;
}
.ww-fl .ww-kao:hover { background: rgba(65,131,196,.1); border-color: rgba(65,131,196,.4); color: #3a72ac; }
body.dark .ww-fl .emotion-box.ww-fl-emotion { background: #2b2f34; border-color: rgba(255,255,255,.08); }
body.dark .ww-fl .ww-emo-tab { background: rgba(255,255,255,.06); color: #c2c7ce; }
body.dark .ww-fl .ww-kao { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); color: #c2c7ce; }

.ww-fl .ww-fl-send-ico { width: 17px; height: 17px; }


/* 2G-06Q: 父主题可见上传按钮已在根上取消(add_upload_tips 只注入 display:none 的文件输入),
   无需再用 CSS 去藏。上传由工具栏 .ww-fl-upload 触发隐藏输入。 */
.ww-fl #upload-img-show { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 2px; }
.ww-fl #upload-img-show .upload-image-preview { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; border: 1px solid rgba(0,0,0,.08); cursor: pointer; }


/* ww(toolbar btn cursor+align): toolbar buttons always show pointer (emote wrongly showed not-allowed);
   upload+emote icons pixel-identical vertical centre. Only the two icon buttons (direct children of the
   toolbar), so the B/I/quote text buttons keep their normal line-height. */
.ww-fl .ww-fl-toolbar .ww-fl-tool { cursor: url(/wp-content/themes/Fioritura/assets/cursor/pointer.cur), pointer; line-height: 0; }
.ww-fl #emotion-toggle .emotion-toggle-off, .ww-fl #emotion-toggle .emotion-toggle-on { display: flex; align-items: center; justify-content: center; line-height: 0; height: auto; }


/* reply button (ROOT, all comments): the parent theme floats .comment-reply-link:right — a float is out
   of flow, so the following nested-reply <ul class="children"> rode up under it and the button overlapped
   the child card. Fix: actions is a flex row ending right (flex items ignore float => button back in flow,
   reserves its height), and the nested list clears both so it always starts below. */
.ww-fl .ww-fl-c-actions { display: flex; justify-content: flex-end; margin-top: 8px; }
.ww-fl .ww-fl-c-actions .comment-reply-link { float: none; margin: 0; }
.ww-fl .comments .commentwrap .children { clear: both; }


/* ww(reply-form polish): (2) smaller placeholder so long bilingual hints don't overflow the narrower
   fields in reply mode; (3) mail-notify pinned to the LEFT of the submit row (BiuBiuBiu stays right);
   (4) upload/emote layout is handled in ww(toolbar v2) below. */
.ww-fl .ww-fl-identity .ww-fl-field input::placeholder { font-size: 12px; opacity: .7; }
.ww-fl .form-submit.ww-fl-actions .ww-fl-mailnotify { margin: 0; }


/* ww(toolbar v2): MD marks + emote share one box with a thin divider between them; the image-upload is a
   standalone, slightly larger button. All icons are 20px with flex:none so they never shrink again. */
.ww-fl .ww-fl-md-sep { width: 1px; height: 20px; background: rgba(0,0,0,.13); margin: 0 5px; align-self: center; flex: none; }
.ww-fl .ww-fl-toolbar > .ww-fl-upload { width: 38px; height: 38px; padding: 3px; background: rgba(0,0,0,.04); border-radius: 12px; position: relative; }
.ww-fl .ww-fl-toolbar > .ww-fl-upload:hover { background: rgba(65,131,196,.14); }
.ww-fl .ww-fl-upload .ww-fl-ico { width: 18px; height: 18px; }
body.dark .ww-fl .ww-fl-md-sep { background: rgba(255,255,255,.15); }
body.dark .ww-fl .ww-fl-toolbar > .ww-fl-upload { background: rgba(255,255,255,.06); }


/* ww(checkbox center): the parent .siren-checkbox-radioInput has margin-top:-7px (for its old vertical
   checkbox list), which shoved the box to the label's top-left. Zero it + center inside the inline-flex
   label so the tick sits in the middle of "Notify me ｜ 回复通知". */
.ww-fl .ww-fl-check .siren-checkbox-radioInput { margin: 0; vertical-align: middle; flex: none; }
.ww-fl .ww-fl-check .ww-fl-check-text { line-height: 1.2; }


/* ww(emote height + md icon size): (1) parent #emotion-toggle has margin-bottom:5px (for the article
   <p> version) — in our align-items:center flex box that shoves the button ~2.5px up. Zero it so the
   emote sits level with the other buttons. (2) MD-box icons (link + emote) down to 18px so they match
   the ~14px text glyphs (B/I) instead of looking oversized. Standalone upload keeps its 24px. */
.ww-fl #emotion-toggle { margin: 0; }
.ww-fl .ww-fl-md .ww-fl-tool .ww-fl-ico, .ww-fl .ww-fl-md .ww-fl-tool > svg { width: 18px; height: 18px; }


/* ww(upload tooltip): a small, calm hover bubble telling users they can upload a LOCAL image. Fades in
   after a 0.35s delay (not jumpy), pointer-events:none (never blocks the click), bilingual + cute. */
.ww-fl .ww-fl-upload { position: relative; }
.ww-fl .ww-fl-upload::after {
    content: attr(data-tip); position: absolute; bottom: calc(100% + 9px); left: 50%;
    transform: translateX(-50%) translateY(4px); white-space: nowrap;
    background: rgba(45,50,60,.95); color: #fff; font-size: 12px; padding: 6px 11px; border-radius: 9px;
    box-shadow: 0 6px 18px -6px rgba(0,0,0,.35); opacity: 0; pointer-events: none;
    transition: opacity .2s ease, transform .2s ease; z-index: 30;
}
.ww-fl .ww-fl-upload::before {
    content: ""; position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%);
    border: 5px solid transparent; border-top-color: rgba(45,50,60,.95); opacity: 0; pointer-events: none;
    transition: opacity .2s ease; z-index: 30;
}
.ww-fl .ww-fl-upload:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); transition-delay: .35s; }
.ww-fl .ww-fl-upload:hover::before { opacity: 1; transition-delay: .35s; }
@media (max-width: 600px) { .ww-fl .ww-fl-upload::after { white-space: normal; width: 160px; text-align: center; } }

/* ============================================================================
 * 2G-05N /link/ 友链 — 独立类名 .ww-friends/.ww-fr-*(不复用父 .links)。单块干净,零 !important。
 * 悬浮毛玻璃底 + 中性配色 + 右下音符水印 + 显式3列(原版排法) + 头像 hover 旋转 + 原版卡内排版. */
.ww-friends {
    position: relative; overflow: hidden;
    background: rgba(255,255,255,.42);
    -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
    border: 1px solid rgba(255,255,255,.55); border-radius: 20px;
    box-shadow: 0 18px 44px -20px rgba(40,42,60,.42);
    padding: 24px 30px 30px; max-width: 920px; margin: 30px auto 48px; box-sizing: border-box;
    font-family: "Noto Serif SC","Source Han Serif SC","Songti SC","STSong","SimSun",serif;
}
.ww-friends::after {   /* 右下角音符水印(保留) */
    content:""; position:absolute; right:10px; bottom:14px; width:132px; height:132px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v10.55A4 4 0 1 0 14 17V7h4V3z' fill='%238b93a6'/%3E%3C/svg%3E") no-repeat center/contain; opacity:.10; transform:rotate(-8deg); pointer-events:none;
}
.ww-fr-gtitle { position:relative; z-index:1; color:#3f4250; font-size:17px; font-weight:600; margin:24px 0 4px; }
.ww-fr-gtitle:first-child { margin-top:4px; }
.ww-fr-gtitle span { padding-left:11px; border-left:3px solid #b23a2e; }
.ww-fr-gdesc { position:relative; z-index:1; color:#828795; font-size:13px; margin:0 0 14px; padding-left:13px; }
.ww-fr-list { position:relative; z-index:1; display:grid; grid-template-columns: repeat(3, 1fr);
    gap:16px; list-style:none; padding:0; margin:0; }
.ww-fr-list li { margin:0; padding:0; list-style:none; min-width:0; }
.ww-fr-card {
    display:block; position:relative; height:100%; min-width:0; box-sizing:border-box;
    padding:15px 24px; border:1px solid rgba(255,255,255,.6); border-radius:14px;
    background:rgba(255,255,255,.66); box-shadow:0 4px 16px -9px rgba(40,42,60,.32);
    text-decoration:none; overflow:hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ww-fr-card:hover { transform:translateY(-4px); background:rgba(255,255,255,.82); border-color:rgba(178,58,46,.5); box-shadow:0 16px 32px -12px rgba(150,55,45,.34), 0 0 0 1.5px rgba(178,58,46,.32); }
.ww-fr-avatar { float:right; width:60px; height:60px; border-radius:50%; object-fit:cover; margin:2px 0 16px 14px;
    box-shadow:0 2px 8px rgba(0,0,0,.16); transition: transform 1s ease; }
.ww-fr-card:hover .ww-fr-avatar { transform: rotate(360deg); }
.ww-fr-name { display:block; color:#33353f; font-weight:600; font-size:16px; padding-bottom:8px; margin-right:74px;
    line-height:1.35; overflow-wrap:break-word; word-break:break-word; }
.ww-fr-card:hover .ww-fr-name { color:#b23a2e; }
.ww-fr-desc { display:block; clear:both; color:#828795; font-size:13px; border-top:1px dashed rgba(60,65,90,.2);
    padding-top:9px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:860px){ .ww-fr-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width:560px){
    .ww-friends { padding:18px 14px 22px; margin:20px auto 34px; border-radius:16px; }
    .ww-fr-list { grid-template-columns: 1fr; gap:12px; }
    .ww-fr-card { padding:13px 18px; }
    .ww-fr-name { margin-right:70px; }
}
/* ============================================================================
 * 2G-05P /link/ 留言板 = 卡通图钉便签卡(慵懒随意版)。顶层留言=纸便签(纸感+浮影+每条倾斜不一);
 * 图钉=卡通 SVG,4色散落不同位置+各转不同角度 -> 不再一溜红。回复=简洁缩进子卡(不倾斜不钉)。
 * 倾斜只在 .ww-fl-c-row(回复 ul 是其兄弟不被带歪);卡间距加大避免与回复按钮/上条碰撞。
 * 另:留言区(#respond 表单)独立成板,与留言板分开不共底. */
body.page-id-354 .moe-separator h2 .ww-mb-sub { font-size:.6em; font-weight:500; color:#b0a58f; letter-spacing:1px; margin-left:7px; }
body.page-id-354 .ww-fl .ww-fl-c-main { position:relative; background:none; border:none; box-shadow:none; padding:0; margin:32px 0 52px; list-style:none; }
body.page-id-354 .ww-fl .ww-fl-c-main > .ww-fl-c-row {
    position:relative; z-index:1; display:flex; gap:14px; align-items:flex-start;
    background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 42%), #fffdf3;
    border:1px solid rgba(120,100,55,.16); border-radius:6px; padding:18px 22px 16px;
    box-shadow:0 12px 24px -13px rgba(60,48,25,.5), 0 2px 5px rgba(0,0,0,.05);
    transform: rotate(-1deg); transition: transform .22s ease, box-shadow .22s ease;
}
body.page-id-354 .ww-fl .ww-fl-c-main:nth-child(4n+1) > .ww-fl-c-row { transform: rotate(-1.5deg); }
body.page-id-354 .ww-fl .ww-fl-c-main:nth-child(4n+1)::before { left:22%; background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 26'><path d='M12 14 L12 24' stroke='%23999999' stroke-width='1.8' stroke-linecap='round'/><circle cx='12' cy='9' r='7.4' fill='%23e2574c' stroke='%233a3436' stroke-width='1.4'/><ellipse cx='9.2' cy='6.2' rx='2.3' ry='1.6' fill='%23ffffff' opacity='0.6' transform='rotate(-20 9.2 6.2)'/></svg>") no-repeat center/contain; transform: rotate(-9deg); }
body.page-id-354 .ww-fl .ww-fl-c-main:nth-child(4n+2) > .ww-fl-c-row { transform: rotate(1.3deg); }
body.page-id-354 .ww-fl .ww-fl-c-main:nth-child(4n+2)::before { left:78%; background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 26'><path d='M12 14 L12 24' stroke='%23999999' stroke-width='1.8' stroke-linecap='round'/><circle cx='12' cy='9' r='7.4' fill='%233fae9f' stroke='%233a3436' stroke-width='1.4'/><ellipse cx='9.2' cy='6.2' rx='2.3' ry='1.6' fill='%23ffffff' opacity='0.6' transform='rotate(-20 9.2 6.2)'/></svg>") no-repeat center/contain; transform: rotate(8deg); }
body.page-id-354 .ww-fl .ww-fl-c-main:nth-child(4n+3) > .ww-fl-c-row { transform: rotate(-0.7deg); }
body.page-id-354 .ww-fl .ww-fl-c-main:nth-child(4n+3)::before { left:41%; background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 26'><path d='M12 14 L12 24' stroke='%23999999' stroke-width='1.8' stroke-linecap='round'/><circle cx='12' cy='9' r='7.4' fill='%23edb84a' stroke='%233a3436' stroke-width='1.4'/><ellipse cx='9.2' cy='6.2' rx='2.3' ry='1.6' fill='%23ffffff' opacity='0.6' transform='rotate(-20 9.2 6.2)'/></svg>") no-repeat center/contain; transform: rotate(-4deg); }
body.page-id-354 .ww-fl .ww-fl-c-main:nth-child(4n) > .ww-fl-c-row { transform: rotate(1.7deg); }
body.page-id-354 .ww-fl .ww-fl-c-main:nth-child(4n)::before { left:64%; background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 26'><path d='M12 14 L12 24' stroke='%23999999' stroke-width='1.8' stroke-linecap='round'/><circle cx='12' cy='9' r='7.4' fill='%237a8fd6' stroke='%233a3436' stroke-width='1.4'/><ellipse cx='9.2' cy='6.2' rx='2.3' ry='1.6' fill='%23ffffff' opacity='0.6' transform='rotate(-20 9.2 6.2)'/></svg>") no-repeat center/contain; transform: rotate(11deg); }
body.page-id-354 .ww-fl .ww-fl-c-main > .ww-fl-c-row:hover { transform: rotate(0deg) translateY(-3px); z-index:2; box-shadow:0 18px 32px -12px rgba(60,48,25,.52), 0 2px 6px rgba(0,0,0,.06); }
body.page-id-354 .ww-fl .ww-fl-c-main > .ww-fl-c-row .ww-fl-c-name { color:#3a352c; }
body.page-id-354 .ww-fl .ww-fl-c-main > .ww-fl-c-row .ww-fl-c-content { color:#4a453b; }
body.page-id-354 .ww-fl .ww-fl-c-main > .ww-fl-c-row .ww-fl-c-time { color:#ab9d82; }
/* 卡通图钉(nth 覆盖颜色/位置/角度);无 leg */
body.page-id-354 .ww-fl .ww-fl-c-main::before { content:""; position:absolute; top:3px; left:50%; margin-left:-10px; width:20px; height:22px; z-index:3; filter: drop-shadow(0 2px 2px rgba(0,0,0,.26)); }
body.page-id-354 .ww-fl .ww-fl-c-main::after { content:none; }
/* 回复:缩进虚线 + 简洁子卡 */
body.page-id-354 .ww-fl ul.children.ww-fl-replies { margin:16px 0 0 26px; padding-left:20px; border-left:2px dashed rgba(120,100,55,.28); list-style:none; }
body.page-id-354 .ww-fl .ww-fl-c-reply { position:relative; background:none; border:none; box-shadow:none; padding:0; margin:0 0 14px; }
body.page-id-354 .ww-fl .ww-fl-c-reply::before, body.page-id-354 .ww-fl .ww-fl-c-reply::after { content:none; display:none; }
body.page-id-354 .ww-fl .ww-fl-c-reply > .ww-fl-c-row { transform:none; background:rgba(255,255,255,.74); border:1px solid rgba(0,0,0,.06); border-radius:10px; padding:12px 16px; box-shadow:0 3px 10px -7px rgba(40,40,50,.3); }
body.page-id-354 .ww-fl .ww-fl-c-main > .ww-fl-toggle { margin: 15px 0 4px 6px; }
/* 留言区(表单)独立成板,与留言板分开;两边更宽(近满内容宽) */
body.page-id-354 .ww-fl #respond.comment-respond, body.page-id-354 .ww-fl .comment-respond {
    position:relative; margin:48px auto 0; padding:24px 30px 28px; max-width:100%;
    background: rgba(255,255,255,.6); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
    border:1px solid rgba(255,255,255,.55); border-radius:18px; box-shadow:0 16px 40px -20px rgba(40,42,60,.42);
}
/* 小屏:去倾斜、收内边距/缩进;图钉散落保留 */
@media (max-width: 560px) {
    body.page-id-354 .ww-fl .ww-fl-c-main { margin: 22px 0 34px; }
    body.page-id-354 .ww-fl .ww-fl-c-main > .ww-fl-c-row,
    body.page-id-354 .ww-fl .ww-fl-c-main:nth-child(4n+1) > .ww-fl-c-row,
    body.page-id-354 .ww-fl .ww-fl-c-main:nth-child(4n+2) > .ww-fl-c-row,
    body.page-id-354 .ww-fl .ww-fl-c-main:nth-child(4n+3) > .ww-fl-c-row,
    body.page-id-354 .ww-fl .ww-fl-c-main:nth-child(4n) > .ww-fl-c-row { transform: none; padding: 14px 15px 12px; }
    body.page-id-354 .ww-fl .ww-fl-c-main > .ww-fl-c-row:hover { transform: translateY(-2px); }
    body.page-id-354 .ww-fl ul.children.ww-fl-replies { margin: 12px 0 0 10px; padding-left: 12px; }
    body.page-id-354 .ww-fl .ww-fl-c-reply > .ww-fl-c-row { padding: 11px 13px; }
    body.page-id-354 .ww-fl #respond.comment-respond, body.page-id-354 .ww-fl .comment-respond { padding:18px 16px 20px; margin-top:34px; }
}

/* 2G-05R 留言浮动标签(根治版:decorate.php 的橙色 !important 已在源头删除,这里无需 !important)。
   保留飘升效果、改米底朱红;并给输入框加顶部内边距 -> 文字永远在标签下方,彻底不挡正文. */
body.page-id-354 .ww-fl .ww-fl-textarea { padding-top: 62px; }
body.page-id-354 .ww-fl .commentbody:focus { border-color: rgba(178,58,46,.5); }
body.page-id-354 .ww-fl .commentbody:not(:placeholder-shown) ~ .input-label,
body.page-id-354 .ww-fl .commentbody:focus ~ .input-label {
    color: #b23a2e;
    background-color: #fdf6e6;
    border: 1px solid rgba(178,58,46,.22);
    border-radius: 6px;
    padding: 3px 10px;
    box-shadow: 0 4px 10px -4px rgba(120,60,40,.28);
    transform: scale(.82) translate(-2px, -14px);
}

/* 提交特效:刚发的留言(便签)从下方表单飞上来落定 + 图钉扎进纸面 */
@keyframes ww-note-drop { 0%{opacity:0;transform:translateY(48px) scale(.86);} 55%{opacity:1;} 100%{opacity:1;transform:translateY(0) scale(1);} }
@keyframes ww-pin-stab { 0%{opacity:0;transform:translateY(-16px) scale(1.6);} 70%{opacity:1;transform:translateY(2px) scale(.94);} 100%{opacity:1;transform:translateY(0) scale(1);} }
/* 飞入动画泛化到任意刚发布节点(留言板顶层/回复 + 文章评论/回复);图钉 ::before 仍仅留言板顶层 */
.ww-fl .ww-fl-c.ww-just-posted { animation: ww-note-drop .6s cubic-bezier(.34,1.4,.5,1) both; }
body.page-id-354 .ww-fl .ww-fl-c-main.ww-just-posted::before { animation: ww-pin-stab .5s .32s ease both; }
@media (prefers-reduced-motion: reduce) { .ww-fl .ww-fl-c.ww-just-posted, body.page-id-354 .ww-fl .ww-fl-c-main.ww-just-posted::before { animation: none; } }

/* 上传后的缩略图预览(表单内,提交前可见) */
.ww-fl .ww-fl-upload-show { display:flex; flex-wrap:wrap; gap:10px; margin:12px 2px 0; }
.ww-fl .ww-fl-upload-show:empty { display:none; }
.ww-fl .ww-fl-upload-show .upload-image-preview { width:74px; height:74px; object-fit:cover; border-radius:10px; border:1px solid rgba(0,0,0,.12); box-shadow:0 4px 12px -7px rgba(0,0,0,.45); cursor:zoom-in; transition:transform .15s ease; background:rgba(0,0,0,.03); }
.ww-fl .ww-fl-upload-show .upload-image-preview:hover { transform:scale(1.07); }

/* 草稿已保存提示(邮箱风,停止打字后闪现于工具栏右侧) */
.ww-fl .ww-fl-toolbar .ww-draft-status { margin-left:auto; align-self:center; font-size:12px; color:#9a9384; white-space:nowrap; opacity:0; transition:opacity .3s ease; pointer-events:none; }
.ww-fl .ww-draft-status { display:inline-block; font-size:12px; color:#9a9384; margin:6px 4px 0; opacity:0; transition:opacity .3s ease; pointer-events:none; }
.ww-fl .ww-draft-status.show { opacity:1; }