/* ─── ResolveGram — app.css ─────────────────────────────────────── */
:root {
  --blue:    #2333FF;
  --coral:   #E85654;
  --dark:    #262626;
  --mid:     #737373;
  --light:   #dbdbdb;
  --bg:      #fafafa;
  --white:   #ffffff;
  --red:     #ed4956;
  --hover:   #f2f2f2;
  --shadow:  0 1px 3px rgba(0,0,0,.08);
  --r:       8px;
  --nav-h:   60px;
  --font:    -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

/* ─── Reset ─────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:14px; line-height:1.5; }
body { font-family:var(--font); background:var(--bg); color:var(--dark); -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button { cursor:pointer; border:none; background:none; font-family:inherit; font-size:inherit; }
input,textarea,select { font-family:inherit; font-size:inherit; }
img { max-width:100%; display:block; }

/* ─── Shared Buttons ─────────────────────────────────────────────── */
.rg-btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:7px 20px; border-radius:8px; font-size:14px; font-weight:600;
  transition:opacity .15s, background .15s; cursor:pointer; border:none;
}
.rg-btn-primary { background:var(--blue); color:#fff; }
.rg-btn-primary:hover { opacity:.85; }
.rg-btn-outline { background:transparent; border:1px solid var(--light); color:var(--dark); }
.rg-btn-outline:hover { background:var(--hover); }
.rg-btn-full { width:100%; }
.rg-btn-link { color:var(--blue); font-size:14px; font-weight:600; }
.rg-btn:disabled,.rg-btn-primary:disabled { opacity:.5; cursor:default; pointer-events:none; }

/* ─── Nav ────────────────────────────────────────────────────────── */
.rg-nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  background:var(--white); border-bottom:1px solid var(--light);
  height:var(--nav-h);
}
.rg-nav-inner {
  max-width:975px; margin:0 auto; height:100%;
  display:flex; align-items:center; padding:0 20px; gap:8px;
}
.rg-nav-logo { display:flex; align-items:center; gap:6px; margin-right:auto; flex-shrink:0; }
.rg-logo-img { height:26px; }
.rg-logo-text .logo-resolve { font-size:18px; font-weight:700; color:var(--dark); font-style:italic; }
.rg-logo-text .logo-gram    { font-size:18px; font-weight:700; color:var(--coral); font-style:italic; }
.rg-nav-search-wrap { flex:0 0 240px; position:relative; }
.rg-search-box { position:relative; }
.rg-search-box input {
  width:100%; padding:8px 12px 8px 36px;
  background:#efefef; border:none; border-radius:8px;
  font-size:14px; color:var(--dark); outline:none;
}
.rg-search-box input:focus { background:#e8e8e8; }
.search-icon {
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; color:var(--mid); pointer-events:none;
}
.search-dropdown {
  position:absolute; top:calc(100% + 4px); left:0; right:0;
  background:var(--white); border:1px solid var(--light);
  border-radius:var(--r); box-shadow:0 4px 12px rgba(0,0,0,.15); z-index:300;
}
.search-result-item { display:flex; align-items:center; gap:10px; padding:10px 14px; cursor:pointer; }
.search-result-item:hover { background:var(--hover); }
.search-result-item img { width:32px; height:32px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.search-result-username { font-size:14px; font-weight:600; }
.search-result-sub { font-size:12px; color:var(--mid); }
.rg-nav-actions { display:flex; align-items:center; gap:2px; }
.nav-icon-btn {
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; color:var(--dark); position:relative; transition:background .1s;
}
.nav-icon-btn:hover { background:var(--hover); }
.nav-icon-btn svg { width:22px; height:22px; }
.nav-icon-btn.active svg { stroke-width:2.5; }
.notif-badge {
  position:absolute; top:3px; right:3px;
  background:var(--red); color:#fff; font-size:10px; font-weight:700;
  min-width:16px; height:16px; border-radius:8px; padding:0 3px;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--white);
}
.nav-avatar { width:26px; height:26px; border-radius:50%; object-fit:cover; border:1px solid var(--light); }
.nav-avatar-btn { padding:0; }

/* ─── Auth ────────────────────────────────────────────────────────── */
.auth-body { background:var(--bg); }
.auth-wrap {
  min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:20px; gap:10px;
}
.auth-card {
  width:100%; max-width:360px; background:var(--white);
  border:1px solid var(--light); border-radius:var(--r); padding:36px 40px 24px;
  text-align:center;
}
.auth-logo { display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:28px; }
.auth-logo-img { height:40px; }
.auth-logo-text .logo-resolve { font-size:24px; font-weight:700; color:var(--dark); font-style:italic; }
.auth-logo-text .logo-gram    { font-size:24px; font-weight:700; color:var(--coral); font-style:italic; }
.auth-tagline { font-size:16px; font-weight:600; color:var(--mid); margin-bottom:16px; line-height:1.4; }
.auth-error { color:var(--red); font-size:13px; margin-bottom:8px; }
.auth-form { display:flex; flex-direction:column; gap:6px; }
.auth-form input {
  width:100%; padding:9px 10px; background:#fafafa;
  border:1px solid var(--light); border-radius:4px; font-size:12px; outline:none;
}
.auth-form input:focus { border-color:#a8a8a8; background:var(--white); }
.auth-form .rg-btn { margin-top:6px; }
.auth-divider { display:flex; align-items:center; gap:12px; margin:16px 0; }
.auth-divider::before,.auth-divider::after { content:''; flex:1; height:1px; background:var(--light); }
.auth-divider span { font-size:13px; font-weight:600; color:var(--mid); }
.auth-forgot a { font-size:12px; color:var(--dark); }
.auth-card-alt { font-size:14px; }
.auth-card-alt a { color:var(--blue); font-weight:600; }
.auth-apps { text-align:center; font-size:14px; color:var(--mid); }
.auth-apps p { margin-bottom:8px; }
.auth-badges { display:flex; gap:8px; justify-content:center; }
.app-badge {
  border:1px solid var(--mid); border-radius:6px; padding:4px 12px;
  font-size:12px; color:var(--dark);
}

/* ─── Feed Layout ─────────────────────────────────────────────────── */
body:not(.auth-body) { padding-top:var(--nav-h); }
.rg-layout {
  max-width:975px; margin:0 auto;
  display:grid; grid-template-columns:470px 1fr;
  gap:28px; padding:24px 20px 60px;
}
@media (max-width:768px) {
  .rg-layout { grid-template-columns:1fr; }
  .rg-sidebar { display:none; }
}
.feed-col { min-width:0; }

/* ─── Stories ─────────────────────────────────────────────────────── */
.stories-bar {
  background:var(--white); border:1px solid var(--light);
  border-radius:var(--r); padding:16px 8px; margin-bottom:24px;
}
.stories-scroll { display:flex; gap:14px; overflow-x:auto; scrollbar-width:none; }
.stories-scroll::-webkit-scrollbar { display:none; }
.story-item {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  flex-shrink:0; cursor:pointer; background:none; border:none; padding:0;
}
.story-ring {
  width:58px; height:58px; border-radius:50%; padding:2px;
  background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
}
.story-ring.own {
  background:none; border:2px solid var(--light);
}
.story-ring img {
  width:100%; height:100%; border-radius:50%;
  object-fit:cover; border:3px solid var(--white);
}
.story-label { font-size:11px; color:var(--dark); max-width:58px; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.story-add { font-size:22px; color:var(--blue); line-height:1; margin-top:2px; }

/* ─── Post Card ─────────────────────────────────────────────────────── */
.post-card {
  background:var(--white); border:1px solid var(--light);
  border-radius:var(--r); margin-bottom:24px; overflow:hidden;
}
.post-header { display:flex; align-items:center; gap:10px; padding:12px 14px; }
.post-user-link { display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
.post-avatar { width:32px; height:32px; border-radius:50%; object-fit:cover; border:1px solid var(--light); flex-shrink:0; }
.post-user-info { display:flex; align-items:center; gap:4px; min-width:0; }
.post-username { font-size:14px; font-weight:600; }
.badge-verified { font-size:12px; color:var(--blue); font-weight:600; }
.post-time { font-size:12px; color:var(--mid); margin-left:4px; }
.post-more-btn { color:var(--mid); padding:4px 8px; font-size:18px; letter-spacing:.05em; border-radius:4px; }
.post-more-btn:hover { background:var(--hover); }
.post-image-wrap { position:relative; }
.post-image { width:100%; aspect-ratio:1; object-fit:cover; background:#efefef; }
.post-actions { display:flex; align-items:center; gap:4px; padding:8px 10px 4px; }
.action-btn {
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; transition:background .1s; color:var(--dark);
}
.action-btn:hover { background:var(--hover); }
.action-btn svg { pointer-events:none; }
.like-btn.liked { color:var(--red); }
.like-btn.liked .heart-svg { fill:currentColor; }
.share-btn { margin-left:auto; }
.post-body { padding:0 14px 10px; }
.post-likes { font-size:14px; margin-bottom:4px; }
.like-count { font-weight:600; }
.post-caption { font-size:14px; line-height:1.5; margin-bottom:4px; }
.caption-user { font-weight:600; margin-right:4px; }
.hashtag { color:var(--blue); }
.post-comments-preview { margin-bottom:4px; }
.see-all-comments { font-size:14px; color:var(--mid); display:block; margin-bottom:4px; }
.comment-row { font-size:14px; margin-bottom:2px; }
.comment-user { font-weight:600; margin-right:4px; }
.comment-text { color:var(--dark); }
.comment-form {
  display:flex; align-items:center; gap:8px;
  border-top:1px solid var(--light); padding:8px 14px;
}
.comment-input { flex:1; border:none; outline:none; font-size:14px; background:transparent; }
.comment-submit { font-size:14px; font-weight:600; color:var(--blue); padding:4px 8px; }
.comment-submit:disabled { opacity:.4; }

/* ─── Sidebar ─────────────────────────────────────────────────────── */
.rg-sidebar { padding-top:8px; }
.sidebar-profile { display:flex; align-items:center; gap:12px; margin-bottom:24px; }
.sidebar-avatar { width:56px; height:56px; border-radius:50%; object-fit:cover; border:1px solid var(--light); }
.sidebar-user-info { flex:1; min-width:0; }
.sidebar-username { font-size:14px; font-weight:600; display:block; }
.sidebar-name { font-size:14px; color:var(--mid); }
.sidebar-logout { font-size:12px; font-weight:600; color:var(--blue); margin-left:auto; }
.sidebar-suggestions { }
.sidebar-section-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.sidebar-section-header span { font-size:14px; font-weight:600; color:var(--mid); }
.sidebar-see-all { font-size:12px; font-weight:600; color:var(--dark); }
.suggestion-row { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.suggestion-avatar { width:32px; height:32px; border-radius:50%; object-fit:cover; border:1px solid var(--light); }
.suggestion-info { flex:1; min-width:0; }
.suggestion-username { font-size:13px; font-weight:600; display:block; }
.suggestion-sub { font-size:11px; color:var(--mid); }
.suggestion-follow { font-size:12px; font-weight:600; color:var(--blue); }
.load-more-wrap { text-align:center; margin:8px 0 0; }
.empty-feed { text-align:center; padding:60px 20px; color:var(--mid); }
.empty-feed-icon { font-size:48px; margin-bottom:12px; }
.rg-footer { margin-top:24px; }
.rg-footer a { font-size:11px; color:var(--mid); margin-right:6px; margin-bottom:4px; display:inline-block; }
.rg-footer p { font-size:11px; color:var(--mid); margin-top:6px; }

/* ─── Profile ─────────────────────────────────────────────────────── */
.profile-layout { max-width:935px; margin:0 auto; padding:32px 20px 60px; }
.profile-header {
  display:flex; align-items:flex-start; gap:60px;
  padding-bottom:44px; border-bottom:1px solid var(--light); margin-bottom:36px;
}
@media (max-width:640px) {
  .profile-header { flex-direction:column; gap:20px; }
}
.profile-avatar-wrap { flex-shrink:0; }
.profile-avatar { width:150px; height:150px; border-radius:50%; object-fit:cover; border:1px solid var(--light); }
.profile-info { flex:1; min-width:0; }
.profile-top-row { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:20px; }
.profile-username { font-size:20px; font-weight:300; display:flex; align-items:center; gap:6px; }
.follow-btn.rg-btn-primary { padding:6px 24px; }
.profile-stats { display:flex; gap:32px; margin-bottom:16px; }
.stat-item { font-size:16px; }
.stat-item strong { font-weight:600; }
.profile-displayname { font-size:14px; font-weight:600; margin-bottom:4px; }
.profile-bio { font-size:14px; line-height:1.6; white-space:pre-line; color:var(--dark); }
.profile-website { font-size:14px; color:var(--blue); font-weight:600; }
.profile-tabs { display:flex; border-top:1px solid var(--light); margin-bottom:4px; }
.profile-tab {
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  padding:12px; font-size:12px; font-weight:600; letter-spacing:.04em;
  color:var(--mid); border-top:1px solid transparent; margin-top:-1px;
}
.profile-tab.active { color:var(--dark); border-top-color:var(--dark); }
.profile-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }
.profile-thumb { display:block; aspect-ratio:1; overflow:hidden; position:relative; background:#efefef; }
.profile-thumb img { width:100%; height:100%; object-fit:cover; transition:opacity .15s; }
.profile-thumb:hover img { opacity:.85; }
.text-thumb { display:none; }
.thumb-overlay {
  position:absolute; inset:0; background:rgba(0,0,0,.3);
  display:flex; align-items:center; justify-content:center; gap:16px;
  opacity:0; transition:opacity .15s; color:#fff; font-size:14px; font-weight:600;
}
.profile-thumb:hover .thumb-overlay { opacity:1; }

/* ─── Post Detail ─────────────────────────────────────────────────── */
.post-detail-layout { max-width:935px; margin:0 auto; padding:28px 20px 60px; }
.post-detail-wrap {
  display:grid; grid-template-columns:1fr 335px;
  border:1px solid var(--light); border-radius:var(--r);
  overflow:hidden; background:var(--white);
}
@media (max-width:700px) { .post-detail-wrap { grid-template-columns:1fr; } }
.post-detail-img { width:100%; aspect-ratio:1; object-fit:cover; background:#efefef; }
.post-detail-side { display:flex; flex-direction:column; border-left:1px solid var(--light); }
.post-detail-header { padding:12px 14px; border-bottom:1px solid var(--light); display:flex; align-items:center; gap:10px; }
.post-detail-comments { flex:1; overflow-y:auto; padding:14px; max-height:380px; }
.post-detail-comment { display:flex; align-items:flex-start; gap:8px; margin-bottom:12px; }
.detail-comment-avatar { width:28px; height:28px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.post-detail-actions { padding:8px 14px 0; border-top:1px solid var(--light); }
.post-detail-meta { padding:2px 14px 8px; font-size:11px; color:var(--mid); }

/* ─── Explore ─────────────────────────────────────────────────────── */
.explore-layout {
  max-width:935px; margin:0 auto; padding:28px 20px 60px;
  display:grid; grid-template-columns:1fr 300px; gap:28px;
}
@media (max-width:700px) { .explore-layout { grid-template-columns:1fr; } }
.explore-main { min-width:0; }
.explore-header { margin-bottom:16px; }
.explore-heading { font-size:16px; font-weight:600; margin-bottom:4px; }
#explore-heading { font-size:16px; font-weight:600; margin-bottom:16px; }
.explore-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }
.explore-thumb { display:block; aspect-ratio:1; overflow:hidden; position:relative; background:#efefef; }
.explore-thumb img { width:100%; height:100%; object-fit:cover; transition:opacity .15s; }
.explore-thumb:hover img { opacity:.85; }
.explore-thumb:hover .thumb-overlay { opacity:1; }
.explore-sidebar { }
.sidebar-section-header { margin-bottom:12px; font-size:14px; font-weight:600; color:var(--mid); }
.trending-tag { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--light); }
.trending-tag:hover .tag-name { color:var(--blue); }
.tag-name { font-size:14px; font-weight:600; }
.tag-count { font-size:12px; color:var(--mid); }

/* ─── New Post ─────────────────────────────────────────────────────── */
.new-post-layout { max-width:600px; margin:0 auto; padding:28px 20px 60px; }
.new-post-layout h2 { font-size:16px; font-weight:600; margin-bottom:20px; }
.new-post-card {
  background:var(--white); border:1px solid var(--light);
  border-radius:var(--r); padding:24px; display:flex; flex-direction:column; gap:16px;
}
.image-preview-box {
  width:100%; aspect-ratio:1; background:#efefef; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; border:2px dashed var(--light);
}
.image-preview-box img { width:100%; height:100%; object-fit:cover; }
.preview-placeholder { text-align:center; color:var(--mid); }
.preview-placeholder svg { width:48px; height:48px; margin:0 auto 8px; stroke:currentColor; fill:none; }
.new-post-form { display:flex; flex-direction:column; gap:10px; }
.caption-textarea {
  width:100%; min-height:80px; resize:vertical; padding:10px;
  border:1px solid var(--light); border-radius:4px; font-size:14px; outline:none;
}
.caption-textarea:focus { border-color:#a8a8a8; }
.char-count { text-align:right; font-size:11px; color:var(--mid); }
.image-url-field { display:flex; flex-direction:column; gap:4px; }
.image-url-field label { font-size:13px; font-weight:600; }
.image-url-field input {
  width:100%; padding:9px 10px; border:1px solid var(--light);
  border-radius:4px; font-size:14px; outline:none;
}

/* ─── Settings ─────────────────────────────────────────────────────── */
.settings-layout { max-width:600px; margin:0 auto; padding:28px 20px 60px; }
.settings-layout h2 { font-size:16px; font-weight:600; margin-bottom:24px; }
.settings-card {
  background:var(--white); border:1px solid var(--light);
  border-radius:var(--r); padding:24px;
}
.settings-avatar-row { display:flex; align-items:center; gap:16px; margin-bottom:20px; }
.settings-avatar { width:56px; height:56px; border-radius:50%; object-fit:cover; border:1px solid var(--light); }
.change-avatar-btn { font-size:14px; font-weight:600; color:var(--blue); }
.settings-form { display:flex; flex-direction:column; gap:16px; }
.form-group { display:flex; flex-direction:column; gap:4px; }
.form-group label { font-size:14px; font-weight:600; }
.form-group input, .form-group textarea {
  padding:9px 10px; border:1px solid var(--light); border-radius:4px;
  font-size:14px; outline:none; background:#fafafa; transition:border-color .15s;
}
.form-group input:focus, .form-group textarea:focus { border-color:#a8a8a8; background:#fff; }
.form-group textarea { min-height:80px; resize:vertical; }
.form-hint { font-size:12px; color:var(--mid); }
.settings-save { align-self:flex-start; }
.settings-msg { font-size:13px; color:#2ecc71; display:none; margin-top:4px; }
.settings-msg.visible { display:block; }

/* ─── Messages ─────────────────────────────────────────────────────── */
.messages-layout-wrap { max-width:935px; margin:0 auto; padding:28px 20px 60px; }
.messages-layout {
  display:grid; grid-template-columns:320px 1fr;
  border:1px solid var(--light); border-radius:var(--r);
  overflow:hidden; background:var(--white); min-height:500px;
}
@media (max-width:700px) { .messages-layout { grid-template-columns:1fr; } }
.conv-list { border-right:1px solid var(--light); overflow-y:auto; }
.conv-list-header { padding:16px 20px; border-bottom:1px solid var(--light); font-size:16px; }
.conv-row { display:flex; align-items:center; gap:12px; padding:12px 16px; cursor:pointer; transition:background .1s; }
.conv-row:hover,.conv-row.active { background:var(--hover); }
.conv-avatar { width:44px; height:44px; border-radius:50%; object-fit:cover; border:1px solid var(--light); flex-shrink:0; }
.conv-info { flex:1; min-width:0; }
.conv-username { font-size:14px; font-weight:600; }
.conv-last { font-size:13px; color:var(--mid); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.conv-empty { padding:20px; color:var(--mid); font-size:14px; text-align:center; }
.messages-pane { display:flex; flex-direction:column; }
.messages-pane-header { padding:12px 20px; border-bottom:1px solid var(--light); display:flex; align-items:center; gap:12px; }
.messages-pane-username { font-size:14px; font-weight:600; }
.messages-list { flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:8px; max-height:380px; }
.message-bubble { max-width:65%; padding:8px 14px; border-radius:18px; font-size:14px; line-height:1.4; }
.message-bubble.mine { background:var(--blue); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }
.message-bubble.theirs { background:#efefef; color:var(--dark); align-self:flex-start; border-bottom-left-radius:4px; }
.msg-time { display:block; font-size:10px; opacity:.6; margin-top:2px; }
.dm-form { padding:12px 20px; border-top:1px solid var(--light); display:flex; gap:10px; }
.dm-input { flex:1; padding:9px 14px; border:1px solid var(--light); border-radius:20px; font-size:14px; outline:none; }
.dm-send { padding:9px 18px; background:var(--blue); color:#fff; border-radius:20px; font-size:14px; font-weight:600; }
.messages-empty { flex:1; display:flex; align-items:center; justify-content:center; color:var(--mid); font-size:14px; }

/* ─── Notifications ─────────────────────────────────────────────────── */
.notif-layout { max-width:600px; margin:0 auto; padding:28px 20px 60px; }
.notif-card { background:var(--white); border:1px solid var(--light); border-radius:var(--r); overflow:hidden; }
.notif-title { font-size:16px; font-weight:600; padding:16px 20px; border-bottom:1px solid var(--light); }
.notif-row { display:flex; align-items:center; gap:12px; padding:12px 20px; border-bottom:1px solid var(--light); }
.notif-row.unread { background:#eef2ff; }
.notif-avatar { width:44px; height:44px; border-radius:50%; object-fit:cover; border:1px solid var(--light); flex-shrink:0; }
.notif-text { flex:1; font-size:14px; line-height:1.4; }
.notif-actor { font-weight:600; }
.notif-post-link { color:var(--blue); font-size:12px; margin-left:4px; }
.notif-time { font-size:12px; color:var(--mid); white-space:nowrap; }
.notif-empty { padding:40px 20px; text-align:center; color:var(--mid); font-size:14px; }

/* ─── Modals ─────────────────────────────────────────────────────────── */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:500;
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; pointer-events:none; transition:opacity .2s;
}
.modal-overlay.open { opacity:1; pointer-events:auto; }
.modal {
  background:var(--white); border-radius:12px; overflow:hidden;
  width:100%; max-width:400px; box-shadow:0 8px 40px rgba(0,0,0,.2);
  transform:scale(.96); transition:transform .2s;
}
.modal-overlay.open .modal { transform:scale(1); }
.modal-header { padding:14px; border-bottom:1px solid var(--light); display:flex; align-items:center; }
.modal-title { flex:1; text-align:center; font-size:15px; font-weight:600; }
.modal-close { color:var(--mid); font-size:22px; line-height:1; cursor:pointer; }
.modal-body { padding:20px; }
.modal-actions { }
.modal-action { padding:14px; text-align:center; font-size:14px; border-bottom:1px solid var(--light); cursor:pointer; transition:background .1s; }
.modal-action:hover { background:var(--hover); }
.modal-action.danger { color:var(--red); font-weight:600; }
.report-modal-form { display:flex; flex-direction:column; gap:12px; }
.report-modal-form label { font-size:14px; font-weight:600; }
.report-modal-form select, .report-modal-form input {
  width:100%; padding:9px 10px; border:1px solid var(--light); border-radius:4px; font-size:14px; outline:none;
}
.report-modal-form .evidence-hint { font-size:12px; color:var(--mid); }

/* ─── Story Overlay ─────────────────────────────────────────────────── */
.story-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.92); z-index:600;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .2s;
}
.story-overlay.open { opacity:1; pointer-events:auto; }
.story-viewer { position:relative; width:380px; max-width:95vw; }
.story-media { width:100%; border-radius:12px; object-fit:cover; max-height:75vh; }
.story-close { position:absolute; top:12px; right:12px; color:#fff; font-size:28px; cursor:pointer; line-height:1; }
.story-user-info { position:absolute; top:12px; left:12px; display:flex; align-items:center; gap:8px; color:#fff; }
.story-user-info img { width:32px; height:32px; border-radius:50%; border:2px solid #fff; object-fit:cover; }
.story-user-info span { font-size:13px; font-weight:600; }

/* ─── Utilities ─────────────────────────────────────────────────────── */
.spinner {
  width:20px; height:20px; border-radius:50%;
  border:2px solid var(--light); border-top-color:var(--blue);
  animation:spin .6s linear infinite; margin:20px auto;
}
@keyframes spin { to { transform:rotate(360deg); } }
.text-mid { color:var(--mid); }
.font-bold { font-weight:700; }
.font-semibold { font-weight:600; }

/* ─── Shared Input (.rg-input) ───────────────────────────────────── */
.rg-input {
  width:100%; padding:9px 10px;
  background:#fafafa; border:1px solid var(--light); border-radius:4px;
  font-size:14px; color:var(--dark); outline:none; transition:border-color .15s;
  display:block;
}
.rg-input:focus { border-color:#a8a8a8; background:var(--white); }
textarea.rg-input { resize:vertical; min-height:80px; }
.rg-input:disabled { opacity:.6; cursor:default; }

/* ─── Settings extended ──────────────────────────────────────────── */
.settings-layout {
  max-width:935px; margin:0 auto; padding:28px 20px 60px;
  display:grid; grid-template-columns:240px 1fr; gap:32px;
}
@media (max-width:700px) { .settings-layout { grid-template-columns:1fr; } }
.settings-nav { display:flex; flex-direction:column; }
.settings-nav-link { padding:12px 16px; font-size:14px; color:var(--dark); border-left:2px solid transparent; }
.settings-nav-link:hover { background:var(--hover); }
.settings-nav-link.active { border-left-color:var(--dark); font-weight:600; }
.settings-pane { }
.settings-avatar-row { display:flex; align-items:center; gap:20px; margin-bottom:24px; }
.settings-avatar { width:56px; height:56px; border-radius:50%; object-fit:cover; border:1px solid var(--light); }
.settings-username { font-size:20px; font-weight:300; }
.rg-btn-link { color:var(--blue); font-size:14px; font-weight:600; }
.settings-msg { font-size:13px; margin-bottom:12px; }
.settings-form { display:flex; flex-direction:column; gap:16px; }
.sf-group { display:flex; flex-direction:column; gap:4px; }
.sf-group-submit { flex-direction:row; align-items:center; gap:12px; margin-top:8px; }
.sf-label { font-size:14px; font-weight:600; }
.sf-hint { font-size:12px; color:var(--mid); }

/* ─── New Post extended ──────────────────────────────────────────── */
.new-post-layout {
  max-width:640px; margin:0 auto; padding:28px 20px 60px;
}
.new-post-card {
  background:var(--white); border:1px solid var(--light);
  border-radius:var(--r); overflow:hidden;
}
.new-post-header { padding:12px 16px; border-bottom:1px solid var(--light); }
.new-post-header h2 { font-size:16px; font-weight:600; }
.new-post-form { padding:20px; display:flex; flex-direction:column; gap:16px; }
.np-image-section { display:flex; flex-direction:column; gap:8px; }
.np-preview { border-radius:8px; overflow:hidden; max-height:320px; }
.np-preview img { width:100%; height:100%; object-fit:cover; }
.np-caption {
  width:100%; min-height:120px; resize:vertical; padding:10px;
  border:none; border-top:1px solid var(--light); font-size:14px;
  line-height:1.5; outline:none; font-family:var(--font);
}
.np-footer { display:flex; align-items:center; justify-content:space-between; }
.char-count { font-size:12px; color:var(--mid); }
.np-result { padding:10px 16px; font-size:14px; }
.np-result.success { color:#2ecc71; }
.np-result.error { color:var(--red); }

/* ─── Report modal (rg-modal-overlay) ───────────────────────────── */
.rg-modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:500;
  display:none; align-items:center; justify-content:center; padding:20px;
}
.rg-modal-overlay[style*=flex] { display:flex !important; }
.rg-modal {
  background:var(--white); border-radius:12px; overflow:hidden;
  width:100%; max-width:400px; box-shadow:0 8px 40px rgba(0,0,0,.2);
}
.report-options { display:flex; flex-direction:column; padding:8px 20px; gap:8px; }
.report-option { display:flex; align-items:center; gap:8px; font-size:14px; padding:4px 0; cursor:pointer; }
.modal-desc { padding:12px 20px 0; font-size:14px; color:var(--mid); }
.modal-evidence { padding:12px 20px; display:flex; flex-direction:column; gap:6px; }
.modal-label { font-size:13px; font-weight:600; }
.modal-result { padding:8px 20px; font-size:13px; }
.modal-actions { display:flex; gap:8px; padding:12px 20px; }
.rg-btn-danger { background:var(--red); color:#fff; }
.rg-btn-danger:hover { opacity:.85; }

/* ─── Story progress bar ────────────────────────────────────────── */
.story-overlay { display:none; }
.story-overlay[style*=flex] { display:flex !important; }
.story-progress { position:absolute; top:8px; left:8px; right:8px; height:3px; background:rgba(255,255,255,.4); border-radius:2px; }
.story-progress-bar { height:100%; background:#fff; border-radius:2px; width:0; animation:storyprog 5s linear forwards; }
@keyframes storyprog { to { width:100%; } }
.story-content { width:100%; max-width:380px; position:relative; }
.story-media { width:100%; border-radius:12px; max-height:75vh; object-fit:cover; }
.story-close { position:absolute; top:-40px; right:0; color:#fff; font-size:28px; cursor:pointer; line-height:1; }
.story-user-info { position:absolute; top:12px; left:12px; display:flex; align-items:center; gap:8px; color:#fff; }
.story-user-info img { width:32px; height:32px; border-radius:50%; border:2px solid #fff; object-fit:cover; }