@font-face {
    font-family: "Ziti";
    src: url("./ziti.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "ForumIcon";
    src: url("./icon.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "ThreadCommentEmoji";
    src: url("./NotoClassic50.woff2") format("woff2");
    font-display: swap;
}

:root {
    --page-bg: rgb(239, 242, 246);
    --sidebar-soft-bg: rgb(248, 249, 250);
    --surface-bg: #ffffff;
    --surface-overlay-bg: rgba(255, 255, 255, 0.82);
    --surface-hover-bg: rgb(239, 242, 246);
    --thread-content-url-font-family:
        ui-monospace,
        "SFMono-Regular",
        "SF Mono",
        "Cascadia Mono",
        "Segoe UI Mono",
        "Roboto Mono",
        "Menlo",
        "Monaco",
        "Consolas",
        "Liberation Mono",
        monospace;
    --divider-color: rgb(239, 242, 246);
    --dashed-divider-color: rgb(218, 218, 218);
    --header-border-color: rgb(226, 232, 240);
    --pagination-border-color: rgb(222, 226, 230);
    --pagination-hover-bg: rgb(233, 236, 239);
    --pagination-link-color: rgb(0, 123, 255);
    --pagination-active-bg: rgb(0, 123, 255);
    --thread-list-header-border: var(--divider-color);
    --thread-list-header-bg: var(--surface-bg);
    --thread-list-header-tab-color: rgba(52, 58, 64, 0.88);
    --thread-list-header-tab-active-color: rgb(52, 58, 64);
    --thread-list-header-sort-color: rgba(90, 99, 114, 0.82);
    --thread-list-header-sort-bg: var(--surface-bg);
    --thread-list-header-sort-border: rgba(205, 214, 226, 0.9);
    --thread-list-header-sort-arrow-color: rgba(90, 99, 114, 0.78);
    --side-nav-item-hover-bg: rgb(248, 249, 250);
    --side-nav-item-hover-color: rgb(59, 130, 246);
    --side-nav-item-active-bg: rgba(41, 151, 247, 0.1);
    --side-nav-label-color: rgb(52, 58, 64);
    --board-tag-filter-border: rgb(225, 225, 225);
    --board-tag-filter-color: rgb(138, 154, 169);
    --board-tag-filter-active-bg: rgb(0, 132, 255);
    --board-tag-filter-active-color: rgb(255, 255, 255);
    --board-summary-heading-bg: linear-gradient(
        90deg,
        rgb(152, 193, 253) 0%,
        rgb(176, 208, 253) 18%,
        rgb(214, 231, 253) 36%,
        rgb(242, 247, 255) 50%,
        rgb(214, 231, 253) 64%,
        rgb(176, 208, 253) 82%,
        rgb(152, 193, 253) 100%
    );
    --forum-sidecard-hero-bg: linear-gradient(
        160deg,
        rgb(134, 182, 253) 0%,
        rgb(171, 206, 253) 16%,
        rgb(212, 230, 253) 34%,
        rgb(188, 217, 253) 47%,
        rgb(205, 226, 253) 60%,
        rgb(176, 208, 253) 78%,
        rgb(134, 182, 253) 100%
    );
    --checkin-card-header-bg: linear-gradient(
        270deg,
        rgb(134, 182, 253) 0%,
        rgb(164, 202, 253) 18%,
        rgb(191, 219, 253) 34%,
        rgb(214, 231, 253) 46%,
        rgb(226, 238, 254) 58%,
        rgb(255, 255, 255) 66%,
        rgb(255, 255, 255) 82%,
        rgb(255, 255, 255) 100%
    );
    --ranking-card-tab-indicator-bg: linear-gradient(90deg, rgb(220, 235, 253) 0%, rgb(134, 182, 253) 100%);
    --thread-user-card-hero-bg: linear-gradient(
        160deg,
        rgb(134, 182, 253) 0%,
        rgb(171, 206, 253) 16%,
        rgb(212, 230, 253) 34%,
        rgb(188, 217, 253) 47%,
        rgb(205, 226, 253) 60%,
        rgb(176, 208, 253) 78%,
        rgb(134, 182, 253) 100%
    );
    --board-summary-stats-bg: rgb(242, 243, 245);
    --board-summary-heading-border-color: rgb(222, 226, 230);
    --thread-action-button-bg: rgb(255, 255, 255);
    --thread-action-button-color: rgba(134, 142, 150, 0.8);
    --thread-delete-button-color: rgba(192, 38, 38, 0.82);
    --thread-delete-button-hover-color: rgb(153, 27, 27);
    --thread-action-button-hover-color: rgb(59, 130, 246);
    --thread-action-button-active-bg: rgb(241, 245, 249);
    --thread-action-button-active-color: rgba(100, 116, 139, 0.82);
    --thread-action-button-self-bg: rgb(241, 245, 249);
    --thread-action-button-self-color: rgba(148, 163, 184, 0.9);
    --thread-action-button-spinner-color: rgb(59, 130, 246);
    --thread-action-button-spinner-track-color: rgba(148, 163, 184, 0.34);
    --thread-action-button-shadow: rgb(226, 232, 240) 0px 2px 10px 0px;
    --thread-action-count-bg: rgb(148, 163, 184);
    --thread-action-count-color: rgb(255, 255, 255);
    --thread-card-action-bg: rgb(255, 255, 255);
    --thread-card-action-text-color: rgb(108, 117, 125);
    --thread-card-action-border-color: rgb(100, 116, 139);
    --thread-card-action-hover-bg: rgb(100, 116, 139);
    --thread-card-action-hover-text-color: rgb(255, 255, 255);
    --thread-card-action-active-bg: rgb(248, 250, 252);
    --thread-card-action-active-text-color: rgba(100, 116, 139, 0.84);
    --thread-card-action-active-border-color: rgba(203, 213, 225, 0.96);
    --thread-card-action-self-bg: rgb(248, 250, 252);
    --thread-card-action-self-text-color: rgba(148, 163, 184, 0.92);
    --thread-card-action-self-border-color: rgba(203, 213, 225, 0.96);
    --thread-card-action-spinner-color: rgb(59, 130, 246);
    --thread-card-action-spinner-track-color: rgba(148, 163, 184, 0.34);
    --thread-comment-heading-count-bg: rgb(241, 245, 249);
    --thread-comment-heading-count-color: rgba(71, 85, 105, 0.9);
    --thread-comment-sort-color: rgba(100, 116, 139, 0.82);
    --thread-comment-sort-active-color: rgb(0, 123, 255);
    --thread-comment-sort-divider-color: rgba(203, 213, 225, 0.92);
    --thread-comment-composer-bg: rgb(248, 250, 252);
    --thread-comment-composer-border: rgba(203, 213, 225, 0.92);
    --thread-comment-composer-plain-bg: rgb(255, 255, 255);
    --thread-comment-field-bg: rgb(255, 255, 255);
    --thread-comment-field-border: rgba(203, 213, 225, 0.96);
    --thread-comment-field-focus-ring: rgba(59, 130, 246, 0.18);
    --thread-comment-meta-color: rgba(100, 116, 139, 0.88);
    --thread-page-body-color: rgb(33, 37, 41);
    --thread-content-link-color: rgb(84, 116, 168);
    --thread-content-link-hover-color: rgb(62, 95, 145);
    --thread-comment-author-color: rgb(108, 117, 125);
    --thread-comment-body-color: rgb(33, 37, 41);
    --thread-comment-avatar-ring: rgb(241, 245, 249);
    --thread-comment-avatar-border: rgb(255, 255, 255);
    --thread-comment-avatar-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px 0px;
    --thread-comment-floor-bg: rgba(136, 136, 136, 0.1);
    --thread-comment-floor-color: rgb(136, 136, 136);
    --thread-comment-divider-color: rgba(226, 232, 240, 0.92);
    --thread-comment-action-color: rgba(134, 142, 150, 0.86);
    --thread-comment-action-hover-color: rgb(0, 123, 255);
    --thread-comment-delete-color: var(--thread-delete-button-color);
    --thread-comment-delete-hover-color: var(--thread-delete-button-hover-color);
    --thread-comment-action-active-color: rgba(134, 142, 150, 0.58);
    --thread-comment-action-spinner-color: rgb(0, 123, 255);
    --thread-comment-action-spinner-track-color: rgba(148, 163, 184, 0.34);
    --thread-comment-submit-bg: rgb(59, 130, 246);
    --thread-comment-submit-hover-bg: rgb(37, 99, 235);
    --thread-comment-submit-color: rgb(255, 255, 255);
    --thread-comment-submit-disabled-bg: rgb(203, 213, 225);
    --thread-comment-cancel-bg: rgb(241, 245, 249);
    --thread-comment-cancel-hover-bg: rgb(226, 232, 240);
    --thread-comment-cancel-color: rgba(71, 85, 105, 0.92);
    --thread-comment-submit-spinner-color: rgb(255, 255, 255);
    --thread-comment-submit-spinner-track-color: rgba(255, 255, 255, 0.34);
    --thread-comment-error-bg: rgb(254, 242, 242);
    --thread-comment-error-color: rgb(220, 38, 38);
    --thread-comment-tab-bg: rgb(241, 245, 249);
    --thread-comment-tab-hover-bg: rgb(226, 232, 240);
    --thread-comment-tab-color: rgba(100, 116, 139, 0.88);
    --thread-comment-tab-active-bg: rgb(255, 255, 255);
    --thread-comment-tab-active-color: rgb(33, 37, 41);
    --thread-comment-preview-bg: rgb(255, 255, 255);
    --thread-comment-preview-border: rgba(203, 213, 225, 0.96);
    --thread-comment-preview-empty-color: rgba(100, 116, 139, 0.88);
    --thread-comment-emoji-bg: rgb(255, 255, 255);
    --thread-comment-emoji-border: rgba(203, 213, 225, 0.96);
    --thread-comment-emoji-color: rgba(100, 116, 139, 0.92);
    --thread-comment-emoji-hover-bg: rgb(248, 250, 252);
    --thread-comment-emoji-hover-color: rgb(0, 123, 255);
    --thread-comment-emoji-panel-bg: rgb(255, 255, 255);
    --thread-comment-emoji-panel-border: rgba(203, 213, 225, 0.96);
    --thread-comment-emoji-panel-shadow: rgba(148, 163, 184, 0.26) 0px 8px 18px 0px;
    --thread-comment-emoji-item-bg: rgb(255, 255, 255);
    --thread-comment-emoji-item-hover-bg: rgb(248, 250, 252);
    --thread-comment-emoji-item-color: rgb(52, 58, 64);
    --thread-comment-child-tools-color: rgba(100, 116, 139, 0.88);
    --thread-comment-child-tools-hover-color: rgb(0, 123, 255);
    --thread-comment-child-panel-bg: rgb(248, 250, 252);
    --thread-comment-child-panel-border: rgba(203, 213, 225, 0.92);
    --thread-comment-child-item-bg: rgb(255, 255, 255);
    --thread-comment-child-item-border: rgba(226, 232, 240, 0.92);
    --thread-comment-child-author-color: rgb(71, 85, 105);
    --thread-comment-child-time-color: rgba(100, 116, 139, 0.84);
    --thread-comment-child-body-color: rgb(52, 58, 64);
    --thread-comment-guest-bg: rgb(255, 255, 255);
    --thread-comment-guest-border: rgb(226, 232, 240);
    --thread-comment-guest-title-color: rgb(15, 23, 42);
    --thread-comment-guest-link-bg: rgb(0, 123, 255);
    --thread-comment-guest-link-border: rgb(0, 123, 255);
    --thread-comment-guest-link-hover-bg: rgb(0, 105, 217);
    --thread-comment-guest-link-color: rgb(255, 255, 255);
    --thread-comment-guest-secondary-bg: rgb(255, 255, 255);
    --thread-comment-guest-secondary-border: rgb(206, 212, 218);
    --thread-comment-guest-secondary-hover-bg: rgb(248, 249, 250);
    --thread-comment-guest-secondary-color: rgb(108, 117, 125);
    --thread-comment-empty-icon-color: rgba(134, 142, 150, 0.8);
    --thread-card-tag-bg: rgba(136, 136, 136, 0.1);
    --thread-card-tag-color: rgb(136, 136, 136);
    --thread-card-tag-hover-bg: rgb(136, 136, 136);
    --thread-card-tag-hover-color: rgb(255, 255, 255);
    --ranking-top3-bg: linear-gradient(135deg, #60e464 10%, #5cb85b 100%);
    --ranking-total-top3-bg: linear-gradient(135deg, #59c3fb 10%, #268df7 100%);
    --board-hot-top3-bg: linear-gradient(135deg, #ff5e7f 30%, #ff967e 100%);
    --user-recent-marker-bg: linear-gradient(135deg, #ffb347 0%, #f5e960 100%);
    --soft-bg: rgb(239, 242, 246);
    --topbar-bg: rgb(255, 255, 255);
    --topbar-bg-scrolled: rgba(255, 255, 255, 0.46);
    --topbar-inner-bg: rgba(255, 255, 255, 0.72);
    --topbar-inner-bg-scrolled: rgba(255, 255, 255, 0.3);
    --topbar-search-bg: rgb(248, 249, 250);
    --topbar-search-text-color: rgb(52, 58, 64);
    --topbar-search-placeholder-color: rgba(52, 58, 64, 0.6);
    --topbar-search-button-color: rgb(52, 58, 64);
    --topbar-search-focus-ring: rgba(73, 80, 87, 0.18);
    --topbar-auth-border-color: rgb(0, 123, 255);
    --topbar-auth-text-color: rgb(0, 123, 255);
    --topbar-auth-hover-bg: rgb(0, 123, 255);
    --topbar-auth-hover-text-color: rgb(255, 255, 255);
    --topbar-theme-button-bg: var(--topbar-icon-action-bg);
    --topbar-theme-button-color: var(--topbar-icon-action-color);
    --topbar-theme-button-hover-bg: var(--topbar-icon-action-hover-bg);
    --topbar-theme-button-hover-color: var(--topbar-icon-action-hover-color);
    --topbar-nav-toggle-bg: var(--topbar-icon-action-bg);
    --topbar-nav-toggle-color: var(--topbar-icon-action-color);
    --topbar-nav-toggle-hover-bg: var(--topbar-icon-action-hover-bg);
    --topbar-nav-toggle-hover-color: var(--topbar-icon-action-hover-color);
    --topbar-icon-action-bg: rgb(246, 248, 252);
    --topbar-icon-action-color: rgb(109, 119, 133);
    --topbar-icon-action-hover-bg: rgb(234, 239, 247);
    --topbar-icon-action-hover-color: rgb(72, 84, 101);
    --topbar-mobile-nav-panel-bg: var(--topbar-user-menu-panel-bg);
    --topbar-mobile-nav-panel-border: var(--topbar-user-menu-panel-border);
    --topbar-mobile-nav-panel-shadow: var(--topbar-user-menu-panel-shadow);
    --topbar-mobile-nav-link-hover-bg: var(--topbar-user-menu-entry-hover-bg);
    --topbar-mobile-nav-link-hover-color: var(--topbar-user-menu-entry-hover-color);
    --topbar-message-alert-color: rgb(225, 29, 72);
    --topbar-message-alert-hover-color: rgb(190, 24, 93);
    --topbar-message-alert-shadow: rgba(225, 29, 72, 0.24);
    --topbar-message-alert-translate-distance: 1.75px;
    --topbar-compose-bg: rgb(68, 132, 245);
    --topbar-compose-color: rgb(255, 255, 255);
    --topbar-compose-hover-bg: rgb(37, 99, 235);
    --topbar-avatar-bg: rgb(245, 247, 250);
    --topbar-avatar-border: rgb(255, 255, 255);
    --topbar-avatar-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px 0px;
    --topbar-avatar-fallback-bg: linear-gradient(135deg, rgb(122, 188, 104) 0%, rgb(87, 149, 80) 100%);
    --topbar-avatar-fallback-color: rgb(255, 255, 255);
    --topbar-user-menu-panel-bg: rgb(243, 246, 255);
    --topbar-user-menu-panel-border: rgba(214, 223, 235, 0.92);
    --topbar-user-menu-panel-shadow: 0 18px 38px rgba(31, 41, 55, 0.16);
    --topbar-user-menu-eyebrow-color: rgba(108, 117, 125, 0.9);
    --topbar-user-menu-level-color: rgb(108, 117, 125);
    --topbar-user-menu-exp-color: rgba(108, 117, 125, 0.9);
    --topbar-user-menu-progress-track: rgba(226, 232, 240, 0.96);
    --topbar-user-menu-progress-fill: rgb(68, 132, 245);
    --topbar-user-menu-name-color: rgba(108, 117, 125, 0.92);
    --topbar-user-menu-entry-color: rgba(73, 80, 87, 0.92);
    --topbar-user-menu-entry-icon-color: rgba(108, 117, 125, 0.86);
    --topbar-user-menu-entry-hover-bg: rgba(68, 132, 245, 0.08);
    --topbar-user-menu-entry-hover-color: rgb(59, 130, 246);
    --topbar-user-menu-logout-bg: rgba(255, 255, 255, 0.74);
    --topbar-user-menu-logout-border: rgba(239, 68, 68, 0.45);
    --topbar-user-menu-logout-color: rgb(225, 29, 72);
    --topbar-user-menu-logout-hover-bg: rgba(254, 226, 226, 0.96);
    --metric-icon-color: rgb(108, 117, 125);
    --thread-item-last-reply-icon-color: rgba(0, 0, 0, 0.2);
    --thread-item-pin-icon-color: rgb(255, 94, 127);
    --thread-item-board-bg: rgb(248, 249, 250);
    --thread-item-board-color: rgba(134, 142, 150, 0.8);
    --thread-item-board-icon-opacity: 0.6;
    --thread-item-board-icon-hover-opacity: 1;
    --thread-item-meta-link-color: rgb(108, 117, 125);
    --thread-item-relative-time-color: rgba(134, 142, 150, 0.8);
    --thread-item-last-reply-author-color: rgb(108, 117, 125);
    --thread-item-stats-color: rgba(0, 0, 0, 0.4);
    --thread-page-nav-icon-color: rgb(108, 117, 125);
    --footer-action-color: rgb(108, 117, 125);
    --footer-action-bg: rgb(255, 255, 255);
    --footer-action-hover-bg: rgb(226, 232, 240);
    --footer-action-hover-color: rgb(226, 232, 240);
    --footer-bg: rgb(248, 249, 250);
    --footer-inner-bg: rgb(248, 249, 250);
    --notice-bg: rgba(41, 151, 247, 0.1);
    --forum-notice-text-color: rgb(59, 130, 246);
    --hover-bg: rgba(47, 110, 161, 0.12);
    --border-color: rgba(31, 41, 51, 0.12);
    --icon-bg: #2f6ea1;
    --text-light: #ffffff;
    --text-primary: rgba(0, 0, 0, 0.5);
    --text-secondary: rgba(0, 0, 0, 0.5);
    --link-color: #343a40;
    --link-hover-color: rgb(0, 86, 179);
    --header-link-color: rgba(0, 0, 0, 0.5);
    --header-link-hover-color: rgba(0, 0, 0, 0.7);
    --header-link-active-color: rgb(59, 130, 246);
    --register-shell-bg: linear-gradient(180deg, rgb(247, 250, 255) 0%, rgb(255, 255, 255) 100%);
    --register-shell-shadow: 0 24px 60px rgba(31, 59, 92, 0.08);
    --register-art-bg:
        radial-gradient(circle at 16% 18%, rgba(98, 195, 255, 0.18), transparent 34%),
        radial-gradient(circle at 76% 12%, rgba(75, 132, 255, 0.14), transparent 28%),
        linear-gradient(180deg, rgb(249, 252, 255) 0%, rgb(238, 246, 255) 100%);
    --register-art-line-color: rgba(54, 154, 229, 0.16);
    --register-art-panel-bg: linear-gradient(135deg, rgb(79, 211, 255) 0%, rgb(30, 149, 255) 100%);
    --register-art-panel-alt-bg: linear-gradient(135deg, rgb(228, 245, 255) 0%, rgb(196, 230, 255) 100%);
    --register-art-device-bg: linear-gradient(145deg, rgb(46, 59, 79) 0%, rgb(20, 28, 41) 100%);
    --register-art-screen-bg: linear-gradient(145deg, rgb(24, 178, 255) 0%, rgb(34, 103, 228) 100%);
    --register-art-keyboard-bg: linear-gradient(180deg, rgb(233, 240, 246) 0%, rgb(197, 209, 221) 100%);
    --register-art-phone-bg: linear-gradient(180deg, rgb(10, 158, 255) 0%, rgb(8, 104, 208) 100%);
    --register-art-person-left: linear-gradient(180deg, rgb(255, 195, 86) 0%, rgb(244, 142, 38) 100%);
    --register-art-person-right: linear-gradient(180deg, rgb(255, 92, 145) 0%, rgb(215, 35, 99) 100%);
    --register-art-person-top: linear-gradient(180deg, rgb(83, 184, 255) 0%, rgb(12, 118, 228) 100%);
    --register-art-person-skin: rgb(244, 196, 168);
    --register-art-device-shadow: 0 26px 54px rgba(24, 54, 94, 0.18);
    --register-art-phone-shadow: 0 22px 40px rgba(16, 74, 141, 0.22);
    --register-art-screen-gloss: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0 22%, transparent 22%);
    --register-art-screen-glow: radial-gradient(circle at 72% 20%, rgba(255, 255, 255, 0.22), transparent 22%);
    --register-art-phone-dots:
        radial-gradient(circle, rgba(255, 90, 90, 0.9) 0 12%, transparent 13%),
        radial-gradient(circle at 50% 50%, rgba(255, 202, 82, 0.9) 0 12%, transparent 13%),
        radial-gradient(circle at 74% 50%, rgba(51, 208, 144, 0.9) 0 12%, transparent 13%);
    --register-art-phone-gloss: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 100%);
    --register-card-orbit-color: rgba(72, 144, 255, 0.12);
    --register-cloud-border-color: color-mix(in srgb, var(--register-art-panel-bg) 38%, var(--surface-bg));
    --register-card-mask-color: rgba(0, 0, 0, 0.58);
    --register-card-title-icon-bg:
        radial-gradient(circle at 42% 35%, var(--surface-bg) 0 18%, transparent 19%),
        radial-gradient(circle at 68% 64%, var(--surface-bg) 0 18%, transparent 19%),
        linear-gradient(135deg, rgb(27, 31, 43) 0%, rgb(17, 20, 30) 100%);
    --register-card-title-color: rgb(22, 25, 39);
    --register-card-subtitle-color: rgba(54, 62, 79, 0.74);
    --login-title-icon-color: rgb(27, 31, 43);
    --login-guest-link-color: rgb(42, 118, 233);
    --login-guest-link-hover-color: rgb(22, 94, 206);
    --login-prompt-badge-border-color: rgb(233, 72, 72);
    --login-prompt-badge-glow-color: rgba(233, 72, 72, 0.45);
    --login-prompt-auth-badge-border-color: rgb(34, 197, 94);
    --login-prompt-auth-badge-glow-color: rgba(34, 197, 94, 0.45);
    --login-prompt-badge-static-shadow: 0 6px 16px rgba(31, 41, 55, 0.14);
    --login-prompt-title-color: var(--link-color);
    --login-prompt-title-hover-color: var(--link-hover-color);
    --login-prompt-subtitle-color: rgba(73, 80, 87, 0.72);
    --login-prompt-joined-color: rgba(134, 142, 150, 0.8);
    --login-prompt-heart-color: rgb(245, 108, 108);
    --checkin-button-bg: rgb(59, 130, 246);
    --checkin-button-color: rgb(255, 255, 255);
    --checkin-button-checked-bg: rgb(241, 245, 249);
    --checkin-button-checked-color: rgb(0, 123, 255);
    --checkin-button-disabled-bg: rgb(203, 213, 225);
    --checkin-button-disabled-color: rgb(100, 116, 139);
    --checkin-button-spinner-color: rgb(255, 255, 255);
    --checkin-button-spinner-track-color: rgba(255, 255, 255, 0.36);
    --checkin-day-checked-color: rgb(0, 123, 255);
    --checkin-day-missed-color: rgba(100, 116, 139, 0.92);
    --checkin-day-idle-color: rgba(71, 85, 105, 0.84);
    --register-field-bg: rgb(255, 255, 255);
    --register-field-border: rgb(225, 232, 241);
    --register-field-icon-bg: linear-gradient(180deg, rgb(243, 246, 250) 0%, rgb(232, 238, 245) 100%);
    --register-field-icon-color: rgb(100, 110, 125);
    --register-field-text-color: rgb(44, 52, 64);
    --register-field-placeholder-color: rgba(114, 123, 138, 0.9);
    --register-field-focus-ring: rgba(64, 131, 255, 0.18);
    --register-verify-bg: linear-gradient(180deg, rgb(61, 64, 74) 0%, rgb(30, 32, 39) 100%);
    --register-verify-text-color: rgb(255, 255, 255);
    --register-verify-accent: rgb(71, 121, 255);
    --cap-widget-background: rgb(253, 253, 253);
    --cap-widget-border-color: rgba(221, 221, 221, 0.56);
    --cap-widget-color: rgb(33, 33, 33);
    --cap-widget-checkbox-background: rgba(250, 250, 250, 0.57);
    --cap-widget-checkbox-border: 1px solid rgba(221, 221, 221, 0.72);
    --cap-widget-spinner-color: rgb(71, 121, 255);
    --cap-widget-spinner-background-color: rgb(221, 228, 238);
    --cap-widget-border-radius: 6px;
    --register-send-bg: linear-gradient(180deg, rgb(76, 152, 255) 0%, rgb(52, 127, 238) 100%);
    --register-send-text-color: rgb(255, 255, 255);
    --register-send-hover-bg: linear-gradient(180deg, rgb(94, 164, 255) 0%, rgb(65, 140, 247) 100%);
    --register-action-disabled-bg: rgb(226, 231, 238);
    --register-action-disabled-text-color: rgba(100, 116, 139, 0.76);
    --register-send-spinner-color: rgb(255, 255, 255);
    --register-send-spinner-track-color: rgba(255, 255, 255, 0.34);
    --register-submit-bg: linear-gradient(180deg, rgb(142, 187, 255) 0%, rgb(101, 154, 239) 100%);
    --register-submit-text-color: rgb(255, 255, 255);
    --register-submit-hover-bg: linear-gradient(180deg, rgb(160, 199, 255) 0%, rgb(119, 168, 247) 100%);
    --register-submit-disabled-bg: rgb(226, 231, 238);
    --register-submit-disabled-text-color: rgba(100, 116, 139, 0.76);
    --register-submit-loading-spinner-color: rgb(255, 255, 255);
    --register-submit-loading-spinner-track-color: rgba(255, 255, 255, 0.28);
    --register-link-color: rgba(84, 90, 103, 0.8);
    --register-link-hover-color: rgb(52, 127, 238);
    --register-input-shadow: 0 8px 20px rgba(72, 126, 190, 0.08);
    --register-form-notice-info-bg: rgba(64, 131, 255, 0.08);
    --register-form-notice-info-border: rgba(64, 131, 255, 0.22);
    --register-form-notice-info-color: rgb(44, 95, 179);
    --register-form-notice-success-bg: rgba(31, 167, 107, 0.1);
    --register-form-notice-success-border: rgba(31, 167, 107, 0.24);
    --register-form-notice-success-color: rgb(18, 127, 81);
    --register-form-notice-error-bg: rgba(230, 82, 82, 0.1);
    --register-form-notice-error-border: rgba(230, 82, 82, 0.22);
    --register-form-notice-error-color: rgb(183, 56, 56);
    --compose-shell-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(247, 250, 255, 0.96) 100%);
    --compose-shell-border: rgba(171, 190, 216, 0.28);
    --compose-shell-shadow: 0 24px 60px rgba(35, 73, 118, 0.08);
    --compose-title-color: rgb(31, 44, 68);
    --compose-subtitle-color: rgba(73, 87, 112, 0.78);
    --compose-editor-bg: rgba(255, 255, 255, 0.9);
    --compose-editor-border: rgba(180, 197, 220, 0.36);
    --compose-editor-shadow: 0 16px 40px rgba(40, 73, 112, 0.08);
    --compose-panel-bg: linear-gradient(180deg, rgba(248, 251, 255, 0.96) 0%, rgba(241, 247, 255, 0.94) 100%);
    --compose-panel-border: rgba(179, 198, 222, 0.34);
    --compose-panel-heading-color: rgb(35, 48, 74);
    --compose-panel-hint-color: rgba(90, 106, 130, 0.72);
    --compose-field-label-color: rgba(70, 84, 108, 0.82);
    --compose-field-bg: rgba(255, 255, 255, 0.96);
    --compose-field-border: rgba(184, 201, 222, 0.46);
    --compose-field-focus-border: rgba(67, 132, 245, 0.56);
    --compose-field-focus-ring: rgba(67, 132, 245, 0.16);
    --compose-field-text-color: rgb(35, 46, 63);
    --compose-field-placeholder-color: rgba(112, 125, 145, 0.88);
    --compose-board-option-bg: rgba(255, 255, 255, 0.82);
    --compose-board-option-border: rgba(191, 205, 224, 0.5);
    --compose-board-option-hover-bg: rgba(244, 249, 255, 0.96);
    --compose-board-option-active-bg: linear-gradient(135deg, rgba(66, 132, 245, 0.14) 0%, rgba(94, 166, 255, 0.2) 100%);
    --compose-board-option-active-border: rgba(67, 132, 245, 0.48);
    --compose-board-option-title-color: rgb(35, 48, 74);
    --compose-board-option-description-color: rgba(97, 110, 133, 0.82);
    --compose-tag-chip-bg: rgba(255, 255, 255, 0.84);
    --compose-tag-chip-border: rgba(189, 203, 221, 0.52);
    --compose-tag-chip-color: rgb(76, 90, 117);
    --compose-tag-chip-hover-bg: rgba(243, 247, 255, 0.98);
    --compose-tag-chip-active-bg: linear-gradient(135deg, rgb(68, 132, 245) 0%, rgb(100, 168, 255) 100%);
    --compose-tag-chip-active-border: rgba(68, 132, 245, 0.86);
    --compose-tag-chip-active-color: rgb(255, 255, 255);
    --compose-action-ghost-bg: rgba(255, 255, 255, 0.9);
    --compose-action-ghost-border: rgba(174, 191, 213, 0.54);
    --compose-action-ghost-color: rgb(69, 84, 108);
    --compose-action-ghost-hover-bg: rgba(242, 247, 255, 0.98);
    --compose-action-primary-bg: linear-gradient(135deg, rgb(68, 132, 245) 0%, rgb(45, 106, 226) 100%);
    --compose-action-primary-color: rgb(255, 255, 255);
    --compose-action-primary-shadow: 0 18px 30px rgba(45, 106, 226, 0.24);
    --compose-action-primary-hover-bg: linear-gradient(135deg, rgb(82, 145, 255) 0%, rgb(52, 112, 229) 100%);
    --compose-action-disabled-bg: rgb(203, 213, 225);
    --compose-action-disabled-color: rgb(100, 116, 139);
    --compose-action-error-color: rgb(234, 88, 12);
    --compose-action-error-bg: rgb(254, 240, 138);
    --compose-action-spinner-color: rgb(255, 255, 255);
    --compose-emoji-button-bg: rgb(255, 255, 255);
    --compose-emoji-button-hover-bg: rgb(243, 247, 255);
    --compose-emoji-button-color: rgb(100, 116, 139);
    --compose-emoji-popover-bg: rgb(255, 255, 255);
    --compose-emoji-popover-opacity: 0.78;
    --compose-emoji-popover-shadow: rgba(35, 73, 118, 0.18) 0px 14px 30px 0px;
    --compose-emoji-item-bg: rgb(255, 255, 255);
    --compose-emoji-item-hover-bg: rgb(243, 247, 255);
    --compose-upload-backdrop: rgba(237, 244, 255, 0.74);
    --compose-upload-surface-bg: rgba(255, 255, 255, 0.98);
    --compose-upload-surface-shadow: 0 24px 56px rgba(35, 73, 118, 0.16);
    --compose-upload-text-color: rgb(52, 68, 94);
    --compose-upload-spinner-color: rgb(45, 106, 226);
    --compose-reply-only-intro-bg: rgba(66, 132, 245, 0.08);
    --compose-reply-only-intro-border: rgba(66, 132, 245, 0.2);
    --compose-reply-only-intro-color: rgb(44, 95, 179);
    --compose-reply-only-marker-color: rgba(45, 106, 226, 0.68);
    --compose-reply-only-disabled-bg: rgba(244, 248, 255, 0.94);
    --compose-reply-only-disabled-border: rgba(184, 201, 222, 0.54);
    --compose-reply-only-disabled-color: rgb(97, 112, 138);
    --compose-upload-spinner-track-color: rgba(180, 197, 220, 0.5);
    --compose-upload-border: rgba(180, 197, 220, 0.58);
    --compose-upload-close-color: rgba(100, 116, 139, 0.92);
    --compose-upload-dropzone-bg: rgba(247, 250, 255, 0.96);
    --compose-upload-dropzone-border: rgba(184, 201, 222, 0.6);
    --compose-upload-dropzone-hover-bg: rgba(241, 247, 255, 0.98);
    --compose-upload-dropzone-icon-bg: rgba(224, 235, 252, 0.86);
    --compose-upload-dropzone-icon-color: rgb(52, 112, 229);
    --compose-upload-file-list-bg: rgba(255, 255, 255, 0.92);
    --compose-upload-file-list-border: rgba(189, 203, 221, 0.56);
    --compose-upload-file-name-color: rgb(35, 46, 63);
    --compose-upload-file-meta-color: rgba(100, 116, 139, 0.88);
    --compose-upload-file-message-color: rgba(71, 85, 105, 0.92);
    --compose-upload-file-status-uploading: rgb(37, 99, 235);
    --compose-upload-file-status-uploaded: rgb(22, 163, 74);
    --compose-upload-file-status-error: rgb(220, 38, 38);
    --thread-inline-image-border: rgba(189, 203, 221, 0.52);
    --thread-inline-image-bg: rgba(243, 247, 255, 0.92);
    --thread-inline-image-shadow: 0 18px 34px rgba(35, 73, 118, 0.12);
    --thread-inline-image-spinner-color: rgb(59, 130, 246);
    --thread-inline-image-spinner-track-color: rgba(148, 163, 184, 0.34);
    --thread-inline-image-spinner-label-color: rgb(44, 74, 122);
    --thread-inline-image-error-color: rgb(185, 28, 28);
    --thread-inline-image-error-bg: rgba(254, 242, 242, 0.92);
    --thread-inline-image-error-border: rgba(248, 113, 113, 0.52);
    --user-profile-hero-bg:
        radial-gradient(circle at 18% 24%, rgba(89, 159, 255, 0.34), transparent 20%),
        radial-gradient(circle at 52% 34%, rgba(144, 196, 255, 0.26), transparent 24%),
        linear-gradient(180deg, rgb(218, 232, 252) 0%, rgb(201, 223, 251) 100%);
    --user-profile-hero-grid-color: rgba(255, 255, 255, 0.16);
    --user-profile-summary-bg: var(--surface-bg);
    --user-profile-summary-border: rgba(214, 223, 235, 0.86);
    --user-profile-summary-shadow: 0 18px 34px rgba(33, 56, 89, 0.08);
    --user-profile-avatar-border: rgb(255, 255, 255);
    --user-profile-avatar-shadow: rgba(32, 48, 74, 0.14) 0px 8px 18px 0px;
    --user-profile-name-color: rgb(33, 37, 41);
    --user-profile-points-hero-bg: linear-gradient(135deg, rgb(241, 246, 255) 0%, rgb(229, 238, 255) 100%);
    --user-profile-points-hero-border: rgba(148, 184, 255, 0.32);
    --user-profile-points-hero-eyebrow-color: rgba(90, 99, 114, 0.86);
    --user-profile-points-hero-level-color: rgb(30, 64, 175);
    --user-profile-points-hero-meta-color: rgba(73, 80, 87, 0.9);
    --user-profile-points-progress-track: rgba(191, 219, 254, 0.62);
    --user-profile-points-progress-fill: linear-gradient(90deg, rgb(59, 130, 246) 0%, rgb(96, 165, 250) 100%);
    --user-profile-points-card-bg: rgb(250, 252, 255);
    --user-profile-points-card-border: rgba(226, 232, 240, 0.96);
    --user-profile-points-card-label-color: rgba(108, 117, 125, 0.9);
    --user-profile-points-card-value-color: rgb(33, 37, 41);
    --user-profile-points-card-helper-color: rgba(108, 117, 125, 0.86);
    --user-profile-points-card-chart-bg: rgba(226, 232, 240, 0.94);
    --user-profile-points-total-accent: rgb(59, 130, 246);
    --user-profile-points-streak-accent: rgb(14, 165, 233);
    --user-profile-points-week-accent: rgb(34, 197, 94);
    --user-profile-points-month-accent: rgb(245, 158, 11);
    --user-profile-points-week-bg: rgb(248, 250, 252);
    --user-profile-points-week-border: rgba(226, 232, 240, 0.94);
    --user-profile-points-week-title-color: rgb(33, 37, 41);
    --user-profile-points-week-hint-color: rgba(108, 117, 125, 0.88);
    --user-profile-action-logout-bg: rgb(239, 68, 68);
    --user-profile-action-logout-color: rgb(255, 255, 255);
    --user-profile-action-logout-hover-bg: rgb(220, 38, 38);
    --user-profile-stat-label-color: rgba(108, 117, 125, 0.9);
    --user-profile-stat-value-color: rgb(33, 37, 41);
    --user-profile-nav-bg: var(--surface-bg);
    --user-profile-nav-border: rgba(214, 223, 235, 0.86);
    --user-profile-nav-item-color: rgb(73, 80, 87);
    --user-profile-nav-item-hover-bg: rgb(244, 247, 251);
    --user-profile-nav-item-active-bg: rgba(41, 151, 247, 0.1);
    --user-profile-nav-item-active-color: rgb(59, 130, 246);
    --user-profile-nav-icon-color: rgba(134, 142, 150, 0.82);
    --user-profile-nav-indicator-bg: rgb(59, 130, 246);
    --user-profile-nav-message-dot-bg: rgb(225, 29, 72);
    --user-profile-panel-bg: var(--surface-bg);
    --user-profile-panel-border: rgba(214, 223, 235, 0.86);
    --user-profile-panel-shadow: 0 18px 34px rgba(33, 56, 89, 0.06);
    --user-profile-tab-color: rgba(90, 99, 114, 0.82);
    --user-profile-tab-active-color: rgb(52, 58, 64);
    --user-profile-tab-active-border: rgb(59, 130, 246);
    --user-profile-field-label-color: rgba(108, 117, 125, 0.92);
    --user-profile-field-value-color: rgb(52, 58, 64);
    --user-profile-field-divider: rgba(226, 232, 240, 0.92);
    --user-profile-password-intro-color: rgba(90, 99, 114, 0.88);
    --user-profile-password-submit-bg: var(--compose-action-primary-bg);
    --user-profile-password-submit-color: var(--compose-action-primary-color);
    --user-profile-password-submit-hover-bg: var(--compose-action-primary-hover-bg);
    --user-profile-password-submit-disabled-bg: var(--compose-action-disabled-bg);
    --user-profile-password-submit-disabled-color: var(--compose-action-disabled-color);
    --user-profile-password-spinner-color: var(--compose-action-spinner-color);
    --user-profile-password-spinner-track-color: rgba(255, 255, 255, 0.32);
    --user-profile-password-notice-success-bg: var(--register-form-notice-success-bg);
    --user-profile-password-notice-success-border: var(--register-form-notice-success-border);
    --user-profile-password-notice-success-color: var(--register-form-notice-success-color);
    --user-profile-password-notice-error-bg: var(--register-form-notice-error-bg);
    --user-profile-password-notice-error-border: var(--register-form-notice-error-border);
    --user-profile-password-notice-error-color: var(--register-form-notice-error-color);
    --user-profile-permission-toggle-bg: var(--user-profile-avatar-card-bg);
    --user-profile-permission-toggle-border: var(--user-profile-avatar-card-border);
    --user-profile-permission-toggle-active-bg: var(--user-profile-avatar-card-active-bg);
    --user-profile-permission-toggle-active-border: var(--user-profile-avatar-card-active-border);
    --user-profile-permission-toggle-label-color: var(--user-profile-field-value-color);
    --user-profile-permission-toggle-hint-color: var(--user-profile-password-intro-color);
    --user-profile-avatar-panel-bg: rgba(247, 250, 255, 0.92);
    --user-profile-avatar-panel-border: rgba(226, 232, 240, 0.96);
    --user-profile-avatar-current-bg: rgba(255, 255, 255, 0.92);
    --user-profile-avatar-current-border: rgba(191, 219, 254, 0.72);
    --user-profile-avatar-current-shadow: 0 18px 34px rgba(35, 73, 118, 0.12);
    --user-profile-avatar-card-bg: rgba(255, 255, 255, 0.94);
    --user-profile-avatar-card-border: rgba(203, 213, 225, 0.92);
    --user-profile-avatar-card-hover-bg: rgba(248, 250, 252, 0.98);
    --user-profile-avatar-card-hover-border: rgba(96, 165, 250, 0.58);
    --user-profile-avatar-card-active-bg: rgba(239, 246, 255, 0.98);
    --user-profile-avatar-card-active-border: rgba(59, 130, 246, 0.72);
    --user-profile-avatar-card-active-shadow: 0 16px 32px rgba(59, 130, 246, 0.14);
    --user-follow-feed-item-bg: rgb(255, 255, 255);
    --user-follow-feed-item-border: rgba(226, 232, 240, 0.94);
    --user-follow-feed-item-hover-bg: rgb(248, 250, 252);
    --user-follow-feed-actor-color: rgb(30, 41, 59);
    --user-follow-feed-verb-color: rgba(108, 117, 125, 0.9);
    --user-follow-feed-thread-color: rgb(30, 64, 175);
    --user-follow-feed-thread-hover-color: rgb(30, 58, 138);
    --user-follow-feed-time-color: rgba(108, 117, 125, 0.86);
    --user-follow-card-bg: rgb(255, 255, 255);
    --user-follow-card-border: rgba(226, 232, 240, 0.94);
    --user-follow-card-hover-bg: rgb(248, 250, 252);
    --user-follow-card-username-color: rgb(30, 41, 59);
    --user-follow-card-action-bg: rgba(220, 38, 38, 0.08);
    --user-follow-card-action-border: rgba(220, 38, 38, 0.24);
    --user-follow-card-action-color: rgb(185, 28, 28);
    --user-follow-card-action-hover-bg: rgba(220, 38, 38, 0.14);
    --user-follow-card-checkbox-border: rgba(203, 213, 225, 0.96);
    --user-follow-card-checkbox-bg: rgb(255, 255, 255);
    --user-follow-card-checkbox-checked-bg: rgb(59, 130, 246);
    --user-follow-card-checkbox-checked-border: rgb(59, 130, 246);
    --user-follow-card-checkbox-check-color: rgb(255, 255, 255);
    --user-follow-empty-color: rgba(108, 117, 125, 0.9);
    --user-message-toolbar-bg: rgb(244, 247, 251);
    --user-message-toolbar-border: rgba(214, 223, 235, 0.92);
    --user-message-toolbar-text: rgba(73, 80, 87, 0.92);
    --user-message-toolbar-strong: rgb(33, 37, 41);
    --user-message-button-bg: rgb(255, 255, 255);
    --user-message-button-border: rgba(203, 213, 225, 0.96);
    --user-message-button-text: rgb(73, 80, 87);
    --user-message-button-hover-bg: rgb(248, 250, 252);
    --user-message-button-danger-bg: rgba(220, 38, 38, 0.1);
    --user-message-button-danger-border: rgba(220, 38, 38, 0.34);
    --user-message-button-danger-text: rgb(185, 28, 28);
    --user-message-list-item-bg: rgb(255, 255, 255);
    --user-message-list-item-border: rgba(226, 232, 240, 0.94);
    --user-message-list-item-unread-bar: rgb(59, 130, 246);
    --user-message-list-title-color: rgb(52, 58, 64);
    --user-message-list-link-color: rgb(0, 123, 255);
    --user-message-list-link-hover-color: rgb(0, 86, 179);
    --user-message-actor-name-color: rgb(30, 41, 59);
    --user-message-title-action-color: rgba(73, 80, 87, 0.92);
    --user-message-list-time-color: rgba(108, 117, 125, 0.86);
    --user-message-list-body-bg: rgb(248, 250, 252);
    --user-message-list-body-border: rgba(226, 232, 240, 0.92);
    --user-message-body-prefix-color: rgba(108, 117, 125, 0.92);
    --user-message-body-link-border: rgba(0, 123, 255, 0.42);
    --user-message-empty-color: rgba(108, 117, 125, 0.86);
    --user-message-select-border: rgba(203, 213, 225, 0.98);
    --user-message-select-bg: rgb(255, 255, 255);
    --user-message-select-checked-bg: rgb(59, 130, 246);
    --user-message-select-checked-border: rgb(59, 130, 246);
    --user-message-select-check-color: rgb(255, 255, 255);
    --user-message-toggle-indicator-color: rgba(108, 117, 125, 0.74);
    --user-message-toggle-hover-bg: rgb(248, 250, 252);
    --user-message-open-border: rgba(59, 130, 246, 0.28);
    --user-message-open-shadow: rgba(59, 130, 246, 0.12);
    --user-message-delete-button-bg: rgba(220, 38, 38, 0.08);
    --user-message-delete-button-border: rgba(220, 38, 38, 0.2);
    --user-message-delete-button-text: rgb(185, 28, 28);
    --user-message-delete-button-hover-bg: rgba(220, 38, 38, 0.14);
    --user-message-admin-badge-bg: rgba(14, 116, 144, 0.08);
    --user-message-admin-badge-border: rgba(14, 116, 144, 0.18);
    --user-message-admin-badge-color: rgb(14, 116, 144);
    --user-message-locked-color: rgba(14, 116, 144, 0.92);
    --admin-user-message-state-read-bg: rgba(148, 163, 184, 0.14);
    --admin-user-message-state-read-color: rgb(100, 116, 139);
    --admin-user-message-state-unread-bg: rgba(59, 130, 246, 0.12);
    --admin-user-message-state-unread-color: rgb(37, 99, 235);
    --admin-direct-modal-backdrop: rgba(15, 23, 42, 0.56);
    --user-profile-sidebar-width: 285px;
    --user-profile-hero-height: 235px;
    --user-profile-shell-top-padding: 144px;
    --user-profile-avatar-size: 120px;
    --user-profile-avatar-overlap-ratio: 0.25;
    --jump-page-brand-bg: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.98) 0%,
        rgba(244, 247, 255, 0.98) 58%,
        rgba(233, 241, 255, 0.98) 100%
    );
    --jump-page-brand-border: rgba(206, 219, 238, 0.92);
    --jump-page-brand-shadow: 0 18px 36px rgba(134, 167, 214, 0.14);
    --jump-page-card-shadow: 0 24px 48px rgba(148, 163, 184, 0.18);
    --jump-page-logo-bg: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.98) 0%,
        rgba(226, 238, 254, 0.98) 100%
    );
    --jump-page-logo-shadow: 0 12px 28px rgba(134, 167, 214, 0.16);
    --jump-page-eyebrow-color: rgb(37, 99, 235);
    --jump-page-title-color: rgb(30, 41, 59);
    --jump-page-summary-color: rgba(73, 80, 87, 0.92);
    --jump-page-notice-bg: rgba(255, 247, 237, 0.96);
    --jump-page-notice-border: rgba(251, 146, 60, 0.32);
    --jump-page-notice-color: rgb(180, 83, 9);
    --jump-page-url-bg: rgba(244, 247, 255, 0.96);
    --jump-page-url-border: rgba(203, 213, 225, 0.92);
    --jump-page-url-label-color: rgba(100, 116, 139, 0.92);
    --jump-page-url-color: rgb(30, 41, 59);
    --jump-page-primary-bg: rgb(59, 130, 246);
    --jump-page-primary-hover-bg: rgb(37, 99, 235);
    --jump-page-primary-color: rgb(255, 255, 255);
    --jump-page-primary-shadow: 0 14px 28px rgba(59, 130, 246, 0.22);
    --jump-page-secondary-bg: rgb(255, 255, 255);
    --jump-page-secondary-border: rgba(203, 213, 225, 0.96);
    --jump-page-secondary-color: rgb(73, 80, 87);
    --jump-page-secondary-hover-bg: rgb(248, 250, 252);
    --jump-page-action-disabled-bg: rgb(241, 245, 249);
    --jump-page-action-disabled-border: rgba(203, 213, 225, 0.96);
    --jump-page-action-disabled-color: rgba(148, 163, 184, 0.92);
    --interactive-hover-brightness: 1.04;
    --container-width: 1200px;
    --page-stack-gap: 18px;
    --topbar-height: 64px;
    --sidebar-sticky-top: calc(var(--topbar-height) + var(--page-stack-gap));
    --theme-transition-duration: 900ms;
    --theme-transition-easing: cubic-bezier(0.22, 1, 0.36, 1);
    --topbar-theme-button-pulse-bg: var(--topbar-theme-button-hover-bg);
}

html {
    scroll-behavior: smooth;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

:root[data-theme-transition-direction="outward"]::view-transition-old(root) {
    z-index: 0;
}

:root[data-theme-transition-direction="outward"]::view-transition-new(root) {
    z-index: 1;
}

:root[data-theme-transition-direction="inward"]::view-transition-old(root) {
    z-index: 1;
}

:root[data-theme-transition-direction="inward"]::view-transition-new(root) {
    z-index: 0;
}

:root[data-theme="dark"] {
    --topbar-search-button-color: rgb(222, 226, 230);
    --topbar-theme-button-bg: var(--topbar-icon-action-bg);
    --topbar-theme-button-color: var(--topbar-icon-action-color);
    --topbar-theme-button-hover-bg: var(--topbar-icon-action-hover-bg);
    --topbar-theme-button-hover-color: var(--topbar-icon-action-hover-color);
    --topbar-icon-action-bg: rgb(36, 46, 60);
    --topbar-icon-action-color: rgb(204, 214, 226);
    --topbar-icon-action-hover-bg: rgb(51, 64, 82);
    --topbar-icon-action-hover-color: rgb(245, 249, 255);
    --topbar-message-alert-color: rgb(251, 113, 133);
    --topbar-message-alert-hover-color: rgb(244, 63, 94);
    --topbar-message-alert-shadow: rgba(244, 63, 94, 0.28);
    --topbar-message-alert-translate-distance: 2px;
    --topbar-compose-bg: rgb(73, 136, 243);
    --topbar-compose-color: rgb(255, 255, 255);
    --topbar-compose-hover-bg: rgb(37, 99, 235);
    --topbar-avatar-bg: rgb(35, 46, 61);
    --topbar-avatar-border: rgb(255, 255, 255);
    --topbar-avatar-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px 0px;
    --topbar-avatar-fallback-bg: linear-gradient(135deg, rgb(126, 188, 102) 0%, rgb(82, 140, 75) 100%);
    --topbar-avatar-fallback-color: rgb(255, 255, 255);
    --topbar-user-menu-panel-bg: rgb(28, 40, 56);
    --topbar-user-menu-panel-border: rgba(78, 103, 136, 0.46);
    --topbar-user-menu-panel-shadow: 0 22px 40px rgba(0, 0, 0, 0.36);
    --topbar-user-menu-eyebrow-color: rgba(191, 203, 221, 0.78);
    --topbar-user-menu-level-color: rgb(226, 234, 245);
    --topbar-user-menu-exp-color: rgba(191, 203, 221, 0.84);
    --topbar-user-menu-progress-track: rgba(58, 74, 96, 0.92);
    --topbar-user-menu-progress-fill: rgb(127, 187, 255);
    --topbar-user-menu-name-color: rgba(212, 223, 238, 0.88);
    --topbar-user-menu-entry-color: rgba(226, 234, 245, 0.9);
    --topbar-user-menu-entry-icon-color: rgba(191, 203, 221, 0.8);
    --topbar-user-menu-entry-hover-bg: rgba(73, 136, 243, 0.14);
    --topbar-user-menu-entry-hover-color: rgb(158, 208, 255);
    --topbar-user-menu-logout-bg: rgba(31, 45, 63, 0.92);
    --topbar-user-menu-logout-border: rgba(251, 113, 133, 0.44);
    --topbar-user-menu-logout-color: rgb(251, 113, 133);
    --topbar-user-menu-logout-hover-bg: rgba(76, 41, 55, 0.96);
    --register-shell-bg: linear-gradient(180deg, rgb(20, 27, 38) 0%, rgb(15, 20, 29) 100%);
    --register-shell-shadow: 0 24px 60px rgba(0, 0, 0, 0.38);
    --register-art-bg:
        radial-gradient(circle at 16% 18%, rgba(65, 161, 255, 0.16), transparent 34%),
        radial-gradient(circle at 76% 12%, rgba(122, 195, 255, 0.12), transparent 28%),
        linear-gradient(180deg, rgb(16, 26, 38) 0%, rgb(20, 34, 51) 100%);
    --register-art-line-color: rgba(146, 205, 255, 0.14);
    --register-art-panel-bg: linear-gradient(135deg, rgb(53, 138, 232) 0%, rgb(27, 90, 173) 100%);
    --register-art-panel-alt-bg: linear-gradient(135deg, rgb(40, 63, 90) 0%, rgb(25, 42, 63) 100%);
    --register-art-device-bg: linear-gradient(145deg, rgb(59, 76, 101) 0%, rgb(18, 24, 36) 100%);
    --register-art-screen-bg: linear-gradient(145deg, rgb(40, 162, 238) 0%, rgb(34, 86, 181) 100%);
    --register-art-keyboard-bg: linear-gradient(180deg, rgb(66, 81, 101) 0%, rgb(36, 47, 63) 100%);
    --register-art-phone-bg: linear-gradient(180deg, rgb(28, 131, 225) 0%, rgb(17, 76, 160) 100%);
    --register-card-title-color: rgb(247, 250, 255);
    --register-card-subtitle-color: rgba(216, 226, 239, 0.78);
    --login-title-icon-color: rgb(241, 247, 255);
    --login-guest-link-color: rgb(127, 187, 255);
    --login-guest-link-hover-color: rgb(158, 208, 255);
    --login-prompt-badge-border-color: rgb(95, 159, 255);
    --login-prompt-badge-glow-color: rgba(95, 159, 255, 0.45);
    --login-prompt-auth-badge-border-color: rgb(34, 197, 94);
    --login-prompt-auth-badge-glow-color: rgba(34, 197, 94, 0.45);
    --login-prompt-badge-static-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
    --login-prompt-title-color: rgb(238, 244, 252);
    --login-prompt-title-hover-color: rgb(158, 208, 255);
    --login-prompt-subtitle-color: rgba(201, 212, 226, 0.72);
    --login-prompt-joined-color: rgba(191, 203, 221, 0.8);
    --login-prompt-heart-color: rgb(245, 108, 108);
    --checkin-button-bg: rgb(73, 136, 243);
    --checkin-button-color: rgb(255, 255, 255);
    --checkin-button-checked-bg: rgb(241, 245, 249);
    --checkin-button-checked-color: rgb(0, 123, 255);
    --checkin-button-disabled-bg: rgb(71, 85, 105);
    --checkin-button-disabled-color: rgb(203, 213, 225);
    --checkin-button-spinner-color: rgb(255, 255, 255);
    --checkin-button-spinner-track-color: rgba(255, 255, 255, 0.36);
    --checkin-day-checked-color: rgb(0, 123, 255);
    --checkin-day-missed-color: rgba(191, 203, 221, 0.78);
    --checkin-day-idle-color: rgba(191, 203, 221, 0.72);
    --thread-action-button-active-bg: rgba(71, 85, 105, 0.66);
    --thread-action-button-active-color: rgba(226, 232, 240, 0.72);
    --thread-action-button-spinner-color: rgb(127, 187, 255);
    --thread-action-button-spinner-track-color: rgba(191, 203, 221, 0.28);
    --thread-card-action-active-bg: rgba(51, 65, 85, 0.72);
    --thread-card-action-active-text-color: rgba(226, 232, 240, 0.72);
    --thread-card-action-active-border-color: rgba(100, 116, 139, 0.74);
    --thread-card-action-spinner-color: rgb(127, 187, 255);
    --thread-card-action-spinner-track-color: rgba(191, 203, 221, 0.28);
    --thread-comment-heading-count-bg: rgba(51, 65, 85, 0.92);
    --thread-comment-heading-count-color: rgba(226, 232, 240, 0.82);
    --thread-comment-sort-color: rgba(191, 203, 221, 0.72);
    --thread-comment-sort-active-color: rgb(127, 187, 255);
    --thread-comment-sort-divider-color: rgba(71, 85, 105, 0.9);
    --thread-comment-composer-bg: rgba(30, 41, 59, 0.74);
    --thread-comment-composer-border: rgba(71, 85, 105, 0.92);
    --thread-comment-composer-plain-bg: rgb(255, 255, 255);
    --thread-comment-field-bg: rgba(15, 23, 42, 0.72);
    --thread-comment-field-border: rgba(71, 85, 105, 0.9);
    --thread-comment-field-focus-ring: rgba(96, 165, 250, 0.24);
    --thread-comment-meta-color: rgba(191, 203, 221, 0.78);
    --thread-page-body-color: rgb(33, 37, 41);
    --thread-content-link-color: rgb(146, 194, 244);
    --thread-content-link-hover-color: rgb(182, 217, 255);
    --thread-comment-author-color: rgb(108, 117, 125);
    --thread-comment-body-color: rgb(33, 37, 41);
    --thread-comment-avatar-ring: rgba(51, 65, 85, 0.92);
    --thread-comment-avatar-border: rgba(255, 255, 255, 0.92);
    --thread-comment-avatar-shadow: rgba(0, 0, 0, 0.24) 0px 2px 4px 0px;
    --thread-comment-floor-bg: rgba(136, 136, 136, 0.1);
    --thread-comment-floor-color: rgb(136, 136, 136);
    --thread-comment-divider-color: rgba(51, 65, 85, 0.92);
    --thread-comment-action-color: rgba(191, 203, 221, 0.82);
    --thread-comment-action-hover-color: rgb(127, 187, 255);
    --thread-comment-delete-color: var(--thread-delete-button-color);
    --thread-comment-delete-hover-color: var(--thread-delete-button-hover-color);
    --thread-comment-action-active-color: rgba(191, 203, 221, 0.56);
    --thread-comment-action-spinner-color: rgb(127, 187, 255);
    --thread-comment-action-spinner-track-color: rgba(191, 203, 221, 0.28);
    --thread-comment-submit-bg: rgb(73, 136, 243);
    --thread-comment-submit-hover-bg: rgb(37, 99, 235);
    --thread-comment-submit-color: rgb(255, 255, 255);
    --thread-comment-submit-disabled-bg: rgba(100, 116, 139, 0.9);
    --thread-comment-cancel-bg: rgba(30, 41, 59, 0.92);
    --thread-comment-cancel-hover-bg: rgba(51, 65, 85, 0.96);
    --thread-comment-cancel-color: rgba(226, 232, 240, 0.9);
    --thread-comment-submit-spinner-color: rgb(255, 255, 255);
    --thread-comment-submit-spinner-track-color: rgba(255, 255, 255, 0.28);
    --thread-comment-error-bg: rgba(127, 29, 29, 0.24);
    --thread-comment-error-color: rgb(252, 165, 165);
    --thread-comment-tab-bg: rgba(51, 65, 85, 0.72);
    --thread-comment-tab-hover-bg: rgba(71, 85, 105, 0.9);
    --thread-comment-tab-color: rgba(191, 203, 221, 0.84);
    --thread-comment-tab-active-bg: rgba(15, 23, 42, 0.74);
    --thread-comment-tab-active-color: rgba(241, 245, 249, 0.94);
    --thread-comment-preview-bg: rgba(15, 23, 42, 0.72);
    --thread-comment-preview-border: rgba(71, 85, 105, 0.9);
    --thread-comment-preview-empty-color: rgba(191, 203, 221, 0.78);
    --thread-comment-emoji-bg: rgba(15, 23, 42, 0.72);
    --thread-comment-emoji-border: rgba(71, 85, 105, 0.9);
    --thread-comment-emoji-color: rgba(191, 203, 221, 0.86);
    --thread-comment-emoji-hover-bg: rgba(30, 41, 59, 0.92);
    --thread-comment-emoji-hover-color: rgb(127, 187, 255);
    --thread-comment-emoji-panel-bg: rgba(15, 23, 42, 0.72);
    --thread-comment-emoji-panel-border: rgba(71, 85, 105, 0.9);
    --thread-comment-emoji-panel-shadow: rgba(2, 6, 23, 0.45) 0px 8px 18px 0px;
    --thread-comment-emoji-item-bg: rgba(15, 23, 42, 0.28);
    --thread-comment-emoji-item-hover-bg: rgba(30, 41, 59, 0.92);
    --thread-comment-emoji-item-color: rgba(226, 232, 240, 0.88);
    --thread-comment-child-tools-color: rgba(191, 203, 221, 0.86);
    --thread-comment-child-tools-hover-color: rgb(127, 187, 255);
    --thread-comment-child-panel-bg: rgba(15, 23, 42, 0.52);
    --thread-comment-child-panel-border: rgba(71, 85, 105, 0.92);
    --thread-comment-child-item-bg: transparent;
    --thread-comment-child-item-border: rgba(71, 85, 105, 0.82);
    --thread-comment-child-author-color: rgba(226, 232, 240, 0.9);
    --thread-comment-child-time-color: rgba(191, 203, 221, 0.78);
    --thread-comment-child-body-color: rgba(226, 232, 240, 0.88);
    --thread-comment-guest-bg: rgba(15, 23, 42, 0.64);
    --thread-comment-guest-border: rgba(51, 65, 85, 0.92);
    --thread-comment-guest-title-color: rgba(241, 245, 249, 0.94);
    --thread-comment-guest-link-bg: rgb(73, 136, 243);
    --thread-comment-guest-link-border: rgb(73, 136, 243);
    --thread-comment-guest-link-hover-bg: rgb(37, 99, 235);
    --thread-comment-guest-link-color: rgb(255, 255, 255);
    --thread-comment-guest-secondary-bg: rgba(15, 23, 42, 0.12);
    --thread-comment-guest-secondary-border: rgba(100, 116, 139, 0.92);
    --thread-comment-guest-secondary-hover-bg: rgba(51, 65, 85, 0.64);
    --thread-comment-guest-secondary-color: rgba(226, 232, 240, 0.86);
    --thread-comment-empty-icon-color: rgba(134, 142, 150, 0.8);
    --register-card-orbit-color: rgba(126, 188, 255, 0.1);
    --register-field-bg: rgba(16, 24, 37, 0.84);
    --register-field-border: rgba(112, 139, 175, 0.3);
    --register-field-icon-bg: linear-gradient(180deg, rgb(33, 43, 59) 0%, rgb(25, 33, 46) 100%);
    --register-field-icon-color: rgb(188, 201, 219);
    --register-field-text-color: rgb(239, 244, 250);
    --register-field-placeholder-color: rgba(188, 201, 219, 0.72);
    --register-field-focus-ring: rgba(70, 143, 255, 0.28);
    --register-verify-bg: linear-gradient(180deg, rgb(62, 68, 84) 0%, rgb(31, 36, 49) 100%);
    --cap-widget-background: rgb(30, 30, 30);
    --cap-widget-border-color: rgb(68, 68, 68);
    --cap-widget-color: rgb(224, 224, 224);
    --cap-widget-checkbox-background: rgb(45, 45, 45);
    --cap-widget-checkbox-border: 1px solid rgb(102, 102, 102);
    --cap-widget-spinner-color: rgb(160, 208, 255);
    --cap-widget-spinner-background-color: rgb(51, 51, 51);
    --register-link-color: rgba(214, 223, 236, 0.84);
    --register-link-hover-color: rgb(123, 183, 255);
    --register-input-shadow: 0 12px 24px rgba(0, 0, 0, 0.24);
    --register-send-hover-bg: linear-gradient(180deg, rgb(88, 159, 248) 0%, rgb(62, 132, 233) 100%);
    --register-action-disabled-bg: rgb(74, 84, 96);
    --register-action-disabled-text-color: rgba(226, 232, 240, 0.54);
    --register-submit-hover-bg: linear-gradient(180deg, rgb(125, 176, 255) 0%, rgb(90, 146, 240) 100%);
    --register-submit-disabled-bg: rgb(74, 84, 96);
    --register-submit-disabled-text-color: rgba(226, 232, 240, 0.54);
    --register-submit-loading-spinner-color: rgb(226, 232, 240);
    --register-submit-loading-spinner-track-color: rgba(226, 232, 240, 0.22);
    --register-form-notice-info-bg: rgba(74, 137, 230, 0.14);
    --register-form-notice-info-border: rgba(117, 169, 243, 0.28);
    --register-form-notice-info-color: rgb(194, 221, 255);
    --register-form-notice-success-bg: rgba(44, 145, 106, 0.18);
    --register-form-notice-success-border: rgba(80, 185, 144, 0.3);
    --register-form-notice-success-color: rgb(190, 241, 218);
    --register-form-notice-error-bg: rgba(184, 71, 71, 0.18);
    --register-form-notice-error-border: rgba(218, 105, 105, 0.28);
    --register-form-notice-error-color: rgb(255, 208, 208);
    --compose-shell-bg: linear-gradient(180deg, rgba(18, 27, 39, 0.96) 0%, rgba(15, 23, 34, 0.98) 100%);
    --compose-shell-border: rgba(98, 124, 160, 0.3);
    --compose-shell-shadow: 0 26px 68px rgba(0, 0, 0, 0.34);
    --compose-title-color: rgb(239, 245, 255);
    --compose-subtitle-color: rgba(196, 209, 230, 0.76);
    --compose-editor-bg: rgba(18, 28, 40, 0.86);
    --compose-editor-border: rgba(94, 118, 150, 0.34);
    --compose-editor-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
    --compose-panel-bg: linear-gradient(180deg, rgba(23, 35, 50, 0.94) 0%, rgba(18, 29, 43, 0.96) 100%);
    --compose-panel-border: rgba(92, 118, 150, 0.34);
    --compose-panel-heading-color: rgb(237, 243, 253);
    --compose-panel-hint-color: rgba(182, 197, 219, 0.7);
    --compose-field-label-color: rgba(201, 214, 234, 0.82);
    --compose-field-bg: rgba(16, 24, 36, 0.9);
    --compose-field-border: rgba(95, 118, 149, 0.42);
    --compose-field-focus-border: rgba(102, 163, 255, 0.68);
    --compose-field-focus-ring: rgba(102, 163, 255, 0.22);
    --compose-field-text-color: rgb(237, 243, 251);
    --compose-field-placeholder-color: rgba(161, 178, 204, 0.74);
    --compose-board-option-bg: rgba(21, 33, 49, 0.88);
    --compose-board-option-border: rgba(91, 114, 145, 0.42);
    --compose-board-option-hover-bg: rgba(27, 41, 60, 0.96);
    --compose-board-option-active-bg: linear-gradient(135deg, rgba(76, 136, 229, 0.24) 0%, rgba(58, 102, 188, 0.28) 100%);
    --compose-board-option-active-border: rgba(102, 163, 255, 0.6);
    --compose-board-option-title-color: rgb(234, 241, 250);
    --compose-board-option-description-color: rgba(180, 194, 214, 0.8);
    --compose-tag-chip-bg: rgba(21, 33, 49, 0.86);
    --compose-tag-chip-border: rgba(94, 116, 147, 0.42);
    --compose-tag-chip-color: rgb(199, 211, 229);
    --compose-tag-chip-hover-bg: rgba(27, 41, 60, 0.96);
    --compose-tag-chip-active-bg: linear-gradient(135deg, rgb(70, 132, 231) 0%, rgb(53, 106, 203) 100%);
    --compose-tag-chip-active-border: rgba(112, 170, 255, 0.84);
    --compose-tag-chip-active-color: rgb(255, 255, 255);
    --compose-action-ghost-bg: rgba(21, 33, 49, 0.92);
    --compose-action-ghost-border: rgba(93, 117, 149, 0.44);
    --compose-action-ghost-color: rgb(214, 225, 242);
    --compose-action-ghost-hover-bg: rgba(30, 45, 66, 0.98);
    --compose-action-primary-bg: linear-gradient(135deg, rgb(69, 132, 241) 0%, rgb(48, 103, 213) 100%);
    --compose-action-primary-color: rgb(255, 255, 255);
    --compose-action-primary-shadow: 0 18px 32px rgba(20, 54, 121, 0.34);
    --compose-action-primary-hover-bg: linear-gradient(135deg, rgb(87, 147, 252) 0%, rgb(56, 111, 220) 100%);
    --compose-action-disabled-bg: rgb(71, 85, 105);
    --compose-action-disabled-color: rgb(203, 213, 225);
    --compose-action-error-color: rgb(253, 186, 116);
    --compose-action-error-bg: rgb(202, 138, 4);
    --compose-action-spinner-color: rgb(255, 255, 255);
    --compose-emoji-button-bg: rgba(21, 33, 49, 0.92);
    --compose-emoji-button-hover-bg: rgba(30, 45, 66, 0.98);
    --compose-emoji-button-color: rgb(199, 211, 229);
    --compose-emoji-popover-bg: rgb(18, 28, 40);
    --compose-emoji-popover-opacity: 0.72;
    --compose-emoji-popover-shadow: rgba(0, 0, 0, 0.34) 0px 14px 30px 0px;
    --compose-emoji-item-bg: rgba(21, 33, 49, 0.86);
    --compose-emoji-item-hover-bg: rgba(30, 45, 66, 0.98);
    --compose-upload-backdrop: rgba(7, 11, 18, 0.78);
    --compose-upload-surface-bg: rgba(18, 28, 40, 0.98);
    --compose-upload-surface-shadow: 0 24px 56px rgba(0, 0, 0, 0.34);
    --compose-upload-text-color: rgb(214, 225, 242);
    --compose-upload-spinner-color: rgb(127, 187, 255);
    --compose-reply-only-intro-bg: rgba(70, 132, 231, 0.18);
    --compose-reply-only-intro-border: rgba(112, 170, 255, 0.26);
    --compose-reply-only-intro-color: rgb(194, 221, 255);
    --compose-reply-only-marker-color: rgba(140, 197, 255, 0.72);
    --compose-reply-only-disabled-bg: rgba(20, 31, 46, 0.88);
    --compose-reply-only-disabled-border: rgba(95, 118, 149, 0.48);
    --compose-reply-only-disabled-color: rgba(192, 204, 222, 0.82);
    --compose-upload-spinner-track-color: rgba(94, 116, 147, 0.46);
    --compose-upload-border: rgba(94, 116, 147, 0.48);
    --compose-upload-close-color: rgba(191, 203, 221, 0.86);
    --compose-upload-dropzone-bg: rgba(21, 33, 49, 0.9);
    --compose-upload-dropzone-border: rgba(94, 116, 147, 0.56);
    --compose-upload-dropzone-hover-bg: rgba(30, 45, 66, 0.98);
    --compose-upload-dropzone-icon-bg: rgba(40, 59, 87, 0.84);
    --compose-upload-dropzone-icon-color: rgb(147, 197, 253);
    --compose-upload-file-list-bg: rgba(16, 24, 36, 0.86);
    --compose-upload-file-list-border: rgba(94, 116, 147, 0.5);
    --compose-upload-file-name-color: rgb(237, 243, 251);
    --compose-upload-file-meta-color: rgba(191, 203, 221, 0.82);
    --compose-upload-file-message-color: rgba(203, 213, 225, 0.9);
    --compose-upload-file-status-uploading: rgb(147, 197, 253);
    --compose-upload-file-status-uploaded: rgb(74, 222, 128);
    --compose-upload-file-status-error: rgb(252, 165, 165);
    --thread-inline-image-border: rgba(94, 116, 147, 0.42);
    --thread-inline-image-bg: rgba(21, 33, 49, 0.9);
    --thread-inline-image-shadow: 0 18px 34px rgba(0, 0, 0, 0.26);
    --thread-inline-image-spinner-color: rgb(127, 187, 255);
    --thread-inline-image-spinner-track-color: rgba(191, 203, 221, 0.28);
    --thread-inline-image-spinner-label-color: rgb(191, 219, 254);
    --thread-inline-image-error-color: rgb(252, 165, 165);
    --thread-inline-image-error-bg: rgba(68, 23, 23, 0.68);
    --thread-inline-image-error-border: rgba(248, 113, 113, 0.34);
    --user-profile-hero-bg:
        radial-gradient(circle at 18% 24%, rgba(72, 139, 233, 0.34), transparent 22%),
        radial-gradient(circle at 56% 36%, rgba(93, 152, 233, 0.22), transparent 26%),
        linear-gradient(180deg, rgb(31, 49, 72) 0%, rgb(27, 43, 63) 100%);
    --user-profile-hero-grid-color: rgba(255, 255, 255, 0.06);
    --user-profile-summary-bg: rgb(24, 34, 48);
    --user-profile-summary-border: rgba(78, 103, 136, 0.42);
    --user-profile-summary-shadow: 0 20px 40px rgba(0, 0, 0, 0.24);
    --user-profile-avatar-border: rgb(255, 255, 255);
    --user-profile-avatar-shadow: rgba(0, 0, 0, 0.24) 0px 10px 22px 0px;
    --user-profile-name-color: rgb(239, 245, 255);
    --user-profile-points-hero-bg: linear-gradient(135deg, rgb(28, 46, 71) 0%, rgb(33, 58, 89) 100%);
    --user-profile-points-hero-border: rgba(96, 165, 250, 0.2);
    --user-profile-points-hero-eyebrow-color: rgba(191, 203, 221, 0.8);
    --user-profile-points-hero-level-color: rgb(191, 219, 254);
    --user-profile-points-hero-meta-color: rgba(212, 223, 238, 0.88);
    --user-profile-points-progress-track: rgba(58, 74, 96, 0.96);
    --user-profile-points-progress-fill: linear-gradient(90deg, rgb(96, 165, 250) 0%, rgb(56, 189, 248) 100%);
    --user-profile-points-card-bg: rgba(28, 40, 56, 0.96);
    --user-profile-points-card-border: rgba(78, 103, 136, 0.42);
    --user-profile-points-card-label-color: rgba(191, 203, 221, 0.82);
    --user-profile-points-card-value-color: rgb(239, 245, 255);
    --user-profile-points-card-helper-color: rgba(191, 203, 221, 0.74);
    --user-profile-points-card-chart-bg: rgba(58, 74, 96, 0.92);
    --user-profile-points-total-accent: rgb(96, 165, 250);
    --user-profile-points-streak-accent: rgb(56, 189, 248);
    --user-profile-points-week-accent: rgb(74, 222, 128);
    --user-profile-points-month-accent: rgb(251, 191, 36);
    --user-profile-points-week-bg: rgb(24, 34, 48);
    --user-profile-points-week-border: rgba(78, 103, 136, 0.42);
    --user-profile-points-week-title-color: rgb(239, 245, 255);
    --user-profile-points-week-hint-color: rgba(191, 203, 221, 0.78);
    --user-profile-action-logout-bg: rgb(239, 68, 68);
    --user-profile-action-logout-color: rgb(255, 255, 255);
    --user-profile-action-logout-hover-bg: rgb(220, 38, 38);
    --user-profile-stat-label-color: rgba(191, 203, 221, 0.76);
    --user-profile-stat-value-color: rgb(239, 245, 255);
    --user-profile-nav-bg: rgb(24, 34, 48);
    --user-profile-nav-border: rgba(78, 103, 136, 0.42);
    --user-profile-nav-item-color: rgba(212, 223, 238, 0.84);
    --user-profile-nav-item-hover-bg: rgba(46, 65, 92, 0.88);
    --user-profile-nav-item-active-bg: rgba(59, 130, 246, 0.16);
    --user-profile-nav-item-active-color: rgb(147, 197, 253);
    --user-profile-nav-icon-color: rgba(191, 203, 221, 0.72);
    --user-profile-nav-indicator-bg: rgb(147, 197, 253);
    --user-profile-nav-message-dot-bg: rgb(251, 113, 133);
    --user-profile-panel-bg: rgb(24, 34, 48);
    --user-profile-panel-border: rgba(78, 103, 136, 0.42);
    --user-profile-panel-shadow: 0 20px 40px rgba(0, 0, 0, 0.22);
    --user-profile-tab-color: rgba(191, 203, 221, 0.78);
    --user-profile-tab-active-color: rgb(239, 245, 255);
    --user-profile-tab-active-border: rgb(96, 165, 250);
    --user-profile-field-label-color: rgba(191, 203, 221, 0.76);
    --user-profile-field-value-color: rgb(226, 232, 240);
    --user-profile-field-divider: rgba(78, 103, 136, 0.34);
    --user-profile-password-intro-color: rgba(191, 203, 221, 0.78);
    --user-profile-password-submit-bg: var(--compose-action-primary-bg);
    --user-profile-password-submit-color: var(--compose-action-primary-color);
    --user-profile-password-submit-hover-bg: var(--compose-action-primary-hover-bg);
    --user-profile-password-submit-disabled-bg: var(--compose-action-disabled-bg);
    --user-profile-password-submit-disabled-color: var(--compose-action-disabled-color);
    --user-profile-password-spinner-color: var(--compose-action-spinner-color);
    --user-profile-password-spinner-track-color: rgba(255, 255, 255, 0.28);
    --user-profile-password-notice-success-bg: var(--register-form-notice-success-bg);
    --user-profile-password-notice-success-border: var(--register-form-notice-success-border);
    --user-profile-password-notice-success-color: var(--register-form-notice-success-color);
    --user-profile-password-notice-error-bg: var(--register-form-notice-error-bg);
    --user-profile-password-notice-error-border: var(--register-form-notice-error-border);
    --user-profile-password-notice-error-color: var(--register-form-notice-error-color);
    --user-profile-permission-toggle-bg: var(--user-profile-avatar-card-bg);
    --user-profile-permission-toggle-border: var(--user-profile-avatar-card-border);
    --user-profile-permission-toggle-active-bg: var(--user-profile-avatar-card-active-bg);
    --user-profile-permission-toggle-active-border: var(--user-profile-avatar-card-active-border);
    --user-profile-permission-toggle-label-color: var(--user-profile-field-value-color);
    --user-profile-permission-toggle-hint-color: var(--user-profile-password-intro-color);
    --user-profile-avatar-panel-bg: rgba(20, 30, 44, 0.9);
    --user-profile-avatar-panel-border: rgba(78, 103, 136, 0.42);
    --user-profile-avatar-current-bg: rgba(15, 23, 42, 0.62);
    --user-profile-avatar-current-border: rgba(96, 165, 250, 0.34);
    --user-profile-avatar-current-shadow: 0 20px 36px rgba(2, 6, 23, 0.34);
    --user-profile-avatar-card-bg: rgba(15, 23, 42, 0.68);
    --user-profile-avatar-card-border: rgba(78, 103, 136, 0.42);
    --user-profile-avatar-card-hover-bg: rgba(30, 41, 59, 0.84);
    --user-profile-avatar-card-hover-border: rgba(96, 165, 250, 0.44);
    --user-profile-avatar-card-active-bg: rgba(30, 58, 138, 0.26);
    --user-profile-avatar-card-active-border: rgba(147, 197, 253, 0.72);
    --user-profile-avatar-card-active-shadow: 0 18px 34px rgba(15, 23, 42, 0.32);
    --user-follow-feed-item-bg: rgba(15, 23, 42, 0.58);
    --user-follow-feed-item-border: rgba(78, 103, 136, 0.42);
    --user-follow-feed-item-hover-bg: rgba(30, 41, 59, 0.84);
    --user-follow-feed-actor-color: rgb(243, 247, 255);
    --user-follow-feed-verb-color: rgba(191, 203, 221, 0.82);
    --user-follow-feed-thread-color: rgb(147, 197, 253);
    --user-follow-feed-thread-hover-color: rgb(191, 219, 254);
    --user-follow-feed-time-color: rgba(191, 203, 221, 0.76);
    --user-follow-card-bg: rgba(15, 23, 42, 0.6);
    --user-follow-card-border: rgba(78, 103, 136, 0.4);
    --user-follow-card-hover-bg: rgba(30, 41, 59, 0.84);
    --user-follow-card-username-color: rgb(226, 232, 240);
    --user-follow-card-action-bg: rgba(248, 113, 113, 0.14);
    --user-follow-card-action-border: rgba(248, 113, 113, 0.28);
    --user-follow-card-action-color: rgb(254, 202, 202);
    --user-follow-card-action-hover-bg: rgba(248, 113, 113, 0.2);
    --user-follow-card-checkbox-border: rgba(120, 149, 186, 0.82);
    --user-follow-card-checkbox-bg: rgba(15, 23, 42, 0.86);
    --user-follow-card-checkbox-checked-bg: rgb(96, 165, 250);
    --user-follow-card-checkbox-checked-border: rgb(96, 165, 250);
    --user-follow-card-checkbox-check-color: rgb(15, 23, 42);
    --user-follow-empty-color: rgba(191, 203, 221, 0.84);
    --user-message-toolbar-bg: rgba(20, 30, 44, 0.92);
    --user-message-toolbar-border: rgba(78, 103, 136, 0.42);
    --user-message-toolbar-text: rgba(191, 203, 221, 0.88);
    --user-message-toolbar-strong: rgb(226, 232, 240);
    --user-message-button-bg: rgba(15, 23, 42, 0.76);
    --user-message-button-border: rgba(78, 103, 136, 0.54);
    --user-message-button-text: rgba(214, 223, 238, 0.92);
    --user-message-button-hover-bg: rgba(30, 41, 59, 0.92);
    --user-message-button-danger-bg: rgba(220, 38, 38, 0.18);
    --user-message-button-danger-border: rgba(248, 113, 113, 0.38);
    --user-message-button-danger-text: rgb(254, 202, 202);
    --user-message-list-item-bg: rgba(15, 23, 42, 0.58);
    --user-message-list-item-border: rgba(78, 103, 136, 0.4);
    --user-message-list-item-unread-bar: rgb(96, 165, 250);
    --user-message-list-title-color: rgba(226, 232, 240, 0.94);
    --user-message-list-link-color: rgb(147, 197, 253);
    --user-message-list-link-hover-color: rgb(191, 219, 254);
    --user-message-actor-name-color: rgb(243, 247, 255);
    --user-message-title-action-color: rgba(191, 203, 221, 0.86);
    --user-message-list-time-color: rgba(191, 203, 221, 0.76);
    --user-message-list-body-bg: rgba(15, 23, 42, 0.72);
    --user-message-list-body-border: rgba(78, 103, 136, 0.42);
    --user-message-body-prefix-color: rgba(191, 203, 221, 0.82);
    --user-message-body-link-border: rgba(147, 197, 253, 0.42);
    --user-message-empty-color: rgba(191, 203, 221, 0.82);
    --user-message-select-border: rgba(120, 149, 186, 0.82);
    --user-message-select-bg: rgba(15, 23, 42, 0.86);
    --user-message-select-checked-bg: rgb(96, 165, 250);
    --user-message-select-checked-border: rgb(96, 165, 250);
    --user-message-select-check-color: rgb(15, 23, 42);
    --user-message-toggle-indicator-color: rgba(191, 203, 221, 0.72);
    --user-message-toggle-hover-bg: rgba(30, 41, 59, 0.84);
    --user-message-open-border: rgba(96, 165, 250, 0.44);
    --user-message-open-shadow: rgba(96, 165, 250, 0.16);
    --user-message-delete-button-bg: rgba(248, 113, 113, 0.12);
    --user-message-delete-button-border: rgba(248, 113, 113, 0.26);
    --user-message-delete-button-text: rgb(254, 202, 202);
    --user-message-delete-button-hover-bg: rgba(248, 113, 113, 0.18);
    --user-message-admin-badge-bg: rgba(34, 211, 238, 0.14);
    --user-message-admin-badge-border: rgba(34, 211, 238, 0.26);
    --user-message-admin-badge-color: rgb(165, 243, 252);
    --user-message-locked-color: rgba(165, 243, 252, 0.92);
    --admin-user-message-state-read-bg: rgba(120, 149, 186, 0.18);
    --admin-user-message-state-read-color: rgba(214, 223, 238, 0.82);
    --admin-user-message-state-unread-bg: rgba(96, 165, 250, 0.18);
    --admin-user-message-state-unread-color: rgb(191, 219, 254);
    --admin-direct-modal-backdrop: rgba(2, 6, 23, 0.72);
    --interactive-hover-brightness: 1.04;
    --thread-item-board-bg: rgba(30, 41, 59, 0.84);
    --thread-item-board-color: rgba(191, 203, 221, 0.76);
    --thread-item-board-icon-opacity: 0.6;
    --thread-item-board-icon-hover-opacity: 1;
    --thread-item-pin-icon-color: rgb(251, 113, 133);
    --thread-item-meta-link-color: rgba(226, 232, 240, 0.88);
    --thread-item-relative-time-color: rgba(191, 203, 221, 0.78);
    --thread-item-last-reply-author-color: rgba(226, 232, 240, 0.88);
    --thread-item-stats-color: rgba(191, 203, 221, 0.66);
    --thread-list-header-tab-color: rgba(214, 223, 236, 0.82);
    --thread-list-header-tab-active-color: rgb(243, 247, 255);
    --thread-list-header-sort-color: rgba(188, 201, 219, 0.82);
    --thread-list-header-sort-bg: rgba(20, 28, 40, 0.9);
    --thread-list-header-sort-border: rgba(91, 114, 145, 0.42);
    --thread-list-header-sort-arrow-color: rgba(188, 201, 219, 0.78);
    --page-bg: rgb(12, 19, 29);
    --sidebar-soft-bg: rgb(18, 28, 40);
    --surface-bg: rgb(24, 34, 48);
    --surface-overlay-bg: rgba(24, 34, 48, 0.86);
    --surface-hover-bg: rgba(30, 41, 59, 0.92);
    --divider-color: rgba(78, 103, 136, 0.32);
    --dashed-divider-color: rgba(120, 149, 186, 0.28);
    --header-border-color: rgba(78, 103, 136, 0.34);
    --pagination-border-color: rgba(100, 116, 139, 0.82);
    --pagination-hover-bg: rgba(30, 41, 59, 0.96);
    --pagination-link-color: rgb(147, 197, 253);
    --pagination-active-bg: rgb(73, 136, 243);
    --thread-list-header-border: var(--divider-color);
    --thread-list-header-bg: var(--surface-bg);
    --side-nav-item-hover-bg: rgba(30, 41, 59, 0.92);
    --side-nav-item-hover-color: rgb(147, 197, 253);
    --side-nav-item-active-bg: rgba(59, 130, 246, 0.18);
    --side-nav-label-color: rgba(226, 232, 240, 0.86);
    --board-tag-filter-border: rgba(91, 114, 145, 0.52);
    --board-tag-filter-color: rgba(191, 203, 221, 0.82);
    --board-tag-filter-active-bg: rgb(73, 136, 243);
    --board-tag-filter-active-color: rgb(255, 255, 255);
    --board-summary-heading-bg: linear-gradient(
        90deg,
        rgb(44, 82, 130) 0%,
        rgb(54, 99, 155) 18%,
        rgb(63, 116, 178) 36%,
        rgb(69, 132, 201) 50%,
        rgb(63, 116, 178) 64%,
        rgb(54, 99, 155) 82%,
        rgb(44, 82, 130) 100%
    );
    --forum-sidecard-hero-bg: linear-gradient(
        160deg,
        rgb(42, 76, 118) 0%,
        rgb(52, 92, 142) 16%,
        rgb(64, 110, 168) 34%,
        rgb(56, 99, 151) 47%,
        rgb(61, 106, 162) 60%,
        rgb(50, 88, 136) 78%,
        rgb(42, 76, 118) 100%
    );
    --checkin-card-header-bg: linear-gradient(
        270deg,
        rgb(56, 100, 154) 0%,
        rgb(67, 117, 178) 18%,
        rgb(78, 132, 198) 34%,
        rgb(62, 105, 158) 46%,
        rgb(40, 66, 98) 58%,
        rgb(24, 34, 48) 66%,
        rgb(24, 34, 48) 82%,
        rgb(24, 34, 48) 100%
    );
    --ranking-card-tab-indicator-bg: linear-gradient(90deg, rgb(58, 101, 154) 0%, rgb(96, 165, 250) 100%);
    --thread-user-card-hero-bg: linear-gradient(
        160deg,
        rgb(42, 76, 118) 0%,
        rgb(52, 92, 142) 16%,
        rgb(64, 110, 168) 34%,
        rgb(56, 99, 151) 47%,
        rgb(61, 106, 162) 60%,
        rgb(50, 88, 136) 78%,
        rgb(42, 76, 118) 100%
    );
    --board-summary-stats-bg: rgba(15, 23, 42, 0.58);
    --board-summary-heading-border-color: rgba(91, 114, 145, 0.42);
    --thread-action-button-bg: rgba(15, 23, 42, 0.76);
    --thread-action-button-color: rgba(191, 203, 221, 0.82);
    --thread-delete-button-color: rgba(248, 113, 113, 0.86);
    --thread-delete-button-hover-color: rgb(254, 202, 202);
    --thread-action-button-hover-color: rgb(147, 197, 253);
    --thread-action-button-self-bg: rgba(30, 41, 59, 0.88);
    --thread-action-button-self-color: rgba(125, 143, 166, 0.88);
    --thread-action-button-shadow: rgba(2, 6, 23, 0.36) 0px 2px 10px 0px;
    --thread-action-count-bg: rgb(96, 165, 250);
    --thread-action-count-color: rgb(15, 23, 42);
    --thread-card-action-bg: rgba(15, 23, 42, 0.76);
    --thread-card-action-text-color: rgba(191, 203, 221, 0.86);
    --thread-card-action-border-color: rgba(120, 149, 186, 0.74);
    --thread-card-action-hover-bg: rgba(51, 65, 85, 0.92);
    --thread-card-action-hover-text-color: rgb(241, 245, 249);
    --thread-card-action-self-bg: rgba(30, 41, 59, 0.88);
    --thread-card-action-self-text-color: rgba(125, 143, 166, 0.9);
    --thread-card-action-self-border-color: rgba(71, 85, 105, 0.88);
    --thread-card-tag-bg: rgba(148, 163, 184, 0.18);
    --thread-card-tag-color: rgba(226, 232, 240, 0.8);
    --thread-card-tag-hover-bg: rgb(96, 165, 250);
    --thread-card-tag-hover-color: rgb(15, 23, 42);
    --ranking-top3-bg: linear-gradient(135deg, rgb(34, 197, 94) 10%, rgb(21, 128, 61) 100%);
    --ranking-total-top3-bg: linear-gradient(135deg, rgb(59, 130, 246) 10%, rgb(29, 78, 216) 100%);
    --board-hot-top3-bg: linear-gradient(135deg, rgb(244, 63, 94) 30%, rgb(234, 88, 12) 100%);
    --user-recent-marker-bg: linear-gradient(135deg, rgb(245, 158, 11) 0%, rgb(250, 204, 21) 100%);
    --soft-bg: rgb(18, 28, 40);
    --topbar-bg: rgb(15, 23, 42);
    --topbar-bg-scrolled: rgba(15, 23, 42, 0.82);
    --topbar-inner-bg: rgba(15, 23, 42, 0.72);
    --topbar-inner-bg-scrolled: rgba(15, 23, 42, 0.58);
    --topbar-search-bg: rgba(30, 41, 59, 0.92);
    --topbar-search-text-color: rgba(226, 232, 240, 0.92);
    --topbar-search-placeholder-color: rgba(191, 203, 221, 0.72);
    --topbar-search-focus-ring: rgba(96, 165, 250, 0.24);
    --topbar-auth-border-color: rgb(96, 165, 250);
    --topbar-auth-text-color: rgb(147, 197, 253);
    --topbar-auth-hover-bg: rgb(73, 136, 243);
    --topbar-auth-hover-text-color: rgb(255, 255, 255);
    --topbar-nav-toggle-bg: var(--topbar-icon-action-bg);
    --topbar-nav-toggle-color: var(--topbar-icon-action-color);
    --topbar-nav-toggle-hover-bg: var(--topbar-icon-action-hover-bg);
    --topbar-nav-toggle-hover-color: var(--topbar-icon-action-hover-color);
    --topbar-mobile-nav-panel-bg: var(--topbar-user-menu-panel-bg);
    --topbar-mobile-nav-panel-border: var(--topbar-user-menu-panel-border);
    --topbar-mobile-nav-panel-shadow: var(--topbar-user-menu-panel-shadow);
    --topbar-mobile-nav-link-hover-bg: var(--topbar-user-menu-entry-hover-bg);
    --topbar-mobile-nav-link-hover-color: var(--topbar-user-menu-entry-hover-color);
    --metric-icon-color: rgba(191, 203, 221, 0.78);
    --thread-item-last-reply-icon-color: rgba(191, 203, 221, 0.3);
    --thread-page-nav-icon-color: rgba(191, 203, 221, 0.8);
    --footer-action-color: rgba(191, 203, 221, 0.86);
    --footer-action-bg: rgba(15, 23, 42, 0.84);
    --footer-action-hover-bg: rgba(30, 41, 59, 0.96);
    --footer-action-hover-color: rgb(241, 245, 249);
    --footer-bg: rgb(12, 19, 29);
    --footer-inner-bg: rgb(12, 19, 29);
    --notice-bg: rgba(96, 165, 250, 0.16);
    --forum-notice-text-color: rgb(147, 197, 253);
    --hover-bg: rgba(96, 165, 250, 0.18);
    --border-color: rgba(120, 149, 186, 0.22);
    --icon-bg: rgb(73, 136, 243);
    --text-light: rgb(255, 255, 255);
    --text-primary: rgba(226, 232, 240, 0.92);
    --text-secondary: rgba(191, 203, 221, 0.82);
    --link-color: rgb(226, 232, 240);
    --link-hover-color: rgb(147, 197, 253);
    --header-link-color: rgba(226, 232, 240, 0.82);
    --header-link-hover-color: rgb(241, 245, 249);
    --header-link-active-color: rgb(147, 197, 253);
    --register-art-person-left: linear-gradient(180deg, rgb(246, 173, 85) 0%, rgb(194, 101, 26) 100%);
    --register-art-person-right: linear-gradient(180deg, rgb(244, 114, 182) 0%, rgb(190, 24, 93) 100%);
    --register-art-person-top: linear-gradient(180deg, rgb(96, 165, 250) 0%, rgb(37, 99, 235) 100%);
    --register-art-person-skin: rgb(214, 167, 138);
    --register-art-screen-gloss: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0 22%, transparent 22%);
    --register-art-screen-glow: radial-gradient(circle at 72% 20%, rgba(125, 188, 255, 0.2), transparent 24%);
    --register-art-phone-dots:
        radial-gradient(circle, rgba(248, 113, 113, 0.9) 0 12%, transparent 13%),
        radial-gradient(circle at 50% 50%, rgba(250, 204, 21, 0.9) 0 12%, transparent 13%),
        radial-gradient(circle at 74% 50%, rgba(74, 222, 128, 0.9) 0 12%, transparent 13%);
    --register-art-phone-gloss: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%);
    --register-cloud-border-color: color-mix(in srgb, var(--register-art-panel-bg) 42%, rgba(226, 232, 240, 0.16));
    --register-card-mask-color: rgba(0, 0, 0, 0.68);
    --register-verify-text-color: rgb(255, 255, 255);
    --register-verify-accent: rgb(127, 187, 255);
    --register-send-bg: linear-gradient(180deg, rgb(87, 147, 252) 0%, rgb(56, 111, 220) 100%);
    --register-send-text-color: rgb(255, 255, 255);
    --register-submit-bg: linear-gradient(180deg, rgb(126, 176, 255) 0%, rgb(82, 136, 228) 100%);
    --register-submit-text-color: rgb(255, 255, 255);
    --register-submit-loading-spinner-color: rgb(255, 255, 255);
    --register-submit-loading-spinner-track-color: rgba(255, 255, 255, 0.28);
    --checkin-button-checked-bg: rgba(15, 23, 42, 0.84);
    --checkin-button-checked-color: rgb(147, 197, 253);
    --thread-comment-composer-plain-bg: rgba(15, 23, 42, 0.72);
    --thread-page-body-color: rgba(226, 232, 240, 0.92);
    --thread-comment-author-color: rgba(191, 203, 221, 0.84);
    --thread-comment-body-color: rgba(226, 232, 240, 0.9);
    --thread-comment-empty-icon-color: rgba(191, 203, 221, 0.52);
    --register-art-device-shadow: 0 26px 54px rgba(0, 0, 0, 0.34);
    --register-art-phone-shadow: 0 22px 40px rgba(0, 0, 0, 0.3);
    --register-card-title-icon-bg:
        radial-gradient(circle at 42% 35%, var(--surface-bg) 0 18%, transparent 19%),
        radial-gradient(circle at 68% 64%, var(--surface-bg) 0 18%, transparent 19%),
        linear-gradient(135deg, rgb(41, 56, 81) 0%, rgb(23, 31, 46) 100%);
    --jump-page-brand-bg: linear-gradient(
        135deg,
        rgba(18, 28, 43, 0.98) 0%,
        rgba(24, 38, 58, 0.98) 56%,
        rgba(31, 48, 74, 0.98) 100%
    );
    --jump-page-brand-border: rgba(71, 85, 105, 0.76);
    --jump-page-brand-shadow: 0 22px 44px rgba(0, 0, 0, 0.28);
    --jump-page-card-shadow: 0 30px 60px rgba(0, 0, 0, 0.38);
    --jump-page-logo-bg: linear-gradient(
        135deg,
        rgba(29, 41, 59, 0.98) 0%,
        rgba(42, 61, 89, 0.98) 100%
    );
    --jump-page-logo-shadow: 0 14px 32px rgba(0, 0, 0, 0.26);
    --jump-page-eyebrow-color: rgb(127, 187, 255);
    --jump-page-title-color: rgb(241, 245, 249);
    --jump-page-summary-color: rgba(191, 203, 221, 0.84);
    --jump-page-notice-bg: rgba(67, 42, 18, 0.82);
    --jump-page-notice-border: rgba(251, 146, 60, 0.28);
    --jump-page-notice-color: rgb(253, 186, 116);
    --jump-page-url-bg: rgba(15, 23, 42, 0.72);
    --jump-page-url-border: rgba(71, 85, 105, 0.84);
    --jump-page-url-label-color: rgba(191, 203, 221, 0.72);
    --jump-page-url-color: rgba(226, 232, 240, 0.94);
    --jump-page-primary-bg: rgb(73, 136, 243);
    --jump-page-primary-hover-bg: rgb(59, 130, 246);
    --jump-page-primary-color: rgb(255, 255, 255);
    --jump-page-primary-shadow: 0 16px 32px rgba(73, 136, 243, 0.28);
    --jump-page-secondary-bg: rgba(15, 23, 42, 0.76);
    --jump-page-secondary-border: rgba(71, 85, 105, 0.84);
    --jump-page-secondary-color: rgba(226, 232, 240, 0.9);
    --jump-page-secondary-hover-bg: rgba(30, 41, 59, 0.96);
    --jump-page-action-disabled-bg: rgba(30, 41, 59, 0.72);
    --jump-page-action-disabled-border: rgba(71, 85, 105, 0.78);
    --jump-page-action-disabled-color: rgba(148, 163, 184, 0.82);
}

* {
    box-sizing: border-box;
}

a,
button,
input[type="button"],
input[type="submit"] {
    transition:
        color 0.18s ease,
        background-color 0.18s ease,
        border-color 0.18s ease,
        opacity 0.18s ease,
        box-shadow 0.18s ease,
        filter 0.18s ease;
}

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--page-stack-gap);
    min-height: 100vh;
    font-family: "Ziti", "Microsoft YaHei", "PingFang SC", sans-serif;
    background: var(--page-bg);
    color: var(--text-primary);
}

.container {
    width: var(--container-width);
    margin: 0 auto;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    background: var(--topbar-bg);
    backdrop-filter: blur(10.5px);
    box-sizing: border-box;
    border-bottom: 1px solid var(--header-border-color);
    animation: topbar-scroll-state 1ms linear both;
    animation-timeline: scroll(root block);
}

.topbar__inner {
    min-height: var(--topbar-height);
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 32px;
    background: var(--topbar-inner-bg);
    color: var(--text-primary);
    border-radius: 0 0 12px 12px;
    animation: topbar-inner-scroll-state 1ms linear both;
    animation-timeline: scroll(root block);
}

.topbar__brand {
    flex: 0 0 auto;
    margin-left: 8px;
    color: var(--link-color);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
}

.topbar__brand:hover {
    color: var(--link-color);
    text-decoration: none;
}

.topbar__nav {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 24px;
}

.topbar__nav-item {
    display: flex;
}

.topbar__mobile-tools {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.topbar__nav-toggle {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--topbar-nav-toggle-bg);
    color: var(--topbar-nav-toggle-color);
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.topbar__nav-toggle:hover {
    background-color: var(--topbar-nav-toggle-hover-bg);
    color: var(--topbar-nav-toggle-hover-color);
}

.topbar__nav-toggle-icon,
.topbar__nav-toggle-icon::before,
.topbar__nav-toggle-icon::after {
    width: 14px;
    height: 2px;
    border-radius: 999px;
    background-color: currentColor;
}

.topbar__nav-toggle-icon {
    position: relative;
    display: inline-block;
    transition: height 0.18s ease;
}

.topbar__nav-toggle-icon::before,
.topbar__nav-toggle-icon::after {
    content: "";
    position: absolute;
    left: 0;
    transition: top 0.18s ease, transform 0.18s ease;
}

.topbar__nav-toggle-icon::before {
    top: -5px;
}

.topbar__nav-toggle-icon::after {
    top: 5px;
}

.topbar__nav-toggle[aria-expanded="true"] .topbar__nav-toggle-icon {
    height: 0;
}

.topbar__nav-toggle[aria-expanded="true"] .topbar__nav-toggle-icon::before {
    top: 0;
    transform: rotate(45deg) scaleX(1);
}

.topbar__nav-toggle[aria-expanded="true"] .topbar__nav-toggle-icon::after {
    top: 0;
    transform: rotate(-45deg) scaleX(1);
}

.topbar__nav-link {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 14px;
    font-weight: 700;
    color: var(--header-link-color);
    text-decoration: none;
}

.topbar__nav-link:hover {
    color: var(--header-link-hover-color);
    text-decoration: none;
}

.topbar__nav-item--active .topbar__nav-link {
    color: var(--header-link-active-color);
}

.topbar__nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1em;
    font-family: "ForumIcon", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
}

.topbar__search {
    min-width: 0;
    display: flex;
    align-items: center;
    padding: 0 0 0 12px;
    background: var(--topbar-search-bg);
    border-radius: 0 8px 8px 0;
    overflow: hidden;
}

.topbar__search-input {
    flex: 1 1 auto;
    min-width: 213px;
    height: 33.5px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--topbar-search-text-color);
    font: inherit;
    font-size: 14px;
    outline: none;
}

.topbar__search-input::placeholder {
    color: var(--topbar-search-placeholder-color);
}

.topbar__search-button {
    flex: 0 0 33.5px;
    width: 33.5px;
    height: 33.5px;
    border: 0;
    background-color: transparent;
    color: var(--topbar-search-button-color);
    cursor: pointer;
    transition: background-color 0.18s ease;
}

.topbar__search-button:hover {
    background-color: color-mix(in srgb, var(--topbar-search-button-color) 8%, transparent);
}

.topbar__search-button-icon {
    display: inline-block;
    font-family: "ForumIcon", sans-serif;
    font-size: 12.3px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    color: var(--topbar-search-button-color);
}

.topbar__search-button-icon::before {
    content: "\f002";
}

.topbar__actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

.topbar__theme-button {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    position: relative;
    isolation: isolate;
    overflow: visible;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--topbar-theme-button-bg);
    color: var(--topbar-theme-button-color);
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.topbar__theme-button::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-color: var(--topbar-theme-button-pulse-bg);
    opacity: 0;
    transform: scale(0.32);
    transform-origin: center;
    pointer-events: none;
    z-index: 0;
}

.topbar__theme-button:hover {
    background-color: var(--topbar-theme-button-hover-bg);
    color: var(--topbar-theme-button-hover-color);
}

.topbar__theme-button[data-theme-switching="true"]::after {
    animation: topbar_theme_button_pulse var(--theme-transition-duration) var(--theme-transition-easing);
}

.topbar__theme-button-icon {
    display: inline-block;
    position: relative;
    z-index: 1;
    font-family: "ForumIcon", sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    color: var(--topbar-theme-button-color);
    transition:
        color 0.18s ease,
        transform var(--theme-transition-duration) var(--theme-transition-easing);
}

.topbar__theme-button-icon::before {
    content: "\f186";
}

.topbar__theme-button[data-theme-switching="true"] .topbar__theme-button-icon {
    transform: rotate(360deg) scale(1.08);
}

.topbar__theme-button:hover .topbar__theme-button-icon {
    color: var(--topbar-theme-button-hover-color);
}

:root[data-theme="dark"] .topbar__theme-button-icon::before {
    content: "\f185";
}

@keyframes topbar_theme_button_pulse {
    0% {
        opacity: 0.42;
        transform: scale(0.42);
    }

    72% {
        opacity: 0;
        transform: scale(1.95);
    }

    100% {
        opacity: 0;
        transform: scale(2.08);
    }
}

.topbar__auth-button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 33.5px;
    padding: 2px 8px;
    border: 1px solid var(--topbar-auth-border-color);
    border-radius: 7px;
    background-color: transparent;
    color: var(--topbar-auth-text-color);
    font-size: 15.7px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.topbar__auth-button:hover {
    background-color: var(--topbar-auth-hover-bg);
    color: var(--topbar-auth-hover-text-color);
    text-decoration: none;
}

.topbar__icon-action {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--topbar-icon-action-bg);
    color: var(--topbar-icon-action-color);
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.topbar__icon-action:hover {
    background-color: var(--topbar-icon-action-hover-bg);
    color: var(--topbar-icon-action-hover-color);
    text-decoration: none;
}

.topbar__icon-action-symbol,
.topbar__compose-button-icon {
    display: inline-block;
    font-family: "ForumIcon", sans-serif;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
}

.topbar__icon-action-symbol {
    font-size: 13px;
}

.topbar__icon-action-symbol--bell::before {
    content: "\f0f3";
}

@keyframes topbar-bell-alert-shake {
    0%,
    56%,
    100% {
        transform: translateX(0) rotate(0deg);
    }

    60% {
        transform: translateX(calc(var(--topbar-message-alert-translate-distance) * -1)) rotate(-16deg);
    }

    68% {
        transform: translateX(var(--topbar-message-alert-translate-distance)) rotate(12deg);
    }

    76% {
        transform: translateX(calc(var(--topbar-message-alert-translate-distance) * -0.85)) rotate(-9deg);
    }

    84% {
        transform: translateX(calc(var(--topbar-message-alert-translate-distance) * 0.75)) rotate(7deg);
    }

    92% {
        transform: translateX(calc(var(--topbar-message-alert-translate-distance) * -0.45)) rotate(-3deg);
    }
}

.topbar__icon-action--alert .topbar__icon-action-symbol--bell {
    color: var(--topbar-message-alert-color);
    transform-origin: 50% 10%;
    filter: drop-shadow(0 0 2px var(--topbar-message-alert-shadow));
    animation: topbar-bell-alert-shake 1.9s ease-in-out infinite;
}

.topbar__icon-action--alert:hover .topbar__icon-action-symbol--bell {
    color: var(--topbar-message-alert-hover-color);
}

.topbar__compose-button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px 6px;
    border-radius: 6px;
    background-color: var(--topbar-compose-bg);
    color: var(--topbar-compose-color);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: background-color 0.18s ease;
}

.topbar__compose-button:hover {
    background-color: var(--topbar-compose-hover-bg);
    color: var(--topbar-compose-color);
    text-decoration: none;
}

.topbar__compose-button-icon {
    font-size: 12px;
}

.topbar__compose-button-icon::before {
    content: "\f044";
}

.topbar__user-menu {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
}

.topbar__user-menu::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    min-width: 36px;
    height: 14px;
}

.topbar__user-avatar {
    position: relative;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    overflow: hidden;
    background: var(--topbar-avatar-bg);
    border: 2px solid var(--topbar-avatar-border);
    box-shadow: var(--topbar-avatar-shadow);
    text-decoration: none;
}

.topbar__user-avatar-image,
.topbar__user-avatar-fallback {
    position: absolute;
    inset: 0;
}

.topbar__user-avatar-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    background: var(--topbar-avatar-bg);
}

.topbar__user-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--topbar-avatar-fallback-bg);
    color: var(--topbar-avatar-fallback-color);
    font-size: 13px;
    font-weight: 700;
    pointer-events: none;
    opacity: 0;
}

.topbar-user-menu__panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 40;
    width: 244px;
    padding: 14px;
    border: none;
    border-radius: 18px;
    background: var(--topbar-user-menu-panel-bg);
    box-shadow: var(--topbar-user-menu-panel-shadow);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition:
        opacity 0.18s ease,
        transform 0.18s ease,
        visibility 0.18s ease;
}

.topbar__user-menu:hover .topbar-user-menu__panel,
.topbar__user-menu:focus-within .topbar-user-menu__panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.topbar-user-menu__overview {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 82px;
    gap: 12px;
    align-items: start;
}

.topbar-user-menu__eyebrow {
    color: var(--topbar-user-menu-eyebrow-color);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
}

.topbar-user-menu__level-value {
    margin-top: 8px;
    color: var(--topbar-user-menu-level-color);
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}

.topbar-user-menu__experience {
    margin-top: 10px;
    color: var(--topbar-user-menu-exp-color);
    font-size: 12px;
    line-height: 1.2;
}

.topbar-user-menu__progress {
    margin-top: 8px;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--topbar-user-menu-progress-track);
}

.topbar-user-menu__progress-bar {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--topbar-user-menu-progress-fill);
}

.topbar-user-menu__identity {
    min-width: 0;
    max-width: 100%;
    display: grid;
    justify-items: center;
    gap: 8px;
}

.topbar-user-menu__identity-avatar {
    width: 76px;
    height: 76px;
    overflow: hidden;
    border-radius: 50%;
    border: 1px solid var(--topbar-user-menu-panel-border);
    background: var(--surface-bg);
}

.topbar-user-menu__identity-avatar-image {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.topbar-user-menu__identity-name {
    max-width: 100%;
    overflow: hidden;
    color: var(--topbar-user-menu-name-color);
    font-size: 14px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-user-menu__entry {
    margin-top: 16px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border-radius: 12px;
    background-color: transparent;
    color: var(--topbar-user-menu-entry-color);
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.topbar-user-menu__entry:hover {
    background-color: var(--topbar-user-menu-entry-hover-bg);
    color: var(--topbar-user-menu-entry-hover-color);
    text-decoration: none;
}

.topbar-user-menu__entry-icon,
.topbar-user-menu__entry-arrow,
.topbar-user-menu__logout-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "ForumIcon", sans-serif;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
}

.topbar-user-menu__entry-icon,
.topbar-user-menu__entry-arrow {
    color: var(--topbar-user-menu-entry-icon-color);
    font-size: 14px;
}

.topbar-user-menu__entry-icon--center::before {
    content: "\f2be";
}

.topbar-user-menu__entry-arrow::before {
    content: "\f105";
}

.topbar-user-menu__entry-label {
    min-width: 0;
    font-size: 14px;
    font-weight: 500;
}

.topbar-user-menu__logout-form {
    margin-top: 10px;
}

.topbar-user-menu__logout-button {
    width: 100%;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--topbar-user-menu-logout-border);
    border-radius: 10px;
    background-color: var(--topbar-user-menu-logout-bg);
    color: var(--topbar-user-menu-logout-color);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        border-color 0.18s ease;
}

.topbar-user-menu__logout-button:hover {
    background-color: var(--topbar-user-menu-logout-hover-bg);
}

.topbar-user-menu__logout-icon {
    font-size: 13px;
}

.topbar-user-menu__logout-icon::before {
    content: "\f2f5";
}

@keyframes topbar-scroll-state {
    0% {
        background: var(--topbar-bg);
    }

    1%,
    100% {
        background: var(--topbar-bg-scrolled);
    }
}

@keyframes topbar-inner-scroll-state {
    0% {
        background: var(--topbar-inner-bg);
    }

    1%,
    100% {
        background: var(--topbar-inner-bg-scrolled);
    }
}

.main-section {
    flex: 1;
    background: var(--page-bg);
}

.main-grid {
    display: grid;
    grid-template-columns: 152px 1fr 300px;
    gap: 16px;
    min-height: 480px;
    align-items: start;
}

.thread-page-grid {
    grid-template-columns: 100px minmax(0, 1fr) 300px;
}

@media (max-width: 1240px) {
    .container {
        width: min(var(--container-width), calc(100% - 24px));
    }
}

@media (max-width: 900px) {
    .topbar__inner {
        height: auto;
        padding: 12px 0;
        flex-wrap: wrap;
        gap: 12px 18px;
    }

    .topbar__brand {
        order: 1;
    }

    .topbar__actions {
        order: 2;
    }

    .topbar__mobile-tools {
        width: 100%;
        order: 3;
        min-width: 0;
    }

    .topbar__nav {
        width: 100%;
        order: 4;
        flex-wrap: wrap;
    }

    .topbar__search {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }

    .topbar[data-topbar-nav-ready="true"] .topbar__nav-toggle {
        display: inline-flex;
    }

    .topbar[data-topbar-nav-ready="true"] .topbar__search-input {
        min-width: 0;
    }

    .topbar[data-topbar-nav-ready="true"] .topbar__nav {
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding: 10px;
        border-radius: 16px;
        background: var(--topbar-mobile-nav-panel-bg);
        box-shadow: var(--topbar-mobile-nav-panel-shadow);
    }

    .topbar[data-topbar-nav-ready="true"] .topbar__nav.topbar__nav--open {
        display: flex;
    }

    .topbar[data-topbar-nav-ready="true"] .topbar__nav-item {
        width: 100%;
    }

    .topbar[data-topbar-nav-ready="true"] .topbar__nav-link {
        width: 100%;
        padding: 10px 12px;
        border-radius: 12px;
    }

    .topbar[data-topbar-nav-ready="true"] .topbar__nav-link:hover {
        background-color: var(--topbar-mobile-nav-link-hover-bg);
        color: var(--topbar-mobile-nav-link-hover-color);
    }

    .topbar[data-topbar-nav-ready="true"] .topbar__nav-item--active .topbar__nav-link {
        background-color: var(--topbar-mobile-nav-link-hover-bg);
    }

    .main-grid {
        grid-template-columns: 1fr;
    }

    .jump-page {
        align-items: stretch;
        padding: 24px 0 40px;
    }

    .jump-page__actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .jump-page__action {
        width: 100%;
    }

    .panel--left,
    .panel--right {
        min-height: 0;
    }
}

.panel {
    display: flex;
    font-size: 18px;
}

.panel--left {
    padding: 0 0 16px;
}

.panel--left--sticky {
    position: sticky;
    top: var(--sidebar-sticky-top);
    align-self: start;
}

.panel--center {
    padding: 0 0 16px;
    flex-direction: column;
    gap: 16px;
}

.forum-notice {
    width: 100%;
}

.forum-notice__toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.forum-notice__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 47px;
    padding: 0 18px;
    background: var(--notice-bg);
    border-radius: 6px;
}

.forum-notice__text {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--forum-notice-text-color);
}

.forum-notice__text::before {
    content: "\f0a1";
    flex: 0 0 auto;
    font-family: "ForumIcon", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    color: var(--forum-notice-text-color);
}

.forum-notice__close {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    color: var(--text-secondary);
    background-color: transparent;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.forum-notice__close:hover {
    background-color: var(--hover-bg);
}

.forum-notice__toggle:checked + .forum-notice__bar {
    display: none;
}

.panel--right {
}

.sidebar-stack {
    width: 100%;
    display: grid;
    gap: 16px;
}

.sidebar-card {
    width: 100%;
    background: var(--surface-bg);
    border-radius: 12px;
}

.forum-sidecard {
    width: 100%;
    background: var(--surface-bg);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

.forum-sidecard__hero {
    height: 100px;
    background: var(--forum-sidecard-hero-bg);
}

.forum-sidecard__logo {
    position: absolute;
    left: 18px;
    top: 63px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 12px;
    background: var(--surface-bg);
    box-shadow: rgba(0, 0, 0, 0.075) 0px 1.75px 3.5px 0px;
}

.forum-sidecard__logo-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: inherit;
}

.forum-sidecard__body {
    padding: 18px;
    padding-top: 18px;
}

.forum-sidecard__toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.forum-sidecard__heading {
    min-height: 36px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding-left: 0;
}

.forum-sidecard__title {
    min-width: 0;
    color: var(--link-color);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
}

.forum-sidecard__collapse {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-family: "ForumIcon", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    background-color: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.forum-sidecard__collapse::before {
    content: "\f107";
}

.forum-sidecard__collapse:hover {
    background-color: var(--surface-hover-bg);
}

.forum-sidecard__intro {
    margin-top: 14px;
    font-size: 12px;
    line-height: 1.7;
}

.forum-sidecard__toggle:checked ~ .forum-sidecard__intro {
    display: none;
}

.forum-sidecard__toggle:checked ~ .forum-sidecard__heading .forum-sidecard__collapse::before {
    content: "\f106";
}

.forum-stats {
    margin-top: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1px;
    row-gap: 0;
    padding: 6px;
    border-radius: 12px;
    background: var(--sidebar-soft-bg);
    overflow: hidden;
}

.forum-stats__item {
    display: grid;
    grid-template-columns: 28px 1fr;
    align-content: center;
    gap: 12px;
    min-height: 46px;
    background: var(--sidebar-soft-bg);
}

.forum-stats__icon {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--metric-icon-color);
}

.metric-icon-box {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--metric-icon-color);
}

.metric-icon {
    width: 20px;
    height: 20px;
    display: block;
}

.forum-stats__content {
    min-width: 0;
}

.forum-stats__value {
    color: var(--link-color);
    font-size: 12px;
    line-height: 1.2;
}

[data-online-user-count="true"],
[data-thread-view-count="true"],
.js-relative-time {
    display: inline-block;
    vertical-align: bottom;
    overflow: hidden;
    white-space: nowrap;
    max-width: none;
    opacity: 1;
}

[data-online-user-count="true"][data-stat-hidden="true"],
[data-thread-view-count="true"][data-stat-hidden="true"] {
    opacity: 0;
}

.forum-stats__label {
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.2;
}

.login-prompt {
}

.login-prompt__panel {
    position: relative;
    margin-top: 42px;
    min-height: 78px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--sidebar-soft-bg);
    border-radius: 12px;
    text-align: center;
}

.login-prompt__panel--guest {
    text-decoration: none;
}

.login-prompt__panel--authenticated {
    padding: 20px 0 15px 0;
    
}

.login-prompt__badge {
    --login-prompt-badge-active-glow-color: var(--login-prompt-badge-glow-color);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--surface-bg);
    background-image: url("./avatar.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: 2px solid var(--login-prompt-badge-border-color);
    box-shadow: 0 0 0 0 var(--login-prompt-badge-glow-color);
    animation: login-badge-glow 2.2s ease-in-out infinite;
}

.login-prompt__badge--authenticated {
    --login-prompt-badge-active-glow-color: var(--login-prompt-auth-badge-glow-color);
    overflow: hidden;
    background-image: none;
    border-color: var(--login-prompt-auth-badge-border-color);
    box-shadow: var(--login-prompt-badge-static-shadow);
    animation: login-badge-glow 2.2s ease-in-out infinite;
}

.login-prompt__badge-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.login-prompt__title {
    color: var(--login-prompt-title-color);
    font-size: 14px;
    line-height: 1.2;
}

.login-prompt__title--user {
    text-decoration: none;
}

.login-prompt__title--user:hover {
    color: var(--login-prompt-title-hover-color);
}

.login-prompt__subtitle {
    color: var(--login-prompt-subtitle-color);
    font-size: 12px;
    line-height: 1.2;
}

.login-prompt__joined {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--login-prompt-joined-color);
    font-size: 10.5px;
    line-height: 1.2;
}

.login-prompt__joined-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--login-prompt-heart-color);
    font-family: "ForumIcon", sans-serif;
    font-size: 10.5px;
    line-height: 1;
    transform-origin: center;
    animation: login-prompt-heartbeat 2.6s ease-in-out infinite;
}

.login-prompt__joined-icon::before {
    content: "\f004";
}

.login-prompt__joined-text {
    font-size: 10.5px;
    line-height: 1.2;
}

.checkin-card__header {
    height: 68px;
    padding: 12px 14px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    background: var(--checkin-card-header-bg);
    border-radius: 12px 12px 0 0;
}

.checkin-card__copy {
    min-width: 0;
    text-align: left;
}

.checkin-card__title {
    color: var(--link-color);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
}

.checkin-card__meta {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.2;
}

.checkin-card__button {
    min-width: 116px;
    height: 38px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 999px;
    background: var(--checkin-button-bg);
    color: var(--checkin-button-color);
    font-size: 15px;
    text-decoration: none;
}

.checkin-card__button:hover {
    color: var(--checkin-button-color);
    text-decoration: none;
}

.checkin-card__button--loading {
    pointer-events: none;
    background: var(--checkin-button-disabled-bg);
    color: var(--checkin-button-disabled-color);
    cursor: default;
}

.checkin-card__button--loading:hover {
    color: var(--checkin-button-disabled-color);
}

.checkin-card__button--checked {
    pointer-events: none;
    background: var(--checkin-button-checked-bg);
    color: var(--checkin-button-checked-color);
}

.checkin-card__button--checked:hover {
    color: var(--checkin-button-checked-color);
}

.checkin-card__button-icon {
    display: inline-block;
    flex: 0 0 auto;
    font-family: "ForumIcon", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
}

.checkin-card__button-icon::before {
    content: "\f274";
}

.checkin-card__button--loading .checkin-card__button-icon {
    width: 16px;
    height: 16px;
    border: 2px solid var(--checkin-button-spinner-track-color);
    border-top-color: var(--checkin-button-spinner-color);
    border-radius: 999px;
    font-size: 0;
    animation: checkin-button-spin 800ms linear infinite;
}

.checkin-card__button--loading .checkin-card__button-icon::before {
    content: "";
}

.checkin-card__week {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    padding: 6px;
    background: var(--surface-bg);
    border-radius: 0 0 12px 12px;
}

.checkin-card__day {
    min-height: 52px;
    grid-column: span var(--day-span, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 10px;
    background: var(--sidebar-soft-bg);
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.2;
    text-align: center;
    color: var(--checkin-day-idle-color);
}

.checkin-card__day::after {
    display: none;
    font-family: "ForumIcon", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
}

.checkin-card__day--missed {
    color: var(--checkin-day-missed-color);
}

.checkin-card__day--missed::after {
    content: "\f057";
    display: block;
    color: var(--checkin-day-missed-color);
}

.checkin-card__day--checked {
    color: var(--checkin-day-idle-color);
}

.checkin-card__day--checked::after {
    content: "\f058";
    display: block;
    color: var(--checkin-day-idle-color);
}

.checkin-card__day--checked[data-is-today="true"] {
    color: var(--checkin-day-checked-color);
}

.checkin-card__day--checked[data-is-today="true"]::after {
    color: var(--checkin-day-checked-color);
}

.checkin-card__day:last-child {
    grid-column: 1 / -1;
}

@keyframes checkin-button-spin {
    to {
        transform: rotate(360deg);
    }
}

.ranking-card {
    position: relative;
}

.ranking-card__toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ranking-card__tabs {
    height: 57px;
    display: flex;
    align-items: flex-end;
    gap: 20px;
    padding: 0 16px;
    border-bottom: 1px solid var(--divider-color);
}

.ranking-card__tab {
    position: relative;
    height: 57px;
    display: inline-grid;
    align-items: center;
    align-content: center;
    font-size: 14px;
    color: var(--link-color);
    cursor: pointer;
}

.ranking-card__tab::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    height: 3px;
    border-radius: 999px;
    background: var(--ranking-card-tab-indicator-bg);
    opacity: 0;
}

.ranking-card__panels {
    padding: 8px 12px 12px;
}

.ranking-card__panel {
    margin: 0;
    padding: 0;
    list-style: none;
    display: none;
}

.ranking-card__item {
    display: grid;
    grid-template-columns: 16px 1fr;
    align-items: center;
    gap: 10px;
    min-height: 34px;
    border-bottom: 1px dashed var(--dashed-divider-color);
}

.ranking-card__item:last-child {
    border-bottom: 0;
}

.ranking-card__item:nth-child(-n + 3) .ranking-card__index {
    background: var(--ranking-top3-bg);
    color: #ffffff;
}

.ranking-card__panel--total .ranking-card__item:nth-child(-n + 3) .ranking-card__index {
    background: var(--ranking-total-top3-bg);
}

.ranking-card__index {
    width: 16px;
    height: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: var(--sidebar-soft-bg);
    font-size: 9.5px;
    line-height: 1;
    transform: translateY(0.5px);
}

.ranking-card__link {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    color: var(--link-color);
    text-decoration: none;
}

.thread-list-header__tab:hover,
.thread-item__title-link:hover,
.ranking-card__link:hover,
.board-tag-filter:hover,
.thread-item__board:hover,
.thread-page-nav__item[href]:hover .thread-page-nav__title {
    color: var(--link-hover-color);
    text-decoration: none;
}

.members-card {
    position: relative;
}

.members-card__toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.members-card__tabs {
    margin-top: 24px;
    height: 42px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 16px;
    padding: 0 12px;
    border-bottom: 1px solid var(--divider-color);
}

.members-card__tab {
    height: 42px;
    display: inline-grid;
    align-items: center;
    align-content: center;
    min-width: 0;
    font-size: 14px;
    color: var(--link-color);
    white-space: nowrap;
    cursor: pointer;
}

.members-card__panels {
    box-sizing: border-box;
    padding: 16px 12px;
}

.members-card__panel {
    display: none;
}

.members-card__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.members-card__user {
    box-sizing: border-box;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 0 2px;
    border-radius: 8px;
}

.members-card__link {
    display: block;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.members-card__link:hover {
    color: inherit;
    text-decoration: none;
}

.members-card__avatar {
    width: 39px;
    height: 39px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 2.4px solid rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px 0px;
    position: relative;
    overflow: hidden;
}

.members-card__avatar-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.members-card__name {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    font-size: 12px;
    line-height: 1.2;
}

#members-new:checked ~ .members-card__tabs label[for="members-new"],
#members-active:checked ~ .members-card__tabs label[for="members-active"],
#members-post:checked ~ .members-card__tabs label[for="members-post"],
#members-wealth:checked ~ .members-card__tabs label[for="members-wealth"] {
    font-weight: 700;
}

#members-new:checked ~ .members-card__panels .members-card__panel--new,
#members-active:checked ~ .members-card__panels .members-card__panel--active,
#members-post:checked ~ .members-card__panels .members-card__panel--post,
#members-wealth:checked ~ .members-card__panels .members-card__panel--wealth {
    display: block;
}

#ranking-week:checked ~ .ranking-card__tabs label[for="ranking-week"],
#ranking-total:checked ~ .ranking-card__tabs label[for="ranking-total"] {
    font-weight: 700;
}

#ranking-week:checked ~ .ranking-card__tabs label[for="ranking-week"]::after,
#ranking-total:checked ~ .ranking-card__tabs label[for="ranking-total"]::after {
    opacity: 1;
}

#ranking-week:checked ~ .ranking-card__panels .ranking-card__panel--week,
#ranking-total:checked ~ .ranking-card__panels .ranking-card__panel--total {
    display: block;
}

@keyframes login-badge-glow {
    0% {
        box-shadow: 0 0 0 0 var(--login-prompt-badge-active-glow-color);
    }

    70% {
        box-shadow: 0 0 0 9px rgba(0, 0, 0, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}

@keyframes login-prompt-heartbeat {
    0%,
    76%,
    100% {
        transform: scale(1);
    }

    6% {
        transform: scale(1.08);
    }

    12% {
        transform: scale(1);
    }

    18% {
        transform: scale(1.12);
    }

    24% {
        transform: scale(1);
    }
}

.side-nav {
    width: 100%;
    padding: 10px 8px;
    background: var(--surface-bg);
    border-radius: 12px;
    box-sizing: border-box;
}

.side-nav__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 8px;
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
    border-radius: 12px;
    background-color: transparent;
}

.side-nav__item + .side-nav__item {
    margin-top: 3px;
}

.side-nav__item:hover:not(.side-nav__item--active) {
    background-color: var(--side-nav-item-hover-bg);
    color: var(--side-nav-item-hover-color);
}

.side-nav__item--active {
    background-color: var(--side-nav-item-active-bg);
    color: var(--side-nav-item-hover-color);
}

.side-nav__icon {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.side-nav__icon-image {
    display: block;
    width: 25px;
    height: 25px;
    object-fit: contain;
}

.side-nav__label {
    flex: 1;
    display: flex;
    align-items: center;
    color: var(--side-nav-label-color);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    word-break: break-word;
}

.side-nav__item:hover:not(.side-nav__item--active) .side-nav__label,
.side-nav__item--active .side-nav__label {
    color: var(--side-nav-item-hover-color);
}

.forum-board {
    width: 100%;
    background: var(--surface-bg);
    border-radius: 12px;
    box-sizing: border-box;
    overflow: hidden;
}

.thread-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 18px 9px;
    background: var(--thread-list-header-bg);
    border-bottom: 1px solid var(--thread-list-header-border);
}

.thread-list-header__checkin-button {
    flex: 0 0 auto;
    display: none;
    align-items: center;
    gap: 6px;
    padding: 7px 10px 6px;
    border-radius: 6px;
    background-color: var(--topbar-compose-bg);
    color: var(--topbar-compose-color);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: background-color 0.18s ease;
}

.thread-list-header__checkin-button:hover {
    background-color: var(--topbar-compose-hover-bg);
    color: var(--topbar-compose-color);
    text-decoration: none;
}

.thread-list-header__checkin-button.checkin-card__button--checked {
    background: var(--checkin-button-checked-bg);
    color: var(--checkin-button-checked-color);
}

.thread-list-header__checkin-button.checkin-card__button--checked:hover {
    color: var(--checkin-button-checked-color);
}

.thread-list-header__checkin-button.checkin-card__button--loading {
    background: var(--checkin-button-disabled-bg);
    color: var(--checkin-button-disabled-color);
}

.thread-list-header__checkin-button.checkin-card__button--loading:hover {
    color: var(--checkin-button-disabled-color);
}

.thread-list-header__checkin-button .checkin-card__button-icon {
    font-size: 12px;
}

.thread-list-header__tabs {
    display: inline-flex;
    align-items: center;
    gap: 30px;
}

.thread-list-header__tab {
    color: var(--thread-list-header-tab-color);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

.thread-list-header__tab--active {
    color: var(--thread-list-header-tab-active-color);
    font-weight: 700;
}

.thread-list-header__sort {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.thread-list-header__sort-label {
    color: var(--thread-list-header-sort-color);
    font-size: inherit;
}

.thread-list-header__sort-menu {
    position: relative;
}

.thread-list-header__sort-trigger {
    list-style: none;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    color: var(--thread-list-header-sort-color);
}

.thread-list-header__sort-trigger::-webkit-details-marker {
    display: none;
}

.thread-list-header__sort-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 92px;
    display: grid;
    padding: 6px 0;
    border: 1px solid var(--thread-list-header-sort-border);
    border-radius: 3.5px;
    background: var(--thread-list-header-sort-bg);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
    z-index: 10;
}

.thread-list-header__sort-option {
    display: block;
    padding: 6px 12px;
    background-color: transparent;
    color: var(--thread-list-header-tab-color);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.thread-list-header__sort-option:hover {
    background-color: var(--side-nav-item-hover-bg);
    color: var(--thread-list-header-tab-active-color);
}

.thread-list-header__sort-option--active {
    color: var(--thread-list-header-tab-active-color);
    font-weight: 700;
}

.forum-sidecard {
    box-sizing: border-box;
}

.sidebar-card--login {
    box-sizing: border-box;
}

.sidebar-card--checkin {
    box-sizing: border-box;
}

.sidebar-card--ranking {
    box-sizing: border-box;
}

.thread-list {
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--surface-bg);
}

.pagination {
    padding: 12px 18px 18px;
    display: flex;
    justify-content: center;
}

.pagination__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    background: transparent;
}

.pagination__link {
    height: 33px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 400;
    color: var(--pagination-link-color);
    text-decoration: none;
    border: 1px solid var(--pagination-border-color);
    border-radius: 4px;
    background-color: var(--surface-bg);
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.pagination__link:hover {
    background-color: var(--pagination-hover-bg);
    text-decoration: none;
}

.pagination__item--active .pagination__link {
    background-color: var(--pagination-active-bg);
    color: #ffffff;
    text-decoration: none;
}

.pagination__item--disabled .pagination__link {
    color: var(--text-secondary);
    cursor: default;
    pointer-events: none;
    background-color: var(--surface-bg);
}

.thread-item {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 14px;
    min-height: 65px;
    padding: 8px 18px;
    border-bottom: 1px solid var(--divider-color);
    align-items: center;
    background-color: transparent;
}

.thread-item:last-child {
    border-bottom: 0;
}

.thread-item:hover {
    background-color: var(--surface-hover-bg);
    border-radius: 12px;
    border-bottom-color: transparent;
}

.thread-item:has(+ .thread-item:hover) {
    border-bottom-color: transparent;
}

.thread-item__avatar {
    width: 36px;
    height: 36px;
    box-sizing: border-box;
    border: 2.4px solid rgb(255, 255, 255);
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px 0px;
    align-self: center;
    overflow: hidden;
}

.thread-item__avatar-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thread-item__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}

.thread-item__header {
    min-width: 0;
}

.thread-item__title {
    margin: 0;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.thread-item__pin-icon {
    background: radial-gradient(circle 6px at 8px 8px, #fff 100%, transparent 100%);
    display: inline-block;
    color: var(--thread-item-pin-icon-color);
    font-family: "ForumIcon", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    vertical-align: text-bottom;
    border-radius: 50%;
}

.thread-item__pin-icon::before {
    content: "\f01b";
}

.thread-item__title-link {
    display: inline;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--link-color);
    text-decoration: none;
}

.thread-item__tags {
    margin-left: 6px;
    display: inline;
}

.thread-item__tag {
    display: inline-flex;
    vertical-align: middle;
    align-items: center;
    justify-content: center;
    height: 18px;
    padding: 0 7px;
    padding-top: 1px;
    border-radius: 999px;
    background-color: var(--thread-card-tag-bg);
    color: var(--thread-card-tag-color);
    font-size: 10.5px;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.thread-item__tag + .thread-item__tag {
    margin-left: 2px;
}

.thread-item__tag:hover {
    background-color: var(--hover-bg);
    color: var(--link-hover-color);
    text-decoration: none;
}

.board-tag-groups {
    padding: 14px 16px;
    background: var(--surface-bg);
    border-radius: 12px;
}

.board-tag-groups__row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.board-tag-groups__row + .board-tag-groups__row {
    margin-top: 10px;
}

.board-tag-groups__label {
    flex: 0 0 56px;
    padding-top: 4px;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.4;
}

.board-tag-groups__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.board-tag-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 10px;
    border: 1px solid var(--board-tag-filter-border);
    border-radius: 7px;
    background-color: transparent;
    color: var(--board-tag-filter-color);
    font-size: 12px;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.board-tag-filter--active,
.board-tag-filter--active:hover {
    border-color: transparent;
    background-color: var(--board-tag-filter-active-bg);
    color: var(--board-tag-filter-active-color);
}

.thread-item__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    font-size: 12px;
    color: var(--text-secondary);
}

.thread-item__info {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.thread-item__board {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 1px 6px 1px 4px;
    border-radius: 999px;
    background-color: var(--thread-item-board-bg);
    color: var(--thread-item-board-color);
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.thread-item__board-icon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.thread-item__board-icon-image {
    display: block;
    width: 16px;
    height: 16px;
    object-fit: contain;
    opacity: var(--thread-item-board-icon-opacity);
    transition: opacity 0.18s ease;
}

.thread-item__board:hover .thread-item__board-icon-image {
    opacity: var(--thread-item-board-icon-hover-opacity);
}

.thread-item__meta-link {
    color: var(--thread-item-meta-link-color);
    text-decoration: none;
}

.thread-item__meta-link:hover {
    color: var(--link-hover-color);
    text-decoration: none;
}

.thread-item__last-reply {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.thread-item__last-reply > span:last-child {
    color: var(--thread-item-last-reply-author-color);
}

.thread-item__last-reply > span:first-child {
    color: var(--thread-item-last-reply-icon-color);
}

.thread-item__meta-icon {
    display: inline-block;
    font-family: "ForumIcon", sans-serif;
    font-size: 12.3px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
}

.thread-item__meta-icon--last-reply::before {
    content: "\f3e5";
}

.thread-item__stats {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12.3px;
    color: var(--thread-item-stats-color);
    text-align: right;
    white-space: nowrap;
}

.thread-item__meta .js-relative-time {
    color: var(--thread-item-relative-time-color);
}

.thread-item__stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.thread-item__stat-icon {
    display: inline-block;
    font-family: "ForumIcon", sans-serif;
    font-size: 12.3px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
}

.thread-item__stat-icon--view::before {
    content: "\f06e";
}

.thread-item__stat-icon--reply::before {
    content: "\f4ad";
}

.board-summary-card {
    padding: 0;
    overflow: hidden;
}

.board-summary-card__heading {
    height: 49px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    background: var(--board-summary-heading-bg);
    font-size: 17.5px;
    font-weight: 600;
    color: var(--link-color);
    text-align: center;
}

.board-summary-card__stats {
    margin: 14px 18px 0;
    padding: 23px 12px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    background: var(--board-summary-stats-bg);
    border-radius: 8px;
}

.board-summary-card__stat {
    min-width: 0;
    display: grid;
    gap: 6px;
    justify-items: center;
    text-align: center;
}

.board-summary-card__value {
    font-size: 18px;
    font-weight: 600;
    color: var(--link-color);
}

.board-summary-card__label {
    font-size: 13px;
    color: var(--text-secondary);
}

.board-summary-card__description {
    padding: 16px 18px 18px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-primary);
}

.board-moderator-card__heading {
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 12px;
    border-bottom: 1px solid var(--divider-color);
    font-size: 14px;
    font-weight: 700;
    color: var(--link-color);
}

.board-moderator-card__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
}

.board-moderator-card__link {
    display: flex;
}

.board-moderator-card__user {
    min-height: auto;
    width: 100%;
    padding: 10px 8px;
}

.board-moderator-card__empty {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.6;
    padding: 2px 0 4px;
}

.board-hot-card__heading {
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 12px;
    border-bottom: 1px solid var(--divider-color);
    font-size: 14px;
    font-weight: 700;
    color: var(--link-color);
}

.board-hot-card__panels {
    padding-top: 12px;
}

.board-hot-card__panel {
    display: block;
}

.user-recent-card__item {
    grid-template-columns: 18px 1fr;
}

.user-recent-card__marker {
    width: 16px;
    height: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: var(--user-recent-marker-bg);
    color: rgb(255, 255, 255);
    font-size: 9.5px;
    line-height: 1;
    transform: translateY(0.5px);
}

.board-hot-card .ranking-card__item:nth-child(-n + 3) .ranking-card__index {
    background: var(--board-hot-top3-bg);
}

.thread-actions {
    width: 100px;
    display: grid;
    justify-items: center;
    gap: 16px;
}

.thread-actions__group {
    display: grid;
    justify-items: center;
    gap: 9px;
}

.thread-actions__button {
    width: 60px;
    height: 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--thread-action-button-bg);
    box-shadow: var(--thread-action-button-shadow);
    color: var(--thread-action-button-color);
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.thread-actions__button[disabled] {
    cursor: default;
}

.thread-actions__button--self {
    background: var(--thread-action-button-self-bg);
    color: var(--thread-action-button-self-color);
}

.thread-actions__button:not([disabled]):hover {
    transform: translateY(-1px);
    color: var(--thread-action-button-hover-color);
    text-decoration: none;
}

.thread-actions__button--active {
    background: var(--thread-action-button-active-bg);
    color: var(--thread-action-button-active-color);
}

.thread-actions__button--active:hover,
.thread-actions__button--loading:hover {
    transform: none;
    color: inherit;
}

.thread-actions__icon {
    display: inline-block;
    font-family: "ForumIcon", sans-serif;
    font-size: 25px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    color: inherit;
    transition: color 0.18s ease;
}

.thread-actions__spinner {
    display: none;
    width: 22px;
    height: 22px;
    border: 2px solid var(--thread-action-button-spinner-track-color);
    border-top-color: var(--thread-action-button-spinner-color);
    border-radius: 50%;
    animation: checkin-button-spin 800ms linear infinite;
}

.thread-actions__button--loading .thread-actions__spinner {
    display: inline-block;
}

.thread-actions__button--loading .thread-actions__icon {
    display: none;
}

.thread-actions__icon--comment::before {
    content: "\f086";
}

.thread-actions__icon--like::before {
    content: "\f164";
}

.thread-actions__icon--favorite::before {
    content: "\f005";
}

.thread-actions__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--thread-action-count-bg);
    font-size: 12.5px;
    line-height: 1;
    color: var(--thread-action-count-color);
}

.thread-actions__count--active {
    background: var(--thread-action-button-active-bg);
    color: var(--thread-action-button-active-color);
}

.thread-page-card,
.thread-comments-card {
    background: var(--surface-bg);
    border-radius: 12px;
}

.thread-comments-card {
    scroll-margin-top: calc(var(--topbar-height) + 18px);
}

.thread-page-card__header {
    padding: 10px 22px 14px;
    border-bottom: 1px solid var(--divider-color);
}

.thread-page-card__title {
    margin: 0;
    font-size: 24px;
    line-height: 1.35;
    color: var(--link-color);
}

.thread-page-card__meta {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

.thread-page-card__author {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--link-color);
    text-decoration: none;
}

.thread-page-card__author:hover {
    color: var(--link-hover-color);
    text-decoration: none;
}

.thread-page-card__author-avatar {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--icon-bg);
    box-shadow: rgba(0, 0, 0, 0.08) 0px 1px 2px 0px;
}

.thread-page-card__author-avatar-image {
    width: 18.3px;
    height: 18.3px;
}

.thread-page-card__meta .thread-item__board {
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(0, 102, 255, 0.18);
}

.thread-page-card__meta-spacer {
    flex: 1 1 auto;
}

.thread-page-card__stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.thread-page-card__meta-form {
    display: inline-flex;
    margin: 0;
}

.thread-page-card__meta-pin-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    color: var(--thread-action-button-color);
    cursor: pointer;
    user-select: none;
}

.thread-page-card__meta-pin-checkbox {
    margin: 0;
    cursor: pointer;
}

.thread-page-card__meta-pin-checkbox:disabled {
    cursor: not-allowed;
}

.thread-page-card__meta-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    color: var(--thread-action-button-color);
    text-decoration: none;
    border: 0;
    padding: 0;
    background: none;
    font: inherit;
    cursor: pointer;
    transition: color 0.18s ease;
}

.thread-page-card__meta-action:hover {
    color: var(--link-hover-color);
    text-decoration: none;
}

.thread-page-card__meta-action--delete {
    color: var(--thread-delete-button-color);
}

.thread-page-card__meta-action--delete:hover {
    color: var(--thread-delete-button-hover-color);
}

.thread-page-card__stat-icon {
    display: inline-block;
    font-family: "ForumIcon", sans-serif;
    font-size: 12.3px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    color: inherit;
}

.thread-page-card__stat-icon--view::before {
    content: "\f06e";
}

.thread-page-card__stat-icon--reply::before {
    content: "\f4ad";
}

.thread-page-card__meta-action-icon {
    display: inline-block;
    font-family: "ForumIcon", sans-serif;
    font-size: 12.3px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    color: inherit;
}

.thread-page-card__meta-action-icon--edit::before {
    content: "\f044";
}

.thread-page-card__meta-action-icon--delete::before {
    content: "\f2ed";
}

.thread-page-card__body {
    padding: 20px 22px 24px;
    font-size: 14px;
    color: var(--thread-page-body-color);
    font-family: "ThreadCommentEmoji", "Ziti", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.thread-page-card__paragraph {
    white-space: pre-wrap;
    line-height: 1.8;
}

.thread-jump-link {
    color: var(--thread-content-link-color);
    text-decoration: none;
    font-weight: 500;
    font-family: var(--thread-content-url-font-family);
    word-break: break-all;
    transition: color 0.18s ease;
}

.thread-jump-link:hover {
    color: var(--thread-content-link-hover-color);
}

.thread-page-card__paragraph + .thread-page-card__paragraph,
.thread-page-card__paragraph + .thread-reply-gate,
.thread-reply-gate + .thread-page-card__paragraph,
.thread-reply-gate + .thread-reply-gate {
    margin-top: 18px;
}

.thread-page-card__image-frame {
    margin: 0;
}

.thread-page-card__image-frame[data-thread-proxy-loading="true"],
.thread-comment__image-frame[data-thread-proxy-loading="true"] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    min-width: 120px;
    min-height: 96px;
    padding: 16px;
    box-sizing: border-box;
    border: 1px solid var(--thread-inline-image-border);
    border-radius: 6px;
    background: var(--thread-inline-image-bg);
    box-shadow: var(--thread-inline-image-shadow);
}

.thread-page-card__image-frame[data-thread-proxy-loading="true"] {
    border: 0;
}

.thread-page-card__paragraph + .thread-page-card__image-frame,
.thread-page-card__image-frame + .thread-page-card__paragraph,
.thread-page-card__image-frame + .thread-page-card__image-frame,
.thread-page-card__image-frame + .thread-reply-gate,
.thread-reply-gate + .thread-page-card__image-frame {
    margin-top: 18px;
}

.thread-page-card__image,
.thread-comment__image {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 720px;
    border: 1px solid var(--thread-inline-image-border);
    border-radius: 6px;
    background: var(--thread-inline-image-bg);
    box-shadow: var(--thread-inline-image-shadow);
}

.thread-page-card__image {
    border: 0;
}

.thread-inline-image-spinner {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background:
        conic-gradient(
            var(--thread-inline-image-spinner-color) calc(var(--thread-inline-image-progress, 0) * 1%),
            var(--thread-inline-image-spinner-track-color) 0
        );
}

.thread-inline-image-spinner::before {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: var(--thread-inline-image-bg);
}

.thread-inline-image-spinner::after {
    content: attr(data-progress-label);
    position: relative;
    z-index: 1;
    font-size: 10px;
    line-height: 1;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--thread-inline-image-spinner-label-color);
}

.thread-inline-image-spinner--indeterminate {
    animation: thread-inline-image-spinner-rotate 900ms linear infinite;
}

@keyframes thread-inline-image-spinner-rotate {
    to {
        transform: rotate(360deg);
    }
}

.thread-inline-image-error {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--thread-inline-image-error-border);
    border-radius: 8px;
    background: var(--thread-inline-image-error-bg);
    color: var(--thread-inline-image-error-color);
    font-size: 12px;
    line-height: 1.4;
}

.thread-reply-gate {
    display: block;
    width: 100%;
    padding: 10px 14px;
    border-radius: 6px;
    background: rgba(255, 111, 6, 0.1);
    color: rgb(255, 111, 6);
}

.thread-page-card__actions {
    border-top: 1px dashed var(--dashed-divider-color);
    margin-top: 24px;
    padding: 24px 22px 22px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.thread-page-card__tags {
    padding: 0 22px;
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
}

.thread-page-card__tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 6px;
    border-radius: 3.5px;
    background-color: var(--thread-card-tag-bg);
    color: var(--thread-card-tag-color);
    font-size: 10.5px;
    line-height: 1;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.thread-page-card__tag:hover {
    background-color: var(--thread-card-tag-hover-bg);
    color: var(--thread-card-tag-hover-color);
    text-decoration: none;
}

.thread-page-card__tag-icon {
    display: inline-block;
    font-family: "ForumIcon", sans-serif;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    color: inherit;
}

.thread-page-card__tag-icon::before {
    content: "\f02b";
}

.thread-page-card__action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border: 1px solid var(--thread-card-action-border-color);
    border-radius: 8px;
    background-color: var(--thread-card-action-bg);
    color: var(--thread-card-action-text-color);
    font-size: 12.3px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.thread-page-card__action[disabled] {
    cursor: default;
}

.thread-page-card__action--self {
    border-color: var(--thread-card-action-self-border-color);
    background-color: var(--thread-card-action-self-bg);
    color: var(--thread-card-action-self-text-color);
}

.thread-page-card__action:not([disabled]):hover {
    background-color: var(--thread-card-action-hover-bg);
    color: var(--thread-card-action-hover-text-color);
}

.thread-page-card__action--active {
    background-color: var(--thread-card-action-active-bg);
    border-color: var(--thread-card-action-active-border-color);
    color: var(--thread-card-action-active-text-color);
}

.thread-page-card__action--active:hover {
    background-color: var(--thread-card-action-active-bg);
    color: var(--thread-card-action-active-text-color);
}

.thread-page-card__action--loading:hover {
    background-color: var(--thread-card-action-bg);
    color: var(--thread-card-action-text-color);
}

.jump-page {
    display: flex;
    align-items: center;
    padding: 36px 0 54px;
}

.jump-page__container {
    width: min(760px, calc(100% - 24px));
}

.jump-page__shell {
    display: grid;
    gap: 16px;
}

.jump-page__brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border: 1px solid var(--jump-page-brand-border);
    border-radius: 18px;
    background: var(--jump-page-brand-bg);
    box-shadow: var(--jump-page-brand-shadow);
}

.jump-page__brand-logo {
    display: block;
    width: 48px;
    height: 48px;
    padding: 8px;
    border-radius: 16px;
    background: var(--jump-page-logo-bg);
    box-shadow: var(--jump-page-logo-shadow);
    object-fit: contain;
}

.jump-page__brand-text {
    min-width: 0;
}

.jump-page__brand-name {
    color: var(--jump-page-title-color);
    font-size: 18px;
    line-height: 1.2;
    font-weight: 700;
}

.jump-page__brand-hint {
    margin-top: 4px;
    color: var(--jump-page-summary-color);
    font-size: 12.5px;
    line-height: 1.5;
}

.jump-page__card {
    overflow: hidden;
    box-shadow: var(--jump-page-card-shadow);
}

.jump-page__header {
    display: grid;
    gap: 10px;
}

.jump-page__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--hover-bg);
    color: var(--jump-page-eyebrow-color);
    font-size: 12px;
    line-height: 1;
}

.jump-page__title {
    color: var(--jump-page-title-color);
}

.jump-page__summary {
    margin: 0;
    color: var(--jump-page-summary-color);
    font-size: 14px;
    line-height: 1.7;
}

.jump-page__body {
    display: grid;
    gap: 18px;
}

.jump-page__notice {
    padding: 14px 16px;
    border: 1px solid var(--jump-page-notice-border);
    border-radius: 14px;
    background: var(--jump-page-notice-bg);
    color: var(--jump-page-notice-color);
}

.jump-page__notice-text {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.7;
}

.jump-page__url-box {
    padding: 16px 18px;
    border: 1px solid var(--jump-page-url-border);
    border-radius: 16px;
    background: var(--jump-page-url-bg);
}

.jump-page__url-label {
    color: var(--jump-page-url-label-color);
    font-size: 12px;
    line-height: 1;
}

.jump-page__url-value {
    margin-top: 10px;
    color: var(--jump-page-url-color);
    font-size: 14px;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-all;
    font-family: "ThreadCommentEmoji", "Ziti", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.jump-page__actions {
    justify-content: flex-start;
    gap: 12px;
}

.jump-page__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid var(--jump-page-secondary-border);
    border-radius: 12px;
    background: var(--jump-page-secondary-bg);
    color: var(--jump-page-secondary-color);
    font: inherit;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}

.jump-page__action:hover {
    background: var(--jump-page-secondary-hover-bg);
    color: var(--jump-page-secondary-color);
    text-decoration: none;
}

.jump-page__action--primary {
    border-color: var(--jump-page-primary-bg);
    background: var(--jump-page-primary-bg);
    color: var(--jump-page-primary-color);
    box-shadow: var(--jump-page-primary-shadow);
}

.jump-page__action--primary:hover {
    border-color: var(--jump-page-primary-hover-bg);
    background: var(--jump-page-primary-hover-bg);
    color: var(--jump-page-primary-color);
}

.jump-page__action[aria-disabled="true"] {
    pointer-events: none;
    border-color: var(--jump-page-action-disabled-border);
    background: var(--jump-page-action-disabled-bg);
    color: var(--jump-page-action-disabled-color);
    box-shadow: none;
}

.thread-page-card__action-icon {
    display: inline-block;
    font-family: "ForumIcon", sans-serif;
    font-size: 12.3px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    color: inherit;
    transition: color 0.18s ease;
}

.thread-page-card__action-spinner {
    display: none;
    width: 12px;
    height: 12px;
    border: 2px solid var(--thread-card-action-spinner-track-color);
    border-top-color: var(--thread-card-action-spinner-color);
    border-radius: 50%;
    animation: checkin-button-spin 800ms linear infinite;
}

.thread-page-card__action--loading .thread-page-card__action-spinner {
    display: inline-block;
}

.thread-page-card__action--loading .thread-page-card__action-icon,
.thread-page-card__action--loading .thread-page-card__action-count {
    display: none;
}

.thread-page-card__action-icon--like::before {
    content: "\f087";
}

.thread-page-card__action-icon--favorite::before {
    content: "\f006";
}

.thread-comments-card__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    padding: 10px 22px;
    border-bottom: 1px solid var(--divider-color);
}

.thread-comments-card__heading-main {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.thread-comments-card__heading-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--link-color);
}

.thread-comments-card__heading-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--thread-comment-heading-count-bg);
    color: var(--thread-comment-heading-count-color);
    font-size: 12px;
    line-height: 1;
}

.thread-comments-card__sort {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
}

.thread-comments-card__sort-option {
    position: relative;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--thread-comment-sort-color);
    font: inherit;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
}

.thread-comments-card__sort-option + .thread-comments-card__sort-option {
    margin-left: 10px;
    padding-left: 11px;
}

.thread-comments-card__sort-option + .thread-comments-card__sort-option::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 10px;
    background: var(--thread-comment-sort-divider-color);
    transform: translateY(-50%);
}

.thread-comments-card__sort-option:hover {
    color: var(--link-hover-color);
    text-decoration: none;
}

.thread-comments-card__sort-option--active,
.thread-comments-card__sort-option--active:hover {
    color: var(--thread-comment-sort-active-color);
    font-weight: 700;
}

.thread-page-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.thread-page-nav__item {
    min-width: 0;
    display: grid;
    gap: 10px;
    padding: 16px 18px;
    border-radius: 12px;
    background: var(--surface-bg);
    color: inherit;
    text-decoration: none;
}

.thread-page-nav__item:hover {
    color: inherit;
    text-decoration: none;
}

.thread-page-nav__item--disabled {
    color: var(--text-secondary);
}

.thread-page-nav__meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--thread-page-nav-icon-color);
}

.thread-page-nav__label {
    font-weight: 600;
}

.thread-page-nav__meta--next {
    justify-content: flex-end;
}

.thread-page-nav__item--next {
    text-align: right;
}

.thread-page-nav__item--next .thread-page-nav__title {
    text-align: left;
}

.thread-page-nav__icon {
    display: inline-block;
    font-family: "ForumIcon", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    color: var(--thread-page-nav-icon-color);
}

.thread-page-nav__icon--prev::before {
    content: "\f060";
}

.thread-page-nav__icon--next::before {
    content: "\f061";
}

.thread-page-nav__title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    color: var(--link-color);
}

.thread-comments-card__body {
    padding: 18px 22px 24px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-secondary);
}

.thread-comments-card__body--guest {
    padding-top: 16px;
    padding-bottom: 16px;
}

.thread-comments-card__composer {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    margin: 0;
    padding: 16px;
    border: 0;
    border-radius: 12px;
    background: var(--thread-comment-composer-plain-bg);
}

.thread-comments-card__composer-avatar {
    width: 36px;
    height: 36px;
    box-sizing: border-box;
    border: 2.4px solid var(--thread-comment-avatar-border);
    border-radius: 50%;
    overflow: hidden;
    text-decoration: none;
    background: var(--thread-comment-avatar-ring);
    box-shadow: var(--thread-comment-avatar-shadow);
    align-self: flex-start;
}

.thread-comments-card__composer-avatar-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thread-comments-card__composer-main {
    min-width: 0;
    display: grid;
    gap: 12px;
}

.thread-comments-card__composer-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.thread-comments-card__composer-head-main {
    min-width: 0;
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.thread-comments-card__composer-author {
    color: var(--thread-comment-author-color);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.thread-comments-card__composer-author:hover {
    color: var(--link-hover-color);
    text-decoration: none;
}

.thread-comments-card__composer-replying {
    justify-self: center;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--thread-comment-floor-bg);
    color: var(--thread-comment-floor-color);
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
    max-width: 100%;
}

.thread-comments-card__composer-replying[hidden] {
    display: none !important;
}

.thread-comments-card__composer-replying-avatar {
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 50%;
    box-shadow: none;
    background: transparent;
    object-fit: cover;
    flex: 0 0 auto;
}

.thread-comments-card__composer-replying > span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.thread-comments-card__composer-replying-clear {
    border: 0;
    padding: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

.thread-comments-card__view-toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.thread-comments-card__editor {
    display: block;
}

.thread-comments-card__textarea {
    width: 100%;
    min-height: 108px;
    padding: 12px 14px;
    border: 1px solid var(--thread-comment-field-border);
    border-radius: 10px;
    background: var(--thread-comment-field-bg);
    color: var(--compose-field-text-color);
    font-family: "ThreadCommentEmoji", "Ziti", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: inherit;
    font-weight: inherit;
    line-height: 1.7;
    resize: vertical;
}

.thread-comments-card__textarea:focus {
    outline: none;
    box-shadow: 0 0 0 4px var(--thread-comment-field-focus-ring);
}

.thread-comments-card__preview {
    display: none;
    min-height: 108px;
    padding: 12px 14px;
    border: 1px solid var(--thread-comment-preview-border);
    border-radius: 10px;
    background: var(--thread-comment-preview-bg);
    color: var(--thread-comment-body-color);
    font-family: "ThreadCommentEmoji", "Ziti", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.thread-comments-card__preview-empty {
    color: var(--thread-comment-preview-empty-color);
}

.thread-comments-card__preview-paragraph {
    white-space: pre-wrap;
}

.thread-comments-card__preview-paragraph + .thread-comments-card__preview-paragraph {
    margin-top: 6px;
}

#thread-comment-view-preview:checked ~ .thread-comments-card__editor {
    display: none;
}

#thread-comment-view-preview:checked ~ .thread-comments-card__preview {
    display: block;
}

#thread-comment-view-edit:checked ~ .thread-comments-card__preview {
    display: none;
}

.thread-comments-card__composer-actions {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.thread-comments-card__composer-error {
    min-height: 24px;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--thread-comment-error-bg);
    color: var(--thread-comment-error-color);
    font-size: 13px;
    line-height: 1.5;
}

.thread-comments-card__composer-tabs {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.thread-comments-card__composer-tab {
    min-width: 94px;
    padding: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5.3px;
    background: var(--thread-comment-tab-bg);
    color: var(--thread-comment-tab-color);
    font-size: 13px;
    font-weight: 600;
    border: 0;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.thread-comments-card__composer-tab:hover {
    background-color: var(--thread-comment-tab-hover-bg);
}

.thread-comments-card__composer-tab--active {
    background-color: var(--thread-comment-tab-active-bg);
    color: var(--thread-comment-tab-active-color);
}

#thread-comment-view-edit:checked ~ .thread-comments-card__composer-actions
    .thread-comments-card__composer-tab[for="thread-comment-view-edit"],
#thread-comment-view-preview:checked ~ .thread-comments-card__composer-actions
    .thread-comments-card__composer-tab[for="thread-comment-view-preview"] {
    background-color: var(--thread-comment-tab-active-bg);
    color: var(--thread-comment-tab-active-color);
}

.thread-comments-card__composer-actions-right {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.thread-comments-card__emoji-button {
    border: 0;
    padding: 6px;
    border-radius: 5.3px;
    background-color: var(--thread-comment-emoji-bg);
    color: var(--thread-comment-emoji-color);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.thread-comments-card__emoji-button:hover {
    background-color: var(--thread-comment-emoji-hover-bg);
    color: var(--thread-comment-emoji-hover-color);
}

.thread-comments-card__emoji-panel {
    display: block;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(6px);
    border: 0;
    border-radius: 10px;
    background: var(--thread-comment-emoji-panel-bg);
    box-shadow: none;
    transition:
        max-height 220ms ease,
        opacity 220ms ease,
        transform 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease,
        margin-top 220ms ease,
        padding 220ms ease;
    margin-top: 0;
    padding: 0 10px;
}

.thread-comments-card__emoji-panel--open {
    max-height: 240px;
    opacity: 1;
    transform: translateY(0);
    margin-top: 6px;
    padding: 10px;
    border: 0;
    box-shadow: none;
}

.thread-comments-card__emoji-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.thread-comments-card__emoji-item {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 5.3px;
    padding: 0;
    background-color: var(--thread-comment-emoji-item-bg);
    color: var(--thread-comment-emoji-item-color);
    font-family: "ThreadCommentEmoji", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.18s ease;
}

.thread-comments-card__emoji-item:hover {
    background-color: var(--thread-comment-emoji-item-hover-bg);
}

.thread-comments-card__submit {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px;
    border: 0;
    border-radius: 5.3px;
    background-color: var(--thread-comment-submit-bg);
    color: var(--thread-comment-submit-color);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.18s ease;
}

.thread-comments-card__submit:hover {
    background-color: var(--thread-comment-submit-hover-bg);
    color: var(--thread-comment-submit-color);
}

.thread-comment__cancel-button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border: 0;
    border-radius: 5.3px;
    background-color: var(--thread-comment-cancel-bg);
    color: var(--thread-comment-cancel-color);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.thread-comment__cancel-button:hover {
    background-color: var(--thread-comment-cancel-hover-bg);
    color: var(--thread-comment-cancel-color);
}

.thread-comments-card__submit[disabled] {
    background-color: var(--thread-comment-submit-disabled-bg);
    cursor: default;
}

.thread-comments-card__submit-label {
    display: inline-block;
    padding: 0 6px;
    font-size: 13px;
}

.thread-comments-card__submit-spinner {
    display: none;
    width: 14px;
    height: 14px;
    border: 2px solid var(--thread-comment-submit-spinner-track-color);
    border-top-color: var(--thread-comment-submit-spinner-color);
    border-radius: 50%;
    animation: checkin-button-spin 800ms linear infinite;
}

.thread-comments-card__submit--loading .thread-comments-card__submit-spinner {
    display: inline-block;
}

.thread-comments-card__guest {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 12px;
    margin-top: 14px;
    padding: 20px 16px 18px;
    border-radius: 8px;
    background: var(--thread-comment-guest-bg);
    text-align: center;
}

.thread-comments-card__guest-title {
    font-size: 14px;
    line-height: 1.7;
    font-weight: 500;
    color: var(--thread-comment-guest-title-color);
}

.thread-comments-card__guest-text {
    margin-top: 2px;
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--thread-comment-meta-color);
}

.thread-comments-card__guest-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.thread-comments-card__guest-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 25px;
    min-width: 50px;
    padding: 0 10px;
    border: 1px solid var(--thread-comment-guest-link-border);
    border-radius: 4px;
    background-color: var(--thread-comment-guest-link-bg);
    color: var(--thread-comment-guest-link-color);
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.thread-comments-card__guest-link:hover {
    background-color: var(--thread-comment-guest-link-hover-bg);
    color: var(--thread-comment-guest-link-color);
    text-decoration: none;
}

.thread-comments-card__guest-link--secondary {
    background-color: var(--thread-comment-guest-secondary-bg);
    border-color: var(--thread-comment-guest-secondary-border);
    color: var(--thread-comment-guest-secondary-color);
}

.thread-comments-card__guest-link--secondary:hover {
    background-color: var(--thread-comment-guest-secondary-hover-bg);
    color: var(--thread-comment-guest-secondary-color);
}

.thread-comments-card__list {
    margin-top: 0;
}

.thread-comments-card__body--guest .thread-comments-card__list {
    margin-top: 0;
}

.thread-comments-card__pagination {
    margin: 0;
}

.thread-comments-card__empty {
    padding: 26px 16px;
    text-align: center;
    color: var(--thread-comment-meta-color);
}

.thread-comments-card__empty::before {
    content: "\f086";
    display: block;
    margin-bottom: 8px;
    font-family: "ForumIcon", sans-serif;
    font-size: 35px;
    line-height: 1;
    color: var(--thread-comment-empty-icon-color);
}

.thread-comment {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    padding: 14px 0;
    border-top: 1px solid var(--thread-comment-divider-color);
}

.thread-comment:first-child {
    border-top: 0;
}

.thread-comment__avatar {
    width: 36px;
    height: 36px;
    box-sizing: border-box;
    border: 2.4px solid var(--thread-comment-avatar-border);
    border-radius: 50%;
    box-shadow: var(--thread-comment-avatar-shadow);
    overflow: hidden;
    text-decoration: none;
    background: var(--thread-comment-avatar-ring);
    align-self: flex-start;
}

.thread-comment__avatar-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thread-comment__main {
    min-width: 0;
}

.thread-comment__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.thread-comment__meta-main {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.thread-comment__author {
    color: var(--thread-comment-author-color);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.thread-comment__author:hover {
    color: var(--link-hover-color);
    text-decoration: none;
}

.thread-comment__time {
    color: var(--thread-comment-meta-color);
    font-size: 12px;
}

.thread-comment__meta-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.thread-comment__meta-form {
    margin: 0;
}

.thread-comment__icon-button,
.thread-comment__reply-icon {
    border: 0;
    padding: 0;
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--thread-comment-action-color);
    cursor: pointer;
}

.thread-comment__icon-button:hover,
.thread-comment__reply-icon:hover {
    color: var(--thread-comment-action-hover-color);
}

.thread-comment__reply-icon::before {
    font-family: "ForumIcon", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    content: "\f112";
}

.thread-comment__edit-icon {
    font-size: 12px;
    line-height: 1;
}

.thread-comment__icon-button .thread-page-card__meta-action-icon {
    font-size: 12px;
    line-height: 1;
}

.thread-comment__icon-button--delete {
    color: var(--thread-comment-delete-color);
}

.thread-comment__icon-button--delete:hover {
    color: var(--thread-comment-delete-hover-color);
}

.thread-comment__like-button,
.thread-comment-child__like-button {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--thread-comment-action-color);
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
}

.thread-comment__like-button::before,
.thread-comment-child__like-button::before {
    font-family: "ForumIcon", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    content: "\f087";
}

.thread-comment__like-button:not([disabled]):hover,
.thread-comment-child__like-button:not([disabled]):hover {
    color: var(--thread-comment-action-hover-color);
}

.thread-comment__like-button--active,
.thread-comment-child__like-button--active {
    color: var(--thread-comment-action-active-color);
}

.thread-comment__like-button[disabled],
.thread-comment-child__like-button[disabled] {
    cursor: default;
}

.thread-comment__like-button--loading::before,
.thread-comment-child__like-button--loading::before {
    content: "";
    width: 12px;
    height: 12px;
    border: 1.5px solid var(--thread-comment-action-spinner-track-color);
    border-top-color: var(--thread-comment-action-spinner-color);
    border-radius: 50%;
    animation: checkin-button-spin 720ms linear infinite;
}

.thread-comment__like-count,
.thread-comment-child__like-count {
    font-size: 12px;
    line-height: 1;
}

.thread-comment__floor {
    display: inline-flex;
    align-items: center;
    padding: 3px;
    border-radius: 999px;
    background: var(--thread-comment-floor-bg);
    color: var(--thread-comment-floor-color);
    font-size: 10.5px;
    line-height: 1;
    white-space: nowrap;
}

.thread-comments-card__composer-head [data-thread-comment-editor-floor="true"] {
    margin-left: auto;
}

.thread-comment__body {
    margin-top: 6px;
    color: var(--thread-comment-body-color);
    font-size: 14px;
    line-height: 1.7;
    font-family: "ThreadCommentEmoji", "Ziti", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.thread-comment__body--editing {
    margin-top: 10px;
}

.thread-comment__inline-composer {
    gap: 10px;
}

.thread-comment__paragraph {
    white-space: pre-wrap;
}

.thread-comment__paragraph + .thread-comment__paragraph,
.thread-comment__paragraph + .thread-reply-gate,
.thread-reply-gate + .thread-comment__paragraph {
    margin-top: 6px;
}

.thread-comment__image-frame {
    margin: 0;
}

.thread-comment__paragraph + .thread-comment__image-frame,
.thread-comment__image-frame + .thread-comment__paragraph,
.thread-comment__image-frame + .thread-comment__image-frame,
.thread-comment__image-frame + .thread-reply-gate,
.thread-reply-gate + .thread-comment__image-frame {
    margin-top: 10px;
}

.thread-comment__children-tools {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--thread-comment-child-tools-color);
    font-size: 12px;
    line-height: 1;
}

.thread-comment__children-count {
    color: var(--thread-comment-child-tools-color);
}

.thread-comment__children-toggle {
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--thread-comment-child-tools-color);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    transition: color 0.18s ease;
}

.thread-comment__children-toggle:hover {
    color: var(--thread-comment-child-tools-hover-color);
}

.thread-comment__children-toggle {
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.thread-comment__children-toggle::before {
    font-family: "ForumIcon", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    content: "\f106";
}

.thread-comment__children-toggle[aria-expanded="true"]::before {
    content: "\f107";
}

.thread-comment__children {
    margin-top: 10px;
    display: grid;
    gap: 4px;
    padding: 0;
    padding-left: 10px;
    border-left: 0.8px dashed var(--thread-comment-child-item-border);
    background: transparent;
}

.thread-comment__children--collapsed {
    display: none;
}

.thread-comment-child {
    padding: 5px 10px;
    border-radius: 8px;
    border: 0;
    background: var(--thread-comment-child-item-bg);
}

.thread-comment-child__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.thread-comment-child__meta-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.thread-comment-child__meta-main {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.thread-comment-child__author-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--thread-comment-child-author-color);
}

.thread-comment-child__author-link:hover {
    color: var(--thread-comment-child-tools-hover-color);
    text-decoration: none;
}

.thread-comment-child__avatar-image {
    display: block;
    width: 24px;
    height: 24px;
    box-sizing: border-box;
    border: 2px solid var(--thread-comment-avatar-border);
    border-radius: 50%;
    box-shadow: var(--thread-comment-avatar-shadow);
    overflow: hidden;
    object-fit: cover;
    background: var(--thread-comment-avatar-ring);
    flex: 0 0 auto;
}

.thread-comment-child__author {
    font-size: 12px;
    font-weight: 700;
}

.thread-comment-child__time {
    color: var(--thread-comment-child-time-color);
    font-size: 12px;
}

.thread-comment-child__body {
    margin-top: 3px;
    color: var(--thread-comment-child-body-color);
    font-size: 13px;
    line-height: 1.65;
    font-family: "ThreadCommentEmoji", "Ziti", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.thread-comment-child__paragraph {
    white-space: pre-wrap;
}

.thread-comment-child__paragraph + .thread-comment-child__paragraph,
.thread-comment-child__paragraph + .thread-reply-gate,
.thread-reply-gate + .thread-comment-child__paragraph {
    margin-top: 5px;
}

.thread-comments-card--guest-view .thread-comment {
    padding-left: 0;
    padding-right: 0;
}

.thread-comments-card--guest-view .thread-comment__body {
    line-height: 1.65;
}

.thread-user-card {
    position: relative;
    overflow: visible;
}

.thread-user-card__hero {
    height: 100px;
    border-radius: 12px 12px 0 0;
    background: var(--thread-user-card-hero-bg);
}

.thread-user-card__avatar {
    position: absolute;
    left: 50%;
    top: 68.5px;
    transform: translateX(-50%);
    width: 63px;
    height: 63px;
    border: 1px solid rgb(255, 255, 255);
    border-radius: 50%;
    background: transparent;
    text-decoration: none;
    overflow: hidden;
}

.thread-user-card__avatar-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thread-user-card__body {
    padding: 44px 18px 18px;
}

.thread-user-card__name {
    display: block;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--link-color);
    text-decoration: none;
}

.thread-user-card__name:hover {
    color: var(--link-hover-color);
    text-decoration: none;
}

.thread-user-card__follow-button,
.user-profile-summary-card__action-button {
    margin: 10px auto 0;
    display: flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 10px 4px;
    border: 0;
    border-radius: 6px;
    background-color: var(--topbar-compose-bg);
    color: var(--topbar-compose-color);
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: background-color 0.18s ease, opacity 0.18s ease;
    appearance: none;
}

.thread-user-card__follow-button:not([disabled]):hover,
.user-profile-summary-card__action-button:hover {
    background-color: var(--topbar-compose-hover-bg);
    color: var(--topbar-compose-color);
    text-decoration: none;
}

.thread-user-card__follow-button--active,
.thread-user-card__follow-button--self {
    background-color: var(--topbar-icon-action-bg);
    color: var(--topbar-icon-action-color);
    cursor: default;
    opacity: 0.72;
}

.thread-user-card__follow-button[disabled] {
    cursor: default;
    opacity: 0.72;
}

.thread-user-card__follow-button--loading {
    opacity: 1;
    cursor: progress;
}

.thread-user-card__follow-button-spinner {
    display: none;
    width: 12px;
    height: 12px;
    border: 2px solid var(--checkin-button-spinner-track-color);
    border-top-color: var(--checkin-button-spinner-color);
    border-radius: 50%;
    animation: checkin-button-spin 720ms linear infinite;
}

.thread-user-card__follow-button--loading .thread-user-card__follow-button-spinner {
    display: inline-block;
}

.thread-user-card__follow-button--loading .thread-user-card__follow-button-icon {
    display: none;
}

.thread-user-card__follow-button-icon {
    display: inline-block;
    font-family: "ForumIcon", sans-serif;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    font-size: 12px;
}

.thread-user-card__follow-button-icon::before {
    content: "\f234";
}

.thread-user-card__follow-button-label {
    line-height: 1;
}

.thread-user-card__divider {
    margin-top: 16px;
    border-top: 1px solid var(--divider-color);
}

.thread-user-card__stats {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.thread-user-card__stat {
    min-width: 0;
    display: grid;
    gap: 6px;
    justify-items: center;
    text-align: center;
}

.thread-user-card__label {
    font-size: 12px;
    color: var(--text-secondary);
}

.thread-user-card__value {
    font-size: 14px;
    font-weight: 700;
    color: var(--link-color);
}

.thread-item__avatar-link {
    flex: 0 0 auto;
    display: block;
    color: inherit;
    text-decoration: none;
}

.thread-item__avatar-link:hover {
    color: inherit;
    text-decoration: none;
}

.user-profile-page {
    position: relative;
    margin-top: calc(var(--page-stack-gap) * -1);
    padding-bottom: 28px;
}

.user-profile-hero {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 0;
    background: var(--user-profile-hero-bg);
    overflow: hidden;
}

.user-profile-hero__inner {
    position: relative;
    height: var(--user-profile-hero-height);
}

.user-profile-hero__inner::before {
    content: none;
}

.user-profile-shell {
    position: relative;
    z-index: 1;
    padding-top: var(--user-profile-shell-top-padding);
}

.user-profile-layout {
    display: grid;
    grid-template-columns: var(--user-profile-sidebar-width) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.user-profile-sidebar {
    min-width: 0;
    width: var(--user-profile-sidebar-width);
}

.user-profile-sidebar-card,
.user-profile-panel {
    background: var(--user-profile-summary-bg);
    border: 0;
    border-radius: 12px;
    box-shadow: none;
}

.user-profile-sidebar-card {
    overflow: visible;
}

.user-profile-summary-card {
    position: relative;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.user-profile-summary-card__avatar {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: calc(
        var(--user-profile-avatar-size)
        * var(--user-profile-avatar-overlap-ratio)
        * -1
    );
    transform: translateX(-50%);
    width: var(--user-profile-avatar-size);
    height: var(--user-profile-avatar-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 4px solid var(--user-profile-avatar-border);
    border-radius: 50%;
    box-shadow: var(--user-profile-avatar-shadow);
    background: var(--surface-bg);
    overflow: hidden;
    text-decoration: none;
}

.user-profile-summary-card__avatar-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-profile-summary-card__body {
    padding:
        calc(
            var(--user-profile-avatar-size)
            * (1 - var(--user-profile-avatar-overlap-ratio))
            + 20px
        )
        16px
        20px;
}

.user-profile-summary-card__name {
    display: block;
    color: var(--user-profile-name-color);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
}

.user-profile-summary-card__name:hover {
    color: var(--link-hover-color);
    text-decoration: none;
}

.user-profile-summary-card__action-form {
    margin-top: 14px;
    display: flex;
    justify-content: center;
}

.user-profile-summary-card__action-button {
    margin-top: 0;
}

.user-profile-summary-card__action-button--logout {
    background-color: var(--user-profile-action-logout-bg);
    color: var(--user-profile-action-logout-color);
    box-shadow: none;
}

.user-profile-summary-card__action-button--logout:hover {
    background-color: var(--user-profile-action-logout-hover-bg);
    color: var(--user-profile-action-logout-color);
}

.user-profile-summary-card__action-icon {
    display: inline-block;
    font-family: "ForumIcon", sans-serif;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    font-size: 12px;
}

.user-profile-summary-card__action-icon--logout::before {
    content: "\f2f5";
}

.user-profile-summary-card__action-label {
    line-height: 1;
}

.user-profile-summary-card__body .thread-user-card__follow-button {
    margin-top: 14px;
}

.user-profile-summary-card__divider {
    margin-top: 18px;
    border-top: 1px dashed var(--user-profile-field-divider);
}

.user-profile-summary-card__stats {
    margin-top: 14px;
    padding-top: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.user-profile-summary-card__stat {
    min-width: 0;
    display: grid;
    gap: 5px;
    justify-items: center;
    text-align: center;
}

.user-profile-summary-card__stat-value {
    color: var(--user-profile-stat-value-color);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.1;
}

.user-profile-summary-card__stat-label {
    color: var(--user-profile-stat-label-color);
    font-size: 12px;
    line-height: 1.2;
}

.user-profile-nav {
    margin-top: 0;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--user-profile-nav-border);
    border-radius: 0 0 12px 12px;
    box-shadow: none;
    overflow: hidden;
}

.user-profile-nav__item {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 12px 0 14px;
    background-color: transparent;
    color: var(--user-profile-nav-item-color);
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.user-profile-nav__item--with-dot {
    grid-template-columns: minmax(0, 1fr) auto auto;
}

.user-profile-nav__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 14px;
    border-radius: 0 999px 999px 0;
    transform: translateY(-50%);
    background-color: transparent;
    transition: background-color 0.18s ease;
}

.user-profile-nav__item:hover {
    background-color: var(--user-profile-nav-item-hover-bg);
    color: var(--user-profile-nav-item-active-color);
    text-decoration: none;
}

.user-profile-nav__item--active {
    background-color: var(--user-profile-nav-item-active-bg);
    color: var(--user-profile-nav-item-active-color);
}

.user-profile-nav__item:last-child {
    border-radius: 0 0 12px 12px;
}

.user-profile-nav__item--active::before {
    background: var(--user-profile-nav-indicator-bg);
}

.user-profile-nav__item-label {
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
}

.user-profile-nav__item-dot {
    width: 5px;
    height: 5px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--user-profile-nav-message-dot-bg);
}

.user-profile-nav__item-arrow {
    display: inline-block;
    font-family: "ForumIcon", sans-serif;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    font-size: 12px;
    color: var(--user-profile-nav-icon-color);
}

.user-profile-nav__item-arrow::before {
    content: "\f105";
}

.user-profile-panel {
    min-width: 0;
    background: var(--user-profile-panel-bg);
    border-color: transparent;
    box-shadow: none;
}

.user-profile-panel__tabs {
    display: flex;
    align-items: stretch;
    gap: 28px;
    min-height: 38px;
    padding: 0 16px;
    border-bottom: 1px solid var(--user-profile-field-divider);
}

.user-profile-panel__tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    color: var(--user-profile-tab-color);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
}

.user-profile-panel__tab:hover {
    color: var(--user-profile-tab-active-color);
    text-decoration: none;
}

.user-profile-panel__tab--active {
    color: var(--user-profile-tab-active-color);
}

.user-profile-panel__tab--active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    border-radius: 999px;
    background: var(--user-profile-tab-active-border);
}

.user-profile-panel__body {
    padding: 14px 22px 20px;
}

.user-profile-panel__body--profile {
    display: grid;
    gap: 18px;
}

.user-profile-panel__body--follow {
    display: grid;
    gap: 12px;
}

.user-profile-settings {
    display: grid;
}

.user-profile-settings__panels {
    display: grid;
}

.user-profile-settings__panel[hidden] {
    display: none;
}

.user-profile-fields {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px;
}

.user-profile-field {
    margin: 0;
    padding: 12px 0;
    border-bottom: 1px solid var(--user-profile-field-divider);
}

.user-profile-field__label {
    color: var(--user-profile-field-label-color);
    font-size: 12px;
    line-height: 1.4;
}

.user-profile-field__value {
    margin: 6px 0 0;
    color: var(--user-profile-field-value-color);
    font-size: 14px;
    line-height: 1.65;
    word-break: break-word;
}

.user-profile-password-panel {
    width: min(100%, 486px);
    margin: 0 auto;
    display: grid;
    gap: 18px;
}

.user-profile-password-panel__intro {
    display: grid;
    gap: 6px;
    justify-items: center;
    text-align: center;
}

.user-profile-password-panel__title {
    margin: 0;
    color: var(--user-profile-field-value-color);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}

.user-profile-password-panel__hint {
    margin: 0;
    color: var(--user-profile-password-intro-color);
    font-size: 13px;
    line-height: 1.6;
}

.user-profile-password-form {
    display: grid;
    gap: 18px;
}

.user-profile-password-form__field {
    margin: 0;
}

.user-profile-permission-panel {
    width: min(100%, 486px);
    margin: 0 auto;
    display: grid;
    gap: 18px;
}

.user-profile-permission-panel__intro {
    display: grid;
    gap: 6px;
    text-align: center;
}

.user-profile-permission-panel__title {
    margin: 0;
    color: var(--user-profile-field-value-color);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}

.user-profile-permission-panel__hint {
    margin: 0;
    color: var(--user-profile-password-intro-color);
    font-size: 13px;
    line-height: 1.6;
}

.user-profile-permission-form {
    display: grid;
    gap: 14px;
}

.user-profile-permission-form__toggle {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 10px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--user-profile-permission-toggle-border);
    border-radius: 12px;
    background: var(--user-profile-permission-toggle-bg);
}

.user-profile-permission-form__toggle-input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--user-profile-tab-active-border);
}

.user-profile-permission-form__toggle-label {
    color: var(--user-profile-permission-toggle-label-color);
    font-size: 14px;
    line-height: 1.6;
}

.user-profile-avatar-panel {
    display: grid;
    gap: 18px;
}

.user-profile-avatar-panel__row {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--user-profile-avatar-panel-border);
    border-radius: 16px;
    background: var(--user-profile-avatar-panel-bg);
}

.user-profile-avatar-panel__row--current {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "current_card intro"
        "current_card actions";
    align-items: center;
    column-gap: 18px;
}

.user-profile-avatar-panel__intro {
    display: grid;
    gap: 6px;
}

.user-profile-avatar-panel__title {
    margin: 0;
    color: var(--user-profile-field-value-color);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}

.user-profile-avatar-panel__hint {
    margin: 0;
    color: var(--user-profile-password-intro-color);
    font-size: 13px;
    line-height: 1.6;
}

.user-profile-avatar-panel__row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.user-profile-avatar-panel__empty {
    margin: 0;
    padding: 16px 12px;
    border: 1px dashed var(--user-profile-avatar-card-border);
    border-radius: 12px;
    color: var(--user-profile-password-intro-color);
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
}

.user-profile-avatar-current-card {
    grid-area: current_card;
    align-self: center;
    min-width: 180px;
    display: grid;
    place-items: center;
    padding: 18px;
    border: 1px solid var(--user-profile-avatar-current-border);
    border-radius: 20px;
    background: var(--user-profile-avatar-current-bg);
    box-shadow: var(--user-profile-avatar-current-shadow);
}

.user-profile-avatar-current-card__image {
    width: 128px;
    height: 128px;
    display: block;
    object-fit: cover;
    border-radius: 24px;
}

.user-profile-avatar-panel__row--current .user-profile-avatar-panel__intro {
    grid-area: intro;
    align-self: end;
}

.user-profile-avatar-panel__row--current .user-profile-avatar-panel__row-actions {
    grid-area: actions;
    align-self: start;
}

.user-profile-avatar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    gap: 12px;
}

.user-profile-avatar-form {
    display: grid;
    gap: 18px;
}

.user-profile-avatar-form__notice {
    display: none;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.6;
}

.user-profile-avatar-form__notice[data-kind="error"] {
    display: block;
    background: var(--user-profile-password-notice-error-bg);
    border-color: var(--user-profile-password-notice-error-border);
    color: var(--user-profile-password-notice-error-color);
}

.user-profile-avatar-card {
    position: relative;
    display: block;
    margin: 0;
}

.user-profile-avatar-card__input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.user-profile-avatar-card__media {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    padding: 10px;
    border: 1px solid var(--user-profile-avatar-card-border);
    border-radius: 16px;
    background: var(--user-profile-avatar-card-bg);
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background-color 0.18s ease,
        box-shadow 0.18s ease;
}

.user-profile-avatar-card:hover .user-profile-avatar-card__media {
    transform: translateY(-1px);
    border-color: var(--user-profile-avatar-card-hover-border);
    background: var(--user-profile-avatar-card-hover-bg);
}

.user-profile-avatar-card__input:checked + .user-profile-avatar-card__media {
    transform: none;
    border-color: var(--user-profile-avatar-card-active-border);
    background: var(--user-profile-avatar-card-active-bg);
    box-shadow: var(--user-profile-avatar-card-active-shadow);
}

.user-profile-avatar-card__input:focus-visible + .user-profile-avatar-card__media {
    outline: 2px solid var(--user-profile-tab-active-border);
    outline-offset: 2px;
}

.user-profile-avatar-card__image {
    width: 44px;
    height: 44px;
    display: block;
    object-fit: cover;
    border-radius: 12px;
}

.user-profile-avatar-pagination {
    margin-top: 2px;
}

.user-profile-placeholder-panel {
    width: min(100%, 486px);
    margin: 0 auto;
    display: grid;
    gap: 8px;
    justify-items: center;
    text-align: center;
    padding: 18px 0;
}

.user-profile-placeholder-panel__title {
    margin: 0;
    color: var(--user-profile-field-value-color);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}

.user-profile-placeholder-panel__hint {
    margin: 0;
    color: var(--user-profile-password-intro-color);
    font-size: 13px;
    line-height: 1.6;
}

.user-profile-panel__body--points {
    display: grid;
    gap: 16px;
}

.user-profile-points-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(220px, 0.9fr);
    gap: 18px;
    padding: 18px 18px 16px;
    border: 1px solid var(--user-profile-points-hero-border);
    border-radius: 16px;
    background: var(--user-profile-points-hero-bg);
}

.user-profile-points-hero__copy {
    display: grid;
    gap: 8px;
    align-content: start;
}

.user-profile-points-hero__eyebrow {
    color: var(--user-profile-points-hero-eyebrow-color);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.08em;
}

.user-profile-points-hero__level {
    margin: 0;
    color: var(--user-profile-points-hero-level-color);
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}

.user-profile-points-hero__experience,
.user-profile-points-hero__score {
    color: var(--user-profile-points-hero-meta-color);
    font-size: 13px;
    line-height: 1.55;
}

.user-profile-points-hero__score {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
}

.user-profile-points-hero__experience strong {
    font-size: 18px;
    font-weight: 700;
}

.user-profile-points-hero__chart {
    display: grid;
    gap: 10px;
    align-content: center;
}

.user-profile-points-hero__progress {
    position: relative;
    height: 12px;
    border-radius: 999px;
    background: var(--user-profile-points-progress-track);
    overflow: hidden;
}

.user-profile-points-hero__progress-bar {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--user-profile-points-progress-fill);
}

.user-profile-points-hero__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--user-profile-points-hero-meta-color);
    font-size: 12px;
    line-height: 1.5;
}

.user-profile-points-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.user-profile-points-card {
    --user-profile-points-card-accent: var(--user-profile-points-total-accent);
    position: relative;
    display: grid;
    gap: 10px;
    padding: 16px 14px 14px;
    border: 1px solid var(--user-profile-points-card-border);
    border-radius: 14px;
    background-color: var(--user-profile-points-card-bg);
    overflow: hidden;
}

.user-profile-points-card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background-color: var(--user-profile-points-card-accent);
}

.user-profile-points-card--total {
    --user-profile-points-card-accent: var(--user-profile-points-total-accent);
}

.user-profile-points-card--streak {
    --user-profile-points-card-accent: var(--user-profile-points-streak-accent);
}

.user-profile-points-card--week {
    --user-profile-points-card-accent: var(--user-profile-points-week-accent);
}

.user-profile-points-card--month {
    --user-profile-points-card-accent: var(--user-profile-points-month-accent);
}

.user-profile-points-card__label {
    color: var(--user-profile-points-card-label-color);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
}

.user-profile-points-card__value {
    color: var(--user-profile-points-card-value-color);
    font-size: 29px;
    font-weight: 700;
    line-height: 1;
}

.user-profile-points-card__chart {
    height: 8px;
    border-radius: 999px;
    background-color: var(--user-profile-points-card-chart-bg);
    overflow: hidden;
}

.user-profile-points-card__chart-fill {
    display: block;
    width: var(--metric-fill);
    height: 100%;
    border-radius: inherit;
    background-color: var(--user-profile-points-card-accent);
}

.user-profile-points-card__helper {
    color: var(--user-profile-points-card-helper-color);
    font-size: 12px;
    line-height: 1.5;
}

.user-profile-points-week {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--user-profile-points-week-border);
    border-radius: 14px;
    background-color: var(--user-profile-points-week-bg);
}

.user-profile-points-week__title {
    margin: 0;
    color: var(--user-profile-points-week-title-color);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
}

.user-profile-points-week__hint {
    margin: 6px 0 0;
    color: var(--user-profile-points-week-hint-color);
    font-size: 12px;
    line-height: 1.6;
}

.user-profile-points-week__days {
    width: 100%;
    margin: 0;
}

.user-profile-points-week__day {
    min-width: 0;
}

.user-profile-password-form__notice {
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.6;
}

.user-profile-password-form__notice[hidden] {
    display: none;
}

.user-profile-password-form__notice[data-kind="success"] {
    background: var(--user-profile-password-notice-success-bg);
    border-color: var(--user-profile-password-notice-success-border);
    color: var(--user-profile-password-notice-success-color);
}

.user-profile-password-form__notice[data-kind="error"] {
    background: var(--user-profile-password-notice-error-bg);
    border-color: var(--user-profile-password-notice-error-border);
    color: var(--user-profile-password-notice-error-color);
}

.user-profile-password-form__submit,
.user-profile-avatar-form__submit {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 18px;
    border: 0;
    border-radius: 10px;
    background: var(--user-profile-password-submit-bg);
    color: var(--user-profile-password-submit-color);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    filter: brightness(1);
    transition: transform 0.18s ease, filter 0.18s ease, color 0.18s ease;
}

.user-profile-password-form__submit {
    width: 100%;
}

.user-profile-avatar-form__submit {
    width: auto;
    min-width: 132px;
}

.user-profile-password-form__submit:hover,
.user-profile-avatar-form__submit:hover {
    transform: translateY(-1px);
    filter: brightness(var(--interactive-hover-brightness));
}

.user-profile-password-form__submit:disabled,
.user-profile-password-form__submit:disabled:hover,
.user-profile-avatar-form__submit:disabled,
.user-profile-avatar-form__submit:disabled:hover {
    background-color: var(--user-profile-password-submit-disabled-bg);
    color: var(--user-profile-password-submit-disabled-color);
    cursor: not-allowed;
    filter: none;
    transform: none;
}

.user-profile-password-form__submit-spinner,
.user-profile-avatar-form__submit-spinner {
    width: 16px;
    height: 16px;
    display: none;
    border: 2px solid var(--user-profile-password-spinner-track-color);
    border-top-color: var(--user-profile-password-spinner-color);
    border-radius: 999px;
    animation: compose-action-spinner 700ms linear infinite;
}

.user-profile-password-form__submit--loading .user-profile-password-form__submit-spinner,
.user-profile-avatar-form__submit--loading .user-profile-avatar-form__submit-spinner {
    display: inline-block;
}

.user-profile-password-form__submit-label,
.user-profile-avatar-form__submit-label {
    display: inline-block;
}

.user-profile-panel__body--message {
    display: grid;
    gap: 12px;
}

.admin-user-message-compose {
    width: min(100%, 640px);
    margin: 0 auto;
    display: grid;
    gap: 18px;
}

.admin-user-message-compose[hidden],
.admin-user-message-list-panel[hidden] {
    display: none;
}

.admin-user-message-compose__intro {
    display: grid;
    gap: 6px;
    text-align: center;
}

.admin-user-message-compose__title {
    margin: 0;
    color: var(--user-profile-field-value-color);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}

.admin-user-message-compose__hint {
    margin: 0;
    color: var(--user-profile-password-intro-color);
    font-size: 13px;
    line-height: 1.6;
}

.admin-user-message-compose__form {
    display: grid;
    gap: 14px;
}

.register-field.admin-user-message-compose__field {
    margin: 0;
    min-width: 0;
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
}

.register-field.admin-user-message-compose__field > .register-field__input {
    min-width: 0;
    grid-column: 1 / -1;
}

.admin-user-message-compose__textarea-wrap {
    display: block;
}

.admin-user-message-compose__textarea {
    width: 100%;
    min-height: 190px;
    padding: 14px 16px;
    resize: vertical;
    border: 1px solid var(--user-message-button-border);
    border-radius: 14px;
    background: var(--user-message-button-bg);
    color: var(--user-profile-field-value-color);
    font-size: 14px;
    line-height: 1.7;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.admin-user-message-compose__textarea:focus {
    border-color: var(--user-profile-tab-active-border);
    box-shadow: 0 0 0 3px var(--thread-comment-field-focus-ring);
}

.admin-user-message-compose__submit {
    width: 100%;
}

.user-follow-empty {
    padding: 24px 12px;
    text-align: center;
    color: var(--user-follow-empty-color);
    font-size: 13px;
}

.user-follow-feed-list {
    display: grid;
    gap: 8px;
}

.user-follow-feed-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--user-follow-feed-item-border);
    background-color: var(--user-follow-feed-item-bg);
    transition: background-color 0.18s ease, border-color 0.18s ease;
}

.user-follow-feed-item:hover {
    background-color: var(--user-follow-feed-item-hover-bg);
}

.user-follow-feed-item__main {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
}

.user-follow-feed-item__actor {
    min-width: 0;
    max-width: 180px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--user-follow-feed-actor-color);
    text-decoration: none;
}

.user-follow-feed-item__actor:hover {
    color: var(--user-follow-feed-actor-color);
    text-decoration: none;
}

.user-follow-feed-item__avatar-image {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    border-radius: 50%;
    object-fit: cover;
}

.user-follow-feed-item__actor-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}

.user-follow-feed-item__verb {
    flex: 0 0 auto;
    color: var(--user-follow-feed-verb-color);
    font-size: 13px;
    line-height: 1.45;
    white-space: nowrap;
}

.user-follow-feed-item__thread {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--user-follow-feed-thread-color);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    text-decoration: none;
}

.user-follow-feed-item__thread:hover {
    color: var(--user-follow-feed-thread-hover-color);
    text-decoration: none;
}

.user-follow-feed-item__time {
    flex: 0 0 auto;
    color: var(--user-follow-feed-time-color);
    font-size: 12px;
    white-space: nowrap;
}

.user-follow-grid {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.user-follow-card {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 10px;
    border: 1px solid var(--user-follow-card-border);
    background-color: var(--user-follow-card-bg);
    transition: background-color 0.18s ease, border-color 0.18s ease;
}

.user-follow-card:hover {
    background-color: var(--user-follow-card-hover-bg);
}

.user-follow-card--following {
    display: inline-flex;
}

.user-follow-card__select {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.user-follow-card__select input[type="checkbox"] {
    appearance: none;
    width: 14px;
    height: 14px;
    margin: 0;
    border-radius: 4px;
    border: 1px solid var(--user-follow-card-checkbox-border);
    background: var(--user-follow-card-checkbox-bg);
    display: inline-grid;
    place-items: center;
    cursor: pointer;
}

.user-follow-card__select input[type="checkbox"]::after {
    content: "";
    width: 7px;
    height: 7px;
    transform: scale(0);
    transition: transform 120ms ease;
    background: var(--user-follow-card-checkbox-check-color);
    clip-path: polygon(14% 49%, 0 63%, 45% 100%, 100% 26%, 84% 12%, 42% 70%);
}

.user-follow-card__select input[type="checkbox"]:checked {
    background: var(--user-follow-card-checkbox-checked-bg);
    border-color: var(--user-follow-card-checkbox-checked-border);
}

.user-follow-card__select input[type="checkbox"]:checked::after {
    transform: scale(1);
}

.user-follow-card__user {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--user-follow-card-username-color);
    text-decoration: none;
}

.user-follow-card__user:hover {
    color: var(--user-follow-card-username-color);
    text-decoration: none;
}

.user-follow-card__avatar-image {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    border-radius: 50%;
    object-fit: cover;
}

.user-follow-card__username {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
}

.user-follow-card__action-form {
    margin: 0;
}

.user-follow-card__action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 0 8px;
    border-radius: 999px;
    border: 1px solid var(--user-follow-card-action-border);
    background-color: var(--user-follow-card-action-bg);
    color: var(--user-follow-card-action-color);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.user-follow-card__action-button:hover {
    background-color: var(--user-follow-card-action-hover-bg);
}

.user-follow-pagination {
    margin-top: 2px;
}

.user-message-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--user-message-toolbar-bg);
    border: 1px solid var(--user-message-toolbar-border);
}

.user-message-toolbar__stats {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--user-message-toolbar-text);
    font-size: 12px;
}

.user-message-toolbar__stats strong {
    color: var(--user-message-toolbar-strong);
    font-size: 13px;
    font-weight: 700;
}

.user-message-toolbar__actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.user-message-toolbar__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 6px;
    border: 1px solid var(--user-message-button-border);
    border-radius: 6px;
    background-color: var(--user-message-button-bg);
    color: var(--user-message-button-text);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.user-message-toolbar__button:hover {
    background-color: var(--user-message-button-hover-bg);
}

.user-message-toolbar__button--danger {
    background-color: var(--user-message-button-danger-bg);
    border-color: var(--user-message-button-danger-border);
    color: var(--user-message-button-danger-text);
}

.user-message-toolbar__button[disabled] {
    cursor: default;
    opacity: 0.66;
}

.user-message-empty {
    padding: 24px 12px;
    text-align: center;
    color: var(--user-message-empty-color);
    font-size: 13px;
}

.user-message-list {
    display: grid;
    gap: 10px;
}

.user-message-item {
    position: relative;
    border-radius: 10px;
    border: 1px solid var(--user-message-list-item-border);
    background: var(--user-message-list-item-bg);
    overflow: hidden;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.user-message-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: transparent;
}

.user-message-item--unread::before {
    background: var(--user-message-list-item-unread-bar);
}

.user-message-item--open {
    border-color: var(--user-message-open-border);
    box-shadow: 0 10px 24px -20px var(--user-message-open-shadow);
}

.user-message-item__head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    padding: 9px 10px 8px;
}

.user-message-item__select {
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.user-message-item__select input[type="checkbox"] {
    appearance: none;
    width: 14px;
    height: 14px;
    margin: 0;
    border-radius: 4px;
    border: 1px solid var(--user-message-select-border);
    background: var(--user-message-select-bg);
    cursor: pointer;
    display: inline-grid;
    place-items: center;
}

.user-message-item__select input[type="checkbox"]::after {
    content: "";
    width: 7px;
    height: 7px;
    transform: scale(0);
    transition: transform 120ms ease;
    background: var(--user-message-select-check-color);
    clip-path: polygon(14% 49%, 0 63%, 45% 100%, 100% 26%, 84% 12%, 42% 70%);
}

.user-message-item__select input[type="checkbox"]:checked {
    background: var(--user-message-select-checked-bg);
    border-color: var(--user-message-select-checked-border);
}

.user-message-item__select input[type="checkbox"]:checked::after {
    transform: scale(1);
}

.user-message-item__select-lock {
    width: 14px;
    height: 14px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--user-message-admin-badge-border);
    border-radius: 4px;
    background: var(--user-message-admin-badge-bg);
    color: var(--user-message-admin-badge-color);
    font-family: "ForumIcon", sans-serif;
    font-size: 9px;
    line-height: 1;
}

.user-message-item__select-lock::before {
    content: "\f023";
}

.user-message-item__title {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 4px 6px;
    border-radius: 6px;
    background-color: transparent;
    cursor: pointer;
    transition: background-color 0.18s ease;
}

.user-message-item__title:hover {
    background-color: var(--user-message-toggle-hover-bg);
}

.user-message-item__title:focus-visible {
    outline: 2px solid var(--thread-comment-field-focus-ring);
    outline-offset: 1px;
}

.user-message-item__toggle-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    color: var(--user-message-toggle-indicator-color);
    font-family: "ForumIcon", sans-serif;
    font-size: 12px;
    line-height: 1;
}

.user-message-item__toggle-indicator::before {
    content: "\f107";
}

.user-message-item--open .user-message-item__toggle-indicator::before {
    content: "\f106";
}

.user-message-item__title-main {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
}

.user-message-item__actor {
    min-width: 0;
    max-width: 148px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 1 auto;
}

.user-message-item__actor-avatar-image {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    border-radius: 50%;
    object-fit: cover;
}

.user-message-item__actor-name {
    min-width: 0;
    overflow: hidden;
    color: var(--user-message-actor-name-color);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-message-item__title-action {
    flex: 0 0 auto;
    color: var(--user-message-title-action-color);
    font-size: 13px;
    line-height: 1.45;
    white-space: nowrap;
}

.user-message-item__subject-text {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--user-message-list-title-color);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.55;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-message-item__kind-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 0 8px;
    border: 1px solid var(--user-message-admin-badge-border);
    border-radius: 999px;
    background: var(--user-message-admin-badge-bg);
    color: var(--user-message-admin-badge-color);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.user-message-item__time {
    color: var(--user-message-list-time-color);
    font-size: 12px;
    white-space: nowrap;
}

.user-message-item__actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.user-message-item__delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 8px;
    border: 1px solid var(--user-message-delete-button-border);
    border-radius: 999px;
    background-color: var(--user-message-delete-button-bg);
    color: var(--user-message-delete-button-text);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.user-message-item__delete:hover {
    background-color: var(--user-message-delete-button-hover-bg);
}

.user-message-item__delete[disabled] {
    cursor: default;
    opacity: 0.66;
}

.user-message-item__body {
    margin: 0 10px 10px 31px;
    padding: 0 6px 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    border-left: 0.8px dashed var(--user-message-list-body-border);
}

.user-message-item__body[hidden] {
    display: none;
}

.user-message-item__body-prefix {
    color: var(--user-message-body-prefix-color);
    font-size: 13px;
    line-height: 1.6;
}

.user-message-item__body-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--user-message-list-link-color);
    font-size: 13px;
    line-height: 1.6;
    text-decoration: none;
    word-break: break-word;
}

.user-message-item__body-link:hover {
    color: var(--user-message-list-link-hover-color);
    text-decoration: none;
}

.user-message-item__body-avatar-image {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    border-radius: 50%;
    object-fit: cover;
}

.user-message-item__body-user-text,
.user-message-item__body-thread-text {
    min-width: 0;
}

.user-message-item__admin-direct-body {
    flex: 1 1 100%;
    min-width: 0;
    color: var(--user-profile-field-value-color);
    font-size: 13px;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
}

.user-message-pagination {
    margin: 2px 0 0;
}

.admin-user-message-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--user-message-toolbar-bg);
    border: 1px solid var(--user-message-toolbar-border);
}

.admin-user-message-toolbar__stats {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--user-message-toolbar-text);
    font-size: 12px;
}

.admin-user-message-toolbar__stats strong {
    color: var(--user-message-toolbar-strong);
    font-size: 13px;
    font-weight: 700;
}

.admin-user-message-toolbar__actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.admin-user-message-list {
    display: grid;
    gap: 8px;
}

.admin-user-message-item__kind,
.admin-user-message-item__state {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.admin-user-message-item__kind {
    border: 1px solid var(--user-message-admin-badge-border);
    background: var(--user-message-admin-badge-bg);
    color: var(--user-message-admin-badge-color);
}

.admin-user-message-item__state--read {
    background: var(--admin-user-message-state-read-bg);
    color: var(--admin-user-message-state-read-color);
}

.admin-user-message-item__state--unread {
    background: var(--admin-user-message-state-unread-bg);
    color: var(--admin-user-message-state-unread-color);
}

.admin-user-message-item__title-main {
    flex-wrap: wrap;
    overflow: visible;
}

.admin-user-message-item__body {
    display: grid;
    align-items: flex-start;
    gap: 8px;
}

.admin-user-message-item__body-content {
    color: var(--user-profile-field-value-color);
    font-size: 14px;
    line-height: 1.75;
    white-space: pre-wrap;
    word-break: break-word;
}

.admin-user-message-item__link {
    color: var(--user-message-list-link-color);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
}

.admin-user-message-item__link:hover {
    color: var(--user-message-list-link-hover-color);
    text-decoration: none;
}

.admin-direct-modal-open {
    overflow: hidden;
}

.admin-direct-modal {
    position: fixed;
    inset: 0;
    z-index: 2200;
    display: grid;
    place-items: center;
    padding: 20px;
}

.admin-direct-modal__backdrop {
    position: absolute;
    inset: 0;
    background: var(--admin-direct-modal-backdrop);
}

.admin-direct-modal__surface {
    position: relative;
    width: min(100%, 560px);
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 14px;
    min-height: min(540px, calc(100vh - 40px));
    max-height: calc(100vh - 40px);
    padding: 22px;
    border: 1px solid var(--user-profile-panel-border);
    border-radius: 22px;
    background: var(--surface-bg);
    box-shadow: var(--user-profile-panel-shadow);
    -webkit-user-select: none;
    user-select: none;
}

.admin-direct-modal__eyebrow {
    color: var(--user-message-admin-badge-color);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.08em;
}

.admin-direct-modal__title {
    margin: 0;
    color: var(--user-profile-field-value-color);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.35;
}

.admin-direct-modal__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--user-profile-password-intro-color);
    font-size: 12px;
    line-height: 1.6;
}

.admin-direct-modal__body {
    min-height: 220px;
    height: 100%;
    padding: 14px 16px;
    border: 1px solid var(--user-message-list-body-border);
    border-radius: 14px;
    background: var(--user-message-list-body-bg);
    color: var(--user-profile-field-value-color);
    font-size: 14px;
    line-height: 1.8;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-y: auto;
    -webkit-user-select: text;
    user-select: text;
}

.admin-direct-modal__form {
    display: grid;
    gap: 12px;
}

.admin-direct-modal__field {
    display: grid;
    gap: 8px;
}

.admin-direct-modal__field-label {
    color: var(--user-profile-password-intro-color);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}

.admin-direct-modal__action-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}

.admin-direct-modal__input {
    width: 100%;
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid var(--user-message-button-border);
    border-radius: 12px;
    background: var(--user-message-button-bg);
    color: var(--user-profile-field-value-color);
    font-size: 14px;
    line-height: 1;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.admin-direct-modal__input:focus {
    border-color: var(--user-profile-tab-active-border);
    box-shadow: 0 0 0 3px var(--thread-comment-field-focus-ring);
}

.admin-direct-modal__notice {
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.6;
}

.admin-direct-modal__notice[hidden] {
    display: none;
}

.admin-direct-modal__notice[data-kind="error"] {
    background: var(--user-profile-password-notice-error-bg);
    border-color: var(--user-profile-password-notice-error-border);
    color: var(--user-profile-password-notice-error-color);
}

.admin-direct-modal__confirm {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 108px;
    padding: 0 18px;
    border: 0;
    border-radius: 12px;
    background: var(--user-profile-password-submit-bg);
    color: var(--user-profile-password-submit-color);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.18s ease, filter 0.18s ease;
}

.admin-direct-modal__confirm:hover {
    transform: translateY(-1px);
    filter: brightness(var(--interactive-hover-brightness));
}

.admin-direct-modal__confirm:disabled,
.admin-direct-modal__confirm:disabled:hover {
    background: var(--user-profile-password-submit-disabled-bg);
    color: var(--user-profile-password-submit-disabled-color);
    cursor: not-allowed;
    filter: none;
    transform: none;
}

.admin-direct-modal__confirm-spinner {
    width: 16px;
    height: 16px;
    display: none;
    border: 2px solid var(--user-profile-password-spinner-track-color);
    border-top-color: var(--user-profile-password-spinner-color);
    border-radius: 999px;
    animation: compose-action-spinner 700ms linear infinite;
}

.admin-direct-modal__confirm--loading .admin-direct-modal__confirm-spinner {
    display: inline-block;
}

.register-page {
    flex: 1 0 auto;
    padding: 12px 0 32px;
}

.register-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(360px, 0.92fr);
    min-height: 742px;
    overflow: hidden;
    border-radius: 26px;
    background: var(--register-shell-bg);
    box-shadow: none;
}

.register-shell__art {
    position: relative;
    min-width: 0;
    padding: 44px 28px 36px 34px;
    background: var(--register-art-bg);
}

.register-shell__art::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--register-art-line-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--register-art-line-color) 1px, transparent 1px);
    background-size: 88px 88px;
    mask-image: linear-gradient(180deg, var(--register-card-mask-color), transparent 86%);
    pointer-events: none;
}

.register-illustration {
    position: relative;
    height: 100%;
    min-height: 660px;
}

.register-illustration__halo {
    position: absolute;
    border-radius: 50%;
    border: 1px solid var(--register-card-orbit-color);
}

.register-illustration__halo--one {
    top: 16px;
    right: -120px;
    width: 260px;
    height: 260px;
}

.register-illustration__halo--two {
    top: 48px;
    right: -74px;
    width: 180px;
    height: 180px;
}

.register-illustration__cloud {
    position: absolute;
    top: 26px;
    left: 44%;
    width: 88px;
    height: 28px;
    border: 3px solid var(--register-cloud-border-color);
    border-radius: 999px;
    border-bottom-color: transparent;
}

.register-illustration__cloud::before,
.register-illustration__cloud::after {
    content: "";
    position: absolute;
    border: 3px solid var(--register-cloud-border-color);
    border-bottom-color: transparent;
    border-radius: 999px;
    background: transparent;
}

.register-illustration__cloud::before {
    left: 8px;
    bottom: 10px;
    width: 28px;
    height: 24px;
}

.register-illustration__cloud::after {
    left: 34px;
    bottom: 12px;
    width: 34px;
    height: 28px;
}

.register-illustration__panel {
    position: absolute;
    border-radius: 8px;
    box-shadow: var(--register-input-shadow);
}

.register-illustration__panel--primary {
    left: 144px;
    top: 22px;
    width: 206px;
    height: 72px;
    background: var(--register-art-panel-bg);
    transform: rotate(-16deg);
}

.register-illustration__panel--secondary {
    left: 358px;
    top: 38px;
    width: 128px;
    height: 118px;
    background: var(--register-art-panel-alt-bg);
    transform: rotate(8deg);
}

.register-illustration__device {
    position: absolute;
    left: 114px;
    top: 120px;
    width: 430px;
    height: 326px;
    padding: 18px;
    border-radius: 24px;
    background: var(--register-art-device-bg);
    box-shadow: var(--register-art-device-shadow);
    transform: perspective(1200px) rotateX(8deg) rotateY(-16deg);
}

.register-illustration__device::before {
    content: "";
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: -42px;
    height: 76px;
    border-radius: 0 0 28px 28px;
    background: var(--register-art-keyboard-bg);
    transform: skewX(-28deg);
}

.register-illustration__screen {
    height: 100%;
    border-radius: 16px;
    background:
        var(--register-art-screen-gloss),
        var(--register-art-screen-glow),
        var(--register-art-screen-bg);
}

.register-illustration__keyboard {
    position: absolute;
    left: 86px;
    right: 74px;
    bottom: -66px;
    height: 116px;
    border-radius: 12px 12px 24px 24px;
    background:
        linear-gradient(var(--register-art-line-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--register-art-line-color) 1px, transparent 1px),
        var(--register-art-keyboard-bg);
    background-size: 18px 18px, 24px 24px, auto;
    transform: skewX(-28deg);
}

.register-illustration__phone {
    position: absolute;
    left: 8px;
    bottom: 88px;
    width: 138px;
    height: 244px;
    border-radius: 22px;
    background: var(--register-art-phone-bg);
    transform: rotate(-32deg);
    box-shadow: var(--register-art-phone-shadow);
}

.register-illustration__phone::before {
    content: "";
    position: absolute;
    inset: 16px 12px;
    border-radius: 14px;
    background:
        var(--register-art-phone-dots),
        var(--register-art-phone-gloss);
}

.register-illustration__person {
    position: absolute;
    width: 42px;
    height: 132px;
    border-radius: 999px 999px 16px 16px;
    box-shadow: var(--register-input-shadow);
}

.register-illustration__person::before {
    content: "";
    position: absolute;
    left: 8px;
    top: -24px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--surface-bg) 20%, var(--register-art-person-skin));
}

.register-illustration__person--left {
    left: 34px;
    top: 134px;
    background: var(--register-art-person-left);
}

.register-illustration__person--right {
    right: 94px;
    top: 366px;
    background: var(--register-art-person-right);
}

.register-illustration__person--top {
    left: 202px;
    bottom: 114px;
    background: var(--register-art-person-top);
}

.register-shell__form {
    position: relative;
    display: flex;
    align-items: center;
    padding: 44px 38px 44px 12px;
    background: var(--surface-overlay-bg);
}

.register-card {
    position: relative;
    width: 100%;
    padding: 74px 34px 36px;
}

.register-card__orbit {
    position: absolute;
    top: 0;
    right: -34px;
    width: 204px;
    height: 204px;
    border-radius: 50%;
    border: 1px solid var(--register-card-orbit-color);
    box-shadow:
        0 0 0 30px color-mix(in srgb, var(--register-card-orbit-color) 78%, transparent),
        0 0 0 62px color-mix(in srgb, var(--register-card-orbit-color) 48%, transparent);
    pointer-events: none;
}

.register-card__eyebrow {
    margin-bottom: 14px;
    font-size: 18px;
    font-weight: 500;
    color: var(--register-card-subtitle-color);
}

.register-card__title {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 30px;
    line-height: 1.2;
    color: var(--register-card-title-color);
}

.register-card__title-icon {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    color: var(--register-card-title-color);
}

.register-card__title-icon::before {
    content: "\f500";
    font-family: "ForumIcon", sans-serif;
    font-size: 28px;
    line-height: 1;
}

.register-card__subtitle {
    margin: 14px 0 24px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--register-card-subtitle-color);
}

.register-form {
    display: grid;
    gap: 18px;
}

.register-field {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    min-height: 58px;
    overflow: hidden;
    border: 1px solid var(--register-field-border);
    border-radius: 10px;
    background: var(--register-field-bg);
    box-shadow: var(--register-input-shadow);
}

.register-field:focus-within {
    border-color: color-mix(in srgb, var(--register-send-bg) 40%, var(--register-field-border));
    box-shadow:
        var(--register-input-shadow),
        0 0 0 4px var(--register-field-focus-ring);
}

.register-field--code {
    min-width: 0;
}

.register-field__icon {
    position: relative;
    display: grid;
    place-items: center;
    align-self: stretch;
    background: var(--register-field-icon-bg);
    color: var(--register-field-icon-color);
}

.register-field__icon::before {
    font-family: "ForumIcon", sans-serif;
    font-size: 18px;
    line-height: 1;
}

.register-field__icon--mail::before {
    content: "\f0e0";
}

.register-field__icon--user::before {
    content: "\f007";
}

.register-field__icon--lock::before {
    content: "\f023";
}

.register-field__icon--barcode::before {
    content: "\f11c";
}

.register-field__input {
    width: 100%;
    height: 100%;
    padding: 0 18px;
    border: 0;
    background: transparent;
    color: var(--register-field-text-color);
    font: inherit;
    font-size: 15px;
    outline: none;
}

.register-field__input::placeholder {
    color: var(--register-field-placeholder-color);
}

.register-submit,
.register-code-row__button {
    border: 0;
    font: inherit;
    cursor: pointer;
}

.register-cap-widget {
    min-height: 48px;
    display: flex;
    width: 100%;
    --cap-background: var(--cap-widget-background);
    --cap-border-color: var(--cap-widget-border-color);
    --cap-color: var(--cap-widget-color);
    --cap-checkbox-background: var(--cap-widget-checkbox-background);
    --cap-checkbox-border: var(--cap-widget-checkbox-border);
    --cap-spinner-color: var(--cap-widget-spinner-color);
    --cap-spinner-background-color: var(--cap-widget-spinner-background-color);
    --cap-border-radius: var(--cap-widget-border-radius);
}

.register-cap-widget:not(:defined) {
    align-items: center;
    padding: 0 16px;
    border-radius: 6px;
    background: var(--register-verify-bg);
    color: var(--register-verify-text-color);
    font-size: 15px;
    font-weight: 700;
    box-shadow: var(--register-input-shadow);
}

.register-cap-widget:not(:defined)::before {
    content: "验证码加载中...";
}

@media (prefers-color-scheme: dark) {
    cap-widget {
        --cap-background: var(--cap-widget-background);
        --cap-border-color: var(--cap-widget-border-color);
        --cap-color: var(--cap-widget-color);
        --cap-checkbox-background: var(--cap-widget-checkbox-background);
        --cap-checkbox-border: var(--cap-widget-checkbox-border);
        --cap-spinner-color: var(--cap-widget-spinner-color);
        --cap-spinner-background-color: var(--cap-widget-spinner-background-color);
        --cap-border-radius: var(--cap-widget-border-radius);
    }
}

body.dark cap-widget,
:root[data-theme="dark"] cap-widget {
    --cap-background: var(--cap-widget-background);
    --cap-border-color: var(--cap-widget-border-color);
    --cap-color: var(--cap-widget-color);
    --cap-checkbox-background: var(--cap-widget-checkbox-background);
    --cap-checkbox-border: var(--cap-widget-checkbox-border);
    --cap-spinner-color: var(--cap-widget-spinner-color);
    --cap-spinner-background-color: var(--cap-widget-spinner-background-color);
    --cap-border-radius: var(--cap-widget-border-radius);
}

cap-widget::part(attribution),
cap-widget::part(branding),
cap-widget::part(footer-link),
cap-widget::part(cap-link),
cap-widget::part(bottom-right-link) {
    display: none !important;
}

.register-code-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 116px;
    gap: 16px;
}

.register-code-row__button {
    min-height: 42px;
    align-self: center;
    border-radius: 6px;
    background: var(--register-send-bg);
    color: var(--register-send-text-color);
    font-size: 14px;
    font-weight: 700;
    box-shadow: var(--register-input-shadow);
    filter: brightness(1);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.register-code-row__button[data-sending="true"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.register-code-row__button[data-sending="true"]::before {
    content: "";
    width: 14px;
    height: 14px;
    border: 2px solid var(--register-send-spinner-track-color);
    border-top-color: var(--register-send-spinner-color);
    border-radius: 50%;
    animation: register_submit_spinner 0.8s linear infinite;
}

.register-code-row__button:hover {
    filter: brightness(var(--interactive-hover-brightness));
    transform: translateY(-1px);
}

.register-code-row__button:disabled,
.register-code-row__button:disabled:hover {
    background: var(--register-action-disabled-bg);
    color: var(--register-action-disabled-text-color);
    box-shadow: none;
    cursor: not-allowed;
    filter: none;
    transform: none;
}

.register-submit {
    min-height: 48px;
    border-radius: 10px;
    background: var(--register-submit-bg);
    color: var(--register-submit-text-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.08em;
    box-shadow: var(--register-input-shadow);
    filter: brightness(1);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.register-submit:hover {
    filter: brightness(var(--interactive-hover-brightness));
    transform: translateY(-1px);
}

.register-submit:disabled {
    background: var(--register-submit-disabled-bg);
    color: var(--register-submit-disabled-text-color);
    box-shadow: none;
    cursor: not-allowed;
    filter: none;
    opacity: 1;
    transform: none;
}

.register-submit:disabled:hover {
    background: var(--register-submit-disabled-bg);
    color: var(--register-submit-disabled-text-color);
    box-shadow: none;
    filter: none;
    transform: none;
}

.register-submit__content,
.register-submit__loading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.register-submit__content {
    gap: 0;
}

.register-submit__loading {
    display: none;
    gap: 8px;
}

.register-submit__spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--register-submit-loading-spinner-track-color);
    border-top-color: var(--register-submit-loading-spinner-color);
    border-radius: 50%;
    animation: register_submit_spinner 0.8s linear infinite;
}

.register-submit[data-loading="true"] {
    background: var(--register-submit-disabled-bg);
    color: var(--register-submit-disabled-text-color);
}

.register-submit[data-loading="true"] .register-submit__label {
    display: none;
}

.register-submit[data-loading="true"] .register-submit__loading {
    display: inline-flex;
}

@keyframes register_submit_spinner {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.register-form__notice {
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.5;
}

.register-form__notice--info {
    background: var(--register-form-notice-info-bg);
    border-color: var(--register-form-notice-info-border);
    color: var(--register-form-notice-info-color);
}

.register-form__notice--success {
    background: var(--register-form-notice-success-bg);
    border-color: var(--register-form-notice-success-border);
    color: var(--register-form-notice-success-color);
}

.register-form__notice--error {
    background: var(--register-form-notice-error-bg);
    border-color: var(--register-form-notice-error-border);
    color: var(--register-form-notice-error-color);
}

.register-card__links {
    margin-top: 28px;
    display: flex;
    justify-content: flex-end;
    gap: 28px;
    font-size: 14px;
}

.register-card__links a {
    color: var(--register-link-color);
    text-decoration: none;
}

.register-card__links a:hover {
    color: var(--register-link-hover-color);
}

.login-card__title-icon {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    color: var(--login-title-icon-color);
}

.login-card__title-icon::before {
    content: "\f2bd";
    font-family: "ForumIcon", sans-serif;
    font-size: 28px;
    line-height: 1;
}

.login-card__links {
    margin-bottom: 52px;
}

.login-card__guest-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--login-guest-link-color);
    font-size: 17px;
    text-decoration: none;
}

.login-card__guest-link:hover {
    color: var(--login-guest-link-hover-color);
}

.login-card__guest-link-icon {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
}

.login-card__guest-link-icon::before {
    font-family: "ForumIcon", sans-serif;
    content: "\f060";
    font-size: 20px;
    line-height: 1;
}

.footer {
    background: var(--footer-bg);
}

.footer__inner {
    height: 170px;
    display: grid;
    grid-template-columns: 152px minmax(0, 1fr) 300px;
    gap: 16px;
    align-items: stretch;
    background: var(--footer-inner-bg);
    color: var(--text-primary);
}

.footer__column {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer__column--center {
    justify-content: flex-start;
}

.footer__logo {
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.footer__logo-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 50%;
}



.footer-content{
  font-size: 12.3px;
}

.footer-content hr {
    height: 0;
    border: none;
    border-top: 1px dashed var(--thread-item-last-reply-icon-color);
    margin: 10px 0;
    padding: 0;
}

.footer-title {
    font-size: 17.5px;
}

.footer-desc {
    font-size: 14px;
}

.footer__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.footer__action-button {
    width: 70px;
    height: 70px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background-color: var(--footer-action-bg);
    color: var(--footer-action-color);
    cursor: pointer;
    transition: transform 0.18s ease, color 0.18s ease, background-color 0.18s ease;
}

.footer__action-button:hover {
    transform: scale(1.08);
    background-color: var(--footer-action-hover-bg);
    color: var(--footer-action-hover-color);
}

.footer__action-icon {
    display: inline-block;
    font-family: "ForumIcon", sans-serif;
    font-size: 21px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    color: var(--footer-action-color);
}

.footer__action-icon--first::before {
    content: "\f1d6";
}

.footer__action-icon--second::before {
    content: "\f1d7";
}

.footer__action-icon--third::before {
    content: "\f0e0";
}

.compose-page {
    padding-bottom: 28px;
}

.compose-shell {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
}

.compose-view-toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.compose-shell__header {
    margin-bottom: 0;
    padding: 12px 12px 0;
    border: 0;
    background: transparent;
}

.compose-shell__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

.compose-shell__tabs {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.compose-shell__tabs--static {
    gap: 0;
}

.compose-shell__tab {
    min-width: 120px;
    height: 40px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 9px 9px 0 0;
    background: var(--sidebar-soft-bg);
    color: var(--compose-panel-hint-color);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.compose-shell__tab--static {
    cursor: default;
}

.compose-shell__title-actions {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.compose-shell__emoji-button {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border: 0;
    border-radius: 5.3px;
    background-color: var(--compose-emoji-button-bg);
    color: var(--compose-emoji-button-color);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.compose-shell__emoji-button:hover {
    background-color: var(--compose-emoji-button-hover-bg);
}

.compose-shell__emoji-popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 248px;
    opacity: 0;
    transform: translateY(6px) scale(0.98);
    border-radius: 10px;
    background: var(--compose-emoji-popover-bg);
    box-shadow: none;
    z-index: 8;
    pointer-events: none;
    transition:
        opacity 220ms ease,
        transform 220ms ease,
        box-shadow 220ms ease;
    padding: 10px;
}

.compose-shell__emoji-popover--open {
    opacity: var(--compose-emoji-popover-opacity);
    transform: translateY(0) scale(1);
    box-shadow: var(--compose-emoji-popover-shadow);
    pointer-events: auto;
}

.compose-upload-dialog {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 10;
}

.compose-upload-dialog--open {
    display: flex;
}

.compose-upload-dialog__backdrop {
    position: absolute;
    inset: 0;
    background: var(--compose-upload-backdrop);
}

.compose-upload-dialog__surface {
    position: relative;
    z-index: 1;
    width: min(520px, 100%);
    display: grid;
    gap: 12px;
    padding: 18px 20px;
    border-radius: 16px;
    background: var(--compose-upload-surface-bg);
    border: 1px solid var(--compose-upload-border);
    box-shadow: var(--compose-upload-surface-shadow);
}

.compose-upload-dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.compose-upload-dialog__title {
    margin: 0;
    color: var(--compose-upload-text-color);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
}

.compose-upload-dialog__close {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--compose-upload-close-color);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.compose-upload-dialog__close:hover {
    background: var(--compose-upload-dropzone-hover-bg);
}

.compose-upload-dialog__hint {
    margin: 0;
    color: var(--compose-upload-file-meta-color);
    font-size: 13px;
    line-height: 1.5;
}

.compose-upload-dialog__dropzone {
    display: grid;
    justify-items: center;
    gap: 8px;
    width: 100%;
    padding: 16px 12px;
    border: 1px dashed var(--compose-upload-dropzone-border);
    border-radius: 12px;
    background: var(--compose-upload-dropzone-bg);
    color: var(--compose-upload-text-color);
    cursor: pointer;
    transition: border-color 0.18s ease, background-color 0.18s ease;
}

.compose-upload-dialog__dropzone:hover,
.compose-upload-dialog__dropzone--dragging {
    background: var(--compose-upload-dropzone-hover-bg);
}

.compose-upload-dialog__dropzone--disabled {
    cursor: default;
    opacity: 0.78;
}

.compose-upload-dialog__dropzone-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--compose-upload-dropzone-icon-bg);
    color: var(--compose-upload-dropzone-icon-color);
    font-size: 25px;
    line-height: 1;
}

.compose-upload-dialog__dropzone-text {
    font-size: 13px;
    line-height: 1.4;
}

.compose-upload-dialog__file-list {
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 188px;
    overflow: auto;
    border: 1px solid var(--compose-upload-file-list-border);
    border-radius: 10px;
    background: var(--compose-upload-file-list-bg);
}

.compose-upload-dialog__file-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 6px 10px;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid var(--compose-upload-file-list-border);
}

.compose-upload-dialog__file-item:last-child {
    border-bottom: 0;
}

.compose-upload-dialog__file-item--empty {
    grid-template-columns: 1fr;
    color: var(--compose-upload-file-meta-color);
    font-size: 13px;
}

.compose-upload-dialog__file-name {
    color: var(--compose-upload-file-name-color);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compose-upload-dialog__file-meta {
    color: var(--compose-upload-file-meta-color);
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
}

.compose-upload-dialog__file-status {
    color: var(--compose-upload-file-meta-color);
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
}

.compose-upload-dialog__file-status--uploading {
    color: var(--compose-upload-file-status-uploading);
}

.compose-upload-dialog__file-status--uploaded {
    color: var(--compose-upload-file-status-uploaded);
}

.compose-upload-dialog__file-status--error {
    color: var(--compose-upload-file-status-error);
}

.compose-upload-dialog__file-message {
    grid-column: 1 / -1;
    color: var(--compose-upload-file-message-color);
    font-size: 12px;
    line-height: 1.5;
    word-break: break-all;
}

.compose-upload-dialog__status {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--compose-upload-text-color);
    font-size: 12px;
    line-height: 1.5;
}

.compose-upload-dialog__status-spinner {
    width: 14px;
    height: 14px;
    display: none;
    flex: 0 0 auto;
    border: 2px solid var(--compose-upload-spinner-track-color);
    border-top-color: var(--compose-upload-spinner-color);
    border-radius: 999px;
    animation: compose-action-spinner 700ms linear infinite;
}

.compose-upload-dialog__status--uploading .compose-upload-dialog__status-spinner {
    display: inline-block;
}

.compose-upload-dialog__status-text {
    min-width: 0;
}

.compose-upload-dialog__status--error {
    color: var(--compose-upload-file-status-error);
}

.compose-upload-dialog__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.compose-shell__emoji-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
    gap: 6px;
}

.compose-shell__emoji-item {
    width: 100%;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 5.3px;
    padding: 0;
    background-color: var(--compose-emoji-item-bg);
    font-family: "ThreadCommentEmoji", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.18s ease;
}

.compose-shell__emoji-item:hover {
    background-color: var(--compose-emoji-item-hover-bg);
}

.compose-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(262px, 0.81fr);
    grid-template-areas:
        "editor side"
        "actions actions";
    gap: 22px;
}

.compose-layout--notice-only {
    display: block;
}

.compose-layout__notice {
    grid-column: 1 / -1;
}

.compose-editor-stage {
    grid-area: editor;
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0;
    min-height: 520px;
    border: 0;
    border-radius: 16px;
    background: var(--compose-editor-bg);
    box-shadow: none;
    overflow: hidden;
}

.compose-editor-card {
    display: grid;
    gap: 18px;
    padding: 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    align-self: stretch;
    margin-top: 0;
}

.compose-editor-card--edit {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.compose-editor-card--edit .compose-readonly-fieldset {
    flex: 1 1 auto;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
    height: 100%;
    align-self: stretch;
}

.compose-editor-card--preview {
    display: none;
    height: 100%;
}

.compose-editor-card--help {
    display: none;
    height: 100%;
}

.compose-preview-card__canvas {
    min-height: 520px;
    border: 0;
    border-radius: 7px;
    background: var(--compose-field-bg);
    font-family: "ThreadCommentEmoji", "Ziti", "PingFang SC", "Microsoft YaHei", sans-serif;
    padding: 16px;
    line-height: 1.75;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.compose-preview-card__canvas .compose-markdown-image {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 8px 0;
    border-radius: 6px;
}

.compose-help-card {
    min-height: 520px;
    padding: 18px;
    border-radius: 7px;
    background: var(--compose-field-bg);
    display: grid;
    align-content: start;
    gap: 18px;
}

.compose-help-card__title {
    margin: 0;
    color: var(--compose-panel-heading-color);
    font-size: 22px;
    line-height: 1.3;
}

.compose-help-card__section {
    display: grid;
    gap: 8px;
}

.compose-help-card__subtitle {
    margin: 0;
    color: var(--compose-field-text-color);
    font-size: 16px;
    line-height: 1.4;
}

.compose-help-card__text {
    margin: 0;
    color: var(--compose-panel-hint-color);
    font-size: 14px;
    line-height: 1.7;
    white-space: pre-wrap;
}

.compose-side {
    grid-area: side;
    display: grid;
    gap: 18px;
    align-content: start;
}

.compose-side-card {
    padding: 20px;
    border: 0;
    border-radius: 16px;
    background: var(--compose-panel-bg);
}

.compose-side-card__header {
    margin-bottom: 16px;
}

.compose-readonly-fieldset {
    display: grid;
    gap: 18px;
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.compose-reply-only__marker {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    align-self: start;
    width: fit-content;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--compose-reply-only-marker-color);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.compose-layout--reply-only .compose-field__textarea:disabled,
.compose-layout--reply-only .compose-board-select__control:disabled {
    border-color: var(--compose-reply-only-disabled-border);
    background: var(--compose-reply-only-disabled-bg);
    color: var(--compose-reply-only-disabled-color);
    cursor: not-allowed;
    opacity: 1;
}

.compose-layout--reply-only .compose-field__textarea:disabled:focus,
.compose-layout--reply-only .compose-board-select__control:disabled:focus {
    box-shadow: none;
}

.compose-layout--reply-only .compose-shell__emoji-button:disabled {
    cursor: not-allowed;
    opacity: 0.46;
}

.compose-layout--reply-only .compose-readonly-fieldset[disabled] .compose-board-option,
.compose-layout--reply-only .compose-readonly-fieldset[disabled] .compose-tag-chip {
    cursor: not-allowed;
}

.compose-layout--reply-only .compose-readonly-fieldset[disabled] .compose-board-option__content,
.compose-layout--reply-only .compose-readonly-fieldset[disabled] .compose-tag-chip__label {
    background: var(--compose-reply-only-disabled-bg);
    color: var(--compose-reply-only-disabled-color);
    transform: none;
}

.compose-layout--reply-only .compose-readonly-fieldset[disabled] .compose-board-option:hover .compose-board-option__content,
.compose-layout--reply-only .compose-readonly-fieldset[disabled] .compose-tag-chip:hover .compose-tag-chip__label {
    background: var(--compose-reply-only-disabled-bg);
    transform: none;
}

.compose-layout--reply-only .compose-readonly-fieldset[disabled] .compose-board-option__label {
    color: var(--compose-reply-only-disabled-color);
}

.compose-layout--reply-only .compose-readonly-fieldset[disabled] .compose-board-option__icon-image {
    filter: grayscale(1) brightness(0.72);
}

.compose-field__reply-only-body {
    display: grid;
    align-content: start;
    align-items: start;
    gap: 10px;
    min-height: 320px;
    padding: 18px;
    border: 1px dashed var(--compose-field-border);
    border-radius: 3.5px;
    background: var(--compose-reply-only-disabled-bg);
    color: var(--compose-field-text-color);
    font-size: 15px;
    line-height: 1.8;
    box-sizing: border-box;
    font-family: "ThreadCommentEmoji", "Ziti", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.compose-field__reply-only-plain {
    white-space: pre-wrap;
    color: var(--compose-field-text-color);
}

.compose-field__reply-only-segment {
    display: grid;
    align-content: start;
    align-items: start;
    gap: 4px;
}

.compose-side-card__title {
    margin: 0;
    font-size: 19px;
    color: var(--compose-panel-heading-color);
}

.compose-side-card__hint {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--compose-panel-hint-color);
}

.compose-field {
    display: grid;
    gap: 10px;
    min-height: 0;
}

.compose-field--editor {
    min-height: 0;
    height: 100%;
    align-self: stretch;
}

.compose-field__label {
    font-size: 14px;
    font-weight: 600;
    color: var(--compose-field-label-color);
}

.compose-field__input,
.compose-field__textarea {
    width: 100%;
    border: 0;
    border-radius: 3.5px;
    background: var(--compose-field-bg);
    color: var(--compose-field-text-color);
    box-sizing: border-box;
    font-family: inherit;
    outline: none;
    transition: box-shadow 180ms ease, background-color 180ms ease;
}

.compose-field__input::placeholder,
.compose-field__textarea::placeholder {
    color: var(--compose-field-placeholder-color);
}

.compose-field__input:focus,
.compose-field__textarea:focus {
    box-shadow: 0 0 0 4px var(--compose-field-focus-ring);
}

.compose-field__textarea {
    min-height: 0;
    padding: 18px;
    border: 1px dashed var(--compose-field-border);
    resize: vertical;
    font-size: 15px;
    line-height: 1.8;
}

.compose-field__input {
    height: 58px;
    padding: 0 18px;
    font-size: 17px;
}

.compose-field__textarea--title {
    min-height: 0;
    height: auto;
    padding-top: 14px;
    padding-bottom: 14px;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.5;
    overflow-y: hidden;
    resize: none;
}

.compose-field__textarea--reply-only {
    min-height: 148px;
    margin: 0;
    font-family: "ThreadCommentEmoji", "Ziti", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.compose-field__textarea--title::placeholder {
    font-weight: 400;
}

.compose-field__textarea--body {
    height: 100%;
    min-height: 100%;
    font-family: "ThreadCommentEmoji", "Ziti", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.compose-board-select {
    display: none;
}

.compose-board-select__control {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 0;
    border-radius: 3.5px;
    background: var(--compose-field-bg);
    color: var(--compose-field-text-color);
    font-family: inherit;
    font-size: 15px;
    outline: none;
}

.compose-board-select__control:focus {
    box-shadow: 0 0 0 4px var(--compose-field-focus-ring);
}

.compose-board-flow {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.compose-board-option {
    display: block;
    cursor: pointer;
}

.compose-board-option__input,
.compose-tag-chip__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.compose-board-option__content {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border: 0;
    border-radius: 12px;
    background-color: var(--compose-board-option-bg);
    transition: background-color 0.18s ease, transform 0.18s ease;
}

.compose-board-option:hover .compose-board-option__content {
    background-color: var(--compose-board-option-hover-bg);
    transform: translateY(-1px);
}

.compose-board-option__input:checked + .compose-board-option__content {
    background: var(--compose-board-option-active-bg);
}

.compose-board-option__icon {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.compose-board-option__icon-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.compose-board-option__label {
    font-size: 15px;
    font-weight: 700;
    color: var(--compose-board-option-title-color);
}

.compose-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.compose-tag-chip {
    cursor: pointer;
}

.compose-tag-chip--hidden {
    display: none;
}

.compose-tag-chip__label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background-color: var(--compose-tag-chip-bg);
    color: var(--compose-tag-chip-color);
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.compose-tag-chip:hover .compose-tag-chip__label {
    background-color: var(--compose-tag-chip-hover-bg);
    transform: translateY(-1px);
}

.compose-tag-chip__input:checked + .compose-tag-chip__label {
    background: var(--compose-tag-chip-active-bg);
    color: var(--compose-tag-chip-active-color);
}

.compose-actions {
    grid-area: actions;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    padding-top: 2px;
}

.compose-actions__notice {
    flex: 1 1 auto;
    margin-right: auto;
    color: var(--compose-action-error-color);
    padding: 12px 16px;
    border-radius: 10px;
    background: var(--compose-action-error-bg);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.45;
    text-align: center;
}

.compose-actions__notice--info {
    color: var(--compose-reply-only-intro-color);
    background: var(--compose-reply-only-intro-bg);
}

.compose-actions__notice[hidden] {
    display: none;
}

.compose-actions__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 132px;
    height: 52px;
    padding: 0 26px;
    border: 0;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    filter: brightness(1);
    transition: transform 0.18s ease, background-color 0.18s ease, color 0.18s ease, filter 0.18s ease;
}

.compose-actions__button:hover {
    transform: translateY(-1px);
}

.compose-actions__button:disabled {
    background: var(--compose-action-disabled-bg);
    color: var(--compose-action-disabled-color);
    cursor: not-allowed;
    filter: none;
    transform: none;
}

.compose-actions__button:disabled:hover {
    background: var(--compose-action-disabled-bg);
}

.compose-actions__spinner {
    width: 16px;
    height: 16px;
    display: none;
    border: 2px solid rgba(255, 255, 255, 0.32);
    border-top-color: var(--compose-action-spinner-color);
    border-radius: 999px;
    animation: compose-action-spinner 700ms linear infinite;
}

.compose-actions__button--loading .compose-actions__spinner {
    display: inline-block;
}

.compose-actions__button-label {
    display: inline-block;
}

.compose-actions__button--ghost {
    background-color: var(--compose-action-ghost-bg);
    color: var(--compose-action-ghost-color);
}

.compose-actions__button--ghost:hover {
    background-color: var(--compose-action-ghost-hover-bg);
}

.compose-actions__button--primary {
    border: 0;
    background: var(--compose-action-primary-bg);
    color: var(--compose-action-primary-color);
    box-shadow: none;
}

.compose-actions__button--primary:hover {
    filter: brightness(var(--interactive-hover-brightness));
}

.compose-actions__button--primary:disabled,
.compose-actions__button--primary:disabled:hover,
.compose-actions__button--ghost:disabled,
.compose-actions__button--ghost:disabled:hover {
    background: var(--compose-action-disabled-bg);
    color: var(--compose-action-disabled-color);
    filter: none;
}

@keyframes compose-action-spinner {
    to {
        transform: rotate(360deg);
    }
}

#compose-view-edit:checked ~ .compose-layout .compose-shell__tab[for="compose-view-edit"],
#compose-view-preview:checked ~ .compose-layout .compose-shell__tab[for="compose-view-preview"],
#compose-view-help:checked ~ .compose-layout .compose-shell__tab[for="compose-view-help"] {
    background: var(--compose-editor-bg);
    color: var(--compose-field-text-color);
    font-weight: 800;
}

#compose-view-preview:checked ~ .compose-layout .compose-editor-card--edit {
    display: none;
}

#compose-view-preview:checked ~ .compose-layout .compose-editor-card--preview {
    display: grid;
}

#compose-view-help:checked ~ .compose-layout .compose-editor-card--edit,
#compose-view-help:checked ~ .compose-layout .compose-editor-card--preview {
    display: none;
}

#compose-view-help:checked ~ .compose-layout .compose-editor-card--help {
    display: grid;
}

@media (max-width: 1240px) {
    .container {
        width: calc(100% - 32px);
    }
}

@media (max-width: 1200px) {
    .register-shell {
        grid-template-columns: minmax(0, 1fr) 420px;
    }

    .user-profile-layout {
        grid-template-columns: var(--user-profile-sidebar-width) minmax(0, 1fr);
        gap: 14px;
    }

    .main-grid {
        grid-template-columns: 40px minmax(0, 1fr) 225px;
        padding-right: 8px;
    }

    .thread-page-grid {
        grid-template-columns: 100px minmax(0, 1fr) 225px;
    }

    .footer__inner {
        grid-template-columns: 40px minmax(0, 1fr) 225px;
        padding-right: 8px;
    }

    .panel--left {
        padding: 0 0 16px 0;
    }

    .side-nav {
        padding: 10px 4px;
    }

    .side-nav__item {
        justify-content: center;
        padding: 8px 0;
    }

    .side-nav__label {
        display: none;
    }

    .forum-sidecard__heading {
        padding-left: 0;
        padding-top: 24px;
        align-items: center;
    }

    .forum-sidecard__logo {
        left: 50%;
        transform: translateX(-50%);
    }
}

@media (max-width: 900px) {
    .register-shell {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .user-profile-layout {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .user-profile-sidebar {
        width: 100%;
    }

    .user-profile-summary-card__body {
        padding-bottom: 18px;
    }

    .user-message-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .user-message-toolbar__actions {
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    .register-shell__art {
        min-height: 380px;
        padding: 28px 18px 8px;
    }

    .register-illustration {
        min-height: 340px;
    }

    .register-shell__form {
        padding: 0 18px 28px;
    }

    .register-card {
        padding: 26px 6px 0;
    }

    .register-card__orbit {
        display: none;
    }

    .footer__inner {
        height: auto;
        min-height: 170px;
        grid-template-columns: 1fr;
        gap: 0;
    }

    .footer__column--left,
    .footer__column--right {
        display: none;
    }

    .compose-shell {
        padding: 22px 18px;
        border-radius: 16px;
    }

    .compose-layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "side"
            "editor"
            "actions";
    }

    .compose-field__textarea {
        min-height: 340px;
    }
}

@media (max-width: 1000px) {
    .main-grid {
        grid-template-columns: 1fr;
    }

    .panel--left,
    .panel--right {
        display: none;
    }
}

@media (max-width: 720px) {
    .register-page {
        padding-top: 0;
    }

    .user-profile-hero__inner {
        height: calc(var(--user-profile-hero-height) - 18px);
    }

    .user-profile-summary-card__body {
        padding:
            calc(
                var(--user-profile-avatar-size)
                * (1 - var(--user-profile-avatar-overlap-ratio))
                + 20px
            )
            14px
            16px;
    }

    .user-profile-summary-card__stats {
        gap: 6px;
    }

    .user-profile-panel__tabs {
        padding-left: 14px;
        padding-right: 14px;
    }

    .user-profile-panel__body {
        padding: 12px 14px 16px;
    }

    .user-follow-feed-item {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .user-follow-feed-item__time {
        margin-left: 28px;
    }

    .user-follow-grid {
        gap: 6px;
    }

    .user-profile-fields {
        grid-template-columns: 1fr;
        column-gap: 0;
    }

    .user-profile-avatar-panel__row--current {
        grid-template-columns: 1fr;
        grid-template-areas:
            "current_card"
            "intro"
            "actions";
    }

    .user-profile-avatar-current-card {
        min-width: 0;
    }

    .user-profile-avatar-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .user-profile-points-hero {
        grid-template-columns: 1fr;
    }

    .user-profile-points-hero__meta {
        align-items: flex-start;
        flex-direction: column;
    }

    .user-profile-points-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .user-message-item__head {
        padding: 8px 8px 7px;
    }

    .user-message-item__title {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 6px;
        align-items: start;
    }

    .user-message-item__title-main {
        min-height: 20px;
    }

    .user-message-item__time {
        justify-self: start;
    }

    .user-message-item__actions {
        grid-column: 2 / -1;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .user-message-item__body {
        margin-left: 26px;
        margin-right: 8px;
        margin-bottom: 8px;
    }

    .register-shell {
        border-radius: 20px;
    }

    .register-shell__art {
        min-height: 280px;
        padding: 16px 10px 0;
    }

    .register-illustration {
        min-height: 260px;
        transform: scale(0.74);
        transform-origin: center top;
    }

    .register-shell__form {
        padding: 0 12px 18px;
    }

    .register-card__title {
        font-size: 26px;
    }

    .register-code-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .register-card__links {
        justify-content: space-between;
        gap: 16px;
    }

    .login-card__guest-link {
        font-size: 15px;
    }

    .panel--center {
        padding: 12px 0;
    }

    .thread-list-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: flex-start;
        gap: 8px 12px;
        padding: 10px 14px 8px;
    }

    .thread-list-header__tabs {
        grid-column: 1;
        gap: 22px;
    }

    .thread-list-header__sort {
        grid-column: 1;
        grid-row: 2;
    }

    .thread-list-header__checkin-button {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: center;
        justify-self: end;
        display: inline-flex;
    }

    .thread-item {
        gap: 12px;
        padding: 12px;
    }

    .thread-item__meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .thread-item__stats {
        text-align: left;
    }

    .thread-comments-card__heading,
    .thread-comments-card__body {
        padding-left: 14px;
        padding-right: 14px;
    }

    .thread-comments-card__heading {
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .thread-comments-card__composer,
    .thread-comments-card__guest {
        grid-template-columns: 1fr;
    }

    .thread-comments-card__composer-avatar,
    .thread-comment__avatar {
        width: 38px;
        height: 38px;
    }

    .thread-comment {
        gap: 10px;
    }

    .thread-comment__meta {
        align-items: center;
        flex-direction: row;
        gap: 6px;
    }

    .thread-comment__meta-main {
        gap: 6px;
    }

    .thread-comment__meta-actions {
        margin-left: auto;
    }

    .thread-comments-card__composer-head {
        align-items: flex-start;
    }

    .thread-comments-card__composer-actions {
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .thread-comments-card__composer-tab {
        min-width: 86px;
        padding: 6px;
        font-size: 12px;
    }

    .thread-comments-card__composer-actions-right {
        margin-left: auto;
    }

    .thread-comments-card__sort {
        margin-left: auto;
    }

    .thread-comments-card__submit {
        min-width: 96px;
        width: auto;
    }

    .compose-page {
        padding-top: 0;
    }

    .compose-shell {
        padding: 0;
        border-radius: 0;
    }

    .compose-shell__header {
        padding: 10px 10px 0;
    }

    .compose-shell__title {
        width: 100%;
    }

    .compose-shell__tabs {
        flex: 1 1 auto;
        min-width: 0;
    }

    .compose-shell__tabs--static {
        flex: 0 1 auto;
    }

    .compose-shell__tab {
        min-width: 0;
        flex: 1 1 0;
    }

    .compose-editor-card,
    .compose-side-card {
        padding: 16px;
        border-radius: 14px;
    }

    .compose-editor-stage {
        border-radius: 14px;
    }

    .compose-editor-card {
        border-radius: 0;
    }

    .compose-board-select {
        display: block;
    }

    .compose-board-flow {
        display: none;
    }

    .compose-field__input {
        height: 52px;
        font-size: 16px;
    }

    .compose-field__textarea--title {
        min-height: 0;
        font-size: 16px;
        padding: 12px 14px;
        line-height: 1.5;
    }

    .compose-editor-card--edit {
        min-height: 0;
    }

    .compose-editor-stage {
        min-height: 340px;
    }

    .compose-preview-card__canvas {
        min-height: 340px;
    }

    .compose-help-card {
        min-height: 340px;
    }

    .compose-tag-chip__label {
        min-height: 34px;
        padding: 0 12px;
        font-size: 12px;
    }

    .compose-field__textarea--body {
        min-height: 0;
        padding: 16px;
    }

    .compose-field__textarea--reply-only {
        min-height: 120px;
        padding: 16px;
    }

    .compose-actions {
        flex-wrap: wrap;
        justify-content: stretch;
    }

    .compose-actions__notice {
        flex: 1 1 100%;
        margin-right: 0;
        font-size: 15px;
    }

    .compose-actions__button {
        flex: 1;
        min-width: 0;
    }
}