.social-panel { margin-top: 58px; padding-top: 30px; border-top: 1px solid #e8e3ef; }
.social-top { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:24px; }
.social-top h2 { font-family:var(--serif); font-size:30px; letter-spacing:-.8px; }
.social-top p { color:var(--muted); font-size:12px; margin-top:5px; }
.social-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.like-button { display:inline-flex; align-items:center; gap:8px; border:1px solid #ded8e9; background:#fff; color:#494454; border-radius:999px; padding:9px 14px; cursor:pointer; font:600 12px var(--sans); transition:.2s; }
.like-button:hover { border-color:#bca7e8; color:#5b2aa8; transform:translateY(-1px); }
.like-button.liked { color:#5b2aa8; background:#f4efff; border-color:#cbb7ed; }
.like-icon { width:16px; height:16px; display:block; }
.like-icon path { fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.rating-box { display:flex; align-items:center; gap:8px; }
.stars { display:flex; gap:2px; }
.star { width:25px; height:25px; padding:0; border:0; background:transparent; cursor:pointer; color:#c9c3d1; font-size:24px; line-height:1; }
.star.active, .star:hover { color:#6b32c9; }
.rating-copy { color:var(--muted); font-size:11px; white-space:nowrap; }
.comments { margin-top:35px; }
.comment-form { display:grid; grid-template-columns:1fr auto; gap:10px; margin-bottom:24px; }
.comment-form textarea { min-height:82px; resize:vertical; border:1px solid #ded9e8; border-radius:13px; padding:12px 14px; font:13px var(--sans); outline:none; }
.comment-form textarea:focus { border-color:#9d7ad8; box-shadow:0 0 0 4px rgba(107,50,201,.08); }
.comment-form button { align-self:end; }
.comment-list { display:grid; gap:13px; }
.comment { background:#fff; border:1px solid #e9e4f0; border-radius:15px; padding:15px; }
.comment-head { display:flex; justify-content:space-between; gap:12px; }
.comment-author { font-size:12px; font-weight:700; }
.comment-date { color:#9993a4; font-size:10px; }
.comment p { color:#4d4857; font-size:12px; line-height:1.7; margin-top:8px; white-space:pre-wrap; }
.comment-empty { color:var(--muted); font-size:12px; padding:18px 0; }
.login-note { color:var(--muted); font-size:12px; background:#faf8ff; border:1px solid #ece6f7; border-radius:12px; padding:13px; margin-bottom:22px; }
.login-note a { color:var(--violet-700); font-weight:700; }

.profile-dashboard { max-width:1000px; margin:0 auto; padding:90px 20px 110px; }
.profile-hero { background:#fff; border:1px solid #e8e3ef; border-radius:25px; padding:36px; box-shadow:0 24px 70px rgba(47,21,96,.07); display:flex; justify-content:space-between; gap:30px; align-items:center; }
.profile-person { display:flex; gap:18px; align-items:center; }
.profile-avatar-lg { width:84px; height:84px; border-radius:50%; background:#eee8ff; color:#4f1fa1; display:grid; place-items:center; font-family:var(--serif); font-size:27px; font-weight:700; }
.profile-hero h1 { font-family:var(--serif); font-size:40px; line-height:1.05; }
.profile-username { color:#6b32c9; font-size:12px; margin-top:6px; }
.profile-email { color:var(--muted); font-size:11px; margin-top:5px; }
.profile-stats { display:flex; gap:24px; flex-wrap:wrap; }
.profile-stat strong { display:block; font-family:var(--serif); font-size:25px; color:#251d31; }
.profile-stat span { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:1px; }
.profile-section { margin-top:42px; }
.profile-section h2 { font-family:var(--serif); font-size:30px; }
.profile-section > p { color:var(--muted); font-size:12px; margin-top:5px; }
.profile-story-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; margin-top:22px; }
.profile-story { background:#fff; border:1px solid #e8e3ef; border-radius:18px; padding:20px; cursor:pointer; transition:.2s; }
.profile-story:hover { transform:translateY(-2px); border-color:#cdbbe9; box-shadow:0 12px 30px rgba(47,21,96,.07); }
.profile-story h3 { font-family:var(--serif); font-size:23px; }
.profile-story .story-tag { display:inline-block; color:#6b32c9; background:#f4efff; border-radius:999px; padding:5px 9px; font-size:9px; font-weight:700; margin-bottom:12px; }
.profile-story-meta { display:flex; gap:18px; margin-top:16px; color:var(--muted); font-size:10px; }
.profile-story-detail { display:none; background:#fff; border:1px solid #e8e3ef; border-radius:20px; padding:25px; margin-top:18px; }
.profile-story-detail.open { display:block; }
.profile-story-detail h3 { font-family:var(--serif); font-size:27px; }
.detail-close { float:right; border:0; background:transparent; color:#7b7487; cursor:pointer; font-size:12px; }
.profile-comments { margin-top:20px; display:grid; gap:10px; }
.profile-comment { border-top:1px solid #eee9f3; padding-top:12px; }
.profile-comment strong { font-size:11px; }
.profile-comment span { color:var(--muted); font-size:10px; margin-left:8px; }
.profile-comment p { font-size:12px; line-height:1.6; color:#4e4858; margin-top:5px; }
.profile-empty { margin-top:22px; padding:35px; border:1px dashed #d9d0e6; border-radius:18px; text-align:center; color:var(--muted); font-size:12px; }
@media(max-width:760px){
 .social-top,.profile-hero { flex-direction:column; align-items:flex-start; }
 .comment-form { grid-template-columns:1fr; }
 .profile-story-grid { grid-template-columns:1fr; }
 .profile-hero h1 { font-size:34px; }
}
.view-count { color:var(--muted); font-size:11px; padding:9px 2px; }

/* Story reader engagement controls */
.social-like, .social-follow {
  appearance:none;
  -webkit-appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px;
  border-radius:999px;
  padding:0 17px;
  cursor:pointer;
  font:700 12px var(--sans);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.social-like {
  border:1px solid #6b32c9;
  background:linear-gradient(135deg,#6b32c9,#4f1fa1);
  color:#fff;
  box-shadow:0 8px 20px rgba(91,42,168,.18);
}
.social-like:hover { transform:translateY(-1px); box-shadow:0 11px 25px rgba(91,42,168,.25); }
.social-like:active, .social-follow:active { transform:translateY(0); }
.social-like.active { background:linear-gradient(135deg,#5b2aa8,#421887); border-color:#421887; }
.social-follow {
  border:1px solid #cdb8ee;
  background:#fff;
  color:#5b2aa8;
  box-shadow:0 5px 16px rgba(91,42,168,.07);
}
.social-follow:hover { transform:translateY(-1px); border-color:#9f7add; background:#faf7ff; box-shadow:0 9px 20px rgba(91,42,168,.12); }
.social-follow.active { background:#f3edff; border-color:#bda5e9; color:#4f1fa1; }
.social-action-icon { width:17px; height:17px; display:block; flex:0 0 17px; }
.social-action-icon path, .social-action-icon circle { fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.social-like .social-action-icon path.heart-fill { fill:currentColor; stroke:currentColor; }
.social-like .social-action-count { min-width:19px; padding-left:9px; margin-left:1px; border-left:1px solid rgba(255,255,255,.35); text-align:center; }
.social-panel .social-actions { margin-top:4px; }
.social-panel .social-actions button:focus-visible { outline:3px solid rgba(107,50,201,.18); outline-offset:3px; }
.story-card-metrics { display:flex; gap:10px; margin-top:8px; color:#8a8394; font-size:9px; flex-wrap:wrap; }
.hall-empty { padding:25px; border:1px dashed rgba(255,255,255,.25); border-radius:16px; color:rgba(255,255,255,.78); }
.hall-empty strong { display:block; font-family:var(--serif); font-size:19px; color:#fff; }
.hall-empty small { display:block; margin-top:6px; line-height:1.6; }
.profile-story-open { margin-top:14px; color:#6b32c9; font-size:11px; font-weight:700; }
.profile-detail-summary { margin-top:12px; color:var(--muted); font-size:12px; line-height:1.6; }
.profile-detail-actions { margin-top:16px; }
.profile-avatar-lg{position:relative;overflow:hidden}
.profile-avatar-lg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;border-radius:inherit;display:none}