body{
        min-height:100vh;
        background:
            linear-gradient(rgba(24,24,24,0.72), rgba(24,24,24,0.72)),
            url("<?php echo base_url()?>assets/images/crypto/bg-ico-hero.jpg") center/cover no-repeat;
        font-family:"Inter","Segoe UI",sans-serif;
    }

    .login-shell{
        min-height:100vh;
        display:flex;
        align-items:center;
        padding:42px 18px;
    }

    .login-panel{
        width:100%;
        max-width:1080px;
        margin:0 auto;
        display:grid;
        grid-template-columns:minmax(0,1.1fr) minmax(360px,0.9fr);
        background:#ffffff;
        border-radius:18px;
        overflow:hidden;
        box-shadow:0 30px 80px rgba(0,0,0,0.34);
    }

    .brand-side{
        position:relative;
        min-height:620px;
        color:#ffffff;
        padding:44px;
        background:
            linear-gradient(145deg,rgba(42,42,42,0.96),rgba(149,24,20,0.94)),
            url("<?php echo base_url()?>assets/images/bg-auth-overlay.png") center/cover no-repeat;
    }

    .brand-mark{
        display:flex;
        align-items:center;
        gap:14px;
        margin-bottom:72px;
    }

    .brand-icon{
        width:58px;
        height:58px;
        display:flex;
        align-items:center;
        justify-content:center;
        border-radius:16px;
        background:rgba(255,255,255,0.15);
        border:1px solid rgba(255,255,255,0.22);
        font-size:32px;
    }

    .brand-name{
        font-size:18px;
        line-height:1.25;
        font-weight:700;
        letter-spacing:0;
    }

    .brand-copy h1{
        color:#ffffff;
        font-size:38px;
        line-height:1.16;
        font-weight:800;
        letter-spacing:0;
        margin:0 0 18px;
        max-width:520px;
    }

    .brand-copy p{
        max-width:520px;
        color:rgba(255,255,255,0.82);
        font-size:16px;
        line-height:1.7;
        margin-bottom:30px;
    }

    .feature-grid{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:14px;
        max-width:560px;
    }

    .feature-item{
        border:1px solid rgba(255,255,255,0.18);
        background:rgba(255,255,255,0.11);
        border-radius:8px;
        padding:16px;
        min-height:96px;
    }

    .feature-item i{
        display:block;
        font-size:25px;
        margin-bottom:10px;
        color:#ffd3d0;
    }

    .feature-item span{
        display:block;
        color:#ffffff;
        font-weight:700;
        line-height:1.35;
    }

    .login-side{
        padding:52px 46px;
        display:flex;
        flex-direction:column;
        justify-content:center;
    }

    .login-badge{
        display:inline-flex;
        align-items:center;
        gap:8px;
        width:max-content;
        padding:9px 12px;
        border-radius:8px;
        background:#fff0ef;
        color:#c52c27;
        font-weight:700;
        margin-bottom:24px;
    }

    .login-title{
        color:#222222;
        font-size:30px;
        font-weight:800;
        letter-spacing:0;
        margin-bottom:8px;
    }

    .login-subtitle{
        color:#69717d;
        margin-bottom:30px;
        line-height:1.6;
    }

    .form-label{
        color:#2b2f35;
        font-weight:700;
        margin-bottom:8px;
    }

    .form-control{
        min-height:52px;
        border-radius:8px;
        border:1px solid #d7dce3;
        font-size:15px;
    }

    .form-control:focus{
        border-color:#dc3545;
        box-shadow:0 0 0 0.18rem rgba(220,53,69,0.16);
    }

    .input-group .form-control{
        border-radius:8px 0 0 8px;
    }

    .input-group .btn{
        border-radius:0 8px 8px 0;
        border-color:#d7dce3;
    }

    .login-button{
        min-height:52px;
        border-radius:8px;
        background:#dc3545;
        border-color:#dc3545;
        font-weight:800;
        letter-spacing:0;
    }

    .login-button:hover{
        background:#bd2a38;
        border-color:#bd2a38;
    }

    .security-note{
        margin-top:20px;
        padding:14px 16px;
        border-radius:8px;
        background:#f6f7f9;
        color:#68717d;
        display:flex;
        gap:10px;
        align-items:flex-start;
        line-height:1.5;
    }

    .security-note i{
        color:#dc3545;
        font-size:20px;
        margin-top:1px;
    }

    @media (max-width: 991px){
        .login-panel{
            grid-template-columns:1fr;
        }

        .brand-side{
            min-height:auto;
            padding:34px;
        }

        .brand-mark{
            margin-bottom:38px;
        }
    }

    @media (max-width: 575px){
        .login-shell{
            padding:18px 12px;
        }

        .brand-side,
        .login-side{
            padding:26px 22px;
        }

        .brand-copy h1{
            font-size:28px;
        }

        .feature-grid{
            grid-template-columns:1fr;
        }
    }