:root{
    --navy:#151d49;
    --purple:#5b4bdf;
    --lilac:#f1efff;
    --ink:#171a2b;
    --muted:#7d8093;
    --bg:#f7f7fb;
    --line:#e8e8f0;
    --white:#fff;
    --green:#18a77e;
    --red:#ed5965;
    --orange:#ffab4d;
    --shadow:0 12px 28px #1b1b4220
}
*{
    box-sizing:border-box
}
body{
    margin:0;
    background:var(--bg);
    font:14px Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
    color:var(--ink)
}
a{
    color:var(--purple);
    text-decoration:none;
    font-weight:700
}
.auth-page{
    min-height:100vh;
    background:#fff
}
.auth{
    width:min(100%,460px);
    margin:auto;
    min-height:100vh;
    padding:35px 28px 28px
}
.auth-brand,.brand{
    display:flex;
    align-items:center;
    gap:9px;
    font-size:20px;
    color:var(--navy);
    letter-spacing:-.7px
}
.brand-mark{
    background:var(--purple);
    color:#fff;
    width:31px;
    height:31px;
    border-radius:11px;
    display:grid;
    place-items:center;
    font:800 18px Georgia
}
.auth-art{
    height:210px;
    margin:26px 0 18px;
    position:relative;
    background:linear-gradient(145deg,#eeeafd,#faf9ff);
    border-radius:25px;
    overflow:hidden
}
.phone{
    background:var(--navy);
    color:white;
    border:6px solid #fff;
    width:152px;
    height:205px;
    border-radius:25px;
    position:absolute;
    left:50%;
    top:25px;
    transform:translateX(-50%);
    padding:47px 19px;
    box-shadow:var(--shadow)
}
.phone span{
    position:absolute;
    top:13px;
    left:50%;
    transform:translateX(-50%);
    height:5px;
    width:42px;
    border-radius:8px;
    background:#737ab0
}
.phone b{
    font-size:22px;
    display:block
}
.phone small{
    font-size:9px;
    color:#bfc5e9
}
.phone i{
    height:8px;
    display:block;
    background:#8a7df2;
    border-radius:5px;
    margin-top:13px
}
.coin{
    position:absolute;
    width:42px;
    height:42px;
    z-index:1;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-weight:800;
    box-shadow:0 5px 12px #302c6730
}
.c1{
    left:19%;
    top:42px;
    background:#ffcb56;
    color:#7b5312
}
.c2{
    right:16%;
    bottom:29px;
    background:#fff;
    color:var(--purple)
}
h1{
    font-size:27px;
    letter-spacing:-1.2px;
    margin:0 0 7px
}
h1+p{
    color:var(--muted);
    margin:0 0 25px
}
label{
    font-size:12px;
    font-weight:800;
    display:grid;
    gap:7px;
    margin:16px 0
}
input,select{
    width:100%;
    height:48px;
    border:1px solid #dedee8;
    border-radius:12px;
    background:white;
    padding:0 13px;
    color:var(--ink);
    outline:0;
    font:inherit
}
input:focus,select:focus{
    border-color:var(--purple);
    box-shadow:0 0 0 3px #5b4bdf19
}
.remember{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:12px;
    margin:17px 0 22px
}
.remember span{
    display:flex;
    align-items:center;
    gap:5px
}
.remember input{
    width:15px;
    height:15px;
    accent-color:var(--purple)
}
.button{
    border:0;
    background:var(--purple);
    color:#fff;
    border-radius:13px;
    min-height:50px;
    padding:0 17px;
    font-weight:800;
    font-size:14px;
    box-shadow:0 8px 16px #5b4bdf30;
    cursor:pointer
}
.full{
    width:100%
}
.or{
    text-align:center;
    border-bottom:1px solid var(--line);
    line-height:0;
    margin:28px 0
}
.or span{
    background:#fff;
    color:var(--muted);
    font-size:11px;
    padding:0 12px
}
.social{
    height:48px;
    width:100%;
    border:1px solid var(--line);
    border-radius:12px;
    background:#fff;
    font-weight:700;
    cursor:pointer
}
.bottom-text{
    text-align:center;
    font-size:12px;
    color:var(--muted);
    margin-top:24px
}
.app-shell{
    max-width:480px;
    margin:auto;
    background:var(--bg);
    min-height:100vh;
    padding:25px 19px 91px
}
.app-shell:has(.top-card){
    background:linear-gradient(155deg,#171c49 0,#29226a 325px,#f7f7fb 326px)
}
.topline{
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:white;
    margin-bottom:23px
}
.avatar{
    width:37px;
    height:37px;
    border-radius:13px;
    background:#fbbe70;
    color:#5c3813;
    display:grid;
    place-items:center;
    font-weight:800
}
.hello small{
    color:#bec1de
}
.hello b{
    display:block;
    font-size:15px
}
.bell{
    font-size:20px
}
.top-card{
    /* background:linear-gradient(135deg,#7468e9,#473cbf); */
    border-radius:22px;
    padding:22px;
    color:#fff;
    position:relative;
    overflow:hidden;
    /* box-shadow:0 12px 25px #2e277941 */
}
.top-card:after{
    content:'';
    position:absolute;
    width:180px;
    height:180px;
    border-radius:50%;
    right:-65px;
    top:-92px;
    border:30px solid #ffffff16
}
.top-card small{
    color:#e1dfff
}
.balance{
    font-size:30px;
    letter-spacing:-1px;
    margin:7px 0 23px;
    font-weight:800
}
.card-foot{
    display:flex;
    justify-content:space-between;
    font-size:12px
}
.quick-actions{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:9px;
    margin:19px 0 26px
}
.quick-actions a{
    text-align:center;
    color:var(--white);
    font-size:11px;
    font-weight:700
}
.quick-actions i{
    width:48px;
    height:48px;
    margin:auto auto 7px;
    border-radius:16px;
    background:#fff;
    display:grid;
    place-items:center;
    font-style:normal;
    color:var(--purple);
    font-size:20px;
    box-shadow:0 4px 13px #25254a0d
}
.section-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin:16px 0 13px
}
.section-title h2{
    font-size:17px;
    margin:0;
    letter-spacing:-.5px
}
.section-title a{
    font-size:12px
}
.activity,.list-card,.filter-box,.report-table{
    background:#fff;
    border-radius:18px;
    box-shadow:0 4px 18px #23233c08
}
.transaction{
    display:flex;
    align-items:center;
    gap:11px;
    padding:14px 13px;
    border-bottom:1px solid #f0f0f5
}
.transaction:last-child{
    border:0
}
.trans-icon{
    width:38px;
    height:38px;
    border-radius:13px;
    background:#f0efff;
    color:var(--purple);
    display:grid;
    place-items:center;
    font-size:17px
}
.trans-info{
    flex:1
}
.trans-info b{
    display:block;
    font-size:13px
}
.trans-info small{
    color:var(--muted);
    font-size:11px
}
.trans-value{
    text-align:right;
    font-weight:800;
    font-size:13px
}
.trans-value small{
    display:block;
    color:var(--muted);
    font-weight:500
}
.positive{
    color:var(--green)
}
.negative{
    color:var(--red)
}
.bottom-nav{
    position:fixed;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    width:min(100%,480px);
    height:72px;
    background:#fff;
    border-top:1px solid var(--line);
    display:flex;
    justify-content:space-around;
    z-index:3
}
.bottom-nav a{
    color:#9799aa;
    text-align:center;
    font-size:10px;
    padding-top:12px;
    font-weight:600;
    min-width:65px
}
.bottom-nav i{
    display:block;
    font-style:normal;
    font-size:20px;
    margin-bottom:3px
}
.bottom-nav a.active{
    color:var(--purple)
}
.page-head{
    display:flex;
    align-items:center;
    gap:13px;
    margin:3px 0 24px
}
.page-head h1{
    font-size:21px;
    flex:1;
    margin:0
}
.back{
    width:35px;
    height:35px;
    border-radius:12px;
    border:0;
    background:#fff;
    color:var(--ink);
    font-size:19px;
    cursor:pointer
}
.head-action{
    width:35px;
    height:35px;
    border-radius:12px;
    border:0;
    background:#eceaff;
    color:var(--purple);
    font-size:17px
}
.reports-hero{
    background:linear-gradient(140deg,#1c1d53,#382b81);
    color:#fff;
    border-radius:21px;
    padding:20px;
    margin-bottom:22px
}
.reports-hero h2{
    font-size:20px;
    margin:0 0 6px
}
.reports-hero p{
    color:#d0cce9;
    font-size:12px;
    line-height:1.55;
    margin:0
}
.report-menu{
    display:grid;
    gap:12px
}
.report-link{
    background:#fff;
    border-radius:17px;
    padding:16px;
    display:flex;
    align-items:center;
    gap:13px;
    box-shadow:0 3px 12px #25254a08;
    color:var(--ink)
}
.report-link i{
    width:43px;
    height:43px;
    border-radius:14px;
    background:#f0efff;
    color:var(--purple);
    display:grid;
    place-items:center;
    font-size:19px;
    font-style:normal
}
.report-link b{
    display:block;
    font-size:14px
}
.report-link small{
    color:var(--muted);
    display:block;
    margin-top:3px;
    font-size:11px
}
.report-link span{
    margin-left:auto;
    color:var(--muted);
    font-size:20px
}
.filter-box{
    padding:18px;
    margin-bottom:18px
}
.filter-box h3{
    margin:0 0 16px;
    font-size:15px
}
.filter-box label{
    margin:13px 0
}
.date-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px
}
.filter-box .button{
    margin-top:7px
}
.filter-note{
    font-size:11px;
    color:var(--muted);
    text-align:center;
    margin:12px 0
}
.report-summary{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:11px;
    margin-bottom:16px
}
.mini-stat{
    background:#fff;
    border-radius:15px;
    padding:14px
}
.mini-stat small{
    color:var(--muted);
    font-weight:700;
    font-size:10px
}
.mini-stat b{
    display:block;
    font-size:17px;
    margin-top:6px
}
.report-table{
    overflow:hidden
}
.report-table header{
    padding:16px;
    border-bottom:1px solid var(--line);
    display:flex;
    justify-content:space-between;
    align-items:center
}
.report-table header b{
    font-size:14px
}
.report-table header small{
    color:var(--muted);
    font-size:11px
}
.table-row{
    display:grid;
    grid-template-columns:1fr auto;
    gap:5px;
    padding:14px 16px;
    border-bottom:1px solid #f0f0f5
}
.table-row:last-child{
    border:0
}
.table-row b{
    font-size:12px
}
.table-row small{
    color:var(--muted);
    font-size:10px;
    grid-row:2
}
.table-row strong{
    grid-column:2;
    grid-row:1/3;
    align-self:center;
    font-size:13px
}
.stock-row{
    display:grid;
    grid-template-columns:42px 1fr auto;
    align-items:center;
    gap:9px;
    padding:13px 15px;
    border-bottom:1px solid #f0f0f5
}
.stock-row i{
    height:38px;
    border-radius:11px;
    background:#fff1e2;
    display:grid;
    place-items:center;
    font-style:normal
}
.stock-row b{
    font-size:12px
}
.stock-row small{
    display:block;
    color:var(--muted);
    font-size:10px;
    margin-top:2px
}
.stock-row strong{
    font-size:12px;
    text-align:right
}
.tag{
    font-size:9px;
    border-radius:8px;
    padding:3px 6px;
    background:#fff0f1;
    color:var(--red)
}
@media(min-width:700px){
    body{
        background:#e9e8f2
    }
    .app-shell{
        box-shadow:0 0 45px #201c4c2b
    }
    .auth-page{
        background:#e9e8f2
    }
    .auth{
        background:#fff;
        box-shadow:0 0 45px #201c4c2b
    }
}