/* Engageily Creators: additions on top of style.css */
.creators-main { padding-top: 72px; min-height: 70vh; }
.page-hero { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); color: #fff; }
.creator-card { transition: transform .15s ease, box-shadow .15s ease; }
.creator-card:hover { transform: translateY(-3px); box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.12) !important; }
.avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: #e0e7ff; color: #4f46e5;
    display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.25rem; flex-shrink: 0; }
.avatar-lg { width: 96px; height: 96px; font-size: 2.25rem; }
.badge-verified { background: #dcfce7; color: #166534; }
.badge-self { background: #f3f4f6; color: #4b5563; }
.locked-block { position: relative; border: 1px dashed #c7d2fe; border-radius: .75rem; background: #f5f7ff; }
.dash-layout { display: flex; min-height: calc(100vh - 72px); }
.dash-side { width: 240px; flex-shrink: 0; background: #fff; border-right: 1px solid #e5e7eb; padding: 1.25rem .75rem; }
.dash-side a { display: flex; align-items: center; gap: .6rem; padding: .55rem .85rem; border-radius: .5rem; color: #374151; text-decoration: none; font-weight: 500; font-size: .95rem; }
.dash-side a:hover { background: #f3f4f6; }
.dash-side a.active { background: #eef2ff; color: #4338ca; }
.dash-side .side-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #9ca3af; margin: 1rem .85rem .35rem; }
.dash-body { flex: 1; padding: 1.75rem; background: #f8fafc; min-width: 0; }
.step-dot { width: 28px; height: 28px; border-radius: 50%; background: #e5e7eb; color: #6b7280; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 600; }
.step-dot.done { background: #6366f1; color: #fff; }
.msg-bubble { max-width: 75%; padding: .6rem .9rem; border-radius: 1rem; white-space: pre-wrap; word-break: break-word; }
.msg-me { background: #6366f1; color: #fff; margin-left: auto; border-bottom-right-radius: .25rem; }
.msg-them { background: #f1f5f9; color: #111827; border-bottom-left-radius: .25rem; }
@media (max-width: 991px) {
    .dash-layout { flex-direction: column; }
    .dash-side { width: 100%; border-right: 0; border-bottom: 1px solid #e5e7eb; display: flex; flex-wrap: wrap; gap: .25rem; padding: .75rem; }
    .dash-side .side-title { display: none; }
    .dash-body { padding: 1rem; }
}