@font-face{
    font-family:Inter;
    src:url("../assets/fonts/Inter-Regular.ttf");
}

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

body{

    font-family:Inter,sans-serif;

    color:#fff;

    background:
        radial-gradient(circle at top,#10263a 0%,#07131d 35%),
        #07131d;

    min-height:100vh;

}

img{
    display:block;
}

.app{

    min-height:100vh;

}
/* Header */
.header{

    height:74px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 22px;

    border-bottom:1px solid #162739;

    background:#07131d;

}
/* Logo */
.logo{

    display:flex;

    align-items:center;

    gap:14px;

}

.logo img{

    width:34px;

}

.logo span{

    font-size:28px;

    font-weight:700;

}
/* Profile */
.profile{

    display:flex;

    align-items:center;

    gap:14px;

}

.profile-info{

    display:flex;

    flex-direction:column;

    align-items:flex-end;

}

.profile-name{

    font-size:17px;

    font-weight:600;

}

.profile-info small{

    color:#8a99aa;

    font-size:12px;

}

.avatar{

    width:48px;

    height:48px;

    border-radius:50%;

    object-fit:cover;

    border:2px solid #1e3345;

}
/* Main */
.main{

    display:flex;

    justify-content:center;

    padding:28px 16px 40px;

}
/* Card */
.history-card{

    width:100%;

    max-width:900px;

    background:#0d1824;

    border:1px solid #22384a;

    border-radius:18px;

    overflow:hidden;

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

}
.history-card h2{

    font-size:22px;

    padding:18px;

    border-bottom:1px solid #203241;

}
/* Table */
.table-head{

    display:grid;

    grid-template-columns:2fr 1.3fr .8fr 1fr 42px;

    padding:18px 24px;

    color:#8b9cad;

    font-size:14px;

    border-bottom:1px solid #203241;

}
/*================ TRANSACTIONS ================*/

.transaction{

    display:grid;

    grid-template-columns:2fr 1.3fr .8fr 1fr 42px;

    align-items:center;

    padding:20px 24px;

}

.transaction:hover{

    background:#132230;

}
.type{

    display:flex;

    align-items:center;

    font-weight:600;

    gap:10px;

    font-size:13px;

}
.circle{

    width:34px;

    height:34px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    flex-shrink:0;

}

.circle.up{

    background:#00B56C;

}

.circle.down{

    background:#DA4343;

}

.circle i{

 font-size:14px;

}
.amount{

    font-weight:600;

}
.currency{

    color:#d3dbe4;

}
.success{

    color:#00d66d;

    font-weight:600;

}

.warning{

    color:#e3d043;

    font-weight:600;

}

.danger{

    color:#ff4f4f;

    font-weight:600;

}
.open{

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    color:#1fa7ff;

    transition:
        color .2s,
        transform .2s;

    -webkit-tap-highlight-color: transparent;    

}

.open:hover{

    color:#63c6ff;

    transform:scale(1.15);

}

.open i{

 font-size:15px;

}
/*================ RECEIPT MODAL ================*/

.receipt-modal{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:20px;

    background:rgba(4,11,18,.82);

    backdrop-filter:blur(0px);

    opacity:0;

    visibility:hidden;

    transition:
        opacity .28s ease,
        backdrop-filter .28s ease,
        visibility .28s;

    z-index:999;

}

.receipt-modal.active{

    opacity:1;

    visibility:visible;

    backdrop-filter:blur(8px);

}
.receipt-box{

    position:relative;

    width:100%;

    width:min(94vw,760px);

    max-height:94vh;

    transform:translateY(20px) scale(.92);

    opacity:0;

    transition:
        transform .28s ease,
        opacity .28s ease;

}
.receipt-modal.active .receipt-box{

    transform:translateY(0) scale(1);

    opacity:1;

}
.close-modal{

    position:absolute;

    top:12px;
    right:12px;

    width:36px;
    height:36px;

    border:none;

    border-radius:50%;

    background:#14283a;

    color:#fff;

    cursor:pointer;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:
        transform .2s ease,
        background .2s ease;

    z-index:2;

}

.close-modal:hover{

    background:#21415b;

    transform:rotate(90deg);

}

.transaction{

    animation:showRow .35s ease both;

}
.transaction:nth-child(1){

    animation-delay:.05s;

}

.transaction:nth-child(2){

    animation-delay:.1s;

}

.transaction:nth-child(3){

    animation-delay:.15s;

}

.transaction:nth-child(4){

    animation-delay:.2s;

}
@keyframes showRow{

    from{

        opacity:0;

        transform:translateY(12px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}
.history-card{

    user-select:none;

    -webkit-user-select:none;

}
.open:active{

    transform:scale(.9);

}

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

@media (max-width:768px){

    .header{

        height:64px;

        padding:0 14px;

    }

    .logo{

        gap:10px;

    }

    .logo img{

        width:28px;

    }

    .logo span{

      font-size:18px;

    }
.table-head{

    font-size:11px;

    padding:14px;

    grid-template-columns:1.8fr 1.15fr .7fr .9fr 30px;

}
.transaction{

    grid-template-columns:1.8fr 1.15fr .7fr .9fr 30px;

    padding:16px 14px;

    font-size:13px;

}
    .profile{

        gap:10px;

    }

    .profile-name{

    font-size:13px;

    }

    .profile-info small{

    font-size:10px;

    }

    .avatar{

        width:42px;

        height:42px;

    }

    .main{

        padding:18px 12px 28px;

    }

}
@media (max-width:768px){

    .history-card{

        border-radius:16px;

    }

    .history-card h2{

        padding:18px;

        font-size:24px;

    }

}

.table{

    min-width:700px;

}
.avatar{

    transition:
        transform .25s,
        border-color .25s;

}
.avatar:hover{

    transform:scale(1.05);

    border-color:#2B7BFF;

}
.avatar:active{

    transform:scale(.96);

}
#receiptContent{

    background:#fff;

    color:#222;

    border-radius:14px;

    overflow:auto;

    max-height:90vh;

}

.receipt{

    padding:28px;

    font-family:Arial,sans-serif;

    line-height:1.45;

}

.receipt h1{

    color:#006b66;

    font-size:52px;

    margin-bottom:40px;

    font-weight:700;

}

.receipt-city{

    text-align:right;

    margin-bottom:70px;

    font-size:15px;

}

.receipt-text{

    font-size:14px;

    margin-bottom:24px;

}

.receipt-title{

    background:#d8d8d8;

    padding:7px 10px;

    font-weight:bold;

    margin:26px 0 14px;

}

.receipt table{

    width:100%;

    border-collapse:collapse;

    margin-bottom:20px;

}

.receipt td{

    padding:8px 4px;

    font-size:14px;

}

.receipt td:first-child{

    width:150px;

    font-weight:bold;

}
.wise-receipt{

    background:#fff;
    color:#111;
    font-family:Arial, Helvetica, sans-serif;

    padding:36px;

    max-height:90vh;
    overflow:auto;

}

.wise-logo{

    width:130px;
    margin-bottom:46px;

}

.wise-title{

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

    margin-bottom:8px;

}

.wise-line{

    height:1px;
    background:#d8d8d8;

    margin-bottom:26px;

}

.wise-section{

    margin-bottom:58px;

}

.wise-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    column-gap:95px;

    row-gap:34px;

}

.wise-item{

    font-size:18px;

    line-height:1.45;

}

.wise-item strong{

    display:block;

    font-size:19px;

    margin-bottom:4px;

}

@media(max-width:650px){

.wise-receipt{

    padding:26px;

}

.wise-logo{

    width:110px;

}

.wise-grid{

    grid-template-columns:1fr;

    gap:24px;

}

.wise-item{

    font-size:16px;

}

.wise-item strong{

    font-size:17px;

}

}

.wise-logo span{

    margin-right:4px;

}

.wise-receipt h2{

    font-size:20px;

    margin:28px 0 10px;

}

.wise-receipt hr{

    border:none;

    border-top:1px solid #ddd;

    margin-bottom:24px;

}

.wise-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:34px 70px;

    margin-bottom:45px;

    font-size:15px;

    line-height:1.6;

}

.wise-grid strong{

    display:block;

    margin-bottom:5px;

}

@media(max-width:600px){

    .wise-receipt{

        padding:24px;

    }

    .wise-logo{

        font-size:40px;

    }

    .wise-grid{

        grid-template-columns:1fr;

        gap:22px;

    }

}

.failure-page{

    background:#0b1620;

    color:#fff;

    padding:45px 28px;

    text-align:center;

    position:relative;

    overflow:hidden;

}

.failure-page::before{

    content:"";

    position:absolute;

    right:-120px;
    top:-80px;

    width:420px;
    height:420px;

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

    transform:rotate(40deg);

    clip-path:polygon(40% 0,60% 0,100% 100%,80% 100%);

}

.failure-circle{

    width:120px;
    height:120px;

    margin:0 auto 28px;

    border-radius:50%;

    background:#4a1115;

    border:2px solid #d62d2d;

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

    position:relative;

    z-index:2;

}

.failure-circle i{

    font-size:56px;

    color:#d40000;

}

.failure-page h2{

    font-size:44px;

    margin-bottom:14px;

    position:relative;
    z-index:2;

}

.failure-subtitle{

    color:#93a2b0;

    font-size:17px;

    line-height:1.6;

    margin-bottom:34px;

    position:relative;
    z-index:2;

}

.failure-box{

    background:#101b24;

    border:1px solid #253543;

    border-radius:16px;

    padding:24px;

    text-align:left;

    position:relative;
    z-index:2;

}

.failure-title{

    font-size:22px;

    font-weight:700;

    margin-bottom:18px;

}

.failure-title i{

    color:#7E0B0D;

    margin-left:6px;

}

.failure-box p{

    color:#9aa8b7;

    font-size:17px;

    line-height:1.7;

}
.receipt-box{

    width:min(95vw,760px);

}