:root {
    color-scheme: light;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    color: #33234a;
    background: #f1edf8;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: linear-gradient(135deg, #f1edf8, #ddd2ed); }
.ch-container { width: min(100% - 2rem, 32rem); margin: 0 auto; padding: 4rem 0; }
.login-header { margin-bottom: 1.5rem; text-align: center; }
.login-header h2 { margin: 0; color: #5b3a86; font-size: 1.75rem; }
.login-header h3 { margin: .45rem 0 0; color: #7c5ca6; font-size: 1rem; letter-spacing: .08em; }
.login-box { padding: 1.5rem; background: #fff; border: 1px solid #d2c2e5; border-radius: .5rem; box-shadow: 0 .75rem 2rem rgba(64, 42, 92, .14); }
.alert { padding: .75rem 1rem; border-radius: .25rem; }
.alert-info { background: #eee7f7; color: #604080; }
.alert-danger { margin-bottom: 1rem; background: #fbe9e9; color: #8b2626; }
.input-group { display: flex; }
.input-group-addon { display: grid; place-items: center; width: 3rem; background: #f5f0fa; border: 1px solid #d2c2e5; border-right: 0; }
.form-control { width: 100%; min-height: 3rem; padding: .75rem; border: 1px solid #d2c2e5; font: inherit; }
.input-group .form-control { border-radius: 0 .25rem .25rem 0; }
.clearfix { clear: both; }
.center { text-align: center; }
.col-md-5 { width: 100%; }
.btn { padding: .7rem 1.1rem; border: 0; border-radius: .25rem; color: #fff; background: #69439a; cursor: pointer; font: inherit; }
.btn:hover { background: #54347d; }

@media (max-width: 480px) {
    .ch-container { padding: 2rem 0; }
    .login-box { padding: 1rem; }
}