/*
Theme Name: MEPIZPIH Interface
*/

:root{
--neon-primary:#0ea5e9;
--neon-secondary:#22d3ee;

--bg:#020617;
--text:#e2e8f0;

--grid:rgba(56,189,248,0.05);
--line:rgba(56,189,248,0.2);
}

/* RESET */
*{ box-sizing:border-box; }

body{
margin:0;
font-family:monospace;
color:var(--text);

display:flex;
flex-direction:column;
min-height:100vh;

background:
radial-gradient(circle at 20% 30%, rgba(14,165,233,0.08), transparent 40%),
radial-gradient(circle at 80% 70%, rgba(34,211,238,0.08), transparent 40%),
linear-gradient(180deg,#020617,#000);

overflow-x:hidden;
}

/* GRID */
body::before{
content:"";
position:fixed;
inset:0;

background-image:
linear-gradient(var(--grid) 1px, transparent 1px),
linear-gradient(90deg,var(--grid) 1px, transparent 1px);

background-size:40px 40px;

pointer-events:none;
z-index:0;
}

/* HEADER */
header{
height:80px;
display:flex;
align-items:center;
padding:20px;
border-bottom:1px solid var(--line);
}

/* MAIN */
main{
flex:1;
display:grid;
grid-template-columns:300px 1fr 300px;

background-image:
linear-gradient(var(--line),var(--line)),
linear-gradient(var(--line),var(--line));

background-size:1px 100%,1px 100%;
background-position:300px 0, calc(100% - 300px) 0;
background-repeat:no-repeat;
}

/* PANELS */
.panel{
position:relative;
padding:20px;
overflow:hidden;
}

/* CORE */
.core{
position:relative;
width:100%;
height:100%;
}

/* KOŁO */
.circle{
width:200px;
height:200px;

border-radius:50%;
border:2px solid var(--neon-primary);

box-shadow:
0 0 20px var(--neon-primary),
inset 0 0 20px rgba(14,165,233,0.4);

animation:spin 20s linear infinite;

position:absolute;
inset:0;
margin:auto;

z-index:1;
}

@keyframes spin{
100%{ transform:rotate(360deg); }
}

/* ===== CONTENT (NAPRAWIONE – PRZEZROCZYSTE) ===== */

#ajax-content{
display:none;

position:absolute;
inset:0;

width:100%;
height:100%;

background:transparent; /* ?? KLUCZ */

padding:60px;

overflow:auto;

z-index:2;
}

/* DOTY */
#x74ssx{
position:relative;
width:100%;
height:calc(100vh - 80px);
}

.dot{
position:absolute;

width:8px;
height:8px;

border-radius:50%;
cursor:pointer;

background:inherit;

box-shadow:
0 0 6px currentColor,
0 0 12px currentColor,
0 0 18px currentColor;

animation:nodePulse 3s ease-in-out infinite;
transition:transform .2s ease;

z-index:10;
}

.dot:hover{
transform:scale(1.6);
}

.dot::after{
content:"";
position:absolute;
inset:-4px;
border-radius:50%;
background:inherit;
opacity:.35;
filter:blur(6px);
z-index:-1;
}

@keyframes nodePulse{
0%{transform:scale(1);opacity:.8;}
50%{transform:scale(1.2);opacity:1;}
100%{transform:scale(1);opacity:.8;}
}

/* TOOLTIP */

.dot-tooltip{
position:fixed;
padding:6px 10px;
border-radius:5px;
font-size:13px;
white-space:nowrap;
pointer-events:none;
z-index:9999;
}