@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',sans-serif;background:#04070D;color:#e0e0e0;display:flex;height:100vh;overflow:hidden}

#sidebar{width:380px;min-width:380px;padding:24px;background:rgba(4,7,13,0.85);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);border-right:1px solid rgba(0,209,255,0.15);overflow-y:auto;z-index:10;display:flex;flex-direction:column;gap:16px}
#sidebar::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,#00FFA3,#00D1FF,#7A5CFF,transparent);opacity:0.6}

#logo{font-size:20px;font-weight:700;letter-spacing:-0.03em;background:linear-gradient(135deg,#00FFA3,#00D1FF,#7A5CFF);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;padding-bottom:12px;border-bottom:1px solid rgba(0,209,255,0.1)}
#stats{font-size:12px;color:rgba(255,255,255,0.4);letter-spacing:0.05em;text-transform:uppercase;font-weight:500}
#search{width:100%;padding:12px 16px;background:rgba(255,255,255,0.05);border:1px solid rgba(0,209,255,0.2);border-radius:10px;font-size:13px;font-family:'Inter',sans-serif;color:#fff;outline:none;transition:all 0.3s ease}
#search::placeholder{color:rgba(255,255,255,0.25);font-weight:300}
#search:focus{border-color:#00D1FF;box-shadow:0 0 20px rgba(0,209,255,0.15);background:rgba(255,255,255,0.08)}

#entity-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
#entity-list .entity{padding:10px 14px;cursor:pointer;border-radius:8px;font-size:13px;font-weight:400;color:rgba(255,255,255,0.7);transition:all 0.3s ease;border:1px solid transparent}
#entity-list .entity:hover{background:rgba(0,209,255,0.08);border-color:rgba(0,209,255,0.15);color:#fff;transform:translateX(4px)}
#entity-list .entity:active{background:rgba(0,209,255,0.15)}

#sidebar::-webkit-scrollbar,#entity-list::-webkit-scrollbar{width:4px}
#sidebar::-webkit-scrollbar-track,#entity-list::-webkit-scrollbar-track{background:transparent}
#sidebar::-webkit-scrollbar-thumb,#entity-list::-webkit-scrollbar-thumb{background:rgba(0,209,255,0.2);border-radius:4px}
#sidebar::-webkit-scrollbar-thumb:hover,#entity-list::-webkit-scrollbar-thumb:hover{background:rgba(0,209,255,0.4)}

#graph{flex:1;height:100vh;width:100%;background:radial-gradient(ellipse at center,#0a1628 0%,#04070D 70%);cursor:grab}
#graph:active{cursor:grabbing}

.node-glow{fill:rgba(0,209,255,0.08);pointer-events:none}
.node-circle{stroke:rgba(255,255,255,0.3);stroke-width:1.5;cursor:pointer;transition:r 0.2s ease}
.node-circle:hover{stroke:#fff;stroke-width:2.5}
.node-label{font-family:'Inter',sans-serif;font-size:11px;fill:rgba(255,255,255,0.6);pointer-events:none;font-weight:400;text-shadow:0 0 8px rgba(4,7,13,0.9)}
.link-line{stroke-opacity:0.3;stroke-width:1.2}

.tooltip{position:fixed;padding:14px 18px;background:rgba(4,7,13,0.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(0,209,255,0.2);border-radius:12px;pointer-events:none;z-index:9999;max-width:320px;box-shadow:0 0 40px rgba(0,209,255,0.1),0 8px 32px rgba(0,0,0,0.4);transition:opacity 0.15s ease}
.tooltip-title{font-size:15px;font-weight:600;color:#fff;margin-bottom:4px;letter-spacing:-0.01em}
.tooltip-desc{font-size:12px;color:rgba(255,255,255,0.5);font-weight:300;line-height:1.4}
.tooltip-id{font-size:10px;color:rgba(0,209,255,0.5);font-weight:500;letter-spacing:0.05em;margin-top:6px;text-transform:uppercase}

#zoom-controls{position:fixed;bottom:24px;right:24px;display:flex;flex-direction:column;gap:6px;z-index:20}
#zoom-controls button{width:40px;height:40px;border-radius:10px;border:1px solid rgba(0,209,255,0.15);background:rgba(4,7,13,0.8);backdrop-filter:blur(12px);color:#fff;font-size:18px;cursor:pointer;transition:all 0.25s ease;display:flex;align-items:center;justify-content:center;font-family:'Inter',sans-serif}
#zoom-controls button:hover{background:rgba(0,209,255,0.15);border-color:rgba(0,209,255,0.3);box-shadow:0 0 20px rgba(0,209,255,0.1)}
#zoom-controls button:active{transform:scale(0.95)}

@media(max-width:768px){
  #sidebar{width:100%;min-width:unset;height:40vh;border-right:none;border-bottom:1px solid rgba(0,209,255,0.15)}
  body{flex-direction:column}
  #graph{height:60vh}
  #zoom-controls{bottom:16px;right:16px}
  #zoom-controls button{width:36px;height:36px;font-size:16px}
}