/* Flower of Life — IPv6 Route Mapper */
:root{--bg:#06060a;--border:#1a1a28;--text:#c8c8d8;--muted:#505060;--power:#00ff41;--quest:#f59e0b;--chat:#06b6d4;--hub:#bb86fc;--mapper:#8b5cf6;--other:#6e7681;--cyan:#06b6d4;--amber:#f59e0b;--red:#ef4444}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:'JetBrains Mono',monospace;overflow:hidden}
#ui{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;flex-direction:column}
.hdr{padding:8px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:rgba(6,6,10,0.95);backdrop-filter:blur(8px)}
.hdr h1{font-size:12px;color:var(--mapper);font-weight:600}
.hdr .legend{display:flex;gap:10px;font-size:10px}
.hdr .legend span{display:flex;align-items:center;gap:3px}
.hdr .legend .sw{width:8px;height:8px;border-radius:2px;display:inline-block}
.hdr .st{color:var(--muted);font-size:10px}
.tb{padding:5px 20px;border-bottom:1px solid var(--border);display:flex;gap:10px;align-items:center;background:rgba(6,6,10,0.9);flex-wrap:wrap}
.tb label{display:flex;align-items:center;gap:4px;font-size:10px;color:var(--muted);cursor:pointer}
.tb input[type=checkbox]{accent-color:var(--mapper)}
.tb .st{margin-left:auto;color:var(--muted);font-size:10px}
.fi{background:rgba(26,26,40,0.5);border:1px solid var(--border);color:var(--text);padding:3px 8px;border-radius:3px;font-size:10px;font-family:inherit;width:140px}
.fi:focus{outline:none;border-color:var(--mapper)}
canvas{position:fixed;top:0;left:0;z-index:1;cursor:grab}
canvas:active{cursor:grabbing}
.tt{position:fixed;background:rgba(12,16,32,0.97);border:1px solid var(--mapper);border-radius:4px;padding:10px 14px;font-size:10px;z-index:1000;pointer-events:none;display:none;max-width:320px;line-height:1.7}
.tt .tn{color:var(--mapper);font-weight:700;font-size:11px}
.tt .ti{color:var(--muted)}
.stats{position:fixed;bottom:10px;left:10px;font-size:9px;color:var(--muted);z-index:100;background:rgba(6,6,10,0.9);padding:6px 10px;border-radius:3px;border:1px solid var(--border)}
.cats{padding:4px 20px;display:flex;gap:4px;background:rgba(6,6,10,0.9);border-bottom:1px solid var(--border);flex-wrap:wrap}
.cat-btn{background:rgba(26,26,40,0.5);border:1px solid var(--border);color:var(--muted);padding:2px 8px;border-radius:3px;font-size:9px;font-family:inherit;cursor:pointer;transition:all .15s}
.cat-btn:hover{border-color:var(--mapper);color:var(--text)}
.cat-btn.active{border-color:var(--cat,var(--mapper));color:var(--cat,var(--mapper));background:rgba(139,92,246,0.1)}
.tb-btn{background:rgba(26,26,40,0.5);border:1px solid var(--border);color:var(--muted);padding:2px 8px;border-radius:3px;font-size:12px;font-family:inherit;cursor:pointer;transition:all .15s}
.tb-btn:hover{border-color:var(--mapper);color:var(--text)}
.btn-group{display:flex;gap:2px;margin-left:auto}