/*==================================================
    Premium Expense Tracker
    CSS Part 1
==================================================*/

/*==============================
Google Font
==============================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/*==============================
CSS Variables
==============================*/

:root{

    /* Main Colors */

    --primary:#7c5cff;
    --primary-light:#9d84ff;

    --secondary:#00d4ff;

    --success:#22c55e;
    --danger:#ff4d6d;
    --warning:#facc15;

    /* Background */

    --bg:#070b16;

    --bg2:#0e1424;

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

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

    /* Text */

    --white:#ffffff;

    --text:#d4d8e8;

    --muted:#9098b0;

    /* Shadow */

    --shadow:
    0 15px 40px rgba(0,0,0,.45);

    --glow:
    0 0 25px rgba(124,92,255,.45);

    /* Radius */

    --radius:22px;

    --radius-sm:14px;

    /* Animation */

    --transition:.35s ease;

}


/*==============================
Reset
==============================*/

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

}


body{

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

    background:var(--bg);

    color:var(--white);

    overflow-x:hidden;

}


/*==============================
Selection
==============================*/

::selection{

    background:var(--primary);

    color:#fff;

}


/*==============================
Scrollbar
==============================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#090d18;

}

::-webkit-scrollbar-thumb{

    background:linear-gradient(
    180deg,
    var(--primary),
    var(--secondary)
    );

    border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary-light);

}


/*==============================
Links
==============================*/

a{

    text-decoration:none;

    color:inherit;

}


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

button{

    border:none;

    outline:none;

    cursor:pointer;

    font-family:inherit;

}


/*==============================
Inputs
==============================*/

input,
textarea,
select{

    font-family:inherit;

    outline:none;

    border:none;

}


/*==============================
Images
==============================*/

img{

    width:100%;

    display:block;

}


/*==============================
Lists
==============================*/

ul{

    list-style:none;

}


/*==============================
Body Background
==============================*/

body{

    background:

    radial-gradient(circle at top left,
    rgba(124,92,255,.18),
    transparent 35%),

    radial-gradient(circle at bottom right,
    rgba(0,212,255,.18),
    transparent 35%),

    var(--bg);

}


/*==============================
Animated Background
==============================*/

.background{

    position:fixed;

    inset:0;

    overflow:hidden;

    z-index:-2;

}


.background span{

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    filter:blur(120px);

    animation:floatBlob 18s linear infinite;

}


.background span:nth-child(1){

    background:#6c4dff;

    top:-120px;

    left:-120px;

}


.background span:nth-child(2){

    background:#00d4ff;

    right:-150px;

    top:120px;

}


.background span:nth-child(3){

    background:#ff3d81;

    bottom:-180px;

    left:20%;

}


.background span:nth-child(4){

    background:#00ffa3;

    bottom:10%;

    right:10%;

}


.background span:nth-child(5){

    background:#6f7dff;

    top:40%;

    left:45%;

}


/*==============================
Cursor Glow
==============================*/

.cursor-glow{

    width:240px;

    height:240px;

    position:fixed;

    border-radius:50%;

    background:

    radial-gradient(circle,
    rgba(124,92,255,.25),
    transparent 70%);

    pointer-events:none;

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

    z-index:999;

    transition:
    transform .05s linear;

}


/*==============================
Loader
==============================*/

#loader{

    position:fixed;

    inset:0;

    background:#05070d;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:999999;

}


.loader-content{

    width:340px;

    text-align:center;

}


.loader-logo{

    width:90px;

    height:90px;

    margin:auto;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

    linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

    font-size:36px;

    box-shadow:var(--glow);

    animation:pulse 2s infinite;

}


.loader-content h1{

    margin-top:25px;

    font-size:30px;

}


.loader-content p{

    color:var(--muted);

    margin:12px 0 25px;

}


.loading-bar{

    width:100%;

    height:8px;

    background:#1b2134;

    border-radius:50px;

    overflow:hidden;

}


.loading-progress{

    width:0;

    height:100%;

    border-radius:50px;

    background:

    linear-gradient(
    90deg,
    var(--primary),
    var(--secondary));

}


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

@keyframes pulse{

    50%{

        transform:scale(1.08);

    }

}


@keyframes floatBlob{

    0%{

        transform:
        translateY(0)
        translateX(0);

    }

    50%{

        transform:
        translateY(-80px)
        translateX(60px);

    }

    100%{

        transform:
        translateY(0)
        translateX(0);

    }

}
/*==================================================
    CSS Part 2
    App Layout + Sidebar
==================================================*/

/*==============================
App Layout
==============================*/

.app{

    display:grid;

    grid-template-columns:300px 1fr;

    min-height:100vh;

}

/*==============================
Sidebar
==============================*/

.sidebar{

    position:sticky;

    top:0;

    height:100vh;

    padding:28px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    background:var(--glass);

    backdrop-filter:blur(24px);

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

    border-right:1px solid var(--glass-border);

    box-shadow:var(--shadow);

    overflow:hidden;

}

/* Decorative Glow */

.sidebar::before{

    content:"";

    position:absolute;

    width:280px;

    height:280px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(124,92,255,.22),
    transparent 70%);

    top:-120px;

    left:-80px;

    pointer-events:none;

}

.sidebar::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(0,212,255,.16),
    transparent 70%);

    right:-80px;

    bottom:-80px;

    pointer-events:none;

}

/*==============================
Logo
==============================*/

.sidebar-logo{

    display:flex;

    align-items:center;

    gap:16px;

    margin-bottom:35px;

}

.sidebar-logo img{

    width:62px;

    height:62px;

    border-radius:18px;

    object-fit:cover;

    box-shadow:var(--glow);

}

.sidebar-logo h2{

    font-size:24px;

    font-weight:700;

    line-height:1;

}

.sidebar-logo span{

    display:block;

    margin-top:5px;

    font-size:13px;

    color:var(--muted);

}

/*==============================
User Card
==============================*/

.user-card{

    display:flex;

    align-items:center;

    gap:16px;

    padding:18px;

    margin-bottom:35px;

    border-radius:20px;

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

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

    transition:var(--transition);

}

.user-card:hover{

    transform:translateY(-6px);

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

    box-shadow:0 12px 30px rgba(124,92,255,.18);

}

.user-avatar{

    width:60px;

    height:60px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:24px;

    background:linear-gradient(135deg,
    var(--primary),
    var(--secondary));

    box-shadow:var(--glow);

}

.user-info h3{

    font-size:17px;

}

.user-info p{

    font-size:13px;

    color:var(--muted);

    margin-top:4px;

}

/*==============================
Sidebar Menu
==============================*/

.sidebar-menu{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.sidebar-menu a{

    display:flex;

    align-items:center;

    gap:15px;

    padding:15px 18px;

    border-radius:16px;

    color:var(--text);

    transition:var(--transition);

    position:relative;

    overflow:hidden;

}

.sidebar-menu a::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:0;

    height:100%;

    background:linear-gradient(90deg,
    rgba(124,92,255,.18),
    transparent);

    transition:.45s;

}

.sidebar-menu a:hover::before{

    width:100%;

}

.sidebar-menu a:hover{

    color:#fff;

    transform:translateX(8px);

}

.sidebar-menu a.active{

    background:linear-gradient(135deg,
    var(--primary),
    var(--secondary));

    color:#fff;

    box-shadow:var(--glow);

}

.sidebar-menu i{

    width:22px;

    text-align:center;

    font-size:18px;

}

.sidebar-menu span{

    font-size:15px;

    font-weight:500;

}

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

.sidebar-bottom{

    display:flex;

    flex-direction:column;

    gap:12px;

    margin-top:40px;

}

.sidebar-bottom button{

    display:flex;

    align-items:center;

    gap:14px;

    padding:15px 18px;

    border-radius:16px;

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

    color:var(--white);

    transition:var(--transition);

}

.sidebar-bottom button i{

    font-size:18px;

}

.sidebar-bottom button:hover{

    transform:translateY(-5px);

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

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

}

.sidebar-bottom .logout{

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

    color:#ffb8c5;

}

.sidebar-bottom .logout:hover{

    background:rgba(255,77,109,.28);

}

/*==============================
Sidebar Scroll
==============================*/

.sidebar{

    scrollbar-width:none;

}

.sidebar::-webkit-scrollbar{

    display:none;

}
/*==================================================
    CSS Part 3
    Main Content + Topbar
==================================================*/

/*==============================
Main Content
==============================*/

.main-content{

    padding:35px;

    overflow:hidden;

}

/*==============================
Topbar
==============================*/

.topbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:25px;

    margin-bottom:35px;

}

.topbar-left{

    display:flex;

    align-items:center;

    gap:20px;

}

.menu-toggle{

    width:55px;

    height:55px;

    border-radius:18px;

    background:var(--glass);

    border:1px solid var(--glass-border);

    color:var(--white);

    font-size:20px;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:var(--transition);

}

.menu-toggle:hover{

    transform:rotate(90deg);

    box-shadow:var(--glow);

}

.topbar-left h1{

    font-size:34px;

    font-weight:700;

}

.topbar-left p{

    color:var(--muted);

    margin-top:5px;

}

/*==============================
Right Side
==============================*/

.topbar-right{

    display:flex;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;

}

/*==============================
Search Box
==============================*/

.search-box{

    width:320px;

    height:58px;

    display:flex;

    align-items:center;

    gap:15px;

    padding:0 20px;

    border-radius:18px;

    background:var(--glass);

    backdrop-filter:blur(18px);

    border:1px solid var(--glass-border);

    transition:var(--transition);

}

.search-box:hover{

    transform:translateY(-3px);

    box-shadow:var(--glow);

}

.search-box i{

    color:var(--primary-light);

    font-size:18px;

}

.search-box input{

    width:100%;

    background:none;

    color:var(--white);

    font-size:15px;

}

.search-box input::placeholder{

    color:var(--muted);

}

/*==============================
Icon Button
==============================*/

.icon-btn{

    width:58px;

    height:58px;

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:18px;

    background:var(--glass);

    border:1px solid var(--glass-border);

    color:#fff;

    font-size:20px;

    transition:var(--transition);

}

.icon-btn:hover{

    transform:translateY(-4px);

    box-shadow:var(--glow);

}

.notification-dot{

    position:absolute;

    top:15px;

    right:15px;

    width:10px;

    height:10px;

    border-radius:50%;

    background:var(--danger);

    animation:pulse 1.8s infinite;

}

/*==============================
Date Box
==============================*/

.date-box{

    display:flex;

    align-items:center;

    gap:12px;

    padding:0 20px;

    height:58px;

    border-radius:18px;

    background:var(--glass);

    border:1px solid var(--glass-border);

    color:var(--text);

}

.date-box i{

    color:var(--secondary);

}

/*==============================
Primary Button
==============================*/

.primary-btn{

    height:58px;

    padding:0 24px;

    display:flex;

    align-items:center;

    gap:12px;

    border-radius:18px;

    background:linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

    color:#fff;

    font-weight:600;

    transition:var(--transition);

    box-shadow:var(--glow);

}

.primary-btn:hover{

    transform:translateY(-4px) scale(1.03);

}

.primary-btn:active{

    transform:scale(.96);

}

/*==============================
Profile
==============================*/

.profile-box{

    display:flex;

    align-items:center;

    gap:15px;

    padding:10px 18px;

    border-radius:18px;

    background:var(--glass);

    border:1px solid var(--glass-border);

    transition:var(--transition);

}

.profile-box:hover{

    transform:translateY(-4px);

    box-shadow:var(--glow);

}

.profile-avatar{

    width:52px;

    height:52px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:20px;

    background:linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

    box-shadow:var(--glow);

}

.profile-box h4{

    font-size:15px;

}

.profile-box small{

    color:var(--muted);

}

.profile-box .fa-chevron-down{

    margin-left:8px;

    color:var(--muted);

    transition:.3s;

}

.profile-box:hover .fa-chevron-down{

    transform:rotate(180deg);

}

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

@media(max-width:1200px){

    .topbar{

        flex-direction:column;

        align-items:flex-start;

    }

    .topbar-right{

        width:100%;

    }

}

@media(max-width:768px){

    .main-content{

        padding:20px;

    }

    .search-box{

        width:100%;

    }

    .topbar-right{

        display:grid;

        grid-template-columns:1fr;

    }

    .date-box,
    .profile-box,
    .primary-btn{

        width:100%;

        justify-content:center;

    }

}
/*==================================================
    CSS Part 4
    Dashboard Cards + Charts
==================================================*/

/*==============================
Dashboard
==============================*/

.dashboard{

    display:flex;

    flex-direction:column;

    gap:30px;

}

/*==============================
Summary Grid
==============================*/

.summary-grid{

    display:grid;

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

    gap:25px;

}

/*==============================
Summary Card
==============================*/

.summary-card{

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    gap:20px;

    padding:28px;

    border-radius:26px;

    background:var(--glass);

    border:1px solid var(--glass-border);

    backdrop-filter:blur(18px);

    transition:all .35s ease;

    box-shadow:var(--shadow);

}

/* Glow */

.summary-card::before{

    content:"";

    position:absolute;

    width:250px;

    height:250px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(255,255,255,.08),
    transparent 70%);

    top:-150px;

    right:-120px;

    transition:.5s;

}

.summary-card:hover::before{

    transform:scale(1.3);

}

.summary-card:hover{

    transform:
    translateY(-10px);

}

/* Left Border */

.balance-card{

    border-left:5px solid var(--primary);

}

.income-card{

    border-left:5px solid var(--success);

}

.expense-card{

    border-left:5px solid var(--danger);

}

.savings-card{

    border-left:5px solid var(--secondary);

}

/*==============================
Icon
==============================*/

.card-icon{

    width:75px;

    height:75px;

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    color:#fff;

}

.balance-card .card-icon{

    background:
    linear-gradient(
    135deg,
    var(--primary),
    #9b7bff);

}

.income-card .card-icon{

    background:
    linear-gradient(
    135deg,
    #10b981,
    #34d399);

}

.expense-card .card-icon{

    background:
    linear-gradient(
    135deg,
    #ef4444,
    #fb7185);

}

.savings-card .card-icon{

    background:
    linear-gradient(
    135deg,
    #06b6d4,
    #22d3ee);

}

/*==============================
Card Info
==============================*/

.card-info{

    flex:1;

}

.card-info p{

    color:var(--muted);

    margin-bottom:8px;

    font-size:14px;

}

.card-info h2{

    font-size:30px;

    font-weight:700;

    letter-spacing:.5px;

}

/*==============================
Chart Grid
==============================*/

.chart-grid{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:25px;

}

/*==============================
Chart Card
==============================*/

.chart-card{

    background:var(--glass);

    border:1px solid var(--glass-border);

    border-radius:26px;

    padding:25px;

    backdrop-filter:blur(18px);

    box-shadow:var(--shadow);

    transition:.35s;

}

.chart-card:hover{

    transform:translateY(-8px);

}

.chart-card canvas{

    width:100% !important;

    height:350px !important;

    margin-top:20px;

}

/*==============================
Card Header
==============================*/

.card-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:10px;

}

.card-header h3{

    font-size:22px;

    font-weight:600;

}

.card-header button{

    width:45px;

    height:45px;

    border-radius:14px;

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

    color:#fff;

    transition:.3s;

}

.card-header button:hover{

    transform:rotate(90deg);

    background:var(--primary);

}

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

.summary-card:nth-child(1){

    animation:floatCard 5s ease-in-out infinite;

}

.summary-card:nth-child(2){

    animation:floatCard 6s ease-in-out infinite;

}

.summary-card:nth-child(3){

    animation:floatCard 7s ease-in-out infinite;

}

.summary-card:nth-child(4){

    animation:floatCard 8s ease-in-out infinite;

}

@keyframes floatCard{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}

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

@media(max-width:1200px){

    .summary-grid{

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

    }

    .chart-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .summary-grid{

        grid-template-columns:1fr;

    }

    .summary-card{

        padding:22px;

    }

    .card-icon{

        width:65px;

        height:65px;

        font-size:26px;

    }

    .card-info h2{

        font-size:24px;

    }

}
/*==================================================
    CSS Part 5
    Quick Stats + Transaction Table
==================================================*/

/*==============================
Quick Stats
==============================*/

.quick-stats{

    display:grid;

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

    gap:25px;

}

.stat-box{

    position:relative;

    display:flex;

    align-items:center;

    gap:18px;

    padding:22px;

    overflow:hidden;

    border-radius:22px;

    background:var(--glass);

    border:1px solid var(--glass-border);

    backdrop-filter:blur(20px);

    transition:.35s;

    box-shadow:var(--shadow);

}

.stat-box:hover{

    transform:translateY(-8px);

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

}

.stat-box::before{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    border-radius:50%;

    top:-80px;

    right:-80px;

    background:radial-gradient(circle,
    rgba(124,92,255,.15),
    transparent 70%);

}

.stat-box i{

    width:65px;

    height:65px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

    color:#fff;

    font-size:24px;

    flex-shrink:0;

}

.stat-box h4{

    font-size:24px;

    font-weight:700;

}

.stat-box span{

    display:block;

    margin-top:4px;

    color:var(--muted);

    font-size:14px;

}

/*==============================
Transaction Section
==============================*/

.transaction-section{

    margin-top:35px;

    padding:28px;

    border-radius:28px;

    background:var(--glass);

    border:1px solid var(--glass-border);

    backdrop-filter:blur(20px);

    box-shadow:var(--shadow);

}

/*==============================
Section Header
==============================*/

.section-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-bottom:28px;

    flex-wrap:wrap;

}

.section-header h2{

    font-size:28px;

    font-weight:700;

}

.section-header p{

    color:var(--muted);

    margin-top:5px;

}

/*==============================
Actions
==============================*/

.section-actions{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

}

.section-actions select{

    height:52px;

    padding:0 18px;

    border-radius:15px;

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

    color:#fff;

    border:1px solid var(--glass-border);

}

.section-actions option{

    color:#000;

}

#clearFilter{

    height:52px;

}

/*==============================
Table Wrapper
==============================*/

.table-wrapper{

    overflow-x:auto;

    border-radius:20px;

}

.table-wrapper::-webkit-scrollbar{

    height:8px;

}

/*==============================
Table
==============================*/

table{

    width:100%;

    min-width:900px;

    border-collapse:collapse;

}

thead{

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

}

thead th{

    padding:18px;

    text-align:left;

    color:var(--white);

    font-size:15px;

    font-weight:600;

}

tbody td{

    padding:18px;

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

    color:var(--text);

    transition:.3s;

}

tbody tr{

    transition:.3s;

}

tbody tr:hover{

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

}

tbody tr:hover td{

    color:#fff;

}

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

.action-btn{

    width:40px;

    height:40px;

    border-radius:12px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-right:8px;

    color:#fff;

    transition:.3s;

}

.edit-btn{

    background:#2563eb;

}

.delete-btn{

    background:#dc2626;

}

.action-btn:hover{

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

}

/*==============================
Empty State
==============================*/

#emptyState{

    display:none;

    text-align:center;

    padding:60px 20px;

}

#emptyState i{

    font-size:70px;

    color:var(--primary);

    margin-bottom:18px;

}

#emptyState h3{

    font-size:28px;

    margin-bottom:12px;

}

#emptyState p{

    color:var(--muted);

    max-width:500px;

    margin:auto;

    line-height:1.7;

}

/*==============================
Pagination
==============================*/

.pagination{

    margin-top:30px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:15px;

}

.pagination button{

    width:48px;

    height:48px;

    border-radius:14px;

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

    color:#fff;

    transition:.3s;

}

.pagination button:hover{

    background:var(--primary);

    transform:translateY(-3px);

}

#pageNumber{

    color:var(--muted);

    font-weight:600;

}

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

@media(max-width:1200px){

    .quick-stats{

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

    }

}

@media(max-width:768px){

    .quick-stats{

        grid-template-columns:1fr;

    }

    .transaction-section{

        padding:20px;

    }

    .section-header{

        flex-direction:column;

        align-items:flex-start;

    }

    .section-actions{

        width:100%;

        flex-direction:column;

    }

    .section-actions select,

    #clearFilter{

        width:100%;

    }

}
/*==================================================
    CSS Part 6
    Activity + Modal + Form
==================================================*/

/*==============================
Activity Section
==============================*/

.activity-section{

    margin-top:35px;

    padding:28px;

    border-radius:28px;

    background:var(--glass);

    border:1px solid var(--glass-border);

    backdrop-filter:blur(20px);

    box-shadow:var(--shadow);

}

.activity-list{

    display:flex;

    flex-direction:column;

    gap:18px;

    margin-top:20px;

}

.activity-item{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding:20px;

    border-radius:20px;

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

    transition:.35s;

}

.activity-item:hover{

    transform:translateX(8px);

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

}

.activity-icon{

    width:60px;

    height:60px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:22px;

    flex-shrink:0;

}

.activity-icon.income{

    background:linear-gradient(135deg,#22c55e,#16a34a);

}

.activity-icon.expense{

    background:linear-gradient(135deg,#ef4444,#dc2626);

}

.activity-icon.saving{

    background:linear-gradient(135deg,#06b6d4,#0ea5e9);

}

.activity-content{

    flex:1;

}

.activity-content h4{

    font-size:17px;

}

.activity-content p{

    margin-top:4px;

    color:var(--muted);

}

.activity-item span{

    color:var(--muted);

    white-space:nowrap;

}

/*==============================
Modal
==============================*/

.modal{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

    padding:20px;

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

    backdrop-filter:blur(12px);

    z-index:9999;

}

.modal.active{

    display:flex;

    animation:fadeIn .35s ease;

}

.modal-content{

    width:100%;

    max-width:650px;

    max-height:90vh;

    overflow-y:auto;

    border-radius:28px;

    padding:30px;

    background:#111827;

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

    box-shadow:0 25px 60px rgba(0,0,0,.5);

    animation:scaleIn .35s ease;

}

.modal-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

}

.modal-header h2{

    font-size:30px;

}

.close-modal{

    width:48px;

    height:48px;

    border-radius:14px;

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

    color:#fff;

    transition:.3s;

}

.close-modal:hover{

    transform:rotate(90deg);

    background:var(--danger);

}

/*==============================
Form
==============================*/

.form-group{

    margin-bottom:20px;

}

.form-group label{

    display:block;

    margin-bottom:10px;

    font-weight:500;

}

.form-group input,

.form-group textarea,

.form-group select{

    width:100%;

    padding:16px 18px;

    border-radius:16px;

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

    color:#fff;

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

    transition:.3s;

}

.form-group input:focus,

.form-group textarea:focus,

.form-group select:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(124,92,255,.15);

}

.form-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;

}

textarea{

    resize:vertical;

    min-height:120px;

}

.full-btn{

    width:100%;

    justify-content:center;

    margin-top:10px;

}

/*==============================
Delete Modal
==============================*/

.confirm-box{

    width:100%;

    max-width:430px;

    padding:35px;

    text-align:center;

    border-radius:28px;

    background:#111827;

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

}

.confirm-box i{

    font-size:60px;

    color:var(--danger);

    margin-bottom:20px;

}

.confirm-box h2{

    margin-bottom:10px;

}

.confirm-box p{

    color:var(--muted);

}

.confirm-buttons{

    display:flex;

    gap:15px;

    margin-top:30px;

}

.confirm-buttons button{

    flex:1;

    padding:16px;

    border-radius:15px;

    color:#fff;

}

#cancelDelete{

    background:#374151;

}

#confirmDelete{

    background:var(--danger);

}

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

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes scaleIn{

    from{

        opacity:0;

        transform:scale(.9);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

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

@media(max-width:768px){

    .activity-item{

        flex-wrap:wrap;

    }

    .form-row{

        grid-template-columns:1fr;

    }

    .modal-content{

        padding:22px;

    }

}
/*==================================================
    CSS Part 7
    Toast + Footer + Effects
==================================================*/

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

#toast{

    position:fixed;

    top:30px;

    right:30px;

    min-width:320px;

    padding:18px 22px;

    display:flex;

    align-items:center;

    gap:15px;

    border-radius:18px;

    background:rgba(17,24,39,.92);

    backdrop-filter:blur(20px);

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

    color:#fff;

    box-shadow:0 20px 45px rgba(0,0,0,.35);

    transform:translateX(420px);

    opacity:0;

    transition:.45s ease;

    z-index:99999;

}

#toast.show{

    transform:translateX(0);

    opacity:1;

}

#toast i{

    font-size:22px;

    color:var(--success);

}

/*==============================
Scroll To Top
==============================*/

#scrollTop{

    position:fixed;

    right:28px;

    bottom:28px;

    width:58px;

    height:58px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:18px;

    background:linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

    color:#fff;

    font-size:20px;

    box-shadow:var(--glow);

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:999;

}

#scrollTop.show{

    opacity:1;

    visibility:visible;

}

#scrollTop:hover{

    transform:translateY(-8px) rotate(-8deg);

}

/*==============================
Floating Particles
==============================*/

.particles{

    position:fixed;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:-1;

}

.particles span{

    position:absolute;

    width:12px;

    height:12px;

    border-radius:50%;

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

    animation:particleFloat linear infinite;

}

.particles span:nth-child(1){

    left:8%;

    bottom:-20px;

    animation-duration:15s;

}

.particles span:nth-child(2){

    left:20%;

    bottom:-40px;

    animation-duration:18s;

    width:8px;

    height:8px;

}

.particles span:nth-child(3){

    left:36%;

    bottom:-25px;

    animation-duration:12s;

}

.particles span:nth-child(4){

    left:55%;

    bottom:-20px;

    animation-duration:17s;

}

.particles span:nth-child(5){

    left:70%;

    bottom:-30px;

    animation-duration:13s;

}

.particles span:nth-child(6){

    left:82%;

    bottom:-40px;

    animation-duration:20s;

}

.particles span:nth-child(7){

    left:90%;

    bottom:-25px;

    animation-duration:16s;

}

.particles span:nth-child(8){

    left:48%;

    bottom:-20px;

    animation-duration:14s;

}

@keyframes particleFloat{

    0%{

        transform:translateY(0) scale(.4);

        opacity:0;

    }

    15%{

        opacity:1;

    }

    100%{

        transform:translateY(-120vh) scale(1.4);

        opacity:0;

    }

}

/*==============================
Footer
==============================*/

footer{

    margin-top:50px;

    padding:30px 20px;

    text-align:center;

    color:var(--muted);

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

}

footer p{

    letter-spacing:.5px;

}

/*==============================
Hover Glow
==============================*/

.summary-card:hover,
.chart-card:hover,
.stat-box:hover,
.transaction-section:hover,
.activity-section:hover{

    border-color:rgba(124,92,255,.25);

}

/*==============================
Utility Classes
==============================*/

.hidden{

    display:none !important;

}

.text-center{

    text-align:center;

}

.mt-20{

    margin-top:20px;

}

.mt-30{

    margin-top:30px;

}

.mb-20{

    margin-bottom:20px;

}

.w-100{

    width:100%;

}

.fade-in{

    animation:fadeIn .4s ease;

}

.scale-in{

    animation:scaleIn .35s ease;

}

/*==============================
Smooth Transition
==============================*/

*{

    transition:
        background-color .3s ease,
        color .3s ease,
        border-color .3s ease,
        transform .3s ease,
        box-shadow .3s ease;

}

/*==============================
Reduce Motion Support
==============================*/

@media (prefers-reduced-motion: reduce){

    *,
    *::before,
    *::after{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}