/* =========================================
   HyperOS - style.css (Part 1/2)
========================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    user-select:none;
    font-family:Segoe UI,Arial,sans-serif;
}

html,body{
    width:100%;
    height:100%;
    overflow:hidden;
    background:#000814;
    color:white;
}

body{
    position:relative;
}

/* ==========================
   Boot Screen
========================== */

#bootScreen{
    position:fixed;
    inset:0;
    background:radial-gradient(circle at center,#06162c,#01040a);
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:99999;
    transition:opacity 1s;
}

.bootLogo{
    text-align:center;
    animation:bootFloat 3s ease-in-out infinite;
}

.logoCircle{
    width:120px;
    height:120px;
    margin:auto;
    border-radius:50%;
    background:linear-gradient(45deg,#00e1ff,#0077ff,#9d4dff);
    box-shadow:
        0 0 20px #00d9ff,
        0 0 50px #008cff,
        0 0 100px #7b2cff;
    animation:spin 8s linear infinite;
}

.bootLogo h1{
    margin-top:20px;
    font-size:56px;
    letter-spacing:4px;
    color:white;
    text-shadow:0 0 20px cyan;
}

.bootLogo p{
    opacity:.8;
    margin-top:8px;
}

.loadingBar{
    width:340px;
    height:14px;
    margin:35px auto 15px;
    border-radius:20px;
    overflow:hidden;
    background:#17324f;
}

#loadingFill{
    width:0%;
    height:100%;
    background:linear-gradient(90deg,#00d4ff,#00ff9d);
    box-shadow:0 0 20px cyan;
}

#loadingText{
    color:#b8dfff;
}

/* ==========================
   Desktop
========================== */

#desktop{
    position:absolute;
    inset:0;
    display:flex;
    flex-wrap:wrap;
    align-content:flex-start;
    padding:25px;
    gap:18px;
    overflow:hidden;
}

/* ==========================
   Wallpaper
========================== */

#wallpaper{
    position:absolute;
    inset:0;
    z-index:-5;
    background:
        radial-gradient(circle at 20% 30%,rgba(0,255,255,.25),transparent 30%),
        radial-gradient(circle at 80% 20%,rgba(130,0,255,.2),transparent 25%),
        radial-gradient(circle at 70% 80%,rgba(0,100,255,.25),transparent 30%),
        linear-gradient(160deg,#020617,#071326,#0d2238,#020617);
    background-size:200% 200%;
    animation:wallpaperMove 18s linear infinite;
}

/* ==========================
   Animated Grid
========================== */

#wallpaper::before{
    content:"";
    position:absolute;
    inset:0;

    background-image:
        linear-gradient(rgba(0,255,255,.08) 1px,transparent 1px),
        linear-gradient(90deg,rgba(0,255,255,.08) 1px,transparent 1px);

    background-size:60px 60px;

    animation:gridMove 12s linear infinite;

    opacity:.4;
}

/* ==========================
   Aurora
========================== */

#wallpaper::after{

    content:"";

    position:absolute;

    width:220%;
    height:220%;

    left:-60%;
    top:-60%;

    background:

        radial-gradient(circle,#00ffff55 0%,transparent 20%),

        radial-gradient(circle,#8a2be255 0%,transparent 22%),

        radial-gradient(circle,#00ff9955 0%,transparent 24%);

    animation:aurora 20s linear infinite;

    filter:blur(80px);

}

/* ==========================
   Desktop Icons
========================== */

.icon{

    width:95px;

    text-align:center;

    padding:10px;

    border-radius:18px;

    cursor:pointer;

    transition:.25s;

    backdrop-filter:blur(8px);

}

.icon:hover{

    transform:translateY(-6px) scale(1.05);

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

    box-shadow:

        0 0 20px rgba(0,255,255,.3);

}

.iconImage{

    font-size:44px;

    margin-bottom:8px;

    filter:drop-shadow(0 0 10px cyan);

}

.iconText{

    font-size:14px;

}

/* ==========================
   Taskbar
========================== */

#taskbar{

    position:absolute;

    left:50%;

    bottom:18px;

    transform:translateX(-50%);

    width:92%;

    height:70px;

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 18px;

    background:rgba(20,25,45,.55);

    backdrop-filter:blur(22px);

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

    box-shadow:

        0 0 25px rgba(0,255,255,.12);

}

#startButton{

    background:linear-gradient(45deg,#00bfff,#4f46e5);

    color:white;

    border:none;

    border-radius:14px;

    padding:12px 22px;

    cursor:pointer;

    font-size:17px;

    transition:.25s;

}

#startButton:hover{

    transform:scale(1.06);

    box-shadow:0 0 18px cyan;

}

#taskApps{

    display:flex;

    gap:12px;

}

#taskApps button{

    width:48px;

    height:48px;

    border:none;

    border-radius:14px;

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

    color:white;

    font-size:22px;

    cursor:pointer;

    transition:.2s;

}

#taskApps button:hover{

    transform:translateY(-5px);

    background:#0ea5e9;

}

#taskWidgets{

    display:flex;

    align-items:center;

    gap:18px;

    color:#cde8ff;

}

/* ==========================
   Clock
========================== */

#clock{

    font-weight:bold;

    font-size:17px;

    min-width:70px;

    text-align:right;

}

/* ==========================
   Notification
========================== */

#notification{

    position:absolute;

    right:25px;

    top:25px;

    padding:15px 22px;

    border-radius:16px;

    background:rgba(0,0,0,.45);

    backdrop-filter:blur(16px);

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

    box-shadow:0 0 20px rgba(0,255,255,.2);

    animation:notificationFloat 4s ease-in-out infinite;

}

/* ==========================
   Start Menu
========================== */

#startMenu{

    position:absolute;

    left:20px;

    bottom:100px;

    width:380px;

    height:520px;

    border-radius:24px;

    background:rgba(18,24,42,.78);

    backdrop-filter:blur(25px);

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

    display:none;

    flex-direction:column;

    overflow:hidden;

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

}

#startHeader{

    padding:25px;

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

}

#startHeader h2{

    font-size:32px;

}

#startHeader p{

    opacity:.7;

    margin-top:4px;

}

#search{

    margin:20px;

    padding:14px;

    border-radius:12px;

    border:none;

    outline:none;

    background:#111b2c;

    color:white;

    font-size:16px;

}

#appGrid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:12px;

    padding:20px;

}

#appGrid button{

    border:none;

    padding:16px;

    border-radius:14px;

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

    color:white;

    cursor:pointer;

    transition:.25s;

}

#appGrid button:hover{

    background:#0284c7;

    transform:scale(1.03);

}

/* ==========================
   Animations
========================== */

@keyframes spin{

from{transform:rotate(0deg);}
to{transform:rotate(360deg);}

}

@keyframes bootFloat{

0%,100%{transform:translateY(0);}
50%{transform:translateY(-10px);}

}

@keyframes wallpaperMove{

0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}

}

@keyframes gridMove{

from{transform:translateY(0);}
to{transform:translateY(60px);}

}

@keyframes aurora{

0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}

}

@keyframes notificationFloat{

0%,100%{transform:translateY(0);}
50%{transform:translateY(-6px);}

}

/* =========================================
   HyperOS - style.css (Part 2)
   Windows, Context Menu, Utilities
========================================= */

/* ==========================
   Windows
========================== */

.window{
    position:absolute;
    top:120px;
    left:180px;
    width:700px;
    height:450px;
    display:none;
    flex-direction:column;
    border-radius:22px;
    overflow:hidden;
    background:rgba(20,25,45,.75);
    backdrop-filter:blur(25px);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:
        0 20px 60px rgba(0,0,0,.45),
        0 0 35px rgba(0,255,255,.15);
    animation:windowOpen .35s ease;
}

.window.active{
    display:flex;
}

.windowHeader{
    height:54px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 18px;
    background:rgba(255,255,255,.05);
    cursor:move;
}

.windowTitle{
    font-size:18px;
    font-weight:bold;
    color:#fff;
}

.windowButtons{
    display:flex;
    gap:10px;
}

.windowButtons button{
    width:16px;
    height:16px;
    border:none;
    border-radius:50%;
    cursor:pointer;
    transition:.2s;
}

.windowButtons button:hover{
    transform:scale(1.2);
}

.close{
    background:#ff4b4b;
}

.minimize{
    background:#ffcc00;
}

.maximize{
    background:#00dd77;
}

.windowContent{
    flex:1;
    padding:20px;
    overflow:auto;
    color:white;
}

/* ==========================
   Scrollbars
========================== */

.windowContent::-webkit-scrollbar{
    width:10px;
}

.windowContent::-webkit-scrollbar-thumb{
    background:#00bfff;
    border-radius:20px;
}

.windowContent::-webkit-scrollbar-track{
    background:#091421;
}

/* ==========================
   Context Menu
========================== */

#contextMenu{
    position:absolute;
    display:none;
    width:220px;
    border-radius:18px;
    overflow:hidden;
    background:rgba(18,25,42,.9);
    backdrop-filter:blur(25px);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 15px 40px rgba(0,0,0,.45);
    z-index:999;
}

#contextMenu button{
    width:100%;
    padding:14px;
    border:none;
    background:none;
    color:white;
    text-align:left;
    cursor:pointer;
    transition:.2s;
}

#contextMenu button:hover{
    background:#0ea5e9;
}

/* ==========================
   Tooltip
========================== */

.tooltip{
    position:absolute;
    padding:8px 14px;
    border-radius:12px;
    background:#111b2c;
    color:white;
    font-size:13px;
    pointer-events:none;
    opacity:0;
    transition:.2s;
}

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

.widget{
    width:220px;
    border-radius:18px;
    padding:18px;
    background:rgba(255,255,255,.05);
    backdrop-filter:blur(18px);
    margin-bottom:15px;
}

.widget h3{
    margin-bottom:10px;
}

.progress{
    width:100%;
    height:10px;
    border-radius:20px;
    background:#12263f;
    overflow:hidden;
}

.progress div{
    height:100%;
    width:50%;
    background:linear-gradient(90deg,#00bfff,#00ffd0);
}

/* ==========================
   Buttons
========================== */

.hyperButton{
    padding:12px 22px;
    border:none;
    border-radius:14px;
    cursor:pointer;
    color:white;
    background:linear-gradient(45deg,#009dff,#6d3cff);
    transition:.25s;
}

.hyperButton:hover{
    transform:translateY(-4px);
    box-shadow:0 0 20px cyan;
}

.hyperButton:active{
    transform:scale(.96);
}

/* ==========================
   Cards
========================== */

.card{
    background:rgba(255,255,255,.05);
    border-radius:18px;
    padding:20px;
    margin-bottom:20px;
    transition:.25s;
}

.card:hover{
    transform:translateY(-6px);
    box-shadow:0 0 25px rgba(0,255,255,.18);
}

/* ==========================
   Neon Text
========================== */

.neon{
    color:#fff;
    text-shadow:
        0 0 10px cyan,
        0 0 20px cyan,
        0 0 40px cyan;
}

/* ==========================
   Glow Border
========================== */

.glowBorder{
    border:1px solid rgba(0,255,255,.3);
    box-shadow:
        inset 0 0 15px rgba(0,255,255,.08),
        0 0 18px rgba(0,255,255,.18);
}

/* ==========================
   RGB Mode
========================== */

.rgb{
    animation:rgb 6s linear infinite;
}

@keyframes rgb{
    0%{filter:hue-rotate(0deg);}
    100%{filter:hue-rotate(360deg);}
}

/* ==========================
   Floating Animation
========================== */

.float{
    animation:float 3s ease-in-out infinite;
}

@keyframes float{
    0%,100%{
        transform:translateY(0px);
    }
    50%{
        transform:translateY(-8px);
    }
}

/* ==========================
   Fade
========================== */

.fadeIn{
    animation:fadeIn .4s;
}

@keyframes fadeIn{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}

/* ==========================
   Window Animation
========================== */

@keyframes windowOpen{
    from{
        transform:scale(.8);
        opacity:0;
    }
    to{
        transform:scale(1);
        opacity:1;
    }
}

/* ==========================
   Pulse Glow
========================== */

.pulse{
    animation:pulse 2s infinite;
}

@keyframes pulse{
    0%,100%{
        box-shadow:0 0 15px cyan;
    }
    50%{
        box-shadow:
            0 0 30px cyan,
            0 0 60px #00bfff;
    }
}

/* ==========================
   Responsive
========================== */

@media(max-width:900px){

.window{
    width:95%;
    left:2.5%;
}

#taskbar{
    width:98%;
}

#startMenu{
    width:95%;
    left:2.5%;
}

.icon{
    width:80px;
}

}

#desktop{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    padding:30px;
    align-content:flex-start;
}

#settingsButton{

    position:fixed;

    top:20px;

    right:20px;

    width:48px;

    height:48px;

    border-radius:50%;

    background:rgba(30,35,60,.75);

    backdrop-filter:blur(15px);

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    font-size:24px;

    transition:.25s;

    z-index:10000;

}

#settingsButton:hover{

    transform:rotate(90deg) scale(1.1);

    box-shadow:0 0 20px cyan;

}

#settingsPanel{

    position:fixed;

    top:80px;

    right:20px;

    width:280px;

    display:none;

    flex-direction:column;

    gap:12px;

    padding:20px;

    border-radius:18px;

    background:rgba(20,25,45,.92);

    backdrop-filter:blur(20px);

    z-index:10000;

}

#settingsPanel button{

    padding:12px;

    border:none;

    border-radius:12px;

    background:#1d4ed8;

    color:white;

    cursor:pointer;

    transition:.2s;

}

#settingsPanel button:hover{

    background:#2563eb;

}

#madeBy{
    position:fixed;
    bottom:90px;
    right:20px;

    padding:12px 18px;

    background:rgba(20,25,45,.55);
    backdrop-filter:blur(20px);

    border:1px solid rgba(0,255,255,.3);
    border-radius:15px;

    color:white;
    font-size:15px;
    letter-spacing:1px;

    box-shadow:
        0 0 15px rgba(0,255,255,.2);

    z-index:999;
}

#madeBy .name{
    color:#00e5ff;
    font-weight:bold;
    text-shadow:
        0 0 10px cyan,
        0 0 20px cyan;

    animation:glowName 2s infinite alternate;
}

#madeBy .name2{
    color:#8f5bff;
    font-weight:bold;
    text-shadow:
        0 0 10px #8f5bff,
        0 0 20px #8f5bff;

    animation:glowName2 2s infinite alternate;
}

@keyframes glowName{
    from{
        text-shadow:0 0 8px cyan;
    }
    to{
        text-shadow:
            0 0 20px cyan,
            0 0 40px cyan;
    }
}

@keyframes glowName2{
    from{
        text-shadow:0 0 8px #8f5bff;
    }
    to{
        text-shadow:
            0 0 20px #8f5bff,
            0 0 40px #8f5bff;
    }
}

#madeBy:hover{
    transform:translateY(-5px) scale(1.05);
    transition:.25s;
}

#appGrid{
    overflow-y:auto;
    flex:1;
}

#appGrid::-webkit-scrollbar{
    width:8px;
}

#appGrid::-webkit-scrollbar-thumb{
    background:#00bfff;
    border-radius:20px;
}