:root {
    font-family:Inter,"Segoe UI","Microsoft YaHei",sans-serif;
    color:#21333c;
    background:#f4f6f6;
    font-size:15px;
    --teal:#116c70;
    --muted:#6d7e85;
    --border:#e2e9e8
}
* {
    box-sizing:border-box
}
body {
    margin:0
}
a {
    color:var(--teal);
    text-decoration:none
}
button,input,select,textarea {
    font:inherit
}
button {
    cursor:pointer;
    border:0;
    background:none;
    color:inherit
}
button:disabled {
    opacity:.55;
    cursor:wait
}
button:focus-visible,a:focus-visible {
    outline:3px solid #49b6aa;
    outline-offset:3px
}
[hidden] {
    display:none!important
}
.topbar {
    height:80px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 5%;
    background:#fff;
    border-bottom:1px solid var(--border)
}
.brand {
    display:flex;
    align-items:center;
    gap:12px;
    color:#203b42;
    font-weight:750;
    letter-spacing:1.5px;
    font-size:16px
}
.brand-icon {
    font-size:31px;
    color:var(--teal)
}
.brand-divider {
    color:#bccbc9;
    font-weight:300
}
.brand span:last-child {
    font-weight:500;
    letter-spacing:0
}
.top-actions {
    display:flex;
    gap:18px;
    align-items:center
}
.top-actions select {
    max-width:160px;
    border:0;
    background:#f4f7f7;
    border-radius:8px;
    padding:9px;
    color:#526a71
}
.account {
    font-weight:600
}
.layout {
    display:grid;
    grid-template-columns:190px minmax(0,740px) 240px;
    gap:32px;
    max-width:1300px;
    margin:36px auto;
    padding:0 28px
}
.sidebar {
    padding-top:10px
}
.sidebar-heading,.eyebrow {
    font-size:11px;
    letter-spacing:2px;
    font-weight:700;
    color:#788f93;
    margin-bottom:18px
}
.sidebar nav {
    display:grid;
    gap:7px
}
.channel {
    display:flex;
    align-items:center;
    gap:12px;
    text-align:start;
    width:100%;
    padding:13px;
    border-radius:9px;
    font-weight:550;
    font-size:14px
}
.channel:before {
    content:'#';
    font-size:20px;
    color:#849a9d
}
.channel.active {
    background:#e3efeb;
    color:#11675f
}
.channel.active:before {
    color:#11675f
}
.sidebar-note {
    margin-top:45px;
    border-top:1px solid var(--border);
    padding:20px 12px;
    font-size:12px;
    color:var(--muted);
    line-height:1.8
}
.note-icon {
    font-size:35px;
    color:var(--teal)
}
.hero {
    position:relative;
    overflow:hidden;
    border-radius:14px;
    background:#e6efe9;
    padding:32px;
    margin-bottom:25px;
    min-height:235px
}
.hero .eyebrow {
    color:#4a7f73
}
.hero h1 {
    font-size:32px;
    letter-spacing:-1px;
    margin:0 0 13px;
    max-width:500px;
    position:relative;
    z-index:1
}
.hero p {
    max-width:440px;
    line-height:1.7;
    color:#526c65;
    position:relative;
    z-index:1;
    margin-bottom:22px
}
.primary {
    background:var(--teal);
    color:white;
    padding:11px 20px;
    border-radius:7px;
    font-weight:650;
    font-size:14px;
    position:relative;
    z-index:1
}
.contours {
    position:absolute;
    width:350px;
    height:350px;
    right:-170px;
    top:-10px;
    border:1px solid #b6d1c4;
    border-radius:45% 55% 60% 40%;
    box-shadow:0 0 0 20px #e6efe9,0 0 0 21px #bfd6ca,0 0 0 43px #e6efe9,0 0 0 44px #bfd6ca,0 0 0 67px #e6efe9,0 0 0 68px #bfd6ca,0 0 0 94px #e6efe9,0 0 0 95px #bfd6ca;
    transform:rotate(-30deg)
}
.feed-toolbar {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:22px
}
.sort-tabs {
    display:flex;
    gap:5px
}
.sort-tabs button {
    padding:9px 17px;
    color:var(--muted);
    border-radius:7px
}
.sort-tabs .active {
    background:white;
    color:#234a49;
    box-shadow:0 1px 4px #152b3410;
    font-weight:650
}
#search-form {
    display:flex;
    align-items:center;
    border:1px solid var(--border);
    border-radius:7px;
    background:white;
    max-width:240px
}
#search {
    border:0;
    background:transparent;
    min-width:0;
    width:100%;
    padding:10px
}
#search-form button {
    font-size:24px;
    padding:0 10px
}
#feed-title {
    font-size:14px;
    font-weight:600;
    color:#6b7e80;
    margin:0 0 14px
}
.post {
    background:white;
    border:1px solid var(--border);
    border-radius:12px;
    padding:22px;
    margin-bottom:15px
}
.post-head {
    display:flex;
    gap:11px;
    align-items:center
}
.avatar {
    display:grid;
    place-items:center;
    flex-shrink:0;
    width:39px;
    height:39px;
    border-radius:50%;
    background:#e7efec;
    color:#4b7167;
    font-weight:700;
    object-fit:cover
}
.author {
    font-weight:650;
    font-size:14px
}
.post-meta {
    font-size:12px;
    color:var(--muted);
    margin-top:4px
}
.badge {
    margin-inline-start:auto;
    color:#4d7b73;
    background:#edf4f1;
    padding:5px 9px;
    border-radius:5px;
    font-size:11px;
    max-width:150px;
    overflow:hidden;
    text-overflow:ellipsis
}
.post-content {
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    line-height:1.8;
    margin:18px 0;
    font-size:15px
}
.post-media {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px
}
.post-media.single {
    grid-template-columns:1fr
}
.post-media img,.post-media video {
    width:100%;
    max-height:350px;
    object-fit:cover;
    border-radius:7px;
    background:#edf2f1
}
.post-media img {
    cursor:zoom-in
}
.post-actions {
    border-top:1px solid #eff3f2;
    margin-top:18px;
    padding-top:13px;
    display:flex;
    align-items:center;
    gap:18px;
    font-size:12px;
    color:var(--muted)
}
.post-actions button {
    padding:4px 0
}
.post-actions button.liked {
    color:var(--teal);
    font-weight:700
}
.post-actions .views {
    margin-inline-start:auto
}
.rightbar {
    padding-top:4px
}
.guide {
    background:white;
    border:1px solid var(--border);
    border-radius:12px;
    padding:24px;
    font-size:13px;
    line-height:1.9;
    color:var(--muted)
}
.guide h2 {
    font-size:20px;
    color:#264b4c
}
.guide hr {
    border:0;
    border-top:1px solid var(--border);
    margin:22px 0
}
.guide a {
    display:block;
    margin-top:20px;
    font-weight:650
}
.secondary {
    background:white;
    border:1px solid var(--border);
    border-radius:7px;
    padding:10px 20px;
    display:block;
    margin:15px auto
}
.empty {
    padding:55px 20px;
    text-align:center;
    border:1px dashed #c5d5d0;
    border-radius:12px;
    color:var(--muted);
    line-height:1.8
}
dialog {
    border:0;
    border-radius:14px;
    padding:28px;
    width:min(680px,calc(100% - 30px));
    max-height:90vh;
    box-shadow:0 20px 100px #0c252f33
}
dialog::backdrop {
    background:#16343b88;
    backdrop-filter:blur(3px)
}
.dialog-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px
}
.dialog-heading h2 {
    margin:0;
    font-size:21px
}
.close {
    font-size:27px;
    color:var(--muted)
}
label {
    display:block;
    margin-bottom:17px;
    font-size:13px;
    font-weight:600
}
label>span {
    display:block;
    margin-bottom:8px
}
label input:not([type=file]),label textarea,label select {
    width:100%;
    padding:11px;
    border:1px solid #cad8d3;
    border-radius:7px;
    background:#fcfdfd;
    resize:vertical
}
.upload {
    padding:14px;
    border:1px dashed #baccc5;
    border-radius:7px;
    background:#f6faf8
}
.muted {
    color:var(--muted);
    font-size:12px;
    line-height:1.7
}
.error {
    color:#b3473b;
    font-size:13px
}
.attachment {
    display:flex;
    justify-content:space-between;
    padding:8px;
    border-bottom:1px solid var(--border);
    font-size:12px;
    overflow-wrap:anywhere
}
.comment-children {
    margin-inline-start:18px;
    border-inline-start:2px solid #dce8e3;
    padding-inline-start:12px
}
#toast {
    position:fixed;
    bottom:24px;
    left:50%;
    transform:translateX(-50%);
    background:#203e43;
    color:white;
    padding:13px 22px;
    border-radius:8px;
    z-index:10;
    max-width:90%
}
#thread .post {
    padding:15px
}
#thread .post-content {
    max-height:none
}
#reply-post {
    margin-bottom:10px
}
.lightbox img {
    max-width:100%;
    max-height:75vh;
    object-fit:contain
}
.lightbox {
    width:min(1100px,95vw)
}
@media(min-width:1400px) {
    .layout {
        margin-top:45px
    }
}
@media(max-width:1100px) {
    .layout {
        grid-template-columns:170px minmax(0,1fr);
        gap:25px
    }
    .rightbar {
        display:none
    }
}
@media(max-width:700px) {
    .topbar {
        height:67px;
        padding:0 16px
    }
    .brand {
        font-size:12px;
        gap:6px;
        letter-spacing:.8px
    }
    .brand-icon {
        font-size:24px
    }
    .brand-divider,.brand span:last-child {
        display:none
    }
    .top-actions {
        gap:10px;
        font-size:12px
    }
    .top-actions select {
        max-width:115px;
        font-size:12px;
        padding:7px
    }
    .layout {
        display:block;
        padding:0 14px;
        margin:17px auto
    }
    .sidebar {
        padding:0;
        margin-bottom:18px
    }
    .sidebar-heading,.sidebar-note {
        display:none
    }
    .sidebar nav {
        display:flex;
        overflow:auto;
        gap:6px
    }
    .channel {
        white-space:nowrap;
        width:auto;
        padding:8px 12px;
        font-size:12px
    }
    .channel:before {
        font-size:15px
    }
    .hero {
        padding:25px;
        min-height:220px
    }
    .hero h1 {
        font-size:27px
    }
    .hero p {
        font-size:13px
    }
    .feed-toolbar {
        gap:8px
    }
    #search-form {
        max-width:155px
    }
    .sort-tabs button {
        padding:8px 11px;
        font-size:13px
    }
    .post {
        padding:17px
    }
    .post-content {
        font-size:14px
    }
    .badge {
        max-width:110px
    }
    .post-actions {
        gap:13px
    }
    dialog {
        padding:20px
    }
    .post-media img,.post-media video {
        max-height:250px
    }
}
.sort-tabs a {
    padding:9px 17px;
    color:var(--muted);
    border-radius:7px;
    display:block
}
.language-form {
    display:flex;
    align-items:center
}
.language-form button {
    padding:8px
}
.primary {
    display:inline-block
}
.pagination {
    display:flex;
    gap:14px;
    justify-content:center
}
.pagination .secondary {
    margin:15px 0
}
.compose-panel {
    background:white;
    border:1px solid var(--border);
    border-radius:12px;
    padding:24px;
    margin-top:24px;
    scroll-margin-top:20px
}
.compose-panel h2 {
    font-size:20px;
    margin-top:0
}
.back {
    display:inline-block;
    margin:0 0 18px
}
.flash {
    background:#e4eee8;
    border:1px solid #c4d9ce;
    border-radius:8px;
    padding:14px
}
.post-actions form {
    margin:0
}
.post-actions a {
    color:inherit
}
.post-media a {
    min-width:0
}
#compose:target {
    outline:2px solid #67a493
}
.post-meta {
    overflow-wrap:anywhere
}
.post-actions {
    flex-wrap:wrap
}
dialog.compose-panel {
    margin: auto;
    width: min(680px, calc(100% - 30px));
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
}
dialog.compose-panel .dialog-heading h2 {
    margin: 0;
}
body.composer-open {
    overflow: hidden;
}
/* 宽屏社区布局 */
:root {
    color: #183340;
    background: #edf2f5;
    font-size: 16px;
    --teal: #087f86;
    --muted: #718592;
    --border: #dfe8ee;
}
.topbar {
    height: 76px;
    padding: 0 32px;
    box-shadow: 0 2px 14px #16374a05;
}
.brand { font-size: 18px; letter-spacing: 1.8px; }
.brand-icon { font-size: 34px; }
.top-actions select { padding: 11px 14px; background: #eff4f7; }
.account { padding: 10px 17px; border: 1px solid #dce7ec; border-radius: 9px; }
.layout {
    grid-template-columns: 216px minmax(0, 1fr);
    gap: 28px;
    width: 100%;
    max-width: none;
    margin: 28px auto;
    padding: 0 32px;
    align-items: start;
}
.layout main { min-width: 0; }
.reaction-chip { position: relative; }
.reaction-users { display: none; position: absolute; bottom: calc(100% + 8px); inset-inline-start: 0; width: 220px; max-height: 260px; overflow-y: auto; padding: 8px; background: #fff; color: var(--ink); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 28px #16374a22; z-index: 6; text-align: start; font-size: 13px; font-weight: 400; }
.reaction-chip:hover .reaction-users, .reaction-chip:focus .reaction-users { display: block; }
.reaction-users { bottom: 100%; }
.reaction-user { display: flex; align-items: center; gap: 9px; padding: 6px; }
.reaction-user-avatar { position: relative; display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; background: #edf5f6; overflow: hidden; }
.reaction-user-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.post-actions .reaction-grid { padding-top: 36px; }
.post-actions .reaction-grid .reaction-picker-close { position: absolute; top: 5px; right: 8px; width: 28px; height: 28px; padding: 0; font-size: 23px; color: #567182; }
.post-actions .reaction-grid .reaction-picker-close:hover { background: #edf4f6; }
.post-menu { position: relative; margin-inline-start: auto; flex-shrink: 0; }
.post-actions .views + .post-menu { margin-inline-start: 0; }
.post-menu summary { list-style: none; cursor: pointer; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; font-size: 16px; letter-spacing: 2px; }
.post-menu summary::-webkit-details-marker { display: none; }
.post-menu summary:hover, .post-menu[open] summary { background: #edf4f6; }
.post-menu-panel { position: absolute; inset-inline-end: 0; bottom: 44px; z-index: 5; min-width: 140px; padding: 6px; background: white; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 28px #16374a22; }
.post-menu-panel a, .post-actions .post-menu-panel button { display: block; width: 100%; padding: 11px 14px; text-align: start; border-radius: 7px; font-size: 14px; }
.post-menu-panel a:hover, .post-menu-panel button:hover { background: #f1f6f7; }
.post-actions .post-menu-panel button { color: #bc3737; }
.post-actions .post-menu-panel .pin-action { color: var(--teal); }
.edit-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; margin: 20px 0; }
.edit-media-card { position: relative; aspect-ratio: 1; min-width: 0; border-radius: 12px; overflow: hidden; background: #edf3f5; }
.edit-media-card a { display: block; height: 100%; }
.edit-media-card img, .edit-media-card video { width: 100%; height: 100%; object-fit: cover; }
.edit-media-remove { position: absolute; top: 7px; right: 7px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: #ffffffee; color: #273d48; box-shadow: 0 2px 8px #0003; font-size: 23px; cursor: pointer; }
.edit-media-remove:hover { background: #fff0f0; color: #bc3737; }
.compose-panel .edit-media-add { position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 7px; aspect-ratio: 1; margin: 0; border: 1px dashed #a8c7cc; border-radius: 12px; background: #f4f9fa; color: var(--teal); text-align: center; cursor: pointer; }
.edit-media-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 160px)); }
.edit-media-add > span:first-child { font-size: 34px; font-weight: 400; }
.edit-media-add > span:last-of-type { font-size: 12px; }
.edit-media-add input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.edit-media-add:focus-within { outline: 2px solid var(--teal); outline-offset: 3px; }
.sidebar {
    position: sticky;
    top: 24px;
    padding: 23px 14px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
}
.sidebar-heading { padding: 0 12px; margin-bottom: 15px; color: #738896; }
.channel { padding: 14px 12px; font-size: 14px; border-radius: 10px; }
.channel.active { background: #e7f4f3; color: #08777c; }
.channel:hover { background: #f0f6f8; }
.hero {
    background: linear-gradient(115deg, #123546 0%, #155167 70%, #086c76 100%);
    border: 1px solid #16475a;
    padding: 32px 38px;
    min-height: 225px;
    border-radius: 18px;
    box-shadow: 0 12px 28px #16425212;
    color: #fff;
    margin-bottom: 24px;
}
.hero .eyebrow { color: #8dccd5; letter-spacing: 2.6px; margin-bottom: 16px; }
.hero h1 { max-width: 900px; font-size: clamp(28px, 2.8vw, 42px); letter-spacing: -.8px; font-weight: 700; }
.hero p { color: #c1d9e1; max-width: 750px; margin: 12px 0 24px; }
.hero .primary { background: #f2fbfb; color: #12505c; padding: 12px 23px; box-shadow: 0 4px 12px #092d3a20; }
.contours {
    right: -90px;
    top: -90px;
    width: 390px;
    height: 390px;
    background: transparent;
    border-color: #ffffff16;
    box-shadow: 0 0 0 24px #ffffff04, 0 0 0 25px #ffffff16, 0 0 0 52px #ffffff04, 0 0 0 53px #ffffff13, 0 0 0 83px #ffffff03, 0 0 0 84px #ffffff10;
    pointer-events: none;
}
.feed-toolbar { padding: 0 0 17px; margin-bottom: 19px; border-bottom: 1px solid #dce5eb; }
.sort-tabs { gap: 7px; }
.sort-tabs a { padding: 11px 23px; font-weight: 600; }
.sort-tabs .active { color: #0b6570; border: 1px solid #dbe6eb; box-shadow: 0 3px 8px #16394a06; }
#search-form { width: 320px; max-width: 38%; border-radius: 10px; }
#search { padding: 12px 15px; font-size: 14px; }
#feed-title { font-size: 15px; margin-bottom: 17px; color: #567182; }
.post {
    padding: 25px;
    border-radius: 16px;
    border-color: #e0e8ee;
    box-shadow: 0 4px 16px #193b4c05;
    margin-bottom: 20px;
}
.post-head { gap: 13px; }
.avatar { width: 45px; height: 45px; background: #edf5f6; color: #197a83; font-size: 17px; }
.author { font-size: 15px; }
.post-meta { font-size: 12px; line-height: 1.6; }
.badge { background: #eff6f8; color: #527480; border: 1px solid #e6eef2; font-size: 11px; padding: 6px 10px; }
.post-content { font-size: 16px; line-height: 1.85; margin: 20px 0; }
.post-content:empty { display: none; }
.post { position: relative; }
.post[data-post-url] { cursor: pointer; }
.post:has(.post-menu) .post-head { padding-inline-end: 35px; }
.post.post-pinned .post-head { padding-inline-end: 110px; }
.post-header-actions { position: absolute; top: 20px; inset-inline-end: 18px; display: flex; align-items: center; gap: 6px; }
.pinned-badge { padding: 5px 10px; border-radius: 7px; background: #e8f5ed; color: #248354; font-size: 12px; font-weight: 600; }
.post-status { max-width: 125px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 5px 10px; border-radius: 7px; background: #edf3fa; color: #436583; font-size: 12px; font-weight: 600; }
button.post-status { border: 0; cursor: pointer; }
button.post-status:hover { background: #ddeafa; }
.post-menu-panel .status-action { color: var(--teal); }
#status-dialog { position: fixed; inset: auto; margin: 0; width: min(300px, calc(100vw - 16px)); max-height: calc(100vh - 16px); overflow-y: auto; padding: 18px; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 28px #16374a22; }
#status-dialog .dialog-heading h2 { font-size: 15px; margin: 0; }
#status-dialog .primary { padding: 9px 14px; font-size: 13px; }
.status-options { display: grid; gap: 4px; margin: 12px 0; }
.status-options button { text-align: start; padding: 10px 12px; border-radius: 7px; color: #436583; }
.status-options button:hover, .status-options button.selected { background: #e8f5ed; color: #248354; }
#status-dialog [data-clear-status] { margin-inline-end: 15px; color: #bc3737; }
.post:has(.post-status) .post-head { padding-inline-end: 165px; }
.post.post-pinned:has(.post-status) .post-head { padding-inline-end: 235px; }
@media(max-width:700px) { .post:has(.post-status) .post-head, .post.post-pinned:has(.post-status) .post-head { padding-top: 35px; padding-inline-end: 0; } }
.post-header-actions .post-menu-panel { top: 40px; bottom: auto; }
.post-menu-panel a, .post-menu-panel button { display: block; width: 100%; padding: 11px 14px; text-align: start; border-radius: 7px; font-size: 14px; }
.post-menu-panel form { margin: 0; }
.post-menu-panel button { color: #bc3737; }
.post-menu-panel .pin-action { color: var(--teal); }
.post-content-link { display: block; color: inherit; text-decoration: none; }
.post-content-link:hover { color: var(--teal); }
.post-media { margin-top: 20px; gap: 8px; }
.post-media img, .post-media video { border-radius: 11px; max-height: 390px; }
.post-media.single img, .post-media.single video { aspect-ratio: 16 / 10; object-fit: cover; }
.post-actions { padding-top: 16px; margin-top: 20px; font-size: 13px; gap: 20px; }
.post-actions a:hover, .post-actions button:hover { color: var(--teal); }
.primary { border-radius: 9px; padding: 12px 22px; transition: filter .15s ease; }
.primary:hover { filter: brightness(1.08); }
.thread-page { max-width: 1180px; width: 100%; margin: 0 auto; }
.thread-page .post-media.single img, .thread-page .post-media.single video { aspect-ratio: auto; max-height: 650px; object-fit: contain; }
@media (min-width: 1200px) {
    .feed-page #feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 22px; align-items: start; }
    .feed-page #feed.masonry-feed { grid-auto-rows: 1px; row-gap: 0; grid-auto-flow: dense; }
    .feed-page #feed .post { margin-bottom: 0; }
    .feed-page #feed .empty { grid-column: 1 / -1; }
}
@media (max-width: 1000px) and (min-width: 701px) {
    .layout { grid-template-columns: 175px minmax(0, 1fr); gap: 20px; padding: 0 22px; }
    .topbar { padding: 0 22px; }
    .hero { padding: 28px; }
}
@media (max-width: 700px) {
    .topbar { height: 67px; padding: 0 16px; }
    .brand { font-size: 13px; letter-spacing: .8px; }
    .brand-icon { font-size: 25px; }
    .account { padding: 7px 10px; }
    .top-actions select { padding: 8px; }
    .layout { display: block; padding: 0 14px; margin: 18px auto; }
    .sidebar { position: static; padding: 0; border: 0; background: transparent; margin-bottom: 17px; }
    .channel { font-size: 13px; padding: 10px 13px; }
    .hero { padding: 27px 24px; min-height: 220px; border-radius: 15px; }
    .hero h1 { font-size: 28px; }
    .hero p { font-size: 14px; }
    .contours { right: -230px; opacity: .6; }
    .sort-tabs a { padding: 10px 15px; font-size: 14px; }
    #search-form { width: 170px; max-width: 48%; }
    #search { padding: 11px; }
    .post { padding: 19px; border-radius: 14px; }
    .post-content { font-size: 15px; }
    .post-actions { gap: 14px; font-size: 12px; }
    .post-media img, .post-media video { max-height: 320px; }
}
.reactions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.post-actions .reaction-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border: 1px solid #dfe8ed;
    border-radius: 20px;
    background: #f5f8fa;
    font-size: 14px;
    line-height: 1.2;
}
.reaction-chip span { font-size: 12px; color: #547382; font-weight: 600; }
.post-actions .reaction-chip.selected, .reaction-grid button.selected { background: #daf1ee; border-color: #60aaa4; }
.reaction-picker { position: relative; }
.reaction-picker summary, .reaction-add { display: grid; place-items: center; width: 29px; height: 29px; border: 1px dashed #aebfca; border-radius: 50%; cursor: pointer; font-size: 18px; list-style: none; }
.reaction-picker summary::-webkit-details-marker { display: none; }
.reaction-grid { position: absolute; inset-inline-start: 0; bottom: calc(100% + 10px); z-index: 5; width: min(300px, 75vw); display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; padding: 12px; border: 1px solid #d3e2e9; border-radius: 14px; background: white; box-shadow: 0 12px 36px #18394f25; }
.post-actions .reaction-grid button { padding: 6px 0; font-size: 22px; border-radius: 7px; border: 1px solid transparent; }
.reaction-grid button:hover { background: #edf6f6; }
/* 顶栏语言与账户菜单 */
.top-actions { gap: 14px; }
.language-form { padding: 0; border: 1px solid #e2e9ed; border-radius: 10px; background: white; }
.top-actions .language-form select { background: transparent; border-radius: 10px; padding: 10px 12px; color: #486575; font-size: 14px; cursor: pointer; }
.user-menu { position: relative; }
.user-menu summary { display: flex; align-items: center; gap: 9px; padding: 5px 9px 5px 5px; cursor: pointer; list-style: none; border-radius: 24px; font-size: 14px; font-weight: 600; color: #294b5e; }
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu summary:hover { background: #f0f6f7; }
.user-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #deefee; color: #08777c; font-weight: 700; }
.avatar, .user-avatar { position: relative; overflow: hidden; flex-shrink: 0; }
.avatar img, .user-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.user-chevron { color: #8aa0ac; font-size: 17px; }
.user-dropdown { position: absolute; inset-inline-end: 0; top: calc(100% + 10px); min-width: 170px; padding: 7px; background: white; border: 1px solid #e1e9ee; border-radius: 12px; box-shadow: 0 12px 30px #173e501c; z-index: 20; }
.user-dropdown button { width: 100%; text-align: start; padding: 12px 15px; border-radius: 7px; color: #9d3e3e; font-size: 14px; }
.user-dropdown button:hover { background: #fff4f3; }
.reaction-error { flex-basis: 100%; color: #a84136; font-size: 12px; margin: 5px 0; }
@media(max-width:700px) { .top-actions { gap: 8px; } .top-actions .language-form select { font-size: 12px; max-width: 112px; padding: 8px; } .user-menu summary { gap: 5px; font-size: 12px; } .user-avatar { width: 30px; height: 30px; } }
/* 列表预览保持紧凑，详情保留完整正文。 */
.feed-page .post-content {
    font-size: 14px;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 100%;
}
.feed-page .post-content:empty { display: none; }
.feed-page .post-meta { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-page .post-head > div { min-width: 0; }
.feed-page .post-media {
    height: 300px;
    grid-template-rows: repeat(var(--media-rows), minmax(0, 1fr));
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.feed-page .post-media.single { height: 350px; grid-template-columns: 1fr; grid-template-rows: 1fr; }
.feed-page .post-media.many { grid-template-columns: repeat(3, minmax(0, 1fr)); height: 300px; }
.feed-page .post-media.dense { height: 330px; gap: 6px; }
.feed-page .post-media a { display: block; height: 100%; min-height: 0; overflow: hidden; border-radius: 9px; }
.feed-page .post-media img, .feed-page .post-media video {
    display: block;
    width: 100%;
    height: 100%;
    max-height: none;
    aspect-ratio: auto;
    object-fit: cover;
    min-height: 0;
}
.user-chevron {
    display: block;
    width: 7px;
    height: 7px;
    margin: -4px 5px 0 4px;
    border-right: 1.5px solid #78909c;
    border-bottom: 1.5px solid #78909c;
    transform: rotate(45deg);
    transition: transform .15s ease;
}
.user-menu[open] .user-chevron { margin-top: 3px; transform: rotate(225deg); }
@media(max-width:700px) {
    .feed-page .post-media { height: 230px; }
    .feed-page .post-media.single { height: 300px; }
    .feed-page .post-media.many { height: 240px; }
    .feed-page .post-media.dense { height: 270px; gap: 5px; }
}