:root {
    --navy: #020b1e;
    --text: #06132c;
    --muted: #637894;

    --cyan: #08cec9;
    --blue: #078fd1;
    --green: #12bc7e;

    --border: #dce7f3;
    --soft: #f5f9fd;

    --gradient:
        linear-gradient(
            100deg,
            #08d2c7,
            #078fd2
        );
}


* {
    box-sizing: border-box;
}


html,
body {
    margin: 0;
    min-height: 100%;
}


body {
    min-width: 1100px;

    color: var(--text);

    background:
        linear-gradient(
            180deg,
            white,
            #fbfdff
        );

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    -webkit-font-smoothing: antialiased;
}


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


button,
input {
    font: inherit;
}


button {
    cursor: pointer;
}


/* TOPBAR */

.topbar {
    height: 66px;

    padding:
        0
        52px;

    display: grid;

    grid-template-columns:
        310px
        1fr
        310px;

    align-items: center;

    color: white;

    background:
        linear-gradient(
            90deg,
            #01091a,
            #03132b,
            #01091a
        );
}


.brand {
    display: flex;
    align-items: center;

    gap: 9px;
}


.brand img {
    width: 60px;
    height: 31px;
}


.brand span {
    font-size: 20px;

    letter-spacing: .23em;
}


.brand b {
    color: var(--cyan);

    font-weight: inherit;
}


.topbar nav {
    height: 100%;

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

    gap: 42px;
}


.topbar nav a {
    position: relative;

    height: 100%;

    display: flex;
    align-items: center;

    font-size: 12px;
}


.topbar nav a.active::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 11px;

    height: 2px;

    border-radius: 99px;

    background: var(--cyan);
}


.top-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 14px;
}


.search-button {
    width: 35px;
    height: 35px;

    border: 0;

    color: white;

    background: transparent;

    font-size: 24px;
}


.login,
.create {
    height: 39px;

    padding:
        0
        23px;

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

    border-radius: 6px;
}


.login {
    border:
        1px solid
        #30415c;
}


.create {
    background: var(--gradient);
}


.logged-user {
    display: flex;
    align-items: center;

    gap: 9px;
}


.avatar-letter {
    width: 37px;
    height: 37px;

    display: grid;
    place-items: center;

    border:
        2px solid
        #0ed0cb;

    border-radius: 50%;

    color: #07d2cb;

    background: #0d243c;

    font-weight: 800;
}


.logged-user strong {
    display: block;

    font-size: 11px;
}


.logged-user small {
    display: block;

    margin-top: 3px;

    color: #1bd49c;

    font-size: 8px;
}


/* MAIN */

main {
    padding:
        25px
        52px
        38px;
}


/* HERO */

.hero {
    min-height: 152px;

    display: grid;

    grid-template-columns:
        1fr
        520px;

    align-items: center;

    gap: 50px;
}


.eyebrow {
    color: #079fd1;

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

    letter-spacing: .14em;
}


.hero h1 {
    margin:
        8px
        0
        8px;

    font-size: 46px;
    line-height: 1;

    letter-spacing: -.04em;
}


.hero h1 span {
    color: transparent;

    background: var(--gradient);

    -webkit-background-clip: text;
    background-clip: text;
}


.hero p {
    max-width: 730px;

    margin: 0;

    color: var(--muted);

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


.room-search {
    height: 52px;

    padding:
        0
        8px
        0
        17px;

    display: grid;

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

    align-items: center;

    gap: 5px;

    border:
        1px solid
        #cddfec;

    border-radius: 10px;

    background: white;

    box-shadow:
        0 8px 24px
        rgba(20,60,100,.05);
}


.room-search > span {
    color: #63819e;

    font-size: 20px;
}


.room-search input {
    border: 0;
    outline: 0;

    color: var(--text);

    background: transparent;
}


.room-search button {
    height: 38px;

    padding:
        0
        22px;

    border: 0;

    border-radius: 7px;

    color: white;

    background: var(--gradient);

    font-weight: 700;
}


/* LAYOUT */

.explore-layout {
    display: grid;

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

    gap: 23px;
}


/* FILTERS */

.filters-panel {
    padding:
        15px
        15px
        16px;

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

    border-radius: 12px;

    background: white;

    align-self: start;
}


.filter-head {
    display: flex;
    justify-content: space-between;

    gap: 10px;
}


.filter-head strong,
.filter-title {
    font-size: 12px;
}


.filter-head a {
    color: #078fcf;

    font-size: 9px;
}


.interest-list,
.community-list {
    margin-top: 9px;

    display: flex;
    flex-direction: column;

    gap: 3px;
}


.interest-list a,
.community-list a {
    min-height: 38px;

    padding:
        0
        10px;

    display: flex;
    align-items: center;

    gap: 9px;

    border-radius: 7px;

    color: #4f6786;

    font-size: 10px;
}


.interest-list a span,
.community-list a span {
    width: 20px;

    color: #128cc8;

    text-align: center;

    font-size: 16px;
}


.interest-list a:hover,
.community-list a:hover,
.interest-list a.selected,
.community-list a.selected {
    color: #087faa;

    background:
        linear-gradient(
            90deg,
            #eafcfa,
            #eef9ff
        );
}


.filter-divider {
    height: 1px;

    margin:
        15px
        0;

    background: #e5ecf4;
}


.profile-card {
    margin-top: 17px;

    padding:
        17px;

    border-radius: 10px;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(14,211,205,.20),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #051b31,
            #041120
        );

    color: white;
}


.profile-orbit {
    color: #12d6d0;

    font-size: 37px;
}


.profile-card strong {
    display: block;

    margin-top: 5px;

    font-size: 12px;
}


.profile-card p {
    margin:
        7px
        0;

    color: #aec4d4;

    font-size: 9px;
    line-height: 1.45;
}


.profile-card span,
.profile-card a {
    color: #12d6d0;

    font-size: 9px;
}


/* SECTIONS */

.rooms-column {
    min-width: 0;
}


.section-head {
    min-height: 48px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 15px;
}


.section-head h2 {
    margin: 0;

    font-size: 17px;
}


.section-head p {
    margin:
        5px
        0
        0;

    color: #71839d;

    font-size: 10px;
}


.section-arrows {
    display: flex;

    gap: 7px;
}


.section-arrows button,
.view-toggle {
    width: 32px;
    height: 32px;

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

    border-radius: 7px;

    color: #177fb8;

    background: white;
}


/* FEATURED */

.featured-grid {
    display: grid;

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

    gap: 12px;
}


.featured-room {
    overflow: hidden;

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

    border-radius: 11px;

    background: white;

    box-shadow:
        0 5px 14px
        rgba(10,45,80,.04);
}


.featured-image {
    position: relative;

    height: 145px;

    overflow: hidden;

    background:
        center /
        cover
        no-repeat;
}


.image-shade {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(1,10,20,.18),
            rgba(1,9,16,.75)
        );
}


.room-category {
    position: absolute;

    left: 13px;
    top: 12px;

    z-index: 2;

    color: #11d7d2;

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

    letter-spacing: .05em;
}


.match-pill {
    position: absolute;

    right: 10px;
    top: 9px;

    z-index: 2;

    padding:
        4px
        7px;

    border-radius: 99px;

    color: white;

    background:
        rgba(4,175,173,.88);

    font-size: 7px;
}


.featured-copy {
    position: absolute;

    left: 13px;
    right: 13px;
    bottom: 13px;

    z-index: 2;

    color: white;
}


.featured-copy h3 {
    margin:
        0
        0
        5px;

    font-size: 16px;
}


.featured-copy span {
    font-size: 8px;
}


.featured-bottom {
    min-height: 127px;

    padding:
        11px
        12px;
}


.featured-bottom p {
    min-height: 31px;

    margin:
        0
        0
        7px;

    color: #637793;

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


.room-tags {
    min-height: 24px;

    display: flex;
    flex-wrap: wrap;

    gap: 4px;
}


.room-tags span {
    padding:
        3px
        7px;

    border-radius: 99px;

    color: #487099;

    background: #eff6fd;

    font-size: 7px;
}


.join-room,
.enter-room {
    width: 100%;
    height: 31px;

    margin-top: 8px;

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

    border: 0;
    border-radius: 6px;

    color: white;

    background: var(--gradient);

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


.link-button {
    text-decoration: none;
}


/* ALL ROOMS */

.all-rooms {
    margin-top: 22px;
}


.room-grid {
    display: grid;

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

    gap: 11px;
}


.room-card {
    min-height: 145px;

    display: grid;

    grid-template-columns:
        120px
        1fr;

    overflow: hidden;

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

    border-radius: 10px;

    background: white;
}


.room-image {
    position: relative;

    overflow: hidden;
}


.room-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.online-dot {
    position: absolute;

    left: 8px;
    bottom: 8px;

    width: 17px;
    height: 17px;

    display: grid;
    place-items: center;

    border:
        2px solid
        white;

    border-radius: 50%;

    color: #17c887;

    background: white;

    font-size: 9px;
}


.room-body {
    padding:
        10px
        11px;
}


.room-card-top {
    min-height: 16px;

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

    gap: 8px;
}


.small-category {
    color: #078fc9;

    font-size: 7px;
}


.small-match {
    color: #10a97a;

    font-size: 7px;
}


.room-body h3 {
    margin:
        2px
        0
        4px;

    font-size: 12px;
}


.room-body > p {
    min-height: 27px;

    margin: 0;

    color: #677c98;

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


.room-meta {
    margin-top: 6px;

    display: flex;

    gap: 10px;

    color: #68809d;

    font-size: 7px;
}


.room-meta span:last-child {
    color: #12a976;
}


.room-footer {
    margin-top: 8px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}


.avatars {
    display: flex;
}


.avatars img {
    width: 22px;
    height: 22px;

    margin-right: -5px;

    border:
        2px solid
        white;

    border-radius: 50%;

    object-fit: cover;
}


.room-footer a,
.room-footer button {
    border: 0;

    color: #078dcd;

    background: transparent;

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


.no-results {
    padding:
        40px;

    border:
        1px dashed
        #cad9e8;

    border-radius: 10px;

    text-align: center;

    color: var(--muted);
}


/* PEOPLE */

.people-panel {
    align-self: start;

    padding:
        16px;

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

    border-radius: 12px;

    background: white;
}


.people-title {
    display: flex;
    justify-content: space-between;

    gap: 10px;
}


.people-title strong {
    display: block;

    font-size: 11px;
}


.people-title span {
    display: block;

    margin-top: 4px;

    color: #7c8ea7;

    font-size: 8px;
}


.people-title a {
    color: #078fce;

    font-size: 8px;
}


.people-list {
    margin-top: 8px;
}


.people-list article {
    min-height: 67px;

    display: grid;

    grid-template-columns:
        45px
        1fr
        27px;

    align-items: center;

    gap: 8px;

    border-bottom:
        1px solid
        #edf1f6;
}


.person-avatar {
    position: relative;

    width: 42px;
    height: 42px;
}


.person-avatar img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 50%;
}


.person-avatar span {
    position: absolute;

    right: 0;
    bottom: 1px;

    width: 9px;
    height: 9px;

    border:
        2px solid
        white;

    border-radius: 50%;

    background: #10c77f;
}


.people-list strong {
    display: block;

    font-size: 9px;
}


.people-list small {
    display: block;

    margin-top: 2px;

    color: #778ba6;

    font-size: 7px;
}


.match {
    display: block;

    margin-top: 3px;

    color: #099fc4;

    font-size: 7px;
}


.people-list button {
    width: 25px;
    height: 25px;

    border:
        1px solid
        #a7dcea;

    border-radius: 6px;

    color: #078fc9;

    background: white;
}


.people-divider {
    height: 1px;

    margin:
        14px
        0;

    background: #e8eef5;
}


.conversation-card {
    padding:
        15px;

    border-radius: 9px;

    color: white;

    background:
        radial-gradient(
            circle at 85% 20%,
            #12627b,
            transparent 45%
        ),
        linear-gradient(
            145deg,
            #06182b,
            #032033
        );
}


.conversation-icon {
    color: #13d7d1;

    font-size: 24px;
}


.conversation-card strong {
    display: block;

    margin-top: 7px;

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


.conversation-card p {
    margin:
        7px
        0;

    color: #aec2d2;

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


.conexya-small {
    color: #11d6cf;

    font-size: 8px;

    letter-spacing: .1em;
}


.rules-card {
    margin-top: 11px;

    padding:
        12px;

    border:
        1px solid
        #e2eaf3;

    border-radius: 8px;

    background: #fbfdff;
}


.rules-card strong {
    font-size: 10px;
}


.rules-card p {
    margin:
        5px
        0;

    color: #6d829e;

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


.rules-card span {
    color: #099f94;

    font-size: 8px;
}


/* RESPONSIVE */

@media (max-width: 1450px) {

    .topbar {
        padding:
            0
            30px;
    }

    main {
        padding:
            24px
            30px;
    }

    .explore-layout {
        grid-template-columns:
            205px
            minmax(0,1fr)
            245px;
    }

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

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

}


@media (max-width: 1120px) {

    body {
        min-width: 0;
    }

    .topbar {
        grid-template-columns:
            1fr
            auto;
    }

    .topbar nav {
        display: none;
    }

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

    .room-search {
        width: 100%;
    }

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

    .filters-panel {
        display: none;
    }

    .people-panel {
        display: none;
    }

}


@media (max-width: 700px) {

    .topbar {
        padding:
            0
            15px;
    }

    .brand span {
        font-size: 15px;
    }

    .brand img {
        width: 48px;
    }

    .search-button,
    .login {
        display: none;
    }

    .create {
        padding:
            0
            13px;
    }

    main {
        padding:
            21px
            15px;
    }

    .hero h1 {
        font-size: 38px;
    }

    .featured-grid,
    .room-grid {
        grid-template-columns: 1fr;
    }

    .room-card {
        grid-template-columns:
            110px
            1fr;
    }

}