/* ==========================================================
   FORUMHUB COMPLETE UI V2
   HubChat visual language

   Real-time /map page:
   this file is NOT loaded there.
   ========================================================== */

:root {

    --v2-bg:
        #07101c;

    --v2-bg-deep:
        #050b14;

    --v2-panel:
        rgba(10, 20, 34, .91);

    --v2-panel-2:
        rgba(14, 27, 45, .88);

    --v2-panel-3:
        rgba(18, 34, 54, .78);

    --v2-panel-hover:
        rgba(24, 43, 66, .84);

    --v2-line:
        rgba(148, 163, 184, .14);

    --v2-line-strong:
        rgba(148, 163, 184, .23);

    --v2-text:
        #edf4fb;

    --v2-text-soft:
        #c8d4e2;

    --v2-muted:
        #8fa1b7;

    --v2-muted-2:
        #677b92;

    --v2-cyan:
        #5eead4;

    --v2-cyan-strong:
        #67e8f9;

    --v2-blue:
        #7dd3fc;

    --v2-green:
        #6ee7b7;

    --v2-red:
        #fca5a5;

    --v2-radius:
        15px;

    --v2-radius-lg:
        20px;

    --v2-shadow:
        0 22px 60px
        rgba(0, 0, 0, .20);
}


/* ==========================================================
   DOCUMENT
   ========================================================== */

html {

    min-height:
        100%;

    background:
        var(--v2-bg-deep);
}


body {

    min-height:
        100vh;

    color:
        var(--v2-text) !important;

    background:

        radial-gradient(
            circle at 12% -5%,
            rgba(94, 234, 212, .075),
            transparent 32%
        ),

        radial-gradient(
            circle at 90% 4%,
            rgba(96, 165, 250, .075),
            transparent 31%
        ),

        radial-gradient(
            circle at 52% 110%,
            rgba(129, 140, 248, .035),
            transparent 42%
        ),

        linear-gradient(
            180deg,
            #081522 0%,
            #07111e 52%,
            #050d17 100%
        ) !important;

    background-attachment:
        fixed !important;
}


.hub-shell,
.detail-shell,
.member-shell,
.hub-chat-shell {

    min-height:
        100vh;

    background:
        transparent !important;
}


/* ==========================================================
   GLOBAL HEADER
   ========================================================== */

.global-header {

    min-height:
        68px !important;

    border-bottom:
        1px solid
        rgba(148, 163, 184, .12)
        !important;

    background:
        rgba(5, 13, 24, .87)
        !important;

    box-shadow:
        0 10px 36px
        rgba(0, 0, 0, .18)
        !important;

    backdrop-filter:
        blur(18px);

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


.global-brand-copy strong {

    color:
        #f7fbff !important;
}


.global-brand-copy small {

    color:
        #8ea0b5 !important;
}


.global-nav a {

    color:
        #91a2b6 !important;

    font-size:
        11px !important;

    font-weight:
        760 !important;
}


.global-nav a:hover {

    color:
        #ecf8ff !important;
}


.global-nav a.active {

    color:
        var(--v2-cyan) !important;

    background:
        rgba(94, 234, 212, .055)
        !important;
}


.global-nav a.active::after {

    height:
        2px !important;

    background:
        linear-gradient(
            90deg,
            #5eead4,
            #7dd3fc
        ) !important;
}


/* ==========================================================
   MY ACCOUNT
   ========================================================== */

.global-account-trigger {

    border:
        1px solid
        rgba(125, 211, 252, .22)
        !important;

    background:
        rgba(14, 29, 47, .86)
        !important;

    box-shadow:
        0 8px 24px
        rgba(0, 0, 0, .14)
        !important;
}


.global-account-trigger:hover {

    border-color:
        rgba(94, 234, 212, .36)
        !important;

    background:
        rgba(20, 39, 60, .96)
        !important;
}


.global-account-avatar {

    position:
        relative !important;

    display:
        block !important;

    width:
        36px !important;

    height:
        36px !important;

    min-width:
        36px !important;

    flex:
        0 0 36px !important;

    border:
        1px solid
        rgba(94, 234, 212, .38)
        !important;

    border-radius:
        11px !important;

    background:
        rgba(94, 234, 212, .08)
        !important;

    color:
        transparent !important;

    font-size:
        0 !important;

    line-height:
        0 !important;
}


.global-account-avatar::after {

    content:
        "MY" !important;

    position:
        absolute !important;

    inset:
        0 !important;

    display:
        grid !important;

    place-items:
        center !important;

    color:
        #99f6e4 !important;

    font-size:
        11px !important;

    font-weight:
        950 !important;

    line-height:
        1 !important;

    letter-spacing:
        .02em !important;
}


.global-account-summary strong {

    color:
        #f5f9fd !important;

    font-size:
        11px !important;
}


.global-account-summary small {

    color:
        #8194aa !important;

    font-size:
        8px !important;
}


.global-account-arrow {

    color:
        #7f93aa !important;
}


.global-account-dropdown {

    border:
        1px solid
        var(--v2-line-strong)
        !important;

    background:
        rgba(9, 20, 34, .985)
        !important;

    box-shadow:
        0 24px 60px
        rgba(0, 0, 0, .38)
        !important;

    backdrop-filter:
        blur(22px);
}


.global-account-profile strong {

    color:
        var(--v2-text) !important;
}


.global-account-profile span {

    color:
        var(--v2-muted) !important;
}


.global-account-dropdown > a,
.global-account-dropdown > button {

    color:
        var(--v2-text-soft) !important;
}


.global-account-dropdown > a:hover,
.global-account-dropdown > button:hover {

    background:
        rgba(94, 234, 212, .07)
        !important;

    color:
        #f3ffff !important;
}


.global-account-divider {

    background:
        var(--v2-line)
        !important;
}


.global-menu-count {

    background:
        rgba(94, 234, 212, .10)
        !important;

    color:
        var(--v2-cyan)
        !important;
}


.global-notification-badge {

    min-width:
        20px !important;

    height:
        20px !important;

    border:
        2px solid
        #07101c !important;

    background:
        #5eead4 !important;

    color:
        #06131b !important;

    font-size:
        8px !important;

    box-shadow:
        0 0 0 3px
        rgba(94, 234, 212, .08);
}


/* ==========================================================
   COMMON MAIN / HEADINGS
   ========================================================== */

.detail-shell main,
.member-shell main,
.server-info-main,
.notice-page,
.hub-chat-main {

    color:
        var(--v2-text);
}


.detail-heading h1,
.member-title h1,
.server-info-heading h1,
.notice-page-head h1,
.hub-chat-heading h1 {

    color:
        #f4f8fc !important;

    text-shadow:
        0 3px 18px
        rgba(0, 0, 0, .14);
}


.detail-heading > span,
.detail-heading > div > span,
.member-title > div > span,
.server-info-heading > div > span,
.notice-page-head > div > span,
.hub-chat-kicker {

    color:
        var(--v2-cyan) !important;
}


.detail-heading p,
.member-title p,
.server-info-heading p,
.notice-page-head p,
.hub-chat-heading p {

    color:
        #91a4ba !important;

    font-size:
        12px !important;

    line-height:
        1.7 !important;
}


/* ==========================================================
   HOME HEADER UNIFICATION
   ========================================================== */

body[data-fh-path="/"]
.hub-header {

    display:
        none !important;
}


body[data-fh-path="/"]
.hub-shell > main {

    width:
        min(
            1250px,
            calc(100% - 48px)
        );

    max-width:
        none !important;

    margin:
        0 auto !important;

    padding:
        38px 0 70px !important;
}


/* ==========================================================
   HOME HERO
   ========================================================== */

.hero-grid {

    gap:
        16px !important;
}


.hero-copy,
.server-brief {

    border:
        1px solid
        var(--v2-line)
        !important;

    border-radius:
        var(--v2-radius-lg)
        !important;

    background:

        linear-gradient(
            145deg,
            rgba(18, 34, 54, .96),
            rgba(8, 19, 33, .93)
        )
        !important;

    box-shadow:
        var(--v2-shadow)
        !important;
}


.hero-copy {

    position:
        relative;

    overflow:
        hidden;
}


.hero-copy::before {

    content:
        "";

    position:
        absolute;

    width:
        240px;

    height:
        240px;

    top:
        -120px;

    right:
        -80px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(94, 234, 212, .12),
            transparent 68%
        );

    pointer-events:
        none;
}


.hero-eyebrow {

    color:
        var(--v2-cyan) !important;

    font-size:
        9px !important;
}


.hero-copy h1 {

    color:
        #f3f8fd !important;

    font-size:
        clamp(34px, 4vw, 50px)
        !important;

    line-height:
        1.08 !important;

    letter-spacing:
        -.045em !important;
}


.hero-copy p {

    color:
        #a3b4c7 !important;

    font-size:
        13px !important;

    line-height:
        1.75 !important;
}


.primary-action {

    border:
        1px solid
        rgba(94, 234, 212, .30)
        !important;

    background:
        linear-gradient(
            135deg,
            rgba(94, 234, 212, .18),
            rgba(125, 211, 252, .14)
        )
        !important;

    color:
        #eafffb !important;

    box-shadow:
        0 8px 24px
        rgba(0, 0, 0, .16);
}


.secondary-action {

    border:
        1px solid
        var(--v2-line-strong)
        !important;

    background:
        rgba(16, 31, 49, .82)
        !important;

    color:
        #c9d7e5 !important;
}


/* ==========================================================
   HOME SERVER BRIEF
   ========================================================== */

.brief-heading span,
.card-eyebrow,
.panel-heading span {

    color:
        #6fd8d0 !important;
}


.brief-heading h2,
.panel-heading h2 {

    color:
        #edf4fb !important;
}


.brief-primary strong {

    color:
        #f5fbff !important;
}


.brief-primary span,
.brief-grid span {

    color:
        #7f93a9 !important;
}


.brief-grid > div {

    border:
        1px solid
        rgba(148, 163, 184, .09)
        !important;

    background:
        rgba(15, 29, 47, .72)
        !important;
}


.brief-grid strong {

    color:
        #dce8f4 !important;
}


.brief-link {

    color:
        var(--v2-cyan)
        !important;
}


.live-pill {

    border:
        1px solid
        rgba(94, 234, 212, .22);

    background:
        rgba(94, 234, 212, .08)
        !important;

    color:
        var(--v2-cyan)
        !important;
}


/* ==========================================================
   HOME PERSONAL CARDS
   ========================================================== */

.personal-card {

    border:
        1px solid
        var(--v2-line)
        !important;

    border-radius:
        16px !important;

    background:
        rgba(11, 23, 39, .87)
        !important;

    color:
        var(--v2-text)
        !important;

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

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


.personal-card:hover {

    transform:
        translateY(-2px);

    border-color:
        rgba(94, 234, 212, .26)
        !important;

    background:
        rgba(16, 32, 51, .96)
        !important;
}


.personal-card strong {

    color:
        #f1f7fc !important;
}


.personal-card small {

    color:
        #7890a8 !important;
}


/* ==========================================================
   HOME PANELS
   ========================================================== */

.home-panel {

    border:
        1px solid
        var(--v2-line)
        !important;

    border-radius:
        var(--v2-radius-lg)
        !important;

    background:
        rgba(10, 21, 36, .90)
        !important;

    box-shadow:
        0 16px 42px
        rgba(0, 0, 0, .14)
        !important;
}


.panel-heading a {

    color:
        #8097ae !important;
}


.panel-heading a:hover {

    color:
        var(--v2-cyan)
        !important;
}


.home-player-row,
.home-chat-row,
.home-notice-row {

    border-bottom:
        1px solid
        rgba(148, 163, 184, .09)
        !important;

    color:
        #dce6f0 !important;
}


.home-player-row:hover,
.home-chat-row:hover,
.home-notice-row:hover {

    background:
        rgba(94, 234, 212, .035)
        !important;
}


.home-player-row strong,
.home-chat-row strong,
.home-notice-row strong {

    color:
        #dce8f3 !important;

    font-size:
        11px !important;
}


.home-player-row span,
.home-chat-row span,
.home-notice-row span,
.home-player-row small,
.home-chat-row small,
.home-notice-row small {

    color:
        #7890a8 !important;

    font-size:
        9px !important;
}


.home-notice-category {

    background:
        rgba(125, 211, 252, .09)
        !important;

    color:
        #8eddfb !important;
}


/* Home map preview image remains intact. */

.map-preview-stage {

    border-color:
        rgba(148, 163, 184, .14)
        !important;

    box-shadow:
        inset 0 0 0 1px
        rgba(255, 255, 255, .025);
}


/* ==========================================================
   GAME CHAT
   ========================================================== */

.forum-chat-card {

    border:
        1px solid
        var(--v2-line)
        !important;

    background:
        rgba(8, 18, 31, .95)
        !important;

    box-shadow:
        var(--v2-shadow)
        !important;
}


.chat-info-bar,
.chat-channel-bar,
.chat-compose {

    border-color:
        var(--v2-line)
        !important;

    background:
        rgba(13, 26, 43, .94)
        !important;
}


.chat-info-bar strong {

    color:
        #edf5fc !important;
}


.chat-info-bar span {

    color:
        #8296ad !important;
}


.chat-channel-tab {

    border:
        1px solid
        var(--v2-line-strong)
        !important;

    background:
        rgba(11, 23, 38, .78)
        !important;

    color:
        #9aacc0 !important;
}


.chat-channel-tab:hover:not(:disabled) {

    border-color:
        rgba(94, 234, 212, .25)
        !important;

    background:
        rgba(17, 34, 53, .95)
        !important;
}


.chat-channel-tab.active {

    border-color:
        rgba(94, 234, 212, .34)
        !important;

    background:
        rgba(94, 234, 212, .09)
        !important;

    color:
        var(--v2-cyan)
        !important;

    box-shadow:
        inset 0 0 0 1px
        rgba(94, 234, 212, .04);
}


.chat-channel-tab.active
.chat-channel-sub {

    color:
        #8dded6 !important;
}


.chat-admin-guild-picker,
.chat-guild-notice {

    border-color:
        var(--v2-line)
        !important;

    background:
        rgba(13, 29, 47, .92)
        !important;

    color:
        #9fb2c7 !important;
}


.chat-admin-guild-title strong {

    color:
        #e9f1f8 !important;
}


.chat-admin-guild-title span {

    color:
        #8095ac !important;
}


.forum-chat-messages {

    background:

        radial-gradient(
            circle at 85% 0%,
            rgba(96, 165, 250, .035),
            transparent 34%
        ),

        #081320
        !important;
}


.chat-message-name {

    color:
        #b8d7e9 !important;
}


.chat-source.game {

    background:
        rgba(125, 211, 252, .09)
        !important;

    color:
        #89cdec !important;
}


.chat-source.web {

    background:
        rgba(94, 234, 212, .12)
        !important;

    color:
        #81e6dc !important;
}


.chat-bubble {

    border:
        1px solid
        rgba(148, 163, 184, .13)
        !important;

    background:
        #132338 !important;

    color:
        #e3edf6 !important;

    font-size:
        14px !important;
}


.chat-message.mine
.chat-bubble {

    border-color:
        rgba(94, 234, 212, .24)
        !important;

    background:
        linear-gradient(
            135deg,
            #173348,
            #173d42
        )
        !important;

    color:
        #effffd !important;
}


.chat-message-time {

    color:
        #677e96 !important;
}


.chat-composer textarea {

    border:
        1px solid
        var(--v2-line-strong)
        !important;

    background:
        rgba(8, 19, 33, .92)
        !important;

    color:
        #eef5fb !important;
}


.chat-composer textarea::placeholder {

    color:
        #607890 !important;
}


.chat-compose-side button {

    border:
        1px solid
        rgba(94, 234, 212, .22)
        !important;

    background:
        rgba(94, 234, 212, .12)
        !important;

    color:
        #dffffa !important;
}


.chat-connection,
.member-status {

    border:
        1px solid
        var(--v2-line)
        !important;

    background:
        rgba(15, 29, 46, .82)
        !important;

    color:
        #91a5ba !important;
}


.chat-connection.online,
.member-status.online {

    border-color:
        rgba(94, 234, 212, .27)
        !important;

    background:
        rgba(94, 234, 212, .07)
        !important;

    color:
        var(--v2-cyan)
        !important;
}


/* ==========================================================
   HUB CHAT
   ========================================================== */

.hub-chat-shell {

    background:
        transparent !important;
}


.hub-chat-card {

    box-shadow:
        var(--v2-shadow)
        !important;
}


.hub-message {

    border-color:
        transparent;
}


.hub-message:hover {

    background:
        rgba(125, 211, 252, .035)
        !important;
}


/* ==========================================================
   PLAYERS
   ========================================================== */

.detail-player-card,
.server-detail-card,
.notice-detail-row,
.chat-detail-row {

    border:
        1px solid
        var(--v2-line)
        !important;

    background:
        rgba(11, 23, 39, .88)
        !important;

    color:
        var(--v2-text)
        !important;

    box-shadow:
        0 12px 30px
        rgba(0, 0, 0, .11);
}


.detail-player-card:hover {

    border-color:
        rgba(94, 234, 212, .23)
        !important;

    background:
        rgba(16, 32, 51, .96)
        !important;
}


.detail-player-card strong,
.server-detail-card strong {

    color:
        #edf5fc !important;
}


.detail-player-card span,
.server-detail-card span {

    color:
        #8195ac !important;
}


/* ==========================================================
   MEMBER / PROFILE / MY BASES / NOTIFICATIONS
   ========================================================== */

.profile-hero,
.detail-card,
.technical-card,
.member-actions a,
.base-summary,
.base-map-preview,
.base-list-wrap,
.notification-item {

    border:
        1px solid
        var(--v2-line)
        !important;

    background:
        rgba(10, 22, 38, .90)
        !important;

    color:
        var(--v2-text)
        !important;

    box-shadow:
        0 15px 42px
        rgba(0, 0, 0, .13);
}


.profile-avatar {

    border:
        1px solid
        rgba(94, 234, 212, .24)
        !important;

    background:
        linear-gradient(
            145deg,
            #173044,
            #12293a
        )
        !important;

    color:
        #a7f3e9 !important;
}


.profile-label,
.card-heading span,
.base-map-head span,
.technical-card summary span {

    color:
        #6ed8d0 !important;
}


.profile-main h2,
.card-heading h3,
.base-map-head h3,
.technical-card summary strong {

    color:
        #f0f6fb !important;
}


.profile-meta span {

    border:
        1px solid
        rgba(148, 163, 184, .10);

    background:
        rgba(17, 34, 53, .86)
        !important;

    color:
        #9eb0c4 !important;
}


.detail-list > div,
.technical-row,
.base-row {

    border-color:
        rgba(148, 163, 184, .10)
        !important;
}


.detail-list dt,
.technical-row span,
.base-summary span,
.base-row small,
.base-row-meta,
.technical-help {

    color:
        #7e94ab !important;
}


.detail-list dd,
.technical-row code,
.base-summary strong,
.base-row strong {

    color:
        #e5eef7 !important;
}


.connection-ok {

    color:
        var(--v2-green) !important;
}


.technical-row button,
.outline-link,
.outline-button {

    border:
        1px solid
        var(--v2-line-strong)
        !important;

    background:
        rgba(16, 31, 49, .82)
        !important;

    color:
        #b7c7d8 !important;
}


.technical-row button:hover,
.outline-link:hover,
.outline-button:hover {

    border-color:
        rgba(94, 234, 212, .28)
        !important;

    background:
        rgba(94, 234, 212, .07)
        !important;

    color:
        #e6fffb !important;
}


.base-summary div {

    border-color:
        rgba(148, 163, 184, .10)
        !important;
}


.base-map-stage {

    border:
        1px solid
        var(--v2-line)
        !important;

    background:

        radial-gradient(
            circle at 50% 40%,
            rgba(35, 57, 78, .34),
            rgba(7, 17, 29, .86)
        )
        !important;
}


.map-placeholder strong {

    color:
        #d8e5f1 !important;
}


.map-placeholder span {

    color:
        #7890a8 !important;
}


.notification-item {

    cursor:
        pointer;
}


.notification-item.unread {

    border-left:
        3px solid
        var(--v2-cyan)
        !important;

    background:

        linear-gradient(
            90deg,
            rgba(94, 234, 212, .07),
            rgba(10, 22, 38, .92) 28%
        )
        !important;
}


.notification-item strong {

    color:
        #ecf4fb !important;

    font-size:
        13px !important;
}


.notification-item span {

    color:
        #9aadc1 !important;

    font-size:
        11px !important;

    line-height:
        1.65 !important;
}


.notification-item small {

    color:
        #647c94 !important;
}


/* ==========================================================
   SERVER INFORMATION
   ========================================================== */

.server-info-heading h1 {

    color:
        #f3f8fc !important;
}


.server-tabs {

    border:
        1px solid
        var(--v2-line)
        !important;

    background:
        rgba(8, 18, 31, .76)
        !important;
}


.server-tabs button {

    color:
        #8397ae !important;

    background:
        transparent !important;
}


.server-tabs button:hover {

    color:
        #dbe9f4 !important;

    background:
        rgba(125, 211, 252, .05)
        !important;
}


.server-tabs button.active {

    color:
        var(--v2-cyan)
        !important;

    background:
        rgba(94, 234, 212, .09)
        !important;

    box-shadow:
        inset 0 0 0 1px
        rgba(94, 234, 212, .12)
        !important;
}


.server-card,
.server-document-card {

    border:
        1px solid
        var(--v2-line)
        !important;

    background:
        rgba(10, 22, 38, .91)
        !important;

    box-shadow:
        var(--v2-shadow)
        !important;
}


.server-card-head span,
.server-document-head span,
.server-card-label {

    color:
        #68d6ce !important;
}


.server-card-head h2,
.server-document-head h2 {

    color:
        #eff6fb !important;
}


.server-live-badge {

    border:
        1px solid
        var(--v2-line);

    background:
        rgba(15, 29, 46, .84)
        !important;

    color:
        #8ea2b7 !important;
}


.server-live-badge.online {

    border-color:
        rgba(94, 234, 212, .25);

    background:
        rgba(94, 234, 212, .08)
        !important;

    color:
        var(--v2-green)
        !important;
}


.server-access-row,
.server-status-list > div,
.server-document-body {

    border-color:
        rgba(148, 163, 184, .10)
        !important;
}


.server-access-row span,
.server-status-list dt {

    color:
        #7e93aa !important;
}


.server-access-row strong,
.server-status-list dd {

    color:
        #e5eef7 !important;
}


.server-access-row button,
.server-admin-button,
.document-edit-button {

    border:
        1px solid
        var(--v2-line-strong)
        !important;

    background:
        rgba(16, 31, 49, .84)
        !important;

    color:
        #bdcbd9 !important;
}


.server-access-message {

    border:
        1px solid
        rgba(148, 163, 184, .08);

    background:
        rgba(17, 34, 53, .72)
        !important;

    color:
        #8ea3b9 !important;
}


.server-join-guide,
.server-document-body {

    color:
        #b6c6d6 !important;
}


.status-summary-grid > div {

    border:
        1px solid
        rgba(148, 163, 184, .08);

    background:
        rgba(16, 31, 49, .82)
        !important;
}


.status-summary-grid span {

    color:
        #7f94aa !important;
}


.status-summary-grid strong {

    color:
        #eaf2f9 !important;
}


/* server modal */

.server-modal-backdrop {

    background:
        rgba(2, 8, 15, .74)
        !important;

    backdrop-filter:
        blur(7px)
        !important;
}


.server-modal-card {

    border:
        1px solid
        var(--v2-line-strong);

    background:
        #0c192a !important;

    color:
        var(--v2-text);

    box-shadow:
        0 28px 90px
        rgba(0, 0, 0, .50)
        !important;
}


.server-modal-head h2 {

    color:
        #f0f6fb !important;
}


.server-modal-card label > span,
.server-editor-note {

    color:
        #8297ae !important;
}


.server-modal-card input,
.server-modal-card select,
.server-modal-card textarea {

    border:
        1px solid
        var(--v2-line-strong)
        !important;

    background:
        #091626 !important;

    color:
        #edf5fb !important;
}


.server-modal-actions button {

    border:
        1px solid
        var(--v2-line-strong)
        !important;

    background:
        #102035 !important;

    color:
        #b9cad9 !important;
}


.server-modal-actions button.primary {

    border-color:
        rgba(94, 234, 212, .30)
        !important;

    background:
        rgba(94, 234, 212, .13)
        !important;

    color:
        #dffffa !important;
}


/* ==========================================================
   NOTICES
   ========================================================== */

.notice-page-head h1 {

    color:
        #f3f8fc !important;

    opacity:
        1 !important;
}


.notice-page-head p {

    color:
        #91a4ba !important;
}


.notice-write-button {

    border:
        1px solid
        rgba(94, 234, 212, .23)
        !important;

    background:
        rgba(94, 234, 212, .10)
        !important;

    color:
        #dffff9 !important;
}


.notice-filters {

    border:
        1px solid
        var(--v2-line)
        !important;

    background:
        rgba(10, 22, 38, .90)
        !important;

    box-shadow:
        0 12px 34px
        rgba(0, 0, 0, .12);
}


.notice-filters button {

    color:
        #8196ad !important;

    background:
        transparent !important;
}


.notice-filters button:hover {

    color:
        #dce8f3 !important;
}


.notice-filters button.active {

    background:
        rgba(94, 234, 212, .09)
        !important;

    color:
        var(--v2-cyan)
        !important;
}


.notice-list {

    color:
        var(--v2-text)
        !important;
}


.notice-list > a,
.notice-list > article,
.notice-list > div:not(.notice-loading) {

    border-color:
        var(--v2-line)
        !important;

    background:
        rgba(10, 22, 38, .86)
        !important;

    color:
        var(--v2-text)
        !important;
}


.notice-list h2,
.notice-list h3,
.notice-list strong {

    color:
        #e7f0f8 !important;

    opacity:
        1 !important;
}


.notice-list p,
.notice-list span,
.notice-list small {

    color:
        #8499b0 !important;

    opacity:
        1 !important;
}


.notice-loading {

    color:
        #8297ad !important;
}


/* ==========================================================
   ADMIN
   ========================================================== */

body[data-fh-path^="/admin"]
main {

    color:
        var(--v2-text)
        !important;
}


body[data-fh-path^="/admin"]
main > span:first-child {

    color:
        var(--v2-cyan)
        !important;

    opacity:
        1 !important;
}


body[data-fh-path^="/admin"]
main > h1 {

    color:
        #f3f8fc !important;

    opacity:
        1 !important;
}


body[data-fh-path^="/admin"]
main > p {

    color:
        #8fa3b9 !important;

    opacity:
        1 !important;
}


body[data-fh-path^="/admin"]
main a {

    border-color:
        var(--v2-line)
        !important;

    background:
        rgba(10, 22, 38, .90)
        !important;

    color:
        var(--v2-text)
        !important;

    box-shadow:
        0 14px 38px
        rgba(0, 0, 0, .13)
        !important;
}


body[data-fh-path^="/admin"]
main a:hover {

    border-color:
        rgba(94, 234, 212, .26)
        !important;

    background:
        rgba(16, 32, 51, .96)
        !important;
}


body[data-fh-path^="/admin"]
main a strong,
body[data-fh-path^="/admin"]
main h2,
body[data-fh-path^="/admin"]
main h3 {

    color:
        #edf5fb !important;

    opacity:
        1 !important;
}


body[data-fh-path^="/admin"]
main a span,
body[data-fh-path^="/admin"]
main small {

    color:
        #8297ae !important;

    opacity:
        1 !important;
}


body[data-fh-path^="/admin"]
main [style*="background:#fff"],
body[data-fh-path^="/admin"]
main [style*="background: #fff"],
body[data-fh-path^="/admin"]
main [style*="background:white"],
body[data-fh-path^="/admin"]
main [style*="background: white"] {

    background:
        rgba(10, 22, 38, .90)
        !important;
}


body[data-fh-path^="/admin"]
main [style*="color:#273"],
body[data-fh-path^="/admin"]
main [style*="color: #273"],
body[data-fh-path^="/admin"]
main [style*="color:#2"],
body[data-fh-path^="/admin"]
main [style*="color: #2"] {

    color:
        #edf5fb !important;
}


/* ==========================================================
   LOGIN / REGISTER / RECOVERY
   ========================================================== */

body[data-fh-path="/login"],
body[data-fh-path="/register"],
body[data-fh-path^="/recover"] {

    color:
        var(--v2-text)
        !important;
}


body[data-fh-path="/login"] form,
body[data-fh-path="/register"] form,
body[data-fh-path^="/recover"] form,
.auth-card,
.login-card,
.register-card,
.recover-card {

    border:
        1px solid
        var(--v2-line)
        !important;

    background:
        rgba(10, 22, 38, .93)
        !important;

    color:
        var(--v2-text)
        !important;

    box-shadow:
        var(--v2-shadow)
        !important;
}


/* ==========================================================
   FORMS / INPUTS
   ========================================================== */

input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {

    border-color:
        var(--v2-line-strong)
        !important;

    background:
        rgba(7, 18, 31, .88)
        !important;

    color:
        #edf5fb !important;
}


input::placeholder,
textarea::placeholder {

    color:
        #60778f !important;

    opacity:
        1;
}


input:focus,
textarea:focus,
select:focus {

    border-color:
        rgba(94, 234, 212, .39)
        !important;

    box-shadow:
        0 0 0 3px
        rgba(94, 234, 212, .055)
        !important;
}


select option {

    background:
        #0b192a !important;

    color:
        #edf5fb !important;
}


/* ==========================================================
   TABLES
   ========================================================== */

table {

    color:
        #c7d4e1 !important;
}


th {

    border-color:
        var(--v2-line)
        !important;

    background:
        rgba(15, 30, 48, .82)
        !important;

    color:
        #8fa3b9 !important;
}


td {

    border-color:
        rgba(148, 163, 184, .09)
        !important;
}


/* ==========================================================
   GLOBAL LIVE NOTIFICATION TOAST
   ========================================================== */

#forumhubLiveToastStack {

    position:
        fixed;

    top:
        82px;

    right:
        22px;

    z-index:
        99999;

    width:
        min(
            360px,
            calc(100vw - 28px)
        );

    display:
        grid;

    gap:
        9px;

    pointer-events:
        none;
}


.fh-live-toast {

    position:
        relative;

    overflow:
        hidden;

    display:
        grid;

    grid-template-columns:
        37px minmax(0, 1fr);

    gap:
        11px;

    padding:
        13px;

    border:
        1px solid
        rgba(94, 234, 212, .25);

    border-radius:
        14px;

    background:
        rgba(9, 22, 37, .985);

    color:
        var(--v2-text);

    box-shadow:
        0 22px 60px
        rgba(0, 0, 0, .40);

    backdrop-filter:
        blur(18px);

    pointer-events:
        auto;

    cursor:
        pointer;

    animation:
        fhToastIn
        .20s
        ease-out;
}


.fh-live-toast::before {

    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        0;

    bottom:
        0;

    width:
        3px;

    background:
        linear-gradient(
            #5eead4,
            #7dd3fc
        );
}


.fh-live-toast-icon {

    width:
        37px;

    height:
        37px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(94, 234, 212, .20);

    border-radius:
        11px;

    background:
        rgba(94, 234, 212, .09);

    color:
        #8ff5e7;

    font-size:
        12px;

    font-weight:
        950;
}


.fh-live-toast-title {

    color:
        #eff7fc;

    font-size:
        12px;

    font-weight:
        850;

    line-height:
        1.4;
}


.fh-live-toast-body {

    margin-top:
        4px;

    overflow:
        hidden;

    display:
        -webkit-box;

    -webkit-line-clamp:
        2;

    -webkit-box-orient:
        vertical;

    color:
        #8fa4ba;

    font-size:
        10px;

    line-height:
        1.55;
}


.fh-live-toast-link {

    margin-top:
        5px;

    color:
        #5eead4;

    font-size:
        9px;

    font-weight:
        800;
}


@keyframes fhToastIn {

    from {
        opacity: 0;
        transform: translateY(-7px);
    }

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


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

* {

    scrollbar-width:
        thin;

    scrollbar-color:
        rgba(148, 163, 184, .24)
        transparent;
}


*::-webkit-scrollbar {

    width:
        8px;

    height:
        8px;
}


*::-webkit-scrollbar-thumb {

    border:
        2px solid transparent;

    border-radius:
        999px;

    background:
        rgba(148, 163, 184, .23);

    background-clip:
        padding-box;
}


*::-webkit-scrollbar-thumb:hover {

    background:
        rgba(148, 163, 184, .36);

    background-clip:
        padding-box;
}


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

@media (max-width: 760px) {

    body {

        background:

            radial-gradient(
                circle at 15% 0%,
                rgba(94, 234, 212, .055),
                transparent 32%
            ),

            linear-gradient(
                #081522,
                #050d17
            )
            !important;

        background-attachment:
            scroll !important;
    }


    body[data-fh-path="/"]
    .hub-shell > main {

        width:
            calc(100% - 20px);

        padding:
            24px 0 55px
            !important;
    }


    #forumhubLiveToastStack {

        top:
            72px;

        right:
            10px;

        width:
            calc(100vw - 20px);
    }


    .hero-copy h1 {

        font-size:
            34px !important;
    }

}


/* ==========================================================
   SELECTION
   ========================================================== */

::selection {

    background:
        rgba(94, 234, 212, .24);

    color:
        #f4ffff;
}