.member-area-page{
    min-height:70vh;
    padding:58px 0 78px;
    background:#f3f7f6;
}
.member-area-shell{
    width:min(1160px,calc(100% - 32px));
    margin:0 auto;
}
.member-area-auth{
    width:min(540px,100%);
    margin:0 auto;
}
.member-area-card{
    padding:clamp(22px,4vw,38px);
    border:1px solid #dbe6e4;
    border-radius:17px;
    background:#fff;
    box-shadow:0 18px 52px rgba(18,59,67,.08);
}
.member-area-brand{
    margin-bottom:25px;
    text-align:center;
}
.member-area-brand .member-area-eyebrow{
    display:inline-flex;
    margin-bottom:12px;
    padding:6px 11px;
    border-radius:999px;
    background:#e7f1ef;
    color:#176347;
    font-size:12px;
    font-weight:900;
    letter-spacing:.08em;
}
.member-area-brand h1{
    margin:0;
    color:#123b43;
    font-size:clamp(30px,5vw,44px);
    line-height:1.1;
}
.member-area-brand p{
    margin:12px auto 0;
    max-width:620px;
    color:#60767b;
    line-height:1.65;
}
.member-area-form{
    display:grid;
    gap:16px;
}
.member-area-form label{
    color:#29484f;
    font-weight:800;
}
.member-area-form input,
.member-area-form select,
.member-area-form textarea{
    display:block;
    width:100%;
    margin-top:7px;
    padding:12px 13px;
    border:1px solid #bccbce;
    border-radius:9px;
    background:#fff;
    color:#203c43;
    font:inherit;
}
.member-area-form input:focus,
.member-area-form select:focus,
.member-area-form textarea:focus{
    border-color:#176347;
    outline:0;
    box-shadow:0 0 0 3px rgba(23,99,71,.12);
}
.member-area-grid{
    display:grid;
    grid-template-columns:230px minmax(0,1fr);
    gap:24px;
    align-items:start;
}
.member-area-nav{
    position:sticky;
    top:105px;
    display:grid;
    gap:8px;
    padding:15px;
    border:1px solid #dbe6e4;
    border-radius:14px;
    background:#fff;
}
.member-area-nav a,
.member-area-nav button{
    display:flex;
    align-items:center;
    width:100%;
    padding:11px 12px;
    border:0;
    border-radius:8px;
    background:transparent;
    color:#29484f;
    text-decoration:none;
    text-align:left;
    font:inherit;
    font-weight:800;
    cursor:pointer;
}
.member-area-nav a:hover,
.member-area-nav a.active{
    background:#eaf3f1;
    color:#176347;
}
.member-area-nav .danger{
    color:#a22921;
}
.member-area-content{
    display:grid;
    gap:22px;
}
.member-area-title{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
}
.member-area-title h1{
    margin:0 0 6px;
    color:#123b43;
}
.member-area-title p{
    margin:0;
    color:#667b80;
}
.member-area-badge{
    display:inline-flex;
    padding:7px 11px;
    border-radius:999px;
    background:#e3f3e9;
    color:#17613a;
    font-size:12px;
    font-weight:900;
}
.member-area-form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}
.member-area-section{
    padding:clamp(21px,3vw,31px);
    border:1px solid #dbe6e4;
    border-radius:15px;
    background:#fff;
    box-shadow:0 10px 35px rgba(18,59,67,.05);
}
.member-area-section h2{
    margin:0 0 18px;
    color:#123b43;
}
.member-area-section p{
    color:#536b71;
    line-height:1.7;
}
.member-area-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:5px;
}
.member-area-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:11px 17px;
    border:0;
    border-radius:8px;
    background:#123b43;
    color:#fff;
    text-decoration:none;
    font:inherit;
    font-weight:900;
    cursor:pointer;
}
.member-area-btn:hover{
    background:#0d3036;
    color:#fff;
}
.member-area-btn.secondary{
    border:1px solid #bdcbce;
    background:#fff;
    color:#29484f;
}
.member-area-btn.danger{
    background:#b3261e;
}
.member-area-alert{
    margin:0 0 18px;
    padding:14px 16px;
    border-radius:9px;
    font-weight:700;
    line-height:1.55;
}
.member-area-alert.success{
    border:1px solid #9bd3b8;
    background:#eaf8f0;
    color:#155b37;
}
.member-area-alert.error{
    border:1px solid #e8b5b1;
    background:#fff0ef;
    color:#8a211b;
}
.member-area-alert.info{
    border:1px solid #b5cfd6;
    background:#edf7fa;
    color:#244f5d;
}
.member-area-links{
    margin-top:20px;
    text-align:center;
    color:#657a7f;
}
.member-area-links a{
    color:#176347;
    font-weight:800;
}
.member-area-placeholder{
    padding:22px;
    border:1px dashed #a9c0c5;
    border-radius:11px;
    background:#f8fbfa;
    color:#5e7479;
}
.member-area-danger-box{
    border-color:#e4b8b4;
    background:#fffafa;
}
.member-area-danger-box h2{
    color:#9b281f;
}
.member-area-password-list{
    margin:0;
    padding-left:20px;
    color:#61767b;
    line-height:1.75;
}
.member-area-member-type{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}
.member-area-type-option{
    position:relative;
}
.member-area-type-option input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}
.member-area-type-option span{
    display:block;
    padding:15px;
    border:2px solid #cbd6d8;
    border-radius:9px;
    text-align:center;
    color:#29484f;
    font-weight:900;
    cursor:pointer;
}
.member-area-type-option input:checked + span{
    border-color:#176347;
    background:#eaf5f0;
    color:#176347;
}
.member-area-fields{
    display:none;
    gap:16px;
}
.member-area-fields.active{
    display:grid;
}
@media(max-width:850px){
    .member-area-grid{grid-template-columns:1fr}
    .member-area-nav{
        position:static;
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}
@media(max-width:640px){
    .member-area-page{padding:35px 0 55px}
    .member-area-shell{width:min(100% - 20px,1160px)}
    .member-area-form-grid,
    .member-area-member-type{grid-template-columns:1fr}
    .member-area-nav{grid-template-columns:1fr}
    .member-area-title{flex-direction:column}
    .member-area-btn{width:100%}
}