body{
    background:#f5f7fb;
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

.card-custom{
    border:none;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.hero{
    background:#fff;
    border-radius:20px;
    padding:50px;
}

.connect-btn{
    background:linear-gradient(90deg,#5b67f1,#7a42f4);
    color:#fff;
    border:none;
    border-radius:50px;
    padding:14px 35px;
    font-size:18px;
    font-weight:600;
    transition:.3s;
}

.connect-btn:hover{
    opacity:.95;
    transform:translateY(-2px);
}

.connect-btn:disabled{
    opacity:.7;
    cursor:not-allowed;
}

.resource{
    border:none;
    border-radius:20px;
    transition:.3s;
}

.resource:hover{
    transform:translateY(-5px);
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.status{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 18px;
    border-radius:50px;
    font-weight:600;
    font-size:15px;
}

.status-off{
    background:#ffe7a8;
    color:#8a5a00;
}

.status-on{
    background:#d4f7d8;
    color:#0a7c27;
}

.icon-box{
    width:90px;
    height:90px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:auto;
    border-radius:50%;
    background:#eef2ff;
    font-size:45px;
    color:#6b4cf7;
}

.alert{
    border-radius:15px;
}

.btn{
    border-radius:12px;
}

h1,
h2,
h3{
    font-weight:700;
}

ol li{
    margin-bottom:12px;
}

@media (max-width:768px){

    .hero{
        padding:30px;
    }

    .d-flex.justify-content-between{
        flex-direction:column;
        align-items:flex-start!important;
        gap:20px;
    }

    .connect-btn{
        width:100%;
    }

    .icon-box{
        width:75px;
        height:75px;
        font-size:36px;
    }

}