/* 与 App 的 MarinePalette 保持一致。 */
:root {
    color-scheme: dark;
    --paper: #0d1b2a;
    --ink: #f3f7fc;
    --blue: #4285f4;
    --teal: #63cddd;
    --muted: #9ab0c9;
    --line: #2a3a4a;
    --border: #2a3a4a;
    --surface: #152233;
    --raised: #1a2a40;
    color: var(--ink);
    background: var(--paper);
    font-family: "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
}
body { background: var(--paper); color: var(--ink); font-family: inherit; }
button, input, select, textarea { font-family: inherit; }
input, select, textarea { color: var(--ink); }
input::placeholder, textarea::placeholder { color: #8fa5bf; opacity: 1; }
a, button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid #63cddd; outline-offset: 4px; }
::selection { background: #4285f466; color: white; }

/* 社区：紧凑导航、明确的内容层次和自然的阅读宽度。 */
.site-forum .topbar { height: 76px; padding-inline: 32px; background: #0d1b2af5; border-color: var(--border); box-shadow: none; }
.site-forum .brand { color: var(--ink); letter-spacing: .4px; font-size: 17px; }
.site-forum .brand-icon { width: 36px; height: 36px; }
.site-forum .brand-divider { color: #556c85; }
.site-forum .brand span:last-child { color: var(--muted); }
.site-forum .language-form { background: var(--surface); border-color: var(--border); }
.site-forum .top-actions .language-form select { color: var(--muted); background: transparent; }
.site-forum .account { color: #fff; background: #4285f4; border-color: transparent; border-radius: 10px; font-size: 13px; }
.site-forum .layout { max-width: none; width: 100%; grid-template-columns: 216px minmax(0, 1fr); gap: 28px; padding: 0 32px; margin: 28px auto; }
.site-forum .sidebar { background: var(--surface); border-color: var(--border); box-shadow: none; padding: 18px 12px; border-radius: 16px; }
.site-forum .sidebar-heading { color: var(--muted); font-size: 11px; letter-spacing: 1px; }
.site-forum .channel { color: var(--muted); border-radius: 10px; }
.site-forum .channel:before { color: #65809f; }
.site-forum .channel.active { color: #a6ceff; background: #4285f422; }
.site-forum .channel.active:before { color: #6ca7ff; }
.site-forum .channel:hover { background: var(--raised); color: #fff; }
.site-forum .hero { min-height: 0; padding: 28px 32px; background: linear-gradient(115deg, #1a2744, #162e47); border-color: #2b4260; box-shadow: none; border-radius: 18px; }
.site-forum .hero .eyebrow { color: #63cddd; font-size: 10px; letter-spacing: 2px; margin: 0 0 12px; }
.site-forum .hero h1 { font-size: clamp(26px, 2.7vw, 34px); line-height: 1.35; margin: 0; }
.site-forum .hero p { color: #b4c7dd; font-size: 14px; margin: 10px 0 18px; }
.site-forum .hero .primary, .site-forum .primary { background: var(--blue); color: #fff; border-radius: 10px; font-size: 13px; padding: 11px 18px; box-shadow: none; }
.site-forum .contours { opacity: .25; }
.site-forum .feed-toolbar { gap: 18px; border-color: var(--border); padding-bottom: 18px; }
.site-forum .sort-tabs { padding: 4px; gap: 2px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); min-width: 0; }
.site-forum .sort-tabs a { padding: 9px 16px; border: 0; border-radius: 8px; color: var(--muted); font-size: 13px; white-space: nowrap; text-align: center; }
.site-forum .sort-tabs .active { background: #4285f4; color: #fff; box-shadow: none; }
.site-forum #search-form { background: var(--surface); border-color: var(--border); width: 280px; max-width: 40%; border-radius: 12px; }
.site-forum #search { color: var(--ink); font-size: 13px; padding: 12px; }
.site-forum #search-form button { color: var(--muted); }
.site-forum #feed-title { color: var(--muted); font-size: 13px; margin-bottom: 14px; }
.site-forum .post { background: var(--surface); border-color: var(--border); box-shadow: none; border-radius: 16px; padding: 20px; }
.site-forum .avatar, .site-forum .user-avatar, .site-forum .reaction-user-avatar { background: #233b54; color: #a6ceff; }
.site-forum .avatar { width: 40px; height: 40px; font-size: 15px; }
.site-forum .author { color: var(--ink); font-size: 14px; }
.site-forum .post-meta { color: var(--muted); font-size: 12px; }
.site-forum .post-content { color: #dce6f3; line-height: 1.8; font-size: 15px; }
.site-forum .feed-page .post-content { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; white-space: pre-wrap; font-size: 14px; }
.site-forum .post-content-link:hover { color: #a6ceff; }
.site-forum .post-media img, .site-forum .post-media video { background: #0a1420; border-radius: 10px; }
.site-forum .post-actions { color: var(--muted); border-color: var(--border); gap: 14px; font-size: 12px; }
.site-forum .post-actions .reaction-chip { background: var(--raised); border-color: var(--border); }
.site-forum .reaction-chip span { color: #b4c7dd; }
.site-forum .post-actions .reaction-chip.selected, .site-forum .reaction-grid button.selected { background: #4285f433; border-color: #4285f4; }
.site-forum .reaction-picker summary, .site-forum .reaction-add { border-color: #506985; }
.site-forum .reaction-grid, .site-forum .reaction-users, .site-forum .post-menu-panel, .site-forum .user-dropdown { background: var(--raised); color: var(--ink); border-color: var(--border); box-shadow: 0 12px 32px #0004; }
.site-forum .post-menu summary:hover, .site-forum .post-menu[open] summary, .site-forum .post-menu-panel a:hover, .site-forum .post-menu-panel button:hover, .site-forum .reaction-grid button:hover, .site-forum .user-menu summary:hover { background: #263d57; }
.site-forum .user-menu summary { color: var(--ink); }
.site-forum .user-dropdown button, .site-forum .post-menu-panel button { color: #ff9a9a; }
.site-forum .user-dropdown button:hover { background: #e8505022; }
.site-forum .pinned-badge { color: #8dd7a2; background: #34a85320; }
.site-forum .post-status, .site-forum .badge { color: #acd0ff; background: #4285f41f; border-color: #355172; }
.site-forum button.post-status:hover { background: #4285f433; }
.site-forum dialog, .site-forum .compose-panel, .site-forum .guide { background: var(--surface); color: var(--ink); border: 1px solid var(--border); }
.site-forum dialog.compose-panel { width: min(680px, calc(100% - 32px)); }
.site-forum label input:not([type=file]), .site-forum label textarea, .site-forum label select, .site-forum .status-custom input { background: var(--paper); border-color: var(--border); color: var(--ink); }
.site-forum .edit-media-card, .site-forum .compose-panel .edit-media-add, .site-forum .upload { background: var(--raised); border-color: #506985; }
.site-forum .edit-media-remove { background: var(--surface); color: var(--ink); }
.site-forum .secondary { background: var(--surface); color: var(--muted); border-color: var(--border); border-radius: 10px; }
.site-forum .empty { background: var(--surface); border-color: var(--border); }
.site-forum .flash { color: #a7dfb8; background: #34a85320; border-color: #34a85344; }
.site-forum .flash.error, .site-forum .error, .site-forum .reaction-error { color: #ff9a9a; }
.site-forum .comment-children, .site-forum .status-custom, .site-forum #status-dialog [data-clear-status] { border-color: var(--border); }
.site-forum .status-options button { color: #a6ceff; }
.site-forum .status-options button:hover, .site-forum .status-options button.selected { background: #4285f425; }
.site-forum .thread-page { max-width: 860px; margin-inline: auto; }
.site-forum .thread-page > h2 { font-size: 20px; margin: 28px 0 18px; }
.site-forum .back { font-size: 13px; }

/* 登录入口延续同一套视觉风格，二维码保留白色扫描底。 */
.site-login .site-header, .site-login .login-layout, .site-login .site-footer { width: min(1120px, calc(100% - 64px)); }
.site-login .language-form select { color: var(--muted); border-color: var(--border); background: var(--surface); }
.site-login .login-layout { background: var(--surface); border-color: var(--border); box-shadow: 0 24px 70px #0002; }
.site-login .community-panel { background: radial-gradient(ellipse at 70% 55%, #29496b 0, transparent 60%), #1a2744; }
.site-login .intro, .site-login .browse-block p { color: #b4c7dd; }
.site-login .scene-badge { background: var(--surface); color: var(--ink); }
.site-login .card-icon { background: #4285f420; color: #80b3ff; }
.site-login .method-switch { border-color: var(--surface); background: #263e5e; color: #9cc7ff; }
.site-login .method-switch:hover { background: #345379; }
.site-login .open-app-button { background: var(--blue); box-shadow: none; }
.site-login .open-app-button:not(:disabled):hover { background: #3476df; }
.site-login .open-app-button:disabled { background: var(--raised); color: var(--muted); }
.site-login .matching-code strong { background: var(--raised); border-color: var(--border); color: var(--ink); }
.site-login .scan-steps li { color: #b4c7dd; }
.site-login .scan-steps li span { background: var(--raised); color: #9ab0c9; }
.site-login .availability-note { background: #34a85318; }
.site-login .availability-dot { background: #74ca92; }
.site-login .availability-note strong { color: #a0d7b1; }
.site-login .security-note p, .site-login .site-footer { color: var(--muted); }
.site-login .download-link { color: #9cc7ff; background: var(--raised); }
.site-login .download-link:hover { background: #263e5e; }
.site-login .mobile-illustration { background-image: radial-gradient(circle at center, #233955 0 90px, transparent 91px); }

@media (max-width: 1100px) and (min-width: 701px) {
    .site-forum .layout { grid-template-columns: 168px minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 700px) {
    .site-login .site-header, .site-login .login-layout, .site-login .site-footer { width: calc(100% - 32px); }
}
@media (max-width: 700px) {
    .site-forum .topbar { height: 64px; padding-inline: 16px; gap: 12px; }
    .site-forum .brand { font-size: 13px; gap: 7px; letter-spacing: .2px; white-space: nowrap; }
    .site-forum .brand-icon { width: 30px; height: 30px; }
    .site-forum .top-actions { gap: 7px; min-width: 0; }
    .site-forum .top-actions .language-form select { width: 100%; max-width: 106px; padding: 8px; font-size: 12px; }
    .site-forum .account { padding: 8px 11px; font-size: 12px; white-space: nowrap; }
    .site-forum .user-menu summary > span:not(.user-avatar) { display: none; }
    .site-forum .layout { display: block; padding: 0 14px; margin: 16px auto; }
    .site-forum .sidebar { border: 0; border-radius: 0; padding: 0; background: transparent; margin-bottom: 16px; }
    .site-forum .sidebar nav { gap: 8px; scrollbar-width: none; }
    .site-forum .channel { padding: 9px 13px; border: 1px solid var(--border); background: var(--surface); font-size: 12px; }
    .site-forum .channel.active { border-color: #4285f477; }
    .site-forum .hero { padding: 22px; border-radius: 16px; margin-bottom: 20px; }
    .site-forum .hero .eyebrow { font-size: 9px; letter-spacing: 1.5px; margin-bottom: 10px; }
    .site-forum .hero h1 { font-size: 25px; line-height: 1.4; }
    .site-forum .hero p { font-size: 13px; line-height: 1.7; margin: 8px 0 16px; }
    .site-forum .hero .primary { padding: 10px 16px; font-size: 12px; }
    .site-forum .feed-toolbar { flex-direction: column; align-items: stretch; gap: 12px; }
    .site-forum .sort-tabs { display: grid; grid-template-columns: repeat(3, minmax(max-content, 1fr)); width: 100%; overflow-x: auto; scrollbar-width: none; }
    .site-forum .sort-tabs a { padding: 10px 6px; white-space: nowrap; font-size: 12px; }
    .site-forum #search-form { width: 100%; max-width: none; }
    .site-forum .post { padding: 16px; border-radius: 14px; margin-bottom: 16px; }
    .site-forum .post-head { gap: 10px; }
    .site-forum .avatar { width: 36px; height: 36px; }
    .site-forum .post-meta { font-size: 11px; }
    .site-forum .post-content { margin-block: 14px; font-size: 14px; }
    .site-forum .post-media { margin-top: 14px; }
    .site-forum .feed-page .post-media.single { height: auto; aspect-ratio: 4 / 3; }
    .site-forum .post-actions { padding-top: 12px; margin-top: 14px; gap: 12px; font-size: 11px; }
    .site-forum .post-header-actions { top: 12px; inset-inline-end: 12px; }
    .site-forum dialog.compose-panel { max-height: calc(100dvh - 24px); padding: 20px; }
    .site-forum .thread-page .post-media.single img, .site-forum .thread-page .post-media.single video { max-height: 70dvh; }
}
@media (max-width: 380px) {
    .site-forum .brand { font-size: 12px; }
    .site-forum .top-actions .language-form select { max-width: 90px; }
}