diff --git a/src/styles/map.css b/src/styles/map.css
index 5990444..8faa367 100644
--- a/src/styles/map.css
+++ b/src/styles/map.css
@@ -1,6 +1,6 @@
 :root{
   --sw-subcats-nudge: -45px; /* subcats vertical nudge */
-  --sw-below-overlap: 40px;  /* wall overlaps map a bit */
+  --sw-below-overlap: 0px;  /* no overlap - sociowall sits below map */
 }
 
 .map-page{
@@ -9,11 +9,11 @@
   width:100%;
 }
 
-/* Map stage first */
+/* Map stage first - much taller, almost full screen */
 .map-stage{
   position:relative;
   width:100%;
-  height: clamp(520px, 72vh, 860px);
+  height: clamp(600px, 85vh, 1000px);
   overflow: hidden;
 }
 
@@ -115,10 +115,10 @@
   100%{ opacity: 0.6; }
 }
 
-/* Landscape: vh is small, reduce min height */
+/* Landscape: vh is small, but still keep map tall */
 @media (orientation: landscape){
-  :root{ --sw-below-overlap: 22px; }
-  .map-stage{ height: clamp(360px, 62vh, 720px); }
+  :root{ --sw-below-overlap: 0px; }
+  .map-stage{ height: clamp(400px, 75vh, 800px); }
 }
 
 .map-container,
@@ -140,12 +140,12 @@
   z-index:30;
 }
 
-/* BELOW MAP (scroll area) – pulled up slightly over map */
+/* BELOW MAP (scroll area) – sits below map with spacing */
 .below-stage{
-  margin-top: calc(var(--sw-below-overlap) * -1);
+  margin-top: 2rem;
   position:relative;
   z-index:25;
-  padding: .25rem .7rem 1.0rem;
+  padding: 0.5rem 1rem 1.5rem;
   transition: opacity 320ms ease, filter 320ms ease;
 }
 
diff --git a/src/styles/posts.css b/src/styles/posts.css
index c96a50c..1bf0c8e 100644
--- a/src/styles/posts.css
+++ b/src/styles/posts.css
@@ -1,466 +1,990 @@
-/* Sociowall BELOW the map - Full width Facebook style */
-.below-row{
-  display:flex;
-  gap:0;
-  align-items:stretch;
-  min-width:0;
+/* ═══════════════════════════════════════════════════════════════════════════
+   SOCIOWALL - Premium Facebook-Style Feed
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* Container below map */
+.below-row {
+  display: flex;
+  gap: 0;
+  align-items: stretch;
+  min-width: 0;
   flex-wrap: nowrap;
 }
 
-.sociowall-panel{
+/* ─────────────────────────────────────────────────────────────────────────────
+   SOCIOWALL PANEL - Main container with glassmorphism
+   ───────────────────────────────────────────────────────────────────────────── */
+.sociowall-panel {
   flex: 1 1 100%;
   width: 100%;
   max-width: 680px;
   margin: 0 auto;
   min-height: 200px;
-  background: transparent;
-  border-radius: 0;
-  border: none;
-  box-shadow: none;
-  padding: 1rem 0.5rem;
-  display:flex;
-  flex-direction:column;
-  gap: 1rem;
+  padding: 1.5rem 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+
+  /* Glassmorphism dark gray */
+  background: linear-gradient(
+    165deg,
+    rgba(30, 35, 50, 0.95) 0%,
+    rgba(22, 27, 42, 0.98) 50%,
+    rgba(18, 22, 35, 0.99) 100%
+  );
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+
+  /* Rounded corners */
+  border-radius: 24px;
+
+  /* Subtle border glow */
+  border: 1px solid rgba(100, 120, 160, 0.15);
+  box-shadow:
+    0 4px 32px rgba(0, 0, 0, 0.4),
+    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
+    0 1px 0 rgba(255, 255, 255, 0.05) inset;
 }
 
-.sociowall-header{
-  font-size: 1.1rem;
-  font-weight: 800;
-  letter-spacing: .02em;
+/* Header with gradient underline */
+.sociowall-header {
+  font-size: 0.85rem;
+  font-weight: 700;
+  letter-spacing: 0.15em;
   text-transform: uppercase;
-  color: #e2e8f0;
-  padding: 0 0.5rem;
-  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
-  padding-bottom: 0.75rem;
+  padding: 0 0.5rem 1rem;
+  margin-bottom: 0.25rem;
+
+  /* Gradient text */
+  background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 50%, #f472b6 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+
+  /* Animated underline */
+  border-bottom: 1px solid transparent;
+  background-image:
+    linear-gradient(135deg, #60a5fa 0%, #a78bfa 50%, #f472b6 100%),
+    linear-gradient(90deg, rgba(96, 165, 250, 0.3), rgba(167, 139, 250, 0.3), rgba(244, 114, 182, 0.3));
+  background-size: 100% 100%, 100% 1px;
+  background-position: 0 0, 0 100%;
+  background-repeat: no-repeat;
+  background-clip: text, padding-box;
+  -webkit-background-clip: text, padding-box;
 }
 
-/* list scroll inside wall */
-.post-list{
-  flex:1;
+/* Post list container */
+.post-list {
+  flex: 1;
   overflow-y: visible;
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: 1.25rem;
 }
 
-/* Facebook-style post card */
-.post-card{
-  overflow:hidden;
-  min-width:0;
-  border-radius: 12px;
-  border: none;
-  background: rgba(30, 41, 59, 0.95);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 1px rgba(148, 163, 184, 0.3);
+/* ─────────────────────────────────────────────────────────────────────────────
+   POST CARD - Premium glassmorphism cards
+   ───────────────────────────────────────────────────────────────────────────── */
+.post-card {
+  overflow: hidden;
+  min-width: 0;
   padding: 0;
-  cursor:pointer;
-  transition: transform 0.15s ease, box-shadow 0.15s ease;
+  cursor: pointer;
+
+  /* Rounded corners */
+  border-radius: 20px;
+
+  /* Glassmorphism effect */
+  background: linear-gradient(
+    145deg,
+    rgba(40, 48, 70, 0.9) 0%,
+    rgba(32, 40, 60, 0.95) 100%
+  );
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+
+  /* Border with subtle glow */
+  border: 1px solid rgba(120, 140, 180, 0.12);
+
+  /* Layered shadow for depth */
+  box-shadow:
+    0 2px 8px rgba(0, 0, 0, 0.2),
+    0 8px 24px rgba(0, 0, 0, 0.15),
+    0 0 0 1px rgba(255, 255, 255, 0.02) inset;
+
+  /* Smooth transitions */
+  transition:
+    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    border-color 0.3s ease;
 }
 
-.post-card:hover{
-  transform: translateY(-2px);
-  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 1px rgba(148, 163, 184, 0.4);
+.post-card:hover {
+  transform: translateY(-4px) scale(1.005);
+  border-color: rgba(96, 165, 250, 0.25);
+  box-shadow:
+    0 8px 16px rgba(0, 0, 0, 0.25),
+    0 16px 48px rgba(0, 0, 0, 0.2),
+    0 0 32px rgba(96, 165, 250, 0.08),
+    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
 }
 
-.sw-wall-card{
-  display:flex;
-  flex-direction:column;
+.post-card.selected {
+  border-color: rgba(96, 165, 250, 0.5);
+  box-shadow:
+    0 0 0 2px rgba(96, 165, 250, 0.2),
+    0 8px 32px rgba(96, 165, 250, 0.15);
+}
+
+.sw-wall-card {
+  display: flex;
+  flex-direction: column;
   gap: 0;
 }
 
-.sw-wall-head{
-  display:flex;
-  align-items:center;
-  gap: 0.75rem;
-  padding: 0.85rem 1rem;
+/* ─────────────────────────────────────────────────────────────────────────────
+   CARD HEADER - Avatar, author, time
+   ───────────────────────────────────────────────────────────────────────────── */
+.sw-wall-head {
+  display: flex;
+  align-items: center;
+  gap: 0.85rem;
+  padding: 1rem 1.15rem;
 }
-.sw-wall-avatar{
-  width: 42px;
-  height: 42px;
+
+.sw-wall-avatar {
+  width: 46px;
+  height: 46px;
   border-radius: 50%;
-  background: linear-gradient(135deg, #3b82f6, #6366f1);
-  border: none;
-  color:#fff;
-  font-weight:800;
-  font-size: 1rem;
-  display:flex;
-  align-items:center;
-  justify-content:center;
-  overflow: hidden;
   flex-shrink: 0;
+  overflow: hidden;
+
+  /* Gradient border ring */
+  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);
+  padding: 2px;
+
+  /* Inner container for image */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  color: #fff;
+  font-weight: 800;
+  font-size: 1.1rem;
+
+  /* Glow effect */
+  box-shadow: 0 2px 12px rgba(99, 102, 241, 0.3);
 }
-.sw-wall-avatar img{
+
+.sw-wall-avatar img {
+  width: calc(100% - 4px);
+  height: calc(100% - 4px);
+  object-fit: cover;
+  display: block;
+  border-radius: 50%;
+  background: #1e2433;
+}
+
+.sw-wall-meta {
+  flex: 1;
+  min-width: 0;
+}
+
+.sw-wall-author {
+  font-size: 0.95rem;
+  font-weight: 700;
+  color: #f1f5f9;
+  letter-spacing: 0.01em;
+
+  /* Subtle hover effect */
+  transition: color 0.2s ease;
+}
+
+.post-card:hover .sw-wall-author {
+  color: #93c5fd;
+}
+
+.sw-wall-time {
+  font-size: 0.78rem;
+  color: #64748b;
+  margin-top: 2px;
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.sw-wall-time::before {
+  content: "";
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  background: #475569;
+}
+
+.sw-wall-badge {
+  font-size: 0.65rem;
+  font-weight: 700;
+  padding: 0.35rem 0.75rem;
+  border-radius: 20px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+
+  /* Gradient background */
+  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
+  color: #93c5fd;
+  border: 1px solid rgba(96, 165, 250, 0.2);
+
+  /* Subtle glow */
+  box-shadow: 0 0 12px rgba(96, 165, 250, 0.1);
+}
+
+/* ─────────────────────────────────────────────────────────────────────────────
+   CARD IMAGE / GALLERY
+   ───────────────────────────────────────────────────────────────────────────── */
+.sw-wall-gallery {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.sw-wall-image {
+  width: 100%;
+  height: 340px;
+  max-height: 55vh;
+  overflow: hidden;
+  position: relative;
+
+  /* Gradient overlay at bottom */
+  background: linear-gradient(
+    180deg,
+    rgba(20, 25, 40, 0.3) 0%,
+    rgba(20, 25, 40, 0.6) 100%
+  );
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sw-wall-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.post-card:hover .sw-wall-image img {
+  transform: scale(1.03);
+}
+
+/* Fallback when no image */
+.sw-wall-image-fallback {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(
+    135deg,
+    rgba(30, 40, 65, 0.95) 0%,
+    rgba(25, 32, 55, 0.98) 50%,
+    rgba(20, 28, 50, 0.99) 100%
+  );
+  color: #60a5fa;
+}
+
+.sw-wall-image-fallback-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  font-weight: 700;
+  font-size: 0.7rem;
+  opacity: 0.7;
+}
+
+.sw-wall-image-fallback i {
+  font-size: 52px;
+  opacity: 0.6;
+  background: linear-gradient(135deg, #60a5fa, #a78bfa);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* Gallery navigation */
+.sw-wall-gallery-count {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  padding: 0.35rem 0.65rem;
+  border-radius: 20px;
+  font-size: 0.7rem;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(8px);
+  color: #f1f5f9;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.sw-wall-gallery-arrow {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  color: #f8fafc;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 2;
+
+  transition: all 0.2s ease;
+  opacity: 0;
+}
+
+.post-card:hover .sw-wall-gallery-arrow {
+  opacity: 1;
+}
+
+.sw-wall-gallery-arrow:hover {
+  background: rgba(96, 165, 250, 0.4);
+  border-color: rgba(96, 165, 250, 0.5);
+  transform: translateY(-50%) scale(1.1);
+}
+
+.sw-wall-gallery-arrow.left { left: 12px; }
+.sw-wall-gallery-arrow.right { right: 12px; }
+
+.sw-wall-gallery-thumbs {
+  display: flex;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  overflow-x: auto;
+  background: rgba(15, 20, 35, 0.5);
+}
+
+.sw-wall-gallery-thumb {
+  width: 52px;
+  height: 52px;
+  border-radius: 12px;
+  border: 2px solid transparent;
+  overflow: hidden;
+  background: rgba(30, 40, 60, 0.8);
+  flex: 0 0 auto;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.sw-wall-gallery-thumb:hover {
+  border-color: rgba(96, 165, 250, 0.4);
+  transform: scale(1.05);
+}
+
+.sw-wall-gallery-thumb.active {
+  border-color: #60a5fa;
+  box-shadow: 0 0 12px rgba(96, 165, 250, 0.4);
+}
+
+.sw-wall-gallery-thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
 }
-.sw-wall-meta{ flex:1; min-width:0; }
-.sw-wall-author{
-  font-size: 0.95rem;
-  font-weight: 700;
-  color: #f1f5f9;
-}
-.sw-wall-time{
-  font-size: 0.8rem;
-  color:#94a3b8;
-}
-.sw-wall-badge{
-  font-size: 0.7rem;
-  font-weight: 700;
-  padding: 0.25rem 0.6rem;
-  border-radius: 6px;
-  border: none;
-  color: #e0f2fe;
-  background: rgba(14, 165, 233, 0.25);
-  text-transform: uppercase;
-  letter-spacing: .04em;
-}
-.sw-wall-gallery{
-  width: 100%;
-}
-.sw-wall-image{
-  width:100%;
-  height: 320px;
-  max-height: 50vh;
-  border-radius: 0;
-  overflow:hidden;
-  border: none;
-  border-top: 1px solid rgba(148,163,184,0.1);
-  border-bottom: 1px solid rgba(148,163,184,0.1);
-  background: rgba(15,23,42,0.5);
-  position:relative;
-  display:flex;
-  align-items:center;
-  justify-content:center;
-}
-.sw-wall-image-fallback{
-  display:flex;
-  align-items:center;
-  justify-content:center;
-  color:#93c5fd;
-  background: radial-gradient(circle at 30% 30%, rgba(56,189,248,0.18), rgba(15,23,42,0.92));
-}
-.sw-wall-image-fallback-inner{
-  display:flex;
-  flex-direction:column;
-  align-items:center;
-  gap:8px;
-  text-transform: uppercase;
-  letter-spacing: .08em;
-  font-weight: 800;
-  font-size: .72rem;
-}
-.sw-wall-image-fallback i{
-  font-size: 46px;
-  opacity: 0.95;
-}
-body[data-theme="light"] .sw-wall-image-fallback{
-  background: radial-gradient(circle at 30% 30%, rgba(59,130,246,0.18), rgba(255,255,255,0.9));
-  color:#1d4ed8;
-}
-.sw-wall-image img{
-  width:100%;
-  height:100%;
-  object-fit: cover;
-  display:block;
+
+/* ─────────────────────────────────────────────────────────────────────────────
+   CARD BODY - Title, snippet, meta
+   ───────────────────────────────────────────────────────────────────────────── */
+.sw-wall-body {
+  padding: 1rem 1.15rem;
 }
 
-.sw-wall-gallery {
-  display:flex;
-  flex-direction:column;
-  gap:.35rem;
-}
-.sw-wall-gallery-count {
-  position:absolute;
-  top:8px;
-  right:8px;
-  padding:.18rem .45rem;
-  border-radius:999px;
-  font-size:.65rem;
-  letter-spacing:.08em;
-  text-transform: uppercase;
-  border:1px solid rgba(148,163,184,0.45);
-  background: rgba(15,23,42,0.75);
-}
-.sw-wall-gallery-thumbs {
-  display:flex;
-  gap:.35rem;
-  overflow-x:auto;
-  padding-bottom:.25rem;
-}
-.sw-wall-gallery-arrow {
-  position:absolute;
-  top:50%;
-  transform:translateY(-50%);
-  width:32px;
-  height:32px;
-  border-radius:50%;
-  border:1px solid rgba(255,255,255,0.4);
-  background:rgba(15,23,42,0.75);
-  color:#f8fafc;
-  display:flex;
-  align-items:center;
-  justify-content:center;
-  cursor:pointer;
-  z-index:2;
-  box-shadow:0 0 12px rgba(0,0,0,0.4);
-}
-.sw-wall-gallery-arrow.left {
-  left:12px;
-}
-.sw-wall-gallery-arrow.right {
-  right:12px;
-}
-.sw-wall-gallery-thumb {
-  width:48px;
-  height:48px;
-  border-radius:10px;
-  border:1px solid transparent;
-  overflow:hidden;
-  background: rgba(15,23,42,0.85);
-  flex:0 0 auto;
-  cursor:pointer;
-}
-.sw-wall-gallery-thumb.active {
-  border-color: rgba(56,189,248,0.9);
-}
-.sw-wall-gallery-thumb img {
-  width:100%;
-  height:100%;
-  object-fit:cover;
-  display:block;
-}
-.sw-wall-body{
-  padding: 0.85rem 1rem;
-}
-.sw-wall-title{
-  font-size: 1.05rem;
+.sw-wall-title {
+  font-size: 1.1rem;
   font-weight: 700;
-  color:#f8fafc;
-  margin-bottom: 0.35rem;
-  line-height: 1.35;
+  color: #f8fafc;
+  margin-bottom: 0.5rem;
+  line-height: 1.4;
+
+  /* Limit to 2 lines */
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 }
-.sw-wall-snippet{
-  font-size: 0.92rem;
-  color: #cbd5e1;
-  line-height: 1.45;
+
+.sw-wall-snippet {
+  font-size: 0.9rem;
+  color: #94a3b8;
+  line-height: 1.55;
+
+  /* Limit to 3 lines */
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 }
-.sw-wall-meta-line{
-  font-size: 0.8rem;
+
+.sw-wall-meta-line {
+  font-size: 0.75rem;
   color: #64748b;
-  margin-top: 0.5rem;
+  margin-top: 0.65rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
 }
-.sw-wall-footer{
-  padding: 0.6rem 1rem;
-  border-top: 1px solid rgba(148, 163, 184, 0.15);
+
+.sw-wall-meta-line::before {
+  content: "";
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #60a5fa, #a78bfa);
+}
+
+/* ─────────────────────────────────────────────────────────────────────────────
+   CARD FOOTER - Stats and actions
+   ───────────────────────────────────────────────────────────────────────────── */
+.sw-wall-footer {
+  padding: 0.85rem 1.15rem;
+  border-top: 1px solid rgba(100, 120, 160, 0.1);
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+
+  background: rgba(15, 20, 35, 0.3);
 }
-.sw-wall-stats{
-  display:flex;
-  gap: 1rem;
-  font-size: 0.85rem;
+
+.sw-wall-stats {
+  display: flex;
+  gap: 1.25rem;
+  font-size: 0.8rem;
+  color: #64748b;
+}
+
+.sw-wall-stats span {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  transition: color 0.2s ease;
+}
+
+.sw-wall-stats span:hover {
   color: #94a3b8;
 }
-.sw-wall-stats i{ margin-right: 0.35rem; }
-.sw-wall-actions{
-  display:flex;
-  gap: 0.5rem;
-  flex-wrap:wrap;
-}
-.sw-wall-privacy{
-  margin-top:.25rem;
-  padding:.5rem .6rem;
-  border-radius:12px;
-  border:1px solid rgba(148,163,184,0.35);
-  background: rgba(15,23,42,0.75);
-  display:flex;
-  flex-direction:column;
-  gap:.4rem;
-}
-.sw-wall-privacy-row{
-  display:flex;
-  align-items:center;
-  gap:.5rem;
-  font-size:.72rem;
-  color:#cbd5f5;
-}
-.sw-wall-privacy-row label{
-  white-space:nowrap;
-}
-.sw-wall-privacy-row select{
-  flex:1;
-  background:#020617;
-  border-radius:999px;
-  border:1px solid #4b5563;
-  padding:.25rem .6rem;
-  font-size:.72rem;
-  color:#e5e7eb;
-}
-.sw-wall-privacy-input{
-  width:100%;
-  border-radius:999px;
-  border:1px solid #4b5563;
-  padding:.3rem .6rem;
-  background:#020617;
-  color:#e5e7eb;
-  font-size:.72rem;
-}
-.sw-wall-privacy-check{
-  display:flex;
-  align-items:center;
-  gap:.45rem;
-  font-size:.7rem;
-  color:#cbd5f5;
-}
-.sw-wall-privacy-error{
-  font-size:.7rem;
-  color:#fca5a5;
+
+.sw-wall-stats i {
+  font-size: 0.85rem;
 }
 
-.sw-wall-sentinel{
+.sw-wall-actions {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+/* ─────────────────────────────────────────────────────────────────────────────
+   ACTION BUTTONS - Premium pill buttons
+   ───────────────────────────────────────────────────────────────────────────── */
+.sw-wall-btn {
+  padding: 0.45rem 0.85rem;
+  border-radius: 20px;
+  font-weight: 600;
+  font-size: 0.75rem;
+  cursor: pointer;
+
+  background: rgba(40, 50, 75, 0.6);
+  border: 1px solid rgba(100, 120, 160, 0.2);
+  color: #94a3b8;
+
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+
+  transition: all 0.2s ease;
+}
+
+.sw-wall-btn:hover {
+  background: rgba(96, 165, 250, 0.15);
+  border-color: rgba(96, 165, 250, 0.3);
+  color: #60a5fa;
+  transform: translateY(-1px);
+}
+
+.sw-wall-btn i {
+  font-size: 0.8rem;
+}
+
+.sw-wall-btn.is-active {
+  background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(139, 92, 246, 0.2));
+  border-color: rgba(96, 165, 250, 0.4);
+  color: #60a5fa;
+  box-shadow: 0 0 16px rgba(96, 165, 250, 0.15);
+}
+
+.sw-wall-btn-danger {
+  border-color: rgba(239, 68, 68, 0.3);
+  color: #f87171;
+}
+
+.sw-wall-btn-danger:hover {
+  background: rgba(239, 68, 68, 0.15);
+  border-color: rgba(239, 68, 68, 0.4);
+  color: #fca5a5;
+}
+
+/* ─────────────────────────────────────────────────────────────────────────────
+   PRIVACY PANEL
+   ───────────────────────────────────────────────────────────────────────────── */
+.sw-wall-privacy {
+  margin: 0.75rem 1rem;
+  padding: 1rem;
+  border-radius: 16px;
+
+  background: rgba(20, 28, 50, 0.8);
+  border: 1px solid rgba(100, 120, 160, 0.15);
+
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.sw-wall-privacy-row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  font-size: 0.8rem;
+  color: #cbd5e1;
+}
+
+.sw-wall-privacy-row label {
+  white-space: nowrap;
+  font-weight: 500;
+}
+
+.sw-wall-privacy-row select {
+  flex: 1;
+  background: rgba(15, 20, 35, 0.8);
+  border-radius: 10px;
+  border: 1px solid rgba(100, 120, 160, 0.2);
+  padding: 0.4rem 0.75rem;
+  font-size: 0.78rem;
+  color: #e2e8f0;
+  cursor: pointer;
+  transition: border-color 0.2s ease;
+}
+
+.sw-wall-privacy-row select:focus {
+  outline: none;
+  border-color: rgba(96, 165, 250, 0.5);
+}
+
+.sw-wall-privacy-input {
+  width: 100%;
+  border-radius: 10px;
+  border: 1px solid rgba(100, 120, 160, 0.2);
+  padding: 0.5rem 0.75rem;
+  background: rgba(15, 20, 35, 0.8);
+  color: #e2e8f0;
+  font-size: 0.8rem;
+  transition: border-color 0.2s ease;
+}
+
+.sw-wall-privacy-input:focus {
+  outline: none;
+  border-color: rgba(96, 165, 250, 0.5);
+}
+
+.sw-wall-privacy-check {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.78rem;
+  color: #94a3b8;
+  cursor: pointer;
+}
+
+.sw-wall-privacy-check input[type="checkbox"] {
+  accent-color: #60a5fa;
+}
+
+.sw-wall-privacy-error {
+  font-size: 0.75rem;
+  color: #f87171;
+  padding: 0.35rem 0.5rem;
+  background: rgba(239, 68, 68, 0.1);
+  border-radius: 8px;
+}
+
+/* ─────────────────────────────────────────────────────────────────────────────
+   EDIT/DELETE MENU
+   ───────────────────────────────────────────────────────────────────────────── */
+.sw-wall-edit-menu {
+  margin: 0.75rem 1rem;
+  padding: 1rem;
+  border-radius: 16px;
+
+  background: rgba(20, 28, 50, 0.8);
+  border: 1px solid rgba(100, 120, 160, 0.15);
+
+  display: flex;
+  flex-direction: column;
+  gap: 0.65rem;
+}
+
+.sw-wall-edit-form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.65rem;
+}
+
+.sw-wall-edit-input,
+.sw-wall-edit-textarea {
+  width: 100%;
+  border-radius: 12px;
+  border: 1px solid rgba(100, 120, 160, 0.2);
+  padding: 0.6rem 0.85rem;
+  background: rgba(15, 20, 35, 0.8);
+  color: #e2e8f0;
+  font-size: 0.85rem;
+  font-family: inherit;
+  transition: border-color 0.2s ease;
+}
+
+.sw-wall-edit-input:focus,
+.sw-wall-edit-textarea:focus {
+  outline: none;
+  border-color: rgba(96, 165, 250, 0.5);
+}
+
+.sw-wall-edit-textarea {
+  resize: vertical;
+  min-height: 80px;
+  line-height: 1.5;
+}
+
+.sw-wall-edit-actions {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 0.25rem;
+}
+
+.sw-wall-delete-confirm {
+  display: flex;
+  flex-direction: column;
+  gap: 0.65rem;
+}
+
+.sw-wall-delete-confirm p {
+  font-size: 0.85rem;
+  color: #f87171;
+  margin: 0;
+  padding: 0.5rem;
+  background: rgba(239, 68, 68, 0.1);
+  border-radius: 10px;
+  text-align: center;
+}
+
+/* ─────────────────────────────────────────────────────────────────────────────
+   MISC UTILITIES
+   ───────────────────────────────────────────────────────────────────────────── */
+.sw-wall-sentinel {
   height: 1px;
 }
-.sw-wall-btn{
-  border:1px solid rgba(56,189,248,0.35);
-  background: rgba(15,23,42,0.6);
-  color:#e2f2ff;
-  font-weight:800;
-  font-size:.75rem;
-  padding:.35rem .6rem;
-  border-radius:999px;
-  cursor:pointer;
-}
-.sw-wall-btn i{ margin-right:.25rem; }
-.sw-wall-btn.is-active{
-  background: rgba(56,189,248,0.35);
-  border-color: rgba(56,189,248,0.8);
-}
-.sw-wall-btn-danger{
-  border-color: rgba(248,56,56,0.35);
-  color:#fca5a5;
-}
-.sw-wall-btn-danger:hover{
-  background: rgba(248,56,56,0.35);
-  border-color: rgba(248,56,56,0.8);
+
+.post-list-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+  font-size: 0.75rem;
+  color: #94a3b8;
 }
 
-/* Edit/Delete menu */
-.sw-wall-edit-menu{
-  margin-top:.25rem;
-  padding:.5rem .6rem;
-  border-radius:12px;
-  border:1px solid rgba(148,163,184,0.35);
-  background: rgba(15,23,42,0.75);
-  display:flex;
-  flex-direction:column;
-  gap:.4rem;
-}
-.sw-wall-edit-form{
-  display:flex;
-  flex-direction:column;
-  gap:.4rem;
-}
-.sw-wall-edit-input,
-.sw-wall-edit-textarea{
-  width:100%;
-  border-radius:8px;
-  border:1px solid #4b5563;
-  padding:.4rem .6rem;
-  background:#020617;
-  color:#e5e7eb;
-  font-size:.8rem;
-  font-family: inherit;
-}
-.sw-wall-edit-textarea{
-  resize: vertical;
-  min-height:60px;
-}
-.sw-wall-edit-actions{
-  display:flex;
-  gap:.4rem;
-}
-.sw-wall-delete-confirm{
-  display:flex;
-  flex-direction:column;
-  gap:.4rem;
-}
-.sw-wall-delete-confirm p{
-  font-size:.8rem;
-  color:#fca5a5;
-  margin:0;
+.km-filter input[type="range"] {
+  width: 160px;
+  accent-color: #60a5fa;
 }
 
-.post-list-header{ display:flex; align-items:center; gap:.5rem; margin-bottom:.25rem; font-size:.7rem; color:#cbd5f5; }
-.km-filter input[type="range"]{ width:160px; }
+.status-text {
+  font-size: 0.75rem;
+  opacity: 0.85;
+  margin: 0.25rem 0;
+}
 
-.status-text{ font-size:.72rem; opacity:.85; margin:.15rem 0; }
-.status-error{ color:#fecaca; }
+.status-error {
+  color: #fca5a5;
+}
 
-/* ✅ Chat fixed column that can shrink a bit on narrow screens */
-.chat-panel{
-  flex: 0 0 190px;
-  width: 190px;
-  min-width: 160px;      /* allow shrink in portrait */
-  max-width: min(220px, 42vw);
+/* ─────────────────────────────────────────────────────────────────────────────
+   CHAT PANEL (if visible)
+   ───────────────────────────────────────────────────────────────────────────── */
+.chat-panel {
+  flex: 0 0 200px;
+  width: 200px;
+  min-width: 160px;
+  max-width: min(240px, 42vw);
   min-height: 160px;
-  background: rgba(15, 23, 42, 0.96);
-  border-radius: 14px;
-  border: 1px solid rgba(148, 163, 184, 0.9);
-  box-shadow: 0 10px 28px rgba(0,0,0,.9), 0 0 18px rgba(56,189,248,.45);
-  padding:.4rem .45rem;
-  display:flex;
-  flex-direction:column;
-  overflow:hidden;
+
+  background: linear-gradient(
+    165deg,
+    rgba(30, 35, 50, 0.95) 0%,
+    rgba(22, 27, 42, 0.98) 100%
+  );
+  backdrop-filter: blur(20px);
+  border-radius: 20px;
+  border: 1px solid rgba(100, 120, 160, 0.15);
+  box-shadow:
+    0 4px 24px rgba(0, 0, 0, 0.3),
+    0 0 0 1px rgba(255, 255, 255, 0.03) inset;
+
+  padding: 0.75rem;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 }
 
-.chat-header{
-  font-size:.78rem;
-  font-weight:700;
-  letter-spacing:.06em;
-  text-transform:uppercase;
-  color:#bfdbfe;
-  margin-bottom:.2rem;
+.chat-header {
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  margin-bottom: 0.5rem;
+
+  background: linear-gradient(135deg, #60a5fa, #a78bfa);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
 }
 
-.chat-users{
-  list-style:none;
-  padding:0; margin:0;
-  font-size:.76rem;
-  overflow:auto;
+.chat-users {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  font-size: 0.8rem;
+  overflow: auto;
   -webkit-overflow-scrolling: touch;
   max-height: 44vh;
 }
 
-.chat-users li{ display:flex; align-items:center; gap:.3rem; padding:.18rem .1rem; }
-.chat-users li::before{ content:"👤"; font-size:.72rem; opacity:.9; }
-
-/* Stack only ultra-ultra-small */
-@media (max-width: 340px){
-  .below-row{ flex-direction: column; }
-  .chat-panel{ width:100%; min-width:0; max-width:none; flex: 1 1 auto; }
-  .post-list{ max-height: 46vh; }
+.chat-users li {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.3rem 0.25rem;
+  color: #94a3b8;
+  border-radius: 8px;
+  transition: background 0.2s ease;
 }
 
-/* Full width Facebook-style wall */
-.below-row{ flex-wrap: nowrap !important; }
-
-.sociowall-panel{
-  flex: 1 1 100% !important;
-  width: 100% !important;
-  max-width: 680px !important;
-  margin: 0 auto !important;
+.chat-users li:hover {
+  background: rgba(96, 165, 250, 0.1);
 }
 
-/* Desktop: centered single column */
-@media (min-width: 900px){
-  .below-stage{
-    max-width: 100%;
-    padding: 1rem;
+.chat-users li::before {
+  content: "";
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #22c55e, #10b981);
+  box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
+}
+
+/* ─────────────────────────────────────────────────────────────────────────────
+   RESPONSIVE
+   ───────────────────────────────────────────────────────────────────────────── */
+@media (max-width: 720px) {
+  .sociowall-panel {
+    border-radius: 20px;
+    margin: 0 0.5rem;
+    padding: 1rem 0.75rem;
   }
 
-  .sociowall-panel{
+  .post-card {
+    border-radius: 16px;
+  }
+
+  .sw-wall-head {
+    padding: 0.85rem 1rem;
+  }
+
+  .sw-wall-body {
+    padding: 0.85rem 1rem;
+  }
+
+  .sw-wall-footer {
+    padding: 0.75rem 1rem;
+  }
+
+  .sw-wall-actions {
+    width: 100%;
+    justify-content: center;
+  }
+}
+
+@media (max-width: 480px) {
+  .sociowall-panel {
+    border-radius: 16px;
+    padding: 0.75rem 0.5rem;
+    gap: 1rem;
+  }
+
+  .post-card {
+    border-radius: 14px;
+  }
+
+  .sw-wall-avatar {
+    width: 40px;
+    height: 40px;
+  }
+
+  .sw-wall-title {
+    font-size: 1rem;
+  }
+
+  .sw-wall-image {
+    height: 260px;
+  }
+}
+
+@media (max-width: 340px) {
+  .below-row {
+    flex-direction: column;
+  }
+
+  .chat-panel {
+    width: 100%;
+    min-width: 0;
+    max-width: none;
+    flex: 1 1 auto;
+  }
+
+  .post-list {
+    max-height: 46vh;
+  }
+}
+
+/* ─────────────────────────────────────────────────────────────────────────────
+   LIGHT THEME OVERRIDES
+   ───────────────────────────────────────────────────────────────────────────── */
+body[data-theme="light"] .sociowall-panel {
+  background: linear-gradient(
+    165deg,
+    rgba(248, 250, 252, 0.98) 0%,
+    rgba(241, 245, 249, 0.99) 100%
+  );
+  border-color: rgba(148, 163, 184, 0.3);
+  box-shadow:
+    0 4px 24px rgba(0, 0, 0, 0.08),
+    0 0 0 1px rgba(0, 0, 0, 0.02) inset;
+}
+
+body[data-theme="light"] .sociowall-header {
+  background: linear-gradient(135deg, #3b82f6, #8b5cf6, #ec4899);
+  -webkit-background-clip: text;
+  background-clip: text;
+}
+
+body[data-theme="light"] .post-card {
+  background: linear-gradient(
+    145deg,
+    rgba(255, 255, 255, 0.98) 0%,
+    rgba(248, 250, 252, 0.99) 100%
+  );
+  border-color: rgba(148, 163, 184, 0.2);
+  box-shadow:
+    0 2px 8px rgba(0, 0, 0, 0.06),
+    0 8px 24px rgba(0, 0, 0, 0.04);
+}
+
+body[data-theme="light"] .post-card:hover {
+  border-color: rgba(59, 130, 246, 0.3);
+  box-shadow:
+    0 8px 32px rgba(0, 0, 0, 0.08),
+    0 0 24px rgba(59, 130, 246, 0.08);
+}
+
+body[data-theme="light"] .sw-wall-author {
+  color: #1e293b;
+}
+
+body[data-theme="light"] .sw-wall-title {
+  color: #0f172a;
+}
+
+body[data-theme="light"] .sw-wall-snippet {
+  color: #475569;
+}
+
+body[data-theme="light"] .sw-wall-badge {
+  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(139, 92, 246, 0.1));
+  color: #3b82f6;
+  border-color: rgba(59, 130, 246, 0.2);
+}
+
+body[data-theme="light"] .sw-wall-btn {
+  background: rgba(241, 245, 249, 0.8);
+  border-color: rgba(148, 163, 184, 0.3);
+  color: #475569;
+}
+
+body[data-theme="light"] .sw-wall-btn:hover {
+  background: rgba(59, 130, 246, 0.1);
+  border-color: rgba(59, 130, 246, 0.3);
+  color: #3b82f6;
+}
+
+body[data-theme="light"] .sw-wall-footer {
+  background: rgba(241, 245, 249, 0.5);
+  border-top-color: rgba(148, 163, 184, 0.15);
+}
+
+body[data-theme="light"] .sw-wall-image-fallback {
+  background: linear-gradient(
+    135deg,
+    rgba(241, 245, 249, 0.98) 0%,
+    rgba(226, 232, 240, 0.99) 100%
+  );
+  color: #3b82f6;
+}
+
+body[data-theme="light"] .sw-wall-privacy,
+body[data-theme="light"] .sw-wall-edit-menu {
+  background: rgba(241, 245, 249, 0.95);
+  border-color: rgba(148, 163, 184, 0.2);
+}
+
+body[data-theme="light"] .sw-wall-privacy-row select,
+body[data-theme="light"] .sw-wall-privacy-input,
+body[data-theme="light"] .sw-wall-edit-input,
+body[data-theme="light"] .sw-wall-edit-textarea {
+  background: rgba(255, 255, 255, 0.9);
+  border-color: rgba(148, 163, 184, 0.3);
+  color: #1e293b;
+}
+
+/* Desktop centered */
+@media (min-width: 900px) {
+  .below-stage {
+    max-width: 100%;
+    padding: 1.5rem;
+  }
+
+  .sociowall-panel {
     max-width: 680px;
   }
 }
diff --git a/src/styles/theme.css b/src/styles/theme.css
index b8a7eaf..40c6161 100644
--- a/src/styles/theme.css
+++ b/src/styles/theme.css
@@ -1,12 +1,33 @@
 body[data-theme="dark"] { background:#050816; color:#ffffff; }
 
-body[data-theme="blue"] .sociowall-panel,
+/* Blue theme - sociowall uses dark gray glassmorphism */
+body[data-theme="blue"] .sociowall-panel {
+  background: linear-gradient(
+    165deg,
+    rgba(28, 32, 42, 0.97) 0%,
+    rgba(22, 26, 36, 0.98) 50%,
+    rgba(18, 21, 30, 0.99) 100%
+  );
+  border-color: rgba(80, 90, 110, 0.25);
+  box-shadow:
+    0 4px 32px rgba(0, 0, 0, 0.5),
+    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
+}
+
+body[data-theme="blue"] .post-card {
+  background: linear-gradient(
+    145deg,
+    rgba(35, 40, 52, 0.95) 0%,
+    rgba(28, 32, 44, 0.97) 100%
+  );
+  border-color: rgba(90, 100, 120, 0.18);
+}
+
 body[data-theme="blue"] .chat-panel,
-body[data-theme="blue"] .post-card,
 body[data-theme="blue"] .post-pin--expanded .post-card,
 body[data-theme="blue"] .post-pin--compact .post-pin-bubble {
-  background: rgba(12, 20, 60, 0.96);
-  border-color: rgba(96, 165, 250, 0.95);
+  background: rgba(22, 26, 38, 0.96);
+  border-color: rgba(96, 165, 250, 0.5);
 }
 
 body[data-theme="light"] { background:#e5e7eb; color:#111827; }