:root { 
    --wall: #1e272e; 
    --door: #d35400; 
    --window: #3498db; 
    --light: #f1c40f; 
    --exit: #e74c3c; 
    --entry: #2ecc71; 
    --grass: #a2ddb8; 
    --plug: #8e44ad; 
    --sun: #f39c12;
}

body { 
    background-color: #f1f2f6; 
    font-family: 'Inter', sans-serif; 
    font-size: 14px; /* Sedikit lebih besar untuk kenyamanan baca */
}

/* SIDEBAR RESPONSIVE */
.sidebar { 
    background: #ffffff; 
    border-right: 1px solid #dcdde1; 
    padding: 20px; 
}

/* Membuat sidebar melayang di layar lebar */
@media (min-width: 768px) {
    .sidebar {
        height: 100vh;
        position: sticky;
        top: 0;
        overflow-y: auto;
    }
}

.sidebar-sticky {
    padding-bottom: 2rem;
}

/* CANVAS RESPONSIVE */
.canvas-area { 
    padding: 15px; /* Lebih kecil di mobile */
}

@media (min-width: 768px) {
    .canvas-area { padding: 30px; }
}

#captureZone { 
    background: #fff; 
    padding: 20px; 
    border: 1px solid #2f3640; 
    border-radius: 8px; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.05); 
    min-height: 500px; /* Lebih pendek di mobile */
    position: relative; 
    width: 100%;
}

@media (min-width: 768px) {
    #captureZone { 
        padding: 40px; 
        min-height: 1200px; 
        border: 2px solid #2f3640;
    }
}

/* SVG SCALING */
.svg-container {
    width: 100%;
    overflow: hidden;
}

#blueprint { 
    width: 100%; 
    height: auto; 
    display: none; 
}

/* TYPOGRAPHY ADAPTIVE */
.h3-md { font-size: 1.5rem; }
@media (max-width: 767px) {
    h3 { font-size: 1.1rem !important; }
    .x-small { font-size: 0.7rem; }
}

/* ELEMENTS */
.room-box { 
    stroke: var(--wall); 
    stroke-width: 3; 
    transition: all 0.5s ease; 
}

.label-text { 
    font-size: 10px; 
    font-weight: 800; 
    fill: #2f3640; 
    text-anchor: middle; 
    text-transform: uppercase; 
    pointer-events: none; 
}

.status-panel { 
    background: #2f3640; 
    color: #00d2d3; 
    padding: 12px; 
    border-radius: 8px; 
    font-family: 'Monaco', monospace; 
    margin-bottom: 20px; 
    font-size: 10px; 
}

.legend { 
    font-size: 11px; 
    display: grid; 
    grid-template-columns: 1fr; /* 1 kolom di mobile */
    gap: 8px; 
}

@media (min-width: 400px) {
    .legend { grid-template-columns: 1fr 1fr; } /* 2 kolom di tablet/desktop */
}

.dot { 
    width: 12px; 
    height: 12px; 
    border-radius: 3px; 
    flex-shrink: 0;
}

.placeholder-view {
    text-align: center;
}

/* TOUCH TARGETS */
@media (max-width: 767px) {
    .form-select, .form-control, .btn {
        min-height: 45px; /* Lebih mudah ditekan jari */
    }
}