/* Liberty Stories v0.2.1 */
.liberty-stories { --ring: conic-gradient(#f99, #f9f, #99f, #9ff, #9f9, #ff9, #f99); font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.ls-profile-card { position:relative; display:grid; grid-template-columns: 84px 1fr auto; grid-template-rows:auto auto; gap:12px; align-items:center; padding:16px; border:1px solid #eee; border-radius:16px; margin:8px; background:#fff; }
.ls-profile-avatar { background:none; border:0; padding:0; cursor:pointer; width:72px; height:72px; border-radius:50%; position:relative; }
.ls-profile-avatar img { width:72px; height:72px; border-radius:50%; object-fit:cover; border:2px solid #ddd; display:block; }
.ls-profile-avatar.ls-has-stories img { border: 3px solid transparent; background: var(--ring) padding-box, #fff border-box; }

.ls-stats { display:flex; gap:24px; align-items:center; }
.ls-stats div { display:flex; flex-direction:column; line-height:1.1; }
.ls-stats strong { font-size:18px; }
.ls-stats span { font-size:12px; color:#666; }

.ls-bio { grid-column: 1 / span 2; margin-left: 96px; display:flex; flex-direction:column; gap:4px; }
.ls-name { font-weight:700; font-size:16px; }
.ls-desc { color:#333; font-size:14px; }
.ls-location { color:#3897f0; text-decoration:none; font-size:13px; }

.ls-actions { display:flex; gap:10px; align-items:center; }
.ls-btn { display:inline-block; padding:10px 14px; border-radius:10px; border:1px solid #ddd; background:#fff; text-decoration:none; color:#000; font-weight:700; font-size:14px; }
.ls-btn.ls-follow { background:#3897f0; color:#fff; border-color:#2f7ac5; }
.ls-btn.ls-msg { color:#ff2d89; border-color:#ffd4e6; background:#fff; }

.liberty-stories-avatars { display:flex; gap:14px; align-items:center; overflow:auto; padding:10px 8px; }
.liberty-stories-avatars .ls-avatar { background: none; border: 0; padding: 0; cursor: pointer; position: relative; }
.ls-avatar img { width:64px; height:64px; border-radius:50%; display:block; border:3px solid #ddd; }
.ls-avatar.ls-has-new img { border: 3px solid transparent; background: var(--ring) padding-box, #fff border-box; }

.liberty-stories-viewer { position: fixed; inset:0; background:#000; display:flex; align-items:center; justify-content:center; z-index: 99999; }
.liberty-stories-viewer .ls-slide { position: relative; width: min(100vw, 56.25vh); height: 100vh; display:flex; align-items:center; justify-content:center; }
.liberty-stories-viewer .ls-media { max-width: 100%; max-height: 100%; object-fit: contain; }

.ls-progress { position:absolute; top: 12px; left:50%; transform: translateX(-50%); width: min(94vw, 52.8vh); display:flex; gap:6px; z-index:3; }
.ls-progress-bar { flex:1; height: 3px; background: rgba(255,255,255,.2); border-radius: 3px; overflow:hidden; }
.ls-progress-bar.active::after { content:''; display:block; height:100%; width: var(--pct, 0%); background:#fff; transition: width 50ms linear; }
.ls-progress-bar.done { background: rgba(255,255,255,.7); }

.ls-close { position:absolute; top: 10px; right: 12px; z-index:4; color:#fff; background: rgba(0,0,0,.4); border:0; width:36px; height:36px; border-radius:8px; font-size:28px; line-height:36px; cursor:pointer; }

.ls-topbar { position:absolute; top:20px; left: 50%; transform: translateX(-50%); width: min(94vw, 52.8vh); display:flex; justify-content:space-between; align-items:center; z-index:4; pointer-events:none; }
.ls-author { display:flex; gap:8px; align-items:center; color:#fff; font-weight:600; }
.ls-author-avatar { width:28px; height:28px; border-radius:50%; }
.ls-cta { pointer-events:auto; padding:8px 12px; background:#ffffff; color:#000; border-radius:999px; font-weight:700; text-decoration:none; }

.ls-reply { position:absolute; bottom: 24px; left:50%; transform: translateX(-50%); width: min(94vw, 52.8vh); display:flex; gap:8px; z-index:4; }
.ls-reply input { flex:1; padding:12px 14px; border-radius:999px; border:0; }
.ls-reply button { padding:12px 16px; border-radius:999px; border:0; font-weight:700; }

.ls-comments-rolling { position:absolute; bottom: 84px; left: 50%; transform: translateX(-50%); width: min(94vw, 52.8vh); display:flex; flex-direction:column; gap:6px; z-index:4; pointer-events:none; }
.ls-bubble { align-self:flex-start; background: rgba(0,0,0,.55); color:#fff; padding:8px 10px; border-radius:12px; max-width: 80%; }

.ls-empty { color:#666; font-size:14px; padding: 6px 10px; }

@media (max-width: 640px) {
  .ls-profile-card { grid-template-columns: 64px 1fr; }
  .ls-actions { grid-column: 1 / -1; }
  .ls-bio { margin-left: 0; grid-column: 1 / -1; }
}