* {
    box-sizing: border-box;
}

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

body {
    overflow: hidden;
    background:
        radial-gradient(
            circle at 70% 25%,
            #24372f 0,
            #13211c 30%,
            #07100d 70%
        );

    color: #ffffff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}

.screen {
    width: 100vw;
    height: 100vh;

    padding:
        5vh
        5vw
        4vh;

    display: flex;
    flex-direction: column;
}

.topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.property {
    font-size: 3vw;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.subtitle {
    margin-top: 1vh;

    font-size: 1.4vw;

    color: rgba(
        255,
        255,
        255,
        0.62
    );
}

.clock {
    font-size: 1.6vw;
    font-weight: 600;

    color: rgba(
        255,
        255,
        255,
        0.78
    );
}

.main-card {
    flex: 1;

    margin-top: 5vh;

    display: grid;

    grid-template-columns:
        35%
        65%;

    border: 1px solid rgba(
        255,
        255,
        255,
        0.10
    );

    border-radius: 2.2vw;

    background: rgba(
        255,
        255,
        255,
        0.055
    );

    backdrop-filter: blur(16px);

    overflow: hidden;
}

.room-column {
    padding: 6vh 4vw;

    display: flex;
    flex-direction: column;
    justify-content: center;

    border-right: 1px solid rgba(
        255,
        255,
        255,
        0.10
    );
}

.eyebrow,
.section-label {
    font-size: 1.3vw;

    letter-spacing: 0.18em;

    color: rgba(
        255,
        255,
        255,
        0.54
    );
}

.room-number {
    margin-top: 1.2vh;

    font-size: 12vw;
    line-height: 0.9;

    font-weight: 700;

    letter-spacing: -0.07em;
}

.status-badge {
    width: fit-content;

    margin-top: 4vh;

    padding:
        1.2vh
        1.5vw;

    border-radius: 100px;

    background: rgba(
        110,
        215,
        154,
        0.17
    );

    color: #9bf0bd;

    font-size: 1.45vw;
    font-weight: 700;

    letter-spacing: 0.06em;
}

.cleaning-column {
    padding:
        6vh
        5vw;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.staff-row {
    margin-top: 4vh;

    display: flex;
    align-items: center;

    gap: 2.5vw;
}

.staff-photo {
    width: 9vw;
    height: 9vw;

    min-width: 9vw;

    border-radius: 50%;

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

    background: rgba(
        255,
        255,
        255,
        0.12
    );

    overflow: hidden;

    font-size: 4vw;
    font-weight: 700;
}

.staff-photo img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.staff-name {
    font-size: 4vw;
    font-weight: 700;

    letter-spacing: -0.035em;
}

.cleaning-time {
    margin-top: 1.2vh;

    font-size: 1.8vw;

    color: rgba(
        255,
        255,
        255,
        0.75
    );
}

.cleaning-type {
    margin-top: 0.8vh;

    font-size: 1.35vw;

    color: rgba(
        255,
        255,
        255,
        0.46
    );
}

.recleaning-card {
    margin-top: 4vh;

    padding:
        2.3vh
        2vw;

    border-radius: 1.2vw;

    background: rgba(
        236,
        183,
        83,
        0.10
    );

    border: 1px solid rgba(
        236,
        183,
        83,
        0.24
    );
}

.recleaning-label {
    font-size: 1vw;

    letter-spacing: 0.13em;

    color: #eac576;
}

.recleaning-name {
    margin-top: 1vh;

    font-size: 2vw;
    font-weight: 700;
}

.recleaning-time {
    margin-top: 0.5vh;

    font-size: 1.2vw;

    color: rgba(
        255,
        255,
        255,
        0.58
    );
}

.hidden {
    display: none;
}

footer {
    padding-top: 3vh;

    display: flex;
    justify-content: space-between;

    font-size: 1.1vw;

    color: rgba(
        255,
        255,
        255,
        0.38
    );
}

.version {
    text-align: right;
}