* { font-family: 'Segoe UI', Roboto, Arial, sans-serif !important; font-size: 14px !important; box-sizing: border-box; margin: 0; padding: 0; }
body { height: 100vh; display: flex; flex-direction: column; background: #f4f7f9; color: #333; }
#viewport { display: flex; flex-direction: column; flex-grow: 1; }
#header-table { background: white; overflow-y: auto; padding: 15px; border-bottom: 2px solid #005aff; }
#header-table h3 { font-size: 16px !important; color: #005aff; font-weight: 600 !important; margin-bottom: 15px; }
#main-container { display: flex; width: 100%; }
#blocklyDiv { height: 100%; }
#preview-panel { background: #1e1e1e; color: #d4d4d4; padding: 15px; overflow-y: auto; }
#preview-panel h4 { font-size: 14px !important; color: #ce9178; border-bottom: 1px solid #333; padding-bottom: 8px; margin-bottom: 10px; text-transform: uppercase; font-weight: 600 !important; }
pre, code, #cli-output { font-family: 'Consolas', 'Monaco', monospace !important; font-size: 11px !important; line-height: 1.6; color: #9cdcfe; background: transparent; }
.input-group { margin-bottom: 10px; padding: 10px; border-left: 4px solid #005aff; background: #f9f9f9; display: flex; align-items: center; gap: 12px; }
.input-group strong { font-weight: 600 !important; color: #444; }
input[type="text"], select { padding: 6px 10px !important; border: 1px solid #ccc !important; border-radius: 4px; background: white; }

/* NOUVEAU : Style de validation des IP */
.invalid-input { border: 2px solid #dc3545 !important; background-color: #ffe6e6 !important; color: #dc3545 !important; }

.gutter { background-color: #ddd; background-repeat: no-repeat; background-position: 50%; }
.gutter.gutter-vertical { cursor: row-resize; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzy7zhAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII='); }
.gutter.gutter-horizontal { cursor: col-resize; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAG8aZOnQoRMDAwYIz0IcVwCCEDWicAFZ95KCwD660AAAAASUVORK5CYII='); }
#footer-actions { padding: 12px 20px; background: #2c3e50; color: white; display: flex; justify-content: space-between; align-items: center; }
#footer-actions div:last-child button { margin-left: 10px; }
button { padding: 8px 18px !important; cursor: pointer; border: none; border-radius: 4px; font-weight: 600 !important; color: white; transition: opacity 0.2s; }
button:hover { opacity: 0.9; }
.btn-export { background: #007bff; }
.btn-save { background: #28a745; }
.btn-load { background: #6c757d; }