:root{--bg-color:#fdf6e3;--text-color:#5c4d4d;--roof-color:#ffa1a1;--room-upper-front:#fff5ba;--room-upper-back:#bdf2d5;--room-lower-front:#c4d7ff;--room-lower-back:#ffd4e5;--border-color:#8c7a7a;--shadow-color:rgba(140,122,122,.15);--status-online:#52c41a;--status-offline:#ff4d4f;--status-loading:#faad14}*{box-sizing:border-box;margin:0;padding:0}body{font-family:'Nunito',sans-serif;background-color:var(--bg-color);color:var(--text-color);display:flex;flex-direction:column;align-items:center;min-height:100vh;padding:2rem}header{text-align:center;margin-bottom:3rem}h1{font-size:2.5rem;font-weight:900;color:#ff7b9c;text-shadow:2px 2px 0 rgba(255,123,156,.2);margin-bottom:.5rem}.subtitle{font-size:1.1rem;font-weight:700;color:#8fa1b3}#last-update-time{color:#5abcb9}.property-container{display:flex;flex-direction:row;align-items:flex-end;justify-content:center;gap:3rem;width:100%;max-width:1000px}.house-container{display:flex;flex-direction:column;align-items:center;flex:1}.roof{width:0;height:0;border-left:420px solid transparent;border-right:420px solid transparent;border-bottom:150px solid var(--roof-color);margin-bottom:-10px;position:relative;z-index:10;filter:drop-shadow(0 -5px 15px var(--shadow-color))}.house-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:1.5rem;background-color:#fff;padding:2rem;border-radius:20px;border:4px solid var(--border-color);box-shadow:10px 10px 0 var(--shadow-color);width:100%}.room{border-radius:15px;padding:1.5rem;border:3px solid var(--border-color);display:flex;flex-direction:column;justify-content:space-between;min-height:200px;transition:transform .3s cubic-bezier(.175,.885,.32,1.275) , box-shadow .3s ease}.room:hover{transform:translateY(-5px);box-shadow:5px 5px 0 var(--shadow-color)}.upper-front{background-color:var(--room-upper-front)}.upper-back{background-color:var(--room-upper-back)}.lower-front{background-color:var(--room-lower-front)}.lower-back{background-color:var(--room-lower-back)}.room-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;border-bottom:2px dashed rgba(0,0,0,.1);padding-bottom:.5rem}h2{font-size:1.3rem;font-weight:800}.status-indicator{width:16px;height:16px;border-radius:50%;background-color:var(--status-loading);border:2px solid var(--border-color);box-shadow:0 0 5px rgba(0,0,0,.1);transition:background-color .3s ease}.status-indicator.online{background-color:var(--status-online);box-shadow:0 0 10px var(--status-online)}.status-indicator.offline{background-color:var(--status-offline)}.sensor-info{flex-grow:1;display:flex;flex-direction:column;justify-content:center;gap:1rem}.sensor-info.empty{align-items:center;justify-content:center;font-weight:700;color:rgba(0,0,0,.3);text-align:center}.data-group{display:flex;justify-content:space-between;align-items:center;background-color:rgba(255,255,255,.5);padding:.8rem 1rem;border-radius:10px;font-weight:700}.label{font-size:1rem;color:var(--text-color)}.value{font-size:1.4rem;font-weight:900}#temp-rajawali,#temp-rajawaliving,#temp-rajawali25{color:#ff6b6b}#hum-rajawali,#hum-rajawaliving,#hum-rajawali25{color:#4dabf7}.gate-container{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;margin-bottom:2rem}.gate-title{font-size:1.2rem;font-weight:800;color:var(--border-color);margin-bottom:1rem}.gate-structure{width:160px;height:140px;border:8px solid var(--border-color);border-bottom:none;border-radius:20px 20px 0 0;display:flex;position:relative;background-color:rgba(255,255,255,.3);box-shadow:10px 10px 0 var(--shadow-color);perspective:500px}.gate-door{width:50%;height:100%;border:4px solid var(--border-color);background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 15px,
        var(--border-color) 15px,
        var(--border-color) 22px
    );transition:transform .8s cubic-bezier(.175,.885,.32,1.275)}.gate-door.left-door{transform-origin:left;border-right:2px solid var(--border-color)}.gate-door.right-door{transform-origin:right;border-left:2px solid var(--border-color)}.gate-structure.open .left-door{transform:rotateY(-80deg)}.gate-structure.open .right-door{transform:rotateY(80deg)}.gate-status-text{margin-top:1.5rem;font-weight:800;font-size:1.1rem;color:var(--text-color);background-color:#fff;padding:.5rem 1rem;border-radius:10px;border:3px solid var(--border-color);box-shadow:5px 5px 0 var(--shadow-color)}.compound-area{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;margin-bottom:2rem;padding:0 1rem;min-width:150px}.significance-banner{background-color:#ffd4e5;color:#c92a2a;padding:.8rem 1.2rem;border-radius:10px;font-weight:800;margin-bottom:1.5rem;border:3px solid #ff87b3;text-align:center;box-shadow:3px 3px 0 var(--shadow-color);animation:bounce 2s infinite}@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}.compound-items{display:flex;flex-direction:column;align-items:center;gap:1.5rem}.vehicles-container{display:flex;gap:1rem;font-size:3.5rem}.vehicle{transition:transform .3s;filter:drop-shadow(2px 2px 0 var(--shadow-color))}.vehicle:hover{transform:scale(1.1) rotate(-5deg)}.package-container{display:flex;align-items:center;gap:.5rem;background-color:#fff5ba;padding:.5rem 1rem;border-radius:8px;border:3px dashed #e6c822;font-weight:800;color:#8c7a7a;box-shadow:2px 2px 0 var(--shadow-color)}.package-icon{font-size:1.5rem}.hidden{display:none!important}.gate-time{margin-top:.5rem;font-size:.9rem;font-weight:700;color:#8fa1b3}@media (max-width:900px){.property-container{flex-direction:column;align-items:center}.roof{border-left:200px solid transparent;border-right:200px solid transparent;border-bottom:100px solid var(--roof-color)}.house-grid{grid-template-columns:1fr;grid-template-rows:auto}.gate-container{margin-top:2rem}}