.tits-guest-pass {
    width:
        min(
            1450px,
            calc(
                100% - 32px
            )
        );

    margin:
        30px auto 60px;

    color:
        #eeeeee;
}


.tits-guest-pass-hero {
    padding:
        30px;

    background:
        #101010;

    border:
        1px solid #333333;

    border-top:
        6px solid #ffd400;
}


.tits-guest-pass-kicker {
    color:
        #ffd400;

    font-weight:
        900;

    letter-spacing:
        .15em;
}


.tits-guest-pass-hero h1 {
    margin:
        5px 0 12px;

    color:
        #ffffff;

    font-size:
        clamp(
            42px,
            7vw,
            78px
        );

    line-height:
        1;
}


.tits-guest-pass-hero p {
    font-size:
        18px;

    line-height:
        1.55;
}


.tits-guest-pass-rule {
    color:
        #bbbbbb;
}


.tits-guest-pass-create {
    margin-top:
        12px;

    appearance:
        none;

    border:
        0;

    border-radius:
        8px;

    padding:
        15px 22px;

    background:
        #ffd400;

    color:
        #050505;

    font-weight:
        900;

    font-size:
        17px;

    cursor:
        pointer;
}


.tits-guest-pass-created {
    margin:
        18px 0;

    padding:
        20px;

    background:
        #ffd400;

    color:
        #000000;
}


.tits-guest-pass-created code {
    margin-left:
        10px;

    font-size:
        22px;

    font-weight:
        900;
}


.tits-guest-pass-card {
    margin:
        16px 0;

    padding:
        22px;

    background:
        #101010;

    border:
        1px solid #353535;

    border-left:
        5px solid #ffd400;
}


.tits-guest-pass-card-top {
    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        14px;
}


.tits-guest-pass-card-top code {
    color:
        #ffd400;

    font-size:
        24px;

    font-weight:
        900;
}


.tits-guest-pass-status {
    padding:
        7px 10px;

    border:
        1px solid #555555;

    border-radius:
        6px;

    font-size:
        12px;

    font-weight:
        900;
}


.status-active {
    color:
        #ffd400;
}


.status-used,
.status-expired {
    color:
        #aaaaaa;
}


.tits-guest-pass-meta {
    display:
        grid;

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

    gap:
        10px;

    margin:
        18px 0;
}


.tits-guest-pass-meta div {
    padding:
        12px;

    background:
        #070707;

    border:
        1px solid #333333;
}


.tits-guest-pass-meta b {
    display:
        block;

    margin-bottom:
        4px;

    color:
        #888888;

    text-transform:
        uppercase;

    font-size:
        12px;
}


.tits-guest-pass-link-label {
    display:
        block;

    font-weight:
        900;
}


.tits-guest-pass-link-label input {
    display:
        block;

    width:
        100%;

    box-sizing:
        border-box;

    margin-top:
        8px;

    padding:
        12px;

    background:
        #050505;

    color:
        #ffffff;

    border:
        1px solid #444444;

    border-radius:
        7px;
}


.tits-guest-pass-revoke-form {
    margin-top:
        14px;
}


.tits-guest-pass-revoke {
    appearance:
        none;

    padding:
        10px 14px;

    border:
        1px solid #555555;

    border-radius:
        7px;

    background:
        #181818;

    color:
        #ffffff;

    font-weight:
        900;

    cursor:
        pointer;
}


.tits-guest-pass-revoke:hover {
    border-color:
        #ffd400;

    color:
        #ffd400;
}


.tits-guest-pass-owner-link {
    margin:
        22px 0;
}


.tits-guest-pass-owner-link a {
    display:
        inline-block;

    padding:
        12px 18px;

    border:
        2px solid #ffd400;

    color:
        #ffd400;

    text-decoration:
        none;

    font-weight:
        900;
}


.tits-guest-pass-owner-link a:hover {
    background:
        #ffd400;

    color:
        #000000;
}


.tits-guest-pass-empty {
    margin-top:
        16px;

    padding:
        30px;

    background:
        #111111;

    border:
        1px solid #333333;

    text-align:
        center;
}


@media (
    max-width: 760px
) {

    .tits-guest-pass {
        width:
            calc(
                100% - 16px
            );
    }


    .tits-guest-pass-meta {
        grid-template-columns:
            1fr;
    }


    .tits-guest-pass-card-top {
        align-items:
            flex-start;

        flex-direction:
            column;
    }
}