/* ==========================================================================
   LYNXLYNKR — COMPLETE SITE STYLESHEET
   This is the single stylesheet for the entire site.

   The structural foundation is consolidated here first. The LynxLynkr
   black-and-gold theme follows it and therefore
   controls the final colors, surfaces, borders, buttons, forms, and branding.
   ========================================================================== */

/* ==========================================================================
   CONSOLIDATED STRUCTURAL FOUNDATION
   ========================================================================== */

:root{
    --ink:#26302d;
    --muted:#6e7874;
    --cream:#fffaf2;
    --paper:#fff;
    --peach:#f28f72;
    --coral:#e76f51;
    --sage:#6f8f7a;
    --line:#eadfd2;
    --shadow:0 18px 50px rgba(56,43,32,.08)
}

*{
    box-sizing:border-box
}

html{
    scroll-behavior:smooth
}

body{
    margin:0;
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    color:var(--ink);
    background:var(--cream);
    line-height:1.6
}

a{
    color:inherit;
    text-decoration:none
}

button,
input,
textarea{
    font:inherit
}

.nav{
    height:76px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 6%;
    background:rgba(255,250,242,.94);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);
    position:sticky;
    top:0;
    z-index:10
}

.brand{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:800;
    font-size:1.2rem
}

.brand-mark{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:11px;
    background:var(--coral);
    color:#fff
}

.nav-links{
    display:flex;
    align-items:center;
    gap:24px;
    color:#505b57;
    font-weight:600
}

.nav-links a:hover{
    color:var(--coral)
}

.nav-cta{
    background:var(--ink);
    color:#fff!important;
    padding:10px 17px;
    border-radius:999px
}

.menu-toggle{
    display:none;
    background:none;
    border:0;
    font-size:1.4rem
}

.hero{
    min-height:650px;
    display:grid;
    place-items:center;
    text-align:center;
    padding:90px 6%;
    background:
        radial-gradient(circle at 20% 20%,#ffe3cf,transparent 34%),
        radial-gradient(circle at 85% 25%,#dfeadf,transparent 30%),
        var(--cream)
}

.hero-inner{
    max-width:850px
}

.eyebrow{
    text-transform:uppercase;
    letter-spacing:.15em;
    font-size:.75rem;
    font-weight:800;
    color:var(--sage)
}

h1,
h2,
h3{
    line-height:1.1;
    margin:12px 0 18px
}

h1{
    font-size:clamp(2.7rem,7vw,5.7rem);
    letter-spacing:-.055em
}

.hero h1 span{
    color:var(--coral)
}

.hero p,
.lead{
    font-size:1.2rem;
    color:var(--muted);
    max-width:680px;
    margin:0 auto 30px
}

.hero-actions{
    display:flex;
    gap:12px;
    justify-content:center
}

.btn{
    border:0;
    border-radius:12px;
    padding:12px 19px;
    font-weight:800;
    cursor:pointer;
    display:inline-block
}

.btn-primary{
    background:var(--coral);
    color:#fff
}

.btn-primary:hover{
    background:#d95d40
}

.btn-light{
    background:#fff;
    border:1px solid var(--line)
}

.section{
    padding:90px 6%;
    max-width:1250px;
    margin:auto
}

.section.tinted{
    max-width:none;
    background:#f5eee5
}

.section-heading{
    text-align:center;
    margin-bottom:45px
}

.section-heading h2{
    font-size:clamp(2rem,4vw,3.4rem)
}

.cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px
}

.card,
.form-card{
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:22px;
    padding:26px;
    box-shadow:var(--shadow)
}

.icon{
    font-size:2rem;
    color:var(--coral)
}

.split{
    max-width:1100px;
    margin:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center
}

.split h2{
    font-size:3rem
}

.feature-list>div{
    padding:19px 0;
    border-bottom:1px solid #ddcec0;
    display:flex;
    gap:22px
}

.feature-list b{
    color:var(--coral)
}

.form-card{
    max-width:850px;
    margin:auto
}

.form-card label{
    display:block;
    font-weight:700;
    margin-bottom:18px
}

.form-card input,
.form-card textarea,
.message-form input{
    width:100%;
    margin-top:7px;
    border:1px solid var(--line);
    background:#fffdf9;
    border-radius:11px;
    padding:12px 14px;
    outline:none
}

.form-card input:focus,
.form-card textarea:focus,
.message-form input:focus{
    border-color:var(--coral);
    box-shadow:0 0 0 3px rgba(231,111,81,.1)
}

.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px
}

.footer{
    padding:45px 6%;
    border-top:1px solid var(--line);
    display:flex;
    justify-content:space-between;
    gap:30px;
    align-items:center;
    color:var(--muted)
}

.footer-links{
    display:flex;
    gap:20px
}

.page{
    max-width:1050px;
    margin:auto;
    padding:90px 6%;
    min-height:65vh
}

.page h1{
    font-size:4rem
}

.narrow{
    max-width:850px
}

.auth-wrap{
    min-height:70vh;
    display:grid;
    place-items:center;
    padding:60px 20px
}

.auth{
    width:min(480px,100%)
}

.auth h1{
    font-size:2.6rem
}

.alert,
.success{
    padding:12px 14px;
    border-radius:10px;
    margin:15px 0;
    background:#fff0ec;
    color:#9b3f2a
}

.success{
    background:#eaf5ed;
    color:#3e6d4d
}

.app-shell{
    max-width:1200px;
    margin:auto;
    padding:35px 20px;
    display:grid;
    grid-template-columns:250px 1fr;
    gap:30px
}

.mini-profile{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:4px;
    background:#fff;
    border:1px solid var(--line);
    padding:25px;
    border-radius:20px
}

.mini-profile span,
.post-head span,
.person span,
.message-list small,
.muted{
    display:block;
    color:var(--muted);
    font-size:.85rem
}

.mini-profile a{
    color:var(--coral);
    font-weight:700;
    margin-top:10px
}

.avatar{
    width:54px;
    height:54px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#f4d3c8;
    color:#91412f;
    font-weight:900
}

.avatar.small{
    width:42px;
    height:42px
}

.avatar.tiny{
    width:34px;
    height:34px;
    font-size:.8rem
}

.composer textarea{
    border:0;
    resize:vertical;
    min-height:100px;
    width:100%;
    outline:0
}

.composer-bottom{
    border-top:1px solid var(--line);
    padding-top:12px;
    display:flex;
    align-items:center;
    justify-content:space-between
}

.post{
    margin-top:18px
}

.post-head{
    display:flex;
    gap:12px;
    align-items:center
}

.post p{
    font-size:1.05rem;
    margin-bottom:0
}

.empty{
    text-align:center;
    padding:50px;
    color:var(--muted)
}

.section-small{
    margin-top:50px
}

.person{
    display:flex;
    gap:16px;
    align-items:flex-start
}

.person .avatar{
    flex:none
}

.person form{
    margin-top:10px
}

.messages-layout,
.chat-layout{
    max-width:1200px;
    height:calc(100vh - 76px);
    margin:auto;
    display:grid;
    grid-template-columns:300px 1fr;
    background:#fff
}

.message-list,
.room-list{
    border-right:1px solid var(--line);
    padding:25px
}

.message-list a,
.room-list a{
    display:flex;
    gap:10px;
    padding:12px;
    border-radius:12px;
    margin:5px 0
}

.message-list a.active,
.room-list a.active{
    background:#f7e7de
}

.conversation,
.chat-window{
    display:flex;
    flex-direction:column;
    min-width:0
}

.conversation-head{
    padding:22px;
    border-bottom:1px solid var(--line)
}

.conversation-head h2{
    margin:0
}

.conversation-head span{
    color:var(--muted)
}

.messages,
.chat-messages{
    flex:1;
    overflow:auto;
    padding:25px;
    background:#fffaf6
}

.bubble{
    max-width:70%;
    width:max-content;
    background:#eee9e3;
    padding:10px 14px;
    border-radius:15px;
    margin-bottom:10px
}

.bubble.mine{
    margin-left:auto;
    background:#f3c7b9
}

.bubble small{
    display:block;
    color:var(--muted);
    font-size:.7rem;
    margin-top:4px
}

.message-form{
    display:flex;
    gap:10px;
    padding:15px;
    border-top:1px solid var(--line)
}

.message-form input{
    margin:0
}

.room-list a{
    display:block
}

.room-list small{
    display:block;
    color:var(--muted);
    margin-top:4px
}

.chat-line{
    display:flex;
    gap:10px;
    margin-bottom:17px
}

.chat-line p{
    margin:3px 0 0
}

.chat-line b{
    margin-right:8px
}

.chat-line .muted{
    display:inline
}

.room-list h2,
.message-list h2{
    margin-top:0
}


/*
|--------------------------------------------------------------------------
| Mobile Layout
|--------------------------------------------------------------------------
*/

@media(max-width:800px){

    .nav-links{
        display:none;
        position:absolute;
        top:76px;
        left:0;
        right:0;
        background:var(--cream);
        padding:18px 6%;
        flex-direction:column;
        align-items:stretch;
        border-bottom:1px solid var(--line)
    }

    .nav-links.open{
        display:flex
    }

    .menu-toggle{
        display:block
    }

    .cards,
    .split,
    .form-grid{
        grid-template-columns:1fr
    }

    .hero{
        min-height:580px
    }

    .footer{
        flex-direction:column;
        align-items:flex-start
    }

    .app-shell{
        grid-template-columns:1fr
    }

    .sidebar{
        display:none
    }

    .messages-layout,
    .chat-layout{
        grid-template-columns:1fr;
        height:auto;
        min-height:calc(100vh - 76px)
    }

    .message-list,
    .room-list{
        border-right:0;
        border-bottom:1px solid var(--line);
        overflow:auto;
        display:flex;
        gap:5px
    }

    .message-list h2,
    .room-list h2{
        display:none
    }

    .message-list a,
    .room-list a{
        min-width:150px
    }

    .conversation{
        min-height:65vh
    }

    .page h1{
        font-size:3rem
    }

    .bubble{
        max-width:85%
    }
}


/*
|--------------------------------------------------------------------------
| Freelynkr Staff User Display
|--------------------------------------------------------------------------
|
| Staff members will appear as:
|
| [custom staff icon] Chuck @testuser
|
| Regular users will appear without the icon.
|
|--------------------------------------------------------------------------
*/

.staff-user{
    display:inline-flex;
    align-items:center;
    gap:5px;
    line-height:1.4;
    vertical-align:middle;
}

.staff-icon{
    width:16px;
    height:16px;
    object-fit:contain;
    flex:0 0 16px;
    display:inline-block;
    vertical-align:middle;
}

.staff-user strong{
    font-weight:800;
    color:var(--ink);
}

.staff-username{
    color:var(--muted);
    font-size:.85rem;
    font-weight:400;
    white-space:nowrap;
}


/*
|--------------------------------------------------------------------------
| Staff Icon Hover
|--------------------------------------------------------------------------
*/

.staff-icon:hover{
    transform:scale(1.12);
    transition:transform .15s ease
}


/*
|--------------------------------------------------------------------------
| Staff Icon On Dark/Colored Backgrounds
|--------------------------------------------------------------------------
*/

.staff-user .staff-icon{
    vertical-align:-3px;
}


/*
|--------------------------------------------------------------------------
| Notification Badge
|--------------------------------------------------------------------------
*/

.notification-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:20px;
    height:20px;
    padding:0 6px;
    margin-left:5px;
    border-radius:999px;
    background:var(--coral);
    color:#fff;
    font-size:.72rem;
    font-weight:800;
    line-height:1;
}
/* Staff identification icon */

.staff-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    display: inline-block;
    vertical-align: -3px;
    margin-right: 4px;
}

.staff-name {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.message-sender {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 3px;
}

.message-username {
    color: var(--muted);
    font-size: .78rem;
}
/*
|--------------------------------------------------------------------------
| Staff Dashboard
|--------------------------------------------------------------------------
*/

.staff-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-top: 35px;
}

.staff-stat {
    text-align: center;
}

.staff-stat span {
    display: block;
    color: var(--muted);
    font-size: .85rem;
    font-weight: 700;
}

.staff-stat strong {
    display: block;
    margin-top: 8px;
    font-size: 2rem;
    color: var(--coral);
}

@media(max-width:900px) {

    .staff-stats {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media(max-width:500px) {

    .staff-stats {
        grid-template-columns: 1fr;
    }

}

/*
|--------------------------------------------------------------------------
| Staff User Management
|--------------------------------------------------------------------------
*/

.staff-user-search {
    display: flex;
    gap: 10px;
    margin: 30px 0;
}

.staff-user-search input {
    flex: 1;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 12px;
    padding: 12px 15px;
    outline: none;
}

.staff-user-search input:focus {
    border-color: var(--coral);
    box-shadow: 0 0 0 3px rgba(231,111,81,.1);
}

.staff-user-list {
    display: grid;
    gap: 15px;
}

.staff-user-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
}

.staff-user-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.staff-user-title {
    display: flex;
    align-items: center;
    gap: 5px;
}

.staff-user-title span,
.staff-user-details,
.staff-role-label {
    color: var(--muted);
    font-size: .85rem;
}

.staff-user-details {
    margin-top: 4px;
}

.staff-role-label {
    margin-top: 5px;
}

.staff-user-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-label {
    padding: 7px 11px;
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
    font-size: .75rem;
    font-weight: 800;
}

@media(max-width:700px) {

    .staff-user-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .staff-user-actions {
        flex-wrap: wrap;
    }

    .staff-user-search {
        flex-wrap: wrap;
    }

    .staff-user-search input {
        flex-basis: 100%;
    }

}

/*
|--------------------------------------------------------------------------
| Staff Content Moderation
|--------------------------------------------------------------------------
*/

.staff-content-list {
    display: grid;
    gap: 16px;
}

.staff-content-card {
    padding: 22px;
}

.staff-content-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 12px;
}

.staff-content-head > div {
    display: flex;
    align-items: center;
    gap: 5px;
}

.staff-content-card p {
    margin: 0 0 15px;
}

.staff-content-actions {
    display: flex;
    gap: 8px;
}

@media(max-width:700px) {

    .staff-content-head {
        align-items: flex-start;
        flex-direction: column;
    }

}

/*
|--------------------------------------------------------------------------
| Staff Content Moderation
|--------------------------------------------------------------------------
*/

.staff-content-list {
    display: grid;
    gap: 16px;
}

.staff-content-card {
    padding: 22px;
}

.staff-content-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 12px;
}

.staff-content-head > div {
    display: flex;
    align-items: center;
    gap: 5px;
}

.staff-content-card p {
    margin: 0 0 15px;
}

.staff-content-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.staff-content-actions form {
    margin: 0;
}


/*
|--------------------------------------------------------------------------
| Destructive Staff Actions
|--------------------------------------------------------------------------
*/

.btn-danger {
    background: #b94035;
    color: #fff;
}

.btn-danger:hover {
    background: #9f3028;
}


@media(max-width:700px) {

    .staff-content-head {
        align-items: flex-start;
        flex-direction: column;
    }

}

/*
|--------------------------------------------------------------------------
| Notifications
|--------------------------------------------------------------------------
*/

.notification-card {
    position: relative;
}

.notification-unread {
    border-left: 4px solid var(--coral);
}

/*
|--------------------------------------------------------------------------
| Navigation User Identity
|--------------------------------------------------------------------------
*/

.nav-user {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.nav-user .staff-icon {
    width: 16px;
    height: 16px;
    margin-right: 1px;
}

/*
|--------------------------------------------------------------------------
| User Profile Pictures
|--------------------------------------------------------------------------
*/

.avatar-photo {
    overflow: hidden;
    padding: 0;
}

.avatar-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: inherit;
}

/*
|--------------------------------------------------------------------------
| Notification Avatars
|--------------------------------------------------------------------------
*/

.notification-list {
    display: grid;
    gap: 16px;
}

.notification-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.notification-avatar {
    flex: 0 0 auto;
}

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

.notification-content p {
    margin: 0 0 4px;
}

.notification-unread {
    border-left: 4px solid var(--coral);
}

/*
|--------------------------------------------------------------------------
| Staff Content User Identity
|--------------------------------------------------------------------------
*/

.staff-content-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

/*
|--------------------------------------------------------------------------
| Feed Photo Posts
|--------------------------------------------------------------------------
*/

.post-photo-upload {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.post-photo-upload input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.post-image-preview-wrap {
    margin-top: 14px;
}

.post-image-preview {
    display: block;
    width: 100%;
    max-height: 450px;
    object-fit: contain;
    border-radius: 14px;
    margin-bottom: 10px;
}

.post-image-container {
    width: 100%;
    margin: 14px 0;
    overflow: hidden;
    border-radius: 14px;
}

.post-image {
    display: block;
    width: 100%;
    max-height: 650px;
    object-fit: contain;
    border-radius: 14px;
}

.post-body {
    margin-bottom: 10px;
}

/*
|--------------------------------------------------------------------------
| Post Options Menu
|--------------------------------------------------------------------------
*/

.post-head {
    position: relative;
}

.post-head-info {
    flex: 1;
    min-width: 0;
}

.post-menu {
    position: relative;
    margin-left: auto;
    align-self: flex-start;
}

.post-menu-button {
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
    padding: 4px 9px;
    border-radius: 50%;
}

.post-menu-button:hover {
    background: rgba(0, 0, 0, 0.06);
}

.post-menu-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 34px;
    min-width: 160px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    padding: 6px;
    z-index: 50;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.post-menu-dropdown.open {
    display: block;
}

.post-menu-delete {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    padding: 10px 12px;
    border-radius: 7px;
    font: inherit;
    color: #c62828;
}

.post-menu-delete:hover {
    background: rgba(198, 40, 40, 0.08);
}


/*
|--------------------------------------------------------------------------
| Delete Post Modal
|--------------------------------------------------------------------------
*/

.post-modal[hidden] {
    display: none;
}

.post-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.post-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}

.post-modal-box {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 430px;
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.post-modal-box h3 {
    margin-top: 0;
}

.post-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.btn-danger {
    background: #c62828;
    color: #ffffff;
    border: 1px solid #c62828;
}

.btn-danger:hover {
    background: #a91f1f;
    border-color: #a91f1f;
}

body.modal-open {
    overflow: hidden;
}

/*
|--------------------------------------------------------------------------
| Edit Post
|--------------------------------------------------------------------------
*/

.edit-post-current-image {
    margin: 20px 0;
}

.edit-post-current-image .post-image {
    max-height: 450px;
    margin-bottom: 12px;
}

.edit-post-remove-image {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-weight: 600;
}

.edit-post-remove-image input {
    width: auto;
    margin: 0;
}

.edit-post-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.post-menu-edit {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border-radius: 7px;
    text-align: left;
    color: var(--ink);
    font: inherit;
    text-decoration: none;
}

.post-menu-edit:hover {
    background: rgba(0, 0, 0, 0.06);
}

/*
|--------------------------------------------------------------------------
| Multiple Photo Composer Preview
|--------------------------------------------------------------------------
*/

.post-image-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 14px;
}

.post-image-preview-item {
    overflow: hidden;
    border-radius: 12px;
    aspect-ratio: 1 / 1;
}

.post-image-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/*
|--------------------------------------------------------------------------
| Post Photo Gallery
|--------------------------------------------------------------------------
*/

.post-gallery {
    display: grid;
    gap: 4px;
    margin: 14px 0;
    overflow: hidden;
    border-radius: 14px;
}

.post-gallery-item {
    position: relative;
    overflow: hidden;
    min-height: 180px;
    background: #eee;
}

.post-gallery-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}


/* One photo */

.post-gallery-1 {
    grid-template-columns: 1fr;
}

.post-gallery-1 .post-gallery-item {
    max-height: 650px;
}

.post-gallery-1 .post-gallery-item img {
    object-fit: contain;
}


/* Two photos */

.post-gallery-2 {
    grid-template-columns: 1fr 1fr;
}

.post-gallery-2 .post-gallery-item {
    height: 360px;
}


/* Three photos */

.post-gallery-3 {
    grid-template-columns: 1fr 1fr;
}

.post-gallery-3 .post-gallery-item:first-child {
    grid-row: span 2;
    height: 404px;
}

.post-gallery-3 .post-gallery-item:not(:first-child) {
    height: 200px;
}


/* Four photos */

.post-gallery-4 {
    grid-template-columns: 1fr 1fr;
}

.post-gallery-4 .post-gallery-item {
    height: 220px;
}


/* Five or more */

.post-gallery-5 {
    grid-template-columns: 1fr 1fr;
}

.post-gallery-5 .post-gallery-item {
    height: 190px;
}

.post-gallery-5 .post-gallery-item:first-child {
    grid-column: span 2;
    height: 300px;
}


/*
|--------------------------------------------------------------------------
| More Photos Overlay
|--------------------------------------------------------------------------
*/

.post-gallery-more {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 2rem;
    font-weight: 800;
}


/*
|--------------------------------------------------------------------------
| Mobile Galleries
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {

    .post-image-preview-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .post-gallery-2 .post-gallery-item {
        height: 220px;
    }

    .post-gallery-3 .post-gallery-item:first-child {
        height: 304px;
    }

    .post-gallery-3 .post-gallery-item:not(:first-child) {
        height: 150px;
    }

    .post-gallery-4 .post-gallery-item,
    .post-gallery-5 .post-gallery-item {
        height: 160px;
    }

    .post-gallery-5 .post-gallery-item:first-child {
        height: 230px;
    }
}

/*
|--------------------------------------------------------------------------
| Edit Post Multiple Photos
|--------------------------------------------------------------------------
*/

.edit-post-current-images {
    margin: 20px 0;
}

.edit-post-image-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 12px;
}

.edit-post-image-item {
    overflow: hidden;
    border-radius: 12px;
}

.edit-post-image-item img {
    width: 100%;
    height: 180px;
    display: block;
    object-fit: cover;
    border-radius: 12px;
}

.edit-post-remove-image {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 7px;
    font-size: 0.9rem;
}

.edit-post-remove-image input {
    width: auto;
}

@media (max-width: 600px) {

    .edit-post-image-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .edit-post-image-item img {
        height: 140px;
    }
}

/*
|--------------------------------------------------------------------------
| Clickable Post Gallery
|--------------------------------------------------------------------------
*/

.post-gallery-button {
    appearance: none;
    border: 0;
    padding: 0;
    margin: 0;
    background: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    font: inherit;
}

.post-gallery-button img {
    transition: transform 0.2s ease;
}

.post-gallery-button:hover img {
    transform: scale(1.025);
}


/*
|--------------------------------------------------------------------------
| Full Screen Photo Viewer
|--------------------------------------------------------------------------
*/

.photo-viewer[hidden] {
    display: none;
}

.photo-viewer {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.photo-viewer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.94);
}

.photo-viewer-content {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.photo-viewer-image-area {
    width: calc(100% - 180px);
    height: calc(100% - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.photo-viewer-image-area img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.photo-viewer-close {
    position: absolute;
    top: 18px;
    right: 22px;
    z-index: 5;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: white;
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
}

.photo-viewer-close:hover {
    background: rgba(255, 255, 255, 0.24);
}

.photo-viewer-counter {
    position: absolute;
    top: 27px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    color: white;
    font-size: 15px;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.35);
    padding: 6px 12px;
    border-radius: 20px;
}

.photo-viewer-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 52px;
    height: 52px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: white;
    font-size: 42px;
    line-height: 1;
    cursor: pointer;
}

.photo-viewer-arrow:hover {
    background: rgba(255, 255, 255, 0.24);
}

.photo-viewer-prev {
    left: 20px;
}

.photo-viewer-next {
    right: 20px;
}

body.photo-viewer-open {
    overflow: hidden;
}


/*
|--------------------------------------------------------------------------
| Mobile Photo Viewer
|--------------------------------------------------------------------------
*/

@media (max-width: 700px) {

    .photo-viewer-image-area {
        width: 100%;
        height: calc(100% - 120px);
        padding: 0 10px;
    }

    .photo-viewer-arrow {
        width: 44px;
        height: 44px;
        font-size: 34px;
        background: rgba(0, 0, 0, 0.55);
    }

    .photo-viewer-prev {
        left: 10px;
    }

    .photo-viewer-next {
        right: 10px;
    }

    .photo-viewer-close {
        top: 12px;
        right: 12px;
        width: 44px;
        height: 44px;
    }

    .photo-viewer-counter {
        top: 18px;
    }
}

/*
|--------------------------------------------------------------------------
| Freelynkr Custom GIF Smileys
|--------------------------------------------------------------------------
*/

.freelynkr-smiley {
    display: inline-block;
    width: auto;
    height: auto;
    max-width: 110px;
    max-height: 42px;
    margin: 0 2px;
    vertical-align: middle;
    object-fit: contain;
}

.custom-smiley-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    margin: 7px 7px 5px 0;
    padding: 7px 11px;
    border: 1px solid rgba(112, 128, 119, 0.24);
    border-radius: 10px;
    background: #fff;
    color: #35423d;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 750;
    line-height: 1;
    cursor: pointer;
}

.custom-smiley-trigger:hover,
.custom-smiley-trigger:focus-visible {
    border-color: #eb6e4f;
    background: #fff8f5;
    outline: none;
}

.custom-smiley-trigger span:first-child {
    color: #eb6e4f;
    font-size: 1.15rem;
}

.custom-smiley-picker[hidden] {
    display: none !important;
}

.custom-smiley-picker {
    position: fixed;
    z-index: 20000;
    width: min(390px, calc(100vw - 16px));
    max-height: min(500px, calc(100vh - 20px));
    padding: 15px;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid #e4ddd3;
    border-radius: 18px;
    background: #fff;
    color: #29332f;
    box-shadow: 0 18px 52px rgba(45, 38, 31, 0.2);
}

.custom-smiley-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

.custom-smiley-header strong,
.custom-smiley-header span {
    display: block;
}

.custom-smiley-header strong {
    font-size: 1.02rem;
}

.custom-smiley-header span {
    margin-top: 3px;
    color: #7a817e;
    font-size: 0.78rem;
}

.custom-smiley-close {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f1efeb;
    color: #35423d;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.custom-smiley-search {
    width: 100%;
    min-height: 42px;
    margin: 0 0 12px;
    padding: 9px 12px;
    box-sizing: border-box;
    border: 1px solid #ddd7ce;
    border-radius: 11px;
    background: #fbfaf8;
    font: inherit;
}

.custom-smiley-search:focus {
    border-color: #eb6e4f;
    outline: 2px solid rgba(235, 110, 79, 0.14);
}

.custom-smiley-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    max-height: 355px;
    padding: 2px 4px 5px 2px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.custom-smiley-option {
    position: relative;
    display: grid !important;
    grid-template-rows: 48px auto;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 100%;
    min-width: 0 !important;
    max-width: 100%;
    min-height: 76px;
    padding: 6px 4px;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: 10px;
    background: #faf8f5;
    cursor: pointer;
}

.custom-smiley-option:hover,
.custom-smiley-option:focus-visible {
    border-color: #eb6e4f;
    background: #fff4ef;
    outline: none;
    transform: translateY(-1px);
}

.custom-smiley-option img {
    display: block;
    grid-row: 1;
    justify-self: center;
    width: auto;
    height: auto;
    max-width: 58px;
    max-height: 46px;
    object-fit: contain;
    transition: transform 0.16s ease, filter 0.16s ease;
    transform-origin: center;
}

.custom-smiley-code {
    display: block;
    grid-row: 2;
    justify-self: stretch;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    color: #59635f;
    font-size: 0.68rem;
    font-weight: 700;
    margin-top: 0;
    line-height: 1;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.custom-smiley-option:hover {
    z-index: 3;
}

.custom-smiley-option:hover img,
.custom-smiley-option:focus-visible img {
    transform: scale(1.28);
    filter: drop-shadow(0 4px 6px rgba(41, 51, 47, 0.22));
}

.custom-smiley-empty {
    grid-column: 1 / -1;
    margin: 18px 0;
    color: #7a817e;
    text-align: center;
}

@media (max-width: 600px) {
    .custom-smiley-picker {
        top: auto !important;
        right: 8px;
        bottom: 8px;
        left: 8px !important;
        width: auto;
        max-height: 72vh;
        border-radius: 18px;
    }

    .custom-smiley-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        max-height: calc(72vh - 128px);
    }

    .custom-smiley-option {
        min-height: 76px;
    }
}


/* ========================================================================== 
   LYNXLYNKR BLACK + GOLD BRAND OVERRIDES
   Applied after the consolidated structural foundation below so the
   LynxLynkr palette wins while existing layouts and JavaScript hooks remain intact.
   ========================================================================== */

:root{
    --ink:#f5efe2;
    --muted:#b9b2a4;
    --cream:#050505;
    --paper:#101010;
    --peach:#f5d87c;
    --coral:#d4af37;
    --sage:#c9aa50;
    --line:#3b3018;
    --shadow:0 18px 55px rgba(0,0,0,.42);

    --lynx-black:#050505;
    --lynx-black-2:#0b0b0b;
    --lynx-charcoal:#151515;
    --lynx-charcoal-2:#1e1e1e;
    --lynx-gold:#d4af37;
    --lynx-gold-deep:#9f7724;
    --lynx-gold-light:#f6da8a;
    --lynx-text:#f5efe2;
    --lynx-muted:#b9b2a4;
    --lynx-border:rgba(212,175,55,.28);
    --lynx-border-strong:rgba(212,175,55,.55);
}

html{background:var(--lynx-black);}

body{
    color:var(--lynx-text);
    background:
        radial-gradient(circle at 50% -10%,rgba(212,175,55,.09),transparent 34rem),
        var(--lynx-black);
}

body::selection,
::selection{
    background:var(--lynx-gold);
    color:#050505;
}

a{color:var(--lynx-gold-light);}
a:hover{color:#fff1b5;}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
    outline:2px solid var(--lynx-gold-light);
    outline-offset:3px;
}

/* ---------- Shared navigation ---------- */
.nav{
    min-height:82px;
    height:auto;
    padding:0 4.5%;
    background:rgba(4,4,4,.96);
    border-bottom:1px solid var(--lynx-border);
    box-shadow:0 10px 36px rgba(0,0,0,.36);
    backdrop-filter:blur(16px);
}

.brand{
    gap:11px;
    color:var(--lynx-gold-light)!important;
    font-weight:900;
    letter-spacing:.08em;
}

.brand-logo{
    width:auto;
    height:48px;
    display:block;
    object-fit:contain;
}

.brand-wordmark{
    display:inline-block;
    font-size:1.18rem;
    line-height:1;
    letter-spacing:.12em;
    background:linear-gradient(180deg,#fff0b8 0%,#d4af37 45%,#9f7724 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.brand-mark{background:var(--lynx-gold);color:#050505;}

.nav-links{color:#d8d0bf;gap:18px;}
.nav-links > a{
    position:relative;
    color:#d8d0bf;
    transition:color .18s ease,background .18s ease,box-shadow .18s ease;
}
.nav-links > a:hover,
.nav-links > a.nav-link-active,
.nav-links > a[aria-current="page"]{
    color:var(--lynx-gold-light);
}
.nav-links > a.nav-link-active::after,
.nav-links > a[aria-current="page"]::after{
    content:"";
    position:absolute;
    left:12px;
    right:12px;
    bottom:-12px;
    height:2px;
    background:linear-gradient(90deg,transparent,var(--lynx-gold-light),transparent);
    box-shadow:0 0 12px rgba(212,175,55,.5);
}

.nav-cta,
.nav-links .nav-cta{
    color:#080808!important;
    background:linear-gradient(180deg,#f7dda0 0%,#d4af37 55%,#a87d25 100%);
    border:1px solid #f4d77f;
    border-radius:10px;
    box-shadow:0 8px 25px rgba(212,175,55,.15);
}
.nav-cta:hover,
.nav-links .nav-cta:hover{
    color:#000!important;
    filter:brightness(1.08);
    box-shadow:0 10px 28px rgba(212,175,55,.28);
}
.menu-toggle{color:var(--lynx-gold-light);}

.notification-badge{
    background:linear-gradient(180deg,#f6da8a,#d4af37);
    color:#050505;
    box-shadow:0 0 12px rgba(212,175,55,.28);
}

/* ---------- Shared cards and forms ---------- */
.card,
.form-card,
.mini-profile,
.staff-user-card,
.staff-content-card,
.notification-card{
    background:linear-gradient(180deg,rgba(22,22,22,.98),rgba(9,9,9,.98));
    color:var(--lynx-text);
    border-color:var(--lynx-border);
    box-shadow:var(--shadow);
}

.card h1,.card h2,.card h3,
.form-card h1,.form-card h2,.form-card h3,
h1,h2,h3{
    color:var(--lynx-text);
}

.eyebrow{
    color:var(--lynx-gold);
    letter-spacing:.19em;
}

.muted,
.mini-profile span,
.post-head span,
.person span,
.message-list small,
.room-list small,
.staff-user-title span,
.staff-user-details,
.staff-role-label{
    color:var(--lynx-muted);
}

.icon,
.feature-list b,
.mini-profile a,
.staff-stat strong{
    color:var(--lynx-gold-light);
}

.btn{
    border-radius:10px;
    transition:transform .16s ease,box-shadow .18s ease,filter .18s ease,border-color .18s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{
    color:#080808;
    background:linear-gradient(180deg,#f9e2a9 0%,#d4af37 55%,#a87d25 100%);
    border:1px solid #f3d77f;
    box-shadow:0 10px 28px rgba(212,175,55,.18);
}
.btn-primary:hover{
    color:#000;
    background:linear-gradient(180deg,#fff0bd 0%,#e1bd4b 55%,#b58a2d 100%);
    box-shadow:0 14px 34px rgba(212,175,55,.28);
}
.btn-light{
    color:var(--lynx-gold-light);
    background:rgba(0,0,0,.32);
    border:1px solid rgba(212,175,55,.62);
}
.btn-light:hover{
    background:rgba(212,175,55,.09);
    border-color:var(--lynx-gold-light);
}

.form-card input,
.form-card textarea,
.message-form input,
input,
textarea,
select{
    color:var(--lynx-text);
    background:#0c0c0c;
    border-color:#40361f;
}
input::placeholder,textarea::placeholder{color:#766f64;}
.form-card input:focus,
.form-card textarea:focus,
.message-form input:focus,
input:focus,
textarea:focus,
select:focus{
    border-color:var(--lynx-gold);
    box-shadow:0 0 0 3px rgba(212,175,55,.12);
}

.section.tinted{
    background:linear-gradient(180deg,#0e0e0e,#090909);
    border-top:1px solid rgba(212,175,55,.12);
    border-bottom:1px solid rgba(212,175,55,.12);
}
.feature-list>div{border-bottom-color:rgba(212,175,55,.18);}
.footer{
    color:var(--lynx-muted);
    background:#050505;
    border-top-color:var(--lynx-border);
}

/* ---------- Homepage hero ---------- */
.lynx-home-hero{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    min-height:760px;
    display:flex;
    align-items:center;
    padding:70px 5% 72px;
    border-bottom:1px solid rgba(212,175,55,.26);
    background:
        radial-gradient(circle at 23% 40%,rgba(212,175,55,.14),transparent 25rem),
        radial-gradient(circle at 82% 68%,rgba(180,126,31,.12),transparent 30rem),
        linear-gradient(135deg,#020202 0%,#090806 55%,#020202 100%);
}

.lynx-home-hero::before,
.lynx-home-hero::after{
    content:"";
    position:absolute;
    inset:auto;
    z-index:-1;
    pointer-events:none;
}
.lynx-home-hero::before{
    width:620px;
    height:620px;
    right:-250px;
    top:-220px;
    transform:rotate(45deg);
    border:1px solid rgba(212,175,55,.24);
    box-shadow:0 0 0 45px rgba(212,175,55,.025),0 0 0 90px rgba(212,175,55,.018);
}
.lynx-home-hero::after{
    left:0;
    right:0;
    bottom:0;
    height:190px;
    opacity:.58;
    background:
        linear-gradient(160deg,transparent 0 17%,rgba(212,175,55,.08) 17.2% 17.8%,transparent 18% 100%),
        linear-gradient(20deg,transparent 0 71%,rgba(212,175,55,.07) 71.2% 71.7%,transparent 72% 100%);
}

.lynx-home-hero-inner{
    width:min(1460px,100%);
    margin:auto;
    display:grid;
    grid-template-columns:minmax(330px,.9fr) minmax(420px,1.1fr);
    gap:clamp(28px,5vw,86px);
    align-items:center;
}

.lynx-home-art{
    display:flex;
    justify-content:center;
    align-items:center;
    min-width:0;
}
.lynx-home-art img{
    width:min(100%,570px);
    height:auto;
    display:block;
    filter:drop-shadow(0 0 28px rgba(212,175,55,.18));
}

.lynx-home-copy{max-width:760px;}
.lynx-home-copy h1{margin:14px 0 24px;}
.lynx-wordmark{
    display:block;
    font-size:clamp(3.3rem,7vw,7.4rem);
    line-height:.93;
    letter-spacing:.055em;
    background:linear-gradient(180deg,#fff3c8 0%,#e2bd50 47%,#9b7120 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    text-shadow:0 12px 40px rgba(0,0,0,.45);
}
.lynx-home-copy h1 small{
    display:block;
    margin-top:28px;
    color:#f5efe2;
    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(1.75rem,3.15vw,3.3rem);
    font-weight:500;
    line-height:1.12;
    letter-spacing:.055em;
    text-transform:uppercase;
}
.lynx-home-copy>p{
    max-width:700px;
    margin:0 0 31px;
    color:#cbc4b7;
    font-size:clamp(1rem,1.35vw,1.22rem);
}
.lynx-home-copy .hero-actions{justify-content:flex-start;flex-wrap:wrap;}
.lynx-home-copy .btn{min-width:165px;text-align:center;padding:13px 22px;}

.lynx-hero-points{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    margin-top:48px;
    padding-top:24px;
    border-top:1px solid rgba(212,175,55,.2);
}
.lynx-hero-points div{min-width:0;padding-right:12px;}
.lynx-hero-points b{
    display:block;
    color:var(--lynx-gold-light);
    font-size:.78rem;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.lynx-hero-points span{
    display:block;
    margin-top:4px;
    color:#9f988b;
    font-size:.78rem;
    line-height:1.35;
}

/* ---------- Homepage feature cards ---------- */
.lynx-intro{padding-top:95px;}
.lynx-intro .section-heading{max-width:880px;margin-left:auto;margin-right:auto;}
.lynx-intro .lead{color:#aaa294;}
.lynx-feature-grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:16px;
}
.lynx-feature-card{
    min-height:265px;
    display:flex;
    flex-direction:column;
    position:relative;
    overflow:hidden;
    color:var(--lynx-text);
    transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.lynx-feature-card::before{
    content:"";
    position:absolute;
    inset:0 0 auto;
    height:2px;
    opacity:.8;
    background:linear-gradient(90deg,transparent,var(--lynx-gold),transparent);
}
.lynx-feature-card:hover{
    color:var(--lynx-text);
    transform:translateY(-4px);
    border-color:var(--lynx-border-strong);
    box-shadow:0 22px 55px rgba(0,0,0,.54),0 0 24px rgba(212,175,55,.07);
}
.lynx-feature-card .icon{font-size:1.7rem;}
.lynx-feature-card h3{font-size:1.24rem;letter-spacing:.04em;}
.lynx-feature-card p{color:#ada69a;font-size:.92rem;}
.lynx-card-link{
    margin-top:auto;
    padding-top:17px;
    color:var(--lynx-gold-light);
    font-size:.77rem;
    font-weight:800;
    letter-spacing:.07em;
    text-transform:uppercase;
}

/* ---------- Analytics ---------- */
.site-analytics-section{padding-top:0;}
.site-analytics-card{padding:30px;overflow:hidden;}
.site-analytics-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:22px;}
.site-analytics-heading h2,.site-analytics-heading p{margin-bottom:0;}
.site-analytics-heading p{max-width:520px;}
.site-analytics-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;}
.site-analytics-stat{
    min-width:0;
    padding:20px 14px;
    border:1px solid rgba(212,175,55,.18);
    border-radius:14px;
    background:linear-gradient(180deg,rgba(212,175,55,.045),rgba(255,255,255,.012));
    text-align:center;
}
.site-analytics-icon{display:block;margin-bottom:8px;font-size:1.25rem;color:var(--lynx-gold);}
.site-analytics-value{display:block;color:var(--lynx-gold-light);font-size:clamp(1.65rem,3vw,2.35rem);font-weight:850;line-height:1;}
.site-analytics-label{display:block;margin-top:8px;color:#9c9589;font-size:.82rem;line-height:1.3;}
.site-analytics-online .site-analytics-icon::after{background:#38c976;box-shadow:0 0 10px rgba(56,201,118,.45);}

/* ---------- Brand story ---------- */
.lynx-story-section{
    padding:90px 6%;
    border-top:1px solid rgba(212,175,55,.14);
    border-bottom:1px solid rgba(212,175,55,.14);
    background:
        radial-gradient(circle at 75% 50%,rgba(212,175,55,.08),transparent 25rem),
        linear-gradient(135deg,#0c0b09,#050505 62%);
}
.lynx-story-inner{
    width:min(1180px,100%);
    margin:auto;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:70px;
    align-items:center;
}
.lynx-story-copy h2{font-size:clamp(2.5rem,5vw,4.6rem);margin:10px 0 20px;}
.lynx-story-copy p{max-width:650px;color:#b9b1a3;font-size:1.05rem;margin-bottom:28px;}
.lynx-story-mark{text-align:center;}
.lynx-story-mark img{width:min(100%,370px);filter:drop-shadow(0 0 25px rgba(212,175,55,.14));}

/* ---------- Final CTA ---------- */
.lynx-final-cta{
    padding:88px 6%;
    text-align:center;
    border-top:1px solid rgba(212,175,55,.2);
    background:
        radial-gradient(ellipse at 50% 100%,rgba(212,175,55,.12),transparent 38rem),
        #050505;
}
.lynx-final-cta h2{font-family:Georgia,"Times New Roman",serif;font-size:clamp(2.5rem,5vw,4.6rem);letter-spacing:.06em;text-transform:uppercase;margin:10px 0;}
.lynx-final-cta p{color:#aaa294;margin:0 auto 25px;max-width:720px;}

/* ---------- Messages/chat/general dark surfaces ---------- */
.messages-layout,
.chat-layout,
.conversation,
.chat-window,
.message-list,
.room-list,
.messages,
.chat-messages{
    background:#090909;
    color:var(--lynx-text);
}

/* Keep the actual conversation surfaces lighter so dark smiley artwork stays visible. */
.messages,
.chat-messages{
    background:#242424;
    color:#f2ede4;
}

.message-list,
.room-list,
.conversation-head,
.message-form{
    border-color:rgba(212,175,55,.17);
}
.message-list a.active,
.room-list a.active{
    background:rgba(212,175,55,.09);
    color:var(--lynx-gold-light);
}
.bubble{background:#1a1a1a;color:#eee7db;border:1px solid rgba(212,175,55,.1);}
.bubble.mine{background:rgba(212,175,55,.16);border-color:rgba(212,175,55,.24);}
.avatar{background:#2a2416;color:var(--lynx-gold-light);}
.admin-label{background:var(--lynx-gold);color:#050505;}
.notification-unread{border-left-color:var(--lynx-gold);}

/* ---------- Mobile ---------- */
@media(max-width:1180px){
    .lynx-feature-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
    .lynx-home-hero-inner{grid-template-columns:minmax(280px,.8fr) minmax(390px,1.2fr);}
    .brand-wordmark{font-size:1rem;}
}

@media(max-width:900px){
    .lynx-home-hero{padding-top:48px;min-height:auto;}
    .lynx-home-hero-inner{grid-template-columns:1fr;text-align:center;}
    .lynx-home-art img{width:min(78vw,430px);}
    .lynx-home-copy{margin:auto;}
    .lynx-home-copy .hero-actions{justify-content:center;}
    .lynx-hero-points{grid-template-columns:1fr 1fr 1fr;}
    .lynx-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
    .lynx-story-inner{grid-template-columns:1fr;text-align:center;}
    .lynx-story-copy p{margin-left:auto;margin-right:auto;}
}

@media(max-width:800px){
    .nav{min-height:76px;padding:0 5%;}
    .nav-links{
        top:76px;
        background:rgba(5,5,5,.99);
        border-bottom:1px solid var(--lynx-border);
        box-shadow:0 18px 35px rgba(0,0,0,.42);
    }
    .nav-links > a.nav-link-active::after,
    .nav-links > a[aria-current="page"]::after{display:none;}
    .brand-logo{height:40px;}
    .brand-wordmark{font-size:.92rem;}
    .site-analytics-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}

@media(max-width:620px){
    .lynx-home-hero{padding:40px 5% 55px;}
    .lynx-wordmark{font-size:clamp(2.6rem,14vw,4rem);}
    .lynx-home-copy h1 small{font-size:clamp(1.35rem,6vw,2rem);}
    .lynx-home-copy .hero-actions{flex-direction:column;align-items:stretch;}
    .lynx-home-copy .btn{width:100%;}
    .lynx-hero-points{grid-template-columns:1fr;gap:16px;text-align:left;}
    .lynx-feature-grid{grid-template-columns:1fr;}
    .site-analytics-heading{align-items:flex-start;flex-direction:column;}
    .site-analytics-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
    .brand-wordmark{display:none;}
}

/* ==========================================================================
   LYNXLYNKR FOOTER
   ========================================================================== */

.lynxlynkr-footer{
    position:relative;
    overflow:hidden;
    max-width:none;
    margin:0;
    padding:0;
    background:
        radial-gradient(circle at 50% 0%,rgba(212,175,55,.07),transparent 28rem),
        linear-gradient(180deg,#080808 0%,#030303 100%);
    border-top:1px solid rgba(212,175,55,.30);
    color:var(--lynx-muted);
}

.lynxlynkr-footer::before{
    content:"";
    position:absolute;
    top:0;
    left:8%;
    right:8%;
    height:1px;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(246,218,138,.82),
        transparent
    );
    box-shadow:0 0 14px rgba(212,175,55,.26);
}

.lynxlynkr-footer-inner{
    width:min(1440px,100%);
    margin:auto;
    padding:42px 5% 30px;
    display:grid;
    grid-template-columns:minmax(280px,1.2fr) minmax(300px,1fr);
    gap:30px 60px;
    align-items:center;
}

.lynxlynkr-footer-logo{
    width:max-content;
    max-width:100%;
}

.lynxlynkr-footer-logo .brand-logo{
    height:54px;
}

.lynxlynkr-footer-logo .brand-wordmark{
    font-size:1.3rem;
}

.lynxlynkr-footer-tagline{
    margin:16px 0 4px;
    color:var(--lynx-gold-light);
    font-size:.92rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.lynxlynkr-footer-subline{
    max-width:560px;
    margin:0;
    color:var(--lynx-muted);
    font-size:.9rem;
}

.lynxlynkr-footer-links{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    flex-wrap:wrap;
    gap:10px 22px;
}

.lynxlynkr-footer-links a{
    position:relative;
    color:#d8d0bf;
    font-size:.88rem;
    font-weight:700;
}

.lynxlynkr-footer-links a:hover{
    color:var(--lynx-gold-light);
}

.lynxlynkr-footer-links a:not(.lynxlynkr-footer-join)::after{
    content:"";
    position:absolute;
    left:0;
    right:100%;
    bottom:-5px;
    height:1px;
    background:var(--lynx-gold);
    transition:right .18s ease;
}

.lynxlynkr-footer-links a:not(.lynxlynkr-footer-join):hover::after{
    right:0;
}

.lynxlynkr-footer-join{
    padding:9px 15px;
    border:1px solid rgba(212,175,55,.58);
    border-radius:9px;
    background:rgba(212,175,55,.08);
    color:var(--lynx-gold-light)!important;
}

.lynxlynkr-footer-join:hover{
    background:rgba(212,175,55,.14);
    box-shadow:0 0 20px rgba(212,175,55,.10);
}

.lynxlynkr-footer-meta{
    grid-column:1 / -1;
    display:flex;
    align-items:center;
    gap:18px;
    padding-top:20px;
    border-top:1px solid rgba(212,175,55,.12);
}

.lynxlynkr-footer-rule{
    width:42px;
    height:2px;
    flex:0 0 42px;
    background:linear-gradient(
        90deg,
        var(--lynx-gold-deep),
        var(--lynx-gold-light)
    );
}

.lynxlynkr-footer-meta p{
    margin:0;
    color:#817a6e;
    font-size:.78rem;
    letter-spacing:.06em;
}

@media(max-width:800px){
    .lynxlynkr-footer-inner{
        grid-template-columns:1fr;
        gap:24px;
        padding:36px 6% 26px;
    }

    .lynxlynkr-footer-links{
        justify-content:flex-start;
    }

    .lynxlynkr-footer-meta{
        grid-column:auto;
    }
}

@media(max-width:520px){
    .lynxlynkr-footer-links{
        align-items:flex-start;
        flex-direction:column;
    }

    .lynxlynkr-footer-join{
        margin-top:3px;
    }

    .lynxlynkr-footer-logo .brand-logo{
        height:46px;
    }

    .lynxlynkr-footer-logo .brand-wordmark{
        font-size:1.12rem;
    }
}



/* ==========================================================================
   FINAL THEME PRIORITY OVERRIDES
   These are intentionally last so the original Freelynkr palette cannot win.
   ========================================================================== */

html,
body,
body.lynx-home{
    background:#050505 !important;
    color:#f5efe2 !important;
}

body.lynx-home main{
    background:#050505 !important;
}

body.lynx-home .section{
    color:#f5efe2;
}

body.lynx-home .card,
body.lynx-home .form-card{
    background:linear-gradient(180deg,#171717 0%,#090909 100%) !important;
    border-color:rgba(212,175,55,.28) !important;
    color:#f5efe2 !important;
}

body.lynx-home .section-heading h2,
body.lynx-home .site-analytics-heading h2,
body.lynx-home .lynx-contact h2{
    color:#f5efe2 !important;
}

body.lynx-home .lead,
body.lynx-home .muted,
body.lynx-home .site-analytics-label{
    color:#b9b2a4 !important;
}

body.lynx-home .eyebrow,
body.lynx-home .lynx-card-link{
    color:#d4af37 !important;
}

body.lynx-home input,
body.lynx-home textarea,
body.lynx-home select{
    background:#0c0c0c !important;
    color:#f5efe2 !important;
    border-color:#40361f !important;
}

body.lynx-home .btn-primary{
    background:linear-gradient(180deg,#f9e2a9 0%,#d4af37 55%,#a87d25 100%) !important;
    color:#050505 !important;
}

body.lynx-home .btn-light{
    background:#0a0a0a !important;
    border-color:rgba(212,175,55,.60) !important;
    color:#f6da8a !important;
}

/* ==========================================================================
   LYNXLYNKR HERO IMAGE BANNER — FULL BLEED + CLICKABLE ARTWORK BUTTONS
   ========================================================================== */

.lynx-home-visual{
    position:relative;
    width:100%;
    margin:0;
    padding:0;
    background:#000;
}

.lynx-home-visual-frame{
    position:relative;
    width:100%;
    max-width:none;
    margin:0;
    overflow:hidden;
    border:0;
    border-radius:0;
    background:#000;
    box-shadow:none;
}

.lynx-home-visual-image{
    display:block;
    width:100%;
    height:auto;
    margin:0;
}

/*
| The JOIN NOW and EXPLORE buttons are part of the JPG artwork.
| These transparent anchors sit directly over those artwork buttons.
| Percentages keep the clickable areas aligned as the image scales.
*/
.lynx-hero-hotspot{
    position:absolute;
    z-index:3;
    display:block;
    border:1px solid transparent;
    border-radius:10px;
    background:transparent;
    cursor:pointer;
    transition:
        background .16s ease,
        border-color .16s ease,
        box-shadow .16s ease;
}

.lynx-hero-hotspot:hover,
.lynx-hero-hotspot:focus-visible{
    border-color:rgba(246,218,138,.70);
    background:rgba(246,218,138,.07);
    box-shadow:
        0 0 0 2px rgba(212,175,55,.10),
        0 0 24px rgba(212,175,55,.28);
    outline:none;
}

/* Position over the artwork's JOIN NOW button. */
.lynx-hero-hotspot-join{
    left:48.35%;
    top:75.0%;
    width:13.8%;
    height:10.2%;
}

/* Position over the artwork's EXPLORE button. */
.lynx-hero-hotspot-explore{
    left:63.75%;
    top:75.0%;
    width:10.9%;
    height:10.2%;
}

/*
| On very small screens the banner is still displayed at its full aspect
| ratio, so the percentage-based hotspots continue to track the artwork.
*/
@media(max-width:640px){
    .lynx-hero-hotspot{
        border-radius:5px;
    }
}

/* ==========================================================================
   LYNXLYNKR NUMBER COUNTER CONTRACT — DO NOT OVERRIDE
   Fallback for the protected number-only counters. The complete late-loading
   visual contract lives in partials/nav.php so generic badge rules cannot
   restore circles, pills, backgrounds, or borders.
   ========================================================================== */
html body .notification-badge.lynxlynkr-number-count{
    width:auto !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:none !important;
    color:#d4af37 !important;
    box-shadow:none !important;
}

/* ==========================================================================
   LYNXLYNKR POST SURFACES — SITE-WIDE COLOR CONTRACT
   Keeps post cards and post composers on the black-and-gold theme even when
   an individual page still contains older light-palette component rules.
   ========================================================================== */

html body article.post.card,
html body .search-post.card,
html body .composer.form-card{
    background:
        radial-gradient(circle at 100% 0,rgba(212,175,55,.075),transparent 20rem),
        linear-gradient(180deg,#171717 0%,#090909 100%) !important;
    color:var(--lynx-text) !important;
    border-color:var(--lynx-border) !important;
    box-shadow:0 18px 55px rgba(0,0,0,.42) !important;
}

html body .composer.form-card{
    border-top-color:var(--lynx-gold) !important;
}

html body article.post.card .post-body,
html body .search-post.card .search-post-body,
html body .composer.form-card h2{
    color:var(--lynx-text) !important;
}

html body .composer.form-card textarea,
html body .composer.form-card select,
html body article.post.card input,
html body article.post.card textarea,
html body article.post.card select{
    background:#0c0c0c !important;
    color:var(--lynx-text) !important;
    border-color:#40361f !important;
}

html body .composer.form-card textarea:focus,
html body .composer.form-card select:focus,
html body article.post.card input:focus,
html body article.post.card textarea:focus,
html body article.post.card select:focus{
    background:#101010 !important;
    border-color:var(--lynx-gold) !important;
    box-shadow:0 0 0 3px rgba(212,175,55,.12) !important;
}

html body .composer.form-card .feed-composer-tools,
html body .composer.form-card .post-image-preview-grid,
html body article.post.card .quote-post-box{
    background:rgba(0,0,0,.30) !important;
    border-color:rgba(212,175,55,.22) !important;
}

html body .feed-composer-post-count,
html body .feed-composer-character-count{
    background:rgba(212,175,55,.11) !important;
    color:var(--lynx-gold-light) !important;
    border:1px solid rgba(212,175,55,.20);
}

html body .feed-composer-character-count.is-near-limit{
    background:rgba(190,66,42,.16) !important;
    color:#ff9d86 !important;
    border-color:rgba(255,117,88,.28);
}

/* ==========================================================================
   LYNXLYNKR FEED SMILEY PICKER
   Overrides the older light-palette picker rules embedded in feed.php without
   changing the appearance of unrelated modals or cards.
   ========================================================================== */

html body .feed-smiley-picker{
    border-color:rgba(212,175,55,.52);
    background:
        radial-gradient(circle at 100% 0,rgba(212,175,55,.12),transparent 15rem),
        linear-gradient(180deg,#181818 0%,#080808 100%);
    color:var(--lynx-text);
    box-shadow:
        0 24px 65px rgba(0,0,0,.72),
        0 0 0 1px rgba(246,218,138,.08) inset;
}

html body .feed-smiley-picker::before{
    content:"";
    position:absolute;
    top:0;
    right:0;
    left:0;
    height:2px;
    background:linear-gradient(90deg,transparent,var(--lynx-gold-light),transparent);
    pointer-events:none;
}

html body .feed-smiley-picker-header strong{
    color:var(--lynx-gold-light);
}

html body .feed-smiley-picker-header span{
    color:var(--lynx-muted);
}

html body .feed-smiley-picker-close{
    border:1px solid rgba(212,175,55,.34);
    border-radius:50%;
    background:rgba(212,175,55,.09);
    color:var(--lynx-gold-light);
    transition:background .16s ease,border-color .16s ease,color .16s ease;
}

html body .feed-smiley-picker-close:hover,
html body .feed-smiley-picker-close:focus-visible{
    border-color:var(--lynx-gold-light);
    background:rgba(212,175,55,.18);
    color:#fff1b5;
}

html body .feed-smiley-search{
    min-height:42px;
    padding:9px 12px;
    border:1px solid rgba(212,175,55,.30);
    border-radius:10px;
    background:#090909;
    color:var(--lynx-text);
    caret-color:var(--lynx-gold-light);
}

html body .feed-smiley-search::placeholder{
    color:#898273;
}

html body .feed-smiley-search:focus{
    border-color:var(--lynx-gold);
    background:#0d0d0d;
    outline:none;
    box-shadow:0 0 0 3px rgba(212,175,55,.12);
}

html body .feed-smiley-grid{
    scrollbar-color:var(--lynx-gold-deep) #0b0b0b;
}

html body .feed-smiley-grid::-webkit-scrollbar{
    width:8px;
}

html body .feed-smiley-grid::-webkit-scrollbar-track{
    border-radius:999px;
    background:#0b0b0b;
}

html body .feed-smiley-grid::-webkit-scrollbar-thumb{
    border:2px solid #0b0b0b;
    border-radius:999px;
    background:var(--lynx-gold-deep);
}

html body .feed-smiley-option{
    border-color:rgba(212,175,55,.20);
    background:linear-gradient(180deg,#1b1b1b 0%,#0b0b0b 100%);
    color:var(--lynx-text);
    box-shadow:inset 0 1px 0 rgba(246,218,138,.04);
    transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease;
}

html body .feed-smiley-option:hover,
html body .feed-smiley-option:focus-visible{
    border-color:var(--lynx-gold-light);
    background:linear-gradient(180deg,#2a2415 0%,#13110b 100%);
    outline:none;
    box-shadow:0 8px 20px rgba(0,0,0,.30),0 0 0 2px rgba(212,175,55,.10);
    transform:translateY(-1px);
}

html body .feed-smiley-code{
    color:#d8cba9;
}

html body .feed-smiley-option:hover .feed-smiley-code,
html body .feed-smiley-option:focus-visible .feed-smiley-code{
    color:var(--lynx-gold-light);
}

html body .feed-smiley-empty{
    color:var(--lynx-muted);
}

/* ========================================================================== 
   MESSAGES + CHATROOM CHARCOAL SURFACES
   Keep these rules last so older dark-theme overrides cannot force black.
   ========================================================================== */
html body .messages-layout,
html body .chat-layout,
html body .conversation,
html body .chat-window {
    background:#3b3b3b !important;
    color:var(--lynx-text, #f5efe2) !important;
}

html body .messages,
html body .chat-messages {
    background:#404040 !important;
    color:#ffffff !important;
}

html body .message-list,
html body .room-list,
html body .conversation-head,
html body .message-form {
    background:#444444 !important;
    color:#f5efe2 !important;
}


/* ==========================================================================
   CHAT + INSTANT MESSAGE USERNAME / ROLE COLORS
   All usernames are LynxLynkr gold. Regular member message text stays white.
   Webmaster/admin/staff/moderator message text is gold.
   ========================================================================== */
html body .instant-message-line,
html body .chat-message-row {
    color:#ffffff !important;
    font-weight:400;
}

html body .instant-message-username,
html body .instant-message-username a,
html body .chat-message-username,
html body .chat-message-username a {
    color:var(--lynx-gold, #d4af37) !important;
}

html body .instant-message-line.is-message-staff,
html body .chat-message-row.is-chat-staff {
    color:var(--lynx-gold, #d4af37) !important;
    font-weight:700;
}

html body .instant-message-line.is-message-staff a,
html body .chat-message-row.is-chat-staff a {
    color:var(--lynx-gold-light, #f0d879) !important;
}


/* ========================================================================== 
   CHAT + INSTANT MESSAGES — #383838 SURFACE TEST
   Requested 2026-09-18. Keep LAST so older theme rules cannot override it.
   ========================================================================== */
html body .messages-layout,
html body .chat-layout,
html body .conversation,
html body .chat-window,
html body .message-list,
html body .room-list,
html body .messages,
html body .chat-messages,
html body .conversation-head,
html body .message-form,
html body .chat-presence,
html body .chat-user-list,
html body .chat-user-card,
html body .instant-message-empty,
html body .chat-empty {
    background:#383838 !important;
    background-image:none !important;
    color:#ffffff !important;
}

/* Message entry fields use the same #383838 surface. */
html body .message-form input,
html body .message-form textarea,
html body #instant-message-body,
html body #chat-message-body {
    background:#383838 !important;
    background-image:none !important;
    color:#ffffff !important;
    border-color:rgba(212,175,55,.42) !important;
}
html body .message-form input::placeholder,
html body .message-form textarea::placeholder,
html body #instant-message-body::placeholder,
html body #chat-message-body::placeholder {
    color:#d0d0d0 !important;
    opacity:1;
}

/* Gold Smilies buttons with black label/icon. */
html body .custom-smiley-trigger,
html body .instant-smiley-trigger,
html body .message-form .chat-smiley-trigger {
    background:#d4af37 !important;
    background-image:none !important;
    border-color:#f0d879 !important;
    color:#000000 !important;
    box-shadow:none !important;
}
html body .custom-smiley-trigger span,
html body .instant-smiley-trigger span,
html body .message-form .chat-smiley-trigger span,
html body .message-form .chat-smiley-trigger span:first-child {
    color:#000000 !important;
}
html body .custom-smiley-trigger:hover,
html body .custom-smiley-trigger:focus-visible,
html body .instant-smiley-trigger:hover,
html body .instant-smiley-trigger:focus-visible,
html body .message-form .chat-smiley-trigger:hover,
html body .message-form .chat-smiley-trigger:focus-visible {
    background:#f0d879 !important;
    color:#000000 !important;
}

/* Smiley picker/modal surfaces: intentionally a little darker than chat. */
html body .instant-smiley-picker,
html body .chat-smiley-picker,
html body .custom-smiley-picker {
    background:#343434 !important;
    background-image:none !important;
    color:#ffffff !important;
    border-color:rgba(212,175,55,.55) !important;
}
html body .instant-smiley-picker-head,
html body .chat-smiley-picker-header {
    background:#343434 !important;
    border-color:rgba(212,175,55,.30) !important;
}
html body .instant-smiley-search,
html body .chat-smiley-search {
    background:#383838 !important;
    color:#ffffff !important;
    border-color:rgba(212,175,55,.35) !important;
}
html body .instant-smiley-option,
html body .chat-smiley-option {
    background:#343434 !important;
    color:#ffffff !important;
    border-color:rgba(212,175,55,.24) !important;
}

/* Preserve the gold username / role treatment from the previous update. */
html body .instant-message-username,
html body .instant-message-username a,
html body .chat-message-username,
html body .chat-message-username a {
    color:var(--lynx-gold, #d4af37) !important;
}
html body .instant-message-line,
html body .chat-message-row {
    color:#ffffff !important;
}
html body .instant-message-line.is-message-staff,
html body .chat-message-row.is-chat-staff {
    color:var(--lynx-gold, #d4af37) !important;
    font-weight:700;
}


/* ==========================================================================
   FINAL SMILEY UI CLEANUP — 2026-09-18
   ========================================================================== */
html body .instant-smiley-trigger,
html body .chat-smiley-trigger {
    background:#d4af37 !important;
    background-image:none !important;
    color:#000 !important;
    border-color:#f0d879 !important;
}
html body .instant-smiley-trigger span,
html body .chat-smiley-trigger span { color:#000 !important; }
html body .instant-smiley-picker,
html body .instant-smiley-picker-head,
html body .instant-smiley-option,
html body .chat-smiley-picker,
html body .chat-smiley-picker-header,
html body .chat-smiley-option {
    background:#343434 !important;
    color:#fff !important;
}


/* ==========================================================================
   SMILIES BUTTON CLEANUP
   ========================================================================== */
html body .message-form .custom-smiley-trigger,
html body .message-form .instant-smiley-trigger,
html body .message-form .chat-smiley-trigger {
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

html body .message-form .custom-smiley-trigger::before,
html body .message-form .custom-smiley-trigger::after,
html body .message-form .instant-smiley-trigger::before,
html body .message-form .instant-smiley-trigger::after,
html body .message-form .chat-smiley-trigger::before,
html body .message-form .chat-smiley-trigger::after {
    content: none !important;
    display: none !important;
}

html body .message-form .custom-smiley-trigger > span[aria-hidden="true"],
html body .message-form .instant-smiley-trigger > span[aria-hidden="true"],
html body .message-form .chat-smiley-trigger > span[aria-hidden="true"] {
    display: none !important;
}


/* ==========================================================================
   CHATROOM SMILIES BUTTON = SEND BUTTON
   Keep last so older chat-smiley rules cannot override it.
   ========================================================================== */
html body .message-form .chat-smiley-trigger {
    min-width: 98px !important;
    height: 58px !important;
    padding: 0 22px !important;
    border: 1px solid #f0d879 !important;
    border-radius: 12px !important;
    background: linear-gradient(180deg, #f6da8a 0%, #d4af37 48%, #b88b12 100%) !important;
    color: #050505 !important;
    font: inherit !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-align: center !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.55),
        0 7px 18px rgba(0,0,0,.22) !important;
    transform: none !important;
}

html body .message-form .chat-smiley-trigger:hover,
html body .message-form .chat-smiley-trigger:focus-visible {
    border-color: #f6da8a !important;
    background: linear-gradient(180deg, #ffe7a0 0%, #dfbd49 48%, #c3981d 100%) !important;
    color: #050505 !important;
    outline: none !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.62),
        0 8px 20px rgba(0,0,0,.28) !important;
    transform: none !important;
}


/* ==========================================================================
   FINAL CHAT SMILIES / SEND TYPOGRAPHY MATCH
   The Smilies label must be visually identical in type size to Send.
   ========================================================================== */
html body .message-form .chat-smiley-trigger {
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

html body .message-form .chat-smiley-trigger span {
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
}


/* ==========================================================================
   FINAL INSTANT MESSAGE SMILIES / SEND TYPOGRAPHY MATCH
   ========================================================================== */
html body .message-form .instant-smiley-trigger,
html body .message-form .custom-smiley-trigger.instant-smiley-trigger {
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

html body .message-form .instant-smiley-trigger span,
html body .message-form .custom-smiley-trigger.instant-smiley-trigger span {
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
}

/* FLOATING INSTANT MESSAGE MODAL — MATCH FULL MESSAGES PAGE */
html body #instant-message-modal,
html body #instant-message-modal .instant-message-modal-layout,
html body #instant-message-modal .instant-message-conversation-list,
html body #instant-message-modal #instant-message-conversations,
html body #instant-message-modal .instant-message-conversation-pane,
html body #instant-message-modal .instant-message-active-head,
html body #instant-message-modal .instant-message-modal-messages,
html body #instant-message-modal .instant-message-modal-form,
html body #instant-message-modal .instant-message-modal-head,
html body #instant-message-modal .instant-message-list-heading {
 background:#383838 !important; color:#fff !important;
}
html body #instant-message-modal .instant-message-modal-input {
 background:#383838 !important; color:#fff !important;
 border-color:var(--lynx-gold,#d4af37) !important;
}
html body #instant-message-modal .instant-message-modal-input::placeholder {color:#c9c3b8 !important;}
html body #instant-message-modal .instant-message-conversation-item,
html body #instant-message-modal .instant-message-conversation,
html body #instant-message-modal [data-conversation-user-id] {
 background:#383838 !important; color:#fff !important;
 border-color:rgba(212,175,55,.16) !important;
}
html body #instant-message-modal .instant-message-conversation-item:hover,
html body #instant-message-modal .instant-message-conversation-item.active,
html body #instant-message-modal .instant-message-conversation.active,
html body #instant-message-modal [data-conversation-user-id].active {background:#444 !important;}
html body #instant-message-modal .instant-message-modal-message,
html body #instant-message-modal .instant-message-modal-message-row,
html body #instant-message-modal .instant-message-modal-empty,
html body #instant-message-modal .instant-message-modal-status {background:#383838 !important;color:#fff !important;}
html body #instant-message-modal .instant-message-smiley-picker {background:#343434 !important;color:#fff !important;}