.breed-main{display:grid;grid-template-columns:420px 1fr;gap:14px;padding:14px;align-items:start}
@media(max-width:1000px){.breed-main{grid-template-columns:1fr}}
.ai{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:999px;background:#132a3a;color:#7fd1ff;border:1px solid #1f4a63;font-size:11px}
.drop{border:2px dashed #2c3d4c;border-radius:10px;padding:18px;text-align:center;color:var(--muted);transition:.15s}
.drop.over{border-color:var(--acc);background:#122018}
.drop b{color:#cfe6ff}
.status{margin-top:8px;font-size:12px;color:var(--muted);min-height:18px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chip{display:flex;align-items:center;gap:6px;background:#1b232c;border:1px solid #2a3642;border-radius:999px;padding:2px 8px 2px 2px;font-size:12px}
.chip img{width:24px;height:24px;border-radius:50%;background:#0b0e11}
.recs{margin-top:10px}
.recs h3{font-size:12px;color:var(--muted);margin:8px 0 6px;font-weight:500}
.rec-row{display:flex;flex-wrap:wrap;gap:6px}
.rec{background:#12241b;border:1px solid #1f5c34;color:#a9f0c5;border-radius:8px;padding:4px 8px;font-size:12px;cursor:pointer}
.rec:hover{background:#173525}
.controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.controls input{flex:1;min-width:220px;background:#0f1216;color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.controls select{background:#0f1216;color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:8px}
.controls label{color:var(--muted);font-size:12px;display:flex;gap:6px;align-items:center}
.hint{color:var(--muted);font-size:12px;margin:6px 0}
.tree-wrap{overflow:auto;padding:10px 0 20px;min-height:200px}
/* vertical binary tree */
.tree-tree, .tree-tree ul{display:flex;justify-content:center;padding-top:22px;position:relative;margin:0;list-style:none}
.tree-tree li{display:flex;flex-direction:column;align-items:center;position:relative;padding:22px 10px 0;list-style:none}
.tree-tree li::before,.tree-tree li::after{content:"";position:absolute;top:0;right:50%;border-top:2px solid #2a3a4a;width:50%;height:22px}
.tree-tree li::after{right:auto;left:50%;border-left:2px solid #2a3a4a}
.tree-tree li:only-child::after,.tree-tree li:only-child::before{display:none}
.tree-tree li:only-child{padding-top:0}
.tree-tree li:first-child::before,.tree-tree li:last-child::after{border:0 none}
.tree-tree li:last-child::before{border-right:2px solid #2a3a4a;border-radius:0 8px 0 0}
.tree-tree li:first-child::after{border-radius:8px 0 0 0}
.tree-tree ul ul::before{content:"";position:absolute;top:0;left:50%;border-left:2px solid #2a3a4a;width:0;height:22px}
.node{display:flex;align-items:center;gap:8px;background:#161d25;border:1px solid #2a3642;border-radius:10px;padding:6px 10px;min-width:150px;position:relative;z-index:1}
.node.owned{border-color:#2f7a4b;background:#12241b}
.node.self{border-color:#7a5a2f;background:#241f12}
.node img{width:38px;height:38px;border-radius:8px;background:#0b0e11;object-fit:contain}
.node .nm{font-size:13px}
.node .sub{font-size:10px;color:var(--muted)}
.node .ok{color:var(--acc);font-size:12px}
.node .warn{color:#ffb86b;font-size:10px}
.foot{padding:14px 18px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}
.foot a{color:#7fd1ff}

.mode-tabs{margin-bottom:10px}
.filters{display:flex;gap:12px;align-items:center;margin:8px 0 10px;flex-wrap:wrap}
.plans{display:flex;flex-direction:column;gap:6px;max-height:300px;overflow:auto;padding-right:4px;margin-bottom:8px}
.plan{display:flex;align-items:center;gap:8px;background:#141b22;border:1px solid #26323d;border-radius:8px;padding:5px 8px;cursor:pointer;font-size:13px}
.plan:hover{border-color:#3a4a5a}
.plan.sel{border-color:var(--acc);background:#12241b}
.plan img{width:28px;height:28px;border-radius:6px;background:#0b0e11;object-fit:contain}
.plan .p{display:flex;align-items:center;gap:6px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plan .x{color:var(--muted)}
.tag{font-size:10px;padding:1px 6px;border-radius:999px;border:1px solid #2a3642;color:var(--muted);white-space:nowrap}
.tag.ok{color:#38d47a;border-color:#1f5c34;background:#12241b}
.tag.mid{color:#ffb86b;border-color:#5c4a1f;background:#241f12}
.more{background:#1b232c;border:1px dashed #3a4a5a;color:var(--muted);border-radius:8px;padding:6px;cursor:pointer}
.more:hover{color:var(--fg)}
.times{color:var(--muted)}

.explorer{margin-top:10px;max-height:calc(100vh - 430px);min-height:240px;overflow-x:scroll;overflow-y:auto;padding-right:6px}
.explorer-tree{display:flex;flex-direction:column;gap:8px}
.enode{display:flex;flex-direction:column;gap:8px}
.card{display:flex;align-items:center;gap:8px;background:#161d25;border:1px solid #2a3642;border-radius:10px;padding:5px 9px;cursor:pointer;max-width:270px;position:relative;user-select:none}
.card:hover{border-color:#3a4a5a}
.card.owned{border-color:#2f7a4b;background:#12241b}
.card.open{border-color:var(--acc);box-shadow:0 0 0 1px #1f5c34 inset}
.card img{width:30px;height:30px;border-radius:7px;background:#0b0e11;object-fit:contain}
.card .nm{font-size:12px;display:flex;flex-direction:column;line-height:1.2}
.card .sub{font-size:9px;color:var(--muted)}
.card .cnt{position:absolute;right:18px;top:4px;font-size:9px;color:var(--muted)}
.card .arrow{position:absolute;right:6px;top:5px;font-size:10px;color:var(--muted)}
.card .tag{font-size:9px;padding:1px 5px;border-radius:999px;border:1px solid #2a3642;color:var(--muted)}
.card .tag.ok{color:#38d47a;border-color:#1f5c34;background:#12241b}
.kids{margin-left:14px;border-left:2px dashed #2a3a4a;padding-left:10px;display:flex;flex-direction:column;gap:8px;margin-top:8px}
.plan-block{display:flex;align-items:flex-start;gap:6px;flex-wrap:wrap;padding:4px 0}
.plan-block .idx{font-size:9px;color:var(--muted);padding-top:10px;min-width:22px}
.plan-block .x{color:var(--muted);padding-top:10px}
.card.terminal{cursor:default;border-style:dashed;opacity:.92}
.card.terminal:hover{border-color:#2f7a4b}
.shots{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.shot{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px;color:var(--muted)}
.shot img{width:84px;height:52px;object-fit:cover;border-radius:6px;border:1px solid #2a3642}
.shot .rm{position:absolute;top:-6px;right:-6px;width:18px;height:18px;padding:0;border-radius:50%;background:#3a2020;border:1px solid #6a3030;color:#ffb0a0;font-size:11px;line-height:1;cursor:pointer}
.own-head{display:flex;align-items:center;gap:8px}
.mini{margin-left:auto;font-size:11px;padding:3px 8px;border-radius:999px;background:#132a3a;border:1px solid #1f4a63;color:#7fd1ff;cursor:pointer}
.mini:hover{background:#173a52}
.mini.busy{opacity:.6;cursor:default}

/* horizontal scrolling for wide trees */
.breed-main > .panel{min-width:0}
.explorer{overflow:auto;max-width:100%;max-height:calc(100vh - 430px);min-height:240px;overflow-x:scroll;scrollbar-width:thin;scrollbar-color:#3a4a5a #0f1216}
.explorer-tree{min-width:max-content}
.explorer::-webkit-scrollbar{width:10px;height:10px}
.explorer::-webkit-scrollbar-track{background:#0f1216}
.explorer::-webkit-scrollbar-thumb{background:#33414f;border-radius:6px;border:2px solid #0f1216}
.explorer::-webkit-scrollbar-thumb:hover{background:#455a6d}
.plan-block{flex-wrap:nowrap}
.own-add{display:flex;gap:6px;margin-top:8px}
.own-add input{flex:1;background:#0f1216;color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:5px 8px;font-size:12px}
.own-add button{font-size:12px;padding:5px 10px}
.chip .chip-x{margin-left:4px;background:transparent;border:0;color:var(--muted);cursor:pointer;font-size:12px;padding:0 2px}
.chip .chip-x:hover{color:#ff8a7a}

.nav-summary{margin:10px 0;padding:8px 10px;border-radius:8px;background:#12241b;border:1px solid #1f5c34;color:#a9f0c5;font-size:13px}
.nav-flex{display:grid;grid-template-columns:minmax(300px,0.95fr) 1.45fr;gap:10px;align-items:start}
@media(max-width:1100px){.nav-flex{grid-template-columns:1fr}}
.nav-table{max-height:460px;overflow:auto;border:1px solid var(--line);border-radius:10px}
.nav-table table{width:100%;border-collapse:collapse;font-size:12px}
.nav-table th,.nav-table td{padding:6px 8px;border-bottom:1px solid #222a33;text-align:left;vertical-align:top}
.nav-table th{color:var(--muted);font-weight:500;position:sticky;top:0;background:#171c22}
#navCanvas{width:100%;height:700px;background:#0b0e11;border:1px solid var(--line);border-radius:10px;cursor:grab;touch-action:none}

.nav-group{margin:8px 0 4px;border:1px solid var(--line);border-radius:8px;padding:8px;background:#12161b}
.nav-group-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.nav-group-row select{flex:1;min-width:140px;background:#0f1216;color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:6px}
.nav-pick{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;max-height:150px;overflow:auto}
.pick{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:2px 8px 2px 3px;cursor:pointer;background:#0f1216}
.pick img{width:20px;height:20px;border-radius:50%;object-fit:contain}
.pick input{display:none}
.pick.on{color:#a9f0c5;border-color:#1f5c34;background:#12241b}
.own-head .mini{margin-left:6px}
.own-head .mini:first-of-type{margin-left:auto}

.group-head{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.group-title{font-size:12px;color:var(--muted);margin-right:auto}
.group-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin-top:8px}
.gcard{position:relative;background:#0f1216;border:1px solid var(--line);border-radius:10px;padding:8px;cursor:pointer;min-height:64px;display:flex;flex-direction:column;gap:6px;transition:border-color .15s,background .15s}
.gcard:hover{border-color:#3a4a5a}
.gcard.active{border-color:#38d47a;background:#12241b;box-shadow:0 0 0 1px #1f5c34 inset}
.gname{font-size:12px;color:#dfe8f0;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gicons{display:flex;align-items:center;gap:3px;flex-wrap:wrap}
.gicons img{width:18px;height:18px;border-radius:50%;object-fit:contain;background:#171c22}
.gcount{font-size:10px;color:var(--muted);margin-left:2px}
.gdel{position:absolute;top:4px;right:4px;background:transparent;border:0;color:var(--muted);cursor:pointer;font-size:12px;padding:0 3px}
.gdel:hover{color:#ff8a7a}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:50}
.modal[hidden]{display:none !important}
.modal-box{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;width:300px}
.modal-box h3{margin:0 0 10px;font-size:14px}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}

.nav-canvas-wrap{position:relative}
.node-pop{position:absolute;top:10px;right:10px;width:290px;max-height:calc(100% - 20px);overflow:auto;background:rgba(15,18,22,.96);border:1px solid var(--line);border-radius:10px;padding:10px;z-index:20;backdrop-filter:blur(3px)}
.np-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.np-head span{font-size:13px;font-weight:500}
.np-close{margin-left:auto;background:transparent;border:0;color:var(--muted);cursor:pointer;font-size:14px}
.np-body{display:flex;flex-direction:column;gap:6px}
.np-plan{display:flex;align-items:center;gap:6px;padding:5px;border:1px solid var(--line);border-radius:8px;cursor:pointer;background:#12161b}
.np-plan:hover{border-color:#3a4a5a}
.np-plan img{width:22px;height:22px;border-radius:50%;object-fit:contain}
.np-plan .nm{font-size:11px;color:#dfe8f0}
.np-plan .dex{font-size:10px;color:var(--muted)}
.np-actions{display:flex;gap:6px;margin:0 0 8px}
.np-actions button{font-size:11px;padding:4px 8px}

.np-plan{position:relative}
.np-toggle{margin-left:auto;font-size:10px;padding:2px 8px;border-radius:999px;border:1px solid var(--line);background:#0f1216;color:var(--muted);cursor:pointer;flex:none}
.np-toggle:hover{border-color:#3a4a5a}
.np-toggle.open{color:#ffb86b;border-color:#5c4a1f;background:#241f12}

.work-search{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.work-search h3{font-size:12px;color:var(--muted);margin:0 0 6px;font-weight:500}
.work-row{display:flex;gap:6px}
.work-row select{flex:1;min-width:0;background:#0f1216;color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:5px;font-size:12px}
.work-row button{font-size:12px;padding:5px 10px}
.work-results{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;max-height:160px;overflow:auto}
.work-results .wr{display:flex;align-items:center;gap:4px;font-size:11px;border:1px solid var(--line);border-radius:999px;padding:2px 8px 2px 3px;background:#0f1216;cursor:pointer;color:#c9d4de}
.work-results .wr:hover{border-color:#3a4a5a}
.work-results .wr img{width:18px;height:18px;border-radius:50%;object-fit:contain}
.work-results .wr .lv{color:#7fd1ff}

.work-pop{position:absolute;z-index:60;max-height:300px;overflow:auto;background:#12161b;border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.5);padding:4px}
.wp-row{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:8px;cursor:pointer;font-size:12px;color:#dfe8f0}
.wp-row:hover{background:#1d2630}
.wp-row img{width:22px;height:22px;border-radius:50%;object-fit:contain}
.wp-name{flex:1}
.wp-lv{color:#7fd1ff;font-size:11px}

.detect-canvas{width:100%;margin-top:8px;border:1px solid var(--line);border-radius:10px;background:#0b0e11}
.detect-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;max-height:150px;overflow:auto}
.detect-list .dl{display:flex;align-items:center;gap:5px;font-size:11px;border:1px solid var(--line);border-radius:999px;padding:2px 8px 2px 3px;background:#0f1216;cursor:pointer;color:#c9d4de}
.detect-list .dl img{width:20px;height:20px;border-radius:50%;object-fit:contain}
.detect-list .dl .cf{color:#7fd1ff}

.nav-targets{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.nav-targets .nt{display:flex;align-items:center;gap:5px;font-size:11px;border:1px solid var(--line);border-radius:999px;padding:2px 8px 2px 3px;background:#0f1216;color:#dfe8f0}
.nav-targets .nt img{width:20px;height:20px;border-radius:50%;object-fit:contain}
.nav-targets .nt button{background:transparent;border:0;color:var(--muted);cursor:pointer;font-size:12px}

.pick-search{width:100%;margin-top:8px;background:#0f1216;color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:5px 8px;font-size:12px}

.nav-table td:nth-child(6){min-width:150px}