:root{
--bg:#f6f9ff;
--panel:#ffffff;
--line:#e7eefc;
--ink:#0f1b3a;
--muted:#5c6f93;
--brand:#2563eb;
--brand-500:#3b82f6;
--brand-400:#60a5fa;
--danger:#ef4444;
--shadow: 0 12px 30px rgba(37,99,235,.10);
--radius-xl:20px;
}
/* Sidebar */
.myprofile .avatar.side{width: 76px;height: 76px;border-radius: 50%;background: linear-gradient(135deg, #cfe1ff, #ffffff 70%);display:flex;place-items: center;font-weight: 800;color: #1e3a8a;    justify-content: center;
font-size: 42px;border: 4px solid #eef3ff;font-family: 'Oswald', sans-serif;}
.sideNew {background: var(--panel);    border: 1px solid var(--line);border-radius: var(--radius-xl);box-shadow: var(--shadow);padding: 22px;}
.sideNew .me {display: grid;grid-template-columns: 76px 1fr;gap: 14px;align-items: center;padding-bottom: 14px;border-bottom: 1px dashed var(--line);margin-bottom: 14px;}
.sideNew .avatar-wrap {position: relative;width: 76px;height: 76px;}
.sideNew .avatarPic{width: 76px;height: 76px;border-radius: 50%;background: linear-gradient(135deg, #cfe1ff, #ffffff 70%);    border: 4px solid #eef3ff;}
.sideNew .avatarName {width: 76px;height: 76px;border-radius: 50%;background: linear-gradient(135deg, #cfe1ff, #ffffff 70%);display: grid;place-items: center;font-weight: 800;color: #1e3a8a;border: 4px solid #eef3ff;font-family: 'Oswald', sans-serif;}
.sideNew .cam {position: absolute;right: -2px;bottom: -2px;width: 28px;height: 28px;border-radius: 999px;display: grid;place-items: center;background: linear-gradient(135deg, var(--brand), var(--brand-500));
box-shadow: 0 6px 14px rgba(37, 99, 235, .25);color: #fff;border: 2px solid #fff;}
.sideNew .cam svg {position: absolute;}
.sideNew .cam input#profile_photo {opacity: 0;width: 28px;height: 28px;border-radius: 15px;z-index: 9;}
.sideNew .me h3 {margin: 0 0 4px 0;font-family: 'Oswald', sans-serif;}
.sideNew .loc {font-size: 13.5px;color: var(--muted);display: flex;gap: 8px;align-items: center;}
.sideNew .quote {margin-top: 14px;display: flex;align-items: center;justify-content: center;gap: 10px;width: 100%;padding: 12px 14px;border-radius: 999px;color: #fff;background: linear-gradient(135deg, var(--brand), var(--brand-400));
border: 0;cursor: pointer;font-weight: 700;box-shadow: 0 12px 22px rgba(37, 99, 235, .28);}
.sideNew .verify-cta{margin-top:12px; width:100%; padding:12px 14px; border-radius:12px;background:#eef4ff; color:#1d4ed8; border:1px solid #d7e4ff; font-weight:700;display:flex; align-items:center; gap:10px; cursor:pointer;animation: pulse 1.5s infinite;}
.card{border: 1px solid var(--line);border-radius: var(--radius-xl);box-shadow: var(--shadow);}
.loc .icon {width: 18px;height: 18px;color: #3b82f6;}
@keyframes pulse {
0%,100% { box-shadow:0 0 0 0 rgba(37,99,235,0.4); }
50% { box-shadow:0 0 0 10px rgba(37,99,235,0); }
}
.sideNew .navBox {margin-top: 12px;display: grid;gap:4px;}
.sideNew .navBox .item{
display:flex; gap:8px; align-items:center; padding:8px 14px; border-radius:12px;
color:var(--ink); text-decoration:none; border:1px solid transparent; transition:.18s; font-size:16px;
}
.sideNew .navBox .item:hover{background:#f5f9ff; border-color:#e6eeff}
.sideNew .navBox .item.active{
background:linear-gradient(180deg,#eaf2ff,#ffffff);
border-color:#dbe7ff; font-weight:700;
}
.sideNew .navBox .icon{width:18px;height:18px;color:#3b82f6}
.sideNew .hr{height:1px; background:var(--line); margin:8px 0}

.sideNew .signout .item{color:#b91c1c;width: 100%;background: #fff;}
.sideNew .signout .item:hover{background:#fff1f2;border-color:#ffe4e6}

.form-control{
    padding: 14px 14px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #dfe7fb;
    outline: none;
    font-size: 15px;
    transition: border .15s, box-shadow .15s;
    font-family: 'Roboto', sans-serif;}

@media screen and (min-width:100px) and (max-width:767px){
.sideNew .navBox{gap:8px;}    
}