main .primary {
    max-width: 1000px;
    margin: 0 auto;
    padding: 1rem;
}

.guild-card {
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    background-color: var(--card);
    border: 1px solid var(--border);
    overflow: hidden;
    position: relative;
    text-decoration: none;
}

.card-top {
    height: 80px;
    background-color: var(--background-alt);
    position: relative;
}

.guild-card .server-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    position: absolute;
    bottom: -28px;
    left: 16px;
    border: 4px solid var(--card);
    background-color: var(--secondary-foreground);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2em;
    color: var(--foreground);
}

.card-body {
    padding: 32px 16px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.server-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.server-name {
    font-size: 1.05em;
    color: var(--foreground);
}

.nsfw {
    font-size: 1.2em;
    font-weight: bold;
    margin-left: 8px;
    color: var(--destructive);
}

.server-members {
    font-size: 0.95em;
    color: var(--muted-foreground);
    display: flex;
    align-items: center;
    gap: 4px;
}

.server-members i {
    font-size: 0.7rem;
    margin-right: 2px;
}

.server-summary {
    color: var(--muted-foreground);
    font-size: 0.95em;
}

.card-lower {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px 16px 16px;
    margin-top: auto;
    gap: 8px;
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.tag {
    background-color: var(--background-alt);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.8em;
    cursor: pointer;
    color: var(--primary);
    border: 1px solid var(--border);
    margin: 0;
    text-decoration: none;
}

.actions {
    display: flex;
    gap: 4px;
}

.listings {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
}

.red .join-button {
    background: linear-gradient(145deg, #d54545 0%, #822020 100%)
}

.red .tag {
    border: 1px solid #be3636;
    background-color: #442e2f;
    color: var(--secondary-foreground);
}

.red .description h1,
.red .description h2,
.red .description h3,
.red .description h4,
.red .description a {
    color: #be3636
}

.orange .join-button {
    background: linear-gradient(145deg, #ea8d23 0%, #ad6903 100%)
}

.orange .tag {
    border: 1px solid #d97706;
    background-color: #453314;
    color: var(--secondary-foreground);
}

.orange .description h1,
.orange .description h2,
.orange .description h3,
.orange .description h4,
.orange .description a {
    color: #d97706
}

.yellow .join-button {
    background: linear-gradient(145deg, #de9e14 0%, #b37804 100%)
}

.yellow .tag {
    border: 1px solid #ca8a04;
    background-color: #444014;
    color: var(--secondary-foreground);
}

.yellow .description h1,
.yellow .description h2,
.yellow .description h3,
.yellow .description h4,
.yellow .description a {
    color: #ca8a04
}

.green .join-button {
    background: linear-gradient(145deg, #28bd5f 0%, #148a3b 100%)
}

.green .tag {
    border: 1px solid #2cd46a;
    background-color: #1d3b2a;
    color: var(--secondary-foreground);
}

.green .description h1,
.green .description h2,
.green .description h3,
.green .description h4,
.green .description a {
    color: #2cd46a
}

.purple .join-button {
    background: linear-gradient(145deg, #9333ea 0%, #6420a3 100%)
}

.purple .tag {
    border: 1px solid #9333ea;
    background-color: #3a1e4a;
    color: var(--secondary-foreground);
}

.purple .description h1,
.purple .description h2,
.purple .description h3,
.purple .description h4,
.purple .description a {
    color: #9333ea
}

.pink .join-button {
    background: linear-gradient(145deg, #e74e93 0%, #d2387f 100%)
}

.pink .tag {
    border: 1px solid #e74e93;
    background-color: #451a2d;
    color: var(--secondary-foreground);
}

.pink .description h1,
.pink .description h2,
.pink .description h3,
.pink .description h4,
.pink .description a {
    color: #e74e93
}

.server-icon.square {
    border-radius: 25% !important
}

.white .description h1,
.white .description h2,
.white .description h3,
.white .description h4,
.white .description a {
    color: #fff
}

.white .join-button {
    background-color: #fff;
    color: #000
}

.white .tag {
    border: 1px solid #b4b4b4;
    background-color: #dbdbdb;
    color: #333
}

.black .description h1,
.black .description h2,
.black .description h3,
.black .description h4,
.black .description a {
    color: #fff
}

.black .join-button {
    background: #000;
    color: #fff
}

.black .tag {
    border: 1px solid #151515;
    background-color: #000000;
    color: #ddd
}

@media (max-width: 900px) {
    .listings {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .listings {
        grid-template-columns: 1fr;
    }
}

.search-container {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    flex-wrap: wrap;
}

.search-container .options {
    width: fit-content;
    height: 42px;
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.5rem;
    color: var(--muted-foreground);
    font-size: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.5rem;
}

.search-container select {
    width: fit-content;
    height: 42px;
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.5rem;
    color: var(--muted-foreground);
    font-size: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.search-balloon {
    display: flex;
    flex-grow: 1;
    height: 42px;
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.search-balloon input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 1rem;
    color: var(--foreground);
    outline: none;
}

.search-balloon input::placeholder {
    color: var(--muted-foreground);
}

.search-balloon button {
    background: none;
    border: none;
    color: var(--foreground);
    font-size: 1rem;
    cursor: pointer;
}