/* ======================================
   BudgetFlow
   Part 2A - Liquid Glass Design System
======================================= */


/* ==========================
   RESET
========================== */

* {

    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Inter",sans-serif;

}


html {

    scroll-behavior:smooth;

}


body {

    min-height:100vh;

    background:#030303;

    color:white;

    overflow-x:hidden;

}



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


.background {

    position:fixed;

    inset:0;

    overflow:hidden;

    z-index:-5;

    background:

    radial-gradient(
        circle at top,
        #111827,
        #000
    );

}



.blob {

    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    opacity:.5;

    animation:float 15s infinite alternate;

}



.blob.one {

    width:500px;

    height:500px;

    background:#0066ff;

    top:-150px;

    left:-150px;

}



.blob.two {

    width:600px;

    height:600px;

    background:#8b5cf6;

    right:-200px;

    top:200px;

}



.blob.three {

    width:400px;

    height:400px;

    background:#00ffff;

    bottom:-100px;

    left:35%;

}



@keyframes float {


    from {

        transform:
        translate(0,0)
        scale(1);

    }


    to {

        transform:
        translate(100px,80px)
        scale(1.2);

    }

}



/* ==========================
   GLASS SYSTEM
========================== */


.glass {


    background:

    linear-gradient(

        135deg,

        rgba(255,255,255,.14),

        rgba(255,255,255,.04)

    );


    backdrop-filter:

    blur(25px);


    -webkit-backdrop-filter:

    blur(25px);


    border:

    1px solid rgba(255,255,255,.15);


    box-shadow:


    0 20px 50px

    rgba(0,0,0,.5),


    inset 0 1px 1px

    rgba(255,255,255,.2);


    border-radius:28px;


}





/* ==========================
   NAVBAR
========================== */


nav {


    position:sticky;

    top:20px;

    width:90%;

    margin:auto;

    padding:18px 30px;


    display:flex;

    justify-content:space-between;

    align-items:center;


    z-index:100;


}



.logo {


    display:flex;

    align-items:center;

    gap:12px;


}


.logo h2 {

    font-size:22px;

    font-weight:700;

}



.logo-circle {


    width:35px;

    height:35px;


    border-radius:50%;


    background:

    linear-gradient(

        135deg,

        #00ffff,

        #6366f1

    );


    box-shadow:

    0 0 30px #00ffff;


}




nav ul {


    display:flex;

    gap:30px;

    list-style:none;


}



nav a {


    text-decoration:none;

    color:white;

    opacity:.75;

    transition:.3s;


}


nav a:hover {


    opacity:1;

    color:#67e8f9;


}



.profile button {


    background:

    rgba(255,255,255,.1);


    border:

    1px solid rgba(255,255,255,.2);


    color:white;


    padding:

    12px 20px;


    border-radius:20px;


    cursor:pointer;


}



/* ==========================
   HERO
========================== */


.hero {


    padding:

    80px 5% 50px;


}



.hero-card {


    padding:

    70px;


    text-align:center;


}



.hero h1 {


    font-size:

    clamp(40px,6vw,75px);


    line-height:1.05;


    background:

    linear-gradient(

        90deg,

        white,

        #67e8f9

    );


    -webkit-background-clip:text;

    color:transparent;


}



.hero p {


    max-width:700px;

    margin:

    25px auto;


    opacity:.75;


    font-size:18px;

    line-height:1.7;


}




button {


    border:none;


    cursor:pointer;


    padding:

    14px 28px;


    border-radius:30px;


    color:white;


    background:


    linear-gradient(

        135deg,

        #2563eb,

        #7c3aed

    );


    transition:.3s;


}



button:hover {


    transform:

    translateY(-3px);


    box-shadow:

    0 15px 30px

    rgba(99,102,241,.4);


}



/* ==========================
   DASHBOARD
========================== */


.dashboard,


.paycheck-overview,


.monthly-overview,


.income-section,


.expense-section,


.categories-section,


.transaction-section,


.bills-section,


.goals-section,


.analytics-section,


.settings-section {


    width:90%;

    margin:

    40px auto;


}



.dashboard-title {


    margin-bottom:25px;


}



.cards {


    display:grid;


    grid-template-columns:

    repeat(auto-fit,minmax(220px,1fr));


    gap:25px;


}



.card {


    padding:

    30px;


    transition:.3s;


}



.card:hover {


    transform:

    translateY(-8px);


}



.card h4 {


    opacity:.7;

    margin-bottom:15px;


}



.card h1 {


    font-size:35px;


}



/* ==========================
   COLORS
========================== */


.income h1 {

    color:#4ade80;

}


.expense h1 {

    color:#f87171;

}


.taxes h1 {

    color:#fbbf24;

}


.savings h1 {

    color:#38bdf8;

}




/* ==========================
   PANELS
========================== */


.panel,

.monthly-card,

.form-card,

.table-card,

.bills-card,

.goals-card,

.analytics-card,

.settings-card {


    padding:35px;


}




.summary-grid,


.monthly-grid {


    display:grid;


    grid-template-columns:

    repeat(auto-fit,minmax(180px,1fr));


    gap:20px;


    margin-top:25px;


}



.summary-grid div,


.monthly-grid div {


    padding:20px;


    background:

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


    border-radius:20px;


}



.summary-grid h1 {


    margin-top:10px;


}




.form-grid {


    display:grid;


    grid-template-columns:

    repeat(auto-fit,minmax(230px,1fr));


    gap:22px;


    margin-top:25px;


}



.form-group,

.form-grid div {


    display:flex;


    flex-direction:column;


    gap:10px;


}



label {


    color:white;

    opacity:.75;

    font-size:14px;


}




input,

select,

textarea {


    width:100%;


    padding:15px 18px;


    color:white;


    background:


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


    border:


    1px solid rgba(255,255,255,.15);


    border-radius:18px;


    outline:none;


    backdrop-filter:blur(15px);


    transition:.3s;


}



input::placeholder,

textarea::placeholder {


    color:

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


}



select option {


    background:#111827;

    color:white;


}



input:focus,

select:focus,

textarea:focus {


    border-color:#38bdf8;


    box-shadow:

    0 0 20px

    rgba(56,189,248,.3);


}




textarea {


    resize:none;


    margin-top:20px;


}





.buttons {


    display:flex;


    gap:15px;


    flex-wrap:wrap;


    margin-top:25px;


}



.buttons button {


    min-width:170px;


}



.buttons button:last-child {


    background:

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


    border:

    1px solid rgba(255,255,255,.2);


}




/* ==========================
   QUICK STATS
========================== */


.stats {


    padding:30px;


    display:grid;


    grid-template-columns:

    repeat(auto-fit,minmax(180px,1fr));


    gap:20px;


}



.stats div {


    padding:25px;


    background:

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


    border-radius:22px;


    text-align:center;


}



.stats h2 {


    color:#67e8f9;


    font-size:35px;


}



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


.category-grid {


    display:grid;


    grid-template-columns:

    repeat(auto-fit,minmax(260px,1fr));


    gap:25px;


}



.category-card {


    padding:30px;


    transition:.3s;


}



.category-card:hover {


    transform:

    translateY(-7px);


}



.category-card h3 {


    margin-bottom:25px;


}



.progress {


    width:100%;


    height:12px;


    background:

    rgba(255,255,255,.1);


    border-radius:20px;


    overflow:hidden;


}



.bar {


    height:100%;


    width:0%;


    border-radius:20px;


    background:

    linear-gradient(

        90deg,

        #38bdf8,

        #6366f1

    );


    transition:1s;


}



.housing-bar {

    width:40%;

}


.food-bar {

    width:55%;

}


.transport-bar {

    width:30%;

}


.shopping-bar {

    width:20%;

}


.utility-bar {

    width:60%;

}


.entertainment-bar {

    width:35%;

}





.category-card p {


    margin-top:15px;

    opacity:.7;


}





/* ==========================
   TABLE
========================== */


.table-card {


    overflow:hidden;


}



.table-wrapper {


    overflow-x:auto;


    margin-top:25px;


}



table {


    width:100%;


    border-collapse:collapse;


}



thead {


    background:

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


}



th {


    padding:18px;


    text-align:left;


    font-weight:600;


}



td {


    padding:18px;


    border-bottom:

    1px solid

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


    color:

    rgba(255,255,255,.85);


}



tr {


    transition:.3s;


}



tbody tr:hover {


    background:

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


}





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


.section-heading {


    display:flex;


    justify-content:space-between;


    align-items:center;


    gap:20px;


    margin-bottom:25px;


}



.section-heading input {


    max-width:300px;


}




/* ==========================
   BILLS
========================== */


.bill-grid {


    display:grid;


    grid-template-columns:

    repeat(auto-fit,minmax(230px,1fr));


    gap:25px;


    margin-top:25px;


}



.bill {


    padding:25px;


    transition:.3s;


}



.bill:hover {


    transform:

    translateY(-5px);


}



.bill h2 {


    margin:

    15px 0;


    color:#67e8f9;


}



.bill label {


    display:flex;


    gap:10px;


    align-items:center;


}





.bill input {


    width:auto;


}





/* ==========================
   SAVINGS GOALS
========================== */


.goal {


    margin-top:30px;


    padding:25px;


    background:

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


    border-radius:22px;


}



.goal .progress {


    margin-top:20px;


}



.goal-bar {


    width:60%;


    background:

    linear-gradient(

        90deg,

        #22c55e,

        #06b6d4

    );


}



.emergency-bar {


    width:35%;


    background:

    linear-gradient(

        90deg,

        #facc15,

        #f97316

    );


}





/* ==========================
   ANALYTICS
========================== */


.chart-grid {


    display:grid;


    grid-template-columns:

    repeat(auto-fit,minmax(350px,1fr));


    gap:30px;


    margin-top:30px;


}



.chart-box {


    height:350px;


    padding:25px;


    background:

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


    border-radius:25px;


}





/* ==========================
   SETTINGS
========================== */


.settings-card {


    text-align:center;


}





/* ==========================
   FOOTER
========================== */


footer {


    width:90%;


    margin:

    60px auto;


    padding:30px;


    text-align:center;


    opacity:.6;


}



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


::-webkit-scrollbar {


    width:10px;


}



::-webkit-scrollbar-track {


    background:#050505;


}



::-webkit-scrollbar-thumb {


    background:

    linear-gradient(

        #2563eb,

        #7c3aed

    );


    border-radius:20px;


}





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


@media(max-width:900px){


nav {


    flex-direction:column;


    gap:20px;


}



nav ul {


    flex-wrap:wrap;


    justify-content:center;


}



.hero-card {


    padding:35px;


}



.hero h1 {


    font-size:42px;


}



.section-heading {


    flex-direction:column;


    align-items:flex-start;


}



.section-heading input {


    max-width:none;


}



.chart-grid {


    grid-template-columns:1fr;


}


}



@media(max-width:500px){


.cards {


    grid-template-columns:1fr;


}



.hero h1 {


    font-size:34px;


}



.buttons button {


    width:100%;


}


}