.stage {
    background: linear-gradient(to right, #e8cfc1, #f6e6dd);
    font-weight: bold;
    letter-spacing: 2px;
}

.theatre-viewport {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.theatre-scroll {
    flex: 1;
    overflow: auto;
    min-height: 0;
}

.theatre {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
}

.seat-row {
    display: flex;
    align-items: center;
    gap: 2px;
    transition: transform 0.2s ease;
}

.seat-row.raised {
    margin-top: 7px;
}

.row-label {
    font-weight: bold;
    text-align: left;
}

.seats {
    display: flex;
    flex-wrap: nowrap;
    gap: 2px;
}

.seat {
    width: 25px;
    height: 25px;
    border-radius: 5px;
    border: none;
    background: #f3dcd2;
    transition: all 0.2s ease;
}

.seat:hover {
    background: #d8b4a0;
    transform: scale(1.08);
}

.seat.reserved {
    background: #c8c8c8;
    cursor: not-allowed;
}

.seat.selected {
    background: #ffad00;
}

.seat.P1 {
    background: rgba(193, 20, 89, 0.81);
}
.seat.P2 {
    background: rgba(65, 105, 225, 0.9);
}
.seat.P3 {
    background: rgba(90, 90, 96, 0.82);
}

.balcony-seat {
    background: #e3d7f4;
}