/* ========================================================================
   THERANTITWALL — APP.CSS
   Unified stylesheet, preserving original source cascade order.
   Edit this file only; remove the old individual stylesheet links.
   ======================================================================== */

/* ========================================================================
   BASE
   Source: base.css
   ======================================================================== */

/* ============================================================
   01. Base and design tokens
   ============================================================ */

:root {
    --wall-blue: #1497ff;
    --wall-blue-2: #217cff;
    --wall-cyan: #37b7ff;
    --wall-bg: #020914;
    --wall-panel: rgba(5, 20, 39, 0.93);
    --wall-panel-2: rgba(7, 25, 47, 0.96);
    --wall-border: #245b91;
    --wall-border-soft: rgba(50, 118, 181, 0.45);
    --text-main: #f5f8ff;
    --text-soft: #b7c7df;
    --text-muted: #8197b6;
    --green: #16d18b;
    --red: #ff596d;
    --brick-width: 150px;
    --brick-height: 64px;
    --brick-joint: 6px;
    --brick-1: #397cd7;
    --brick-2: #2354ad;
    --brick-3: #143f91;
    --brick-4: #092b67;
    --brick-highlight: rgba(155, 206, 255, 0.38);
    --brick-highlight-soft: rgba(91, 163, 244, 0.17);
    --brick-face-light: rgba(144, 203, 255, 0.12);
    --brick-shadow: rgba(0, 5, 23, 0.75);
    --brick-edge: rgba(0, 3, 15, 0.93);
    --brick-face-shadow: rgba(0, 6, 30, 0.30);
    --brick-speck: rgba(126, 198, 255, 0.16);
    --brick-speck-dark: rgba(1, 8, 32, 0.48);
    --brick-speck-light: rgba(190, 226, 255, 0.34);
    --mortar: #030b1b;
    --mortar-light: rgba(38, 69, 107, 0.6);
    --mortar-shadow: rgba(0, 1, 8, 0.98);
    --wall-bg-width: 1360px;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: #010712;
    background-color: #031027;
}

body {
    min-height: 100vh;
    margin: 0;
    color: var(--text-main);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    position: relative;
    isolation: isolate;
    background-color: #031027;
    background-image: linear-gradient(180deg, rgba(1, 7, 22, 0.27), rgba(1, 7, 22, 0.44)),
        url("../img/bg.png");
    background-size: 100% 100%, var(--wall-bg-width) auto;
    background-attachment: fixed, fixed;
    background-repeat: no-repeat, repeat;
    background-position: center center, center top;
}

a {
    color: inherit;
}

button {
    font: inherit;
}

input {
    font: inherit;
}

textarea {
    font: inherit;
}

select {
    font: inherit;
}


/* ========================================================================
   HEADER
   Source: header.css
   ======================================================================== */

/* ============================================================
   02. Header, navigation, search, and menus
   ============================================================ */

.site-header {
    position: relative;
    top: 0;
    z-index: 1000;
    min-height: 76px;
    border-bottom: 1px solid #2c3c50;
    background: #151e2b;
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.18);
    width: 100%;
}

.header-shell {
    max-width: 1180px;
    min-height: 76px;
    display: flex;
    grid-template-columns: 280px 1fr auto;
    align-items: center;
    gap: 16px;
    padding-top: 12px;
    padding-bottom: 12px;
}

.brand-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    gap: 10px;
    flex-shrink: 0;
    color: #f1f5fb;
}

.brand-logo {
    display: block;
    width: 42px;
    max-height: 62px;
    object-fit: contain;
    object-position: left center;
    height: 42px;
}

.main-nav {
    justify-content: center;
    align-items: center;
    gap: 3px;
    align-self: stretch;
    min-width: 0;
}

.main-nav .nav-link {
    display: inline-flex;
    align-items: center;
    padding: 10px;
    color: #b8c9db;
    font-size: 0.86rem;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    justify-content: center;
    gap: 7px;
    border-radius: 9px;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color 0.15s, color 0.15s;
}

.main-nav .nav-link:hover {
    color: #ffffff;
    border-bottom-color: var(--wall-blue);
    background: #24384e;
}

.main-nav .nav-link.active {
    color: #ffffff;
    border-bottom-color: var(--wall-blue);
    background: #24384e;
}

.header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    min-width: 0;
    margin-left: auto;
}

.header-search {
    width: 170px;
    height: 40px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 12px;
    border: 1px solid #344860;
    border-radius: 10px;
    background: #101925;
    color: #8ba6c5;
    min-width: 0;
}

.header-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: #f1f5fb;
    font-size: 0.86rem;
    padding: 0;
    font: inherit;
    caret-color: #ffffff;
}

.header-search input::placeholder {
    color: #b6c7dc;
    opacity: 1;
}

.header-text-link {
    color: #d7e6f8;
    border: 0;
    background: transparent;
    text-decoration: none;
    padding: 8px 4px;
    font-size: 0.82rem;
}

.notification-dot {
    position: absolute;
    top: 1px;
    right: 0;
    min-width: 17px;
    height: 17px;
    display: grid;
    place-items: center;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--red);
    color: white;
    font-size: 0.62rem;
    font-weight: 800;
}

.wall-dropdown {
    color: white;
    border: 1px solid #2d526f;
    background: #071624;
    box-shadow: 0 16px 35px rgba(0, 0, 0, 0.4);
}

.notifications-menu {
    color: white;
    border: 1px solid #2d526f;
    background: #071624;
    box-shadow: 0 16px 35px rgba(0, 0, 0, 0.4);
    width: 330px;
    overflow: hidden;
}

.wall-dropdown .dropdown-item {
    color: #dce8f3;
}

.wall-dropdown .dropdown-item:hover {
    color: white;
    background: #0f2c46;
}

.notifications-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 13px;
    border-bottom: 1px solid #1f3447;
}

.notifications-head .btn-link {
    color: #5cb6ff;
    text-decoration: none;
}

.notification-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 11px 13px;
    color: #dce8f3;
    border-bottom: 1px solid rgba(43, 69, 91, 0.5);
    text-decoration: none;
    font-size: 0.8rem;
}

.notification-item:hover {
    color: white;
    background: rgba(21, 151, 255, 0.08);
}

.notification-item.unread {
    color: white;
    background: rgba(21, 151, 255, 0.08);
}

.notification-item small {
    display: block;
    margin-top: 2px;
    color: #7d94aa;
}

.footer-shell nav {
    display: flex;
    gap: 18px;
}

body > .site-header {
    position: sticky;
    z-index: 1020;
}

.site-header .header-shell {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
}

.site-header .brand-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    max-width: 100%;
    text-decoration: none;
}

.site-header .brand-logo {
    display: block;
    width: 54px;
    height: 54px;
    max-width: 54px;
    max-height: 54px;
    object-fit: contain;
    object-position: center;
    flex: 0 0 54px;
    filter: drop-shadow(0 2px 8px rgba(34, 139, 255, .26));
}

.site-header .brand-text {
    display: inline-block;
    color: #f5f9ff;
    font-size: clamp(1.03rem, 1.9vw, 1.45rem);
    font-weight: 730;
    line-height: 1.1;
    letter-spacing: -0.025em;
    white-space: nowrap;
}

.site-header .header-search {
    display: flex;
    align-items: center;
    flex: 0 1 230px;
    min-width: 0;
    width: 230px;
    height: 42px;
    gap: 9px;
    padding: 0 13px;
    position: relative;
}

.site-header .header-search > .bi-search {
    position: static;
    display: inline-block;
    flex: 0 0 auto;
    width: auto;
    height: auto;
    margin: 0;
    font-size: 16px;
    line-height: 1;
    color: #8ba6c5;
    transform: none;
    pointer-events: none;
}

.site-header .header-search > input[type="search"] {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    box-shadow: none;
    background: transparent;
    color: #fff;
}

.avatar-picker-header {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 14px;
}

.feeling-feed-header {
    margin-bottom: 24px;
}

.excluded-words-panel-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 24px;
    border-bottom: 1px solid #27384c;
    background: #1b293b;
}

.excluded-words-panel-header h2 {
    margin: 0 0 5px;
    color: #f1f5fb;
    font-size: 1.05rem;
    font-weight: 700;
}

.excluded-words-panel-header p {
    margin: 0;
    color: #a4b1c2;
    font-size: 0.85rem;
    line-height: 1.5;
}

.excluded-words-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    color: #e2ebf7;
    font-size: 0.9rem;
    font-weight: 600;
}

.mobile-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid #344860;
    border-radius: 10px;
    background: #1b293b;
    color: #e8f2ff;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
}

.mobile-menu-toggle:hover {
    background: #263d56;
    color: #ffffff;
}

.mobile-menu-toggle:focus-visible {
    outline: 2px solid #66aeff;
    outline-offset: 2px;
}

#mobileNavigation {
    border-top: 1px solid #2c3c50;
    background: #151e2b;
}

.mobile-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 12px;
    padding-bottom: 16px;
}

.mobile-nav-link {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    padding: 12px 14px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #d6e3f2;
    text-align: left;
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.4;
}

.mobile-nav-link i {
    width: 20px;
    color: #7eaeef;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mobile-nav-link:hover {
    background: #24384e;
    color: #ffffff;
    text-decoration: none;
}

.mobile-nav-link:focus-visible {
    background: #24384e;
    color: #ffffff;
    text-decoration: none;
}

.mobile-nav-divider {
    height: 1px;
    margin: 8px 0;
    background: #304159;
}

.mobile-nav-search {
    display: flex;
    gap: 8px;
    margin: 10px 0;
}

.mobile-nav-search input {
    min-width: 0;
    border: 1px solid #344860;
    background: #101925;
    color: #ffffff;
}

.mobile-nav-search input:focus {
    border-color: #397dc3;
    background: #101925;
    color: #ffffff;
    box-shadow: 0 0 0 3px rgba(57, 125, 195, 0.15);
}

.mobile-nav-search button {
    width: 44px;
    border: 1px solid #4a94de;
    border-radius: 9px;
    background: #397dc3;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
}

.brand-link:hover {
    color: #ffffff;
    text-decoration: none;
}

.brand-text {
    color: #f1f5fb;
    font-size: 1.08rem;
    font-weight: 750;
    white-space: nowrap;
}

.main-nav .nav-link i {
    color: #7eaeef;
    font-size: 1rem;
}

.main-nav .nav-link:hover i {
    color: #ffffff;
}

.main-nav .nav-link.active i {
    color: #ffffff;
}

.header-right > * {
    flex-shrink: 0;
}

.header-search:focus-within {
    border-color: #397dc3;
    box-shadow: 0 0 0 3px rgba(57, 125, 195, 0.16);
}

.header-search i {
    flex-shrink: 0;
    color: #94b9e8;
}

.header-search input:focus {
    color: #ffffff;
    outline: none;
    box-shadow: none;
}

.site-header .icon-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #344860;
    border-radius: 10px;
    background: #1b293b;
    color: #d6e3f2;
    font-size: 1.1rem;
    cursor: pointer;
}

.site-header .icon-button:hover {
    background: #263d56;
    color: #ffffff;
}

.header-account-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    max-width: 170px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid #344860;
    border-radius: 10px;
    background: #1b293b;
    color: #e8f2ff;
    font: inherit;
    font-size: 0.87rem;
    font-weight: 600;
    cursor: pointer;
}

.header-account-toggle:hover {
    border-color: #497eaf;
    background: #263d56;
    color: #ffffff;
}

.header-account-toggle[aria-expanded="true"] {
    border-color: #497eaf;
    background: #263d56;
    color: #ffffff;
}

.header-account-toggle > .bi-person-circle {
    color: #7eaeef;
    font-size: 1.15rem;
}

.header-account-label {
    display: block;
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-account-chevron {
    color: #91a9c2;
    font-size: 0.7rem;
}

.header-account-toggle.dropdown-toggle::after {
    display: none;
}

.header-account-menu {
    width: 230px;
    min-width: 0;
    padding: 7px;
    border: 1px solid #344860;
    border-radius: 12px;
    background: #1b293b;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35);
}

.header-dropdown-heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 11px 12px;
}

.header-dropdown-heading span {
    color: #91a5bc;
    font-size: 0.75rem;
}

.header-dropdown-heading strong {
    overflow-wrap: anywhere;
    color: #ffffff;
    font-size: 0.9rem;
}

.header-account-menu .dropdown-divider {
    border-color: #344860;
    opacity: 1;
}

.header-account-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 11px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #d6e3f2;
    font-size: 0.87rem;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.header-account-menu .dropdown-item i {
    width: 19px;
    color: #7eaeef;
    font-size: 1rem;
}

.header-account-menu .dropdown-item:hover {
    background: #2a4058;
    color: #ffffff;
}

.header-account-menu .dropdown-item:focus {
    background: #2a4058;
    color: #ffffff;
}

.header-account-menu .header-logout:hover {
    background: rgba(220, 53, 69, 0.13);
    color: #ff9aa3;
}

.header-account-menu .header-logout:hover i {
    color: #ff9aa3;
}

.header-right .btn-login {
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 9px;
    font-family: inherit;
    font-size: 0.87rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    border: 1px solid #3a5979;
    background: #213249;
    color: #f1f5fb;
}

.header-right .btn-signup {
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 9px;
    font-family: inherit;
    font-size: 0.87rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    border: 1px solid #4a94de;
    background: #397dc3;
    color: #ffffff;
}

.header-right .btn-login i {
    font-size: 1rem;
    line-height: 1;
}

.header-right .btn-signup i {
    font-size: 1rem;
    line-height: 1;
}

.header-right .btn-login:hover {
    background: #2b4260;
    color: #ffffff;
}

.header-right .btn-signup:hover {
    background: #2868a9;
    color: #ffffff;
}

.mobile-menu-toggle[aria-expanded="true"] {
    background: #263d56;
    color: #ffffff;
}

.mobile-nav-search .form-control {
    min-width: 0;
    min-height: 42px;
    padding: 8px 12px;
    border: 1px solid #344860;
    border-radius: 9px;
    background: #101925;
    color: #f1f5fb;
    font-size: 0.9rem;
}

.mobile-nav-search .form-control::placeholder {
    color: #b6c7dc;
    opacity: 1;
}

.mobile-nav-search .form-control:focus {
    border-color: #397dc3;
    background: #101925;
    color: #ffffff;
    box-shadow: 0 0 0 3px rgba(57, 125, 195, 0.15);
}

.mobile-nav-search button:hover {
    background: #2868a9;
}

.site-header button:focus-visible {
    outline: 2px solid #80baff;
    outline-offset: 3px;
}

.site-header a:focus-visible {
    outline: 2px solid #80baff;
    outline-offset: 3px;
}

.rules-enforcement-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}


/* ========================================================================
   LAYOUT
   Source: layout.css
   ======================================================================== */

/* ============================================================
   03. Page layout, feed navigation, and statistics
   ============================================================ */

.site-main {
    min-height: calc(100vh - 76px);
    padding: 25px 0 80px;
    padding-top: 34px;
}

.feed-shell {
    width: min(900px, calc(100% - 32px));
    max-width: 900px;
}

.hero-copy {
    margin: 0 auto 14px;
}

.hero-copy h1 {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.03em;
    text-shadow: 0 3px 20px rgba(0, 0, 0, 0.28);
}

.hero-copy h1 span {
    color: #35aaff;
}

.hero-copy p {
    margin: 8px 0 0;
    color: #c0cee2;
    font-size: 1.04rem;
}

.community-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0 0 16px;
    padding: 8px;
    border: 1px solid rgba(50, 131, 196, 0.42);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(5, 25, 47, 0.92), rgba(3, 16, 31, 0.96));
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.24);
    overflow: hidden;
    position: relative;
    margin-bottom: 12px;
}

.stat-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 0;
    padding: 2px 12px;
}

.stat-item > i {
    color: #2e9fff;
    font-size: 1.4rem;
}

.stat-item:nth-of-type(5) > i {
    color: #2e9fff;
    font-size: 1.4rem;
}

.stat-item div {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

.stat-item strong {
    color: white;
    font-size: 1.15rem;
}

.stat-item span {
    margin-top: 3px;
    color: #7892ad;
    font-size: 0.67rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.045em;
}

.live-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 4px;
    border-radius: 50%;
    background: #12d28c;
    vertical-align: middle;
}

.stat-divider {
    width: 1px;
    height: 32px;
    background: rgba(60, 112, 158, 0.42);
    align-self: center;
}

.feed-tabs {
    display: grid;
    justify-content: flex-start;
    gap: 7px;
    margin: 0 0 13px;
    padding: 7px;
    overflow-x: auto;
    border: 1px solid rgba(44, 94, 137, 0.46);
    border-radius: 12px;
    background: rgba(3, 16, 31, 0.9);
    scrollbar-width: none;
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 12px;
}

.feed-tab {
    padding: 8px 10px;
    color: #91a9c5;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 0.76rem;
    font-weight: 750;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    min-height: 39px;
    justify-content: center;
    text-align: center;
}

.feed-tab:hover {
    color: #fff;
    border-color: #2b6a9f;
    background: linear-gradient(180deg, rgba(16, 67, 108, 0.92), rgba(8, 42, 72, 0.92));
}

.feed-tab.active {
    color: #fff;
    border-color: #2b6a9f;
    background: linear-gradient(180deg, rgba(16, 67, 108, 0.92), rgba(8, 42, 72, 0.92));
}

.content-hero {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
    margin-bottom: 20px;
    padding: 30px;
    border: 1px solid rgba(57, 137, 207, 0.42);
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(12, 42, 75, 0.96), rgba(4, 17, 32, 0.98));
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.31);
}

.about-hero {
    position: relative;
    overflow: hidden;
}

.rules-hero {
    position: relative;
    overflow: hidden;
}

.privacy-hero {
    position: relative;
    overflow: hidden;
}

.terms-hero {
    position: relative;
    overflow: hidden;
}

.about-hero::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: -95px;
    top: -110px;
    border-radius: 50%;
    background: rgba(30, 153, 255, 0.12);
    filter: blur(4px);
    pointer-events: none;
}

.rules-hero::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: -95px;
    top: -110px;
    border-radius: 50%;
    background: rgba(30, 153, 255, 0.12);
    filter: blur(4px);
    pointer-events: none;
}

.privacy-hero::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: -95px;
    top: -110px;
    border-radius: 50%;
    background: rgba(30, 153, 255, 0.12);
    filter: blur(4px);
    pointer-events: none;
}

.terms-hero::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: -95px;
    top: -110px;
    border-radius: 50%;
    background: rgba(30, 153, 255, 0.12);
    filter: blur(4px);
    pointer-events: none;
}

.wall-hero {
    max-width: 820px;
    margin: 0 auto 18px;
    width: 100%;
    padding: 34px 38px;
    text-align: center;
    border: 1px solid rgba(52, 155, 238, 0.52);
    border-radius: 20px;
    background: radial-gradient(circle at 50% -30%, rgba(32, 156, 255, 0.22), transparent 52%),
        linear-gradient(145deg, rgba(7, 30, 58, 0.97), rgba(2, 13, 27, 0.98));
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 315px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.wall-hero-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 13px;
    color: #9dd5ff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    padding: 7px 12px;
    border: 1px solid rgba(45, 145, 230, 0.34);
    border-radius: 999px;
    background: rgba(15, 75, 126, 0.28);
    border-color: rgba(73, 174, 255, 0.44);
    box-shadow: inset 0 0 18px rgba(37, 140, 224, 0.05);
    text-transform: uppercase;
    width: auto;
    max-width: 100%;
    min-height: 32px;
    margin: 0 0 20px;
    white-space: nowrap;
    line-height: 1;
}

.wall-hero-kicker span {
    width: auto;
    height: auto;
    background: none;
    display: inline;
    color: inherit;
    line-height: 1;
}

.wall-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(2.15rem, 3.65vw, 3.25rem);
    font-weight: 900;
    line-height: 1.03;
    letter-spacing: -0.045em;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.26);
    max-width: 760px;
    text-wrap: balance;
    width: 100%;
}

.wall-hero h1 span {
    color: #39adff;
    position: relative;
    display: inline-block;
    text-shadow: 0 0 24px rgba(50, 170, 255, 0.2);
}

.wall-hero > p {
    max-width: 650px;
    margin: 10px auto 0;
    color: #a9bfd5;
    font-size: 1rem;
    line-height: 1.6;
}

.wall-hero-guest-note {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-top: 18px;
    padding: 10px 13px;
    color: #d7e6f6;
    border: 1px solid rgba(64, 151, 221, 0.44);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(7, 30, 55, 0.82), rgba(3, 17, 33, 0.88));
    font-size: 0.8rem;
    width: min(100%, 560px);
    max-width: 620px;
    justify-content: flex-start;
    margin: 26px auto 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    text-align: left;
}

.wall-hero-guest-note i {
    color: #62bbff;
}

.feed-tabs::-webkit-scrollbar {
    display: none;
}

.wall-hero-kicker i {
    color: var(--wall-blue);
    font-size: 0.95rem;
    filter: drop-shadow(0 0 7px rgba(36, 164, 255, 0.45));
}

.wall-hero-lead {
    max-width: 650px;
    margin: 20px auto 0;
    color: #c3d4e7;
    font-size: 0.95rem;
    line-height: 1.55;
    text-wrap: balance;
    margin-top: 13px;
}

.community-stats .stat-item {
    min-width: 0;
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 12px;
    border-right: 1px solid rgba(49, 89, 125, 0.58);
    border: 1px solid rgba(54, 105, 151, 0.36) !important;
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(11, 41, 71, 0.78), rgba(4, 20, 38, 0.9));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.community-stats .stat-item:last-child {
    border-right: 0;
}

.community-stats .stat-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(44, 148, 238, 0.28);
    border-radius: 12px;
    color: #43b1ff;
    background: rgba(31, 134, 218, 0.13);
    font-size: 1.08rem;
    flex-basis: 38px;
    border-color: rgba(47, 161, 247, 0.38);
    box-shadow: inset 0 0 18px rgba(35, 151, 243, 0.06);
}

.community-stats .stat-icon-users {
    color: #ff805e;
    border-color: rgba(255, 128, 94, 0.32);
    background: rgba(255, 105, 76, 0.09);
}

.community-stats .stat-item div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.05;
    align-items: flex-start;
}

.community-stats .stat-item strong {
    color: #fff;
    font-size: 1.18rem;
    font-weight: 850;
    line-height: 1;
    letter-spacing: -0.02em;
}

.community-stats .stat-item span:not(.stat-icon) {
    margin-top: 4px;
    color: #9ab2cd;
    font-size: 0.62rem;
    white-space: nowrap;
    font-weight: 800;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.community-stats .stat-divider {
    display: none;
}

.wall-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    opacity: 0.12;
    background: linear-gradient(90deg, transparent 49.5%, rgba(49, 163, 255, 0.28) 50%, transparent 50.5%),
        linear-gradient(0deg, transparent 49.5%, rgba(49, 163, 255, 0.2) 50%, transparent 50.5%);
    background-size: 54px 27px;
    transform: skewY(-1deg) scale(1.04);
}

.wall-hero::after {
    content: "";
    font-family: "bootstrap-icons";
    position: absolute;
    right: -18px;
    bottom: -54px;
    z-index: -1;
    color: rgba(47, 161, 255, 0.07);
    font-size: 13rem;
    line-height: 1;
    transform: rotate(-10deg);
    pointer-events: none;
}

.wall-hero-accent {
    width: 78px;
    height: 4px;
    margin: 0 auto 17px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(45, 165, 255, 0), #2ba7ff 50%, rgba(45, 165, 255, 0));
    box-shadow: 0 0 22px rgba(43, 167, 255, 0.52);
}

.wall-hero-guest-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(69, 170, 247, 0.36);
    border-radius: 10px;
    color: #56b7ff;
    background: rgba(30, 124, 202, 0.13);
}

.wall-hero-guest-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wall-hero-guest-copy strong {
    color: #f4f9ff;
    font-size: 0.84rem;
    font-weight: 800;
}

.wall-hero-guest-copy small {
    color: #9fb5ce;
    font-size: 0.77rem;
    line-height: 1.45;
}

.community-stats .stat-item:hover {
    transform: translateY(-2px);
    border-color: rgba(61, 161, 235, 0.56) !important;
    background: linear-gradient(145deg, rgba(13, 48, 84, 0.86), rgba(4, 22, 42, 0.94));
}

.wall-hero-content {
    position: relative;
    z-index: 2;
    width: min(100%, 760px);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.rantitude-card {
    position: sticky;
    top: 96px;
    overflow: hidden;
    border: 1px solid rgba(45, 123, 191, 0.42);
    border-radius: 16px;
    background: linear-gradient(
            180deg,
            rgba(7, 28, 53, 0.97),
            rgba(4, 17, 32, 0.98)
        );
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}

.rantitude-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 18px 15px;
    border-bottom: 1px solid rgba(49, 100, 146, 0.35);
}

.rantitude-head h2 {
    margin: 3px 0 0;
    color: #f5f9ff;
    font-size: 1rem;
    font-weight: 800;
}

.rantitude-head > i {
    color: #36a9ff;
    font-size: 1.25rem;
}

.rantitude-kicker {
    color: #339fff;
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.1em;
}

.rantitude-current {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 14px;
    padding: 15px;
    border: 1px solid rgba(45, 151, 235, 0.35);
    border-radius: 13px;
    background: radial-gradient(
            circle at top left,
            rgba(31, 145, 236, 0.13),
            transparent 48%
        ),
        rgba(8, 29, 50, 0.9);
}

.rantitude-current-emoji {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(21, 106, 182, 0.16);
    font-size: 1.85rem;
}

.rantitude-current-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.rantitude-current-label {
    color: #7893ad;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
}

.rantitude-current-copy strong {
    margin-top: 2px;
    color: #ffffff;
    font-size: 1rem;
}

.rantitude-current-copy small {
    margin-top: 2px;
    color: #8fa7be;
    font-size: 0.74rem;
}

.rantitude-list {
    display: flex;
    flex-direction: column;
    padding: 0 10px 12px;
}

.rantitude-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 42px;
    padding: 8px 9px;
    border-radius: 9px;
}

.rantitude-item:hover {
    background: rgba(27, 105, 169, 0.11);
}

.rantitude-item.is-top {
    background: rgba(27, 132, 219, 0.11);
}

.rantitude-feeling {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
}

.rantitude-emoji {
    width: 29px;
    height: 29px;
    flex: 0 0 29px;
    display: grid;
    place-items: center;
    font-size: 1.05rem;
}

.rantitude-label {
    overflow: hidden;
    color: #c3d2e1;
    font-size: 0.78rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rantitude-count {
    min-width: 32px;
    color: #8da9c3;
    text-align: right;
    font-size: 0.76rem;
    font-weight: 800;
}

.rantitude-item.is-top .rantitude-label {
    color: #4db4ff;
}

.rantitude-item.is-top .rantitude-count {
    color: #4db4ff;
}

.page-sidebar {
    width: 100%;
    max-width: 360px;
    margin-left: auto;
}

.page-sidebar > * {
    max-width: 100%;
}

.page-layout .feed-shell {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.page-layout .wall-hero {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 18px !important;
}

.page-layout .community-stats {
    width: 100% !important;
    max-width: none !important;
}

.page-layout .feed-tabs {
    width: 100% !important;
    max-width: none !important;
}

.page-sidebar .rantitude-card {
    width: 100%;
    max-width: none;
}

.page-layout .wall-hero-content {
    width: 100%;
    max-width: none;
    padding-left: 36px;
    padding-right: 36px;
}

.page-layout .wall-hero h1 {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.page-layout .wall-hero-lead {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

body > .site-main {
    position: relative;
    z-index: 1;
}

.wall-hero-auth-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.wall-hero-signup-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 39px;
    padding: 8px 17px;
    border-radius: 9px;
    font-size: 0.86rem;
    font-weight: 750;
    text-decoration: none;
    transition: background-color 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
    background: #2563eb;
    border: 1px solid #3b82f6;
    color: #ffffff;
}

.wall-hero-login-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 39px;
    padding: 8px 17px;
    border-radius: 9px;
    font-size: 0.86rem;
    font-weight: 750;
    text-decoration: none;
    transition: background-color 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
    background: rgba(10, 24, 49, 0.75);
    border: 1px solid rgba(147, 197, 253, 0.35);
    color: #eaf2ff;
}

.wall-hero-signup-btn:hover {
    background: #1d4ed8;
    color: #ffffff;
    transform: translateY(-1px);
}

.wall-hero-login-btn:hover {
    background: rgba(37, 99, 235, 0.22);
    border-color: #60a5fa;
    color: #ffffff;
}

.rantitude-list .rantitude-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: background-color .15s ease;
}

.rantitude-list .rantitude-item:hover {
    background: rgba(63, 155, 227, .12);
}

.rantitude-list .rantitude-item:focus-visible {
    outline: 2px solid #51b6ff;
    outline-offset: 2px;
}

.rantitude-current-link:focus-visible {
    outline: 2px solid #51b6ff;
    outline-offset: 2px;
}

.rantitude-list .rantitude-item:hover .rantitude-label {
    color: #74c7ff;
}

.rantitude-current-link {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    color: inherit;
    text-decoration: none;
}

.rantitude-current-link:hover {
    color: inherit;
}

.rantitude-current-link .rantitude-current-copy {
    flex: 1;
    min-width: 0;
}

.rantitude-link-arrow {
    color: #76bdec;
    font-size: .85rem;
    transition: transform .15s ease;
}

.rantitude-current-link:hover .rantitude-link-arrow {
    transform: translate(2px, -2px);
}

.feed-filter-banner {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 16px;
    margin-bottom: 20px;
    background: linear-gradient(
        135deg,
        rgba(10, 35, 60, .94),
        rgba(12, 47, 77, .88)
    );
    border: 1px solid rgba(74, 161, 226, .28);
    border-left: 3px solid #48b5ff;
    border-radius: 11px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .12);
}

.feed-filter-icon {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    background: rgba(50, 132, 196, .16);
    border: 1px solid rgba(79, 171, 238, .2);
    border-radius: 10px;
    color: #79caff;
    font-size: 1.5rem;
    line-height: 1;
}

.feed-filter-icon i {
    font-size: 1.2rem;
}

.feed-filter-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.feed-filter-eyebrow {
    color: #6eb8ee;
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .1em;
}

.feed-filter-title {
    color: #f0f8ff;
    font-size: .96rem;
    font-weight: 800;
    line-height: 1.3;
}

.feed-filter-description {
    color: #a5bdd4;
    font-size: .79rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.feed-filter-query {
    color: #d4ecff;
    font-weight: 700;
}

.feed-filter-clear {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border: 1px solid rgba(107, 174, 227, .22);
    border-radius: 8px;
    background: rgba(255, 255, 255, .04);
    color: #a3c4de;
    text-decoration: none;
    transition: background .15s, color .15s;
}

.feed-filter-clear:hover {
    background: rgba(72, 181, 255, .16);
    color: #fff;
}

.feed-filter-clear:focus-visible {
    outline: 2px solid #74caff;
    outline-offset: 3px;
}


/* ========================================================================
   RANTS VOTES
   Source: rants-votes.css
   ======================================================================== */

/* ============================================================
   04. Rant cards, voting, and avatars
   ============================================================ */

.rant-feed {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rant-card {
    overflow: hidden;
    border: 1px solid #28619a;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(7, 28, 56, 0.96), rgba(4, 20, 40, 0.97));
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.24);
}

.rant-row {
    display: block;
}

.rant-main {
    min-width: 0;
    padding: 14px 17px 12px;
}

.rant-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.letter-avatar {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #f6fbff;
    border: 1px solid rgba(111, 190, 255, 0.2);
    background: linear-gradient(145deg, #397dc3, #20518b);
    box-shadow: inset 0 0 14px rgba(255, 255, 255, 0.05);
    font-size: 1rem;
    font-weight: 800;
}

.avatar-color-1 {
    --avatar-color-1: #397dc3;
    --avatar-color-2: #20518b;
    background: linear-gradient(145deg, #397dc3, #20518b);
}

.avatar-color-2 {
    --avatar-color-1: #ff6f7f;
    --avatar-color-2: #d84960;
    background: linear-gradient(145deg, #ff6f7f, #d84960);
}

.avatar-color-3 {
    --avatar-color-1: #49b9b0;
    --avatar-color-2: #247c77;
    background: linear-gradient(145deg, #49b9b0, #247c77);
}

.avatar-color-4 {
    --avatar-color-1: #9271dc;
    --avatar-color-2: #5b42a6;
    background: linear-gradient(145deg, #9271dc, #5b42a6);
}

.avatar-color-5 {
    --avatar-color-1: #e28b45;
    --avatar-color-2: #a65723;
    background: linear-gradient(145deg, #e28b45, #a65723);
}

.avatar-color-6 {
    --avatar-color-1: #4ca96c;
    --avatar-color-2: #286f46;
    background: linear-gradient(145deg, #4ca96c, #286f46);
}

.avatar-color-7 {
    --avatar-color-1: #d45f9d;
    --avatar-color-2: #963968;
    background: linear-gradient(145deg, #d45f9d, #963968);
}

.avatar-color-8 {
    --avatar-color-1: #3e9fc2;
    --avatar-color-2: #23647d;
    background: linear-gradient(145deg, #3e9fc2, #23647d);
}

.avatar-color-9 {
    --avatar-color-1: #b779e1;
    --avatar-color-2: #7548a4;
    background: linear-gradient(145deg, #b779e1, #7548a4);
}

.avatar-color-10 {
    --avatar-color-1: #d9a83c;
    --avatar-color-2: #96721f;
    background: linear-gradient(145deg, #d9a83c, #96721f);
}

.avatar-color-11 {
    --avatar-color-1: #5b8ed6;
    --avatar-color-2: #345fa0;
    background: linear-gradient(145deg, #5b8ed6, #345fa0);
}

.avatar-color-12 {
    --avatar-color-1: #e66f4e;
    --avatar-color-2: #a8442d;
    background: linear-gradient(145deg, #e66f4e, #a8442d);
}

.avatar-color-13 {
    --avatar-color-1: #52a9a0;
    --avatar-color-2: #2d706b;
    background: linear-gradient(145deg, #52a9a0, #2d706b);
}

.avatar-color-14 {
    --avatar-color-1: #7e8fe0;
    --avatar-color-2: #4c59a5;
    background: linear-gradient(145deg, #7e8fe0, #4c59a5);
}

.avatar-color-15 {
    --avatar-color-1: #cd6eaf;
    --avatar-color-2: #8f417c;
    background: linear-gradient(145deg, #cd6eaf, #8f417c);
}

.avatar-color-16 {
    --avatar-color-1: #7fae43;
    --avatar-color-2: #527426;
    background: linear-gradient(145deg, #7fae43, #527426);
}

.avatar-color-17 {
    --avatar-color-1: #d98274;
    --avatar-color-2: #9a4c43;
    background: linear-gradient(145deg, #d98274, #9a4c43);
}

.avatar-color-18 {
    --avatar-color-1: #4193a8;
    --avatar-color-2: #275e6d;
    background: linear-gradient(145deg, #4193a8, #275e6d);
}

.avatar-color-19 {
    --avatar-color-1: #bc7c49;
    --avatar-color-2: #7d4d29;
    background: linear-gradient(145deg, #bc7c49, #7d4d29);
}

.avatar-color-20 {
    --avatar-color-1: #6d7bd3;
    --avatar-color-2: #434b91;
    background: linear-gradient(145deg, #6d7bd3, #434b91);
}

.avatar-color-21 {
    --avatar-color-1: #c75b6c;
    --avatar-color-2: #8c3645;
    background: linear-gradient(145deg, #c75b6c, #8c3645);
}

.avatar-color-22 {
    --avatar-color-1: #399a79;
    --avatar-color-2: #24674f;
    background: linear-gradient(145deg, #399a79, #24674f);
}

.avatar-color-23 {
    --avatar-color-1: #a96cc6;
    --avatar-color-2: #70418c;
    background: linear-gradient(145deg, #a96cc6, #70418c);
}

.avatar-color-24 {
    --avatar-color-1: #477cb5;
    --avatar-color-2: #2a527d;
    background: linear-gradient(145deg, #477cb5, #2a527d);
}

.rant-meta {
    min-width: 0;
    flex: 1;
    padding-top: 5px;
}

.rant-author-line {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: #899fbb;
    font-size: 0.77rem;
}

.rant-author-line strong {
    color: white;
    font-size: 0.86rem;
}

.meta-dot {
    color: #5f7896;
}

.feeling-badge {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: inline-grid;
    place-items: center;
    margin-left: 5px;
    padding: 1px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: linear-gradient(145deg, rgba(10, 29, 52, 0.96), rgba(5, 18, 34, 0.98)) padding-box,
        linear-gradient(135deg, #ff667a, #ffb347 22%, #ffe45c 38%, #57e6c4 56%, #45a9ff 73%, #936cff 88%, #ff65c7) border-box;
    box-shadow: inset 0 0 14px rgba(255, 255, 255, 0.05),
        0 0 10px rgba(69, 169, 255, 0.18),
        0 4px 12px rgba(0, 0, 0, 0.2);
    vertical-align: middle;
    position: relative;
    isolation: isolate;
}

.feeling-badge::before {
    content: "";
    position: absolute;
    inset: 3px;
    z-index: -1;
    border-radius: 7px;
    background: radial-gradient(circle at 30% 20%, rgba(255, 104, 131, 0.22), transparent 38%),
        radial-gradient(circle at 72% 78%, rgba(69, 169, 255, 0.24), transparent 42%),
        rgba(10, 31, 55, 0.9);
}

.feeling-emoji {
    display: block;
    margin: 0;
    font-size: 1.2rem;
    line-height: 1;
    transform: translateY(1px) scale(1.05);
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.7))
        drop-shadow(0 0 4px rgba(255, 255, 255, 0.14));
}

.more-btn {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    padding: 0;
    color: #aac3dd;
    border: 0;
    border-radius: 7px;
    background: transparent;
    margin-top: 4px;
}

.more-btn:hover {
    color: white;
    background: rgba(56, 127, 186, 0.16);
}

.rant-body {
    margin: 9px 4px 7px 53px;
    color: #f5f8fe;
    font-size: 0.94rem;
    line-height: 1.48;
    overflow-wrap: anywhere;
}

.rant-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    margin-left: 53px;
}

.vote-btn {
    border: 0;
    background: transparent;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    padding: 0;
    color: #79aee0;
    border-radius: 6px;
    font-size: 1.05rem;
}

.vote-btn:hover {
    color: #4fb3ff;
    background: rgba(38, 151, 255, 0.12);
}

.vote-btn.upvote-btn.active {
    color: #43e59f;
    background: rgba(22, 209, 139, 0.16);
    box-shadow: inset 0 0 0 1px rgba(67, 229, 159, 0.26),
        0 0 12px rgba(22, 209, 139, 0.16);
}

.vote-btn.downvote-btn:hover {
    color: #ff6c80;
    background: rgba(255, 89, 109, 0.1);
}

.vote-btn.downvote-btn.active {
    color: #ff6c80;
    background: rgba(255, 89, 109, 0.1);
}

.vote-score {
    min-width: 24px;
    color: #d9e8f9;
    text-align: center;
    font-size: 0.83rem;
}

.action-separator {
    width: 1px;
    height: 19px;
    margin: 0 5px;
    background: #34526e;
}

.comment-avatar {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    font-size: 0.72rem;
}

.comment-form-avatar {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    font-size: 0.72rem;
    flex-shrink: 0;
}

.reply-form-avatar {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    font-size: 0.72rem;
}

.profile-avatar {
    width: 64px;
    height: 64px;
    flex-basis: 64px;
    font-size: 1.35rem;
}

.login-to-rant-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
    padding: 18px 20px;
    border: 1px solid rgba(57, 133, 202, 0.42);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(8, 30, 55, 0.96), rgba(4, 17, 32, 0.97));
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.26);
}

.login-to-rant-card > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.login-to-rant-card strong {
    color: #f4f9ff;
    font-size: 1rem;
}

.login-to-rant-card span {
    color: #8da6bd;
    font-size: 0.84rem;
}

.home-stack > .rant-composer {
    margin-bottom: 14px;
}

.page-layout .rant-composer {
    width: 100% !important;
    max-width: none !important;
}

.page-layout .rant-feed {
    width: 100% !important;
    max-width: none !important;
}

.page-layout .rant-card {
    width: 100% !important;
    max-width: none !important;
}

.rant-card .feeling-badge {
    position: relative;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: inline-grid;
    place-items: center;
    margin-left: 6px;
    padding: 0;
    overflow: hidden;
    isolation: isolate;
    vertical-align: middle;
    border: 1px solid color-mix(in srgb, var(--avatar-color-1) 72%, white 10%);
    border-radius: 11px;
    background: linear-gradient(
            145deg,
            color-mix(in srgb, var(--avatar-color-1) 30%, #091829),
            color-mix(in srgb, var(--avatar-color-2) 34%, #061321)
        );
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09),
        inset 0 -8px 18px rgba(0, 0, 0, 0.16),
        0 0 0 1px color-mix(in srgb, var(--avatar-color-1) 12%, transparent),
        0 5px 14px rgba(0, 0, 0, 0.22);
}

.rant-card .feeling-badge::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 55%;
    width: 31px;
    height: 25px;
    transform: translate(-50%, -50%);
    z-index: 0;
    border-radius: 50%;
    background: radial-gradient(
            ellipse at center,
            color-mix(in srgb, var(--avatar-color-1) 72%, white 18%) 0%,
            color-mix(in srgb, var(--avatar-color-1) 48%, transparent) 34%,
            color-mix(in srgb, var(--avatar-color-2) 24%, transparent) 56%,
            transparent 76%
        );
    filter: blur(3px);
    opacity: 0.95;
}

.rant-card .feeling-badge::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 5px;
    width: 23px;
    height: 7px;
    transform: translateX(-50%);
    z-index: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.42);
    filter: blur(3px);
    opacity: 0.72;
}

.rant-card .feeling-emoji {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-size: 1.32rem;
    line-height: 1;
    transform: none;
    filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.68))
        drop-shadow(0 0 5px color-mix(in srgb, var(--avatar-color-1) 36%, transparent));
}

.rant-avatar-wrap {
    position: relative;
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    isolation: isolate;
}

.rant-avatar-wrap .letter-avatar {
    position: relative;
    z-index: 2;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
}

.rant-avatar-wrap::after {
    content: "";
    position: absolute;
    left: 5px;
    bottom: 1px;
    width: 39px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(
            ellipse at center,
            rgba(0, 0, 0, 0.42) 0%,
            rgba(0, 0, 0, 0.18) 45%,
            transparent 75%
        );
    filter: blur(3px);
    z-index: 0;
}

.avatar-feeling {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 1.15rem;
    line-height: 1;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.42),
        0 5px 8px rgba(0, 0, 0, 0.28),
        0 0 8px rgba(83, 181, 255, 0.18);
    z-index: 4;
    isolation: isolate;
}

.avatar-feeling::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 54%;
    width: 32px;
    height: 25px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(
            ellipse at center,
            rgba(89, 190, 255, 0.42) 0%,
            rgba(50, 151, 235, 0.22) 38%,
            rgba(37, 110, 181, 0.08) 58%,
            transparent 76%
        );
    filter: blur(3px);
    z-index: -2;
    pointer-events: none;
}

.avatar-feeling::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -2px;
    width: 20px;
    height: 7px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(
            ellipse at center,
            rgba(0, 0, 0, 0.52),
            rgba(0, 0, 0, 0.22) 48%,
            transparent 75%
        );
    filter: blur(2px);
    z-index: -1;
    pointer-events: none;
}

.comment-item > .comment-line > .comment-avatar {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    font-size: 0.78rem;
}

.reply-form .reply-form-avatar {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
}

.signup-avatar-field {
    margin-bottom: 18px;
}

.signup-avatar-picker {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px;
    border: 1px solid #294968;
    border-radius: 12px;
    background: rgba(9, 30, 51, 0.8);
}

.signup-avatar-preview-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.signup-avatar-preview {
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background-color: #397DC3;
    color: #FFFFFF;
    border: 2px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.28),
        inset 0 1px 3px rgba(255, 255, 255, 0.14);
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1;
    transition: background-color 0.12s ease,
        color 0.12s ease;
}

.signup-avatar-color-options {
    flex: 1;
    min-width: 0;
}

.avatar-color-label {
    display: block;
    margin-bottom: 7px;
    color: #dce8f5;
    font-size: 0.8rem;
    font-weight: 700;
}

.signup-avatar-hex {
    color: #e7f3ff;
    font-size: 0.9rem;
    font-weight: 750;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    letter-spacing: 0.02em;
}

.signup-avatar-help {
    display: block;
    margin-top: 6px;
    color: #8fa8c0;
    font-size: 0.73rem;
    line-height: 1.4;
}

.avatar-picker-field {
    margin-bottom: 18px;
}

.avatar-picker {
    width: 100%;
    min-width: 0;
    padding: 14px;
    border: 1px solid #294968;
    border-radius: 13px;
    background: #091b30;
}

.avatar-picker-preview {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    border-radius: 50%;
    background: #397DC3;
    background-image: none;
    color: #fff;
    border: 2px solid rgba(255,255,255,.20);
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1;
}

.avatar-picker-description {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.avatar-picker-description strong {
    color: #f0f7ff;
    font-size: .88rem;
}

.avatar-picker-description small {
    color: #90a9c4;
    font-size: .75rem;
    line-height: 1.4;
}

.avatar-color-square {
    --picker-hue: #008cff;
    position: relative;
    width: 100%;
    height: 148px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 10px;
    background: linear-gradient(to top, #000, transparent),
        linear-gradient(to right, #fff, transparent),
        var(--picker-hue);
    cursor: crosshair;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.avatar-color-square:focus-visible {
    outline: 2px solid #66c8ff;
    outline-offset: 3px;
}

.avatar-color-cursor {
    position: absolute;
    left: 70%;
    top: 23%;
    width: 15px;
    height: 15px;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0,0,0,.6),
        0 2px 6px rgba(0,0,0,.4);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.avatar-picker-subtitle {
    display: block;
    margin: 14px 0 9px;
    color: #d9e9f9;
    font-size: .78rem;
    font-weight: 700;
}

.avatar-hue-slider {
    display: block;
    width: 100%;
    height: 17px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background: linear-gradient(
        to right,
        #ff0000 0%,
        #ffff00 16.67%,
        #00ff00 33.33%,
        #00ffff 50%,
        #0000ff 66.67%,
        #ff00ff 83.33%,
        #ff0000 100%
    );
}

.avatar-hue-slider::-webkit-slider-thumb {
    width: 21px;
    height: 21px;
    border: 3px solid white;
    border-radius: 50%;
    background: transparent;
    box-shadow: 0 1px 5px rgba(0,0,0,.65);
    appearance: none;
    -webkit-appearance: none;
}

.avatar-hue-slider::-moz-range-thumb {
    width: 15px;
    height: 15px;
    border: 3px solid white;
    border-radius: 50%;
    background: transparent;
    box-shadow: 0 1px 5px rgba(0,0,0,.65);
}

.avatar-hue-slider:focus-visible {
    outline: 2px solid #67c6ff;
    outline-offset: 5px;
}

.avatar-hex-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin-top: 14px;
}

.avatar-hex-field {
    flex: 1;
    min-width: 0;
}

.avatar-hex-field label {
    display: block;
    margin-bottom: 5px;
    color: #94acc4;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .06em;
}

.avatar-hex-field input {
    display: block;
    width: 100%;
    height: 41px;
    padding: 0 12px;
    border: 1px solid #335675;
    border-radius: 9px;
    outline: none;
    background: #071525;
    color: #e8f4ff;
    font-family: ui-monospace, Consolas, monospace;
    font-size: .9rem;
}

.avatar-hex-field input:focus {
    border-color: #299eff;
    box-shadow: 0 0 0 3px rgba(41,158,255,.15);
}

.avatar-selected-swatch {
    width: 41px;
    height: 41px;
    flex: 0 0 41px;
    border: 2px solid rgba(255,255,255,.25);
    border-radius: 9px;
    background: #397DC3;
}

.compact-avatar-picker {
    padding: 0;
    overflow: hidden;
    border: 1px solid #294968;
    border-radius: 12px;
    background: #091b30;
}

.avatar-picker-toggle {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-height: 68px;
    padding: 10px 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #f0f7ff;
    text-align: left;
    cursor: pointer;
}

.avatar-picker-toggle:hover {
    background: rgba(50, 122, 183, 0.10);
}

.avatar-picker-toggle:focus-visible {
    outline: 2px solid #57baff;
    outline-offset: -3px;
}

.compact-avatar-picker .avatar-picker-preview {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    border-radius: 50%;
    background: #397DC3;
    background-image: none;
    color: white;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;
    border: 2px solid rgba(255, 255, 255, .22);
}

.avatar-picker-toggle-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.avatar-picker-toggle-info strong {
    color: #e9f4ff;
    font-size: .85rem;
    font-weight: 750;
}

.avatar-picker-toggle-info small {
    color: #91aac5;
    font-size: .71rem;
    line-height: 1.3;
}

.avatar-picker-toggle-hex {
    color: #a9c9e5;
    font-family: ui-monospace, Consolas, monospace;
    font-size: .71rem;
    white-space: nowrap;
}

.avatar-picker-toggle-chevron {
    color: #80bde9;
    font-size: .85rem;
    transition: transform .2s ease;
}

.avatar-picker-toggle[aria-expanded="true"] .avatar-picker-toggle-chevron {
    transform: rotate(180deg);
}

.avatar-picker-details {
    border-top: 1px solid rgba(96, 159, 211, .22);
}

.avatar-picker-details[hidden] {
    display: none !important;
}

.avatar-picker-details-inner {
    padding: 13px 12px 14px;
}

.compact-avatar-picker .avatar-color-square {
    height: 135px;
}

.compact-avatar-picker .avatar-picker-subtitle {
    margin-top: 12px;
}

.compact-avatar-picker .avatar-hex-row {
    margin-top: 12px;
}

.feeling-feed-page {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
}

.feeling-feed-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
    color: #93c8f0;
    text-decoration: none;
    font-size: .85rem;
}

.feeling-feed-back:hover {
    color: #fff;
}

.feeling-feed-heading {
    display: flex;
    align-items: center;
    gap: 16px;
}

.feeling-feed-emoji {
    flex: 0 0 auto;
    font-size: 3.25rem;
    line-height: 1;
}

.feeling-feed-kicker {
    color: #67baf1;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .1em;
}

.feeling-feed-heading h1 {
    margin: 5px 0;
    color: #f1f8ff;
    font-size: 1.7rem;
    font-weight: 800;
}

.feeling-feed-heading p {
    margin: 0;
    color: #a0b8d0;
    font-size: .88rem;
}

.feeling-feed-list .rant-card {
    margin-bottom: 16px;
}

.feeling-feed-pagination {
    display: flex;
    justify-content: center;
    margin: 25px 0;
}

.feeling-feed-empty {
    padding: 42px 18px;
    text-align: center;
    color: #a8c0d8;
}

.feeling-feed-empty > span {
    display: block;
    margin-bottom: 16px;
    font-size: 3rem;
}

.feeling-feed-empty h2 {
    color: #eff7ff;
    font-size: 1.2rem;
}

.feeling-feed-empty a {
    color: #75c8ff;
}


/* ========================================================================
   COMMENTS REPLIES
   Source: comments-replies.css
   ======================================================================== */

/* ============================================================
   05. Support, comments, and nested replies
   ============================================================ */

.comment-form textarea:focus {
    color: white;
    border-color: var(--wall-blue);
    background: #061a30;
    box-shadow: 0 0 0 0.18rem rgba(20, 151, 255, 0.12);
}

.reply-form textarea:focus {
    color: white;
    border-color: var(--wall-blue);
    background: #061a30;
    box-shadow: 0 0 0 0.18rem rgba(20, 151, 255, 0.12);
}

.comment-form textarea::placeholder {
    color: #839bb9;
}

.reply-form textarea::placeholder {
    color: #839bb9;
}

.btn-comment {
    color: white;
    border: 1px solid #2e9bff;
    background: linear-gradient(180deg, #169cff, #0a70ee);
    box-shadow: 0 7px 20px rgba(0, 114, 255, 0.25);
    font-weight: 750;
    min-width: 72px;
    height: 38px;
    border-radius: 8px;
    font-size: 0.75rem;
}

.btn-comment:hover {
    color: white;
    background: linear-gradient(180deg, #34aaff, #1380fa);
}

.comment-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    color: #899fbb;
    font-size: 0.77rem;
    min-height: 20px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.comment-meta strong {
    color: #edf4ff;
    font-size: 0.83rem;
    font-weight: 750;
}

.comments-toggle {
    border: 0;
    background: transparent;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 4px;
    color: #c7d7e8;
    border-radius: 6px;
    font-size: 0.8rem;
}

.reply-toggle {
    border: 0;
    background: transparent;
    padding: 2px 0;
    color: #4fb3ff;
    font-size: 0.76rem;
}

.comments-toggle:hover {
    color: #5db8ff;
}

.comments-panel {
    margin: 0 17px 13px 70px;
    border: 1px solid #284c6c;
    border-radius: 10px;
    background: rgba(7, 22, 42, 0.96);
}

.comments-panel-inner {
    padding: 10px 12px;
}

.comment-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.comment-item {
    position: relative;
    min-width: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    --tree-blue: #55b7ef;
    --tree-w: 2px;
    --tree-avatar: 30px;
    --tree-indent: 44px;
    --tree-x: calc(var(--tree-avatar) / 2 - var(--tree-w) / 2);
    --tree-child-pad-top: 11px;
    --tree-top-gap: 12px;
}

.comment-line {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.comment-content {
    min-width: 0;
    flex: 1;
}

.comment-body {
    margin-top: 1px;
    color: #dce5f3;
    font-size: 0.87rem;
    line-height: 1.65;
    overflow-wrap: anywhere;
    text-align: left;
}

.reply-toggle:hover {
    color: #8ad0ff;
}

.reply-children {
    position: relative;
    margin-top: 7px;
    margin-left: 15px;
    padding-left: 25px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.reply-children::before {
    content: "";
    position: absolute;
    left: 0;
    top: -3px;
    bottom: 13px;
    width: 1px;
    background: #365b7d;
}

.reply-children > .comment-item::before {
    content: "";
    position: absolute;
    left: -25px;
    top: 15px;
    width: 18px;
    height: 12px;
    border-left: 1px solid #365b7d;
    border-bottom: 1px solid #365b7d;
    border-radius: 0 0 0 6px;
}

.comment-form {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 11px;
    padding-top: 10px;
    border-top: 1px solid #24415d;
}

.comment-input-wrap {
    position: relative;
    min-width: 0;
    flex: 1;
}

.reply-input-wrap {
    position: relative;
    min-width: 0;
    flex: 1;
}

.comment-form textarea {
    width: 100%;
    min-height: 38px;
    max-height: 130px;
    resize: none;
    padding: 8px 65px 8px 10px;
    color: #edf6ff;
    border: 1px solid #324f6d;
    border-radius: 8px;
    background: #07182b;
    font-size: 0.78rem;
}

.reply-form textarea {
    width: 100%;
    min-height: 38px;
    max-height: 130px;
    resize: none;
    padding: 8px 65px 8px 10px;
    color: #edf6ff;
    border: 1px solid #324f6d;
    border-radius: 8px;
    background: #07182b;
    font-size: 0.78rem;
}

.comment-counter {
    position: absolute;
    right: 9px;
    bottom: 8px;
    color: #6f87a2;
    font-size: 0.65rem;
}

.comment-anon-switch {
    margin: 0 4px;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 8px;
    padding-left: 0;
    white-space: nowrap;
}

.comment-anon-switch .form-check-input {
    margin: 0;
    background-color: #74879d;
    border-color: #74879d;
    float: none;
    flex: 0 0 auto;
    cursor: pointer;
}

.comment-anon-switch .form-check-input:checked {
    background-color: var(--wall-blue);
    border-color: var(--wall-blue);
}

.reply-form {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid rgba(120, 155, 200, 0.15);
    border-radius: 10px;
    background: rgba(15, 27, 44, 0.55);
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.reply-context {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0 0 7px 38px;
    padding-left: 8px;
    border-left: 2px solid var(--wall-blue);
    color: #8ea5bf;
    font-size: 0.67rem;
}

.reply-context strong {
    color: #cfe6fa;
    font-size: 0.69rem;
}

.reply-entry-row {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.btn-cancel-reply {
    height: 38px;
    color: #c5d3e2;
    border: 1px solid #34536e;
    background: #10243a;
    font-size: 0.72rem;
}

.btn-cancel-reply:hover {
    color: white;
    border-color: #4a6e8d;
    background: #17324d;
}

.comments-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 0;
    color: var(--muted, #8ea4c5);
    font-size: 0.875rem;
}

.replies-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 0;
    color: var(--muted, #8ea4c5);
    font-size: 0.875rem;
}

.comment-actions-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 9px;
    flex-wrap: wrap;
}

.replies-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #2aa4ff;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 700;
}

.replies-toggle:hover {
    color: #70c2ff;
}

.replies-toggle:focus-visible {
    color: #70c2ff;
}

.replies-toggle:disabled {
    opacity: 0.65;
    cursor: wait;
}

.comments-toggle:disabled {
    opacity: 0.65;
    cursor: wait;
}

.comments-panel .comment-form {
    margin-top: 0;
    margin-bottom: 11px;
    padding-top: 0;
    padding-bottom: 11px;
    border-top: 0;
    border-bottom: 1px solid #24415d;
}

.comments-panel .comments-loading {
    padding: 9px 0;
    color: #8fa9c2;
    font-size: 0.78rem;
}

.thread-empty-state {
    border: 1px solid rgba(64, 135, 199, 0.34);
    background: rgba(5, 18, 31, 0.88);
    color: #8fa8c0;
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 8px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 0.86rem;
}

.thread-empty-state i {
    color: #259bff;
}

.comment-login-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-bottom: 10px;
    padding: 9px 11px;
    border: 1px solid #294965;
    border-radius: 8px;
    color: #a8bfd8;
    background: rgba(6, 22, 40, 0.72);
    font-size: 0.75rem;
}

.comment-anon-switch .form-check-label {
    margin: 0;
    color: #b7c7df;
    font-size: 0.76rem;
    font-weight: 650;
    cursor: pointer;
}

.reply-entry-row .comment-anon-switch {
    flex: 0 0 auto;
}

.comments-ajax-content .comment-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.comment-list > .comment-item {
    padding: 17px 0;
    border-bottom: 1px solid rgba(160, 185, 220, 0.10);
}

.comment-list > .comment-item:last-child {
    border-bottom: 0;
}

.comment-item > .comment-line {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    min-width: 0;
    position: relative;
}

.comment-item > .comment-line > .comment-content {
    flex: 1;
    min-width: 0;
    width: 100%;
}

.comment-meta span {
    color: #8195b0;
    font-size: 0.72rem;
}

.comment-item > .reply-children {
    position: relative;
    min-width: 0;
    margin: 12px 0 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

.comment-item > .reply-children::before {
    content: none !important;
    position: absolute;
    top: 0;
    bottom: 7px;
    left: 0;
    width: 2px;
    background: rgba(73, 132, 200, 0.20);
    border-radius: 2px;
    pointer-events: none;
    display: none !important;
}

.reply-children > .replies-ajax-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 0;
}

.replies-ajax-content > .comment-item {
    padding: 11px 0;
    border-bottom: 1px solid rgba(160, 185, 220, 0.055);
}

.replies-ajax-content > .comment-item:last-child {
    border-bottom: 0;
}

.comment-item[data-visual-depth="0"] > .reply-children {
    margin-left: 20px;
    padding-left: 13px;
    position: relative;
    margin: var(--tree-top-gap) 0 0 !important;
    padding: 0 0 0 var(--tree-indent) !important;
}

.comment-item[data-visual-depth="1"] > .reply-children {
    margin-left: 20px;
    padding-left: 13px;
    position: relative;
    margin: var(--tree-top-gap) 0 0 !important;
    padding: 0 0 0 var(--tree-indent) !important;
}

.comment-item[data-visual-depth="2"] > .reply-children {
    margin-left: 20px;
    padding-left: 13px;
    position: relative;
    margin: var(--tree-top-gap) 0 0 !important;
    padding: 0 0 0 var(--tree-indent) !important;
}

.comment-item[data-visual-depth="3"] > .reply-children {
    margin-left: 20px;
    padding-left: 13px;
    position: relative;
    margin: var(--tree-top-gap) 0 0 !important;
    padding: 0 0 0 var(--tree-indent) !important;
}

.comment-item[data-visual-depth="4"] > .reply-children {
    margin-left: 0;
    padding-left: 0;
    position: relative;
    margin: var(--tree-top-gap) 0 0 !important;
    padding: 0 !important;
}

.comment-item[data-visual-depth="4"] > .reply-children::before {
    display: none;
}

.comment-item[data-visual-depth="4"] > .reply-children > .replies-ajax-content > .comment-item {
    padding-top: 13px;
    padding-bottom: 13px;
    border-bottom: 1px solid rgba(160, 185, 220, 0.08);
}

.comment-content > .reply-quote {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 7px 0 9px;
    padding: 8px 11px;
    border: 0;
    border-left: 2px solid #348dda;
    border-radius: 0 7px 7px 0;
    background: rgba(48, 107, 177, 0.085);
    box-sizing: border-box;
}

.comment-content > .reply-quote strong {
    color: #70baff;
    font-size: 0.72rem;
    line-height: 1.4;
    font-weight: 750;
}

.comment-content > .reply-quote span {
    color: #a9b9cf;
    font-size: 0.75rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.comment-content > .reply-quote i {
    margin-right: 4px;
}

.comment-actions-row .reply-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    padding: 3px 0;
    border: 0;
    background: transparent;
    color: #8faed0;
    font-size: 0.73rem;
    font-weight: 700;
    cursor: pointer;
}

.comment-actions-row .replies-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    padding: 3px 0;
    border: 0;
    background: transparent;
    color: #62b3ff;
    font-size: 0.73rem;
    font-weight: 700;
    cursor: pointer;
}

.comment-actions-row .reply-toggle:hover {
    color: #62b3ff;
}

.comment-actions-row .replies-toggle:hover {
    color: #62b3ff;
}

.comment-actions-row .toggle-chevron {
    font-size: 0.68rem;
    margin-left: 2px;
}

.reply-form > .reply-context {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
    padding: 8px 11px;
    border-left: 2px solid #348dda;
    border-radius: 0 6px 6px 0;
    background: rgba(48, 107, 177, 0.08);
    min-width: 0;
}

.reply-form > .reply-context strong {
    font-size: 0.75rem;
    color: #72bdff;
}

.reply-form > .reply-context span {
    font-size: 0.76rem;
    color: #a9b9cf;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.reply-form .reply-entry-row {
    display: flex;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 10px;
    width: 100%;
    min-width: 0;
}

.reply-form .reply-input-wrap {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    width: auto;
}

.reply-form .reply-input-wrap textarea {
    display: block;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    resize: none;
    overflow-x: hidden;
    overflow-wrap: break-word;
    padding: 10px 65px 10px 12px;
    min-height: 44px;
    font-size: 0.85rem;
    line-height: 1.5;
}

.reply-form .reply-input-wrap .comment-counter {
    position: absolute;
    right: 10px;
    bottom: 10px;
    font-size: 0.66rem;
    color: #8295ad;
    pointer-events: none;
}

.reply-form .reply-form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.reply-form .comment-anon-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
}

.reply-form .comment-anon-switch .form-check-input {
    float: none;
    margin: 0;
    flex: 0 0 auto;
}

.reply-form .comment-anon-switch .form-check-label {
    margin: 0;
    white-space: nowrap;
    font-size: 0.76rem;
}

.reply-form .reply-form-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.reply-form .reply-form-buttons .btn {
    white-space: nowrap;
    font-size: 0.77rem;
    padding: 8px 12px;
}

.comment-item.new-comment-flash {
    animation: new-comment-flash 900ms ease-out both;
    border-radius: 12px;
}

.comment-item > .reply-children::after {
    content: none !important;
    display: none !important;
}

.comment-item:has(> .reply-children:not(.d-none)) > .comment-line::after {
    content: "" !important;
    display: block !important;
    position: absolute;
    left: var(--tree-x) !important;
    top: calc(var(--tree-avatar) - 1px);
    bottom: calc(-1 * var(--tree-top-gap)) !important;
    width: var(--tree-w);
    height: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--tree-blue);
    box-shadow: none !important;
    pointer-events: none;
}

.comment-item > .reply-children > .replies-ajax-content > .comment-item {
    position: relative;
}

.comment-item > .reply-children > .comment-item {
    position: relative;
}

.comment-item > .reply-children > .replies-ajax-content > .comment-item::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    left: calc(-1 * var(--tree-indent) + var(--tree-x)) !important;
    top: calc(-1 * var(--tree-top-gap)) !important;
    bottom: calc(-1 * var(--tree-top-gap)) !important;
    width: var(--tree-w);
    height: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--tree-blue);
    box-shadow: none !important;
    pointer-events: none;
}

.comment-item > .reply-children > .comment-item::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    left: calc(-1 * var(--tree-indent) + var(--tree-x)) !important;
    top: calc(-1 * var(--tree-top-gap)) !important;
    bottom: calc(-1 * var(--tree-top-gap)) !important;
    width: var(--tree-w);
    height: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--tree-blue);
    box-shadow: none !important;
    pointer-events: none;
}

.comment-item > .reply-children > .replies-ajax-content > .comment-item::after {
    content: "" !important;
    display: block !important;
    position: absolute;
    left: calc(-1 * var(--tree-indent) + var(--tree-x)) !important;
    top: var(--tree-child-pad-top) !important;
    width: calc(var(--tree-indent) - var(--tree-avatar) / 2 - 5px);
    height: calc(var(--tree-avatar) / 2);
    border: 0 !important;
    border-left: var(--tree-w) solid var(--tree-blue) !important;
    border-bottom: var(--tree-w) solid var(--tree-blue) !important;
    border-radius: 0 0 0 11px !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: none;
}

.comment-item > .reply-children > .comment-item::after {
    content: "" !important;
    display: block !important;
    position: absolute;
    left: calc(-1 * var(--tree-indent) + var(--tree-x)) !important;
    top: var(--tree-child-pad-top) !important;
    width: calc(var(--tree-indent) - var(--tree-avatar) / 2 - 5px);
    height: calc(var(--tree-avatar) / 2);
    border: 0 !important;
    border-left: var(--tree-w) solid var(--tree-blue) !important;
    border-bottom: var(--tree-w) solid var(--tree-blue) !important;
    border-radius: 0 0 0 11px !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: none;
}

.comment-item > .reply-children > .replies-ajax-content > .comment-item:last-child::before {
    bottom: auto !important;
    height: calc(var(--tree-top-gap) + var(--tree-child-pad-top) + var(--tree-avatar) / 2 - var(--tree-w)) !important;
}

.comment-item > .reply-children > .comment-item:last-child::before {
    bottom: auto !important;
    height: calc(var(--tree-top-gap) + var(--tree-child-pad-top) + var(--tree-avatar) / 2 - var(--tree-w)) !important;
}

.support-form-intro strong {
    color: #f1f7ff;
    font-size: 0.95rem;
    font-weight: 700;
}

/* Comment and reply icons use the site's blue, not support-heart pink. */
.support-form-intro .support-heart,
.support-form-intro .comment-section-icon {
    color: #397DC3;
    font-size: 1.1rem;
}

.support-form-description {
    color: #d5e3f3;
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.6;
}

.comments-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 14px;
    text-align: center;
    color: #d5e3f3;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.5;
}

.comments-empty-state .support-heart,
.comments-empty-state .bi-chat-dots,
.replies-empty-state .bi-chat-dots {
    flex-shrink: 0;
    color: #397DC3;
    font-size: 1.1rem;
}

/* Icons within comment and reply actions, without recoloring the help notice. */
.comments-toggle > .bi-chat-dots,
.comments-toggle > .bi-chat-dots-fill,
.replies-toggle > .bi-chat-dots,
.replies-toggle > .bi-chat-dots-fill,
.reply-toggle > .bi-reply {
    color: #397DC3;
}

/* Original Poster Badge — matches the Rant Participants badge. */
.comment-meta .is-op {
    display: inline-flex;
    align-items: center;
    min-height: 19px;
    padding: 2px 6px;
    border: 1px solid rgba(22, 209, 139, 0.32);
    border-radius: 5px;
    background: rgba(22, 209, 139, 0.10);
    color: #72e2b5;
    font-size: 0.59rem;
    font-weight: 850;
    letter-spacing: 0.055em;
    line-height: 1;
    flex-shrink: 0;
}

[data-bs-theme="light"] .comment-meta .is-op {
    border-color: rgba(16, 135, 88, 0.25);
    background: rgba(16, 135, 88, 0.08);
    color: #168052;
}


/* ========================================================================
   AUTH PROFILES
   Source: auth-profiles.css
   ======================================================================== */

/* ============================================================
   06. Authentication, modals, and profiles
   ============================================================ */

.btn-login {
    min-width: 82px;
    height: 42px;
    border-radius: 9px;
    font-weight: 700;
    font-size: 0.84rem;
    color: #f7fbff;
    border: 1px solid #2a5985;
    background: #07172a;
}

.btn-signup {
    min-width: 82px;
    height: 42px;
    border-radius: 9px;
    font-weight: 700;
    font-size: 0.84rem;
    color: white;
    border: 1px solid #248eff;
    background: linear-gradient(180deg, #159cff, #0b70ee);
    box-shadow: 0 0 18px rgba(21, 151, 255, 0.3);
}

.btn-login:hover {
    color: white;
    border-color: var(--wall-blue);
    background: #0b2440;
}

.btn-signup:hover {
    color: white;
    background: linear-gradient(180deg, #31a9ff, #117eff);
}

.wall-modal {
    color: white;
    border: 1px solid #2c4c68;
    background: #071522;
}

.auth-panel {
    max-width: 480px;
}

.profile-heading {
    display: flex;
    align-items: center;
    gap: 15px;
}

.profile-rep {
    color: #f7c64a;
    font-weight: 700;
}

.profile-bio {
    margin: 18px 0;
    color: #c8d7e5;
}

.auth-modal .modal-dialog {
    width: min(100% - 28px, 430px);
    max-width: 430px;
    position: relative;
    z-index: 1;
    margin-left: auto;
    margin-right: auto;
}

.auth-modal-card {
    position: relative;
    padding: 30px;
    border: 1px solid rgba(61, 154, 231, 0.45);
    border-radius: 18px;
    background: radial-gradient(circle at top, rgba(27, 131, 220, 0.13), transparent 38%),
        linear-gradient(180deg, #091a2d 0%, #06131f 100%);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(31, 149, 255, 0.06) inset;
}

.auth-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    opacity: 0.72;
}

.auth-modal-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    margin: 2px auto 14px;
    color: #ffffff;
    border: 1px solid rgba(67, 174, 255, 0.42);
    border-radius: 16px;
    background: linear-gradient(145deg, #148fff, #006fce);
    box-shadow: 0 12px 30px rgba(0, 128, 255, 0.24);
    font-size: 1.45rem;
}

.auth-modal-heading {
    margin-bottom: 24px;
    text-align: center;
}

.auth-modal-heading h2 {
    margin: 0 0 6px;
    color: #ffffff;
    font-size: 1.55rem;
    font-weight: 850;
}

.auth-modal-heading p {
    margin: 0;
    color: #8fa8c0;
    font-size: 0.9rem;
}

.auth-field {
    margin-bottom: 16px;
}

.auth-field .form-label {
    margin-bottom: 7px;
    color: #dce8f5;
    font-size: 0.82rem;
    font-weight: 700;
}

.auth-input-group {
    position: relative;
}

.auth-input-group > i {
    position: absolute;
    top: 50%;
    left: 14px;
    z-index: 2;
    color: #6484a3;
    transform: translateY(-50%);
    pointer-events: none;
}

.auth-input-group .wall-input {
    min-height: 48px;
    padding-left: 42px;
    color: #f3f8fd;
    border: 1px solid #294968;
    border-radius: 11px;
    background: #0b2035;
    box-shadow: none;
}

.auth-input-group .wall-input::placeholder {
    color: #69829b;
}

.auth-input-group .wall-input:focus {
    border-color: #2e9df4;
    background: #0c2238;
    box-shadow: 0 0 0 3px rgba(30, 151, 249, 0.12);
}

.auth-submit-btn {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 8px;
    border: 0;
    border-radius: 11px;
    font-weight: 800;
    background: linear-gradient(135deg, #1d9bff, #067be0);
    box-shadow: 0 10px 28px rgba(0, 128, 255, 0.23);
}

.auth-submit-btn:hover {
    background: linear-gradient(135deg, #37a9ff, #0b84eb);
}

.auth-submit-btn:focus {
    background: linear-gradient(135deg, #37a9ff, #0b84eb);
}

.auth-modal-switch {
    margin-top: 20px;
    padding-top: 18px;
    color: #849bb3;
    border-top: 1px solid rgba(62, 93, 121, 0.45);
    text-align: center;
    font-size: 0.82rem;
}

.auth-switch-btn {
    padding: 0 0 0 4px;
    color: #47afff;
    border: 0;
    background: transparent;
    font-weight: 800;
}

.auth-switch-btn:hover {
    color: #8bd0ff;
}

.auth-response {
    display: none;
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.4;
}

.auth-response.auth-error {
    display: block;
    color: #ff7b88 !important;
    background: #3a1118 !important;
    border: 1px solid #c93145 !important;
    box-shadow: 0 0 0 1px rgba(201, 49, 69, 0.15);
}

.auth-response.auth-success {
    display: block;
    color: #72e6a7 !important;
    background: #10291f !important;
    border: 1px solid #248c5a !important;
}

body > .modal {
    position: fixed;
    inset: 0;
    z-index: 1055;
}

body > .auth-modal {
    position: fixed;
    inset: 0;
    z-index: 1055;
}

.modal.auth-modal {
    position: fixed;
    inset: 0;
    z-index: 1055;
}

body > .modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1050;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1050;
}

.auth-modal .modal-content {
    position: relative;
    z-index: 1;
}

.auth-modal .auth-modal-card {
    position: relative;
    z-index: 1;
}

.signup-color-picker-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.signup-color-input {
    width: 56px;
    height: 44px;
    flex: 0 0 56px;
    padding: 4px;
    border: 1px solid #3b719f;
    border-radius: 10px;
    background: #0b2035;
    cursor: pointer;
}

.signup-color-input::-webkit-color-swatch-wrapper {
    padding: 0;
}

.signup-color-input::-webkit-color-swatch {
    border: 0;
    border-radius: 6px;
}

.signup-color-input::-moz-color-swatch {
    border: 0;
    border-radius: 6px;
}

.signup-color-input:focus-visible {
    outline: 2px solid #37b7ff;
    outline-offset: 3px;
}


/* ========================================================================
   EXCLUDED WORDS
   Source: excluded-words(1).css
   ======================================================================== */

/* ============================================================
   07. Excluded Words and filters
   ============================================================ */

.excluded-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.excluded-chip {
    padding: 7px 11px;
    color: #d9e8f6;
    border: 1px solid #38516b;
    border-radius: 999px;
    background: #102235;
}

.excluded-words-page {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
}

.excluded-words-panel {
    overflow: hidden;
    border: 1px solid #2c3c50;
    border-radius: 16px;
    background: #151e2b;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22);
}

.excluded-words-panel-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border: 1px solid #315d91;
    border-radius: 12px;
    background: rgba(57, 125, 195, 0.15);
    color: #66aeff;
    font-size: 1.3rem;
}

.excluded-words-panel-body {
    padding: 24px;
}

.excluded-words-label {
    display: block;
    margin-bottom: 10px;
    color: #e5edf8;
    font-size: 0.9rem;
    font-weight: 600;
}

.excluded-words-input-group {
    display: flex;
    gap: 10px;
}

.excluded-words-input-group input {
    flex: 1;
    min-width: 0;
    height: 46px;
    padding: 0 15px;
    border: 1px solid #354860;
    border-radius: 10px;
    outline: none;
    background: #101925;
    color: #f1f5fb;
    font-size: 0.92rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.excluded-words-input-group input::placeholder {
    color: #78899e;
}

.excluded-words-input-group input:focus {
    border-color: #397dc3;
    box-shadow: 0 0 0 3px rgba(57, 125, 195, 0.16);
}

.excluded-words-input-group button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #4a94de;
    border-radius: 10px;
    background: #397dc3;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
    min-width: 92px;
    padding: 0 17px;
}

.excluded-words-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #4a94de;
    border-radius: 10px;
    background: #397dc3;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
    min-height: 43px;
    padding: 0 20px;
    white-space: nowrap;
}

.excluded-words-input-group button:hover {
    background: #2868a9;
}

.excluded-words-save:hover {
    background: #2868a9;
}

.excluded-words-input-group button:active {
    transform: translateY(1px);
}

.excluded-words-save:active {
    transform: translateY(1px);
}

.excluded-words-input-group button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.excluded-words-save:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.excluded-words-hint {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 10px 0 27px;
    color: #94a6bb;
    font-size: 0.8rem;
}

.excluded-words-counter {
    padding: 5px 10px;
    border: 1px solid #30435a;
    border-radius: 7px;
    background: #1d2c3e;
    color: #b2c4d9;
    font-size: 0.78rem;
    font-weight: 500;
}

.excluded-words-list {
    min-height: 130px;
    padding: 15px;
    border: 1px solid #304159;
    border-radius: 12px;
    background: #101925;
}

.excluded-words-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.excluded-word-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    max-width: 100%;
    padding: 7px 9px 7px 13px;
    border: 1px solid #345779;
    border-radius: 8px;
    background: #203750;
    color: #e8f2ff;
    font-size: 0.85rem;
    line-height: 1.4;
}



.excluded-word-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.06);
    color: #b4c9df;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.excluded-word-remove:hover {
    background: rgba(220, 53, 69, 0.2);
    color: #ff8e9a;
}

.excluded-word-remove:focus-visible {
    outline: 2px solid #80baff;
    outline-offset: 3px;
}

.excluded-words-save:focus-visible {
    outline: 2px solid #80baff;
    outline-offset: 3px;
}

.excluded-words-input-group button:focus-visible {
    outline: 2px solid #80baff;
    outline-offset: 3px;
}

.excluded-words-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 98px;
    text-align: center;
}

.excluded-words-empty i {
    color: #58799e;
    font-size: 1.4rem;
}

.excluded-words-empty strong {
    color: #ccd8e7;
    font-size: 0.87rem;
}

.excluded-words-empty span {
    color: #899bb1;
    font-size: 0.8rem;
}

.excluded-words-panel-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;
    padding: 18px 24px;
    border-top: 1px solid #27384c;
    background: #1b293b;
}

.excluded-words-message {
    flex: 1;
    margin: 0;
    padding: 9px 12px;
    font-size: 0.82rem;
}

.excluded-words-save .save-label {
    align-items: center;
    gap: 8px;
}

.excluded-words-save .saving-label {
    align-items: center;
    gap: 8px;
}

.excluded-words-save .save-label:not(.d-none) {
    display: inline-flex;
}

.excluded-words-save .saving-label:not(.d-none) {
    display: inline-flex;
}

.excluded-words-intro {
    padding: 22px 24px;
    border: 1px solid #2c3c50;
    border-radius: 14px;
    background: #151e2b;
}

.excluded-words-intro-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 12px;
    background: rgba(57, 125, 195, 0.15);
    color: #66aeff;
    font-size: 1.25rem;
}

.excluded-words-intro h1 {
    color: #f1f5fb;
}

.excluded-words-intro p {
    color: #a4b1c2;
    font-size: 0.9rem;
    line-height: 1.6;
}

.excluded-words-intro .excluded-words-intro-note {
    color: #72b5ff;
    font-size: 0.82rem;
    font-style: italic;
}


/* ========================================================================
   CONTENT PAGES
   Source: content-pages.css
   ======================================================================== */

/* ============================================================
   08. Content pages, empty states, and footer
   ============================================================ */

.wall-empty-state {
    border: 1px dashed rgba(65, 126, 180, 0.62);
    background: rgba(4, 18, 35, 0.78);
    color: #8fa8c0;
    padding: 34px 24px;
    border-radius: 16px;
    text-align: center;
    min-height: 210px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 11px;
    width: 100%;
}

.wall-empty-state i {
    display: block;
    margin-bottom: 12px;
    color: #259bff;
    font-size: 2rem;
}

.wall-empty-state h2 {
    margin: 0 0 6px;
    color: #f5f9ff;
    font-size: 1.22rem;
    font-weight: 800;
}

.wall-empty-state p {
    margin: 0;
    max-width: 520px;
    color: #819ab2;
    font-size: 0.86rem;
    line-height: 1.55;
}

.site-footer {
    margin-top: 42px;
    border-top: 1px solid rgba(57, 116, 169, 0.28);
    background: rgba(3, 11, 20, 0.86);
}

.footer-shell {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: #7089a2;
    font-size: 0.82rem;
}

.footer-shell a {
    color: #93abc2;
    text-decoration: none;
}

.footer-shell a:hover {
    color: #42adff;
}

.legal-page {
    max-width: 900px;
    margin: 34px auto 0;
    padding: 34px;
    border: 1px solid rgba(62, 139, 204, 0.38);
    border-radius: 18px;
    background: rgba(5, 18, 31, 0.94);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}

.legal-page h1 {
    margin: 0 0 14px;
    color: #fff;
    font-size: clamp(1.8rem, 4vw, 2.65rem);
    font-weight: 900;
}

.legal-page h2 {
    margin: 28px 0 8px;
    color: #eef7ff;
    font-size: 1.08rem;
    font-weight: 800;
}

.legal-page p {
    color: #a9bbcd;
    line-height: 1.75;
}

.rules-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 22px;
}

.rules-grid article {
    padding: 18px;
    border: 1px solid rgba(56, 119, 176, 0.32);
    border-radius: 13px;
    background: rgba(9, 29, 48, 0.72);
}

.rules-grid h2 {
    margin-top: 0;
}

.rules-grid p {
    margin-bottom: 0;
}

.about-callout {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 28px;
    padding: 20px;
    border-left: 4px solid #269eff;
    border-radius: 10px;
    background: rgba(30, 143, 235, 0.09);
}

.about-callout strong {
    color: #fff;
    font-size: 1.08rem;
}

.about-callout span {
    color: #8eabc5;
}

.legal-note {
    margin-top: 30px;
    padding-top: 18px;
    border-top: 1px solid rgba(59, 104, 146, 0.35);
    color: #718aa3 !important;
    font-size: 0.84rem;
}

.empty-state-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    margin: 0 auto 14px;
    border: 1px solid #2b6a9d;
    border-radius: 15px;
    background: rgba(15, 72, 119, 0.18);
    margin-bottom: 13px;
    color: #4bb4ff;
    font-size: 1.5rem;
}

.empty-state-icon i {
    margin: 0;
    font-size: 1.65rem;
}

.wall-empty-state .empty-state-icon i {
    margin: 0;
    font-size: 1.65rem;
}

.content-page {
    max-width: 920px;
    margin: 30px auto 0;
}

.content-icon {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(65, 166, 247, 0.48);
    border-radius: 18px;
    color: #4bb4ff;
    background: rgba(25, 144, 238, 0.13);
    font-size: 1.7rem;
    box-shadow: inset 0 0 24px rgba(34, 155, 255, 0.08);
}

.content-page h1 {
    margin: 2px 0 10px;
    color: #fff;
    font-size: clamp(2rem, 5vw, 3.1rem);
    font-weight: 900;
    line-height: 1.03;
    letter-spacing: -0.035em;
}

.content-page .page-lead {
    max-width: 760px;
    margin: 0;
    color: #b9ccdd !important;
    font-size: 1.02rem;
    line-height: 1.7;
}

.terms-summary {
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.content-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.content-card {
    position: relative;
    overflow: hidden;
    padding: 24px;
    border: 1px solid rgba(50, 111, 164, 0.33);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(6, 23, 40, 0.96), rgba(4, 16, 29, 0.98));
}

.content-card-wide {
    grid-column: 1 / -1;
}

.content-card h2 {
    margin: 0 0 9px;
    color: #f5f9fd;
    font-size: 1.12rem;
    font-weight: 850;
}

.content-card p {
    margin: 0;
    color: #99aec2;
    line-height: 1.72;
}

.content-card p + p {
    margin-top: 12px;
}

.terms-summary > div {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    column-gap: 10px;
    align-items: center;
    padding: 15px;
    border: 1px solid rgba(50, 108, 159, 0.33);
    border-radius: 13px;
    background: rgba(5, 20, 35, 0.93);
}

.terms-summary i {
    grid-row: 1 / span 2;
    color: #37aaff;
    font-size: 1.2rem;
}

.terms-summary strong {
    color: #eef7ff;
    font-size: 0.84rem;
}

.terms-summary span {
    color: #7f98ae;
    font-size: 0.72rem;
}

.rules-page-v2 {
    padding-bottom: 18px;
}

.privacy-page-v2 {
    padding-bottom: 18px;
}

.terms-page-v2 {
    padding-bottom: 18px;
}

.rules-strip span {
    text-align: center;
}

.privacy-strip span {
    text-align: center;
}

.rules-intro-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
    padding: 20px;
    border: 1px solid rgba(53, 130, 196, 0.4);
    border-radius: 15px;
    background: linear-gradient(135deg, rgba(8, 34, 58, 0.97), rgba(4, 17, 31, 0.97));
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
}

.privacy-explainer {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
    padding: 20px;
    border: 1px solid rgba(53, 130, 196, 0.4);
    border-radius: 15px;
    background: linear-gradient(135deg, rgba(8, 34, 58, 0.97), rgba(4, 17, 31, 0.97));
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
    border-color: rgba(53, 153, 231, 0.5);
}

.terms-callout {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
    padding: 20px;
    border: 1px solid rgba(53, 130, 196, 0.4);
    border-radius: 15px;
    background: linear-gradient(135deg, rgba(8, 34, 58, 0.97), rgba(4, 17, 31, 0.97));
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
}

.rules-intro-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(52, 164, 249, 0.42);
    border-radius: 13px;
    color: #42adff;
    background: rgba(28, 136, 222, 0.12);
    font-size: 1.3rem;
}

.privacy-explainer-badge {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(52, 164, 249, 0.42);
    border-radius: 13px;
    color: #42adff;
    background: rgba(28, 136, 222, 0.12);
    font-size: 1.3rem;
}

.rules-intro-card strong {
    display: block;
    margin-bottom: 4px;
    color: #f7fbff;
    font-size: 1rem;
}

.terms-callout strong {
    display: block;
    margin-bottom: 4px;
    color: #f7fbff;
    font-size: 1rem;
}

.rules-intro-card p {
    margin: 0;
    color: #9cb2c7;
    line-height: 1.65;
}

.privacy-explainer p {
    margin: 0;
    color: #9cb2c7;
    line-height: 1.65;
}

.terms-callout span {
    margin: 0;
    color: #9cb2c7;
    line-height: 1.65;
}

.rules-card-grid {
    gap: 14px;
}

.rules-signature {
    margin-top: 18px;
}

.privacy-signature {
    margin-top: 18px;
}

.terms-signature {
    margin-top: 18px;
}

.privacy-explainer h2 {
    margin: 2px 0 8px;
    color: #f5f9ff;
    font-size: 1.2rem;
    font-weight: 850;
}

.privacy-explainer strong {
    color: #dff1ff;
}

.terms-summary-v2 > div {
    min-height: 88px;
}

.terms-callout > i {
    color: #44b4ff;
    font-size: 1.65rem;
}

.terms-callout > div {
    display: flex;
    flex-direction: column;
}

.terms-stack .policy-section:nth-child(odd) {
    background: linear-gradient(135deg, rgba(6, 23, 40, 0.98), rgba(4, 17, 31, 0.98));
}

.empty-state-action {
    margin-top: 16px;
}

.empty-state-copy h2 {
    margin: 0;
    font-size: 1.32rem;
}

.empty-state-copy p {
    margin: 6px 0 0;
    color: #91a8c3;
    font-size: 0.86rem;
}

body > .site-footer {
    position: relative;
    z-index: 1;
}

.rules-enforcement {
    overflow: hidden;
    border: 1px solid #344860;
}

.rules-enforcement-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border: 1px solid #497eaf;
    border-radius: 12px;
    background: rgba(57, 125, 195, 0.15);
    color: #83bfff;
    font-size: 1.35rem;
    line-height: 1;
}

.rules-enforcement-title {
    flex: 1;
    min-width: 0;
}

.rules-enforcement-title h2 {
    margin: 0 0 5px;
    color: #f1f5fb;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.35;
}

.rules-enforcement-title p {
    margin: 0;
    color: #99aec6;
    font-size: 0.85rem;
}

.rules-enforcement-body p {
    margin-bottom: 16px;
    color: #c2d0e0;
}


/* ========================================================================
   COMPONENTS
   Source: components.css
   ======================================================================== */

/* ============================================================
   09. General components and utilities
   ============================================================ */

.icon-button {
    color: #d7e6f8;
    border: 0;
    background: transparent;
    text-decoration: none;
    position: relative;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 8px;
}

.standalone-panel {
    color: white;
    border: 1px solid #2c4c68;
    background: #071522;
    max-width: 680px;
    margin: 30px auto;
    padding: 24px;
    border-radius: 14px;
}

.page-kicker {
    margin-bottom: 8px;
    color: #2da5ff;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.page-lead {
    color: #d7e6f4 !important;
    font-size: 1.04rem;
}

.page-meta {
    margin-top: -6px;
    color: #718aa3 !important;
    font-size: 0.82rem;
}

.story-strip {
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.story-strip span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 50px;
    padding: 10px 14px;
    color: #bdd0e2;
    border: 1px solid rgba(51, 108, 158, 0.34);
    border-radius: 12px;
    background: rgba(6, 21, 37, 0.9);
    font-size: 0.8rem;
    font-weight: 700;
}

.story-strip i {
    color: #37aaff;
}

.policy-section h2 {
    margin: 0 0 9px;
    color: #f5f9fd;
    font-size: 1.12rem;
    font-weight: 850;
}

.policy-section p {
    margin: 0;
    color: #99aec2;
    line-height: 1.72;
}

.section-number {
    display: inline-block;
    margin-bottom: 14px;
    color: #2ca5ff;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.story-highlight {
    border-color: rgba(45, 155, 243, 0.52);
    background: radial-gradient(circle at 100% 0%, rgba(31, 144, 235, 0.16), transparent 34%),
        linear-gradient(180deg, rgba(8, 29, 49, 0.98), rgba(4, 16, 29, 0.98));
}

.signature-card {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    padding: 20px;
    border: 1px solid rgba(45, 151, 238, 0.45);
    border-radius: 15px;
    background: rgba(8, 31, 54, 0.94);
}

.signature-mark {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(135deg, #0f7fe2, #25adff);
}

.signature-card > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.signature-card strong {
    color: #f4f9ff;
}

.signature-card span {
    color: #8fa6bb;
    font-size: 0.83rem;
}

.policy-meta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    color: #7392ae;
    font-size: 0.78rem;
}

.policy-jump {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding: 12px;
    border: 1px solid rgba(54, 108, 157, 0.32);
    border-radius: 13px;
    background: rgba(4, 16, 29, 0.9);
}

.policy-jump a {
    padding: 7px 10px;
    color: #9eb5ca;
    border: 1px solid transparent;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.76rem;
    font-weight: 700;
}

.policy-jump a:hover {
    color: #fff;
    border-color: rgba(46, 157, 246, 0.35);
    background: rgba(31, 142, 232, 0.08);
}

.policy-stack {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.policy-section {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 15px;
    padding: 20px;
    scroll-margin-top: 90px;
    border: 1px solid rgba(48, 101, 148, 0.3);
    border-radius: 14px;
    background: rgba(5, 19, 34, 0.95);
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.policy-section-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #36a8ff;
    background: rgba(26, 135, 224, 0.11);
    font-size: 1.05rem;
}

.policy-emphasis {
    border-color: rgba(46, 159, 245, 0.48);
    background: linear-gradient(135deg, rgba(8, 35, 59, 0.98), rgba(5, 20, 35, 0.98));
}

.numbered-policy .policy-section {
    grid-template-columns: 46px minmax(0, 1fr);
}

.policy-number {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(44, 155, 245, 0.4);
    border-radius: 11px;
    color: #35a9ff;
    background: rgba(20, 119, 201, 0.1);
    font-size: 0.72rem;
    font-weight: 900;
}

.policy-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 18px;
    padding: 16px 18px;
    border: 1px solid rgba(225, 179, 70, 0.32);
    border-radius: 13px;
    color: #9caabd;
    background: rgba(71, 52, 13, 0.16);
    font-size: 0.8rem;
}

.policy-notice > i {
    margin-top: 2px;
    color: #e4b84b;
}

.policy-notice > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.policy-notice strong {
    color: #f2dfad;
}

.static-page-polished {
    padding-bottom: 18px;
}

.rule-card {
    padding-top: 52px;
}

.rule-card .rule-number {
    position: absolute;
    top: 20px;
    right: 20px;
    color: rgba(121, 173, 218, 0.55);
    font-size: 0.73rem;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.rule-icon {
    position: absolute;
    top: 17px;
    left: 20px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #39aaff;
    background: rgba(29, 133, 218, 0.12);
}

.rule-card-danger {
    border-color: rgba(225, 90, 90, 0.3);
}

.rule-card-danger .rule-icon {
    color: #ff7373;
    background: rgba(212, 62, 62, 0.1);
}

.rule-card-featured {
    border-color: rgba(49, 159, 246, 0.5);
    background: radial-gradient(circle at 100% 0%, rgba(37, 151, 242, 0.12), transparent 30%),
        linear-gradient(180deg, rgba(7, 28, 48, 0.98), rgba(4, 16, 29, 0.98));
}

.policy-section:hover {
    transform: translateY(-1px);
    border-color: rgba(48, 151, 233, 0.48);
    background: rgba(7, 25, 43, 0.98);
}

.home-stack {
    width: min(100%, 940px);
    max-width: 940px;
    margin: 0 auto;
    position: relative;
    margin-inline: auto;
}

.form-response {
    display: none;
    width: 100%;
    margin-bottom: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.4;
}

.form-response.is-error {
    display: block;
    color: #ff7b88 !important;
    background: #3a1118 !important;
    border: 1px solid #c93145 !important;
}

.form-response.is-success {
    display: block;
    color: #72e6a7 !important;
    background: #10291f !important;
    border: 1px solid #248c5a !important;
}

.page-layout {
    position: relative;
    max-width: none;
    left: 50%;
    transform: translateX(-50%);
}

.page-layout > .container-fluid {
    width: 100%;
    max-width: none;
}

.page-layout-inner {
    width: 100%;
    max-width: 1380px;
    margin: 0 auto;
}

.page-main {
    width: 100%;
    max-width: none;
    min-width: 0;
}

.page-main > * {
    max-width: 100%;
}

.page-layout .home-stack {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body::before {
    content: none !important;
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: linear-gradient(
            to right,

            transparent 0,

            transparent
                calc(
                    var(--brick-width)
                    - var(--brick-joint)
                ),

            var(--mortar-shadow)
                calc(
                    var(--brick-width)
                    - var(--brick-joint)
                ),

            var(--mortar-shadow)
                calc(
                    var(--brick-width)
                    - var(--brick-joint)
                    + 1px
                ),

            var(--mortar)
                calc(
                    var(--brick-width)
                    - var(--brick-joint)
                    + 1px
                ),

            var(--mortar)
                calc(
                    var(--brick-width)
                    - 2px
                ),

            var(--mortar-light)
                calc(
                    var(--brick-width)
                    - 2px
                ),

            var(--mortar-light)
                var(--brick-width)
        );
    background-size: var(--brick-width)

        calc(
            var(--brick-height) * 2
        );
    background-repeat: repeat;
    background-position: 0 0;
    -webkit-mask-image: repeating-linear-gradient(
            to bottom,

            #000 0,

            #000
                calc(
                    var(--brick-height)
                    - var(--brick-joint)
                ),

            transparent
                calc(
                    var(--brick-height)
                    - var(--brick-joint)
                ),

            transparent
                var(--brick-height),

            transparent
                var(--brick-height),

            transparent
                calc(
                    var(--brick-height) * 2
                )
        );
    mask-image: repeating-linear-gradient(
            to bottom,

            #000 0,

            #000
                calc(
                    var(--brick-height)
                    - var(--brick-joint)
                ),

            transparent
                calc(
                    var(--brick-height)
                    - var(--brick-joint)
                ),

            transparent
                var(--brick-height),

            transparent
                var(--brick-height),

            transparent
                calc(
                    var(--brick-height) * 2
                )
        );
    display: block;
    background: none !important;
}

body::after {
    content: none !important;
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: linear-gradient(
            to right,

            transparent 0,

            transparent
                calc(
                    var(--brick-width)
                    - var(--brick-joint)
                ),

            var(--mortar-shadow)
                calc(
                    var(--brick-width)
                    - var(--brick-joint)
                ),

            var(--mortar-shadow)
                calc(
                    var(--brick-width)
                    - var(--brick-joint)
                    + 1px
                ),

            var(--mortar)
                calc(
                    var(--brick-width)
                    - var(--brick-joint)
                    + 1px
                ),

            var(--mortar)
                calc(
                    var(--brick-width)
                    - 2px
                ),

            var(--mortar-light)
                calc(
                    var(--brick-width)
                    - 2px
                ),

            var(--mortar-light)
                var(--brick-width)
        );
    background-size: var(--brick-width)

        calc(
            var(--brick-height) * 2
        );
    background-repeat: repeat;
    background-position: calc(
            var(--brick-width) / 2
        )

        var(--brick-height);
    -webkit-mask-image: repeating-linear-gradient(
            to bottom,

            transparent 0,

            transparent
                var(--brick-height),

            #000
                var(--brick-height),

            #000
                calc(
                    (var(--brick-height) * 2)
                    - var(--brick-joint)
                ),

            transparent
                calc(
                    (var(--brick-height) * 2)
                    - var(--brick-joint)
                ),

            transparent
                calc(
                    var(--brick-height) * 2
                )
        );
    mask-image: repeating-linear-gradient(
            to bottom,

            transparent 0,

            transparent
                var(--brick-height),

            #000
                var(--brick-height),

            #000
                calc(
                    (var(--brick-height) * 2)
                    - var(--brick-joint)
                ),

            transparent
                calc(
                    (var(--brick-height) * 2)
                    - var(--brick-joint)
                ),

            transparent
                calc(
                    var(--brick-height) * 2
                )
        );
    display: block;
    background: none !important;
}


/* ========================================================================
   COMPOSER
   Source: composer.css
   ======================================================================== */

/* ============================================================
   10. Compact rant composer — one visual field, no text overlap

   The textarea is allowed to grow to its full scrollHeight.
   The bottom row is in normal flow rather than covering text.
   Existing jQuery .autogrow logic can apply an inline height.
   Do not add a CSS max-height to .rant-textarea.
   ============================================================ */

.rant-composer {
    overflow: hidden;
    border: 1px solid #2e6ca4;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(8, 26, 52, 0.97), rgba(3, 15, 32, 0.98));
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.3);
}

/* Restore the compact toolbar controls as styled form elements. */
.rant-composer .composer-toolbar {
    color: #edf6ff;
}

.rant-composer .composer-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 9px;
}

.rant-composer .composer-select {
    width: auto;
    max-width: 100%;
    min-width: 0;
    min-height: 30px;
    height: 30px;
    padding-top: 3px;
    padding-bottom: 3px;
    font-size: 0.75rem;
    color: #edf6ff;
    border: 1px solid #35699b;
    border-radius: 8px;
    background-color: #0a2342;
    font-weight: 650;
}

.rant-composer .identity-switch {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
    white-space: nowrap;
    font-size: 0.76rem;
    color: #edf5ff;
}

.rant-composer .identity-switch .form-check-input {
    width: 2.35em;
    height: 1.25em;
    margin: 0;
    border-color: #53708c;
    background-color: #92a4b7;
}

.rant-composer .identity-switch .form-check-input:checked {
    border-color: #178fff;
    background-color: #178fff;
}

.rant-composer .composer-body {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    margin: 0 10px;
    border: 1px solid #315775;
    border-radius: 9px;
    background: rgba(4, 17, 35, 0.92);
    overflow: hidden;
}

.rant-composer .composer-body:focus-within {
    border-color: var(--wall-blue);
    box-shadow: 0 0 0 0.16rem rgba(20, 151, 255, 0.12);
}

.rant-composer .composer-body .rant-textarea {
    display: block;
    position: static;
    width: 100%;
    height: 42px;
    min-height: 42px;
    max-height: none;
    margin: 0;
    padding: 10px 12px 6px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #eef7ff;
    box-shadow: none;
    resize: none;
    overflow-y: hidden;
    line-height: 1.45;
    font-size: 0.88rem;
    box-sizing: border-box;
}

.rant-composer .composer-body .rant-textarea:focus {
    outline: none;
    border: 0;
    background: transparent;
    color: #ffffff;
    box-shadow: none;
}

.rant-composer .composer-body .rant-textarea::placeholder {
    color: #839bb9;
}

/* The footer visually belongs to the textarea, but never overlaps it. */
.rant-composer .composer-bottom-row {
    position: static;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    width: 100%;
    min-width: 0;
    padding: 3px 7px 6px;
    margin: 0;
    border: 0;
    background: transparent;
}

.rant-composer .composer-bottom-row .composer-counter {
    position: static;
    inset: auto;
    transform: none;
    margin: 0;
    color: #899db4;
    font-size: 0.69rem;
    white-space: nowrap;
}

.rant-composer .composer-bottom-row .composer-encouragement {
    position: static;
    inset: auto;
    transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #91a0b1;
    opacity: 0.58;
    font-size: 0.82rem;
    font-weight: 400;
    font-style: italic;
    line-height: 1.3;
    text-align: center;
    pointer-events: none;
}

.rant-composer .composer-bottom-row .composer-encouragement span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.rant-composer .composer-bottom-row .composer-encouragement i {
    flex-shrink: 0;
    color: #d388a0;
    font-size: 0.7rem;
}

.rant-composer .composer-bottom-row .post-rant-btn {
    position: static;
    inset: auto;
    transform: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 0;
    min-height: 26px;
    height: auto;
    margin: 0;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
    cursor: pointer;
    color: #ffffff;
    border: 1px solid #2e9bff;
    background: linear-gradient(180deg, #169cff, #0a70ee);
    box-shadow: 0 3px 10px rgba(0, 114, 255, 0.20);
}

.rant-composer .composer-bottom-row .post-rant-btn:hover,
.rant-composer .composer-bottom-row .post-rant-btn:focus-visible {
    color: #ffffff;
    background: linear-gradient(180deg, #34aaff, #1380fa);
    border-color: #4ab0ff;
}

.rant-composer .composer-bottom-row .post-rant-btn .d-none {
    display: none !important;
}

.rant-composer .composer-footer {
    padding: 0 10px;
}

.rant-composer .composer-footer .form-response:empty {
    display: none;
}

.rant-composer .composer-support {
    padding: 5px 9px;
}

.rant-composer .composer-support-help {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    text-align: center;
    font-size: 0.73rem;
}

/* Responsive rules: (min-width: 1200px) and (max-width: 1399.98px) */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    /* ============================================================
       02. Header, navigation, search, and menus
       ============================================================ */

    .header-shell {
        gap: 10px;
    }

    .main-nav .nav-link {
        gap: 5px;
        padding: 9px 7px;
        font-size: 0.8rem;
    }

    .header-search {
        width: 135px;
    }

    .header-account-toggle {
        max-width: 125px;
    }

    .brand-text {
        font-size: 0.98rem;
    }

}

/* Responsive rules: (max-width: 1199.98px) */
@media (max-width: 1199.98px) {
    /* ============================================================
       02. Header, navigation, search, and menus
       ============================================================ */

    .header-shell {
        gap: 12px;
    }

    .header-search {
        width: 210px;
    }

}

/* Responsive rules: (max-width: 991.98px) */
@media (max-width: 991.98px) {
    /* ============================================================
       01. Base and design tokens
       ============================================================ */

    :root {
        --wall-bg-width: 1160px;
    }

    body {
        background-attachment: scroll, scroll;
    }

    /* ============================================================
       02. Header, navigation, search, and menus
       ============================================================ */

    .header-shell {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .brand-logo {
        width: 250px;
    }

    .site-header .header-shell {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
    }

    .site-header .brand-logo {
        width: 46px;
        height: 46px;
        max-width: 46px;
        max-height: 46px;
        flex-basis: 46px;
    }

    .site-header .brand-text {
        font-size: 1.16rem;
    }

    /* ============================================================
       03. Page layout, feed navigation, and statistics
       ============================================================ */

    .rantitude-card {
        position: static;
    }

    .page-sidebar {
        position: static;
        max-width: none;
        margin-left: 0;
    }

    /* ============================================================
       09. General components and utilities
       ============================================================ */

    .page-layout {
    }

    .page-layout-inner {
        max-width: 760px;
    }

}

/* Responsive rules: (max-width: 767.98px) */
@media (max-width: 767.98px) {
    /* ============================================================
       01. Base and design tokens
       ============================================================ */

    body {
        background-attachment: scroll;
    }

    /* ============================================================
       02. Header, navigation, search, and menus
       ============================================================ */

    .site-header {
        min-height: 66px;
    }

    .header-shell {
        min-height: 66px;
        gap: 10px;
    }

    .brand-logo {
        width: 245px;
        max-height: 64px;
    }

    /* ============================================================
       03. Page layout, feed navigation, and statistics
       ============================================================ */

    .site-main {
        padding-top: 24px;
    }

    .feed-shell {
        width: min(100% - 22px, 900px);
    }

    .hero-copy h1 {
        font-size: 2rem;
    }

    .hero-copy p {
        font-size: 0.9rem;
    }

    .community-stats {
        width: 100%;
        gap: 8px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 8px;
        overflow: hidden;
        background: rgba(53, 105, 151, 0.30);
    }

    .stat-item {
        gap: 7px;
        justify-content: flex-start;
        min-height: 70px;
        padding: 12px 15px;
        background: rgba(4, 17, 31, 0.97);
    }

    .stat-item > i {
        font-size: 1.3rem;
        width: 28px;
        text-align: center;
    }

    .stat-item strong {
        font-size: 1rem;
    }

    .stat-item span {
        font-size: 0.62rem;
    }

    .feed-tabs {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 3px;
        display: flex;
        scrollbar-width: none;
    }

    .feed-tab {
        white-space: nowrap;
        min-width: 128px;
        flex: 0 0 auto;
    }

    .content-hero {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 22px 18px;
    }

    .wall-hero {
        margin-bottom: 18px;
        padding: 28px 19px;
        border-radius: 16px;
        min-height: 285px;
    }

    .wall-hero-kicker {
        font-size: 0.62rem;
        min-height: 34px;
        margin-bottom: 11px;
        padding: 7px 10px;
        white-space: normal;
        text-align: center;
    }

    .wall-hero h1 {
        font-size: clamp(1.85rem, 8vw, 2.45rem);
        line-height: 1.05;
    }

    .wall-hero > p {
        font-size: 0.9rem;
    }

    .stat-divider {
        display: none;
    }

    .stat-item:nth-of-type(5) > i {
        width: 28px;
        text-align: center;
    }

    .wall-hero-lead {
        font-size: 0.9rem;
        margin-top: 11px;
        line-height: 1.5;
    }

    .community-stats .stat-item {
        min-height: 72px;
        border-right: 1px solid rgba(49, 89, 125, 0.58);
        border-bottom: 1px solid rgba(49, 89, 125, 0.58);
        padding: 10px;
        justify-content: flex-start;
    }

    .community-stats .stat-item:nth-child(2n) {
        border-right: 0;
    }

    .community-stats .stat-item:nth-last-child(-n + 2) {
        border-bottom: 0;
    }

    .feed-tabs::-webkit-scrollbar {
        display: none;
    }

    .wall-hero::after {
        right: -28px;
        bottom: -32px;
        font-size: 8rem;
    }

    .wall-hero-guest-note {
        width: 100%;
        max-width: 100%;
        margin-top: 15px;
        padding: 9px 11px;
    }

    /* ============================================================
       04. Rant cards, voting, and avatars
       ============================================================ */

    .rant-body {
        margin-left: 0;
    }

    .rant-actions {
        margin-left: 0;
    }

    .comment-form-avatar {
        align-self: flex-start;
    }

    .login-to-rant-card {
        align-items: stretch;
        flex-direction: column;
    }

    /* ============================================================
       05. Support, comments, and nested replies
       ============================================================ */

    .comments-panel {
        margin-left: 12px;
        margin-right: 12px;
    }

    .reply-children {
        margin-left: 9px;
        padding-left: 18px;
    }

    .reply-children > .comment-item::before {
        left: -18px;
        width: 12px;
    }

    .comment-form {
        flex-wrap: wrap;
    }

    .comment-input-wrap {
        flex-basis: calc(100% - 40px);
    }

    .btn-comment {
        margin-left: auto;
    }

    .comment-item {
        --tree-avatar: 28px;
        --tree-indent: 34px;
        --tree-child-pad-top: 11px;
    }

    /* ============================================================
       08. Content pages, empty states, and footer
       ============================================================ */

    .footer-shell {
        padding-top: 18px;
        padding-bottom: 18px;
        flex-direction: column;
    }

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

    .legal-page {
        margin-top: 22px;
        padding: 24px 18px;
        border-radius: 15px;
    }

    .content-page {
        margin-top: 18px;
    }

    .content-icon {
        width: 52px;
        height: 52px;
        border-radius: 15px;
        font-size: 1.4rem;
    }

    .terms-summary {
        grid-template-columns: 1fr;
    }

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

    .content-card-wide {
        grid-column: auto;
    }

    .rules-intro-card {
        padding: 16px;
    }

    .privacy-explainer {
        padding: 16px;
    }

    .terms-callout {
        padding: 16px;
    }

    .rules-strip span {
        justify-content: flex-start;
        text-align: left;
    }

    .privacy-strip span {
        justify-content: flex-start;
        text-align: left;
    }

    /* ============================================================
       09. General components and utilities
       ============================================================ */

    .story-strip {
        grid-template-columns: 1fr;
    }

    .policy-section {
        grid-template-columns: 40px minmax(0, 1fr);
        padding: 16px;
    }

    .numbered-policy .policy-section {
        grid-template-columns: 40px minmax(0, 1fr);
        padding: 16px;
    }

    .policy-section-icon {
        width: 36px;
        height: 36px;
    }

    .policy-number {
        width: 36px;
        height: 36px;
    }

    .policy-jump {
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .policy-jump a {
        white-space: nowrap;
    }

    .rule-card {
        padding-top: 50px;
    }

    .home-stack {
        max-width: 100%;
        width: min(100%, 680px);
    }

    body::before {
        position: absolute;
    }

    body::after {
        position: absolute;
    }

}

/* Responsive rules: (max-width: 575.98px) */
@media (max-width: 575.98px) {
    /* ============================================================
       01. Base and design tokens
       ============================================================ */

    :root {
        --wall-bg-width: 860px;
    }

    body {
        background-attachment: scroll, scroll;
    }

    /* ============================================================
       02. Header, navigation, search, and menus
       ============================================================ */

    .site-header {
        min-height: 70px;
    }

    .header-shell {
        min-height: 66px;
        gap: 8px;
        padding-left: 12px;
        padding-right: 12px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .brand-logo {
        width: 36px;
        max-width: 62vw;
        max-height: 58px;
        height: 36px;
    }

    .header-right {
        gap: 6px;
    }

    .site-header .header-shell {
        gap: 7px;
    }

    .site-header .brand-link {
        gap: 6px;
    }

    .site-header .brand-logo {
        width: 38px;
        height: 38px;
        max-width: 38px;
        max-height: 38px;
        flex-basis: 38px;
    }

    .site-header .brand-text {
        font-size: .97rem;
    }

    .site-header .header-right {
        gap: 6px;
    }

    .feeling-feed-header {
        margin-bottom: 18px;
    }

    .excluded-words-panel-header {
        padding: 18px;
    }

    .brand-text {
        font-size: 0.93rem;
    }

    .mobile-nav {
        padding-left: 16px;
        padding-right: 16px;
    }

    .header-account-toggle {
        width: 40px;
        min-height: 40px;
        padding: 0;
    }

    .header-account-label {
        display: none;
    }

    .header-account-chevron {
        display: none;
    }

    /* ============================================================
       03. Page layout, feed navigation, and statistics
       ============================================================ */

    .wall-hero-guest-note {
        border-radius: 10px;
    }

    .community-stats {
        margin-top: 14px;
    }

    .page-layout .wall-hero-content {
        padding-left: 18px;
        padding-right: 18px;
    }

    .feed-filter-banner {
        gap: 10px;
        padding: 12px;
        margin-bottom: 15px;
    }

    .feed-filter-icon {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
        font-size: 1.3rem;
    }

    .feed-filter-title {
        font-size: .86rem;
    }

    .feed-filter-description {
        font-size: .73rem;
    }

    .feed-filter-clear {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
    }

    /* ============================================================
       04. Rant cards, voting, and avatars
       ============================================================ */

    .comment-item > .comment-line > .comment-avatar {
        flex-basis: 28px;
        width: 28px;
        height: 28px;
        font-size: 0.72rem;
    }

    .reply-form .reply-form-avatar {
        flex-basis: 26px;
        width: 26px;
        height: 26px;
        font-size: 0.7rem;
    }

    .signup-avatar-picker {
        gap: 12px;
        padding: 12px;
    }

    .signup-avatar-preview {
        width: 54px;
        height: 54px;
        font-size: 1.35rem;
    }

    .signup-avatar-hex {
        font-size: 0.8rem;
    }

    .avatar-picker {
        padding: 12px;
    }

    .avatar-color-square {
        height: 125px;
    }

    .avatar-picker-preview {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
        font-size: 1.2rem;
    }

    .avatar-hue-slider {
        height: 20px;
    }

    .avatar-hex-field input {
        font-size: 16px;
    }

    .avatar-picker-toggle {
        gap: 9px;
        min-height: 62px;
        padding: 9px 10px;
    }

    .compact-avatar-picker .avatar-picker-preview {
        width: 39px;
        height: 39px;
        flex-basis: 39px;
        font-size: 1rem;
    }

    .avatar-picker-toggle-info strong {
        font-size: .8rem;
    }

    .avatar-picker-toggle-info small {
        font-size: .67rem;
    }

    .avatar-picker-toggle-hex {
        font-size: .67rem;
    }

    .compact-avatar-picker .avatar-color-square {
        height: 120px;
    }

    .avatar-picker-details-inner {
        padding: 11px;
    }

    .feeling-feed-heading {
        gap: 12px;
    }

    .feeling-feed-emoji {
        font-size: 2.5rem;
    }

    .feeling-feed-heading h1 {
        font-size: 1.35rem;
    }

    /* ============================================================
       05. Support, comments, and nested replies
       ============================================================ */

    .comment-item > .comment-line {
        gap: 8px;
    }

    .comment-item[data-visual-depth="0"] > .reply-children {
        margin-left: 9px;
        padding-left: 9px;
    }

    .comment-item[data-visual-depth="1"] > .reply-children {
        margin-left: 9px;
        padding-left: 9px;
    }

    .comment-item[data-visual-depth="2"] > .reply-children {
        margin-left: 9px;
        padding-left: 9px;
    }

    .comment-item[data-visual-depth="3"] > .reply-children {
        margin-left: 9px;
        padding-left: 9px;
    }

    .comment-item[data-visual-depth="4"] > .reply-children {
        margin-left: 0;
        padding-left: 0;
    }

    .comment-body {
        font-size: 0.84rem;
    }

    .comment-content > .reply-quote {
        padding: 7px 9px;
    }

    .comment-list > .comment-item {
        padding: 14px 0;
    }

    .reply-form {
        padding: 10px;
        margin-top: 10px;
    }

    .reply-form .reply-entry-row {
        gap: 7px;
    }

    .reply-form .reply-input-wrap textarea {
        min-height: 42px;
        padding: 10px 10px;
        font-size: 0.82rem;
    }

    .reply-form .reply-input-wrap .comment-counter {
        position: static;
        display: block;
        text-align: right;
        margin-top: 4px;
        font-size: 0.66rem;
    }

    .reply-form .reply-form-footer {
        align-items: stretch;
        gap: 12px;
    }

    .reply-form .reply-form-buttons {
        width: 100%;
        justify-content: flex-end;
    }

    .reply-form .reply-form-buttons .btn {
        font-size: 0.74rem;
        padding: 8px 10px;
    }

    /* ============================================================
       06. Authentication, modals, and profiles
       ============================================================ */

    .auth-modal-card {
        padding: 26px 20px 22px;
        border-radius: 16px;
    }

    .auth-modal-heading h2 {
        font-size: 1.4rem;
    }

    .btn-login {
        min-width: 0;
        height: 38px;
        padding-left: 10px;
        padding-right: 10px;
        font-size: 0.76rem;
    }

    .btn-signup {
        min-width: 0;
        height: 38px;
        padding-left: 10px;
        padding-right: 10px;
        font-size: 0.76rem;
    }

    .signup-color-picker-row {
        gap: 9px;
    }

    .signup-color-input {
        width: 48px;
        height: 44px;
        flex-basis: 48px;
    }

    #signupModal .modal-dialog {
        margin-top: 12px;
        margin-bottom: 12px;
    }

    #signupModal .modal-content {
        max-height: calc(100dvh - 24px);
        overflow-y: auto;
    }

    /* ============================================================
       07. Excluded Words and filters
       ============================================================ */

    .excluded-words-panel-body {
        padding: 18px;
    }

    .excluded-words-panel-footer {
        flex-direction: column;
        align-items: stretch;
        padding: 18px;
    }

    .excluded-words-save {
        width: 100%;
    }

    .excluded-words-input-group button {
        min-width: 76px;
        padding: 0 12px;
    }

    .excluded-words-hint {
        align-items: flex-start;
    }

    .excluded-words-intro {
        padding: 18px;
    }

    /* ============================================================
       09. General components and utilities
       ============================================================ */

    .page-layout {
    }

}

/* Responsive rules: (max-width: 520px) */
@media (max-width: 520px) {
    /* ============================================================
       02. Header, navigation, search, and menus
       ============================================================ */

    .brand-logo {
        width: 220px;
        max-height: 60px;
    }

    /* ============================================================
       03. Page layout, feed navigation, and statistics
       ============================================================ */

    .hero-copy h1 {
        font-size: 1.65rem;
    }

    .community-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .stat-divider {
        display: none;
    }

    .stat-item {
        justify-content: center;
        width: 100%;
        margin: 0;
    }

    .wall-hero-kicker {
        font-size: 0.65rem;
        letter-spacing: 0.08em;
    }

    .wall-hero-guest-note {
        align-items: flex-start;
        text-align: left;
        line-height: 1.4;
    }

    .community-stats .stat-item {
        justify-content: flex-start;
        padding-inline: 12px;
    }

    .community-stats .stat-icon {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    /* ============================================================
       04. Rant cards, voting, and avatars
       ============================================================ */

    .rant-main {
        padding: 12px;
    }

    .letter-avatar {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    .comment-avatar {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
    }

    .comment-form-avatar {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
    }

    .reply-form-avatar {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
        align-self: flex-start;
    }

    .feeling-badge {
        width: 31px;
        height: 31px;
        flex-basis: 31px;
        border-radius: 9px;
    }

    .feeling-badge::before {
        inset: 3px;
        border-radius: 6px;
    }

    .feeling-emoji {
        font-size: 1.08rem;
    }

    .rant-card .feeling-badge {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
        margin-left: 4px;
        border-radius: 10px;
    }

    .rant-card .feeling-badge::before {
        width: 28px;
        height: 22px;
    }

    .rant-card .feeling-badge::after {
        bottom: 4px;
        width: 20px;
        height: 6px;
    }

    .rant-card .feeling-emoji {
        font-size: 1.18rem;
    }

    .rant-avatar-wrap {
        width: 44px;
        height: 46px;
        flex-basis: 44px;
    }

    .rant-avatar-wrap .letter-avatar {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    .avatar-feeling {
        right: -1px;
        bottom: 0;
        width: 24px;
        height: 24px;
        font-size: 1.02rem;
    }

    .avatar-feeling::before {
        width: 28px;
        height: 22px;
    }

    /* ============================================================
       05. Support, comments, and nested replies
       ============================================================ */

    .reply-entry-row {
        flex-wrap: wrap;
    }

    .reply-input-wrap {
        flex-basis: calc(100% - 38px);
    }

    /* ============================================================
       06. Authentication, modals, and profiles
       ============================================================ */

    .btn-login {
        min-width: auto;
        height: 38px;
        padding-inline: 10px;
    }

    .btn-signup {
        min-width: auto;
        height: 38px;
        padding-inline: 10px;
    }

}

/* Responsive rules: (max-width: 480px) */
@media (max-width: 480px) {
    /* ============================================================
       03. Page layout, feed navigation, and statistics
       ============================================================ */

    .wall-hero-auth-actions {
        gap: 8px;
    }

    .wall-hero-signup-btn {
        flex: 1 1 120px;
        padding: 9px 12px;
    }

    .wall-hero-login-btn {
        flex: 1 1 120px;
        padding: 9px 12px;
    }

}

/* Responsive rules: (max-width: 420px) */
@media (max-width: 420px) {
    /* ============================================================
       03. Page layout, feed navigation, and statistics
       ============================================================ */

    .wall-hero-kicker {
        font-size: 0.58rem;
        letter-spacing: 0.08em;
    }

    .community-stats .stat-icon {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
        font-size: 1.05rem;
    }

    .community-stats .stat-item strong {
        font-size: 1.08rem;
    }

    .community-stats .stat-item span:not(.stat-icon) {
        font-size: 0.62rem;
    }

    .wall-hero {
        min-height: 270px;
        padding: 25px 14px;
    }

    .wall-hero-guest-note {
        align-items: flex-start;
        text-align: left;
    }

    .wall-hero-guest-copy strong {
        font-size: 0.78rem;
    }

    .wall-hero-guest-copy small {
        font-size: 0.71rem;
    }

}

/* Responsive rules: (max-width: 390px) */
@media (max-width: 390px) {
    /* ============================================================
       04. Rant cards, voting, and avatars
       ============================================================ */

    .reply-form .reply-form-avatar {
        display: none;
    }

    /* ============================================================
       05. Support, comments, and nested replies
       ============================================================ */

    .reply-form .reply-entry-row {
        display: block;
    }

    .reply-form .reply-input-wrap {
        width: 100%;
    }

    .reply-form .reply-form-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .reply-form .reply-form-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .reply-form .reply-form-buttons .btn {
        width: 100%;
    }

}

/* Responsive rules: (max-width: 359.98px) */
@media (max-width: 359.98px) {
    /* ============================================================
       02. Header, navigation, search, and menus
       ============================================================ */

    .brand-text {
        font-size: 0.8rem;
    }

    .brand-link {
        gap: 6px;
    }

}

/* Responsive rules: (min-width: 992px) */
@media (min-width: 992px) {
    /* ============================================================
       03. Page layout, feed navigation, and statistics
       ============================================================ */

    .page-sidebar {
        position: sticky;
        top: 96px;
    }

    .page-sidebar > .rantitude-card {
        position: static;
        top: auto;
    }

}

/* Responsive rules: (min-width: 1600px) */
@media (min-width: 1600px) {
    /* ============================================================
       01. Base and design tokens
       ============================================================ */

    :root {
        --wall-bg-width: 1530px;
    }

}

/* Responsive rules: (prefers-reduced-motion: reduce) */
@media (prefers-reduced-motion: reduce) {
    /* ============================================================
       04. Rant cards, voting, and avatars
       ============================================================ */

    .avatar-picker-toggle-chevron {
        transition: none;
    }

    /* ============================================================
       05. Support, comments, and nested replies
       ============================================================ */

    .comment-item.new-comment-flash {
        animation-duration: 1ms;
    }

}


/* ========================================================================
   RANT DETAILS
   Source: rant-details.css
   ======================================================================== */

/* ============================================================
   TheRantItWall — Single Rant Page
   ============================================================ */

.rant-detail-page {
    width: 100%;
    padding: 12px 16px 60px;
}

.rant-detail-shell {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

/* Main enclosing panel */

.rant-detail-panel {
    overflow: visible;
    border: 1px solid rgba(59, 133, 199, 0.5);
    border-radius: 18px;
    background: #0b192a;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.38);
}

/* Top navigation bar */

.rant-detail-panel-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 24px;
    border-bottom: 1px solid #294460;
    border-radius: 18px 18px 0 0;
    background: #15283d;
}

.rant-detail-back {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #cee0f2;
    font-size: 0.85rem;
    font-weight: 650;
    text-decoration: none;
}

.rant-detail-back i {
    color: #60b6ff;
    transition: transform 0.18s ease;
}

.rant-detail-back:hover {
    color: #fff;
    text-decoration: none;
}

.rant-detail-back:hover i {
    transform: translateX(-4px);
}

.rant-detail-panel-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #a8c5e0;
    font-size: 0.78rem;
    font-weight: 700;
}

.rant-detail-panel-label i {
    color: #62b9ff;
}

/* Heading */

.rant-detail-header {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0;
    padding: 28px 24px;
    border-bottom: 1px solid #294460;
    background: linear-gradient(
        130deg,
        #122e4d,
        #0b1f36
    );
}

.rant-detail-heading-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    border: 1px solid #3475ae;
    border-radius: 14px;
    background: #193e62;
    color: #75c2ff;
    font-size: 1.7rem;
}

.rant-detail-header-copy {
    min-width: 0;
}

.rant-detail-eyebrow {
    display: block;
    margin-bottom: 6px;
    color: #78bdf4;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.rant-detail-header h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.45rem, 3vw, 2rem);
    font-weight: 850;
    letter-spacing: -0.035em;
}

.rant-detail-header p {
    margin: 8px 0 0;
    color: #aec4d9;
    font-size: 0.85rem;
    line-height: 1.6;
}

/* Conversation section */

.rant-detail-conversation {
    min-width: 0;
    padding: 22px 24px 24px;
    background: #0b192a;
}

.rant-detail-section-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 16px;
    padding: 13px 16px;
    border: 1px solid #2b4c6d;
    border-radius: 10px;
    background: #142a41;
}

.rant-detail-section-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #d9eafd;
    font-size: 0.82rem;
    font-weight: 750;
    letter-spacing: 0;
    text-transform: none;
}

.rant-detail-section-label i {
    color: #62b9ff;
    font-size: 1rem;
}

.rant-detail-thread-id {
    color: #9eb8d2;
    font-size: 0.75rem;
    font-weight: 650;
}

/* Existing rant card */

.rant-detail-featured {
    width: 100%;
    min-width: 0;
}

.rant-detail-featured > .rant-card {
    width: 100%;
    margin-bottom: 0 !important;
    border: 1px solid #315778;
    border-radius: 13px;
    background: #101f31;
    box-shadow: none;
}

/* Bottom footer inside the panel */

.rant-detail-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 18px 24px;
    border-top: 1px solid #294460;
    border-radius: 0 0 18px 18px;
    background: #14273b;
}

.rant-detail-footer-copy {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #a9bfd5;
    font-size: 0.82rem;
}

.rant-detail-footer-copy i {
    color: #60b6ff;
    font-size: 1.2rem;
}

.rant-detail-footer-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #77c2ff;
    font-size: 0.82rem;
    font-weight: 750;
    text-decoration: none;
}

.rant-detail-footer-link:hover {
    color: #fff;
    text-decoration: none;
}

.rant-detail-footer-link i {
    transition: transform 0.18s ease;
}

.rant-detail-footer-link:hover i {
    transform: translateX(3px);
}

/* Mobile layout */

@media (max-width: 767px) {
    .rant-detail-page {
        padding: 0 0 35px;
    }

    .rant-detail-panel {
        border-radius: 14px;
    }

    .rant-detail-panel-top {
        padding: 14px 16px;
        border-radius: 14px 14px 0 0;
    }

    .rant-detail-header {
        padding: 22px 16px;
        gap: 13px;
    }

    .rant-detail-heading-icon {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
        border-radius: 11px;
        font-size: 1.35rem;
    }

    .rant-detail-header h1 {
        font-size: 1.5rem;
    }

    .rant-detail-conversation {
        padding: 16px;
    }

    .rant-detail-section-bar {
        padding: 12px 13px;
    }

    .rant-detail-footer {
        align-items: flex-start;
        flex-direction: column;
        padding: 16px;
        border-radius: 0 0 14px 14px;
    }
}

@media (max-width: 420px) {
    .rant-detail-heading-icon {
        display: none;
    }

    .rant-detail-section-label {
        font-size: 0.76rem;
    }

    .rant-detail-thread-id {
        font-size: 0.69rem;
    }
}
/* ============================================================
   TheRantItWall — CodeIgniter 4 Default Pagination
   Supports both CI4 default and Bootstrap 5 markup
   ============================================================ */

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin: 30px 0;
    padding: 0;
    list-style: none;
}

/* Regular page links */
.pagination li a,
.pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 8px 13px;

    background: #122a42 !important;
    color: #bcd5ee !important;
    border: 1px solid #345c82 !important;
    border-radius: 9px !important;

    font-size: 0.85rem;
    font-weight: 650;
    line-height: 1;
    text-decoration: none !important;
    box-shadow: none !important;

    transition: background-color 0.18s ease,
                border-color 0.18s ease,
                color 0.18s ease;
}

/* Hover */
.pagination li a:hover,
.pagination .page-link:hover {
    background: #1c4265 !important;
    border-color: #56a9ed !important;
    color: #ffffff !important;
}

/* Active page — CodeIgniter 4 and Bootstrap 5 */
.pagination li.active a,
.pagination li.active span,
.pagination .page-item.active .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 8px 13px;

    background: #397dc3 !important;
    border: 1px solid #69b8ff !important;
    border-radius: 9px !important;
    color: #ffffff !important;
    font-weight: 800;
}

/* Disabled links */
.pagination li.disabled a,
.pagination li.disabled span,
.pagination .page-item.disabled .page-link {
    background: #0b1c2e !important;
    border-color: #233a52 !important;
    color: #607b98 !important;
    cursor: default;
}

/* Focus */
.pagination a:focus-visible {
    outline: 2px solid #69b8ff;
    outline-offset: 3px;
}

/* Mobile */
@media (max-width: 576px) {
    .pagination {
        gap: 5px;
        margin: 24px 0;
    }

    .pagination li a,
    .pagination li.active span,
    .pagination .page-link {
        min-width: 35px;
        height: 36px;
        padding: 7px 10px;
        font-size: 0.78rem;
    }
}
/* TheRantItWall - Edit Profile only. Shared avatar builder styles remain in app.css. */
/* Edit Profile: scoped to the same colors and surfaces as profile/show.php. */
.rtw-edit-profile {
    --edit-panel: linear-gradient(180deg, rgba(7, 28, 56, .98), rgba(4, 20, 40, .98));
    --edit-inset: linear-gradient(145deg, rgba(11, 41, 71, .88), rgba(4, 20, 38, .96));
    --edit-border: rgba(45, 123, 191, .52);
    --edit-divider: rgba(49, 100, 146, .48);
    --edit-text: #f5f8ff;
    --edit-muted: #9ab2cd;
    --edit-input: #081b31;
    max-width: 820px;
    width: 100%;
    margin: 0 auto;
    color: var(--edit-text);
}
.rtw-edit-profile .edit-panel {
    overflow: hidden;
    background: var(--edit-panel);
    border: 1px solid var(--edit-border);
    border-radius: 16px;
    box-shadow: 0 16px 38px rgba(0,0,0,.24);
}
.rtw-edit-profile .edit-cover {
    height: 114px;
    background: linear-gradient(145deg, rgba(5,26,56,.45), rgba(3,13,31,.75)),
        url("../img/bg.png") center 27% / 800px auto repeat;
    border-bottom: 1px solid rgba(70,161,236,.28);
}
.rtw-edit-profile .edit-heading { padding: 0 24px 24px; }
.rtw-edit-profile .edit-identity { display: flex; align-items: end; gap: 16px; margin-top: -40px; position: relative; }
.rtw-edit-profile .edit-avatar.letter-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 88px; height: 88px; flex: 0 0 88px;
    border: 5px solid #071c38; border-radius: 50%;
    font-size: 2rem; font-weight: 800; line-height: 1;
    background-image: none !important;
    box-shadow: 0 5px 20px rgba(0,0,0,.35);
}
.rtw-edit-profile .edit-identity-copy { min-width: 0; padding-bottom: 6px; }
.rtw-edit-profile .edit-identity h1 { font-size: 1.65rem; font-weight: 800; margin: 0 0 4px; overflow-wrap: anywhere; }
.rtw-edit-profile .edit-identity p { margin: 0; color: var(--edit-muted); font-size: .85rem; }
.rtw-edit-profile .edit-body { padding: 22px 24px 24px; }
.rtw-edit-profile .edit-intro { display:flex; align-items:center; gap: 11px; margin-bottom: 20px; }
.rtw-edit-profile .edit-intro-icon { display:grid; place-items:center; flex: 0 0 40px; height:40px; border-radius: 11px; background: rgba(31,134,218,.13); border:1px solid rgba(47,161,247,.38); color:#43b1ff; font-size:1.2rem; }
.rtw-edit-profile .edit-intro h2 { margin:0 0 2px; font-size:1rem; font-weight:800; }
.rtw-edit-profile .edit-intro p { margin:0; font-size:.8rem; color: var(--edit-muted); }
.rtw-edit-profile .edit-field { margin-bottom: 20px; }
.rtw-edit-profile .edit-label { display:block; margin-bottom:8px; font-size:.85rem; font-weight:750; color:var(--edit-text); }
.rtw-edit-profile .edit-label i { color:#56b7ff; margin-right:5px; }
.rtw-edit-profile .edit-textarea { display:block; width:100%; min-height:126px; resize:vertical; padding:13px 15px; border:1px solid rgba(76,133,183,.52); border-radius:11px; background:var(--edit-input); color:var(--edit-text); line-height:1.6; outline:none; }
.rtw-edit-profile .edit-textarea:focus { border-color:#43b1ff; box-shadow:0 0 0 3px rgba(52,155,238,.16); }
.rtw-edit-profile .edit-field-note { display:flex; justify-content:space-between; gap:12px; margin-top:7px; color:var(--edit-muted); font-size:.75rem; }
.rtw-edit-profile .edit-divider { border:0; height:1px; background:var(--edit-divider); margin:22px 0; opacity:1; }
.rtw-edit-profile .edit-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:10px; }
.rtw-edit-profile .edit-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:9px 17px; border-radius:9px; text-decoration:none; font-weight:750; font-size:.87rem; }
.rtw-edit-profile .edit-button-secondary { color:var(--edit-text); border:1px solid rgba(86,145,193,.48); background:var(--edit-inset); }
.rtw-edit-profile .edit-button-secondary:hover { color:var(--edit-text); border-color:#56b7ff; }
.rtw-edit-profile .edit-button-primary { color:#fff; border:1px solid #4a94de; background:#397dc3; }
.rtw-edit-profile .edit-button-primary:hover { background:#2868a9; }
.rtw-edit-profile .edit-error { padding:12px 14px; margin-bottom:17px; border-radius:10px; border:1px solid rgba(255,89,109,.5); background:rgba(255,89,109,.1); color:#ffd9de; }
.rtw-edit-profile .edit-success { padding:12px 14px; margin-bottom:17px; border-radius:10px; border:1px solid rgba(22,209,139,.4); background:rgba(22,209,139,.09); color:#bcffe1; }
@media (max-width:575.98px) {
    .rtw-edit-profile .edit-heading { padding:0 15px 18px; }
    .rtw-edit-profile .edit-body { padding:18px 15px; }
    .rtw-edit-profile .edit-identity { gap:12px; margin-top:-33px; }
    .rtw-edit-profile .edit-avatar.letter-avatar { width:72px; height:72px; flex-basis:72px; font-size:1.7rem; }
    .rtw-edit-profile .edit-identity h1 { font-size:1.35rem; }
    .rtw-edit-profile .edit-actions > * { flex:1; }
}

/* ============================================================
   TheRantItWall - Load More Comments / Replies
   ============================================================ */

.comments-panel .thread-load-more.btn {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 42px;
    padding: 10px 16px;
    margin-top: 14px;

    border: 1px solid #245b91;
    border-radius: 10px;

    background: linear-gradient(
        180deg,
        rgba(12, 45, 77, 0.95),
        rgba(5, 26, 49, 0.98)
    );

    color: #8fcaff;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;

    box-shadow: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.comments-panel .thread-load-more.btn:hover {
    background: #163f65;
    border-color: #43b1ff;
    color: #ffffff;
}

.comments-panel .thread-load-more.btn:focus-visible {
    outline: 2px solid #74c7ff;
    outline-offset: 3px;
    box-shadow: none;
}

.comments-panel .thread-load-more.btn:disabled {
    opacity: 0.55;
    cursor: wait;
}


/* Account Settings — extensions to the existing Edit Profile theme. */
.rtw-account-page .account-input {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid rgba(76, 133, 183, .52);
    border-radius: 11px;
    outline: none;
    background: var(--edit-input);
    color: var(--edit-text);
    font: inherit;
}
.rtw-account-page .account-input:focus {
    border-color: #43b1ff;
    box-shadow: 0 0 0 3px rgba(52, 155, 238, .16);
}
.rtw-account-page .account-input:disabled {
    opacity: .75;
    cursor: not-allowed;
}
.rtw-account-page .account-input::placeholder {
    color: var(--edit-muted);
}
.rtw-account-page .account-section {
    min-width: 0;
}
.rtw-account-page .form-response:not([hidden]) {
    padding: 12px 14px;
    border-radius: 10px;
    font-size: .85rem;
}
.rtw-account-page .form-response.is-error {
    border: 1px solid rgba(255, 89, 109, .5);
    background: rgba(255, 89, 109, .1);
    color: #ffd9de;
}
.rtw-account-page .form-response.is-success {
    border: 1px solid rgba(22, 209, 139, .4);
    background: rgba(22, 209, 139, .09);
    color: #bcffe1;
}
/* ========================================
   CLICKABLE RANT CONTENT
======================================== */

.rant-body-link {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.rant-body-link:hover {
    color: inherit;
    text-decoration: none;
}

.rant-body-link .rant-body {
    color: inherit;
}

.rant-body-link:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 4px;
    border-radius: 4px;
}

/* ========================================
   VIEW CONVERSATION LINK
======================================== */

.rant-view-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    color: var(--bs-secondary-color);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}

.rant-view-link:hover {
    color: var(--bs-body-color);
    background-color: var(--bs-tertiary-bg);
    text-decoration: none;
}

.rant-view-link i {
    font-size: 14px;
}

.rant-view-link:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* ========================================
   SINGLE RANT PAGE
======================================== */

.rant-detail-page .rant-view-link {
    display: none;
}

.rant-detail-page .rant-body-link {
    pointer-events: none;
    cursor: default;
}

/* ========================================
   MOBILE
======================================== */

@media (max-width: 576px) {

    .rant-view-link {
        padding: 6px 8px;
        font-size: 12px;
        gap: 5px;
    }

    .rant-view-link i {
        font-size: 13px;
    }

}
/* ========================================
   FIX RANT DROPDOWN CLIPPING
======================================== */

.rant-card {
    overflow: visible;
}

.rant-row {
    overflow: visible;
}

.rant-main {
    overflow: visible;
}

.rant-head {
    overflow: visible;
}

/* Ensure the dropdown appears above neighboring content */
.rant-head .dropdown {
    position: relative;
}

.rant-head .dropdown-menu {
    z-index: 1050;
}

/* Keep the active dropdown above other rant cards */
.rant-card:has(.dropdown-menu.show) {
    position: relative;
    z-index: 1051;
}
/* ========================================
   COMMENT / REPLY DROPDOWNS
======================================== */

.comment-content {
    min-width: 0;
    overflow: visible;
}

.comment-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
}

.comment-meta > .dropdown {
    position: relative;
    flex-shrink: 0;
    margin-left: auto;
}

.comment-meta .more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.comment-meta .dropdown-menu {
    z-index: 1060;
}

.comment-item {
    overflow: visible;
}

.comment-item:has(> .comment-line .dropdown-menu.show) {
    position: relative;
    z-index: 1061;
}
/* ============================================================
   USER MENTIONS — Inline links, distinct from author badges
   ============================================================ */

/* Mentions appear as understated underlined text within content,
   not as padded pills like the rant author's username. */
.rant-body a.mention-link,
.comment-body a.mention-link {
    display: inline;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #78c7ff;
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: rgba(120, 199, 255, 0.45);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.rant-body a.mention-link:hover,
.comment-body a.mention-link:hover {
    background: transparent;
    color: #b8e5ff;
    text-decoration-color: currentColor;
}

.rant-body a.mention-link:focus-visible,
.comment-body a.mention-link:focus-visible {
    outline: 2px solid var(--wall-blue);
    outline-offset: 2px;
}

/* ========================================
   Compact Excluded Words Form
======================================== */

.excluded-words-form {
    width: 100%;
}

.excluded-words-panel {
    width: 100%;
    overflow: hidden;
}

.excluded-words-panel-body {
    padding: 16px;
}

.excluded-words-section {
    margin-bottom: 16px;
}

.excluded-words-section:last-child {
    margin-bottom: 0;
}

/* Labels */

.excluded-words-label {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 600;
}

/* Input and Add button */

.excluded-words-input-group {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.excluded-words-input-group input {
    flex: 1;
    min-width: 0;
    height: 39px;
    padding: 8px 12px;
    font-size: 13px;
}

.excluded-words-input-group button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
    height: 39px;
    padding: 0 15px;
    font-size: 13px;
    font-weight: 600;
}

.excluded-words-hint {
    margin: 6px 0 0;
    font-size: 11px;
    line-height: 1.4;
    opacity: 0.7;
}

/* Section headers */

.excluded-words-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
}

.excluded-words-counter {
    font-size: 12px;
    font-weight: 500;
}

/* Scrollable excluded words container */

.excluded-words-list {
    min-height: 60px;
    max-height: 145px;
    overflow-y: auto;
    padding: 10px;
    border-radius: 8px;
}

.excluded-words-chips {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 6px;
}

.excluded-words-chips > * {
    margin: 0;
}

/* Compact empty state */

.excluded-words-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    padding: 5px;
    text-align: center;
    font-size: 12px;
}

.excluded-words-empty i {
    font-size: 16px;
}

/* Match type settings */

.excluded-match-settings {
    margin-top: 0;
    padding: 0;
}

.excluded-match-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.excluded-match-option {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0;
    padding: 11px;
    border-radius: 8px;
    cursor: pointer;
}

.excluded-match-option input {
    flex-shrink: 0;
    margin-top: 3px;
}

.excluded-match-option-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.excluded-match-option-content strong {
    font-size: 12px;
    line-height: 1.3;
}

.excluded-match-option-content small {
    font-size: 11px;
    line-height: 1.4;
    opacity: 0.75;
}

/* Footer and save button */

.excluded-words-panel-footer {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 16px;
    background: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color);
}

.excluded-words-message {
    flex: 1;
    margin: 0;
    padding: 8px 10px;
    font-size: 12px;
}

.excluded-words-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-height: 38px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

/* Mobile */

@media (max-width: 575px) {
    .excluded-words-panel-body {
        padding: 12px;
    }

    .excluded-words-section {
        margin-bottom: 14px;
    }

    .excluded-match-options {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .excluded-match-option {
        padding: 9px;
    }

    .excluded-words-list {
        max-height: 120px;
    }

    .excluded-words-panel-footer {
        padding: 10px 12px;
    }
}
/* ============================================================
   Rant Author - Profile Links
   ============================================================ */

.rant-author-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* Clickable username */

.rant-author-link {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    max-width: 100%;
    padding: 5px 10px;
    border: 1px solid rgba(57, 125, 195, 0.35);
    border-radius: 8px;
    background: rgba(57, 125, 195, 0.12);
    color: #74bbff;
    font-size: 0.83rem;
    font-weight: 750;
    line-height: 1.3;
    text-decoration: none;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}

.rant-author-link:hover {
    border-color: rgba(57, 125, 195, 0.7);
    background: rgba(57, 125, 195, 0.22);
    color: #ffffff;
    text-decoration: none;
}

.rant-author-link:focus-visible {
    outline: 2px solid var(--wall-blue);
    outline-offset: 3px;
}

/* @ symbol */

.rant-author-at {
    color: #399bea;
    font-weight: 900;
    font-size: 0.95rem;
}

/* Username */

.rant-author-name {
    overflow: hidden;
    max-width: 220px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Anonymous label */

.rant-author-anonymous {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid rgba(124, 142, 164, 0.25);
    border-radius: 8px;
    background: rgba(124, 142, 164, 0.09);
    color: #c8d5e6;
    font-size: 0.83rem;
    font-weight: 700;
    line-height: 1.3;
}

.rant-author-anonymous i {
    color: #8aa7c9;
    font-size: 0.95rem;
}

/* Post metadata */

.rant-author-line .meta-dot {
    color: #69849e;
    font-size: 0.85rem;
}

.rant-post-time {
    color: #91a9c2;
    font-size: 0.76rem;
    font-weight: 500;
}

/* Mobile */

@media (max-width: 575px) {
    .rant-author-line {
        gap: 6px;
    }

    .rant-author-link,
    .rant-author-anonymous {
        padding: 4px 8px;
        font-size: 0.78rem;
    }

    .rant-author-name {
        max-width: 150px;
    }

    .rant-post-time {
        font-size: 0.72rem;
    }
}

/* ============================================================
   COMPACT SITE LAYOUT — Minimal outer gutters
   ============================================================ */

/* Fill the viewport instead of adding nested outer margins. */
.page-layout,
.page-layout-inner,
.page-main {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    left: auto;
    transform: none;
}

.page-layout > .container-fluid,
.site-main > .container,
.site-main > .container-fluid {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding-left: 8px;
    padding-right: 8px;
}

/* Override the old narrow feed container. */
.feed-shell,
.page-layout .feed-shell {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.site-main {
    padding-top: 8px;
    padding-bottom: 16px;
}

/* Reduce spacing between major layout blocks only. */
.page-main > .wall-hero,
.page-main > .community-stats,
.page-main > .feed-tabs,
.page-main > .rant-composer,
.page-main > .rant-feed {
    margin-bottom: 8px;
}

@media (max-width: 767.98px) {
    .page-layout,
    .page-layout-inner,
    .page-main {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
    }

    .page-layout > .container-fluid,
    .site-main > .container,
    .site-main > .container-fluid {
        padding-left: 4px;
        padding-right: 4px;
    }

    .feed-shell,
    .page-layout .feed-shell {
        width: 100% !important;
        max-width: none !important;
    }

    .site-main {
        padding-top: 4px;
        padding-bottom: 10px;
    }
}

/* ============================================================
   MENTIONS — Plain colored links, never underlined
   ============================================================ */

.rant-body a.mention-link,
.comment-body a.mention-link,
.rant-body a.mention-link:hover,
.comment-body a.mention-link:hover,
.rant-body a.mention-link:focus-visible,
.comment-body a.mention-link:focus-visible,
[data-bs-theme="light"] .rant-body a.mention-link,
[data-bs-theme="light"] .comment-body a.mention-link,
[data-bs-theme="light"] .rant-body a.mention-link:hover,
[data-bs-theme="light"] .comment-body a.mention-link:hover {
    text-decoration: none;
    text-decoration-line: none;
    border-bottom: 0;
}

/* ============================================================
   Excluded Words — center the page, not just its form
   ============================================================ */

/* A Bootstrap column or feed grid can place a perfectly centered
   form off-center. Give the excluded-words page its own full row. */
.site-main .row:has(#excludedWordsForm) {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    justify-content: center;
}

.site-main .row:has(#excludedWordsForm) > [class*="col-"]:has(#excludedWordsForm) {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    margin-left: auto;
    margin-right: auto;
}

/* If a feed layout is present, prevent its content column from
   keeping the excluded-words screen in a left-side track. */
.site-main .page-layout:has(#excludedWordsForm),
.site-main .page-layout-inner:has(#excludedWordsForm),
.site-main .page-main:has(#excludedWordsForm),
.site-main .feed-shell:has(#excludedWordsForm) {
    display: block;
    width: 100% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    left: auto;
    transform: none;
}

/* Keep the form and any matching page hero in one centered column. */
.site-main .excluded-words-page,
.site-main #excludedWordsForm {
    display: block;
    width: min(100%, 920px);
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
    float: none;
    box-sizing: border-box;
}

.site-main #excludedWordsForm > .excluded-words-panel {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

@media (max-width: 767.98px) {
    .site-main #excludedWordsForm,
    .site-main .excluded-words-page {
        width: 100%;
    }
}
/* ============================================================
   TheRantItWall — Emoji Picker
   Complete stylesheet for rant, comment, and reply forms.

   Replaces previous emoji-picker.css and emoji-picker-layout-fix.css.
   Uses existing PHP partial and emoji-picker.js unchanged.
   Dark theme is the default; Bootstrap light theme is supported.
   ============================================================ */

/* TheRantItWall — reusable emoji picker; dark theme by default. */
.emoji-picker { position: relative; display: inline-flex; flex: 0 0 auto; }
.emoji-picker-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 6px 10px; color: #97caff; background: #142a40; border: 1px solid #335a80; border-radius: 9px; font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; }
.emoji-picker-toggle:hover, .emoji-picker-toggle[aria-expanded="true"] { background: #1c3b59; color: #fff; border-color: #397dc3; }
.emoji-picker-toggle:focus-visible, .emoji-picker-panel button:focus-visible, .emoji-picker-search:focus-visible { outline: 2px solid #439ffa; outline-offset: 2px; }
.emoji-picker-panel { position: absolute; bottom: calc(100% + 9px); left: 0; z-index: 1100; width: min(340px, calc(100vw - 20px)); max-height: min(420px, 65dvh); display: flex; flex-direction: column; overflow: hidden; color: #e8f2ff; background: #142438; border: 1px solid #365879; border-radius: 13px; box-shadow: 0 16px 42px rgba(0, 0, 0, .4); }
.emoji-picker-panel[hidden], .emoji-picker-empty[hidden] { display: none !important; }
.emoji-picker-head { display: flex; gap: 6px; padding: 10px; border-bottom: 1px solid #304760; }
.emoji-picker-search { width: 100%; min-width: 0; min-height: 38px; padding: 6px 10px; border: 1px solid #496078; border-radius: 8px; background: #0c1929; color: #fff; font: inherit; font-size: 16px; }
.emoji-picker-search::placeholder { color: #a7b9cd; }
.emoji-picker-close { flex: 0 0 36px; border: 0; border-radius: 8px; background: transparent; color: inherit; cursor: pointer; }
.emoji-picker-categories { display: flex; flex-shrink: 0; gap: 5px; padding: 8px; overflow-x: auto; scrollbar-width: thin; }
.emoji-picker-category { flex-shrink: 0; padding: 6px 9px; background: #20354b; border: 1px solid transparent; border-radius: 7px; color: #c9d7e5; font: inherit; font-size: .73rem; cursor: pointer; }
.emoji-picker-category[aria-pressed="true"] { background: #397dc3; color: #fff; }
.emoji-picker-results { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; align-content: start; padding: 8px; overflow-y: auto; min-height: 80px; overscroll-behavior: contain; }
.emoji-picker-option { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 41px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: inherit; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: 1.38rem; line-height: 1; cursor: pointer; }
.emoji-picker-option:hover { background: #285071; }
.emoji-picker-empty { padding: 10px 12px; margin: 0; font-size: .82rem; color: #c8d6e8; }
@media (max-width: 575px) {
    .emoji-picker-panel { position: fixed; left: 8px; right: 8px; top: auto; bottom: max(10px, env(safe-area-inset-bottom)); width: auto; max-height: min(65vh, 470px); max-height: min(65dvh, 470px); z-index: 2000; }
    .emoji-picker-results { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .emoji-picker-option { min-height: 44px; }
}

/* ============================================================
   Form integration — three identical emoji buttons
   ============================================================ */

/* The original layout controls remain untouched. */
.rant-composer .composer-body,
.comment-form .comment-input-wrap,
.reply-form .reply-input-wrap {
    position: relative;
    min-width: 0;
}

/* Use the same small icon button for rant, comment, and reply. */
.rant-composer .composer-body > .emoji-picker,
.comment-form .comment-input-wrap > .emoji-picker,
.reply-form .reply-input-wrap > .emoji-picker {
    position: absolute;
    top: 7px;
    right: 8px;
    bottom: auto;
    left: auto;
    z-index: 12;
    display: inline-flex;
    width: 30px;
    height: 30px;
    margin: 0;
}

.rant-composer .composer-body > .emoji-picker .emoji-picker-toggle,
.comment-form .comment-input-wrap > .emoji-picker .emoji-picker-toggle,
.reply-form .reply-input-wrap > .emoji-picker .emoji-picker-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    padding: 0;
    gap: 0;
    font-size: 1rem;
    line-height: 1;
    border-radius: 8px;
}

.rant-composer .composer-body > .emoji-picker .emoji-picker-toggle-label,
.comment-form .comment-input-wrap > .emoji-picker .emoji-picker-toggle-label,
.reply-form .reply-input-wrap > .emoji-picker .emoji-picker-toggle-label {
    display: none;
}

/* Reserve space inside each textarea for its emoji control. */
.rant-composer .composer-body > textarea.rant-textarea,
.comment-form .comment-input-wrap > textarea,
.reply-form .reply-input-wrap > textarea {
    box-sizing: border-box;
    padding-right: 49px;
}

/* Keep counters below the trigger, not beside/behind it.
   The extra textarea height gives the top button and lower
   right counter separate space, including on narrow phones. */
.comment-form .comment-input-wrap > textarea,
.reply-form .reply-input-wrap > textarea {
    min-height: 75px;
    padding-bottom: 27px;
}

.comment-form .comment-input-wrap > .comment-counter,
.reply-form .reply-input-wrap > .comment-counter {
    position: absolute;
    top: auto;
    right: 10px;
    bottom: 8px;
    z-index: 1;
    margin: 0;
    pointer-events: none;
}

/* Preserve the rant composer counter/support/Post footer row. */
.rant-composer .composer-bottom-row {
    position: relative;
}

/* The emoji menu is positioned by emoji-picker.js and floats
   over the page rather than changing form layout dimensions. */
.emoji-picker .emoji-picker-panel {
    position: fixed;
    z-index: 2050;
}

@media (max-width: 575px) {
    .rant-composer .composer-body > .emoji-picker,
    .comment-form .comment-input-wrap > .emoji-picker,
    .reply-form .reply-input-wrap > .emoji-picker {
        top: 6px;
        right: 6px;
    }

    .comment-form .comment-input-wrap > textarea,
    .reply-form .reply-input-wrap > textarea {
        min-height: 74px;
    }
}


/* ============================================================
   Final picker behavior and accessibility
   ============================================================ */

/* The JavaScript positions this panel using viewport coordinates. */
.emoji-picker .emoji-picker-panel {
    position: fixed;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: min(340px, calc(100vw - 16px));
    max-height: min(420px, 65vh);
    max-height: min(420px, 65dvh);
    overscroll-behavior: contain;
}

.emoji-picker .emoji-picker-panel[hidden] {
    display: none !important;
}

.emoji-picker-toggle,
.emoji-picker-close,
.emoji-picker-category,
.emoji-picker-option {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.emoji-picker-option:focus-visible,
.emoji-picker-category:focus-visible {
    outline: 2px solid #439ffa;
    outline-offset: -2px;
}

@media (max-width: 575px) {
    .emoji-picker .emoji-picker-panel {
        width: min(340px, calc(100vw - 16px));
        max-height: min(360px, 55vh);
        max-height: min(360px, 55dvh);
    }
}
/* ============================================================
   Global Error Messages
   ============================================================ */

.global-error-container {
    width: 100%;
    max-width: 1180px;
    margin: 14px auto 0;
    padding: 0 12px;
}

/* Main alert */
.global-error-alert {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 13px 48px 13px 16px;
    margin: 0;
    border: 1px solid rgba(255, 89, 109, 0.45);
    border-left: 4px solid #ff596d;
    border-radius: 12px;
    background: linear-gradient(
        135deg,
        rgba(72, 22, 38, 0.97),
        rgba(30, 17, 35, 0.98)
    );
    color: #ffe4e8;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.2);
}

/* Error icon */
.global-error-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: rgba(255, 89, 109, 0.12);
    color: #ff8291;
    font-size: 1.15rem;
}

/* Message */
.global-error-text {
    flex: 1;
    min-width: 0;
    margin: 0;
    color: #ffe4e8;
    font-size: 0.87rem;
    font-weight: 500;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* Close button */
.global-error-close {
    position: absolute;
    top: 50%;
    right: 13px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #ffb7bf;
    font-size: 1.15rem;
    cursor: pointer;
}

.global-error-close:hover {
    background: rgba(255, 89, 109, 0.15);
    color: #ffffff;
}

.global-error-close:focus-visible {
    outline: 2px solid #ff8291;
    outline-offset: 2px;
}

/* Mobile */
@media (max-width: 575px) {
    .global-error-container {
        margin-top: 10px;
        padding: 0 10px;
    }

    .global-error-alert {
        gap: 9px;
        min-height: 52px;
        padding: 11px 42px 11px 11px;
        border-radius: 10px;
    }

    .global-error-icon {
        flex-basis: 30px;
        width: 30px;
        height: 30px;
        font-size: 1rem;
    }

    .global-error-text {
        font-size: 0.82rem;
    }
}
.mention-suggestions {
    position: absolute;
    z-index: 99999;
    max-width: 420px;
    max-height: 300px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: #1d2533;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35);
    color: #f1f5f9;
}

.mention-suggestion {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-width: 0;
    padding: 9px 11px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.mention-suggestion:hover,
.mention-suggestion.active {
    background: rgba(57, 125, 195, 0.2);
}

.mention-suggestion-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-weight: 700;
}

.mention-suggestion-info {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
}

.mention-suggestion-username {
    display: block;
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mention-suggestion-bio {
    display: block;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    color: #9daabc;
    font-size: 0.77rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ========================================================================
   RESPONSIVE REPLIES
   Source: responsive-replies.css
   ======================================================================== */

/* ============================================================
   12. Responsive compact composer
   ============================================================ */
@media (max-width: 767.98px) {
    .rant-composer .composer-toolbar {
        gap: 5px;
        padding: 6px 7px;
    }

    .rant-composer .composer-select {
        flex: 1 1 calc(50% - 5px);
        min-width: 0;
    }

    .rant-composer .identity-switch {
        width: 100%;
        margin-left: 0 !important;
    }
}

@media (max-width: 575.98px) {
    .rant-composer .composer-body {
        margin: 0 8px;
    }

    .rant-composer .composer-bottom-row {
        gap: 5px;
        padding: 4px 6px 6px;
    }

    .rant-composer .composer-bottom-row .composer-encouragement {
        font-size: 0.73rem;
    }

    .rant-composer .composer-bottom-row .post-rant-btn {
        min-height: 25px;
        padding: 3px 7px;
    }
}

@media (max-width: 390px) {
    .rant-composer .composer-bottom-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .rant-composer .composer-bottom-row .composer-encouragement {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .rant-composer .composer-bottom-row .composer-counter {
        grid-column: 1;
        grid-row: 2;
    }

    .rant-composer .composer-bottom-row .post-rant-btn {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
    }
}

/* ============================================================
   13. Reply-tree junctions — aligned dots and zero ending tails

   Each curved elbow ends at the reply avatar's midpoint.
   The dot is centered exactly where the spine meets that elbow.
   The final sibling's spine ends at that same midpoint.

   NOTE: The dot is drawn on .comment-line, whose origin is
   BELOW the .comment-item top padding. Do not add the padding
   again: doing so places the dot BELOW the curve (the old bug).
   ============================================================ */

.comment-item {
    --tree-node-size: 7px;
    --reply-junction-blue: #58bfff;
    --tree-node-fill: #0b2139;
}

/* Both standard and AJAX-rendered reply structures use the
   same coordinate system: the sibling comment-line origin. */
.comment-item > .reply-children > .replies-ajax-content > .comment-item > .comment-line::before,
.comment-item > .reply-children > .comment-item > .comment-line::before {
    content: "";
    position: absolute;
    z-index: 3;
    display: block;
    width: var(--tree-node-size);
    height: var(--tree-node-size);
    box-sizing: border-box;
    top: calc(var(--tree-avatar) / 2 - var(--tree-node-size) / 2);
    left: calc(-1 * var(--tree-indent) + var(--tree-x) + var(--tree-w) / 2 - var(--tree-node-size) / 2);
    padding: 0;
    border: 1.5px solid var(--tree-blue);
    border-radius: 50%;
    /* Fixed light-blue node; never inherits avatar colors. */
    background-color: var(--reply-junction-blue);
    background-image: none;
    border-color: var(--reply-junction-blue);
    box-shadow: 0 0 0 1px var(--tree-node-fill);
    pointer-events: none;
}

/* End the final sibling's vertical guide precisely at its
   curved elbow, never beneath the last connected avatar. */
.comment-item > .reply-children > .replies-ajax-content > .comment-item:last-child::before,
.comment-item > .reply-children > .comment-item:last-child::before {
    bottom: auto !important;
    height: calc(var(--tree-top-gap) + var(--tree-child-pad-top) + var(--tree-avatar) / 2 - var(--tree-w)) !important;
}

/* Maximum visual depth has no additional elbow or node. */
@media (max-width: 575.98px) {
    .comment-item {
        --tree-node-size: 6px;
    }
}

/* Junction dots use a fixed light-blue palette in both themes.
   Connector geometry and final-sibling cutoff remain unchanged. */

/* ============================================================
   Newly posted support — comment and reply highlight
   ============================================================ */

/*
 * The AJAX handler applies .new-comment-flash to the newly inserted
 * .comment-item. Keep these keyframes defined: without them the
 * existing animation declaration has no visual effect.
 * Color fades away, leaving the original card background intact.
 */
@keyframes new-comment-flash {
    0% {
        background-color: rgba(52, 142, 255, 0.34);
    }

    35% {
        background-color: rgba(52, 142, 255, 0.20);
    }

    100% {
        background-color: transparent;
    }
}

/* ============================================================
   20. Reply tree — curved connections at every nesting depth
   ============================================================
   Geometry is measured from each child comment's actual avatar:
   - Spine x: child left - indent + parent avatar center
   - Elbow y: child top padding + half the avatar diameter
   - Node y: same elbow y, not the top of the child item
   - Last spine ends at this elbow, with no trailing tail.

   Important: the loaded reply HTML uses .replies-ajax-content.
   Both direct and AJAX-rendered children are supported below.
   ============================================================ */

.comment-item {
    --tree-indent: 32px;
    --tree-node-size: 7px;
    --reply-junction-blue: #58bfff;
    --tree-node-fill: #0b2139;
}

/* Keep an actual indent even after the former four-level cap. */
.comment-item > .reply-children,
.comment-item[data-visual-depth="4"] > .reply-children {
    position: relative;
    margin: var(--tree-top-gap) 0 0 !important;
    padding: 0 0 0 var(--tree-indent) !important;
}

/* A parent's vertical connector starts at its avatar center. */
.comment-item:has(> .reply-children:not(.d-none)) > .comment-line::after {
    left: var(--tree-x) !important;
}

/* Vertical spine: behind the dots and rounded elbows. */
.comment-item > .reply-children > .replies-ajax-content > .comment-item::before,
.comment-item > .reply-children > .comment-item::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    left: calc(-1 * var(--tree-indent) + var(--tree-x)) !important;
    top: calc(-1 * var(--tree-top-gap)) !important;
    bottom: calc(-1 * var(--tree-top-gap)) !important;
    width: var(--tree-w) !important;
    height: auto !important;
    background: var(--tree-blue) !important;
    border: 0 !important;
    border-radius: 0 !important;
    pointer-events: none;
}

/* The elbow curves exactly to the left edge of the reply avatar.
   Its bottom edge is at the avatar's vertical midpoint. */
.comment-item > .reply-children > .replies-ajax-content > .comment-item::after,
.comment-item > .reply-children > .comment-item::after {
    content: "" !important;
    display: block !important;
    position: absolute;
    left: calc(-1 * var(--tree-indent) + var(--tree-x)) !important;
    top: var(--tree-child-pad-top) !important;
    width: calc(var(--tree-indent) - var(--tree-x) + var(--tree-w) / 2) !important;
    height: calc(var(--tree-avatar) / 2) !important;
    border: 0 !important;
    border-left: var(--tree-w) solid var(--tree-blue) !important;
    border-bottom: var(--tree-w) solid var(--tree-blue) !important;
    border-radius: 0 0 0 10px !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: none;
}

/* A perfectly circular dot exactly at the spine/elbow junction.
   The comment-line starts after the child top padding, so that
   padding must NOT be added to the node's top coordinate. */
.comment-item > .reply-children > .replies-ajax-content > .comment-item > .comment-line::before,
.comment-item > .reply-children > .comment-item > .comment-line::before {
    content: "" !important;
    position: absolute;
    z-index: 3;
    display: block !important;
    width: var(--tree-node-size) !important;
    height: var(--tree-node-size) !important;
    padding: 0 !important;
    top: calc(var(--tree-avatar) / 2 - var(--tree-node-size) / 2) !important;
    left: calc(-1 * var(--tree-indent) + var(--tree-x) + var(--tree-w) / 2 - var(--tree-node-size) / 2) !important;
    border: 1px solid var(--reply-junction-blue) !important;
    border-radius: 50% !important;
    background: var(--reply-junction-blue) !important;
    background-image: none !important;
    box-shadow: 0 0 0 1px var(--tree-node-fill) !important;
    pointer-events: none;
}

/* End the final sibling's spine precisely at the elbow. */
.comment-item > .reply-children > .replies-ajax-content > .comment-item:last-child::before,
.comment-item > .reply-children > .comment-item:last-child::before {
    top: calc(-1 * var(--tree-top-gap)) !important;
    bottom: auto !important;
    height: calc(var(--tree-top-gap) + var(--tree-child-pad-top) + var(--tree-avatar) / 2 - var(--tree-w)) !important;
}

/* A smaller but still connected elbow for tablets and phones. */
@media (min-width: 576px) and (max-width: 991.98px) {
    .comment-item {
        --tree-indent: 28px;
    }
}

@media (max-width: 575.98px) {
    .comment-item {
        --tree-indent: 24px;
        --tree-node-size: 6px;
    }
}

/* ============================================================
   21. Responsive visual-depth limits (restored)
   ============================================================
   The nested DOM and AJAX replies remain unlimited.
   data-visual-depth comes from comments.js.

   Desktop: 8 indentation steps.
   Tablet:  5 indentation steps.
   Mobile:  3 indentation steps.

   At the visual limit, children stay in their parent's conversation
   but occupy the available width rather than shrinking text further.
   This section ONLY changes the reply indentation and hides the
   connector of the unindented overflow segment. All normal junction
   dots, elbows and no-tail endings keep the existing geometry.
   ============================================================ */

/* Desktop: undo the old four-level flattening, through level seven. */
.comment-item[data-visual-depth="0"] > .reply-children,
.comment-item[data-visual-depth="1"] > .reply-children,
.comment-item[data-visual-depth="2"] > .reply-children,
.comment-item[data-visual-depth="3"] > .reply-children,
.comment-item[data-visual-depth="4"] > .reply-children,
.comment-item[data-visual-depth="5"] > .reply-children,
.comment-item[data-visual-depth="6"] > .reply-children,
.comment-item[data-visual-depth="7"] > .reply-children {
    position: relative;
    margin: var(--tree-top-gap) 0 0 !important;
    padding: 0 0 0 var(--tree-indent) !important;
}

/* At level eight, no further horizontal indentation. */
.comment-item[data-visual-depth="8"] > .reply-children {
    position: relative;
    margin: var(--tree-top-gap) 0 0 !important;
    padding: 0 !important;
}

/* Flat descendants have no horizontal room for an elbow; hide only
   their own connector decorations. The parent branches remain intact. */
.comment-item[data-visual-depth="8"] > .reply-children > .replies-ajax-content > .comment-item::before,
.comment-item[data-visual-depth="8"] > .reply-children > .replies-ajax-content > .comment-item::after,
.comment-item[data-visual-depth="8"] > .reply-children > .replies-ajax-content > .comment-item > .comment-line::before,
.comment-item[data-visual-depth="8"] > .reply-children > .comment-item::before,
.comment-item[data-visual-depth="8"] > .reply-children > .comment-item::after,
.comment-item[data-visual-depth="8"] > .reply-children > .comment-item > .comment-line::before {
    content: none !important;
    display: none !important;
}

/* Tablet: cap after five visual nesting levels. */
@media (min-width: 576px) and (max-width: 991.98px) {
    .comment-item {
        --tree-indent: 27px;
    }

    .comment-item[data-visual-depth="5"] > .reply-children,
    .comment-item[data-visual-depth="6"] > .reply-children,
    .comment-item[data-visual-depth="7"] > .reply-children,
    .comment-item[data-visual-depth="8"] > .reply-children {
        padding: 0 !important;
        margin: var(--tree-top-gap) 0 0 !important;
    }

    .comment-item[data-visual-depth="5"] > .reply-children > .replies-ajax-content > .comment-item::before,
    .comment-item[data-visual-depth="5"] > .reply-children > .replies-ajax-content > .comment-item::after,
    .comment-item[data-visual-depth="5"] > .reply-children > .replies-ajax-content > .comment-item > .comment-line::before,
    .comment-item[data-visual-depth="5"] > .reply-children > .comment-item::before,
    .comment-item[data-visual-depth="5"] > .reply-children > .comment-item::after,
    .comment-item[data-visual-depth="5"] > .reply-children > .comment-item > .comment-line::before,
    .comment-item[data-visual-depth="6"] > .reply-children > .replies-ajax-content > .comment-item::before,
    .comment-item[data-visual-depth="6"] > .reply-children > .replies-ajax-content > .comment-item::after,
    .comment-item[data-visual-depth="6"] > .reply-children > .replies-ajax-content > .comment-item > .comment-line::before,
    .comment-item[data-visual-depth="6"] > .reply-children > .comment-item::before,
    .comment-item[data-visual-depth="6"] > .reply-children > .comment-item::after,
    .comment-item[data-visual-depth="6"] > .reply-children > .comment-item > .comment-line::before,
    .comment-item[data-visual-depth="7"] > .reply-children > .replies-ajax-content > .comment-item::before,
    .comment-item[data-visual-depth="7"] > .reply-children > .replies-ajax-content > .comment-item::after,
    .comment-item[data-visual-depth="7"] > .reply-children > .replies-ajax-content > .comment-item > .comment-line::before,
    .comment-item[data-visual-depth="7"] > .reply-children > .comment-item::before,
    .comment-item[data-visual-depth="7"] > .reply-children > .comment-item::after,
    .comment-item[data-visual-depth="7"] > .reply-children > .comment-item > .comment-line::before,
    .comment-item[data-visual-depth="8"] > .reply-children > .replies-ajax-content > .comment-item::before,
    .comment-item[data-visual-depth="8"] > .reply-children > .replies-ajax-content > .comment-item::after,
    .comment-item[data-visual-depth="8"] > .reply-children > .replies-ajax-content > .comment-item > .comment-line::before,
    .comment-item[data-visual-depth="8"] > .reply-children > .comment-item::before,
    .comment-item[data-visual-depth="8"] > .reply-children > .comment-item::after,
    .comment-item[data-visual-depth="8"] > .reply-children > .comment-item > .comment-line::before {
        content: none !important;
        display: none !important;
    }

}

/* Phones: cap after three visual nesting levels. */
@media (max-width: 575.98px) {
    .comment-item {
        --tree-indent: 24px;
    }

    .comment-item[data-visual-depth="3"] > .reply-children,
    .comment-item[data-visual-depth="4"] > .reply-children,
    .comment-item[data-visual-depth="5"] > .reply-children,
    .comment-item[data-visual-depth="6"] > .reply-children,
    .comment-item[data-visual-depth="7"] > .reply-children,
    .comment-item[data-visual-depth="8"] > .reply-children {
        padding: 0 !important;
        margin: var(--tree-top-gap) 0 0 !important;
    }

    .comment-item[data-visual-depth="3"] > .reply-children > .replies-ajax-content > .comment-item::before,
    .comment-item[data-visual-depth="3"] > .reply-children > .replies-ajax-content > .comment-item::after,
    .comment-item[data-visual-depth="3"] > .reply-children > .replies-ajax-content > .comment-item > .comment-line::before,
    .comment-item[data-visual-depth="3"] > .reply-children > .comment-item::before,
    .comment-item[data-visual-depth="3"] > .reply-children > .comment-item::after,
    .comment-item[data-visual-depth="3"] > .reply-children > .comment-item > .comment-line::before,
    .comment-item[data-visual-depth="4"] > .reply-children > .replies-ajax-content > .comment-item::before,
    .comment-item[data-visual-depth="4"] > .reply-children > .replies-ajax-content > .comment-item::after,
    .comment-item[data-visual-depth="4"] > .reply-children > .replies-ajax-content > .comment-item > .comment-line::before,
    .comment-item[data-visual-depth="4"] > .reply-children > .comment-item::before,
    .comment-item[data-visual-depth="4"] > .reply-children > .comment-item::after,
    .comment-item[data-visual-depth="4"] > .reply-children > .comment-item > .comment-line::before,
    .comment-item[data-visual-depth="5"] > .reply-children > .replies-ajax-content > .comment-item::before,
    .comment-item[data-visual-depth="5"] > .reply-children > .replies-ajax-content > .comment-item::after,
    .comment-item[data-visual-depth="5"] > .reply-children > .replies-ajax-content > .comment-item > .comment-line::before,
    .comment-item[data-visual-depth="5"] > .reply-children > .comment-item::before,
    .comment-item[data-visual-depth="5"] > .reply-children > .comment-item::after,
    .comment-item[data-visual-depth="5"] > .reply-children > .comment-item > .comment-line::before,
    .comment-item[data-visual-depth="6"] > .reply-children > .replies-ajax-content > .comment-item::before,
    .comment-item[data-visual-depth="6"] > .reply-children > .replies-ajax-content > .comment-item::after,
    .comment-item[data-visual-depth="6"] > .reply-children > .replies-ajax-content > .comment-item > .comment-line::before,
    .comment-item[data-visual-depth="6"] > .reply-children > .comment-item::before,
    .comment-item[data-visual-depth="6"] > .reply-children > .comment-item::after,
    .comment-item[data-visual-depth="6"] > .reply-children > .comment-item > .comment-line::before,
    .comment-item[data-visual-depth="7"] > .reply-children > .replies-ajax-content > .comment-item::before,
    .comment-item[data-visual-depth="7"] > .reply-children > .replies-ajax-content > .comment-item::after,
    .comment-item[data-visual-depth="7"] > .reply-children > .replies-ajax-content > .comment-item > .comment-line::before,
    .comment-item[data-visual-depth="7"] > .reply-children > .comment-item::before,
    .comment-item[data-visual-depth="7"] > .reply-children > .comment-item::after,
    .comment-item[data-visual-depth="7"] > .reply-children > .comment-item > .comment-line::before,
    .comment-item[data-visual-depth="8"] > .reply-children > .replies-ajax-content > .comment-item::before,
    .comment-item[data-visual-depth="8"] > .reply-children > .replies-ajax-content > .comment-item::after,
    .comment-item[data-visual-depth="8"] > .reply-children > .replies-ajax-content > .comment-item > .comment-line::before,
    .comment-item[data-visual-depth="8"] > .reply-children > .comment-item::before,
    .comment-item[data-visual-depth="8"] > .reply-children > .comment-item::after,
    .comment-item[data-visual-depth="8"] > .reply-children > .comment-item > .comment-line::before {
        content: none !important;
        display: none !important;
    }

}

/* ==========================================
   Notifications — Read / Unread States
   ========================================== */

.notification-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    text-decoration: none;
    position: relative;
    transition: background-color 0.15s ease;
}

/* Notification text */
.notification-content {
    flex: 1;
    min-width: 0;
}

.notification-message {
    display: block;
    line-height: 1.45;
}

.notification-time {
    display: block;
    margin-top: 5px;
    opacity: 0.7;
}

/* Unread notification */
.notification-item.unread {
    background-color: rgba(37, 139, 255, 0.09);
}

.notification-item.unread .notification-message {
    font-weight: 600;
}

/* Read notification */
.notification-item.read {
    background-color: transparent;
}

.notification-item.read .notification-message {
    font-weight: 400;
}

/* Keep usernames emphasized */
.notification-username {
    font-weight: 700;
}

/* Unread status on right */
.notification-status {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    margin-left: auto;
}

/* Blue unread dot */
.notification-unread-indicator {
    display: inline-block;
    width: 9px;
    height: 9px;
    min-width: 9px;
    background-color: #258bff;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(37, 139, 255, 0.12);
}

/* Unread text label */
.notification-status-label {
    font-size: 11px;
    font-weight: 700;
    color: #258bff;
}

/* Hover effects */
.notification-item:hover {
    background-color: rgba(37, 139, 255, 0.13);
}

/* Mobile */
@media (max-width: 575.98px) {
    .notification-item {
        gap: 10px;
        padding: 12px;
    }

    .notification-status-label {
        display: none;
    }
}

/* ==========================================
   Notifications dropdown - bounded scrolling
   ========================================== */

/* Let Bootstrap control whether the menu is displayed. */
.notifications-menu {
    width: 380px;
    max-width: calc(100vw - 24px);
    padding: 0;
    overflow: hidden;
}

/* Flex layout only while the dropdown is open. */
.notifications-menu.show {
    display: flex !important;
    flex-direction: column;
    max-height: calc(100vh - 120px);
    max-height: calc(100dvh - 120px);
}

.notifications-menu .notifications-head {
    flex: 0 0 auto;
}

/* This element, not the outer menu, is the scrolling surface.
   Explicit max-height is essential: otherwise the list may never
   become small enough to overflow and scroll. */
.notifications-menu .notifications-list {
    display: block;
    flex: 0 1 auto;
    min-height: 0;
    max-height: 420px;
    max-height: min(420px, calc(100dvh - 185px));
    overflow-y: auto !important;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(128, 128, 128, 0.55) transparent;
}

.notifications-menu .notifications-list::-webkit-scrollbar {
    width: 7px;
}

.notifications-menu .notifications-list::-webkit-scrollbar-track {
    background: transparent;
}

.notifications-menu .notifications-list::-webkit-scrollbar-thumb {
    background: rgba(128, 128, 128, 0.55);
    border-radius: 10px;
}

.notifications-menu .notifications-list::-webkit-scrollbar-thumb:hover {
    background: rgba(128, 128, 128, 0.75);
}

@media (max-width: 575.98px) {
    .notifications-menu {
        width: 340px;
        max-width: calc(100vw - 16px);
    }

    .notifications-menu.show {
        max-height: calc(100dvh - 100px);
    }

    .notifications-menu .notifications-list {
        max-height: min(380px, calc(100dvh - 165px));
    }
}

/* ============================================================
   Notification comment navigation — temporary flash
   Applies only to the selected comment/reply box, never its children.
   ============================================================ */

.comment-item {
    scroll-margin-top: 110px;
}

.comment-item.comment-notification-target > .comment-line {
    border-radius: 12px;
    animation: comment-notification-flash 1.8s ease-out 1;
}

@keyframes comment-notification-flash {
    0% {
        background-color: rgba(57, 125, 195, 0.30);
        box-shadow: 0 0 0 2px rgba(57, 125, 195, 0.75);
    }

    100% {
        background-color: transparent;
        box-shadow: 0 0 0 0 rgba(57, 125, 195, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .comment-item.comment-notification-target > .comment-line {
        animation-duration: 0.01ms;
    }
}


/* ========================================================================
   ADMIN REPORTS
   Source: admin-reports.css
   ======================================================================== */

/* ============================================================
   ADMIN REPORTS PAGE
============================================================ */

.reports-page {
    width: 100%;
    min-height: 70vh;
    padding: 30px 16px 60px;
}

.reports-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

/* ============================================================
   HEADER
============================================================ */

.reports-header {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 24px;
    padding: 28px;
    background: var(--bs-body-bg, #14191f);
    border: 1px solid rgba(121, 141, 170, 0.18);
    border-radius: 18px;
}

.reports-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    background: rgba(57, 125, 195, 0.14);
    color: #397dc3;
    border: 1px solid rgba(57, 125, 195, 0.25);
    border-radius: 14px;
    font-size: 25px;
}

.reports-header-content {
    flex: 1;
    min-width: 0;
}

.reports-eyebrow {
    display: block;
    margin-bottom: 6px;
    color: #397dc3;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.reports-header h1 {
    margin: 0 0 8px;
    color: var(--bs-body-color, #ffffff);
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -0.6px;
}

.reports-header p {
    max-width: 700px;
    margin: 0;
    color: var(--bs-secondary-color, #a1aab8);
    font-size: 14px;
    line-height: 1.7;
}

/* ============================================================
   SUMMARY
============================================================ */

.reports-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 18px 22px;
    margin-bottom: 22px;
    background: var(--bs-body-bg, #14191f);
    border: 1px solid rgba(121, 141, 170, 0.18);
    border-radius: 14px;
}

.reports-summary-info {
    display: flex;
    align-items: center;
    gap: 13px;
}

.reports-summary-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: rgba(255, 89, 109, 0.10);
    color: #ff6578;
    border-radius: 12px;
    font-size: 18px;
}

.reports-summary-info strong,
.reports-summary-info span {
    display: block;
}

.reports-summary-info strong {
    margin-bottom: 3px;
    color: var(--bs-body-color, #ffffff);
    font-size: 14px;
    font-weight: 750;
}

.reports-summary-info div > span {
    color: var(--bs-secondary-color, #a1aab8);
    font-size: 12px;
}

.reports-summary-count {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 85px;
    padding: 9px 15px;
    background: rgba(57, 125, 195, 0.10);
    border: 1px solid rgba(57, 125, 195, 0.20);
    border-radius: 10px;
}

.reports-summary-count strong {
    color: #62a6ef;
    font-size: 23px;
    font-weight: 800;
    line-height: 1.2;
}

.reports-summary-count span {
    margin-top: 3px;
    color: var(--bs-secondary-color, #a1aab8);
    font-size: 10px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ============================================================
   REPORT CARDS
============================================================ */

.reports-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.report-card {
    overflow: hidden;
    background: var(--bs-body-bg, #14191f);
    border: 1px solid rgba(121, 141, 170, 0.18);
    border-radius: 16px;
    transition: border-color 0.2s ease;
}

.report-card:hover {
    border-color: rgba(57, 125, 195, 0.38);
}

/* ============================================================
   CARD HEADER
============================================================ */

.report-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 19px 23px;
    border-bottom: 1px solid rgba(121, 141, 170, 0.14);
}

.report-card-heading {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}

.report-target-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 43px;
    width: 43px;
    height: 43px;
    background: rgba(57, 125, 195, 0.12);
    color: #62a6ef;
    border-radius: 12px;
    font-size: 20px;
}

.report-card-eyebrow {
    display: block;
    margin-bottom: 4px;
    color: var(--bs-secondary-color, #a1aab8);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.8px;
}

.report-card-heading h2 {
    margin: 0;
    color: var(--bs-body-color, #ffffff);
    font-size: 16px;
    font-weight: 800;
}

.report-card-header-right {
    display: flex;
    align-items: center;
}

/* ============================================================
   REASON BADGES
============================================================ */

.report-reason-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 750;
    white-space: nowrap;
}

.report-reason-badge i {
    font-size: 13px;
}

.reason-spam {
    color: #f4b860;
    background: rgba(244, 184, 96, 0.10);
    border-color: rgba(244, 184, 96, 0.20);
}

.reason-doxxing,
.reason-threats {
    color: #ff7888;
    background: rgba(255, 89, 109, 0.10);
    border-color: rgba(255, 89, 109, 0.20);
}

.reason-harassment {
    color: #c69cff;
    background: rgba(166, 114, 255, 0.10);
    border-color: rgba(166, 114, 255, 0.20);
}

.reason-self_harm {
    color: #69b9eb;
    background: rgba(57, 125, 195, 0.10);
    border-color: rgba(57, 125, 195, 0.20);
}

/* ============================================================
   CARD BODY
============================================================ */

.report-card-body {
    padding: 22px 23px;
}

.report-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px 22px;
    margin-bottom: 23px;
}

.report-info-item {
    min-width: 0;
}

.report-info-label {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 7px;
    color: var(--bs-secondary-color, #a1aab8);
    font-size: 11px;
    font-weight: 650;
}

.report-info-label i {
    font-size: 13px;
    color: #668bad;
}

.report-info-value {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--bs-body-color, #ffffff);
    font-size: 13px;
    font-weight: 750;
    overflow-wrap: anywhere;
}

.report-info-value i {
    color: #397dc3;
    font-size: 15px;
}

/* ============================================================
   REPORTED CONTENT
============================================================ */

.report-content-section {
    margin-bottom: 19px;
}

.report-section-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 11px;
    color: var(--bs-body-color, #ffffff);
    font-size: 12px;
    font-weight: 800;
}

.report-section-heading i {
    color: #397dc3;
    font-size: 15px;
}

.report-content-box {
    padding: 17px 19px;
    background: rgba(0, 0, 0, 0.13);
    border: 1px solid rgba(121, 141, 170, 0.14);
    border-left: 3px solid #397dc3;
    border-radius: 10px;
    color: var(--bs-body-color, #ffffff);
    font-size: 13px;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

.report-content-unavailable {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--bs-secondary-color, #a1aab8);
    font-style: italic;
}

/* ============================================================
   ADDITIONAL REPORT DETAILS
============================================================ */

.report-details-section {
    margin-top: 20px;
}

.report-details-text {
    margin: 0;
    padding: 15px 17px;
    color: var(--bs-secondary-color, #a1aab8);
    background: rgba(121, 141, 170, 0.06);
    border: 1px solid rgba(121, 141, 170, 0.12);
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

/* ============================================================
   CARD FOOTER
============================================================ */

.report-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
    padding: 16px 23px;
    background: rgba(0, 0, 0, 0.06);
    border-top: 1px solid rgba(121, 141, 170, 0.14);
}

.report-footer-reference {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--bs-secondary-color, #a1aab8);
    font-size: 11px;
    font-weight: 600;
}

.report-footer-reference i {
    color: #397dc3;
}

.report-card-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
}

.report-card-actions form {
    margin: 0;
}

.report-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 36px;
    padding: 8px 13px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 750;
    text-decoration: none;
    transition: all 0.2s ease;
}

.report-btn i {
    font-size: 13px;
}

/* View Content */

.report-btn-view {
    color: #7ebcff;
    background: rgba(57, 125, 195, 0.12);
    border-color: rgba(57, 125, 195, 0.24);
}

.report-btn-view:hover {
    color: #ffffff;
    background: #397dc3;
    border-color: #397dc3;
}

/* Dismiss */

.report-btn-dismiss {
    color: var(--bs-secondary-color, #a1aab8);
    background: rgba(121, 141, 170, 0.07);
    border-color: rgba(121, 141, 170, 0.19);
}

.report-btn-dismiss:hover {
    color: var(--bs-body-color, #ffffff);
    background: rgba(121, 141, 170, 0.16);
    border-color: rgba(121, 141, 170, 0.30);
}

/* Resolve */

.report-btn-resolve {
    color: #69d6a5;
    background: rgba(50, 180, 120, 0.11);
    border-color: rgba(50, 180, 120, 0.23);
}

.report-btn-resolve:hover {
    color: #ffffff;
    background: #25865d;
    border-color: #25865d;
}

/* ============================================================
   EMPTY STATE
============================================================ */

.reports-empty-state {
    padding: 65px 25px;
    text-align: center;
    background: var(--bs-body-bg, #14191f);
    border: 1px solid rgba(121, 141, 170, 0.18);
    border-radius: 16px;
}

.reports-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 78px;
    margin: 0 auto 20px;
    color: #69d6a5;
    background: rgba(50, 180, 120, 0.10);
    border: 1px solid rgba(50, 180, 120, 0.20);
    border-radius: 22px;
    font-size: 34px;
}

.reports-empty-state h2 {
    margin-bottom: 10px;
    color: var(--bs-body-color, #ffffff);
    font-size: 24px;
    font-weight: 800;
}

.reports-empty-state p {
    max-width: 470px;
    margin: 0 auto 24px;
    color: var(--bs-secondary-color, #a1aab8);
    font-size: 14px;
    line-height: 1.8;
}

/* ============================================================
   PAGINATION
============================================================ */

.reports-pagination {
    display: flex;
    justify-content: center;
    margin-top: 15px;
}

/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 767px) {

    .reports-page {
        padding: 18px 10px 40px;
    }

    .reports-header {
        padding: 20px;
        gap: 13px;
    }

    .reports-header-icon {
        flex-basis: 45px;
        width: 45px;
        height: 45px;
        font-size: 21px;
    }

    .reports-header h1 {
        font-size: 22px;
    }

    .reports-summary {
        padding: 15px;
    }

    .reports-summary-info div > span {
        font-size: 11px;
    }

    .report-card-header {
        padding: 16px;
    }

    .report-card-body {
        padding: 18px 16px;
    }

    .report-card-footer {
        padding: 15px 16px;
    }

    .report-info-grid {
        gap: 17px 13px;
    }

    .report-card-actions {
        width: 100%;
    }

    .report-card-actions > a,
    .report-card-actions > form {
        flex: 1;
    }

    .report-card-actions form button {
        width: 100%;
    }

}

@media (max-width: 450px) {

    .report-info-grid {
        grid-template-columns: 1fr;
    }

    .report-card-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .reports-summary-count {
        min-width: 66px;
        padding: 8px;
    }

    .report-card-actions {
        flex-direction: column;
    }

    .report-card-actions > a,
    .report-card-actions > form {
        width: 100%;
    }

}/* ============================================================
   ADMIN REPORTS DROPDOWN
============================================================ */





.reports-dropdown-link > span:not(.reports-dropdown-badge) {
    flex: 1;
}

.reports-dropdown-badge {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 22px;
    min-height: 20px;
    padding: 3px 7px;
    margin-left: auto;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 700;
}

/* Mobile Reports link */





.reports-mobile-badge {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 22px;
    padding: 4px 7px;
    margin-left: auto;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 700;
}
/* ============================================================
   ADMIN REPORTS — ACCOUNT DROPDOWN BADGES
============================================================ */

/* Account dropdown button */

.header-account-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.header-account-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Badge visible when the dropdown is closed */

.header-reports-badge {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 20px;
    height: 20px;
    padding: 2px 6px;
    border-radius: 7px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

/* ============================================================
   REPORTS LINK INSIDE DROPDOWN
============================================================ */

.reports-dropdown-link {
    display: flex;
    align-items: center;
    gap: 10px;
}

.reports-dropdown-link > i {
    color: #397dc3;
    font-size: 16px;
}

.reports-dropdown-label {
    flex: 1;
}

/* Badge inside account dropdown */

.reports-dropdown-badge {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 20px;
    height: 20px;
    padding: 2px 6px;
    margin-left: auto;
    border-radius: 7px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

/* ============================================================
   MOBILE REPORTS LINK
============================================================ */

.reports-mobile-link {
    display: flex;
    align-items: center;
    gap: 10px;
}

.reports-mobile-link > i {
    color: #397dc3;
}

.reports-mobile-badge {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 20px;
    height: 20px;
    padding: 2px 6px;
    margin-left: auto;
    border-radius: 7px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

/* ============================================================
   SMALL SCREENS
============================================================ */

@media (max-width: 575px) {

    .header-account-toggle {
        gap: 6px;
    }

    .header-account-label {
        max-width: 90px;
    }

    .header-reports-badge {
        min-width: 18px;
        height: 18px;
        padding: 2px 5px;
        font-size: 9px;
    }

}
/* ============================================================
   SITE STATISTICS
============================================================ */

.site-stats {
    width: 100%;
    padding: 10px 0;
    background: rgba(15, 20, 29, 0.92);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.site-stats-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 28px;
}

.site-stat {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    white-space: nowrap;
    color: #a5afbd;
}

.site-stat i {
    font-size: 14px;
    color: #397dc3;
}

.site-stat strong {
    font-size: 13px;
    font-weight: 700;
    color: #e8edf5;
}

.site-stat span {
    font-weight: 400;
}

/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 575px) {

    .site-stats {
        padding: 9px 0;
    }

    .site-stats-inner {
        gap: 8px 14px;
    }

    .site-stat {
        gap: 4px;
        font-size: 11px;
    }

    .site-stat i {
        font-size: 12px;
    }

    .site-stat strong {
        font-size: 12px;
    }

}
/* ==========================================================
   THERANTITWALL — CARTOON NOTIFICATIONS
========================================================== */


/* ==========================================================
   NOTIFICATION LIST
========================================================== */

.notifications-list {
    display: flex;
    flex-direction: column;
    gap: 8px;

    padding: 10px;
}


/* ==========================================================
   NOTIFICATION CARD
========================================================== */

.notification-item {
    --notification-accent: #397dc3;
    --notification-accent-soft: rgba(57, 125, 195, 0.12);

    position: relative;

    display: flex;
    align-items: flex-start;
    gap: 13px;

    min-width: 0;
    width: 100%;

    padding: 14px 12px;

    color: var(--bs-body-color);
    text-decoration: none;

    background: var(--bs-tertiary-bg);

    border: 2px solid var(--bs-border-color);
    border-radius: 16px;

    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15);

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease,
        opacity 0.18s ease;
}

.notification-item:hover {
    color: var(--bs-body-color);
    text-decoration: none;

    border-color: var(--notification-accent);

    transform: translateY(-2px);

    box-shadow: 0 5px 0 var(--notification-accent-soft);
}

.notification-item:active {
    transform: translateY(1px);
}

.notification-item:focus-visible {
    outline: 3px solid var(--notification-accent);
    outline-offset: 2px;
}


/* ==========================================================
   READ / UNREAD STATES
========================================================== */

.notification-item.unread {
    /* Subtle blue-gray instead of the bright accent gradient. */
    background: #192331;
    color: #e2e8f0;
    border-color: #354b62;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15);
}

.notification-item.read {
    opacity: 0.82;
}

.notification-item.read:hover {
    opacity: 1;
}


/* ==========================================================
   AVATAR WRAPPER
========================================================== */

.notification-avatar-wrap {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 43px;
    height: 43px;

    flex: 0 0 43px;
}


/* ==========================================================
   CARTOON AVATAR
========================================================== */

.notification-cartoon-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 43px;
    height: 43px;

    flex: 0 0 43px;

    border: 3px solid var(--bs-body-bg);
    border-radius: 50%;

    font-size: 18px;
    font-weight: 900;
    line-height: 1;

    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);

    transition: transform 0.2s ease;
}

.notification-item:hover .notification-cartoon-avatar {
    transform: rotate(-7deg);
}


/* ==========================================================
   CARTOON NOTIFICATION ICON
========================================================== */

.notification-cartoon-icon {
    position: absolute;

    right: -7px;
    bottom: -6px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;

    background: var(--notification-accent);
    color: #ffffff;

    border: 2px solid var(--bs-body-bg);
    border-radius: 9px;

    font-size: 12px;
    line-height: 1;

    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);

    transform: rotate(-12deg);

    transition: transform 0.2s ease;
}

.notification-item:hover .notification-cartoon-icon {
    transform: rotate(8deg) scale(1.13);
}


/* ==========================================================
   NOTIFICATION CONTENT
========================================================== */

.notification-content {
    display: flex;
    flex-direction: column;
    gap: 7px;

    flex: 1;
    min-width: 0;
}


/* ==========================================================
   NOTIFICATION MESSAGE
========================================================== */

.notification-message {
    display: block;

    font-size: 12.5px;
    line-height: 1.55;

    overflow-wrap: anywhere;
}

.notification-username {
    color: var(--bs-body-color);

    font-size: 13px;
    font-weight: 900;
}

.notification-message-text {
    color: var(--bs-secondary-color);
}

.notification-item.unread .notification-message-text {
    color: var(--bs-body-color);
}


/* ==========================================================
   NOTIFICATION META
========================================================== */

.notification-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.notification-time {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    font-size: 10.5px;
    font-weight: 600;

    color: var(--bs-secondary-color);
}

.notification-time i {
    font-size: 10px;
}


/* ==========================================================
   CARTOON TYPE BADGES
========================================================== */

.notification-type-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 3px 8px;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 0.3px;
    text-transform: uppercase;

    color: var(--notification-accent);
    background: var(--notification-accent-soft);

    border: 1px solid var(--notification-accent);
    border-radius: 20px;
}


/* ==========================================================
   UNREAD INDICATOR
========================================================== */

.notification-status {
    display: flex;
    align-items: flex-start;
    justify-content: center;

    flex: 0 0 10px;
    width: 10px;

    padding-top: 7px;
}

.notification-unread-indicator {
    display: block;

    width: 9px;
    height: 9px;

    /* Softer unread dot without a bright ring or pulsing. */
    background: #5796cc;

    border: 2px solid var(--bs-body-bg);
    border-radius: 50%;

    box-shadow: none;
    animation: none;
}


/* ==========================================================
   COMMENT NOTIFICATIONS — BLUE
========================================================== */

.notification-type-comment {
    --notification-accent: #397dc3;
    --notification-accent-soft: rgba(57, 125, 195, 0.14);
}


/* ==========================================================
   REPLY NOTIFICATIONS — PURPLE-BLUE
========================================================== */

.notification-type-reply {
    --notification-accent: #7488e8;
    --notification-accent-soft: rgba(116, 136, 232, 0.14);
}


/* ==========================================================
   UPVOTE NOTIFICATIONS — GREEN
========================================================== */

.notification-type-upvote {
    --notification-accent: #28a86b;
    --notification-accent-soft: rgba(40, 168, 107, 0.14);
}


/* ==========================================================
   DOWNVOTE NOTIFICATIONS — RED
========================================================== */

.notification-type-downvote {
    --notification-accent: #e85d5d;
    --notification-accent-soft: rgba(232, 93, 93, 0.14);
}


/* ==========================================================
   MENTION NOTIFICATIONS — PURPLE
========================================================== */

.notification-type-mention {
    --notification-accent: #9874e8;
    --notification-accent-soft: rgba(152, 116, 232, 0.14);
}


/* ==========================================================
   REPORT NOTIFICATIONS — ORANGE
========================================================== */

.notification-type-report {
    --notification-accent: #ef9c35;
    --notification-accent-soft: rgba(239, 156, 53, 0.14);
}


/* ==========================================================
   MODERATION NOTIFICATIONS — RED / DARK BLUE
========================================================== */

.notification-type-moderation {
    --notification-accent: #ff7182;
    --notification-accent-soft: rgba(255, 113, 130, 0.14);
}


/* ==========================================================
   SYSTEM NOTIFICATIONS — BLUE
========================================================== */

.notification-type-system {
    --notification-accent: #397dc3;
    --notification-accent-soft: rgba(57, 125, 195, 0.14);
}


/* ==========================================================
   ANIMATIONS
========================================================== */

@keyframes notification-pulse {

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

    50% {
        transform: scale(1.18);
        opacity: 0.7;
    }

}


/* ==========================================================
   MOBILE DEVICES
========================================================== */

@media (max-width: 575.98px) {

    .notifications-list {
        padding: 8px;
        gap: 7px;
    }

    .notification-item {
        gap: 11px;
        padding: 12px 10px;
        border-radius: 14px;
    }

    .notification-message {
        font-size: 12px;
    }

    .notification-username {
        font-size: 12.5px;
    }

    .notification-avatar-wrap {
        width: 39px;
        height: 39px;
        flex-basis: 39px;
    }

    .notification-cartoon-avatar {
        width: 39px;
        height: 39px;
        flex-basis: 39px;
    }

}


/* ==========================================================
   TOUCH DEVICES
========================================================== */

@media (hover: none) {

    .notification-item:hover {
        transform: none;
        box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15);
    }

    .notification-item:hover .notification-cartoon-avatar,
    .notification-item:hover .notification-cartoon-icon {
        transform: none;
    }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .notification-item,
    .notification-cartoon-avatar,
    .notification-cartoon-icon {
        transition: none;
    }

    .notification-unread-indicator {
        animation: none;
    }

}
/* ==========================================
   NOTIFICATION SPACING
========================================== */

.notifications-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
}

/* ==========================================
   NOTIFICATION CARDS
========================================== */

.notification-item {
    margin: 0;
    border-radius: 0;
}

/* Remove rounded corners from type badges */
.notification-type-label {
    border-radius: 0;
}

/* Keep letter avatars circular */
.notification-cartoon-avatar {
    border-radius: 50%;
}

/* ==========================================
   MOBILE
========================================== */

@media (max-width: 575.98px) {
    .notifications-list {
        gap: 10px;
        padding: 10px;
    }

    .notification-item {
        border-radius: 0;
    }
}
/* ==========================================================
   THERANTITWALL — DOWNVOTE NOTIFICATION EXPLANATIONS
========================================================== */

/* Explanation container */

.notification-downvote-explanation {
    display: flex;
    align-items: flex-start;
    gap: 8px;

    width: 100%;
    min-width: 0;

    padding: 9px 11px;

    background: rgba(232, 93, 93, 0.08);
    border-left: 3px solid #e85d5d;

    color: #cbd5e1;

    font-size: 11px;
    font-weight: 400;
    line-height: 1.6;

    overflow-wrap: anywhere;
}

/* Information icon */

.notification-downvote-explanation > i {
    flex-shrink: 0;

    margin-top: 2px;

    color: #ff9292;

    font-size: 13px;
    line-height: 1.3;
}

/* Explanation text */

.notification-downvote-explanation > span {
    display: block;
    min-width: 0;
    flex: 1;
}

/* ==========================================================
   MOBILE DEVICES
========================================================== */

@media (max-width: 575.98px) {

    .notification-downvote-explanation {
        gap: 7px;
        padding: 8px 9px;

        font-size: 10.5px;
        line-height: 1.5;
    }

    .notification-downvote-explanation > i {
        font-size: 12px;
    }

}
/* ==========================================================
   THERANTITWALL — CARTOON MENTION SUGGESTIONS
   Dark-only design. Uses the existing autocomplete class names.
   Keep this section inside app.css; no HTML or JS changes needed.
========================================================== */

/* Popup — chunky outline, compact comic-style panel. */
.mention-suggestions {
    position: absolute;
    z-index: 99999;
    width: 320px;
    max-width: min(420px, calc(100vw - 20px));
    max-height: 300px;
    margin: 0;
    padding: 9px;
    overflow-x: hidden;
    overflow-y: auto;
    color: #f5f9ff;
    background: #101c2e;
    border: 2px solid #397dc3;
    border-radius: 14px;
    box-shadow: 4px 5px 0 #08101e, 0 12px 30px rgba(0, 0, 0, 0.4);
    scrollbar-width: thin;
    scrollbar-color: #397dc3 #101c2e;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Respect the native hidden attribute. */
.mention-suggestions[hidden] {
    display: none !important;
}

/* Browser-specific scrollbar enhancement. */
.mention-suggestions::-webkit-scrollbar {
    width: 6px;
}

.mention-suggestions::-webkit-scrollbar-track {
    background: #101c2e;
}

.mention-suggestions::-webkit-scrollbar-thumb {
    background: #397dc3;
    border-radius: 6px;
}

/* Each result is a selectable character-strip, not a notification card. */
.mention-suggestion {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
    min-height: 58px;
    margin: 0 0 6px;
    padding: 9px 11px;
    color: #f5f9ff;
    background: #19283b;
    border: 1px solid #304d6b;
    border-radius: 9px;
    box-shadow: 0 2px 0 #091321;
    font: inherit;
    font-size: 13px;
    line-height: 1.4;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.15s ease,
        border-color 0.15s ease, box-shadow 0.15s ease;
}

.mention-suggestion:last-child {
    margin-bottom: 0;
}

/* The existing JS marks keyboard-highlighted results with .active. */
.mention-suggestion:hover,
.mention-suggestion.active,
.mention-suggestion:focus-visible {
    color: #ffffff;
    background: #24486d;
    border-color: #65baff;
    box-shadow: 0 2px 0 #133e65;
    transform: translateX(2px);
}

.mention-suggestion:focus-visible {
    outline: 2px solid #81caff;
    outline-offset: 1px;
}

.mention-suggestion:active {
    transform: translateX(1px);
}

/* Actual user avatar colors remain set by existing JavaScript. */
.mention-suggestion-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border: 3px solid #081629;
    border-radius: 50%;
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
    text-align: center;
    box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.45);
    transition: transform 0.18s ease;
}

.mention-suggestion:hover .mention-suggestion-avatar,
.mention-suggestion.active .mention-suggestion-avatar,
.mention-suggestion:focus-visible .mention-suggestion-avatar {
    transform: rotate(-7deg) scale(1.05);
}

/* Username and bio occupy the available width safely. */
.mention-suggestion-info {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    overflow: hidden;
}

.mention-suggestion-username {
    display: block;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    color: #f2f8ff;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mention-suggestion:hover .mention-suggestion-username,
.mention-suggestion.active .mention-suggestion-username,
.mention-suggestion:focus-visible .mention-suggestion-username {
    color: #85ceff;
}

.mention-suggestion-bio {
    display: block;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    color: #a9bed4;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mention-suggestion:hover .mention-suggestion-bio,
.mention-suggestion.active .mention-suggestion-bio {
    color: #d0e0f2;
}

/* Decorative @ chip: visible without changing your JS-rendered content. */
.mention-suggestion::after {
    content: "@";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 25px;
    width: 25px;
    height: 25px;
    margin-left: auto;
    color: #65baff;
    background: #102b47;
    border: 2px solid #366c9e;
    border-radius: 7px;
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.35);
    transform: rotate(8deg);
    transition: transform 0.18s ease, background-color 0.18s ease;
}

.mention-suggestion:hover::after,
.mention-suggestion.active::after {
    color: #ffffff;
    background: #397dc3;
    transform: rotate(-8deg);
}

/* Optional messages, if the existing JavaScript supplies them. */
.mention-suggestions-empty,
.mention-no-results,
.mention-suggestions-loading,
.mention-loading {
    padding: 14px 12px;
    color: #a9bed4;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}

/* Compact layouts keep the dropdown within narrow viewports. */
@media (max-width: 575.98px) {
    .mention-suggestions {
        width: 300px;
        max-width: calc(100vw - 20px);
        max-height: 260px;
        padding: 7px;
        border-radius: 12px;
    }

    .mention-suggestion {
        gap: 10px;
        min-height: 56px;
        padding: 9px;
    }

    .mention-suggestion-avatar {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .mention-suggestion-username {
        font-size: 12.5px;
    }

    .mention-suggestion-bio {
        font-size: 10.5px;
    }
}

@media (max-width: 359.98px) {
    .mention-suggestions {
        width: 270px;
        max-width: calc(100vw - 16px);
    }

    .mention-suggestion {
        gap: 8px;
        padding: 8px;
    }
}

/* Touchscreens shouldn't shift rows during tap interactions. */
@media (hover: none) {
    .mention-suggestion:hover {
        transform: none;
    }

    .mention-suggestion:hover .mention-suggestion-avatar {
        transform: none;
    }
}

/* Respect OS-level reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
    .mention-suggestion,
    .mention-suggestion-avatar,
    .mention-suggestion::after {
        transition: none;
    }

    .mention-suggestion:hover,
    .mention-suggestion.active,
    .mention-suggestion:focus-visible,
    .mention-suggestion:hover .mention-suggestion-avatar,
    .mention-suggestion.active .mention-suggestion-avatar {
        transform: none;
    }
}
/* ==========================================================
   THERANTITWALL — NOTIFICATION REPUTATION BADGES
========================================================== */

/* ==========================================================
   REPUTATION BADGE
========================================================== */

.notification-rep {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    align-self: flex-start;

    width: fit-content;
    max-width: 100%;

    padding: 5px 10px;

    border: 2px solid;
    border-radius: 7px;

    font-size: 11px;
    font-weight: 900;
    line-height: 1.3;

    box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.25);

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

/* ==========================================================
   REPUTATION GAINED
========================================================== */

.notification-rep-gain {
    color: #65efaf;

    background: rgba(40, 168, 107, 0.16);

    border-color: #28a86b;
}

/* ==========================================================
   REPUTATION LOST
========================================================== */

.notification-rep-loss {
    color: #ff9292;

    background: rgba(232, 93, 93, 0.16);

    border-color: #e85d5d;
}

/* ==========================================================
   REPUTATION ICON
========================================================== */

.notification-rep > i {
    flex-shrink: 0;

    font-size: 12px;
    line-height: 1;
}

/* ==========================================================
   REPUTATION AMOUNT
========================================================== */

.notification-rep-amount {
    font-size: inherit;
    font-weight: 900;
    white-space: nowrap;
}

/* ==========================================================
   HOVER ANIMATION
========================================================== */

@media (hover: hover) {

    .notification-item:hover .notification-rep {
        transform: rotate(-3deg) translateY(-1px);

        box-shadow: 3px 4px 0 rgba(0, 0, 0, 0.25);
    }

}

/* ==========================================================
   MOBILE DEVICES
========================================================== */

@media (max-width: 575.98px) {

    .notification-rep {
        gap: 5px;
        padding: 4px 8px;
        font-size: 10px;
    }

    .notification-rep > i {
        font-size: 11px;
    }

}

/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .notification-rep {
        transition: none;
    }

    .notification-item:hover .notification-rep {
        transform: none;
    }

}


/* ============================================================
   CARTOON NOTIFICATION BELLS — HEADER AND EMPTY STATE
   Shared palette; components scoped to avoid collisions.
   ============================================================ */

/* Header bell: keep original .notification-toggle AJAX hooks. */
.site-header .notification-toggle.notification-bell-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    overflow: visible;
    border: 2px solid #375774;
    border-radius: 10px;
    background: #192b3e;
    color: #a5d9ff;
    box-shadow: 0 3px 0 rgba(0,0,0,.28);
    transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.site-header .notification-toggle.notification-bell-btn:hover,
.site-header .notification-toggle.notification-bell-btn:focus-visible {
    border-color: #72b7e9;
    background: #243d56;
    color: #fff;
}
.site-header .notification-toggle.notification-bell-btn:focus-visible {
    outline: 2px solid #b0ddff;
    outline-offset: 3px;
}
.notification-bell-shell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.notification-bell-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 34px;
    transform-origin: center 5px;
}
.notification-bell-icon {
    display: block;
    font-size: 30px;
    line-height: 1;
    color: #83c7ff;
    -webkit-text-stroke: .55px #285d91;
    filter: drop-shadow(0 2px 0 rgba(0,0,0,.32));
}
/* Opaque facial patch makes features stand out on all bell icon fonts. */
.notification-bell-face {
    position: absolute;
    z-index: 3;
    top: 10px;
    left: 50%;
    width: 23px;
    height: 17px;
    transform: translateX(-50%);
    background: #bce8ff;
    border: 1px solid #397eb3;
    border-radius: 48% 48% 46% 46%;
    pointer-events: none;
}
.notification-bell-eye {
    position: absolute;
    top: 3px;
    width: 5px;
    height: 6px;
    border-radius: 50%;
    background: #142a3f;
    box-shadow: inset 1px 1px 0 rgba(255,255,255,.24);
}
.notification-bell-eye:first-child { left: 4px; }
.notification-bell-eye:nth-child(2) { right: 4px; }
.notification-bell-smile {
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 11px;
    height: 6px;
    transform: translateX(-50%);
    border-bottom: 2.5px solid #142a3f;
    border-radius: 0 0 12px 12px;
}
.notification-bell-face::before,
.notification-bell-face::after {
    content: "";
    position: absolute;
    top: 10px;
    width: 5px;
    height: 3px;
    border-radius: 50%;
    background: #f18ca3;
}
.notification-bell-face::before { left: 1px; }
.notification-bell-face::after { right: 1px; }
.notification-bell-sparkle {
    position: absolute;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #a4dfff;
    font-size: 9px;
    line-height: 1;
    pointer-events: none;
}
.notification-bell-sparkle.sparkle-one { top: 3px; left: 4px; }
.notification-bell-sparkle.sparkle-two { bottom: 4px; right: 3px; }
.site-header .notification-toggle.notification-bell-btn:hover .notification-bell-icon-wrap {
    animation: wallHeaderBellWiggle .55s ease-in-out;
}
/* Existing JS manages visibility of this badge (d-none). */
.site-header .notification-toggle.notification-bell-btn .notification-dot {
    position: absolute;
    z-index: 5;
    top: -7px;
    right: -7px;
    min-width: 19px;
    height: 19px;
    padding: 0 4px;
    border: 2px solid #172436;
    border-radius: 999px;
    background: #e96d75;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 15px;
}
@keyframes wallHeaderBellWiggle {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-12deg); }
    50% { transform: rotate(10deg); }
    75% { transform: rotate(-6deg); }
}

/* Empty notifications: enlarged version of the same blue header bell.
   The existing empty-state markup and dancing animation are preserved. */
.notifications-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 34px 20px 38px;
    overflow: hidden;
    text-align: center;
    background: #101b29;
    color: #e5edf7;
}
.notifications-empty-art {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 170px;
    height: 155px;
    margin: 0 auto 18px;
}
.notifications-empty .notifications-bell {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 105px;
    height: 105px;
    transform-origin: 50% 15%;
    animation: wallEmptyBellDance 2.4s ease-in-out infinite;
}
.notifications-empty .notifications-bell > .bi-bell-fill {
    position: relative;
    z-index: 1;
    display: block;
    font-size: 92px;
    line-height: 1;
    color: #83c7ff;
    -webkit-text-stroke: 1.5px #285d91;
    filter: drop-shadow(0 7px 0 rgba(0,0,0,.28));
}
.notifications-empty .notifications-bell-face {
    position: absolute;
    z-index: 4;
    top: 36px;
    left: 50%;
    width: 55px;
    height: 41px;
    transform: translateX(-50%);
    background: #bce8ff;
    border: 2px solid #397eb3;
    border-radius: 48% 48% 46% 46%;
    pointer-events: none;
}
.notifications-empty .bell-eye {
    position: absolute;
    top: 9px;
    display: block;
    width: 11px;
    height: 13px;
    border-radius: 50%;
    background: #142a3f;
    animation: wallEmptyBellBlink 4.5s infinite;
}
.notifications-empty .bell-eye:first-child { left: 11px; }
.notifications-empty .bell-eye:nth-child(2) { right: 11px; }
.notifications-empty .bell-smile {
    position: absolute;
    left: 50%;
    bottom: 5px;
    width: 26px;
    height: 13px;
    transform: translateX(-50%);
    border-bottom: 4px solid #142a3f;
    border-radius: 0 0 50% 50%;
}
/* Match the header bell's pink cheeks and high-contrast face. */
.notifications-empty .notifications-bell-face::before,
.notifications-empty .notifications-bell-face::after {
    content: "";
    position: absolute;
    top: 24px;
    width: 10px;
    height: 6px;
    border-radius: 50%;
    background: #f18ca3;
}
.notifications-empty .notifications-bell-face::before { left: 3px; }
.notifications-empty .notifications-bell-face::after { right: 3px; }
.notifications-empty .notifications-sparkle {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    animation: wallEmptyBellSparkle 2.2s ease-in-out infinite;
}
.notifications-empty .notifications-sparkle.sparkle-one {
    top: 8px; left: 16px; color: #ffdf78; font-size: 21px;
}
.notifications-empty .notifications-sparkle.sparkle-two {
    top: 23px; right: 9px; color: #7acbff; font-size: 24px; animation-delay: .5s;
}
.notifications-empty .notifications-sparkle.sparkle-three {
    bottom: 19px; left: 18px; color: #ff91b8; font-size: 16px; animation-delay: 1s;
}
.notifications-empty .notifications-empty-bubble {
    position: absolute;
    z-index: 0;
    display: block;
    border: 2px solid rgba(94,175,255,.25);
    border-radius: 50%;
    background: rgba(57,125,195,.09);
    pointer-events: none;
    animation: wallEmptyBellBubble 3s ease-in-out infinite;
}
.notifications-empty .notifications-empty-bubble.bubble-one {
    width: 34px; height: 34px; left: 0; bottom: 18px;
}
.notifications-empty .notifications-empty-bubble.bubble-two {
    width: 23px; height: 23px; right: 1px; top: 1px; animation-delay: 1s;
}
.notifications-empty-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 310px;
    margin: 0 auto;
}
.notifications-empty-title {
    margin: 0 0 9px;
    color: #f2f7ff;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.3;
}
.notifications-empty-description {
    margin: 0;
    color: #9fb2c9;
    font-size: 12px;
    line-height: 1.7;
}
.notifications-empty-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
    padding: 8px 15px;
    border: 2px solid #4075aa;
    border-radius: 9px;
    background: #203a56;
    color: #a9d8ff;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 3px 4px 0 rgba(0,0,0,.2);
    transform: rotate(-2deg);
}
.notifications-empty-tag i { color: #79beff; font-size: 14px; }
@keyframes wallEmptyBellDance {
    0%, 100% { transform: translateY(0) rotate(0); }
    15% { transform: translateY(-8px) rotate(-12deg); }
    30% { transform: translateY(-3px) rotate(10deg); }
    45% { transform: translateY(-9px) rotate(-8deg); }
    60% { transform: translateY(-3px) rotate(7deg); }
    75% { transform: translateY(-6px) rotate(-4deg); }
}
@keyframes wallEmptyBellBlink {
    0%, 43%, 47%, 100% { transform: scaleY(1); }
    45% { transform: scaleY(.15); }
}
@keyframes wallEmptyBellSparkle {
    0%, 100% { opacity: .35; transform: scale(.7) rotate(-15deg); }
    50% { opacity: 1; transform: scale(1.25) rotate(15deg); }
}
@keyframes wallEmptyBellBubble {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
/* Smaller screens: preserve header width and avoid dropdown overflow. */
@media (max-width: 575.98px) {
    .site-header .notification-toggle.notification-bell-btn { width: 40px; height: 40px; }
    .notification-bell-icon { font-size: 27px; }
    .notification-bell-face { top: 10px; width: 21px; height: 16px; }
    .notifications-empty { padding: 28px 16px 34px; }
    .notifications-empty-art { width: 155px; height: 145px; }
    .notifications-empty-title { font-size: 16px; }
    .notifications-empty-description { font-size: 11.5px; }
    .notifications-empty-tag { font-size: 11px; }
}
@media (max-width: 359.98px) {
    .notifications-empty-art { width: 145px; }
    .notifications-empty { padding-inline: 12px; }
}
@media (hover: none) {
    .site-header .notification-toggle.notification-bell-btn:hover .notification-bell-icon-wrap { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
    .site-header .notification-toggle.notification-bell-btn,
    .notifications-empty .notifications-bell,
    .notifications-empty .bell-eye,
    .notifications-empty .notifications-sparkle,
    .notifications-empty .notifications-empty-bubble { animation: none; transition: none; }
}

/* ============================================================
   CARTOON BELLS — FINAL MOBILE AND BROWSER SAFEGUARDS
   Header trigger and dropdown are intentionally separate from
   the empty-state bell; preserve Bootstrap/notification AJAX hooks.
   ============================================================ */

/* Prevent icon faces and sparkles intercepting taps/clicks. */
.site-header .notification-bell-shell,
.site-header .notification-bell-shell *,
.notifications-empty-art,
.notifications-empty-art * {
    pointer-events: none;
}

/* Keep unread count outside the icon without clipping. */
.site-header .header-notifications,
.site-header .notification-toggle.notification-bell-btn {
    overflow: visible;
}

.site-header .notification-toggle .notification-dot {
    z-index: 7;
}

/* Touch-friendly trigger, without relying on hover. */
@media (pointer: coarse) {
    .site-header .notification-toggle.notification-bell-btn {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Fit the dropdown within small phone viewports. */
@media (max-width: 575.98px) {
    .header-notifications .notifications-menu {
        max-width: calc(100vw - 16px);
        min-width: 0;
    }

    .notifications-empty {
        max-width: 100%;
    }
}

/* Respect user preferences in Safari, Firefox, Chrome and Edge. */
@media (prefers-reduced-motion: reduce) {
    .notification-bell-btn,
    .notification-bell-btn *,
    .notifications-bell,
    .notifications-bell *,
    .notifications-sparkle,
    .notifications-empty-bubble {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}
/* ============================================================================
   TheRantItWall | Excluded Words — Comic Workshop — Original Site Palette
   Full standalone component stylesheet; dark by default, light-theme compatible.
   Keeps existing form IDs, autocomplete classes, chip classes and AJAX messages.
   ============================================================================ */

/* 01. Page, palette, and layout ---------------------------------------------- */
.excluded-words-page,
.excluded-words-form {
    --ew-bg: #151b27;
    --ew-paper: #1d2635;
    --ew-paper-high: #222e40;
    --ew-input: #111a29;
    --ew-ink: #f4f7fe;
    --ew-muted: #acbdd1;
    --ew-stroke: #344760;
    --ew-stroke-strong: #46617f;
    --ew-accent: #397dc3;
    --ew-accent-ink: #ffffff;
    --ew-badge: #303b4b;
    --ew-positive: #86c7a0;
    --ew-negative: #ee9298;
    --ew-shadow: #0b1421;
    color: var(--ew-ink);
}

.excluded-words-page {
    width: min(100%, 760px);
    max-width: 760px;
    margin-inline: auto;
    padding: 0;
}

.excluded-words-form {
    width: 100%;
    max-width: 760px;
    margin-inline: auto;
    font-family: inherit;
}

.excluded-words-form *,
.excluded-words-form *::before,
.excluded-words-form *::after { box-sizing: border-box; }

/* 02. Main comic panel ------------------------------------------------------- */
.excluded-words-panel {
    position: relative;
    isolation: isolate;
    overflow: visible;
    border: 2px solid var(--ew-stroke-strong);
    border-radius: 15px;
    background: var(--ew-paper);
    box-shadow: 6px 7px 0 var(--ew-shadow), 0 16px 38px rgba(0, 0, 0, .22);
}

.excluded-words-panel::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    opacity: .13;
    pointer-events: none;
    background-image: radial-gradient(var(--ew-stroke-strong) .8px, transparent .8px);
    background-size: 14px 14px;
    mask-image: linear-gradient(to bottom, black, transparent 44%);
}

.excluded-words-panel-body { padding: 20px; }
.excluded-words-section { position: relative; min-width: 0; }
.excluded-words-section + .excluded-words-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px dashed var(--ew-stroke);
}

.excluded-words-label,
.excluded-words-list-header {
    color: var(--ew-ink);
    font-weight: 850;
    letter-spacing: -.015em;
}

.excluded-words-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 11px;
    font-size: 1rem;
}

.excluded-words-label > i { color: var(--ew-accent); font-size: 1.14rem; }

/* 03. Add input and button --------------------------------------------------- */
.excluded-words-input-group {
    display: flex;
    align-items: stretch;
    gap: 10px;
    position: relative;
    min-width: 0;
}

.excluded-words-suggestion-anchor {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
}

#excludedWordsInput {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 10px 14px;
    border: 2px solid var(--ew-stroke-strong);
    border-radius: 9px;
    background: var(--ew-input);
    color: var(--ew-ink);
    outline: 0;
    font: inherit;
    font-size: .93rem;
    box-shadow: inset 3px 3px 0 rgba(0, 0, 0, .16);
    transition: border-color .16s ease, box-shadow .16s ease;
}

#excludedWordsInput::placeholder { color: var(--ew-muted); opacity: .83; }
#excludedWordsInput:focus {
    border-color: var(--ew-accent);
    box-shadow: 0 0 0 3px rgba(57, 125, 195, .16);
}

#addExcludedWord {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 0 0 auto;
    min-height: 48px;
    padding: 10px 17px;
    border: 2px solid #4a94de;
    border-radius: 9px;
    background: var(--ew-accent);
    color: var(--ew-accent-ink);
    font: inherit;
    font-size: .91rem;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 3px 4px 0 var(--ew-shadow);
    transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}

#addExcludedWord i { font-size: 1.05rem; }
#addExcludedWord:hover { filter: brightness(1.06); transform: translate(-1px, -1px); box-shadow: 4px 5px 0 var(--ew-shadow); }
#addExcludedWord:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ew-shadow); }
#addExcludedWord:focus-visible { outline: 2px dashed var(--ew-accent); outline-offset: 4px; }

.excluded-words-hint {
    margin: 12px 0 0;
    color: var(--ew-muted);
    font-size: .81rem;
    line-height: 1.55;
}
.excluded-words-hint i { margin-right: 4px; color: var(--ew-accent); }

/* 04. Comic suggestions: charcoal ink, square rows, noticeable row margins ------- */
.excluded-words-suggestions {
    position: absolute;
    top: calc(100% + 9px);
    right: 0;
    left: 0;
    z-index: 1100;
    width: 100%;
    max-height: min(340px, 55vh);
    padding: 9px 7px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 2px solid var(--ew-stroke-strong);
    border-radius: 10px;
    background: #101720;
    color: #f2f2ee;
    box-shadow: 5px 6px 0 rgba(0, 0, 0, .72), 0 15px 34px rgba(0, 0, 0, .28);
    scrollbar-width: thin;
    scrollbar-color: #56616d #101720;
    transform-origin: top center;
    animation: ew-appear .16s ease-out both;
}

.excluded-words-suggestions[hidden],
.excluded-words-suggestions.d-none { display: none !important; }

.excluded-suggest-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 2px 7px 8px;
    padding: 6px 3px 11px;
    border-bottom: 2px dashed #414d5b;
    color: #dce8f3;
    font-size: .72rem;
    font-weight: 900;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: .055em;
}
.excluded-suggest-heading i { color: var(--ew-accent); font-size: 1rem; }

.excluded-suggest-options { display: block; padding: 0; }

/* Each suggestion is a separate ink-dark comic strip panel; no blue fills. */
.excluded-suggest-option {
    display: flex;
    align-items: center;
    gap: 11px;
    width: calc(100% - 12px);
    min-height: 51px;
    margin: 7px 6px;
    padding: 8px 10px;
    border: 1px solid #48505a;
    border-radius: 0;
    background: #252a31;
    color: #f1f0ec;
    text-align: left;
    font: inherit;
    cursor: pointer;
    box-shadow: 3px 3px 0 #090d12;
    transition: background-color .14s ease, border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}

.excluded-suggest-option:hover,
.excluded-suggest-option.is-active,
.excluded-suggest-option[aria-selected="true"] {
    border-color: #68788b;
    background: #343538;
    color: #fffdf8;
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 #090d12;
}
.excluded-suggest-option:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 #090d12; }
.excluded-suggest-option:focus-visible { outline: 2px solid var(--ew-accent); outline-offset: 2px; }

.excluded-suggest-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border: 1px solid #4b5664;
    border-radius: 7px;
    background: #333943;
    color: #d5dce5;
    font-size: 1rem;
    line-height: 1;
    transform: rotate(-3deg);
    transition: transform .14s ease;
}
.excluded-suggest-icon i { line-height: 1; }
.excluded-suggest-option:hover .excluded-suggest-icon,
.excluded-suggest-option.is-active .excluded-suggest-icon { transform: rotate(3deg); }

.excluded-suggest-term {
    flex: 1 1 auto;
    min-width: 0;
    color: inherit;
    font-size: .88rem;
    font-weight: 650;
    line-height: 1.36;
    overflow-wrap: anywhere;
}
.excluded-suggest-term strong { color: #d8e4f3; font-weight: 850; }
.excluded-suggest-pick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 27px;
    height: 27px;
    padding: 3px 5px;
    border: 1px solid #63646a;
    border-radius: 0;
    background: #393e45;
    color: #d1d6dc;
    font-size: .82rem;
    line-height: 1;
}
.excluded-suggest-pick i { line-height: 1; }

.excluded-words-suggestion-status {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* 05. Collected exclusions --------------------------------------------------- */
.excluded-words-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 10px;
    font-size: .94rem;
}
.excluded-words-list-header > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.excluded-words-list-header i { color: var(--ew-accent); font-size: 1.06rem; }

.excluded-words-counter {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    padding: 5px 10px;
    border: 1px solid #405a76;
    border-radius: 6px;
    background: #192d45;
    color: #d1deed;
    font-size: .77rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
    transform: rotate(2deg);
}
#excludedWordsCount { color: #f4f7fe; font-weight: 950; }

.excluded-words-list {
    min-height: 92px;
    padding: 12px;
    border: 2px dashed #4d5660;
    border-radius: 9px;
    background: var(--ew-input);
}
.excluded-words-chips { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }

.excluded-word-chip {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    gap: 7px;
    padding: 4px 4px 4px 11px;
    border: 1px solid #4c759b;
    border-radius: 7px;
    background: #20354e;
    color: #f4f7fe;
    font-size: .83rem;
    font-weight: 750;
    box-shadow: 2px 3px 0 #101014;
    transition: transform .12s ease;
}
.excluded-word-chip:nth-child(3n + 2) { transform: rotate(-1deg); }
.excluded-word-chip:nth-child(4n + 3) { transform: rotate(1deg); }
.excluded-word-text { overflow-wrap: anywhere; }
.excluded-word-remove {
    display: grid;
    place-items: center;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: #5a3b3d;
    color: #ffdcdf;
    font-size: .77rem;
    cursor: pointer;
}
.excluded-word-remove:hover { background: #ae5259; color: #fff; }
.excluded-word-remove:focus-visible { outline: 2px solid var(--ew-accent); outline-offset: 3px; }

.excluded-words-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px;
    color: var(--ew-muted);
    text-align: center;
    font-size: .85rem;
}
.excluded-words-empty i { color: #7ca9d6; font-size: 1.55rem; transform: rotate(-10deg); }
.excluded-words-empty.d-none { display: none !important; }

/* 06. Matching controls ------------------------------------------------------ */
.excluded-match-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}
.excluded-match-option {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    min-width: 0;
    margin: 0;
    padding: 13px;
    border: 2px solid var(--ew-stroke);
    border-radius: 10px;
    background: var(--ew-paper-high);
    color: var(--ew-ink);
    cursor: pointer;
    box-shadow: 3px 3px 0 var(--ew-shadow);
    transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.excluded-match-option:hover { border-color: #52769a; transform: translateY(-1px); }
.excluded-match-option:has(input:checked) { border-color: var(--ew-accent); background: #253a51; }
.excluded-match-option input[type="radio"] {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin: 2px 0 0;
    accent-color: var(--ew-accent);
    cursor: pointer;
}
.excluded-match-option-content { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.excluded-match-option-content strong { color: var(--ew-ink); font-size: .9rem; }
.excluded-match-option-content small { color: var(--ew-muted); font-size: .77rem; line-height: 1.45; }

/* 07. Save and validation feedback ------------------------------------------ */
.excluded-words-panel-footer { padding: 0 20px 18px; }
.excluded-words-message {
    margin: 0;
    padding: 11px 12px;
    border: 1px solid var(--ew-stroke-strong);
    border-radius: 8px;
    font-size: .84rem;
    line-height: 1.5;
}
.excluded-words-message.d-none { display: none !important; }
.excluded-words-form .alert-info { border-color: #527daf; background: #1d3653; color: #d4eaff; }
.excluded-words-form .alert-success { border-color: #4d8360; background: #20362b; color: #b8e8c9; }
.excluded-words-form .alert-danger { border-color: #a15c63; background: #40282d; color: #ffe0e3; }
.excluded-words-form .alert-warning { border-color: #a18452; background: #403323; color: #ffe4ae; }

/* 09. Small screens and reduced motion -------------------------------------- */
@keyframes ew-appear { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 575.98px) {
    .excluded-words-panel-body { padding: 13px; }
    .excluded-words-panel-footer { padding: 0 13px 13px; }
    .excluded-words-section + .excluded-words-section { margin-top: 15px; padding-top: 15px; }
    .excluded-words-input-group { gap: 8px; }
    #excludedWordsInput { min-height: 44px; padding: 9px 10px; }
    #addExcludedWord { min-height: 44px; padding: 8px 12px; }
    .excluded-words-suggestions { max-height: min(280px, 50vh); padding: 6px 4px; }
    .excluded-suggest-option { margin: 6px; min-height: 47px; }
    .excluded-match-options { grid-template-columns: 1fr; gap: 9px; }
    .excluded-match-option { padding: 11px; }
}
@media (max-width: 380px) {
    #addExcludedWord span { display: none; }
    #addExcludedWord { min-width: 44px; padding: 8px; }
    .excluded-suggest-heading { font-size: .66rem; }
}
@media (prefers-reduced-motion: reduce) {
    .excluded-words-suggestions { animation: none; }
    .excluded-suggest-option, .excluded-suggest-icon, #addExcludedWord,
    #excludedWordsInput, .excluded-match-option, .excluded-word-chip { transition: none; }
}


/* ============================================================================
   10. Animated word bouncer — the mascot for the Add Words section.
   Uses the same original dark navy / #397dc3 palette as the site.
   Pure CSS character; no extra images, libraries, or JS.
   ============================================================================ */

.excluded-words-section-heading {
    display: flex;
    align-items: center;
    gap: 17px;
    min-width: 0;
    margin-bottom: 15px;
}

.excluded-words-section-heading-content {
    flex: 1 1 auto;
    min-width: 0;
}

.excluded-words-section-heading .excluded-words-label {
    margin: 0 0 5px;
    font-size: clamp(1rem, 2.2vw, 1.2rem);
    line-height: 1.25;
}

.excluded-words-section-description {
    margin: 0;
    color: var(--ew-muted);
    font-size: .83rem;
    line-height: 1.45;
}

.excluded-words-mascot {
    position: relative;
    flex: 0 0 82px;
    width: 82px;
    height: 91px;
    isolation: isolate;
    transform-origin: center bottom;
    animation: ew-mascot-bounce 2.8s ease-in-out infinite;
}

.excluded-words-mascot-shadow {
    position: absolute;
    bottom: 0;
    left: 17px;
    width: 49px;
    height: 9px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .35);
    filter: blur(2px);
    z-index: -2;
    animation: ew-mascot-shadow 2.8s ease-in-out infinite;
}

.excluded-words-mascot-body {
    position: absolute;
    top: 14px;
    left: 12px;
    width: 58px;
    height: 57px;
    border: 3px solid #0c1421;
    border-radius: 19px 19px 22px 22px;
    background: linear-gradient(145deg, #ffa34d 0%, #f07829 54%, #b94c13 100%);
    box-shadow: inset 3px 3px 0 rgba(255,255,255,.13), 3px 4px 0 #0c1421;
    transform: rotate(-6deg);
    z-index: 2;
    animation: ew-mascot-tilt 2.8s ease-in-out infinite;
}

.excluded-words-mascot-eye {
    position: absolute;
    top: 20px;
    width: 9px;
    height: 12px;
    border-radius: 50%;
    background: #101826;
    box-shadow: inset 1px 1px 0 rgba(255,255,255,.15);
    animation: ew-mascot-blink 5.1s infinite;
}

.excluded-words-mascot-eye-left { left: 14px; }
.excluded-words-mascot-eye-right { right: 13px; }

.excluded-words-mascot-brow {
    position: absolute;
    top: 12px;
    width: 12px;
    height: 3px;
    border-radius: 3px;
    background: #0c1421;
}

.excluded-words-mascot-brow-left { left: 12px; transform: rotate(14deg); }
.excluded-words-mascot-brow-right { right: 11px; transform: rotate(-14deg); }

.excluded-words-mascot-mouth {
    position: absolute;
    top: 37px;
    left: 22px;
    width: 13px;
    height: 7px;
    border: 3px solid #101826;
    border-top: 0;
    border-radius: 0 0 12px 12px;
}

.excluded-words-mascot-arm {
    position: absolute;
    top: 48px;
    width: 24px;
    height: 6px;
    border: 2px solid #0c1421;
    border-radius: 9px;
    background: #f07829;
    z-index: 1;
}

.excluded-words-mascot-arm-left {
    left: 1px;
    transform: rotate(33deg);
}

.excluded-words-mascot-arm-right {
    right: 0;
    transform: rotate(-40deg);
    transform-origin: left center;
    animation: ew-mascot-wave 2.8s ease-in-out infinite;
}

.excluded-words-mascot-leg {
    position: absolute;
    bottom: 8px;
    width: 8px;
    height: 16px;
    border: 2px solid #0c1421;
    border-radius: 6px;
    background: #f07829;
    z-index: 0;
}

.excluded-words-mascot-leg-left { left: 24px; transform: rotate(13deg); }
.excluded-words-mascot-leg-right { right: 23px; transform: rotate(-13deg); }

.excluded-words-mascot-sign {
    position: absolute;
    top: 0;
    right: -8px;
    z-index: 4;
    padding: 3px 5px;
    border: 2px solid #0c1421;
    border-radius: 4px;
    background: #172230;
    color: #f4f7fe;
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .02em;
    box-shadow: 2px 2px 0 #0c1421;
    transform: rotate(10deg);
    animation: ew-mascot-sign 2.8s ease-in-out infinite;
}

@keyframes ew-mascot-bounce {
    0%, 100% { transform: translateY(0); }
    45%, 55% { transform: translateY(-5px); }
}

@keyframes ew-mascot-shadow {
    0%, 100% { opacity: .6; transform: scaleX(1); }
    50% { opacity: .35; transform: scaleX(.75); }
}

@keyframes ew-mascot-tilt {
    0%, 100% { transform: rotate(-6deg); }
    50% { transform: rotate(4deg); }
}

@keyframes ew-mascot-wave {
    0%, 100% { transform: rotate(-40deg); }
    35%, 60% { transform: rotate(-78deg); }
}

@keyframes ew-mascot-sign {
    0%, 100% { transform: rotate(10deg); }
    50% { transform: rotate(-5deg); }
}

@keyframes ew-mascot-blink {
    0%, 43%, 47%, 100% { transform: scaleY(1); }
    45% { transform: scaleY(.1); }
}

/* Existing markup includes decorative icon wrappers and an empty-state title. */
.excluded-words-list-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.excluded-words-list-title > i { color: #397dc3; }

.excluded-words-empty-icon {
    display: grid;
    place-items: center;
    margin-bottom: 4px;
}

.excluded-match-option-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border: 1px solid var(--ew-stroke);
    border-radius: 8px;
    background: #192331;
    color: #a9bcd0;
}

/* Preserve dark charcoal suggestion rows, including their hover state. */
.excluded-words-form .excluded-suggest-option,
.excluded-words-form .excluded-suggest-option:hover,
.excluded-words-form .excluded-suggest-option.is-active {
    background-color: #252a31;
    background-image: none;
}

.excluded-words-form .excluded-suggest-option:hover,
.excluded-words-form .excluded-suggest-option.is-active {
    background-color: #343538;
}

@media (max-width: 575.98px) {
    .excluded-words-section-heading { gap: 11px; }
    .excluded-words-mascot {
        flex-basis: 67px;
        width: 67px;
        transform: scale(.82);
        transform-origin: left center;
        margin-right: -9px;
    }
    .excluded-words-section-description { font-size: .79rem; }
}

@media (prefers-reduced-motion: reduce) {
    .excluded-words-mascot,
    .excluded-words-mascot-shadow,
    .excluded-words-mascot-body,
    .excluded-words-mascot-eye,
    .excluded-words-mascot-arm-right,
    .excluded-words-mascot-sign {
        animation: none !important;
    }
}


/* ============================================================================
   RESPONSIVE & CROSS-BROWSER HARDENING
   ---------------------------------------------------------------------------
   Progressive enhancements for narrow phones, tablets, desktop zoom, touch,
   browser safe areas, and animated decorative characters. Earlier styles
   remain intact; these targeted overrides deliberately follow existing CSS.
   ============================================================================ */

/* Allow flexible descendants to shrink instead of forcing horizontal scroll. */
.site-main,
.site-header,
.site-footer,
.page-layout,
.feed-shell,
.excluded-words-page,
.excluded-words-form {
    min-width: 0;
}

/* Media and long words should never push their containing card off-screen. */
.site-main img,
.site-main video,
.site-main canvas,
.site-main svg {
    max-width: 100%;
}

.site-main img,
.site-main video {
    height: auto;
}

.rant-body,
.comment-body,
.reply-body,
.rant-content,
.comment-content,
.excluded-word-text,
.excluded-suggest-term,
.excluded-words-section-heading-content {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Keep menus on-screen even at large browser zoom levels. */
.notifications-menu {
    width: min(20.625rem, calc(100vw - 1.25rem));
    max-width: calc(100vw - 1.25rem);
}

/* Use viewport-safe heights on mobile browsers with dynamic toolbars. */
@supports (min-height: 100dvh) {
    body {
        min-height: 100dvh;
    }
}

/* iOS Safari may repaint fixed backgrounds incorrectly during scrolling. */
@media (hover: none) and (pointer: coarse) {
    body {
        background-attachment: scroll, scroll;
    }
}

/* Avoid mobile Safari zoom when a text field receives focus. */
@media (max-width: 47.99875rem) {
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="password"],
    input[type="url"],
    input[type="tel"],
    textarea,
    select,
    #excludedWordsInput {
        font-size: max(1rem, 16px);
    }
}

/* Decorative mascot scales as a single unit; its internal pixel-art face
   retains its proportions instead of stretching individual facial features. */
.excluded-words-section-heading {
    min-width: 0;
}

.excluded-words-section-heading-content {
    flex: 1 1 0;
}

.excluded-words-mascot {
    flex-shrink: 0;
    will-change: auto;
}

.excluded-words-suggestion-anchor {
    min-width: 0;
}

.excluded-words-suggestions {
    max-width: 100%;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* Preserve requested charcoal-only rows, including keyboard focus/hover. */
.excluded-words-form .excluded-suggest-option {
    background: #252a31;
    border-radius: 0;
}

.excluded-words-form .excluded-suggest-option:hover,
.excluded-words-form .excluded-suggest-option.is-active {
    background: #343538;
}

/* Responsive touch targets remain comfortable without widening layouts. */
@media (pointer: coarse) {
    .excluded-word-remove {
        min-width: 2.5rem;
        min-height: 2.5rem;
    }

    .excluded-suggest-option {
        min-height: 2.75rem;
    }
}

@media (max-width: 47.99875rem) {
    .notifications-empty-art {
        width: min(10.625rem, 100%);
        max-width: 100%;
    }

    .excluded-words-panel,
    .excluded-words-panel-body,
    .excluded-words-section {
        min-width: 0;
    }

    .excluded-match-options > *,
    .excluded-words-input-group > * {
        min-width: 0;
    }

    .excluded-suggest-option {
        overflow-wrap: anywhere;
    }
}

/* Smaller phones: reserve the mascot's visual space without overflowing
   its row; keep the internal dimensions and scale the complete character. */
@media (max-width: 35.99875rem) {
    .excluded-words-section-heading {
        align-items: center;
        gap: 0.5rem;
    }

    .excluded-words-mascot {
        flex: 0 0 4.25rem;
        width: 5.125rem;
        height: 5.6875rem;
        margin-right: -0.375rem;
        transform-origin: left center;
        animation-name: ew-mascot-bounce-small;
    }

    .excluded-words-section-heading-content {
        min-width: 0;
    }

    .excluded-words-section-heading .excluded-words-label {
        font-size: clamp(0.9375rem, 3.65vw, 1.075rem);
    }

    .excluded-words-section-description {
        font-size: 0.8125rem;
        line-height: 1.5;
    }

    .notifications-empty-art {
        transform: scale(0.88);
        transform-origin: center center;
        margin-block: -0.4rem;
    }
}

@keyframes ew-mascot-bounce-small {
    0%, 100% { transform: scale(0.82) translateY(0); }
    45%, 55% { transform: scale(0.82) translateY(-5px); }
}

@media (max-width: 22.5rem) {
    .excluded-words-section-heading {
        gap: 0.25rem;
    }

    .excluded-words-mascot {
        flex-basis: 3.45rem;
        margin-right: -0.75rem;
        animation-name: ew-mascot-bounce-tiny;
    }

    .excluded-words-section-description {
        font-size: 0.75rem;
    }

    .notifications-empty-art {
        transform: scale(0.75);
        margin-block: -1rem;
    }
}

@keyframes ew-mascot-bounce-tiny {
    0%, 100% { transform: scale(0.67) translateY(0); }
    45%, 55% { transform: scale(0.67) translateY(-5px); }
}

/* On touch hardware, do not rely on hovering to communicate selection. */
@media (hover: none) {
    .excluded-suggest-option:hover,
    .excluded-words-form .excluded-suggest-option:hover {
        transform: none;
    }
}

/* Honor reduced-motion settings for both cartoon characters and scrolling. */
@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    .notification-bell-icon-wrap,
    .notifications-empty .notifications-bell,
    .notifications-empty .bell-eye,
    .notifications-empty .bell-sparkle,
    .excluded-words-mascot,
    .excluded-words-mascot-shadow,
    .excluded-words-mascot-body,
    .excluded-words-mascot-eye,
    .excluded-words-mascot-arm,
    .excluded-words-mascot-sign {
        animation: none !important;
    }
}

/* ============================================================
   Notifications — full-width rows with consistent outer spacing
   ============================================================ */

/* The scrolling list fills the dropdown. Padding provides a visible
   gutter on every side; the gap separates individual notifications. */
.notifications-menu .notifications-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    gap: 0.625rem;
    padding: 0.75rem;
}

/* Notification cards occupy the entire available inner width rather
   than shrinking to their content or leaving an uneven right edge. */
.notifications-menu .notification-item {
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex: 0 0 auto;
    margin: 0;
}

/* Keep the left/right gutters balanced even on compact phones. */
@media (max-width: 35.99875rem) {
    .notifications-menu .notifications-list {
        gap: 0.5rem;
        padding: 0.625rem;
    }
}


/* ============================================================
   NOTIFICATIONS — EDGE-TO-EDGE CONTENT WITH SMALL CARD GUTTERS
   ============================================================
   The menu controls the total width. The scrolling list has just one
   compact gutter. Both direct rows and nested notification wrappers
   stretch to fill the remaining width without extra inset margins.
   ============================================================ */
.notifications-menu,
.header-notifications .notifications-menu {
    box-sizing: border-box;
    padding-inline: 0;
}

.notifications-menu .notifications-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0.75rem;
    gap: 0.75rem;
}

/* Some notification templates wrap their item in a link or div. */
.notifications-menu .notifications-list > * {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-inline: 0;
}

.notifications-menu .notifications-list .notification-item {
    box-sizing: border-box;
    display: flex;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    margin: 0 !important;
    flex-shrink: 0;
    padding: 0.875rem 0.75rem;
}

.notifications-menu .notification-content,
.notifications-menu .notification-message,
.notifications-menu .notification-message-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 35.99875rem) {
    .notifications-menu .notifications-list {
        padding: 0.625rem;
        gap: 0.625rem;
    }

    .notifications-menu .notifications-list .notification-item {
        padding: 0.8125rem 0.6875rem;
    }
}
/* ============================================================
   AVATAR COLOR PICKER — CROSS-DEVICE SUPPORT
   ============================================================ */

#signupColorSquare,
#profileColorSquare {
    position: relative;
    width: 100%;
    max-width: 100%;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    cursor: crosshair;
    box-sizing: border-box;
}

/* Keep the picker cursor from intercepting gestures. */

#signupColorCursor,
#profileColorCursor {
    pointer-events: none;
}

/* Make the hue sliders easy to operate on touchscreens. */

#signupHueSlider,
#profileHueSlider {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 32px;
    cursor: pointer;
    touch-action: pan-y;
    accent-color: #397DC3;
}

/* Prevent unwanted zoom when entering colors on iPhones. */

@media (max-width: 767.98px) {
    #signupAvatarHex,
    #profileAvatarHex {
        font-size: 16px;
    }
}

/* Keyboard focus indicator. */

#signupColorSquare:focus-visible,
#profileColorSquare:focus-visible {
    outline: 2px solid #397DC3;
    outline-offset: 3px;
}


/* ============================================================================
   NOTIFICATION BELL BROTHER — EXCLUDED WORDS MASCOT FAMILY
   ============================================================================
   Retains existing PHP/Bootstrap markup and AJAX selectors. Both the header
   toggle and the no-notifications illustration depict the SAME bell character:
   navy comic outlines, TheRantItWall blue body, brows, face, arms, feet and
   the gentle bouncy personality of the Excluded Words "NOPE!" mascot.
   Keep this section LAST so it takes precedence over historical bell styling.
   ============================================================================ */

/* 01 — Shared family colors / interaction ---------------------------------- */
.site-header .notification-bell-shell,
.notifications-empty .notifications-empty-art {
    --bell-brother-blue: #397dc3;
    --bell-brother-highlight: #508fca;
    --bell-brother-shadow: #285d92;
    --bell-brother-outline: #0c1421;
    --bell-brother-ink: #101826;
    --bell-brother-cheek: #ee9298;
}

/* 02 — Header: a tiny, animated version of the character ------------------- */
.site-header .notification-toggle.notification-bell-btn {
    overflow: visible;
    isolation: isolate;
    border-color: #375774;
    background: #192b3e;
}

.site-header .notification-bell-shell {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.site-header .notification-bell-icon-wrap {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 32px;
    height: 34px;
    transform-origin: center 15%;
    animation: bellBrotherHeaderBob 2.8s ease-in-out infinite;
}

.site-header .notification-bell-icon {
    color: var(--bell-brother-blue);
    -webkit-text-stroke: 1px var(--bell-brother-outline);
    filter: drop-shadow(1px 2px 0 var(--bell-brother-outline));
}

/* The header's existing face elements become the mascot's facial features. */
.site-header .notification-bell-face {
    top: 10px;
    width: 23px;
    height: 18px;
    border: 2px solid var(--bell-brother-outline);
    border-radius: 7px 7px 9px 9px;
    background: linear-gradient(145deg, var(--bell-brother-highlight), var(--bell-brother-blue));
    box-shadow: inset 1px 1px 0 rgba(255,255,255,.15);
}

.site-header .notification-bell-eye {
    top: 5px;
    width: 4px;
    height: 6px;
    background: var(--bell-brother-ink);
    animation: bellBrotherBlink 5s ease-in-out infinite;
}

.site-header .notification-bell-eye:first-child { left: 4px; }
.site-header .notification-bell-eye:nth-child(2) { right: 4px; }
.site-header .notification-bell-smile {
    bottom: 2px;
    width: 9px;
    height: 5px;
    border-bottom: 2px solid var(--bell-brother-ink);
}
.site-header .notification-bell-face::before,
.site-header .notification-bell-face::after {
    top: 10px;
    width: 3px;
    height: 3px;
    background: var(--bell-brother-cheek);
}

/* The arms are attached to the bobbing bell so they move with the body. */
.site-header .notification-bell-icon-wrap::before,
.site-header .notification-bell-icon-wrap::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 17px;
    width: 11px;
    height: 4px;
    border: 1.5px solid var(--bell-brother-outline);
    border-radius: 6px;
    background: var(--bell-brother-blue);
    pointer-events: none;
}
.site-header .notification-bell-icon-wrap::before {
    left: -5px;
    transform: rotate(30deg);
}
.site-header .notification-bell-icon-wrap::after {
    right: -5px;
    transform: rotate(-42deg);
    animation: bellBrotherHeaderWave 2.8s ease-in-out infinite;
}

/* Legs sit behind the icon, visible below the bell rim. */
.site-header .notification-bell-shell::before,
.site-header .notification-bell-shell::after {
    content: "";
    position: absolute;
    z-index: 1;
    bottom: 0;
    width: 5px;
    height: 10px;
    border: 1.5px solid var(--bell-brother-outline);
    border-radius: 4px;
    background: var(--bell-brother-blue);
    pointer-events: none;
}
.site-header .notification-bell-shell::before { left: calc(50% - 9px); transform: rotate(13deg); }
.site-header .notification-bell-shell::after { right: calc(50% - 9px); transform: rotate(-13deg); }

.site-header .notification-toggle.notification-bell-btn:hover .notification-bell-icon-wrap,
.site-header .notification-toggle.notification-bell-btn:focus-visible .notification-bell-icon-wrap,
.site-header .notification-toggle.notification-bell-btn[aria-expanded="true"] .notification-bell-icon-wrap {
    animation: bellBrotherHeaderGreet .65s ease-in-out 1;
}

/* Sparkles are accessories, not hit targets. */
.site-header .notification-bell-sparkle { color: #a7b9ca; }
.site-header .notification-toggle.notification-bell-btn .notification-dot { z-index: 8; }

/* 03 — Empty dropdown: the same brother in a big, dancing pose ------------- */
.notifications-empty {
    overflow: hidden;
    background: #101b29;
}
.notifications-empty .notifications-empty-art {
    position: relative;
    width: 170px;
    height: 165px;
    margin: 0 auto 14px;
    overflow: visible;
}
.notifications-empty .notifications-bell {
    position: relative;
    z-index: 2;
    width: 108px;
    height: 116px;
    transform-origin: center 20%;
    overflow: visible;
    animation: bellBrotherBigDance 2.8s ease-in-out infinite;
}
.notifications-empty .notifications-bell > .bi-bell-fill {
    z-index: 2;
    color: var(--bell-brother-blue);
    font-size: 96px;
    -webkit-text-stroke: 2px var(--bell-brother-outline);
    filter: drop-shadow(3px 4px 0 var(--bell-brother-outline));
}

.notifications-empty .notifications-bell-face {
    z-index: 4;
    top: 34px;
    width: 57px;
    height: 45px;
    border: 3px solid var(--bell-brother-outline);
    border-radius: 17px 17px 20px 20px;
    background: linear-gradient(145deg, var(--bell-brother-highlight), var(--bell-brother-blue) 60%, var(--bell-brother-shadow));
    box-shadow: inset 3px 3px 0 rgba(255,255,255,.14), 2px 3px 0 var(--bell-brother-outline);
}
.notifications-empty .bell-eye {
    top: 13px;
    width: 9px;
    height: 12px;
    background: var(--bell-brother-ink);
    animation: bellBrotherBlink 5s ease-in-out infinite;
}
.notifications-empty .bell-eye:first-child { left: 12px; }
.notifications-empty .bell-eye:nth-child(2) { right: 12px; }
.notifications-empty .bell-smile {
    bottom: 5px;
    width: 22px;
    height: 11px;
    border-bottom: 3px solid var(--bell-brother-ink);
}
.notifications-empty .notifications-bell-face::before,
.notifications-empty .notifications-bell-face::after {
    top: 26px;
    width: 8px;
    height: 5px;
    background: var(--bell-brother-cheek);
}

/* Two articulated arms mirror the NOPE! mascot's raised-arm silhouette. */
.notifications-empty .notifications-bell::before,
.notifications-empty .notifications-bell::after {
    content: "";
    position: absolute;
    top: 65px;
    z-index: 1;
    width: 34px;
    height: 9px;
    border: 3px solid var(--bell-brother-outline);
    border-radius: 9px;
    background: var(--bell-brother-blue);
    pointer-events: none;
}
.notifications-empty .notifications-bell::before { left: -12px; transform: rotate(30deg); }
.notifications-empty .notifications-bell::after {
    right: -12px;
    transform-origin: left center;
    animation: bellBrotherBigWave 2.8s ease-in-out infinite;
}

/* Two tiny boots, drawn as a pair of shapes behind the dancing bell. */
.notifications-empty .notifications-empty-art::before,
.notifications-empty .notifications-empty-art::after {
    content: "";
    position: absolute;
    z-index: 1;
    bottom: 16px;
    width: 13px;
    height: 25px;
    border: 3px solid var(--bell-brother-outline);
    border-radius: 8px 8px 6px 6px;
    background: var(--bell-brother-blue);
    pointer-events: none;
}
.notifications-empty .notifications-empty-art::before { left: calc(50% - 21px); transform: rotate(14deg); }
.notifications-empty .notifications-empty-art::after { right: calc(50% - 21px); transform: rotate(-14deg); }

.notifications-empty .notifications-sparkle { z-index: 5; }
.notifications-empty .notifications-sparkle.sparkle-one { color: #a9bdd2; }
.notifications-empty .notifications-sparkle.sparkle-two { color: #80b2e4; }
.notifications-empty .notifications-sparkle.sparkle-three { color: #ee9298; }

/* 04 — Motion -------------------------------------------------------------- */
@keyframes bellBrotherHeaderBob {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-2px) rotate(4deg); }
}
@keyframes bellBrotherHeaderWave {
    0%, 100% { transform: rotate(-40deg); }
    45%, 60% { transform: rotate(-75deg); }
}
@keyframes bellBrotherHeaderGreet {
    0%, 100% { transform: rotate(0); }
    28% { transform: rotate(-12deg); }
    60% { transform: rotate(10deg); }
}
@keyframes bellBrotherBigDance {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    25% { transform: translateY(-8px) rotate(6deg); }
    50% { transform: translateY(-3px) rotate(-4deg); }
    75% { transform: translateY(-9px) rotate(7deg); }
}
@keyframes bellBrotherBigWave {
    0%, 100% { transform: rotate(-36deg); }
    40%, 65% { transform: rotate(-78deg); }
}
@keyframes bellBrotherBlink {
    0%, 43%, 47%, 100% { transform: scaleY(1); }
    45% { transform: scaleY(.12); }
}

/* 05 — Scaling / touch screens -------------------------------------------- */
@media (max-width: 575.98px) {
    .notifications-empty .notifications-empty-art {
        width: 150px;
        height: 150px;
    }
    .notifications-empty .notifications-bell {
        transform-origin: center 20%;
        width: 98px;
        height: 105px;
    }
    .notifications-empty .notifications-empty-art::before,
    .notifications-empty .notifications-empty-art::after { bottom: 13px; }
    .site-header .notification-toggle.notification-bell-btn {
        min-width: 40px;
        min-height: 40px;
    }
}
@media (max-width: 359.98px) {
    .notifications-empty .notifications-empty-art { width: 140px; height: 140px; }
    .notifications-empty .notifications-bell { scale: .82; }
}
@media (hover: none) {
    .site-header .notification-toggle.notification-bell-btn:hover .notification-bell-icon-wrap {
        animation: bellBrotherHeaderBob 2.8s ease-in-out infinite;
    }
}
@media (prefers-reduced-motion: reduce) {
    .site-header .notification-bell-icon-wrap,
    .site-header .notification-bell-eye,
    .site-header .notification-bell-icon-wrap::after,
    .notifications-empty .notifications-bell,
    .notifications-empty .notifications-bell::after,
    .notifications-empty .bell-eye,
    .notifications-empty .notifications-sparkle,
    .notifications-empty .notifications-empty-bubble {
        animation: none !important;
        transition: none !important;
    }
}


/* ============================================================================
   NOTIFICATIONS — THE NOPE! MASCOT HOLDING A GOLD BELL — ORANGE MASCOT
   ============================================================================
   Based on the original Excluded Words mascot (blue rounded-square body,
   navy comic outline, small eyes, smile, waving arms and little boots).
   The existing Bootstrap bell icon is now the GOLD HAT, not the character.
   Keeps existing notifications PHP markup, badge and AJAX selectors intact.
   Deliberately starts from the pre-dancing-NOPE! app.css version.
   ============================================================================ */

/* Shared comic-palette and predictable layering. */
.site-header .notification-bell-shell,
.notifications-empty .notifications-empty-art {
    --nope-bell-blue: #f07829;
    --nope-bell-outline: #0c1421;
    --nope-bell-ink: #101826;
    --nope-bell-gold: #f2b737;
    --nope-bell-gold-bright: #ffe07a;
    --nope-bell-gold-dark: #c78312;
}

/* Header mascot: the original rounded blue NOPE! body. */
.site-header .notification-bell-icon-wrap {
    position: relative;
    width: 29px;
    height: 30px;
    border: 2px solid var(--nope-bell-outline);
    border-radius: 10px 10px 12px 12px;
    background: linear-gradient(145deg, #ffa34d, var(--nope-bell-blue) 55%, #b94c13);
    box-shadow: inset 1px 1px 0 rgba(255,255,255,.18), 2px 2px 0 var(--nope-bell-outline);
    transform-origin: 50% 85%;
    animation: nopeBodyBounce 2.8s ease-in-out infinite;
}

/* The Bootstrap bell now sits in his hand so it looks like he is shaking it. */
.site-header .notification-bell-icon-wrap > .notification-bell-icon {
    position: absolute;
    z-index: 7;
    top: 2px;
    right: -16px;
    display: block;
    width: 16px;
    font-size: 17px;
    line-height: 1;
    text-align: center;
    color: var(--nope-bell-gold);
    background: linear-gradient(180deg, var(--nope-bell-gold-bright), var(--nope-bell-gold-dark));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: .7px var(--nope-bell-outline);
    filter: drop-shadow(1px 1px 0 var(--nope-bell-outline));
    transform-origin: 20% 18%;
    transform: rotate(10deg);
    animation: nopeBellShake 1.15s ease-in-out infinite;
    pointer-events: none;
}

/* Face belongs to the square body. */
.site-header .notification-bell-icon-wrap > .notification-bell-face {
    position: absolute;
    top: 4px;
    left: 50%;
    width: 24px;
    height: 21px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: translateX(-50%);
}
.site-header .notification-bell-face .notification-bell-eye {
    top: 6px;
    width: 5px;
    height: 7px;
    background: var(--nope-bell-ink);
}
.site-header .notification-bell-face .notification-bell-smile {
    bottom: 2px;
    width: 10px;
    height: 6px;
    border-bottom: 2px solid var(--nope-bell-ink);
}
.site-header .notification-bell-face::before,
.site-header .notification-bell-face::after {
    background: #ee9298;
}

/* Arms: left relaxed, right raised toward the bell. */
.site-header .notification-bell-icon-wrap::before,
.site-header .notification-bell-icon-wrap::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 11px;
    height: 5px;
    border: 2px solid var(--nope-bell-outline);
    border-radius: 999px;
    background: var(--nope-bell-blue);
}
.site-header .notification-bell-icon-wrap::before {
    top: 16px;
    left: -10px;
    transform: rotate(16deg);
}
.site-header .notification-bell-icon-wrap::after {
    top: 8px;
    right: -12px;
    width: 13px;
    transform: rotate(-34deg);
}

/* Legs. */
.site-header .notification-bell-shell::before,
.site-header .notification-bell-shell::after {
    bottom: -4px;
    width: 6px;
    height: 9px;
    border: 2px solid var(--nope-bell-outline);
    border-radius: 999px;
    background: var(--nope-bell-blue);
}
.site-header .notification-bell-shell::before {
    left: 7px;
    transform: rotate(10deg);
}
.site-header .notification-bell-shell::after {
    right: 7px;
    transform: rotate(-10deg);
}
.site-header .notification-toggle.notification-bell-btn:hover .notification-bell-icon-wrap,
.site-header .notification-toggle.notification-bell-btn:focus-visible .notification-bell-icon-wrap,
.site-header .notification-toggle.notification-bell-btn[aria-expanded="true"] .notification-bell-icon-wrap {
    animation: nopeWaveHello .65s ease-in-out 1;
}
.site-header .notification-toggle.notification-bell-btn .notification-dot {
    z-index: 9;
}

/* Empty-state mascot: the SAME NOPE! body holding and shaking a bell. */
.notifications-empty .notifications-empty-art {
    width: 170px;
    height: 160px;
    margin: 0 auto 14px;
}
.notifications-empty .notifications-bell {
    position: relative;
    z-index: 3;
    display: block;
    width: 83px;
    height: 84px;
    overflow: visible;
    border: 4px solid var(--nope-bell-outline);
    border-radius: 26px 26px 30px 30px;
    background: linear-gradient(145deg, #ffa34d 0%, #f07829 56%, #b94c13 100%);
    box-shadow: inset 4px 4px 0 rgba(255,255,255,.14), 4px 5px 0 var(--nope-bell-outline);
    transform-origin: 50% 90%;
    animation: nopeBodyDance 2.8s ease-in-out infinite;
}
.notifications-empty .notifications-bell > .bi-bell-fill {
    position: absolute;
    z-index: 6;
    top: 8px;
    right: -43px;
    display: block;
    width: 38px;
    font-size: 37px;
    line-height: 1;
    color: var(--nope-bell-gold);
    background: linear-gradient(180deg, var(--nope-bell-gold-bright), var(--nope-bell-gold) 48%, var(--nope-bell-gold-dark));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1.15px var(--nope-bell-outline);
    filter: drop-shadow(2px 2px 0 var(--nope-bell-outline));
    text-align: center;
    transform-origin: 22% 18%;
    transform: rotate(10deg);
    animation: nopeBellShake 1s ease-in-out infinite;
    pointer-events: none;
}
.notifications-empty .notifications-bell-face {
    position: absolute;
    top: 14px;
    left: 50%;
    width: 66px;
    height: 57px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: translateX(-50%);
}
.notifications-empty .bell-eye {
    top: 9px;
    width: 10px;
    height: 14px;
    background: var(--nope-bell-ink);
}
.notifications-empty .bell-eye:first-child { left: 13px; }
.notifications-empty .bell-eye:nth-child(2) { right: 13px; }
.notifications-empty .bell-smile {
    bottom: 7px;
    width: 22px;
    height: 12px;
    border-bottom: 3px solid var(--nope-bell-ink);
}
.notifications-empty .notifications-bell-face::before,
.notifications-empty .notifications-bell-face::after {
    top: 29px;
    background: #ee9298;
}
.notifications-empty .notifications-bell::before,
.notifications-empty .notifications-bell::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 29px;
    height: 9px;
    border: 3px solid var(--nope-bell-outline);
    border-radius: 999px;
    background: var(--nope-bell-blue);
}
.notifications-empty .notifications-bell::before {
    top: 47px;
    left: -23px;
    transform: rotate(18deg);
}
.notifications-empty .notifications-bell::after {
    top: 24px;
    right: -26px;
    width: 31px;
    transform: rotate(-38deg);
}
.notifications-empty .notifications-empty-art::before,
.notifications-empty .notifications-empty-art::after {
    bottom: 12px;
    width: 12px;
    height: 23px;
    background: var(--nope-bell-blue);
    border-color: var(--nope-bell-outline);
}

@keyframes nopeBodyBounce {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-2px) rotate(5deg); }
}
@keyframes nopeWaveHello {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-12deg); }
    65% { transform: rotate(10deg); }
}
@keyframes nopeBodyDance {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    25% { transform: translateY(-7px) rotate(6deg); }
    50% { transform: translateY(-2px) rotate(-4deg); }
    75% { transform: translateY(-8px) rotate(7deg); }
}
@keyframes nopeBellShake {
    0%, 100% { transform: rotate(10deg); }
    20% { transform: rotate(-16deg); }
    40% { transform: rotate(14deg); }
    60% { transform: rotate(-12deg); }
    80% { transform: rotate(12deg); }
}

@media (max-width: 575.98px) {
    .notifications-empty .notifications-empty-art {
        width: 145px;
        height: 150px;
    }
    .notifications-empty .notifications-bell {
        width: 76px;
        height: 78px;
    }
    .notifications-empty .notifications-bell > .bi-bell-fill {
        top: 8px;
        right: -37px;
        width: 34px;
        font-size: 33px;
    }
    .notifications-empty .notifications-bell-face {
        top: 12px;
        width: 59px;
        height: 54px;
    }
    .notifications-empty .notifications-bell::before {
        top: 42px;
    }
    .notifications-empty .notifications-bell::after {
        top: 22px;
        right: -24px;
        width: 28px;
    }
    .site-header .notification-bell-icon-wrap > .notification-bell-icon {
        right: -15px;
        font-size: 16px;
    }
}

@media (max-width: 359.98px) {
    .notifications-empty .notifications-bell {
        scale: 1;
    }
    .notifications-empty .notifications-bell > .bi-bell-fill {
        right: -34px;
        font-size: 30px;
        width: 30px;
    }
}

@media (hover: none) {
    .site-header .notification-toggle.notification-bell-btn:hover .notification-bell-icon-wrap {
        animation: nopeBodyBounce 2.8s ease-in-out infinite;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-header .notification-bell-icon-wrap,
    .site-header .notification-bell-icon-wrap > .notification-bell-icon,
    .notifications-empty .notifications-bell,
    .notifications-empty .notifications-bell > .bi-bell-fill {
        animation: none !important;
        transition: none !important;
    }
}


/* ============================================================================
   FINAL RESPONSIVE MASCOT STABILITY FIX — ALL SCREEN SIZES
   ============================================================================
   Root cause addressed: nested transforms, breakpoint scale() on a parent,
   separately animated children, and thick rotated borders can create apparent
   dark cracks/seams due to fractional-pixel rasterization on resize.

   Keep character drawings at their designed pixel dimensions, reserve the
   matching layout width instead of squeezing their internal anatomy, and move
   entire characters in whole pixels. This keeps the site theme and its
   existing HTML structure unchanged.
   ============================================================================ */

/* Stable layout and prevent the heading's flexbox from compressing anatomy. */
.excluded-words-section-heading,
.excluded-words-section-heading-content {
    min-width: 0;
}

.excluded-words-mascot {
    box-sizing: border-box;
    flex: 0 0 82px;
    width: 82px;
    height: 91px;
    min-width: 82px;
    min-height: 91px;
    max-width: 82px;
    max-height: 91px;
    margin-right: 0;
    transform: none;
    transform-origin: center bottom;
    animation: ew-mascot-bounce-solid 2.8s ease-in-out infinite;
    contain: layout style;
}

.excluded-words-mascot-body,
.excluded-words-mascot-arm,
.excluded-words-mascot-leg,
.excluded-words-mascot-sign,
.site-header .notification-bell-icon-wrap,
.notifications-empty .notifications-bell {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Keep the body on top of the arm roots; ensure solid orange fills. */
.excluded-words-mascot-body {
    z-index: 3;
    background: linear-gradient(145deg, #ffa34d 0%, #f07829 54%, #b94c13 100%);
}
.excluded-words-mascot-arm { z-index: 2; background: #f07829; }
.excluded-words-mascot-leg { z-index: 1; background: #f07829; }
.excluded-words-mascot-sign { z-index: 5; }

/* Animating whole pixels (not scale) avoids zoom-dependent black seams. */
@keyframes ew-mascot-bounce-solid {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* Notification mascot keeps the solid color, limbs, face and waving bell. */
.site-header .notification-bell-shell {
    flex: 0 0 auto;
    overflow: visible;
}
.site-header .notification-bell-icon-wrap {
    box-sizing: border-box;
    flex: 0 0 auto;
    overflow: visible;
    background: linear-gradient(145deg, #ffa34d 0%, #f07829 56%, #b94c13 100%);
}
.site-header .notification-bell-icon-wrap::before,
.site-header .notification-bell-icon-wrap::after,
.site-header .notification-bell-shell::before,
.site-header .notification-bell-shell::after {
    background: #f07829;
}
.notifications-empty .notifications-bell {
    box-sizing: border-box;
    flex: 0 0 auto;
    overflow: visible;
    background: linear-gradient(145deg, #ffa34d 0%, #f07829 56%, #b94c13 100%);
}
.notifications-empty .notifications-bell::before,
.notifications-empty .notifications-bell::after,
.notifications-empty .notifications-empty-art::before,
.notifications-empty .notifications-empty-art::after {
    background: #f07829;
}

/* Anchor the empty state art with real space instead of scaling a parent. */
.notifications-empty .notifications-empty-art {
    width: 170px;
    max-width: 100%;
    height: 160px;
    margin: 0 auto 14px;
    transform: none;
    overflow: visible;
}

/* Responsiveness comes from the surrounding layout, not shrinking face parts. */
@media (max-width: 575.98px) {
    .excluded-words-section-heading {
        gap: 8px;
        align-items: center;
    }
    .excluded-words-mascot {
        flex: 0 0 82px;
        width: 82px;
        min-width: 82px;
        height: 91px;
        min-height: 91px;
        margin: 0;
        transform: none;
        animation-name: ew-mascot-bounce-solid;
    }
    .excluded-words-section-heading-content {
        flex: 1 1 0;
        min-width: 0;
        overflow-wrap: break-word;
    }
    .excluded-words-section-heading .excluded-words-label {
        font-size: clamp(0.875rem, 3.7vw, 1.0625rem);
        overflow-wrap: break-word;
    }
    .excluded-words-section-description {
        font-size: clamp(0.75rem, 3.1vw, 0.8125rem);
        line-height: 1.45;
    }
    .notifications-empty .notifications-empty-art {
        width: 170px;
        height: 160px;
        margin: 0 auto 14px;
        transform: none;
    }
    .notifications-empty .notifications-bell {
        width: 83px;
        height: 84px;
    }
    .notifications-empty .notifications-bell > .bi-bell-fill {
        top: 8px;
        right: -43px;
        width: 38px;
        font-size: 37px;
    }
    .notifications-empty .notifications-bell-face {
        top: 14px;
        width: 66px;
        height: 57px;
    }
    .notifications-empty .notifications-bell::before { top: 47px; }
    .notifications-empty .notifications-bell::after {
        top: 24px;
        right: -26px;
        width: 31px;
    }
}

@media (max-width: 359.98px) {
    .excluded-words-section-heading { gap: 4px; }
    .excluded-words-mascot {
        flex-basis: 82px;
        width: 82px;
        min-width: 82px;
        transform: none;
        animation-name: ew-mascot-bounce-solid;
    }
    .notifications-empty .notifications-empty-art { transform: none; }
    .notifications-empty .notifications-bell { scale: 1; }
}

/* Avoid permanently turning on hover animations on touch-only devices. */
@media (hover: none) {
    .site-header .notification-toggle.notification-bell-btn:hover .notification-bell-icon-wrap {
        animation: nopeBodyBounce 2.8s ease-in-out infinite;
    }
}

/* Respect user motion preference, including separate bell-hand animation. */
@media (prefers-reduced-motion: reduce) {
    .excluded-words-mascot,
    .excluded-words-mascot *,
    .site-header .notification-bell-icon-wrap,
    .site-header .notification-bell-icon-wrap *,
    .notifications-empty .notifications-bell,
    .notifications-empty .notifications-bell * {
        animation: none !important;
        transition: none !important;
    }
}


/* ============================================================================
   COMMUNITY RULES — ORANGE SHIELD KEEPER MASCOT
   A separate member of the NOPE! mascot family. Pure CSS, no images or JS.
   Uses fixed internal geometry and scales the whole scene via font-size to
   avoid subpixel seams in facial features and limbs on mobile browsers.
   ============================================================================ */
.rules-hero .rules-keeper {
    --rk-orange: #f07829;
    --rk-orange-light: #ffad60;
    --rk-orange-dark: #bd4b19;
    --rk-outline: #18202c;
    --rk-size: 1;
    position: relative;
    display: block;
    flex: 0 0 110px;
    width: 110px;
    height: 130px;
    margin: 0 auto;
    isolation: isolate;
    pointer-events: none;
}
.rules-hero .rules-keeper *,
.rules-hero .rules-keeper *::before,
.rules-hero .rules-keeper *::after {
    box-sizing: border-box;
}
.rules-hero .rules-keeper-shadow {
    position: absolute;
    left: 20px;
    right: 16px;
    bottom: 4px;
    height: 12px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .33);
    filter: blur(3px);
    animation: rulesKeeperShadow 2.6s ease-in-out infinite;
}
.rules-hero .rules-keeper-body {
    position: absolute;
    z-index: 3;
    left: 17px;
    top: 21px;
    width: 75px;
    height: 79px;
    border: 3px solid var(--rk-outline);
    border-radius: 23px 23px 26px 26px;
    background: linear-gradient(135deg, var(--rk-orange-light), var(--rk-orange) 44%, var(--rk-orange-dark));
    box-shadow: inset 3px 3px 0 rgba(255,255,255,.20), 3px 4px 0 rgba(0,0,0,.23);
    transform-origin: 50% 85%;
    animation: rulesKeeperBob 2.6s ease-in-out infinite;
}
.rules-hero .rules-keeper-brow,
.rules-hero .rules-keeper-eye,
.rules-hero .rules-keeper-mouth {
    position: absolute;
    display: block;
}
.rules-hero .rules-keeper-brow {
    top: 23px;
    width: 14px;
    height: 3px;
    border-radius: 3px;
    background: var(--rk-outline);
}
.rules-hero .rules-keeper-brow-left { left: 13px; transform: rotate(-9deg); }
.rules-hero .rules-keeper-brow-right { right: 13px; transform: rotate(9deg); }
.rules-hero .rules-keeper-eye {
    top: 32px;
    width: 8px;
    height: 12px;
    border-radius: 50%;
    background: var(--rk-outline);
}
.rules-hero .rules-keeper-eye-left { left: 17px; }
.rules-hero .rules-keeper-eye-right { right: 17px; }
.rules-hero .rules-keeper-mouth {
    left: 50%;
    top: 46px;
    width: 18px;
    height: 10px;
    border-bottom: 3px solid var(--rk-outline);
    border-radius: 0 0 50% 50%;
    transform: translateX(-50%);
}
.rules-hero .rules-keeper-cheek {
    position: absolute;
    top: 45px;
    width: 10px;
    height: 6px;
    border-radius: 50%;
    background: #ffaf94;
    opacity: .8;
}
.rules-hero .rules-keeper-cheek-left { left: 7px; }
.rules-hero .rules-keeper-cheek-right { right: 7px; }
.rules-hero .rules-keeper-arm {
    position: absolute;
    z-index: 2;
    top: 64px;
    width: 24px;
    height: 10px;
    border: 3px solid var(--rk-outline);
    border-radius: 999px;
    background: var(--rk-orange);
}
.rules-hero .rules-keeper-arm-left { left: 2px; transform: rotate(26deg); }
.rules-hero .rules-keeper-arm-right { right: 1px; top: 56px; transform: rotate(-38deg); }
.rules-hero .rules-keeper-leg {
    position: absolute;
    z-index: 1;
    top: 94px;
    width: 13px;
    height: 25px;
    border: 3px solid var(--rk-outline);
    border-radius: 0 0 9px 9px;
    background: var(--rk-orange-dark);
}
.rules-hero .rules-keeper-leg-left { left: 32px; transform: rotate(12deg); }
.rules-hero .rules-keeper-leg-right { right: 31px; transform: rotate(-12deg); }
/* Protective shield, held just outside the character's raised hand. */
.rules-hero .rules-keeper-shield {
    position: absolute;
    z-index: 5;
    right: -8px;
    top: 12px;
    display: grid;
    place-items: center;
    width: 43px;
    height: 49px;
    border: 3px solid var(--rk-outline);
    border-radius: 13px 13px 19px 19px;
    background: linear-gradient(135deg, #8fbfff 0%, #397dc3 60%, #20588b 100%);
    clip-path: polygon(50% 0, 98% 17%, 95% 68%, 50% 100%, 5% 68%, 2% 17%);
    filter: drop-shadow(2px 2px 0 rgba(0,0,0,.34));
    transform-origin: 50% 85%;
    animation: rulesKeeperShield 2.6s ease-in-out infinite;
}
.rules-hero .rules-keeper-shield .bi {
    color: white;
    font-size: 24px;
    line-height: 1;
    -webkit-text-stroke: .25px #0c385f;
}
/* Position the character alongside the hero text without replacing branding. */
.rules-hero .rules-keeper-spot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
}
.rules-hero .rules-hero-text { min-width: 0; }
@keyframes rulesKeeperBob {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50% { transform: translateY(-5px) rotate(3deg); }
}
@keyframes rulesKeeperShadow {
    0%, 100% { transform: scaleX(1); opacity: .55; }
    50% { transform: scaleX(.85); opacity: .32; }
}
@keyframes rulesKeeperShield {
    0%, 100% { transform: rotate(9deg); }
    50% { transform: rotate(-9deg); }
}
@media (min-width: 768px) {
    .rules-hero.rules-hero-with-keeper {
        grid-template-columns: minmax(100px, 126px) minmax(0, 1fr);
        align-items: center;
    }
}
@media (max-width: 767.98px) {
    .rules-hero.rules-hero-with-keeper {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        text-align: center;
    }
    .rules-hero .rules-keeper-spot { min-height: 120px; }
    .rules-hero .rules-keeper { flex-basis: 110px; }
}
@media (max-width: 359.98px) {
    .rules-hero .rules-keeper-spot { min-height: 113px; }
    .rules-hero .rules-keeper { margin-top: -6px; }
}
@media (prefers-reduced-motion: reduce) {
    .rules-hero .rules-keeper-body,
    .rules-hero .rules-keeper-shadow,
    .rules-hero .rules-keeper-shield {
        animation: none !important;
    }
}

/* ============================================================================
   RANT COMPOSER — AVATAR BESIDE TEXTAREA
   Keeps the avatar close to the textarea rather than on the outer card edge.
   These rules account for the composer body's existing 10px side margins.
   ============================================================================ */

.rant-composer .rant-composer-main {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
    min-width: 0;
    padding-left: 10px;
    padding-right: 10px;
}

.rant-composer .rant-composer-main > .composer-body {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    margin: 0;
}

.rant-composer .rant-composer-main > .rant-composer-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    margin: 4px 0 0;
    padding: 0;
    border-radius: 50%;
    background-image: none;
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
}

@media (max-width: 575.98px) {
    .rant-composer .rant-composer-main {
        gap: 5px;
        padding-left: 7px;
        padding-right: 7px;
    }

    .rant-composer .rant-composer-main > .composer-body {
        margin: 0;
    }

    .rant-composer .rant-composer-main > .rant-composer-avatar {
        flex-basis: 32px;
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
}

@media (max-width: 359.98px) {
    .rant-composer .rant-composer-main {
        gap: 4px;
        padding-left: 5px;
        padding-right: 5px;
    }

    .rant-composer .rant-composer-main > .rant-composer-avatar {
        flex-basis: 30px;
        width: 30px;
        height: 30px;
        font-size: 13px;
    }
}


/* ============================================================================
   COMMENT FORM — STABLE TWO-ROW LAYOUT
   Row 1: avatar | textarea with emoji picker and counter
   Row 2:        | identity switch and Post Comment button
   Does not change the nested reply form layout.
   ============================================================================ */

.comment-form {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: start;
    column-gap: 8px;
    row-gap: 8px;
    width: 100%;
    min-width: 0;
}

.comment-form > .comment-form-avatar {
    position: static;
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    width: 30px;
    height: 30px;
    min-width: 30px;
    flex: none;
    margin: 4px 0 0;
    padding: 0;
    background-image: none;
}

.comment-form > .comment-input-wrap {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    flex: none;
    margin: 0;
}

.comment-form > .comment-form-controls {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    width: 100%;
    min-width: 0;
}

.comment-form .comment-form-controls > .comment-anon-switch {
    display: inline-flex;
    align-items: center;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    gap: 7px;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    white-space: normal;
}

.comment-form .comment-form-controls > .comment-anon-switch > .form-check-input {
    position: static;
    float: none;
    flex: 0 0 auto;
    margin: 0;
}

.comment-form .comment-form-controls > .comment-anon-switch > .form-check-label {
    display: inline-block;
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.comment-form .comment-posting-as strong {
    color: #73baff;
    font-weight: 700;
}

.comment-form .comment-form-controls > .btn-comment {
    flex: 0 0 auto;
    width: auto;
    margin: 0 0 0 auto;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .comment-form {
        grid-template-columns: 28px minmax(0, 1fr);
        column-gap: 6px;
        row-gap: 7px;
    }

    .comment-form > .comment-form-avatar {
        width: 28px;
        height: 28px;
        min-width: 28px;
    }

    .comment-form .comment-form-controls > .comment-anon-switch > .form-check-label {
        font-size: 11px;
    }
}

@media (max-width: 359.98px) {
    .comment-form > .comment-form-controls {
        gap: 6px;
    }

    .comment-form .comment-form-controls > .btn-comment {
        min-width: 0;
    }
}


/* ============================================================================
   REPLY FORM — STABLE TWO-ROW LAYOUT (MATCHES COMMENT COMPOSER)
   Row 1: avatar | textarea with emoji picker and counter
   Row 2:        | identity switch and Cancel / Post Reply buttons
   The footer occupies its own grid row, so the switch cannot squeeze the textarea.
   ============================================================================ */

.reply-form {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: start;
    column-gap: 8px;
    row-gap: 8px;
    width: 100%;
    min-width: 0;
}

.reply-form > .reply-entry-row {
    display: contents;
}

.reply-form > .reply-entry-row > .reply-form-avatar {
    position: static;
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    flex: none;
    width: 30px;
    height: 30px;
    min-width: 30px;
    margin: 4px 0 0;
    padding: 0;
    background-image: none;
}

.reply-form > .reply-entry-row > .reply-input-wrap {
    grid-column: 2;
    grid-row: 1;
    position: relative;
    flex: none;
    width: 100%;
    min-width: 0;
    margin: 0;
}

.reply-form > .reply-form-footer {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.reply-form > .reply-form-footer > .comment-anon-switch {
    display: inline-flex;
    align-items: center;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    gap: 7px;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    white-space: normal;
}

.reply-form > .reply-form-footer > .comment-anon-switch > .form-check-input {
    position: static;
    float: none;
    flex: 0 0 auto;
    margin: 0;
}

.reply-form > .reply-form-footer > .comment-anon-switch > .form-check-label {
    display: inline-block;
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.reply-form .reply-posting-as strong {
    color: #73baff;
    font-weight: 700;
}

.reply-form > .reply-form-footer > .reply-form-buttons {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 7px;
    width: auto;
    min-width: 0;
    margin: 0 0 0 auto;
}

.reply-form > .reply-form-footer > .reply-form-buttons > .btn {
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
}

/* The optional replying-to context must remain full width. */
.reply-form > .reply-context {
    grid-column: 1 / -1;
    grid-row: auto;
    min-width: 0;
}

@media (max-width: 575.98px) {
    .reply-form {
        grid-template-columns: 28px minmax(0, 1fr);
        column-gap: 6px;
        row-gap: 7px;
    }

    .reply-form > .reply-entry-row > .reply-form-avatar {
        width: 28px;
        height: 28px;
        min-width: 28px;
    }

    .reply-form > .reply-form-footer > .comment-anon-switch > .form-check-label {
        font-size: 11px;
    }
}

@media (max-width: 359.98px) {
    .reply-form > .reply-form-footer {
        gap: 6px;
    }

    .reply-form > .reply-form-footer > .reply-form-buttons {
        gap: 5px;
    }
}


/* ========================================================================
   ADMIN DROPDOWN COLORS
   Source: admin-dropdown-colors.css
   ======================================================================== */

/* ==========================================
   ADMIN DROPDOWN ACTIONS
   Applies to rant, comment and reply menus.
========================================== */

/* Delete rant, comment or reply - orange */
.wall-dropdown .admin-delete-rant,
.wall-dropdown .admin-delete-comment {
    color: #ffad42;
}

.wall-dropdown .admin-delete-rant:hover,
.wall-dropdown .admin-delete-rant:focus,
.wall-dropdown .admin-delete-comment:hover,
.wall-dropdown .admin-delete-comment:focus {
    color: #ffad42;
    background-color: rgba(255, 173, 66, 0.12);
}

/* Ban user - red */
.wall-dropdown .admin-ban-user {
    color: #ff5c5c;
}

.wall-dropdown .admin-ban-user:hover,
.wall-dropdown .admin-ban-user:focus {
    color: #ff5c5c;
    background-color: rgba(255, 92, 92, 0.12);
}

/* Delete user - purple */
.wall-dropdown .admin-delete-user {
    color: #c084fc;
}

.wall-dropdown .admin-delete-user:hover,
.wall-dropdown .admin-delete-user:focus {
    color: #c084fc;
    background-color: rgba(192, 132, 252, 0.12);
}


/* ========================================================================
   MODERATION REMOVAL NOTIFICATIONS
   Used by notification/_item for rant_removed, comment_removed, reply_removed.
   ======================================================================== */

.notification-type-moderation .notification-cartoon-icon {
    color: #ff7182;
    background: #263447;
    border-color: rgba(255, 113, 130, 0.5);
    box-shadow: 0 0 10px rgba(255, 89, 109, 0.18);
}

.notification-removal-note {
    display: block;
    margin-top: 5px;
    color: #b7a9a3;
    font-size: 12px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.notification-rules-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 7px;
    color: #69b8ff;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease, text-shadow 0.2s ease;
}

.notification-item:hover .notification-rules-link,
.notification-item:focus-visible .notification-rules-link {
    color: #a5d7ff;
    text-shadow: 0 0 8px rgba(57, 125, 195, 0.35);
}



/* ============================================================
   NOTIFICATION SNIPPETS — CARTOON PANELS (NO BUBBLE TAILS)
   ============================================================ */
.notification-snippet {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 9px 0;
    padding: 9px 12px;
    color: #e0efff;
    background: linear-gradient(180deg, #142f4e, #0c2139);
    border: 2px solid #397dc3;
    border-radius: 8px;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.24),
                0 0 12px rgba(57, 125, 195, 0.16);
    font-size: 12px;
    font-weight: 550;
    line-height: 1.55;
    overflow-wrap: anywhere;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.notification-item:hover .notification-snippet {
    border-color: #62baff;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.24),
                0 0 14px rgba(57, 125, 195, 0.25);
}

/* Red-accented panel for removed content; never orange or brown. */
.notification-item.notification-type-moderation .notification-snippet {
    color: #e7eef8;
    background: linear-gradient(180deg, #1c293a, #101e31);
    border-color: #ba5267;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.25),
                0 0 12px rgba(255, 89, 109, 0.12);
}

.notification-item.notification-type-moderation:hover .notification-snippet {
    border-color: #ff7182;
}

/* No cartoon tails on any snippet variant. */
.notification-snippet::before,
.notification-snippet::after,
.notification-content-snippet::before,
.notification-content-snippet::after {
    content: none !important;
    display: none !important;
}

/* ========================================================================
   DEVICE SAFEGUARDS
   Source: device-safeguards.css
   ======================================================================== */

/* Progressive cross-device hardening: appended last so existing design remains intact. */
@supports (overflow-wrap: anywhere) {
    .comment-body, .reply-body, .rant-body, .notification-message {
        overflow-wrap: anywhere;
    }
}
@media (max-width: 767.98px) {
    input, select, textarea {
        font-size: max(16px, 1rem);
    }
    img, video, iframe { max-width: 100%; }
}
@media (hover: none) and (pointer: coarse) {
    button, [role="button"], a { touch-action: manipulation; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* Admin moderation — subtle red flash; keeps nested replies intact. */
.rant-card.admin-removal-flash,
.comment-item.admin-removal-flash > .comment-line {
    background-color: rgba(255, 89, 109, 0.14);
    box-shadow: inset 0 0 0 1px rgba(255, 89, 109, 0.38), 0 0 18px rgba(255, 89, 109, 0.12);
    animation: admin-remove-flash 0.42s ease-out both;
}

.comment-item.admin-removal-complete > .comment-line .admin-removed-placeholder {
    color: #adbace !important;
    padding: 7px 10px;
    border-left: 2px solid rgba(255, 89, 109, 0.45);
    border-radius: 4px;
    background: rgba(255, 89, 109, 0.045);
}

@keyframes admin-remove-flash {
    0% { background-color: rgba(255, 89, 109, 0.28); }
    100% { background-color: rgba(255, 89, 109, 0.06); }
}

@media (prefers-reduced-motion: reduce) {
    .rant-card.admin-removal-flash,
    .comment-item.admin-removal-flash > .comment-line {
        animation: none;
    }
}


/* ============================================================
   MODERATOR REMOVAL AVATAR — NEVER BROWN
   Targets only rant_removed, comment_removed and reply_removed.
   ============================================================ */
.notification-item.notification-type-moderation .notification-removal-avatar {
    background: #263447 !important;
    background-image: none !important;
    color: #ff7182 !important;
    border: 2px solid rgba(255, 113, 130, 0.6) !important;
    box-shadow: 0 0 0 2px rgba(255, 89, 109, 0.07),
                0 0 12px rgba(255, 89, 109, 0.19) !important;
    font-weight: 900;
}

.notification-item.notification-type-moderation .notification-removal-avatar:hover {
    background: #30445b !important;
}
/* ============================================================
   THERANTITWALL — REMOVED COMMENTS AND REPLIES
   ============================================================ */

/*
 * Removed comments keep the exact same structure
 * as regular comments.
 *
 * Do not modify the comment tree, avatar positions,
 * indentation, or reply containers.
 */


/* ------------------------------------------------------------
   Removed author badge
   ------------------------------------------------------------ */

.comment-removed-author {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    padding: 5px 10px;

    border: 1px solid #344860;
    border-radius: 8px;

    background: #1b293b;

    color: #b6c7dc;

    font-size: 0.78rem;
    font-weight: 700;

    line-height: 1.2;
    white-space: nowrap;
}

.comment-removed-author i {
    color: #ff7182;
    font-size: 0.95rem;
    line-height: 1;
}


/* ------------------------------------------------------------
   Removed comment message
   ------------------------------------------------------------ */

.comment-item.is-removed .comment-removed-message {
    display: inline;

    color: #91a5bc;

    font-size: 0.86rem;
    font-weight: 400;
    font-style: italic;

    line-height: 1.55;
}


/* ------------------------------------------------------------
   Preserve original avatar colors
   ------------------------------------------------------------ */

/*
 * Do not override background-color here.
 *
 * Each avatar gets its color from the PHP inline style:
 *
 * users.avatar_bg_color
 *
 * Anonymous avatars use the default blue.
 */

.comment-item.is-removed > .comment-line > .comment-avatar {
    background-image: none;
}


/* ------------------------------------------------------------
   Preserve original comment layout
   ------------------------------------------------------------ */

.comment-item.is-removed > .comment-line {
    align-items: flex-start;
}

.comment-item.is-removed > .comment-line > .comment-content {
    min-width: 0;
}


/* ------------------------------------------------------------
   Comment action spacing
   ------------------------------------------------------------ */

.comment-item.is-removed .comment-actions-row {
    margin-top: 5px;
}


/* ------------------------------------------------------------
   Preserve existing View Replies colors
   ------------------------------------------------------------ */

.comment-item.is-removed .replies-toggle {
    color: #80baff;
}

.comment-item.is-removed .replies-toggle:hover {
    color: #ffffff;
}


/* ------------------------------------------------------------
   FIX: Anonymous author icon
   ------------------------------------------------------------ */

/*
 * Anonymous users should keep the original
 * blue-gray anonymous icon.
 *
 * Do not use moderator red or pink here.
 */

.comment-item .rant-author-anonymous .bi-incognito {
    color: #8ba6c5;
}

.comment-item .rant-author-anonymous {
    color: #b6c7dc;
}


/* ------------------------------------------------------------
   FIX: Normal comment avatar colors
   ------------------------------------------------------------ */

/*
 * Keep avatar backgrounds controlled by PHP.
 * Avoid styles that force all avatars to one color.
 */

.comment-item .letter-avatar.comment-avatar {
    background-image: none;
}


/* ------------------------------------------------------------
   Small screens
   ------------------------------------------------------------ */

@media (max-width: 575.98px) {

    .comment-removed-author {
        padding: 4px 8px;
        gap: 6px;

        font-size: 0.74rem;
    }

    .comment-removed-author i {
        font-size: 0.87rem;
    }

    .comment-item.is-removed .comment-removed-message {
        font-size: 0.8rem;
    }

}
/* ========================================================================
   CONVERSATION PARTICIPANTS
   Matches the existing rant-detail navy and blue visual theme.
   ======================================================================== */

.rant-participants {
    width: 100%;
    margin: 0 0 16px;
    overflow: hidden;
    border: 1px solid #2b4c6d;
    border-radius: 10px;
    background: #101f31;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);
}

.rant-participants-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    min-height: 62px;
    padding: 12px 16px;
    border: 0;
    background: #142a41;
    color: #d9eafd;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.rant-participants-toggle:hover,
.rant-participants-toggle[aria-expanded="true"] {
    background: #193653;
    color: #fff;
}

.rant-participants-toggle:focus-visible {
    outline: 2px solid #62b9ff;
    outline-offset: -3px;
}

.rant-participants-toggle-left,
.rant-participants-toggle-right {
    display: flex;
    align-items: center;
}

.rant-participants-toggle-left {
    min-width: 0;
    gap: 12px;
}

.rant-participants-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border: 1px solid #3475ae;
    border-radius: 10px;
    background: #193e62;
    color: #75c2ff;
    font-size: 1.05rem;
}

.rant-participants-heading {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.rant-participants-title {
    color: #eaf4ff;
    font-size: 0.84rem;
    font-weight: 750;
    line-height: 1.3;
}

.rant-participants-subtitle {
    color: #9eb8d2;
    font-size: 0.73rem;
    line-height: 1.35;
}

.rant-participants-toggle-right {
    flex: 0 0 auto;
    gap: 12px;
}

.rant-participants-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 25px;
    padding: 0 8px;
    border: 1px solid #3475ae;
    border-radius: 7px;
    background: #193e62;
    color: #9bd3ff;
    font-size: 0.73rem;
    font-weight: 800;
    line-height: 1;
}

.rant-participants-chevron {
    color: #8fb8dc;
    font-size: 0.8rem;
    transition: transform 0.25s ease, color 0.18s ease;
}

.rant-participants-toggle[aria-expanded="true"] .rant-participants-chevron {
    transform: rotate(180deg);
    color: #75c2ff;
}

/* Animated disclosure. The inner wrapper allows the grid row to collapse. */
.rant-participants-collapse {
    display: grid;
    grid-template-rows: 0fr;
    border-top: 1px solid transparent;
    transition: grid-template-rows 0.28s ease, border-color 0.28s ease;
}

.rant-participants-collapse.is-open {
    grid-template-rows: 1fr;
    border-top-color: #294460;
}

.rant-participants-inner {
    min-height: 0;
    overflow: hidden;
}

.rant-participants-list {
    max-height: 320px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: #315778 #0b192a;
    scrollbar-width: thin;
}

.rant-participant {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 52px;
    padding: 11px 16px;
    border-bottom: 1px solid rgba(43, 68, 96, 0.62);
    background: #0e1d2e;
    transition: background-color 0.16s ease;
}

.rant-participant:last-child {
    border-bottom: 0;
}

.rant-participant:hover {
    background: #142a41;
}

.rant-participant-name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    color: #dceafa;
    font-size: 0.82rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.rant-participant-anonymous {
    color: #a9bfd5;
    font-style: italic;
    font-weight: 600;
}

.rant-participant-op {
    display: inline-flex;
    align-items: center;
    min-height: 19px;
    padding: 2px 6px;
    border: 1px solid rgba(22, 209, 139, 0.32);
    border-radius: 5px;
    background: rgba(22, 209, 139, 0.10);
    color: #72e2b5;
    font-size: 0.59rem;
    font-weight: 850;
    letter-spacing: 0.055em;
    line-height: 1;
}

.rant-participant-stats {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;
    flex: 0 0 auto;
}

.rant-participant-stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #9eb8d2;
    font-size: 0.73rem;
    font-weight: 650;
    line-height: 1.2;
    white-space: nowrap;
}

.rant-participant-stat i {
    color: #62b9ff;
    font-size: 0.83rem;
}

.rant-participants-empty {
    padding: 20px 16px;
    background: #0e1d2e;
    color: #9eb8d2;
    font-size: 0.8rem;
    text-align: center;
}

.rant-participants-list::-webkit-scrollbar {
    width: 6px;
}

.rant-participants-list::-webkit-scrollbar-track {
    background: #0b192a;
}

.rant-participants-list::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background: #315778;
}

.rant-participants-list::-webkit-scrollbar-thumb:hover {
    background: #477eaa;
}

@media (max-width: 575.98px) {
    .rant-participants-toggle {
        min-height: 58px;
        padding: 10px 12px;
    }

    .rant-participants-icon {
        width: 35px;
        height: 35px;
        flex-basis: 35px;
    }

    .rant-participant {
        gap: 10px;
        padding: 11px 12px;
    }

    .rant-participant-stats {
        gap: 10px;
    }

    .rant-participant-stat {
        gap: 4px;
        font-size: 0.68rem;
    }
}

@media (max-width: 380px) {
    .rant-participant {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .rant-participant-stats {
        justify-content: flex-start;
        padding-left: 1px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rant-participants-toggle,
    .rant-participants-collapse,
    .rant-participants-chevron,
    .rant-participant {
        transition: none !important;
    }
}

/* Light theme follows the site's Bootstrap theme switch. */
[data-bs-theme="light"] .rant-participants {
    border-color: #c7d8e8;
    background: #f4f8fc;
    box-shadow: 0 8px 22px rgba(30, 65, 100, 0.08);
}

[data-bs-theme="light"] .rant-participants-toggle {
    background: #e8f1fa;
    color: #203b56;
}

[data-bs-theme="light"] .rant-participants-toggle:hover,
[data-bs-theme="light"] .rant-participants-toggle[aria-expanded="true"] {
    background: #dceaf7;
    color: #173653;
}

[data-bs-theme="light"] .rant-participants-icon,
[data-bs-theme="light"] .rant-participants-count {
    border-color: #b4d1eb;
    background: #dcecfb;
    color: #2468a3;
}

[data-bs-theme="light"] .rant-participants-title,
[data-bs-theme="light"] .rant-participant-name {
    color: #203b56;
}

[data-bs-theme="light"] .rant-participants-subtitle,
[data-bs-theme="light"] .rant-participant-stat,
[data-bs-theme="light"] .rant-participant-anonymous {
    color: #647d96;
}

[data-bs-theme="light"] .rant-participants-collapse.is-open {
    border-top-color: #c7d8e8;
}

[data-bs-theme="light"] .rant-participant,
[data-bs-theme="light"] .rant-participants-empty {
    border-bottom-color: #dce6ef;
    background: #f7faff;
}

[data-bs-theme="light"] .rant-participant:hover {
    background: #eaf3fb;
}

[data-bs-theme="light"] .rant-participant-stat i,
[data-bs-theme="light"] .rant-participants-chevron {
    color: #397dc3;
}

[data-bs-theme="light"] .rant-participant-op {
    border-color: rgba(16, 135, 88, 0.25);
    background: rgba(16, 135, 88, 0.08);
    color: #168052;
}

[data-bs-theme="light"] .rant-participants-empty {
    color: #647d96;
}

[data-bs-theme="light"] .rant-participants-list {
    scrollbar-color: #a9c4dc #edf4fa;
}

[data-bs-theme="light"] .rant-participants-list::-webkit-scrollbar-track {
    background: #edf4fa;
}

[data-bs-theme="light"] .rant-participants-list::-webkit-scrollbar-thumb {
    background: #a9c4dc;
}
/* =========================================================
   TERMS PAGE - SECTION JUMP NAVIGATION
========================================================= */

.terms-page-v2 .policy-jump-nav {
    margin: 25px 0 30px;
    padding: 20px;
    background: rgba(20, 25, 32, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-left: 4px solid #397DC3;
}

.terms-page-v2 .policy-jump-label {
    display: block;
    margin-bottom: 14px;
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.terms-page-v2 .policy-jump-links {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.terms-page-v2 .policy-jump-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 13px;
    color: #c5d9ed;
    background: rgba(57, 125, 195, 0.10);
    border: 1px solid rgba(57, 125, 195, 0.30);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.terms-page-v2 .policy-jump-links a:hover {
    color: #ffffff;
    background: #397DC3;
    border-color: #397DC3;
    transform: translateY(-2px);
}

.terms-page-v2 .policy-jump-links a:focus-visible {
    outline: 2px solid #70b5ff;
    outline-offset: 3px;
}

.terms-page-v2 .policy-section[id] {
    scroll-margin-top: 100px;
}

/* Light theme */
[data-theme="light"] .terms-page-v2 .policy-jump-nav {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.12);
    border-left-color: #397DC3;
}

[data-theme="light"] .terms-page-v2 .policy-jump-label {
    color: #202833;
}

[data-theme="light"] .terms-page-v2 .policy-jump-links a {
    color: #28639d;
    background: rgba(57, 125, 195, 0.07);
    border-color: rgba(57, 125, 195, 0.25);
}

[data-theme="light"] .terms-page-v2 .policy-jump-links a:hover {
    color: #ffffff;
    background: #397DC3;
    border-color: #397DC3;
}

/* Mobile */
@media (max-width: 576px) {
    .terms-page-v2 .policy-jump-nav {
        padding: 15px;
        margin: 20px 0 25px;
    }

    .terms-page-v2 .policy-jump-links {
        gap: 7px;
    }

    .terms-page-v2 .policy-jump-links a {
        flex: 1 1 calc(50% - 7px);
        padding: 10px 8px;
        font-size: 0.76rem;
        text-align: center;
    }
}

/* --------------------------------------------------
   FEEDBACK PAGE
-------------------------------------------------- */

.feedback-create-page {
    width: 100%;
}

/* --------------------------------------------------
   PAGE HEADER
-------------------------------------------------- */

.feedback-create-hero {
    margin-bottom: 30px;
}

/* --------------------------------------------------
   FEEDBACK CONTAINER
-------------------------------------------------- */

.feedback-create-container {
    width: 100%;
    max-width: 850px;
    margin: 0 auto;
}

/* --------------------------------------------------
   FEEDBACK CARD
-------------------------------------------------- */

.feedback-create-card {
    padding: 30px;
}

/* --------------------------------------------------
   CARD HEADING
-------------------------------------------------- */

.feedback-card-heading {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
}

.feedback-heading-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: rgba(13, 110, 253, 0.12);
    color: #0d6efd;
    font-size: 22px;
}

.feedback-card-heading h2 {
    margin: 0 0 5px;
    font-size: 1.25rem;
    font-weight: 700;
}

.feedback-card-heading p {
    margin: 0;
    opacity: 0.75;
}

/* --------------------------------------------------
   FORM FIELDS
-------------------------------------------------- */

.feedback-create-card .form-label {
    font-weight: 600;
}

.feedback-create-card .form-control,
.feedback-create-card .form-select {
    width: 100%;
}

.feedback-create-card textarea {
    min-height: 110px;
    resize: none;
    overflow-y: hidden;
}

/* --------------------------------------------------
   CHARACTER COUNTER
-------------------------------------------------- */

.feedback-create-card .character-counter {
    margin-top: 6px;
    text-align: right;
    font-size: 0.8rem;
    opacity: 0.7;
}

/* --------------------------------------------------
   PRIVACY NOTICE
-------------------------------------------------- */

.feedback-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    margin-bottom: 25px;
    background: rgba(108, 117, 125, 0.10);
    font-size: 0.9rem;
}

.feedback-notice i {
    margin-top: 2px;
    flex-shrink: 0;
}

.feedback-notice p {
    margin: 0;
}

/* --------------------------------------------------
   FORM RESPONSE
-------------------------------------------------- */

.feedback-create-card .form-response {
    margin-bottom: 20px;
}

/* --------------------------------------------------
   FORM ACTIONS
-------------------------------------------------- */

.feedback-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.feedback-form-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* --------------------------------------------------
   FOOTER
-------------------------------------------------- */

.feedback-footer {
    margin-top: 20px;
    text-align: center;
    font-size: 0.9rem;
    opacity: 0.75;
}

.feedback-footer i {
    color: #dc3545;
    margin-right: 5px;
}

/* --------------------------------------------------
   MOBILE
-------------------------------------------------- */

@media (max-width: 576px) {

    .feedback-create-card {
        padding: 20px;
    }

    .feedback-card-heading {
        align-items: flex-start;
    }

    .feedback-form-actions {
        flex-direction: column;
    }

    .feedback-form-actions .btn {
        width: 100%;
    }

}
/* =========================================================
   HIDDEN RANT PLACEHOLDER
   Used for both newly hidden rants and refreshed page loads.
   Dark-theme styling; preserve visible dropdown menus.
========================================================= */

/*
 * Keep overflow visible so Bootstrap dropdown menus are not clipped.
 * The hide overlay is contained by its own border radius instead.
 */
.rant-card {
    position: relative;
    overflow: visible;
}

.hidden-rant-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 13px;
    width: 100%;
    min-height: 132px;
    padding: 25px 18px;
    text-align: center;
    background: linear-gradient(
        145deg,
        rgba(10, 31, 55, 0.98),
        rgba(4, 18, 35, 0.98)
    );
    border-radius: inherit;
}

.hidden-rant-message {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #a9bdd3;
    font-size: 0.9rem;
    line-height: 1.5;
}

.hidden-rant-message i {
    flex: 0 0 auto;
    color: #7f9bb8;
    font-size: 1.05rem;
}

.hidden-rant-actions,
.hidden-rant-expanded-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 9px 18px;
}

.expand-hidden-rant,
.unhide-rant-btn,
.collapse-hidden-rant {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 30px;
    margin: 0;
    padding: 5px 2px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.35;
    text-decoration: none;
    cursor: pointer;
    transition: color 150ms ease, background-color 150ms ease, text-shadow 150ms ease;
}

.expand-hidden-rant,
.collapse-hidden-rant {
    color: #56b5ff;
}

.expand-hidden-rant:hover,
.collapse-hidden-rant:hover {
    color: #9bd6ff;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-shadow: 0 0 12px rgba(49, 166, 255, 0.2);
}

.unhide-rant-btn {
    color: #39d99b;
}

.unhide-rant-btn:hover {
    color: #83f2c4;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-shadow: 0 0 12px rgba(22, 209, 139, 0.18);
}

.expand-hidden-rant:focus-visible,
.collapse-hidden-rant:focus-visible,
.unhide-rant-btn:focus-visible {
    outline: 2px solid #80baff;
    outline-offset: 3px;
    border-radius: 4px;
}

.expand-hidden-rant:disabled,
.collapse-hidden-rant:disabled,
.unhide-rant-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    text-decoration: none;
    text-shadow: none;
}

/* Notice displayed above the rant while its hidden content is expanded. */
.hidden-rant-expanded-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin: 0 0 14px;
    padding: 11px 13px;
    border: 1px solid rgba(255, 89, 109, 0.27);
    border-left: 3px solid rgba(255, 89, 109, 0.72);
    border-radius: 8px;
    background: linear-gradient(
        110deg,
        rgba(105, 31, 49, 0.22),
        rgba(15, 31, 51, 0.88)
    );
    color: #b9c9dc;
    font-size: 0.82rem;
    line-height: 1.45;
}

.hidden-rant-expanded-notice strong {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #e0eaf6;
    font-weight: 650;
}

.hidden-rant-expanded-notice strong i {
    color: #ff8290;
}

.hidden-rant-expanded-actions {
    justify-content: flex-end;
    gap: 8px 16px;
}

/* Subtle red flash when a rant is hidden. */
.rant-hide-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    border-radius: inherit;
    pointer-events: none;
    background: rgba(255, 75, 96, 0.23);
    box-shadow: inset 0 0 0 1px rgba(255, 105, 122, 0.22);
    opacity: 0;
}

/* Prevent the placeholder and original rant content from overlapping. */
.rant-card-content.d-none,
.hidden-rant-placeholder.d-none {
    display: none !important;
}

@media (max-width: 575.98px) {
    .hidden-rant-expanded-notice {
        align-items: flex-start;
        flex-direction: column;
    }

    .hidden-rant-expanded-actions {
        justify-content: flex-start;
    }
}
/* Keep Hide/Unhide typography identical to other dropdown items */
.wall-dropdown .dropdown-item.hide-rant-btn,
.wall-dropdown .dropdown-item.unhide-rant-btn {
    font-weight: 400 !important;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
    text-decoration: none;
}
/* Make Hide/Unhide align exactly like Report */
.wall-dropdown .dropdown-item.hide-rant-btn,
.wall-dropdown .dropdown-item.unhide-rant-btn {
    display: block !important;
    width: 100% !important;
    padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x) !important;
    text-align: left !important;
    font-weight: 400 !important;
    font-size: inherit !important;
    font-family: inherit !important;
    line-height: inherit !important;
    white-space: nowrap;
}

/* Keep the icon inline with the text */
.wall-dropdown .dropdown-item.hide-rant-btn i,
.wall-dropdown .dropdown-item.unhide-rant-btn i {
    display: inline-block !important;
    width: auto !important;
    margin-right: .5rem !important;
    text-align: left !important;
}

/* ============================================================
   RANT BODY — SHOW MORE / SHOW LESS
   TheRantItWall navy and steel-blue theme
   ============================================================ */

/* Hidden portion of the rant. */
.rant-body-more-content {
    display: none;
}

/* Preview area containing the faded ending. */
.rant-body-preview-wrap {
    position: relative;
    display: block;
    overflow: hidden;
    isolation: isolate;
    padding-bottom: 2px;
}

/* The visible preview text. */
.rant-body-preview {
    display: inline;
}

/* Faded ending that hints at the hidden content. */
.rant-body-preview-wrap:not(.is-expanded)::after {
    content: "";
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3.2em;
    pointer-events: none;

    background: linear-gradient(
        to bottom,
        rgba(4, 20, 40, 0) 0%,
        rgba(5, 22, 43, 0.48) 38%,
        rgba(5, 22, 43, 0.86) 76%,
        rgba(5, 22, 43, 0.98) 100%
    );
}

/* Subtle ellipsis at the end of the preview. */
.rant-body-ellipsis {
    display: inline;
    color: #8baacb;
    font-weight: 700;
    letter-spacing: 2px;
}

/* Show More / Show Less control. */
.rant-show-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    margin: 7px 0 9px;
    padding: 5px 11px;

    border: 1px solid rgba(72, 139, 196, 0.48);
    border-radius: 6px;

    background: linear-gradient(
        180deg,
        rgba(19, 49, 78, 0.96),
        rgba(9, 30, 51, 0.98)
    );

    color: #a9c9e8;
    font-family: inherit;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.4;

    cursor: pointer;
    text-decoration: none;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035),
        0 2px 8px rgba(0, 0, 0, 0.16);

    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease;
}

/* Muted blue highlight on hover — not bright Bootstrap blue. */
.rant-show-more-btn:hover {
    border-color: rgba(75, 160, 224, 0.75);

    background: linear-gradient(
        180deg,
        rgba(27, 66, 101, 0.98),
        rgba(12, 39, 65, 0.99)
    );

    color: #d5eaff;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.055),
        0 3px 12px rgba(0, 0, 0, 0.22);
}

/* Small chevron. */
.rant-show-more-btn i {
    font-size: 0.65rem;
    opacity: 0.8;
    transition: transform 0.18s ease;
}

.rant-show-more-btn:focus-visible {
    outline: 2px solid #5598d0;
    outline-offset: 3px;
}

/* Keep the control from inheriting generic link/button colors. */
.rant-body .rant-show-more-btn,
.rant-body .rant-show-more-btn:hover,
.rant-body .rant-show-more-btn:focus {
    text-decoration: none;
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
    .rant-show-more-btn,
    .rant-show-more-btn i {
        transition: none;
    }
}

/* ========================================================================
   FEED SORT BUTTONS
   ======================================================================== */

.feed-sort-bar {
    display: grid;
    align-items: center;
    gap: 8px;
    margin: 20px 0;
}

.feed-sort-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 39px;
    padding: 8px 14px;
    border: 1px solid #344860;
    border-radius: 9px;
    background: #1b293b;
    color: #b8c9db;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease,
                border-color 0.15s ease,
                color 0.15s ease,
                box-shadow 0.15s ease;
}

.feed-sort-button i {
    color: #7eaeef;
    font-size: 0.95rem;
}

.feed-sort-button:hover {
    border-color: #497eaf;
    background: #263d56;
    color: #ffffff;
    text-decoration: none;
}

.feed-sort-button:hover i {
    color: #ffffff;
}

.feed-sort-button.active {
    border-color: var(--wall-blue);
    background: #24384e;
    color: #ffffff;
    box-shadow: inset 0 -2px 0 var(--wall-blue);
}

.feed-sort-button.active i {
    color: var(--wall-cyan);
}

.feed-sort-button:focus-visible {
    outline: 2px solid #80baff;
    outline-offset: 3px;
}

/* Mobile */

@media (max-width: 576px) {

    .feed-sort-bar {
        gap: 7px;
    }

    .feed-sort-button {
        min-height: 37px;
        padding: 8px 11px;
        font-size: 0.8rem;
    }

}

/* ========================================================================
   FEED SORTING — CENTERED, RESPONSIVE FINAL RULES
   Keep after earlier feed-tab and mobile overrides.
   ======================================================================== */

.feed-tabs,
.page-layout .feed-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    justify-content: center;
    gap: 7px;
    width: 100%;
    max-width: 100%;
    padding: 7px;
    overflow: visible;
}

.feed-tabs .feed-tab {
    display: inline-flex;
    flex: initial;
    min-width: 0;
    width: 100%;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 8px;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.25;
}

/* Mobile layout sizing is handled in the unified responsive section. */
@media (max-width: 575.98px) {
    .feed-tabs,
    .page-layout .feed-tabs {
        display: grid;
        justify-content: center;
        gap: 6px;
        padding: 6px;
        overflow: visible;
    }

}

/* Compact text and icons for very narrow phones. */
@media (max-width: 359.98px) {
    .feed-tabs .feed-tab {
        gap: 4px;
        padding-inline: 4px;
        font-size: 0.69rem;
    }
}

/* ========================================================================
   24. SITE-WIDE RESPONSIVE HARDENING
   ------------------------------------------------------------------------
   Single final responsive layer, following the existing cascade.
   Covers layout, header, feed, threads, forms, modals, menus and pages.
   Preserves the original theme, JS selectors, and nesting connector limits.
   ======================================================================== */

/* Layout: prevent wide descendants from expanding grid and flex tracks. */
.site-main,
.page-layout,
.page-layout-inner,
.page-main,
.feed-shell,
.home-stack,
.rant-feed,
.rant-card,
.rant-main,
.rant-row,
.rant-head,
.comments-panel,
.comments-panel-inner,
.comments-ajax-content,
.comment-list,
.comment-item,
.comment-line,
.comment-content,
.reply-children,
.replies-ajax-content,
.reply-form,
.comment-form,
.header-shell,
.header-right,
.content-hero,
.wall-hero-content {
    min-width: 0;
}

/* Allow user-generated content to wrap; never clamp reply nesting depth. */
.rant-body,
.comment-body,
.reply-quote,
.comment-removed-message,
.notification-message,
.profile-bio,
.form-response,
.thread-empty-state,
.report-card,
.policy-section,
.content-hero,
.excluded-chip {
    overflow-wrap: anywhere;
}

/* Media and form controls cannot force horizontal page overflow. */
.site-main img,
.site-main video,
.site-main canvas,
.site-main iframe {
    max-width: 100%;
}

.site-main input,
.site-main textarea,
.site-main select,
.site-main .form-control,
.site-main .form-select {
    min-width: 0;
    max-width: 100%;
}

/* Preserve the existing viewport breakout from Bootstrap containers.
   Subtract gutters so the breakout does not reach beyond the viewport. */
.page-layout {
    left: 50%;
    transform: translateX(-50%);
}

.page-layout > .container-fluid,
.page-layout .home-stack,
.page-layout .feed-shell,
.page-layout .rant-feed,
.page-main {
    min-width: 0;
}

/* Both kinds of sort navigation stay centered without sideways scrolling. */
.feed-tabs,
.page-layout .feed-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    justify-content: center;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    gap: 7px;
    overflow: visible;
}

.feed-tabs > .feed-tab {
    width: 100%;
    min-width: 0;
    justify-content: center;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
}

.feed-sort-bar {
    justify-content: center;
    max-width: 100%;
}

.feed-sort-button {
    max-width: 100%;
    text-align: center;
    white-space: normal;
}

/* Keep popovers and long notification text within the viewport. */
/* Generic dropdowns may shrink to their anchor, but the notifications
   menu must NOT: its anchor is only the width of the bell button. */
.header-account-menu,
.wall-dropdown,
.dropdown-menu:not(.notifications-menu) {
    max-width: min(100%, calc(100vw - 24px));
    overflow-wrap: anywhere;
}

.notifications-menu {
    width: min(380px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
}

.notifications-menu .notifications-list {
    min-height: 0;
    max-height: min(420px, calc(100vh - 185px));
    max-height: min(420px, calc(100dvh - 185px));
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* User-generated long tokens and nested branches must shrink naturally. */
.comment-item > .reply-children,
.reply-children > .replies-ajax-content,
.reply-children > .comment-item,
.replies-ajax-content > .comment-item {
    min-width: 0;
    max-width: 100%;
}

/* Thread controls can wrap at reduced widths without hiding actions. */
.comment-actions-row,
.rant-actions,
.rant-actions-row,
.reply-form-buttons,
.comment-form-controls,
.composer-toolbar,
.composer-footer {
    min-width: 0;
    flex-wrap: wrap;
}

/* Avoid clipped, unscrollable forms in short mobile viewports. */
.auth-modal .modal-dialog,
#signupModal .modal-dialog,
.modal-dialog {
    max-width: calc(100vw - 24px);
}

.auth-modal .modal-content,
#signupModal .modal-content {
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Accessible keyboard targeting and responsive motion defaults. */
.feed-tab:focus-visible,
.replies-toggle:focus-visible,
.comments-toggle:focus-visible,
.reply-toggle:focus-visible,
.thread-load-more:focus-visible,
.vote-btn:focus-visible {
    outline: 2px solid #80baff;
    outline-offset: 2px;
}

/* Wide-but-not-desktop viewports (including split-screen desktop windows). */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .site-header .header-shell {
        gap: 10px;
    }

    .site-header .brand-text {
        font-size: clamp(0.92rem, 1.3vw, 1.08rem);
    }

    .main-nav .nav-link {
        padding-inline: 7px;
        gap: 5px;
        font-size: 0.78rem;
    }

    .site-header .header-search {
        flex-basis: 155px;
        width: 155px;
    }

    .header-right {
        gap: 6px;
    }
}

/* Tablet and smaller: keep panels within available width. */
@media (max-width: 991.98px) {
    .page-layout,
    .page-layout .feed-shell,
    .page-main,
    .page-sidebar,
    .content-hero,
    .wall-hero,
    .community-stats {
        max-width: 100%;
    }

    .page-layout {
    }

    .page-sidebar {
        margin-inline: auto;
    }

    .rantitude-card {
        position: static;
    }

    .header-shell,
    .site-header .header-shell {
        min-width: 0;
    }

    .site-header .brand-link {
        min-width: 0;
    }

    .site-header .brand-text {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Match the existing 5-level tablet visual limit. */
    .comment-item {
        --tree-indent: 27px;
    }
}

/* Phones and portrait tablets. */
@media (max-width: 767.98px) {
    .site-main {
        padding-top: 20px;
        padding-bottom: 48px;
    }

    .feed-shell {
        width: calc(100% - 20px);
    }

    .page-layout {
    }

    .page-layout-inner,
    .page-main,
    .home-stack,
    .rant-feed {
        width: 100%;
    }

    .site-header .header-shell {
        gap: 8px;
    }

    .site-header .brand-logo {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
        max-width: 42px;
        max-height: 42px;
    }

    .site-header .brand-text {
        font-size: clamp(0.89rem, 3.1vw, 1.12rem);
    }

    .header-right {
        gap: 6px;
    }

    .wall-hero {
        width: 100%;
        min-height: 0;
        padding: clamp(18px, 4vw, 28px);
    }

    .page-layout .wall-hero-content {
        padding-inline: 0;
    }

    .wall-hero h1 {
        overflow-wrap: anywhere;
        font-size: clamp(1.75rem, 6.7vw, 2.45rem);
    }

    .content-hero,
    .rules-grid,
    .rules-card-grid {
        min-width: 0;
    }

    .comments-panel {
        margin-inline: 10px;
    }

    .comments-panel-inner {
        padding: 10px;
    }

    .comment-form,
    .reply-form {
        max-width: 100%;
    }

    .comment-input-wrap,
    .reply-input-wrap {
        min-width: 0;
        flex: 1 1 auto;
    }

    /* Rant actions stay visible, even with long translated labels. */
    .rant-main {
        padding-inline: 12px;
    }

    .rant-actions,
    .rant-actions-row,
    .comment-actions-row {
        row-gap: 8px;
    }

    .footer-shell,
    .footer-shell nav {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }

    /* Notifications are usable above the on-screen keyboard. */
    .notifications-menu.show {
        max-height: calc(100vh - 90px);
        max-height: calc(100dvh - 90px);
    }
}

/* Small-screen component spacing. */
@media (max-width: 575.98px) {
    .feed-tabs,
    .page-layout .feed-tabs {
        gap: 6px;
        padding: 6px;
    }


    .feed-sort-bar {
        gap: 7px;
    }

    .feed-sort-button {
        min-height: 44px;
        padding: 9px 11px;
    }

    .community-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    .community-stats .stat-item {
        min-width: 0;
        min-height: 68px;
        padding: 9px;
        gap: 7px;
    }

    .community-stats .stat-icon {
        flex: 0 0 32px;
        width: 32px;
        height: 32px;
    }

    .community-stats .stat-item span:not(.stat-icon) {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .comments-panel {
        margin-inline: 6px;
    }

    .comments-panel-inner {
        padding: 8px;
    }

    .comment-line {
        gap: 7px;
    }

    /* Same three-level phone cap as the existing tree connector rules. */
    .comment-item {
        --tree-indent: 24px;
    }

    .reply-form-buttons,
    .comment-form-controls,
    .rant-composer .composer-footer {
        max-width: 100%;
    }

    .excluded-words-input-group,
    .mobile-nav-search,
    .auth-input-group {
        min-width: 0;
        max-width: 100%;
    }

    .notifications-menu {
        width: min(330px, calc(100vw - 16px));
        max-width: calc(100vw - 16px);
    }
}

/* Minimum supported phone widths and large browser zoom. */
@media (max-width: 359.98px) {
    .site-header .header-shell {
        gap: 5px;
    }

    .site-header .brand-link {
        gap: 5px;
    }

    .site-header .brand-logo {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
        max-width: 36px;
        max-height: 36px;
    }

    .site-header .brand-text {
        font-size: 0.88rem;
    }

    .header-right {
        gap: 4px;
    }

    .page-layout {
    }

    .feed-shell {
        width: calc(100% - 12px);
    }

    .rant-main {
        padding-inline: 9px;
    }

    .comments-panel {
        margin-inline: 4px;
    }

    .comments-panel-inner {
        padding: 7px;
    }

    .feed-tabs .feed-tab {
        gap: 4px;
        padding-inline: 4px;
        font-size: 0.7rem;
    }
}

/* Short mobile landscape viewports, including device rotation. */
@media (max-height: 540px) and (pointer: coarse) {
    .auth-modal .modal-content,
    #signupModal .modal-content {
        max-height: calc(100vh - 16px);
        max-height: calc(100dvh - 16px);
    }

    .notifications-menu.show {
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
    }
}

/* Touch-specific targets without expanding dense desktop navigation. */
@media (pointer: coarse) {
    .feed-tab,
    .feed-sort-button,
    .thread-load-more,
    .mobile-nav-link,
    .mobile-menu-toggle,
    .site-header .icon-button,
    .header-account-toggle,
    .vote-btn,
    .emoji-picker-option,
    .emoji-picker-category {
        min-height: 44px;
        touch-action: manipulation;
    }

    .reply-toggle,
    .replies-toggle,
    .comments-toggle {
        touch-action: manipulation;
    }
}

/* Accessibility: preserve the site's colors while reducing animation. */
@media (prefers-reduced-motion: reduce) {
    .feed-tab,
    .feed-sort-button,
    .stat-item,
    .wall-hero-signup-btn,
    .wall-hero-login-btn,
    .replies-toggle,
    .comments-toggle {
        scroll-behavior: auto;
        transition-duration: 0.01ms;
        animation-duration: 0.01ms;
    }
}

/* ========================================================================
   NOTIFICATION DROPDOWN — VIEWPORT-SAFE WIDTH AND CARD SPACING
   ======================================================================== */

/* The menu is positioned relative to the bell; do not constrain it to the
   bell's 40–44px width. Preserve the original 380px desktop design. */
.site-header .header-notifications .notifications-menu,
.site-header .notifications-menu,
.notifications-menu {
    box-sizing: border-box;
    width: 380px;
    min-width: 0;
    max-width: calc(100vw - 24px);
    overflow-x: hidden;
    overflow-y: hidden;
}

/* Keep scrolling inside the list instead of squashing the item cards. */
.notifications-menu .notifications-list {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 0 1 auto;
    min-width: 0;
    min-height: 0;
    width: 100%;
    gap: 12px;
    padding: 12px;
    overflow-x: hidden;
    overflow-y: auto;
}

.notifications-menu .notifications-list > * {
    flex: 0 0 auto;
    min-width: 0;
    max-width: 100%;
}

.notifications-menu .notifications-list .notification-item {
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    flex: 0 0 auto;
    gap: 13px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 14px 12px;
}

.notifications-menu .notification-content {
    flex: 1 1 0;
    min-width: 0;
}

/* On narrow phones, preserve separate cards and usable text width. */
@media (max-width: 575.98px) {
    .site-header .header-notifications .notifications-menu,
    .site-header .notifications-menu,
    .notifications-menu {
        width: min(380px, calc(100vw - 16px));
        max-width: calc(100vw - 16px);
    }

    .notifications-menu .notifications-list {
        gap: 10px;
        padding: 10px;
    }

    .notifications-menu .notifications-list .notification-item {
        gap: 10px;
        padding: 12px 10px;
    }
}
/* ============================================================
   Global Success Messages
   ============================================================ */

.global-success-container {
    width: 100%;
    max-width: 1180px;
    margin: 14px auto 0;
    padding: 0 12px;
}

/* Main alert */
.global-success-alert {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 13px 48px 13px 16px;
    margin: 0;
    border: 1px solid rgba(22, 209, 139, 0.45);
    border-left: 4px solid #16d18b;
    border-radius: 12px;
    background: linear-gradient(
        135deg,
        rgba(15, 65, 49, 0.97),
        rgba(11, 37, 37, 0.98)
    );
    color: #e4fff2;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.2);
}

/* Success icon */
.global-success-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: rgba(22, 209, 139, 0.12);
    color: #64e6b0;
    font-size: 1.15rem;
}

/* Message */
.global-success-text {
    flex: 1;
    min-width: 0;
    margin: 0;
    color: #e4fff2;
    font-size: 0.87rem;
    font-weight: 500;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* Close button */
.global-success-close {
    position: absolute;
    top: 50%;
    right: 13px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #a9f1d0;
    font-size: 1.15rem;
    cursor: pointer;
}

.global-success-close:hover {
    background: rgba(22, 209, 139, 0.15);
    color: #ffffff;
}

.global-success-close:focus-visible {
    outline: 2px solid #64e6b0;
    outline-offset: 2px;
}

/* Mobile */
@media (max-width: 575px) {
    .global-success-container {
        margin-top: 10px;
        padding: 0 10px;
    }

    .global-success-alert {
        gap: 9px;
        min-height: 52px;
        padding: 11px 42px 11px 11px;
        border-radius: 10px;
    }

    .global-success-icon {
        flex-basis: 30px;
        width: 30px;
        height: 30px;
        font-size: 1rem;
    }

    .global-success-text {
        font-size: 0.82rem;
    }
}
/* ========================================================================
   FEEDBACK PAGE — append this section to assets/css/app.css
   ======================================================================== */

/* ============================================================
   THERANTITWALL — FEEDBACK PAGE
   Scope all rules to .feedback-page to avoid affecting the feed.
   Designed for the site's existing dark/light theme and bg.png.
   ============================================================ */
.feedback-page {
    --feedback-accent: #1497ff;
    --feedback-cyan: #37b7ff;
    --feedback-text: #f5f8ff;
    --feedback-muted: #b7c7df;
    --feedback-line: rgba(69, 134, 190, .40);
    --feedback-panel: rgba(6, 22, 42, .97);
    --feedback-panel-alt: rgba(12, 38, 66, .94);
    color: var(--feedback-text);
    width: min(100%, 1180px);
    margin: 0 auto;
}
.feedback-page .feedback-hero {
    margin-bottom: 20px;
}
.feedback-page .feedback-layout {
    width: 100%;
}
.feedback-page .feedback-panel {
    min-width: 0;
}
.feedback-page .feedback-fieldset {
    min-width: 0;
    border: 0;
    padding: 0;
    margin: 0;
}
.feedback-page .feedback-panel-heading .text-body-secondary,
.feedback-page .feedback-panel .form-text {
    color: #9eb7d0 !important;
}
html[data-theme="light"] .feedback-page .feedback-panel-heading .text-body-secondary,
html[data-theme="light"] .feedback-page .feedback-panel .form-text {
    color: #556c86 !important;
}
.feedback-page *, .feedback-page *::before, .feedback-page *::after { box-sizing: border-box; }
.feedback-page .feedback-topbar { background: #151e2b; border-bottom: 1px solid #344860; box-shadow: 0 8px 24px rgba(0,0,0,.22); }
.feedback-page .feedback-topbar-inner { max-width: 1160px; margin: auto; padding: 17px 24px; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.feedback-page .feedback-brand { color: #f5f9ff; text-decoration: none; font-weight: 850; letter-spacing: -.035em; font-size: clamp(1.12rem, 2vw, 1.4rem); display: inline-flex; gap: 9px; align-items: center; }
.feedback-page .feedback-brand i { color: #1497ff; font-size: 1.6em; line-height: 1; }
.feedback-page .feedback-back { color: #bfd5ee; display: inline-flex; gap: 8px; align-items: center; text-decoration: none; font-size: .88rem; font-weight: 650; }
.feedback-page .feedback-back:hover { color: #61bcff; }
.feedback-page .feedback-shell { max-width: 1160px; margin: 0 auto; padding: 44px 24px 80px; }
.feedback-page .feedback-intro { text-align: center; margin: 0 auto 32px; max-width: 750px; }
.feedback-page .feedback-eyebrow { display: inline-flex; gap: 9px; align-items: center; padding: 8px 13px; border: 1px solid rgba(64,155,234,.42); background: rgba(11,65,113,.34); color: #8bd2ff; font-size: .69rem; font-weight: 850; letter-spacing: .11em; border-radius: 999px; }
.feedback-page .feedback-intro h1 { margin: 16px 0 10px; font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 900; line-height: 1.1; letter-spacing: -.045em; color: #fff; }
.feedback-page .feedback-intro h1 span { color: #37b7ff; }
.feedback-page .feedback-intro p { color: #b8cce2; line-height: 1.65; font-size: .98rem; margin: 0; }
.feedback-page .feedback-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; align-items: start; }
.feedback-page .feedback-panel, .feedback-page .feedback-side-card { border: 1px solid var(--feedback-line); background: linear-gradient(145deg, var(--feedback-panel-alt), var(--feedback-panel)); box-shadow: 0 18px 44px rgba(0,0,0,.27); border-radius: 15px; }
.feedback-page .feedback-panel { padding: clamp(20px, 3vw, 34px); }
.feedback-page .feedback-panel-heading { display: flex; gap: 15px; align-items: center; padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid rgba(79,127,170,.30); }
.feedback-page .feedback-panel-icon { display: grid; place-items: center; flex: 0 0 47px; width: 47px; height: 47px; border-radius: 12px; border: 1px solid rgba(41,151,244,.35); background: rgba(22,127,220,.14); color: #48b5ff; font-size: 1.3rem; }
.feedback-page .feedback-panel-heading h2 { color: #f7fbff; font-size: 1.2rem; font-weight: 850; margin: 0 0 4px; }
.feedback-page .feedback-panel-heading p { color: #9eb7d0; font-size: .86rem; margin: 0; }
.feedback-page .feedback-fieldset { border: 0; padding: 0; margin: 0 0 25px; min-width: 0; }
.feedback-page .feedback-label { display: block; margin: 0 0 9px; font-size: .86rem; font-weight: 750; color: #eaf3ff; }
.feedback-page .feedback-label > span { color: #55b5ff; }
.feedback-page .feedback-label small { color: #88a6c5; font-weight: 500; margin-left: 5px; }
.feedback-page .feedback-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.feedback-page .feedback-type { position: relative; display: block; cursor: pointer; min-width: 0; }
.feedback-page .feedback-type input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.feedback-page .feedback-type-body { display: grid; grid-template-columns: 30px minmax(0,1fr); column-gap: 8px; align-items: center; min-height: 70px; padding: 12px; background: rgba(3, 17, 33, .72); border: 1px solid #2b4c70; border-radius: 10px; transition: border-color .16s, background .16s, box-shadow .16s; }
.feedback-page .feedback-type-body i { grid-row: 1 / span 2; color: #5bbaff; font-size: 1.3rem; }
.feedback-page .feedback-type-body strong { color: #e8f3ff; font-size: .83rem; line-height: 1.3; }
.feedback-page .feedback-type-body small { color: #92aeca; font-size: .72rem; line-height: 1.35; }
.feedback-page .feedback-type:hover .feedback-type-body { border-color: #499fe9; background: rgba(20, 70, 114, .34); }
.feedback-page .feedback-type input:checked + .feedback-type-body { border-color: #1497ff; background: rgba(14, 94, 163, .31); box-shadow: inset 0 0 0 1px rgba(20,151,255,.25); }
.feedback-page .feedback-type input:focus-visible + .feedback-type-body { outline: 2px solid #93d5ff; outline-offset: 3px; }
.feedback-page .feedback-field { margin-bottom: 22px; }
.feedback-page .feedback-input { display: block; width: 100%; border: 1px solid #355b80; border-radius: 9px; background: #07192c; padding: 12px 13px; color: #f6faff; font: inherit; font-size: .9rem; min-height: 46px; outline: none; transition: border-color .15s, box-shadow .15s; }
.feedback-page .feedback-input::placeholder { color: #7897b6; opacity: 1; }
.feedback-page .feedback-input:focus { border-color: #47aafa; background: #0a2038; color: #fff; box-shadow: 0 0 0 3px rgba(43,159,247,.16); }
.feedback-page .feedback-textarea { min-height: 142px; resize: vertical; line-height: 1.6; }
.feedback-page .feedback-textarea-small { min-height: 82px; }
.feedback-page .feedback-help { color: #8fa9c5; font-size: .77rem; margin-top: 7px; line-height: 1.5; }
.feedback-page .feedback-counter { text-align: right; color: #94afcb; font-size: .74rem; margin-top: 6px; font-variant-numeric: tabular-nums; }
.feedback-page .feedback-privacy { display: flex; align-items: flex-start; gap: 11px; padding: 14px; border-radius: 9px; background: rgba(28,92,143,.16); border: 1px solid rgba(66,141,197,.27); color: #abc4df; font-size: .8rem; line-height: 1.6; margin: 4px 0 24px; }
.feedback-page .feedback-privacy i { color: #5cbaff; font-size: 1.05rem; }
.feedback-page .feedback-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.feedback-page .feedback-submit { display: inline-flex; justify-content: center; align-items: center; gap: 9px; text-decoration: none; background: linear-gradient(180deg, #208dff, #146bc7); border: 1px solid #369fff; color: #fff; font-weight: 750; font-size: .9rem; border-radius: 9px; padding: 12px 21px; cursor: pointer; min-height: 46px; box-shadow: 0 5px 15px rgba(4,90,190,.25); }
.feedback-page .feedback-submit:hover { background: linear-gradient(180deg, #39a3ff, #1875d9); color: #fff; }
.feedback-page .feedback-cancel { color: #acc4de; font-weight: 650; text-decoration: none; font-size: .85rem; }
.feedback-page .feedback-cancel:hover { color: #fff; }
.feedback-page .feedback-aside { display: flex; flex-direction: column; gap: 15px; }
.feedback-page .feedback-side-card { padding: 23px; }
.feedback-page .feedback-side-icon { display: grid; place-items: center; width: 41px; height: 41px; background: rgba(20,151,255,.13); border: 1px solid rgba(45,151,238,.26); border-radius: 10px; color: #4db5ff; font-size: 1.2rem; margin-bottom: 16px; }
.feedback-page .feedback-side-card h3 { margin: 0 0 10px; color: #f7fbff; font-weight: 800; font-size: 1rem; }
.feedback-page .feedback-side-card p, .feedback-page .feedback-side-card li { color: #a7bfd8; font-size: .83rem; line-height: 1.65; }
.feedback-page .feedback-side-card p { margin-bottom: 10px; }
.feedback-page .feedback-side-card ul { margin: 12px 0 0; padding-left: 19px; }
.feedback-page .feedback-side-card li + li { margin-top: 6px; }
.feedback-page .feedback-side-card-blue { background: linear-gradient(150deg, rgba(12,56,96,.96), rgba(5,20,39,.98)); }
.feedback-page .feedback-side-foot { text-align: center; font-size: .77rem; color: #9cb5ce; padding: 3px 12px; }
.feedback-page .feedback-side-foot i { color: #ff6179; margin-right: 5px; }
.feedback-page .feedback-alert { display: flex; align-items: flex-start; gap: 11px; padding: 13px 15px; border-radius: 9px; font-size: .85rem; margin-bottom: 20px; }
.feedback-page .feedback-alert-success { color: #c4ffe9; background: rgba(17,123,83,.18); border: 1px solid rgba(44,204,138,.38); }
.feedback-page .feedback-alert-error { color: #ffd5db; background: rgba(178,46,69,.18); border: 1px solid rgba(255,89,109,.42); }
.feedback-page .feedback-alert i { flex: 0 0 auto; margin-top: 1px; }
.feedback-page .feedback-login-required { padding: 26px; text-align: center; background: rgba(4,23,43,.72); border: 1px dashed #30628c; border-radius: 11px; }
.feedback-page .feedback-login-required > i { font-size: 2rem; color: #55b7ff; }
.feedback-page .feedback-login-required h3 { color: #fff; font-size: 1.15rem; font-weight: 800; margin: 13px 0 8px; }
.feedback-page .feedback-login-required p { color: #acc3d9; font-size: .87rem; line-height: 1.6; }
.feedback-page .feedback-bug-fields[hidden] { display: none !important; }
.feedback-page a:focus-visible, .feedback-page button:focus-visible { outline: 2px solid #80ceff; outline-offset: 3px; }
/* Light-theme support — matches data-theme="light" used by the website. */
html[data-theme="light"] .feedback-page { --feedback-text: #1a2b42; --feedback-muted: #516987; --feedback-line: rgba(40, 96, 154, .25); --feedback-panel: #ffffff; --feedback-panel-alt: #f2f7fe; color: #1a2b42; background-color: #edf4fb; background-image: none; }
html[data-theme="light"] .feedback-page .feedback-topbar { background: #fff; border-bottom-color: #ceddec; }
html[data-theme="light"] .feedback-page .feedback-brand, html[data-theme="light"] .feedback-page .feedback-panel-heading h2, html[data-theme="light"] .feedback-page .feedback-intro h1, html[data-theme="light"] .feedback-page .feedback-side-card h3, html[data-theme="light"] .feedback-page .feedback-label { color: #172a43; }
html[data-theme="light"] .feedback-page .feedback-back, html[data-theme="light"] .feedback-page .feedback-intro p, html[data-theme="light"] .feedback-page .feedback-panel-heading p, html[data-theme="light"] .feedback-page .feedback-side-card p, html[data-theme="light"] .feedback-page .feedback-side-card li { color: #4f6782; }
html[data-theme="light"] .feedback-page .feedback-type-body { background: #fff; border-color: #bdcfe2; }
html[data-theme="light"] .feedback-page .feedback-type-body strong { color: #213950; }
html[data-theme="light"] .feedback-page .feedback-type-body small { color: #5a728d; }
html[data-theme="light"] .feedback-page .feedback-type input:checked + .feedback-type-body { background: #e3f3ff; }
html[data-theme="light"] .feedback-page .feedback-input { color: #21364e; background: #fff; border-color: #adc4dc; }
html[data-theme="light"] .feedback-page .feedback-input::placeholder { color: #8497ae; }
html[data-theme="light"] .feedback-page .feedback-input:focus { color: #172a43; background: #fff; }
html[data-theme="light"] .feedback-page .feedback-privacy { color: #45627e; }
html[data-theme="light"] .feedback-page .feedback-login-required { background: #f1f7ff; }
html[data-theme="light"] .feedback-page .feedback-login-required h3 { color: #192f49; }
@media (max-width: 900px) { .feedback-page .feedback-layout { grid-template-columns: minmax(0, 1fr); } .feedback-page .feedback-aside { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); } .feedback-page .feedback-side-foot { grid-column: 1/-1; } }
@media (max-width: 560px) { .feedback-page .feedback-shell { padding: 28px 14px 55px; } .feedback-page .feedback-topbar-inner { padding: 14px; } .feedback-page .feedback-back { font-size: .78rem; } .feedback-page .feedback-intro { margin-bottom: 24px; } .feedback-page .feedback-types { grid-template-columns: minmax(0, 1fr); } .feedback-page .feedback-panel-heading { align-items: flex-start; } .feedback-page .feedback-aside { display: flex; } .feedback-page .feedback-actions { flex-direction: column; align-items: stretch; } .feedback-page .feedback-cancel { text-align: center; padding: 8px; } }

/* AJAX feedback validation */
.feedback-page .feedback-input.is-invalid { border-color: var(--red, #ff596d); box-shadow: 0 0 0 2px rgba(255, 89, 109, .12); }
.feedback-page .feedback-field-error { margin-top: 7px; color: #ff9cac; font-size: .78rem; line-height: 1.4; }
.feedback-page .feedback-submit:disabled { opacity: .65; cursor: wait; }
.feedback-page #feedbackAjaxMessage.d-none { display: none !important; }
html[data-theme="light"] .feedback-page .feedback-field-error { color: #b32943; }


/* ========================================================================
   THERANTITWALL — ABOUT PAGE MASCOTS
   CSS-only couple characters.
   ======================================================================== */


/* ============================================================
   01. Creators Panel
   ============================================================ */

.about-creators {
    position: relative;
    overflow: hidden;
    padding: clamp(22px, 5vw, 38px);
    border: 1px solid var(--wall-border-soft);
    border-radius: 18px;
    background:
        radial-gradient(
            ellipse at 50% 100%,
            rgba(20, 151, 255, 0.16),
            transparent 65%
        ),
        var(--wall-panel);
    color: var(--text-main);
    text-align: center;
}

.about-creators-heading h2 {
    margin: 0 0 10px;
    color: var(--text-main);
    font-size: clamp(1.2rem, 3vw, 1.6rem);
}

.about-creators-heading p {
    max-width: 570px;
    margin: 0 auto;
    color: var(--text-soft);
    line-height: 1.7;
}


/* ============================================================
   02. Mascot Layout
   ============================================================ */

.about-mascots {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(12px, 4vw, 34px);
    min-height: 238px;
    margin: 18px auto 12px;
}

.about-mascots__heart {
    align-self: center;
    margin-bottom: 25px;
    color: #ff6398;
    font-size: clamp(27px, 5vw, 45px);
    line-height: 1;
    text-shadow: 0 3px 16px rgba(255, 99, 152, 0.35);
}


/* ============================================================
   03. Base Mascot
   ============================================================ */

.about-mascot {
    --mascot-skin: #ffd657;

    position: relative;
    flex: 0 0 142px;
    width: 142px;
    height: 218px;
    isolation: isolate;
}

.about-mascot__hair-back,
.about-mascot__face,
.about-mascot__body,
.about-mascot__ears,
.about-mascot__neck,
.about-mascot__fringe,
.about-mascot__hair-side,
.about-mascot__hair-top,
.about-mascot__eye,
.about-mascot__nose,
.about-mascot__smile,
.about-mascot__blush,
.about-mascot__beard,
.about-mascot__glasses,
.about-mascot__bridge {
    position: absolute;
}


/* ============================================================
   04. Body and Neck
   ============================================================ */

.about-mascot__body {
    z-index: 1;
    left: 5px;
    bottom: 0;
    width: 132px;
    height: 76px;
    border: 3px solid #162c47;
    border-bottom: 0;
    border-radius: 65px 65px 0 0;
    background: #e96e9f;
}

/* Husband wears blue. */

.about-mascot--husband .about-mascot__body {
    background: #288ed4;
}

.about-mascot__neck {
    z-index: 2;
    bottom: 60px;
    left: 57px;
    width: 28px;
    height: 30px;
    border-radius: 0 0 12px 12px;
    background: var(--mascot-skin);
}


/* ============================================================
   05. Face and Ears
   Both characters have the SAME yellow skin.
   ============================================================ */

.about-mascot__ears {
    z-index: 3;
    top: 65px;
    left: 8px;
    width: 126px;
    height: 36px;
    border: 3px solid #162c47;
    border-radius: 25px;
    background: var(--mascot-skin);
}

.about-mascot__face {
    z-index: 4;
    top: 23px;
    left: 19px;
    width: 104px;
    height: 129px;
    border: 3px solid #162c47;
    border-radius: 47% 47% 45% 45%;
    background: var(--mascot-skin);
}


/* ============================================================
   06. Eyes
   ============================================================ */

.about-mascot__eye {
    z-index: 5;
    top: 55px;
    width: 9px;
    height: 13px;
    border-radius: 50%;
    background: #17253c;
}

.about-mascot__eye--left {
    left: 26px;
}

.about-mascot__eye--right {
    right: 26px;
}


/* ============================================================
   07. Nose and Smile
   ============================================================ */

.about-mascot__nose {
    z-index: 5;
    top: 73px;
    left: 47px;
    width: 7px;
    height: 9px;
    border-radius: 50%;
    background: rgba(105, 71, 57, 0.23);
}

.about-mascot__smile {
    z-index: 7;
    top: 89px;
    left: 36px;
    width: 28px;
    height: 15px;
    border-bottom: 3px solid #743c47;
    border-radius: 0 0 30px 30px;
}


/* ============================================================
   08. Wife — Brown and Pink Hair
   Hair extends just past the shoulders.
   ============================================================ */

.about-mascot--wife .about-mascot__hair-back {
    z-index: 0;
    top: 7px;
    left: 4px;
    width: 134px;
    height: 181px;
    border: 3px solid #162c47;
    border-radius: 69px 69px 30px 30px;
    background:
        linear-gradient(
            to bottom,
            #70442f 0 49%,
            #ff5ba8 50% 100%
        );
}


/* ============================================================
   09. Wife — Fringe
   ============================================================ */

.about-mascot--wife .about-mascot__fringe {
    z-index: 6;
    top: 17px;
    left: 17px;
    width: 108px;
    height: 55px;
    border-radius: 70% 60% 36% 25%;
    background: #70442f;
    clip-path: polygon(
        0 0,
        100% 0,
        100% 55%,
        65% 42%,
        40% 80%,
        12% 65%,
        0 100%
    );
}


/* ============================================================
   10. Wife — Side Hair
   Brown upper half, pink lower half.
   ============================================================ */

.about-mascot--wife .about-mascot__hair-side {
    z-index: 6;
    top: 56px;
    width: 22px;
    height: 120px;
    border: 2px solid #162c47;
    border-radius: 14px;
    background:
        linear-gradient(
            to bottom,
            #70442f 0 26%,
            #ff5ba8 27% 100%
        );
}

.about-mascot--wife .about-mascot__hair-side--left {
    left: 5px;
    transform: rotate(3deg);
}

.about-mascot--wife .about-mascot__hair-side--right {
    right: 5px;
    transform: rotate(-3deg);
}


/* ============================================================
   11. Wife — Rosy Cheeks
   ============================================================ */

.about-mascot--wife .about-mascot__blush {
    z-index: 5;
    top: 79px;
    width: 20px;
    height: 10px;
    border-radius: 50%;
    background: rgba(238, 105, 136, 0.35);
}

.about-mascot--wife .about-mascot__blush--left {
    left: 11px;
}

.about-mascot--wife .about-mascot__blush--right {
    right: 11px;
}


/* ============================================================
   12. Husband — Hair
   Yellow skin, dark hair.
   ============================================================ */

.about-mascot--husband .about-mascot__hair-top {
    z-index: 6;
    top: 12px;
    left: 21px;
    width: 101px;
    height: 48px;
    border: 3px solid #162c47;
    border-radius: 53px 48px 12px 15px;
    background: #3d3028;
    clip-path: polygon(
        0 18%,
        23% 0,
        77% 2%,
        100% 32%,
        100% 82%,
        74% 66%,
        47% 84%,
        22% 67%,
        0 100%
    );
}


/* ============================================================
   13. Husband — Black Beard
   ============================================================ */

.about-mascot--husband .about-mascot__beard {
    z-index: 5;
    left: 10px;
    bottom: 4px;
    width: 78px;
    height: 45px;
    border-radius: 25% 25% 48% 48%;
    background: #0d0f14;
    clip-path: polygon(
        0 0,
        16% 17%,
        30% 9%,
        50% 18%,
        70% 9%,
        84% 17%,
        100% 0,
        96% 63%,
        74% 89%,
        50% 100%,
        26% 89%,
        4% 63%
    );
}

.about-mascot--husband .about-mascot__smile {
    top: 96px;
    border-bottom-color: #f6d6bd;
}


/* ============================================================
   14. Husband — Glasses
   ============================================================ */

.about-mascot--husband .about-mascot__glasses {
    z-index: 7;
    top: 48px;
    width: 37px;
    height: 29px;
    border: 3px solid #182638;
    border-radius: 11px;
    background: rgba(219, 244, 255, 0.15);
}

.about-mascot--husband .about-mascot__glasses--left {
    left: 10px;
}

.about-mascot--husband .about-mascot__glasses--right {
    right: 10px;
}

.about-mascot--husband .about-mascot__bridge {
    z-index: 7;
    top: 60px;
    left: 45px;
    width: 10px;
    height: 3px;
    background: #182638;
}


/* ============================================================
   15. Personal Message
   ============================================================ */

.about-creators-message {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 600px;
    margin: 20px auto 0;
    line-height: 1.7;
}

.about-creators-message h3 {
    margin: 0;
    color: var(--wall-cyan);
    font-size: 1.25rem;
    font-weight: 700;
}

.about-creators-message p {
    margin: 0;
    color: var(--text-soft);
}

.about-creators-message p:last-child {
    color: var(--text-main);
    font-weight: 600;
}


/* ============================================================
   16. Mobile Responsiveness
   ============================================================ */

@media (max-width: 575.98px) {

    .about-creators {
        padding: 22px 14px;
    }

    .about-mascots {
        gap: 8px;
        min-height: 205px;
    }

    .about-mascot {
        flex: 0 0 118px;
        width: 142px;
        height: 218px;
        transform: scale(0.83);
        transform-origin: bottom left;
    }

    .about-mascots__heart {
        margin-bottom: 18px;
        font-size: 28px;
    }

    .about-creators-message {
        margin-top: 16px;
    }

    .about-creators-message h3 {
        font-size: 1.15rem;
    }

}


/* ============================================================
   GUEST HERO — AUTHENTICATION BUTTONS
   ============================================================ */

.wall-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

/* Shared button styling */

.wall-hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    padding: 10px 22px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.wall-hero-btn i {
    font-size: 1.05rem;
}

/* ============================================================
   LOGIN BUTTON
   ============================================================ */

.wall-hero-btn-login {
    color: var(--text-main);
    background: rgba(20, 151, 255, 0.1);
    border-color: var(--wall-border);
}

.wall-hero-btn-login:hover {
    color: #ffffff;
    background: rgba(20, 151, 255, 0.2);
    border-color: var(--wall-blue);
    transform: translateY(-2px);
}

/* ============================================================
   SIGNUP BUTTON
   ============================================================ */

.wall-hero-btn-signup {
    color: #ffffff;
    background: var(--wall-blue);
    border-color: var(--wall-blue);
    box-shadow: 0 4px 14px rgba(20, 151, 255, 0.2);
}

.wall-hero-btn-signup:hover {
    color: #ffffff;
    background: var(--wall-blue-2);
    border-color: var(--wall-blue-2);
    box-shadow: 0 6px 20px rgba(20, 151, 255, 0.35);
    transform: translateY(-2px);
}

/* Keyboard accessibility */

.wall-hero-btn:focus-visible {
    outline: 2px solid var(--wall-cyan);
    outline-offset: 3px;
}

/* ============================================================
   MOBILE RESPONSIVENESS
   ============================================================ */

@media (max-width: 575.98px) {

    .wall-hero-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 20px;
    }

    .wall-hero-btn {
        width: 100%;
        padding: 11px 12px;
    }

}

@media (prefers-reduced-motion: reduce) {

    .wall-hero-btn {
        transition: none;
    }

    .wall-hero-btn:hover {
        transform: none;
    }

}

/* ========================================================================
   25. UNIFIED SITE-WIDE RESPONSIVE LAYOUT
   ------------------------------------------------------------------------
   Canonical outer gutters, mobile typography, logo, and feed sorting.
   Keep these rules together. Do not append competing mobile overrides.
   All main pages share the same visible brick-wall margins.
   ======================================================================== */

:root {
    --site-page-gutter: 24px;
}

@media (max-width: 991.98px) {
    :root { --site-page-gutter: 16px; }
}

@media (max-width: 767.98px) {
    :root { --site-page-gutter: 10px; }
}

/* One outer gutter system across Wall, About, legal, profile and threads. */
body .site-main {
    box-sizing: border-box;
    width: 100%;
    padding-right: var(--site-page-gutter);
    padding-left: var(--site-page-gutter);
}

/* Bootstrap containers must not impose a second, narrower page frame. */
body .site-main > .container,
body .site-main > .container-fluid,
body .site-main.container,
body .site-main.container-fluid {
    width: 100%;
    max-width: none;
    margin-right: auto;
    margin-left: auto;
    padding-right: 0;
    padding-left: 0;
}

/* Don't use 100vw/left:50% breakout; it ignores the common gutter. */
body .site-main .page-layout,
body .site-main .content-page,
body .site-main .legal-page,
body .site-main .feedback-page,
body .site-main .profile-page,
body .site-main .report-page {
    position: relative;
    left: auto;
    right: auto;
    transform: none;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin-right: auto;
    margin-left: auto;
}

body .site-main .page-layout-inner,
body .site-main .page-main,
body .site-main .feed-shell,
body .site-main .home-stack,
body .site-main .rant-feed {
    min-width: 0;
    width: 100%;
    max-width: none;
    margin-right: auto;
    margin-left: auto;
}

/* Preserve the full width of About/content panels, inside the shared gutter. */
body .site-main .content-hero,
body .site-main .content-card,
body .site-main .wall-hero,
body .site-main .rant-card {
    box-sizing: border-box;
    max-width: 100%;
}

/* Both sorting implementations have four equal, non-wrapping columns. */
body .site-main .feed-tabs,
body .site-main .page-layout .feed-tabs,
body .site-main .feed-sort-bar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    justify-content: stretch;
    align-items: stretch;
    gap: 6px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-right: 0;
    margin-left: 0;
    overflow: visible;
}

body .site-main .feed-tab,
body .site-main .feed-sort-button {
    display: flex;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    line-height: 1.25;
}

@media (max-width: 767.98px) {
    /* Clear nested Bootstrap horizontal gutters that shrink the feed. */
    body .site-main .page-layout,
    body .site-main .content-page,
    body .site-main .legal-page,
    body .site-main .feedback-page,
    body .site-main .profile-page,
    body .site-main .report-page {
        padding-right: 0;
        padding-left: 0;
    }

    body .site-main .page-layout .row,
    body .site-main .page-layout-inner.row {
        --bs-gutter-x: 0;
    }

    body .site-main .page-layout .container,
    body .site-main .page-layout .container-fluid {
        width: 100%;
        max-width: none;
        padding-inline: 0;
    }

    body .site-main .wall-hero,
    body .site-main .content-hero,
    body .site-main .content-card {
        width: 100%;
        padding: 20px 14px;
    }

    body .site-main .page-layout .wall-hero-content {
        padding-right: 0;
        padding-left: 0;
    }

    /* Four sorting buttons stay on ONE row. Long labels wrap inside. */
    body .site-main .feed-tabs,
    body .site-main .page-layout .feed-tabs,
    body .site-main .feed-sort-bar {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 4px;
        padding: 5px;
    }

    body .site-main .feed-tab,
    body .site-main .feed-sort-button {
        flex: none;
        min-height: 52px;
        gap: 4px;
        padding: 7px 3px;
        font-size: 0.8125rem;
        font-weight: 750;
        line-height: 1.2;
        flex-direction: column;
    }

    body .site-main .feed-tab i,
    body .site-main .feed-sort-button i {
        flex-shrink: 0;
        font-size: 1rem;
    }

    /* Real body copy: comfortably readable on a phone. */
    body .site-main .rant-body,
    body .site-main .rant-body p,
    body .site-main .comment-body,
    body .site-main .comment-body p,
    body .site-main .reply-body,
    body .site-main .reply-body p,
    body .site-main .content-page p,
    body .site-main .content-card p,
    body .site-main .legal-page p,
    body .site-main .policy-section p {
        font-size: 1.0625rem;
        line-height: 1.65;
    }

    body .site-main .rant-main { padding-inline: 12px; }

    body .site-main .rant-author,
    body .site-main .rant-username,
    body .site-main .comment-author,
    body .site-main .comment-username {
        font-size: 1rem;
    }

    body .site-main .rant-post-time,
    body .site-main .comment-time,
    body .site-main .reply-time,
    body .site-main .rant-actions,
    body .site-main .comment-actions-row {
        font-size: 0.875rem;
    }

    body .site-main .wall-hero-lead,
    body .site-main .wall-hero > p,
    body .site-main .content-page .page-lead,
    body .site-main .wall-hero-guest-copy small {
        font-size: 1rem;
        line-height: 1.6;
    }

    body .site-main textarea,
    body .site-main input,
    body .site-main select,
    body .site-main .form-control,
    body .site-main .form-select {
        font-size: 1rem;
    }

    body .site-main .community-stats .stat-item strong {
        font-size: 1.125rem;
    }

    body .site-main .community-stats .stat-item span:not(.stat-icon) {
        font-size: 0.75rem;
        line-height: 1.35;
        letter-spacing: 0.02em;
    }

    /* Slightly larger brand image and name without breaking mobile navigation. */
    body .site-header .brand-logo {
        width: 52px;
        height: 52px;
        max-width: 52px;
        max-height: 52px;
        flex: 0 0 52px;
    }

    body .site-header .brand-text {
        font-size: clamp(1.05rem, 3.8vw, 1.2rem);
        line-height: 1.12;
    }

    body .site-header .brand-link { gap: 7px; }
}

@media (max-width: 359.98px) {
    /* Still one row on compact phones, even for Most Commented. */
    body .site-main .feed-tab,
    body .site-main .feed-sort-button {
        font-size: 0.75rem;
        padding-inline: 2px;
    }

    body .site-header .brand-logo {
        width: 46px;
        height: 46px;
        max-width: 46px;
        max-height: 46px;
        flex: 0 0 46px;
    }
}