#app{font-family:Arial,sans-serif;text-align:center}.canvas{position:absolute;top:0;left:0;width:100%;height:100%;border:none;overflow:hidden;margin:0;transition:background-color .3s ease}.node{position:absolute;width:150px;padding:10px;border-radius:5px;text-align:center;cursor:grab;box-sizing:border-box;z-index:2;transition:height .2s ease,background-color .3s ease,color .3s ease}.resolution-node{font-weight:700}.emoji-menu{margin-top:10px;display:flex;justify-content:space-around}.lines{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1;transition:stroke .3s ease}.popup{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;padding:20px;border:1px solid #ccc;border-radius:5px;box-shadow:0 4px 6px #0000001a;z-index:10;color:#000}button{margin:5px;padding:5px 10px}input{margin:10px 0;padding:5px;width:100%}.color-settings-panel{position:fixed;top:0;left:0;bottom:0;background-color:#282828e6;color:#fff;padding:10px;z-index:100;box-shadow:0 0 15px #00000080;width:210px;transition:transform .3s ease;transform:translate(0);display:flex;flex-direction:column;overflow-y:auto}.color-settings-panel.hidden{transform:translate(-100%)}.panel-logo{display:flex;align-items:center;justify-content:center;margin-bottom:15px;padding:10px 5px 15px;border-bottom:1px solid #555}.company-logo{width:100%;max-height:60px;object-fit:contain}.version-info{font-size:11px;color:#999;text-align:center;margin-top:5px;padding-top:5px;border-top:1px solid #555}.color-picker-container{display:flex;flex-direction:column;gap:10px;flex-grow:1;overflow-y:auto;margin:5px 0}.color-picker-section{margin-top:5px}.color-picker-section h4{margin:0 0 5px;font-size:13px;color:#ccc;border-bottom:1px dotted #555;padding-bottom:3px}.color-picker-item{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.color-picker-item label{flex:1;text-align:left;margin-right:5px;font-size:13px}.color-picker-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.node-type-label{font-size:13px;flex:1}.color-inputs{display:flex;gap:5px}.color-input{width:25px;height:25px;border:none;border-radius:2px;cursor:pointer;padding:0}.reset-btn{margin-top:8px;width:100%;background-color:#444;color:#fff;border:none;padding:6px 10px;border-radius:4px;cursor:pointer;transition:background-color .2s;font-size:12px}.reset-btn:hover{background-color:#555}.toggle-panel-btn{position:fixed;top:50%;left:0;transform:translateY(-50%);background-color:#3c3c3cb3;color:#fff;border:none;border-radius:0 4px 4px 0;width:20px;height:60px;padding:0;cursor:pointer;z-index:99;transition:left .3s ease;display:flex;align-items:center;justify-content:center}.toggle-panel-btn.panel-open{left:210px}.popup-buttons{display:flex;gap:12px;margin-top:20px;justify-content:center}.popup-btn{padding:12px 24px;border:2px solid transparent;border-radius:8px;cursor:pointer;font-size:16px;font-weight:500;transition:all .2s ease;min-width:80px}.confirm-btn{background-color:#2563eb;color:#fff;border-color:#2563eb}.confirm-btn:hover{background-color:#1d4ed8;border-color:#1d4ed8;transform:translateY(-1px)}.cancel-btn{background-color:#6b7280;color:#fff;border-color:#6b7280}.cancel-btn:hover{background-color:#4b5563;border-color:#4b5563;transform:translateY(-1px)}.popup input{margin:15px 0 10px;padding:12px;width:100%;box-sizing:border-box;border:2px solid #e5e7eb;border-radius:8px;font-size:16px;transition:border-color .2s ease}.popup input:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px #2563eb1a}