:root{
    --mkap-dark:#1c434f;
    --mkap-green:#10954f;
    --mkap-text:#20353d;
    --mkap-muted:#718188;
    --mkap-background:#f4f7f5;
    --mkap-surface:#ffffff;
    --mkap-primary-rgb:28,67,79;
    --mkap-secondary-rgb:16,149,79;
    --mkap-auth-radius:16px;
    --mkap-auth-background-image:url("../images/auth-background.webp");
    --mkap-error:#a83b31;
    --mkap-success:#137a47;
    --mkap-glass:rgba(255,255,255,.78);
    --mkap-border:rgba(255,255,255,.58);
}

*{
    box-sizing:border-box;
}

html,
body{
    width:100%;
    min-height:100%;
    margin:0;
    padding:0;
}

body{
    min-height:100vh;
    min-height:100dvh;

    font-family:Tahoma, Arial, sans-serif;
    color:var(--mkap-text);

    background:
        linear-gradient(
            135deg,
            rgba(7,22,28,.60),
            rgba(var(--mkap-primary-rgb),.22)
        ),
        var(--mkap-auth-background-image)
        center center / cover no-repeat fixed;

    background-color:var(--mkap-background);
}

/* =============================
   Main layout
============================= */

.mkap-auth-page{
    position:relative;

    width:100%;
    min-height:100vh;
    min-height:100dvh;

    margin:0 auto;
    padding:34px;

    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(420px,500px);
    align-items:center;
    gap:48px;

    overflow:hidden;
}

.mkap-auth-page::before,
.mkap-auth-page::after{
    content:"";
    position:absolute;
    border-radius:50%;
    filter:blur(30px);
    pointer-events:none;
}

.mkap-auth-page::before{
    width:380px;
    height:380px;
    top:-160px;
    right:-110px;
    background:rgba(var(--mkap-secondary-rgb),.18);
}

.mkap-auth-page::after{
    width:340px;
    height:340px;
    bottom:-150px;
    left:-110px;
    background:rgba(255,255,255,.13);
}

/* =============================
   Showcase
============================= */

.mkap-auth-showcase{
    position:relative;
    z-index:2;

    width:100%;
    max-width:760px;
    min-height:520px;
    padding:46px;

    display:flex;
    flex-direction:column;
    justify-content:center;

    color:#fff;
}

.mkap-auth-brand{
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:56px;

    color:inherit;
    text-decoration:none;
}

.mkap-auth-logo{
    display:block;
    width:68px;
    height:68px;
    flex:0 0 68px;

    object-fit:contain;

    filter:drop-shadow(0 14px 28px rgba(0,0,0,.18));
}

.mkap-auth-brand strong{
    display:block;
    font-size:25px;
    font-weight:900;
}

.mkap-auth-brand span{
    display:block;
    margin-top:5px;

    color:rgba(255,255,255,.72);
    font-size:13px;
}

.mkap-auth-copy{
    max-width:650px;
}

.mkap-auth-copy h1{
    max-width:650px;
    margin:0;

    font-size:clamp(40px,5.2vw,70px);
    font-weight:900;
    line-height:1.35;

    text-shadow:0 8px 28px rgba(0,0,0,.18);
}

.mkap-auth-copy p{
    max-width:580px;
    margin:22px 0 0;

    color:rgba(255,255,255,.82);
    font-size:16px;
    line-height:2.1;
}

/* =============================
   Form side
============================= */

.mkap-auth-form-side{
    position:relative;
    z-index:2;

    width:100%;

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

/* =============================
   Glass card
============================= */

.mkap-auth-card{
    position:relative;
    overflow:hidden;

    width:100%;
    max-width:470px;
    padding:42px 38px;

    background:var(--mkap-glass);
    border:1px solid var(--mkap-border);
    border-radius:calc(var(--mkap-auth-radius) + 14px);

    -webkit-backdrop-filter:blur(24px) saturate(140%);
    backdrop-filter:blur(24px) saturate(140%);

    box-shadow:
        0 30px 80px rgba(10,31,38,.25),
        inset 0 1px 0 rgba(255,255,255,.86);

    animation:mkapFadeUp .65s ease both;
}

.mkap-auth-card::before{
    content:"";
    position:absolute;

    width:230px;
    height:230px;
    top:-115px;
    right:-95px;

    border-radius:50%;
    background:rgba(255,255,255,.34);

    pointer-events:none;
}

/* =============================
   Card header
============================= */

.mkap-auth-card-header{
    position:relative;
    z-index:1;

    margin-bottom:30px;
    text-align:center;
}

.mkap-auth-card-header::before{
    display:none;
}

.mkap-main-logo{
    display:block;

    width:92px;
    height:auto;
    max-height:92px;

    margin:0 auto 22px;
    object-fit:contain;

    filter:drop-shadow(0 12px 24px rgba(var(--mkap-secondary-rgb),.18));
}

.mkap-auth-card-header h2{
    margin:0;

    color:var(--mkap-dark);
    font-size:30px;
    font-weight:900;
    line-height:1.5;
}

.mkap-auth-card-header p{
    max-width:360px;
    margin:12px auto 0;

    color:var(--mkap-muted);
    font-size:14px;
    line-height:2;
}

/* =============================
   Messages
============================= */

.mkap-message{
    display:none;

    margin-bottom:18px;
    padding:13px 15px;

    border-radius:14px;

    font-size:14px;
    line-height:1.8;
    text-align:center;
}

.mkap-message.success{
    display:block;

    color:var(--mkap-success);
    background:rgba(var(--mkap-secondary-rgb),.09);
    border:1px solid rgba(var(--mkap-secondary-rgb),.20);
}

.mkap-message.error{
    display:block;

    color:var(--mkap-error);
    background:rgba(168,59,49,.08);
    border:1px solid rgba(168,59,49,.18);
}

/* =============================
   Form
============================= */

.mkap-form{
    position:relative;
    z-index:1;

    width:100%;

    display:flex;
    flex-direction:column;
    gap:18px;
}

.mkap-field{
    width:100%;
}

.mkap-field label{
    display:block;
    margin-bottom:9px;

    color:var(--mkap-dark);
    font-size:14px;
    font-weight:800;
}

.mkap-field input{
    width:100%;
    height:57px;
    padding:0 18px;

    border:1px solid rgba(var(--mkap-primary-rgb),.14);
    border-radius:calc(var(--mkap-auth-radius) + 1px);
    outline:none;

    background:rgba(255,255,255,.72);
    color:var(--mkap-text);

    font:inherit;
    font-size:15px;

    box-shadow:inset 0 1px 0 rgba(255,255,255,.82);

    transition:
        border-color .2s,
        box-shadow .2s,
        background .2s,
        transform .2s;
}

.mkap-field input::placeholder{
    color:#93a0a5;
}

.mkap-field input:focus{
    background:rgba(255,255,255,.96);
    border-color:rgba(var(--mkap-secondary-rgb),.65);

    box-shadow:
        0 0 0 4px rgba(var(--mkap-secondary-rgb),.10),
        0 12px 30px rgba(var(--mkap-primary-rgb),.08);

    transform:translateY(-1px);
}

.mkap-field input:-webkit-autofill,
.mkap-field input:-webkit-autofill:hover,
.mkap-field input:-webkit-autofill:focus{
    -webkit-text-fill-color:var(--mkap-text);
    transition:background-color 9999s ease-in-out 0s;
}

/* =============================
   Submit
============================= */

.mkap-submit{
    width:100%;
    height:58px;
    margin-top:5px;

    border:0;
    border-radius:18px;

    color:#fff;
    background:
        linear-gradient(
            135deg,
            var(--mkap-green),
            var(--mkap-dark)
        );

    font:inherit;
    font-size:16px;
    font-weight:900;

    cursor:pointer;

    box-shadow:
        0 17px 34px rgba(var(--mkap-secondary-rgb),.25),
        inset 0 1px 0 rgba(255,255,255,.14);

    transition:
        transform .2s,
        box-shadow .2s,
        opacity .2s;
}

.mkap-submit:hover{
    transform:translateY(-2px);

    box-shadow:
        0 22px 42px rgba(var(--mkap-secondary-rgb),.34),
        inset 0 1px 0 rgba(255,255,255,.18);
}

.mkap-submit:active{
    transform:translateY(0);
}

.mkap-submit:disabled{
    cursor:not-allowed;
    opacity:.62;
    transform:none;
}

/* =============================
   Footer
============================= */

.mkap-auth-footer{
    position:relative;
    z-index:1;

    margin-top:25px;

    color:var(--mkap-muted);
    font-size:14px;
    text-align:center;
}

.mkap-auth-footer a{
    color:var(--mkap-green);
    font-weight:900;
    text-decoration:none;
}

.mkap-auth-footer a:hover{
    text-decoration:underline;
}


/* =============================
   White-label footer metadata
============================= */

.mkap-message-static{
    display:block;
}

.mkap-auth-meta{
    margin-top:20px;
    padding-top:16px;

    border-top:1px solid rgba(var(--mkap-primary-rgb),.10);

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:7px;

    color:var(--mkap-muted);
    font-size:10px;
    line-height:1.8;
    text-align:center;
}

.mkap-auth-meta a{
    color:inherit;
    text-decoration:none;
    transition:color .2s ease;
}

.mkap-auth-meta a:hover{
    color:var(--mkap-dark);
}

/* =============================
   Developer
============================= */

.mkap-credits{
    position:relative;
    z-index:1;

    width:100%;
    margin-top:30px;
    padding-top:22px;

    border-top:1px solid rgba(var(--mkap-primary-rgb),.10);

    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;

    text-decoration:none;

    transition:transform .25s;
}

.mkap-credits:hover{
    transform:translateY(-2px);
}

.mkap-dev-logo{
    display:block;

    width:44px;
    height:44px;
    flex:0 0 44px;
    padding:5px;

    object-fit:contain;

    border-radius:14px;
    background:rgba(255,255,255,.72);

    box-shadow:0 8px 20px rgba(var(--mkap-primary-rgb),.10);
}

.mkap-credit-title{
    color:#88969b;
    font-size:11px;
    letter-spacing:.5px;
}

.mkap-credit-name{
    margin-top:3px;

    color:var(--mkap-dark);
    font-size:16px;
    font-weight:900;
}

.mkap-credit-site{
    margin-top:4px;

    color:var(--mkap-green);
    font-size:12px;
}

.mkap-credit-version{
    margin-top:7px;

    color:#a0aaae;
    font-size:11px;
    letter-spacing:1px;
}

/* =============================
   Animation
============================= */

@keyframes mkapFadeUp{
    from{
        opacity:0;
        transform:translateY(24px) scale(.985);
    }

    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

/* =============================
   Tablet and mobile
============================= */

@media (max-width:900px){

    body{
        background-attachment:scroll;
    }

    .mkap-auth-page{
        width:100%;
        max-width:none;

        min-height:100vh;
        min-height:100dvh;

        padding:24px;

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

        overflow-x:hidden;
        overflow-y:auto;
    }

    .mkap-auth-showcase{
        display:none;
    }

    .mkap-auth-form-side{
        width:100%;
        min-height:calc(100vh - 48px);
        min-height:calc(100dvh - 48px);

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

    .mkap-auth-card{
        width:100%;
        max-width:500px;
        margin:auto;
    }
}

/* =============================
   Mobile
============================= */

@media (max-width:600px){

    html,
    body{
        width:100%;
        min-height:100%;
        overflow-x:hidden;
    }

    body{
        min-height:100vh;
        min-height:100dvh;

        background-position:center center;
        background-size:cover;
    }

    .mkap-auth-page{
        width:100%;

        min-height:100vh;
        min-height:100dvh;

        margin:0;
        padding:14px;

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

        overflow-x:hidden;
        overflow-y:auto;
    }

    .mkap-auth-page::before,
    .mkap-auth-page::after{
        display:none;
    }

    .mkap-auth-form-side{
        width:100%;

        min-height:calc(100vh - 28px);
        min-height:calc(100dvh - 28px);

        margin:0;
        padding:0;

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

    .mkap-auth-card{
        width:calc(100% - 4px);
        max-width:430px;

        margin:auto;
        padding:26px 18px;

        border-radius:22px;
    }

    .mkap-main-logo{
        width:72px;
        max-height:72px;
        margin:0 auto 16px;
    }

    .mkap-auth-card-header{
        margin-bottom:22px;
        text-align:center;
    }

    .mkap-auth-card-header h2{
        font-size:24px;
    }

    .mkap-auth-card-header p{
        max-width:310px;
        margin:9px auto 0;

        font-size:13px;
        line-height:1.85;
    }

    .mkap-form{
        gap:15px;
    }

    .mkap-field label{
        font-size:13px;
    }

    .mkap-field input{
        height:53px;
        padding:0 15px;

        border-radius:15px;

        font-size:16px;
    }

    .mkap-submit{
        height:54px;

        border-radius:16px;

        font-size:15px;
    }

    .mkap-auth-footer{
        margin-top:21px;
        font-size:13px;
    }

    .mkap-credits{
        margin-top:22px;
        padding-top:17px;

        gap:10px;

        text-align:right;
    }

    .mkap-dev-logo{
        width:40px;
        height:40px;
        flex-basis:40px;

        padding:4px;
        border-radius:12px;
    }

    .mkap-credit-title{
        font-size:10px;
    }

    .mkap-credit-name{
        margin-top:2px;
        font-size:14px;
    }

    .mkap-credit-site{
        margin-top:2px;
        font-size:10px;
    }

    .mkap-credit-version{
        margin-top:4px;
        font-size:9px;
    }
}

/* گوشی‌های کوتاه:
   اجازه اسکرول می‌دهیم تا فرم بریده نشود */

@media (max-width:600px) and (max-height:720px){

    .mkap-auth-page{
        align-items:flex-start;
    }

    .mkap-auth-form-side{
        min-height:auto;
        align-items:flex-start;
    }

    .mkap-auth-card{
        margin:0 auto;
    }
}
/* Part 18 — email/mobile identity selector */
.mkap-auth-identity-tabs{display:flex;gap:8px;margin:0 0 14px;padding:4px;border:1px solid rgba(var(--mkap-primary-rgb,28,67,79),.12);border-radius:14px;background:rgba(var(--mkap-primary-rgb,28,67,79),.035)}
.mkap-auth-identity-tab{flex:1;min-height:40px;border:0;border-radius:10px;background:transparent;color:var(--mkap-muted,#73848a);font:inherit;font-size:11px;font-weight:900;cursor:pointer;transition:.2s ease}
.mkap-auth-identity-tab:hover{background:rgba(var(--mkap-primary-rgb,28,67,79),.06);color:var(--mkap-dark,#1c434f)}
.mkap-auth-identity-tab.is-active{background:var(--mkap-surface,#fff);color:var(--mkap-green,#10954f);box-shadow:0 5px 18px rgba(var(--mkap-primary-rgb,28,67,79),.09)}
.mkap-auth-identity-panel[hidden]{display:none!important}
.mkap-auth-identity-note{margin:-2px 0 8px;color:var(--mkap-muted,#73848a);font-size:10px;line-height:1.9}

/* Part 20-B — Social login */
.mkap-social-login-block{margin-top:16px;display:grid;gap:11px}
.mkap-auth-divider{display:flex;align-items:center;gap:12px;color:var(--mkap-muted,#73848a);font-size:10px;font-weight:800}
.mkap-auth-divider::before,.mkap-auth-divider::after{content:"";height:1px;flex:1;background:rgba(var(--mkap-primary-rgb,28,67,79),.13)}
.mkap-auth-divider span{flex:0 0 auto}
.mkap-social-login-button{min-height:50px;padding:0 16px;border:1px solid rgba(var(--mkap-primary-rgb,28,67,79),.17);border-radius:14px;display:flex;align-items:center;justify-content:center;gap:11px;color:var(--mkap-text,#243b43);background:var(--mkap-surface,#fff);text-decoration:none;font-size:13px;font-weight:900;box-shadow:0 7px 22px rgba(var(--mkap-primary-rgb,28,67,79),.055);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.mkap-social-login-button:hover{transform:translateY(-1px);border-color:rgba(var(--mkap-secondary-rgb,16,149,79),.30);box-shadow:0 10px 28px rgba(var(--mkap-primary-rgb,28,67,79),.09)}
.mkap-google-mark{width:27px;height:27px;border-radius:50%;display:inline-grid;place-items:center;flex:0 0 27px;background:#fff;border:1px solid rgba(32,33,36,.14);color:#4285f4;font-family:Arial,sans-serif;font-size:16px;font-weight:800;direction:ltr}
.mkap-social-login-note{display:block;text-align:center;color:var(--mkap-muted,#73848a);font-size:9px;line-height:1.9}
.mkap-social-register-card{max-width:560px}
.mkap-social-identity-summary{margin:0 0 16px;padding:12px 14px;border:1px solid rgba(var(--mkap-primary-rgb,28,67,79),.13);border-radius:14px;display:flex;align-items:center;gap:11px;background:rgba(var(--mkap-primary-rgb,28,67,79),.035)}
.mkap-social-identity-summary div{min-width:0;display:grid;gap:2px}.mkap-social-identity-summary strong{font-size:12px;color:var(--mkap-text,#243b43)}.mkap-social-identity-summary small{font-size:10px;color:var(--mkap-muted,#73848a);overflow-wrap:anywhere}
.mkap-social-legal-list{display:grid;gap:10px}.mkap-social-legal{border:1px solid rgba(var(--mkap-primary-rgb,28,67,79),.14);border-radius:13px;background:rgba(255,255,255,.5);overflow:hidden}.mkap-social-legal summary{padding:12px 13px;cursor:pointer;font-size:11px;font-weight:900;color:var(--mkap-text,#243b43)}.mkap-social-legal summary small{display:block;margin-top:2px;color:var(--mkap-muted,#73848a);font-size:9px}.mkap-social-legal-content{max-height:210px;overflow:auto;margin:0 12px;padding:13px;border-radius:10px;background:var(--mkap-surface,#fff);color:var(--mkap-text,#30474e);white-space:pre-wrap;font-size:10px;line-height:2}.mkap-social-legal label{padding:11px 13px;display:flex;align-items:flex-start;gap:8px;color:var(--mkap-text,#243b43);font-size:10px;font-weight:800;line-height:1.8}.mkap-social-legal input{margin-top:3px;accent-color:var(--mkap-green,#10954f)}