.lh-page{
    background: linear-gradient(135deg,#6a11cb 0%,#2575fc 100%);
    padding:20px;
    min-height: calc(100vh - 40px);
}

.lh-container{
    display:flex;
    max-width:1100px;
    width:100%;
    margin:0 auto;
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 15px 30px rgba(0,0,0,.2);
}

.lh-left{
    flex:1;
    background: linear-gradient(to bottom right,#4a00e0,#8e2de2);
    color:#fff;
    padding:50px 40px;
}

.lh-right{
    flex:1.2;
    padding:50px 40px;
}

.lh-logo{display:flex;align-items:center;margin-bottom:30px}
.lh-logo-icon{
    width:44px;height:44px;border-radius:10px;
    background:#fff;color:#8e2de2;
    display:flex;align-items:center;justify-content:center;
    font-size:22px;margin-right:15px;
}
.lh-logo-text{font-size:28px;font-weight:700}
.lh-welcome{font-size:36px;font-weight:700;margin-bottom:15px;line-height:1.2}
.lh-subtitle{font-size:18px;opacity:.9;margin-bottom:40px;line-height:1.5}
.lh-features{list-style:none;margin-top:30px}
.lh-features li{margin-bottom:12px;font-size:16px}

.lh-title{font-size:28px;font-weight:700;margin-bottom:30px;color:#333}

.lh-field{margin-bottom:22px}
.lh-row2{display:flex;gap:15px}
.lh-label{display:block;margin-bottom:8px;font-weight:600;color:#555;font-size:15px}
.lh-inputwrap{position:relative}
.lh-ico{
    position:absolute;left:16px;top:50%;transform:translateY(-50%);
    font-size:18px;opacity:.9;
}
.lh-slot input, .lh-slot select{
    width:100%;
    padding:16px 16px 16px 50px;
    border:2px solid #e1e5ee;
    border-radius:10px;
    font-size:16px;
    background:#f8f9fa;
    transition:.2s;
}
.lh-slot input:focus, .lh-slot select:focus{
    outline:none;
    border-color:#8e2de2;
    background:#fff;
    box-shadow:0 0 0 3px rgba(142,45,226,.1);
}
.lh-hint{margin-top:6px;color:#666;font-size:13px}

@media (max-width:900px){
    .lh-container{flex-direction:column;max-width:600px}
    .lh-left,.lh-right{padding:40px 30px}
    .lh-welcome{font-size:30px}
}
@media (max-width:480px){
    .lh-row2{flex-direction:column;gap:0}
    .lh-welcome{font-size:26px}
}



.lh-submit{
    width:100%;
    background: linear-gradient(to right,#8e2de2,#4a00e0) !important;
    color:#fff !important;
    border:none !important;
    border-radius:10px !important;
    padding:18px !important;
    font-size:18px !important;
    font-weight:700 !important;
    cursor:pointer !important;
}



/* --- Moodle theme login container override for LearnHub signup --- */
#page-login-signup .login-container,
#page-login-signup .login-wrapper,
#page-login-signup .login-box,
#page-login-signup .card,
#page-login-signup .region-main {
    max-width: none !important;
    width: 100% !important;
}

#page-login-signup .login-container {
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Чтобы твой контейнер стал реально центром страницы */
#page-login-signup .lh-page {
    min-height: calc(100vh - 60px);
    display: flex;
    align-items: center;
}

/* На случай если тема ставит overflow/width */
#page-login-signup #page {
    overflow: visible !important;
}


/* Hide original Moodle form rows, we render inputs in our layout */
#page-login-signup form.mform .fitem,
#page-login-signup form.mform .fdescription {
    display: none !important;
}

.col-12 {
    padding: 0;
}


.lh-phonewrap { position: relative; }
.lh-smsbtn{
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    border:0;
    padding:10px 14px;
    border-radius:10px;
    font-weight:600;
    cursor:pointer;
}
.lh-smsbtn:disabled{ opacity:.5; cursor:not-allowed; }

.sms-code-container{ margin-top:12px; padding:12px; border-radius:12px; background:rgba(255,255,255,.08); }
.sms-code-input{ display:flex; gap:10px; }
.sms-digit{ width:44px; height:52px; text-align:center; font-size:22px; font-weight:700; border-radius:10px; border:1px solid rgba(255,255,255,.25); }
.timer{ margin-top:10px; opacity:.85; }
.error-message{ color:#ffb3b3; margin-top:8px; }
.success-message{ color:#b8ffb8; margin-top:8px; }


/* Убираем белые полосы Moodle login layout */
body.pagelayout-login {
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%) !important;
}

#page, #page-wrapper, #region-main, .login-container {
    background: transparent !important;
}

.login-container {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
}

/* Если хочется прям вообще без футера */
#page-footer, #page-header, .navbar {
    display: none !important;
}


.lh-ajaxmsg{
    margin-top:6px;
    font-size:13px;
}
.lh-ajaxmsg[data-state="wait"]{ opacity:.75; }
.lh-ajaxmsg[data-state="ok"]{ color:#1b8f3a; }
.lh-ajaxmsg[data-state="err"]{ color:#c0392b; }


/* === SMS digits: always 4 small boxes in one row === */
.lh-sms-digits{
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:nowrap;
    margin-top:10px;
}

.lh-sms-digit{
    width:54px;
    height:54px;
    border:1px solid #cfd7e6;
    border-radius:12px;
    text-align:center;
    font-size:26px;
    line-height:54px;
    outline:none;
}

.lh-sms-digit:focus{
    border-color:#7aa7ff;
    box-shadow:0 0 0 3px rgba(122,167,255,.25);
}

/* avoid ugly wrap on tiny widths */
@media (max-width: 420px){
    .lh-sms-digit{ width:46px; height:46px; font-size:22px; line-height:46px; }
}

/* OK/ERR message single line */
.lh-sms-ok, .lh-sms-err{ margin-top:10px; }

/* === AJAX msg under username === */
.lh-ajaxmsg{
    margin-top:6px;
    font-size:13px;
}
.lh-ajaxmsg[data-state="idle"]{ opacity:.6; }
.lh-ajaxmsg[data-state="wait"]{ opacity:.75; }
.lh-ajaxmsg[data-state="ok"]{ color:#1b8f3a; }
.lh-ajaxmsg[data-state="err"]{ color:#c0392b; }

/* === captcha row === */
.lh-captcha{
    display:flex;
    align-items:center;
    gap:10px;
    margin:10px 0 10px 0;
}

.lh-captcha-img{
    width:110px;
    height:52px;
    border-radius:12px;
    border:1px solid #cfd7e6;
    background:#f3f6ff;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.lh-captcha-img svg{ width:110px; height:52px; display:block; }

.lh-captcha-inp{
    width:110px;
    height:52px;
    border:1px solid #cfd7e6;
    border-radius:12px;
    font-size:22px;
    text-align:center;
    text-transform:uppercase;
    outline:none;
}

.lh-captcha-inp:focus{
    border-color:#7aa7ff;
    box-shadow:0 0 0 3px rgba(122,167,255,.25);
}

.lh-captcha-refresh{
    width:52px;
    height:52px;
    border-radius:12px;
    border:1px solid #cfd7e6;
    background:#fff;
    cursor:pointer;
    font-size:22px;
}

.lh-captcha-msg{
    font-size:13px;
    min-width:120px;
}
.lh-captcha-msg[data-state="idle"]{ opacity:.6; }
.lh-captcha-msg[data-state="wait"]{ opacity:.75; }
.lh-captcha-msg[data-state="ok"]{ color:#1b8f3a; }
.lh-captcha-msg[data-state="err"]{ color:#c0392b; }

/* submit disabled hint */
.lh-readyhint{
    margin-top:10px;
    font-size:13px;
    opacity:.7;
}


/* small red error text */
.lh-err {
    color: #d93025;
    font-size: 12px;
    line-height: 1.25;
    margin-top: 6px;
}

/* red highlight for invalid fields */
.lh-inputwrap.lh-invalid input {
    border-color: #d93025 !important;
    box-shadow: 0 0 0 3px rgba(217,48,37,.12);
}


/* ===== Tabs (Login / Signup) ===== */
.lh-tabs{
    display:flex;
    gap:10px;
    margin-bottom:22px;
}

.lh-tab{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 14px;
    border-radius:12px;
    text-decoration:none;
    font-weight:700;
    color:#4a00e0;
    background:#f3f1ff;
    border:1px solid rgba(74,0,224,.15);
    transition:.15s;
}

.lh-tab:hover{
    transform:translateY(-1px);
    background:#eeeaff;
}

.lh-tab.is-active{
    color:#fff;
    background: linear-gradient(to right,#8e2de2,#4a00e0);
    border-color: transparent;
}

/* Login block helpers */
.lh-login-links{
    margin-top:12px;
    font-size:13px;
    opacity:.85;
}

.lh-link{
    color:#4a00e0;
    text-decoration:none;
}
.lh-link:hover{ text-decoration:underline; }

/* --- CAPTCHA: fix invisible svg on mobile --- */
.lh-captcha {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}

.lh-captcha-img {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    min-height: 44px;
    padding: 6px 10px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 10px;
    overflow: hidden;
}

/* if svg is injected via innerHTML */
.lh-captcha-img svg {
    display: block;
    width: 120px;
    height: 44px;
    max-width: 100%;
    max-height: 100%;
}

/* some themes set line-height/visibility weirdly on mobile */
.lh-captcha-img * {
    visibility: visible !important;
    opacity: 1 !important;
}


@media (max-width: 520px) {
    .lh-captcha { flex-wrap: wrap; }
    .lh-captcha-img { width: 100%; max-width: 320px; }
    .lh-captcha-img svg { width: 100%; }
}