* {
    box-sizing: border-box;
}

body {

    margin: 0;

    background: linear-gradient(
        180deg,
        #0B1A2A 0%,
        #15283A 100%
    );

    color: #FFFFFF;

    font-family:
        "PingFang SC",
        "Microsoft YaHei",
        sans-serif;

    min-height: 100vh;
}

a {

    color: #D4AF37;

    text-decoration: none;
}

.container {

    width: 1180px;

    margin: auto;

    padding: 40px 20px;
}

.topbar {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 40px;
}

.logo {

    font-size: 34px;

    font-weight: 700;

    letter-spacing: 2px;
}

.nav {

    display: flex;

    gap: 24px;
}

.btn {

    border: none;

    border-radius: 12px;

    padding: 12px 22px;

    cursor: pointer;

    background: #D4AF37;

    color: white;

    font-size: 14px;

    transition: .2s;
}

.btn:hover {

    transform: translateY(-2px);
}

.best-cloud {

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

    border: 1px solid rgba(212,175,55,.5);

    border-radius: 24px;

    overflow: hidden;

    margin-bottom: 50px;

    backdrop-filter: blur(10px);
}

.best-cloud img {

    width: 100%;

    max-height: 650px;

    object-fit: cover;
}

.best-body {

    padding: 30px;
}

.best-title {

    color: #D4AF37;

    font-size: 26px;

    margin-bottom: 18px;
}

.grid {

    display: grid;

    grid-template-columns:

        repeat(
            auto-fill,
            minmax(320px, 1fr)
        );

    gap: 24px;
}

.card {

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

    border-radius: 20px;

    overflow: hidden;

    transition: .25s;

    backdrop-filter: blur(8px);
}

.card:hover {

    transform: translateY(-6px);
}

.card img {

    width: 100%;

    height: 260px;

    object-fit: cover;
}

.card-body {

    padding: 18px;
}

.card-text {

    line-height: 1.8;

    margin-bottom: 16px;
}

.card-footer {

    display: flex;

    justify-content: space-between;

    align-items: center;
}

.meta {

    color: #B0C4DE;

    font-size: 14px;
}

.form-box {

    width: 700px;

    margin: 40px auto;

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

    border-radius: 20px;

    padding: 30px;
}

input,
textarea {

    width: 100%;

    padding: 14px;

    border-radius: 12px;

    border: none;

    background: #1A2A3A;

    color: white;

    margin-bottom: 18px;

    font-size: 15px;
}

textarea {

    resize: none;

    height: 120px;
}

.profile-stat {

    display: flex;

    gap: 40px;

    margin-bottom: 30px;
}

.stat-box {

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

    border-radius: 18px;

    padding: 25px;

    min-width: 220px;
}