/* ==========================================
   NOVACALC v2.0
   PART 1
   Reset + Theme + Startup
========================================== */

:root{

    --bg:#08111f;
    --bg2:#152443;

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

    --text:#ffffff;
    --sub:#aeb9d8;

    --accent:#5b8cff;
    --accent2:#7b61ff;

    --operator:#4d79ff;
    --equal:#15d876;

    --radius:24px;

    --transition:.25s;

}

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

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html,
body{

    width:100%;
    height:100%;

}

body{

    font-family:"Poppins",sans-serif;

    background:
    linear-gradient(
        135deg,
        var(--bg),
        var(--bg2)
    );

    color:var(--text);

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

}

/* ========================= */
/* BACKGROUND */
/* ========================= */

.background{

    position:fixed;

    inset:0;

    overflow:hidden;

    z-index:-2;

}

.background::before{

    content:"";

    position:absolute;

    inset:-35%;

    filter:blur(90px);

    background:

        radial-gradient(circle,#4d7cff55,transparent 30%),

        radial-gradient(circle,#8b5cff55,transparent 28%),

        radial-gradient(circle,#00d08444,transparent 30%);

    animation:backgroundMove 20s linear infinite;

}

@keyframes backgroundMove{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/* ========================= */
/* STARTUP */
/* ========================= */

#startup{

    position:fixed;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:20px;

    background:
    linear-gradient(
        135deg,
        #08111f,
        #152443
    );

    z-index:99999;

    transition:opacity .7s;

}

#startup.hide{

    opacity:0;

    pointer-events:none;

}

.startup-logo{

    font-size:90px;

    animation:pulse 2s infinite;

}

.loading-bar{

    width:300px;

    height:10px;

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

    border-radius:999px;

    overflow:hidden;

}

.loading-fill{

    width:0;

    height:100%;

    background:
    linear-gradient(
        90deg,
        var(--accent),
        var(--accent2)
    );

    animation:loading 1.8s linear forwards;

}

@keyframes loading{

    from{

        width:0;

    }

    to{

        width:100%;

    }

}

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.15);

    }

    100%{

        transform:scale(1);

    }

}

/* ==========================================
   PART 2
   Calculator + Top Bar + Display
========================================== */

.calculator{

    width:520px;

    max-width:95%;

    background:rgba(18,22,40,.78);

    backdrop-filter:blur(30px);
    -webkit-backdrop-filter:blur(30px);

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

    border-radius:30px;

    overflow:hidden;

    box-shadow:
        0 25px 70px rgba(0,0,0,.45),
        inset 0 1px rgba(255,255,255,.05);

    animation:calculatorIn .6s ease;

}

@keyframes calculatorIn{

    from{

        opacity:0;

        transform:translateY(35px) scale(.95);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}

/* ========================= */
/* TOP BAR */
/* ========================= */

.top-bar{

    height:75px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 24px;

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

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

}

.logo{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:22px;

    font-weight:700;

}

.logo-circle{

    width:14px;

    height:14px;

    border-radius:50%;

    background:var(--accent);

    box-shadow:
        0 0 10px var(--accent),
        0 0 22px var(--accent);

    animation:pulse 2s infinite;

}

.top-buttons{

    display:flex;

    gap:12px;

}

.icon-btn{

    width:48px;

    height:48px;

    border:none;

    border-radius:16px;

    cursor:pointer;

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

    color:white;

    font-size:18px;

    transition:var(--transition);

}

.icon-btn:hover{

    transform:translateY(-3px);

    background:var(--accent);

    box-shadow:0 0 20px var(--accent);

}

/* ========================= */
/* DISPLAY */
/* ========================= */

.display{

    position:relative;

    padding:35px 30px;

    min-height:170px;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    text-align:right;

}

.display::before{

    content:"";

    position:absolute;

    inset:10px;

    border-radius:22px;

    background:

    linear-gradient(
        135deg,
        rgba(91,140,255,.08),
        rgba(125,97,255,.08)
    );

    filter:blur(20px);

    z-index:-1;

}

.expression{

    min-height:28px;

    font-size:18px;

    color:var(--sub);

    word-break:break-all;

}

.result{

    margin-top:10px;

    font-size:58px;

    font-weight:700;

    color:white;

    word-break:break-all;

}

/* ==========================================
   PART 3
   Calculator Buttons
========================================== */

.buttons{

    display:grid;

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

    gap:16px;

    padding:24px;

}

/* ========================= */
/* ALL BUTTONS */
/* ========================= */

.buttons button{

    position:relative;

    height:72px;

    border:none;

    border-radius:20px;

    cursor:pointer;

    overflow:hidden;

    font-family:"Poppins",sans-serif;

    font-size:22px;

    font-weight:600;

    color:white;

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

    backdrop-filter:blur(12px);

    transition:
        transform .18s,
        background .25s,
        box-shadow .25s;

}

/* Hover */

.buttons button:hover{

    transform:translateY(-3px);

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

}

/* Click */

.buttons button:active{

    transform:scale(.94);

}

/* JS Press Animation */

.buttons button.pressed{

    transform:scale(.90);

}

/* ========================= */
/* NUMBER BUTTONS */
/* ========================= */

.number{

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

}

.number:hover{

    box-shadow:

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

}

/* ========================= */
/* MEMORY */
/* ========================= */

.memory{

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

    color:#8fa8ff;

    font-size:17px;

}

.memory:hover{

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

}

/* ========================= */
/* FUNCTIONS */
/* ========================= */

.function{

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

}

.function:hover{

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

}

/* ========================= */
/* OPERATORS */
/* ========================= */

.operator{

    background:

        linear-gradient(
            135deg,
            #4d79ff,
            #6b57ff
        );

}

.operator:hover{

    box-shadow:

        0 0 24px rgba(91,140,255,.45);

}

/* ========================= */
/* EQUALS */
/* ========================= */

.equals{

    background:

        linear-gradient(
            135deg,
            #14d876,
            #00b86a
        );

}

.equals:hover{

    box-shadow:

        0 0 25px rgba(20,216,118,.45);

}

/* ========================= */
/* RIPPLE EFFECT */
/* ========================= */

.ripple{

    position:absolute;

    width:12px;

    height:12px;

    border-radius:50%;

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

    transform:translate(-50%,-50%);

    animation:ripple .6s linear;

    pointer-events:none;

}

@keyframes ripple{

    from{

        width:0;

        height:0;

        opacity:.8;

    }

    to{

        width:240px;

        height:240px;

        opacity:0;

    }

}

/* ========================= */
/* MOBILE */
/* ========================= */

@media (max-width:600px){

    .calculator{

        width:95%;

    }

    .buttons{

        gap:12px;

        padding:18px;

    }

    .buttons button{

        height:60px;

        font-size:20px;

    }

    .result{

        font-size:42px;

    }

}

/* ==========================================
   PART 4
   History Panel
========================================== */

.history-panel{

    position:fixed;

    top:0;

    right:-430px;

    width:430px;

    height:100vh;

    display:flex;

    flex-direction:column;

    background:rgba(15,20,35,.88);

    backdrop-filter:blur(30px);
    -webkit-backdrop-filter:blur(30px);

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

    box-shadow:-25px 0 70px rgba(0,0,0,.45);

    transition:right .35s ease;

    z-index:900;

}

.history-panel.open{

    right:0;

}

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

.history-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:24px;

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

}

.history-header h2{

    font-size:24px;

    display:flex;

    align-items:center;

    gap:12px;

}

.history-header button{

    width:46px;

    height:46px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    color:white;

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

    transition:.25s;

}

.history-header button:hover{

    background:#ff4d4d;

    transform:rotate(8deg);

}

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

#historySearch{

    margin:20px;

    padding:15px 18px;

    border:none;

    outline:none;

    border-radius:16px;

    font-size:15px;

    color:white;

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

    transition:.25s;

}

#historySearch::placeholder{

    color:#9ca6c9;

}

#historySearch:focus{

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

    box-shadow:0 0 18px rgba(91,140,255,.35);

}

/* ========================= */
/* HISTORY LIST */
/* ========================= */

#historyList{

    flex:1;

    overflow-y:auto;

    padding:0 20px 20px;

}

/* ========================= */
/* HISTORY ITEM */
/* ========================= */

.history-item{

    padding:18px;

    margin-bottom:14px;

    border-radius:18px;

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

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

    cursor:pointer;

    transition:.25s;

    animation:historyFade .35s ease;

    word-break:break-word;

}

.history-item:hover{

    transform:translateY(-3px);

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

    border-color:var(--accent);

}

/* ========================= */
/* EMPTY */
/* ========================= */

.history-empty{

    height:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    color:var(--sub);

    font-size:17px;

    opacity:.8;

}

/* ========================= */
/* SCROLLBAR */
/* ========================= */

#historyList::-webkit-scrollbar{

    width:8px;

}

#historyList::-webkit-scrollbar-thumb{

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

    border-radius:999px;

}

#historyList::-webkit-scrollbar-thumb:hover{

    background:var(--accent);

}

/* ========================= */
/* ANIMATION */
/* ========================= */

@keyframes historyFade{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================================
   PART 5
   Settings Panel
========================================== */

.settings-panel{

    position:fixed;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%) scale(.95);

    width:1000px;
    max-width:95%;

    height:680px;
    max-height:92vh;

    display:flex;
    flex-direction:column;

    background:rgba(15,20,35,.88);

    backdrop-filter:blur(35px);
    -webkit-backdrop-filter:blur(35px);

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

    border-radius:28px;

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

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:.3s;

    z-index:1000;

}

.settings-panel.show{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transform:translate(-50%,-50%) scale(1);

}

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

.settings-header{

    height:80px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 28px;

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

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

}

.settings-title h2{

    font-size:26px;

    font-weight:700;

}

.settings-title p{

    margin-top:4px;

    color:var(--sub);

    font-size:14px;

}

.close-btn{

    width:46px;

    height:46px;

    border:none;

    border-radius:14px;

    cursor:pointer;

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

    color:white;

    font-size:18px;

    transition:.25s;

}

.close-btn:hover{

    background:#ff4d4d;

    transform:rotate(90deg);

}

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

.settings-body{

    flex:1;

    display:grid;

    grid-template-columns:260px 1fr;

    overflow:hidden;

}

/* ========================= */
/* SIDEBAR */
/* ========================= */

.settings-sidebar{

    padding:18px;

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

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

    overflow-y:auto;

}

.nav-item{

    width:100%;

    display:flex;

    align-items:center;

    gap:14px;

    padding:16px;

    margin-bottom:10px;

    border:none;

    border-radius:18px;

    cursor:pointer;

    background:transparent;

    color:white;

    font-size:15px;

    transition:.25s;

}

.nav-item span{

    flex:1;

    text-align:left;

}

.nav-item:hover{

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

}

.nav-item.active{

    background:var(--accent);

    box-shadow:0 0 20px rgba(91,140,255,.35);

}

/* ========================= */
/* MAIN */
/* ========================= */

.settings-main{

    overflow-y:auto;

    padding:28px;

}

/* ========================= */
/* TABS */
/* ========================= */

.tab-page{

    display:none;

    animation:tabFade .3s ease;

}

.tab-page.active{

    display:block;

}

@keyframes tabFade{

    from{

        opacity:0;

        transform:translateY(12px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ========================= */
/* CARDS */
/* ========================= */

.setting-card{

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

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

    border-radius:22px;

    padding:24px;

    margin-bottom:20px;

    transition:.25s;

}

.setting-card:hover{

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

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

}

.setting-card h3{

    margin-bottom:18px;

    font-size:18px;

}

.setting-card p{

    color:var(--sub);

    line-height:1.7;

}

/* ========================= */
/* FORM INPUTS */
/* ========================= */

.setting-card select{

    width:100%;

    padding:14px 16px;

    border:none;

    border-radius:14px;

    outline:none;

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

    color:white;

    font-size:15px;

}

.setting-card option{

    background:#111827;

}

.setting-card input[type="color"]{

    width:70px;

    height:50px;

    border:none;

    background:none;

    cursor:pointer;

}

.setting-card input[type="checkbox"]{

    accent-color:var(--accent);

    transform:scale(1.15);

    margin-right:10px;

}

/* ==========================================
   PART 6
   Themes + Responsive + Final Polish
========================================== */

/* ========================= */
/* SCROLLBARS */
/* ========================= */

::-webkit-scrollbar{

    width:8px;
    height:8px;

}

::-webkit-scrollbar-track{

    background:transparent;

}

::-webkit-scrollbar-thumb{

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

    border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--accent);

}

/* ========================= */
/* THEMES */
/* ========================= */

body.theme-galaxy{

    --bg:#08111f;
    --bg2:#1d2d5b;
    --accent:#5b8cff;
    --operator:#4d79ff;
    --equal:#15d876;

}

body.theme-ocean{

    --bg:#021d2e;
    --bg2:#03547a;
    --accent:#00b4ff;
    --operator:#0094ff;
    --equal:#14d8a8;

}

body.theme-emerald{

    --bg:#061b13;
    --bg2:#0d4531;
    --accent:#19d27c;
    --operator:#00b86b;
    --equal:#36f89d;

}

body.theme-sakura{

    --bg:#28131f;
    --bg2:#4b2140;
    --accent:#ff77c8;
    --operator:#ff4fa6;
    --equal:#ff9cd8;

}

body.theme-sunset{

    --bg:#2b1400;
    --bg2:#6a2b00;
    --accent:#ff914d;
    --operator:#ff6d3c;
    --equal:#ffd166;

}

body.theme-midnight{

    --bg:#05070f;
    --bg2:#111827;
    --accent:#7c8cff;
    --operator:#5b6cff;
    --equal:#27e58d;

}

body.theme-amoled{

    --bg:#000000;
    --bg2:#050505;
    --accent:#ffffff;
    --operator:#666666;
    --equal:#14d876;

}

body.theme-neon{

    --bg:#090012;
    --bg2:#22004f;
    --accent:#00ffff;
    --operator:#ff00ff;
    --equal:#39ff14;

}

body.theme-gold{

    --bg:#1d1400;
    --bg2:#453000;
    --accent:#ffd700;
    --operator:#ffb700;
    --equal:#fff176;

}

body.theme-naija{

    --bg:#03150b;
    --bg2:#0d3f20;
    --accent:#00b050;
    --operator:#009245;
    --equal:#49ff88;

}

/* ========================= */
/* GLOBAL TRANSITIONS */
/* ========================= */

body,
.calculator,
.settings-panel,
.history-panel,
button,
select,
input,
.display{

    transition:

        background .35s,

        color .35s,

        border-color .35s,

        box-shadow .35s,

        transform .25s;

}

/* ========================= */
/* GLASS EFFECT */
/* ========================= */

.calculator,
.settings-panel,
.history-panel{

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

    backdrop-filter:blur(30px);

    -webkit-backdrop-filter:blur(30px);

}

/* ========================= */
/* FOCUS STATES */
/* ========================= */

button:focus-visible,
select:focus-visible,
input:focus-visible{

    outline:2px solid var(--accent);

    outline-offset:3px;

}

/* ========================= */
/* MOBILE */
/* ========================= */

@media (max-width:900px){

    .settings-panel{

        width:95%;
        height:90vh;

    }

    .settings-body{

        grid-template-columns:200px 1fr;

    }

    .history-panel{

        width:100%;

        right:-100%;

    }

}

@media (max-width:700px){

    .calculator{

        width:95%;

    }

    .display{

        min-height:140px;

        padding:25px;

    }

    .result{

        font-size:42px;

    }

    .settings-body{

        display:flex;

        flex-direction:column;

    }

    .settings-sidebar{

        display:flex;

        gap:10px;

        overflow-x:auto;

        overflow-y:hidden;

        border-right:none;

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

    }

    .nav-item{

        min-width:180px;

        margin-bottom:0;

    }

}

@media (max-width:500px){

    .buttons{

        gap:10px;

        padding:16px;

    }

    .buttons button{

        height:58px;

        font-size:18px;

        border-radius:16px;

    }

    .top-bar{

        padding:0 16px;

    }

    .logo{

        font-size:18px;

    }

    .icon-btn{

        width:42px;

        height:42px;

    }

}

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

.event-grid{

    display:grid;

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

    gap:14px;

}

.event-btn{

    padding:16px;

    border:none;

    border-radius:16px;

    cursor:pointer;

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

    color:white;

    font-size:15px;

    transition:.25s;

}

.event-btn:hover{

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

    transform:translateY(-3px);

}

.event-btn.active{

    background:var(--accent);

    box-shadow:0 0 20px rgba(91,140,255,.4);

}

/* =========================
   EVENT BUTTON ANIMATIONS
========================= */

.event-btn{

    position:relative;

    overflow:hidden;

}

/* Hover Glow */

.event-btn::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.25),
        transparent
    );

    transform:translateX(-120%);

}

.event-btn:hover::before{

    animation:eventShine .7s ease;

}

@keyframes eventShine{

    from{

        transform:translateX(-120%);

    }

    to{

        transform:translateX(120%);

    }

}

/* Active Animation */

.event-btn.active{

    animation:eventPulse 2s infinite;

}

@keyframes eventPulse{

    0%{

        transform:scale(1);

        box-shadow:0 0 0 rgba(91,140,255,0);

    }

    50%{

        transform:scale(1.04);

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

    }

    100%{

        transform:scale(1);

        box-shadow:0 0 0 rgba(91,140,255,0);

    }

}

/* Click */

.event-btn:active{

    transform:scale(.94);

}

/* ==========================================
   EVENT ENGINE
========================================== */

#eventLayer{

    position:fixed;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:-1;

}

.event-particle{

    position:absolute;

    animation:fall linear forwards;

}

@keyframes fall{

    from{

        transform:translateY(-120px) rotate(0deg);

        opacity:1;

    }

    to{

        transform:translateY(110vh) rotate(720deg);

        opacity:0;

    }

}

/* ==========================================
   TOAST NOTIFICATIONS
========================================== */

#toast{

    position:fixed;

    bottom:30px;

    left:50%;

    transform:translateX(-50%) translateY(100px);

    background:#14d86f;

    color:white;

    padding:14px 24px;

    border-radius:14px;

    font-weight:600;

    box-shadow:0 10px 30px rgba(20,216,111,.35);

    opacity:0;

    transition:.35s;

    z-index:99999;

    pointer-events:none;

}

#toast.show{

    opacity:1;

    transform:translateX(-50%) translateY(0);

}

/* ==========================================
   END OF NOVACALC v2.0 CSS
========================================== */