:root{--primary: #6366f1;--primary-hover: #4f46e5;--accent-purple: #8b5cf6;--accent-orange: #f59e0b;--accent-blue: #3b82f6;--accent-pink: #ec4899;--bg-body: #f3f4f6;--bg-surface: #ffffff;--text-main: #111827;--text-secondary: #6b7280;--border: #e5e7eb;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--socket-size: 14px}*{box-sizing:border-box;-webkit-user-select:none;user-select:none;outline:none}body{margin:0;background-color:var(--bg-body);font-family:Inter,sans-serif;overflow:hidden;height:100vh;color:var(--text-main)}.icon-rail{width:60px;background:var(--bg-surface);border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:center;padding-top:20px;z-index:200}.rail-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);border-radius:8px;cursor:pointer;margin-bottom:15px;transition:all .2s;font-size:1.2rem}.rail-icon.active{background:#e0e7ff;color:var(--primary)}.rail-icon:hover:not(.active){background:#f9fafb;color:var(--text-main)}.library-panel{width:280px;background:var(--bg-surface);border-right:1px solid var(--border);display:flex;flex-direction:column;z-index:100}.panel-header{padding:20px;border-bottom:1px solid var(--border)}.app-title{font-weight:700;font-size:1rem;color:var(--text-main);display:flex;align-items:center;gap:8px;margin-bottom:15px}.search-box{display:flex;align-items:center;background:#f9fafb;border:1px solid var(--border);border-radius:8px;padding:8px 12px;color:var(--text-secondary)}.search-box input{border:none;background:transparent;width:100%;margin-left:8px;font-size:.9rem;color:var(--text-main)}.panel-content{flex:1;overflow-y:auto;padding:20px}.category-label{font-size:.75rem;font-weight:600;color:var(--text-secondary);margin:15px 0 10px;text-transform:uppercase;letter-spacing:.5px}.tool-item{display:flex;align-items:center;padding:10px 12px;background:#fff;border:1px solid transparent;border-radius:8px;margin-bottom:4px;cursor:grab;transition:all .2s;font-size:.9rem;font-weight:500;color:var(--text-main)}.tool-item:hover{background:#f9fafb;border-color:var(--border);transform:translate(2px)}.tool-item i,.tool-item svg{margin-right:10px;width:20px;text-align:center;font-size:1rem}.c-purple i,.c-purple svg{color:var(--accent-purple)}.c-orange i,.c-orange svg{color:var(--accent-orange)}.c-blue i,.c-blue svg{color:var(--accent-blue)}.c-green i,.c-green svg{color:#10b981}.c-pink i,.c-pink svg{color:var(--accent-pink)}.canvas-area{flex:1;position:relative;overflow:hidden;background-color:var(--bg-body);background-image:radial-gradient(#d1d5db 1.5px,transparent 1.5px);background-size:24px 24px}#canvas-container{width:100%;height:100%;position:absolute;top:0;left:0;transform-origin:0 0}svg.connections{position:absolute;top:0;left:0;width:200000px;height:200000px;pointer-events:none;z-index:0;overflow:visible;transform:translate(-100000px,-100000px)}path.cable{fill:none;stroke:#cbd5e1;stroke-width:2px;transition:stroke .05s}path.cable.active{stroke:var(--primary);stroke-width:3px}.node{position:absolute;width:300px;background:#fff;border-radius:16px;box-shadow:var(--shadow-md);display:flex;flex-direction:column;z-index:10;transition:box-shadow .2s;border:1px solid transparent}.node:hover{box-shadow:var(--shadow-lg);border-color:#e0e7ff}.node.selected{border:2px solid var(--primary);box-shadow:0 0 0 4px #e0e7ff}.node-header{padding:16px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border)}.node-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}.bg-purple{background:#f3e8ff;color:var(--accent-purple)}.bg-orange{background:#ffedd5;color:var(--accent-orange)}.bg-blue{background:#dbeafe;color:var(--accent-blue)}.bg-green{background:#d1fae5;color:#10b981}.bg-pink{background:#fce7f3;color:var(--accent-pink)}.bg-gray{background:#f3f4f6;color:#4b5563}.node-title-text{font-weight:600;font-size:.95rem;color:var(--text-main)}.node-delete{margin-left:auto;color:#d1d5db;cursor:pointer}.node-delete:hover{color:#ef4444}.node-body{padding:16px;display:flex;flex-direction:column;gap:10px}.node-input{width:100%;padding:10px;border:1px solid var(--border);border-radius:8px;font-family:Inter,sans-serif;font-size:.9rem;color:var(--text-main);background:#f9fafb;transition:all .2s;resize:vertical}.node-input:focus{background:#fff;border-color:var(--primary);box-shadow:0 0 0 3px #e0e7ff}.input-group{position:relative}.magic-btn{position:absolute;bottom:10px;right:10px;width:28px;height:28px;background:#fff;border:1px solid var(--border);border-radius:6px;color:var(--accent-orange);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;box-shadow:var(--shadow-sm);z-index:5}.socket{width:14px;height:14px;background:#fff;border:2px solid var(--text-secondary);border-radius:50%;position:absolute;cursor:crosshair;z-index:100;transition:all .2s}.socket:hover{border-color:var(--primary);background:var(--primary);transform:scale(1.3)}.socket.connected{background:var(--primary);border-color:var(--primary)}.socket.input{left:-8px;top:26px}.socket.output{right:-8px;top:26px}.layout-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px dashed var(--border);position:relative}.layout-row span{font-size:.8rem;font-weight:600;color:var(--text-secondary)}.layout-row .socket.input{position:absolute;left:-24px;top:50%;transform:translateY(-50%)}.config-panel{width:360px;background:var(--bg-surface);border-left:1px solid var(--border);display:flex;flex-direction:column;z-index:100}.config-header{padding:15px 20px;border-bottom:1px solid var(--border);display:flex;gap:10px;align-items:center;justify-content:space-between}.header-title{font-weight:700;color:var(--text-main);font-size:.95rem}.config-content{flex:1;padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:20px;background:#f8fafc}.setting-group{margin-bottom:10px}.setting-label{font-size:.8rem;font-weight:600;color:var(--text-main);margin-bottom:8px;display:block}.style-toggles{display:flex;background:#fff;padding:4px;border-radius:8px;border:1px solid var(--border)}.style-toggle-btn{flex:1;border:none;background:transparent;padding:6px;border-radius:6px;cursor:pointer;color:var(--text-secondary)}.style-toggle-btn.active{background:#f3f4f6;color:var(--text-main);font-weight:600}.preview-frame{background:#fff;width:100%;aspect-ratio:1 / 1.414;box-shadow:0 10px 25px -5px #0000001a;padding:20px;font-size:8px;overflow-y:auto;border-radius:2px;position:relative;border:1px solid #e5e7eb}.preview-frame *{-webkit-user-select:text;user-select:text;cursor:text}.action-bar{padding:20px;border-top:1px solid var(--border);background:#fff}.btn-primary{width:100%;background:var(--primary);color:#fff;border:none;padding:12px;border-radius:8px;font-weight:600;cursor:pointer;box-shadow:0 4px 6px -1px #4f46e533;display:flex;align-items:center;justify-content:center;gap:8px}.btn-primary:hover{background:var(--primary-hover)}.zoom-controls{position:absolute;top:20px;right:380px;background:#fff;padding:6px;border-radius:8px;box-shadow:var(--shadow-md);border:1px solid var(--border);display:flex;gap:4px}.zoom-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:1px solid transparent;background:transparent;border-radius:6px;color:var(--text-secondary);cursor:pointer}.zoom-btn:hover{background:#f3f4f6;color:var(--text-main)}.export-modal-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:30000;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.export-modal{background:#fff;padding:30px;border-radius:16px;width:400px;text-align:center;box-shadow:0 20px 25px -5px #0000001a}.export-icon{width:60px;height:60px;background:#ecfdf5;color:#10b981;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;margin:0 auto 20px}.mobile-bottom-nav{display:none}@media(max-width:900px){.icon-rail,.library-panel,.config-panel{display:none}.icon-rail.active,.library-panel.active,.config-panel.active{display:flex;position:fixed;top:0;left:0;height:calc(100% - 60px);z-index:2000;width:100%;border:none}.config-panel.active{left:auto;right:0}.mobile-bottom-nav{display:flex;position:fixed;bottom:0;left:0;width:100%;height:60px;background:#fff;border-top:1px solid var(--border);align-items:center;justify-content:space-around;z-index:5000}.mn-item{display:flex;flex-direction:column;align-items:center;font-size:.7rem;color:var(--text-secondary);gap:4px}.mn-item.active{color:var(--primary)}.zoom-controls{right:20px;bottom:80px;top:auto}}@media print{@page{size:A4;margin:0}html,body{margin:0!important;padding:0!important;background:#fff!important;overflow:visible!important;height:100%!important;width:100%!important}.ui-layer,#viewport,.mobile-bottom-nav,.export-modal-overlay,.icon-rail,.library-panel,.zoom-controls{display:none!important}.config-panel{position:static!important;width:100%!important;height:auto!important;border:none!important;display:block!important;overflow:visible!important;margin:0!important;padding:0!important}.config-header,.action-bar,.setting-group>.setting-label,.setting-group>.style-toggles,.setting-group>select{display:none!important}.config-content{display:block!important;padding:0!important;margin:0!important;background:#fff!important;overflow:visible!important;height:auto!important}.preview-frame{position:absolute!important;left:0!important;top:0!important;width:210mm!important;min-height:297mm!important;margin:0!important;padding:20mm!important;box-shadow:none!important;border:none!important;border-radius:0!important;overflow:visible!important;background:#fff!important;display:block!important}#resume-page{font-size:12pt!important;line-height:1.5!important;color:#000!important}#resume-page *{color:#000!important;border-color:#ccc!important}}