*{
font-family:'Orbitron',sans-serif;
}
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{
background:#060b1a;
color:white;
overflow-x:hidden;
min-height:100vh;
}

.background{
position:fixed;
inset:0;
overflow:hidden;
z-index:-1;
}

.circle{
position:absolute;
border-radius:50%;
filter:blur(120px);
}

.c1{
width:400px;
height:400px;
background:#00e5ff;
top:-100px;
left:-100px;
opacity:.2;
}

.c2{
width:350px;
height:350px;
background:#8b5cf6;
bottom:-100px;
right:-100px;
opacity:.2;
}

.c3{
width:300px;
height:300px;
background:#06b6d4;
top:40%;
left:40%;
opacity:.15;
}

.equation{
position:absolute;
color:rgba(255,255,255,0.08);
font-size:2rem;
font-weight:700;
white-space:nowrap;
}

.eq1{
top:10%;
left:-20%;
animation:moveRight 18s linear infinite;
}

.eq2{
top:25%;
right:-20%;
animation:moveLeft 22s linear infinite;
}

.eq3{
left:15%;
bottom:-10%;
animation:moveUp 20s linear infinite;
}

.eq4{
right:20%;
top:-10%;
animation:moveDown 25s linear infinite;
}

.eq5{
top:60%;
left:-15%;
animation:diag1 18s linear infinite;
}

.eq6{
bottom:-10%;
right:-15%;
animation:diag2 20s linear infinite;
}

.eq7{
top:40%;
left:50%;
animation:rotateFloat 15s ease-in-out infinite;
}

.eq8{
bottom:30%;
left:30%;
animation:zigzag 12s ease-in-out infinite;
}
.eq9{
top:12%;
left:-15%;
animation:moveRight 20s linear infinite;
}

.eq10{
top:22%;
right:-15%;
animation:moveLeft 24s linear infinite;
}

.eq11{
left:8%;
bottom:-10%;
animation:moveUp 22s linear infinite;
}

.eq12{
right:15%;
top:-10%;
animation:moveDown 26s linear infinite;
}

.eq13{
top:65%;
left:-10%;
animation:diag1 18s linear infinite;
}

.eq14{
bottom:15%;
right:-10%;
animation:diag2 20s linear infinite;
}
.eq15{
top:5%;
left:-20%;
animation:moveRightSlow 30s linear infinite;
}

.eq16{
top:80%;
right:-20%;
animation:moveLeftSlow 28s linear infinite;
}

.eq17{
left:5%;
top:-10%;
animation:moveDownSlow 24s linear infinite;
}

.eq18{
right:10%;
bottom:-10%;
animation:moveUpSlow 26s linear infinite;
}

.eq19{
top:35%;
left:-15%;
animation:diagUpRight 22s linear infinite;
}

.eq20{
bottom:20%;
right:-15%;
animation:diagDownLeft 20s linear infinite;
}

.eq21{
top:50%;
left:50%;
animation:spinFloat 18s ease-in-out infinite;
}

.eq22{
bottom:40%;
left:20%;
animation:crazyMove 16s ease-in-out infinite;
}
@keyframes moveRightSlow{
from{transform:translateX(0);}
to{transform:translateX(180vw);}
}

@keyframes moveLeftSlow{
from{transform:translateX(0);}
to{transform:translateX(-180vw);}
}

@keyframes moveDownSlow{
from{transform:translateY(0);}
to{transform:translateY(130vh);}
}

@keyframes moveUpSlow{
from{transform:translateY(0);}
to{transform:translateY(-130vh);}
}

@keyframes diagUpRight{
from{
transform:translate(0,0);
}
to{
transform:translate(140vw,-140vh);
}
}

@keyframes diagDownLeft{
from{
transform:translate(0,0);
}
to{
transform:translate(-140vw,140vh);
}
}

@keyframes spinFloat{
0%{
transform:rotate(0deg) scale(1);
}
50%{
transform:rotate(180deg) scale(1.2);
}
100%{
transform:rotate(360deg) scale(1);
}
}

@keyframes crazyMove{
0%{
transform:translate(0,0);
}
20%{
transform:translate(80px,-40px);
}
40%{
transform:translate(-60px,-80px);
}
60%{
transform:translate(100px,30px);
}
80%{
transform:translate(-40px,60px);
}
100%{
transform:translate(0,0);
}
}
@keyframes float{
0%,100%{
transform:translateY(0);
}
50%{
transform:translateY(-30px);
}
}

.container{
padding:20px;
}

header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:25px;
}

header h1{
font-size:3rem;
color:#00e5ff;
text-shadow:
0 0 10px #00e5ff,
0 0 30px #00e5ff;
}

header p{
color:#bdbdbd;
}

#themeBtn{
width:55px;
height:55px;
border:none;
border-radius:50%;
background:#101827;
color:#00e5ff;
cursor:pointer;
font-size:1.2rem;
}

.dashboard{
display:grid;
grid-template-columns:220px 1fr 280px;
gap:20px;
}

.sidebar,
.main-panel,
.history-panel{
background:rgba(255,255,255,.05);
backdrop-filter:blur(20px);
border:1px solid rgba(255,255,255,.08);
border-radius:25px;
box-shadow:
0 0 25px rgba(0,229,255,.1);
}

.sidebar{
padding:20px;
}

.sidebar h2{
margin-bottom:20px;
}

.sidebar button{
width:100%;
padding:14px;
margin-bottom:12px;
border:none;
border-radius:12px;
background:#111827;
color:white;
cursor:pointer;
transition:.3s;
}

.sidebar button:hover{
background:#00e5ff;
color:black;
box-shadow:
0 0 15px #00e5ff;
}

.main-panel{
padding:20px;
max-width:850px;
margin:auto;
}

.display-card{
margin-bottom:20px;
}

#display{
width:100%;
height:80px;

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

backdrop-filter:blur(20px);

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

font-size:2rem;
font-weight:600;

color:#fff;

text-align:right;

padding:20px;

border-radius:20px;
}

.calculator-grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:8px;
}

.calculator-grid button{
height:44px;
border:none;
border-radius:12px;
background:#111827;
color:white;
font-size:0.85rem;
font-weight:600;
cursor:pointer;
transition:.25s;
}

.calculator-grid button:hover{
transform:translateY(-4px) scale(1.05);

background:linear-gradient(
135deg,
#00e5ff,
#8b5cf6
);

color:white;

box-shadow:
0 0 10px #00e5ff,
0 0 30px rgba(0,229,255,.4),
0 0 60px rgba(139,92,246,.3);
}

.history-panel{
padding:20px;
}

.history-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:15px;
}

.history-header button{
border:none;
padding:8px 15px;
border-radius:10px;
cursor:pointer;
}

#historyList{
list-style:none;
max-height:600px;
overflow:auto;
}

#historyList li{
background:#111827;
padding:10px;
margin-bottom:10px;
border-radius:10px;
word-break:break-word;
}

@media(max-width:1000px){

.dashboard{
grid-template-columns:1fr;
}

.calculator-grid{
grid-template-columns:repeat(4,1fr);
}

}
.extra-tools{
margin-top:25px;
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
}

.tool-card{

background:rgba(255,255,255,0.05);

backdrop-filter:blur(15px);

border:1px solid rgba(255,255,255,0.1);

border-radius:20px;

padding:20px;

box-shadow:
0 0 20px rgba(0,229,255,0.15);

transition:0.3s;

}

.tool-card:hover{

transform:translateY(-5px);

box-shadow:
0 0 30px rgba(0,229,255,0.3);

}

.tool-card h3{
margin-bottom:15px;
color:#00e5ff;
}

.tool-card input{
width:100%;
padding:12px;
margin-bottom:10px;
border:none;
border-radius:10px;
background:#0f172a;
color:white;
}

.tool-card button{
width:100%;
padding:12px;
border:none;
border-radius:10px;
cursor:pointer;
background:#00e5ff;
color:black;
font-weight:bold;
}

@media(max-width:1000px){

.extra-tools{
grid-template-columns:1fr;
}

}
.clock-card{
margin-top:20px;
padding:15px;
border-radius:15px;
background:#111827;
text-align:center;
}
body.light{
background:#f4f7ff;
color:black;
}

body.light .sidebar,
body.light .main-panel,
body.light .history-panel{
background:rgba(255,255,255,.9);
color:black;
}

body.light #display{
background:white;
color:black;
}

body.light .calculator-grid button{
background:white;
color:black;
border:1px solid #ddd;
}

body.light .tool-card{
background:white;
color:black;
}

body.light .clock-card{
background:white;
color:black;
}
body{
background:
radial-gradient(circle at top left,#00e5ff22,transparent 30%),
radial-gradient(circle at bottom right,#8b5cf622,transparent 30%),
linear-gradient(135deg,#050816,#0f172a,#050816);

background-size:cover;
}
header h1{
animation:logoGlow 2s ease-in-out infinite alternate;
}

@keyframes logoGlow{

from{
text-shadow:
0 0 10px #00e5ff;
}

to{
text-shadow:
0 0 20px #00e5ff,
0 0 40px #8b5cf6,
0 0 60px #00e5ff;
}

}
@keyframes moveRight{
from{transform:translateX(0);}
to{transform:translateX(150vw);}
}

@keyframes moveLeft{
from{transform:translateX(0);}
to{transform:translateX(-150vw);}
}

@keyframes moveUp{
from{transform:translateY(0);}
to{transform:translateY(-120vh);}
}

@keyframes moveDown{
from{transform:translateY(0);}
to{transform:translateY(120vh);}
}

@keyframes diag1{
from{
transform:translate(0,0);
}
to{
transform:translate(120vw,-120vh);
}
}

@keyframes diag2{
from{
transform:translate(0,0);
}
to{
transform:translate(-120vw,120vh);
}
}

@keyframes rotateFloat{
0%{
transform:rotate(0deg) translateY(0);
}
50%{
transform:rotate(180deg) translateY(-40px);
}
100%{
transform:rotate(360deg) translateY(0);
}
}

@keyframes zigzag{
0%{
transform:translate(0,0);
}
25%{
transform:translate(50px,-30px);
}
50%{
transform:translate(-40px,-60px);
}
75%{
transform:translate(60px,-20px);
}
100%{
transform:translate(0,0);
}
}
body::before{
content:"";

position:fixed;
inset:0;

background-image:
linear-gradient(
rgba(255,255,255,.03) 1px,
transparent 1px
),

linear-gradient(
90deg,
rgba(255,255,255,.03) 1px,
transparent 1px
);

background-size:50px 50px;

z-index:-3;
}
footer{

text-align:center;

margin-top:30px;

padding:20px;

color:#888;

}
#graphCanvas{
width:100%;
margin-top:15px;
background:white;
border-radius:10px;
}
.tool-card select{
width:100%;
padding:10px;
margin:8px 0;
border-radius:10px;
border:none;
background:#111827;
color:white;
}
.sidebar button.active{
background:linear-gradient(135deg,#00e5ff,#8b5cf6);
color:white;
box-shadow:0 0 20px #00e5ff;
}
#loader{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:#050816;

display:flex;

flex-direction:column;

justify-content:center;
align-items:center;

z-index:9999;

transition:1s;
}

#loader h1{

font-size:4rem;

color:#00e5ff;

letter-spacing:5px;

text-shadow:
0 0 10px #00e5ff,
0 0 30px #00e5ff,
0 0 50px #8b5cf6;

animation:pulse 1.5s infinite;
}

#loader p{

color:white;

margin-top:10px;

font-size:1.2rem;
}

@keyframes pulse{

0%{
transform:scale(1);
}

50%{
transform:scale(1.1);
}

100%{
transform:scale(1);
}

}
.calculator-grid button:active{
transform:scale(0.95);
}
.sidebar button:hover{

transform:translateX(5px);

box-shadow:
0 0 15px #00e5ff;

}