/* Niche Social — Light-first theme with dark mode support */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --accent:         #2563eb;
  --accent-dim:     rgba(37,99,235,0.10);
  --accent-glow:    rgba(37,99,235,0.20);
  --like-active:    #e11d48;
  --pending-color:  #d97706;
  --online-color:   #16a34a;
  --offline-color:  #dc2626;

  --font-display:   'Syne', sans-serif;
  --font-body:      'DM Sans', sans-serif;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;

  --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-xl:24px; --radius-pill:9999px;
  --shadow-card:0 1px 3px rgba(0,0,0,.08),0 4px 12px rgba(0,0,0,.05);
  --shadow-modal:0 8px 40px rgba(0,0,0,.18);

  --header-h:60px;
  --sidebar-w:220px;
  --feed-max:640px;
  --layout-max:1200px;

  --ease-out:cubic-bezier(0.22,1,0.36,1);
  --t-fast:140ms var(--ease-out);
  --t-med:260ms var(--ease-out);
}

/* LIGHT THEME (default) */
body.theme-light {
  --bg-base:        #f8f9fb;
  --bg-surface:     #ffffff;
  --bg-elevated:    #f1f3f7;
  --bg-hover:       #eef0f5;
  --border:         #e4e7ef;
  --border-accent:  #d0d5e8;
  --text-primary:   #111827;
  --text-secondary: #4b5563;
  --text-muted:     #9ca3af;
  --header-bg:      rgba(255,255,255,0.92);
  --modal-overlay:  rgba(17,24,39,0.45);
}

/* DARK THEME */
body.theme-dark {
  --bg-base:        #0d0f14;
  --bg-surface:     #13161e;
  --bg-elevated:    #1a1e28;
  --bg-hover:       #1f2433;
  --border:         #252936;
  --border-accent:  #2e3347;
  --text-primary:   #edf0f7;
  --text-secondary: #7c8399;
  --text-muted:     #4a5068;
  --header-bg:      rgba(13,15,20,0.92);
  --modal-overlay:  rgba(0,0,0,0.75);
  --accent:         #e8ff47;
  --accent-dim:     rgba(232,255,71,0.12);
}

html { font-size:16px; scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { background:var(--bg-base); color:var(--text-primary); font-family:var(--font-body); font-weight:400; line-height:1.6; min-height:100dvh; }
img { max-width:100%; display:block; }
button { cursor:pointer; font-family:inherit; border:none; background:none; }
ul,ol { list-style:none; }
a { color:inherit; text-decoration:none; }
.hidden { display:none !important; }

::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border-accent); border-radius:var(--radius-pill); }
::selection { background:var(--accent); color:var(--bg-base); }

/* HEADER */
.site-header {
  position:sticky; top:0; z-index:100;
  height:var(--header-h);
  background:var(--header-bg);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
}
.header-inner { display:flex; align-items:center; gap:var(--space-4); max-width:var(--layout-max); margin:0 auto; padding:0 var(--space-6); height:100%; }
.wordmark { font-family:var(--font-display); font-weight:800; font-size:1.1rem; letter-spacing:-0.02em; white-space:nowrap; flex-shrink:0; }
.wordmark-bracket { color:var(--text-muted); }
.wordmark-accent { color:var(--accent); }
.header-nav { display:flex; align-items:center; gap:2px; flex:1; justify-content:center; }
.nav-btn { display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-4); border-radius:var(--radius-md); color:var(--text-secondary); font-size:0.875rem; font-weight:500; transition:background var(--t-fast),color var(--t-fast); }
.nav-btn:hover { background:var(--bg-hover); color:var(--text-primary); }
.nav-btn.active { background:var(--accent-dim); color:var(--accent); }
.header-actions { display:flex; align-items:center; gap:var(--space-3); flex-shrink:0; }

.theme-toggle { display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:var(--radius-md); color:var(--text-secondary); transition:background var(--t-fast),color var(--t-fast); }
.theme-toggle:hover { background:var(--bg-hover); color:var(--text-primary); }

.sync-status { display:flex; align-items:center; gap:var(--space-2); font-size:0.75rem; color:var(--text-muted); }
.sync-dot { width:7px; height:7px; border-radius:50%; background:var(--text-muted); transition:background var(--t-med); flex-shrink:0; }
.sync-dot.online  { background:var(--online-color); }
.sync-dot.offline { background:var(--offline-color); }
.sync-dot.syncing { background:var(--accent); animation:pulse-dot 1.2s ease-in-out infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.4)} }

.user-pill { display:flex; align-items:center; gap:var(--space-2); background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius-pill); padding:4px 10px 4px 4px; }
.user-pill-avatar { width:26px; height:26px; border-radius:50%; background:var(--accent-dim); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:0.7rem; font-weight:800; font-family:var(--font-display); flex-shrink:0; }
.user-pill-name { font-size:0.8rem; font-weight:500; max-width:90px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-pill-logout { display:flex; align-items:center; color:var(--text-muted); padding:2px; border-radius:var(--radius-sm); transition:color var(--t-fast); }
.user-pill-logout:hover { color:var(--like-active); }

.btn-compose { display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-4); background:var(--accent); color:var(--bg-surface); border-radius:var(--radius-pill); font-size:0.85rem; font-weight:700; font-family:var(--font-display); transition:opacity var(--t-fast),transform var(--t-fast); }
.theme-dark .btn-compose { color:#000; }
.btn-compose:hover { opacity:.88; transform:translateY(-1px); }

/* OFFLINE BANNER */
.offline-banner { display:none; align-items:center; justify-content:center; gap:var(--space-2); padding:8px var(--space-4); background:rgba(220,38,38,.08); border-bottom:1px solid rgba(220,38,38,.2); color:#dc2626; font-size:0.8rem; }
.offline-banner.visible { display:flex; }

/* LAYOUT */
.layout { display:grid; grid-template-columns:var(--sidebar-w) minmax(0,var(--feed-max)) var(--sidebar-w); grid-template-areas:"left feed right"; gap:var(--space-6); max-width:var(--layout-max); margin:0 auto; padding:var(--space-8) var(--space-6); align-items:start; }

/* SIDEBARS */
.sidebar { position:sticky; top:calc(var(--header-h) + var(--space-6)); display:flex; flex-direction:column; gap:var(--space-4); }
.sidebar-left { grid-area:left; }
.sidebar-right { grid-area:right; }
.sidebar-section { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--space-5); box-shadow:var(--shadow-card); }
.sidebar-heading { font-family:var(--font-display); font-size:0.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); margin-bottom:var(--space-4); }
.topic-list { display:flex; flex-direction:column; gap:2px; }
.topic-item { display:flex; justify-content:space-between; align-items:center; padding:6px var(--space-3); border-radius:var(--radius-sm); cursor:pointer; transition:background var(--t-fast); }
.topic-item:hover { background:var(--bg-hover); }
.topic-tag { font-size:0.85rem; font-weight:500; color:var(--accent); }
.topic-count { font-size:0.72rem; color:var(--text-muted); }
.rules-list { display:flex; flex-direction:column; gap:var(--space-2); counter-reset:rc; }
.rules-list li { font-size:0.8rem; color:var(--text-secondary); line-height:1.5; padding-left:var(--space-5); position:relative; counter-increment:rc; }
.rules-list li::before { content:counter(rc)'.'; position:absolute; left:0; color:var(--accent); font-weight:700; font-size:0.75rem; }
.suggested-list { display:flex; flex-direction:column; gap:var(--space-3); }
.suggested-item { display:flex; align-items:center; gap:var(--space-3); }
.suggested-avatar { width:34px; height:34px; border-radius:50%; background:var(--accent-dim); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:0.68rem; font-weight:700; color:var(--accent); flex-shrink:0; font-family:var(--font-display); }
.suggested-info { flex:1; min-width:0; }
.suggested-name { display:block; font-size:0.82rem; font-weight:500; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.suggested-meta { display:block; font-size:0.72rem; color:var(--text-muted); }
.btn-follow { padding:4px 10px; border:1px solid var(--border-accent); border-radius:var(--radius-pill); font-size:0.72rem; font-weight:600; color:var(--text-secondary); white-space:nowrap; transition:border-color var(--t-fast),color var(--t-fast),background var(--t-fast); flex-shrink:0; }
.btn-follow:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }

/* AD SLOTS */
.ad-slot { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; position:relative; min-height:240px; }
.ad-label { position:absolute; top:8px; right:8px; font-size:0.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius-sm); padding:2px 6px; z-index:1; }
.ad-slot-inner { width:100%; min-height:200px; display:flex; align-items:center; justify-content:center; }
.ad-placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:var(--space-8); color:var(--text-muted); font-size:0.78rem; text-align:center; width:100%; min-height:160px; border:1px dashed var(--border-accent); border-radius:var(--radius-md); margin:var(--space-3); }
.ad-placeholder--feed { min-height:100px; margin:0; border-radius:0; }
.ad-placeholder small { font-size:0.68rem; opacity:.6; }

/* FEED */
.feed-column { grid-area:feed; display:flex; flex-direction:column; gap:var(--space-4); }
.feed-loading { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-4); padding:var(--space-12); color:var(--text-muted); font-size:0.875rem; }
.spinner { width:26px; height:26px; border:2px solid var(--border-accent); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.feed-list { display:flex; flex-direction:column; gap:var(--space-4); }
.feed-empty { display:flex; justify-content:center; padding:var(--space-12) var(--space-4); }
.empty-state { text-align:center; color:var(--text-muted); display:flex; flex-direction:column; align-items:center; gap:var(--space-3); }
.empty-state svg { opacity:.25; }
.empty-state h3 { font-family:var(--font-display); font-size:1.05rem; color:var(--text-secondary); }
.empty-state p { font-size:0.875rem; }

/* POST CARDS */
.post-card { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--space-5); transition:border-color var(--t-fast),box-shadow var(--t-fast); animation:slideUp 280ms var(--ease-out) both; box-shadow:var(--shadow-card); }
.post-card:hover { border-color:var(--border-accent); }
@keyframes slideUp { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.post-header { display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-4); }
.post-avatar { width:38px; height:38px; border-radius:50%; background:var(--accent-dim); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:0.8rem; font-weight:800; color:var(--accent); flex-shrink:0; font-family:var(--font-display); }
.post-meta { flex:1; min-width:0; }
.post-author { display:block; font-weight:600; font-size:0.9rem; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.post-time { display:block; font-size:0.72rem; color:var(--text-muted); margin-top:1px; }
.post-badge { font-size:0.62rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:2px 7px; border-radius:var(--radius-pill); }
.post-badge.pending { background:rgba(217,119,6,.12); color:var(--pending-color); border:1px solid rgba(217,119,6,.25); }
.post-badge.synced  { background:rgba(22,163,74,.1); color:var(--online-color); border:1px solid rgba(22,163,74,.2); }
.post-body { margin-bottom:var(--space-4); }
.post-content { font-size:0.95rem; line-height:1.65; color:var(--text-primary); word-break:break-word; white-space:pre-wrap; }
.post-image { width:100%; border-radius:var(--radius-md); margin-top:var(--space-3); max-height:360px; object-fit:cover; cursor:pointer; }
.post-footer { display:flex; align-items:center; gap:var(--space-2); padding-top:var(--space-3); border-top:1px solid var(--border); }
.action-btn { display:flex; align-items:center; gap:var(--space-2); padding:6px var(--space-3); border-radius:var(--radius-sm); font-size:0.8rem; font-weight:500; color:var(--text-muted); transition:background var(--t-fast),color var(--t-fast); }
.action-btn:hover { background:var(--bg-hover); color:var(--text-secondary); }
.like-btn.liked { color:var(--like-active); }
.like-btn.liked svg { fill:var(--like-active); stroke:var(--like-active); }
.post-sync-indicator { margin-left:auto; font-size:0.68rem; color:var(--pending-color); opacity:0; transition:opacity var(--t-fast); }
.post-sync-indicator.visible { opacity:1; }
.ad-card { border-style:dashed; border-color:var(--border-accent); }
.ad-card-label { display:flex; align-items:center; gap:4px; font-size:0.65rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); margin-bottom:var(--space-3); }
.ad-card-inner { width:100%; }

/* MODALS */
.modal-overlay { position:fixed; inset:0; z-index:200; background:var(--modal-overlay); display:flex; align-items:flex-start; justify-content:center; padding:calc(var(--header-h) + 40px) var(--space-4) var(--space-4); opacity:0; pointer-events:none; transition:opacity var(--t-med); }
.modal-overlay.open { opacity:1; pointer-events:all; }
.modal-card { background:var(--bg-surface); border:1px solid var(--border-accent); border-radius:var(--radius-xl); width:100%; max-width:560px; box-shadow:var(--shadow-modal); transform:translateY(-10px); transition:transform var(--t-med); overflow:hidden; }
.modal-overlay.open .modal-card { transform:translateY(0); }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:var(--space-5) var(--space-6); border-bottom:1px solid var(--border); }
.modal-title { font-family:var(--font-display); font-size:1rem; font-weight:800; }
.modal-close { padding:var(--space-2); border-radius:var(--radius-sm); color:var(--text-muted); transition:background var(--t-fast),color var(--t-fast); }
.modal-close:hover { background:var(--bg-hover); color:var(--text-primary); }
.composer-body { display:flex; gap:var(--space-4); padding:var(--space-5) var(--space-6); }
.composer-avatar { width:40px; height:40px; border-radius:50%; background:var(--accent-dim); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:0.95rem; font-weight:800; color:var(--accent); flex-shrink:0; font-family:var(--font-display); }
.composer-fields { flex:1; display:flex; flex-direction:column; gap:var(--space-3); }
.input-field, .textarea-field { width:100%; background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius-md); color:var(--text-primary); font-family:var(--font-body); font-size:0.9rem; padding:var(--space-3) var(--space-4); outline:none; transition:border-color var(--t-fast); resize:none; }
.input-field:focus, .textarea-field:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim); }
.input-field::placeholder, .textarea-field::placeholder { color:var(--text-muted); }
.image-attach-row { display:flex; align-items:center; gap:var(--space-3); }
.btn-attach { display:flex; align-items:center; gap:6px; padding:6px 12px; border:1px solid var(--border-accent); border-radius:var(--radius-pill); font-size:0.78rem; font-weight:600; color:var(--text-secondary); cursor:pointer; transition:border-color var(--t-fast),color var(--t-fast),background var(--t-fast); white-space:nowrap; }
.btn-attach:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }
.btn-remove-image { display:flex; align-items:center; color:var(--text-muted); padding:4px; border-radius:var(--radius-sm); transition:color var(--t-fast); }
.btn-remove-image:hover { color:var(--like-active); }
.image-preview-wrap { border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--border); }
.composer-footer { display:flex; align-items:center; justify-content:space-between; }
.char-counter { font-size:0.78rem; color:var(--text-muted); font-variant-numeric:tabular-nums; }
.char-counter.warn { color:var(--pending-color); }
.char-counter.danger { color:var(--like-active); }
.btn-submit { display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-5); background:var(--accent); color:#fff; border-radius:var(--radius-pill); font-size:0.85rem; font-weight:800; font-family:var(--font-display); transition:opacity var(--t-fast),transform var(--t-fast); }
.theme-dark .btn-submit { color:#000; }
.btn-submit:hover { opacity:.88; transform:translateY(-1px); }
.btn-submit:disabled { opacity:.4; pointer-events:none; }

/* TOASTS */
.toast-container { position:fixed; bottom:var(--space-6); right:var(--space-6); z-index:300; display:flex; flex-direction:column; gap:var(--space-2); pointer-events:none; }
.toast { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) var(--space-4); background:var(--bg-elevated); border:1px solid var(--border-accent); border-radius:var(--radius-md); font-size:0.85rem; font-weight:500; box-shadow:var(--shadow-card); animation:toastIn 280ms var(--ease-out) both; pointer-events:all; max-width:300px; }
.toast::before { content:''; width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.toast.success::before { background:var(--online-color); }
.toast.error::before   { background:var(--like-active); }
.toast.info::before    { background:var(--accent); }
@keyframes toastIn  { from{opacity:0;transform:translateX(16px)} to{opacity:1;transform:translateX(0)} }
@keyframes toastOut { from{opacity:1;transform:translateX(0)} to{opacity:0;transform:translateX(16px)} }
.toast.removing { animation:toastOut 200ms var(--ease-out) forwards; }

/* LIGHTBOX */
.lightbox { position:fixed; inset:0; z-index:400; background:rgba(0,0,0,.9); display:flex; align-items:center; justify-content:center; cursor:zoom-out; }
.lightbox img { max-width:92vw; max-height:92vh; border-radius:var(--radius-md); object-fit:contain; }
.lightbox-close { position:absolute; top:16px; right:20px; color:#fff; font-size:2rem; line-height:1; background:none; border:none; cursor:pointer; opacity:.7; }
.lightbox-close:hover { opacity:1; }

/* RESPONSIVE */
@media(max-width:1024px) {
  .layout { grid-template-columns:minmax(0,var(--feed-max)) var(--sidebar-w); grid-template-areas:"feed right"; padding:var(--space-5) var(--space-4); }
  .sidebar-left { display:none; }
}
@media(max-width:768px) {
  .layout { grid-template-columns:1fr; grid-template-areas:"feed"; padding:var(--space-4) var(--space-3); gap:var(--space-3); }
  .sidebar-right { display:none; }
  .header-inner { padding:0 var(--space-4); }
  .nav-btn span { display:none; }
  .sync-label { display:none; }
}
@media(max-width:480px) {
  .btn-compose span { display:none; }
  .btn-compose { padding:var(--space-2) var(--space-3); border-radius:50%; }
  .toast-container { bottom:var(--space-4); right:var(--space-3); left:var(--space-3); }
  .toast { max-width:100%; }
  .modal-overlay { padding:calc(var(--header-h) + 16px) var(--space-3) var(--space-3); }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }