*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{
  --surface-0:#f1f0ec;--surface-1:#e8e7e2;--surface-2:#ffffff;
  --text-primary:#1a1a18;--text-secondary:#5f5e5a;--text-muted:#9a9892;
  --border:rgba(0,0,0,0.10);--border-strong:rgba(0,0,0,0.18);
  --radius:8px;--font:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --accent:#1a1a18;--accent-bg:#e8e7e2;
}
@media(prefers-color-scheme:dark){
  :root{
    --surface-0:#1c1c1a;--surface-1:#252523;--surface-2:#2e2e2b;
    --text-primary:#f0efe9;--text-secondary:#a8a7a0;--text-muted:#66655f;
    --border:rgba(255,255,255,0.08);--border-strong:rgba(255,255,255,0.15);
  }
}
body{font-family:var(--font);background:var(--surface-0);color:var(--text-primary);min-height:100vh}
#app{display:flex;flex-direction:column;min-height:100vh;max-width:480px;margin:0 auto;background:var(--surface-0)}

/* TOPBAR */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:var(--surface-2);border-bottom:0.5px solid var(--border);position:sticky;top:0;z-index:20}
.topbar-title{font-size:16px;font-weight:500}
.topbar-sub{font-size:12px;color:var(--text-muted);margin-top:1px}

/* TABBAR */
.tabbar{display:flex;background:var(--surface-2);border-top:0.5px solid var(--border);position:sticky;bottom:0;z-index:20}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:10px 4px 8px;font-size:10px;color:var(--text-muted);background:none;border:none;cursor:pointer;min-height:56px}
.tab.active{color:var(--text-primary)}
.tab svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* CONTENT */
#content{flex:1;overflow-y:auto}
.view{display:none;padding:14px}

/* SHARED */
.btn{padding:9px 14px;font-size:13px;border:0.5px solid var(--border-strong);border-radius:var(--radius);background:transparent;color:var(--text-primary);cursor:pointer;font-family:var(--font)}
.btn:active{opacity:.7}
.btn-sm{padding:6px 11px;font-size:12px}
.btn-primary{background:var(--text-primary);color:var(--surface-2);border-color:var(--text-primary)}
.btn-danger{background:transparent;color:#a32d2d;border-color:#f09595}
.input-field{width:100%;font-size:14px;padding:10px 12px;border:0.5px solid var(--border);border-radius:var(--radius);background:var(--surface-2);color:var(--text-primary);min-height:44px;outline:none;font-family:var(--font)}
.input-field:focus{border-color:var(--border-strong)}
select.input-field{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239a9892' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
textarea.input-field{resize:none;min-height:80px;line-height:1.6}
.empty{text-align:center;padding:48px 12px;color:var(--text-muted);font-size:13px;line-height:1.8}
.label{font-size:11px;color:var(--text-muted);margin-bottom:5px;text-transform:uppercase;letter-spacing:.4px}
.stack{display:flex;flex-direction:column;gap:10px}
.row{display:flex;gap:8px;align-items:center}

/* TOAST */
#toast{position:fixed;bottom:72px;left:50%;transform:translateX(-50%);padding:10px 18px;background:var(--text-primary);color:var(--surface-2);border-radius:var(--radius);font-size:13px;display:none;z-index:99;white-space:nowrap}

/* BADGE */
.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:500}
.b-e2e{background:#eaf3de;color:#3b6d11}
.b-sig-invalid{background:#fde8e8;color:#a32d2d}
.b-local{background:#e6f1fb;color:#185fa5}
.verified-badge{display:inline-flex;align-items:center;vertical-align:middle;margin-left:2px;width:14px;height:14px;flex-shrink:0}
.verified-badge svg{width:14px;height:14px}

/* ── AUTH ── */
#view-auth{display:block;padding:24px 16px}
.auth-logo{font-size:22px;font-weight:600;letter-spacing:-.5px;margin-bottom:4px}
.auth-sub{font-size:13px;color:var(--text-muted);margin-bottom:24px;line-height:1.6}
.auth-tabs{display:flex;background:var(--surface-1);border-radius:var(--radius);padding:3px;margin-bottom:20px}
.auth-tab{flex:1;padding:7px;border-radius:6px;cursor:pointer;font-size:13px;font-weight:500;color:var(--text-muted);text-align:center;transition:all .15s}
.auth-tab.active{background:var(--surface-2);color:var(--text-primary)}
.form-group{margin-bottom:12px}
.form-group .label{display:block;margin-bottom:5px}
.key-box{background:var(--surface-1);border-radius:var(--radius);padding:12px;font-size:11px;font-family:monospace;word-break:break-all;color:var(--text-secondary);margin:12px 0;cursor:pointer;border:0.5px solid var(--border)}
.key-warning{font-size:12px;color:#854f0b;background:#faeeda;border-radius:var(--radius);padding:10px 12px;line-height:1.5;margin:8px 0}

/* ── FEED ── */
.post-card{background:var(--surface-2);border:0.5px solid var(--border);border-radius:12px;padding:13px;margin-bottom:9px}
.post-header{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--surface-1);border:0.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;flex-shrink:0;color:var(--text-secondary)}
.post-name{font-size:13px;font-weight:500}
.post-time{font-size:11px;color:var(--text-muted);display:inline-flex;align-items:center;gap:2px;flex-wrap:wrap}
.post-body{font-size:14px;line-height:1.65;color:var(--text-primary);margin-bottom:10px;word-break:break-word}
.post-body .hashtag{color:var(--text-secondary);font-weight:500}
.post-footer{display:flex;align-items:center;gap:8px}
.post-action{display:flex;align-items:center;gap:5px;background:none;border:none;font-size:12px;color:var(--text-muted);cursor:pointer;padding:4px 0;font-family:var(--font)}
.post-action:active{opacity:.6}
.post-action svg{width:15px;height:15px;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.post-action svg path{stroke:currentColor;fill:none}
.compose-box{background:var(--surface-2);border:0.5px solid var(--border);border-radius:12px;padding:13px;margin-bottom:12px}
.compose-row{display:flex;gap:10px}
.compose-ta{flex:1;border:none;outline:none;background:transparent;font-size:14px;color:var(--text-primary);font-family:var(--font);resize:none;min-height:60px;line-height:1.6}
.compose-ta::placeholder{color:var(--text-muted)}
.compose-footer{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding-top:10px;border-top:0.5px solid var(--border)}
.char-count{font-size:12px;color:var(--text-muted)}
.char-over{color:#a32d2d}

/* ── IMAGE UPLOAD ── */
.compose-toolbar{display:flex;align-items:center;gap:6px}
.img-upload-btn{display:flex;align-items:center;gap:5px;background:none;border:none;font-size:12px;color:var(--text-muted);cursor:pointer;padding:4px 6px;border-radius:6px;font-family:var(--font);transition:background .15s}
.img-upload-btn:hover{background:var(--surface-1)}
.img-upload-btn:active{opacity:.6}
.img-upload-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#compose-img-input{display:none}
.img-preview-wrap{position:relative;margin-top:10px;display:inline-block}
.img-preview{max-width:100%;max-height:200px;border-radius:10px;border:0.5px solid var(--border);display:block;object-fit:cover}
.img-remove-btn{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.55);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;line-height:1}
.img-remove-btn:active{opacity:.7}
.post-img{width:100%;max-height:300px;object-fit:cover;border-radius:10px;border:0.5px solid var(--border);margin-bottom:10px;display:block}
.img-compressing{font-size:11px;color:var(--text-muted);padding:6px 0;display:flex;align-items:center;gap:6px}
.img-compressing::before{content:'';width:10px;height:10px;border:1.5px solid var(--text-muted);border-top-color:transparent;border-radius:50%;animation:spin .6s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── DM ── */
.dm-item{display:flex;align-items:center;gap:10px;padding:12px;background:var(--surface-2);border:0.5px solid var(--border);border-radius:10px;cursor:pointer;margin-bottom:8px}
.dm-item:active{opacity:.7}
.dm-name{font-size:13px;font-weight:500}
.dm-preview{font-size:12px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.dm-preview-time{font-size:10px;color:var(--text-muted);margin-left:auto;flex-shrink:0}

/* ── CHAT FULLSCREEN PAGE ── */
#chat-page{
  display:none;
  position:fixed;
  inset:0;
  z-index:100;
  background:var(--surface-0);
  flex-direction:column;
  max-width:480px;
  margin:0 auto;
}
#chat-page.open{display:flex}
.chat-topbar{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;
  background:var(--surface-2);
  border-bottom:0.5px solid var(--border);
  flex-shrink:0;
}
.chat-back-btn{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;
  background:none;border:none;cursor:pointer;
  color:var(--text-primary);flex-shrink:0;
}
.chat-back-btn:active{opacity:.6}
.chat-back-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.chat-user-info{flex:1;min-width:0}
.chat-username{font-size:14px;font-weight:600;color:var(--text-primary)}
.chat-status{font-size:11px;color:var(--text-muted);margin-top:1px}
.chat-avatar{width:36px;height:36px;border-radius:50%;background:var(--surface-1);border:0.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:var(--text-secondary);flex-shrink:0}

/* MSG LIST */
.chat-msg-list{
  flex:1;
  overflow-y:auto;
  padding:16px 14px 12px;
  display:flex;
  flex-direction:column;
  gap:8px;
  -webkit-overflow-scrolling:touch;
}
.msg-row{display:flex;flex-direction:column;position:relative}
.msg-row.me{align-items:flex-end}
.msg-row.them{align-items:flex-start}
.msg-bubble{max-width:78%;padding:9px 13px;border-radius:18px;font-size:14px;line-height:1.5;word-break:break-word}
.msg-me{background:var(--text-primary);color:var(--surface-2);border-bottom-right-radius:4px}
.msg-them{background:var(--surface-2);border:0.5px solid var(--border);border-bottom-left-radius:4px;color:var(--text-primary)}
.msg-img{max-width:220px;max-height:200px;border-radius:14px;object-fit:cover;display:block;cursor:pointer}
.msg-img.me{border-bottom-right-radius:4px}
.msg-img.them{border-bottom-left-radius:4px}
.msg-meta{font-size:10px;color:var(--text-muted);margin-top:3px;display:flex;align-items:center;gap:4px}
.msg-tick{font-size:10px;color:var(--text-muted)}

/* MSG DELETE */
.msg-row:hover .msg-delete-btn{opacity:1}
.msg-delete-btn{opacity:0;position:absolute;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:50%;background:var(--surface-1);border:0.5px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-muted);transition:opacity .15s,color .15s;z-index:2}
.msg-row.me .msg-delete-btn{left:-30px}
.msg-row.them .msg-delete-btn{right:-30px}
.msg-delete-btn:hover{color:#a32d2d}
.msg-delete-btn:active{opacity:.6}
.msg-delete-btn svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* CHAT INPUT BAR */
.chat-input-bar{
  display:flex;gap:8px;padding:10px 12px 12px;
  border-top:0.5px solid var(--border);
  background:var(--surface-0);
  flex-shrink:0;
  align-items:flex-end;
}
.chat-input-wrap{flex:1;display:flex;flex-direction:column;gap:6px}
.chat-img-preview-wrap{position:relative;display:inline-block}
.chat-img-preview{max-height:80px;border-radius:8px;border:0.5px solid var(--border);display:block}
.chat-img-remove{position:absolute;top:3px;right:3px;width:18px;height:18px;border-radius:50%;background:rgba(0,0,0,.6);border:none;color:#fff;font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1}
.chat-textarea{width:100%;border:0.5px solid var(--border);border-radius:20px;padding:9px 14px;font-size:14px;color:var(--text-primary);font-family:var(--font);resize:none;min-height:40px;max-height:120px;background:var(--surface-2);outline:none;line-height:1.4}
.chat-textarea:focus{border-color:var(--border-strong)}
.chat-textarea::placeholder{color:var(--text-muted)}
.chat-icon-btn{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:none;border:none;cursor:pointer;color:var(--text-muted);flex-shrink:0}
.chat-icon-btn:active{opacity:.6}
.chat-icon-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.chat-send-btn{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--text-primary);border:none;cursor:pointer;color:var(--surface-2);flex-shrink:0}
.chat-send-btn:active{opacity:.7}
.chat-send-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* DATE SEPARATOR */
.date-sep{display:flex;align-items:center;gap:8px;margin:8px 0;color:var(--text-muted);font-size:11px}
.date-sep::before,.date-sep::after{content:'';flex:1;height:0.5px;background:var(--border)}

/* ── PROFILE ── */
.profile-card{background:var(--surface-2);border:0.5px solid var(--border);border-radius:12px;padding:16px;margin-bottom:12px}
.profile-av{width:64px;height:64px;border-radius:50%;background:var(--surface-1);border:0.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:700;color:var(--text-secondary);margin:0 auto 12px}
.profile-name{font-size:18px;font-weight:600;margin-bottom:2px;text-align:center}
.profile-handle{font-size:13px;color:var(--text-muted);margin-bottom:8px;text-align:center}
.stat-row{display:flex;gap:20px;margin-top:10px;justify-content:center}
.stat-item{text-align:center}
.stat-num{font-size:20px;font-weight:500}
.stat-lbl{font-size:11px;color:var(--text-muted)}
.key-section{background:var(--surface-1);border-radius:var(--radius);padding:12px;margin-top:10px}
.key-val{font-family:monospace;font-size:11px;color:var(--text-secondary);word-break:break-all;margin-top:4px;cursor:pointer}
.key-val.blur{filter:blur(5px)}

/* ── USER SEARCH RESULTS ── */
.search-result-item{display:flex;align-items:center;gap:10px;padding:11px 12px;background:var(--surface-2);border:0.5px solid var(--border);border-radius:10px;cursor:pointer;margin-bottom:7px;transition:opacity .15s}
.search-result-item:active{opacity:.6}
.search-result-private{font-size:10px;font-weight:500;padding:2px 7px;border-radius:999px;background:#fdf0e0;color:#9a5c00;flex-shrink:0}
.search-result-public{font-size:10px;font-weight:500;padding:2px 7px;border-radius:999px;background:#eaf3de;color:#3b6d11;flex-shrink:0}

/* ── USER PROFILE FULLSCREEN ── */
#user-profile-page.open{display:flex!important}font-size:12px;font-weight:500;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px}

/* KEY MODAL */
#key-modal,#privkey-overlay{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
#key-modal > div,#privkey-overlay > div{animation:modal-in .18s ease}
@keyframes modal-in{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:none}}

/* SEED MODAL */
#seed-modal{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#seed-modal > div{animation:modal-in .2s ease}

/* ── IMAGE LIGHTBOX ── */
#img-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:200;display:none;align-items:center;justify-content:center;padding:16px}
#img-lightbox.open{display:flex}
#img-lightbox img{max-width:100%;max-height:90vh;border-radius:10px;object-fit:contain}
#img-lightbox-close{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.15);border:none;color:#fff;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center}

/* ── COMMENTS ── */
.comment-section{border-top:0.5px solid var(--border);margin-top:10px;padding-top:10px}
.comment-input-row{display:flex;gap:8px;align-items:flex-start;margin-bottom:10px}
.comment-ta{flex:1;border:0.5px solid var(--border);border-radius:8px;padding:8px 10px;font-size:13px;color:var(--text-primary);font-family:var(--font);resize:none;min-height:36px;max-height:120px;background:var(--surface-1);outline:none;line-height:1.5}
.comment-ta:focus{border-color:var(--border-strong);background:var(--surface-2)}
.comment-ta::placeholder{color:var(--text-muted)}
.comment-list{display:flex;flex-direction:column;gap:8px;margin-bottom:4px}
.comment-item{display:flex;gap:8px;align-items:flex-start}
.comment-av{width:26px;height:26px;border-radius:50%;background:var(--surface-1);border:0.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;flex-shrink:0;color:var(--text-secondary)}
.comment-bubble{flex:1;background:var(--surface-1);border-radius:10px;padding:8px 10px}
.comment-author{font-size:11px;font-weight:600;color:var(--text-primary);margin-bottom:2px}
.comment-time{font-size:10px;color:var(--text-muted);margin-left:4px;font-weight:400}
.comment-body{font-size:13px;color:var(--text-primary);line-height:1.5;word-break:break-word}
.comments-toggle{font-size:12px;color:var(--text-muted);cursor:pointer;margin-top:4px;display:inline-block}
.comments-toggle:active{opacity:.6}

/* DELETE BUTTON */
.post-delete-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:none;border:none;cursor:pointer;color:var(--text-muted);margin-left:auto;flex-shrink:0;transition:color .15s,background .15s}
.post-delete-btn:hover{color:#a32d2d;background:#fcebeb}
.post-delete-btn:active{opacity:.6}
.post-delete-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* PRIVACY MODE */
.privacy-toggle{display:flex;align-items:center;justify-content:space-between;background:var(--surface-2);border:0.5px solid var(--border);border-radius:10px;padding:13px 14px;cursor:pointer;margin-bottom:10px}
.privacy-toggle:active{opacity:.7}
.privacy-toggle-left{display:flex;align-items:center;gap:10px}
.privacy-toggle-icon{width:36px;height:36px;border-radius:50%;background:var(--surface-1);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.privacy-toggle-icon svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.privacy-toggle-label{font-size:13px;font-weight:500}
.privacy-toggle-sub{font-size:11px;color:var(--text-muted);margin-top:1px}
.toggle-switch{width:44px;height:26px;border-radius:999px;background:var(--surface-1);border:0.5px solid var(--border-strong);position:relative;flex-shrink:0;transition:background .2s}
.toggle-switch.on{background:#1a1a18}
.toggle-knob{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s}
.toggle-switch.on .toggle-knob{transform:translateX(18px)}
.b-private{background:#fdf0e0;color:#9a5c00}
.lock-badge{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:500;padding:2px 7px;border-radius:999px;background:#fdf0e0;color:#9a5c00;vertical-align:middle;margin-left:4px}
.lock-badge svg{width:9px;height:9px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.private-dm-gate{background:var(--surface-1);border-radius:12px;padding:20px 16px;text-align:center;margin:16px 0}
.private-dm-gate-icon{font-size:32px;margin-bottom:8px}
.private-dm-gate-title{font-size:14px;font-weight:600;margin-bottom:4px}
.private-dm-gate-sub{font-size:12px;color:var(--text-muted);margin-bottom:14px;line-height:1.6}
.private-dm-input-wrap{display:flex;flex-direction:column;gap:8px;text-align:left}

/* MSG DELETE */
.msg-row{position:relative}
.msg-row:hover .msg-delete-btn{opacity:1}
.msg-delete-btn{opacity:0;position:absolute;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:50%;background:var(--surface-1);border:0.5px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-muted);transition:opacity .15s,color .15s;z-index:2}
.msg-row.me .msg-delete-btn{left:-30px}
.msg-row.them .msg-delete-btn{right:-30px}
.msg-delete-btn:hover{color:#a32d2d}
.msg-delete-btn:active{opacity:.6}
.msg-delete-btn svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* COMMENT IMAGE UPLOAD */
.comment-img-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:none;border:none;cursor:pointer;color:var(--text-muted);flex-shrink:0;border-radius:6px}
.comment-img-btn:hover{background:var(--surface-1)}
.comment-img-btn:active{opacity:.6}
.comment-img-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.comment-img-preview-wrap{position:relative;margin-top:6px;display:inline-block}
.comment-img-preview{max-width:120px;max-height:90px;border-radius:8px;border:0.5px solid var(--border);display:block;object-fit:cover}
.comment-img-remove{position:absolute;top:3px;right:3px;width:16px;height:16px;border-radius:50%;background:rgba(0,0,0,.6);border:none;color:#fff;font-size:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1}
.comment-post-img{max-width:100%;max-height:180px;object-fit:cover;border-radius:8px;border:0.5px solid var(--border);margin-top:6px;display:block;cursor:pointer}

/* ── PAGE LOADING SPINNER ── */
#page-loader{
  position:fixed;inset:0;
  background:var(--surface-0);
  z-index:9999;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  transition:opacity .3s ease;
}
#page-loader.fade-out{opacity:0;pointer-events:none}
#page-loader.hidden{display:none}
.loader-logo{font-size:20px;font-weight:600;letter-spacing:-.4px;color:var(--text-primary)}
.loader-spinner{
  width:28px;height:28px;
  border:2.5px solid var(--border-strong);
  border-top-color:var(--text-primary);
  border-radius:50%;
  animation:spin .7s linear infinite;
}
.loader-text{font-size:12px;color:var(--text-muted)}