.add-page{

    padding:20px 20px 100px;

}

.page-title{

    font-size:24px;

    font-weight:700;

    margin-bottom:25px;

}

.form-group{

    margin-bottom:18px;

}

.form-group label{

    display:block;

    margin-bottom:8px;

    color:var(--text-light);

}

.input{

    width:100%;

    height:55px;

    background:var(--card);

    color:var(--text);

    border-radius:15px;

    padding:15px;

}

.save-btn{

    width:100%;

    height:55px;

    border:none;

    border-radius:15px;

    background:linear-gradient(135deg,#14E4B5,#00C2FF);

    color:white;

    font-size:18px;

    font-weight:600;

    cursor:pointer;

    margin-top:20px;

}
/* ==========================
   Amount Box
========================== */

.amount-box{

    display:flex;
    align-items:center;
    background:var(--card);
    border-radius:16px;
    padding:0 18px;

}

.currency-symbol{

    font-size:28px;
    font-weight:700;
    color:#14E4B5;
    margin-right:12px;

}

.amount-input{

    border:none !important;
    background:transparent !important;
    font-size:28px;
    font-weight:700;
    height:65px;
    width:100%;

}

/* ==========================
   Two Column Layout
========================== */

.form-row{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px;

}

/* ==========================
   Notes
========================== */

textarea.input{

    resize:none;

    min-height:120px;

}

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

.action-buttons{

    display:flex;

    gap:12px;

    margin-top:25px;

    margin-bottom:90px;

}

.cancel-btn,
.save-btn{

    flex:1;

    height:55px;

    border:none;

    border-radius:14px;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

}

.cancel-btn{

    background:#2E3248;

    color:#FFFFFF;

}

.save-btn{

    background:#14E4B5;

    color:#111827;

}

.cancel-btn:hover,
.save-btn:hover{

    opacity:0.9;

}
/* ==========================
   Transaction Type Switch
========================== */

.type-switch{
    display:flex;
    background:#232741;
    border-radius:15px;
    padding:5px;
    margin:20px 0 25px;
}

.type-btn{
    flex:1;
    height:50px;
    border:none;
    border-radius:12px;
    background:transparent;
    color:#B8C1EC;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    transition:0.3s;
}

.type-btn.active{
    background:linear-gradient(135deg,#14E4B5,#00C2FF);
    color:#111827;
}

/* ==========================
   Transaction Toggle
========================== */

.type-switch{

display:flex;
background:#1b2038;
border-radius:15px;
padding:5px;
margin:20px 0;

}

.type-btn{

flex:1;
height:45px;
border:none;
background:transparent;
color:white;
font-size:16px;
font-weight:600;
border-radius:12px;
cursor:pointer;
transition:.3s;

}

.type-btn.active{

background:#14E4B5;
color:#111827;

}

.upload-btn,
.camera-btn{

display:block;

padding:14px;

margin-top:10px;

background:#4f46e5;

color:white;

text-align:center;

border-radius:12px;

cursor:pointer;

font-weight:600;

}

.camera-btn{

background:#16a34a;

}

.receipt-buttons{

display:flex;

gap:12px;

margin-top:10px;

}

.receipt-btn{

flex:1;

padding:14px;

background:#4f46e5;

color:#fff;

text-align:center;

border-radius:12px;

cursor:pointer;

font-weight:600;

transition:.3s;

}

.receipt-btn:hover{

transform:scale(1.03);

}

.camera{

background:#16a34a;

}

.receipt-grid{

display:grid;

grid-template-columns:repeat(auto-fill,minmax(90px,1fr));

gap:10px;

margin-top:15px;

}

.receipt-grid img{

width:100%;

height:90px;

border-radius:10px;

object-fit:cover;

}

.receipt-item{

position:relative;

}

.receipt-item button{

position:absolute;

top:5px;

right:5px;

width:25px;

height:25px;

border:none;

border-radius:50%;

background:red;

color:white;

cursor:pointer;

}

.toast{

    position:fixed;

    left:50%;

    bottom:90px;

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

    background:#14E4B5;

    color:#111827;

    padding:14px 22px;

    border-radius:30px;

    font-weight:600;

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

    opacity:0;

    transition:.35s;

    z-index:99999;

}

.toast.show{

    opacity:1;

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

}