/* Shahzad Browser v1 - main.css */

:root{
--bg:#071320;
--panel:rgba(255,255,255,.06);
--panel2:#18263b;
--primary:#0d7cff;
--text:#ffffff;
--muted:#9fc7ff;
--radius:20px;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html,body{
width:100%;
height:100%;
overflow:hidden;
font-family:"Segoe UI",Arial,sans-serif;
background:var(--bg);
color:var(--text);
}

body::before{
content:"";
position:fixed;
inset:0;
background:
radial-gradient(circle at 20% 20%,rgba(13,124,255,.35),transparent 35%),
radial-gradient(circle at 80% 70%,rgba(0,212,255,.18),transparent 40%),
linear-gradient(180deg,#0b1731,#02060d);
z-index:-2;
}

.sidebar{
position:fixed;
left:0;
top:0;
width:250px;
height:100vh;
padding:30px;
background:rgba(9,17,31,.82);
backdrop-filter:blur(18px);
border-right:1px solid rgba(255,255,255,.08);
}

.logo{
display:flex;
align-items:center;
gap:15px;
margin-bottom:40px;
}

.icon{
width:56px;
height:56px;
border-radius:16px;
background:linear-gradient(135deg,#18b9ff,var(--primary));
display:flex;
align-items:center;
justify-content:center;
font-size:30px;
font-weight:bold;
box-shadow:0 0 25px rgba(13,124,255,.45);
}

.menu button{
width:100%;
margin:8px 0;
padding:16px;
border:0;
border-radius:14px;
background:var(--panel2);
color:#fff;
font-size:17px;
text-align:left;
cursor:pointer;
transition:.25s;
}

.menu button:hover,
.menu button.active{
background:var(--primary);
transform:translateX(4px);
}

main{
margin-left:270px;
padding:30px;
height:calc(100vh - 60px);
overflow:auto;
}

.top{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;
}

#clock{
font-size:22px;
color:var(--muted);
font-weight:600;
}

.hero{
padding:35px;
border-radius:24px;
background:var(--panel);
backdrop-filter:blur(16px);
}

.hero h1{
font-size:48px;
margin-bottom:12px;
}

.hero p{
color:#c7defe;
margin-bottom:25px;
}

.launch{
padding:18px 38px;
border:0;
border-radius:30px;
background:linear-gradient(135deg,#16bfff,var(--primary));
color:white;
font-size:20px;
cursor:pointer;
transition:.2s;
}

.launch:hover{
transform:scale(1.03);
}

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
margin-top:25px;
}

.card{
background:var(--panel);
border-radius:var(--radius);
padding:25px;
transition:.25s;
}

.card:hover{
transform:translateY(-6px);
box-shadow:0 0 24px rgba(13,124,255,.3);
}

.card h3{
color:var(--muted);
margin-bottom:12px;
}

.card .v{
font-size:30px;
font-weight:bold;
}

.log{
margin-top:25px;
background:rgba(0,0,0,.35);
border-radius:var(--radius);
padding:20px;
height:220px;
overflow:auto;
font-family:Consolas,monospace;
color:#72ff9d;
}

footer{
position:fixed;
left:270px;
right:0;
bottom:0;
padding:14px;
background:rgba(0,0,0,.25);
border-top:1px solid rgba(255,255,255,.06);
}
.notification{

position:fixed;

right:30px;

top:30px;

width:340px;

padding:20px;

background:rgba(15,30,60,.95);

border-left:5px solid #0d7cff;

border-radius:20px;

backdrop-filter:blur(20px);

box-shadow:0 0 30px rgba(0,150,255,.45);

transform:translateX(420px);

transition:.35s;

z-index:9999;

}

.notification.show{

transform:translateX(0);

}

.notification h3{

margin-bottom:10px;

}

.notification p{

color:#c9e4ff;

}

.favorite{

margin-top:10px;

width:100%;

padding:12px;

border:none;

border-radius:12px;

background:#2b3952;

color:white;

cursor:pointer;

transition:.2s;

}

.favorite:hover{

background:#0d7cff;

}

.toast{

position:fixed;

right:30px;

top:30px;

width:300px;

padding:20px;

background:#0d1d36;

border-left:5px solid #0d7cff;

border-radius:18px;

box-shadow:0 0 25px rgba(0,150,255,.4);

transform:translateX(350px);

transition:.3s;

z-index:99999;

}

.toast.show{

transform:translateX(0);

}

#particles{

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

z-index:-1;

pointer-events:none;

opacity:.85;

}

.quickLaunch{

display:flex;

gap:15px;

margin-top:30px;

flex-wrap:wrap;

}



.quickButton{

padding:14px 24px;

border:none;

border-radius:15px;

background:#0d7cff;

color:white;

cursor:pointer;

transition:.2s;

}



.quickButton:hover{

transform:translateY(-4px);

box-shadow:0 0 18px rgba(0,150,255,.4);

}



.statusPanel{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:20px;

margin-top:35px;

padding:20px;

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

border-radius:18px;

backdrop-filter:blur(15px);

}



.statusPanel div{

font-size:18px;

}



.statusPanel b{

color:#9ccfff;

display:block;

margin-bottom:8px;

}


.searchBox{

width:100%;

padding:18px;

margin-bottom:25px;

border:none;

border-radius:18px;

background:#1b2940;

color:white;

font-size:18px;

outline:none;

}

.searchBox::placeholder{

color:#8ebfff;

}


.progress{

width:100%;

height:28px;

margin-top:40px;

background:#1a2942;

border-radius:30px;

overflow:hidden;

}



.progressBar{

height:100%;

width:0;

background:

linear-gradient(

90deg,

#00c0ff,

#0d7cff

);

transition:.5s;

}



#progressText{

margin-top:25px;

font-size:22px;

color:#9dd4ff;

text-align:center;

}


/* ===== Control Center ===== */

#controlCenter{

position:fixed;

right:-360px;

top:0;

width:340px;

height:100%;

background:rgba(8,18,35,.94);

backdrop-filter:blur(25px);

transition:.35s;

z-index:9999;

padding:25px;

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

}

#controlCenter.open{

right:0;

}

.ccHeader{

margin-bottom:30px;

}

.ccHeader h2{

font-size:28px;

}

.ccItem{

display:flex;

align-items:center;

gap:18px;

padding:18px;

margin-bottom:12px;

border-radius:18px;

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

cursor:pointer;

transition:.2s;

}

.ccItem:hover{

background:#0d7cff;

transform:translateX(-4px);

}

.ccIcon{

width:42px;

height:42px;

display:flex;

align-items:center;

justify-content:center;

font-size:22px;

}

.ccFooter{

position:absolute;

bottom:25px;

left:25px;

right:25px;

font-size:18px;

color:#8fc9ff;

}


#fwBadge{

display:inline-block;

padding:10px 18px;

border-radius:16px;

margin-top:15px;

font-weight:bold;

background:#555;

color:white;

}




/* ===== Notifications ===== */

#notificationPanel{

position:fixed;

top:20px;

right:20px;

width:340px;

z-index:99999;

display:flex;

flex-direction:column;

gap:12px;

}

.notificationCard{

padding:18px;

border-radius:18px;

background:#152944;

backdrop-filter:blur(18px);

box-shadow:0 8px 20px rgba(0,0,0,.3);

animation:slideIn .25s ease;

border-left:4px solid #0d7cff;

}

.notificationCard.success{

border-left-color:#22c55e;

}

.notificationCard.error{

border-left-color:#ef4444;

}

.notifyTitle{

font-weight:bold;

margin-bottom:8px;

}

.notifyText{

font-size:15px;

opacity:.9;

}

.notifyTime{

margin-top:10px;

font-size:12px;

opacity:.6;

}

@keyframes slideIn{

from{

transform:translateX(40px);

opacity:0;

}

to{

transform:translateX(0);

opacity:1;

}

}


/* ========= Theme Variables ========= */

:root{

--primary:#0d7cff;

--secondary:#00b7ff;

--background:#071320;

--panel:#152944;

--text:#ffffff;

}

.theme-midnight{

--primary:#5d5dff;

--secondary:#7d8bff;

--background:#05070d;

--panel:#101826;

}

.theme-oled{

--primary:#00aaff;

--secondary:#0077ff;

--background:#000000;

--panel:#111111;

}

.theme-red{

--primary:#ff4040;

--secondary:#ff7777;

--background:#190808;

--panel:#2d1111;

}

.wallpaperButtons{

display:flex;

gap:15px;

margin-top:25px;

}

.wallpaperButtons button{

padding:14px 24px;

background:#0d7cff;

border:none;

border-radius:16px;

color:white;

cursor:pointer;

transition:.25s;

}

.wallpaperButtons button:hover{

transform:translateY(-3px);

}

/* ============================= */

.exploitGrid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:25px;

margin-top:25px;

}

.exploitCard{

padding:25px;

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

backdrop-filter:blur(15px);

border-radius:20px;

border-left:5px solid #0d7cff;

transition:.25s;

}

.exploitCard:hover{

transform:translateY(-8px);

box-shadow:0 0 25px rgba(0,150,255,.35);

}

.exploitTitle{

font-size:28px;

font-weight:bold;

margin-bottom:20px;

}

.exploitFirmware{

color:#9fd3ff;

margin-bottom:12px;

}

.exploitStatus{

display:inline-block;

padding:8px 16px;

border-radius:20px;

background:#0d7cff;

margin-bottom:25px;

}

.launchExploit{

width:100%;

padding:16px;

border:none;

border-radius:15px;

background:#0d7cff;

color:white;

font-size:18px;

cursor:pointer;

transition:.2s;

}

.launchExploit:hover{

transform:scale(1.03);

}

/* ================= Widgets ================= */

.widgetGrid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:20px;

margin-top:35px;

}

.widget{

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

padding:22px;

border-radius:18px;

backdrop-filter:blur(18px);

transition:.25s;

}

.widget:hover{

transform:translateY(-6px);

box-shadow:0 0 20px rgba(13,124,255,.3);

}

.widgetTitle{

font-size:14px;

color:#8fc9ff;

margin-bottom:12px;

text-transform:uppercase;

letter-spacing:1px;

}

.widgetValue{

font-size:30px;

font-weight:bold;

}




.logo{

display:flex;

align-items:center;

gap:18px;

margin-bottom:45px;

}

.logo img{

width:58px;

height:58px;

filter:drop-shadow(0 0 15px rgba(0,170,255,.6));

animation:logoGlow 4s infinite alternate;

}

@keyframes logoGlow{

from{

filter:drop-shadow(0 0 8px rgba(0,170,255,.5));

}

to{

filter:drop-shadow(0 0 22px rgba(0,170,255,1));

}

}



#startup{

position:fixed;

inset:0;

background:#020913;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

z-index:999999;

transition:1s;

}

#startup.hide{

opacity:0;

}

.startupLogo img{

width:180px;

animation:pulse 2s infinite;

}

#startup h1{

margin-top:40px;

font-size:42px;

font-weight:300;

letter-spacing:4px;

}

@keyframes pulse{

0%{

transform:scale(.9);

}

50%{

transform:scale(1);

}

100%{

transform:scale(.9);

}

}

.sbIcon{

width:22px;

height:22px;

margin-right:14px;

fill:white;

vertical-align:middle;

opacity:.9;

}

.menu button{

display:flex;

align-items:center;

}

.menu button:hover .sbIcon{

transform:rotate(8deg) scale(1.15);

transition:.2s;

fill:#7fd5ff;

}