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

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

:root{

    --bg: rgb(232, 9, 232);
    --card:#523b87;
    --card2:#680390;

    --cyan:#00e5ff;
    --purple:#7c3aed;
    --green:#00ff9d;
    --red:#ff4d6d;
    --yellow:#facc15;

    --text:#f8fafc;
    --muted:#94a3b8;

    --border:rgb(177, 177, 177);
}

body{

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

    background:
    radial-gradient(circle at top left,#910ac6 0%,transparent 30%),
    radial-gradient(circle at top right,#944dad 0%,transparent 25%),
    #2e0248;

    color:var(--text);

    min-height:100vh;

    overflow-x:hidden;
}

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

.bg-grid{

    position:fixed;
    inset:0;

    background-image:
    linear-gradient(rgba(55, 18, 75, 0.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);

    background-size:40px 40px;

    z-index:-1;
}

/* ==========================
   CONTAINER
========================== */

.container{

    width:min(1400px,95%);
    margin:auto;

    padding:40px 20px 80px;
}

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

.hero{

    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:30px;

    margin-bottom:30px;
}

.tag{

    display:inline-block;

    padding:8px 16px;

    border-radius:999px;

    background:rgba(171, 121, 77, 0.842);

    color:var(--cyan);

    border:1px solid rgba(0,229,255,.2);

    margin-bottom:15px;
}

.hero h1{

    font-size:3rem;
    margin-bottom:10px;
}

.hero p{

    color:var(--muted);
}

.health-score{

    min-width:180px;

    text-align:center;

    padding:25px;

    border-radius:24px;

    background:var(--card);

    border:1px solid rgba(0,229,255,.15);

    box-shadow:
    0 0 30px rgba(0,229,255,.08);
}

.health-score h2{

    font-size:3rem;

    color:var(--cyan);
}

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

.summary-grid{

    display:grid;

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

    gap:20px;

    margin-bottom:30px;
}

.stat-card{

    background:var(--card);

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

    border-radius:24px;

    padding:25px;

    transition:.3s;
}

.stat-card:hover{

    transform:translateY(-5px);

    box-shadow:
    0 0 25px rgba(0,229,255,.1);
}

.stat-card p{

    color:var(--muted);

    margin-bottom:10px;
}

.stat-card h2{

    font-size:2rem;
}

.balance-card{

    background:
    linear-gradient(
    135deg,
    rgba(0,229,255,.15),
    rgba(124,58,237,.15));

    border:1px solid rgba(0,229,255,.2);
}

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

.dashboard-grid{

    display:grid;

    grid-template-columns:
    1fr 1.2fr;

    gap:25px;

    margin-bottom:30px;
}

.left-panel,
.right-panel{

    display:flex;
    flex-direction:column;
    gap:25px;
}

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

.card{

    background:var(--card);

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

    border-radius:24px;

    padding:24px;

    transition:.3s;
}

.card:hover{

    border-color:
    rgba(0,229,255,.2);

    box-shadow:
    0 0 25px rgba(0,229,255,.08);
}

.card-title{

    font-size:1.1rem;
    font-weight:700;

    margin-bottom:20px;
}

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

form{

    display:flex;
    flex-direction:column;

    gap:15px;
}

input,
select{

    width:100%;

    padding:14px;

    border-radius:14px;

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

    background:var(--card2);

    color:rgb(255, 255, 255);

    outline:none;
}

input:focus,
select:focus{

    border-color:var(--cyan);

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

button{

    cursor:pointer;

    border:none;

    border-radius:14px;

    padding:14px;

    color:rgb(0, 0, 0);

    font-weight:600;

    transition:.3s;
}

button:hover{

    transform:translateY(-2px);
}

form button{

    background:
    linear-gradient(
    135deg,
    var(--cyan),
    var(--purple));
}

.goal-buttons{

    display:flex;
    gap:10px;

    margin-top:15px;
}

.goal-buttons button{

    flex:1;
}

.danger-btn{

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

/* ==========================
   GOAL BAR
========================== */

.goal-status{

    margin-top:20px;
}

.progress-bar{

    width:100%;

    height:12px;

    background:#1e293b;

    border-radius:999px;

    overflow:hidden;

    margin-top:10px;
}

.progress-fill{

    width:0;

    height:100%;

    background:
    linear-gradient(
    90deg,
    var(--cyan),
    var(--green));

    transition:.5s;
}

/* ==========================
   CHARTS
========================== */

canvas{

    width:100%!important;
    max-height:340px;
}

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

.history-header{

    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:20px;

    margin-bottom:20px;
}

.filters{

    display:flex;
    gap:10px;
}

#transactionList{

    list-style:none;
}

#transactionList li{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    padding:18px;

    margin-bottom:14px;

    border-radius:18px;

    background:var(--card2);

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

    transition:.3s;
}

#transactionList li:hover{

    transform:translateX(5px);

    border-color:
    rgba(0,229,255,.2);
}

.edit-btn{

    background:transparent;
    color:var(--cyan);
}

.delete-btn{

    background:transparent;
    color:var(--red);
}

/* ==========================
   BADGES
========================== */

.badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 18px;

    margin:6px;

    border-radius:999px;

    background:
    rgba(250,204,21,.12);

    color:#fde68a;

    border:1px solid rgba(250,204,21,.2);
}

/* ==========================
   GOAL HISTORY
========================== */

#goalHistory{

    list-style:none;
}

#goalHistory li{

    margin-bottom:12px;

    padding:15px;

    border-radius:16px;

    background:var(--card2);
}

/* ==========================
   AI INSIGHTS
========================== */

#aiInsightsText{

    line-height:1.8;

    color:#dbeafe;
}

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

::-webkit-scrollbar{

    width:10px;
}

::-webkit-scrollbar-track{

    background:#0b1020;
}

::-webkit-scrollbar-thumb{

    background:
    linear-gradient(
    var(--cyan),
    var(--purple));

    border-radius:999px;
}

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

@media(max-width:1100px){

    .dashboard-grid{

        grid-template-columns:1fr;
    }

    .summary-grid{

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

@media(max-width:768px){

    .hero{

        flex-direction:column;
        align-items:flex-start;
    }

    .hero h1{

        font-size:2.2rem;
    }

    .summary-grid{

        grid-template-columns:1fr;
    }

    .history-header{

        flex-direction:column;
        align-items:stretch;
    }

    .filters{

        flex-direction:column;
    }

    #transactionList li{

        flex-direction:column;
        align-items:flex-start;
    }
}