@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ═══════════════════════════════════════════════════
   VARIABLES
═══════════════════════════════════════════════════ */
:root {
  --bg:#080808; --surface:#101010; --surface-2:#161616; --surface-3:#1c1c1c;
  --border:#1e1e1e; --border-2:#2a2a2a; --text:#f0f0f0; --text-2:#a0a0a0; --text-3:#505050;
  --green:#5cdb6f; --green-dk:#4bc45e; --green-glow:rgba(92,219,111,0.15); --green-subtle:rgba(92,219,111,0.08);
  --red:#ff4466; --red-subtle:rgba(255,68,102,0.1); --orange:#f59e0b;
  --radius-sm:8px; --radius:14px; --radius-lg:22px; --radius-full:999px;
  --shadow:0 4px 24px rgba(0,0,0,0.4); --shadow-green:0 0 20px rgba(92,219,111,0.12);
  --sidebar-w:250px; --trends-w:300px; --feed-w:600px; --transition:0.18s cubic-bezier(0.4,0,0.2,1);
}

/* ═══════════════════════════════════════════════════
   RESET
═══════════════════════════════════════════════════ */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent }
html  { scroll-behavior:smooth }
body  { background:var(--bg); color:var(--text); font-family:'Inter',system-ui,-apple-system,sans-serif; font-size:15px; line-height:1.5; min-height:100vh; overflow-x:hidden }
a     { color:inherit; text-decoration:none }
img,video { display:block; max-width:100%; object-fit:cover }
button { font-family:inherit; cursor:pointer }
input,textarea { font-family:inherit }
::-webkit-scrollbar       { width:4px; height:4px }
::-webkit-scrollbar-track { background:transparent }
::-webkit-scrollbar-thumb { background:var(--border-2); border-radius:2px }
::-webkit-scrollbar-thumb:hover { background:var(--text-3) }

/* ═══════════════════════════════════════════════════
   LAYOUT
═══════════════════════════════════════════════════ */
.app-layout { display:grid; grid-template-columns:var(--sidebar-w) var(--feed-w) var(--trends-w); max-width:1150px; margin:0 auto; min-height:100vh }

/* ═══════════════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════════════ */
.sidebar { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; padding:20px 12px; border-right:1px solid var(--border); overflow-y:auto; overflow-x:hidden }
.logo    { font-size:1.6rem; font-weight:900; color:var(--green); padding:10px 14px 24px; letter-spacing:-0.5px; display:flex; align-items:center; gap:8px }
nav      { display:flex; flex-direction:column; gap:2px }
.nav-item        { display:flex; align-items:center; gap:14px; padding:12px 14px; border-radius:var(--radius-full); font-size:0.97rem; font-weight:500; color:var(--text-2); transition:all var(--transition); white-space:nowrap }
.nav-item:hover  { background:var(--surface-2); color:var(--text) }
.nav-item.active { background:var(--green-subtle); color:var(--green); font-weight:700 }
.nav-item .nav-icon { font-size:1.1rem; flex-shrink:0; width:24px; text-align:center }
.nav-badge { background:var(--green); color:#050505; border-radius:var(--radius-full); min-width:18px; height:18px; padding:0 5px; font-size:0.68rem; font-weight:900; display:inline-flex; align-items:center; justify-content:center; margin-left:auto }
.btn-post-sidebar { margin-top:16px; background:var(--green); color:#050505; border:none; border-radius:var(--radius-full); padding:13px 20px; font-size:0.93rem; font-weight:800; transition:all var(--transition); box-shadow:var(--shadow-green); width:100%; display:flex; align-items:center; justify-content:center; gap:8px }
.btn-post-sidebar:hover { background:var(--green-dk); transform:translateY(-1px) }
.sidebar-user       { margin-top:auto; display:flex; align-items:center; gap:10px; padding:12px 10px; border-radius:var(--radius); cursor:pointer; transition:background var(--transition); overflow:hidden }
.sidebar-user:hover { background:var(--surface-2) }
.sidebar-user img,.sidebar-user video { width:38px; height:38px; border-radius:50%; object-fit:cover; flex-shrink:0; background:var(--surface-3) }
.sidebar-user div    { overflow:hidden }
.sidebar-user strong { font-size:0.87rem; font-weight:700; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.sidebar-user small  { color:var(--text-3); font-size:0.75rem }

/* ═══════════════════════════════════════════════════
   FEED
═══════════════════════════════════════════════════ */
.feed        { border-right:1px solid var(--border); min-height:100vh }
.feed-header { position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:0 20px; height:56px; background:rgba(8,8,8,0.85); backdrop-filter:blur(20px); border-bottom:1px solid var(--border) }
.feed-header h2 { font-size:1.05rem; font-weight:800; letter-spacing:-0.3px }
.btn-logout       { background:transparent; border:1px solid var(--border-2); color:var(--text-3); padding:6px 14px; border-radius:var(--radius-full); font-size:0.78rem; font-weight:600; transition:all var(--transition) }
.btn-logout:hover { border-color:var(--red); color:var(--red); background:var(--red-subtle) }

/* ═══════════════════════════════════════════════════
   COMPOSER (new-post)
═══════════════════════════════════════════════════ */
.new-post { display:flex; gap:14px; padding:16px 20px; border-bottom:8px solid var(--surface) }
.avatar   { width:44px; height:44px; border-radius:50%; object-fit:cover; background:var(--surface-3); flex-shrink:0 }
.post-input-area { flex:1; display:flex; flex-direction:column; gap:10px; min-width:0 }
.post-input-area textarea { width:100%; background:transparent; border:none; border-bottom:1px solid var(--border); color:var(--text); font-size:1.05rem; resize:none; outline:none; padding:6px 0 10px; min-height:60px; transition:border-color var(--transition); line-height:1.5 }
.post-input-area textarea:focus { border-bottom-color:var(--green) }
.post-input-area textarea::placeholder { color:var(--text-3) }
.image-preview-box         { position:relative; border-radius:var(--radius); overflow:hidden; max-height:280px; border:1px solid var(--border) }
.image-preview-box.hidden  { display:none }
.image-preview-box img, .image-preview-box video { width:100%; max-height:280px; object-fit:contain }
.remove-image       { position:absolute; top:8px; right:8px; background:rgba(0,0,0,0.75); color:#fff; border:none; border-radius:50%; width:30px; height:30px; font-size:0.85rem; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px); transition:background var(--transition) }
.remove-image:hover { background:var(--red) }
.post-actions         { display:flex; align-items:center; justify-content:space-between; padding-top:8px; border-top:1px solid var(--border) }
.post-actions-left    { display:flex; align-items:center; gap:4px }
.btn-icon             { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; font-size:1.05rem; color:var(--green); transition:all var(--transition); background:none; border:none }
.btn-icon:hover       { background:var(--green-subtle) }
#charCount  { font-size:0.78rem; color:var(--text-3); font-weight:500; padding:0 6px }
#btnPost    { background:var(--green); color:#050505; border:none; border-radius:var(--radius-full); padding:8px 20px; font-weight:800; font-size:0.88rem; transition:all var(--transition); box-shadow:var(--shadow-green); display:flex; align-items:center; gap:6px }
#btnPost:hover    { background:var(--green-dk); transform:translateY(-1px) }
#btnPost:disabled { opacity:0.5; cursor:not-allowed; transform:none }

/* ═══════════════════════════════════════════════════
   POSTS
═══════════════════════════════════════════════════ */
.post-card        { display:flex; gap:12px; padding:16px 20px; border-bottom:1px solid var(--border); transition:background var(--transition); animation:fadeSlideIn 0.25s ease }
.post-card:hover  { background:var(--surface) }
@keyframes fadeSlideIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }
.post-body   { flex:1; min-width:0 }
.post-user   { display:flex; align-items:center; gap:6px; margin-bottom:4px; flex-wrap:wrap }
.post-user strong        { font-size:0.92rem; font-weight:700; cursor:pointer; display:flex; align-items:center; gap:4px }
.post-user strong:hover  { color:var(--green) }
.post-user .handle       { color:var(--text-3); font-size:0.82rem; cursor:pointer }
.post-user .handle:hover { color:var(--text-2) }
.post-user .post-time    { margin-left:auto; color:var(--text-3); font-size:0.75rem; white-space:nowrap }
.post-text { font-size:0.95rem; line-height:1.6; color:#d8d8d8; margin-bottom:10px; word-break:break-word; white-space:pre-wrap }
.post-img        { width:100%; max-height:380px; object-fit:cover; border-radius:var(--radius); margin-bottom:10px; cursor:zoom-in; border:1px solid var(--border); transition:opacity var(--transition) }
.post-img:hover  { opacity:0.92 }
.post-footer { display:flex; align-items:center; gap:4px; margin-top:4px }
.post-btn               { display:flex; align-items:center; gap:5px; background:none; border:none; color:var(--text-3); font-size:0.8rem; font-weight:500; padding:5px 10px; border-radius:var(--radius-full); transition:all var(--transition) }
.post-btn:hover         { color:var(--green); background:var(--green-subtle) }
.post-btn.liked         { color:var(--red) }
.post-btn.liked:hover   { background:var(--red-subtle); color:var(--red) }
.post-btn.reposted      { color:var(--green) }
.post-btn.delete:hover  { color:var(--red); background:var(--red-subtle) }

/* ═══════════════════════════════════════════════════
   LOAD MORE / ESTADOS
═══════════════════════════════════════════════════ */
.load-more-box        { display:flex; justify-content:center; padding:24px 20px }
.load-more-box.hidden { display:none }
#btnLoadMore       { background:transparent; border:1px solid var(--border-2); color:var(--green); border-radius:var(--radius-full); padding:10px 28px; font-size:0.88rem; font-weight:700; transition:all var(--transition) }
#btnLoadMore:hover { background:var(--green-subtle); border-color:var(--green) }
.loading      { text-align:center; padding:48px 20px; color:var(--text-3); font-size:0.9rem }
.empty-state  { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:64px 20px; gap:12px; color:var(--text-3) }
.empty-state div { font-size:3.5rem }
.empty-state p   { font-size:0.9rem; line-height:1.6; text-align:center }

/* ═══════════════════════════════════════════════════
   TRENDS (PANEL DERECHO)
═══════════════════════════════════════════════════ */
.trends     { padding:16px 16px 16px 20px; display:flex; flex-direction:column; gap:16px; position:sticky; top:0; height:100vh; overflow-y:auto }
.trends-box { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px; overflow:hidden }
.trends-box h3 { font-size:0.88rem; font-weight:800; color:var(--text-2); letter-spacing:0.5px; text-transform:uppercase; margin-bottom:14px }
.suggestion       { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--border) }
.suggestion:last-child { border-bottom:none }
.avatar-sm        { width:36px; height:36px; border-radius:50%; object-fit:cover; background:var(--surface-3); flex-shrink:0 }
.suggestion div   { flex:1; min-width:0 }
.suggestion div strong { font-size:0.86rem; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.suggestion div small  { color:var(--text-3); font-size:0.75rem }
.btn-seguir       { background:var(--text); color:var(--bg); border:none; border-radius:var(--radius-full); padding:5px 14px; font-size:0.78rem; font-weight:700; transition:all var(--transition); flex-shrink:0 }
.btn-seguir:hover { background:#d0d0d0 }
.vid-item         { display:flex; align-items:center; gap:10px; padding:8px 0; cursor:pointer; border-bottom:1px solid var(--border); transition:background var(--transition) }
.vid-item:last-child { border-bottom:none }
.vid-item:hover   { background:var(--surface-2); margin:0 -4px; padding-left:4px; padding-right:4px; border-radius:var(--radius-sm) }
.vid-thumb  { width:52px; height:36px; border-radius:6px; object-fit:cover; flex-shrink:0; background:var(--surface-3) }
.vid-title  { font-size:0.78rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.vid-sub    { font-size:0.68rem; color:var(--text-3) }

/* ═══════════════════════════════════════════════════
   COMENTARIOS
═══════════════════════════════════════════════════ */
.comments-section  { margin-top:12px; border-top:1px solid var(--border); padding-top:12px; animation:fadeSlideIn .2s ease }
.comments-list     { display:flex; flex-direction:column; gap:12px; max-height:320px; overflow-y:auto; padding-bottom:8px }
.comment-item      { display:flex; gap:10px; animation:fadeSlideIn .2s ease }
.comment-body      { flex:1; min-width:0 }
.comment-header    { display:flex; align-items:center; gap:5px; flex-wrap:wrap; margin-bottom:3px }
.comment-text      { font-size:.88rem; line-height:1.5; color:#c8c8c8; word-break:break-word; white-space:pre-wrap; background:var(--surface-2); padding:8px 12px; border-radius:0 12px 12px 12px; border:1px solid var(--border) }
.comment-footer    { display:flex; align-items:center; gap:6px; margin-top:4px; padding-left:2px }
.no-comments       { color:var(--text-3); font-size:.82rem; padding:10px 0; display:flex; align-items:center; gap:6px }
.comment-input-row  { display:flex; align-items:center; gap:8px; margin-top:10px; padding-top:8px; border-top:1px solid var(--border) }
.comment-input-wrap { flex:1; display:flex; align-items:center; background:var(--surface-2); border:1px solid var(--border-2); border-radius:var(--radius-full); padding:6px 6px 6px 14px; gap:6px; transition:border-color var(--transition) }
.comment-input-wrap:focus-within { border-color:var(--green) }
.comment-input              { flex:1; background:none; border:none; color:var(--text); font-size:.88rem; outline:none }
.comment-input::placeholder { color:var(--text-3) }
.btn-send-comment       { background:var(--green); color:#050505; border:none; border-radius:50%; width:30px; height:30px; display:flex; align-items:center; justify-content:center; font-size:.88rem; transition:all var(--transition); flex-shrink:0 }
.btn-send-comment:hover { background:var(--green-dk); transform:scale(1.05) }

/* ═══════════════════════════════════════════════════
   MODALES
═══════════════════════════════════════════════════ */
.modal-overlay        { position:fixed; inset:0; background:rgba(0,0,0,0.85); z-index:300; display:flex; align-items:center; justify-content:center; padding:20px; backdrop-filter:blur(4px); animation:fadeIn 0.2s ease }
.modal-overlay.hidden { display:none !important }
.modal-box    { background:var(--surface); border:1px solid var(--border-2); border-radius:var(--radius-lg); width:100%; max-width:480px; padding:24px; display:flex; flex-direction:column; gap:18px; max-height:92vh; overflow-y:auto; box-shadow:var(--shadow) }
.modal-header { display:flex; align-items:center; justify-content:space-between }
.modal-header h3 { font-size:1rem; font-weight:800; letter-spacing:-0.2px; display:flex; align-items:center; gap:8px }
.btn-cerrar-modal       { background:none; border:none; color:var(--text-3); font-size:1rem; cursor:pointer; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all var(--transition) }
.btn-cerrar-modal:hover { background:var(--surface-3); color:var(--text) }
.btn-auth           { background:var(--green); color:#050505; border:none; border-radius:var(--radius-full); padding:13px; font-size:0.95rem; font-weight:800; cursor:pointer; transition:all var(--transition); width:100%; box-shadow:var(--shadow-green); display:flex; align-items:center; justify-content:center; gap:8px }
.btn-auth:hover     { background:var(--green-dk); transform:translateY(-1px) }
.btn-auth:disabled  { opacity:0.5; cursor:not-allowed; transform:none }

/* ── Modal imagen full ── */
.modal-img        { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.92); z-index:500; align-items:center; justify-content:center; cursor:zoom-out; padding:20px }
.modal-img.active { display:flex; animation:fadeIn 0.2s ease }
.modal-img img, .modal-img video { max-width:92vw; max-height:92vh; object-fit:contain; border-radius:var(--radius); box-shadow:var(--shadow) }

/* ═══════════════════════════════════════════════════
   MODAL POST (tabs, zonas)
═══════════════════════════════════════════════════ */
.post-type-tabs { display:flex; gap:4px; background:var(--surface-2); border-radius:var(--radius-full); padding:4px }
.post-type-tab  { flex:1; padding:7px 6px; border:none; border-radius:var(--radius-full); background:none; color:var(--text-3); font-size:0.79rem; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:5px; transition:all var(--transition) }
.post-type-tab.active { background:var(--green); color:#050505 }

/* Slideshow upload zone */
.slide-upload-zone       { border:2px dashed var(--border-2); border-radius:var(--radius); padding:20px; text-align:center; cursor:pointer; color:var(--text-3); font-size:0.84rem; display:block; transition:all var(--transition) }
.slide-upload-zone:hover { border-color:var(--green); color:var(--green) }
.slide-upload-zone i     { font-size:2rem; display:block; margin-bottom:6px }
.slide-prev-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); gap:6px; margin-top:10px }
.spi     { position:relative; aspect-ratio:1; border-radius:var(--radius-sm); overflow:hidden; background:var(--surface-3) }
.spi img { width:100%; height:100%; object-fit:cover }
.spi-n   { position:absolute; bottom:3px; left:3px; background:rgba(0,0,0,.65); color:#fff; font-size:.6rem; font-weight:700; border-radius:4px; padding:1px 4px }
.spi-rm  { position:absolute; top:3px; right:3px; background:rgba(0,0,0,.8); border:none; color:#fff; width:18px; height:18px; border-radius:50%; font-size:.65rem; cursor:pointer; display:flex; align-items:center; justify-content:center }

/* Audio row */
.audio-row       { display:flex; align-items:center; gap:8px; margin-top:10px; padding:9px 12px; background:var(--surface-2); border-radius:var(--radius); border:1px solid var(--border-2); cursor:pointer; transition:border-color var(--transition) }
.audio-row:hover { border-color:var(--green) }
.audio-row i     { color:var(--green); font-size:1.1rem; flex-shrink:0 }
.audio-row span  { flex:1; font-size:0.81rem; color:var(--text-3) }
.audio-rm        { background:none; border:none; color:var(--red); cursor:pointer; font-size:0.9rem; padding:2px }

/* Poll */
.poll-list { display:flex; flex-direction:column; gap:7px; margin-top:8px }
.poll-row  { display:flex; align-items:center; gap:7px }
.poll-inp          { flex:1; background:var(--surface-2); border:1px solid var(--border-2); border-radius:var(--radius-full); color:var(--text); padding:9px 14px; font-size:0.87rem; outline:none; transition:all var(--transition) }
.poll-inp:focus    { border-color:var(--green); box-shadow:0 0 0 3px var(--green-subtle) }
.poll-inp::placeholder { color:var(--text-3) }
.poll-rm       { background:none; border:none; color:var(--text-3); cursor:pointer; font-size:1rem; padding:4px; border-radius:50%; transition:all var(--transition) }
.poll-rm:hover { color:var(--red); background:var(--red-subtle) }
.btn-add-op        { width:100%; margin-top:4px; padding:8px; background:none; border:1px dashed var(--border-2); border-radius:var(--radius-full); color:var(--text-3); font-size:0.82rem; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; transition:all var(--transition) }
.btn-add-op:hover  { border-color:var(--green); color:var(--green) }

/* NSFW */
.nsfw-row   { display:flex; align-items:center; gap:10px; margin-top:10px }
.nsfw-label { font-size:0.81rem; color:var(--text-3); flex:1; display:flex; align-items:center; gap:6px }
.nsfw-badge { background:var(--red); color:#fff; font-size:0.6rem; font-weight:800; border-radius:4px; padding:1px 5px }
.tswitch         { width:36px; height:20px; background:var(--surface-3); border-radius:var(--radius-full); cursor:pointer; position:relative; transition:background .2s; flex-shrink:0; border:1px solid var(--border-2) }
.tswitch.on      { background:var(--red); border-color:var(--red) }
.tswitch::after  { content:""; position:absolute; width:14px; height:14px; border-radius:50%; background:#fff; top:2px; left:2px; transition:transform .2s }
.tswitch.on::after { transform:translateX(16px) }
.nsfw-detect        { display:flex; align-items:center; gap:6px; font-size:0.72rem; color:var(--text-3); margin-top:6px }
.nsfw-detect.hidden { display:none }

/* Sticker */
.sticker-grid    { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px }
.sticker-option         { border-radius:var(--radius); overflow:hidden; border:2px solid var(--border-2); cursor:pointer; transition:all var(--transition); aspect-ratio:1; background:var(--surface-2) }
.sticker-option img     { width:100%; height:100%; object-fit:cover }
.sticker-option:hover   { border-color:var(--green); transform:scale(1.02) }
.sticker-option.selected { border-color:var(--green); box-shadow:0 0 0 3px var(--green-subtle) }
.sticker-selected-bar   { display:flex; align-items:center; gap:10px; padding:12px; background:var(--green-subtle); border-radius:var(--radius); border:1px solid var(--green); margin-top:8px }

/* ═══════════════════════════════════════════════════
   SLIDESHOW
═══════════════════════════════════════════════════ */
.slide-wrap  { position:relative; overflow:hidden; border-radius:var(--radius); background:#000; margin-bottom:10px; touch-action:pan-y; user-select:none; border:1px solid var(--border) }
.slide-track { display:flex; transition:transform .32s cubic-bezier(.4,0,.2,1); will-change:transform }
.slide-item  { flex-shrink:0; width:100% }
.slide-item img { width:100%; max-height:460px; min-height:80px; object-fit:contain; display:block; cursor:zoom-in; background:#111 }
.slide-btn       { position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.6); border:none; color:#fff; width:34px; height:34px; border-radius:50%; font-size:1.2rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background var(--transition); z-index:3 }
.slide-btn:hover { background:rgba(0,0,0,.85) }
.slide-btn.prev  { left:8px }
.slide-btn.next  { right:8px }
.slide-dots   { position:absolute; bottom:10px; left:50%; transform:translateX(-50%); display:flex; gap:5px; z-index:3 }
.dot          { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.4); transition:all .2s }
.dot.active   { background:#fff; transform:scale(1.3) }
.slide-counter { position:absolute; top:8px; right:10px; background:rgba(0,0,0,.6); color:#fff; font-size:0.7rem; font-weight:700; border-radius:var(--radius-full); padding:2px 8px; z-index:3 }
.slide-audio-btn        { position:absolute; bottom:10px; right:10px; background:rgba(0,0,0,.65); border:none; color:#fff; width:32px; height:32px; border-radius:50%; font-size:0.95rem; cursor:pointer; z-index:3; display:flex; align-items:center; justify-content:center; transition:background var(--transition) }
.slide-audio-btn:hover  { background:rgba(92,219,111,.7) }
.slide-audio-btn.playing { background:rgba(92,219,111,.5); color:var(--green) }

/* ═══════════════════════════════════════════════════
   POLL (render)
═══════════════════════════════════════════════════ */
.poll-wrap      { display:flex; flex-direction:column; gap:7px; margin-bottom:10px }
.poll-opt-btn         { position:relative; overflow:hidden; padding:10px 14px; border-radius:var(--radius); border:1.5px solid var(--border-2); background:var(--surface-2); cursor:pointer; text-align:left; color:var(--text); font-size:0.88rem; width:100%; transition:border-color var(--transition) }
.poll-opt-btn:hover:not(:disabled) { border-color:var(--green) }
.poll-opt-btn.voted       { border-color:var(--green) }
.poll-opt-btn.voted-other { opacity:.65 }
.poll-bar       { position:absolute; top:0; left:0; bottom:0; background:rgba(92,219,111,.12); transition:width .5s cubic-bezier(.4,0,.2,1); pointer-events:none; border-radius:var(--radius) }
.poll-opt-inner { position:relative; z-index:1; display:flex; align-items:center; gap:7px }
.poll-pct       { margin-left:auto; font-size:0.75rem; color:var(--text-3); font-weight:600 }
.poll-check     { color:var(--green); font-size:0.85rem }
.poll-total-txt { font-size:0.72rem; color:var(--text-3); text-align:center; padding-top:2px }

/* ═══════════════════════════════════════════════════
   NSFW OVERLAY
═══════════════════════════════════════════════════ */
.nsfw-wrap    { position:relative; border-radius:var(--radius); overflow:hidden }
.nsfw-overlay { position:absolute; inset:0; z-index:5; background:rgba(8,8,8,.9); backdrop-filter:blur(10px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; cursor:pointer; transition:background var(--transition) }
.nsfw-overlay i     { font-size:2rem; color:var(--red) }
.nsfw-overlay p     { font-size:0.83rem; color:var(--text-2); font-weight:700 }
.nsfw-overlay small { font-size:0.71rem; color:var(--text-3) }

/* ═══════════════════════════════════════════════════
   AVATARES ESPECIALES
═══════════════════════════════════════════════════ */
.avatar-rainbow  { border-radius:50%; background:linear-gradient(white,white) padding-box, linear-gradient(var(--angle,0deg),#5cdb6f,#4dabf7,#cc5de8,#ff6b35,#ffd43b,#5cdb6f) border-box; border:2.5px solid transparent; animation:rotateGrad 3s linear infinite }
@property --angle { syntax:'<angle>'; inherits:false; initial-value:0deg }
@keyframes rotateGrad { to{--angle:360deg} }
.avatar-animated { border-radius:50%; animation:pulseGlow 2s ease-in-out infinite }
@keyframes pulseGlow { 0%,100%{box-shadow:0 0 0 2px var(--green),0 0 8px var(--green)} 50%{box-shadow:0 0 0 2px var(--green),0 0 20px var(--green),0 0 36px rgba(92,219,111,.4)} }
.avatar-gold     { border-radius:50%; border:2.5px solid #ffd43b; box-shadow:0 0 10px rgba(255,212,59,.4) }

/* ═══════════════════════════════════════════════════
   BOTTOM NAV + FAB
═══════════════════════════════════════════════════ */
.bottom-nav       { display:none; position:fixed; bottom:0; left:0; right:0; z-index:100; background:rgba(8,8,8,.95); backdrop-filter:blur(20px); border-top:1px solid var(--border); padding:8px 0 env(safe-area-inset-bottom,8px) }
.bottom-nav-inner { display:flex; align-items:center; justify-content:space-around; max-width:500px; margin:0 auto }
.bottom-nav-btn         { display:flex; flex-direction:column; align-items:center; gap:2px; background:none; border:none; color:var(--text-3); font-size:0.6rem; font-weight:600; padding:6px 12px; border-radius:var(--radius); transition:all var(--transition); cursor:pointer; text-decoration:none }
.bottom-nav-btn .bn-icon { font-size:1.3rem; line-height:1 }
.bottom-nav-btn:hover   { color:var(--text) }
.bottom-nav-btn.active  { color:var(--green) }
.fab-post        { position:fixed; bottom:74px; right:16px; z-index:99; width:50px; height:50px; border-radius:50%; background:var(--green); color:#050505; border:none; font-size:1.4rem; cursor:pointer; box-shadow:0 4px 20px rgba(92,219,111,.4); display:none; align-items:center; justify-content:center; transition:transform var(--transition) }
.fab-post:active { transform:scale(.9) }

/* ═══════════════════════════════════════════════════
   UTILS
═══════════════════════════════════════════════════ */
.hidden { display:none !important }
.spin   { display:inline-block; animation:spin .8s linear infinite }
@keyframes spin    { to { transform:rotate(360deg) } }
@keyframes fadeIn  { from{opacity:0} to{opacity:1} }
@keyframes slideUp { from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} }

/* ═══════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════ */
@media (max-width:1100px) {
  :root { --sidebar-w:68px; --trends-w:0px }
  .app-layout { grid-template-columns:var(--sidebar-w) 1fr }
  .trends  { display:none }
  .sidebar { padding:16px 8px; align-items:center }
  .logo    { font-size:1.5rem; padding:10px 0 24px; justify-content:center }
  .logo span { display:none }
  .nav-item { justify-content:center; padding:12px; width:48px; height:48px }
  .nav-item span:not(.nav-icon) { display:none }
  .nav-item { position:relative }
  .btn-post-sidebar { width:44px; height:44px; padding:0; justify-content:center }
  .btn-post-sidebar span { display:none }
  .sidebar-user div { display:none }
}
@media (max-width:768px) {
  :root { --sidebar-w:0px }
  body { padding-bottom:70px }
  .app-layout { grid-template-columns:1fr }
  .sidebar    { display:none }
  .feed       { border-right:none }
  .bottom-nav { display:block }
  .fab-post   { display:flex }
  .new-post   { padding:14px 16px }
  .post-card  { padding:14px 16px }
  .feed-header { padding:0 16px }
}
@media (max-width:480px) {
  .post-user .post-time { display:none }
  #btnPost { padding:7px 16px; font-size:0.82rem }
}