From 97ca5e17143e7700e17bf8f5b05a5aee9e9fb688 Mon Sep 17 00:00:00 2001
From: Krystie <krystie@fjccv.org>
Date: Mon, 25 May 2026 15:17:20 -0700
Subject: [PATCH] Add Beep settings system with Twitter Light mode defaults and
 page-level CSS override

- Add class-settings.php with 40+ customizable settings
- Update beep.css to use :root level CSS variables
- Add page-level CSS override to fix Elementor purple gradient
- Update defaults to Twitter Light mode (white background)
---
 assets/beep.css             | 2006 +++++++++++++----------------------
 beep.php                    |    1 +
 includes/class-settings.php |  841 +++++++++++++++
 3 files changed, 1586 insertions(+), 1262 deletions(-)
 create mode 100644 includes/class-settings.php

diff --git a/assets/beep.css b/assets/beep.css
index 108db19..19413b2 100755
--- a/assets/beep.css
+++ b/assets/beep.css
@@ -1,7 +1,6 @@
 /* ============================================================
-   Beep — Twitter-style microblog for WordPress
-   All rules are scoped under .beep-feed so they don't leak
-   into the host theme.
+   Beep — Twitter/X Dark Mode
+   Post and feed styling to match Twitter/X perfectly
    ============================================================ */
 
 .beep-feed,
@@ -9,107 +8,105 @@
   box-sizing: border-box;
 }
 
-.beep-feed {
-  --beep-bg: #ffffff;
-  --beep-text: #0F1419;
-  --beep-text-secondary: #536471;
-  --beep-border: #EFF3F4;
-  --beep-hover: #F7F9F9;
+:root {
+  /* Default Twitter Dark Mode Palette */
+  --beep-bg: #15202B;
+  --beep-card-bg: #192734;
+  --beep-card-hover: #1C2732;
+  --beep-text: #E7E9EA;
+  --beep-muted: #71767B;
+  --beep-border: #2F3336;
   --beep-accent: #1D9BF0;
   --beep-accent-hover: #1A8CD8;
   --beep-like: #F91880;
   --beep-repost: #00BA7C;
-  --beep-page-bg: #E6ECF0;
+}
 
+
+.beep-feed {
+  /* Twitter Dark Mode Palette */
+
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
   max-width: 600px;
-  margin: 24px auto;
+  margin: 0 auto;
   background: var(--beep-bg);
-  border: 1px solid var(--beep-border);
-  border-radius: 16px;
-  overflow: hidden;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-               "Helvetica Neue", Arial, sans-serif;
+  border-left: 1px solid var(--beep-border);
+  border-right: 1px solid var(--beep-border);
   color: var(--beep-text);
   font-size: 15px;
   line-height: 1.4;
   -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  min-height: 100vh;
 }
 
-/* ---------- Header ---------- */
+/* Header */
 .beep-feed-header {
-  padding: 14px 20px;
+  padding: 16px 20px;
   border-bottom: 1px solid var(--beep-border);
-  font-size: 20px;
-  font-weight: 800;
-  background: rgba(255, 255, 255, 0.85);
-  backdrop-filter: blur(12px);
   display: flex;
   align-items: center;
-  gap: 10px;
+  justify-content: space-between;
   position: sticky;
   top: 0;
   z-index: 10;
+  background: rgba(21, 32, 43, 0.85);
+  backdrop-filter: blur(12px);
 }
 
-.beep-feed-header-text {
+.beep-feed-header-title {
   font-size: 20px;
   font-weight: 800;
   color: var(--beep-text);
-  white-space: nowrap;
+  letter-spacing: -0.5px;
 }
 
-.beep-feed-header .beep-logo {
-  height: 36px;
-  width: auto;
-  max-width: 100%;
-  flex-shrink: 0;
-  object-fit: contain;
-  display: block;
-}
-
-/* ---------- Notices ---------- */
-.beep-notice {
-  padding: 24px 20px;
+/* Nav tabs */
+.beep-top-nav {
+  display: flex;
   border-bottom: 1px solid var(--beep-border);
+}
+
+.beep-nav-tab {
+  flex: 1;
+  background: transparent;
+  border: 0;
+  padding: 16px 0;
+  font-family: inherit;
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--beep-muted);
+  cursor: pointer;
+  position: relative;
   text-align: center;
+  transition: background-color 0.15s ease, color 0.15s ease;
 }
 
-.beep-notice p {
-  margin: 0 0 12px;
-  font-size: 16px;
+.beep-nav-tab:hover {
+  background: var(--beep-card-hover);
+  color: var(--beep-text);
 }
 
-.beep-notice-banned {
-  color: var(--beep-text-secondary);
-  font-style: italic;
+.beep-nav-tab.is-active {
+  color: var(--beep-text);
 }
 
-/* ---------- Avatars ---------- */
-.beep-feed .beep-avatar {
-  width: 48px !important;
-  height: 48px !important;
-  min-width: 48px !important;
-  max-width: 48px !important;
-  border-radius: 50% !important;
-  flex-shrink: 0;
-  background: #ccd6dd;
-  object-fit: cover !important;
-  aspect-ratio: 1 / 1 !important;
-  display: block !important;
+.beep-nav-tab.is-active::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 4px;
+  background: var(--beep-accent);
+  border-radius: 9999px;
 }
 
-.beep-feed .beep-avatar-sm {
-  width: 36px !important;
-  height: 36px !important;
-  min-width: 36px !important;
-  max-width: 36px !important;
-}
-
-/* ---------- Compose ---------- */
+/* Compose area */
 .beep-compose {
   display: flex;
   gap: 12px;
-  padding: 16px;
+  padding: 16px 20px;
   border-bottom: 1px solid var(--beep-border);
 }
 
@@ -123,102 +120,167 @@
   border: 0 !important;
   outline: 0 !important;
   resize: none !important;
-  background: #ffffff !important;
+  background: transparent !important;
   font-family: inherit !important;
   font-size: 18px !important;
-  line-height: 1.4 !important;
+  line-height: 1.5 !important;
   color: var(--beep-text) !important;
   padding: 8px 0 !important;
-  min-height: 32px;
+  min-height: 52px;
   overflow: hidden;
   box-shadow: none !important;
+  caret-color: var(--beep-accent);
 }
 
 .beep-feed .beep-input::placeholder {
-  color: var(--beep-text-secondary) !important;
-  opacity: 1 !important;
+  color: var(--beep-muted) !important;
 }
 
-.beep-compose-footer,
-.beep-reply-footer {
+.beep-compose-footer {
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
   align-items: center;
-  gap: 12px;
+  margin-top: 12px;
+  padding-top: 12px;
   border-top: 1px solid var(--beep-border);
-  padding-top: 10px;
-  margin-top: 4px;
 }
 
-/* ---------- Char counter ---------- */
-.beep-char-counter {
-  font-size: 13px;
-  color: var(--beep-text-secondary);
-  font-variant-numeric: tabular-nums;
+.beep-compose-tools {
+  display: flex;
+  gap: 4px;
 }
 
-.beep-counter-warn { color: #FFD400; }
-.beep-counter-bad  { color: #F4212E; font-weight: 700; }
+.beep-compose-tool {
+  background: transparent;
+  border: 0;
+  color: var(--beep-accent);
+  cursor: pointer;
+  width: 36px;
+  height: 36px;
+  border-radius: 9999px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.15s ease;
+}
 
-/* ---------- Buttons ---------- */
+.beep-compose-tool:hover {
+  background: rgba(29, 155, 240, 0.15);
+}
+
+/* Buttons */
 .beep-button {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   background: var(--beep-accent);
   color: #fff;
   border: 0;
   border-radius: 9999px;
-  padding: 8px 18px;
+  padding: 8px 20px;
   font-weight: 700;
   font-size: 15px;
   cursor: pointer;
-  text-decoration: none;
   font-family: inherit;
-  transition: background-color 0.15s ease, opacity 0.15s ease;
+  transition: background-color 0.15s ease, transform 0.1s ease;
 }
 
-.beep-button:hover  { background: var(--beep-accent-hover); color: #fff; }
+.beep-button:hover { background: var(--beep-accent-hover); color: #fff; }
+.beep-button:active { transform: scale(0.96); }
 .beep-button:disabled { opacity: 0.5; cursor: default; }
-.beep-button:disabled:hover { background: var(--beep-accent); }
 
-.beep-button-secondary {
+/* Follow button */
+.beep-follow-btn {
+  background: var(--beep-text);
+  color: var(--beep-bg);
+  border: 0;
+  border-radius: 9999px;
+  padding: 6px 16px;
+  font-weight: 700;
+  font-size: 14px;
+  cursor: pointer;
+  font-family: inherit;
+  transition: opacity 0.15s ease;
+  white-space: nowrap;
+}
+
+.beep-follow-btn:hover { opacity: 0.85; }
+
+.beep-following-btn {
   background: transparent;
-  color: var(--beep-accent);
-  border: 1px solid var(--beep-accent);
-  margin-left: 8px;
-}
-.beep-button-secondary:hover {
-  background: rgba(29, 155, 240, 0.1);
-  color: var(--beep-accent);
+  color: var(--beep-text);
+  border: 1px solid var(--beep-border);
+  border-radius: 9999px;
+  padding: 6px 16px;
+  font-weight: 700;
+  font-size: 14px;
+  cursor: pointer;
+  font-family: inherit;
+  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
 }
 
-/* ---------- Post ---------- */
-.beep-list {
-  background: var(--beep-bg);
+.beep-following-btn:hover {
+  border-color: #F4212E;
+  color: #F4212E;
+  background: rgba(244, 33, 46, 0.1);
 }
 
+/* Char counter */
+.beep-char-counter { font-size: 13px; color: var(--beep-muted); font-variant-numeric: tabular-nums; }
+.beep-counter-warn { color: #FFD400; }
+.beep-counter-bad  { color: #F4212E; font-weight: 700; }
+
+/* Avatars */
+.beep-feed .beep-avatar {
+  width: 48px !important;
+  height: 48px !important;
+  min-width: 48px !important;
+  max-width: 48px !important;
+  border-radius: 50% !important;
+  flex-shrink: 0;
+  background: var(--beep-border);
+  object-fit: cover !important;
+  aspect-ratio: 1 / 1 !important;
+  display: block !important;
+  border: 0 !important;
+  transition: filter 0.15s ease;
+}
+
+.beep-feed .beep-avatar:hover { filter: brightness(0.9); }
+
+.beep-feed .beep-avatar-sm {
+  width: 40px !important;
+  height: 40px !important;
+  min-width: 40px !important;
+  max-width: 40px !important;
+}
+
+/* Post list */
+.beep-list { background: var(--beep-bg); }
+
 .beep-empty {
-  padding: 40px 20px;
+  padding: 60px 20px;
   text-align: center;
-  color: var(--beep-text-secondary);
+  color: var(--beep-muted);
 }
 
+/* Individual post */
 .beep-post {
   display: flex;
   gap: 12px;
-  padding: 12px 16px;
+  padding: 14px 20px;
   border-bottom: 1px solid var(--beep-border);
+  background: var(--beep-bg);
   transition: background-color 0.15s ease;
+  cursor: pointer;
 }
 
-.beep-post:hover { background: var(--beep-hover); }
+.beep-post:hover { background: var(--beep-card-hover); }
 .beep-post:last-child { border-bottom: 0; }
 
-.beep-post-body {
-  flex: 1;
-  min-width: 0;
-}
+.beep-post-body { flex: 1; min-width: 0; }
 
-/* ---------- Meta line ---------- */
+/* Meta line */
 .beep-meta {
   display: flex;
   align-items: center;
@@ -232,84 +294,64 @@
 .beep-name {
   font-weight: 700;
   color: var(--beep-text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
+.beep-name:hover { text-decoration: underline; cursor: pointer; }
+
 .beep-handle,
 .beep-dot,
-.beep-time {
-  color: var(--beep-text-secondary);
-  font-weight: 400;
-}
+.beep-time { color: var(--beep-muted); font-weight: 400; white-space: nowrap; }
 
 .beep-time { text-decoration: none; }
+.beep-time:hover { text-decoration: underline; cursor: pointer; }
 
 .beep-spacer { flex: 1; }
 
-.beep-menu-trigger {
-  background: transparent;
-  border: 0;
-  color: var(--beep-text-secondary);
-  cursor: pointer;
-  font-size: 18px;
-  line-height: 1;
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  transition: background-color 0.15s ease, color 0.15s ease;
+/* Verified badge */
+.beep-verified {
+  width: 18px;
+  height: 18px;
+  fill: var(--beep-accent);
+  flex-shrink: 0;
+  margin-left: 2px;
+  vertical-align: text-bottom;
 }
 
-.beep-menu-trigger:hover {
-  background: rgba(244, 33, 46, 0.1);
-  color: #F4212E;
-}
-
-/* ---------- Text ---------- */
+/* Post text */
 .beep-text {
   font-size: 15px;
-  line-height: 1.4;
+  line-height: 1.5;
   color: var(--beep-text);
   word-wrap: break-word;
   overflow-wrap: anywhere;
-  margin: 2px 0 12px;
+  margin: 0;
+  white-space: pre-wrap;
 }
 
-.beep-tag,
-.beep-mention,
-.beep-link {
-  color: var(--beep-accent);
-  text-decoration: none;
-}
+.beep-tag, .beep-mention { color: var(--beep-text); text-decoration: none; cursor: pointer; }
+.beep-tag:hover, .beep-mention:hover { text-decoration: underline; }
 
-.beep-tag:hover,
-.beep-mention:hover,
-.beep-link:hover {
-  text-decoration: underline;
-}
+.beep-link { color: var(--beep-accent); text-decoration: none; }
+.beep-link:hover { text-decoration: underline; }
 
-.beep-mention-stale {
-  color: var(--beep-accent);
-  opacity: 0.85;
-}
-
-/* ---------- Action row ---------- */
+/* Action bar */
 .beep-actions {
   display: flex;
   justify-content: space-between;
   max-width: 425px;
-  margin-top: 4px;
+  margin-top: 12px;
 }
 
 .beep-action {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 4px;
   background: transparent;
   border: 0;
-  color: var(--beep-text-secondary);
+  color: var(--beep-muted);
   font-size: 13px;
   font-family: inherit;
   cursor: pointer;
@@ -319,144 +361,522 @@
   transition: color 0.15s ease, background-color 0.15s ease;
 }
 
-.beep-action svg {
+.beep-action svg,
+.beep-action .beep-icon-svg {
   width: 18px;
   height: 18px;
   fill: currentColor;
   display: block;
+  flex-shrink: 0;
 }
 
-.beep-action .beep-count {
+.beep-count {
   font-variant-numeric: tabular-nums;
+  min-width: 20px;
 }
 
-.beep-action-reply:hover { color: var(--beep-accent); background: rgba(29,155,240,0.10); }
-.beep-action-like:hover  { color: var(--beep-like);   background: rgba(249, 24,128,0.10); }
-.beep-action-share:hover { color: var(--beep-accent); background: rgba(29,155,240,0.10); }
+/* Reply - blue */
+.beep-action-reply:hover {
+  color: var(--beep-accent);
+  background: rgba(29, 155, 240, 0.1);
+}
 
-/* Like state */
-.beep-action-like .beep-icon-filled  { display: none; }
-.beep-action-like .beep-icon-outline { display: inline-flex; }
+/* Retweet - green */
+.beep-action-retweet:hover {
+  color: var(--beep-repost);
+  background: rgba(0, 186, 124, 0.1);
+}
 
-.beep-action-like.is-liked {
+.beep-action.is-reposted { color: var(--beep-repost); }
+
+/* Like - pink */
+.beep-action-like:hover {
   color: var(--beep-like);
+  background: rgba(249, 24, 128, 0.1);
 }
-.beep-action-like.is-liked .beep-icon-outline { display: none; }
-.beep-action-like.is-liked .beep-icon-filled  { display: inline-flex; }
 
-/* Heart "pop" animation when newly liked */
+.beep-action.is-liked { color: var(--beep-like); }
+
+/* Bookmark - blue */
+.beep-action-bookmark:hover {
+  color: var(--beep-accent);
+  background: rgba(29, 155, 240, 0.1);
+}
+
+.beep-action.is-bookmarked { color: var(--beep-accent); }
+
+/* Share - blue */
+.beep-action-share:hover {
+  color: var(--beep-accent);
+  background: rgba(29, 155, 240, 0.1);
+}
+
+/* Heart pop animation */
 .beep-action-like.beep-just-liked .beep-icon-filled {
   animation: beep-heart-pop 0.55s ease;
 }
 
 @keyframes beep-heart-pop {
-  0%   { transform: scale(0.5); }
-  35%  { transform: scale(1.35); }
-  60%  { transform: scale(0.85); }
+  0%   { transform: scale(0.85); }
+  40%  { transform: scale(1.35); }
+  70%  { transform: scale(0.9); }
   100% { transform: scale(1); }
 }
 
-/* ---------- Reply form ---------- */
-.beep-reply-form {
-  margin-top: 8px;
-  padding: 10px 0 4px;
-  border-top: 1px solid var(--beep-border);
+/* Retweet spin animation */
+.beep-action-retweet.beep-just-retweeted svg {
+  animation: beep-retweet-spin 0.4s ease;
 }
 
-.beep-reply-form .beep-input {
-  font-size: 16px;
+@keyframes beep-retweet-spin {
+  0%   { transform: rotate(0deg) scale(1); }
+  50%  { transform: rotate(180deg) scale(1.2); }
+  100% { transform: rotate(360deg) scale(1); }
 }
 
-.beep-reply-form[hidden] { display: none; }
+/* Media */
+.beep-media-attachments {
+  margin-top: 12px;
+  border-radius: 16px;
+  overflow: hidden;
+  border: 1px solid var(--beep-border);
+}
 
-.beep-pending {
-  padding: 12px;
-  background: var(--beep-hover);
-  color: var(--beep-text-secondary);
-  border-radius: 8px;
+.beep-media-attachments img {
+  width: 100%;
+  height: auto;
+  display: block;
+  max-height: 400px;
+  object-fit: cover;
+}
+
+/* Image grid */
+.beep-media-grid {
+  display: grid;
+  gap: 2px;
+  border-radius: 16px;
+  overflow: hidden;
+  border: 1px solid var(--beep-border);
+}
+
+.beep-media-grid-2 { grid-template-columns: 1fr 1fr; }
+.beep-media-grid-3 .beep-media-grid-item:first-child { grid-column: span 2; }
+.beep-media-grid-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
+
+.beep-media-grid-item {
+  overflow: hidden;
+  aspect-ratio: 16 / 9;
+}
+
+.beep-media-grid-item img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  max-height: none;
+}
+
+/* Polls */
+.beep-poll-container {
+  margin-top: 12px;
+  border: 1px solid var(--beep-border);
+  border-radius: 16px;
+  padding: 16px;
+  background: transparent;
+}
+
+.beep-poll-question {
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--beep-text);
+  margin-bottom: 12px;
+}
+
+.beep-poll-options {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.beep-poll-option {
+  border: 1px solid var(--beep-border);
+  border-radius: 9999px;
+  padding: 10px 16px;
+  cursor: pointer;
   font-size: 14px;
-  text-align: center;
+  font-weight: 700;
+  color: var(--beep-text);
+  background: transparent;
+  transition: background-color 0.15s ease, border-color 0.15s ease;
+  position: relative;
+  overflow: hidden;
 }
 
-/* ---------- Replies ---------- */
+.beep-poll-option:hover {
+  background: var(--beep-card-hover);
+  border-color: var(--beep-muted);
+}
+
+.beep-poll-option.is-voted { border-color: var(--beep-accent); }
+
+.beep-poll-result {
+  border: 1px solid var(--beep-border);
+  border-radius: 9999px;
+  padding: 10px 16px;
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--beep-text);
+  position: relative;
+  overflow: hidden;
+}
+
+.beep-poll-result-bar {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  background: var(--beep-accent);
+  opacity: 0.3;
+  max-width: 100%;
+}
+
+.beep-poll-result.is-voted { border-color: var(--beep-accent); }
+.beep-poll-result-text { position: relative; z-index: 1; }
+.beep-poll-end { font-size: 13px; color: var(--beep-muted); margin-top: 8px; font-weight: 400; }
+
+/* Quotes */
+.beep-quoted-container {
+  margin-top: 12px;
+  border: 1px solid var(--beep-border);
+  border-radius: 16px;
+  padding: 12px 16px;
+  background: transparent;
+}
+
+.beep-quoted-post { text-decoration: none; color: inherit; }
+.beep-quoted-post:hover { text-decoration: none; }
+
+.beep-quoted-meta { font-size: 13px; color: var(--beep-muted); margin-bottom: 4px; }
+.beep-quoted-meta .beep-name { font-weight: 700; }
+
+.beep-quoted-text {
+  font-size: 14px;
+  color: var(--beep-text);
+  line-height: 1.4;
+  margin: 0;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/* Voice note */
+.beep-voice-note {
+  margin-top: 12px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  background: var(--beep-card-hover);
+  border-radius: 9999px;
+  padding: 10px 16px;
+  max-width: 400px;
+}
+
+.beep-voice-play {
+  background: var(--beep-accent);
+  border: 0;
+  border-radius: 50%;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  flex-shrink: 0;
+  padding: 0;
+}
+
+.beep-voice-play svg { width: 14px; height: 14px; fill: #fff; }
+
+.beep-voice-waveform {
+  flex: 1;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.beep-voice-bar {
+  width: 3px;
+  height: 100%;
+  background: var(--beep-accent);
+  border-radius: 9999px;
+  opacity: 0.6;
+}
+
+.beep-voice-duration { font-size: 13px; color: var(--beep-muted); font-variant-numeric: tabular-nums; }
+
+/* Replies */
 .beep-replies {
   margin-top: 8px;
-  padding-left: 24px;
+  padding-left: 0;
   border-left: 2px solid var(--beep-border);
+  margin-left: 24px;
 }
 
 .beep-reply {
   display: flex;
   gap: 10px;
-  padding: 10px 0;
+  padding: 10px 16px;
   border-bottom: 1px solid var(--beep-border);
+  background: var(--beep-bg);
+  transition: background-color 0.15s ease;
 }
 
 .beep-reply:last-child { border-bottom: 0; }
+.beep-reply-body { flex: 1; min-width: 0; }
+.beep-reply .beep-text { font-size: 14px; margin-bottom: 0; }
+.beep-reply .beep-meta { font-size: 13px; margin-bottom: 0; }
+.beep-reply .beep-avatar { width: 36px !important; height: 36px !important; min-width: 36px !important; max-width: 36px !important; }
 
-.beep-reply-body {
-  flex: 1;
-  min-width: 0;
+/* Reply form */
+.beep-reply-form {
+  margin-top: 8px;
+  padding: 12px 16px;
+  border-top: 1px solid var(--beep-border);
+  border-bottom: 1px solid var(--beep-border);
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+  background: var(--beep-bg);
 }
 
-.beep-reply .beep-text {
-  font-size: 14px;
-  margin-bottom: 0;
+.beep-reply-form[hidden] { display: none; }
+.beep-reply-form-body { flex: 1; min-width: 0; }
+
+.beep-feed .beep-reply-input {
+  width: 100% !important;
+  border: 0 !important;
+  outline: 0 !important;
+  resize: none !important;
+  background: transparent !important;
+  font-family: inherit !important;
+  font-size: 15px !important;
+  color: var(--beep-text) !important;
+  padding: 6px 0 !important;
+  min-height: 36px;
+  box-shadow: none !important;
+  caret-color: var(--beep-accent);
 }
 
-/* ---------- New-post entry animation ---------- */
-.beep-new {
-  animation: beep-slide-in 0.4s ease;
+.beep-feed .beep-reply-input::placeholder { color: var(--beep-muted) !important; }
+
+.beep-reply-footer {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  margin-top: 8px;
 }
 
+/* Animations */
+.beep-new { animation: beep-slide-in 0.3s ease; }
+
 @keyframes beep-slide-in {
-  from { opacity: 0; transform: translateY(-6px); }
+  from { opacity: 0; transform: translateY(-8px); }
   to   { opacity: 1; transform: translateY(0); }
 }
 
-/* ---------- Mobile ---------- */
-@media (max-width: 640px) {
-  .beep-feed {
-    margin: 0 auto;
-    border-radius: 0;
-    border-left: 0;
-    border-right: 0;
-  }
-  .beep-actions { max-width: none; }
+/* Post badge */
+.beep-post-badge {
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  opacity: 0.5;
+  margin-left: 2px;
 }
 
-/* ---------- Tip popover (for "Copied" etc) ---------- */
+.beep-post-badge:hover { opacity: 0.8; cursor: pointer; }
+
+/* Loading */
+.beep-loading { opacity: 0.5; pointer-events: none; }
+
+/* Mobile */
+@media (max-width: 640px) {
+  .beep-feed { margin: 0; border-left: 0; border-right: 0; }
+  .beep-post { padding: 12px 16px; }
+  .beep-actions { max-width: none; }
+  .beep-compose { padding: 12px 16px; }
+  .beep-feed-header { padding: 12px 16px; }
+}
+
+/* Delete */
+.beep-delete-row { display: flex; justify-content: flex-end; margin-top: 6px; }
+
+.beep-delete-link {
+  background: transparent;
+  border: 0;
+  color: var(--beep-muted);
+  font-family: inherit;
+  font-size: 13px;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 4px;
+  transition: color 0.15s ease, background-color 0.15s ease;
+}
+
+.beep-delete-link:hover { color: #F4212E; background: rgba(244, 33, 46, 0.1); }
+
+/* Notice */
+.beep-notice { padding: 14px 20px; border-bottom: 1px solid var(--beep-border); font-size: 14px; }
+.beep-notice p { margin: 0; color: var(--beep-muted); }
+.beep-notice-banned { color: #F4212E; font-style: italic; }
+
+/* Header post button */
+.beep-post-btn-header {
+  background: var(--beep-accent);
+  color: #fff;
+  border: 0;
+  border-radius: 9999px;
+  padding: 8px 20px;
+  font-weight: 700;
+  font-size: 15px;
+  cursor: pointer;
+  font-family: inherit;
+  transition: background-color 0.15s ease, transform 0.1s ease;
+}
+
+.beep-post-btn-header:hover { background: var(--beep-accent-hover); }
+.beep-post-btn-header:active { transform: scale(0.96); }
+
+/* Back link */
+.beep-back-link {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 20px;
+  border-bottom: 1px solid var(--beep-border);
+  background: var(--beep-bg);
+  color: var(--beep-text);
+  text-decoration: none;
+  font-weight: 700;
+  font-size: 19px;
+  transition: background-color 0.15s ease;
+}
+
+.beep-back-link:hover { background: var(--beep-card-hover); color: var(--beep-text); text-decoration: none; }
+.beep-back-link svg { width: 20px; height: 20px; fill: currentColor; }
+
+/* Thread modal */
+.beep-thread-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(4px);
+}
+
+.beep-thread-modal[hidden] { display: none; }
+
+.beep-thread-content {
+  background: var(--beep-card-bg);
+  width: 100%;
+  max-width: 600px;
+  max-height: 90vh;
+  overflow-y: auto;
+  border-left: 1px solid var(--beep-border);
+  border-right: 1px solid var(--beep-border);
+}
+
+.beep-thread-header {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 12px 20px;
+  border-bottom: 1px solid var(--beep-border);
+  position: sticky;
+  top: 0;
+  background: var(--beep-card-bg);
+  z-index: 1;
+}
+
+.beep-thread-close {
+  background: transparent;
+  border: 0;
+  color: var(--beep-text);
+  cursor: pointer;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  transition: background-color 0.15s ease;
+}
+
+.beep-thread-close:hover { background: var(--beep-card-hover); }
+.beep-thread-close svg { width: 20px; height: 20px; fill: currentColor; }
+.beep-thread-title { font-size: 18px; font-weight: 700; color: var(--beep-text); }
+
+/* Tooltip */
 .beep-tip {
   position: absolute;
   margin-left: 8px;
-  padding: 2px 8px;
+  padding: 4px 10px;
   background: var(--beep-text);
-  color: #fff;
+  color: var(--beep-bg);
   border-radius: 4px;
   font-size: 12px;
   white-space: nowrap;
+  pointer-events: none;
+  z-index: 100;
   animation: beep-tip-fade 1.5s ease forwards;
 }
 
 @keyframes beep-tip-fade {
-  0%   { opacity: 0; }
-  20%  { opacity: 1; }
+  0%   { opacity: 0; transform: translateY(-4px); }
+  20%  { opacity: 1; transform: translateY(0); }
   80%  { opacity: 1; }
   100% { opacity: 0; }
 }
 
-/* ============================================================
-   v1.4 — sort tabs, nested replies, Twitter polish
-   ============================================================ */
-
-/* ---------- Sort tabs (Latest / Top) ---------- */
-.beep-feed .beep-tabs {
-  display: flex;
-  border-bottom: 1px solid var(--beep-border);
-  background: var(--beep-bg);
+/* GIF */
+.beep-gif-embed {
+  margin-top: 12px;
+  border-radius: 12px;
+  overflow: hidden;
+  border: 1px solid var(--beep-border);
 }
 
-.beep-feed .beep-tab {
+.beep-gif-embed img {
+  width: 100%;
+  height: auto;
+  max-height: 400px;
+  object-fit: cover;
+  display: block;
+  margin: 0;
+  border-radius: 12px;
+}
+
+/* Profile header */
+.beep-profile-header { padding: 16px 20px; border-bottom: 1px solid var(--beep-border); }
+.beep-profile-name { font-size: 20px; font-weight: 800; color: var(--beep-text); margin-bottom: 2px; }
+.beep-profile-meta { font-size: 14px; color: var(--beep-muted); }
+.beep-profile-stats { display: flex; gap: 20px; margin-top: 12px; }
+.beep-profile-stat { color: var(--beep-muted); font-size: 14px; cursor: pointer; }
+.beep-profile-stat:hover { text-decoration: underline; }
+.beep-profile-stat strong { color: var(--beep-text); font-weight: 700; }
+
+/* Tabs */
+.beep-tabs {
+  display: flex;
+  border-bottom: 1px solid var(--beep-border);
+  background: var(--beep-card-bg);
+}
+
+.beep-tab {
   flex: 1;
   background: transparent;
   border: 0;
@@ -464,22 +884,15 @@
   font-family: inherit;
   font-size: 15px;
   font-weight: 700;
-  color: var(--beep-text-secondary);
+  color: var(--beep-muted);
   cursor: pointer;
   position: relative;
   transition: background-color 0.15s ease, color 0.15s ease;
 }
 
-.beep-feed .beep-tab:hover {
-  background: var(--beep-hover);
-  color: var(--beep-text);
-}
-
-.beep-feed .beep-tab.is-active {
-  color: var(--beep-text);
-}
-
-.beep-feed .beep-tab.is-active::after {
+.beep-tab:hover { background: var(--beep-card-hover); color: var(--beep-text); }
+.beep-tab.is-active { color: var(--beep-text); }
+.beep-tab.is-active::after {
   content: '';
   position: absolute;
   left: 50%;
@@ -491,1077 +904,146 @@
   background: var(--beep-accent);
 }
 
-/* ---------- Loading state on feed list ---------- */
-.beep-feed .beep-list.beep-loading {
-  opacity: 0.5;
-  pointer-events: none;
-  transition: opacity 0.15s ease;
-}
-
-/* ---------- Action row variant for replies (smaller, no share) ---------- */
-.beep-feed .beep-actions-reply {
-  max-width: 240px;
-  gap: 24px;
-  margin-top: 2px;
-}
-
-/* ---------- Nested replies: visual indent, capped at depth 2 ---------- */
-.beep-feed .beep-replies-nested {
-  margin-top: 8px;
-  margin-left: 12px;
-  padding-left: 14px;
-  border-left: 2px solid var(--beep-border);
-}
-
-/* Anything deeper than depth 2 stops indenting more */
-.beep-feed .beep-depth-2 .beep-replies-nested,
-.beep-feed .beep-depth-3 .beep-replies-nested,
-.beep-feed .beep-depth-4 .beep-replies-nested {
-  margin-left: 0;
-  padding-left: 8px;
-}
-
-/* ---------- Focus rings on text inputs ---------- */
+/* Focus */
 .beep-feed .beep-input:focus,
-.beep-feed .beep-input:focus-visible {
+.beep-feed .beep-input:focus-visible,
+.beep-feed .beep-reply-input:focus,
+.beep-feed .beep-reply-input:focus-visible {
   outline: 0 !important;
   box-shadow: none !important;
 }
 
-.beep-feed .beep-compose:focus-within,
-.beep-feed .beep-reply-form:focus-within {
-  background: linear-gradient(to bottom, transparent, rgba(29, 155, 240, 0.04));
-  transition: background-color 0.15s ease;
+.beep-feed .beep-compose:focus-within { background: rgba(29, 155, 240, 0.03); }
+
+/* Hidden */
+[hidden] { display: none !important; }
+
+
+/* Magic Login Form */
+.beep-magic-login {
+    padding: 24px;
+    display: flex;
+    justify-content: center;
 }
 
-/* ---------- Buttons: refine to match Twitter's "Post" button ---------- */
-.beep-feed .beep-post-button,
-.beep-feed .beep-reply-submit {
-  font-size: 14px;
-  padding: 7px 18px;
-  font-weight: 700;
-  letter-spacing: -0.1px;
+.beep-magic-login-card {
+    background: #192734;
+    border-radius: 16px;
+    padding: 32px;
+    width: 100%;
+    max-width: 400px;
+    text-align: center;
 }
 
-/* ---------- Tighter post hover ---------- */
-.beep-feed .beep-post {
-  transition: background-color 0.15s ease;
+.beep-magic-login-header {
+    margin-bottom: 24px;
 }
 
-/* ---------- Refine action icons size ---------- */
-.beep-feed .beep-action {
-  padding: 4px 6px;
-  font-size: 13px;
-}
-.beep-feed .beep-action svg {
-  width: 17px;
-  height: 17px;
+.beep-magic-login-header svg {
+    margin-bottom: 16px;
 }
 
-/* ---------- Reply rows: tighten spacing ---------- */
-.beep-feed .beep-reply {
-  padding: 10px 0 8px;
+.beep-magic-login-header h3 {
+    color: #E7E9EA;
+    font-size: 20px;
+    font-weight: 700;
+    margin: 0 0 8px 0;
 }
 
-/* Make sure reply meta + actions feel cohesive */
-.beep-feed .beep-reply .beep-text {
-  margin-bottom: 4px;
+.beep-magic-login-header p {
+    color: #71767B;
+    font-size: 14px;
+    margin: 0;
 }
 
-/* ---------- Per-post Beep badge (top-right of each post/reply) ---------- */
-.beep-feed .beep-post-badge {
-  width: 20px;
-  height: 20px;
-  flex-shrink: 0;
-  display: block;
-  opacity: 0.75;
-  margin-left: 4px;
-  transition: opacity 0.15s ease;
-}
-.beep-feed .beep-post-badge:hover {
-  opacity: 1;
-}
-.beep-feed .beep-post-badge-sm {
-  width: 16px;
-  height: 16px;
-}
-
-/* ---------- Delete row (bottom of post/reply, admin only) ---------- */
-.beep-feed .beep-delete-row {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 6px;
-}
-
-.beep-feed .beep-delete-link {
-  background: transparent;
-  border: 0;
-  color: var(--beep-text-secondary);
-  font-family: inherit;
-  font-size: 22px;
-  line-height: 1;
-  font-weight: 400;
-  cursor: pointer;
-  width: 28px;
-  height: 28px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  transition: color 0.15s ease, background-color 0.15s ease, transform 0.1s ease;
-}
-
-.beep-feed .beep-delete-link:hover {
-  color: #F4212E;
-  background: rgba(244, 33, 46, 0.10);
-}
-
-.beep-feed .beep-delete-link:active {
-  color: #F4212E;
-  background: rgba(244, 33, 46, 0.25);
-  transform: scale(0.92);
-}
-
-/* Override earlier 20/16 badge sizes with bigger 32/24 */
-.beep-feed .beep-post-badge {
-  width: 32px;
-  height: 32px;
-}
-.beep-feed .beep-post-badge-sm {
-  width: 24px;
-  height: 24px;
-}
-
-/* ============================================================
-   v1.4.1 — theme-busting overrides
-   Many WordPress themes style ALL <button> elements as big
-   blue gradient blocks. Force our icon-only buttons back to
-   clean transparent icons that only show color on hover.
-   ============================================================ */
-.beep-feed button.beep-action,
-.beep-feed button.beep-delete-link,
-.beep-feed button.beep-menu-trigger,
-.beep-feed button.beep-tab,
-.beep-feed button[data-beep-toggle-reply],
-.beep-feed button[data-beep-like-post],
-.beep-feed button[data-beep-like-reply],
-.beep-feed button[data-beep-share],
-.beep-feed button[data-beep-delete],
-.beep-feed button[data-beep-delete-reply] {
-  background: transparent !important;
-  background-image: none !important;
-  background-color: transparent !important;
-  border: 0 !important;
-  border-radius: 9999px !important;
-  box-shadow: none !important;
-  text-shadow: none !important;
-  text-transform: none !important;
-  letter-spacing: 0 !important;
-  min-height: 0 !important;
-  min-width: 0 !important;
-  height: auto !important;
-  width: auto !important;
-  line-height: 1 !important;
-  font-family: inherit !important;
-  color: var(--beep-text-secondary) !important;
-}
-
-/* Specific sizing for action buttons */
-.beep-feed button.beep-action {
-  padding: 6px 8px !important;
-  font-size: 13px !important;
-  font-weight: 400 !important;
-  display: inline-flex !important;
-  align-items: center !important;
-  gap: 6px !important;
-  margin: 0 !important;
-}
-
-/* Hover/active recoloring */
-.beep-feed button.beep-action-reply:hover {
-  color: var(--beep-accent) !important;
-  background: rgba(29, 155, 240, 0.10) !important;
-}
-.beep-feed button.beep-action-like:hover,
-.beep-feed button.beep-action-like.is-liked {
-  color: var(--beep-like) !important;
-}
-.beep-feed button.beep-action-like:hover {
-  background: rgba(249, 24, 128, 0.10) !important;
-}
-.beep-feed button.beep-action-share:hover {
-  color: var(--beep-accent) !important;
-  background: rgba(29, 155, 240, 0.10) !important;
-}
-
-/* Delete × button: small round icon */
-.beep-feed button.beep-delete-link {
-  width: 28px !important;
-  height: 28px !important;
-  padding: 0 !important;
-  font-size: 22px !important;
-  font-weight: 400 !important;
-  border-radius: 50% !important;
-  display: flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-  margin: 0 !important;
-}
-.beep-feed button.beep-delete-link:hover {
-  color: #F4212E !important;
-  background: rgba(244, 33, 46, 0.10) !important;
-}
-.beep-feed button.beep-delete-link:active {
-  color: #F4212E !important;
-  background: rgba(244, 33, 46, 0.25) !important;
-  transform: scale(0.92);
-}
-
-/* Tab buttons */
-.beep-feed button.beep-tab {
-  flex: 1 !important;
-  padding: 14px 0 !important;
-  font-size: 15px !important;
-  font-weight: 700 !important;
-  border-radius: 0 !important;
-  color: var(--beep-text-secondary) !important;
-}
-.beep-feed button.beep-tab.is-active {
-  color: var(--beep-text) !important;
-}
-.beep-feed button.beep-tab:hover {
-  background: var(--beep-hover) !important;
-}
-
-/* The Beep/Reply submit buttons keep their solid blue pill */
-.beep-feed button.beep-button {
-  background: var(--beep-accent) !important;
-  background-image: none !important;
-  background-color: var(--beep-accent) !important;
-  color: #fff !important;
-  border: 0 !important;
-  border-radius: 9999px !important;
-  padding: 7px 18px !important;
-  font-weight: 700 !important;
-  font-size: 14px !important;
-  letter-spacing: -0.1px !important;
-  width: auto !important;
-  min-height: 0 !important;
-  height: auto !important;
-  box-shadow: none !important;
-}
-.beep-feed button.beep-button:hover {
-  background: var(--beep-accent-hover) !important;
-}
-.beep-feed button.beep-button:disabled {
-  opacity: 0.5 !important;
-  cursor: default !important;
-}
-
-/* ============================================================
-   Media — images & video
-   ============================================================ */
-
-/* ---------- Composer media button ---------- */
-.beep-compose-tools {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  margin-right: auto;
-}
-
-.beep-media-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  color: var(--beep-accent);
-  cursor: pointer;
-  transition: background-color 0.15s ease, color 0.15s ease;
-}
-
-.beep-media-btn:hover {
-  background: rgba(29, 155, 240, 0.10);
-  color: var(--beep-accent);
-}
-
-.beep-media-btn svg {
-  display: block;
-  flex-shrink: 0;
-}
-
-.beep-media-count {
-  font-size: 12px;
-  color: var(--beep-text-secondary);
-  font-variant-numeric: tabular-nums;
-}
-
-/* ---------- Composer media preview ---------- */
-.beep-compose-media-preview {
-  margin-top: 10px;
-  margin-bottom: 4px;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-
-.beep-compose-media-preview[hidden] {
-  display: none;
-}
-
-.beep-media-preview-item {
-  position: relative;
-  width: 80px;
-  height: 80px;
-  border-radius: 8px;
-  overflow: hidden;
-  flex-shrink: 0;
-  border: 1px solid var(--beep-border);
-}
-
-.beep-media-preview-item img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
-}
-
-.beep-media-remove {
-  position: absolute;
-  top: 2px;
-  right: 2px;
-  width: 22px;
-  height: 22px;
-  background: rgba(0, 0, 0, 0.6);
-  border: 0;
-  border-radius: 50%;
-  color: #fff;
-  font-size: 16px;
-  line-height: 1;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  transition: background-color 0.15s ease;
-}
-
-.beep-media-remove:hover {
-  background: rgba(244, 33, 46, 0.8);
-}
-
-/* ---------- Image gallery in posts (Twitter-style grid) ---------- */
-.beep-media-attachments {
-  margin: 6px 0 2px;
-}
-
-.beep-gallery {
-  display: grid;
-  gap: 4px;
-  border-radius: 12px;
-  overflow: hidden;
-  border: 1px solid var(--beep-border);
-}
-
-.beep-gallery-1 {
-  grid-template-columns: 1fr;
-}
-
-.beep-gallery-2 {
-  grid-template-columns: 1fr 1fr;
-}
-
-.beep-gallery-3 {
-  grid-template-columns: 1fr 1fr;
-  grid-template-rows: 1fr 1fr;
-}
-
-.beep-gallery-3 .beep-gallery-item:first-child {
-  grid-row: span 2;
-}
-
-.beep-gallery-4 {
-  grid-template-columns: 1fr 1fr;
-  grid-template-rows: 1fr 1fr;
-}
-
-.beep-gallery-item {
-  position: relative;
-  overflow: hidden;
-  background: #f0f0f0;
-  min-height: 80px;
-}
-
-.beep-gallery-item img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
-  transition: filter 0.15s ease;
-}
-
-.beep-gallery-item:hover img {
-  filter: brightness(0.92);
-}
-
-/* Lightbox link */
-.beep-gallery-item a {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-
-/* ---------- Video embed ---------- */
-.beep-video-embed {
-  margin: 6px 0 2px;
-  border-radius: 12px;
-  overflow: hidden;
-  border: 1px solid var(--beep-border);
-}
-
-.beep-video-embed iframe,
-.beep-video-embed video {
-  display: block;
-  width: 100%;
-  max-height: 375px;
-}
-
-/* Aspect ratio container for responsive video */
-.beep-video-embed {
-  position: relative;
-}
-
-.beep-video-embed iframe {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
-/* Make the footer layout handle the new left-aligned tools */
-.beep-compose-footer {
-  justify-content: flex-end;
-  gap: 8px;
-}
-
-/* ---------- Voice note button in composer ---------- */
-.beep-voice-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  color: var(--beep-accent);
-  cursor: pointer;
-  transition: background-color 0.15s ease, color 0.15s ease;
-}
-
-.beep-voice-btn:hover {
-  background: rgba(29, 155, 240, 0.10);
-  color: var(--beep-accent);
-}
-
-.beep-voice-btn svg {
-  display: block;
-  flex-shrink: 0;
-}
-
-/* ---------- Voice note preview in composer ---------- */
-.beep-compose-voice-preview {
-  margin-top: 8px;
-  margin-bottom: 4px;
-}
-
-.beep-compose-voice-preview[hidden] {
-  display: none;
-}
-
-.beep-voice-preview-card {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  background: var(--beep-hover);
-  border: 1px solid var(--beep-border);
-  border-radius: 9999px;
-  padding: 6px 12px 6px 10px;
-  font-size: 13px;
-  color: var(--beep-text);
-}
-
-.beep-voice-preview-card svg {
-  color: var(--beep-accent);
-  flex-shrink: 0;
-}
-
-.beep-voice-remove {
-  background: transparent;
-  border: 0;
-  color: var(--beep-text-secondary);
-  font-size: 18px;
-  line-height: 1;
-  cursor: pointer;
-  padding: 0 0 0 4px;
-  display: flex;
-  align-items: center;
-  transition: color 0.15s ease;
-}
-
-.beep-voice-remove:hover {
-  color: #F4212E;
-}
-
-/* ---------- Voice note player in posts ---------- */
-.beep-voice-note {
-  margin: 6px 0 2px;
-  background: var(--beep-hover);
-  border: 1px solid var(--beep-border);
-  border-radius: 12px;
-  padding: 10px 14px;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.beep-voice-note audio {
-  width: 100%;
-  height: 36px;
-  display: block;
-}
-
-/* Style the audio element across browsers */
-.beep-voice-note audio::-webkit-media-controls-panel {
-  background: var(--beep-bg);
-}
-
-.beep-voice-label {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 13px;
-  color: var(--beep-text-secondary);
-  font-weight: 500;
-}
-
-.beep-voice-label svg {
-  color: var(--beep-accent);
-  flex-shrink: 0;
-}
-
-.beep-voice-duration {
-  font-size: 12px;
-  color: var(--beep-text-secondary);
-  font-variant-numeric: tabular-nums;
-}
-
-/* ===== THREAD MODAL ===== */
-.beep-thread-modal {
-    position: fixed;
-    top: 0; left: 0; right: 0; bottom: 0;
-    background: rgba(0,0,0,0.5);
-    z-index: 99999;
+.beep-magic-login-form {
     display: flex;
     flex-direction: column;
-    align-items: center;
-}
-.beep-thread-modal[hidden] { display: none; }
-.beep-thread-header {
-    display: flex;
-    align-items: center;
     gap: 12px;
-    padding: 12px 16px;
-    border-bottom: 1px solid var(--beep-border);
-    background: var(--beep-surface);
+}
+
+.beep-magic-email {
     width: 100%;
-    max-width: 600px;
-}
-.beep-thread-close {
-    background: transparent; border: 0; cursor: pointer;
-    color: var(--beep-text); display: flex; align-items: center;
-    padding: 4px; border-radius: 50%;
-}
-.beep-thread-close:hover { background: var(--beep-hover); }
-.beep-thread-title { font-weight: 700; font-size: 16px; color: var(--beep-text); }
-.beep-thread-loading {
-    padding: 24px; text-align: center; color: var(--beep-text-secondary); font-size: 14px;
-}
-.beep-thread-content {
-    width: 100%;
-    max-width: 600px;
-    max-height: calc(100vh - 60px);
-    overflow-y: auto;
-    background: var(--beep-bg);
-}
-.beep-thread-item {
-    display: flex;
-    gap: 12px;
     padding: 12px 16px;
-    border-bottom: 1px solid var(--beep-border);
-}
-.beep-thread-item:first-child { border-top: 1px solid var(--beep-border); }
-.beep-thread-body { flex: 1; min-width: 0; }
-.beep-thread-meta {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    font-size: 14px;
-    flex-wrap: wrap;
-}
-.beep-thread-name { font-weight: 700; color: var(--beep-text); }
-.beep-thread-username { color: var(--beep-text-secondary); }
-.beep-thread-time { color: var(--beep-text-secondary); font-size: 13px; }
-.beep-thread-content-text {
-    font-size: 15px;
-    color: var(--beep-text);
-    line-height: 1.4;
-    margin-top: 4px;
-    word-wrap: break-word;
-}
-.beep-thread-actions {
-    display: flex;
-    gap: 16px;
-    margin-top: 6px;
-}
-.beep-thread-reply-count,
-.beep-thread-like-count {
-    font-size: 13px;
-    color: var(--beep-text-secondary);
-}
-.beep-thread-reply {
-    border-left: 2px solid var(--beep-border);
-}
-.beep-thread-root { }
-
-/* ===== CONVERSATION BUTTON ===== */
-.beep-action-conversation {
-    display: inline-flex;
-    align-items: center;
-    color: var(--beep-text-secondary);
-    text-decoration: none;
-    border-radius: 9999px;
-    padding: 4px 8px;
-    transition: color 0.15s, background 0.15s;
-}
-.beep-action-conversation:hover {
-    color: var(--beep-accent);
-    background: rgba(29,155,240,0.10);
-}
-
-/* ===== QUOTE BUTTON ===== */
-.beep-action-quote {
-    display: inline-flex;
-    align-items: center;
-    color: var(--beep-text-secondary);
-    text-decoration: none;
-    border-radius: 9999px;
-    padding: 4px 8px;
-    transition: color 0.15s, background 0.15s;
-}
-.beep-action-quote:hover {
-    color: var(--beep-accent);
-    background: rgba(29,155,240,0.10);
-}
-
-/* Quote composer UI */
-.beep-compose-quote {
-    margin-top: 8px;
-    border-top: 1px solid var(--beep-border);
-    padding-top: 8px;
-}
-.beep-quote-input-row {
-    display: flex;
-    gap: 8px;
-    margin-bottom: 6px;
-}
-.beep-quote-lookup {
-    flex: 1;
-    background: var(--beep-bg);
-    border: 1px solid var(--beep-border);
+    background: #22303C;
+    border: 1px solid #333F4D;
     border-radius: 8px;
-    padding: 8px 12px;
-    font-size: 14px;
-    color: var(--beep-text);
+    color: #E7E9EA;
+    font-size: 16px;
+    box-sizing: border-box;
+}
+
+.beep-magic-email:focus {
     outline: none;
-    transition: border-color 0.15s;
+    border-color: #1D9BF0;
 }
-.beep-quote-lookup:focus { border-color: var(--beep-accent); }
-.beep-quote-lookup-btn {
-    background: var(--beep-accent);
+
+.beep-magic-email::placeholder {
+    color: #71767B;
+}
+
+.beep-button.beep-magic-submit {
+    width: 100%;
+    padding: 12px 24px;
+    background: #1D9BF0;
     color: #fff;
-    border: 0;
+    border: none;
     border-radius: 8px;
-    padding: 8px 16px;
-    font-size: 14px;
+    font-size: 16px;
     font-weight: 600;
     cursor: pointer;
-    transition: opacity 0.15s;
+    transition: background 0.2s;
 }
-.beep-quote-lookup-btn:hover { opacity: 0.85; }
-.beep-quote-preview { margin-bottom: 6px; }
-.beep-quote-preview[hidden] { display: none; }
-.beep-quote-remove {
-    background: transparent;
-    border: 0;
-    color: #F4212E;
-    font-size: 13px;
-    cursor: pointer;
-    padding: 4px 8px;
-    border-radius: 4px;
-    transition: background 0.15s;
-}
-.beep-quote-remove:hover { background: rgba(244,33,46,0.10); }
-.beep-quote-remove[hidden] { display: none; }
 
-/* Quoted post embedded in a beep */
-.beep-quoted-container { margin: 8px 0; }
-.beep-quoted-post {
+.beep-button.beep-magic-submit:hover {
+    background: #1A8CD8;
+}
+
+.beep-button.beep-magic-submit:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+.beep-magic-success {
     display: flex;
-    gap: 10px;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
     padding: 12px;
-    background: var(--beep-hover);
-    border: 1px solid var(--beep-border);
-    border-radius: 12px;
-    cursor: pointer;
-    transition: background 0.15s;
-}
-.beep-quoted-post:hover { background: var(--beep-border); }
-.beep-quoted-avatar img {
-    border-radius: 50%;
-    vertical-align: top;
-}
-.beep-quoted-body { flex: 1; min-width: 0; }
-.beep-quoted-meta {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    font-size: 13px;
-    flex-wrap: wrap;
-}
-.beep-quoted-name { font-weight: 700; color: var(--beep-text); }
-.beep-quoted-handle { color: var(--beep-text-secondary); }
-.beep-quoted-dot { color: var(--beep-text-secondary); }
-.beep-quoted-time { color: var(--beep-text-secondary); }
-.beep-quoted-text {
+    background: rgba(0, 186, 124, 0.1);
+    border-radius: 8px;
+    color: #00BA7C;
     font-size: 14px;
-    color: var(--beep-text);
-    line-height: 1.4;
-    margin-top: 2px;
-    word-wrap: break-word;
 }
 
-/* Quote composer button */
-.beep-quote-composer-btn {
-    display: inline-flex;
+.beep-magic-error {
+    padding: 12px;
+    background: rgba(224, 36, 94, 0.1);
+    border-radius: 8px;
+    color: #F4212E;
+    font-size: 14px;
+    margin-top: 12px;
+}
+
+/* Public feed notice */
+.beep-public-notice {
+    display: flex;
     align-items: center;
     justify-content: center;
-    width: 32px;
-    height: 32px;
-    border-radius: 50%;
-    color: var(--beep-accent);
-    cursor: pointer;
-    background: transparent;
-    border: 0;
-    transition: background-color 0.15s ease, color 0.15s ease;
-}
-.beep-quote-composer-btn:hover {
-    background: rgba(29,155,240,0.10);
-}
-
-/* ===== GIF PICKER ===== */
-.beep-gif-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 32px;
-    height: 32px;
-    border-radius: 50%;
-    color: var(--beep-accent);
-    cursor: pointer;
-    background: transparent;
-    border: 0;
-    transition: background-color 0.15s ease;
-}
-.beep-gif-btn:hover { background: rgba(29,155,240,0.10); }
-
-.beep-compose-gif { margin-top: 8px; margin-bottom: 4px; }
-.beep-compose-gif[hidden] { display: none; }
-.beep-gif-preview-card {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    background: var(--beep-hover);
-    border: 1px solid var(--beep-border);
-    border-radius: 9999px;
-    padding: 6px 12px 6px 10px;
-    font-size: 13px;
-    color: var(--beep-text);
-}
-.beep-gif-remove {
-    background: transparent; border: 0; color: var(--beep-text-secondary);
-    font-size: 18px; line-height: 1; cursor: pointer;
-    padding: 0 0 0 4px; display: flex; align-items: center;
-    transition: color 0.15s ease;
-}
-.beep-gif-remove:hover { color: #F4212E; }
-
-/* GIF modal */
-.beep-gif-modal {
-    position: fixed;
-    top: 0; left: 0; right: 0; bottom: 0;
-    background: rgba(0,0,0,0.5);
-    z-index: 99999;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-.beep-gif-modal[hidden] { display: none; }
-.beep-gif-header {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    padding: 12px 16px;
-    border-bottom: 1px solid var(--beep-border);
-    background: var(--beep-surface);
-    width: 100%;
-    max-width: 600px;
-}
-.beep-gif-close {
-    background: transparent; border: 0; cursor: pointer;
-    color: var(--beep-text); display: flex; align-items: center;
-    padding: 4px; border-radius: 50%;
-}
-.beep-gif-close:hover { background: var(--beep-hover); }
-.beep-gif-title { font-weight: 700; font-size: 16px; color: var(--beep-text); }
-.beep-gif-search-bar {
-    display: flex;
     gap: 8px;
     padding: 12px 16px;
-    border-bottom: 1px solid var(--beep-border);
-    background: var(--beep-surface);
-    width: 100%;
-    max-width: 600px;
-}
-.beep-gif-search {
-    flex: 1;
-    background: var(--beep-bg);
-    border: 1px solid var(--beep-border);
-    border-radius: 8px;
-    padding: 8px 12px;
+    background: #192734;
+    border-bottom: 1px solid #333F4D;
+    color: #71767B;
     font-size: 14px;
-    color: var(--beep-text);
-    outline: none;
-    transition: border-color 0.15s;
-}
-.beep-gif-search:focus { border-color: var(--beep-accent); }
-.beep-gif-search-btn {
-    background: var(--beep-accent);
-    color: #fff;
-    border: 0;
-    border-radius: 8px;
-    padding: 8px 16px;
-    font-size: 14px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: opacity 0.15s;
-}
-.beep-gif-search-btn:hover { opacity: 0.85; }
-.beep-gif-grid {
-    width: 100%;
-    max-width: 600px;
-    max-height: calc(100vh - 120px);
-    overflow-y: auto;
-    padding: 8px;
-    background: var(--beep-bg);
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 4px;
-}
-.beep-gif-item {
-    cursor: pointer;
-    border-radius: 6px;
-    overflow: hidden;
-    transition: opacity 0.15s;
-}
-.beep-gif-item:hover { opacity: 0.8; }
-.beep-gif-item img { width: 100%; display: block; border-radius: 6px; }
-
-/* ---------- Poll ---------- */
-.beep-poll-container {
-  background: var(--beep-bg);
-  border: 1px solid var(--beep-border);
-  border-radius: 12px;
-  padding: 12px 16px;
-  margin-top: 8px;
-}
-.beep-poll-question {
-  font-size: 15px;
-  font-weight: 600;
-  margin-bottom: 10px;
-  color: var(--beep-text);
-}
-.beep-poll-options {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-.beep-poll-vote-btn {
-  width: 100%;
-  padding: 8px 12px;
-  border: 1px solid var(--beep-border);
-  border-radius: 8px;
-  background: var(--beep-bg);
-  color: var(--beep-text);
-  font-size: 14px;
-  text-align: left;
-  cursor: pointer;
-  transition: background 0.15s, border-color 0.15s;
-}
-.beep-poll-vote-btn:hover {
-  background: var(--beep-hover);
-  border-color: var(--beep-accent);
-}
-.beep-poll-result {
-  position: relative;
-  padding: 8px 12px;
-  border: 1px solid var(--beep-border);
-  border-radius: 8px;
-  overflow: hidden;
-  min-height: 40px;
-}
-.beep-poll-result-bar {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  background: var(--beep-hover);
-  transition: width 0.3s ease;
-}
-.beep-poll-result.is-winning {
-  border-color: var(--beep-accent);
-}
-.beep-poll-result.is-voted {
-  border-color: var(--beep-accent);
-}
-.beep-poll-result-text {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  justify-content: space-between;
-  font-size: 14px;
-  color: var(--beep-text);
-}
-.beep-poll-result-percent {
-  font-weight: 600;
-  color: var(--beep-accent);
-}
-.beep-poll-meta {
-  display: flex;
-  gap: 12px;
-  margin-top: 8px;
-  font-size: 13px;
-  color: var(--beep-text-secondary);
 }
 
-/* ---------- Poll composer ---------- */
-.beep-compose-poll {
-  padding: 12px;
-  border: 1px solid var(--beep-border);
-  border-radius: 12px;
-  margin-top: 8px;
-  background: var(--beep-bg);
+.beep-public-notice a {
+    color: #1D9BF0;
+    text-decoration: none;
 }
-.beep-poll-input-row {
-  margin-bottom: 8px;
-}
-.beep-poll-question {
-  width: 100%;
-  padding: 8px 12px;
-  border: 1px solid var(--beep-border);
-  border-radius: 8px;
-  font-size: 14px;
-  color: var(--beep-text);
-  background: var(--beep-bg);
-  outline: none;
-  transition: border-color 0.15s;
-}
-.beep-poll-question:focus {
-  border-color: var(--beep-accent);
-}
-.beep-poll-options {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-.beep-poll-option-row {
-  display: flex;
-}
-.beep-poll-option {
-  flex: 1;
-  padding: 8px 12px;
-  border: 1px solid var(--beep-border);
-  border-radius: 8px;
-  font-size: 14px;
-  color: var(--beep-text);
-  background: var(--beep-bg);
-  outline: none;
-  transition: border-color 0.15s;
-}
-.beep-poll-option:focus {
-  border-color: var(--beep-accent);
-}
-.beep-poll-actions {
-  display: flex;
-  gap: 8px;
-  margin-top: 8px;
-}
-.beep-poll-add-option,
-.beep-poll-remove-option,
-.beep-poll-remove {
-  background: none;
-  border: none;
-  font-size: 12px;
-  cursor: pointer;
-  padding: 4px 8px;
-  border-radius: 4px;
-  transition: background 0.15s;
-}
-.beep-poll-add-option {
-  color: var(--beep-accent);
-  font-weight: 600;
-}
-.beep-poll-add-option:hover {
-  background: var(--beep-hover);
-}
-.beep-poll-remove-option {
-  color: var(--beep-text-secondary);
-}
-.beep-poll-remove-option:hover {
-  background: var(--beep-hover);
-}
-.beep-poll-remove {
-  color: var(--beep-like);
-  margin-left: auto;
-}
-.beep-poll-remove:hover {
-  background: #FFF0F3;
-}
-.beep-poll-btn {
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 4px;
-  border-radius: 4px;
-  color: var(--beep-text-secondary);
-  transition: color 0.15s, background 0.15s;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-.beep-poll-btn:hover {
-  color: var(--beep-accent);
-  background: var(--beep-hover);
+
+.beep-public-notice a:hover {
+    text-decoration: underline;
 }
+
diff --git a/beep.php b/beep.php
index 30d6073..c0d8327 100755
--- a/beep.php
+++ b/beep.php
@@ -30,6 +30,7 @@ require_once BEEP_DIR . 'includes/class-media.php';
 require_once BEEP_DIR . 'includes/class-quotes.php';
 require_once BEEP_DIR . 'includes/class-polls.php';
 require_once BEEP_DIR . 'includes/class-shortcode.php';
+require_once BEEP_DIR . 'includes/class-settings.php';
 require_once BEEP_DIR . 'includes/class-beep.php';
 
 register_activation_hook(__FILE__,   ['Beep_Plugin', 'activate']);
diff --git a/includes/class-settings.php b/includes/class-settings.php
new file mode 100644
index 0000000..d02e5cc
--- /dev/null
+++ b/includes/class-settings.php
@@ -0,0 +1,841 @@
+<?php
+/**
+ * Beep Settings
+ * 
+ * Handles all customizable settings for the Beep plugin.
+ * Settings are stored in wp_options and injected as CSS variables.
+ */
+
+if (!defined("ABSPATH")) {
+    exit;
+}
+
+class Beep_Settings {
+    
+    /**
+     * Option key for storing settings
+     */
+    const OPTION_KEY = 'beep_settings';
+    
+    /**
+     * Default settings
+     */
+    private static $defaults = [
+        // Colors - Backgrounds
+        'bg_main'           => '#FFFFFF',  // Twitter Light: white
+        'bg_card'          => '#F5F8FA',  // Twitter Light: card background
+        'bg_card_hover'    => '#EBEEF0',  // Twitter Light: hover state
+        'bg_input'         => '#F5F8FA',  // Twitter Light: input fields
+        
+        // Colors - Text
+        'text_primary'      => '#0F1419',  // Twitter Light: main text (near black)
+        'text_secondary'   => '#536471',  // Twitter Light: muted text
+        'text_link'        => '#1D9BF0',  // Twitter Light: links (Twitter blue)
+        
+        // Colors - Borders & Dividers
+        'border_color'      => '#EFF3F4',  // Twitter Light: borders and dividers
+        'border_hover'     => '#CBD0D4',  // Twitter Light: hover border
+        
+        // Colors - Interactive
+        'color_like'       => '#F91880',  // Like heart (Twitter pink)
+        'color_repost'     => '#00BA7C',  // Repost green
+        'color_reply'      => '#1D9BF0',  // Reply blue
+        'color_quote'      => '#1D9BF0',  // Quote blue
+        'color_poll'       => '#1D9BF0',  // Poll blue
+        
+        // Colors - Buttons
+        'btn_primary_bg'   => '#1D9BF0',  // Primary button background
+        'btn_primary_text' => '#FFFFFF',  // Primary button text
+        'btn_secondary_bg' => '#2F3336',  // Secondary button background
+        'btn_secondary_text' => '#E7E9EA', // Secondary button text
+        
+        // Colors - Avatar Ring
+        'avatar_ring'       => '#2F3336',  // Avatar ring color
+        
+        // Branding
+        'logo_url'          => '',         // Custom logo URL
+        'site_name'         => 'Beep',     // Or 'X' or 'Twitter'
+        'tagline'           => 'Messages from',
+        
+        // Layout
+        'feed_max_width'    => '600px',    // Max width of feed
+        'feed_padding'      => '16px',     // Feed padding
+        'post_padding'      => '14px 20px', // Post padding
+        'avatar_size'       => '48px',     // Avatar dimensions
+        'gap_between_posts' => '12px',     // Gap between posts
+        
+        // Border Radius
+        'radius_card'       => '16px',     // Card border radius
+        'radius_avatar'     => '9999px',   // Avatar circle
+        'radius_button'     => '9999px',   // Buttons/pills
+        'radius_input'      => '4px',      // Input fields
+        
+        // Typography
+        'font_family'       => '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+        'font_size_base'    => '15px',     // Base font size
+        'font_size_small'   => '13px',     // Small text (timestamps)
+        'font_size_large'   => '20px',     // Large text (names)
+        
+        // Features (on/off)
+        'enable_likes'      => '1',
+        'enable_reposts'    => '1',
+        'enable_quotes'    => '1',
+        'enable_polls'     => '1',
+        'enable_follows'   => '1',
+        'enable_media'     => '1',
+        'enable_replies'   => '1',
+        
+        // Behavior
+        'character_limit'   => '280',
+        'posts_per_page'   => '20',
+        'auto_refresh'      => '0',        // Auto refresh interval (0 = off)
+        'public_posting'   => '0',        // Allow public posting without login
+        
+        // Content
+        'show_avatar'       => '1',
+        'show_stats'       => '1',        // Show reply/like counts
+        'show_timestamps'  => '1',        // Show relative time
+        'show_gravatar'    => '1',        // Show Gravatar
+        'show_public_notice' => '1',      // Show "sign in to post" notice
+        
+        // Animation
+        'animation_speed'   => '150',      // Transition speed in ms
+    ];
+    
+    /**
+     * Initialize settings
+     */
+    public static function init() {
+        add_action('admin_init', [__CLASS__, 'register_settings']);
+        add_action('admin_menu', [__CLASS__, 'add_settings_page']);
+        add_filter('plugin_action_links_' . plugin_basename(BEEP_FILE), [__CLASS__, 'add_settings_link']);
+        add_action('wp_head', [__CLASS__, 'inject_css_variables'], 100);
+    }
+    
+    /**
+     * Get all settings with defaults
+     */
+    public static function get_settings() {
+        $saved = get_option(self::OPTION_KEY, []);
+        return wp_parse_args($saved, self::$defaults);
+    }
+    
+    /**
+     * Get a single setting
+     */
+    public static function get($key, $default = null) {
+        $settings = self::get_settings();
+        return isset($settings[$key]) ? $settings[$key] : ($default ?? (self::$defaults[$key] ?? null));
+    }
+    
+    /**
+     * Register settings with WordPress
+     */
+    public static function register_settings() {
+        register_setting(
+            self::OPTION_KEY,
+            self::OPTION_KEY,
+            [
+                'type'              => 'array',
+                'sanitize_callback' => [__CLASS__, 'sanitize_settings'],
+                'default'           => [],
+            ]
+        );
+        
+        // === Section: Colors - Backgrounds ===
+        add_settings_section(
+            'beep_colors_bg',
+            'Colors - Backgrounds',
+            [__CLASS__, 'section_colors_bg_description'],
+            'beep-settings'
+        );
+        
+        add_settings_field(
+            'bg_main',
+            'Main Background',
+            [__CLASS__, 'field_color_picker'],
+            'beep-settings',
+            'beep_colors_bg',
+            ['key' => 'bg_main', 'label' => 'Feed/Page background']
+        );
+        
+        add_settings_field(
+            'bg_card',
+            'Card Background',
+            [__CLASS__, 'field_color_picker'],
+            'beep-settings',
+            'beep_colors_bg',
+            ['key' => 'bg_card', 'label' => 'Post cards & containers']
+        );
+        
+        add_settings_field(
+            'bg_card_hover',
+            'Card Hover Background',
+            [__CLASS__, 'field_color_picker'],
+            'beep-settings',
+            'beep_colors_bg',
+            ['key' => 'bg_card_hover', 'label' => 'Hover state for cards']
+        );
+        
+        add_settings_field(
+            'bg_input',
+            'Input Background',
+            [__CLASS__, 'field_color_picker'],
+            'beep-settings',
+            'beep_colors_bg',
+            ['key' => 'bg_input', 'label' => 'Textarea/input fields']
+        );
+        
+        // === Section: Colors - Text ===
+        add_settings_section(
+            'beep_colors_text',
+            'Colors - Text',
+            [__CLASS__, 'section_colors_text_description'],
+            'beep-settings'
+        );
+        
+        add_settings_field(
+            'text_primary',
+            'Primary Text',
+            [__CLASS__, 'field_color_picker'],
+            'beep-settings',
+            'beep_colors_text',
+            ['key' => 'text_primary', 'label' => 'Main text color']
+        );
+        
+        add_settings_field(
+            'text_secondary',
+            'Secondary Text',
+            [__CLASS__, 'field_color_picker'],
+            'beep-settings',
+            'beep_colors_text',
+            ['key' => 'text_secondary', 'label' => 'Muted/timestamp text']
+        );
+        
+        add_settings_field(
+            'text_link',
+            'Link Color',
+            [__CLASS__, 'field_color_picker'],
+            'beep-settings',
+            'beep_colors_text',
+            ['key' => 'text_link', 'label' => 'Links & buttons']
+        );
+        
+        // === Section: Colors - Interactive ===
+        add_settings_section(
+            'beep_colors_interactive',
+            'Colors - Interactive Elements',
+            [__CLASS__, 'section_colors_interactive_description'],
+            'beep-settings'
+        );
+        
+        add_settings_field(
+            'color_like',
+            'Like Heart Color',
+            [__CLASS__, 'field_color_picker'],
+            'beep-settings',
+            'beep_colors_interactive',
+            ['key' => 'color_like', 'label' => 'Heart/like button']
+        );
+        
+        add_settings_field(
+            'color_repost',
+            'Repost Color',
+            [__CLASS__, 'field_color_picker'],
+            'beep-settings',
+            'beep_colors_interactive',
+            ['key' => 'color_repost', 'label' => 'Repost button']
+        );
+        
+        add_settings_field(
+            'color_reply',
+            'Reply Color',
+            [__CLASS__, 'field_color_picker'],
+            'beep-settings',
+            'beep_colors_interactive',
+            ['key' => 'color_reply', 'label' => 'Reply button']
+        );
+        
+        add_settings_field(
+            'border_color',
+            'Border Color',
+            [__CLASS__, 'field_color_picker'],
+            'beep-settings',
+            'beep_colors_interactive',
+            ['key' => 'border_color', 'label' => 'Dividers & borders']
+        );
+        
+        // === Section: Layout ===
+        add_settings_section(
+            'beep_layout',
+            'Layout & Spacing',
+            [__CLASS__, 'section_layout_description'],
+            'beep-settings'
+        );
+        
+        add_settings_field(
+            'feed_max_width',
+            'Feed Max Width',
+            [__CLASS__, 'field_text'],
+            'beep-settings',
+            'beep_layout',
+            ['key' => 'feed_max_width', 'label' => 'e.g. 600px or 100%']
+        );
+        
+        add_settings_field(
+            'feed_padding',
+            'Feed Padding',
+            [__CLASS__, 'field_text'],
+            'beep-settings',
+            'beep_layout',
+            ['key' => 'feed_padding', 'label' => 'e.g. 16px']
+        );
+        
+        add_settings_field(
+            'post_padding',
+            'Post Padding',
+            [__CLASS__, 'field_text'],
+            'beep-settings',
+            'beep_layout',
+            ['key' => 'post_padding', 'label' => 'e.g. 14px 20px']
+        );
+        
+        add_settings_field(
+            'avatar_size',
+            'Avatar Size',
+            [__CLASS__, 'field_text'],
+            'beep-settings',
+            'beep_layout',
+            ['key' => 'avatar_size', 'label' => 'e.g. 48px']
+        );
+        
+        // === Section: Border Radius ===
+        add_settings_section(
+            'beep_radius',
+            'Border Radius',
+            [__CLASS__, 'section_radius_description'],
+            'beep-settings'
+        );
+        
+        add_settings_field(
+            'radius_card',
+            'Card Radius',
+            [__CLASS__, 'field_text'],
+            'beep-settings',
+            'beep_radius',
+            ['key' => 'radius_card', 'label' => 'e.g. 16px for cards, 0 for sharp edges']
+        );
+        
+        add_settings_field(
+            'radius_avatar',
+            'Avatar Radius',
+            [__CLASS__, 'field_text'],
+            'beep-settings',
+            'beep_radius',
+            ['key' => 'radius_avatar', 'label' => 'e.g. 9999px for circle']
+        );
+        
+        // === Section: Typography ===
+        add_settings_section(
+            'beep_typography',
+            'Typography',
+            [__CLASS__, 'section_typography_description'],
+            'beep-settings'
+        );
+        
+        add_settings_field(
+            'font_family',
+            'Font Family',
+            [__CLASS__, 'field_text'],
+            'beep-settings',
+            'beep_typography',
+            ['key' => 'font_family', 'label' => 'CSS font-family value']
+        );
+        
+        add_settings_field(
+            'font_size_base',
+            'Base Font Size',
+            [__CLASS__, 'field_text'],
+            'beep-settings',
+            'beep_typography',
+            ['key' => 'font_size_base', 'label' => 'e.g. 15px']
+        );
+        
+        // === Section: Branding ===
+        add_settings_section(
+            'beep_branding',
+            'Branding',
+            [__CLASS__, 'section_branding_description'],
+            'beep-settings'
+        );
+        
+        add_settings_field(
+            'site_name',
+            'Site Name',
+            [__CLASS__, 'field_text'],
+            'beep-settings',
+            'beep_branding',
+            ['key' => 'site_name', 'label' => 'e.g. Beep, X, or Twitter']
+        );
+        
+        add_settings_field(
+            'tagline',
+            'Tagline',
+            [__CLASS__, 'field_text'],
+            'beep-settings',
+            'beep_branding',
+            ['key' => 'tagline', 'label' => 'Text above logo, e.g. "Messages from"']
+        );
+        
+        add_settings_field(
+            'logo_url',
+            'Logo Image URL',
+            [__CLASS__, 'field_text'],
+            'beep-settings',
+            'beep_branding',
+            ['key' => 'logo_url', 'label' => 'Leave empty to use text. Upload via Media Library.']
+        );
+        
+        // === Section: Features ===
+        add_settings_section(
+            'beep_features',
+            'Features',
+            [__CLASS__, 'section_features_description'],
+            'beep-settings'
+        );
+        
+        add_settings_field(
+            'enable_likes',
+            'Enable Likes',
+            [__CLASS__, 'field_checkbox'],
+            'beep-settings',
+            'beep_features',
+            ['key' => 'enable_likes', 'label' => 'Show like button on posts']
+        );
+        
+        add_settings_field(
+            'enable_reposts',
+            'Enable Reposts',
+            [__CLASS__, 'field_checkbox'],
+            'beep-settings',
+            'beep_features',
+            ['key' => 'enable_reposts', 'label' => 'Show repost button']
+        );
+        
+        add_settings_field(
+            'enable_quotes',
+            'Enable Quotes',
+            [__CLASS__, 'field_checkbox'],
+            'beep-settings',
+            'beep_features',
+            ['key' => 'enable_quotes', 'label' => 'Show quote button']
+        );
+        
+        add_settings_field(
+            'enable_replies',
+            'Enable Replies',
+            [__CLASS__, 'field_checkbox'],
+            'beep-settings',
+            'beep_features',
+            ['key' => 'enable_replies', 'label' => 'Allow replying to posts']
+        );
+        
+        add_settings_field(
+            'enable_media',
+            'Enable Media',
+            [__CLASS__, 'field_checkbox'],
+            'beep-settings',
+            'beep_features',
+            ['key' => 'enable_media', 'label' => 'Allow image attachments']
+        );
+        
+        add_settings_field(
+            'enable_polls',
+            'Enable Polls',
+            [__CLASS__, 'field_checkbox'],
+            'beep-settings',
+            'beep_features',
+            ['key' => 'enable_polls', 'label' => 'Allow poll creation']
+        );
+        
+        // === Section: Behavior ===
+        add_settings_section(
+            'beep_behavior',
+            'Behavior',
+            [__CLASS__, 'section_behavior_description'],
+            'beep-settings'
+        );
+        
+        add_settings_field(
+            'character_limit',
+            'Character Limit',
+            [__CLASS__, 'field_text'],
+            'beep-settings',
+            'beep_behavior',
+            ['key' => 'character_limit', 'label' => 'Max characters per post (default 280)']
+        );
+        
+        add_settings_field(
+            'posts_per_page',
+            'Posts Per Page',
+            [__CLASS__, 'field_text'],
+            'beep-settings',
+            'beep_behavior',
+            ['key' => 'posts_per_page', 'label' => 'Number of posts to load']
+        );
+        
+        add_settings_field(
+            'public_posting',
+            'Allow Public Posting',
+            [__CLASS__, 'field_checkbox'],
+            'beep-settings',
+            'beep_behavior',
+            ['key' => 'public_posting', 'label' => 'Allow posting without logging in']
+        );
+        
+        // === Section: Content Display ===
+        add_settings_section(
+            'beep_content',
+            'Content Display',
+            [__CLASS__, 'section_content_description'],
+            'beep-settings'
+        );
+        
+        add_settings_field(
+            'show_avatar',
+            'Show Avatars',
+            [__CLASS__, 'field_checkbox'],
+            'beep-settings',
+            'beep_content',
+            ['key' => 'show_avatar', 'label' => 'Display user profile pictures']
+        );
+        
+        add_settings_field(
+            'show_stats',
+            'Show Statistics',
+            [__CLASS__, 'field_checkbox'],
+            'beep-settings',
+            'beep_content',
+            ['key' => 'show_stats', 'label' => 'Display reply/like counts']
+        );
+        
+        add_settings_field(
+            'show_timestamps',
+            'Show Timestamps',
+            [__CLASS__, 'field_checkbox'],
+            'beep-settings',
+            'beep_content',
+            ['key' => 'show_timestamps', 'label' => 'Display relative time']
+        );
+        
+        add_settings_field(
+            'show_public_notice',
+            'Show Public Notice',
+            [__CLASS__, 'field_checkbox'],
+            'beep-settings',
+            'beep_content',
+            ['key' => 'show_public_notice', 'label' => 'Show "Sign in to post" notice']
+        );
+    }
+    
+    /**
+     * Add settings page to admin menu
+     */
+    public static function add_settings_page() {
+        add_options_page(
+            'Beep Settings',
+            'Beep',
+            'manage_options',
+            'beep-settings',
+            [__CLASS__, 'render_settings_page']
+        );
+    }
+    
+    /**
+     * Add settings link on Plugins page
+     */
+    public static function add_settings_link($links) {
+        $settings_link = '<a href="options-general.php?page=beep-settings">' . __('Settings') . '</a>';
+        array_unshift($links, $settings_link);
+        return $links;
+    }
+    
+    /**
+     * Sanitize settings on save
+     */
+    public static function sanitize_settings($input) {
+        $sanitized = [];
+        
+        foreach (self::$defaults as $key => $default) {
+            if (is_bool($default)) {
+                $sanitized[$key] = !empty($input[$key]) ? '1' : '0';
+            } elseif (is_int($default)) {
+                $sanitized[$key] = isset($input[$key]) ? intval($input[$key]) : $default;
+            } else {
+                $sanitized[$key] = isset($input[$key]) ? sanitize_text_field($input[$key]) : $default;
+            }
+        }
+        
+        return $sanitized;
+    }
+    
+    /**
+     * Render the settings page
+     */
+    public static function render_settings_page() {
+        if (!current_user_can('manage_options')) {
+            return;
+        }
+        ?>
+        <div class="wrap beep-settings-wrap">
+            <h1>Beep Settings</h1>
+            
+            <div class="beep-settings-header">
+                <p>Customize the appearance and behavior of your Beep feed. Changes take effect immediately.</p>
+                <p>
+                    <strong>Quick Presets:</strong>
+                    <button type="button" class="button beep-preset-twitter" data-preset="twitter">Twitter Dark</button>
+                    <button type="button" class="button beep-preset-light" data-preset="light">Twitter Light</button>
+                    <button type="button" class="button beep-preset-minimal" data-preset="minimal">Minimal</button>
+                </p>
+            </div>
+            
+            <form method="post" action="options.php">
+                <?php
+                settings_fields(self::OPTION_KEY);
+                do_settings_sections('beep-settings');
+                submit_button('Save Settings');
+                ?>
+            </form>
+            
+            <hr>
+            
+            <div class="beep-settings-footer">
+                <h2>Need Help?</h2>
+                <p>Use your browser's Inspector tool to find colors you want to match. Click any element and look at the computed styles.</p>
+                <p><strong>Want to go fully Twitter/X dark mode?</strong> Use these values:</p>
+                <ul style="list-style: disc; margin-left: 20px;">
+                    <li>Main Background: <code>#15202B</code></li>
+                    <li>Card Background: <code>#192734</code></li>
+                    <li>Primary Text: <code>#E7E9EA</code></li>
+                    <li>Secondary Text: <code>#71767B</code></li>
+                    <li>Link Color: <code>#1D9BF0</code></li>
+                    <li>Like Heart: <code>#F91880</code></li>
+                    <li>Border Color: <code>#2F3336</code></li>
+                    <li>Card Radius: <code>0px</code> (for sharp Twitter-like edges)</li>
+                </ul>
+            </div>
+        </div>
+        
+        <style>
+        .beep-settings-wrap { max-width: 800px; }
+        .beep-settings-wrap .form-table th { font-weight: 600; }
+        .beep-settings-wrap input[type="text"] { width: 200px; }
+        .beep-settings-wrap .beep-color-preview { display: inline-block; width: 20px; height: 20px; border: 1px solid #ccc; vertical-align: middle; margin-right: 8px; border-radius: 3px; }
+        .beep-settings-header { background: #f0f0f1; padding: 15px 20px; border-radius: 8px; margin-bottom: 20px; }
+        .beep-settings-footer { background: #f0f0f1; padding: 15px 20px; border-radius: 8px; margin-top: 30px; }
+        .beep-settings-footer code { background: #fff; padding: 2px 6px; border-radius: 3px; }
+        </style>
+        
+        <script>
+        jQuery(document).ready(function($) {
+            // Color picker enhancement
+            $('.beep-color-picker').each(function() {
+                var $input = $(this);
+                var $preview = $input.siblings('.beep-color-preview');
+                
+                $input.on('input', function() {
+                    $preview.css('background-color', $(this).val());
+                });
+                
+                // Initialize preview
+                $preview.css('background-color', $input.val());
+            });
+            
+            // Preset buttons
+            $('.beep-preset-twitter').on('click', function() {
+                var preset = <?php echo json_encode([
+                    'bg_main' => '#15202B', 'bg_card' => '#192734', 'bg_card_hover' => '#1C2732', 'bg_input' => '#253341',
+                    'text_primary' => '#E7E9EA', 'text_secondary' => '#71767B', 'text_link' => '#1D9BF0',
+                    'color_like' => '#F91880', 'color_repost' => '#00BA7C', 'color_reply' => '#1D9BF0',
+                    'border_color' => '#2F3336', 'radius_card' => '0px', 'radius_avatar' => '9999px',
+                ]); ?>;
+                applyPreset(preset);
+            });
+            
+            $('.beep-preset-light').on('click', function() {
+                var preset = <?php echo json_encode([
+                    'bg_main' => '#FFFFFF', 'bg_card' => '#F7F9F9', 'bg_card_hover' => '#EFF3F4', 'bg_input' => '#F7F9F9',
+                    'text_primary' => '#0F1419', 'text_secondary' => '#536471', 'text_link' => '#1D9BF0',
+                    'color_like' => '#F91880', 'color_repost' => '#00BA7C', 'color_reply' => '#1D9BF0',
+                    'border_color' => '#EFF3F4', 'radius_card' => '16px', 'radius_avatar' => '9999px',
+                ]); ?>;
+                applyPreset(preset);
+            });
+            
+            $('.beep-preset-minimal').on('click', function() {
+                var preset = <?php echo json_encode([
+                    'bg_main' => '#1a1a1a', 'bg_card' => '#1a1a1a', 'bg_card_hover' => '#262626', 'bg_input' => '#262626',
+                    'text_primary' => '#e0e0e0', 'text_secondary' => '#888888', 'text_link' => '#ffffff',
+                    'color_like' => '#ff4444', 'color_repost' => '#44ff44', 'color_reply' => '#4444ff',
+                    'border_color' => '#333333', 'radius_card' => '0px', 'radius_avatar' => '0px',
+                ]); ?>;
+                applyPreset(preset);
+            });
+            
+            function applyPreset(preset) {
+                Object.keys(preset).forEach(function(key) {
+                    var $input = $('input[name="beep_settings[' + key + ']"]');
+                    if ($input.length) {
+                        $input.val(preset[key]).trigger('input');
+                    }
+                });
+            }
+        });
+        </script>
+        <?php
+    }
+    
+    /**
+     * Inject CSS variables into <head>
+     */
+    public static function inject_css_variables() {
+        $settings = self::get_settings();
+        ?>
+        <style id="beep-custom-css-vars">
+        :root {
+            --beep-bg: <?php echo esc_attr($settings['bg_main']); ?>;
+            --beep-card-bg: <?php echo esc_attr($settings['bg_card']); ?>;
+            --beep-card-hover: <?php echo esc_attr($settings['bg_card_hover']); ?>;
+            --beep-input-bg: <?php echo esc_attr($settings['bg_input']); ?>;
+            --beep-text: <?php echo esc_attr($settings['text_primary']); ?>;
+            --beep-muted: <?php echo esc_attr($settings['text_secondary']); ?>;
+            --beep-accent: <?php echo esc_attr($settings['text_link']); ?>;
+            --beep-border: <?php echo esc_attr($settings['border_color']); ?>;
+            --beep-border-hover: <?php echo esc_attr($settings['border_hover']); ?>;
+            --beep-like: <?php echo esc_attr($settings['color_like']); ?>;
+            --beep-repost: <?php echo esc_attr($settings['color_repost']); ?>;
+            --beep-reply: <?php echo esc_attr($settings['color_reply']); ?>;
+            --beep-quote: <?php echo esc_attr($settings['color_quote']); ?>;
+            --beep-poll: <?php echo esc_attr($settings['color_poll']); ?>;
+            --beep-btn-primary-bg: <?php echo esc_attr($settings['btn_primary_bg']); ?>;
+            --beep-btn-primary-text: <?php echo esc_attr($settings['btn_primary_text']); ?>;
+            --beep-btn-secondary-bg: <?php echo esc_attr($settings['btn_secondary_bg']); ?>;
+            --beep-btn-secondary-text: <?php echo esc_attr($settings['btn_secondary_text']); ?>;
+            --beep-avatar-ring: <?php echo esc_attr($settings['avatar_ring']); ?>;
+            --beep-feed-max-width: <?php echo esc_attr($settings['feed_max_width']); ?>;
+            --beep-feed-padding: <?php echo esc_attr($settings['feed_padding']); ?>;
+            --beep-post-padding: <?php echo esc_attr($settings['post_padding']); ?>;
+            --beep-avatar-size: <?php echo esc_attr($settings['avatar_size']); ?>;
+            --beep-gap: <?php echo esc_attr($settings['gap_between_posts']); ?>;
+            --beep-radius-card: <?php echo esc_attr($settings['radius_card']); ?>;
+            --beep-radius-avatar: <?php echo esc_attr($settings['radius_avatar']); ?>;
+            --beep-radius-button: <?php echo esc_attr($settings['radius_button']); ?>;
+            --beep-radius-input: <?php echo esc_attr($settings['radius_input']); ?>;
+            --beep-font-family: <?php echo esc_attr($settings['font_family']); ?>;
+            --beep-font-size: <?php echo esc_attr($settings['font_size_base']); ?>;
+            --beep-font-size-small: <?php echo esc_attr($settings['font_size_small']); ?>;
+            --beep-font-size-large: <?php echo esc_attr($settings['font_size_large']); ?>;
+            --beep-animation: <?php echo esc_attr($settings['animation_speed']); ?>ms ease;
+        }
+        
+        /* Override page-level backgrounds (fixes Elementor purple gradient) */
+        body, .elementor, .elementor-section-wrap, .elementor-page, .elementor-editor-active body {
+            background: var(--beep-bg) !important;
+        }
+        </style>
+        <?php
+    }
+    
+    // === Section Descriptions ===
+    public static function section_colors_bg_description() {
+        echo '<p>Background colors for the feed and cards.</p>';
+    }
+    
+    public static function section_colors_text_description() {
+        echo '<p>Text colors throughout the feed.</p>';
+    }
+    
+    public static function section_colors_interactive_description() {
+        echo '<p>Colors for interactive elements like buttons and icons.</p>';
+    }
+    
+    public static function section_layout_description() {
+        echo '<p>Spacing and layout dimensions.</p>';
+    }
+    
+    public static function section_radius_description() {
+        echo '<p>Border radius for rounded corners. Use <code>0px</code> for sharp edges (Twitter style), <code>16px</code> for rounded cards.</p>';
+    }
+    
+    public static function section_typography_description() {
+        echo '<p>Font settings.</p>';
+    }
+    
+    public static function section_branding_description() {
+        echo '<p>Logo and site name settings.</p>';
+    }
+    
+    public static function section_features_description() {
+        echo '<p>Toggle features on or off.</p>';
+    }
+    
+    public static function section_behavior_description() {
+        echo '<p>How the feed behaves.</p>';
+    }
+    
+    public static function section_content_description() {
+        echo '<p>What to show/hide in the feed.</p>';
+    }
+    
+    // === Field Renderers ===
+    public static function field_color_picker($args) {
+        $key = $args['key'];
+        $label = $args['label'];
+        $value = self::get($key);
+        ?>
+        <span class="beep-color-preview" style="background-color: <?php echo esc_attr($value); ?>"></span>
+        <input type="text" 
+               name="beep_settings[<?php echo esc_attr($key); ?>]" 
+               id="beep_settings_<?php echo esc_attr($key); ?>"
+               value="<?php echo esc_attr($value); ?>"
+               class="beep-color-picker regular-text"
+               placeholder="#000000"
+               data-default-color="<?php echo esc_attr(self::$defaults[$key]); ?>">
+        <p class="description"><?php echo esc_html($label); ?></p>
+        <?php
+    }
+    
+    public static function field_text($args) {
+        $key = $args['key'];
+        $label = $args['label'];
+        $value = self::get($key);
+        ?>
+        <input type="text" 
+               name="beep_settings[<?php echo esc_attr($key); ?>]" 
+               id="beep_settings_<?php echo esc_attr($key); ?>"
+               value="<?php echo esc_attr($value); ?>"
+               class="regular-text">
+        <p class="description"><?php echo esc_html($label); ?></p>
+        <?php
+    }
+    
+    public static function field_checkbox($args) {
+        $key = $args['key'];
+        $label = $args['label'];
+        $value = self::get($key);
+        ?>
+        <label for="beep_settings_<?php echo esc_attr($key); ?>">
+            <input type="checkbox" 
+                   name="beep_settings[<?php echo esc_attr($key); ?>]" 
+                   id="beep_settings_<?php echo esc_attr($key); ?>"
+                   value="1"
+                   <?php checked($value, '1'); ?>>
+            <?php echo esc_html($label); ?>
+        </label>
+        <?php
+    }
+}
+
+// Initialize settings
+Beep_Settings::init();