#claimEntry {
        color: inherit;
        text-decoration: underline;
        text-decoration-color: var(--link-line);
    }
    #claimEntry:hover {
        color: var(--link);
        text-decoration-color: var(--link);
    }
    /* fonts */

    /* vars */
    :root {
        --bg-a: #ffffff;
        --bg-b: #b3e5fc;
        --bg-c: #ffffff;
        --bg-photo: url(/images/odbg.webp);
        --bg-photo-m: url(/images/odbg-mob.webp);
        --bg-veil: linear-gradient(180deg, rgba(255,255,255,calc(.62 * var(--pk-veil,1))) 0%, rgba(255,255,255,calc(.34 * var(--pk-veil,1))) 42%, rgba(255,255,255,calc(.12 * var(--pk-veil,1))) 74%, rgba(255,255,255,0) 100%);
        --bg-grad: var(--bg-veil) left top / 100% 100% no-repeat fixed, var(--bg-photo) left bottom / cover no-repeat fixed, linear-gradient(135deg, var(--bg-a) 0%, var(--bg-b) 100%);
        --bg-grad-m: var(--bg-veil) left top / 100% 100% no-repeat fixed, var(--bg-photo-m) left bottom / cover no-repeat fixed, linear-gradient(135deg, var(--bg-a) 0%, var(--bg-b) 100%);
        --bg-end: #b3e5fc;
        --bg-canvas: #e5f6fe;
        --fg: #0d1b2a;
        --fg2: #2d4059;
        --fg3: rgba(0,0,0,.55);
        --muted: rgba(0,0,0,.5);
        --muted2: rgba(0,0,0,.55);
        --muted3: #666;
        --ph: rgba(0,0,0,.4);
        --fg-ver: #9aa4b0;
        --link: #0088ff;
        --link-line: rgba(0,0,0,.15);
        --link-soft: #5c9fd6;
        --link-soft-bg: rgba(0,136,255,.08);
        --focus: #0088ff;
        --panel-bg: rgba(255,255,255,.6);
        --panel-bd: rgba(255,255,255,.8);
        --card-bg: rgba(255,255,255,.6);
        --card-bd: rgba(255,255,255,.8);
        --reply-bg: rgba(255,255,255,.7);
        --reply-bd: rgba(0,0,0,.05);
        --replies-bar: rgba(0,0,0,.22);
        --input-bg: rgba(255,255,255,.8);
        --input-bg2: rgba(255,255,255,.9);
        --input-bd: rgba(0,0,0,.1);
        --input-bd2: rgba(0,0,0,.15);
        --ro-bg: rgba(0,0,0,.04);
        --ro-fg: rgba(0,0,0,.55);
        --chip-bg: rgba(255,255,255,.7);
        --chip-bg-h: #fff;
        --chip-bd: rgba(0,0,0,.14);
        --chip-bd-dash: 1px dashed rgba(0,0,0,.2);
        --chip-act-bg: #0d1b2a;
        --chip-act-bd: #0d1b2a;
        --chip-act-fg: #fff;
        --note-bg: rgba(255,255,255,.5);
        --note-bd: rgba(0,136,255,.5);
        --tip-bg: rgba(255,255,255,.4);
        --tip-bd: rgba(0,136,255,.4);
        --gold-bd: rgba(201,169,106,.7);
        --btn-bg: #0d1b2a;
        --btn-fg: #fff;
        --btn-bg-h: #0088ff;
        --btn2-bg: rgba(0,0,0,.06);
        --btn2-bg-h: rgba(0,0,0,.1);
        --ok: #2e7d32;
        --err: #d32f2f;
        --err-bd: rgba(211,47,47,.6);
        --bar-pin: #C9A96A;
        --card-pin-bg: rgba(255,250,240,.75);
        --reply-pin-bg: rgba(255,250,240,.7);
        --bar-adm: #5aa0ff;
        --card-adm-bg: rgba(230,244,255,.85);
        --reply-adm-bg: rgba(230,244,255,.8);
        --card-feat-bg: rgba(230,244,255,.85);
        --reply-feat-bg: rgba(230,244,255,.8);
        --badge-pin-fg: #8B6F3E;
        --badge-pin-bg: rgba(201,169,106,.25);
        --badge-adm-fg: rgba(22,32,52,.5);
        --badge-adm-bg: rgba(255,255,255,.92);
        --badge-adm-shadow: rgba(255,255,255,.5);
        --mist-grad: linear-gradient(180deg,#ff2d2d,#ff9500,#ffe600,#25e6a0,#2f9bff,#8a5cff,#ff3ba7,#ff2d2d);
        --rgb-edge: linear-gradient(180deg,#ff0000,#ff8800,#ffff00,#00ff00,#0088ff,#8800ff,#ff00ff,#ff0000);
        --wm: rgba(45,64,89,.22);
        --mask: rgba(0,0,0,.4);
        --modal-bg: #fff;
        --modal-sh: 0 20px 60px rgba(0,0,0,.25);
        --sb: rgba(0,0,0,.2);
        --sb-thumb: rgba(0,0,0,.18);
        --sh1: 0 1px 3px rgba(0,0,0,.1);
        --sh2: 0 3px 8px rgba(0,0,0,.14);
        --bgopt0: #ffffff;
        --bgopt-green: rgba(120,200,140,.5);
        --bgopt-green-c: rgba(120,200,140,.35);
        --bgopt-pink: rgba(250,160,195,.5);
        --bgopt-pink-c: rgba(250,160,195,.35);
        --bgopt-purple: rgba(165,140,235,.5);
        --bgopt-purple-c: rgba(165,140,235,.35);
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }
    /* zt */
    html { scrollbar-width: thin; scrollbar-color: rgba(120,140,170,.45) var(--bg-b); }
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: var(--bg-b); }
    ::-webkit-scrollbar-thumb { background: rgba(120,140,170,.45); border-radius: 0; }
    ::-webkit-scrollbar-thumb:hover { background: rgba(120,140,170,.65); }
    canvas.zt-snow { position: fixed; top: -70px; left: 0; width: 100%; height: calc(100% + 190px); height: calc(100lvh + 190px); z-index: 2147483000; pointer-events: none; }
    body {
        font-family: 'WenYuanS-CJK', 'WenYuanS-Latin', 'PingFang SC', 'Microsoft YaHei', sans-serif;
        background: var(--bg-grad);
        background-color: var(--bg-canvas);
        min-height: 100vh;
        padding: 40px 20px;
        color: var(--fg);
        font-synthesis: none;
    }
    @media (max-width: 560px) {
        body { background: var(--bg-grad-m); background-color: var(--bg-canvas); }
    }
    .wrap { max-width: 1400px; margin: 0 auto; }
        /* desktop */
        @media (hover: hover) and (pointer: fine) { body { zoom: 1.14; } .wrap { max-width: 1228px; } }
        .site-ver { position: fixed; top: 8px; left: 10px; z-index: 10; font-size: 11px; line-height: 1; color: var(--fg-ver); opacity: .6; pointer-events: none; user-select: none; letter-spacing: .02em; }

    .page-head {
        display: flex;
        align-items: baseline;
        gap: 16px;
        margin-bottom: 24px;
    }
    .page-head h1 { font-family: 'WenYuanS-CJK', 'WenYuanS-Latin', 'PingFang SC', 'Microsoft YaHei', sans-serif; font-size: 28px; font-weight: 700; margin: 0; }

    .back { display: inline-block; margin-bottom: 20px; color: var(--fg); text-decoration: none; font-size: 14px; font-family: 'WenYuanS-CJK', 'WenYuanS-Latin', 'PingFang SC', 'Microsoft YaHei', sans-serif; font-weight: 300; }
    .back:hover { text-decoration: underline; }

    .layout { display: flex; gap: 22px; align-items: flex-start; }
    .layout .left { flex: 0 0 360px; max-width: 360px; }
    .layout .col-mid { flex: 0 0 300px; max-width: 300px; }
    .layout .right { flex: 1; min-width: 0; }
    /* list-scroll */
    #commentList { max-height: 72vh; overflow-y: auto; padding-right: 6px; scrollbar-width: thin; scrollbar-color: var(--sb) transparent; }
    #commentList::-webkit-scrollbar { width: 8px; }
    #commentList::-webkit-scrollbar-thumb { background: var(--sb-thumb); }
    #commentList::-webkit-scrollbar-track { background: transparent; }

    /* md */
    @media (max-width: 1180px), (pointer: coarse) {
        .wrap { max-width: 1100px; }   /* md2 */
        .layout { flex-direction: row; flex-wrap: wrap; gap: 22px; }
        .layout .left { flex: 1 1 340px; max-width: 100%; position: static; }
        .layout .col-mid { flex: 1 1 300px; max-width: 100%; position: static; }
        .layout .right { flex: 1 1 100%; min-width: 0; position: static; }
        #commentList { max-height: none; overflow: visible; }
    }
    /* sm */
    @media (max-width: 640px) {
        .layout { flex-direction: column; gap: 20px; }
        .layout .left { flex: none; width: 100%; }
        .layout .col-mid { flex: none; width: 100%; }
        .layout .right { flex: none; width: 100%; }
    }

    .panel {
        background: var(--panel-bg);
        backdrop-filter: blur(12px);
        border: 1px solid var(--panel-bd);
        padding: 20px;
    }
    .panel-title {
        font-family: 'WenYuanS-CJK', 'WenYuanS-Latin', 'PingFang SC', 'Microsoft YaHei', sans-serif;
        font-size: 16px;
        font-weight: 600;
        color: var(--fg);
        letter-spacing: 0.5px;
    }

    .panel-head {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        margin-bottom: 14px;
    }
    .panel-actions {
        display: flex;
        gap: 14px;
    }
    .admin-entry {
        font-family: 'WenYuanS-CJK', 'WenYuanS-Latin', 'PingFang SC', 'Microsoft YaHei', sans-serif;
        font-weight: 300;
        font-size: 13px;
        color: var(--fg);
        text-decoration: none;
        opacity: 0.55;
        transition: opacity 0.2s;
        cursor: pointer;
        white-space: nowrap;
    }
    .admin-entry:hover { opacity: 1; text-decoration: underline; }

    .form input, .form textarea {
        width: 100%;
        padding: 10px 12px;
        font-size: 14px;
        font-family: inherit;
        color: var(--fg);           /* dark-fc */
        border: 1px solid var(--input-bd);
        background: var(--input-bg);
        margin-bottom: 12px;
        outline: none;
    }
    .form input:focus, .form textarea:focus { border-color: var(--focus); }
    .form textarea { resize: vertical; min-height: 110px; line-height: 1.7; }
    .ta-wrap { position: relative; background: var(--input-bg2); border-radius: 0; }
    .ta-mirror {
        position: absolute; top: 0; left: 0; right: 0; bottom: 0;
        padding: 10px 12px; font-size: 14px; line-height: 1.7;
        white-space: pre-wrap; word-break: break-word; overflow: hidden;
        pointer-events: none; border: 1px solid transparent; border-radius: 0;
        color: var(--fg); background: transparent; z-index: 0;
    }
    /* ta-def */
    .form textarea { color: var(--fg); caret-color: var(--fg); background: transparent; position: relative; z-index: 1; }
    .ta-wrap.mirror-on textarea { color: transparent; }
    .ta-wrap.mirror-on textarea::placeholder { color: transparent; }
    .ta-mirror.is-placeholder { color: var(--ph); }

    .nickname-wrap {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 6px;
    }
    .nickname-wrap input { flex: 1; margin-bottom: 0; }
    .nickname-wrap input[readonly] {
        background: var(--ro-bg);
        color: var(--ro-fg);
        cursor: not-allowed;
    }
    .nickname-wrap .change-nick {
        font-size: 12px;
        color: var(--link-soft);
        text-decoration: none;
        cursor: pointer;
        white-space: nowrap;
        padding: 4px 8px;
        border-radius: 0;
        transition: color 0.2s, background 0.2s;
        display: none;
    }
    .nickname-wrap .change-nick:hover {
        background: var(--link-soft-bg);
        text-decoration: underline;
    }
    .nickname-wrap .change-nick.show { display: inline-block; }

    .nickname-note {
        font-size: 12px;
        color: var(--muted);
        margin-bottom: 12px;
        padding: 6px 10px;
        background: var(--note-bg);
        border-left: 2px solid var(--note-bd);
        border-radius: 0;
        line-height: 1.5;
        display: none;
    }
    .nickname-note.show { display: block; }
    .nickname-note.warn {
        border-left-color: var(--err-bd);
        color: var(--err);
    }

    /* nsw */
    .nickname-switcher {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        margin-bottom: 8px;
    }
    .nickname-choice {
        padding: 5px 12px;
        font-size: 13px;
        border: 1px solid var(--input-bd2);
        background: var(--chip-bg);
        cursor: pointer;
        border-radius: 0;
        color: var(--fg);
        transition: all 0.2s;
        font-family: inherit;
        white-space: nowrap;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .nickname-choice:hover { background: var(--chip-bg-h); }
    .nickname-choice.active {
        border-color: var(--chip-act-bd);
        background: var(--chip-act-bg);
        color: var(--chip-act-fg);
    }

    /* nhis */
    .nickname-history {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        align-items: center;
        margin-bottom: 8px;
        font-size: 12px;
        color: var(--muted);
        line-height: 1.6;
    }
    .history-label { flex-shrink: 0; }
    .history-item {
        padding: 3px 10px;
        font-size: 12px;
        border: var(--chip-bd-dash);
        background: var(--note-bg);
        cursor: pointer;
        border-radius: 0;
        color: var(--fg);
        transition: all 0.2s;
        font-family: inherit;
        white-space: nowrap;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .history-item:hover {
        background: var(--chip-bg-h);
        border-color: var(--link);
        color: var(--link);
    }

    /* pfp */
    .prefix-picker {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        margin-bottom: 8px;
    }
    .prefix-choice {
        padding: 6px 15px 6px 13px;   /* octr */
        font-size: 13px;
        border: 1px solid var(--input-bd2);
        background: var(--chip-bg);
        cursor: pointer;
        border-radius: 0;
        color: var(--fg);
        font-family: 'BodoniModa', 'WenYuanS', serif;
        font-weight: 600;
        font-style: italic;
        transition: all 0.2s;
    }
    .prefix-choice:hover { background: var(--chip-bg-h); }
    .prefix-choice.active {
        border-color: var(--chip-act-bd);
        background: var(--chip-act-bg);
        color: var(--chip-act-fg);
    }
    .prefix-choice.prefix-add {
        padding-left: 14px; padding-right: 14px;   /* octr2 */
        color: var(--link-soft);
        border-style: dashed;
        font-style: normal;
        font-family: inherit;
        font-weight: normal;
        font-size: 12px;
    }

    /* wms */
    .wm-switch {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        color: var(--muted);
        letter-spacing: 0.5px;
        margin-bottom: 8px;
        cursor: pointer;
    }
    .form .wm-switch input[type="checkbox"] {
        -webkit-appearance: checkbox;
        appearance: auto;
        width: 14px;
        height: 14px;
        padding: 0;
        margin: 0;
        border: none;
        background: none;
        accent-color: var(--link);
        cursor: pointer;
        flex: none;
    }
    .prefix-input-wrap {
        margin-bottom: 6px;
    }
    .prefix-check { font-size: 12px; margin: 2px 0 6px; line-height: 1.5; }
    .prefix-check:empty { display: none; }
    .prefix-check.ok { color: var(--ok); }
    .prefix-check.err { color: var(--err); }
    .prefix-note {
        font-size: 12px;
        color: var(--muted);
        margin-bottom: 12px;
        padding: 6px 10px;
        background: var(--note-bg);
        border-left: 2px solid var(--gold-bd);
        border-radius: 0;
        line-height: 1.5;
    }

    .picker-label {
        font-size: 12px;
        color: var(--muted);
        margin-bottom: 6px;
        letter-spacing: 0.5px;
    }
    .font-picker { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
    .font-picker button {
        padding: 5px 10px;
        font-size: 12px;
        border: 1px solid var(--input-bd2);
        background: var(--chip-bg);
        cursor: pointer;
        transition: background 0.2s, border-color 0.2s;
        color: var(--fg);
        line-height: 1.4;
        font-family: inherit;
    }
    .font-picker button:hover { background: var(--chip-bg-h); }
    .font-picker button.active {
        border-color: var(--chip-act-bd);
        background: var(--chip-act-bg);
        color: var(--chip-act-fg);
    }

    #cnPicker button[data-font="wenyuan-light"] {
        font-family: 'FlyFlowerSong-CJK', 'CormorantInfant', 'PingFang SC', serif;
        font-weight: normal;
    }
    #cnPicker button[data-font="wenyuan-semibold"] {
        font-family: 'WenYuanS-CJK', 'CormorantInfant', 'PingFang SC', serif;
        font-weight: 600;
    }
    #cnPicker button[data-font="reunion"]     { font-family: 'ChillReunion', 'PingFang SC', sans-serif; }
    #cnPicker button[data-font="wenkai"]      { font-family: 'LXGWWenKai', 'PingFang SC', serif; }
    #cnPicker button[data-font="hcdht"]       { font-family: 'HCDHT', 'PingFang SC', sans-serif; }
    #cnPicker button[data-font="chillbitmap"] { font-family: 'ChillBitmap', 'PingFang SC', sans-serif; }

    /* lat-btn */
    #latinPicker button[data-font="wenyuan"]  { font-family: 'WenYuanS-Latin', 'WenYuanS-CJK', 'PingFang SC', serif; }
    #latinPicker button[data-font="cormorant"] { font-family: 'CormorantInfant', serif; }
    #latinPicker button[data-font="slabomod"] { font-family: 'SlaboMod', serif; }
    #latinPicker button[data-font="zhenkai"]  { font-family: 'LXGWZhenKaiSlab', serif; }
    #latinPicker button[data-font="garamond"]  { font-family: 'EBGaramond', serif; }
    #latinPicker button[data-font="bodoni"]   { font-family: 'BodoniModa', serif; }

    .font-tip {
        font-size: 12px;
        color: var(--muted2);
        line-height: 1.6;
        margin-bottom: 12px;
        padding: 8px 10px;
        background: var(--tip-bg);
        border-left: 2px solid var(--tip-bd);
    }
    /* bgp */
    .bg-picker { display: flex; gap: 10px; margin-bottom: 14px; }
    .bg-picker .bg-chip {
        position: relative;
        width: 62px; height: 44px;
        border: 1px solid var(--chip-bd);
        border-radius: 0;                 /* r */
        cursor: pointer; padding: 0; margin: 0;
        box-shadow: var(--sh1);
        background: var(--bgopt0);        /* bg0 */
        transition: transform .1s, box-shadow .15s;
    }
    /* bgp2 */
    .bg-picker .bg-chip::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 0;
        background: transparent;
    }
    .bg-picker .bg-chip[data-bg="green"]::after  { background: radial-gradient(120% 120% at 100% 100%, var(--bgopt-green), rgba(120,200,140,0) 62%); }
    .bg-picker .bg-chip[data-bg="pink"]::after   { background: radial-gradient(120% 120% at 100% 100%, var(--bgopt-pink), rgba(250,160,195,0) 62%); }
    .bg-picker .bg-chip[data-bg="purple"]::after { background: radial-gradient(120% 120% at 100% 100%, var(--bgopt-purple), rgba(165,140,235,0) 62%); }
    .bg-picker .bg-chip:hover { transform: translateY(-1px); box-shadow: var(--sh2); }
    .bg-picker .bg-chip.active { outline: 2px solid var(--link-soft); outline-offset: 2px; }

    /* stk */
    :root { --sticker-size: 120px; --stk-rows: 1; --stk-peek: 24px; --stk-fade-t: 14px; --stk-fade-b: 22px; }
    .stk {
        display: block;
        width: var(--sticker-size);
        height: auto;
        margin: 6px 0 2px;
    }
    html[data-block="ask"] .stk { outline: 1px solid rgba(120, 150, 190, .55); outline-offset: -1px; }
    .ta-mirror .stk { display: inline-block; vertical-align: middle; width: 56px; height: auto; margin: 0 2px; }
    .stk-picker {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-content: flex-start;
        margin-bottom: 14px;
        max-height: calc(var(--sticker-size) + var(--stk-peek));
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--stk-fade-t), #000 calc(100% - var(--stk-fade-b)), transparent 100%);
        mask-image: linear-gradient(to bottom, transparent 0, #000 var(--stk-fade-t), #000 calc(100% - var(--stk-fade-b)), transparent 100%);
        scrollbar-width: none;
        scrollbar-color: var(--link-soft) var(--bg-b);
        scrollbar-gutter: stable;
    }
    .stk-picker::-webkit-scrollbar { width: 0; height: 0; }
    .stk-th {
        flex: 0 0 calc((100% - 16px) / 3);
        width: calc((100% - 16px) / 3);
        height: auto;
        aspect-ratio: 1 / 1;
        padding: 0;
        box-sizing: border-box;
        border: 1px solid transparent;
        background: rgba(255, 255, 255, .6);
        cursor: pointer;
        border-radius: 0;
        -webkit-appearance: none;
        appearance: none;
    }
    .stk-th img { display: block; width: 100%; height: 100%; object-fit: contain; }
    @media (hover: hover) { .stk-th:hover { border-color: var(--link-soft); } }
    @media (max-width: 480px) { :root { --sticker-size: 96px; } }

    .form button[type="submit"] {
        width: 100%;
        display: block;
        line-height: 1.4;
        box-sizing: border-box;
        -webkit-appearance: none;
        appearance: none;
        text-align: center;
        letter-spacing: normal;
        padding: 10px 0;
        font-size: 14px;
        font-family: inherit;
        background: var(--btn-bg);
        color: var(--btn-fg);
        border: none;
        cursor: pointer;
        transition: background 0.2s;
    }
    .form button[type="submit"]:hover { background: var(--btn-bg-h); }
    .form button[type="submit"]:disabled { opacity: 0.5; cursor: not-allowed; }
    /* btnc */
    button { text-align: center; -webkit-appearance: none; appearance: none; }
    /* num */
    .num-up { font-style: normal; font-variation-settings: 'ital' 0; }
    .msg { font-size: 13px; margin-top: 8px; min-height: 18px; }
    .msg.err { color: var(--err); }
    .msg.ok { color: var(--ok); }
    .reply-msg { font-size: 12px; line-height: 1.6; margin-top: 6px; color: var(--err); }
    :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

    .comment {
        background: var(--card-bg);
        backdrop-filter: blur(12px);
        border: 1px solid var(--card-bd);
        padding: 16px 20px 40px;
        margin-bottom: 12px;
        position: relative;
    }
    /* bgopt */
    .comment.bg-green  { background: radial-gradient(120% 120% at 100% 100%, var(--bgopt-green-c), rgba(120,200,140,0) 62%), var(--bgopt0); }
    .comment.bg-pink   { background: radial-gradient(120% 120% at 100% 100%, var(--bgopt-pink-c), rgba(250,160,195,0) 62%), var(--bgopt0); }
    .comment.bg-purple { background: radial-gradient(120% 120% at 100% 100%, var(--bgopt-purple-c), rgba(165,140,235,0) 62%), var(--bgopt0); }
    /* bar */
    .comment.pinned:not(.featured) { border-left: 3px solid var(--bar-pin); background: var(--card-pin-bg); }
    /* adm */
    .comment.admin-posted:not(.featured) { border-left: 3px solid var(--bar-adm); background: var(--card-adm-bg); }
    /* feat */
    .comment.featured { background-color: var(--card-feat-bg); background-image: radial-gradient(130% 130% at 100% 100%, rgba(255,0,150,0.15), rgba(255,150,0,0.12) 16%, rgba(0,200,120,0.12) 32%, rgba(0,150,255,0.12) 50%, rgba(230,244,255,0) 70%); background-repeat: no-repeat; background-size: 160% 160%; background-position: 100% 100%; animation: featWave 10s ease-in-out infinite; }
    .comment.featured::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 3px;
        height: 100%;
        background: var(--rgb-edge);
        background-size: 100% 1200%;
        animation: rgbFlowEdge 50s ease-in-out infinite;
        pointer-events: none;
    }
    /* noft */
    html.no-feat .comment.featured { background-color: var(--card-bg); background-image: none; animation: none; }
    html.no-feat .comment .reply-item.featured { background-color: var(--reply-bg); background-image: none; animation: none; }
    html.no-feat .comment.featured::before { display: none; }
    html.no-feat .comment .reply-item.featured::before { display: none; }
    @media (prefers-reduced-motion: reduce) {
        .comment.featured,
        .comment .reply-item.featured,
        .comment::before,
        .comment .reply-item::before,
        .comment .pin-badge.feat,
        .comment .pin-badge.admin::before,
        .comment .pin-badge.admin::after { animation: none !important; }
    }
    html.no-feat .pin-badge.feat { display: none; }
    @keyframes rgbFlowEdge {
        0%   { background-position: 0% 0%; }
        8%   { background-position: 0% 3%; }
        22%  { background-position: 0% 18%; }
        35%  { background-position: 0% 30%; }
        48%  { background-position: 0% 50%; }
        63%  { background-position: 0% 68%; }
        78%  { background-position: 0% 82%; }
        90%  { background-position: 0% 93%; }
        100% { background-position: 0% 100%; }
    }
    /* badge */
    .comment .pin-badge {
        display: inline-block;
        font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
        font-size: 11px;
        /* badge-v */
        height: 16px;
        line-height: 16px;
        padding: 0 7px;
        color: var(--badge-pin-fg);
        background: var(--badge-pin-bg);
        border-radius: 0;
        margin-right: 6px;
        vertical-align: middle;   /* badge-v2 */
        position: relative;
        top: -1.5px;
    }
    .comment .pin-badge.feat {
        color: #fff;
        text-shadow: 0 1px 1px rgba(0,0,0,.4);
        background: linear-gradient(90deg, #ff5f6d, #ffc371, #47c7cc, #a56cff, #ff5f6d);
        background-size: 300% 100%;
        animation: featFlow 8s linear infinite;
    }
    @keyframes featFlow { to { background-position: 300% 0; } }
    @keyframes featWave {
        0%   { background-position: 100% 100%; }
        50%  { background-position: 45% 45%; }
        100% { background-position: 100% 100%; }
    }
    .comment .pin-badge.admin {
        position: relative;
        z-index: 0;
        overflow: hidden;
        border-radius: 0;
        color: var(--badge-adm-fg);
        -webkit-text-fill-color: var(--badge-adm-fg);
        text-shadow: 0 0.5px 0 var(--badge-adm-shadow);
        background: var(--badge-adm-bg);
        backdrop-filter: blur(6px) saturate(140%);
        -webkit-backdrop-filter: blur(6px) saturate(140%);
    }
    /* mist */
    .comment .pin-badge.admin::before,
    .comment .pin-badge.admin::after {
        content: '';
        position: absolute;
        z-index: -1;
        background: var(--mist-grad);
        background-size: 100% 800%;
        filter: blur(12px);
        opacity: .55;
        -webkit-mask-image: radial-gradient(75% 130% at 50% 50%, #000, rgba(0,0,0,.45) 55%, transparent 88%);
        mask-image: radial-gradient(75% 130% at 50% 50%, #000, rgba(0,0,0,.45) 55%, transparent 88%);
        animation: zakeWander 16s ease-in-out infinite, zakeMelt 56s linear infinite;
    }
    .comment .pin-badge.admin::before { left: 5%;  top: -20%; width: 55%; height: 140%; }
    .comment .pin-badge.admin::after  { left: 45%; top: -15%; width: 55%; height: 130%; animation-duration: 22s, 72s; animation-direction: reverse, normal; }
    /* mist2 */
    .comment:nth-child(4n)   .pin-badge.admin::before { animation-duration: 9s,  44s; }
    .comment:nth-child(4n)   .pin-badge.admin::after  { animation-duration: 13s, 60s; }
    .comment:nth-child(4n+1) .pin-badge.admin::before { animation-duration: 17s, 64s; }
    .comment:nth-child(4n+1) .pin-badge.admin::after  { animation-duration: 21s, 72s; }
    .comment:nth-child(4n+2) .pin-badge.admin::before { animation-duration: 27s, 80s; }
    .comment:nth-child(4n+2) .pin-badge.admin::after  { animation-duration: 32s, 88s; }
    .comment:nth-child(4n+3) .pin-badge.admin::before { animation-duration: 12s, 52s; }
    .comment:nth-child(4n+3) .pin-badge.admin::after  { animation-duration: 24s, 76s; }
    @keyframes zakeMelt { to { background-position: 0 800%; } }
    @keyframes zakeWander {
        0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
        30%  { transform: translate(120%, 55%) scale(1.5, .75) rotate(38deg); }
        60%  { transform: translate(-95%, -35%) scale(.75, 1.4) rotate(-32deg); }
        100% { transform: translate(0, 0) scale(1) rotate(0deg); }
    }
    .comment .head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 13px;
        margin-bottom: 6px;
        color: var(--fg2);
        font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        gap: 8px;
    }
    .comment .nick { font-weight: 700; }
    .comment .time { color: var(--fg3); margin-left: 8px; }
    .comment .actions { display: flex; gap: 4px; flex-shrink: 0; }
    .comment .body {
        font-size: 15px;
        line-height: 1.7;
        white-space: pre-wrap;
        word-break: break-word;
    }
    .comment .action-btn {
        background: none;
        border: none;
        color: var(--fg2);
        font-size: 12px;
        cursor: pointer;
        padding: 2px 6px;
        opacity: 0.6;
        transition: opacity 0.2s;
        font-family: inherit;
    }
    .comment .action-btn:hover { opacity: 1; text-decoration: underline; }
    .comment .action-btn.delete-btn { color: var(--err); }

    .watermark {
        position: absolute;
        right: 18px;
        bottom: 8px;
        font-family: 'ButlerFreeRmn', 'ButlerFree', serif;
        font-weight: normal;
        font-style: normal;
        font-size: 26px;
        letter-spacing: 1px;
        line-height: 1.4;
        padding-bottom: 6px;
        pointer-events: none;
        user-select: none;
        color: var(--wm);                     /* wm */
        text-shadow: none;
    }
    .reply-item .watermark {
        font-size: 18px;
        right: 14px;
        bottom: 6px;
        letter-spacing: 0.5px;
        padding-bottom: 4px;
    }

    .comment .replies {
        margin-top: 14px;
        padding-left: 20px;
        border-left: 2px solid var(--replies-bar);
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .comment .reply-item {
        background: var(--reply-bg);
        border: 1px solid var(--reply-bd);
        padding: 10px 14px 30px;
        border-radius: 0;
        position: relative;
    }
    .comment .reply-item.bg-green  { background: radial-gradient(120% 120% at 100% 100%, var(--bgopt-green-c), rgba(120,200,140,0) 62%), var(--bgopt0); }
    .comment .reply-item.bg-pink   { background: radial-gradient(120% 120% at 100% 100%, var(--bgopt-pink-c), rgba(250,160,195,0) 62%), var(--bgopt0); }
    .comment .reply-item.bg-purple { background: radial-gradient(120% 120% at 100% 100%, var(--bgopt-purple-c), rgba(165,140,235,0) 62%), var(--bgopt0); }
    /* rbar */
    .comment .reply-item.pinned:not(.featured) { border-left: 3px solid var(--bar-pin); background: var(--reply-pin-bg); }
    .comment .reply-item.admin-posted:not(.featured) { border-left: 3px solid var(--bar-adm); background: var(--reply-adm-bg); }
    .comment .reply-item.featured { background-color: var(--reply-feat-bg); background-image: radial-gradient(130% 130% at 100% 100%, rgba(255,0,150,0.15), rgba(255,150,0,0.12) 16%, rgba(0,200,120,0.12) 32%, rgba(0,150,255,0.12) 50%, rgba(230,244,255,0) 70%); background-repeat: no-repeat; background-size: 160% 160%; background-position: 100% 100%; animation: featWave 10s ease-in-out infinite; }
    .comment .reply-item.featured::before {
        content: '';
        position: absolute;
        left: 0; top: 0; width: 3px; height: 100%;
        background: var(--rgb-edge);
        background-size: 100% 1200%;
        animation: rgbFlowEdge 50s ease-in-out infinite;
        pointer-events: none;
    }
    .comment .reply-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
        margin-bottom: 4px;
        color: var(--fg2);
        gap: 8px;
    }
    .comment .reply-nick { font-weight: 700; }
    .comment .reply-time { color: var(--fg3); margin-left: 8px; }
    .comment .reply-body {
        font-size: 14px;
        line-height: 1.6;
        white-space: pre-wrap;
        word-break: break-word;
    }

    /* rcl */
    :root { --reply-clamp: 188px; --reply-fade: 30px; }
    .comment .replies.is-clamped {
        max-height: var(--reply-clamp);
        overflow: hidden;
        -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--reply-fade)), rgba(0, 0, 0, 0) 100%);
        mask-image: linear-gradient(to bottom, #000 calc(100% - var(--reply-fade)), rgba(0, 0, 0, 0) 100%);
    }
    .comment .reply-toggle-btn {
        background: none;
        border: none;
        color: var(--link);
        font-size: 12px;
        cursor: pointer;
        padding: 4px 8px;
        margin-top: 6px;
        align-self: flex-start;
        font-family: inherit;
        opacity: 0.8;
        transition: opacity 0.2s;
    }
    .comment .reply-toggle-btn:hover { opacity: 1; text-decoration: underline; }

    .comment .reply-form {
        margin-top: 12px;
        padding-left: 20px;
    }
    .comment .reply-nick-line {
        font-size: 12px;
        color: var(--muted3);
        margin-bottom: 6px;
    }
    .comment .reply-nick-line strong {
        color: var(--fg);
        font-weight: 600;
    }
    .comment .reply-form textarea {
        width: 100%;
        padding: 8px 10px;
        font-size: 13px;
        font-family: inherit;
        color: var(--fg);           /* dark-fc */
        border: 1px solid var(--input-bd);
        background: var(--input-bg2);
        resize: vertical;
        min-height: 60px;
        outline: none;
        margin-bottom: 6px;
        line-height: 1.6;
        transition: border-color 0.2s;
    }
    .comment .reply-form textarea:focus { border-color: var(--focus); }
    .comment .reply-form-actions { display: flex; gap: 8px; }
    .comment .reply-form-actions button {
        padding: 5px 14px;
        font-size: 12px;
        border: none;
        cursor: pointer;
        font-family: inherit;
        border-radius: 0;
        transition: background 0.2s;
    }
    .comment .reply-submit { background: var(--btn-bg); color: var(--btn-fg); }
    .comment .reply-submit:hover { background: var(--btn-bg-h); }
    .comment .reply-submit:disabled { opacity: 0.5; cursor: not-allowed; }
    .comment .reply-cancel { background: var(--btn2-bg); color: var(--fg); }
    .comment .reply-cancel:hover { background: var(--btn2-bg-h); }

    .empty { text-align: center; color: var(--fg3); padding: 40px; font-size: 14px; font-family: 'WenYuanS-CJK', 'WenYuanS-Latin', 'PingFang SC', 'Microsoft YaHei', sans-serif; font-weight: 400; }

    /* modal */
    .bug-modal {
        display: none;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: var(--mask);
        z-index: 10000;
        justify-content: center;
        align-items: center;
        padding: 20px;
    }
    .bug-modal.show { display: flex; }
    .bug-modal-content {
        background: var(--modal-bg);
        padding: 24px;
        max-width: 480px;
        width: 100%;
        box-shadow: var(--modal-sh);
    }
    .bug-modal-content h3 {
        font-family: 'WenYuanS-CJK', 'WenYuanS-Latin', 'PingFang SC', 'Microsoft YaHei', sans-serif;
        font-size: 18px;
        margin-bottom: 16px;
        font-weight: 700;
        color: var(--fg);
    }
    .bug-modal-content input,
    .bug-modal-content textarea {
        width: 100%;
        padding: 10px 12px;
        font-size: 14px;
        font-family: inherit;
        color: var(--fg);           /* dark-fc */
        border: 1px solid var(--input-bd2);
        margin-bottom: 12px;
        outline: none;
        background: var(--input-bg2);
    }
    .bug-modal-content input:focus,
    .bug-modal-content textarea:focus { border-color: var(--focus); }
    .bug-modal-content textarea {
        resize: vertical;
        min-height: 100px;
        line-height: 1.6;
    }
    .bug-modal-actions {
        display: flex;
        gap: 8px;
        justify-content: flex-end;
        margin-top: 4px;
    }
    .bug-modal-actions button {
        padding: 8px 20px;
        font-size: 14px;
        border: none;
        cursor: pointer;
        font-family: inherit;
        transition: background 0.2s;
    }
    .bug-modal-actions #bugCancel,
    .bug-modal-actions #claimCancel {
        background: var(--btn2-bg);
        color: var(--fg);
    }
    .bug-modal-actions #bugCancel:hover,
    .bug-modal-actions #claimCancel:hover { background: var(--btn2-bg-h); }
    .bug-modal-actions #bugSubmit,
    .bug-modal-actions #claimSubmit {
        background: var(--btn-bg);
        color: var(--btn-fg);
    }
    .bug-modal-actions #bugSubmit:hover,
    .bug-modal-actions #claimSubmit:hover { background: var(--btn-bg-h); }
    .bug-modal-actions button:disabled { opacity: 0.5; cursor: not-allowed; }
    .bug-modal-msg {
        font-size: 13px;
        margin-top: 10px;
        min-height: 18px;
        text-align: right;
    }
    .bug-modal-msg.err { color: var(--err); }
    .bug-modal-msg.ok { color: var(--ok); }

    /* hint */
    .picker-label, .font-tip, .prefix-note, .prefix-check, .nickname-note,
    .nickname-history, .history-label, .history-item, .nickname-wrap .change-nick,
    #formMsg, .bug-modal-msg, .bug-modal-content p, .reply-nick-line {
        font-family: 'WenYuanS-CJK', 'WenYuanS-Latin', 'PingFang SC', 'Microsoft YaHei', sans-serif;
        font-weight: 300;
    }

    /* ph */
    input::placeholder, textarea::placeholder {
        font-family: 'WenYuanS-CJK', 'WenYuanS-Latin', 'PingFang SC', 'Microsoft YaHei', sans-serif;
        font-weight: 300;
        color: var(--ph);
    }
    /* af */
    input:-webkit-autofill, textarea:-webkit-autofill {
        -webkit-text-fill-color: var(--fg);
        caret-color: var(--fg);
        transition: background-color 600000s 0s, color 600000s 0s;
    }

    /* btn */
    .form button[type="submit"],
    .comment .reply-form-actions button,
    .bug-modal-actions button {
        font-family: 'WenYuanS-CJK', 'WenYuanS-Latin', 'PingFang SC', 'Microsoft YaHei', sans-serif;
        font-weight: 600;
    }
    /* zq */
    .form input,
    .bug-modal-content input,
    .bug-modal-content textarea,
    .form input::placeholder,
    .bug-modal-content input::placeholder,
    .bug-modal-content textarea::placeholder {
        font-family: 'ZhuqueFangsong', 'WenYuanS-CJK', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    }

    @supports (-webkit-touch-callout: none) {
        body { min-height: 100dvh; }
        body::before { content:''; position:fixed; left:0; right:0; height:160px; top:-160px; z-index:-1; pointer-events:none; background:var(--bg-a); }
        body::after { content:''; position:fixed; left:0; right:0; height:160px; bottom:-160px; z-index:-1; pointer-events:none; background:var(--bg-end); }
    }