body{font-family:sans-serif;margin:20px;background-color:#fff}.app-container{display:flex;flex-direction:row;gap:10px}.app-container2{display:flex;flex-direction:row;gap:10px}.icon-palette{width:150px;display:flex;flex-direction:column;margin-right:20px}#iconCategorySelect{margin-bottom:10px}.icons-container{display:grid;grid-template-columns:repeat(2,auto);grid-auto-rows:40px;column-gap:15px;justify-content:center;max-height:430px;overflow-y:auto;width:150px}.toolbar-icon{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:1px solid #ccc;border-radius:4px;cursor:pointer}.toolbar-icon.selected{border-color:blue}#grid-container{overflow:auto}#grid{cursor:default;display:grid;justify-content:start;border:1px solid #ccc;background-image:url('');position:relative;overflow:auto;z-index:0}#lineLayer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10;background:#fff0}#gridWrapper{position:relative;display:inline-block;transform-origin:0 0;margin-left:0}.controls{flex-direction:column;gap:30px!important;padding:20px;align-items:flex-start!important;border:2px solid #ccc;border-radius:8px;background-color:#f0f2f5;box-shadow:0 2px 8px rgb(0 0 0 / .1);margin-bottom:20px}.numberInputs{display:flex;flex-wrap:wrap;gap:15px 25px;padding:10px;border:1px solid #ddd;border-radius:6px;background-color:#f9f9f9;transition:background-color 0.3s ease}.menuRow{display:flex;gap:10px;padding:10px;border:1px solid #8ab6d6;border-radius:6px;background-color:#d9edf7}.menuRow>*{flex:0 1 auto;min-width:0;white-space:nowrap}.menuRow:hover{background-color:#c4e3f3}.menuRow:hover{background-color:#c4e3f3}.controls select{padding:5px 10px;border-radius:6px;border:1px solid #ccc;font-size:14px;background-color:#fff;cursor:pointer;transition:all 0.2s ease}.numberInputs input{padding:5px 8px;border:1px solid #ccc;border-radius:6px;width:60px;background-color:#f5f5f5}.numberInputs:hover{background-color:#e6e6e6}.colorControls{display:flex;flex-wrap:wrap;gap:20px;align-items:center;padding:10px;border:1px solid #ddd;border-radius:6px;background-color:#f9f9f9}.colorControls:hover{background-color:#e6e6e6}.colorControls input[type="color"]{width:50px;height:30px;padding:0;border:none;cursor:pointer}.nepi-btn{background-color:#ff6600!important;color:#fff!important;border:1px solid #cc5500!important;border-radius:4px!important;padding:6px 12px!important;font-size:14px!important;cursor:pointer!important;text-align:center!important;display:inline-block!important;transition:background-color 0.2s ease!important;box-shadow:none!important;outline:none!important}.nepi-btn:hover{background-color:#ff5500!important}.nepi-btn:hover{background:#eee}#recentColorsContainer{display:flex;flex-direction:column;margin-left:20px}#recentColors{display:flex;gap:6px;margin-top:6px}.nepi-btn{background-color:#ff6600!important;color:#fff!important;border:1px solid #cc5500!important;border-radius:4px!important;padding:6px 12px!important;font-size:14px!important;cursor:pointer!important;text-align:center!important;display:inline-block!important;transition:background-color 0.2s ease!important;box-shadow:none!important;outline:none!important}.nepi-btn:hover{background-color:#ff5500!important}input.nepi-btn[type="button"],input.nepi-btn[type="submit"],input.nepi-btn[type="reset"]{display:inline-block!important;background-color:#ff6600!important;color:#fff!important;border:1px solid #cc5500!important;border-radius:4px!important;padding:6px 12px!important;font-size:14px!important;cursor:pointer!important;text-align:center!important}.controls select,.controls input[type="number"],.controls input[type="color"],.controls input[type="text"]{padding:5px 10px!important;border-radius:4px!important;border:1px solid #ccc!important;font-size:14px!important;background-color:#fff!important;cursor:pointer!important}.controls select:hover,.controls input[type="number"]:hover,.controls input[type="color"]:hover,.controls input[type="text"]:hover{border-color:#007bff!important;box-shadow:0 0 5px rgb(0 123 255 / .3)!important;outline:none!important}.controls select:focus,.controls input[type="number"]:focus,.controls input[type="color"]:focus,.controls input[type="text"]:focus{border-color:#0056b3!important;box-shadow:0 0 5px rgb(0 86 179 / .5)!important;outline:none!important}.controls option{padding:5px}.cell{display:flex;align-items:center;justify-content:center;border:1px solid #ddd;box-sizing:border-box;font-size:12px;cursor:pointer;user-select:none;overflow:hidden}.cell.thick-horizontal{border-top-width:1.5px}.cell.thick-vertical{border-left-width:1.5px}.cell img{width:100%;height:100%;object-fit:contain}.cell.hover-paste{outline:2px dashed limegreen!important;outline-offset:-2px;animation:pulseGlow 1s infinite alternate}@keyframes pulseGlow{0%{outline-color:limegreen}100%{outline-color:#90ee90}}input[type="number"]{width:60px}#gridContainer{display:flex;justify-content:center;margin-top:20px;overflow:auto}textarea{width:100%;height:100px}.cell.selected{position:relative;border:1px dotted blue;z-index:1}.cell.selected::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgb(255 255 255 / .5);pointer-events:none;border-radius:2px;box-sizing:border-box;z-index:0}.cell.header{background-color:#f0f0f0;font-weight:700}button.active{background-color:#4CAF50;color:#fff}#backgroundImage{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:-1}#iconFilesInput{display:none}.note-icon{width:10px!important;height:10px!important;max-width:10px!important;max-height:10px!important;margin:2px!important;display:inline-block!important;object-fit:contain!important;border:none!important;box-sizing:content-box!important}.custom-select{position:relative;width:200px;cursor:pointer;margin-bottom:5px}.selected img{vertical-align:middle}.options-container{display:none}.options-container.open{display:flex;flex-wrap:nowrap;gap:20px}.left-column,.center-column,.right-column{display:flex;flex-direction:column;min-width:60px}.option{padding:2px}.option img{vertical-align:middle}.option:hover{background:#eee}@media (max-width:900px){.menuRow{flex-wrap:wrap}}@media (max-width:768px){.app-container{flex-direction:column;align-items:flex-start}.icons-container{grid-template-columns:repeat(5,auto);width:100%}.icon-palette{width:90%;margin-right:0;order:-1}#grid{display:grid;gap:0}#gridContainer{width:100%;overflow-x:auto;overflow-y:auto}}