*{box-sizing:border-box;margin:0;padding:0}body{color:#e0e0e0;background:#0d0d0d;min-height:100vh;font-family:Segoe UI,system-ui,sans-serif}.app{grid-template-rows:auto 1fr;min-height:100vh;display:grid}.app-header{z-index:10;background:#111;border-bottom:1px solid #2a2a2a;padding:14px 24px;position:sticky;top:0}.header-inner{justify-content:space-between;align-items:center;gap:12px;display:flex}.app-body{align-items:flex-start;display:flex}.config-panel{background:#0f0f0f;border-right:1px solid #2a2a2a;flex-direction:column;flex-shrink:0;width:380px;height:100vh;display:flex;position:sticky;top:0;overflow:hidden}.config-panel-inner{flex-direction:column;height:100%;display:flex}.config-panel-header{border-bottom:1px solid #2a2a2a;flex-shrink:0;justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.config-panel-title{color:#666;font-family:Cascadia Code,Fira Code,monospace;font-size:.8rem}.btn-incomplete{color:#e05050;cursor:pointer;background:0 0;border:none;padding:0;font-family:Cascadia Code,Fira Code,monospace;font-size:.75rem;transition:color .15s}.btn-incomplete:hover{color:#ff7070}.config-panel-footer{border-top:1px solid #2a2a2a;flex-shrink:0;gap:8px;padding:12px 16px;display:flex}.header-title h1{color:#fff;font-size:1.15rem;font-weight:600}.subtitle{color:#555;font-size:.78rem}.header-actions,.drop-target{align-items:center;gap:8px;display:flex}.app-main{flex-direction:column;flex:1;gap:4px;min-width:0;padding:20px 20px 60px;display:flex}.section{background:#1a1a1a;border:1px solid #2a2a2a;border-radius:10px;margin-bottom:10px;padding:20px 22px}.section h2{color:#666;text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px;font-size:.72rem;font-weight:600}.section-header-row{justify-content:space-between;align-items:center;margin-bottom:14px;display:flex}.section-header-row h2{margin-bottom:0}.hint{color:#555;margin-top:-8px;margin-bottom:10px;font-size:.82rem}.field{flex-direction:column;gap:6px;display:flex}.field.flex-grow{flex:1}.field-row{flex-wrap:wrap;align-items:flex-start;gap:12px;margin-bottom:12px;display:flex}label{color:#666;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;font-size:.72rem}label.required:after{content:" *";color:#e05050}input[type=text],input[type=number],input[type=password],textarea,select{color:#e0e0e0;background:#111;border:1px solid #272727;border-radius:6px;outline:none;width:100%;padding:7px 10px;font-family:inherit;font-size:.9rem;transition:border-color .15s}input:focus,textarea:focus,select:focus{border-color:#444}textarea{resize:vertical;min-height:70px;font-family:Cascadia Code,Fira Code,monospace;font-size:.8rem}.checkbox-group{flex-wrap:wrap;gap:16px;margin-top:4px;display:flex}.checkbox-label{color:#ccc;cursor:pointer;text-transform:none;letter-spacing:normal;align-items:center;gap:8px;font-size:.88rem;display:flex}.checkbox-label input[type=checkbox]{accent-color:#2563eb;width:16px;height:16px}button{cursor:pointer}button:disabled{opacity:.35;cursor:not-allowed;pointer-events:none}.btn-primary{color:#fff;white-space:nowrap;background:#2563eb;border:none;border-radius:6px;padding:8px 18px;font-size:.88rem;font-weight:500;transition:background .15s}.btn-primary:hover{background:#1d4ed8}.btn-secondary{color:#ccc;background:0 0;border:1px solid #3a3a3a;border-radius:6px;padding:8px 18px;font-size:.88rem;font-weight:500;transition:border-color .15s,color .15s}.btn-secondary:hover{color:#fff;border-color:#666}.btn-ghost{color:#888;background:0 0;border:1px solid #2a2a2a;border-radius:6px;padding:6px 12px;font-size:.82rem;transition:color .15s,border-color .15s}.btn-ghost:hover{color:#ccc;border-color:#444}.btn-add{color:#2563eb;background:0 0;border:1px dashed #2563eb44;border-radius:6px;width:100%;margin-top:4px;padding:8px 16px;font-size:.85rem;transition:background .15s,border-color .15s}.btn-add:hover{background:#2563eb11;border-color:#2563eb88}.btn-add-small{color:#3b82f6;background:0 0;border:1px dashed #3b82f644;border-radius:5px;width:100%;margin-top:8px;padding:6px 12px;font-size:.8rem;transition:color .15s,border-color .15s,background .15s}.btn-add-small:hover{color:#2563eb;background:#3b82f611;border-color:#3b82f688}.btn-remove{color:#555;background:0 0;border:none;border-radius:4px;flex-shrink:0;padding:2px 6px;font-size:.85rem;line-height:1;transition:color .15s,background .15s}.btn-remove:hover{color:#e05050;background:#e0505011}.btn-remove-block{color:#666;white-space:nowrap;background:0 0;border:1px solid #333;border-radius:5px;padding:6px 12px;font-size:.8rem;transition:color .15s,border-color .15s,background .15s}.btn-remove-block:hover{color:#e05050;background:#e0505011;border-color:#e05050}.btn-copy{color:#fff;background:#16a34a;border:none;border-radius:6px;padding:9px 20px;font-size:.9rem;font-weight:500;transition:background .15s}.btn-copy:hover{background:#15803d}.profile-identity-row{flex-wrap:wrap;align-items:flex-end;gap:12px;display:flex}.profile-mode-field{flex-direction:column;flex-shrink:0;gap:6px;display:flex}.field-label-sm{color:#666;text-transform:uppercase;letter-spacing:.06em;font-size:.72rem}.toggle-group{border:1px solid #2a2a2a;border-radius:7px;gap:0;width:fit-content;display:flex;overflow:hidden}.toggle-btn{color:#666;background:0 0;border:none;padding:8px 22px;font-size:.88rem;font-weight:500;transition:background .15s,color .15s}.toggle-btn:not(:last-child){border-right:1px solid #2a2a2a}.toggle-btn.active{color:#fff;background:#2563eb}.toggle-btn:hover:not(.active){color:#ccc;background:#1e1e1e}.profiles-section{margin-bottom:10px}.profiles-label{color:#666;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;font-size:.72rem;font-weight:600}.config-tabs-scroll{scrollbar-width:thin;scrollbar-color:#333 transparent;margin-bottom:-1px;overflow-x:auto}.config-tabs-scroll::-webkit-scrollbar{height:4px}.config-tabs-scroll::-webkit-scrollbar-track{background:0 0}.config-tabs-scroll::-webkit-scrollbar-thumb{background:#333;border-radius:2px}.config-tabs{z-index:1;flex-wrap:nowrap;gap:0;width:max-content;min-width:100%;display:flex;position:relative}.tab-btn{color:#666;white-space:nowrap;background:#111;border:1px solid #2a2a2a;border-bottom:none;border-radius:6px 6px 0 0;align-items:center;gap:6px;margin-right:2px;padding:7px 14px;font-size:.82rem;transition:background .15s,color .15s;display:flex}.tab-btn.active{color:#fff;background:#1a1a1a;border-color:#2a2a2a}.tab-btn:hover:not(.active){color:#aaa;background:#161616}.tab-add{color:#2563eb;border-style:dashed dashed none;border-bottom-width:medium;border-bottom-color:currentColor;margin-right:0}.tab-name{text-overflow:ellipsis;flex:1;min-width:0;overflow:hidden}.tab-action{color:#555;border-radius:3px;padding:1px 3px;font-size:.75rem;line-height:1;transition:color .15s,background .15s}.tab-action:hover{color:#ccc;background:#2a2a2a}.tab-remove{color:#555;font-size:.7rem;line-height:1;transition:color .15s}.tab-remove:hover{color:#e05050}.tab-panel{background:#1a1a1a;border:1px solid #2a2a2a;border-radius:0 6px 6px;padding:0}.tab-panel>.section{background:0 0;border:none;border-bottom:1px solid #222;border-radius:0;margin-bottom:0;padding:18px 22px}.tab-panel>.section:last-child{border-bottom:none}.host-card,.screen-card{background:#141414;border:1px solid #252525;border-radius:8px;margin-bottom:10px;padding:14px}.host-header{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.host-label{color:#555;text-transform:uppercase;letter-spacing:.06em;font-size:.72rem}.neighbours-section{margin-top:14px}.neighbour-card{background:#0f0f0f;border:1px solid #202020;border-radius:6px;margin-bottom:8px;padding:12px}.neighbour-header{align-items:center;gap:6px;margin-bottom:10px;display:flex}.neighbour-dir-badge{text-align:center;color:#2563eb;flex-shrink:0;width:28px;font-size:1.1rem}.neighbour-dir-select{color:#ccc;background:#111;border:1px solid #272727;border-radius:5px;flex-shrink:0;width:auto;padding:5px 8px;font-size:.82rem}.neighbour-name-field{margin:0 8px}.mt-8{margin-top:8px}.mt-10{margin-top:10px}.advanced{border-top:1px solid #1e1e1e;margin-top:10px;padding-top:10px}.advanced summary{color:#555;cursor:pointer;-webkit-user-select:none;user-select:none;margin-bottom:10px;font-size:.75rem}.advanced summary:hover{color:#888}.range-editor{margin-bottom:10px}.range-label{color:#555;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;font-size:.7rem}.range-inputs{align-items:center;gap:6px;margin-bottom:6px;display:flex}.range-inputs input[type=number]{flex-shrink:0;width:70px}.range-sep{color:#555;font-size:.9rem}.range-bar-wrap{background:#222;border-radius:3px;height:6px;position:relative;overflow:hidden}.range-bar{background:#2563eb66;border-radius:3px;min-width:4px;height:100%;position:absolute;top:0}.network-type-group{flex-wrap:wrap;gap:6px;margin-bottom:2px;display:flex}.network-type-btn{color:#777;cursor:pointer;text-transform:none;letter-spacing:normal;background:#111;border:1px solid #2a2a2a;border-radius:6px;align-items:center;gap:6px;padding:6px 12px;font-size:.82rem;transition:border-color .15s,color .15s,background .15s;display:flex}.network-type-btn input[type=radio]{display:none}.network-type-btn.active{color:#60a5fa;background:#2563eb22;border-color:#2563eb88}.network-type-btn:hover:not(.active){color:#aaa;border-color:#444}.layout-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px;display:flex}.layout-legend{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.legend-chip{border:1px solid;border-radius:4px;align-items:center;padding:2px 8px;font-size:.78rem;font-weight:500;display:inline-flex}.layout-empty-hint{color:#444;font-size:.8rem;font-style:italic}.layout-stat{color:#555;font-size:.75rem}.layout-canvas-scroll{background:#0f0f0f radial-gradient(circle,#1e1e1e 1px,#0000 1px) 24px 24px/16px 16px;border:1px solid #222;border-radius:8px;margin-bottom:10px;overflow:auto}.layout-canvas{cursor:default;position:relative}.layout-svg{pointer-events:none;position:absolute;top:0;left:0;overflow:visible}.layout-block{cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none;border:2px solid;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;transition:box-shadow .1s;display:flex;position:absolute;overflow:visible}.layout-block:active{cursor:grabbing}.layout-block.dragging{opacity:.4}.layout-block-host{text-overflow:ellipsis;white-space:nowrap;text-align:center;max-width:130px;font-size:.92rem;font-weight:600;overflow:hidden}.layout-block-screen{color:#aaa;text-overflow:ellipsis;white-space:nowrap;max-width:130px;margin-top:3px;font-size:.72rem;overflow:hidden}.layout-block-remove{color:#555;opacity:0;background:0 0;border:none;border-radius:3px;padding:2px 4px;font-size:.75rem;line-height:1;transition:color .15s;position:absolute;top:4px;right:4px}.layout-block:hover .layout-block-remove{opacity:1}.layout-block-remove:hover{color:#e05050}.layout-block-master-badge{color:#f59e0b;letter-spacing:.04em;pointer-events:none;font-size:.62rem;font-weight:700;line-height:1;position:absolute;top:4px;left:6px}.layout-block-size{color:#666;margin-top:2px;font-size:.65rem}.layout-block-ghost{pointer-events:none;background:#2563eb0a;border:2px dashed #2563eb55;border-radius:8px;position:absolute}.layout-block-ghost.overlap{background:#e0505011;border-color:#e0505088}.layout-block-ghost.floating{background:#f59e0b11;border-color:#f59e0b88}.layout-resize-handle{z-index:20;background:#1a1a1a;border:2px solid #555;border-radius:50%;width:10px;height:10px;transition:border-color .12s,background .12s;position:absolute}.layout-resize-handle:hover{background:#1d4ed8;border-color:#60a5fa}.layout-resize-nw{cursor:nw-resize;top:-5px;left:-5px}.layout-resize-ne{cursor:ne-resize;top:-5px;right:-5px}.layout-resize-sw{cursor:sw-resize;bottom:-5px;left:-5px}.layout-resize-se{cursor:se-resize;bottom:-5px;right:-5px}.layout-aspect-row{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.layout-aspect-label{color:#555;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;font-size:.72rem}.layout-aspect-btn{color:#666;white-space:nowrap;background:#111;border:1px solid #2a2a2a;border-radius:4px;padding:4px 8px;font-size:.75rem;transition:border-color .12s,color .12s,background .12s}.layout-aspect-btn:hover{color:#aaa;background:#1a1a1a;border-color:#444}.layout-aspect-btn.active{color:#60a5fa;background:#2563eb22;border-color:#2563eb88}.layout-selected-panel{background:#141414;border:1px solid #252525;border-radius:7px;margin-bottom:10px;padding:12px 14px}.layout-selected-title{color:#555;text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px;font-size:.72rem}.layout-add-form{background:#141414;border:1px solid #252525;border-radius:7px;margin-bottom:4px;padding:12px 14px}.config-pre{color:#ccc;white-space:pre;flex:1;padding:16px;font-family:Cascadia Code,Fira Code,monospace;font-size:.78rem;line-height:1.5;overflow:auto}.drop-overlay{z-index:100;color:#60a5fa;pointer-events:all;background:#2563eb26;border:2px dashed #2563eb;border-radius:0;justify-content:center;align-items:center;font-size:1.2rem;display:flex;position:fixed;inset:0}.error{color:#e05050;margin-top:4px;font-size:.85rem}.validation-errors .error{background:#e0505011;border:1px solid #e0505033;border-radius:6px;margin-bottom:6px;padding:8px 12px}.btn-icon{padding:6px 8px;font-size:1rem;line-height:1}.input-error{border-color:#e05050!important}.input-error:focus{border-color:#ff6060!important}.field-error-msg{color:#e05050;margin-top:-2px;font-size:.78rem}.card-error{border-color:#e0505055!important}.range-slider-wrap{margin-bottom:12px}.range-slider-label{color:#555;text-transform:uppercase;letter-spacing:.06em;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:.7rem;display:flex}.range-slider-vals{color:#777;text-transform:none;letter-spacing:0;font-variant-numeric:tabular-nums}.range-slider-track{background:#1e1e1e;border-radius:2px;height:4px;margin:10px 0;position:relative}.range-slider-fill{pointer-events:none;background:#2563eb55;border-radius:2px;height:100%;position:absolute}.range-slider-handle{cursor:ew-resize;touch-action:none;background:#1e1e1e;border:2px solid #444;border-radius:50%;width:14px;height:14px;transition:border-color .12s,background .12s;position:absolute;top:50%;transform:translate(-50%,-50%)}.range-slider-handle:hover{background:#1d4ed8;border-color:#2563eb}.canvas-error{text-align:center;color:#888;background:#141414;border:1px solid #e0505033;border-radius:8px;flex-direction:column;align-items:center;gap:12px;margin-bottom:10px;padding:24px;font-size:.88rem;display:flex}