/* ==========================================
   OSINT FRAMEWORK - PREMIUM CYBER UI
   ========================================== */

:root{

  --color-bg:#0b1020;
  --color-surface:rgba(20,28,48,.75);

  --color-text-primary:#ffffff;
  --color-text-secondary:#94a3b8;

  --color-node-stroke:#00d4ff;

  --color-node-fill-branch:#16213e;
  --color-node-fill-leaf:#0f172a;

  --color-link:#304060;

  --color-header:#ffffff;

  --color-accent:#6c63ff;

  --color-border:rgba(255,255,255,.08);

  --color-noscript-bg:#1e293b;
  --color-noscript-border:#334155;

  --badge-T:#3b82f6;
  --badge-D:#f59e0b;
  --badge-R:#eab308;
  --badge-M:#8b5cf6;

  --shadow-sm:
    0 5px 15px rgba(0,0,0,.20);

  --shadow-md:
    0 15px 40px rgba(0,0,0,.45);

  --radius-sm:12px;
  --radius-md:20px;

  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;

  --font-family:
    'Inter',
    sans-serif;

  --font-size-sm:11px;
  --font-size-base:14px;
  --font-size-lg:16px;
  --font-size-xl:40px;
}

/* ==========================================
   BODY
   ========================================== */

body{

  margin:0;

  overflow:hidden;

  color:var(--color-text-primary);

  font-family:var(--font-family);

  background:#0b1020;

  background-image:
    radial-gradient(circle at 15% 20%, rgba(108,99,255,.25), transparent 30%),
    radial-gradient(circle at 80% 40%, rgba(0,212,255,.20), transparent 30%),
    radial-gradient(circle at 50% 90%, rgba(255,77,141,.15), transparent 30%);
}

body::before{

  content:"";

  position:fixed;

  inset:0;

  background:
    linear-gradient(
      rgba(255,255,255,.01),
      rgba(255,255,255,.01)
    );

  pointer-events:none;

  z-index:-1;
}

/* ==========================================
   HEADER
   ========================================== */

#header{

  position:sticky;

  top:0;

  z-index:999;

  display:flex;

  align-items:center;

  justify-content:center;

  padding:20px;

  font-size:34px;

  font-weight:800;

  color:#fff;

  letter-spacing:1px;

  backdrop-filter:blur(20px);

  background:
    rgba(10,15,30,.75);

  border-bottom:
    1px solid rgba(255,255,255,.05);

  box-shadow:
    0 10px 30px rgba(0,0,0,.25);
}

#header-actions{

  position:absolute;

  right:20px;

  top:50%;

  transform:translateY(-50%);

  display:flex;

  gap:10px;
}

#header-actions button{

  border:none;

  color:#fff;

  cursor:pointer;

  font-weight:600;

  border-radius:12px;

  padding:10px 18px;

  transition:.3s;

  background:
    linear-gradient(
      135deg,
      #6c63ff,
      #00d4ff
    );
}

#header-actions button:hover{

  transform:
    translateY(-2px);

  box-shadow:
    0 10px 25px rgba(0,212,255,.3);
}

/* ==========================================
   SEARCH
   ========================================== */

#search-container{

  text-align:center;

  padding:16px;
}

#search-input{

  width:700px;

  max-width:90vw;

  padding:18px 28px;

  border:none;

  outline:none;

  color:#fff;

  font-size:15px;

  border-radius:50px;

  transition:.35s;

  background:
    rgba(255,255,255,.05);

  backdrop-filter:
    blur(25px);
}

#search-input:focus{

  transform:
    translateY(-2px);

  box-shadow:
    0 0 0 1px #00d4ff,
    0 0 30px rgba(0,212,255,.4);
}

#search-results{

  width:650px;

  max-width:90vw;

  margin:auto;

  overflow:hidden;

  border-radius:20px;

  background:
    rgba(20,28,48,.95);

  backdrop-filter:
    blur(25px);

  border:
    1px solid rgba(255,255,255,.05);
}

/* ==========================================
   SVG TREE
   ========================================== */

svg{

  width:100%;

  display:block;

  height:
    calc(100vh - 120px);

  cursor:grab;
}

svg:active{
  cursor:grabbing;
}

.node circle{

  fill:var(--color-node-fill-leaf);

  stroke:var(--color-node-stroke);

  stroke-width:1.5px;

  transition:
    all .35s ease;
}

.node:hover circle{

  transform:scale(1.3);

  stroke-width:3;

  filter:
    drop-shadow(0 0 10px #00d4ff)
    drop-shadow(0 0 20px #00d4ff);
}

.node text{

  font-size:13px;

  font-weight:500;

  fill:#fff;

  transition:.3s;
}

.node:hover text{

  fill:#00d4ff;
}

path.link{

  fill:none;

  stroke:#304060;

  stroke-width:1.5px;
}