:root {
    --bg: #f4f6f8;
    --surface: #ffffff;
    --surface-soft: #f8fafc;

    --text: #172033;
    --muted: #738097;

    --border: #e5e9ef;

    --navy: #13233c;
    --navy-dark: #0b1728;

    --accent: #3266e8;
    --accent-soft: #edf3ff;

    --danger: #e5484d;

    --radius: 14px;
}


* {
    box-sizing: border-box;
}


body {
    margin: 0;
    background: var(--bg);
    color: var(--text);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
}


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


button,
input {
    font: inherit;
}


/* -----------------------------
   TOPBAR
------------------------------ */

.topbar {
    position: sticky;
    top: 0;
    z-index: 1000;

    height: 68px;

    background: rgba(255,255,255,.96);
    border-bottom: 1px solid var(--border);

    backdrop-filter: blur(15px);
}


.topbar-inner {
    height: 68px;

    display: flex;
    align-items: center;

    gap: 28px;
}


.brand {
    width: 235px;

    display: flex;
    align-items: center;

    gap: 10px;

    font-weight: 800;
    font-size: 19px;

    letter-spacing: -.5px;
}


.brand-mark {
    width: 35px;
    height: 35px;

    display: grid;
    place-items: center;

    border-radius: 9px;

    background: var(--navy);
    color: white;
}


.global-search {
    flex: 1;
    max-width: 650px;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 0 16px;

    height: 42px;

    border: 1px solid var(--border);
    border-radius: 12px;

    background: var(--surface-soft);
}


.global-search i {
    color: var(--muted);
}


.global-search input {
    width: 100%;

    border: 0;
    outline: 0;

    background: transparent;

    color: var(--text);
}


.topbar-actions {
    margin-left: auto;

    display: flex;
    align-items: center;

    gap: 7px;
}


.icon-button,
.profile-button {
    border: 0;
    background: transparent;
}


.icon-button {
    position: relative;

    width: 40px;
    height: 40px;

    border-radius: 10px;

    font-size: 18px;
    display: flex;
    align-items: center;    
}


.icon-button:hover {
    background: var(--surface-soft);
}


.notification-count {
    position: absolute;

    top: 2px;
    right: 1px;

    min-width: 18px;
    height: 18px;

    display: grid;
    place-items: center;

    padding: 0 5px;

    border: 2px solid white;
    border-radius: 20px;

    background: var(--danger);
    color: white;

    font-size: 10px;
    font-weight: 700;
}


.profile-button {
    display: flex;
    align-items: center;

    gap: 8px;

    padding: 5px 9px;

    border-radius: 10px;

    font-weight: 600;
}


.profile-button:hover {
    background: var(--surface-soft);
}


.profile-button img {
    width: 32px;
    height: 32px;

    object-fit: cover;

    border-radius: 50%;
}


/* -----------------------------
   BREAKING BAR
------------------------------ */

.breaking-bar {
    background: var(--navy-dark);
    color: white;
}


.breaking-inner {
    min-height: 41px;

    display: flex;
    align-items: center;

    gap: 20px;
}


.breaking-label {
    display: flex;
    align-items: center;

    gap: 8px;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .8px;
}


.live-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #ff4d55;

    box-shadow: 0 0 0 4px rgba(255,77,85,.12);
}


.breaking-content {
    display: flex;
    align-items: center;

    gap: 12px;

    font-size: 13px;
}


.breaking-content a {
    font-weight: 600;
}


.breaking-content span {
    color: #98a5b7;
}


/* -----------------------------
   MAIN GRID
------------------------------ */

.main-container {
    max-width: 1540px;

    margin: 0 auto;
}


.app-grid {
    display: grid;

    grid-template-columns:
        220px
        minmax(0, 760px)
        330px;

    justify-content: center;

    gap: 28px;
}


.left-sidebar,
.right-sidebar {
    position: sticky;

    top: 90px;

    align-self: start;

    max-height: calc(100vh - 100px);

    overflow-y: auto;
}


.left-sidebar {
    padding-top: 27px;
}


.right-sidebar {
    padding-top: 27px;
    padding-bottom: 40px;
}


.feed-column {
    min-width: 0;

    padding-top: 26px;
    padding-bottom: 100px;
}


/* -----------------------------
   LEFT NAV
------------------------------ */

.side-nav {
    display: flex;
    flex-direction: column;

    gap: 3px;
}


.side-nav-item {
    display: flex;
    align-items: center;

    gap: 13px;

    padding: 11px 13px;

    border-radius: 10px;

    color: #4b596d;

    font-size: 14px;
    font-weight: 600;
}


.side-nav-item i {
    width: 20px;

    font-size: 17px;
}


.side-nav-item:hover {
    background: white;
    color: var(--text);
}


.side-nav-item.active {
    background: var(--navy);
    color: white;
}


.side-divider {
    height: 1px;

    margin: 20px 10px;

    background: var(--border);
}


.side-section-title {
    margin: 0 13px 9px;

    color: #9aa5b5;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1px;
}


.side-nav.compact .side-nav-item {
    padding-top: 8px;
    padding-bottom: 8px;
}


.nav-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #7c8aa2;
}


/* -----------------------------
   FEED HEADING
------------------------------ */

.feed-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 18px;
}


.feed-heading h1 {
    margin: 0 0 3px;

    font-size: 24px;
    font-weight: 750;

    letter-spacing: -.7px;
}


.feed-heading p {
    margin: 0;

    color: var(--muted);

    font-size: 13px;
}


.feed-filter {
    display: flex;

    padding: 3px;

    border: 1px solid var(--border);
    border-radius: 9px;

    background: white;
}


.feed-filter button {
    padding: 6px 13px;

    border: 0;
    border-radius: 7px;

    background: transparent;

    color: var(--muted);

    font-size: 12px;
    font-weight: 650;
}


.feed-filter button.active {
    background: var(--navy);
    color: white;
}


/* -----------------------------
   FEED CARD
------------------------------ */

.feed-card {
    margin-bottom: 17px;

    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: var(--radius);

    background: var(--surface);

    box-shadow:
        0 1px 1px rgba(20,30,50,.02),
        0 5px 20px rgba(20,30,50,.025);
}


.feed-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 17px 19px 10px;
}


.author-area {
    display: flex;
    align-items: center;

    gap: 10px;
}


.author-avatar {
    width: 40px;
    height: 40px;

    object-fit: cover;

    border-radius: 50%;
}


.author-name {
    display: flex;
    align-items: center;

    gap: 5px;

    font-size: 13px;
    font-weight: 700;
}


.verified {
    color: var(--accent);
}


.post-meta {
    margin-top: 2px;

    display: flex;

    gap: 6px;

    color: var(--muted);

    font-size: 11px;
}


.card-menu {
    width: 35px;
    height: 35px;

    border: 0;
    border-radius: 8px;

    background: transparent;

    color: var(--muted);
}


.card-menu:hover {
    background: var(--surface-soft);
}


.feed-content-link {
    display: block;
}


.feed-card-body {
    padding: 10px 19px 18px;
}


.content-label {
    margin-bottom: 8px;

    color: var(--accent);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .8px;
}


.study-label {
    color: #7950b5;
}


.video-label {
    color: #cf3d54;
}


.discussion-label {
    color: #14815d;
}


.feed-card h2 {
    margin: 0 0 8px;

    color: #172033;

    font-size: 20px;
    line-height: 1.3;

    font-weight: 740;

    letter-spacing: -.45px;
}


.feed-card-body p {
    margin: 0;

    color: #627086;

    font-size: 14px;
    line-height: 1.6;
}


.tag-list {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;

    margin-top: 15px;
}


.tag-list span {
    padding: 4px 8px;

    border-radius: 6px;

    background: #f1f4f8;

    color: #627086;

    font-size: 10px;
    font-weight: 650;
}


.feed-image-wrap {
    position: relative;
}


.feed-image {
    display: block;

    width: 100%;
    height: 330px;

    object-fit: cover;

    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}


.video-play {
    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    width: 66px;
    height: 66px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: rgba(10,20,35,.9);
    color: white;

    font-size: 30px;

    box-shadow: 0 10px 30px rgba(0,0,0,.25);
}


.feed-stats {
    display: flex;
    justify-content: space-between;

    padding: 11px 19px 6px;

    color: #8792a2;

    font-size: 11px;
}


.feed-actions {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    margin: 0 15px;

    border-top: 1px solid var(--border);
}


.feed-action,
.reaction-button {
    height: 45px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    border: 0;

    background: transparent;

    color: #69758a;

    font-size: 12px;
    font-weight: 600;
}


.feed-action:hover,
.reaction-button:hover {
    color: var(--accent);
}


.reaction-button.active {
    color: var(--accent);
}


/* -----------------------------
   RIGHT RAIL
------------------------------ */

.rail-card {
    margin-bottom: 16px;

    padding: 17px;

    border: 1px solid var(--border);
    border-radius: var(--radius);

    background: white;
}


.rail-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 14px;
}


.rail-card-heading > i {
    color: #96a1b1;

    font-size: 17px;
}


.eyebrow {
    display: block;

    margin-bottom: 2px;

    color: var(--accent);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1px;
}


.rail-card h3 {
    margin: 0;

    font-size: 16px;
    font-weight: 750;

    letter-spacing: -.3px;
}


.trending-list {
    display: flex;
    flex-direction: column;
}


.trending-item {
    display: flex;
    align-items: center;

    gap: 13px;

    padding: 11px 0;

    border-bottom: 1px solid #edf0f4;
}


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


.trending-rank {
    width: 24px;

    color: #a5adba;

    font-size: 20px;
    font-weight: 700;
}


.trending-item strong,
.tool-item strong,
.recommended-item strong {
    display: block;

    font-size: 12px;
    font-weight: 700;
}


.trending-item span,
.tool-item span,
.recommended-item span {
    display: block;

    margin-top: 2px;

    color: var(--muted);

    font-size: 10px;
}


.tool-list {
    display: flex;
    flex-direction: column;

    gap: 5px;
}


.tool-item {
    display: grid;

    grid-template-columns:
        36px
        1fr
        auto;

    align-items: center;

    gap: 10px;

    padding: 9px;

    border-radius: 9px;
}


.tool-item:hover {
    background: var(--surface-soft);
}


.tool-icon {
    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    border-radius: 8px;

    background: var(--accent-soft);
    color: var(--accent);
}


.tool-arrow {
    color: #afb7c3;

    font-size: 11px;
}


.recommended-list {
    display: flex;
    flex-direction: column;
}


.recommended-item {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 10px 0;

    border-bottom: 1px solid #edf0f4;
}


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


.recommended-item > i {
    color: #a8b0bc;

    font-size: 12px;
}


.right-footer {
    display: flex;
    flex-wrap: wrap;

    gap: 5px 12px;

    padding: 5px 8px;

    color: #9aa4b2;

    font-size: 10px;
}


.right-footer div {
    width: 100%;

    margin-top: 4px;
}


/* -----------------------------
   MOBILE
------------------------------ */

.mobile-nav {
    display: none;
}


@media (max-width: 1200px) {

    .app-grid {
        grid-template-columns:
            190px
            minmax(0, 720px)
            300px;

        gap: 20px;
    }

}


@media (max-width: 1050px) {

    .right-sidebar {
        display: none;
    }

    .app-grid {
        grid-template-columns:
            200px
            minmax(0, 760px);
    }

}


@media (max-width: 760px) {

    body {
        padding-bottom: 68px;
    }


    .topbar {
        height: 58px;
    }


    .topbar-inner {
        height: 58px;
    }


    .brand {
        width: auto;
    }


    .brand span:last-child {
        display: none;
    }


    .global-search {
        height: 38px;
    }


    .global-search input::placeholder {
        color: transparent;
    }


    .profile-button {
        display: none;
    }


    .left-sidebar {
        display: none;
    }


    .app-grid {
        display: block;
    }


    .feed-column {
        padding-top: 15px;
    }


    .feed-heading {
        padding: 0 3px;
    }


    .feed-heading p {
        display: none;
    }


    .feed-heading h1 {
        font-size: 20px;
    }


    .feed-image {
        height: 250px;
    }


    .breaking-inner {
        min-height: 37px;
    }


    .breaking-content span {
        display: none;
    }


    .breaking-content {
        overflow: hidden;
    }


    .breaking-content a {
        overflow: hidden;

        white-space: nowrap;

        text-overflow: ellipsis;
    }


    .feed-card {
        border-radius: 11px;
    }


    .feed-actions {
        margin: 0 5px;
    }


    .feed-action,
    .reaction-button {
        font-size: 11px;
    }


    .mobile-nav {
        position: fixed;

        left: 0;
        right: 0;
        bottom: 0;

        z-index: 1200;

        height: 63px;

        display: grid;

        grid-template-columns: repeat(5, 1fr);

        border-top: 1px solid var(--border);

        background: rgba(255,255,255,.98);

        backdrop-filter: blur(15px);
    }


    .mobile-nav a {
        display: flex;
        flex-direction: column;

        align-items: center;
        justify-content: center;

        gap: 2px;

        color: #7b8798;

        font-size: 9px;

        font-weight: 650;
    }


    .mobile-nav i {
        font-size: 18px;
    }


    .mobile-nav a.active {
        color: var(--navy);
    }

}


.auth-page {
    min-height: calc(100vh - 68px);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 50px 20px;

    background: var(--bg);
}


.auth-card {
    width: 100%;
    max-width: 440px;

    padding: 34px;

    border: 1px solid var(--border);
    border-radius: 16px;

    background: white;

    box-shadow:
        0 10px 40px rgba(20, 30, 50, .06);
}


.auth-heading {
    text-align: center;

    margin-bottom: 28px;
}


.auth-brand {
    margin: 0 auto 18px;
}


.auth-heading h1 {
    margin: 0 0 7px;

    font-size: 25px;
    font-weight: 750;

    letter-spacing: -.5px;
}


.auth-heading p {
    margin: 0;

    color: var(--muted);

    font-size: 13px;
}


.auth-card .form-label {
    font-size: 12px;
    font-weight: 650;
}


.auth-card .form-control {
    height: 45px;

    border: 1px solid var(--border);
    border-radius: 9px;

    font-size: 14px;
}


.auth-card .form-control:focus {
    border-color: var(--accent);

    box-shadow:
        0 0 0 3px rgba(50,102,232,.10);
}


.auth-card .btn {
    min-height: 45px;

    border-radius: 9px;

    font-weight: 650;
}


.auth-footer {
    margin-top: 23px;

    text-align: center;

    color: var(--muted);

    font-size: 12px;
}


.auth-footer a {
    color: var(--accent);

    font-weight: 650;
}

.icon-label {
    display: flex;
    align-items: center;
    gap: 5px;
}

.icon-label i {
    font-size: 14px;
}

.flash-container {
    position: fixed;
    top: 82px;
    left: 50%;
    transform: translateX(-50%);
    width: min(520px, calc(100% - 30px));
    z-index: 9999;
}

.flash-container .alert {
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
    border-radius: 10px;
}
.breaking-label {
    color: #c62828;
}

.study-label {
    color: #5b4fc7;
}

.video-label {
    color: #d64545;
}

.discussion-label {
    color: #287a5b;
}

.peptide-label {
    color: var(--accent);
}

.discussion-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 26px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 32px 0 60px;
}


.discussion-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 22px;
}


.discussion-page-header h1 {
    margin: 2px 0 6px;
    font-size: 28px;
    font-weight: 750;
    letter-spacing: -0.6px;
}


.discussion-page-header p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}


.discussion-filters {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin-bottom: 18px;
}


.discussion-filter {
    flex: 0 0 auto;
    padding: 7px 13px;
    border: 1px solid #dfe4ea;
    border-radius: 999px;
    background: #fff;
    color: var(--muted);
    text-decoration: none;
    font-size: 12px;
    font-weight: 650;
}


.discussion-filter:hover,
.discussion-filter.active {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}


.discussion-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}


.discussion-card {
    display: flex;
    gap: 14px;
    padding: 20px;
    background: #fff;
    border: 1px solid #e4e8ed;
    border-radius: 13px;
    transition: .15s ease;
}


.discussion-card:hover {
    border-color: #cfd6df;
    box-shadow: 0 5px 18px rgba(20, 30, 50, .04);
}


.discussion-author img,
.discussion-avatar-fallback {
    width: 42px;
    height: 42px;
    border-radius: 50%;
}


.discussion-author img {
    object-fit: cover;
}


.discussion-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #edf1f5;
    color: #7d8795;
}


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


.discussion-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 7px;
    color: var(--muted);
    font-size: 11px;
}


.discussion-name {
    color: var(--text);
    font-weight: 700;
}


.discussion-title-link {
    color: inherit;
    text-decoration: none;
}


.discussion-title-link h2 {
    margin: 0 0 7px;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 720;
}


.discussion-title-link:hover h2 {
    color: var(--accent);
}


.discussion-content p {
    margin: 0 0 12px;
    color: #596578;
    font-size: 13px;
    line-height: 1.55;
}


.discussion-badges {
    display: flex;
    gap: 7px;
    margin-bottom: 12px;
}


.discussion-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 7px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 750;
}


.discussion-badge.pinned {
    background: #eef3ff;
    color: var(--accent);
}


.discussion-badge.trending {
    background: #fff1eb;
    color: #c95323;
}


.discussion-stats {
    display: flex;
    align-items: center;
    gap: 18px;
}


.discussion-stats a,
.discussion-stats button,
.discussion-stats span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--muted);
    font-size: 11px;
}


.discussion-stats a {
    text-decoration: none;
}


.discussion-stats button {
    padding: 0;
    border: 0;
    background: transparent;
}


.discussion-stats a:hover,
.discussion-stats button:hover {
    color: var(--accent);
}


.discussion-sidebar {
    position: sticky;
    top: 90px;
    align-self: start;
}


.discussion-modal {
    border: 0;
    border-radius: 14px;
}


@media (max-width: 950px) {

    .discussion-layout {
        grid-template-columns: 1fr;
    }

    .discussion-sidebar {
        display: none;
    }

}


@media (max-width: 620px) {

    .discussion-page-header {
        flex-direction: column;
    }

    .discussion-page-header .btn {
        width: 100%;
    }

    .discussion-card {
        padding: 15px;
    }

}
.discussion-thread-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 26px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 30px 0 60px;
}


.thread-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    color: var(--muted);
    text-decoration: none;
    font-size: 12px;
    font-weight: 650;
}


.thread-back:hover {
    color: var(--accent);
}


.thread-original-post {
    padding: 24px;
    background: #fff;
    border: 1px solid #e3e8ee;
    border-radius: 14px;
}


.thread-author-row {
    display: flex;
    align-items: center;
    gap: 11px;
}


.thread-avatar,
.reply-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}


.thread-avatar-fallback,
.reply-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #edf1f5;
    color: #778295;
}


.thread-author-name {
    font-size: 13px;
    font-weight: 750;
}


.thread-author-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 2px;
    color: var(--muted);
    font-size: 11px;
}


.thread-body {
    padding: 22px 0;
}


.thread-body h1 {
    margin: 0 0 17px;
    font-size: 27px;
    line-height: 1.3;
    font-weight: 760;
    letter-spacing: -.5px;
}


.thread-content {
    color: #39465a;
    font-size: 14px;
    line-height: 1.75;
}


.thread-footer {
    display: flex;
    align-items: center;
    gap: 7px;
    padding-top: 14px;
    border-top: 1px solid #edf0f3;
}


.thread-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--muted);
    text-decoration: none;
    font-size: 12px;
}


.thread-action:hover {
    background: #f4f6f8;
    color: var(--text);
}


.thread-views {
    color: var(--muted);
    font-size: 11px;
}


.thread-replies-heading {
    margin: 26px 0 12px;
}


.thread-replies-heading > div {
    display: flex;
    align-items: baseline;
    gap: 9px;
}


.thread-replies-heading h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 750;
}


.thread-replies-heading span {
    color: var(--muted);
    font-size: 11px;
}


.thread-replies {
    display: flex;
    flex-direction: column;
}


.thread-reply {
    display: flex;
    gap: 13px;
    padding: 18px 4px;
    border-bottom: 1px solid #e8ebef;
}


.reply-avatar {
    width: 38px;
    height: 38px;
}


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


.reply-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 8px;
    font-size: 11px;
    color: var(--muted);
}


.reply-header strong {
    color: var(--text);
    font-size: 12px;
}


.reply-body {
    color: #414d5e;
    font-size: 13px;
    line-height: 1.65;
}


.reply-actions {
    display: flex;
    gap: 14px;
    margin-top: 10px;
}


.reply-actions button {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 11px;
}


.reply-actions button:hover {
    color: var(--accent);
}


.thread-reply-box {
    margin-top: 26px;
    padding: 20px;
    background: #fff;
    border: 1px solid #e3e8ee;
    border-radius: 13px;
}


.reply-composer-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}


.reply-composer-header > div:last-child {
    display: flex;
    flex-direction: column;
}


.reply-composer-header strong {
    font-size: 12px;
}


.reply-composer-header span {
    color: var(--muted);
    font-size: 10px;
}


.thread-reply-box textarea {
    resize: vertical;
    min-height: 125px;
}


.reply-submit-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-top: 12px;
}


.reply-submit-row span {
    color: var(--muted);
    font-size: 10px;
}


.replying-to {
    margin-bottom: 9px;
    padding: 8px 10px;
    background: #f2f5fa;
    border-radius: 7px;
    color: var(--muted);
    font-size: 11px;
}


.replying-to button {
    margin-left: 7px;
    border: 0;
    background: transparent;
    color: var(--accent);
    font-weight: 650;
}


.reply-login-required {
    display: flex;
    align-items: center;
    gap: 13px;
}


.reply-login-required > i {
    font-size: 25px;
    color: var(--accent);
}


.reply-login-required > div {
    display: flex;
    flex: 1;
    flex-direction: column;
}


.reply-login-required strong {
    font-size: 13px;
}


.reply-login-required span {
    color: var(--muted);
    font-size: 11px;
}


.thread-no-replies {
    padding: 45px 20px;
    text-align: center;
    color: var(--muted);
}


.thread-no-replies i {
    font-size: 30px;
}


.thread-no-replies h3 {
    margin: 10px 0 4px;
    color: var(--text);
    font-size: 16px;
}


.thread-no-replies p {
    margin: 0;
    font-size: 12px;
}


.discussion-thread-sidebar {
    position: sticky;
    top: 90px;
    align-self: start;
}


.thread-info-list > div {
    display: flex;
    justify-content: space-between;
    padding: 9px 0;
    border-bottom: 1px solid #edf0f3;
    font-size: 11px;
}


.thread-info-list > div:last-child {
    border-bottom: 0;
}


.thread-info-list span {
    color: var(--muted);
}


.thread-info-list strong {
    color: var(--text);
}


@media (max-width: 950px) {

    .discussion-thread-layout {
        grid-template-columns: 1fr;
    }

    .discussion-thread-sidebar {
        display: none;
    }

}


@media (max-width: 620px) {

    .thread-original-post {
        padding: 17px;
    }

    .thread-body h1 {
        font-size: 22px;
    }

    .thread-footer {
        flex-wrap: wrap;
    }

    .thread-views {
        width: 100%;
        margin-top: 5px;
    }

    .reply-submit-row {
        align-items: stretch;
        flex-direction: column;
    }

}

.feed-composer {
    margin-bottom: 18px;
    padding: 16px;
    background: #fff;
    border: 1px solid #e3e8ee;
    border-radius: 13px;
}

.feed-composer-top {
    display: flex;
    align-items: center;
    gap: 11px;
}

.composer-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}

.composer-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #edf1f5;
    color: #778295;
}

.composer-trigger {
    flex: 1;
    height: 42px;
    padding: 0 15px;
    border: 1px solid #e1e5ea;
    border-radius: 999px;
    background: #f5f7f9;
    color: var(--muted);
    text-align: left;
    font-size: 13px;
}

.composer-trigger:hover {
    background: #eef1f4;
    border-color: #d6dce3;
}

.composer-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 13px;
    padding-top: 11px;
    border-top: 1px solid #edf0f3;
}

.composer-actions button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--muted);
    font-size: 11px;
    font-weight: 650;
}

.composer-actions button:hover {
    background: #f4f6f8;
    color: var(--text);
}

.composer-actions i {
    color: var(--accent);
    font-size: 15px;
}

.create-post-modal {
    border: 0;
    border-radius: 15px;
}

.composer-user {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 17px;
}

.composer-user > div:last-child {
    display: flex;
    flex-direction: column;
}

.composer-user strong {
    font-size: 13px;
}

.composer-user span {
    color: var(--muted);
    font-size: 10px;
}

.post-content-input {
    min-height: 130px;
    resize: vertical;
}

.post-media-box {
    padding: 15px;
    background: #f7f8fa;
    border: 1px solid #e4e8ed;
    border-radius: 10px;
}

.post-media-heading {
    margin-bottom: 13px;
    color: var(--text);
    font-size: 11px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.media-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
    color: #a0a8b4;
    font-size: 9px;
    font-weight: 700;
}

.media-divider::before,
.media-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e0e4e9;
}

.post-modal-dialog {
    width: min(680px, calc(100vw - 28px));
    max-width: 680px;
}

.post-composer-modal {
    overflow: hidden;
    border: 1px solid rgba(18, 32, 52, .10);
    border-radius: 22px;
    background: #fff;
    box-shadow:
        0 30px 80px rgba(15, 25, 40, .20),
        0 3px 12px rgba(15, 25, 40, .07);
}

.post-composer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 24px 18px;
    border-bottom: 1px solid #edf0f3;
}

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

.post-composer-brand {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            #17243a,
            #0c1524
        );

    color: #fff;

    font-size: 18px;
}

.post-composer-heading > div:last-child {
    display: flex;
    flex-direction: column;
}

.post-composer-heading span {
    margin-bottom: 2px;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.1px;

    color: var(--accent);
}

.post-composer-heading h2 {
    margin: 0;

    font-size: 19px;
    font-weight: 760;
    letter-spacing: -.35px;

    color: var(--text);
}

.post-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border: 0;
    border-radius: 50%;

    background: #f4f6f8;

    color: #606c7d;

    transition: all .15s ease;
}

.post-modal-close:hover {
    background: #e9edf1;
    color: #151d29;
}

.post-composer-body {
    padding: 22px 24px;
}

.post-composer-user {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 20px;
}

.post-user-avatar {
    width: 38px;
    height: 38px;

    flex: 0 0 auto;

    border-radius: 50%;
    object-fit: cover;
}

.post-user-fallback {
    display: flex;
    align-items: center;
    justify-content: center;

    background: #eef1f4;
    color: #677487;
}

.post-composer-user > div:last-child {
    display: flex;
    flex-direction: column;
}

.post-composer-user strong {
    font-size: 12px;
    font-weight: 750;
    color: var(--text);
}

.post-composer-user span {
    margin-top: 1px;

    font-size: 10px;

    color: var(--muted);
}

.post-title-input {
    width: 100%;

    padding: 0 0 10px;

    border: 0;
    border-bottom: 1px solid #edf0f3;
    outline: none;

    background: transparent;

    color: var(--text);

    font-size: 22px;
    font-weight: 710;
    letter-spacing: -.4px;
}

.post-title-input::placeholder {
    color: #b0b7c2;
}

.post-body-input {
    width: 100%;
    min-height: 130px;

    margin-top: 14px;
    padding: 0;

    border: 0;
    outline: none;

    resize: vertical;

    background: transparent;

    color: #384558;

    font-size: 14px;
    line-height: 1.7;
}

.post-body-input::placeholder {
    color: #9da6b2;
}

.post-composer-options {
    display: flex;
    align-items: center;

    margin-top: 10px;
}

.post-category-wrap {
    position: relative;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    height: 34px;

    padding: 0 30px 0 11px;

    border: 1px solid #e2e6eb;
    border-radius: 999px;

    background: #f8f9fa;
}

.post-category-wrap > i:first-child {
    color: var(--accent);
    font-size: 12px;
}

.post-category-select {
    appearance: none;

    padding: 0;

    border: 0;
    outline: none;

    background: transparent;

    color: #455164;

    font-size: 11px;
    font-weight: 700;

    cursor: pointer;
}

.post-select-arrow {
    position: absolute;

    right: 10px;

    pointer-events: none;

    color: #8994a3;

    font-size: 9px;
}

.post-media-section {
    margin-top: 22px;

    padding-top: 16px;

    border-top: 1px solid #edf0f3;
}

.post-media-toolbar {
    display: flex;
    gap: 7px;
}

.post-media-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    height: 36px;

    padding: 0 13px;

    border: 1px solid transparent;
    border-radius: 9px;

    background: #f5f7f8;

    color: #687486;

    font-size: 11px;
    font-weight: 700;

    transition: all .15s ease;
}

.post-media-button:hover {
    background: #eef2f5;
    color: #273244;
}

.post-media-button.active {
    border-color: rgba(50, 102, 232, .18);

    background: rgba(50, 102, 232, .08);

    color: var(--accent);
}

.post-media-button i {
    font-size: 14px;
}

.post-media-panel {
    display: none;

    margin-top: 12px;
}

.post-media-panel.active {
    display: block;
}

.post-upload-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 140px;

    border: 1px dashed #cfd6df;
    border-radius: 14px;

    background: #fafbfc;

    cursor: pointer;

    transition: all .15s ease;
}

.post-upload-dropzone:hover {
    border-color: var(--accent);

    background: rgba(50, 102, 232, .025);
}

.post-upload-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    margin-bottom: 8px;

    border-radius: 12px;

    background: #eef3ff;

    color: var(--accent);

    font-size: 18px;
}

.post-upload-dropzone strong {
    font-size: 12px;
    font-weight: 750;

    color: #344054;
}

.post-upload-dropzone span {
    margin-top: 3px;

    font-size: 10px;

    color: #8b95a3;
}

.post-url-field {
    display: flex;
    align-items: center;
    gap: 9px;

    height: 46px;

    padding: 0 13px;

    border: 1px solid #dfe4e9;
    border-radius: 11px;

    background: #fafbfc;

    transition: border-color .15s ease;
}

.post-url-field:focus-within {
    border-color: var(--accent);

    box-shadow: 0 0 0 3px rgba(50, 102, 232, .07);
}

.post-url-field i {
    color: #7f8a99;

    font-size: 15px;
}

.post-url-field input {
    width: 100%;

    border: 0;
    outline: none;

    background: transparent;

    color: var(--text);

    font-size: 12px;
}

.post-url-field input::placeholder {
    color: #9da6b2;
}

.post-media-preview {
    position: relative;

    overflow: hidden;

    margin-top: 13px;

    border: 1px solid #e1e6eb;
    border-radius: 14px;

    background: #f7f8fa;
}

.post-preview-remove {
    position: absolute;
    z-index: 5;

    top: 10px;
    right: 10px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    border: 0;
    border-radius: 50%;

    background: rgba(15, 22, 32, .78);

    backdrop-filter: blur(7px);

    color: #fff;
}

.post-preview-image-wrap {
    max-height: 390px;

    background: #0d1117;

    text-align: center;
}

.post-preview-image-wrap img {
    display: block;

    width: 100%;
    max-height: 390px;

    object-fit: contain;
}

.youtube-preview-card {
    background: #fff;
}

.youtube-thumbnail-wrap {
    position: relative;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: #111;
}

.youtube-thumbnail-wrap img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.youtube-play {
    position: absolute;

    top: 50%;
    left: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 58px;
    height: 42px;

    transform: translate(-50%, -50%);

    border-radius: 11px;

    background: #ff0033;

    color: #fff;

    font-size: 25px;
}

.youtube-preview-info {
    display: flex;
    flex-direction: column;

    padding: 14px 16px;
}

.youtube-source {
    display: flex;
    align-items: center;
    gap: 5px;

    margin-bottom: 5px;

    color: #e62117;

    font-size: 10px;
    font-weight: 750;
}

.youtube-preview-info strong {
    color: #273244;

    font-size: 13px;
    line-height: 1.4;
}

.youtube-preview-info > span {
    margin-top: 4px;

    color: var(--muted);

    font-size: 10px;
}

.video-preview-wrap video {
    display: block;

    width: 100%;
    max-height: 390px;

    background: #080b10;
}

.post-composer-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 16px 24px;

    border-top: 1px solid #edf0f3;

    background: #fbfcfd;
}

.post-clear-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 8px 10px;

    border: 0;
    border-radius: 8px;

    background: transparent;

    color: #7a8594;

    font-size: 11px;
    font-weight: 650;
}

.post-clear-button:hover {
    background: #eef1f4;
    color: #3d4858;
}

.post-footer-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.post-character-count {
    color: #9ba4b0;

    font-size: 9px;
}

.post-publish-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    height: 42px;

    padding: 0 8px 0 17px;

    border: 0;
    border-radius: 11px;

    background: #111d30;

    color: #fff;

    font-size: 12px;
    font-weight: 750;

    transition: all .15s ease;
}

.post-publish-button:hover {
    transform: translateY(-1px);

    background: #172942;

    box-shadow: 0 5px 16px rgba(17, 29, 48, .18);
}

.post-publish-button span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 29px;
    height: 29px;

    border-radius: 8px;

    background: rgba(255, 255, 255, .12);
}

@media (max-width: 620px) {

    .post-composer-header,
    .post-composer-body,
    .post-composer-footer {
        padding-left: 17px;
        padding-right: 17px;
    }

    .post-media-toolbar {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .post-media-button {
        justify-content: center;
    }

    .post-character-count {
        display: none;
    }

}
.feed-youtube-preview {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #111;
    cursor: pointer;
}

.feed-youtube-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.feed-youtube-preview::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .10);
    transition: background .15s ease;
}

.feed-youtube-preview:hover::after {
    background: rgba(0, 0, 0, .18);
}

.feed-youtube-play {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    width: 64px;
    height: 46px;

    border: 0;
    border-radius: 12px;

    background: #ff0033;
    color: #fff;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 30px;

    box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
}

.feed-youtube-play:hover {
    transform: translate(-50%, -50%) scale(1.04);
}

.article-page {
    overflow: hidden;
    background: #fff;
    border: 1px solid #e5e9ee;
    border-radius: 18px;
    box-shadow: 0 8px 30px rgba(18, 32, 52, .04);
}


/* HEADER */

.article-header {
    padding: 30px 32px 26px;
    border-bottom: 1px solid #eee;
}

.article-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.article-category {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 28px;
    padding: 0 11px;

    border-radius: 999px;

    background: rgba(50, 102, 232, .08);
    color: var(--accent);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .7px;
    text-transform: uppercase;
}

.article-header-meta {
    display: flex;
    align-items: center;
    gap: 15px;

    color: #8a95a5;

    font-size: 10px;
    font-weight: 600;
}

.article-header-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.article-header-meta i {
    font-size: 11px;
}


/* TITLE */

.article-title {
    max-width: 900px;

    margin: 0;

    color: #162033;

    font-size: clamp(31px, 4vw, 46px);
    font-weight: 760;

    line-height: 1.07;
    letter-spacing: -1.35px;
}


/* AUTHOR ROW */

.article-author-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-top: 26px;
}

.article-author {
    display: flex;
    align-items: center;
    gap: 11px;
}

.article-author-avatar {
    width: 44px;
    height: 44px;

    flex: 0 0 auto;

    border-radius: 50%;

    object-fit: cover;

    box-shadow: 0 0 0 1px rgba(15, 23, 42, .08);
}

.article-author-fallback {
    display: flex;
    align-items: center;
    justify-content: center;

    background: #eef1f5;

    color: #667386;

    font-size: 17px;
}

.article-author-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.article-author-name {
    display: flex;
    align-items: center;
    gap: 5px;

    color: #253145;

    font-size: 12px;
    font-weight: 760;
}

.article-author-handle {
    color: #8d98a8;

    font-size: 10px;
}

.article-author-name .verified {
    color: var(--accent);
    font-size: 12px;
}


/* ACTIONS */

.article-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.article-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    height: 34px;
    padding: 0 11px;

    border: 1px solid #e1e6eb;
    border-radius: 9px;

    background: #fff;

    color: #687486;

    font-size: 10px;
    font-weight: 700;

    transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease;
}

.article-action:hover {
    border-color: #d4dbe3;
    background: #f7f9fb;
    color: #273346;
}


/* MEDIA */

.article-media {
    width: 100%;
    border-top: 1px solid #edf0f3;
    border-bottom: 1px solid #edf0f3;
    background: #0b0f15;
}

.article-image-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.article-image {
    display: block;

    width: 100%;
    max-height: 620px;

    object-fit: cover;
}

.article-video-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;

    overflow: hidden;
}

.article-video-wrap iframe,
.article-video-wrap video {
    display: block;

    width: 100%;
    height: 100%;

    border: 0;

    object-fit: contain;

    background: #000;
}


/* CONTENT */

.article-content {
    padding: 32px;

    color: #344054;

    font-size: 15px;
    line-height: 1.82;
}

.article-content p {
    margin: 0 0 20px;
}

.article-content h2 {
    margin: 34px 0 12px;

    color: #182235;

    font-size: 22px;
    font-weight: 760;

    letter-spacing: -.4px;
}

.article-content h3 {
    margin: 28px 0 10px;

    color: #182235;

    font-size: 18px;
    font-weight: 740;
}


/* MOBILE */

@media (max-width: 700px) {

    .article-header {
        padding: 22px 20px;
    }

    .article-header-top {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .article-title {
        font-size: 31px;
        letter-spacing: -.85px;
    }

    .article-author-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .article-actions {
        width: 100%;
    }

    .article-action {
        flex: 1;
    }

    .article-content {
        padding: 24px 20px 30px;
    }

}
.post-comments {
    margin-top: 18px;

    overflow: hidden;

    border: 1px solid #e5e9ee;
    border-radius: 18px;

    background: #fff;
}

.comments-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 22px 24px 17px;

    border-bottom: 1px solid #edf0f3;
}

.comments-eyebrow {
    display: block;

    margin-bottom: 3px;

    color: var(--accent);

    font-size: 8px;
    font-weight: 850;

    letter-spacing: 1px;
}

.comments-heading h2 {
    display: flex;
    align-items: center;
    gap: 8px;

    margin: 0;

    color: #182235;

    font-size: 17px;
    font-weight: 760;
}

.comments-heading h2 span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 23px;
    height: 23px;

    padding: 0 6px;

    border-radius: 999px;

    background: #f0f3f6;

    color: #748092;

    font-size: 9px;
}


/* COMPOSER */

.comment-composer {
    display: flex;
    align-items: flex-start;
    gap: 11px;

    padding: 20px 24px;

    border-bottom: 1px solid #edf0f3;

    background: #fbfcfd;
}

.comment-avatar {
    width: 36px;
    height: 36px;

    flex: 0 0 auto;

    border-radius: 50%;

    object-fit: cover;
}

.comment-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;

    background: #edf1f4;

    color: #6f7b8c;
}

.comment-composer-main {
    flex: 1;

    overflow: hidden;

    border: 1px solid #dfe4ea;
    border-radius: 12px;

    background: #fff;

    transition: border-color .15s ease,
                box-shadow .15s ease;
}

.comment-composer-main:focus-within {
    border-color: rgba(50, 102, 232, .6);

    box-shadow:
        0 0 0 3px rgba(50, 102, 232, .06);
}

.comment-composer textarea {
    display: block;

    width: 100%;
    min-height: 82px;

    padding: 12px 14px;

    border: 0;
    outline: 0;

    resize: vertical;

    background: transparent;

    color: #344054;

    font-family: inherit;
    font-size: 12px;
    line-height: 1.6;
}

.comment-composer textarea::placeholder {
    color: #a0a9b5;
}

.comment-composer-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    padding: 8px 9px 8px 14px;

    border-top: 1px solid #f0f2f4;
}

.comment-composer-footer > span {
    color: #9aa4b1;

    font-size: 9px;
}

.comment-composer-footer button {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    height: 32px;

    padding: 0 11px;

    border: 0;
    border-radius: 8px;

    background: #13233c;

    color: #fff;

    font-size: 10px;
    font-weight: 700;
}

.comment-replying {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 7px 10px 7px 14px;

    border-bottom: 1px solid #edf0f3;

    background: #f5f8ff;

    color: #758196;

    font-size: 9px;
}

.comment-replying[hidden] {
    display: none;
}

.comment-replying strong {
    color: var(--accent);
}

.comment-replying button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 25px;
    height: 25px;

    border: 0;
    border-radius: 50%;

    background: transparent;

    color: #8490a0;
}


/* COMMENTS */

.comments-list {
    padding: 4px 24px 10px;
}

.comment-item {
    position: relative;

    display: flex;
    align-items: flex-start;
    gap: 11px;

    padding: 18px 0;

    border-bottom: 1px solid #f0f2f4;
}

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

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

.comment-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;

    min-height: 18px;

    font-size: 9px;
}

.comment-meta strong {
    color: #263246;

    font-size: 11px;
    font-weight: 750;
}

.comment-meta > span,
.comment-meta time {
    color: #919baa;
}

.comment-meta .verified {
    color: var(--accent);
}

.comment-dot {
    color: #c0c6ce !important;
}

.comment-text {
    margin-top: 6px;

    color: #465265;

    font-size: 12px;
    line-height: 1.65;

    word-break: break-word;
}

.comment-actions {
    display: flex;
    align-items: center;
    gap: 13px;

    margin-top: 9px;
}

.comment-actions button {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 0;

    border: 0;

    background: transparent;

    color: #8994a3;

    font-size: 9px;
    font-weight: 650;
}

.comment-actions button:hover {
    color: var(--accent);
}

.comment-reply {
    margin-left: 47px;
}

.comment-reply-target {
    margin-top: 4px;

    color: #8b96a5;

    font-size: 9px;
}

.comment-reply-target::first-letter {
    color: var(--accent);
}


/* EMPTY */

.comments-empty {
    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 45px 20px;

    color: #909aa8;
}

.comments-empty i {
    margin-bottom: 10px;

    font-size: 22px;
}

.comments-empty strong {
    color: #566173;

    font-size: 12px;
}

.comments-empty span {
    margin-top: 3px;

    font-size: 10px;
}


/* LOGIN */

.comment-login {
    display: flex;
    align-items: center;
    gap: 11px;

    margin: 20px 24px;
    padding: 14px;

    border: 1px solid #e5e9ee;
    border-radius: 11px;

    background: #fafbfc;
}

.comment-login > i {
    color: var(--accent);
    font-size: 18px;
}

.comment-login > div {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.comment-login strong {
    font-size: 11px;
}

.comment-login span {
    color: var(--muted);
    font-size: 9px;
}

.comment-login a {
    color: var(--accent);

    font-size: 10px;
    font-weight: 700;

    text-decoration: none;
}


@media (max-width: 700px) {

    .comments-heading,
    .comment-composer {
        padding-left: 17px;
        padding-right: 17px;
    }

    .comments-list {
        padding-left: 17px;
        padding-right: 17px;
    }

    .comment-reply {
        margin-left: 28px;
    }

    .comment-composer-footer > span {
        display: none;
    }

}

.article-back-row {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.article-back-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: #697588;

    font-size: 11px;
    font-weight: 700;

    text-decoration: none;

    transition: color .15s ease;
}

.article-back-link:hover {
    color: var(--accent);
}

.article-back-link i {
    font-size: 13px;
}

.flash-container {
    position: fixed;
    top: 78px;
    right: 24px;

    z-index: 9999;

    width: min(420px, calc(100vw - 32px));
}


/* BASE ALERT */

.flash-container .alert {
    position: relative;

    padding: 15px 46px 15px 18px;
    margin-bottom: 12px;

    border: 0 !important;
    border-radius: 12px;

    font-size: 12px;
    font-weight: 650;
    line-height: 1.5;

    box-shadow:
        0 18px 45px rgba(15, 23, 42, .12),
        0 3px 10px rgba(15, 23, 42, .06);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}


/* DANGER */

.flash-container .alert-danger {
    --bs-alert-color: #8f1749;
    --bs-alert-bg: #fff2f7;
    --bs-alert-border-color: transparent;

    color: #8f1749;
    background:
        linear-gradient(
            135deg,
            #fff7fa 0%,
            #ffeaf2 100%
        );

    box-shadow:
        0 18px 45px rgba(126, 34, 79, .14),
        0 4px 12px rgba(126, 34, 79, .07);
}


/* SUCCESS */

.flash-container .alert-success {
    --bs-alert-color: #087565;
    --bs-alert-bg: #edfcf8;
    --bs-alert-border-color: transparent;

    color: #087565;
    background:
        linear-gradient(
            135deg,
            #f3fdfa 0%,
            #e0f8f1 100%
        );

    box-shadow:
        0 18px 45px rgba(5, 118, 99, .13),
        0 4px 12px rgba(5, 118, 99, .06);
}


/* INFO */

.flash-container .alert-info {
    --bs-alert-color: #2855a6;
    --bs-alert-bg: #eef4ff;
    --bs-alert-border-color: transparent;

    color: #2855a6;

    background:
        linear-gradient(
            135deg,
            #f5f8ff 0%,
            #e7efff 100%
        );

    box-shadow:
        0 18px 45px rgba(50, 102, 232, .13),
        0 4px 12px rgba(50, 102, 232, .06);
}


/* WARNING */

.flash-container .alert-warning {
    --bs-alert-color: #8b6410;
    --bs-alert-bg: #fff9e8;
    --bs-alert-border-color: transparent;

    color: #8b6410;

    background:
        linear-gradient(
            135deg,
            #fffdf5 0%,
            #fff4cf 100%
        );

    box-shadow:
        0 18px 45px rgba(146, 102, 14, .12),
        0 4px 12px rgba(146, 102, 14, .05);
}


/* CLOSE */

.flash-container .btn-close {
    position: absolute;

    top: 50%;
    right: 14px;

    transform: translateY(-50%);

    width: 9px;
    height: 9px;

    padding: 7px;

    border-radius: 50%;

    opacity: .38;

    transition:
        opacity .15s ease,
        background-color .15s ease;
}

.flash-container .btn-close:hover {
    opacity: .75;
    background-color: rgba(15, 23, 42, .06);
}


/* LITTLE ENTRANCE */

.flash-container .alert.show {
    animation: haxFlashIn .25s ease-out;
}

@keyframes haxFlashIn {

    from {
        opacity: 0;
        transform: translateY(-8px) scale(.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

}


@media (max-width: 600px) {

    .flash-container {
        top: 68px;
        right: 16px;
        left: 16px;

        width: auto;
    }

}

.article-actions form {
    margin: 0;
}

.article-action-delete {
    color: #a33b65;
}

.article-action-delete:hover {
    color: #8c2853;
    background: #fff2f7;
}

.reaction-button {
    transition:
        color .15s ease,
        background .15s ease,
        transform .12s ease;
}

.reaction-button:hover {
    background: #f3f6fa;
}

.reaction-button.liked {
    color: #3266e8;
}

.reaction-button.liked i {
    color: #3266e8;
}

.reaction-button:active {
    transform: scale(.94);
}

.reaction-button[data-loading="true"] {
    pointer-events: none;
    opacity: .65;
}

.account-page {
    display: flex;
    flex-direction: column;
    gap: 18px;
}


/* IDENTITY */

.account-identity {
    display: flex;
    align-items: center;
    gap: 18px;

    padding: 26px;

    border-radius: 18px;

    background: #fff;

    box-shadow:
        0 12px 35px rgba(15, 23, 42, .06);
}

.account-avatar {
    width: 72px;
    height: 72px;

    border-radius: 20px;

    object-fit: cover;
}

.account-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;

    background: #edf1f5;

    color: #67758a;

    font-size: 27px;
}

.account-identity-main {
    min-width: 0;
}

.account-name-row {
    display: flex;
    align-items: center;
    gap: 7px;
}

.account-name-row h1 {
    margin: 0;

    color: #172033;

    font-size: 24px;
    font-weight: 780;

    letter-spacing: -.5px;
}

.account-verified {
    color: var(--accent);
}

.account-handle {
    margin-top: 2px;

    color: #7c8899;

    font-size: 11px;
    font-weight: 650;
}

.account-details {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 12px;
}

.account-details span {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    color: #8a95a5;

    font-size: 10px;
}


/* STATS */

.account-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.account-stat {
    display: flex;
    flex-direction: column;

    padding: 18px;

    border-radius: 14px;

    background: #fff;

    box-shadow:
        0 8px 24px rgba(15, 23, 42, .05);
}

.account-stat strong {
    color: #172033;

    font-size: 23px;
    font-weight: 800;
}

.account-stat span {
    margin-top: 2px;

    color: #8b96a6;

    font-size: 9px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .45px;
}


/* CARD */

.account-card {
    overflow: hidden;

    border-radius: 18px;

    background: #fff;

    box-shadow:
        0 12px 35px rgba(15, 23, 42, .055);
}

.account-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 23px 25px;

    box-shadow:
        0 1px 0 rgba(15, 23, 42, .06);
}

.account-eyebrow {
    display: block;

    margin-bottom: 3px;

    color: var(--accent);

    font-size: 8px;
    font-weight: 850;

    letter-spacing: 1px;
}

.account-card-heading h2 {
    margin: 0;

    color: #172033;

    font-size: 17px;
    font-weight: 780;
}

.account-card-heading p {
    margin: 4px 0 0;

    color: #8a95a5;

    font-size: 10px;
}

.account-heading-icon {
    color: #b0bac7;

    font-size: 24px;
}


/* FORM */

.account-form-section {
    padding: 22px 25px 0;
}

.account-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 9px;
}

.account-label-row > span {
    color: #a0a9b5;
    font-size: 9px;
}

.account-label {
    display: block;

    margin-bottom: 9px;

    color: #3d495d;

    font-size: 10px;
    font-weight: 750;
}

.account-textarea {
    width: 100%;
    min-height: 90px;

    padding: 13px 14px;

    border: 0;
    outline: 0;
    border-radius: 11px;

    resize: vertical;

    background: #f5f7f9;

    color: #354155;

    font-family: inherit;
    font-size: 11px;

    box-shadow:
        inset 0 0 0 1px rgba(15, 23, 42, .045);
}

.account-textarea:focus {
    background: #fff;

    box-shadow:
        0 0 0 3px rgba(50, 102, 232, .08),
        inset 0 0 0 1px rgba(50, 102, 232, .35);
}


/* PEPTIDES */

.peptide-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.peptide-option {
    cursor: pointer;
}

.peptide-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.peptide-option-box {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    min-height: 32px;

    padding: 0 11px;

    border-radius: 9px;

    background: #f3f5f8;

    color: #667286;

    font-size: 9px;
    font-weight: 700;

    transition: all .15s ease;
}

.peptide-option-box i {
    display: none;
}

.peptide-option input:checked + .peptide-option-box {
    background: #eef3ff;
    color: #3266e8;

    box-shadow:
        inset 0 0 0 1px rgba(50, 102, 232, .12);
}

.peptide-option input:checked + .peptide-option-box i {
    display: inline;
}


/* GRID */

.account-form-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 24px;

    padding: 24px 25px;
}

.duration-control {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

.duration-control input,
.duration-control select {
    height: 40px;

    padding: 0 11px;

    border: 0;
    outline: 0;
    border-radius: 9px;

    background: #f4f6f8;

    color: #3d495c;

    font-family: inherit;
    font-size: 10px;
}


/* EXPERIENCE */

.experience-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.experience-selector label {
    cursor: pointer;
}

.experience-selector input {
    position: absolute;
    opacity: 0;
}

.experience-choice {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    height: 40px;

    padding: 0 10px;

    border-radius: 9px;

    background: #f4f6f8;

    color: #748094;

    font-size: 9px;
    font-weight: 700;
}

.experience-selector input:checked + .experience-choice {
    background: #edf1f6;

    color: #172033;

    box-shadow:
        inset 0 0 0 1px rgba(23, 32, 51, .1);
}

.experience-selector input:checked + .experience-great {
    background: #e8faf5;
    color: #087565;
}

.experience-selector input:checked + .experience-good {
    background: #eef3ff;
    color: #3266e8;
}

.experience-selector input:checked + .experience-poor {
    background: #fff0f5;
    color: #96365f;
}


/* SAVE */

.account-form-footer {
    display: flex;
    justify-content: flex-end;

    padding: 0 25px 24px;
}

.account-save-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    height: 38px;

    padding: 0 14px;

    border: 0;
    border-radius: 10px;

    background: #13233c;

    color: #fff;

    font-size: 10px;
    font-weight: 750;

    box-shadow:
        0 9px 20px rgba(19, 35, 60, .15);
}


/* POSTS */

.account-post-count {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 32px;
    height: 32px;

    border-radius: 10px;

    background: #f2f4f7;

    color: #647185;

    font-size: 11px;
    font-weight: 800;
}

.account-post {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    padding: 17px 24px;

    box-shadow:
        0 1px 0 rgba(15, 23, 42, .055);
}

.account-post:last-child {
    box-shadow: none;
}

.account-post-main {
    min-width: 0;
    flex: 1;
}

.account-post-meta {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 5px;

    color: #98a2b0;

    font-size: 8px;
}

.account-post-category {
    color: var(--accent);

    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: .45px;
}

.account-post-title {
    display: block;

    overflow: hidden;

    color: #263247;

    font-size: 12px;
    font-weight: 730;

    text-decoration: none;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-post-title:hover {
    color: var(--accent);
}

.account-post-stats {
    display: flex;
    align-items: center;
    gap: 13px;

    margin-top: 7px;
}

.account-post-stats span,
.account-post-stats a {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    color: #8a95a5;

    font-size: 8px;

    text-decoration: none;
}

.account-post-actions {
    display: flex;
    align-items: center;
    gap: 5px;
}

.account-post-actions > a,
.account-post-actions button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    border: 0;
    border-radius: 8px;

    background: #f3f5f7;

    color: #687588;

    text-decoration: none;
}

.account-post-actions > a:hover {
    background: #edf2ff;
    color: var(--accent);
}

.account-post-actions form {
    margin: 0;
}

.account-post-actions .account-post-delete:hover {
    background: #fff0f5;
    color: #96365f;
}


/* EMPTY */

.account-posts-empty {
    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 48px 20px;

    color: #929dab;
}

.account-posts-empty i {
    margin-bottom: 9px;
    font-size: 24px;
}

.account-posts-empty strong {
    color: #4d596b;
    font-size: 12px;
}

.account-posts-empty span {
    margin-top: 4px;
    font-size: 9px;
}

.account-posts-empty a {
    margin-top: 13px;

    color: var(--accent);

    font-size: 10px;
    font-weight: 750;

    text-decoration: none;
}


/* MOBILE */

@media (max-width: 700px) {

    .account-identity {
        padding: 20px;
    }

    .account-avatar {
        width: 58px;
        height: 58px;

        border-radius: 16px;
    }

    .account-details {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

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

    .account-form-grid {
        grid-template-columns: 1fr;
    }

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

    .account-post-actions {
        width: 100%;
        justify-content: flex-end;
    }

}

/* PUBLIC USER PROFILE */

.profile-owner-action {
    margin-left: auto;
}

.profile-edit-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    height: 36px;

    padding: 0 13px;

    border-radius: 9px;

    background: #f2f5f8;

    color: #536176;

    font-size: 9px;
    font-weight: 750;

    text-decoration: none;

    transition:
        background .15s ease,
        color .15s ease;
}

.profile-edit-button:hover {
    background: #edf2ff;
    color: var(--accent);
}


.profile-role {
    color: #607089 !important;
}


.public-profile-body {
    padding: 24px 25px 26px;
}


.public-profile-section + .public-profile-section {
    margin-top: 25px;
}


.public-profile-bio {
    padding: 14px 16px;

    border-radius: 11px;

    background: #f6f8fa;

    color: #4a5668;

    font-size: 11px;
    line-height: 1.7;

    white-space: pre-line;
}


.public-peptide-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}


.public-peptide {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    min-height: 32px;

    padding: 0 11px;

    border-radius: 9px;

    background: #eef3ff;

    color: #3266e8;

    font-size: 9px;
    font-weight: 700;

    text-decoration: none;

    transition:
        background .15s ease,
        transform .15s ease;
}


.public-peptide:hover {
    background: #e5edff;
    transform: translateY(-1px);
}


.public-peptide i {
    font-size: 10px;
}


.public-profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;

    margin-top: 25px;
}


.public-profile-info {
    padding: 17px;

    border-radius: 12px;

    background: #f7f8fa;
}


.public-profile-value,
.public-experience {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: #445166;

    font-size: 11px;
    font-weight: 700;
}


.public-experience {
    min-height: 34px;

    padding: 0 11px;

    border-radius: 9px;

    background: #edf1f6;
}


.experience-view-great {
    background: #e8faf5;
    color: #087565;
}


.experience-view-good {
    background: #eef3ff;
    color: #3266e8;
}


.experience-view-poor {
    background: #fff0f5;
    color: #96365f;
}


.profile-not-provided {
    color: #9ba5b3;

    font-size: 10px;
    font-style: italic;
}


@media (max-width: 700px) {

    .account-identity {
        align-items: flex-start;
    }

    .profile-owner-action {
        position: absolute;
        right: 18px;
        top: 18px;
    }

    .public-profile-grid {
        grid-template-columns: 1fr;
    }

}

.nav-category-menu {
    position: relative;
}

.nav-category-arrow {
    margin-left: auto;
    font-size: 10px;
    opacity: .55;
}

.nav-category-flyout {
    position: absolute;
    top: 0;
    left: calc(100% + 12px);
    z-index:100000 !important;
    width: 245px;
    max-height: 520px;
    overflow-y: auto;

    padding: 10px;

    border-radius: 14px;

    background: #fff;

    box-shadow:
        0 20px 55px rgba(20, 31, 50, .16),
        0 2px 10px rgba(20, 31, 50, .06);

    opacity: 0;
    visibility: hidden;
    transform: translateX(-5px);

    transition:
        opacity .15s ease,
        transform .15s ease,
        visibility .15s ease;

    z-index: 1000;
}

.nav-category-menu:hover .nav-category-flyout {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.nav-category-title {
    padding: 8px 10px 9px;

    color: #9aa5b5;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .8px;
    text-transform: uppercase;
}

.nav-category-flyout a {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 9px 10px;

    border-radius: 8px;

    color: #445166;

    font-size: 10px;
    font-weight: 650;

    text-decoration: none;
}

.nav-category-flyout a:hover {
    background: #f2f5f9;
    color: #14243e;
}

.mobile-category-dialog {
    width: calc(100% - 28px);
    margin: 14px auto;
}

.mobile-category-modal {
    border: 0;
    border-radius: 20px;
    padding: 18px;

    box-shadow: 0 30px 80px rgba(10, 20, 35, .24);
}

.mobile-category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 16px;
}

.mobile-category-header span {
    color: #3266e8;

    font-size: 8px;
    font-weight: 850;

    letter-spacing: 1px;
}

.mobile-category-header h3 {
    margin: 3px 0 0;

    color: #172033;

    font-size: 18px;
    font-weight: 800;
}

.mobile-category-close {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    border: 0;
    border-radius: 10px;

    background: #f2f4f7;

    color: #5f6c80;
}

.mobile-category-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.mobile-category-grid a {
    display: flex;
    align-items: center;

    min-height: 44px;

    padding: 0 12px;

    border-radius: 10px;

    background: #f6f8fa;

    color: #445166;

    font-size: 10px;
    font-weight: 700;

    text-decoration: none;
}

.mobile-category-grid a:hover {
    background: #edf2ff;
    color: #3266e8;
}
/* =========================
   LEFT NAV
========================= */

.left-nav {
    position: sticky;
    top: 92px;

    width: 100%;
}

.left-nav ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

.left-nav .nav-item {
    position: relative;

    margin-bottom: 6px;
}

.left-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 14px;

    min-height: 48px;

    padding: 0 16px;

    border-radius: 12px;

    color: #536176;

    font-size: 13px;
    font-weight: 700;

    text-decoration: none;

    transition:
        background .15s ease,
        color .15s ease,
        transform .15s ease;
}

.left-nav .nav-link i {
    flex: 0 0 22px;

    width: 22px;

    color: #65748a;

    font-size: 18px;

    text-align: center;
}

.left-nav .nav-link:hover {
    background: #edf1f6;

    color: #17233a;

    transform: translateX(2px);
}

.left-nav .nav-link:hover i {
    color: #17233a;
}


/* ACTIVE ITEM */

.left-nav .nav-link.active {
    background: #13233c;

    color: #fff;

    box-shadow: 0 8px 22px rgba(19, 35, 60, .12);
}

.left-nav .nav-link.active i {
    color: #fff;
}


/* =========================
   CATEGORY MENU
========================= */

.nav-category-menu {
    position: relative;
}

.nav-category-arrow {
    margin-left: auto;

    font-size: 10px !important;

    opacity: .5;

    transition:
        transform .15s ease,
        opacity .15s ease;
}

.nav-category-menu:hover .nav-category-arrow {
    transform: translateX(2px);

    opacity: 1;
}


/* =========================
   FLYOUT
========================= */

.nav-category-flyout {
    position: absolute;
    z-index:10000 !important;
    top: -8px;
    left: calc(100% + 12px);

    width: 255px;
    max-height: 520px;

    padding: 10px;

    overflow-y: auto;

    border-radius: 15px;

    background: #ffffff;

    box-shadow:
        0 24px 70px rgba(20, 31, 50, .16),
        0 3px 14px rgba(20, 31, 50, .08);

    opacity: 0;
    visibility: hidden;

    transform: translateX(-7px);

    pointer-events: none;

    transition:
        opacity .14s ease,
        visibility .14s ease,
        transform .14s ease;

    z-index: 1000;
}


/* bridge the mouse gap */
.nav-category-menu::after {
    content: "";

    position: absolute;

    top: 0;
    right: -16px;

    width: 20px;
    height: 100%;
}


.nav-category-menu:hover .nav-category-flyout {
    opacity: 1;
    visibility: visible;

    transform: translateX(0);

    pointer-events: auto;
}


/* =========================
   FLYOUT TITLE
========================= */

.nav-category-title {
    padding: 8px 10px 10px;

    color: #9aa5b5;

    font-size: 8px;
    font-weight: 850;

    letter-spacing: 1px;
    text-transform: uppercase;
}


/* =========================
   FLYOUT LINKS
========================= */

.nav-category-flyout > a {
    display: flex;
    align-items: center;

    min-height: 38px;

    padding: 0 11px;

    border-radius: 9px;

    color: #4d5b70;

    font-size: 10px;
    font-weight: 700;

    text-decoration: none;

    transition:
        background .12s ease,
        color .12s ease,
        transform .12s ease;
}

.nav-category-flyout > a:hover {
    background: #f2f5f9;

    color: #17233a;

    transform: translateX(2px);
}


/* ALL POSTS A LITTLE STRONGER */

.nav-category-flyout > a:first-of-type {
    margin-bottom: 4px;

    background: #f5f7fa;

    color: #263650;

    font-weight: 800;
}


/* =========================
   SCROLLBAR
========================= */

.nav-category-flyout::-webkit-scrollbar {
    width: 6px;
}

.nav-category-flyout::-webkit-scrollbar-track {
    background: transparent;
}

.nav-category-flyout::-webkit-scrollbar-thumb {
    background: #d7dde6;

    border-radius: 10px;
}

.nav-category-flyout::-webkit-scrollbar-thumb:hover {
    background: #c5ceda;
}


/* =========================
   DESKTOP ONLY
========================= */

@media (max-width: 760px) {

    .left-nav {
        display: none;
    }

}

.trending-title {
    min-width:50px;
}

/* ========================================
   HAXBIO TOOLS
======================================== */

.tools-page {
    width: 100%;
}

.tools-header {
    margin-bottom: 24px;
    padding: 4px 2px;
}

.tools-eyebrow {
    margin-bottom: 7px;

    color: #3266e8;

    font-size: 10px;
    font-weight: 850;

    letter-spacing: 1.3px;
}

.tools-header h1 {
    margin: 0;

    color: #172033;

    font-size: 28px;
    font-weight: 800;

    letter-spacing: -.6px;
}

.tools-header p {
    max-width: 570px;

    margin: 7px 0 0;

    color: #738097;

    font-size: 13px;
    line-height: 1.6;
}


/* GRID */

.tools-grid {
    display: grid;

    grid-template-columns: 1fr;

    gap: 12px;
}


/* CARD */

.tool-card {
    position: relative;

    display: flex;
    align-items: center;

    gap: 18px;

    min-height: 126px;

    padding: 22px 24px;

    overflow: hidden;

    border: 1px solid #e5e9ef;
    border-radius: 16px;

    background: #fff;

    color: inherit;

    text-decoration: none;

    box-shadow: 0 2px 8px rgba(17, 31, 51, .025);

    transition:
        border-color .16s ease,
        box-shadow .16s ease,
        transform .16s ease;
}

.tool-card:hover {
    border-color: #d4dbe6;

    box-shadow:
        0 12px 32px rgba(17, 31, 51, .08);

    transform: translateY(-2px);
}


/* ICON */

.tool-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 54px;

    width: 54px;
    height: 54px;

    border-radius: 14px;

    background: #f0f4ff;

    color: #3266e8;

    font-size: 22px;

    transition:
        background .16s ease,
        color .16s ease,
        transform .16s ease;
}

.tool-card:hover .tool-card-icon {
    background: #13233c;

    color: #fff;

    transform: scale(1.03);
}


/* BODY */

.tool-card-body {
    flex: 1;

    min-width: 0;
}

.tool-card-body h2 {
    margin: 0;

    color: #172033;

    font-size: 15px;
    font-weight: 800;

    letter-spacing: -.15px;
}

.tool-card-body p {
    max-width: 520px;

    margin: 6px 0 0;

    color: #738097;

    font-size: 12px;
    line-height: 1.55;
}


/* TITLE + BADGE */

.tool-card-title-row {
    display: flex;
    align-items: center;

    gap: 9px;

    flex-wrap: wrap;
}

.tool-card-badge {
    padding: 4px 7px;

    border-radius: 6px;

    background: #edf8f4;

    color: #238164;

    font-size: 7px;
    font-weight: 900;

    letter-spacing: .8px;
}


/* ARROW */

.tool-card-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 34px;

    width: 34px;
    height: 34px;

    border-radius: 50%;

    color: #a3adba;

    font-size: 14px;

    transition:
        background .16s ease,
        color .16s ease,
        transform .16s ease;
}

.tool-card:hover .tool-card-arrow {
    background: #f2f5f8;

    color: #172033;

    transform: translateX(3px);
}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 760px) {

    .tools-page {
        padding-bottom: 90px;
    }

    .tools-header {
        padding: 4px 4px;
        margin-bottom: 18px;
    }

    .tools-header h1 {
        font-size: 24px;
    }

    .tool-card {
        min-height: 110px;

        gap: 14px;

        padding: 18px;

        border-radius: 14px;
    }

    .tool-card-icon {
        flex-basis: 46px;

        width: 46px;
        height: 46px;

        font-size: 19px;
    }

    .tool-card-body h2 {
        font-size: 14px;
    }

    .tool-card-body p {
        font-size: 11px;
    }

    .tool-card-arrow {
        flex-basis: 28px;

        width: 28px;
        height: 28px;
    }

}

/* ========================================
   COMPARE PEPTIDES
======================================== */

.compare-page {
    width: 100%;
}


/* SELECTOR CARD */

.compare-selector-card {
    margin-bottom: 18px;

    padding: 18px;

    border: 1px solid #e4e9ef;
    border-radius: 16px;

    background: #fff;
}

.compare-selector-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 14px;
}

.compare-selector-header > div {
    display: flex;
    align-items: baseline;
    gap: 9px;
}

.compare-selector-header strong {
    color: #172033;

    font-size: 12px;
    font-weight: 800;
}

.compare-selector-header span {
    color: #909bab;

    font-size: 9px;
    font-weight: 600;
}

.compare-clear {
    display: flex;
    align-items: center;
    gap: 3px;

    color: #8490a1;

    font-size: 9px;
    font-weight: 700;

    text-decoration: none;
}

.compare-clear:hover {
    color: #172033;
}


/* SELECTS */

.compare-select-grid {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 9px;
}

.compare-select-wrap {
    position: relative;

    display: flex;
    align-items: center;
}

.compare-select-number {
    position: absolute;

    left: 13px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 21px;
    height: 21px;

    border-radius: 6px;

    background: #edf2ff;

    color: #3266e8;

    font-size: 8px;
    font-weight: 900;

    pointer-events: none;

    z-index: 2;
}

.compare-select {
    width: 100%;
    height: 45px;

    padding: 0 38px 0 43px;

    appearance: none;

    border: 1px solid #e0e5ec;
    border-radius: 10px;

    outline: none;

    background: #f8fafc;

    color: #26344a;

    font-size: 10px;
    font-weight: 700;

    cursor: pointer;

    transition:
        border-color .15s ease,
        background .15s ease,
        box-shadow .15s ease;
}

.compare-select:hover {
    background: #fff;

    border-color: #ccd5e1;
}

.compare-select:focus {
    background: #fff;

    border-color: #3266e8;

    box-shadow: 0 0 0 3px rgba(50, 102, 232, .08);
}

.compare-select-wrap > i {
    position: absolute;

    right: 13px;

    color: #98a3b2;

    font-size: 9px;

    pointer-events: none;
}


/* ========================================
   EMPTY
======================================== */

.compare-empty {
    padding: 68px 25px;

    border: 1px dashed #dce2e9;
    border-radius: 16px;

    background: #fafbfd;

    text-align: center;
}

.compare-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;

    margin: 0 auto 14px;

    border-radius: 14px;

    background: #edf2ff;

    color: #3266e8;

    font-size: 20px;
}

.compare-empty h2 {
    margin: 0;

    color: #172033;

    font-size: 15px;
    font-weight: 800;
}

.compare-empty p {
    max-width: 380px;

    margin: 7px auto 0;

    color: #7c8899;

    font-size: 11px;
    line-height: 1.55;
}


/* ========================================
   TABLE
======================================== */

.comparison-scroll {
    width: 100%;

    overflow-x: auto;

    border: 1px solid #e4e9ef;
    border-radius: 16px;

    background: #fff;
}

.comparison-table {
    min-width: 650px;
}

.comparison-row {
    display: grid;

    grid-template-columns:
        130px
        repeat(var(--compare-count), minmax(180px, 1fr));

    border-bottom: 1px solid #edf0f4;
}

.comparison-row:last-child {
    border-bottom: 0;
}


/* LABEL COLUMN */

.comparison-label {
    padding: 18px 16px;

    background: #fafbfd;

    color: #8a96a7;

    font-size: 8px;
    font-weight: 850;

    letter-spacing: .45px;
    text-transform: uppercase;
}


/* VALUE */

.comparison-value {
    padding: 18px;

    border-left: 1px solid #edf0f4;

    color: #4e5c70;

    font-size: 10px;
    font-weight: 600;
    line-height: 1.6;
}


/* HEADER */

.comparison-heading-row {
    border-bottom: 1px solid #e4e9ef;
}

.comparison-heading {
    min-height: 105px;

    padding: 18px;

    border-left: 1px solid #edf0f4;
}

.comparison-avatar {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    margin-bottom: 10px;

    border-radius: 9px;

    background: #13233c;

    color: #fff;

    font-size: 12px;
    font-weight: 900;
}

.comparison-heading strong {
    display: block;

    color: #172033;

    font-size: 13px;
    font-weight: 850;
}

.comparison-heading span {
    display: block;

    margin-top: 3px;

    color: #8995a6;

    font-size: 8px;
    font-weight: 650;
}


/* PILLS */

.comparison-pill,
.comparison-status {
    display: inline-flex;

    padding: 5px 8px;

    border-radius: 7px;

    background: #f0f4ff;

    color: #3266e8;

    font-size: 8px;
    font-weight: 800;
}

.comparison-status {
    background: #edf8f4;

    color: #238164;
}


/* MOLECULAR DATA */

.comparison-mono {
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-size: 9px;
}


/* LONG CONTENT */

.comparison-long-row .comparison-value {
    font-weight: 500;

    line-height: 1.7;
}


/* PROFILE */

.comparison-profile-row .comparison-label {
    background: #fff;
}

.comparison-profile-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    color: #3266e8;

    font-size: 9px;
    font-weight: 800;

    text-decoration: none;
}

.comparison-profile-link:hover {
    color: #1e4fc9;
}

.comparison-profile-link i {
    font-size: 8px;

    transition: transform .15s ease;
}

.comparison-profile-link:hover i {
    transform: translateX(2px);
}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 760px) {

    .compare-page {
        padding-bottom: 90px;
    }

    .compare-select-grid {
        grid-template-columns: 1fr;
    }

    .compare-selector-card {
        padding: 14px;

        border-radius: 14px;
    }

    .comparison-scroll {
        border-radius: 14px;
    }

    .comparison-row {
        grid-template-columns:
            105px
            repeat(var(--compare-count), 180px);
    }

    .comparison-label {
        padding: 15px 12px;
    }

    .comparison-value,
    .comparison-heading {
        padding: 15px;
    }

}

/* ========================================
   ADMIN
======================================== */

.admin-page {
    width: 100%;
}

.admin-grid {
    display: grid;
    gap: 12px;
}

.admin-card {
    display: flex;
    align-items: center;
    gap: 16px;

    padding: 20px;

    border: 1px solid #e4e9ef;
    border-radius: 15px;

    background: #fff;

    color: inherit;
    text-decoration: none;

    transition: .15s ease;
}

.admin-card:hover {
    transform: translateY(-2px);

    border-color: #d4dce7;

    box-shadow: 0 12px 30px rgba(20, 31, 50, .07);
}

.admin-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 50px;
    height: 50px;

    flex: 0 0 50px;

    border-radius: 13px;

    background: #edf2ff;

    color: #3266e8;

    font-size: 20px;
}

.admin-card-body {
    flex: 1;
}

.admin-card-body h2 {
    margin: 0;

    color: #172033;

    font-size: 15px;
    font-weight: 800;
}

.admin-card-body p {
    margin: 5px 0;

    color: #758196;

    font-size: 11px;
}

.admin-card-body span {
    color: #9aa4b2;

    font-size: 8px;
    font-weight: 800;

    text-transform: uppercase;
}

.admin-card-arrow {
    color: #9aa4b2;
}


/* SOURCE ADMIN */

.admin-source-card {
    margin-bottom: 15px;

    padding: 18px;

    border: 1px solid #e4e9ef;
    border-radius: 15px;

    background: #fff;
}

.admin-section-title {
    color: #172033;

    font-size: 12px;
    font-weight: 800;
}

.admin-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 12px;
}

.admin-section-header span {
    color: #929dad;

    font-size: 9px;
    font-weight: 800;
}

.admin-source-form {
    margin-top: 14px;
}

.admin-form-row {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;
}

.admin-field {
    margin-bottom: 10px;
}

.admin-field label {
    display: block;

    margin-bottom: 5px;

    color: #738097;

    font-size: 8px;
    font-weight: 850;

    text-transform: uppercase;
    letter-spacing: .4px;
}

.admin-field input,
.admin-field textarea {
    width: 100%;

    padding: 11px 12px;

    border: 1px solid #e1e6ed;
    border-radius: 9px;

    background: #f8fafc;

    color: #172033;

    font-size: 10px;

    outline: none;
}

.admin-field input:focus,
.admin-field textarea:focus {
    border-color: #3266e8;

    background: #fff;

    box-shadow: 0 0 0 3px rgba(50, 102, 232, .08);
}

.admin-check-row {
    display: flex;
    gap: 18px;

    margin: 3px 0 14px;
}

.admin-check-row label {
    display: flex;
    align-items: center;
    gap: 6px;

    color: #566378;

    font-size: 9px;
    font-weight: 700;
}

.admin-primary-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 10px 14px;

    border: 0;
    border-radius: 9px;

    background: #13233c;

    color: #fff;

    font-size: 9px;
    font-weight: 800;

    cursor: pointer;
}

.admin-source-list {
    display: flex;
    flex-direction: column;
}

.admin-source-item {
    display: flex;
    align-items: center;

    gap: 12px;

    padding: 13px 0;

    border-top: 1px solid #edf0f4;
}

.admin-source-logo {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    overflow: hidden;

    border-radius: 10px;

    background: #13233c;

    color: #fff;

    font-size: 12px;
    font-weight: 900;
}

.admin-source-logo img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.admin-source-info {
    flex: 1;
    min-width: 0;
}

.admin-source-name {
    display: flex;
    align-items: center;
    gap: 6px;

    color: #172033;

    font-size: 11px;
    font-weight: 800;
}

.admin-source-meta {
    display: flex;
    gap: 10px;

    margin-top: 4px;

    color: #8995a6;

    font-size: 8px;
}

.admin-source-meta a {
    color: #68809d;

    text-decoration: none;
}

.admin-verified {
    color: #3266e8;

    font-size: 7px;
}

.admin-inactive {
    padding: 3px 5px;

    border-radius: 5px;

    background: #f5eeee;

    color: #9f5050;

    font-size: 6px;
}

.admin-source-actions {
    display: flex;
    gap: 6px;
}

.admin-icon-button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 31px;
    height: 31px;

    border: 1px solid #e3e8ee;
    border-radius: 8px;

    background: #fff;

    color: #68768a;

    font-size: 11px;

    cursor: pointer;
}

.admin-delete-button:hover {
    border-color: #edd7d7;

    background: #fff4f4;

    color: #b24646;
}


/* ========================================
   SOURCE DIRECTORY
======================================== */

.source-grid {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 12px;
}

.source-card {
    display: block;

    padding: 18px;

    border: 1px solid #e4e9ef;
    border-radius: 15px;

    background: #fff;

    color: inherit;

    text-decoration: none;

    transition:
        transform .15s ease,
        border-color .15s ease,
        box-shadow .15s ease;
}

.source-card:hover {
    transform: translateY(-2px);

    border-color: #d4dbe6;

    box-shadow: 0 12px 30px rgba(20, 31, 50, .07);
}

.source-card-top {
    display: flex;
    align-items: center;

    gap: 11px;
}

.source-logo {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    flex: 0 0 44px;

    overflow: hidden;

    border-radius: 11px;

    background: #13233c;

    color: #fff;

    font-size: 14px;
    font-weight: 900;
}

.source-logo img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.source-card-heading {
    min-width: 0;
}

.source-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.source-title-row h2 {
    margin: 0;

    color: #172033;

    font-size: 13px;
    font-weight: 850;
}

.source-verified {
    color: #3266e8;

    font-size: 11px;
}

.source-country {
    display: block;

    margin-top: 3px;

    color: #8b97a8;

    font-size: 8px;
}

.source-description {
    margin: 13px 0 15px;

    color: #69768a;

    font-size: 9px;
    line-height: 1.55;
}

.source-overall {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    padding: 13px 0;

    border-top: 1px solid #edf0f4;
    border-bottom: 1px solid #edf0f4;
}

.source-score {
    color: #172033;

    font-size: 21px;
    font-weight: 850;
}

.source-stars {
    margin-top: 2px;

    color: #d9a928;

    font-size: 9px;
}

.source-review-count {
    color: #909bab;

    font-size: 8px;
    font-weight: 700;
}

.source-rating-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 8px 14px;

    padding-top: 13px;
}

.source-rating-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    color: #7b8798;

    font-size: 8px;
}

.source-rating-row strong {
    color: #344158;

    font-size: 9px;
    font-weight: 850;
}

.source-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 15px;

    color: #3266e8;

    font-size: 8px;
    font-weight: 850;
}

@media (max-width: 760px) {

    .admin-form-row,
    .source-grid {
        grid-template-columns: 1fr;
    }

}

/* ========================================
   SOURCE PROFILE
======================================== */

.source-page {
    width: 100%;
}

.source-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    margin-bottom: 12px;

    color: #7e8999;

    font-size: 9px;
    font-weight: 750;

    text-decoration: none;
}

.source-back:hover {
    color: #172033;
}


/* PROFILE */

.source-profile-card {
    margin-bottom: 22px;

    padding: 22px;

    border: 1px solid #e4e9ef;
    border-radius: 16px;

    background: #fff;
}

.source-profile-top {
    display: flex;
    align-items: center;

    gap: 14px;
}

.source-profile-logo {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    flex: 0 0 58px;

    overflow: hidden;

    border-radius: 14px;

    background: #13233c;

    color: #fff;

    font-size: 19px;
    font-weight: 900;
}

.source-profile-logo img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.source-profile-heading {
    flex: 1;

    min-width: 0;
}

.source-profile-title {
    display: flex;
    align-items: center;

    gap: 7px;
}

.source-profile-title h1 {
    margin: 0;

    color: #172033;

    font-size: 21px;
    font-weight: 850;

    letter-spacing: -.35px;
}

.source-profile-country {
    margin-top: 4px;

    color: #8793a4;

    font-size: 9px;
}

.source-website-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 10px 13px;

    border-radius: 9px;

    background: #13233c;

    color: #fff;

    font-size: 8px;
    font-weight: 800;

    text-decoration: none;
}

.source-website-button:hover {
    background: #1c3151;

    color: #fff;
}

.source-profile-description {
    max-width: 620px;

    margin: 17px 0 0;

    color: #657286;

    font-size: 10px;
    line-height: 1.65;
}


/* RATINGS */

.source-profile-ratings {
    display: grid;

    grid-template-columns: 180px 1fr;

    gap: 25px;

    margin-top: 20px;
    padding-top: 20px;

    border-top: 1px solid #edf0f4;
}

.source-big-rating {
    display: flex;
    align-items: center;

    gap: 12px;
}

.source-big-score {
    color: #172033;

    font-size: 38px;
    font-weight: 850;

    letter-spacing: -1px;
}

.source-stars-large {
    font-size: 11px;
}

.source-rating-count {
    margin-top: 4px;

    color: #909baa;

    font-size: 8px;
}


/* BREAKDOWN */

.source-profile-breakdown {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px 20px;
}

.source-breakdown-item {
    display: grid;

    grid-template-columns: 1fr auto;
    align-items: center;

    gap: 4px 10px;
}

.source-breakdown-item > span {
    color: #707d90;

    font-size: 8px;
    font-weight: 700;
}

.source-breakdown-item strong {
    color: #27364c;

    font-size: 9px;
    font-weight: 850;
}

.source-rating-bar {
    grid-column: 1 / -1;

    height: 4px;

    overflow: hidden;

    border-radius: 10px;

    background: #edf0f4;
}

.source-rating-bar span {
    display: block;

    height: 100%;

    border-radius: inherit;

    background: #3266e8;
}


/* ========================================
   REVIEWS
======================================== */

.source-reviews-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    margin-bottom: 12px;
}

.source-reviews-header h2 {
    margin: 2px 0 0;

    color: #172033;

    font-size: 18px;
    font-weight: 850;
}

.source-review-button {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    padding: 9px 12px;

    border: 0;
    border-radius: 9px;

    background: #13233c;

    color: #fff;

    font-size: 8px;
    font-weight: 800;

    text-decoration: none;

    cursor: pointer;
}

.source-review-button:hover {
    color: #fff;

    background: #1c3151;
}

.source-reviews {
    display: flex;
    flex-direction: column;

    gap: 9px;
}

.source-review {
    padding: 17px;

    border: 1px solid #e5e9ef;
    border-radius: 14px;

    background: #fff;
}

.source-review-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.source-review-user {
    display: flex;
    align-items: center;

    gap: 9px;

    color: inherit;

    text-decoration: none;
}

.source-review-avatar {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 35px;
    height: 35px;

    overflow: hidden;

    border-radius: 50%;

    background: #13233c;

    color: #fff;

    font-size: 10px;
    font-weight: 850;
}

.source-review-avatar img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.source-review-user strong {
    display: block;

    color: #27354a;

    font-size: 9px;
    font-weight: 800;
}

.source-review-user span {
    display: block;

    margin-top: 1px;

    color: #96a0af;

    font-size: 7px;
}

.source-review-score {
    display: flex;
    align-items: center;

    gap: 4px;

    color: #27354a;

    font-size: 9px;
    font-weight: 850;
}

.source-review-score i {
    color: #d9a928;
}

.source-review-metrics {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    margin-top: 13px;
}

.source-review-metrics span {
    padding: 5px 7px;

    border-radius: 6px;

    background: #f5f7fa;

    color: #7d899a;

    font-size: 7px;
    font-weight: 700;
}

.source-review-metrics strong {
    margin-left: 3px;

    color: #344258;
}

.source-review-text {
    margin: 13px 0 0;

    color: #566378;

    font-size: 10px;
    line-height: 1.65;
}

.source-review-date {
    margin-top: 10px;

    color: #a0a9b6;

    font-size: 7px;
}


/* EMPTY */

.source-no-reviews {
    padding: 45px 20px;

    border: 1px dashed #dce2e9;
    border-radius: 14px;

    background: #fafbfd;

    text-align: center;
}

.source-no-reviews > div {
    color: #c3a04a;

    font-size: 20px;
}

.source-no-reviews h3 {
    margin: 8px 0 0;

    color: #172033;

    font-size: 13px;
    font-weight: 800;
}

.source-no-reviews p {
    margin: 4px 0 0;

    color: #8995a5;

    font-size: 9px;
}


/* ========================================
   REVIEW MODAL
======================================== */

.source-review-modal {
    overflow: hidden;

    border: 0;
    border-radius: 16px;

    box-shadow: 0 24px 80px rgba(16, 28, 46, .2);
}

.source-review-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 20px;

    border-bottom: 1px solid #edf0f4;
}

.source-review-modal-header span {
    color: #3266e8;

    font-size: 7px;
    font-weight: 900;

    letter-spacing: .8px;
}

.source-review-modal-header h2 {
    margin: 2px 0 0;

    color: #172033;

    font-size: 17px;
    font-weight: 850;
}

.source-review-modal-header button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 31px;
    height: 31px;

    border: 0;
    border-radius: 8px;

    background: #f4f6f8;

    color: #758195;

    cursor: pointer;
}

.source-review-fields {
    padding: 20px;
}

.source-review-field {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 10px 0;

    border-bottom: 1px solid #f0f2f5;
}

.source-review-field > label {
    color: #566378;

    font-size: 9px;
    font-weight: 750;
}


/* STAR INPUT */

.source-star-input {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;

    gap: 3px;
}

.source-star-input input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}

.source-star-input label {
    color: #dce1e7;

    font-size: 17px;

    cursor: pointer;

    transition:
        color .1s ease,
        transform .1s ease;
}

.source-star-input label:hover,
.source-star-input label:hover ~ label,
.source-star-input input:checked ~ label {
    color: #d9a928;
}

.source-star-input label:hover {
    transform: scale(1.08);
}


/* REVIEW TEXT */

.source-review-comment {
    margin-top: 17px;
}

.source-review-comment > label {
    display: block;

    margin-bottom: 6px;

    color: #566378;

    font-size: 8px;
    font-weight: 800;
}

.source-review-comment > label span {
    color: #a1aab7;

    font-weight: 600;
}

.source-review-comment textarea {
    width: 100%;

    padding: 11px;

    resize: vertical;

    border: 1px solid #e1e6ed;
    border-radius: 9px;

    outline: none;

    background: #f8fafc;

    color: #27354a;

    font-size: 9px;
}

.source-review-comment textarea:focus {
    border-color: #3266e8;

    background: #fff;

    box-shadow: 0 0 0 3px rgba(50, 102, 232, .08);
}


/* MODAL FOOTER */

.source-review-modal-footer {
    display: flex;
    justify-content: flex-end;

    gap: 7px;

    padding: 14px 20px;

    border-top: 1px solid #edf0f4;

    background: #fafbfd;
}

.source-review-cancel,
.source-review-submit {
    padding: 9px 13px;

    border-radius: 8px;

    font-size: 8px;
    font-weight: 800;

    cursor: pointer;
}

.source-review-cancel {
    border: 1px solid #dfe4ea;

    background: #fff;

    color: #687589;
}

.source-review-submit {
    border: 0;

    background: #13233c;

    color: #fff;
}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 760px) {

    .source-page {
        padding-bottom: 90px;
    }

    .source-profile-top {
        align-items: flex-start;

        flex-wrap: wrap;
    }

    .source-profile-logo {
        width: 50px;
        height: 50px;

        flex-basis: 50px;
    }

    .source-website-button {
        width: 100%;

        justify-content: center;
    }

    .source-profile-ratings {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .source-profile-breakdown {
        grid-template-columns: 1fr 1fr;
    }

}

/* ========================================
   ADMIN CONTENT MANAGEMENT
======================================== */

.admin-page-header {
    margin-bottom: 18px;
}

.admin-page-header h1 {
    margin: 3px 0 0;

    color: #172033;

    font-size: 22px;
    font-weight: 850;
}


/* POSTS / DISCUSSIONS */

.admin-content-list,
.admin-user-list {
    display: flex;
    flex-direction: column;

    gap: 8px;
}

.admin-content-item,
.admin-user-item {
    display: flex;
    align-items: center;

    gap: 14px;

    padding: 15px;

    border: 1px solid #e5e9ef;
    border-radius: 12px;

    background: #fff;
}

.admin-content-main {
    flex: 1;

    min-width: 0;
}

.admin-content-title {
    color: #27354a;

    font-size: 10px;
    font-weight: 850;
}

.admin-content-meta {
    margin-top: 3px;

    color: #929dac;

    font-size: 7px;
}

.admin-content-preview {
    margin-top: 8px;

    color: #687589;

    font-size: 9px;
    line-height: 1.5;
}


/* BUTTONS */

.admin-danger-button,
.admin-secondary-button {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    padding: 8px 10px;

    border-radius: 7px;

    font-size: 7px;
    font-weight: 800;

    cursor: pointer;
}

.admin-danger-button {
    border: 1px solid #efcfd3;

    background: #fff5f6;

    color: #a83d48;
}

.admin-danger-button:hover {
    background: #a83d48;

    color: #fff;
}

.admin-secondary-button {
    border: 1px solid #dfe4ea;

    background: #f7f9fb;

    color: #566378;
}


/* USERS */

.admin-user-avatar {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    border-radius: 50%;

    background: #13233c;

    color: #fff;

    font-size: 11px;
    font-weight: 850;
}

.admin-user-info {
    flex: 1;

    min-width: 0;
}

.admin-user-name {
    display: flex;
    align-items: center;

    gap: 6px;

    color: #27354a;

    font-size: 10px;
    font-weight: 850;
}

.admin-user-meta {
    margin-top: 3px;

    color: #929dac;

    font-size: 7px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-user-actions {
    display: flex;

    gap: 6px;
}

.admin-role-badge,
.admin-blocked-badge {
    padding: 3px 5px;

    border-radius: 5px;

    font-size: 6px;
    font-weight: 900;
}

.admin-role-badge {
    background: #edf2ff;

    color: #3266e8;
}

.admin-blocked-badge {
    background: #fff0f1;

    color: #a83d48;
}


@media (max-width: 760px) {

    .admin-content-item,
    .admin-user-item {
        align-items: flex-start;

        flex-wrap: wrap;
    }

    .admin-content-item form {
        width: 100%;
    }

    .admin-content-item .admin-danger-button {
        width: 100%;

        justify-content: center;
    }

    .admin-user-actions {
        width: 100%;

        padding-left: 52px;
    }

}
.search-page {
    width: 100%;
}

.search-section {
    margin-bottom: 24px;
}

.search-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 8px;

    color: #7d899a;

    font-size: 8px;
    font-weight: 850;

    text-transform: uppercase;
    letter-spacing: .6px;
}

.search-results {
    display: flex;
    flex-direction: column;

    gap: 7px;
}

.search-result {
    display: flex;
    align-items: center;

    gap: 12px;

    padding: 14px;

    border: 1px solid #e4e9ef;
    border-radius: 12px;

    background: #fff;

    color: inherit;

    text-decoration: none;
}

.search-result:hover {
    border-color: #ccd5e0;

    background: #fafbfd;
}

.search-result-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    flex: 0 0 36px;

    border-radius: 9px;

    background: #f0f4f9;

    color: #3266e8;

    font-size: 13px;
}

.search-result-body {
    flex: 1;

    min-width: 0;
}

.search-result h3 {
    margin: 0;

    color: #25344a;

    font-size: 10px;
    font-weight: 850;
}

.search-result-meta {
    margin-top: 3px;

    color: #929dad;

    font-size: 7px;
}

.search-result p {
    margin: 6px 0 0;

    color: #687589;

    font-size: 9px;
    line-height: 1.5;
}

.search-result > .bi-chevron-right {
    color: #acb5c2;

    font-size: 9px;
}

.search-empty {
    padding: 60px 20px;

    text-align: center;

    color: #919baa;
}

.search-empty > i {
    font-size: 25px;
}

.search-empty h3 {
    margin: 10px 0 3px;

    color: #27354a;

    font-size: 13px;
    font-weight: 850;
}

.search-empty p {
    margin: 0;

    font-size: 9px;
}

/* ========================================
   PEPTIDE PROFILE
======================================== */

.peptide-page {
    width: 100%;
}

.peptide-profile-header {
    padding: 24px;

    border: 1px solid #e4e9ef;
    border-radius: 16px;

    background: #fff;

    margin-bottom: 12px;
}

.peptide-profile-top {
    display: flex;
    align-items: center;

    gap: 15px;
}

.peptide-profile-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 60px;
    height: 60px;

    flex: 0 0 60px;

    overflow: hidden;

    border-radius: 15px;

    background: #13233c;

    color: #fff;

    font-size: 22px;
}

.peptide-profile-icon img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.peptide-profile-heading h1 {
    margin: 2px 0 0;

    color: #172033;

    font-size: 25px;
    font-weight: 900;

    letter-spacing: -.6px;
}

.peptide-aliases {
    margin-top: 3px;

    color: #8b96a6;

    font-size: 8px;
}

.peptide-summary {
    max-width: 650px;

    margin: 18px 0 0;

    color: #5f6d81;

    font-size: 10px;
    line-height: 1.7;
}

.peptide-status-row {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;

    margin-top: 16px;
}

.peptide-tag {
    display: inline-flex;
    align-items: center;

    gap: 4px;

    padding: 5px 8px;

    border-radius: 6px;

    background: #f1f4f8;

    color: #5f6d81;

    font-size: 7px;
    font-weight: 800;
}


/* SECTIONS */

.peptide-section {
    padding: 20px;

    margin-bottom: 10px;

    border: 1px solid #e4e9ef;
    border-radius: 14px;

    background: #fff;
}

.peptide-section-heading {
    margin-bottom: 15px;
}

.peptide-section-heading > span {
    color: #3266e8;

    font-size: 7px;
    font-weight: 900;

    letter-spacing: .7px;
}

.peptide-section-heading h2 {
    margin: 2px 0 0;

    color: #172033;

    font-size: 15px;
    font-weight: 850;
}


/* DATA */

.peptide-data-grid {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 8px;
}

.peptide-data-item {
    padding: 12px;

    border-radius: 9px;

    background: #f7f9fb;
}

.peptide-data-item span {
    display: block;

    margin-bottom: 4px;

    color: #929dac;

    font-size: 7px;
    font-weight: 750;

    text-transform: uppercase;
}

.peptide-data-item strong {
    color: #354359;

    font-size: 9px;
    font-weight: 800;
}

.peptide-sequence {
    margin-top: 10px;

    padding: 12px;

    border: 1px solid #e9edf2;
    border-radius: 9px;
}

.peptide-sequence > span {
    display: block;

    margin-bottom: 6px;

    color: #929dac;

    font-size: 7px;
    font-weight: 800;

    text-transform: uppercase;
}

.peptide-sequence > div {
    overflow-wrap: anywhere;

    color: #344258;

    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
                 "Liberation Mono", monospace;

    font-size: 9px;
    line-height: 1.6;
}


/* TEXT */

.peptide-text {
    color: #566378;

    font-size: 10px;
    line-height: 1.75;
}


/* REGULATORY */

.peptide-regulatory {
    display: flex;

    gap: 11px;

    padding: 13px;

    border-radius: 9px;

    background: #f7f9fb;
}

.peptide-regulatory > i {
    color: #65748a;

    font-size: 15px;
}

.peptide-regulatory strong {
    color: #354359;

    font-size: 9px;
}

.peptide-regulatory p {
    margin: 3px 0 0;

    color: #7c8899;

    font-size: 8px;
}


/* RELATED POSTS */

.peptide-related-posts {
    display: flex;
    flex-direction: column;

    gap: 6px;
}

.peptide-related-post {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding: 12px;

    border: 1px solid #e8ecf1;
    border-radius: 9px;

    color: inherit;

    text-decoration: none;
}

.peptide-related-post:hover {
    background: #fafbfd;

    border-color: #d6dde6;
}

.peptide-related-category {
    color: #3266e8;

    font-size: 6px;
    font-weight: 850;

    text-transform: uppercase;
}

.peptide-related-post h3 {
    margin: 3px 0 0;

    color: #27354a;

    font-size: 10px;
    font-weight: 850;
}

.peptide-related-post p {
    margin: 5px 0 0;

    color: #6c788a;

    font-size: 8px;
    line-height: 1.5;
}

.peptide-related-meta {
    margin-top: 6px;

    color: #9aa4b2;

    font-size: 7px;
}

.peptide-related-post > i {
    color: #aab3bf;

    font-size: 9px;
}


/* EMPTY */

.peptide-community-empty {
    display: flex;
    align-items: center;

    gap: 10px;

    padding: 15px;

    border-radius: 9px;

    background: #f7f9fb;
}

.peptide-community-empty > i {
    color: #8290a3;

    font-size: 17px;
}

.peptide-community-empty strong {
    display: block;

    color: #354359;

    font-size: 9px;
}

.peptide-community-empty span {
    display: block;

    margin-top: 2px;

    color: #8d98a7;

    font-size: 8px;
}


/* DISCLAIMER */

.peptide-disclaimer {
    display: flex;

    gap: 8px;

    padding: 11px 14px;

    color: #8792a2;
}

.peptide-disclaimer i {
    margin-top: 1px;

    font-size: 10px;
}

.peptide-disclaimer p {
    margin: 0;

    font-size: 7px;
    line-height: 1.6;
}


@media (max-width: 760px) {

    .peptide-profile-header {
        padding: 18px;
    }

    .peptide-data-grid {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   NOTIFICATIONS
========================================================= */

.notifications-page {
    width: 100%;
}


/* Header */

.notifications-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 18px;
}

.notifications-header h1 {
    margin: 2px 0 4px;

    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.7px;

    color: #172033;
}

.notifications-header p {
    margin: 0;

    color: #738097;
    font-size: 14px;
}

.section-eyebrow {
    color: #3266e8;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 1.2px;
}

.notifications-header-icon {
    width: 44px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: #eef3ff;
    color: #3266e8;

    font-size: 19px;
}


/* Main panel */

.notifications-panel {
    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e4e8ef;
    border-radius: 14px;

    box-shadow:
        0 1px 2px rgba(18, 35, 60, 0.03),
        0 6px 20px rgba(18, 35, 60, 0.03);
}


/* Individual notification */

.notification-item {
    position: relative;

    display: flex;
    align-items: center;

    gap: 13px;

    min-height: 82px;

    padding: 15px 16px;

    border-bottom: 1px solid #edf0f4;

    transition:
        background 0.15s ease,
        border-color 0.15s ease;
}

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

.notification-item:hover {
    background: #fafbfd;
}


/* Notification was unread when page loaded */

.notification-item-unread {
    background: #f8faff;
}

.notification-item-unread::before {
    content: "";

    position: absolute;

    left: 0;
    top: 18px;
    bottom: 18px;

    width: 3px;

    border-radius: 0 4px 4px 0;

    background: #3266e8;
}


/* Avatar */

.notification-avatar {
    width: 44px;
    height: 44px;

    flex: 0 0 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border-radius: 50%;

    background: #edf1f7;

    text-decoration: none;
}

.notification-avatar img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.notification-avatar span {
    color: #13233c;

    font-size: 15px;
    font-weight: 800;
}


/* Body */

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

.notification-text {
    color: #39455a;

    font-size: 14px;
    line-height: 1.45;
}

.notification-user {
    color: #172033;

    font-weight: 750;

    text-decoration: none;
}

.notification-user:hover {
    color: #3266e8;
}


/* Metadata */

.notification-meta {
    display: flex;
    align-items: center;

    gap: 7px;

    margin-top: 6px;

    color: #8a95a6;

    font-size: 12px;
}

.notification-type {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    color: #6c788c;

    font-weight: 600;
}

.notification-type i {
    font-size: 11px;
}

.notification-dot {
    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: #b9c1cc;
}


/* Right arrow */

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

.notification-open {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #e2e7ee;
    border-radius: 9px;

    color: #667388;

    text-decoration: none;

    transition:
        background 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease;
}

.notification-open:hover {
    background: #13233c;
    border-color: #13233c;

    color: #ffffff;
}

.notification-open-muted {
    border-color: transparent;
    color: #c0c7d1;
}


/* Empty state */

.notifications-empty {
    padding: 70px 30px;

    text-align: center;
}

.notifications-empty-icon {
    width: 58px;
    height: 58px;

    margin: 0 auto 15px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 16px;

    background: #f0f3f8;

    color: #647188;

    font-size: 23px;
}

.notifications-empty h3 {
    margin: 0 0 6px;

    color: #172033;

    font-size: 18px;
    font-weight: 800;
}

.notifications-empty p {
    margin: 0 0 18px;

    color: #738097;

    font-size: 13px;
}

.notifications-back {
    display: inline-flex;
    align-items: center;

    padding: 9px 14px;

    border: 1px solid #dce2ea;
    border-radius: 9px;

    color: #172033;

    font-size: 13px;
    font-weight: 700;

    text-decoration: none;
}

.notifications-back:hover {
    background: #f4f6f8;
}


/* Mobile */

@media (max-width: 760px) {

    .notifications-header {
        padding: 0 4px;
    }

    .notifications-header-icon {
        display: none;
    }

    .notification-item {
        padding: 14px 12px;
    }

    .notification-action {
    }

    .notification-avatar {
        width: 40px;
        height: 40px;

        flex-basis: 40px;
    }

}
.post-body-title-style {
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

.post-body-title-style::placeholder {
    font-size: 1.45rem;
    font-weight: 700;
}

/* =========================================================
   HAXBIO FOOTER
   ========================================================= */

.hax-footer {
    margin-top: 80px;
    padding: 64px 0 28px;
    background: #0d1117;
    color: #aab2bd;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.hax-footer-brand {
    display: inline-block;
    margin-bottom: 18px;
    color: #fff;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -1px;
    text-decoration: none;
}

.hax-footer-brand span {
    color: #32b7a6;
}

.hax-footer-description {
    max-width: 390px;
    margin-bottom: 22px;
    color: #8f99a6;
    font-size: 14px;
    line-height: 1.7;
}

.hax-footer-email {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #d8dee7;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.hax-footer-email:hover {
    color: #fff;
}

.hax-footer h6 {
    margin-bottom: 18px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.hax-footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.hax-footer li {
    margin-bottom: 11px;
}

.hax-footer li a {
    color: #8f99a6;
    font-size: 14px;
    text-decoration: none;
    transition: color .15s ease;
}

.hax-footer li a:hover {
    color: #fff;
}

.hax-footer-divider {
    height: 1px;
    margin: 42px 0 28px;
    background: rgba(255, 255, 255, 0.08);
}

.hax-footer-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 1050px;
}

.hax-footer-disclaimer i {
    margin-top: 2px;
    color: #687382;
}

.hax-footer-disclaimer p {
    margin: 0;
    color: #707b88;
    font-size: 12px;
    line-height: 1.7;
}

.hax-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    color: #65707c;
    font-size: 12px;
}

.hax-footer-bottom-links {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
}

.hax-footer-bottom-links a {
    color: #788390;
    text-decoration: none;
}

.hax-footer-bottom-links a:hover {
    color: #fff;
}

@media (max-width: 767.98px) {

    .hax-footer {
        margin-top: 50px;
        padding-top: 48px;
    }

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

    .hax-footer-bottom-links {
        gap: 15px;
    }
}


/* =========================================================
   CONTACT PAGE
   ========================================================= */

.contact-page {
    padding: 70px 0 90px;
}

.contact-hero {
    max-width: 720px;
    margin: 0 auto 50px;
}

.contact-eyebrow {
    display: inline-block;
    margin-bottom: 10px;
    color: #0f8f80;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.contact-hero h1 {
    margin-bottom: 14px;
    font-size: clamp(38px, 5vw, 58px);
    font-weight: 800;
    letter-spacing: -2px;
}

.contact-hero p {
    margin: 0;
    color: #667085;
    font-size: 18px;
    line-height: 1.7;
}

.contact-card {
    height: 100%;
    padding: 34px;
    background: #fff;
    border: 1px solid #e7e9ee;
    border-radius: 18px;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.05);
}

.contact-info-card h3 {
    margin-bottom: 14px;
    font-size: 24px;
    font-weight: 700;
}

.contact-card-text {
    margin-bottom: 30px;
    color: #667085;
    line-height: 1.7;
}

.contact-info-item {
    display: flex;
    gap: 14px;
    margin-bottom: 24px;
}

.contact-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 12px;
    background: #eef8f6;
    color: #0f8f80;
    font-size: 18px;
}

.contact-info-label {
    margin-bottom: 3px;
    color: #111827;
    font-size: 13px;
    font-weight: 700;
}

.contact-info-item a,
.contact-info-item span {
    color: #667085;
    font-size: 14px;
    text-decoration: none;
}

.contact-info-item a:hover {
    color: #0f8f80;
}

.contact-note {
    display: flex;
    gap: 10px;
    margin-top: 30px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 12px;
    color: #667085;
    font-size: 12px;
    line-height: 1.6;
}

.contact-form-header {
    margin-bottom: 26px;
}

.contact-form-header h2 {
    margin-bottom: 6px;
    font-size: 28px;
    font-weight: 750;
}

.contact-form-header p {
    margin: 0;
    color: #667085;
}

.contact-card .form-label {
    color: #344054;
    font-size: 13px;
    font-weight: 600;
}

.contact-card .form-control,
.contact-card .form-select {
    min-height: 50px;
    border-color: #d9dee7;
    border-radius: 10px;
    box-shadow: none;
}

.contact-card textarea.form-control {
    min-height: 170px;
    resize: vertical;
}

.contact-card .form-control:focus,
.contact-card .form-select:focus {
    border-color: #0f8f80;
    box-shadow: 0 0 0 3px rgba(15, 143, 128, 0.1);
}

.contact-form-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 8px;
}

.contact-privacy {
    max-width: 420px;
    color: #98a2b3;
    font-size: 12px;
    line-height: 1.5;
}

.contact-submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 150px;
    justify-content: center;
}

.contact-bottom-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-top: 45px;
    padding: 28px 32px;
    background: #f8fafc;
    border: 1px solid #e7e9ee;
    border-radius: 16px;
}

.contact-bottom-section h4 {
    margin-bottom: 5px;
    font-size: 18px;
}

.contact-bottom-section p {
    margin: 0;
    color: #667085;
    font-size: 14px;
}

.contact-bottom-links {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.contact-bottom-links a {
    color: #344054;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.contact-bottom-links a:hover {
    color: #0f8f80;
}

@media (max-width: 767.98px) {

    .contact-page {
        padding: 45px 0 65px;
    }

    .contact-card {
        padding: 24px;
    }

    .contact-form-bottom {
        align-items: stretch;
        flex-direction: column;
    }

    .contact-submit {
        width: 100%;
    }

    .contact-bottom-section {
        align-items: flex-start;
        flex-direction: column;
        padding: 24px;
    }
}

/* =========================================================
   LEGAL / POLICY PAGES
   ========================================================= */

.legal-page {
    padding: 70px 0 100px;
}

.legal-wrap {
    max-width: 900px;
    margin: 0 auto;
}

.legal-header {
    padding-bottom: 36px;
    margin-bottom: 42px;
    border-bottom: 1px solid #e6e9ed;
}

.legal-eyebrow {
    display: block;
    margin-bottom: 10px;
    color: #0f8f80;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.legal-header h1 {
    margin: 0 0 10px;
    color: #101828;
    font-size: clamp(38px, 5vw, 54px);
    font-weight: 800;
    letter-spacing: -1.8px;
}

.legal-updated {
    margin-bottom: 25px;
    color: #98a2b3;
    font-size: 13px;
}

.legal-intro {
    max-width: 760px;
    margin: 0;
    color: #475467;
    font-size: 18px;
    line-height: 1.75;
}

.legal-content {
    color: #475467;
    font-size: 15px;
    line-height: 1.8;
}

.legal-content h2 {
    margin: 42px 0 14px;
    color: #101828;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.3px;
}

.legal-content p {
    margin-bottom: 17px;
}

.legal-content ul {
    margin: 5px 0 22px;
    padding-left: 22px;
}

.legal-content li {
    margin-bottom: 8px;
}

.legal-content a {
    color: #0f8f80;
    font-weight: 600;
    text-decoration: none;
}

.legal-content a:hover {
    text-decoration: underline;
}

.legal-callout {
    display: flex;
    gap: 14px;
    margin-bottom: 38px;
    padding: 22px 24px;
    background: #f0f9f7;
    border: 1px solid #d2eee9;
    border-radius: 14px;
    color: #344054;
    line-height: 1.65;
}

.legal-callout i {
    flex: 0 0 auto;
    margin-top: 2px;
    color: #0f8f80;
    font-size: 20px;
}

.legal-callout strong {
    display: block;
    margin-bottom: 4px;
    color: #101828;
}

@media (max-width: 767.98px) {

    .legal-page {
        padding: 45px 0 70px;
    }

    .legal-header {
        margin-bottom: 30px;
    }

    .legal-content h2 {
        margin-top: 34px;
    }
}

/* =========================================
   CLICK TRACKING
========================================= */

.click-tracking-page {
    padding: 32px 0 60px;
}

.click-tracking-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.click-tracking-header h1 {
    margin: 0 0 6px;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.click-tracking-header p {
    margin: 0;
    color: #8f96a3;
    font-size: 14px;
}

.click-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 8px;
    background: #181b20;
    border: 1px solid #2b3038;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}


/* TABLE CONTAINER */

.click-table-card {
    background: #111318;
    border: 1px solid #252a32;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
}

.click-table-wrap {
    width: 100%;
    overflow-x: auto;
}


/* TABLE */

.click-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.click-table thead {
    background: #171a20;
}

.click-table th {
    padding: 14px 18px;
    text-align: left;
    color: #8f96a3;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-bottom: 1px solid #292e36;
    white-space: nowrap;
}

.click-table td {
    padding: 15px 18px;
    color: #d9dde5;
    font-size: 14px;
    border-bottom: 1px solid #20242b;
    vertical-align: middle;
}

.click-table tbody tr {
    transition: background 0.15s ease;
}

.click-table tbody tr:hover {
    background: #171a20;
}

.click-table tbody tr:last-child td {
    border-bottom: 0;
}


/* ID */

.click-id {
    color: #656d79;
    font-size: 12px;
}


/* IP ADDRESS */

.click-ip {
    display: inline-block;
    padding: 5px 8px;
    background: #1b1f26;
    border: 1px solid #2b313b;
    border-radius: 6px;
    color: #b9c2cf;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco,
                 Consolas, "Liberation Mono", monospace;
    font-size: 12px;
}


/* PAGE */

.click-page {
    color: #aeb5c0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco,
                 Consolas, "Liberation Mono", monospace;
    font-size: 12px;
}


/* CTA */

.click-cta {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 20px;
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(99, 102, 241, 0.25);
    color: #aeb0ff;
    font-size: 12px;
    font-weight: 600;
}


/* DATE */

.click-date {
    color: #858d99;
    font-size: 12px;
    white-space: nowrap;
}


/* EMPTY */

.click-empty {
    padding: 60px 20px !important;
    text-align: center;
    color: #747c88 !important;
}

.click-empty i {
    display: block;
    margin-bottom: 10px;
    font-size: 32px;
}


/* MOBILE */

@media (max-width: 768px) {

    .click-tracking-page {
        padding-top: 20px;
    }

    .click-tracking-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .click-tracking-header h1 {
        font-size: 25px;
    }

    .click-table th,
    .click-table td {
        padding: 12px 14px;
    }
}

.vanta-feed-banner {
    width: 100%;
    margin: 0 0 22px;
    overflow: hidden;
    border-radius: 14px;
}

.vanta-feed-banner a {
    display: block;
}

.vanta-feed-banner img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.vanta-feed-banner a:hover img {
    transform: scale(1.01);
    opacity: 0.96;
}
<style>

    /* =========================================
       BIOLOGICAL SYSTEMS
    ========================================= */

    .peptide-system-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin-top: 18px;
    }

    .peptide-system-card {
        display: flex;
        gap: 14px;
        padding: 17px;
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 14px;
        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,.035),
                rgba(255,255,255,.015)
            );
    }

    .peptide-system-icon {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        background: rgba(34,211,238,.08);
        color: #67e8f9;
        font-size: 19px;
    }

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

    .peptide-system-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
    }

    .peptide-system-top h3 {
        font-size: 15px;
        margin: 2px 0 0;
    }

    .peptide-system-type {
        color: #64748b;
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: .08em;
        margin-top: 4px;
    }

    .peptide-system-content p {
        color: #94a3b8;
        font-size: 12px;
        line-height: 1.55;
        margin: 9px 0 0;
    }


    /* =========================================
       EVIDENCE BADGES
    ========================================= */

    .peptide-evidence-badge {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 4px 7px;
        border-radius: 999px;
        font-size: 9px;
        font-weight: 700;
        text-transform: uppercase;
        white-space: nowrap;
        border: 1px solid rgba(255,255,255,.1);
    }

    .evidence-approved {
        color: #86efac;
        background: rgba(34,197,94,.09);
        border-color: rgba(34,197,94,.2);
    }

    .evidence-human_rct,
    .evidence-human_clinical {
        color: #7dd3fc;
        background: rgba(14,165,233,.09);
        border-color: rgba(14,165,233,.2);
    }

    .evidence-observational {
        color: #c4b5fd;
        background: rgba(139,92,246,.09);
        border-color: rgba(139,92,246,.2);
    }

    .evidence-preclinical {
        color: #fde047;
        background: rgba(234,179,8,.08);
        border-color: rgba(234,179,8,.2);
    }

    .evidence-in_vitro {
        color: #f0abfc;
        background: rgba(217,70,239,.08);
        border-color: rgba(217,70,239,.2);
    }


    /* =========================================
       TARGETS
    ========================================= */

    .peptide-targets {
        display: grid;
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 12px;
        margin-top: 18px;
    }

    .peptide-target-card {
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 14px;
        padding: 17px;
        background: rgba(255,255,255,.02);
    }

    .target-node {
        display: flex;
        align-items: center;
        gap: 11px;
    }

    .target-node-icon {
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        color: #67e8f9;
        background: rgba(34,211,238,.08);
        border: 1px solid rgba(34,211,238,.15);
    }

    .target-name {
        font-weight: 700;
        font-size: 15px;
    }

    .target-type {
        color: #64748b;
        font-size: 11px;
        margin-top: 2px;
    }

    .target-action {
        display: flex;
        align-items: center;
        gap: 7px;
        color: #a5b4fc;
        font-size: 11px;
        font-weight: 600;
        margin: 12px 0;
    }

    .target-description {
        color: #94a3b8;
        font-size: 12px;
        line-height: 1.55;
    }


    /* =========================================
       RESEARCH SUMMARY
    ========================================= */

    .research-summary-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        margin: 18px 0;
    }

    .research-summary-item {
        padding: 16px 10px;
        text-align: center;
        border-radius: 13px;
        border: 1px solid rgba(255,255,255,.07);
        background: rgba(255,255,255,.02);
    }

    .research-summary-item i {
        display: block;
        color: #67e8f9;
        font-size: 18px;
        margin-bottom: 7px;
    }

    .research-summary-item strong {
        display: block;
        font-size: 22px;
    }

    .research-summary-item span {
        display: block;
        color: #64748b;
        font-size: 9px;
        text-transform: uppercase;
        letter-spacing: .06em;
        margin-top: 3px;
    }


    /* =========================================
       STUDIES
    ========================================= */

    .peptide-study-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .peptide-study {
        padding: 19px;
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 15px;
        background: rgba(255,255,255,.018);
    }

    .study-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }

    .study-type {
        display: flex;
        align-items: center;
        gap: 6px;
        color: #67e8f9;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
    }

    .study-year {
        color: #64748b;
        font-size: 11px;
    }

    .study-title {
        font-size: 16px;
        line-height: 1.45;
        margin: 0 0 6px;
    }

    .study-authors,
    .study-journal {
        color: #64748b;
        font-size: 11px;
        line-height: 1.5;
    }

    .study-journal {
        margin-top: 5px;
    }

    .study-data {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 14px 0;
    }

    .study-data > div {
        padding: 7px 10px;
        border-radius: 8px;
        background: rgba(255,255,255,.03);
    }

    .study-data span {
        display: block;
        color: #64748b;
        font-size: 8px;
        text-transform: uppercase;
    }

    .study-data strong {
        display: block;
        font-size: 11px;
        margin-top: 2px;
    }

    .study-findings {
        margin-top: 14px;
        padding: 13px;
        border-left: 2px solid #22d3ee;
        background: rgba(34,211,238,.035);
    }

    .study-findings > span {
        color: #67e8f9;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: .08em;
    }

    .study-findings p {
        color: #cbd5e1;
        font-size: 12px;
        line-height: 1.6;
        margin: 5px 0 0;
    }

    .study-safety {
        display: flex;
        gap: 10px;
        margin-top: 12px;
        padding: 12px;
        border-radius: 9px;
        color: #fbbf24;
        background: rgba(245,158,11,.05);
        border: 1px solid rgba(245,158,11,.1);
    }

    .study-safety strong {
        font-size: 11px;
    }

    .study-safety p {
        color: #a8a29e;
        font-size: 11px;
        line-height: 1.5;
        margin: 3px 0 0;
    }

    .study-limitations {
        margin-top: 12px;
        color: #94a3b8;
        font-size: 11px;
    }

    .study-limitations summary {
        cursor: pointer;
        color: #64748b;
    }

    .study-limitations p {
        line-height: 1.55;
        margin-top: 8px;
    }

    .study-links {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        padding-top: 13px;
        margin-top: 14px;
        border-top: 1px solid rgba(255,255,255,.06);
    }

    .study-links a {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 6px 9px;
        border-radius: 7px;
        background: rgba(59,130,246,.07);
        border: 1px solid rgba(59,130,246,.13);
        color: #7dd3fc;
        font-size: 10px;
        font-weight: 600;
        text-decoration: none;
    }

    .study-links a:hover {
        color: white;
        background: rgba(59,130,246,.13);
    }


    @media(max-width: 700px) {

        .peptide-system-grid,
        .peptide-targets {
            grid-template-columns: 1fr;
        }

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

        .peptide-system-top {
            flex-direction: column;
        }
    }

</style>