body{
    font-family:Segoe UI;
    background:#f8fafc;
    margin:0;
    padding:20px;
}

.header{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.logo img{
    width:120px;
}

.title-area{
    text-align:center;
}

.title-area h1{
    color:#0f2d68;
    margin:0;
}

.summary{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
    margin:25px 0;
}

.card{
    background:white;
    padding:20px;
    border-radius:12px;
    text-align:center;
    box-shadow:0 2px 8px rgba(0,0,0,.1);
}

.available h3{
    color:#16a34a;
}

.sold h3{
    color:#dc2626;
}

.booked h3{
    color:#ea580c;
}

.layout{
    display:flex;
    gap:20px;
}

.sidebar{
    width:180px;
}

.sidebar button{
    width:100%;
    padding:15px;
    margin-bottom:10px;
    border:none;
    background:#173c7d;
    color:white;
    border-radius:8px;
    cursor:pointer;
}

.floor-plan{
    flex:1;
    display:grid;
    grid-template-columns:1fr 120px 1fr;
    border:3px solid #222;
}

#eastSide,
#westSide{
    display:flex;
    flex-direction:column;
}

.flat{
    height:120px;
    border-bottom:1px solid #222;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}

.flat:last-child{
    border-bottom:none;
}

.east{
    background:#edf9ee;
}

.west{
    background:#edf5ff;
}

.corridor{
    background:#fff4cf;
    border-left:2px solid #222;
    border-right:2px solid #222;
    writing-mode:vertical-rl;
    display:flex;
    justify-content:center;
    align-items:center;
    font-weight:bold;
    letter-spacing:4px;
}

.badge{
    padding:6px 12px;
    border-radius:5px;
    color:white;
    margin-top:10px;
}

.available-badge{
    background:#16a34a;
}

.sold-badge{
    background:#dc2626;
}

.booked-badge{
    background:#ea580c;
}