:root{
--primary:#0B6EFD;
--primary-dark:#0957c9;
--success:#22C55E;
--warning:#F59E0B;
--danger:#EF4444;
--bg:#F5F7FB;
--card:#FFFFFF;
--text:#1E293B;
--muted:#64748B;
--border:#E5E7EB;
--radius:18px;
--shadow:
0 12px 30px rgba(15,23,42,.06);
--transition:.25s ease;
}
*,
*:before,
*:after{
box-sizing:border-box;
}
.emdr-portal{
max-width:1450px;
margin:40px auto;
display:flex;
gap:30px;
align-items:flex-start;
font-family:
Inter,
system-ui,
sans-serif;
} .emdr-sidebar{
width:270px;
background:var(--card);
border-radius:22px;
box-shadow:var(--shadow);
overflow:hidden;
position:sticky;
top:30px;
}
.emdr-logo{
padding:30px;
background:linear-gradient(
135deg,
#0B6EFD,
#4C8DFF
);
color:#fff;
}
.emdr-logo h2{
margin:0;
font-size:24px;
}
.emdr-logo span{
display:block;
margin-top:8px;
opacity:.85;
font-size:14px;
}
.emdr-menu{
padding:15px;
}
.emdr-menu a{
display:flex;
align-items:center;
gap:14px;
text-decoration:none;
color:var(--text);
padding:15px 18px;
border-radius:14px;
margin-bottom:6px;
transition:var(--transition);
font-weight:600;
}
.emdr-menu a span{
width:24px;
text-align:center;
}
.emdr-menu a:hover{
background:#EEF4FF;
color:var(--primary);
}
.emdr-menu a.active{
background:var(--primary);
color:#fff;
} .emdr-content{
flex:1;
}
.emdr-header{
margin-bottom:25px;
}
.emdr-header h1{
margin:0;
font-size:36px;
color:var(--text);
}
.emdr-header p{
margin-top:8px;
color:var(--muted);
} .emdr-profile-card{
background:#fff;
border-radius:22px;
padding:35px;
display:flex;
gap:35px;
box-shadow:var(--shadow);
margin-bottom:30px;
}
.emdr-profile-photo{
width:240px;
flex-shrink:0;
}
.emdr-profile-photo img{
display:block;
width:100%;
height:auto;
border-radius:20px;
box-shadow:
0 12px 30px rgba(0,0,0,.08);
}
.emdr-profile-info{
flex:1;
}
.emdr-profile-info h2{
margin:0;
font-size:34px;
color:var(--text);
}
.emdr-city{
margin-top:16px;
color:var(--muted);
font-size:17px;
} .emdr-badge{
display:inline-flex;
align-items:center;
padding:10px 18px;
border-radius:999px;
margin-top:16px;
font-size:14px;
font-weight:700;
}
.emdr-training{
background:#FFF8DD;
color:#946200;
}
.emdr-therapist{
background:#E7F8EE;
color:#118046;
}
.emdr-consultant-training{
background:#E8F2FF;
color:#0B6EFD;
}
.emdr-consultant{
background:#F2E9FF;
color:#6A28C7;
}
.emdr-trainer{
background:#FFE8E8;
color:#D81F1F;
}
.emdr-default{
background:#F1F5F9;
color:#64748B;
} .emdr-tags{
margin-top:22px;
}
.emdr-tags span{
display:inline-block;
margin:5px;
padding:8px 15px;
border-radius:30px;
background:#EEF5FF;
color:var(--primary);
font-size:14px;
} .emdr-description{
margin-top:25px;
color:#475569;
line-height:1.8;
}
.emdr-description p{
margin:0 0 15px;
} .emdr-actions{
margin-top:35px;
}
.emdr-btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:14px 24px;
border-radius:12px;
text-decoration:none;
font-weight:700;
transition:var(--transition);
margin-right:12px;
}
.emdr-btn.primary{
background:var(--primary);
color:#fff;
}
.emdr-btn.primary:hover{
background:var(--primary-dark);
}
.emdr-btn.secondary{
background:#EEF4FF;
color:var(--primary);
}
.emdr-btn.secondary:hover{
background:#DFEBFF;
} .emdr-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:24px;
margin-top:30px;
}
.emdr-widget{
background:#fff;
border-radius:20px;
padding:28px;
box-shadow:var(--shadow);
transition:var(--transition);
position:relative;
overflow:hidden;
}
.emdr-widget:hover{
transform:translateY(-6px);
box-shadow:0 18px 40px rgba(15,23,42,.10);
}
.emdr-widget::before{
content:"";
position:absolute;
top:0;
left:0;
width:5px;
height:100%;
background:var(--primary);
}
.emdr-widget .icon{
width:58px;
height:58px;
border-radius:16px;
display:flex;
align-items:center;
justify-content:center;
background:#EEF5FF;
font-size:28px;
margin-bottom:18px;
}
.emdr-widget h3{
margin:0 0 12px;
font-size:21px;
color:var(--text);
}
.emdr-widget p{
margin:0;
color:var(--muted);
line-height:1.6;
font-size:15px;
}
.emdr-widget .value{
display:block;
margin-top:18px;
font-size:28px;
font-weight:700;
color:var(--text);
}
.emdr-widget .status{
display:inline-block;
margin-top:16px;
padding:8px 14px;
border-radius:30px;
font-size:13px;
font-weight:700;
}
.status-success{
background:#EAF9EF;
color:#15803D;
}
.status-warning{
background:#FFF8E0;
color:#A16207;
}
.status-danger{
background:#FDECEC;
color:#DC2626;
} .emdr-empty{
background:#fff;
border-radius:22px;
box-shadow:var(--shadow);
padding:70px 40px;
text-align:center;
}
.emdr-empty h2{
margin:0 0 20px;
font-size:32px;
}
.emdr-empty p{
margin:0;
color:var(--muted);
line-height:1.8;
max-width:650px;
margin-left:auto;
margin-right:auto;
} .emdr-login-required{
max-width:600px;
margin:80px auto;
background:#fff;
border-radius:22px;
padding:50px;
text-align:center;
box-shadow:var(--shadow);
}
.emdr-login-required h2{
margin-top:0;
}
.emdr-login-required p{
color:var(--muted);
} .emdr-table{
width:100%;
border-collapse:collapse;
background:#fff;
border-radius:18px;
overflow:hidden;
box-shadow:var(--shadow);
}
.emdr-table th{
background:#F8FAFC;
color:#334155;
text-align:left;
padding:18px;
font-weight:700;
}
.emdr-table td{
padding:18px;
border-top:1px solid #EEF2F7;
} .emdr-card{
background:#fff;
border-radius:20px;
padding:30px;
box-shadow:var(--shadow);
margin-bottom:25px;
}
.emdr-card h2{
margin-top:0;
} .emdr-form label{
display:block;
margin-bottom:8px;
font-weight:600;
}
.emdr-form input,
.emdr-form textarea,
.emdr-form select{
width:100%;
padding:14px 16px;
border:1px solid var(--border);
border-radius:12px;
margin-bottom:20px;
transition:var(--transition);
}
.emdr-form input:focus,
.emdr-form textarea:focus,
.emdr-form select:focus{
outline:none;
border-color:var(--primary);
box-shadow:0 0 0 4px rgba(11,110,253,.10);
} @media (max-width:1200px){
.emdr-portal{
flex-direction:column;
}
.emdr-sidebar{
width:100%;
position:relative;
top:auto;
}
}
@media (max-width:900px){
.emdr-profile-card{
flex-direction:column;
}
.emdr-profile-photo{
width:100%;
max-width:320px;
margin:auto;
}
.emdr-profile-info{
text-align:center;
}
.emdr-actions{
display:flex;
flex-direction:column;
gap:12px;
}
.emdr-btn{
width:100%;
margin-right:0;
}
}
@media (max-width:600px){
.emdr-header h1{
font-size:28px;
}
.emdr-profile-info h2{
font-size:28px;
}
.emdr-grid{
grid-template-columns:1fr;
}
.emdr-widget{
padding:22px;
}
}