* { box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
body { margin: 0; background-color: #f4f7f6; color: #333; overflow: hidden; }

:root { --icon-scale: 1; }

.app-container { display: flex; height: 100vh; width: 100vw; position: relative; }

.zoom-controls {
    position: absolute; top: 20px; right: 30px;
    background: white; padding: 8px 15px; border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15); border: 1px solid #bdc3c7;
    display: flex; align-items: center; gap: 8px; z-index: 1000;
}
.zoom-controls span { font-size: 1.2rem; cursor: help; }
.zoom-controls input[type="range"] { width: 100px; cursor: pointer; accent-color: #3498db; }

.toolbar {
    width: 270px; min-width: 270px; background-color: #2c3e50; color: white;
    padding: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 1000;
    overflow-y: auto; box-shadow: 2px 0 10px rgba(0,0,0,0.2);
}
.toolbar h2 { margin-top: 10px; margin-bottom: 2px; font-size: 1rem; color: #ecf0f1; border-bottom: 1px solid #34495e; padding-bottom: 5px; }
.toolbar button, .custom-file-upload { 
    background-color: #3498db; color: white; border: none; text-align: left; 
    padding: 8px 10px; border-radius: 5px; cursor: pointer; font-size: 0.9rem; transition: 0.2s; display: block;
}
.toolbar button:hover, .custom-file-upload:hover { background-color: #2980b9; }

#fileInput { display: none; }
.single-scale-box { background: rgba(0,0,0,0.2); padding: 10px; border-radius: 5px; margin-bottom: 5px; display: flex; flex-direction: column; gap: 5px; }
.single-scale-box label { font-size: 0.8rem; font-weight: bold; color: #ecf0f1; }
.single-scale-box input[type="range"] { cursor: pointer; accent-color: #e67e22; width: 100%; }
.single-scale-box input:disabled { opacity: 0.3; cursor: not-allowed; }

.delete-btn { background-color: #e67e22 !important; text-align: center !important; margin-top: 5px;}
.delete-btn:hover { background-color: #d35400 !important; }
.reset-btn { background-color: #e74c3c !important; text-align: center !important; }
.reset-btn:hover { background-color: #c0392b !important; }
.active-mode { background-color: #f39c12 !important; }

.hints-box { font-size: 0.8rem; color: #bdc3c7; margin-top: auto; background: rgba(0,0,0,0.2); padding: 10px; border-radius: 5px;}
.hints-box p { margin: 0 0 5px 0; }
.hints-box ul { padding-left: 20px; margin: 0; }

.office-viewport { flex-grow: 1; position: relative; overflow: auto; background-color: #e8ecef; }
.office-area { min-width: 100%; min-height: 100%; position: relative; overflow: hidden; background-image: radial-gradient(#d1d8e0 1px, transparent 1px); background-size: 20px 20px; background-color: #f4f7f6; transition: min-width 0.2s, min-height 0.2s; }
.office-title { position: absolute; top: 10px; left: 20px; color: #7f8c8d; opacity: 0.5; z-index: 1; pointer-events: none; }

.room { position: absolute; border: 4px solid #7f8c8d; background-color: rgba(189, 195, 199, 0.15); z-index: 1; pointer-events: none; }
.room.selected-element { border-color: #3498db; background-color: rgba(52, 152, 219, 0.2); outline: none; box-shadow: none; z-index: 2; }

.wall { position: absolute; height: 8px; background-color: #34495e; border-radius: 4px; transform-origin: left center; z-index: 2; cursor: pointer; }
.wall.selected-element { background-color: #e74c3c; box-shadow: 0 0 10px rgba(231, 76, 60, 0.8); outline: none; z-index: 102; }

.desk { 
    position: absolute; width: 140px; height: 80px; background-color: #d35400; border-radius: 4px; 
    border: 2px solid #a04000; box-shadow: 2px 2px 5px rgba(0,0,0,0.2); cursor: grab; z-index: 3; user-select: none; 
    transform: scale(calc(var(--icon-scale) * var(--local-scale, 1))); transform-origin: center center;
}
.desk:active { cursor: grabbing; z-index: 100; }

#cablesLayer { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 5; }
#animationLayer { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 105; width: 100%; height: 100%; }

.device { 
    width: 90px; background: white; padding: 8px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.2); 
    display: inline-flex; flex-direction: column; align-items: center; cursor: grab; position: absolute; user-select: none; z-index: 10; border: 2px solid transparent;
    transform: scale(calc(var(--icon-scale) * var(--local-scale, 1))); transform-origin: center center;
}
.device[data-type="server"] { width: 110px; border: 2px solid #2c3e50; background: #ecf0f1;}
.device[data-type="router"] { border-radius: 50%; width: 100px; height: 100px; border: 3px solid #8e44ad; justify-content: center;}
.device:active { cursor: grabbing; z-index: 101; }
.device-icon { font-size: 1.8rem; pointer-events: none; }
.device-name { font-size: 0.75rem; margin-top: 5px; font-weight: bold; text-align: center; pointer-events: none; }

.badges { position: absolute; top: -8px; left: -5px; display: flex; gap: 2px; }
.badge { color: white; font-size: 0.6rem; padding: 2px 4px; border-radius: 3px; }
.bg-wifi { background: #3498db; }
.bg-vlan { background: #9b59b6; }
.bg-ports { background: #34495e; }

.selected-element { outline: 3px solid #3498db; box-shadow: 0 0 15px rgba(52, 152, 219, 0.6); z-index: 102; }

.status-light { width: 14px; height: 14px; border-radius: 50%; position: absolute; top: -5px; right: -5px; background-color: #e74c3c; border: 2px solid white; z-index: 10; }
.status-light.connected { background-color: #2ecc71; }
.status-light.conflict { background-color: #f1c40f; }
.status-light.nolink { background-color: #95a5a6; }

body.cable-mode .office-area { cursor: crosshair; }
body.wall-mode .office-area { cursor: crosshair; }
body.room-mode .office-area { cursor: crosshair; }

.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); justify-content: center; align-items: center; z-index: 2000; overflow-y: auto;}
.modal-content { background: white; padding: 25px; border-radius: 10px; width: 400px; display: flex; flex-direction: column; gap: 6px; margin: auto;}
.modal-content input[type="text"], .modal-content input[type="number"] { padding: 5px; border: 1px solid #ccc; border-radius: 4px; }
.quick-toggles { display: flex; gap: 10px; background: #e8f4f8; padding: 10px; border-radius: 5px; margin-bottom: 5px; font-size: 0.85rem;}
.modal-content label { font-size: 0.8rem; font-weight: bold; color: #34495e; margin-top: 3px;}
.save-btn, .close-btn { color: white; border: none; padding: 8px; cursor: pointer; border-radius: 5px; margin-top: 5px; font-weight: bold;}
.save-btn { background-color: #2ecc71; } .close-btn { background-color: #e74c3c; }

.terminal { background-color: #0c0c0c; color: #0f0; font-family: 'Courier New', Courier, monospace; font-size: 0.85rem; border-radius: 5px; padding: 10px; height: 160px; display: flex; flex-direction: column; box-shadow: inset 0 0 10px rgba(0,0,0,0.8); }
.terminal-output { flex-grow: 1; overflow-y: auto; white-space: pre-wrap; line-height: 1.3; margin-bottom: 5px;}
.terminal-input-line { display: flex; align-items: center; }
.terminal-input-line span { margin-right: 5px; font-weight: bold; }
.terminal-input-line input { background: transparent; border: none; color: #0f0; font-family: 'Courier New', Courier, monospace; outline: none; flex-grow: 1; font-size: 0.85rem; }

.packet-anim { position: absolute; font-size: 1.5rem; text-shadow: 0 2px 5px rgba(0,0,0,0.3); transition: all 0.6s ease-in-out; transform: translate(-50%, -50%); z-index: 999; }