/* =================================
   ОСОБИСТИЙ КАБІНЕТ
================================= */

.cabinet-page{
    width:100%;
    max-width:850px;
    color:#fff;
}

/* =================================
   ВЕРХ
================================= */

.cabinet-header{
    display:grid;
    grid-template-columns:240px 1fr;
    gap:30px;
    align-items:center;
    margin-bottom:25px;
}

.cabinet-avatar{
    width:240px;
    height:240px;
}

.cabinet-avatar img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;

    border-radius:50%;

    border:4px solid #ff5da6;

    box-shadow:
    0 0 45px rgba(255,93,166,.35);
}

.cabinet-title{
    margin:0 0 8px;

    font-size:28px;
    font-weight:700;

    color:#fff;
}

.cabinet-subtitle{
    margin-bottom:25px;

    color:rgba(255,255,255,.6);
}


/* =================================
   VIP
================================= */

.cabinet-status{
    display:flex;
    align-items:center;

    gap:25px;

    padding:30px;

    border-radius:30px;

    background:#071a3d;

    border:1px solid rgba(255,255,255,.08);

    overflow:hidden;
}

.cabinet-status-left{
    display:flex;
    align-items:center;
    gap:25px;

    flex:1;
}

.cabinet-status-icon{
    width:72px;
    height:72px;

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

    border-radius:50%;

    background:rgba(255,95,165,.12);

    font-size:34px;
}

.cabinet-status-label{
    color:rgba(255,255,255,.6);

    margin-bottom:10px;
}

.cabinet-status-vip{
    font-size:44px;

    line-height:1.05;

    font-weight:800;

    color:#ff4f96;

    margin-bottom:15px;
}

.cabinet-status-expire{
    color:rgba(255,255,255,.6);
}

.cabinet-status-divider{
    width:1px;
    height:120px;

    background:rgba(255,255,255,.08);
}

.cabinet-benefits{
    display:flex;
    flex-direction:column;

    gap:18px;

    min-width:180px;
}

.cabinet-benefit{
    color:#fff;
}


/* =================================
   НИЖНЯ ЧАСТИНА
================================= */

.cabinet-content{
    display:grid;

    grid-template-columns:280px 1fr;

    gap:20px;
}

.cabinet-sidebar{
    display:flex;
    flex-direction:column;

    gap:20px;
}

.cabinet-main{
    min-width:0;
}


/* =================================
   КАРТКИ
================================= */

.cabinet-card{
    padding:30px;

    border-radius:24px;

    background:#071a3d;

    border:1px solid rgba(255,255,255,.08);
}

.cabinet-card h2{
    margin-bottom:30px;

    font-size:22px;

    color:#fff;
}

.cabinet-card h3{
    margin-bottom:25px;

    color:#fff;
}


/* =================================
   КНОПКИ
================================= */

.cabinet-btn{
    display:block;

    width:100%;

    padding:18px 20px;

    margin-bottom:15px;

    border-radius:18px;

    text-decoration:none;

    color:#fff;

    background:rgba(255,255,255,.03);

    border:1px solid rgba(255,255,255,.08);

    transition:.2s;
}

.cabinet-btn:hover{
    background:rgba(255,255,255,.08);
}

.cabinet-btn-vip{
    background:linear-gradient(180deg,#ff5da6,#ea4388);

    border:none;

    font-weight:700;
}


/* =================================
   ПРОДОВЖИТИ ПЕРЕГЛЯД
================================= */

.cabinet-continue-poster{
    height:110px;

    border-radius:18px;

    background:#10234a;

    margin-bottom:18px;
}

.cabinet-show-name{
    font-size:20px;

    font-weight:700;

    margin-bottom:8px;
}

.cabinet-show-episode{
    color:rgba(255,255,255,.6);

    margin-bottom:20px;
}


/* =================================
   РЕДАГУВАННЯ
================================= */

.cabinet-grid{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

    margin-bottom:20px;
}

.cabinet-edit-card{
    padding:25px;

    border-radius:20px;

    background:rgba(255,255,255,.03);

    border:1px solid rgba(255,255,255,.08);
}

.cabinet-security{
    margin-bottom:30px;
}

.cabinet-field{
    margin-bottom:22px;
}

.cabinet-field label{
    display:block;

    margin-bottom:10px;

    color:rgba(255,255,255,.7);
}

.cabinet-field input{
    width:100%;
    height:54px;

    padding:0 18px;

    background:#0c2148;

    border:1px solid rgba(255,255,255,.08);

    border-radius:14px;

    color:#fff;
}

.cabinet-field input:focus{
    outline:none;

    border-color:#ff4f96;
}

.cabinet-upload{
    height:60px;

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

    border-radius:16px;

    border:2px dashed #ff4f96;

    color:#ff4f96;

    font-weight:700;

    margin-bottom:25px;
}


/* =================================
   МІНІ АВАТАРИ
================================= */

.cabinet-avatar-grid{
    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:12px;
}

.cabinet-mini-avatar{
    aspect-ratio:1;

    border-radius:14px;

    background:#10234a;

    border:2px solid transparent;

    cursor:pointer;

    transition:.2s;
}

.cabinet-mini-avatar:hover{
    border-color:#ff4f96;
}


/* =================================
   КНОПКИ ЗБЕРЕГТИ
================================= */

.cabinet-actions{
    display:flex;

    justify-content:center;

    gap:20px;
}

.cabinet-save-btn{
    padding:18px 70px;

    border-radius:18px;

    background:linear-gradient(180deg,#ff5da6,#ea4388);

    text-decoration:none;

    color:#fff;

    font-weight:700;
}

.cabinet-cancel-btn{
    padding:18px 40px;

    border-radius:18px;

    background:rgba(255,255,255,.03);

    border:1px solid rgba(255,255,255,.08);

    text-decoration:none;

    color:#fff;
}


/* =================================
   МОБІЛЬНА ВЕРСІЯ
================================= */

@media (max-width:850px){

    .cabinet-header{
        grid-template-columns:1fr;

        text-align:center;
    }

    .cabinet-avatar{
        margin:auto;
    }

    .cabinet-status{
        flex-direction:column;
    }

    .cabinet-status-divider{
        display:none;
    }

    .cabinet-content{
        grid-template-columns:1fr;
    }

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

    .cabinet-actions{
        flex-direction:column;
    }

}

/* ===== КОЛЕКЦІЯ АВАТАРІВ ===== */

.cabinet-avatars-title{
    text-align:center;

    margin-bottom:20px;

    color:rgba(255,255,255,.55);

    font-size:14px;
}


.cabinet-avatar-grid{
    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:12px;
}


.cabinet-mini-avatar{

    height:58px;

    border-radius:16px;

    background:#112755;

    border:2px solid rgba(255,255,255,.05);

    cursor:pointer;

    transition:.2s;
}

.cabinet-mini-avatar:hover{
    border-color:#ff4f96;
}



/* ===== БЕЗПЕКА ===== */

.cabinet-security{
    margin-top:20px;
}



/* ===== КНОПКИ ===== */

.cabinet-actions{

    display:flex;

    justify-content:center;

    gap:20px;

    margin-top:30px;
}


.cabinet-save-btn{

    min-width:320px;

    height:56px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    color:#fff;

    border-radius:18px;

    background:linear-gradient(180deg,#ff5da6,#e83d86);

    font-weight:700;
}


.cabinet-cancel-btn{

    min-width:180px;

    height:56px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    color:#fff;

    border-radius:18px;

    background:rgba(255,255,255,.03);

    border:1px solid rgba(255,255,255,.08);
}