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

input,
select,
textarea,
button{
    font-family:'Poppins',sans-serif;
}

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

html,
body{
    background:#f6f6f8;
    font-family:'Poppins',sans-serif;
    color:#3a3a4a;
    width:100%;
    overflow-x:hidden;

    touch-action:manipulation;

    -webkit-text-size-adjust:100%;
    min-height:100vh;
}

.app{
    max-width:390px;

    margin:auto;

    min-height:100vh;

    padding:15px;

    display:flex;
    flex-direction:column;

    box-sizing:border-box;
}

/* HEADER */

.top-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:10px;
}

.logo{
    font-size:22px;
    font-weight:700;
    color:#6466f1;
}

.header-right{
    display:flex;
    align-items:center;
    gap:12px;
}

.notif{
    position:relative;

    width:38px;
    height:38px;

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

    border-radius:50%;

    background:#ffffff;

    color:#374151;

    border:1px solid rgba(17,24,39,.05);

    box-shadow:
        0 2px 8px rgba(0,0,0,.04);
}

.notif i{
    font-size:20px;
}

.badge{
    position:absolute;

    top:7px;
    right:7px;

    width:8px;
    height:8px;

    background:#ef4444;

    border-radius:50%;

    box-shadow:
        0 0 0 2px #fff;
}

.avatar{
    width:38px;
    height:38px;
    border-radius:50%;
    overflow:hidden;
    border:2px solid #d8d8ff;
    box-shadow:
        0 2px 8px rgba(0,0,0,.08);
}

.avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.avatar-wrap{
    position:relative;
}

.profile-dropdown{

    position:absolute;

    top:55px;
    right:0;

    width:220px;

    background:#fff;

    border-radius:16px;

    padding:8px;

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

    border:1px solid #f1f5f9;

    display:none;

    z-index:9999;
}

.profile-dropdown.show{
    display:block;
}

.profile-info{

    padding:10px 12px;

    border-bottom:
    1px solid #f3f4f6;

    margin-bottom:6px;
}

.profile-info strong{
    display:block;
    font-size:14px;
}

.profile-info small{
    color:#9ca3af;
}

.profile-dropdown a{

    display:flex;
    align-items:center;

    gap:10px;

    padding:10px 12px;

    color:#374151;

    text-decoration:none;

    border-radius:10px;
}

.profile-dropdown a:hover{
    background:#f8fafc;
}

.profile-dropdown .logout{
    color:#ef4444;
}

/* WALLET */

.wallet-section{
    margin-top:25px;
}

.wallet-title{
    font-size:15px;
    color:#555;
    font-weight:500;
}

.wallet-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:5px;
}

.wallet-balance{
    font-size:24px;
    font-weight:700;
    letter-spacing:-.5px;
    color:#111827;
}

.change-btn{
    height:34px;

    padding:0 14px;

    border:none;

    border-radius:10px;

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

    backdrop-filter:blur(10px);

    color:#374151;

    font-size:12px;
    font-weight:600;

    box-shadow:
        0 2px 8px rgba(0,0,0,.05);
}

.change-btn:hover{
    background:#f9fafb;
}

/* SUMMARY */

.summary{
    display:flex;
    gap:10px;
    margin-top:18px;
}

.card{
    flex:1;
    position:relative;
    overflow:hidden;

    min-height:70px;

    padding:10px 14px;

    border-radius:16px;

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

    display:flex;
    align-items:center;
    gap:10px;

    background:#fff;

    box-shadow:
        0 4px 20px rgba(17,24,39,.06),
        0 1px 2px rgba(17,24,39,.04);
}

.card::before{
    content:'';
    position:absolute;

    width:120px;
    height:120px;

    right:-40px;
    top:-30px;

    border-radius:50%;

    filter:blur(25px);

    opacity:.35;
}

.card::after{
    content:'';
    position:absolute;

    width:70px;
    height:70px;

    left:-20px;
    bottom:-20px;

    border-radius:50%;

    filter:blur(18px);

    opacity:.18;
}

/* INCOME */

.income{
    background:linear-gradient(
        135deg,
        #ffffff 0%,
        #faf8ff 100%
    );
}

.income::before{
    background:linear-gradient(
        135deg,
        #8c66f1,
        #b79cff
    );
}

.income::after{
    background:linear-gradient(
        135deg,
        #cdbdff,
        transparent
    );
}

/* EXPENSE */

.expense{
    background:linear-gradient(
        135deg,
        #ffffff 0%,
        #fff9fb 100%
    );
}

.expense::before{
    background:linear-gradient(
        135deg,
        #ff6b8a,
        #ffb0c1
    );
}

.expense::after{
    background:linear-gradient(
        135deg,
        #ffd2dc,
        transparent
    );
}

.card p{
    font-size:12px;
    font-weight:500;
    color:#9ca3af;
    margin:0 0 2px;
}

.card h3{
    font-size:17px;
    font-weight:700;
    color:#111827;
    margin:0;
    line-height:1.2;
}

/* =========================
   AREA TRANSAKSI
========================= */

.content-area{
    flex:1;

    background:#fff;

    margin-left:-15px;
    margin-right:-15px;
    margin-top:20px;

    border-radius:30px;

    padding:20px 25px 15px;

    box-shadow:0 -5px 20px rgba(0,0,0,.03);
}

/* =========================
   DRAG BAR
========================= */

.drag-bar {
    width: 50px;
    height: 5px;
    background: #cfcfcf;
    border-radius: 50px;
    margin: 0 auto 0;
}

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

.transaction-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
}

.transaction-header h3{
    font-size:18px;
    font-weight:600;
}

.transaction-header span{
    color:#999;
    font-size:13px;
}

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

.search-box {
    margin-top: 10px;
    height: 38px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    box-shadow:
        0 1px 3px rgba(0,0,0,.03);
}

.search-box input{
    flex:1;
    border:none;
    outline:none;
    background:none;
    font-size:14px;
    font-weight: 500;
}

.search-box i{
    color:#bdbbbb;
}

/* =========================
   LABEL
========================= */

.section-label{
    display:flex;
    align-items:center;

    width:100%;

    margin-top:14px;
    margin-bottom:6px;

    font-size:15px;
    font-weight:600;

    color:#3a3a4a;
}

.section-label span:first-child{
    flex:1;
}

.daily-total{
    text-align:right;

    min-width:120px;

    font-size:15px;
    font-weight:700;

    color:#111827;

    letter-spacing:-0.3px;
}

/* =========================
   TRANSACTION
========================= */

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

    padding:8px 0;

    border-bottom:1px solid #f3f3f3;
}

.detail-modal{
    position:fixed;
    inset:0;

    display:none;
    align-items:center;
    justify-content:center;

    z-index:9999;

    background:rgba(15,23,42,.18);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

.detail-modal.show{
    display:flex;
}

.detail-card{
    width:90%;
    max-width:360px;

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

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

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

    border-radius:28px;

    padding:22px;

    box-shadow:
        0 20px 60px rgba(0,0,0,.18);

    animation:popup .18s ease;
}

@keyframes popup{

    from{
        opacity:0;
        transform:scale(.92);
    }

    to{
        opacity:1;
        transform:scale(1);
    }

}

.detail-card h3{
    margin:0 0 18px;
    text-align:center;
    font-size:20px;
    font-weight:700;
}

.detail-list{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.detail-row{
    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:10px 0;

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

.detail-row span{
    color:#6b7280;
    font-size:13px;
}

.detail-row b{
    color:#111827;
    font-size:13px;
    text-align:right;
}

.detail-actions{
    display:flex;
    gap:10px;
    margin-top:20px;
}

.edit-btn,
.delete-btn{
    flex:1;

    padding:12px;

    border-radius:14px;

    text-decoration:none;

    text-align:center;

    font-weight:600;
}

.edit-btn{
    background:#8c66f1;
    color:#fff;
}

.delete-btn{
    background:#fee2e2;
    color:#dc2626;
}

.transaction:last-child{
    border-bottom:none;
}

.left{
    display:flex;
    align-items:center;
    gap:12px;
}

.icon-box{
    width:42px;
    height:42px;

    border-radius:12px;

    background:#efefff;
    color:#6466f1;

    display:flex;
    align-items:center;
    justify-content:center;
}

.icon-box i{
    font-size:24px;

}

.title{
    font-size:14px;
    font-weight:600;
    line-height:1.2;
}

.sub{
    margin-top:3px;
    font-size:13px;
    font-weight: 500;
    color:#777;
}

.right{
    text-align:right;
}

.amount{
    font-size:14px;
    font-weight:700;
}

.red{
    color:#ef4444;
}

.green{
    color:#16b364;
}

.time {
    margin-top: 3px;
    font-size: 12px;
    color: #777;
    font-weight: 500;
}

/* BOTTOM NAVIGATION */

.bottom-nav{
    position:fixed;
    bottom:20px;
    left:15px;
    right:15px;

    height:78px;

    background:#fff;

    border-radius:20px;

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

    box-shadow:
        0 10px 35px rgba(0,0,0,.08),
        0 2px 8px rgba(0,0,0,.05);

    z-index:999;
}

.nav-item{
    flex:1;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    text-decoration:none;

    color:#7b7b90;

    gap:4px;

    position:relative;

    transition:.3s;
}

.nav-item i{
    font-size:24px;
}

.nav-item span{
    font-size:11px;
    font-weight:600;
}

.nav-item.active{
    color:#635bff;
}

/* Jarak kiri kanan tombol tengah */

.nav-item:nth-child(2){
    margin-right:30px;
}

.nav-item:nth-child(4){
    margin-left:30px;
}

.fab{
    position:absolute;

    top:-18px;
    left:50%;

    transform:translateX(-50%);

    width: 62px;
    height: 62px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #7b74ff,
        #4f46e5
    );

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

    text-decoration:none;

    color:#fff;

    box-shadow:
        0 10px 25px rgba(99,91,255,.35),
        0 0 0 10px #fff;
}

.fab i{
    font-size:38px;
    font-weight:300;
}

.fab:hover{
    transform:
        translateX(-50%)
        scale(1.05);
}

body{
    background:#f5f6fb;
    padding-bottom:120px;
}

/* PAGE HEADER */

.page-header{
    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:20px;
}

.page-header h2{
    font-size:20px;
    font-weight:700;
    color:#1f2937;
}

.back-btn{
    color:#1f2937;
    font-size:24px;
    text-decoration:none;
}

/* TYPE SWITCH */

.type-switch{
    display:flex;

    padding:6px;

    background:#fff;

    border:1px solid #ececec;

    border-radius:12px;

    margin-bottom:20px;
}

.type-switch input{
    display:none;
}

.type-switch label{
    flex:1;

    text-align:center;

    padding:10px 0;

    border-radius:8px;

    cursor:pointer;

    font-size:14px;
    font-weight:600;

    color:#6b7280;

    transition:.2s;
}

.type-switch input:checked + label{
    background:#6466f1;
    color:#fff;
}

/* FORM */

.form-group{
    margin-bottom:14px;
}

.form-group label{
    display:block;

    margin-bottom:6px;

    font-size:13px;
    font-weight:500;

    color:#6b7280;
}

.form-group input,
.form-group select,
.form-group textarea{

    width:100%;

    height:44px;

    border:1px solid #e5e7eb;

    border-radius:10px;

    padding:0 14px;

    font-size:14px;

    background:#fff;

    outline:none;

    transition:.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{

    border-color:#6466f1;

    box-shadow:
    0 0 0 3px rgba(100,102,241,.12);

    outline:none;
}

.form-group textarea{
    height:70px;
    padding-top:10px;
    resize:none;
}

.form-group input[type="datetime-local"]{
    width:100%;
    max-width:100%;

    box-sizing:border-box;

    padding:14px 16px;

    border:1px solid #e5e7eb;
    border-radius:14px;

    font-size:16px;

    background:#fff;

    -webkit-appearance:none;
    appearance:none;
}

/* ICON */

.input-icon{
    position:relative;
}

.input-icon input{
    padding-right:42px;
}

.input-icon i{
    position:absolute;

    right:14px;
    top:50%;

    transform:translateY(-50%);

    font-size:18px;

    color:#9ca3af;
}

/* BUTTON */

.save-btn{

    position:fixed;

    left:25px;
    right:25px;

    bottom:25px;

    width:auto;

    height:42px;

    border:none;

    border-radius:10px;

    background:#6466f1;

    color:#fff;

    font-size:15px;
    font-weight:600;

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

    z-index:9999;

    box-sizing:border-box;

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

    -webkit-appearance:none;
    appearance:none;

}

.save-btn:active{
    transform:none;
}

.save-btn:hover{
    transform:none;
}

.save-btn:hover{
    transform:translateY(-1px);
}

.custom-select{
    position:relative;
}

.custom-select select{

    width:100%;

    height:44px;

    border:1px solid #e5e7eb;

    border-radius:10px;

    padding:0 42px 0 14px;

    background:#fff;

    font-size:14px;

    font-weight:500;

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

    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;

    cursor:pointer;
}

.custom-select i{

    position:absolute;

    right:14px;
    top:50%;

    transform:translateY(-50%);

    font-size:18px;

    color:#9ca3af;

    pointer-events:none;
}

.custom-select select:focus{

    outline:none;

    border-color:#6466f1;

    box-shadow:
    0 0 0 3px rgba(100,102,241,.12);
}

.custom-dropdown{
    position:relative;
}

.dropdown-selected{

    height:46px;

    border:1px solid #e5e7eb;

    border-radius:10px;

    padding:0 14px;

    background:#fff;

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

    cursor:pointer;
}

.dropdown-selected i{
    color:#9ca3af;
}

.dropdown-list{

    position:absolute;

    top:52px;
    left:0;
    right:0;

    background:#fff;

    border:1px solid #e5e7eb;

    border-radius:12px;

    overflow:hidden;

    max-height:280px;

    overflow-y:auto;

    display:none;

    z-index:999;
}

.dropdown-item{

    height:46px;

    padding:0 14px;

    display:flex;
    align-items:center;

    gap:10px;

    cursor:pointer;

    transition:.2s;
}

.dropdown-item:hover{
    background:#f5f6ff;
}

.dropdown-item i{
    color:#6466f1;
    font-size:18px;
}

/* DARK MODE */

body.dark .type-switch,
body.dark .form-group input,
body.dark .form-group select,
body.dark .form-group textarea{
    background:#273244;
    border-color:#374151;
    color:#fff;
}

body.dark .back-btn,
body.dark .page-header h2{
    color:#fff;
}

body.dark .type-switch{
    border-color:#374151;
}


/* Tombol Dark Mode */

.theme-toggle{
    width:36px;
    height:36px;

    border-radius:50%;

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

    cursor:pointer;

    background:#fff;

    box-shadow:
    0 2px 8px rgba(0,0,0,.05);
}

.theme-toggle i{
    font-size:20px;
    color:#2f2f43;
}

/* DARK MODE */

body.dark{
    background:#111827;
    color:#f3f4f6;
}

body.dark .content-area{
    background:#1f2937;
}

body.dark .card{
    background:linear-gradient(135deg, #1d1e3e 0%, #6466f1 100%);

    border-color:#374151;
}

body.dark .transaction{
    border-bottom:1px solid #374151;
}

body.dark .title,
body.dark .wallet-balance,
body.dark .transaction-header h3{
    color:#fff;
}

body.dark .sub,
body.dark .time,
body.dark .section-label{
    color:#cbd5e1;
}

body.dark .detail-modal{
    background:rgba(0,0,0,.45);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

body.dark .detail-card {
    background: rgba(17, 24, 39, .82);
    border: 1px solid rgb(255 255 255 / 20%);
    color: #f9fafb;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}

body.dark .detail-card h3{
    color:#f9fafb;
}

body.dark .detail-row{
    border-bottom:
    1px solid
    rgba(255,255,255,.06);
}

body.dark .detail-row span{
    color:#94a3b8;
}

body.dark .detail-row b{
    color:#f8fafc;
}

body.dark .popup-icon{

    background:linear-gradient(
        135deg,
        #8c66f1,
        #6d4ce6
    );

    box-shadow:
        0 10px 25px
        rgba(140,102,241,.35);
}

body.dark .edit-btn{
    background:#8c66f1;
    color:#fff;
}

body.dark .delete-btn{

    background:
    rgba(239,68,68,.15);

    color:#f87171;

    border:
    1px solid
    rgba(239,68,68,.2);
}

body.dark .search-box{
    background:#273244;
    border-color:#374151;
}

body.dark .search-box input{
    color:#fff;
}

body.dark .bottom-nav,
.bottom-nav{
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
}

body.dark .theme-toggle{
    background:#273244;
}

body.dark .theme-toggle i{
    color:#fbbf24;
}

body.dark .profile-dropdown{

    background:#1f2937;

    border-color:#374151;
}

body.dark .profile-info{

    border-bottom:
    1px solid #374151;
}

body.dark .profile-info strong{
    color:#fff;
}

body.dark .profile-dropdown a{
    color:#e5e7eb;
}

body.dark .profile-dropdown a:hover{
    background:#374151;
}

body.dark .icon-box {
    background: linear-gradient(135deg, #1d1e3e 0%, #6466f1 100%);
    color: #656ae1;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .05), 0 2px 8px rgba(0, 0, 0, .25);
}

body.dark .icon-box i{
    color:#c7d2fe;
}

body.dark .card p{
    font-size:13px;
    color:#94a3b8;
    margin:0 0 2px 0;
}

body.dark .card h3{
    font-size:16px;
    font-weight:700;
    color:#ffffff;
    line-height:1.2;
}

body.dark .wallet-title{
    color:#94a3b8;
}

body.dark .change-btn{
    background:rgba(39,50,68,.9);

    color:#fff;

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

body.dark .page-header h2,
body.dark .back-btn{
    color:#fff;
}

body.dark .type-switch{
    background:#1f2937;
    border-color:#374151;
}

body.dark .type-switch label{
    color:#dadbde;
}

body.dark .form-group label{
    color:#9ca3af;
}

body.dark .form-group input:focus,
body.dark .form-group select:focus,
body.dark .form-group textarea:focus{

    border-color:#818cf8;

    box-shadow:
        0 0 0 1px #818cf8,
        0 0 0 4px rgba(129,140,248,.15);
}

body.dark .input-icon i{
    color:#94a3b8;
}

body.dark .bottom-nav{
    background:#1f2937;

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

    box-shadow:
        0 -2px 20px rgba(0,0,0,.25);
}

body.dark .bottom-nav a{
    color:#64748b;

    transition:.2s ease;
}

body.dark .bottom-nav a.active{
    color:#a5b4fc;
}

body.dark .bottom-nav a:hover{
    color:#c7d2fe;
}

body.dark .notif{
    position:relative;

    width:38px;
    height:38px;

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

    border-radius:50%;

    background:#273244;

    color:#f8fafc;

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

body.dark .notif i{
    color:#a5b4fc;
    font-size:22px;
}

body.dark .notif .badge{
    background:#ef4444;
    box-shadow:0 0 0 2px #111827;
}

body.dark .custom-select select{

    background:#273244;

    border-color:#374151;

    color:#fff;
}

body.dark .custom-select i{
    color:#94a3b8;
}

body.dark .custom-select select:focus{

    border-color:#818cf8;

    box-shadow:
    0 0 0 4px rgba(129,140,248,.15);
}

body.dark .dropdown-selected{
    background:#273244;
    border-color:#374151;
    color:#fff;
}

body.dark .dropdown-list{
    background:#273244;
    border-color:#374151;
}

body.dark .dropdown-item{
    color:#fff;
}

body.dark .dropdown-item:hover{
    background:#374151;
}

body.dark .fab{
    background:linear-gradient(
        135deg,
        #8b7cff,
        #5b4dff
    );

    color:#fff;

    box-shadow:
        0 8px 24px rgba(91,77,255,.45),
        0 0 0 8px #1a1b26;
}

body.dark .fab i{
    color:#ffffff !important;
}







/* =========================
   STATISTICS PAGE
========================= */

.stat-switch{
    display:flex;
    gap:6px;

    padding:5px;

    margin:18px 0 22px;

    border-radius:16px;

    background:#f5f6fa;
}

.stat-switch button{

    flex:1;

    height:46px;

    border:none;

    border-radius:12px;

    background:transparent;

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

    font-size:14px;

    font-weight:600;

    color:#6b7280;

    cursor:pointer;

    transition:.2s ease;
}

.stat-switch button.active{

    background:#6466f1;

    color:#fff;

    box-shadow:
    0 4px 12px rgba(100,102,241,.25);
}

.stat-card{

    background:#fff;

    border:1px solid rgba(17,24,39,.05);

    border-radius:18px;

    padding:18px;

    margin-bottom:18px;

    box-shadow:
    0 2px 8px rgba(0,0,0,.04);
}

.stat-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:18px;
}

.stat-header h3{

    font-size:18px;

    font-weight:600;

    color:#111827;

    letter-spacing:-.2px;
}

.stat-header select{

    height:34px;

    border:1px solid #e5e7eb;

    border-radius:10px;

    padding:0 12px;

    background:#fff;

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

    font-size:12px;

    font-weight:500;

    color:#374151;
}

/* DARK MODE */

body.dark .stat-switch{

    background:#273244;
}

body.dark .stat-card{

    background:#1f2937;

    border-color:#374151;

    box-shadow:none;
}

body.dark .stat-header h3{

    color:#fff;
}

body.dark .stat-header select{

    background:#273244;

    border-color:#374151;

    color:#fff;
}

body.dark .stat-switch button{

    color:#cbd5e1;
}

body.dark .stat-switch button.active{

    color:#fff;
}

/* MOBILE */

@media(max-width:420px){

    .stat-card{

        padding:15px;

        border-radius:16px;
    }

    .stat-header h3{

        font-size:17px;
    }

    .stat-header select{

        font-size:11px;
    }
}






.period-dropdown{
    position:relative;
}

.period-btn{

    height:36px;

    padding:0 12px;

    display:flex;
    align-items:center;
    gap:5px;

    background:#ffffff;

    border-radius:12px;

    font-size:12px;
    font-weight:600;

    cursor:pointer;
}

.period-list{

    position:absolute;

    top:42px;
    right:0;

    width:120px;

    background:#fff;

    border-radius:12px;

    overflow:hidden;

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

    display:none;

    z-index:100;
}

.period-item{

    padding:12px;

    font-size:13px;

    cursor:pointer;
}

.period-item:hover{

    background:#f5f6ff;
}

.week-total{
    margin-top:-8px;
    margin-bottom:10px;

    font-size:12px;
    font-weight:700;

    color:#111827;
}

#weeklyChart{
    width:100% !important;
    height:190px !important;
}

.category-chart{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.category-item{
    display:grid;
    grid-template-columns:
    110px
    1fr
    60px;

    align-items:center;

    gap:12px;
}

.category-name{
    display:flex;
    align-items:center;
    gap:8px;
}

.category-name i{
    font-size:13px;
    color:#6466f1;
}

.category-bar{
    height:12px;

    background:#ececf4;

    border-radius:999px;

    overflow:hidden;
}

.category-fill{
    height:100%;

    border-radius:999px;

    background:
    linear-gradient(
    90deg,
    #8b5cf6,
    #6466f1
    );
}

.category-value{
    text-align:right;

    font-size:13px;

    font-weight:700;

    color:#111827;
}


body.dark .period-btn{
    background: #273244;
}

body.dark .category-value{
    color: #f3f4f6;
}

body.dark .period-list{

    background:#1f2937;

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

    box-shadow:
    0 10px 30px
    rgba(0,0,0,.35);
}














.wallet-hero{

    position:relative;

    overflow:hidden;

    margin-top:15px;

    padding:24px;

    border-radius:28px;

    background:
    linear-gradient(
        135deg,
        #8c66f1,
        #6d4ce6
    );

    color:#fff;

    box-shadow:
    0 15px 35px
    rgba(140,102,241,.3);
}

.wallet-hero::before{

    content:'';

    position:absolute;

    width:180px;
    height:180px;

    border-radius:50%;

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

    right:-60px;
    top:-60px;
}

.wallet-label{

    font-size:13px;

    opacity:.8;
}

.wallet-total{

    margin-top:8px;

    font-size:32px;

    font-weight:700;
}

.wallet-sub{

    margin-top:5px;

    font-size:12px;

    opacity:.8;
}

.wallet-grid{

    display:grid;

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

    gap:12px;

    margin-top:18px;
}

.wallet-card{

    position:relative;
    overflow:hidden;

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

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

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

    border-radius:22px;

    padding:18px;

    box-shadow:
    0 8px 24px
    rgba(0,0,0,.15);

    transition:.2s;
}

.wallet-card:active{
    transform:scale(.98);
}

.wallet-card::before{

    content:'';

    position:absolute;

    width:80px;
    height:80px;

    border-radius:50%;

    background:
    rgba(140,102,241,.18);

    right:-20px;
    top:-20px;
}

.wallet-user{

    font-size:13px;

    color:#6b7280;
}

.wallet-balance-small{

    margin-top:8px;

    font-size:18px;

    font-weight:700;

    color:#111827;
}

body.dark .wallet-card{

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

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

body.dark .wallet-user{
    color:
    rgba(255,255,255,.65);
}

body.dark .wallet-balance-small{
    color:#fff;
}