/* =====================================================
   TALKAM
   PROFESSIONAL MOBILE SOCIAL APP DESIGN
===================================================== */

:root {
  --primary: #0b7a5a;
  --primary-dark: #075c45;
  --primary-light: #e8f7f1;

  --background: #f5f7f8;
  --surface: #ffffff;
  --surface-soft: #f8fafb;

  --text: #111827;
  --text-secondary: #667085;
  --text-light: #98a2b3;

  --border: #e6e9ed;

  --danger: #dc3545;
  --warning: #f59e0b;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;

  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 8px 25px rgba(15, 23, 42, 0.08);

  --max-width: 720px;
}


/* =====================================================
   RESET
===================================================== */

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", sans-serif;
  background: var(--background);
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(11, 122, 90, 0.18);
  outline-offset: 2px;
}

.hidden {
  display: none !important;
}


/* =====================================================
   APP
===================================================== */

#app {
  min-height: 100vh;
}


/* =====================================================
   HEADER
===================================================== */

.top-header {
  position: sticky;
  top: 0;
  z-index: 100;

  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  border-bottom: 1px solid rgba(230, 233, 237, 0.9);
}

.header-inner {
  max-width: var(--max-width);
  margin: auto;

  min-height: 62px;

  padding: 10px 14px;

  display: flex;
  align-items: center;

  gap: 8px;
}


/* =====================================================
   BRAND
===================================================== */

.brand-button {
  border: 0;
  background: transparent;

  display: flex;
  align-items: center;
  gap: 10px;

  color: var(--text);

  padding: 4px;

  text-align: left;
}

.brand-mark {
  width: 40px;
  height: 40px;

  border-radius: 13px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--primary);
  color: white;

  font-size: 21px;
  font-weight: 800;

  box-shadow: 0 6px 15px rgba(11, 122, 90, 0.22);
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.brand-text strong {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.brand-text small {
  margin-top: 4px;

  font-size: 9px;
  font-weight: 600;

  color: var(--text-light);

  letter-spacing: 0.4px;
}


/* =====================================================
   HEADER ACTIONS
===================================================== */

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.location-pill {
  border: 1px solid var(--border);
  background: var(--surface);

  border-radius: 999px;

  padding: 8px 11px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  color: var(--text-secondary);

  font-size: 11px;
  font-weight: 700;

  flex: 1;
  min-width: 0;
}

.location-pill span:last-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.location-dot {
  width: 7px;
  height: 7px;

  flex-shrink: 0;

  background: var(--primary);

  border-radius: 50%;

  box-shadow: 0 0 0 4px var(--primary-light);
}

.icon-button {
  position: relative;

  width: 40px;
  height: 40px;

  border: 1px solid var(--border);
  border-radius: 13px;

  background: white;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 17px;
}

.notification-badge {
  position: absolute;

  top: -3px;
  right: -3px;

  min-width: 17px;
  height: 17px;

  padding: 0 4px;

  background: #ef4444;
  color: white;

  border-radius: 999px;

  font-size: 9px;
  font-weight: 800;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 2px solid white;
}


/* =====================================================
   MAIN
===================================================== */

.main-content {
  width: 100%;
  max-width: var(--max-width);

  margin: auto;

  padding-bottom: 105px;
}

.page {
  display: none;
}

.page.active {
  display: block;
}


/* =====================================================
   HOME TOP STRIP
   Jodel goes straight into the feed — no marketing hero on
   every visit. This is a single-line status strip that only
   earns its height while location is being resolved or has
   an error; once settled it reads as a quiet caption.
===================================================== */

.welcome-section {
  padding: 10px 14px 4px;
}

.eyebrow,
.page-eyebrow,
.modal-eyebrow {
  display: flex;
  align-items: center;
  gap: 7px;

  color: var(--primary);

  font-size: 10px;
  font-weight: 800;

  letter-spacing: 1px;
}

.pulse-dot {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: var(--primary);

  box-shadow: 0 0 0 5px var(--primary-light);
}


/* =====================================================
   LOCATION STRIP (compact, single line)
===================================================== */

.location-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;

  padding: 7px 12px 7px 7px;

  display: flex;
  align-items: center;

  gap: 9px;
}

.location-card-icon {
  width: 26px;
  height: 26px;

  flex-shrink: 0;

  border-radius: 50%;

  background: var(--primary-light);

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 13px;
}

.location-card-content {
  min-width: 0;
  flex: 1;

  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

.location-card-content strong {
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}

.location-card-content span:last-child {
  color: var(--text-secondary);

  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.location-error {
  color: var(--danger) !important;
}

.retry-button {
  margin-left: auto;
  flex: none;

  border: 0;
  background: var(--primary);

  color: white;

  border-radius: 9px;

  padding: 6px 10px;

  font-size: 11px;
  font-weight: 700;
}


/* =====================================================
   SEARCH
===================================================== */

.search-container,
.explore-search {
  margin: 0 18px 17px;

  height: 52px;

  border: 1px solid var(--border);

  background: white;

  border-radius: 16px;

  display: flex;
  align-items: center;

  padding: 0 15px;

  box-shadow: var(--shadow-sm);
}

.search-icon,
.explore-search > span {
  color: var(--text-light);

  font-size: 25px;

  margin-right: 10px;
}

.search-container input,
.explore-search input {
  width: 100%;

  border: 0;
  outline: 0;

  background: transparent;

  color: var(--text);

  font-size: 13px;
}

.search-container input::placeholder,
.explore-search input::placeholder {
  color: #a3aab5;
}

.clear-search {
  border: 0;
  background: #eef1f3;

  width: 25px;
  height: 25px;

  border-radius: 50%;

  color: var(--text-secondary);

  font-size: 17px;
}


/* =====================================================
   FEED TABS
===================================================== */

.feed-tabs {
  margin: 0 18px;

  display: flex;

  border-bottom: 1px solid var(--border);
}

.feed-tab {
  flex: 1;

  border: 0;
  background: transparent;

  padding: 13px 10px;

  color: var(--text-secondary);

  font-size: 13px;
  font-weight: 700;

  position: relative;
}

.feed-tab.active {
  color: var(--primary);
}

.feed-tab.active::after {
  content: "";

  position: absolute;

  bottom: -1px;
  left: 25%;
  right: 25%;

  height: 3px;

  border-radius: 999px;

  background: var(--primary);
}


/* =====================================================
   CATEGORIES
===================================================== */

.category-scroll {
  display: flex;

  gap: 8px;

  overflow-x: auto;

  padding: 15px 18px;

  scrollbar-width: none;
}

.category-scroll::-webkit-scrollbar {
  display: none;
}

.category-chip {
  flex-shrink: 0;

  border: 1px solid var(--border);

  background: white;

  color: var(--text-secondary);

  padding: 9px 13px;

  border-radius: 999px;

  font-size: 11px;
  font-weight: 600;
}

.category-chip.active {
  border-color: var(--primary);

  background: var(--primary);

  color: white;
}


/* =====================================================
   FEED
===================================================== */

.feed-container {
  padding: 0 18px;
}

.feed-container:empty::after {
  content: "No conversations yet.";
  display: block;

  text-align: center;

  padding: 50px 20px;

  color: var(--text-light);

  font-size: 13px;
}


/* =====================================================
   POST CARD
===================================================== */

.post-card {
  background: white;

  border: 1px solid var(--border);

  border-radius: var(--radius-lg);

  padding: 17px;

  margin-bottom: 13px;

  box-shadow: var(--shadow-sm);

  transition: transform 0.15s ease,
              box-shadow 0.15s ease;
}

.post-card:active {
  transform: scale(0.99);
}


/* POST TOP */

.post-header {
  display: flex;
  align-items: center;

  gap: 10px;

  margin-bottom: 12px;
}

.post-avatar {
  width: 38px;
  height: 38px;

  border-radius: 50%;

  background: var(--primary-light);

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 17px;

  flex-shrink: 0;
}

.post-author {
  min-width: 0;

  flex: 1;

  display: flex;
  flex-direction: column;
}

.post-author strong {
  font-size: 12px;
  font-weight: 700;
}

.post-meta {
  color: var(--text-light);

  font-size: 10px;
}

.post-menu {
  border: 0;
  background: transparent;

  color: var(--text-light);

  font-size: 20px;
}


/* CATEGORY */

.post-category {
  display: inline-flex;

  align-items: center;

  background: var(--primary-light);

  color: var(--primary-dark);

  padding: 5px 9px;

  border-radius: 999px;

  font-size: 9px;
  font-weight: 800;

  margin-bottom: 10px;
}


/* BODY */

.post-body {
  font-size: 14px;

  line-height: 1.65;

  color: #28323c;

  word-break: break-word;
}


/* PROXIMITY */

.post-proximity {
  display: inline-flex;

  margin-top: 12px;

  padding: 5px 8px;

  border-radius: 7px;

  background: #f3f5f6;

  color: var(--text-secondary);

  font-size: 9px;
  font-weight: 700;
}


/* POST IMAGE */

.post-images {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 6px;

  margin-top: 13px;

  overflow: hidden;

  border-radius: 14px;
}

.post-images img {
  width: 100%;

  aspect-ratio: 1 / 1;

  object-fit: cover;

  display: block;
}

.post-images img:only-child {
  aspect-ratio: 16 / 10;

  grid-column: 1 / -1;
}


/* POST ACTIONS */

.post-actions {
  display: flex;
  align-items: center;

  gap: 5px;

  border-top: 1px solid #f0f1f3;

  margin-top: 14px;
  padding-top: 11px;
}

.post-action {
  border: 0;

  background: transparent;

  color: var(--text-secondary);

  padding: 7px 9px;

  border-radius: 9px;

  font-size: 11px;
  font-weight: 600;

  display: flex;
  align-items: center;

  gap: 5px;
}

.post-action:hover {
  background: #f5f7f8;
}

.post-action.active {
  color: var(--primary);
  background: var(--primary-light);
}


/* =====================================================
   PAGE HEADINGS
===================================================== */

.page-heading {
  padding: 28px 18px 18px;
}

.page-heading h2 {
  margin-top: 8px;

  font-size: 28px;

  letter-spacing: -1px;
}

.page-heading p {
  margin-top: 6px;

  color: var(--text-secondary);

  font-size: 13px;
}


/* =====================================================
   EXPLORE
===================================================== */

.explore-grid {
  padding: 0 18px;

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 11px;
}

.community-card {
  background: white;

  border: 1px solid var(--border);

  border-radius: 18px;

  padding: 16px;

  box-shadow: var(--shadow-sm);
}

.community-card-icon {
  width: 38px;
  height: 38px;

  border-radius: 12px;

  background: var(--primary-light);

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 12px;
}

.community-card strong {
  display: block;

  font-size: 13px;
}

.community-card small {
  color: var(--text-light);

  font-size: 10px;
}


/* =====================================================
   NOTIFICATIONS
===================================================== */

.notifications-container {
  padding: 0 18px;
}

.notification-item {
  display: flex;

  align-items: center;

  gap: 12px;

  background: white;

  border: 1px solid var(--border);

  border-radius: 16px;

  padding: 14px;

  margin-bottom: 9px;
}

.notification-icon {
  width: 38px;
  height: 38px;

  flex-shrink: 0;

  border-radius: 12px;

  background: var(--primary-light);

  display: flex;
  align-items: center;
  justify-content: center;
}


/* =====================================================
   PROFILE
===================================================== */

.profile-header-card {
  margin: 25px 18px 15px;

  background: linear-gradient(
    135deg,
    var(--primary),
    #0d9270
  );

  color: white;

  border-radius: 24px;

  padding: 22px;

  display: flex;

  align-items: center;

  gap: 15px;

  box-shadow: 0 12px 30px rgba(11, 122, 90, 0.2);
}

.profile-avatar {
  width: 62px;
  height: 62px;

  flex-shrink: 0;

  border-radius: 20px;

  background: rgba(255, 255, 255, 0.17);

  border: 1px solid rgba(255, 255, 255, 0.25);

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 27px;
}

.profile-label {
  font-size: 8px;
  font-weight: 800;

  letter-spacing: 1px;

  opacity: 0.75;
}

.profile-info h2 {
  margin-top: 4px;

  font-size: 20px;
}

.profile-info p {
  margin-top: 4px;

  font-size: 11px;

  opacity: 0.8;
}

.profile-menu {
  padding: 0 18px;
}

.profile-menu-item {
  width: 100%;

  border: 1px solid var(--border);

  background: white;

  border-radius: 16px;

  padding: 14px;

  margin-bottom: 9px;

  display: flex;
  align-items: center;

  gap: 12px;

  text-align: left;
}

.menu-icon {
  width: 38px;
  height: 38px;

  border-radius: 12px;

  background: #f1f5f4;

  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-menu-item span:nth-child(2) {
  flex: 1;

  display: flex;
  flex-direction: column;
}

.profile-menu-item strong {
  font-size: 12px;
}

.profile-menu-item small {
  color: var(--text-light);

  font-size: 10px;

  margin-top: 2px;
}

.profile-menu-item b {
  color: var(--text-light);

  font-size: 20px;
}


/* =====================================================
   BOTTOM NAVIGATION
===================================================== */

.bottom-nav {
  position: fixed;

  left: 0;
  right: 0;
  bottom: 0;

  height: 72px;

  z-index: 100;

  background: rgba(255, 255, 255, 0.96);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  border-top: 1px solid var(--border);

  display: flex;
  align-items: center;
  justify-content: space-around;

  padding: 5px max(10px, calc((100vw - 720px) / 2));
}

.bottom-nav-item {
  border: 0;

  background: transparent;

  color: #9aa2ad;

  width: 65px;

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 3px;

  font-size: 9px;
  font-weight: 600;
}

.bottom-nav-item.active {
  color: var(--primary);
}

.bottom-nav-item.active .nav-icon {
  background: var(--primary-light);
  border-radius: 12px;
  padding: 3px 14px;
}

.nav-icon {
  font-size: 21px;

  line-height: 1;
}

.bottom-nav-create {
  width: 58px;
  height: 58px;

  border: 3px solid var(--background);

  border-radius: 50%;

  background: var(--primary);

  color: white;

  font-size: 30px;

  line-height: 1;

  box-shadow: 0 10px 22px rgba(11, 122, 90, 0.35);

  transform: translateY(-10px);
}


/* =====================================================
   MODAL
===================================================== */

.modal-overlay {
  position: fixed;

  inset: 0;

  z-index: 300;

  background: rgba(15, 23, 42, 0.5);

  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);

  display: flex;
  align-items: flex-end;
}

.modal-sheet {
  width: 100%;

  max-width: 720px;

  max-height: 92vh;

  margin: auto auto 0;

  overflow-y: auto;

  background: white;

  border-radius: 25px 25px 0 0;

  padding: 20px 18px 30px;

  animation: slideUp 0.25s ease;
}

@keyframes slideUp {
  from {
    transform: translateY(30px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.modal-header {
  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  margin-bottom: 20px;
}

.modal-header h2 {
  margin-top: 4px;

  font-size: 23px;

  letter-spacing: -0.7px;
}

.modal-close {
  width: 35px;
  height: 35px;

  border: 0;

  border-radius: 50%;

  background: #f1f3f5;

  color: var(--text-secondary);

  font-size: 22px;
}


/* =====================================================
   CREATE POST FORM
===================================================== */

.post-location-box {
  display: flex;

  align-items: center;

  gap: 11px;

  padding: 12px;

  margin-bottom: 17px;

  background: var(--primary-light);

  border-radius: 14px;
}

.post-location-box > span {
  font-size: 18px;
}

.post-location-box div {
  display: flex;
  flex-direction: column;
}

.post-location-box small {
  color: var(--primary-dark);

  font-size: 8px;
  font-weight: 800;

  letter-spacing: 0.7px;
}

.post-location-box strong {
  font-size: 12px;
}

.form-label {
  display: block;

  margin-bottom: 7px;

  font-size: 11px;
  font-weight: 700;
}

.form-select {
  width: 100%;

  border: 1px solid var(--border);

  background: white;

  border-radius: 13px;

  height: 47px;

  padding: 0 12px;

  margin-bottom: 17px;

  color: var(--text);

  font-size: 12px;

  outline: 0;
}

.textarea-wrapper {
  position: relative;

  margin-bottom: 18px;
}

.textarea-wrapper textarea {
  width: 100%;

  resize: vertical;

  min-height: 140px;

  border: 1px solid var(--border);

  border-radius: 15px;

  padding: 13px;

  outline: 0;

  color: var(--text);

  font-size: 13px;

  line-height: 1.6;
}

.textarea-wrapper textarea:focus {
  border-color: var(--primary);
}

.textarea-wrapper textarea::placeholder {
  color: #a3aab5;
}

#charCount {
  position: absolute;

  right: 11px;
  bottom: 8px;

  color: var(--text-light);

  font-size: 9px;
}


/* =====================================================
   PHOTO UPLOAD
===================================================== */

.photo-upload-section {
  margin-bottom: 18px;
}

.photo-upload-header {
  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 9px;
}

.photo-upload-header div {
  display: flex;
  flex-direction: column;
}

.photo-upload-header strong {
  font-size: 11px;
}

.photo-upload-header small {
  margin-top: 2px;

  color: var(--text-light);

  font-size: 9px;
}

.add-photo-button {
  border: 1px dashed var(--primary);

  color: var(--primary);

  background: var(--primary-light);

  padding: 7px 11px;

  border-radius: 9px;

  font-size: 10px;
  font-weight: 700;
}

.image-preview {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 7px;
}

.image-preview img {
  width: 100%;

  aspect-ratio: 1;

  object-fit: cover;

  border-radius: 10px;
}


/* =====================================================
   PUBLISH
===================================================== */

.publish-button {
  width: 100%;

  height: 52px;

  border: 0;

  border-radius: 15px;

  background: var(--primary);

  color: white;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 17px;

  font-size: 12px;
  font-weight: 700;

  box-shadow: 0 8px 20px rgba(11, 122, 90, 0.2);
}

.publish-button span:last-child {
  font-size: 20px;
}


/* =====================================================
   EMPTY STATES
===================================================== */

.empty-state {
  text-align: center;

  padding: 55px 20px;

  color: var(--text-secondary);
}

.empty-state-icon {
  width: 55px;
  height: 55px;

  margin: 0 auto 12px;

  border-radius: 18px;

  background: var(--primary-light);

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 24px;
}

.empty-state h3 {
  font-size: 15px;

  color: var(--text);

  margin-bottom: 5px;
}

.empty-state p {
  font-size: 11px;
}


/* =====================================================
   LOADING
===================================================== */

.loading-state {
  padding: 40px 20px;

  text-align: center;

  color: var(--text-light);

  font-size: 12px;
}

.loading-spinner {
  width: 28px;
  height: 28px;

  margin: 0 auto 10px;

  border: 3px solid #dfe8e4;

  border-top-color: var(--primary);

  border-radius: 50%;

  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}


/* =====================================================
   DEBUG
===================================================== */

.debug-panel {
  position: fixed;

  left: 10px;
  right: 10px;
  bottom: 80px;

  z-index: 500;

  background: #111827;

  color: #d1fae5;

  padding: 12px;

  border-radius: 10px;

  font-family: monospace;

  font-size: 10px;

  max-height: 150px;

  overflow: auto;
}


/* =====================================================
   TABLET / DESKTOP
===================================================== */

@media (min-width: 700px) {

  .main-content {
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);

    background: var(--background);

    min-height: calc(100vh - 70px);
  }

  .welcome-section {
    padding-top: 14px;
  }

  .bottom-nav {
    border-radius: 20px 20px 0 0;
  }

  .floating-create {
    right: max(25px, calc((100vw - 760px) / 2));
  }

}


/* =====================================================
   SMALL PHONES
===================================================== */

@media (max-width: 380px) {

  .brand-text small {
    display: none;
  }

  .brand-mark {
    width: 37px;
    height: 37px;
  }

  .brand-text strong {
    font-size: 17px;
  }

  .location-pill {
    max-width: 105px;
  }

  .category-chip {
    padding: 8px 11px;
  }

}


/* =====================================================
   REDUCED MOTION
===================================================== */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;

    scroll-behavior: auto !important;

    transition-duration: 0.01ms !important;
  }

}

/* =====================================================
   TALKAM V3/V4 ADDITIONS
   (votes, replies, review, buttons)
===================================================== */

/* the modal is hidden with the .hidden class, so nothing else is needed */

.mine-badge {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--primary-light);
  color: var(--primary-dark);
  font-size: 11px;
  font-weight: 700;
}

/* Vote column: the Jodel-style arrows */
.vote-box {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-soft);
}

.vote-btn {
  width: 36px;
  height: 34px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-light);
  font-size: 15px;
}

.vote-btn.on-up {
  color: var(--primary);
  background: var(--primary-light);
}

.vote-btn.on-down {
  color: var(--danger);
  background: #fdecee;
}

.vote-score {
  min-width: 28px;
  text-align: center;
  font-size: 14px;
  font-weight: 800;
}

.vote-score.pos { color: var(--primary); }
.vote-score.neg { color: var(--danger); }

.post-actions { flex-wrap: wrap; }

/* Replies */
.comments-box {
  display: none;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.comments-box.open { display: block; }

.comment {
  padding: 9px 0;
  border-bottom: 1px solid #f0f1f3;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.comment-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
  color: var(--text-secondary);
  font-size: 11px;
}

.comment-alias {
  color: var(--text);
  font-weight: 800;
}

.comment-alias.oj {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
}

.comment-form {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.comment-form input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-soft);
  font-size: 14px;
}

.comment-form button {
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
}

/* Buttons + empty state actions */
.empty-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.btn-primary,
.btn-ghost,
.btn-danger {
  padding: 10px 16px;
  border-radius: 12px;
  border: 0;
  font-size: 13px;
  font-weight: 700;
}

.btn-primary { background: var(--primary); color: #fff; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-ghost { background: #fff; color: var(--text); border: 1px solid var(--border); }

.empty-state p { font-size: 13px; }

/* Community review */
.reason-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.reason-chips span {
  padding: 3px 10px;
  border-radius: 999px;
  background: #fdecee;
  color: var(--danger);
  font-size: 11px;
  font-weight: 700;
}

.review-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.review-actions button { flex: 1; padding: 12px; }

/* Report sheet */
.reason-option {
  display: block;
  width: 100%;
  margin-bottom: 8px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  text-align: left;
  font-weight: 600;
}

.notification-item small { color: var(--text-secondary); }
#profileKarma, #profileModStatus { font-size: 12px; opacity: .9; margin-top: 2px; }



/* =====================================================
   TALKAM V5 PRIVATE CHAT
===================================================== */

.bottom-nav-item { position: relative; }
.bottom-nav-item .notification-badge { top: 0; right: 18%; }

.chat-link {
  display: block;
  width: 100%;
  margin-bottom: 8px;
  padding: 10px 12px;
  border: 1px dashed var(--primary);
  border-radius: 12px;
  background: var(--primary-light);
  color: var(--primary-dark);
  font-size: 13px;
  font-weight: 700;
  text-align: left;
}

.chat-mini {
  margin-left: auto;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
}

.chat-hint {
  margin: 4px 0 12px;
  color: var(--text-secondary);
  font-size: 13px;
}

.chat-textarea {
  width: 100%;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft);
  font-size: 16px;
  resize: none;
}

.chat-section {
  margin: 6px 2px 8px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
}

.chat-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-bottom: 9px;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  text-align: left;
}

.chat-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--primary-light);
  font-size: 20px;
}

.chat-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-row-text small {
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-row-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.chat-row-meta small { color: var(--text-light); font-size: 11px; }

.chat-dot {
  min-width: 22px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  text-align: center;
}

/* Full-screen chat */
.chat-screen {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  flex-direction: column;
  background: var(--background);
}

.chat-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: #fff;
}

.chat-back {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 12px;
  background: var(--surface-soft);
  font-size: 24px;
  line-height: 1;
}

.chat-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-title strong { font-size: 16px; }
.chat-title small { color: var(--text-secondary); font-size: 12px; }

.chat-menu-btn {
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
}

.chat-menu-btn.danger { color: var(--danger); }

.chat-messages {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  overflow-y: auto;
}

.bubble {
  max-width: 82%;
  padding: 9px 12px;
  border-radius: 16px;
  overflow-wrap: anywhere;
  font-size: 15px;
}

.bubble small { display: block; margin-top: 2px; font-size: 10px; opacity: .65; }
.bubble.mine { align-self: flex-end; background: var(--primary); color: #fff; border-bottom-right-radius: 5px; }
.bubble.theirs { align-self: flex-start; background: #fff; border: 1px solid var(--border); border-bottom-left-radius: 5px; }

.chat-footer {
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  background: #fff;
}

.chat-notice {
  padding: 10px 6px;
  color: var(--text-secondary);
  font-size: 13px;
  text-align: center;
}

.chat-accept { display: flex; gap: 8px; }
.chat-accept button { flex: 1; padding: 12px; }

.chat-composer { display: flex; gap: 8px; }
.chat-composer input {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft);
  font-size: 16px;
}


/* =====================================================
   TALKAM V6
   coloured posts, premium black, photos, dark mode,
   splash, install, responsive
===================================================== */

/* ---------- coloured posts (every post its own colour) ---------- */

.feed-container { padding: 14px 14px 0; }

.post-card.colorful {
  position: relative;
  background: var(--card-bg, var(--surface));
  color: #fff;
  border: 0;
  border-radius: 22px;
  margin-bottom: 14px;
  padding: 16px 64px 14px 16px;
  box-shadow: 0 10px 22px -8px rgba(0, 0, 0, 0.28);
}

.post-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }

.post-tag {
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.post-tag.price {
  background: #fff;
  color: #166534;
}

.post-card.colorful .post-body {
  cursor: pointer;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* header row: alias pill · distance/time · "you" · menu */
.post-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.post-alias {
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.22);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
}

.post-where {
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.post-card.colorful .mine-badge {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}

/* "⋯" menu, top right of the card */
.post-menu-wrap { position: relative; margin-left: auto; }

.post-menu-btn {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
  font-size: 18px;
  line-height: 1;
}

.post-menu-popover {
  position: absolute;
  top: 36px;
  right: 0;
  z-index: 20;
  min-width: 160px;
  padding: 6px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.post-menu-popover button {
  display: block;
  width: 100%;
  padding: 10px 11px;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
}

.post-menu-popover button.danger { color: var(--danger); }

/* overlay vote rail on the right edge, Jodel-style */
.post-vote-rail {
  position: absolute;
  top: 14px;
  right: 12px;
  bottom: 40px;
  width: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.post-vote-rail .vote-btn {
  width: 40px;
  height: 34px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  font-size: 20px;
  line-height: 1;
}

.post-vote-rail .vote-btn.on-up,
.post-vote-rail .vote-btn.on-down { color: #fff; }

.post-vote-rail .vote-score,
.post-vote-rail .vote-score.pos,
.post-vote-rail .vote-score.neg {
  color: #fff;
  font-size: 15px;
}

.post-comment-count {
  margin-top: 12px;
  padding: 5px 11px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.18);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.post-card.colorful .comments-box {
  margin-top: 12px;
  padding: 12px;
  border: 0;
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
}

/* premium posts are black, with a gold edge and glow */
.post-card.premium {
  box-shadow: inset 0 0 0 1px #d4af37;
}

.post-alias.gold {
  background: linear-gradient(135deg, #f5d76e, #d4af37);
  color: #1a1400;
}

/* ---------- photos ---------- */

.photo-controls { display: flex; gap: 6px; }

.add-photo-button { cursor: pointer; white-space: nowrap; }

.photo-lock {
  margin-top: 8px;
  padding: 11px 13px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: var(--surface-soft);
  color: var(--text-secondary);
  font-size: 12px;
}

.image-preview { margin-top: 10px; }

.photo-thumb { position: relative; }

.photo-thumb button {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 16px;
  line-height: 1;
}

.post-card.colorful .post-images img {
  width: 100%;
  max-height: 320px;
  object-fit: cover;
}

/* ---------- settings ---------- */

.switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  width: 46px;
  height: 28px;
  margin-left: auto;
  border-radius: 999px;
  background: var(--border);
  cursor: pointer;
  transition: background 0.2s;
}

.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
}

.switch:checked { background: var(--primary); }
.switch:checked::after { transform: translateX(18px); }

.install-help {
  margin: -2px 4px 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--primary-light);
  color: var(--text);
  font-size: 12px;
  line-height: 1.7;
}

/* ---------- splash + offline ---------- */

.splash {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #0b7a5a;
  color: #fff;
  transition: opacity 0.4s ease;
}

.splash.gone { opacity: 0; pointer-events: none; }

.splash-logo {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  margin-bottom: 10px;
  border-radius: 28px;
  background: #fff;
  color: #0b7a5a;
  font-size: 54px;
  font-weight: 800;
  animation: splashPulse 1.4s ease-in-out infinite;
}

.splash strong { font-size: 28px; letter-spacing: -0.02em; }
.splash small { opacity: 0.85; font-size: 14px; }

@keyframes splashPulse {
  50% { transform: scale(1.06); }
}

.offline-banner {
  position: sticky;
  top: 0;
  z-index: 300;
  padding: 8px 14px;
  background: #92400e;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

/* ---------- responsive: phones, tablets, computers ---------- */

.bottom-nav {
  height: calc(72px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.chat-footer { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }

@media (min-width: 700px) {

  .bottom-nav {
    left: 50%;
    right: auto;
    width: min(var(--max-width), 100%);
    transform: translateX(-50%);
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
  }

  .chat-screen {
    left: 50%;
    right: auto;
    width: min(var(--max-width), 100%);
    transform: translateX(-50%);
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
  }

  .post-card.colorful .post-images { grid-template-columns: repeat(3, 1fr); }

  .modal-sheet { margin: auto; border-radius: 25px; }
}

@media (min-width: 1100px) {

  :root { --max-width: 780px; }

  .post-card.colorful .post-body { font-size: 19px; }

  .post-card.colorful { padding: 22px; }
}

@media (max-width: 380px) {
  .post-card.colorful .post-action { padding: 6px 7px; }
}

/* ---------- dark mode ---------- */

[data-theme="dark"] {
  color-scheme: dark;

  --primary: #19a37a;
  --primary-dark: #7fe0bd;
  --primary-light: #123a30;

  --background: #0e1113;
  --surface: #171b1f;
  --surface-soft: #1d2226;

  --text: #eef1f3;
  --text-secondary: #a6b0b8;
  --text-light: #7d8790;

  --border: #2a3035;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 25px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .top-header,
[data-theme="dark"] .bottom-nav {
  background: rgba(23, 27, 31, 0.94);
  border-color: var(--border);
}

[data-theme="dark"] .icon-button,
[data-theme="dark"] .explore-search,
[data-theme="dark"] .category-chip,
[data-theme="dark"] .community-card,
[data-theme="dark"] .notification-item,
[data-theme="dark"] .profile-menu-item,
[data-theme="dark"] .modal-sheet,
[data-theme="dark"] .form-select,
[data-theme="dark"] .btn-ghost,
[data-theme="dark"] .reason-option,
[data-theme="dark"] .chat-mini,
[data-theme="dark"] .chat-row,
[data-theme="dark"] .chat-header,
[data-theme="dark"] .chat-menu-btn,
[data-theme="dark"] .bubble.theirs,
[data-theme="dark"] .chat-footer,
[data-theme="dark"] .post-card:not(.colorful) {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

[data-theme="dark"] .category-chip.active {
  background: var(--primary);
  color: #fff;
}

[data-theme="dark"] .location-card {
  background: var(--surface);
  border-color: var(--border);
}

[data-theme="dark"] .post-body { color: var(--text); }
[data-theme="dark"] .post-actions { border-top-color: var(--border); }

[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: var(--surface-soft);
  color: var(--text);
  border-color: var(--border);
}

[data-theme="dark"] .main-content { background: var(--background); }

[data-theme="dark"] .switch::after { background: #f5f7f8; }

[data-theme="dark"] .post-card.colorful .comments-box { background: var(--surface); }

[data-theme="dark"] .post-card.premium {
  box-shadow: 0 6px 22px rgba(212, 175, 55, 0.18);
}


/* =====================================================
   TALKAM V7: map, video capture, premium modal
===================================================== */

.recording-notice {
  margin: 8px 0 0;
  padding: 8px 11px;
  border-radius: 10px;
  background: #fdecee;
  color: var(--danger);
  font-size: 11px;
  font-weight: 700;
}

.photo-thumb video {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
  background: #000;
}

.thumb-tag {
  position: absolute;
  left: 5px;
  bottom: 5px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
}

.post-card.colorful video {
  width: 100%;
  max-height: 320px;
  border-radius: 10px;
  background: #000;
}

.premium-list {
  margin-bottom: 16px;
  padding-left: 4px;
  list-style: none;
}

.premium-list li {
  padding: 10px 2px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.premium-list li:last-child { border-bottom: 0; }

[data-theme="dark"] .recording-notice { background: #3a1116; }


/* =====================================================
   TALKAM V8: karma pill, locked video button
===================================================== */

.upgrade-pill {
  flex: none;
  border: 0;
  border-radius: 999px;
  padding: 9px 14px;
  background: linear-gradient(135deg, #f6c453, #d4af37);
  color: #241a00;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .01em;
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
}

.karma-pill {
  flex: none;
  border: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.1;
  padding: 0 2px;
}

.karma-pill strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
}

.karma-pill small {
  color: #b8860b;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .06em;
}

.add-photo-button.locked,
#recordVideoBtn.locked {
  border-color: var(--border);
  background: var(--surface-soft);
  color: var(--text-light);
}

[data-theme="dark"] .karma-pill { background: var(--surface); border-color: var(--border); }


/* =====================================================
   SAFETY / COMMUNITY PAGE
===================================================== */

.safety-list { padding: 0 18px; display: flex; flex-direction: column; gap: 10px; }

.safety-card {
  display: flex;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}

.safety-icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.safety-card strong { display: block; font-size: 13px; margin-bottom: 3px; }
.safety-card p { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }


/* =====================================================
   PREMIUM PAYMENT BOX
===================================================== */

#payWithPaystackBtn { margin-bottom: 4px; }

.pay-caption {
  margin: 6px 2px 14px;
  color: var(--text-secondary);
  font-size: 11.5px;
  line-height: 1.5;
  text-align: center;
}

.pay-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 14px;
  color: var(--text-light);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.pay-divider::before,
.pay-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.pay-box {
  margin-bottom: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft);
}

.pay-box-label {
  display: block;
  margin-bottom: 6px;
  color: var(--text-light);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
}

.pay-box-account {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.pay-box-account span {
  font-family: monospace;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .02em;
}

.pay-box-account button {
  flex: none;
  padding: 7px 13px;
  border: 0;
  border-radius: 10px;
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}


/* =====================================================
   TALKAM PREMIUM PAGE
===================================================== */

.premium-page {
  min-height: 100vh;
  margin: 0 -1px;
  background:
    radial-gradient(circle at top right, rgba(11, 122, 90, 0.13), transparent 35%),
    var(--background);
}

.premium-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 18px 14px;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(18px);
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--border);
}

.premium-back {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 14px;
  background: var(--primary-light);
  color: var(--primary-dark);
  font-size: 25px;
}

.premium-small-label {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: var(--primary);
}

.premium-header h1 { margin: 2px 0 0; font-size: 22px; font-weight: 900; color: var(--text); }

.premium-hero {
  margin: 18px;
  padding: 28px 20px;
  border-radius: 28px;
  text-align: center;
  color: #fff;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .18), transparent 30%),
    linear-gradient(145deg, #064b39, #07815f 55%, #0aa879);
  box-shadow: 0 18px 40px rgba(7, 92, 69, .22);
}

.premium-hero::after {
  content: "";
  position: absolute;
  width: 170px; height: 170px;
  border-radius: 50%;
  right: -80px; top: -70px;
  background: rgba(255, 255, 255, .08);
}

.premium-crown {
  width: 72px; height: 72px;
  margin: 0 auto 14px;
  display: grid; place-items: center;
  border-radius: 24px;
  background: rgba(255, 255, 255, .15);
  border: 1px solid rgba(255, 255, 255, .22);
  font-size: 38px;
}

.premium-hero h2 { margin: 0 auto 10px; max-width: 310px; font-size: 27px; line-height: 1.12; font-weight: 900; }
.premium-hero p { margin: 0 auto 18px; max-width: 330px; color: rgba(255, 255, 255, .86); font-size: 14px; line-height: 1.55; }

.premium-mini-badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .22);
  font-size: 12px;
  font-weight: 800;
}

.premium-section { margin: 0 18px 22px; }

.premium-section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.premium-section-title h3 { margin: 0; font-size: 17px; color: var(--text); }
.premium-section-title span { font-size: 11px; color: var(--text-secondary); }

.premium-benefits { display: grid; gap: 9px; }

.premium-benefit {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
}

.benefit-icon {
  width: 43px; height: 43px; flex: 0 0 43px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: var(--primary-light);
  font-size: 21px;
}

.premium-benefit div:nth-child(2) { flex: 1; }
.premium-benefit strong { display: block; color: var(--text); font-size: 13px; }
.premium-benefit p { margin: 3px 0 0; color: var(--text-secondary); font-size: 11px; }

.premium-benefit > span {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--primary-light);
  color: var(--primary-dark);
  font-size: 12px; font-weight: 900;
}

.premium-plans { display: grid; gap: 10px; }

.premium-plan {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 16px;
  border-radius: 20px;
  background: var(--surface);
  border: 2px solid var(--border);
}

.premium-plan.active { border-color: var(--primary); background: var(--primary-light); }

.plan-radio {
  width: 21px; height: 21px;
  border: 2px solid var(--text-light);
  border-radius: 50%;
  display: grid; place-items: center;
  flex: 0 0 21px;
}

.premium-plan.active .plan-radio { border-color: var(--primary); }
.premium-plan.active .plan-radio span { width: 11px; height: 11px; border-radius: 50%; background: var(--primary); }

.plan-info { flex: 1; }
.plan-info strong { display: block; color: var(--text); font-size: 14px; }
.plan-info small { display: block; margin-top: 3px; color: var(--text-secondary); font-size: 11px; }

.plan-price { text-align: right; }
.plan-price strong { display: block; color: var(--primary-dark); font-size: 14px; }
.plan-price small { color: var(--text-secondary); font-size: 10px; }

.save-badge {
  position: absolute;
  top: -8px; right: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #f5c542;
  color: #473500;
  font-size: 8px;
  font-weight: 900;
}

.premium-payment { padding: 0 18px 4px; }

.premium-subscribe-btn {
  width: 100%;
  min-height: 54px;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(135deg, #0b7a5a, #09a274);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  box-shadow: 0 12px 25px rgba(11, 122, 90, .25);
}

.premium-subscribe-btn:active { transform: scale(.98); }
.premium-subscribe-btn:disabled { opacity: .6; }

.premium-secure { margin: 10px 0 0; text-align: center; color: var(--text-secondary); font-size: 10px; }

.premium-note {
  margin: 18px;
  padding: 15px;
  border-radius: 17px;
  background: var(--primary-light);
  border: 1px solid var(--border);
}

.premium-note strong { font-size: 12px; color: var(--primary-dark); }
.premium-note p { margin: 5px 0 0; font-size: 10px; line-height: 1.5; color: var(--text-secondary); }

/* the nicer profile row that links here */
.profile-premium-button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  margin-bottom: 9px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(135deg, var(--primary-light), var(--surface));
  text-align: left;
}

.profile-premium-button > span:first-child {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: #fff3c4;
  font-size: 20px;
}

.profile-premium-button div { flex: 1; }
.profile-premium-button strong { display: block; font-size: 13px; color: var(--text); }
.profile-premium-button small { display: block; margin-top: 3px; color: var(--text-secondary); font-size: 10px; }
.profile-premium-button > span:last-child { font-size: 24px; color: var(--primary); }

[data-theme="dark"] .premium-header,
[data-theme="dark"] .premium-benefit,
[data-theme="dark"] .premium-plan,
[data-theme="dark"] .profile-premium-button { background: var(--surface); border-color: var(--border); }

/* =========================================================
   V11 FEATURE EXPANSION
   ========================================================= */
.vibe-card,.karma-level-card{background:linear-gradient(135deg,#0b7a5a,#0f9b70);color:#fff;border-radius:24px;padding:18px;margin:10px 0 16px;box-shadow:0 10px 28px rgba(11,122,90,.16)}
.vibe-card h3{margin:5px 0 4px;font-size:20px}.vibe-card p{margin:0 0 14px;opacity:.88;font-size:13px}
.intention-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.intention-btn{border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.12);color:#fff;border-radius:14px;padding:10px 5px;font-weight:700;font-size:12px}.intention-btn.active{background:#f4c430;color:#111;border-color:#f4c430}
.explorer-tools{display:flex;gap:8px;overflow:auto;padding:3px 0 12px}.explorer-filter{white-space:nowrap;border:1px solid #dfe7e3;background:#fff;border-radius:999px;padding:9px 13px;font-weight:700}.explorer-filter.active{background:#0b7a5a;color:#fff;border-color:#0b7a5a}
.community-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px}.community-card{border:1px solid #e3ebe7;background:#fff;border-radius:20px;padding:15px;text-align:left;box-shadow:0 7px 20px rgba(16,45,35,.05)}.community-card .community-icon{font-size:25px}.community-card h3{margin:7px 0 3px;font-size:16px}.community-card p{margin:0;color:#6b7772;font-size:12px}.community-card .live-count{margin-top:11px;display:inline-flex;border-radius:999px;background:#eaf8f1;color:#0b7a5a;padding:6px 9px;font-size:11px;font-weight:800}.community-card:active{transform:scale(.98)}
.karma-level-card{display:flex;align-items:center;justify-content:space-between;gap:12px}.karma-level-card .karma-main{display:flex;align-items:center;gap:12px}.karma-level-icon{width:48px;height:48px;border-radius:16px;background:#f4c430;color:#111;display:grid;place-items:center;font-size:23px}.karma-level-card h3{margin:0 0 3px}.karma-level-card p{margin:0;opacity:.85;font-size:12px}.karma-progress{height:7px;background:rgba(255,255,255,.2);border-radius:99px;overflow:hidden;margin-top:8px}.karma-progress span{display:block;height:100%;background:#f4c430;border-radius:99px}
.post-boosted{outline:2px solid #f4c430;box-shadow:0 12px 30px rgba(244,196,48,.18)}.boost-badge{background:#f4c430;color:#111;border-radius:999px;padding:4px 7px;font-size:10px;font-weight:900}.reaction-row{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px}.reaction-btn{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.09);color:inherit;border-radius:999px;padding:5px 8px;font-size:12px}.reaction-btn.mine{background:#f4c430;color:#111;border-color:#f4c430}.reaction-btn b{font-size:10px;margin-left:2px}.post-card:not(.premium) .reaction-btn{background:rgba(255,255,255,.11)}
@media(max-width:420px){.intention-grid{grid-template-columns:repeat(2,1fr)}.community-grid{grid-template-columns:1fr 1fr}}


/* =====================================================
   V12: Home sub-tabs + hold-to-view blur
===================================================== */

.feed-subtabs {
  display: flex;
  gap: 8px;
  padding: 10px 18px 4px;
}

.subtab {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.subtab.active {
  border-color: var(--primary);
  background: var(--primary-light);
  color: var(--primary-dark);
}

.hold-to-view {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  -webkit-touch-callout: none;
  user-select: none;
}

.hold-to-view {
  min-height: 190px;
  background: #1a1a1a; /* fallback while the image itself is loading */
}

/* Several photos on one post: tile them in a 2-up grid instead of
   stacking directly on top of each other. */
.hold-to-view.multi {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: 2px;
}

.hold-to-view img,
.hold-to-view video {
  filter: blur(30px) saturate(1.6) brightness(.9);
  transform: scale(1.2); /* hides blur edge artifacts */
  transition: filter .25s ease;
  pointer-events: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hold-to-view.revealed img,
.hold-to-view.revealed video {
  filter: none;
  pointer-events: auto;
}

.hold-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.28);
}

.hold-overlay span {
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
}

.hold-to-view.revealed .hold-overlay { display: none; }


/* =====================================================
   THREAD SCREEN
===================================================== */

.thread-screen {
  position: fixed;
  inset: 0;
  z-index: 450;
  display: flex;
  flex-direction: column;
  background: var(--background);
}

.thread-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.thread-header-actions { display: flex; gap: 8px; }

.thread-icon-btn {
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  font-size: 16px;
}

.thread-icon-btn.active { background: var(--primary-light); border-color: var(--primary); }

.thread-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 14px 6px;
}

.thread-body .post-card.colorful { margin-bottom: 0; }

.post-comment-count.static { cursor: default; }

.thread-replies { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }

.reply-card {
  position: relative;
  background: var(--card-bg, var(--surface));
  color: #fff;
  border-radius: 18px;
  padding: 13px 58px 13px 14px;
  box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.28);
}

.reply-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.reply-body { font-size: 15px; font-weight: 500; line-height: 1.5; overflow-wrap: anywhere; }

.reply-vote-rail {
  position: absolute;
  top: 10px;
  right: 8px;
  bottom: 10px;
  width: 38px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.reply-vote-rail .vote-btn { width: 34px; height: 28px; border: 0; background: transparent; color: rgba(255,255,255,.75); font-size: 16px; }
.reply-vote-rail .vote-btn.on-up, .reply-vote-rail .vote-btn.on-down { color: #fff; }
.reply-vote-rail .vote-score { color: #fff; font-size: 13px; font-weight: 800; }

.thread-guidelines-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px;
  border: 0;
  border-top: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
}

.thread-guidelines {
  padding: 10px 16px;
  background: var(--surface-soft);
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.5;
}

.thread-footer {
  display: flex;
  gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.thread-footer input {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--text);
  font-size: 15px;
}

.thread-footer button {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 17px;
}


/* =====================================================
   TALKAM POST EXPERIENCE — JODEL-STYLE RICH ACTIONS
   Anonymous by design: no real-name or profile-photo UI.
===================================================== */

.post-card.colorful {
  overflow: visible;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.post-card.colorful:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -10px rgba(0,0,0,.32);
}

.post-card.colorful:focus-within {
  box-shadow: 0 0 0 2px rgba(255,255,255,.35), 0 14px 30px -10px rgba(0,0,0,.32);
}

.post-card.colorful .post-top {
  min-width: 0;
}

.anonymous-dot {
  font-size: 6px;
  opacity: .5;
  flex: 0 0 auto;
}

.post-time {
  color: rgba(255,255,255,.68);
  font-size: 10px;
  white-space: nowrap;
}

.post-card.colorful .post-body {
  padding-right: 4px;
  margin-bottom: 2px;
}

.post-context {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 10px;
  color: rgba(255,255,255,.72);
  font-size: 10px;
  font-weight: 650;
}

.post-context span:first-child {
  color: rgba(255,255,255,.9);
}

.post-card.colorful .post-images {
  margin-top: 13px;
  cursor: pointer;
}

.post-action-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.16);
  overflow-x: auto;
  scrollbar-width: none;
}

.post-action-row::-webkit-scrollbar { display: none; }

.post-action-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(0,0,0,.13);
  color: #fff;
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}

.post-action-chip b {
  min-width: 14px;
  opacity: .85;
  font-size: 10px;
}

.post-action-chip.active {
  background: rgba(255,255,255,.92);
  color: #111;
  border-color: rgba(255,255,255,.92);
}

.open-thread-hint,
.thread-hint {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 4px 0 0;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.7);
  text-align: left;
  font-size: 10px;
  font-weight: 700;
}

.open-thread-hint {
  cursor: pointer;
}

.open-thread-hint:hover {
  color: #fff;
}

.reaction-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}

.reaction-row::-webkit-scrollbar { display: none; }

.reaction-btn {
  flex: 0 0 auto;
  min-width: 34px;
  height: 30px;
  padding: 3px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.13);
  color: #fff;
}

.reaction-btn:active,
.post-action-chip:active {
  transform: scale(.96);
}

.boost-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  font-size: 11px;
}

.post-boosted {
  box-shadow: 0 0 0 1px rgba(255,220,100,.55), 0 16px 32px -10px rgba(0,0,0,.38);
}

@media (max-width: 430px) {
  .post-card.colorful {
    padding-right: 57px;
  }
  .post-action-chip {
    padding-inline: 9px;
  }
  .post-action-chip span {
    display: inline;
  }
}

@media (prefers-reduced-motion: reduce) {
  .post-card.colorful,
  .post-action-chip {
    transition: none;
  }
}


/* =====================================================
   PROFESSIONAL CARD REDESIGN
   White cards, colour-coded by category on the left edge,
   instead of a different solid colour per post.
===================================================== */

.feed-container { padding: 14px 14px 0; }

.feed-card {
  position: relative;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-left: 5px solid var(--accent, var(--text-light));
  border-radius: 16px;
  margin-bottom: 14px;
  padding: 14px 16px;
  box-shadow: 0 2px 10px -4px rgba(15, 23, 42, 0.08);
}

/* =====================================================
   MEDIA CARD
   Photo/video posts: the picture covers the card edge to
   edge, Jodel-style, instead of sitting in a padded box.
   The identity row and vote arrows float on top of it.
===================================================== */

.feed-card.media-card {
  padding: 0;
  overflow: hidden;
  border-left-width: 0;
}

.media-cover {
  position: relative;
  width: 100%;
  min-height: 340px;
  max-height: 520px;
  background: #15181c;
  cursor: pointer;
}

.media-cover .hold-to-view {
  position: absolute;
  inset: 0;
  min-height: 0;
  border-radius: 0;
}

.media-topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  padding: 12px 10px 28px;
  background: linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,0));
  pointer-events: none; /* let taps pass through to the cover/vote rail */
}

.media-topbar .post-header { margin-bottom: 0; pointer-events: auto; }
.media-topbar .author-name,
.media-topbar .post-meta-sub { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.media-topbar .author-name.gold { color: #ffd76e; }
.media-topbar .card-options-trigger { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.media-topbar .post-avatar { box-shadow: 0 1px 6px rgba(0,0,0,.5); }

.media-voterail {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px;

  background: rgba(0, 0, 0, 0.32);
  border-radius: 999px;
  backdrop-filter: blur(2px);
}

.media-voterail .vote-btn {
  width: 30px;
  height: 28px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 14px;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.media-voterail .vote-btn.on-up { color: #4ade80; }
.media-voterail .vote-btn.on-down { color: #f87171; }
.media-voterail .vote-score {
  min-width: 18px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}

.media-footer {
  padding: 12px 16px 14px;
  border-left: 5px solid var(--accent, var(--text-light));
  margin-left: -1px; /* sits flush under the full-bleed cover above */
}

.media-footer .post-title { margin-top: 2px; }

.post-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

/* Jodel's signature: a small colour-coded circular avatar per anonymous
   identity, instead of a text pill. Colour stays stable per alias. */
.post-avatar {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 900;
  color: #fff;
  text-transform: uppercase;
  background: var(--avatar-color, var(--primary));
  box-shadow: 0 2px 6px -2px rgba(0,0,0,.25);
}

.post-meta-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 600;
  min-width: 0;
}

.author-name {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
}

.author-name.gold { color: #b8860b; }

.post-meta-sub {
  font-size: 11.5px;
  color: var(--text-secondary);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.author-pill {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
}

.author-pill.gold {
  background: linear-gradient(135deg, #f5d76e, #d4af37);
  color: #1a1400;
  border-color: transparent;
}

.boost-tag, .mine-tag {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--primary-light);
  color: var(--primary-dark);
  font-size: 10px;
  font-weight: 800;
}

.post-menu-wrap { position: relative; margin-left: auto; flex: none; }

.card-options-trigger {
  padding: 4px 8px;
  border: 0;
  background: transparent;
  color: var(--text-light);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 1px;
}

.tag-container { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }

.tag-chip {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
}

.tag-chip.cat-general      { background: rgba(100, 116, 139, .12); color: #334155; }
.tag-chip.cat-housing      { background: rgba(245, 158, 11, .14); color: #92400e; }
.tag-chip.cat-campus       { background: rgba(124, 58, 237, .12); color: #5b21b6; }
.tag-chip.cat-jobs         { background: rgba(8, 145, 178, .12);  color: #155e63; }
.tag-chip.cat-buy-sell     { background: rgba(219, 39, 119, .12); color: #9d174d; }
.tag-chip.cat-transport    { background: rgba(59, 130, 246, .12); color: #1d4ed8; }
.tag-chip.cat-food         { background: rgba(16, 185, 129, .12); color: #047857; }
.tag-chip.price            { background: var(--primary-light); color: var(--primary-dark); }

.post-title {
  margin: 0 0 10px;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text);
  cursor: pointer;
  overflow-wrap: anywhere;
}

.interaction-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.replies-counter {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 700;
}

.vote-pill {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
}

.vote-pill .vote-btn { width: 26px; height: 24px; border: 0; background: transparent; color: var(--text-light); font-size: 12px; }
.vote-pill .vote-btn.on-up { color: var(--primary); }
.vote-pill .vote-btn.on-down { color: var(--danger); }
.vote-pill .vote-score { min-width: 16px; text-align: center; font-size: 12px; font-weight: 800; color: var(--text); }

.reaction-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
}

.reaction-pill {
  border: 0;
  background: transparent;
  padding: 2px 4px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 2px;
}

.reaction-pill b { font-size: 10px; color: var(--text-secondary); font-weight: 800; }
.reaction-pill.mine { background: var(--primary-light); border-radius: 8px; }

/* premium: dark "VIP" card instead of a bright fill */
.feed-card.premium-card {
  background: #14110a;
  border-left-color: #d4af37;
  color: #f2e9d0;
  box-shadow: 0 8px 22px -8px rgba(212, 175, 55, 0.35);
}

.feed-card.premium-card .post-meta-info,
.feed-card.premium-card .replies-counter { color: #cbbf9a; }
.feed-card.premium-card .post-title { color: #fdf6e3; }
.feed-card.premium-card .author-pill:not(.gold) { background: rgba(255,255,255,.08); color: #f2e9d0; border-color: rgba(255,255,255,.16); }
.feed-card.premium-card .card-options-trigger { color: #cbbf9a; }
.feed-card.premium-card .vote-pill,
.feed-card.premium-card .reaction-bar { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); }
.feed-card.premium-card .vote-score { color: #f2e9d0; }

.boosted-card { box-shadow: 0 0 0 1px var(--accent), 0 6px 16px -6px rgba(0,0,0,.15); }

/* hold-to-view: a light scrim only — the blurred photo itself should
   show through with its real colours, like Jodel's spoiler preview,
   not a flat dark card. */
.hold-overlay {
  background: rgba(10, 12, 16, 0.22);
}

/* thread screen: replies reuse the same clean card look */
.thread-body .feed-card { margin-bottom: 0; }

.reply-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent, var(--text-light));
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 2px 8px -4px rgba(15, 23, 42, 0.08);
}

.reply-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.reply-top .post-avatar { flex: 0 0 26px; width: 26px; height: 26px; font-size: 11px; }
.reply-time { color: var(--text-secondary); font-size: 11px; font-weight: 600; margin-left: auto; }
.reply-body { margin: 0 0 8px; font-size: 14.5px; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }

.reply-vote-pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
}

.reply-vote-pill .vote-btn { width: 24px; height: 22px; border: 0; background: transparent; color: var(--text-light); font-size: 11px; }
.reply-vote-pill .vote-btn.on-up { color: var(--primary); }
.reply-vote-pill .vote-btn.on-down { color: var(--danger); }
.reply-vote-pill .vote-score { font-size: 11px; font-weight: 800; color: var(--text); }

[data-theme="dark"] .feed-card,
[data-theme="dark"] .reply-card { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .author-pill,
[data-theme="dark"] .tag-chip,
[data-theme="dark"] .vote-pill,
[data-theme="dark"] .reaction-bar,
[data-theme="dark"] .reply-vote-pill { background: var(--surface-soft); border-color: var(--border); }

/* =====================================================
   PREMIUM: manual pay details collapsed by default
===================================================== */

.manual-pay-toggle {
  width: 100%;
  padding: 10px;
  margin-top: 4px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 700;
}

#manualPayBox { margin-top: 10px; }


/* Hold-to-view media: no native long-press image menu, no selecting/dragging */
.hold-to-view, .hold-to-view img, .hold-to-view video,
.media-cover, .media-cover img, .media-cover video {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
}
.hold-to-view img { pointer-events: none; }

/* =========================================================
   V26: OFFICIAL ANNOUNCEMENTS
   ========================================================= */
.ann-strip { padding: 14px 14px 0; }
.ann-strip.hidden { display: none; }

.ann-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.ann-track::-webkit-scrollbar { display: none; }

.ann-card {
  --ann-a: #0b7a5a;
  --ann-b: #19c08a;
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: center;
  overflow: hidden;
  isolation: isolate;
  padding: 16px 16px 16px;
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(135deg, var(--ann-a), var(--ann-b));
  box-shadow: 0 10px 28px rgba(11, 122, 90, 0.28);
  animation: annIn 520ms cubic-bezier(.2, .9, .25, 1.1) both;
  animation-delay: var(--ann-delay, 0ms);
  transition: transform 280ms ease, opacity 280ms ease;
}
.ann-news   { --ann-a: #1d4ed8; --ann-b: #38bdf8; box-shadow: 0 10px 28px rgba(29, 78, 216, 0.28); }
.ann-promo  { --ann-a: #b45309; --ann-b: #fbbf24; box-shadow: 0 10px 28px rgba(180, 83, 9, 0.28); }
.ann-alert  { --ann-a: #b91c1c; --ann-b: #f97316; box-shadow: 0 10px 28px rgba(185, 28, 28, 0.3); }

.ann-card.leaving { transform: translateX(40px) scale(.96); opacity: 0; }

/* drifting light + one soft shine sweep so the card feels alive */
.ann-glow {
  position: absolute;
  inset: -40%;
  z-index: -1;
  background:
    radial-gradient(40% 40% at 20% 25%, rgba(255,255,255,.28), transparent 70%),
    radial-gradient(35% 35% at 85% 80%, rgba(255,255,255,.18), transparent 70%);
  animation: annDrift 9s ease-in-out infinite alternate;
}
.ann-card::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 45%;
  left: -60%;
  z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
  transform: skewX(-18deg);
  animation: annShine 5.5s ease-in-out 1.2s infinite;
}

.ann-head { display: flex; align-items: center; gap: 11px; padding-right: 28px; }
.ann-emoji {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  font-size: 24px;
  border-radius: 14px;
  background: rgba(255,255,255,.2);
  backdrop-filter: blur(6px);
  animation: annBob 3.2s ease-in-out infinite;
}
.ann-from { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ann-brand { font-weight: 800; font-size: 15px; letter-spacing: .2px; }
.ann-verified {
  display: inline-grid;
  place-items: center;
  width: 16px; height: 16px;
  margin-left: 3px;
  font-size: 10px;
  border-radius: 50%;
  background: #fff;
  color: var(--ann-a);
  vertical-align: 1px;
}
.ann-chip {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(0,0,0,.2);
}
.ann-title { margin: 14px 0 6px; font-size: 19px; line-height: 1.25; font-weight: 800; }
.ann-body  { margin: 0; font-size: 14.5px; line-height: 1.5; opacity: .95; }

.ann-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 9px 16px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
  color: var(--ann-a);
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  transition: transform 160ms ease;
}
.ann-cta:active { transform: scale(.95); }
.ann-cta span { transition: transform 200ms ease; }
.ann-cta:hover span { transform: translateX(3px); }

.ann-close {
  position: absolute;
  top: 10px; right: 10px;
  width: 30px; height: 30px;
  border: 0;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  color: #fff;
  background: rgba(0,0,0,.22);
  cursor: pointer;
}
.ann-close:active { background: rgba(0,0,0,.4); }

.ann-dots { display: flex; justify-content: center; gap: 6px; padding-top: 9px; }
.ann-dots i {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--border);
  transition: width 220ms ease, background 220ms ease;
}
.ann-dots i.on { width: 18px; background: var(--primary); }

@keyframes annIn {
  from { opacity: 0; transform: translateY(-14px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
@keyframes annDrift { to { transform: translate(6%, 8%) rotate(8deg); } }
@keyframes annShine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
@keyframes annBob   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

@media (prefers-reduced-motion: reduce) {
  .ann-card, .ann-glow, .ann-card::after, .ann-emoji { animation: none; }
}

/* ---------- V27: admin announcement composer ---------- */
.adm-sheet { background: var(--surface); color: var(--text); }
.adm-preview { padding: 4px 0 12px; }
.adm-preview .ann-card { flex-basis: 100%; }
.adm-form { display: flex; flex-direction: column; gap: 10px; }
.adm-form input, .adm-form textarea, .adm-form select {
  width: 100%;
  padding: 12px 13px;
  font: inherit;
  font-size: 15px;
  color: var(--text);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  outline: none;
}
.adm-form input:focus, .adm-form textarea:focus, .adm-form select:focus { border-color: var(--primary); }
.adm-form textarea { resize: vertical; min-height: 80px; }
.adm-row { display: flex; gap: 8px; }
.adm-emoji { flex: 0 0 64px; text-align: center; font-size: 20px !important; padding: 8px !important; }
.adm-count { align-self: flex-end; margin-top: -6px; font-size: 12px; color: var(--text-light); }
.adm-label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--text-secondary); }
.adm-kinds { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.adm-kinds button {
  padding: 10px;
  font: inherit; font-weight: 700; font-size: 14px;
  color: var(--text);
  background: var(--surface-soft);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}
.adm-kinds button.on { border-color: var(--primary); background: var(--primary-light); transform: scale(1.02); }
.adm-publish {
  padding: 14px;
  font: inherit; font-weight: 800; font-size: 16px;
  color: #fff;
  background: linear-gradient(135deg, #0b7a5a, #19c08a);
  border: 0; border-radius: 14px;
  box-shadow: 0 8px 20px rgba(11, 122, 90, .3);
  transition: transform 140ms ease, opacity 140ms ease;
}
.adm-publish:active { transform: scale(.97); }
.adm-publish:disabled { opacity: .6; }
.adm-sub { margin: 20px 0 8px; font-size: 14px; color: var(--text-secondary); }
.adm-hint { margin: 0; font-size: 13px; color: var(--text-secondary); }
.adm-live { display: flex; flex-direction: column; gap: 8px; }
.adm-live-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 14px;
}
.adm-live-row small { display: block; color: var(--text-light); margin-top: 2px; }
.adm-live-row button {
  flex: none; padding: 7px 12px; font: inherit; font-weight: 700; font-size: 13px;
  color: var(--danger); background: transparent;
  border: 1.5px solid var(--danger); border-radius: 999px;
}

.tag-chip.cat-gist         { background: rgba(234, 88, 12, .13);  color: #9a3412; }
.tag-chip.cat-traffic      { background: rgba(220, 38, 38, .12);  color: #991b1b; }
.tag-chip.cat-lost-found   { background: rgba(14, 116, 144, .13); color: #155e75; }
.tag-chip.cat-church       { background: rgba(124, 58, 237, .12); color: #6d28d9; }
.tag-chip.cat-sports       { background: rgba(22, 163, 74, .13);  color: #166534; }

/* =========================================================
   V29: CATCHIER UI + REPLIES
   ========================================================= */
:root {
  --grad: linear-gradient(135deg, #0b7a5a 0%, #19c08a 100%);
  --ease-pop: cubic-bezier(.2, .9, .25, 1.25);
}
button { -webkit-tap-highlight-color: transparent; }
button:active:not(:disabled) { transform: scale(.96); }

/* ----- header: glass + gradient logo ----- */
.top-header {
  background: rgba(255,255,255,.82) !important;
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
}
.brand-mark { background: var(--grad) !important; box-shadow: 0 6px 16px rgba(11,122,90,.35); }
.location-dot { animation: dotPulse 2.2s ease-in-out infinite; }
@keyframes dotPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(25,192,138,.55); } 50% { box-shadow: 0 0 0 6px rgba(25,192,138,0); } }

/* ----- home: less clutter above the feed ----- */
.welcome-section:not(:has(.location-error:not(.hidden))):not(:has(.retry-button:not(.hidden))) { display: none; }
.search-container { margin-top: 12px !important; border-radius: 999px !important; box-shadow: var(--shadow-sm); }
.feed-tabs .feed-tab.active { color: var(--primary); }

/* ----- chips ----- */
.category-chip, .subtab {
  transition: transform 160ms var(--ease-pop), background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.category-chip.active {
  background: var(--grad) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 6px 14px rgba(11,122,90,.32);
  transform: translateY(-1px);
}
.subtab.active { box-shadow: 0 4px 10px rgba(11,122,90,.18); }

/* ----- feed cards ----- */
.feed-card {
  border-radius: 22px !important;
  box-shadow: 0 6px 20px rgba(15,23,42,.07) !important;
  animation: cardIn 460ms var(--ease-pop) both;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.feed-container > .feed-card:nth-child(2) { animation-delay: 50ms; }
.feed-container > .feed-card:nth-child(3) { animation-delay: 100ms; }
.feed-container > .feed-card:nth-child(4) { animation-delay: 150ms; }
.feed-container > .feed-card:nth-child(n+5) { animation-delay: 190ms; }
.feed-card:active { transform: scale(.992); }
@keyframes cardIn { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
.feed-card.boosted-card { box-shadow: 0 8px 26px rgba(245,158,11,.22) !important; }

.vote-pill { transition: box-shadow 200ms ease; }
.vote-btn:active { animation: voteBump 260ms var(--ease-pop); }
@keyframes voteBump { 40% { transform: scale(1.5); } }
.reaction-btn:active { animation: voteBump 300ms var(--ease-pop); }

/* ----- skeleton loading ----- */
.skel-card {
  margin: 0 0 14px;
  padding: 18px;
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 6px 20px rgba(15,23,42,.05);
  display: flex; flex-direction: column; gap: 10px;
}
.skel-card i {
  display: block; height: 14px; width: 100%; border-radius: 8px;
  background: linear-gradient(90deg, var(--border) 25%, var(--surface-soft) 50%, var(--border) 75%);
  background-size: 200% 100%;
  animation: skel 1.2s linear infinite;
}
.skel-card i.w80 { width: 80%; } .skel-card i.w60 { width: 60%; } .skel-card i.w40 { width: 40%; }
@keyframes skel { to { background-position: -200% 0; } }

/* ----- bottom nav: floating glass bar + glowing create button ----- */
.bottom-nav {
  background: rgba(255,255,255,.88) !important;
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
}
.bottom-nav-item .nav-icon { transition: transform 220ms var(--ease-pop); }
.bottom-nav-item.active .nav-icon { transform: translateY(-2px) scale(1.18); }
.bottom-nav-create {
  background: var(--grad) !important;
  box-shadow: 0 10px 24px rgba(11,122,90,.45) !important;
  animation: fabGlow 3s ease-in-out infinite;
}
@keyframes fabGlow {
  0%,100% { box-shadow: 0 10px 24px rgba(11,122,90,.45), 0 0 0 0 rgba(25,192,138,.4); }
  50%     { box-shadow: 0 10px 24px rgba(11,122,90,.45), 0 0 0 10px rgba(25,192,138,0); }
}

/* ----- profile menu rows ----- */
.profile-menu-item { transition: transform 160ms ease, box-shadow 160ms ease; }
.profile-menu-item:active { transform: scale(.985); }

/* ----- replies ----- */
.reply-header {
  display: flex; align-items: center; justify-content: space-between;
  margin: 18px 2px 10px;
}
.reply-header strong { font-size: 15px; }
.reply-sort {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--surface-soft); border: 1px solid var(--border); border-radius: 999px;
}
.reply-sort button {
  padding: 6px 13px; border: 0; border-radius: 999px; background: transparent;
  font: inherit; font-size: 13px; font-weight: 700; color: var(--text-secondary);
  transition: background 160ms ease, color 160ms ease;
}
.reply-sort button.on { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-sm); }

.reply-card {
  position: relative;
  padding: 13px 14px 10px;
  margin-bottom: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent, var(--primary));
  border-radius: 18px;
  box-shadow: 0 3px 12px rgba(15,23,42,.04);
}
.reply-card.fresh { animation: replyIn 520ms var(--ease-pop) both; }
@keyframes replyIn {
  0%   { opacity: 0; transform: translateY(14px) scale(.96); background: var(--primary-light); }
  100% { opacity: 1; transform: none; }
}
.reply-body { margin: 8px 0 8px; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.mention { color: var(--primary); font-weight: 800; background: var(--primary-light); padding: 0 5px; border-radius: 6px; }
.op-tag {
  font-size: 10px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; color: #92400e; background: #fef3c7;
}
.reply-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.reply-act {
  padding: 6px 11px; border: 0; border-radius: 999px;
  background: var(--surface-soft); color: var(--text-secondary);
  font: inherit; font-size: 13px; font-weight: 700;
}
.reply-act.danger { color: var(--danger); }
.reply-act:disabled { opacity: .55; }
.reply-empty {
  display: grid; justify-items: center; gap: 4px; padding: 30px 10px; text-align: center; color: var(--text-secondary);
}
.reply-empty span { font-size: 38px; animation: annBob 3s ease-in-out infinite; }
.reply-empty strong { color: var(--text); }
.reply-skeleton { height: 78px; margin-bottom: 10px; border-radius: 18px;
  background: linear-gradient(90deg, var(--border) 25%, var(--surface-soft) 50%, var(--border) 75%);
  background-size: 200% 100%; animation: skel 1.2s linear infinite; }
.reply-skeleton.short { height: 56px; }

.thread-quick { display: flex; gap: 7px; padding: 8px 14px 0; overflow-x: auto; scrollbar-width: none; background: var(--surface); }
.thread-quick::-webkit-scrollbar { display: none; }
.thread-quick button {
  flex: none; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface-soft); color: var(--text); font: inherit; font-size: 13px; font-weight: 700;
}
.thread-footer { position: relative; }
.thread-count { position: absolute; right: 70px; bottom: 22px; font-size: 11px; font-weight: 800; color: var(--text-light); pointer-events: none; }
.thread-count.warn { color: var(--danger); }
#threadReplySend { background: var(--grad); transition: transform 160ms var(--ease-pop), opacity 160ms ease; }
#threadReplySend:disabled { opacity: .5; }

/* ----- dark mode touches ----- */
[data-theme="dark"] .top-header { background: rgba(23,27,31,.82) !important; }
[data-theme="dark"] .bottom-nav { background: rgba(23,27,31,.9) !important; }
[data-theme="dark"] .feed-card { box-shadow: 0 6px 20px rgba(0,0,0,.4) !important; }
[data-theme="dark"] .op-tag { background: rgba(245,158,11,.18); color: #fbbf24; }

@media (prefers-reduced-motion: reduce) {
  .feed-card, .reply-card.fresh, .bottom-nav-create, .location-dot, .reply-empty span { animation: none !important; }
}

/* compact announcement so the feed starts higher */
.ann-strip { padding: 10px 14px 0; }
.ann-track { padding: 2px 2px 18px; margin-bottom: -10px; }
.ann-card { padding: 13px 14px 14px; border-radius: 20px; }
.ann-emoji { width: 38px; height: 38px; font-size: 21px; border-radius: 12px; }
.ann-title { margin: 10px 0 4px; font-size: 17px; }
.ann-body { font-size: 14px; line-height: 1.42; }
.ann-cta { margin-top: 11px; padding: 8px 14px; font-size: 13px; }
.ann-dots { padding-top: 0; margin-top: -4px; }

/* tighter filter area */
.feed-tabs .feed-tab { padding-top: 11px; padding-bottom: 11px; }
.feed-subtabs { margin-top: 8px; margin-bottom: 8px; }
.category-scroll { margin-top: 4px; margin-bottom: 8px; }

[data-theme="dark"] .search-container input,
[data-theme="dark"] .karma-pill { background: transparent !important; color: var(--text); }

/* =========================================================
   V30: POST MENU FIX + JODEL-STYLE THREAD SCREEN
   ========================================================= */

/* --- the "..." menu must float above the next cards --- */
.feed-card { animation-fill-mode: backwards !important; }
.feed-card:has(.post-menu-popover:not(.hidden)),
.reply-card:has(.post-menu-popover:not(.hidden)) { position: relative; z-index: 60; }
.post-menu-popover {
  z-index: 70;
  min-width: 190px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 14px 34px rgba(15,23,42,.22);
  animation: menuPop 160ms var(--ease-pop);
  transform-origin: top right;
}
@keyframes menuPop { from { opacity: 0; transform: scale(.9) translateY(-6px); } to { opacity: 1; transform: none; } }
.post-menu-popover button {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 11px 12px;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  border-radius: 10px;
  background: transparent !important;
  color: var(--text) !important;
  font: inherit; font-size: 14px; font-weight: 600;
  text-align: left;
  white-space: nowrap;
}
.post-menu-popover button:active { background: var(--surface-soft) !important; }
.post-menu-popover button.danger { color: var(--danger) !important; }
.post-menu-popover button:disabled { opacity: .5; }

/* --- thread screen: one colour, full-bleed blocks --- */
.thread-screen { --thread-color: var(--primary); background: var(--surface); }
.thread-header { border-bottom: 0; background: var(--surface); }
.thread-icon-btn { border: 0; background: var(--surface-soft); border-radius: 50%; width: 42px; height: 42px; }
.thread-body { padding: 0; background: var(--surface); }
.thread-replies { margin: 0; gap: 0; }

/* the original post */
.thread-body > .feed-card:not(.media-card) {
  position: relative;
  margin: 0;
  padding: 18px 72px 18px 18px;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--thread-color) !important;
  color: #fff;
  animation: none !important;
  border-top: 3px solid rgba(0,0,0,.08) !important;
}
.thread-body > .feed-card:not(.media-card)::before { display: none !important; }
.thread-body > .feed-card:not(.media-card) .author-name,
.thread-body > .feed-card:not(.media-card) .post-meta-sub { color: #fff !important; }
.thread-body > .feed-card:not(.media-card) .post-meta-sub { opacity: .9; }
.thread-body > .feed-card:not(.media-card) .card-options-trigger { color: #fff; }
.thread-body > .feed-card:not(.media-card) .post-title {
  margin: 12px 0 14px;
  font-size: 21px; line-height: 1.38; font-weight: 500; color: #fff;
}
.thread-body > .feed-card:not(.media-card) .tag-chip {
  background: rgba(255,255,255,.2) !important; color: #fff !important; border: 0;
}
.thread-body > .feed-card:not(.media-card) .interaction-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.thread-body > .feed-card:not(.media-card) .replies-counter { color: #fff; background: rgba(255,255,255,.18); border-radius: 999px; padding: 7px 12px; }
.thread-body > .feed-card:not(.media-card) .reaction-bar { background: rgba(255,255,255,.18); border-color: transparent; }

/* vertical vote arrows on the right edge, like Jodel */
.thread-body > .feed-card:not(.media-card) .vote-pill {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  flex-direction: column; width: 54px; height: auto;
  padding: 2px 0; gap: 0; background: transparent; border: 0; box-shadow: none;
}
.thread-body .feed-card:not(.media-card) .vote-pill .vote-btn { width: 44px; height: 34px; font-size: 20px; color: rgba(255,255,255,.7); }
.thread-body .feed-card:not(.media-card) .vote-pill .vote-btn.on-up,
.thread-body .feed-card:not(.media-card) .vote-pill .vote-btn.on-down { color: #fff; }
.thread-body .feed-card:not(.media-card) .vote-pill .vote-score { color: #fff; font-size: 17px; }

/* replies: same colour, white dividers */
.thread-replies .reply-card {
  position: relative;
  margin: 0;
  padding: 14px 72px 14px 18px;
  border: 0;
  border-top: 4px solid var(--surface);
  border-radius: 0;
  box-shadow: none;
  background: var(--thread-color);
  color: #fff;
}
.thread-replies .reply-top { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; flex-wrap: wrap; }
.alias-pill, .op-pill, .you-pill {
  display: inline-flex; align-items: center;
  padding: 4px 11px; border-radius: 999px;
  font-size: 13px; font-weight: 800; line-height: 1;
}
.alias-pill { background: rgba(0,0,0,.2); color: #fff; }
.op-pill { border: 2px solid #fff; color: #fff; padding: 2px 10px; }
.you-pill { background: #fff; color: var(--thread-color); }
.thread-replies .reply-time { font-size: 13px; opacity: .85; color: #fff; margin-left: 1px; }
.reply-menu-wrap { margin-left: auto; position: relative; }
.reply-more { border: 0; background: transparent; color: #fff; font-size: 18px; letter-spacing: 1px; padding: 0 2px; }
.thread-replies .reply-body { margin: 0 0 12px; font-size: 18px; line-height: 1.4; font-weight: 500; color: #fff; }
.reply-quote {
  margin: 0 0 8px; padding: 4px 0 4px 12px;
  border-left: 4px solid rgba(255,255,255,.45);
  font-size: 15px; opacity: .92; color: #fff;
}
.reply-quote b { display: block; font-size: 12px; opacity: .85; margin-bottom: 1px; }
.thread-replies .mention { background: rgba(0,0,0,.2); color: #fff; }
.thread-replies .reply-act {
  background: rgba(255,255,255,.2); color: #fff; padding: 8px 14px; font-size: 14px;
}
.thread-replies .reply-vote-rail {
  position: absolute; top: 8px; right: 8px; bottom: 8px; width: 54px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.thread-replies .reply-vote-rail .vote-btn { width: 44px; height: 32px; font-size: 19px; color: rgba(255,255,255,.65); border: 0; background: transparent; }
.thread-replies .reply-vote-rail .vote-btn.on-up,
.thread-replies .reply-vote-rail .vote-btn.on-down { color: #fff; }
.thread-replies .reply-vote-rail .vote-score { color: #fff; font-size: 16px; font-weight: 700; }
.thread-replies .reply-card.fresh { animation: replyIn 520ms var(--ease-pop) both; }

/* sort bar + private-chat link sit on white between the blocks */
.thread-replies .reply-header { margin: 0; padding: 12px 16px; background: var(--surface); }
.thread-replies .chat-link { margin: 12px 16px; }
.thread-replies .reply-empty { background: var(--surface); }

/* bottom: Jodel-like input with underline + sheet */
.thread-quick { padding-top: 6px; }
.thread-footer { border-top: 0; padding: 6px 14px calc(8px + env(safe-area-inset-bottom, 0px)); }
.thread-footer input {
  border: 0; border-bottom: 2px solid var(--primary); border-radius: 0;
  background: transparent; padding: 12px 4px; font-size: 17px;
}
.thread-footer input:focus { outline: none; }
.thread-guidelines-toggle { border-top: 0; font-weight: 500; color: var(--text-light); }

/* scroll-to-top bubble */
.thread-top-btn {
  position: absolute; right: 16px; bottom: 150px;
  width: 52px; height: 52px; border: 0; border-radius: 50%;
  background: #fff; color: #111; font-size: 24px; font-weight: 800;
  box-shadow: 0 8px 22px rgba(0,0,0,.25);
  opacity: 0; transform: scale(.7); pointer-events: none;
  transition: opacity 180ms ease, transform 220ms var(--ease-pop);
  z-index: 5;
}
.thread-top-btn.show { opacity: 1; transform: none; pointer-events: auto; }

[data-theme="dark"] .thread-icon-btn { background: var(--surface-soft); }
[data-theme="dark"] .thread-top-btn { background: #fff; color: #111; }
.thread-replies .chat-link { display: block; box-sizing: border-box; width: calc(100% - 32px); }

/* =========================================================
   V31: polls, reply photos/reactions, strips, voices, admin tabs
   ========================================================= */

/* ----- poll composer ----- */
.poll-toggle {
  margin: 10px 0 0; padding: 10px 14px; border: 1.5px dashed var(--border); border-radius: 12px;
  background: transparent; color: var(--primary); font: inherit; font-weight: 700; font-size: 14px; width: 100%;
}
.poll-box { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.poll-input {
  width: 100%; padding: 11px 13px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface-soft); color: var(--text); font: inherit; font-size: 15px;
}
.poll-more { align-self: flex-start; border: 0; background: transparent; color: var(--primary); font: inherit; font-weight: 700; }

/* ----- poll in a post ----- */
.poll-block { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 12px; }
.poll-row {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; border-radius: 14px; border: 1.5px solid var(--border);
  background: var(--surface-soft); color: var(--text); font: inherit; font-size: 15px; font-weight: 600; text-align: left; width: 100%;
  transition: transform 140ms ease, border-color 140ms ease;
}
button.poll-row:active { transform: scale(.98); border-color: var(--primary); }
.poll-row .poll-label, .poll-row b { position: relative; z-index: 1; }
.poll-fill { position: absolute; inset: 0 auto 0 0; background: var(--primary-light); transition: width 600ms var(--ease-pop, ease); }
.poll-row.mine { border-color: var(--primary); }
.poll-row.mine .poll-fill { background: rgba(25,192,138,.28); }
.poll-total { color: var(--text-light); font-size: 12px; }
.thread-body > .feed-card:not(.media-card) .poll-row { background: rgba(255,255,255,.16); border-color: transparent; color: #fff; }
.thread-body > .feed-card:not(.media-card) .poll-fill { background: rgba(255,255,255,.28); }
.thread-body > .feed-card:not(.media-card) .poll-total { color: rgba(255,255,255,.85); }

/* ----- reply photo + reactions ----- */
.reply-photo { display: block; width: 100%; max-height: 360px; object-fit: cover; border-radius: 14px; }
.thread-replies .hold-to-view { min-height: 0; border-radius: 14px; margin: 0 0 10px; overflow: hidden; }
.reply-reacts { display: flex; gap: 6px; margin: 0 0 10px; flex-wrap: wrap; }
.rr {
  display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border: 0; border-radius: 999px;
  background: rgba(255,255,255,.18); color: #fff; font: inherit; font-size: 14px;
  transition: transform 160ms var(--ease-pop, ease), background 160ms ease;
}
.rr b { font-size: 12px; }
.rr.on { background: #fff; color: #111; transform: scale(1.06); }
.thread-photo-preview { padding: 6px 14px 0; background: var(--surface); }
.thread-photo-preview .photo-thumb { position: relative; display: inline-block; }
.thread-photo-preview img { width: 76px; height: 76px; object-fit: cover; border-radius: 12px; display: block; }
.thread-photo-preview button {
  position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border: 0; border-radius: 50%;
  background: #111; color: #fff; font-size: 15px; line-height: 1;
}
.thread-footer .thread-photo-btn { width: 40px; height: 40px; background: var(--surface-soft); font-size: 19px; }

/* ----- home strips ----- */
.home-strips { padding: 4px 14px 0; }
.prompt-card {
  display: flex; align-items: center; gap: 12px; padding: 13px 14px; margin-bottom: 12px;
  border-radius: 20px; background: linear-gradient(135deg, #fff7e6, #ffe8cc); color: #7c2d12;
  box-shadow: 0 6px 18px rgba(234,88,12,.15); animation: cardIn 460ms var(--ease-pop, ease) both;
}
.prompt-card .prompt-emoji { font-size: 28px; }
.prompt-card div { flex: 1; min-width: 0; }
.prompt-card small { display: block; font-weight: 800; letter-spacing: .5px; font-size: 10.5px; opacity: .75; }
.prompt-card strong { display: block; font-size: 15px; line-height: 1.3; }
.prompt-card button {
  flex: none; padding: 9px 15px; border: 0; border-radius: 999px; background: #ea580c; color: #fff; font: inherit; font-weight: 800; font-size: 13px;
}
.trend-head { font-weight: 800; font-size: 14px; margin: 4px 2px 8px; color: var(--text); }
.trend-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 12px; scrollbar-width: none; scroll-snap-type: x proximity; }
.trend-row::-webkit-scrollbar { display: none; }
.trend-card {
  flex: 0 0 62%; max-width: 250px; scroll-snap-align: start; text-align: left;
  display: flex; flex-direction: column; justify-content: space-between; gap: 8px; min-height: 96px;
  padding: 13px 14px; border: 0; border-radius: 18px; color: #fff; font: inherit; font-weight: 600; font-size: 14px; line-height: 1.35;
  background: linear-gradient(145deg, var(--c), rgba(0,0,0,.35)), var(--c);
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
.trend-card small { opacity: .9; font-weight: 700; }

/* ----- top voices ----- */
.voices-card { margin: 14px 0; padding: 16px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.voices-card h3 { margin: 0 0 2px; font-size: 16px; }
.voices-card p { margin: 0 0 10px; font-size: 12.5px; color: var(--text-secondary); }
.voice-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; }
.voice-row span { width: 28px; font-size: 18px; }
.voice-row strong { flex: 1; font-size: 14px; }
.voice-row b { font-size: 13px; color: var(--primary); }
.voice-row.me { background: var(--primary-light); }

/* ----- recovery ----- */
.recovery-code {
  margin: 14px 0; padding: 18px 10px; text-align: center; letter-spacing: 2px;
  font: 800 22px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--primary-dark);
  background: var(--primary-light); border: 2px dashed var(--primary); border-radius: 16px; user-select: all; -webkit-user-select: all;
  animation: cardIn 400ms var(--ease-pop, ease) both;
}
.adm-publish.alt { background: var(--surface-soft); color: var(--text); box-shadow: none; border: 1.5px solid var(--border); }

/* ----- admin tabs + tiles ----- */
.adm-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: none; }
.adm-tabs::-webkit-scrollbar { display: none; }
.adm-tabs button {
  flex: none; padding: 8px 13px; border: 1.5px solid var(--border); border-radius: 999px;
  background: var(--surface-soft); color: var(--text); font: inherit; font-weight: 700; font-size: 13px;
}
.adm-tabs button.on { border-color: var(--primary); background: var(--primary-light); color: var(--primary-dark); }
.adm-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.adm-tile { display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: 16px; background: var(--surface-soft); border: 1px solid var(--border); }
.adm-tile b { font-size: 26px; color: var(--primary); }
.adm-tile span { font-size: 12.5px; color: var(--text-secondary); font-weight: 600; }
.adm-live-row button.ok { color: var(--primary); border-color: var(--primary); }
.adm-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.adm-chips span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 6px 6px 12px; border-radius: 999px; background: var(--surface-soft); border: 1px solid var(--border); font-size: 13px; font-weight: 600; }
.adm-chips button { width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--border); color: var(--text); line-height: 1; }
#admTabOther { display: flex; flex-direction: column; gap: 8px; }
#admTabOther .adm-row input { flex: 1; }

[data-theme="dark"] .prompt-card { background: linear-gradient(135deg, #3a2a14, #4a2f12); color: #fed7aa; }
[data-theme="dark"] .prompt-card button { background: #fb923c; color: #1c1917; }
.voices-card { margin: 14px 18px; }
.trend-row { padding-bottom: 16px; margin-bottom: -4px; }

/* =========================================================
   V32: photo posts same size as text posts + thread vibe
   ========================================================= */
.feed-card.has-media { position: relative; overflow: hidden; isolation: isolate; background: #15191c !important; color: #fff; }
.feed-card.has-media > *:not(.media-bg) { position: relative; z-index: 1; transition: opacity 160ms ease; }
.media-bg { position: absolute !important; inset: 0; z-index: 0; overflow: hidden; background: #15191c; }
.media-bg img, .media-bg video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: blur(22px) brightness(.5) saturate(1.1); transform: scale(1.18);
  transition: filter 180ms ease, transform 180ms ease; pointer-events: none;
}
.feed-card.has-media.holding .media-bg img,
.feed-card.has-media.holding .media-bg video { filter: none; transform: scale(1); }
.feed-card.has-media.holding > *:not(.media-bg) { opacity: 0; }
.feed-card.has-media .author-name, .feed-card.has-media .post-meta-sub,
.feed-card.has-media .post-title, .feed-card.has-media .replies-counter,
.feed-card.has-media .card-options-trigger { color: #fff !important; }
.feed-card.has-media .tag-chip { background: rgba(255,255,255,.2) !important; color: #fff !important; }
.feed-card.has-media .tag-chip.hold-chip { background: #fff !important; color: #111 !important; font-weight: 800; }
.feed-card.has-media .vote-pill, .feed-card.has-media .reaction-bar { background: rgba(255,255,255,.16) !important; border-color: transparent !important; }
.feed-card.has-media .vote-btn, .feed-card.has-media .vote-score { color: #fff !important; }
.feed-card.has-media::before { z-index: 2; }
.hold-chip { animation: holdPulse 2.4s ease-in-out infinite; }
@keyframes holdPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.feed-card.has-media, .feed-card.has-media * { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* thread: OP and replies share one look */
.thread-body .op-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; }
.thread-body .op-top .reply-time { color: #fff; opacity: .9; font-size: 13px; }
.thread-body .op-top .card-options-trigger { color: #fff; background: transparent; border: 0; font-size: 18px; letter-spacing: 1px; padding: 0 2px; }
.thread-body > .feed-card:not(.media-card) { padding: 16px 72px 14px 18px; }
.thread-body > .feed-card:not(.media-card) .post-title { font-size: 19px; line-height: 1.4; font-weight: 500; margin: 0 0 12px; }
.thread-replies .reply-body { font-size: 19px; line-height: 1.4; }
.thread-body .hold-to-view { min-height: 0; margin: 0 0 12px; border-radius: 14px; overflow: hidden; }
.thread-body .hold-to-view img, .thread-body .hold-to-view video { width: 100%; max-height: 380px; object-fit: cover; display: block; border-radius: 14px; }

/* reply reactions: compact, show only used ones + a small react button */
.reply-reacts .rr { display: none; }
.reply-reacts .rr.show, .reply-reacts .rr.add, .reply-reacts.open .rr { display: inline-flex; }
.reply-reacts .rr.add { background: rgba(255,255,255,.14); font-size: 13px; font-weight: 800; padding: 5px 10px; }
.reply-reacts { margin-bottom: 8px; }

/* quick chips only while typing; camera sits at the right like Jodel */
.thread-quick { display: none; }
.thread-screen:has(#threadReplyInput:focus) .thread-quick { display: flex; }
.thread-footer .thread-photo-btn { background: transparent; width: 42px; height: 42px; font-size: 22px; filter: grayscale(1) opacity(.7); }

/* V32b: keep OP header on one line */
.thread-body .op-top{flex-wrap:nowrap;min-width:0}
.thread-body .op-top .reply-time{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto}
.thread-body .op-top .reply-menu-wrap{flex:0 0 auto;margin-left:auto}

/* =========================================================
   V33: Jodel look — header, tabs, colour cards, nav, Top 10
   ========================================================= */
:root { --jd-bg: #f1f1f4; }
body, .main-content { background: var(--jd-bg); }
[data-theme="dark"] body, [data-theme="dark"] .main-content { background: #121417; }

/* header: Upgrade · location · karma */
.top-header { background: #fff !important; backdrop-filter: none; border-bottom: 0 !important; }
.header-inner { position: relative; min-height: 64px; padding: 12px 14px; }
.upgrade-pill { background: #f77f0e !important; color: #fff !important; border-radius: 999px !important; padding: 10px 16px !important; font-weight: 800 !important; font-size: 14px !important; box-shadow: none !important; }
.location-pill { position: absolute; left: 50%; transform: translateX(-50%); background: transparent !important; border: 0 !important; box-shadow: none !important; width: auto !important; max-width: 46%; padding: 0 !important; font-weight: 800; font-size: 16px; color: #3a3a3a !important; display: flex; align-items: center; gap: 6px; }
.location-pill .location-dot { width: 14px; height: 14px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #f77f0e !important; box-shadow: none !important; animation: none !important; }
.location-pill span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.location-pill::after { content: ""; width: 7px; height: 7px; border-right: 2.5px solid #8a8a8a; border-bottom: 2.5px solid #8a8a8a; transform: rotate(45deg) translateY(-2px); margin-left: 2px; }
.header-actions { margin-left: auto; }
.karma-pill { background: transparent !important; border: 0 !important; box-shadow: none !important; text-align: right; }
.karma-pill strong { color: #3a3a3a !important; font-size: 17px; font-weight: 700; }
.karma-pill small { color: #f77f0e !important; font-weight: 800; letter-spacing: .02em; }

/* Top 10 / Home tabs */
.feed-tabs { background: #fff !important; border-bottom: 0 !important; padding: 0 !important; display: flex; gap: 0; margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.feed-tabs .feed-tab { flex: 1; background: transparent !important; border: 0 !important; border-bottom: 4px solid transparent !important; border-radius: 0 !important; color: #8c8c8c !important; font-size: 21px !important; font-weight: 700 !important; padding: 14px 0 12px !important; box-shadow: none !important; }
.feed-tabs .feed-tab.active { color: #1d1d1f !important; border-bottom-color: #f77f0e !important; }

/* grey filter chips + search toggle */
.feed-subtabs { display: flex !important; align-items: center; gap: 10px; padding: 14px 14px 6px !important; background: var(--jd-bg); overflow-x: auto; }
.subtab { background: #e4e4e8 !important; color: #8a8a8f !important; border: 0 !important; border-radius: 999px !important; font-weight: 700 !important; font-size: 15px !important; padding: 9px 16px !important; box-shadow: none !important; flex: 0 0 auto; }
.subtab.active { background: #d6d6db !important; color: #555 !important; box-shadow: none !important; }
.search-toggle { margin-left: auto; flex: 0 0 auto; border: 0; background: transparent; font-weight: 800; font-size: 15px; color: #555; }
.search-container { display: none !important; margin: 4px 14px 8px; }
.search-container.open { display: flex !important; }
.category-scroll { padding: 4px 14px 8px !important; background: var(--jd-bg); }
.category-chip { background: #e4e4e8 !important; color: #6d6d73 !important; border: 0 !important; box-shadow: none !important; font-weight: 700; }
.category-chip.active { background: #f77f0e !important; color: #fff !important; }
.welcome-section:not(:has(#locationError:not(.hidden))):not(:has(#retryLocation:not(.hidden))) { display: none !important; }

/* Top 10 mode */
.top-heading { padding: 18px 16px 8px; font-weight: 800; font-size: 20px; background: linear-gradient(90deg,#a866e8,#338df0); -webkit-background-clip: text; background-clip: text; color: transparent; }
#homePage.top-mode .category-scroll, #homePage.top-mode #homeStrips { display: none !important; }

/* feed */
.feed-container { padding: 8px 10px 150px !important; background: var(--jd-bg); }
.feed-card.jd { position: relative; background: var(--accent) !important; color: #fff; border: 0 !important; border-left: 0 !important; border-radius: 18px !important; padding: 14px 16px 12px !important; margin: 0 0 12px !important; box-shadow: 0 3px 8px rgba(0,0,0,.14) !important; min-height: 190px; display: flex; flex-direction: column; overflow: visible; animation: none !important; }
.feed-card.jd::before, .feed-card.jd::after { display: none !important; }
.feed-card.jd.has-media { overflow: hidden; background: #6f6a66 !important; }
.feed-card.jd .jd-top { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.feed-card.jd .alias-pill { background: rgba(0,0,0,.2); color: #fff; font-weight: 800; font-size: 14px; padding: 4px 11px; border-radius: 999px; flex: 0 0 auto; }
.feed-card.jd .jd-where { display: flex; align-items: center; gap: 5px; font-size: 14px; opacity: .92; min-width: 0; white-space: nowrap; }
.feed-card.jd .jd-where i { font-style: normal; opacity: .8; }
.feed-card.jd .jd-ic { width: 16px; height: 16px; flex: 0 0 auto; }
.feed-card.jd .jd-ic.cam { margin-left: 4px; opacity: .95; }
.feed-card.jd .jd-flag { font-size: 12px; font-weight: 800; background: rgba(255,255,255,.25); border-radius: 999px; padding: 2px 8px; }
.feed-card.jd .post-menu-wrap { margin-left: auto; position: relative; }
.feed-card.jd .card-options-trigger { color: #fff !important; background: transparent !important; border: 0 !important; font-size: 18px; letter-spacing: 1px; padding: 4px 4px; }
.feed-card.jd .jd-main { padding: 14px 58px 6px 0; flex: 1; }
.feed-card.jd .post-title { color: #fff !important; font-size: 20px; line-height: 1.4; font-weight: 400; margin: 0 0 8px; word-break: break-word; }
.feed-card.jd .jd-tag { font-weight: 800; font-size: 20px; margin-top: 8px; }
.feed-card.jd .jd-extra { font-weight: 700; margin: 4px 0; }
.feed-card.jd .jd-foot { display: flex; align-items: center; gap: 14px; padding-top: 6px; }
.feed-card.jd .jd-count { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: #fff; font-size: 14px; padding: 0; }
.feed-card.jd .jd-count b { font-weight: 800; }
.feed-card.jd .jd-ic.big { width: 24px; height: 24px; }

/* vote column on the right: chevron, count, chevron */
.feed-card.jd .jd-vote { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: transparent !important; border: 0 !important; box-shadow: none !important; flex-direction: column; display: flex; align-items: center; gap: 2px; padding: 0 !important; width: 44px; }
.feed-card.jd .jd-vote .vote-btn { width: 44px; height: 34px; font-size: 0; position: relative; background: transparent !important; border: 0 !important; color: #fff !important; opacity: .55; }
.feed-card.jd .jd-vote .vote-btn::before { content: ""; position: absolute; left: 50%; top: 50%; width: 15px; height: 15px; border-left: 4px solid currentColor; border-top: 4px solid currentColor; border-radius: 2px; transform: translate(-50%, -30%) rotate(45deg); }
.feed-card.jd .jd-vote .vote-btn[data-action="down"]::before { transform: translate(-50%, -70%) rotate(225deg); }
.feed-card.jd .jd-vote .vote-btn.on-up, .feed-card.jd .jd-vote .vote-btn.on-down { opacity: 1; }
.feed-card.jd .jd-vote .vote-score { color: #fff !important; font-size: 21px; font-weight: 400; }

/* photo posts: same size, blurred with "Hold to view" */
.feed-card.jd .hold-center { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; font-size: 22px; font-weight: 400; color: #fff; pointer-events: none; text-shadow: 0 1px 8px rgba(0,0,0,.25); z-index: 1; }
.feed-card.jd.has-media .jd-main { visibility: hidden; height: 0; padding: 0; flex: 1; }
.feed-card.jd.has-media .media-bg img, .feed-card.jd.has-media .media-bg video { filter: blur(26px) brightness(.9) saturate(.8); }
.feed-card.jd.has-media.holding .media-bg img, .feed-card.jd.has-media.holding .media-bg video { filter: none; }

/* Top 10 ribbon under each card */
.feed-card.jd.ranked { margin-bottom: 0 !important; z-index: 2; }
.jd-rank { position: absolute; left: 14px; right: 14px; top: 100%; height: 44px; margin-top: -8px; background: var(--accent); filter: brightness(.82); border-radius: 0 0 16px 16px; display: flex; align-items: flex-end; justify-content: space-between; padding: 0 14px 7px; z-index: -1; color: #fff; font-weight: 800; font-size: 14px; }
.jd-rank .medal { width: 30px; height: 30px; border-radius: 50%; background: #fff; color: var(--accent); display: grid; place-items: center; font-weight: 900; margin-bottom: -2px; }
.feed-card.jd.ranked + .feed-card.jd.ranked { margin-top: 42px; }
.feed-card.jd.ranked:first-child { margin-top: 0; }
.feed-container:has(.ranked) .feed-card.jd.ranked:last-child { margin-bottom: 56px !important; }

/* floating + */
.fab-create { position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%); width: 70px; height: 70px; border-radius: 50%; border: 5px solid rgba(255,255,255,.55); background: rgba(150,90,120,.55); color: #fff; font-size: 38px; line-height: 1; z-index: 90; backdrop-filter: blur(6px); box-shadow: 0 6px 18px rgba(0,0,0,.18); padding: 0 0 4px; }
.fab-create:active { transform: translateX(-50%) scale(.94); }

/* bottom nav */
.bottom-nav { height: 78px !important; background: #fff !important; border-top: 1px solid #ececf0 !important; backdrop-filter: none !important; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)) !important; justify-content: space-between !important; }
.bottom-nav-item { flex: 1; width: auto !important; font-size: 11.5px !important; font-weight: 700 !important; color: #3a3a3a !important; gap: 4px !important; }
.bottom-nav-item .nav-icon { display: grid; place-items: center; height: 36px; min-width: 36px; padding: 0 !important; transform: none !important; background: transparent !important; }
.bottom-nav-item .ni { width: 26px; height: 26px; }
.bottom-nav-item.active { color: #111 !important; font-weight: 800 !important; }
.bottom-nav-item.active .nav-icon { background: #f77f0e !important; color: #fff; border-radius: 999px !important; min-width: 74px; height: 38px; }
.bottom-nav-item .notification-badge { top: 0; right: 22%; }
.feed-tabs .feed-tab::before, .feed-tabs .feed-tab::after, .feed-tabs::after { display: none !important; content: none !important; }
.feed-subtabs.hidden { display: none !important; }
.feed-card.jd.ranked + .feed-card.jd.ranked { margin-top: 44px !important; }
.feed-card.jd.ranked { margin-bottom: 0 !important; }
.feed-card.jd .jd-rank { position: absolute !important; }
.feed-card.jd .jd-vote { position: absolute !important; }
.feed-card.jd .hold-center { position: absolute !important; }
.feed-card.jd.has-media { overflow: visible !important; }
.feed-card.jd .media-bg { border-radius: 18px; }
.feed-card.jd:has(.post-menu-popover:not(.hidden)) { z-index: 95 !important; }
.fab-create { z-index: 60; }
.op-pill { white-space: nowrap; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; }

/* V33b: thread photo post = same full-bleed blurred block, Jodel style */
.thread-body > .feed-card.has-media { background: var(--thread-color) !important; min-height: 260px; overflow: hidden; }
.thread-body > .feed-card.has-media .media-bg img, .thread-body > .feed-card.has-media .media-bg video { filter: blur(26px) brightness(.85) saturate(.8); }
.thread-body > .feed-card.has-media.holding .media-bg img, .thread-body > .feed-card.has-media.holding .media-bg video { filter: none; }
.thread-body .thread-hold { position: absolute !important; left: 0; right: 0; top: 56%; transform: translateY(-50%); text-align: center; font-size: 22px; color: #fff; pointer-events: none; text-shadow: 0 1px 8px rgba(0,0,0,.3); z-index: 1; }
.thread-body .thread-hold { position: relative !important; top: auto; transform: none; padding: 26px 0 30px; }
.thread-body > .feed-card.has-media .reaction-bar { display: none; }
.thread-body > .feed-card.has-media { min-height: 310px; }

/* =========================================================
   V34: Liquid-glass look — frosted panels over a soft city glow
   ========================================================= */
:root {
  --ink: #14212b; --ink-2: #3d5260;
  --glass: rgba(255,255,255,.42); --glass-strong: rgba(255,255,255,.62); --glass-line: rgba(255,255,255,.75);
  --glass-shadow: 0 10px 28px rgba(28,64,84,.14), inset 0 1px 0 rgba(255,255,255,.9);
}
html { background: #d6e8ea; }
body {
  background:
    radial-gradient(55% 32% at 12% 6%, #f7caa6 0, transparent 72%),
    radial-gradient(50% 34% at 92% 22%, #86cfd6 0, transparent 72%),
    radial-gradient(70% 38% at 25% 58%, #a6d5dc 0, transparent 72%),
    radial-gradient(60% 36% at 85% 88%, #f2b79b 0, transparent 72%),
    radial-gradient(40% 25% at 50% 40%, #fbe7cf 0, transparent 70%),
    #d6e8ea !important;
  background-attachment: fixed !important;
  color: var(--ink);
}
.main-content, .feed-container, .feed-subtabs, .category-scroll, .home-strips, .search-container { background: transparent !important; }
[data-theme="dark"] html { background: #0c1a22; }
[data-theme="dark"] body {
  background:
    radial-gradient(55% 32% at 12% 6%, #5a3a3a 0, transparent 72%),
    radial-gradient(50% 34% at 92% 22%, #1d5a66 0, transparent 72%),
    radial-gradient(70% 38% at 25% 58%, #14424c 0, transparent 72%),
    radial-gradient(60% 36% at 85% 88%, #5a3030 0, transparent 72%), #0c1a22 !important;
  background-attachment: fixed !important; color: #e8f1f4;
}

/* header */
.top-header { background: var(--glass) !important; backdrop-filter: blur(24px) saturate(1.6) !important; -webkit-backdrop-filter: blur(24px) saturate(1.6) !important; border-bottom: 1px solid var(--glass-line) !important; }
.header-inner { gap: 10px; }
.wordmark { font: 800 26px/1 Inter, sans-serif; letter-spacing: -.04em; color: var(--ink); flex: 0 0 auto; }
.wordmark b { background: linear-gradient(120deg, #0b9aa6, #f26a4b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.location-pill { position: static !important; transform: none !important; flex: 1 1 auto; min-width: 0; max-width: none !important; justify-content: space-between; background: var(--glass-strong) !important; border: 1px solid var(--glass-line) !important; border-radius: 999px !important; padding: 10px 14px !important; box-shadow: var(--glass-shadow) !important; font-weight: 600; font-size: 15px; color: var(--ink) !important; }
.location-pill .location-dot { display: none; }
.location-pill span:last-child { flex: 1; text-align: left; }
.upgrade-pill { background: transparent !important; color: var(--ink) !important; padding: 0 !important; box-shadow: none !important; display: flex; flex-direction: column; align-items: center; gap: 2px; border-radius: 0 !important; }
.upgrade-pill.hidden { display: none !important; }
.upgrade-pill small { font-size: 11px; font-weight: 600; }
.karma-pill strong { color: var(--ink) !important; } .karma-pill small { color: #e0553a !important; }
[data-theme="dark"] .wordmark, [data-theme="dark"] .location-pill, [data-theme="dark"] .upgrade-pill, [data-theme="dark"] .karma-pill strong { color: #eef7fa !important; }

/* tabs + chips */
.feed-tabs { background: var(--glass) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--glass-line) !important; }
.feed-tabs .feed-tab { color: var(--ink-2) !important; font-size: 19px !important; font-weight: 700 !important; }
.feed-tabs .feed-tab.active { color: var(--ink) !important; border-bottom: 3px solid rgba(255,255,255,.95) !important; }
.subtab, .category-chip, .search-toggle, .search-container {
  background: var(--glass) !important; border: 1px solid var(--glass-line) !important; color: var(--ink) !important;
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); box-shadow: var(--glass-shadow) !important;
}
.subtab.active, .category-chip.active { background: rgba(60,80,95,.22) !important; color: var(--ink) !important; }
.search-toggle { border-radius: 999px; padding: 9px 16px; margin-left: auto; font-weight: 700; }
.location-card, .welcome-section .location-card { background: var(--glass) !important; border: 1px solid var(--glass-line) !important; backdrop-filter: blur(18px); box-shadow: var(--glass-shadow) !important; color: var(--ink); }
.top-heading { background: none; color: var(--ink); -webkit-text-fill-color: var(--ink); }

/* strips */
.prompt-card { background: linear-gradient(135deg, rgba(255,170,160,.55), rgba(255,255,255,.35)) !important; color: var(--ink) !important; border: 1px solid var(--glass-line); backdrop-filter: blur(18px); box-shadow: var(--glass-shadow); }
.prompt-card button { background: #e8806e !important; color: #fff !important; box-shadow: 0 6px 14px rgba(232,128,110,.4); }
.trend-card { background: var(--glass) !important; color: var(--ink) !important; border: 1px solid var(--glass-line); backdrop-filter: blur(18px); box-shadow: var(--glass-shadow); }
.home-strips h3, .home-strips .strip-title { color: var(--ink-2); }

/* feed cards: tinted glass */
.feed-card.jd {
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 34%, rgba(255,255,255,.62)), color-mix(in srgb, var(--accent) 12%, rgba(255,255,255,.28))) !important;
  color: var(--ink); border: 1px solid var(--glass-line) !important; border-radius: 26px !important;
  backdrop-filter: blur(22px) saturate(1.6); -webkit-backdrop-filter: blur(22px) saturate(1.6);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--accent) 22%, rgba(20,40,60,.10)), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.3) !important;
}
.feed-card.jd::before { display: block !important; content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(120deg, rgba(255,255,255,.55) 0, transparent 38%); pointer-events: none; }
.feed-card.jd .alias-pill { background: rgba(255,255,255,.65); color: var(--ink); border: 1px solid var(--glass-line); }
.feed-card.jd .post-title, .feed-card.jd .jd-count, .feed-card.jd .jd-where, .feed-card.jd .card-options-trigger { color: var(--ink) !important; }
.feed-card.jd .jd-tag { color: color-mix(in srgb, var(--accent) 62%, #0b1a24); }
.feed-card.jd .jd-vote .vote-btn, .feed-card.jd .jd-vote .vote-score { color: var(--ink) !important; }
.feed-card.jd .jd-vote .vote-btn { opacity: .5; }
.feed-card.jd .jd-vote .vote-btn.on-up { color: #0b9a6a !important; opacity: 1; }
.feed-card.jd .jd-vote .vote-btn.on-down { color: #d1432f !important; opacity: 1; }
.feed-card.jd .jd-flag { background: rgba(255,255,255,.6); color: var(--ink); }
/* photo posts keep light-on-photo text */
.feed-card.jd.has-media, .feed-card.jd.has-media .post-title, .feed-card.jd.has-media .jd-count, .feed-card.jd.has-media .jd-where, .feed-card.jd.has-media .card-options-trigger, .feed-card.jd.has-media .jd-vote .vote-btn, .feed-card.jd.has-media .jd-vote .vote-score { color: #fff !important; }
.feed-card.jd.has-media .alias-pill { background: rgba(255,255,255,.28); color: #fff; }
.feed-card.jd.has-media::before { display: none !important; }
/* Top 10 ribbon */
.jd-rank { background: color-mix(in srgb, var(--accent) 45%, rgba(255,255,255,.5)) !important; filter: none !important; color: var(--ink); backdrop-filter: blur(14px); border: 1px solid var(--glass-line); }
.jd-rank .medal { background: rgba(255,255,255,.9); color: var(--ink); }
[data-theme="dark"] .feed-card.jd { color: #f1f8fb; background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 45%, rgba(10,20,28,.55)), rgba(10,20,28,.4)) !important; }
[data-theme="dark"] .feed-card.jd .post-title, [data-theme="dark"] .feed-card.jd .jd-count, [data-theme="dark"] .feed-card.jd .jd-where, [data-theme="dark"] .feed-card.jd .card-options-trigger, [data-theme="dark"] .feed-card.jd .jd-vote .vote-btn, [data-theme="dark"] .feed-card.jd .jd-vote .vote-score { color: #f1f8fb !important; }
[data-theme="dark"] .feed-card.jd .alias-pill { background: rgba(255,255,255,.14); color: #fff; }
[data-theme="dark"] .feed-card.jd .jd-tag { color: color-mix(in srgb, var(--accent) 55%, #fff); }

/* thread: same colour family, soft sheen */
.thread-screen { background: #d6e8ea; }
.thread-header { background: var(--glass) !important; backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }
.thread-body > .feed-card:not(.media-card), .thread-replies .reply-card { background-image: linear-gradient(160deg, rgba(255,255,255,.22), transparent 45%); }

/* floating glass nav */
.bottom-nav { left: 10px !important; right: 10px !important; bottom: calc(10px + env(safe-area-inset-bottom)) !important; height: 70px !important; border-radius: 30px !important; padding: 6px 4px !important; background: var(--glass) !important; border: 1px solid var(--glass-line) !important; backdrop-filter: blur(26px) saturate(1.7) !important; -webkit-backdrop-filter: blur(26px) saturate(1.7) !important; box-shadow: 0 14px 34px rgba(28,64,84,.18), inset 0 1px 0 rgba(255,255,255,.9) !important; }
.bottom-nav-item { color: var(--ink) !important; font-size: 10.5px !important; }
.bottom-nav-item.active { color: var(--ink) !important; }
.bottom-nav-item.active .nav-icon { background: rgba(255,255,255,.75) !important; color: var(--ink); box-shadow: 0 4px 12px rgba(28,64,84,.16), inset 0 1px 0 #fff; min-width: 58px; height: 34px; }
.bottom-nav-item .ni { width: 24px; height: 24px; }
[data-theme="dark"] .bottom-nav { background: rgba(18,32,42,.55) !important; }
[data-theme="dark"] .bottom-nav-item, [data-theme="dark"] .bottom-nav-item.active { color: #eef7fa !important; }
[data-theme="dark"] .bottom-nav-item.active .nav-icon { background: rgba(255,255,255,.18) !important; color: #fff; }

/* crystal gem + button */
.fab-create {
  width: 66px; height: 66px; border: 0; border-radius: 0; bottom: 98px; font-size: 38px; color: var(--ink);
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
  background:
    linear-gradient(135deg, rgba(255,255,255,.95) 0, rgba(255,255,255,.2) 38%, rgba(160,220,230,.55) 60%, rgba(255,190,170,.6) 100%);
  backdrop-filter: blur(6px); box-shadow: none; filter: drop-shadow(0 8px 14px rgba(28,64,84,.28));
}
.fab-create::before { content: ""; position: absolute; inset: 7px; clip-path: inherit; background: linear-gradient(315deg, rgba(255,255,255,.7), rgba(255,255,255,.05) 55%); }

/* V34b polish */
.feed-card.jd::before { z-index: 0; }
.feed-card.jd .jd-top, .feed-card.jd .jd-main, .feed-card.jd .jd-foot { position: relative; z-index: 1; }
.feed-subtabs { gap: 8px !important; padding-left: 12px !important; padding-right: 12px !important; }
.subtab { padding: 8px 13px !important; font-size: 14px !important; }
.search-toggle { padding: 8px 14px; font-size: 14px; }
.category-chip { font-size: 13px; }

/* thread in glass too */
.thread-body > .feed-card:not(.media-card):not(.has-media), .thread-replies .reply-card, .thread-replies > * {
  background: linear-gradient(145deg, color-mix(in srgb, var(--thread-color) 36%, rgba(255,255,255,.66)), color-mix(in srgb, var(--thread-color) 14%, rgba(255,255,255,.3))) !important;
  color: var(--ink) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.thread-body, .thread-screen { background: transparent !important; }
.thread-screen { background: radial-gradient(60% 30% at 15% 5%, #f7caa6 0, transparent 70%), radial-gradient(60% 35% at 90% 40%, #86cfd6 0, transparent 70%), radial-gradient(60% 35% at 30% 90%, #f2b79b 0, transparent 70%), #d6e8ea !important; }
.thread-screen .op-pill, .thread-screen .alias-pill, .thread-screen .you-pill { background: rgba(255,255,255,.7) !important; color: var(--ink) !important; border: 1px solid var(--glass-line); }
.thread-screen .reply-time, .thread-screen .reply-body, .thread-screen .post-title, .thread-screen .card-options-trigger, .thread-screen .replies-counter, .thread-screen .vote-btn, .thread-screen .vote-score, .thread-screen .rr, .thread-screen .reply-btn, .thread-screen [class*="reply-"] { color: var(--ink) !important; }
.thread-body .op-top .reply-time, .thread-body .op-top .card-options-trigger { color: var(--ink) !important; }
.thread-screen .replies-counter, .thread-screen .reaction-bar, .thread-screen .vote-pill, .thread-screen .reply-reacts .rr.add, .thread-screen .reply-act { background: rgba(255,255,255,.5) !important; border-color: var(--glass-line) !important; }
.thread-screen .tag-chip { background: rgba(255,255,255,.55) !important; color: var(--ink) !important; }
.thread-footer { background: var(--glass) !important; backdrop-filter: blur(22px); }
.thread-body > .feed-card.has-media, .thread-body > .feed-card.has-media * { color: #fff !important; }
.thread-body > .feed-card.has-media .alias-pill, .thread-body > .feed-card.has-media .op-pill { background: rgba(255,255,255,.28) !important; color: #fff !important; }

/* V34c: slim location notice, no oversized pill */
.welcome-section { padding: 0 12px !important; margin: 8px 0 !important; }
.location-card { border-radius: 18px !important; padding: 8px 12px !important; gap: 10px !important; min-height: 0 !important; }
.location-card-icon { display: none !important; }
.location-card-content strong { display: none; }
.location-card-content span { font-size: 13px !important; line-height: 1.3; }
.retry-button { padding: 7px 14px !important; font-size: 13px !important; }
body, html { min-height: 100%; }


/* =========================================================
   V35: Simple & standout — one brand colour, calmer glass,
   easier-to-read text. Last block wins; delete to roll back.
   ========================================================= */
:root {
  --brand: #0b7a5a;
  --brand-2: #19a37a;
  --ink: #0f1a20;
  --ink-2: #4a5b66;
  --glass: rgba(255,255,255,.62);
  --glass-strong: rgba(255,255,255,.82);
  --glass-line: rgba(255,255,255,.9);
}

/* 1. Calmer background: soft mint + warm hint, nothing busy */
body {
  background:
    radial-gradient(60% 34% at 10% 0%, #fbe3cf 0, transparent 70%),
    radial-gradient(60% 40% at 100% 30%, #bfe6dc 0, transparent 70%),
    #e6f1ee !important;
  background-attachment: fixed !important;
}
html { background: #e6f1ee; }

/* 2. Header: simple wordmark, quiet karma */
.wordmark b { background: none; -webkit-text-fill-color: var(--brand); color: var(--brand); }
.location-pill { font-size: 15px; font-weight: 700; }
.location-dot { background: var(--brand-2) !important; }
.karma-pill small { font-size: 0; color: transparent !important; }
.karma-pill small::after { content: "karma"; font-size: 11px; font-weight: 600; color: var(--ink-2); text-transform: none; letter-spacing: 0; }
.karma-pill strong { font-size: 17px; font-weight: 800; }
.karma-pill strong::before { content: "\2B50\FE0E "; font-size: 13px; color: #f5a524; }

/* 3. Less clutter: location strip only appears when something is wrong */
.welcome-section:not(:has(.location-error:not(.hidden))):not(:has(.retry-button:not(.hidden))) { display: none !important; }
.search-toggle { font-size: 0 !important; padding: 8px 12px !important; }
.search-toggle::before { content: "\1F50D\FE0E"; font-size: 15px; }

/* Tabs and chips: brand colour for the active one */
.feed-tabs .feed-tab { font-size: 18px !important; }
.feed-tabs .feed-tab.active { color: var(--brand) !important; border-bottom: 3px solid var(--brand) !important; }
.subtab.active, .category-chip.active { background: var(--brand) !important; color: #fff !important; border-color: var(--brand) !important; }
.subtab, .category-chip { font-weight: 700 !important; }

/* 4. Posts: readable, even strength */
.feed-card.jd { box-shadow: 0 6px 18px rgba(20,50,45,.10), inset 0 1px 0 rgba(255,255,255,.9) !important; }
.feed-card.jd:not(.has-media) { background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 38%, #fff), color-mix(in srgb, var(--accent) 16%, #fff)) !important; }
.feed-card.jd .post-title { font-size: 17px !important; line-height: 1.5 !important; font-weight: 500 !important; color: var(--ink) !important; }
.feed-card.jd .jd-count, .feed-card.jd .jd-where { font-size: 13px !important; font-weight: 600; }
.feed-card.jd .jd-tag { font-weight: 800; }

/* 5. Add button: solid, obvious */
.fab-create {
  clip-path: none !important; border-radius: 50% !important; width: 62px !important; height: 62px !important;
  background: linear-gradient(135deg, var(--brand-2), var(--brand)) !important; color: #fff !important;
  filter: none !important; backdrop-filter: none !important; font-size: 34px !important;
  box-shadow: 0 10px 24px rgba(11,122,90,.42), 0 0 0 4px rgba(255,255,255,.7) !important;
}
.fab-create::before { display: none !important; }

/* 6. Bottom nav: brand-coloured active tab */
.bottom-nav { background: var(--glass-strong) !important; }
.bottom-nav-item { font-weight: 600; }
.bottom-nav-item.active, .bottom-nav-item.active .nav-icon { color: var(--brand) !important; }
.bottom-nav-item.active .nav-icon { background: rgba(11,122,90,.12) !important; box-shadow: none !important; }
.bottom-nav-item.active span:last-child { font-weight: 800; }
.notification-badge { background: #e5484d; color: #fff; }

/* 7. Friendly empty / error states */
.empty-state { text-align: center; padding: 48px 24px; margin: 24px 14px; border-radius: 24px; background: var(--glass-strong); border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow); color: var(--ink); }
.empty-state-icon { font-size: 44px; margin-bottom: 10px; }
.empty-state h3, .empty-state-title { font-size: 19px; font-weight: 800; margin-bottom: 6px; color: var(--ink); }
.empty-state p, .empty-state-text { font-size: 15px; color: var(--ink-2); line-height: 1.5; }
.empty-actions { margin-top: 16px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.empty-actions button, .empty-state .primary-button { background: var(--brand); color: #fff; border: 0; border-radius: 999px; padding: 11px 20px; font-weight: 700; font-size: 15px; }

/* Dark mode */
[data-theme="dark"] { --ink: #eef5f3; --ink-2: #a9b9b6; --glass: rgba(20,34,36,.62); --glass-strong: rgba(20,34,36,.86); --glass-line: rgba(255,255,255,.12); }
[data-theme="dark"] body { background: radial-gradient(60% 30% at 10% 0%, #2a2220 0, transparent 70%), radial-gradient(60% 40% at 100% 30%, #0f3a33 0, transparent 70%), #0b1517 !important; }
[data-theme="dark"] html { background: #0b1517; }
[data-theme="dark"] .feed-card.jd:not(.has-media) { background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 38%, #0b1517), color-mix(in srgb, var(--accent) 16%, #0b1517)) !important; }
[data-theme="dark"] .feed-card.jd .post-title { color: var(--ink) !important; }
[data-theme="dark"] .feed-tabs .feed-tab.active, [data-theme="dark"] .bottom-nav-item.active, [data-theme="dark"] .bottom-nav-item.active .nav-icon { color: #4fd8aa !important; border-bottom-color: #4fd8aa; }

/* V35: Sort dropdown replaces the New / Commented / Voted buttons */
#feedSubtabs > .subtab { display: none !important; }
/* V36: compact sliding sort switch */
.sort-seg {
  --i: 0; position: relative; display: inline-grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  padding: 3px; border-radius: 999px; background: var(--glass-strong); border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow);
}
.sort-seg button {
  position: relative; z-index: 1; border: 0; background: none; cursor: pointer;
  font: 700 12.5px Inter, sans-serif; letter-spacing: .01em; color: var(--ink); opacity: .6;
  padding: 6px 12px; border-radius: 999px; transition: opacity .2s, color .2s;
}
.sort-seg button.on { opacity: 1; color: #fff; }
.sort-thumb {
  position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; border-radius: 999px;
  width: calc((100% - 6px) / 3); transform: translateX(calc(var(--i) * 100%));
  background: linear-gradient(135deg, #0b7a5a, #14b88a); box-shadow: 0 4px 12px rgba(11,122,90,.35);
  transition: transform .28s cubic-bezier(.3,1.3,.5,1);
}
.search-toggle { margin-left: auto; }

/* V35: loading placeholders match the glass cards */
.skel-card { background: var(--glass-strong) !important; border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow) !important; margin: 0 12px 14px; }
.skel-card i { background: linear-gradient(90deg, rgba(15,26,32,.07) 25%, rgba(15,26,32,.15) 50%, rgba(15,26,32,.07) 75%); background-size: 200% 100%; }

/* =====================================================
   V36: HELP & SUPPORT CHAT
===================================================== */
.help-sheet { background: var(--surface); color: var(--text); display: flex; flex-direction: column; max-height: 88vh; padding-bottom: 16px; }
.help-thread { flex: 1 1 auto; min-height: 220px; max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 6px 2px 10px; scroll-behavior: smooth; }
.help-thread.admin { max-height: 38vh; margin-bottom: 10px; }
.hb { max-width: 86%; padding: 9px 13px 7px; border-radius: 18px; font-size: 14.5px; line-height: 1.45; animation: hbIn .25s ease both; position: relative; }
.hb p { margin: 0; }
.hb small { display: block; font-weight: 800; font-size: 11px; letter-spacing: .03em; margin-bottom: 2px; color: var(--primary); }
.hb time { display: block; text-align: right; font-size: 10.5px; opacity: .55; margin-top: 3px; }
.hb.bot { align-self: flex-start; background: var(--surface-soft); border: 1px solid var(--border); border-bottom-left-radius: 6px; }
.hb.admin { align-self: flex-start; background: var(--primary-light); border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent); border-bottom-left-radius: 6px; }
.hb.admin small { color: var(--primary-dark); }
.hb.user { align-self: flex-end; color: #fff; background: linear-gradient(135deg, #0b7a5a, #14b88a); border-bottom-right-radius: 6px; box-shadow: 0 4px 14px rgba(11,122,90,.28); }
@keyframes hbIn { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
.help-note { align-self: center; font-size: 12px; font-weight: 700; color: var(--primary-dark); background: var(--primary-light); padding: 5px 12px; border-radius: 999px; }
.help-chips { display: flex; gap: 7px; overflow-x: auto; padding: 4px 0 10px; scrollbar-width: none; }
.help-chips::-webkit-scrollbar { display: none; }
.help-chips button { flex: 0 0 auto; border: 1px solid var(--border); background: var(--surface-soft); color: var(--text); font: 700 12.5px Inter, sans-serif; padding: 8px 12px; border-radius: 999px; cursor: pointer; transition: transform .15s, background .15s; }
.help-chips button:active { transform: scale(.95); }
.help-chips button.warn.on { background: #fff1ef; border-color: #f1a79d; color: #b3261e; }
.help-chips button.human.on { background: var(--primary-light); border-color: var(--primary); color: var(--primary-dark); }
.help-form { display: flex; gap: 8px; align-items: center; }
.help-form input { flex: 1; min-width: 0; padding: 12px 15px; font: inherit; font-size: 15px; color: var(--text); background: var(--surface-soft); border: 1px solid var(--border); border-radius: 999px; outline: none; }
.help-form input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.help-send { flex: 0 0 44px; height: 44px; border: 0; border-radius: 50%; background: linear-gradient(135deg, #0b7a5a, #14b88a); color: #fff; font-size: 17px; cursor: pointer; box-shadow: 0 6px 16px rgba(11,122,90,.35); transition: transform .15s; }
.help-send:active { transform: scale(.9); }
.help-foot { margin: 10px 4px 0; font-size: 11.5px; color: var(--text-light); text-align: center; }
.help-badge { font-style: normal; font-size: 11px; font-weight: 800; color: #fff; background: #e5484d; padding: 1px 7px; border-radius: 999px; margin-left: 6px; vertical-align: middle; }
.help-badge.hidden { display: none; }
.help-ticket { width: 100%; text-align: left; cursor: pointer; font: inherit; color: var(--text); }
.help-ticket strong { display: block; margin-bottom: 2px; }
.help-back { border: 0; background: none; color: var(--primary); font: 800 14px Inter, sans-serif; padding: 4px 0 10px; cursor: pointer; }
[data-theme="dark"] .hb.bot, [data-theme="dark"] .help-chips button, [data-theme="dark"] .help-form input { background: #16262b; border-color: #26393f; color: #e8f1f0; }
[data-theme="dark"] .hb.admin { background: #12332b; }

/* =====================================================
   V36: SMALL UI TOUCHES
===================================================== */
/* cards lift a little and feel pressable */
.feed-card { transition: transform .18s ease, box-shadow .18s ease; }
.feed-card:active { transform: scale(.992); }
@media (hover: hover) { .feed-card:hover { transform: translateY(-2px); } }
/* new cards ease in */
@keyframes cardIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.feed-card { animation: cardIn .35s ease both; }
/* the + button breathes softly and glows */
.fab-create { transition: transform .2s; }
.fab-create:active { transform: scale(.9) rotate(90deg); }
@keyframes fabPulse { 0% { box-shadow: 0 10px 26px rgba(11,122,90,.45), 0 0 0 0 rgba(20,184,138,.45); } 70%,100% { box-shadow: 0 10px 26px rgba(11,122,90,.45), 0 0 0 16px rgba(20,184,138,0); } }
/* bottom nav: icon pops when selected */
.bottom-nav-item .nav-icon { transition: transform .22s cubic-bezier(.3,1.5,.5,1); }
.bottom-nav-item.active .nav-icon { transform: translateY(-2px) scale(1.12); }
/* category chips and menu rows feel tactile */
.category-chip, .profile-menu-item, .subtab { transition: transform .15s ease, background .2s ease; }
.category-chip:active, .profile-menu-item:active { transform: scale(.97); }
/* friendlier text selection + smoother scrolling */
::selection { background: rgba(20,184,138,.28); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  .feed-card, .fab-create, .hb { animation: none !important; }
  .sort-thumb, .bottom-nav-item .nav-icon { transition: none !important; }
}

/* =====================================================
   V37: MIDNIGHT PULSE (dark theme)  navy + lime + violet
   Light mode keeps the green glass look.
===================================================== */
[data-theme="dark"] {
  --primary: #7c5cff; --primary-dark: #c6f432; --primary-light: #231f4d;
  --background: #0c1220; --surface: #161f33; --surface-soft: #1b2640;
  --text: #e8edf7; --text-secondary: #aab6cf; --text-light: #7f8cab; --border: #243049;
  --ink: #e8edf7; --ink-2: #aab6cf;
  --glass: rgba(12,18,32,.92); --glass-strong: #161f33; --glass-line: #243049;
  --glass-shadow: 0 1px 0 rgba(255,255,255,.03);
  --lime: #c6f432;
}
[data-theme="dark"] html { background: #0c1220; }
[data-theme="dark"] body { background: #0c1220 !important; color: #e8edf7; }
[data-theme="dark"] .top-header, [data-theme="dark"] .feed-tabs { background: rgba(12,18,32,.92) !important; border-color: #243049 !important; }
[data-theme="dark"] .bottom-nav { background: #161f33 !important; border: 1px solid #243049 !important; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
[data-theme="dark"] .wordmark { text-transform: lowercase; letter-spacing: -.045em; color: #e8edf7; }
[data-theme="dark"] .wordmark b { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--lime); }
[data-theme="dark"] .location-pill { border-radius: 14px !important; background: #161f33 !important; border-color: #243049 !important; box-shadow: none !important; }
[data-theme="dark"] .feed-card.jd:not(.has-media) { background: #161f33 !important; border: 1px solid #243049 !important; box-shadow: none !important; }
[data-theme="dark"] .feed-card.jd .post-title { color: #e8edf7 !important; }
[data-theme="dark"] .feed-tabs .feed-tab.active, [data-theme="dark"] .bottom-nav-item.active, [data-theme="dark"] .bottom-nav-item.active .nav-icon { color: var(--lime) !important; border-bottom-color: var(--lime); }
[data-theme="dark"] .category-chip { border-radius: 10px !important; background: transparent !important; border: 1px solid #2b3956 !important; color: #aab6cf !important; }
[data-theme="dark"] .category-chip.active { background: #e8edf7 !important; color: #0c1220 !important; border-color: #e8edf7 !important; }
[data-theme="dark"] .sort-seg { background: #161f33; border-color: #243049; box-shadow: none; border-radius: 12px; }
[data-theme="dark"] .sort-seg button { color: #aab6cf; border-radius: 9px; }
[data-theme="dark"] .sort-seg button.on { color: #0c1220; }
[data-theme="dark"] .sort-thumb { background: var(--lime); box-shadow: 0 4px 14px rgba(198,244,50,.25); border-radius: 9px; }
[data-theme="dark"] .fab-create { background: var(--lime) !important; color: #0c1220 !important; }
@keyframes fabPulseDark { 0% { box-shadow: 0 10px 26px rgba(198,244,50,.3), 0 0 0 0 rgba(198,244,50,.4); } 70%,100% { box-shadow: 0 10px 26px rgba(198,244,50,.3), 0 0 0 16px rgba(198,244,50,0); } }
[data-theme="dark"] .help-send { background: var(--lime); color: #0c1220; box-shadow: 0 6px 16px rgba(198,244,50,.25); }
[data-theme="dark"] .hb.user { background: #7c5cff; box-shadow: none; }
[data-theme="dark"] .hb small, [data-theme="dark"] .hb.admin small { color: var(--lime); }
[data-theme="dark"] .help-note { background: #1d2a12; color: var(--lime); }
[data-theme="dark"] .skel-card { background: #161f33 !important; border-color: #243049; box-shadow: none !important; }
[data-theme="dark"] .skel-card i { background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.1) 50%, rgba(255,255,255,.04) 75%); background-size: 200% 100%; }
[data-theme="dark"] .profile-menu-item { background: #161f33; border-color: #243049; }
[data-theme="dark"] .profile-menu-item small { color: #8a97b4; }

/* =====================================================
   V37: PULL-TO-REFRESH
===================================================== */
body { overscroll-behavior-y: contain; }
.ptr { position: fixed; left: 50%; top: 0; z-index: 400; width: 40px; height: 40px; margin-left: -20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--surface, #fff); color: var(--primary, #0b7a5a);
  box-shadow: 0 6px 20px rgba(0,0,0,.25); transform: translateY(-60px); opacity: 0; pointer-events: none; transition: opacity .15s; }
.ptr svg { width: 20px; height: 20px; transition: transform .1s; }
.ptr.spin svg { animation: ptrSpin .8s linear infinite; }
[data-theme="dark"] .ptr { color: var(--lime); }
@keyframes ptrSpin { to { transform: rotate(360deg); } }

/* =====================================================
   V37 POLISH
===================================================== */
/* the + button must keep its centring while pressed (fixes a jump) */
.fab-create:active { transform: translateX(-50%) scale(.92) !important; }

/* ----- every screen size: nav pill + column stay centred ----- */
@media (min-width: 760px) {
  .bottom-nav { left: 50% !important; right: auto !important; width: min(680px, calc(100% - 24px)) !important; transform: translateX(-50%); }
  .top-header .header-inner, .feed-tabs, .main-content { max-width: 720px; margin-left: auto; margin-right: auto; }
}
@media (min-width: 1100px) {
  [data-theme="dark"] body { background: radial-gradient(60% 40% at 50% -10%, #1a2550 0, transparent 70%), #0c1220 !important; }
  .main-content { border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
}

/* ----- Midnight Pulse details ----- */
[data-theme="dark"] .wordmark b { -webkit-text-fill-color: var(--lime) !important; color: var(--lime) !important; background: none !important; }
[data-theme="dark"] .feed-card.jd::before { display: none !important; }
[data-theme="dark"] .feed-card.jd.has-media::before { display: none !important; }
[data-theme="dark"] .feed-card.jd:not(.has-media) { border-radius: 20px !important; }
[data-theme="dark"] .feed-tabs .feed-tab { color: #7f8cab !important; }
[data-theme="dark"] .feed-tabs .feed-tab.active { color: #e8edf7 !important; border-bottom: 3px solid var(--lime) !important; }

/* announcements: one confident violet card, no drifting glow */
[data-theme="dark"] .ann-card { --ann-a: #5b3fe0; --ann-b: #7c5cff; box-shadow: none; border: 1px solid rgba(255,255,255,.08); }
[data-theme="dark"] .ann-update, [data-theme="dark"] .ann-news { --ann-a: #5b3fe0; --ann-b: #7c5cff; box-shadow: none; }
[data-theme="dark"] .ann-glow, [data-theme="dark"] .ann-card::after { display: none; }

/* today's gist + trending */
[data-theme="dark"] .prompt-card { background: #161f33 !important; border: 1px solid #243049 !important; color: #e8edf7 !important; box-shadow: none !important; border-left: 4px solid var(--lime) !important; }
[data-theme="dark"] .prompt-card small { color: var(--lime) !important; letter-spacing: .1em; }
[data-theme="dark"] .prompt-card strong { color: #e8edf7 !important; }
[data-theme="dark"] .prompt-card button { background: var(--lime) !important; color: #0c1220 !important; border-radius: 12px !important; font-weight: 800; }
[data-theme="dark"] .trend-card { background: #161f33 !important; border: 1px solid #243049; box-shadow: none; color: #e8edf7; border-radius: 16px; }
[data-theme="dark"] .trend-head { color: #aab6cf; letter-spacing: .02em; }

/* + button: a rounded square like the Midnight design */
[data-theme="dark"] .fab-create { clip-path: none !important; border-radius: 20px !important; border: 0 !important; width: 58px; height: 58px; background: var(--lime) !important; filter: none !important; backdrop-filter: none !important; font-size: 34px; color: #0c1220 !important; }
[data-theme="dark"] .fab-create::before { display: none; }

/* search button icon */
.search-toggle { display: inline-flex; align-items: center; gap: 6px; }
.search-toggle svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* crisper type everywhere */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* search button: one clean icon + label (replaces the old emoji trick) */
.search-toggle { font-size: 14px !important; }
.search-toggle::before { content: none !important; display: none !important; }
/* + button: no ring in dark, soft lime glow */
[data-theme="dark"] .fab-create { box-shadow: 0 10px 28px rgba(198,244,50,.32) !important; outline: 0; }

/* =====================================================
   V37 EDGES: every card, chip and panel gets a crisp, defined edge
   (a clear border + a bright top highlight + a soft shadow so it lifts off the page)
===================================================== */
:root { --edge: rgba(15,42,34,.14); --edge-hi: rgba(255,255,255,.9); --lift: 0 6px 18px rgba(15,42,34,.10); }
[data-theme="dark"] {
  --edge: #34456b;                         /* visible navy-blue outline */
  --edge-hi: rgba(255,255,255,.09);        /* light catching the top edge */
  --lift: 0 10px 28px rgba(0,0,0,.45);
}
.feed-card, .feed-card.jd:not(.has-media), .trend-card, .prompt-card, .profile-menu-item, .karma-level-card,
.community-card, .ann-card, .help-sheet .hb, .search-container, .skel-card, .location-pill, .sort-seg {
  border: 1px solid var(--edge) !important;
  box-shadow: var(--lift), inset 0 1px 0 var(--edge-hi) !important;
}
.category-chip, .help-chips button, .help-form input, .adm-form input, .adm-form textarea {
  border: 1px solid var(--edge) !important;
  box-shadow: inset 0 1px 0 var(--edge-hi);
}
.category-chip.active { border-color: transparent !important; }
.bottom-nav { border: 1px solid var(--edge) !important; box-shadow: 0 14px 34px rgba(0,0,0,.28), inset 0 1px 0 var(--edge-hi) !important; }
.modal-sheet { border: 1px solid var(--edge); border-bottom: 0; box-shadow: 0 -12px 40px rgba(0,0,0,.35), inset 0 1px 0 var(--edge-hi); }
/* consistent, slightly tighter corners so the edges read sharp */
.feed-card, .feed-card.jd:not(.has-media), .trend-card, .prompt-card, .profile-menu-item, .karma-level-card, .ann-card { border-radius: 18px !important; }
/* edges brighten when you press or hover */
.feed-card:active, .profile-menu-item:active, .trend-card:active { border-color: var(--lime, #0b7a5a) !important; }
@media (hover: hover) { .feed-card:hover, .trend-card:hover, .profile-menu-item:hover { border-color: color-mix(in srgb, var(--lime, #0b7a5a) 70%, var(--edge)) !important; } }
/* the level card sits inside the page margins like the other cards */
.karma-level-card { margin: 10px 14px 16px !important; background: linear-gradient(135deg, #0b7a5a, #0f9b70); }
[data-theme="dark"] .karma-level-card { background: #161f33; color: #e8edf7; border-left: 4px solid var(--lime) !important; }
[data-theme="dark"] .karma-level-card .karma-progress { background: #243049; }
[data-theme="dark"] .karma-level-card .karma-progress span { background: var(--lime); }
[data-theme="dark"] .prompt-card { border-left: 4px solid var(--lime) !important; }
/* announcement card keeps its own bright rim */
.ann-card { border-color: rgba(255,255,255,.28) !important; box-shadow: 0 10px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.35) !important; }

/* =====================================================
   V37 STAND-OUT: stronger edges, lifted cards, coloured spine per post
===================================================== */
:root { --edge: rgba(15,42,34,.24); --lift: 0 10px 26px rgba(15,42,34,.16); }
[data-theme="dark"] {
  --edge: #4a5f94; --edge-hi: rgba(255,255,255,.16); --lift: 0 14px 32px rgba(0,0,0,.6), 0 0 0 1px rgba(124,92,255,.10);
  --surface: #1a2540;
}
[data-theme="dark"] .feed-card.jd:not(.has-media), [data-theme="dark"] .trend-card, [data-theme="dark"] .profile-menu-item,
[data-theme="dark"] .prompt-card { background: #1a2540 !important; }
/* every post gets a bright spine in its own colour */
.feed-card.jd { box-shadow: var(--lift), inset 5px 0 0 var(--accent, #7c5cff), inset 0 1px 0 var(--edge-hi) !important; }
.feed-card.jd .jd-top, .feed-card.jd .jd-main, .feed-card.jd .jd-foot { padding-left: 6px; }
[data-theme="dark"] .category-chip { border-color: #4a5f94 !important; color: #c3cce2 !important; }
[data-theme="dark"] .location-pill, [data-theme="dark"] .sort-seg { border-color: #4a5f94 !important; }
[data-theme="dark"] .bottom-nav { border-color: #4a5f94 !important; background: #1a2540 !important; }
[data-theme="dark"] .help-form input, [data-theme="dark"] .help-chips button { border-color: #4a5f94 !important; }
.feed-card.jd:not(.has-media) { box-shadow: var(--lift), inset 5px 0 0 var(--accent, #7c5cff), inset 0 1px 0 var(--edge-hi) !important; }
[data-theme="dark"] .feed-card.jd:not(.has-media) { border: 1px solid var(--edge) !important; box-shadow: var(--lift), inset 5px 0 0 var(--accent, #7c5cff), inset 0 1px 0 var(--edge-hi) !important; }

/* =====================================================
   V37 FIX: post / thread screen in dark mode was washed out
   (light pastel cards under light text). Dark surfaces + crisp edges instead.
===================================================== */
[data-theme="dark"] .thread-screen { background: #0c1220 !important; }
[data-theme="dark"] .thread-header { background: #121a2e !important; border-bottom: 1px solid var(--edge) !important; }
[data-theme="dark"] .thread-body > .feed-card:not(.media-card):not(.has-media),
[data-theme="dark"] .thread-replies .reply-card,
[data-theme="dark"] .thread-replies > * {
  background: #1a2540 !important; color: #e8edf7 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border: 1px solid var(--edge) !important;
  box-shadow: var(--lift), inset 5px 0 0 var(--thread-color, #7c5cff), inset 0 1px 0 var(--edge-hi) !important;
}
[data-theme="dark"] .thread-body > .feed-card:not(.media-card):not(.has-media) { border-radius: 0 0 20px 20px !important; margin: 0 0 12px !important; }
[data-theme="dark"] .thread-replies .reply-card { border-radius: 16px !important; margin: 0 12px 10px !important; }
[data-theme="dark"] .thread-screen .op-pill, [data-theme="dark"] .thread-screen .alias-pill, [data-theme="dark"] .thread-screen .you-pill {
  background: rgba(255,255,255,.10) !important; color: #e8edf7 !important; border: 1px solid var(--edge) !important;
}
[data-theme="dark"] .thread-screen .replies-counter, [data-theme="dark"] .thread-screen .reaction-bar, [data-theme="dark"] .thread-screen .vote-pill,
[data-theme="dark"] .thread-screen .reply-reacts .rr.add, [data-theme="dark"] .thread-screen .reply-act, [data-theme="dark"] .thread-screen .tag-chip {
  background: rgba(255,255,255,.08) !important; border: 1px solid var(--edge) !important; color: #e8edf7 !important;
}
[data-theme="dark"] .thread-screen .reply-time, [data-theme="dark"] .thread-screen .reply-body, [data-theme="dark"] .thread-screen .post-title,
[data-theme="dark"] .thread-screen .card-options-trigger, [data-theme="dark"] .thread-screen .vote-btn, [data-theme="dark"] .thread-screen .vote-score { color: #e8edf7 !important; }
[data-theme="dark"] .thread-body > .feed-card:not(.media-card):not(.has-media) .author-name,
[data-theme="dark"] .thread-body > .feed-card:not(.media-card):not(.has-media) .post-meta-sub,
[data-theme="dark"] .thread-body > .feed-card:not(.media-card):not(.has-media) .card-options-trigger { color: #c3cce2 !important; }
[data-theme="dark"] .thread-body > .feed-card:not(.media-card):not(.has-media) .post-title { color: #ffffff !important; font-weight: 600; }
[data-theme="dark"] .thread-body > .feed-card:not(.media-card):not(.has-media) .tag-chip { color: var(--lime) !important; }
[data-theme="dark"] .reply-empty { color: #aab6cf; }
[data-theme="dark"] .thread-footer, [data-theme="dark"] .thread-composer { background: #121a2e !important; border-top: 1px solid var(--edge) !important; }
[data-theme="dark"] #threadReplyInput { background: #1a2540 !important; color: #e8edf7 !important; border: 1px solid var(--edge) !important; }
[data-theme="dark"] .thread-replies > .reply-empty { background: transparent !important; border: 0 !important; box-shadow: none !important; }
[data-theme="dark"] #threadReplyInput { border-radius: 14px !important; padding: 12px 14px; }

/* dark: Explore + Premium match the Midnight palette */
[data-theme="dark"] .vibe-card { background: #1a2540 !important; color: #e8edf7 !important; border: 1px solid var(--edge) !important; border-left: 4px solid var(--lime) !important; box-shadow: var(--lift), inset 0 1px 0 var(--edge-hi) !important; }
[data-theme="dark"] .vibe-card small { color: var(--lime) !important; }
[data-theme="dark"] .intention-grid button, [data-theme="dark"] .intention-grid > * { background: #121a2e !important; border: 1px solid var(--edge) !important; color: #e8edf7 !important; }
[data-theme="dark"] .intention-grid button.active, [data-theme="dark"] .intention-grid button.on { border-color: var(--lime) !important; background: #1d2a12 !important; }
[data-theme="dark"] .explorer-filter, [data-theme="dark"] .explorer-tools > * { background: #1a2540 !important; color: #e8edf7 !important; border: 1px solid var(--edge) !important; }
[data-theme="dark"] .explorer-filter.active { background: var(--lime) !important; color: #0c1220 !important; border-color: var(--lime) !important; }
[data-theme="dark"] .community-card { background: #1a2540 !important; color: #e8edf7 !important; border: 1px solid var(--edge) !important; box-shadow: var(--lift) !important; }
[data-theme="dark"] .premium-hero { background: linear-gradient(135deg, #5b3fe0, #7c5cff) !important; border: 1px solid rgba(255,255,255,.25); box-shadow: 0 14px 32px rgba(0,0,0,.5) !important; }
[data-theme="dark"] .premium-header { background: #121a2e !important; }

/* delete account */
.profile-menu-item.danger-row strong { color: #e5484d; }
.adm-publish.danger { background: #e5484d !important; color: #fff !important; }
.adm-publish.danger:disabled { opacity: .4; cursor: not-allowed; }

/* ---------- V39 first-run welcome ---------- */
.welcome-overlay { align-items: center !important; justify-content: center !important; padding: 18px; background: rgba(6,10,20,.78) !important; backdrop-filter: blur(6px); z-index: 9999 !important; }
.welcome-sheet { width: min(420px, 100%); background: var(--surface, #fff); color: var(--text, #0e1116); border: 1px solid var(--edge, #dfe5ea); border-radius: 26px; padding: 22px 22px 18px; box-shadow: 0 24px 60px rgba(0,0,0,.35); animation: wlIn .35s cubic-bezier(.2,.8,.2,1); }
@keyframes wlIn { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
.wl-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 14px; }
.wl-dots i { width: 22px; height: 5px; border-radius: 99px; background: rgba(128,140,170,.35); transition: background .2s; }
.wl-dots i.on { background: #7c5cff; }
.wl-step { text-align: center; min-height: 230px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.wl-step.hidden { display: none !important; }
.wl-art { font-size: 54px; line-height: 1; margin-bottom: 4px; }
.wl-step h2 { margin: 0; font-size: 24px; letter-spacing: -.03em; }
.wl-step h2 span { color: #7c5cff; }
.wl-step p { margin: 0; font-size: 15px; line-height: 1.5; opacity: .8; }
.wl-rules { list-style: none; padding: 0; margin: 4px 0 0; text-align: left; display: grid; gap: 8px; font-size: 14px; line-height: 1.4; width: 100%; }
.wl-rules li { padding: 9px 12px; border: 1px solid var(--edge, #dfe5ea); border-radius: 12px; }
.wl-agree { display: flex; gap: 10px; align-items: flex-start; text-align: left; font-size: 13.5px; margin-top: 10px; }
.wl-agree input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: #7c5cff; flex: none; }
.wl-agree a { color: #7c5cff; font-weight: 700; }
.wl-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.wl-actions .adm-publish { flex: 1; margin: 0; }
.wl-actions .adm-publish:disabled { opacity: .45; }
.wl-skip { background: none; border: 0; color: inherit; opacity: .6; font-weight: 600; font-size: 14px; padding: 10px 8px; }
.wl-skip.hidden { display: none; }
[data-theme="dark"] .welcome-sheet { background: #161f33; color: #e8edf7; border-color: #2b3956; }
[data-theme="dark"] .wl-rules li { border-color: #243049; background: #111a2c; }

/* =====================================================
   V40 LIGHT MIDNIGHT: light mode gets the same crisp, edged look
   (clean cool-white page, white cards with sharp outlines, violet + lime accents)
===================================================== */
html:not([data-theme="dark"]) {
  --edge: #c9d2e6; --edge-hi: rgba(255,255,255,1); --lift: 0 8px 22px rgba(30,45,90,.10);
  --lime: #c6f432; --violet: #6a4cff; --navy: #0c1220; --page: #f2f5fb;
}
html:not([data-theme="dark"]) body, html:not([data-theme="dark"]) .app-shell, html:not([data-theme="dark"]) main {
  background: var(--page) !important; background-image: none !important;
}
html:not([data-theme="dark"]) body::before, html:not([data-theme="dark"]) body::after { display: none !important; }
html:not([data-theme="dark"]) header, html:not([data-theme="dark"]) .topbar, html:not([data-theme="dark"]) .app-header {
  background: #ffffff !important; background-image: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid var(--edge) !important; box-shadow: none !important;
}
html:not([data-theme="dark"]) .wordmark { color: var(--navy) !important; -webkit-text-fill-color: var(--navy) !important; background: none !important; }
html:not([data-theme="dark"]) .wordmark b { color: var(--violet) !important; -webkit-text-fill-color: var(--violet) !important; background: none !important; }
html:not([data-theme="dark"]) .location-pill, html:not([data-theme="dark"]) .sort-seg, html:not([data-theme="dark"]) .search-toggle {
  background: #fff !important; backdrop-filter: none !important; border: 1px solid var(--edge) !important; box-shadow: none !important; color: var(--navy) !important;
}
html:not([data-theme="dark"]) .feed-tabs { background: #fff !important; backdrop-filter: none !important; border-bottom: 1px solid var(--edge) !important; }
html:not([data-theme="dark"]) .feed-tabs .feed-tab { color: #7a869f !important; }
html:not([data-theme="dark"]) .feed-tabs .feed-tab.active { color: var(--navy) !important; border-bottom: 3px solid var(--violet) !important; }
/* sort switch: navy active pill */
html:not([data-theme="dark"]) .sort-seg button.on, html:not([data-theme="dark"]) .sort-seg button.active, html:not([data-theme="dark"]) .sort-seg [aria-pressed="true"] {
  background: var(--navy) !important; color: #fff !important; box-shadow: none !important;
}
/* chips */
html:not([data-theme="dark"]) .category-chip { background: #fff !important; border: 1px solid var(--edge) !important; color: #3b4660 !important; box-shadow: none !important; backdrop-filter: none !important; }
html:not([data-theme="dark"]) .category-chip.active { background: var(--navy) !important; color: #fff !important; border-color: var(--navy) !important; }
/* cards: white, crisp edge, per-post coloured spine */
html:not([data-theme="dark"]) .feed-card.jd:not(.has-media), html:not([data-theme="dark"]) .trend-card, html:not([data-theme="dark"]) .profile-menu-item,
html:not([data-theme="dark"]) .prompt-card, html:not([data-theme="dark"]) .karma-level-card {
  background: #fff !important; background-image: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; color: var(--navy);
  border: 1px solid var(--edge) !important;
}
html:not([data-theme="dark"]) .feed-card.jd:not(.has-media) { box-shadow: var(--lift), inset 5px 0 0 var(--accent, #6a4cff) !important; }
html:not([data-theme="dark"]) .feed-card.jd::before, html:not([data-theme="dark"]) .feed-card.jd.has-media::before { display: none !important; }
html:not([data-theme="dark"]) .feed-card .post-title, html:not([data-theme="dark"]) .feed-card .vote-score { color: var(--navy) !important; }
html:not([data-theme="dark"]) .feed-card .tag-chip { color: var(--violet) !important; }
/* announcements: same confident violet card */
html:not([data-theme="dark"]) .ann-card, html:not([data-theme="dark"]) .ann-update, html:not([data-theme="dark"]) .ann-news {
  --ann-a: #5b3fe0; --ann-b: #7c5cff; background: linear-gradient(135deg, #5b3fe0, #7c5cff) !important; box-shadow: 0 8px 22px rgba(91,63,224,.28) !important; border: 1px solid #5b3fe0 !important;
}
html:not([data-theme="dark"]) .ann-glow, html:not([data-theme="dark"]) .ann-card::after { display: none !important; }
/* today's gist */
html:not([data-theme="dark"]) .prompt-card { border-left: 4px solid var(--lime) !important; box-shadow: var(--lift) !important; }
html:not([data-theme="dark"]) .prompt-card small { color: var(--violet) !important; letter-spacing: .1em; }
html:not([data-theme="dark"]) .prompt-card strong { color: var(--navy) !important; }
html:not([data-theme="dark"]) .prompt-card button { background: var(--navy) !important; color: #fff !important; border-radius: 12px !important; box-shadow: none !important; font-weight: 800; }
html:not([data-theme="dark"]) .karma-level-card { background: var(--navy) !important; color: #e8edf7; border-left: 4px solid var(--lime) !important; }
/* + button and nav */
html:not([data-theme="dark"]) .fab-create { clip-path: none !important; border-radius: 20px !important; border: 0 !important; width: 58px; height: 58px; background: var(--navy) !important; color: var(--lime) !important; filter: none !important; backdrop-filter: none !important; font-size: 34px; box-shadow: 0 10px 26px rgba(12,18,32,.35) !important; }
html:not([data-theme="dark"]) .fab-create::before { display: none; }
html:not([data-theme="dark"]) .bottom-nav { background: #fff !important; backdrop-filter: none !important; border: 1px solid var(--edge) !important; box-shadow: 0 12px 30px rgba(30,45,90,.16) !important; }
html:not([data-theme="dark"]) .bottom-nav .active, html:not([data-theme="dark"]) .bottom-nav .nav-item.active { color: var(--violet) !important; }
/* thread screen */
html:not([data-theme="dark"]) .thread-screen { background: var(--page) !important; background-image: none !important; }
html:not([data-theme="dark"]) .thread-header { background: #fff !important; backdrop-filter: none !important; border-bottom: 1px solid var(--edge) !important; }
html:not([data-theme="dark"]) .thread-body > .feed-card:not(.media-card):not(.has-media), html:not([data-theme="dark"]) .thread-replies .reply-card, html:not([data-theme="dark"]) .thread-replies > * {
  background: #fff !important; backdrop-filter: none !important; color: var(--navy) !important; border: 1px solid var(--edge) !important;
  box-shadow: var(--lift), inset 5px 0 0 var(--thread-color, #6a4cff) !important;
}
html:not([data-theme="dark"]) .thread-screen .vote-pill, html:not([data-theme="dark"]) .thread-screen .replies-counter, html:not([data-theme="dark"]) .thread-screen .reaction-bar, html:not([data-theme="dark"]) .thread-screen .tag-chip, html:not([data-theme="dark"]) .thread-screen .op-pill, html:not([data-theme="dark"]) .thread-screen .alias-pill {
  background: #eef1f9 !important; border: 1px solid var(--edge) !important; color: var(--navy) !important; backdrop-filter: none !important;
}
html:not([data-theme="dark"]) .reply-empty { color: #5d6985; }
/* modals */
html:not([data-theme="dark"]) .modal-sheet { background: #fff !important; backdrop-filter: none !important; border: 1px solid var(--edge); }
html:not([data-theme="dark"]) .thread-screen .tag-chip, html:not([data-theme="dark"]) .thread-body > .feed-card .tag-chip { color: var(--violet) !important; background: #eceaff !important; border-color: #d4ccff !important; }
html:not([data-theme="dark"]) .thread-body > .feed-card:not(.media-card):not(.has-media) { border-radius: 0 0 20px 20px !important; margin: 0 0 12px !important; }
html:not([data-theme="dark"]) .thread-replies .reply-card { border-radius: 16px !important; margin: 0 12px 10px !important; }
html:not([data-theme="dark"]) .bottom-nav .active .nav-icon, html:not([data-theme="dark"]) .bottom-nav button.active { background: #eceaff !important; color: var(--violet) !important; }
html:not([data-theme="dark"]) .sort-seg { box-shadow: none !important; }
html:not([data-theme="dark"]) .thread-composer button[type="submit"], html:not([data-theme="dark"]) .reply-form button[type="submit"], html:not([data-theme="dark"]) .composer-send, html:not([data-theme="dark"]) .send-btn { background: var(--navy) !important; color: var(--lime) !important; box-shadow: none !important; }
html:not([data-theme="dark"]) .adm-publish, html:not([data-theme="dark"]) .wl-actions .adm-publish { background: var(--navy) !important; color: #fff !important; box-shadow: none !important; }
html:not([data-theme="dark"]) #threadReplySend { background: var(--navy) !important; color: var(--lime) !important; box-shadow: none !important; }
html:not([data-theme="dark"]) .thread-footer input { border-bottom-color: var(--violet) !important; }
html:not([data-theme="dark"]) .bottom-nav-item.active { color: var(--violet) !important; }
html:not([data-theme="dark"]) .bottom-nav-item.active .nav-icon { background: #eceaff !important; }
html:not([data-theme="dark"]) .profile-header-card { background: linear-gradient(135deg, #5b3fe0, #7c5cff) !important; border: 1px solid #5b3fe0 !important; box-shadow: 0 10px 26px rgba(91,63,224,.28) !important; }
html:not([data-theme="dark"]) .vibe-card { background: linear-gradient(135deg, #5b3fe0, #7c5cff) !important; border: 1px solid #5b3fe0 !important; box-shadow: 0 10px 26px rgba(91,63,224,.28) !important; }
html:not([data-theme="dark"]) .explorer-filter { background: #fff !important; color: #3b4660 !important; border: 1px solid var(--edge) !important; box-shadow: none !important; }
html:not([data-theme="dark"]) .explorer-filter.active { background: var(--navy) !important; color: #fff !important; border-color: var(--navy) !important; }
html:not([data-theme="dark"]) .bottom-nav-item.active .nav-icon { border-radius: 14px !important; }
html:not([data-theme="dark"]) .bottom-nav-item.active { background: transparent !important; box-shadow: none !important; }
html:not([data-theme="dark"]) .bottom-nav-item.active::before, html:not([data-theme="dark"]) .bottom-nav-item.active::after { display: none !important; }
html:not([data-theme="dark"]) .bottom-nav-item.active { background: none !important; border-radius: 14px; }
html:not([data-theme="dark"]) .vibe-card .eyebrow, html:not([data-theme="dark"]) .vibe-card small, html:not([data-theme="dark"]) .vibe-card span:first-child { color: var(--lime) !important; }
html:not([data-theme="dark"]) #explorePage .page-eyebrow, html:not([data-theme="dark"]) .page-eyebrow, html:not([data-theme="dark"]) .eyebrow { color: var(--violet) !important; }
html:not([data-theme="dark"]) .vibe-card .eyebrow { color: var(--lime) !important; }
html:not([data-theme="dark"]) .vibe-card .page-eyebrow { color: var(--lime) !important; }

/* =====================================================
   V41 DOCKED NAV (final): a flat bar that covers the whole bottom of the screen, edge to edge,
   with the phone's home-bar space inside it. The active tab is a rounded pill.
===================================================== */
.bottom-nav {
  left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; transform: none !important;
  height: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
  padding: 8px 8px env(safe-area-inset-bottom, 0px) !important;
  border-radius: 0 !important; border-width: 1px 0 0 0 !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  background: #ffffff !important;
}
[data-theme="dark"] .bottom-nav { background: #121a2e !important; border-color: var(--edge) !important; }
html:not([data-theme="dark"]) .bottom-nav { background: #ffffff !important; border-color: var(--edge) !important; }
@media (min-width: 760px) {
  .bottom-nav { left: 0 !important; right: 0 !important; width: 100% !important; transform: none !important; }
}
/* the active tab: a rounded pill behind icon + label */
.bottom-nav-item { border-radius: 999px !important; margin: 0 2px; }
.bottom-nav-item.active { border-radius: 999px !important; background: rgba(11,122,90,.14) !important; }
[data-theme="dark"] .bottom-nav-item.active { background: rgba(198,244,50,.14) !important; }
html:not([data-theme="dark"]) .bottom-nav-item.active { background: #eceaff !important; }
.bottom-nav-item.active .nav-icon, [data-theme="dark"] .bottom-nav-item.active .nav-icon, html:not([data-theme="dark"]) .bottom-nav-item.active .nav-icon { background: none !important; }
.fab-create { bottom: calc(70px + env(safe-area-inset-bottom, 0px) + 14px) !important; }
/* leave room so the last post is not hidden behind the bar */
.page { padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)) !important; }
html, body { background-color: var(--page, #f2f5fb); }
[data-theme="dark"] html, [data-theme="dark"] body { background-color: #0c1220; }

/* anything the phone shows below or behind the bottom bar blends into the bar itself */
html { background: #f2f5fb !important; }
html[data-theme="dark"] { background: #0c1220 !important; }
body::after { display: none !important; }
html:not([data-theme="dark"]) .bottom-nav { padding-bottom: max(env(safe-area-inset-bottom, 0px), 0px) !important; }
/* extend the bar's own colour below it so a gap can never show a different colour */
.bottom-nav::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 120px; background: inherit; pointer-events: none; }

/* full-screen app mode: keep content clear of the camera notch / clock area */
.top-header { padding-top: env(safe-area-inset-top, 0px) !important; }
.thread-header, .chat-header { padding-top: calc(8px + env(safe-area-inset-top, 0px)) !important; }
@media (display-mode: fullscreen) { .top-header { padding-top: max(env(safe-area-inset-top, 0px), 24px) !important; } }

/* empty feed: starter ideas */
.starter-chips { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.starter-chip { border: 1px solid var(--edge) !important; background: transparent; color: inherit; border-radius: 999px; padding: 9px 14px; font-size: 13.5px; font-weight: 600; text-align: left; }
.starter-chip:active { border-color: var(--lime, #6a4cff) !important; transform: scale(.97); }
.empty-actions .btn-ghost { background: transparent !important; color: inherit !important; border: 1px solid var(--edge) !important; }

/* =====================================================
   V48 POST MENU (the ••• dropdown): clean, modern, always readable
   + image-post titles stay readable on their dark card
===================================================== */
.post-menu-popover {
  min-width: 232px !important; padding: 8px !important; border-radius: 20px !important;
  background: #ffffff !important; border: 1px solid #c9d2e6 !important;
  box-shadow: 0 18px 44px rgba(12,18,32,.28), 0 0 0 1px rgba(255,255,255,.6) inset !important;
  display: grid; gap: 2px; z-index: 120 !important;
}
.post-menu-popover button {
  min-height: 46px; padding: 0 14px !important; gap: 12px !important; border-radius: 14px !important;
  color: #0c1220 !important; -webkit-text-fill-color: #0c1220 !important; font-size: 15px !important; font-weight: 700 !important;
  letter-spacing: -.01em; background: transparent !important; opacity: 1 !important;
}
.post-menu-popover button:active, .post-menu-popover button:hover { background: #eceaff !important; }
.post-menu-popover button.danger { color: #d92d3a !important; -webkit-text-fill-color: #d92d3a !important; }
.post-menu-popover button.danger:active, .post-menu-popover button.danger:hover { background: #fdecee !important; }
.post-menu-popover button:not(.danger):nth-last-child(n+2) { border-bottom: 0; }
[data-theme="dark"] .post-menu-popover {
  background: #1a2540 !important; border-color: #4a5f94 !important; box-shadow: 0 18px 44px rgba(0,0,0,.6) !important;
}
[data-theme="dark"] .post-menu-popover button { color: #e8edf7 !important; -webkit-text-fill-color: #e8edf7 !important; }
[data-theme="dark"] .post-menu-popover button:active, [data-theme="dark"] .post-menu-popover button:hover { background: rgba(124,92,255,.22) !important; }
[data-theme="dark"] .post-menu-popover button.danger { color: #ff7a85 !important; -webkit-text-fill-color: #ff7a85 !important; }

/* image / dark thread posts: light text on the dark card (light mode rule had made it navy) */
html:not([data-theme="dark"]) .thread-body > .feed-card.has-media .post-title,
html:not([data-theme="dark"]) .thread-body > .feed-card.media-card .post-title,
html:not([data-theme="dark"]) .thread-body > .feed-card.has-media .post-body { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; }
html:not([data-theme="dark"]) .thread-body > .feed-card.has-media .author-name,
html:not([data-theme="dark"]) .thread-body > .feed-card.has-media .post-meta-sub,
html:not([data-theme="dark"]) .thread-body > .feed-card.has-media .card-options-trigger { color: #e8edf7 !important; }

/* ===== V48b: post menu never clipped or overlapped ===== */
.post-menu-wrap { position: relative !important; z-index: 60; }
.post-menu-popover { position: absolute !important; top: calc(100% + 6px) !important; right: 0 !important; left: auto !important; z-index: 500 !important; max-height: none !important; overflow: visible !important; }
.feed-card, .thread-body > .feed-card, .feed-card .post-header { overflow: visible !important; }
.feed-card:has(.post-menu-popover:not(.hidden)),
.thread-body > .feed-card:has(.post-menu-popover:not(.hidden)) { position: relative; z-index: 400 !important; }
.feed-card .post-header { position: relative; z-index: 5; }
.feed-card .media-wrap, .feed-card .post-media, .feed-card img.post-image { border-radius: 16px; overflow: hidden; }
.feed-card .post-header { z-index: 90 !important; } .feed-card .post-title, .feed-card .post-body, .feed-card .vote-pill { z-index: auto !important; }

/* ===== V49: small, fresh drop menus ===== */
.post-menu-popover {
  min-width: 0 !important; width: max-content !important; max-width: 220px !important;
  padding: 5px !important; gap: 1px !important; border-radius: 16px !important;
  background: rgba(255,255,255,.99) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(106,76,255,.16) !important;
  box-shadow: 0 10px 28px rgba(12,18,32,.18), 0 2px 6px rgba(12,18,32,.08) !important;
  transform-origin: top right; animation: tkPop .14s ease-out;
}
.post-menu-popover button {
  min-height: 34px !important; padding: 0 12px 0 10px !important; gap: 9px !important;
  border-radius: 11px !important; font-size: 13px !important; font-weight: 600 !important;
  letter-spacing: .1px; white-space: nowrap; justify-content: flex-start !important; text-align: left;
  background: transparent !important; line-height: 1.1 !important;
}
.post-menu-popover button:hover, .post-menu-popover button:active { background: rgba(106,76,255,.10) !important; }
.post-menu-popover button.danger { color: #e0303f !important; -webkit-text-fill-color: #e0303f !important; }
.post-menu-popover button.danger:hover, .post-menu-popover button.danger:active { background: rgba(224,48,63,.10) !important; }
[data-theme="dark"] .post-menu-popover {
  background: rgba(26,37,64,.99) !important; border: 1px solid rgba(198,244,50,.22) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.5), 0 0 0 1px rgba(124,92,255,.18) !important;
}
[data-theme="dark"] .post-menu-popover button:hover, [data-theme="dark"] .post-menu-popover button:active { background: rgba(198,244,50,.12) !important; }
[data-theme="dark"] .post-menu-popover button.danger:hover { background: rgba(255,107,122,.14) !important; }
@keyframes tkPop { from { opacity: 0; transform: translateY(-4px) scale(.96); } to { opacity: 1; transform: none; } }

/* ===== V50: compact, modern post box ===== */
#createPostModal .modal-sheet { padding: 14px 16px calc(16px + env(safe-area-inset-bottom)) !important; border-radius: 24px 24px 0 0 !important; max-height: 88vh; overflow-y: auto; }
#createPostModal .modal-header { margin: 0 0 10px !important; align-items: center !important; }
#createPostModal .modal-eyebrow { font-size: 10px !important; letter-spacing: .14em !important; }
#createPostModal .modal-header h2 { font-size: 20px !important; margin: 0 !important; letter-spacing: -.3px; }
#createPostModal .modal-close { width: 32px !important; height: 32px !important; font-size: 18px !important; line-height: 1 !important; }
#createPostForm { display: grid; gap: 8px; }
#createPostForm .post-location-box { padding: 7px 12px !important; min-height: 0 !important; border-radius: 12px !important; gap: 8px !important; margin: 0 !important; }
#createPostForm .post-location-box > span { font-size: 15px !important; }
#createPostForm .post-location-box small { font-size: 9px !important; letter-spacing: .12em !important; }
#createPostForm .post-location-box strong { font-size: 13px !important; font-weight: 700 !important; }
#createPostForm .form-label { font-size: 11px !important; font-weight: 700 !important; letter-spacing: .06em; text-transform: uppercase; opacity: .65; margin: 4px 0 -2px !important; }
#createPostForm .form-select { height: 42px !important; min-height: 0 !important; padding: 0 12px !important; font-size: 14px !important; border-radius: 12px !important; }
#createPostForm .textarea-wrapper textarea { min-height: 96px !important; height: 96px !important; padding: 11px 13px 24px !important; font-size: 15px !important; line-height: 1.4 !important; border-radius: 14px !important; border-width: 1.5px !important; }
#createPostForm #charCount { font-size: 11px !important; right: 12px !important; bottom: 7px !important; }
#createPostForm .poll-toggle { padding: 0 !important; min-height: 36px !important; height: 36px; font-size: 13px !important; font-weight: 700 !important; border-radius: 12px !important; }
#createPostForm .photo-upload-section { padding: 0 !important; margin: 0 !important; display: grid; gap: 6px; }
#createPostForm .photo-upload-header { display: flex !important; flex-wrap: wrap; align-items: center !important; justify-content: space-between; gap: 6px 10px !important; margin: 0 !important; }
#createPostForm .photo-upload-header strong { font-size: 13px !important; }
#createPostForm .photo-upload-header small { font-size: 11px !important; }
#createPostForm .photo-controls { flex-direction: row !important; flex-wrap: nowrap; gap: 6px !important; width: 100%; }
#createPostForm .add-photo-button { flex: 1; min-height: 34px !important; height: 34px; padding: 0 8px !important; font-size: 12px !important; font-weight: 700 !important; border-radius: 10px !important; display: inline-flex; align-items: center; justify-content: center; }
#createPostForm .photo-lock { padding: 8px 12px !important; font-size: 11.5px !important; line-height: 1.35 !important; border-radius: 10px !important; margin: 0 !important; }
#createPostForm .publish-button { min-height: 46px !important; height: 46px; padding: 0 18px !important; font-size: 15px !important; border-radius: 14px !important; margin-top: 2px; }
/* light = Midnight violet instead of old green */
html:not([data-theme="dark"]) #createPostModal .modal-eyebrow { color: #6a4cff !important; }
html:not([data-theme="dark"]) #createPostForm .post-location-box { background: #efeaff !important; }
html:not([data-theme="dark"]) #createPostForm .post-location-box small { color: #6a4cff !important; }
html:not([data-theme="dark"]) #createPostForm .textarea-wrapper textarea:focus { border-color: #6a4cff !important; box-shadow: 0 0 0 3px rgba(106,76,255,.14) !important; }
html:not([data-theme="dark"]) #createPostForm .poll-toggle, html:not([data-theme="dark"]) #createPostForm .add-photo-button:not(.locked) { color: #6a4cff !important; border-color: rgba(106,76,255,.45) !important; background: #f4f1ff !important; }
html:not([data-theme="dark"]) #createPostForm .publish-button { background: linear-gradient(135deg,#6a4cff,#8a6cff) !important; box-shadow: 0 8px 20px rgba(106,76,255,.28) !important; color: #fff !important; }

/* V50b: tighter gaps + compact reply bar */
#createPostForm .form-select, #createPostForm .textarea-wrapper, #createPostForm .category-extra { margin: 0 !important; }
#createPostForm .textarea-wrapper { padding: 0 !important; }
#createPostForm .post-location-box > span { display: none !important; }
#createPostForm .poll-toggle { margin: 0 !important; }
html[data-theme="dark"] #createPostForm .poll-toggle { background: rgba(124,92,255,.10) !important; border-color: rgba(124,92,255,.5) !important; }
#createPostForm .photo-upload-header > div:first-child { display: flex; align-items: baseline; gap: 8px; }
.thread-guidelines-toggle { min-height: 26px !important; padding: 2px 12px !important; font-size: 11px !important; }
.thread-footer { padding: 6px 10px calc(6px + env(safe-area-inset-bottom)) !important; gap: 8px !important; align-items: center !important; }
.thread-footer #threadReplyInput { height: 38px !important; min-height: 0 !important; padding: 0 14px !important; font-size: 14px !important; border-radius: 999px !important; }
.thread-footer #threadReplySend { width: 38px !important; height: 38px !important; min-width: 38px !important; font-size: 14px !important; }
.thread-footer .thread-photo-btn { width: 34px !important; height: 34px !important; font-size: 17px !important; }
#createPostForm .photo-upload-header strong, #createPostForm .photo-upload-header small { display: inline !important; margin: 0 !important; }

/* ===== V51: compact reply cards ===== */
.thread-screen .reply-card {
  position: relative !important; display: block !important;
  margin: 6px 10px !important; padding: 9px 54px 7px 12px !important;
  border-radius: 14px !important; min-height: 0 !important;
  border-width: 1px !important; box-shadow: 0 1px 3px rgba(12,18,32,.06) !important;
}
.thread-screen .reply-card::before, .thread-screen .reply-card::after { width: 3px !important; }
.thread-screen .reply-top { display: flex !important; align-items: center !important; gap: 6px !important; margin: 0 -44px 2px 0 !important; min-height: 0 !important; }
.thread-screen .reply-top .alias-pill, .thread-screen .reply-top .op-pill, .thread-screen .reply-top .you-pill { padding: 2px 8px !important; font-size: 11px !important; min-height: 0 !important; line-height: 1.3 !important; border-radius: 999px !important; }
.thread-screen .reply-time { font-size: 11px !important; opacity: .7; }
.thread-screen .reply-menu-wrap { margin-left: auto !important; }
.thread-screen .reply-more { width: 26px !important; height: 26px !important; min-width: 0 !important; font-size: 13px !important; padding: 0 !important; line-height: 1 !important; }
.thread-screen .reply-body { font-size: 14.5px !important; line-height: 1.38 !important; margin: 2px 0 4px !important; padding: 0 !important; }
.thread-screen .reply-quote { font-size: 12px !important; padding: 4px 8px !important; margin: 2px 0 4px !important; border-radius: 8px !important; }
.thread-screen .reply-reacts { display: inline-flex !important; align-items: center; gap: 4px !important; margin: 0 8px 0 0 !important; padding: 0 !important; vertical-align: middle; min-height: 0 !important; }
.thread-screen .reply-reacts .rr { height: 24px !important; min-width: 0 !important; padding: 0 7px !important; font-size: 12px !important; border-radius: 999px !important; }
.thread-screen .reply-act { display: inline-flex !important; align-items: center; height: 24px !important; min-height: 0 !important; padding: 0 8px !important; margin: 0 !important; font-size: 12px !important; font-weight: 700 !important; vertical-align: middle; }
.thread-screen .reply-vote-rail { position: absolute !important; right: 6px !important; top: 50% !important; transform: translateY(-50%); margin: 0 !important; padding: 0 !important; display: flex; flex-direction: column; align-items: center; gap: 0 !important; width: 40px; }
.thread-screen .reply-vote-rail button { width: 30px !important; height: 24px !important; min-height: 0 !important; padding: 0 !important; font-size: 13px !important; line-height: 1 !important; }
.thread-screen .reply-vote-rail span, .thread-screen .reply-vote-rail b { font-size: 12px !important; line-height: 1.1 !important; }
.thread-screen .reply-photo { max-height: 180px; border-radius: 10px; }
/* replies header row */
.thread-screen .replies-header, .thread-screen .replies-bar { padding: 8px 12px !important; min-height: 0 !important; }
.thread-screen .replies-counter { font-size: 14px !important; }
.thread-screen .reply-card { min-height: 82px !important; }
.thread-screen .reply-vote-rail { top: 30px !important; transform: none !important; }

/* ===== V52: Jodel-style flat thread (post + replies as coloured rows) ===== */
html:not(#a):not(#b) .thread-screen { --tc: var(--thread-color, #338df0); }
html:not(#a):not(#b) .thread-screen .thread-body { padding: 0 0 8px !important; background: transparent !important; }
/* the post */
html:not(#a):not(#b) .thread-screen .thread-body > .feed-card:not(.has-media):not(.media-card) {
  background: var(--tc) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important;
  border-bottom: 3px solid #fff !important; padding: 14px 64px 16px 16px !important;
}
html:not(#a):not(#b) .thread-screen .thread-body > .feed-card { border-radius: 0 !important; margin: 0 !important; box-shadow: none !important; border-left: 0 !important; border-right: 0 !important; }
html:not(#a):not(#b) .thread-screen .thread-body > .feed-card::before { display: none !important; }
html:not(#a):not(#b) .thread-screen .thread-body > .feed-card:not(.has-media):not(.media-card) :is(.post-title, .post-body, .author-name, .post-meta-sub, .card-options-trigger, .replies-counter, .reply-time) { color: #fff !important; -webkit-text-fill-color: #fff !important; }
html:not(#a):not(#b) .thread-screen .thread-body > .feed-card .post-title { font-size: 17px !important; line-height: 1.38 !important; font-weight: 600 !important; }
html:not(#a):not(#b) .thread-screen .thread-body > .feed-card:not(.has-media) .tag-chip { background: rgba(255,255,255,.22) !important; color: #fff !important; border: 0 !important; }
html:not(#a):not(#b) .thread-screen .thread-body > .feed-card .replies-counter, html:not(#a):not(#b) .thread-screen .thread-body > .feed-card .reaction-bar { background: rgba(255,255,255,.18) !important; border: 0 !important; color: #fff !important; box-shadow: none !important; }
/* header strip with count + sort */
html:not(#a):not(#b) .thread-screen .reply-header { background: #fff !important; padding: 6px 14px !important; border: 0 !important; border-bottom: 1px solid #e4e8f2 !important; box-shadow: none !important; }
html:not(#a):not(#b) .thread-screen .reply-header strong { font-size: 13px !important; color: #5b6580 !important; }
html[data-theme="dark"]:not(#a):not(#b) .thread-screen .reply-header { background: #121a2e !important; border-bottom-color: #26335a !important; }
html[data-theme="dark"]:not(#a):not(#b) .thread-screen .reply-header strong { color: #9fb0d6 !important; }
/* replies = flat rows */
html:not(#a):not(#b) .thread-screen .reply-card {
  background: var(--tc) !important; border: 0 !important; border-bottom: 2px solid #fff !important; border-radius: 0 !important; box-shadow: none !important;
  margin: 0 !important; padding: 12px 60px 34px 16px !important; min-height: 92px !important; color: #fff !important;
}
html:not(#a):not(#b) .thread-screen .reply-card::before, html:not(#a):not(#b) .thread-screen .reply-card::after { display: none !important; }
html:not(#a):not(#b) .thread-screen .reply-card :is(.reply-body, .reply-time, .reply-act, .rr, .alias-pill, .op-pill, .you-pill, .reply-more, .reply-quote, .reply-quote b) { color: #fff !important; -webkit-text-fill-color: #fff !important; }
html:not(#a):not(#b) .thread-screen .reply-card .reply-body { font-size: 16px !important; line-height: 1.38 !important; font-weight: 500 !important; }
html:not(#a):not(#b) .thread-screen .reply-card :is(.alias-pill, .op-pill, .you-pill) { background: rgba(255,255,255,.22) !important; border: 0 !important; font-weight: 700 !important; }
html:not(#a):not(#b) .thread-screen .reply-card .reply-time { opacity: .8 !important; }
html:not(#a):not(#b) .thread-screen .reply-card .reply-quote { background: rgba(0,0,0,.14) !important; border-left: 3px solid rgba(255,255,255,.7) !important; }
html:not(#a):not(#b) .thread-screen .reply-card :is(.rr, .reply-act) { background: rgba(255,255,255,.18) !important; border: 0 !important; }
html:not(#a):not(#b) .thread-screen .reply-card .reply-top { margin: 0 0 4px !important; }
/* ••• bottom centre, popover opens upward */
html:not(#a):not(#b) .thread-screen .reply-card .reply-menu-wrap { position: absolute !important; left: 50% !important; bottom: 2px !important; top: auto !important; margin: 0 !important; transform: translateX(-50%); z-index: 20 !important; }
html:not(#a):not(#b) .thread-screen .reply-card .reply-more { width: 44px !important; height: 28px !important; background: transparent !important; font-size: 16px !important; opacity: .9; }
html:not(#a):not(#b) .thread-screen .reply-card .reply-menu-wrap .post-menu-popover { top: auto !important; bottom: calc(100% + 2px) !important; right: auto !important; left: 50% !important; transform: translateX(-50%); }
/* chevron votes, white, on the right */
html:not(#a):not(#b) .thread-screen .reply-vote-rail { right: 8px !important; top: 50% !important; transform: translateY(-60%) !important; width: 44px !important; }
html:not(#a):not(#b) .thread-screen .reply-vote-rail .vote-btn { background: transparent !important; border: 0 !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-size: 26px !important; font-weight: 300 !important; height: 26px !important; width: 36px !important; box-shadow: none !important; }
html:not(#a):not(#b) .thread-screen .reply-vote-rail .vote-btn.on-up, html:not(#a):not(#b) .thread-screen .reply-vote-rail .vote-btn.on-down { color: #fff !important; text-shadow: 0 0 0 #fff; font-weight: 900 !important; }
html:not(#a):not(#b) .thread-screen .reply-vote-rail .vote-score { color: #fff !important; -webkit-text-fill-color: #fff !important; font-size: 13px !important; opacity: .95; background: transparent !important; }
/* reply input like "Jodel back here…" */
html:not(#a):not(#b) .thread-screen .thread-footer { background: #fff !important; border-top: 0 !important; padding: 4px 12px calc(6px + env(safe-area-inset-bottom)) !important; }
html:not(#a):not(#b) .thread-screen .thread-footer #threadReplyInput { background: transparent !important; border: 0 !important; border-bottom: 2px solid var(--tc) !important; border-radius: 0 !important; height: 40px !important; padding: 0 4px !important; color: #0c1220 !important; box-shadow: none !important; }
html[data-theme="dark"]:not(#a):not(#b) .thread-screen .thread-footer { background: #121a2e !important; }
html[data-theme="dark"]:not(#a):not(#b) .thread-screen .thread-footer #threadReplyInput { color: #fff !important; }
html:not(#a):not(#b) .thread-screen .thread-footer #threadReplySend { background: var(--tc) !important; color: #fff !important; }

html:not(#a):not(#b) .thread-screen .thread-footer { position: sticky !important; bottom: 0; z-index: 30; }
/* OP: top-right dots, chevron vote without the pill */
html:not(#a):not(#b) .thread-screen .thread-body > .feed-card .post-menu-wrap { position: static !important; transform: none !important; margin-left: auto !important; }
html:not(#a):not(#b) .thread-screen .thread-body > .feed-card .card-options-trigger { background: transparent !important; color: #fff !important; }
html:not(#a):not(#b) .thread-screen .thread-body > .feed-card .vote-pill { background: transparent !important; border: 0 !important; box-shadow: none !important; }
html:not(#a):not(#b) .thread-screen .thread-body > .feed-card .vote-pill :is(.vote-btn, .vote-score) { color: #fff !important; -webkit-text-fill-color: #fff !important; background: transparent !important; }

/* ===== V52b: chat screen, same clean flat look ===== */
html:not(#a):not(#b) .chat-screen .chat-messages { padding: 10px 12px !important; display: flex; flex-direction: column; gap: 6px; }
html:not(#a):not(#b) .chat-screen .bubble { max-width: 78% !important; padding: 8px 12px 6px !important; border-radius: 16px !important; font-size: 15px !important; line-height: 1.35 !important; box-shadow: none !important; border: 0 !important; display: flex; flex-direction: column; gap: 1px; }
html:not(#a):not(#b) .chat-screen .bubble small { font-size: 10px !important; opacity: .7; align-self: flex-end; }
html:not(#a):not(#b) .chat-screen .bubble.mine { align-self: flex-end; background: #6a4cff !important; color: #fff !important; border-bottom-right-radius: 5px !important; }
html:not(#a):not(#b) .chat-screen .bubble.mine small, html:not(#a):not(#b) .chat-screen .bubble.mine span { color: #fff !important; }
html:not(#a):not(#b) .chat-screen .bubble.theirs { align-self: flex-start; background: #e8ecf6 !important; color: #0c1220 !important; border-bottom-left-radius: 5px !important; }
html:not(#a):not(#b) .chat-screen .bubble.theirs span, html:not(#a):not(#b) .chat-screen .bubble.theirs small { color: #0c1220 !important; }
html[data-theme="dark"]:not(#a):not(#b) .chat-screen .bubble.theirs { background: #1a2540 !important; }
html[data-theme="dark"]:not(#a):not(#b) .chat-screen .bubble.theirs span, html[data-theme="dark"]:not(#a):not(#b) .chat-screen .bubble.theirs small { color: #e8edf7 !important; }
html[data-theme="dark"]:not(#a):not(#b) .chat-screen .bubble.mine { background: #7c5cff !important; }
html:not(#a):not(#b) .chat-screen .chat-composer { display: flex; align-items: center; gap: 8px; padding: 6px 12px calc(8px + env(safe-area-inset-bottom)) !important; }
html:not(#a):not(#b) .chat-screen #chatInput { flex: 1; height: 40px !important; background: transparent !important; border: 0 !important; border-bottom: 2px solid #6a4cff !important; border-radius: 0 !important; padding: 0 4px !important; font-size: 15px !important; box-shadow: none !important; }
html:not(#a):not(#b) .chat-screen .chat-composer .btn-primary { height: 36px !important; min-height: 0 !important; padding: 0 16px !important; font-size: 13px !important; border-radius: 999px !important; }
html:not(#a):not(#b) .chat-screen .chat-header { min-height: 0 !important; padding: 8px 12px !important; }
html:not(#a):not(#b) .chat-screen .chat-menu-btn { height: 30px !important; min-height: 0 !important; padding: 0 12px !important; font-size: 12px !important; border-radius: 999px !important; }
html:not(#a):not(#b) .chat-screen .chat-composer .btn-primary { background: #6a4cff !important; color: #fff !important; }

/* ===== V53: TalkAm signature (Ghana accent, display font, pulse, colour roles) ===== */
:root { --display: "Sora", "Inter", system-ui, sans-serif; --kente: linear-gradient(90deg,#fcd116 0 25%,#ce1126 25% 50%,#006b3f 50% 75%,#0c1220 75% 100%); }
.wordmark, .modal-header h2, .top-heading, .reply-empty strong, .empty-state h3, .empty-state strong, #welcomeModal h2, #welcomeModal h3, .page h1, .page-title, .section-title { font-family: var(--display) !important; letter-spacing: -.02em; }
.wordmark { font-weight: 800 !important; }
.bottom-nav button span:last-child, .bottom-nav small { font-family: var(--display); font-weight: 600; letter-spacing: 0; }

/* kente thread under the header: a thin Ghana-flag-coloured stitch pattern */
.top-header { position: relative; }
.top-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: repeating-linear-gradient(90deg,#fcd116 0 14px,#ce1126 14px 28px,#006b3f 28px 42px,#0c1220 42px 46px); opacity: .9; pointer-events: none; }
.kente-divider { height: 4px; width: 84px; margin: 10px auto; border-radius: 4px; background: repeating-linear-gradient(90deg,#fcd116 0 10px,#ce1126 10px 20px,#006b3f 20px 30px,#0c1220 30px 33px); }
#welcomeModal .modal-sheet::before, #welcomeModal .welcome-card::before { content: ""; display: block; height: 4px; background: repeating-linear-gradient(90deg,#fcd116 0 14px,#ce1126 14px 28px,#006b3f 28px 42px,#0c1220 42px 46px); border-radius: 4px 4px 0 0; margin: -2px -2px 14px; }

/* "area is talking" live chip */
.pulse-chip { display: flex; align-items: center; gap: 8px; margin: 8px 14px 4px; padding: 7px 13px; width: fit-content; max-width: calc(100% - 28px); border-radius: 999px; font-size: 12.5px; font-weight: 700; font-family: var(--display); color: #0c1220; background: #eef0ff; border: 1px solid rgba(106,76,255,.22); }
[data-theme="dark"] .pulse-chip { color: #e8edf7; background: rgba(124,92,255,.14); border-color: rgba(198,244,50,.28); }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: #c6f432; box-shadow: 0 0 0 0 rgba(198,244,50,.7); animation: tkBeat 1.6s infinite; flex: none; }
html:not([data-theme="dark"]) .pulse-dot { background: #6a4cff; box-shadow: 0 0 0 0 rgba(106,76,255,.6); }
@keyframes tkBeat { 0% { transform: scale(.9); box-shadow: 0 0 0 0 rgba(198,244,50,.6); } 60% { transform: scale(1.1); box-shadow: 0 0 0 9px rgba(198,244,50,0); } 100% { transform: scale(.9); box-shadow: 0 0 0 0 rgba(198,244,50,0); } }
/* the + button carries the same heartbeat */
.fab-create { animation: tkFab 2.8s ease-in-out infinite; }
@keyframes tkFab { 0%,100% { box-shadow: 0 10px 26px rgba(12,18,32,.35), 0 0 0 0 rgba(198,244,50,.45); } 50% { box-shadow: 0 10px 26px rgba(12,18,32,.35), 0 0 0 12px rgba(198,244,50,0); } }
@media (prefers-reduced-motion: reduce) { .pulse-dot, .fab-create { animation: none; } }

/* colour roles: lime = action (dark theme), violet = identity */
[data-theme="dark"] #createPostForm .publish-button, [data-theme="dark"] .chat-screen .chat-composer .btn-primary, [data-theme="dark"] .thread-screen #threadReplySend, [data-theme="dark"] .chat-accept .btn-primary { background: #c6f432 !important; color: #0c1220 !important; -webkit-text-fill-color: #0c1220 !important; box-shadow: 0 8px 22px rgba(198,244,50,.22) !important; }
[data-theme="dark"] .fab-create { background: #c6f432 !important; color: #0c1220 !important; }

/* ===== V54: polish pack ===== */
/* page + screen transitions */
.page.active { animation: tkPage .22s ease-out both; }
.thread-screen:not(.hidden), .chat-screen:not(.hidden) { animation: tkSlide .24s cubic-bezier(.2,.8,.2,1) both; }
.modal-overlay:not(.hidden) .modal-sheet { animation: tkSheet .26s cubic-bezier(.2,.8,.2,1) both; }
@keyframes tkPage { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes tkSlide { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
@keyframes tkSheet { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .page.active, .thread-screen, .chat-screen, .modal-sheet { animation: none !important; } }
/* skeletons */
.skel-list { padding: 16px; display: grid; gap: 10px; }
.skel-list i { display: block; height: 14px; width: 100%; border-radius: 8px; background: linear-gradient(90deg, rgba(120,130,170,.14) 25%, rgba(120,130,170,.28) 50%, rgba(120,130,170,.14) 75%); background-size: 200% 100%; animation: tkShimmer 1.3s linear infinite; }
.skel-list i.w80 { width: 80%; } .skel-list i.w60 { width: 60%; }
@keyframes tkShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
/* animal avatars in reply pills */
.alias-pill .animal { font-style: normal; margin-right: 4px; font-size: 1.05em; }
/* karma level icon */
.karma-pill .karma-ic { position: absolute; top: -6px; left: -4px; font-size: 14px; line-height: 1; }
.karma-pill { position: relative; }
/* pull-to-refresh with the logo */
.ptr { display: grid; place-items: center; }
.ptr .ptr-logo { position: absolute; font: 800 14px/1 var(--display, Inter); color: inherit; }
.ptr svg { position: absolute; width: 34px !important; height: 34px !important; opacity: .55; }
/* offline bar */
.offline-bar { position: fixed; left: 12px; right: 12px; top: calc(env(safe-area-inset-top, 0px) + 8px); z-index: 900; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 14px; border-radius: 14px; font: 700 13px var(--display, Inter); background: #0c1220; color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.3); border: 1px solid rgba(198,244,50,.4); }
.offline-bar.hidden { display: none; }
/* anonymous reassurance */
.anon-note { font-size: 12px; padding: 6px 12px; border-radius: 10px; background: rgba(106,76,255,.08); color: #4b3bb5; border: 1px dashed rgba(106,76,255,.3); }
[data-theme="dark"] .anon-note { background: rgba(198,244,50,.07); color: #cfe98a; border-color: rgba(198,244,50,.3); }
.anon-note b { font-weight: 800; }

/* V54b: thread must scroll (V48b had broken it) */
.thread-screen .thread-body { overflow-y: auto !important; overflow-x: hidden !important; min-height: 0 !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.thread-screen { overflow: hidden !important; }

/* ===== V55: keyboard-aware thread + chat ===== */
html.kb-open .thread-screen, html.kb-open .chat-screen { top: var(--vvt, 0px) !important; bottom: auto !important; height: var(--vvh, 100dvh) !important; }
html.kb-open .thread-guidelines-toggle, html.kb-open .thread-guidelines { display: none !important; }
html.kb-open .bottom-nav, html.kb-open .fab-create { display: none !important; }
html.kb-open .thread-footer, html.kb-open #chatFooter { padding-bottom: 6px !important; }
/* tidy quick replies row */
.thread-quick { padding: 6px 12px 0 !important; gap: 6px !important; }
.thread-quick button { height: 30px !important; min-height: 0 !important; padding: 0 12px !important; font-size: 12.5px !important; border-radius: 999px !important; flex: none; white-space: nowrap; }
/* when typing, show the reply bar as one clean row */
.thread-screen .thread-footer { align-items: center !important; }

/* ===== V56: new replies at the bottom, no quick chips, deep-tone colours ===== */
.thread-quick, .thread-screen .thread-quick, .thread-screen:has(#threadReplyInput:focus) .thread-quick { display: none !important; }
html:not(#a):not(#b) .thread-screen { --deep: color-mix(in srgb, var(--thread-color, #338df0) 66%, #0f1626); --deeper: color-mix(in srgb, var(--thread-color, #338df0) 50%, #0c1220); --deep-op: color-mix(in srgb, var(--thread-color, #338df0) 78%, #0f1626); }
html:not(#a):not(#b) .thread-screen { background: var(--deeper) !important; background-image: none !important; }
html:not(#a):not(#b) .thread-screen .thread-body { background: var(--deeper) !important; }
html:not(#a):not(#b) .thread-screen .thread-body > .feed-card:not(.has-media):not(.media-card) { background: var(--deep-op) !important; border-bottom: 1px solid rgba(255,255,255,.16) !important; }
html:not(#a):not(#b) .thread-screen .reply-card { background: var(--deep) !important; border-bottom: 1px solid rgba(255,255,255,.14) !important; }
html:not(#a):not(#b) .thread-screen .reply-card.fresh { background: color-mix(in srgb, var(--thread-color, #338df0) 76%, #0f1626) !important; }
html:not(#a):not(#b) .thread-screen .reply-card .reply-quote { background: rgba(0,0,0,.22) !important; }
html:not(#a):not(#b) .thread-screen .reply-card :is(.alias-pill, .op-pill, .you-pill), html:not(#a):not(#b) .thread-screen .reply-card :is(.rr, .reply-act) { background: rgba(255,255,255,.14) !important; }
html:not(#a):not(#b) .thread-screen .reply-header { background: var(--deeper) !important; border-bottom: 1px solid rgba(255,255,255,.12) !important; }
html:not(#a):not(#b) .thread-screen .reply-header strong { color: rgba(255,255,255,.85) !important; }
html:not(#a):not(#b) .thread-screen .reply-sort { background: rgba(255,255,255,.12) !important; border: 0 !important; }
html:not(#a):not(#b) .thread-screen .reply-sort button { color: rgba(255,255,255,.8) !important; background: transparent !important; box-shadow: none !important; }
html:not(#a):not(#b) .thread-screen .reply-sort button.on { background: rgba(255,255,255,.92) !important; color: #0c1220 !important; }
html:not(#a):not(#b) .thread-screen .reply-empty, html:not(#a):not(#b) .thread-screen .reply-empty * { color: rgba(255,255,255,.85) !important; }
/* header + footer tinted to match */
html:not(#a):not(#b) .thread-screen .thread-header { background: var(--deeper) !important; border-bottom: 1px solid rgba(255,255,255,.12) !important; }
html:not(#a):not(#b) .thread-screen .thread-header :is(.thread-icon-btn, .thread-back) { background: rgba(255,255,255,.12) !important; border: 0 !important; color: #fff !important; }
html:not(#a):not(#b) .thread-screen .thread-footer, html[data-theme="dark"]:not(#a):not(#b) .thread-screen .thread-footer { background: var(--deeper) !important; }
html:not(#a):not(#b) .thread-screen .thread-footer #threadReplyInput { color: #fff !important; border-bottom-color: rgba(255,255,255,.7) !important; }
html:not(#a):not(#b) .thread-screen .thread-footer #threadReplyInput::placeholder { color: rgba(255,255,255,.6) !important; }
html:not(#a):not(#b) .thread-screen .thread-footer #threadReplySend { background: #fff !important; color: var(--deeper) !important; }
html:not(#a):not(#b) .thread-screen .thread-photo-btn { filter: grayscale(1) brightness(2); }
html:not(#a):not(#b) .thread-screen .thread-guidelines-toggle { background: var(--deeper) !important; color: rgba(255,255,255,.65) !important; }
html:not(#a):not(#b) .thread-screen .thread-guidelines { background: var(--deeper) !important; color: rgba(255,255,255,.8) !important; }


/* ===== V58: menus never clipped / never see-through ===== */
html:not(#a):not(#b) .thread-screen .op-top .reply-menu-wrap { position: relative !important; left: auto !important; bottom: auto !important; transform: none !important; margin-left: auto !important; }
html:not(#a):not(#b) .thread-screen .op-top .reply-menu-wrap .post-menu-popover { top: calc(100% + 6px) !important; bottom: auto !important; right: 0 !important; left: auto !important; transform: none !important; }
.feed-card.jd .jd-top { position: relative !important; z-index: 90 !important; }
.feed-card.jd .jd-main, .feed-card.jd .jd-foot, .feed-card.jd .hold-center, .feed-card.jd .jd-vote { z-index: 1 !important; }
.feed-card.jd:has(.post-menu-popover:not(.hidden)) { z-index: 500 !important; position: relative !important; overflow: visible !important; }
.feed-card.jd.has-media .media-bg { z-index: 0 !important; }
.post-menu-popover { background-color: #ffffff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; opacity: 1 !important; isolation: isolate; }
[data-theme="dark"] .post-menu-popover { background-color: #1a2540 !important; }
html:not(#a):not(#b) .thread-screen .thread-body > .feed-card .op-top { position: relative !important; z-index: 90 !important; }
html:not(#a):not(#b) .feed-card > *:not(.op-top):not(.jd-top):not(.post-header):not(.media-bg) { z-index: 1 !important; }

/* ===== V59: reply photos: small thumbnail, hold to enlarge ===== */
.reply-photo-wrap { position: relative; display: block; width: 150px; margin: 6px 0 4px; border-radius: 12px; overflow: hidden; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; touch-action: manipulation; cursor: zoom-in; max-width: 150px; }
.reply-photo-wrap img.reply-photo { display: block; width: 150px; height: 110px; max-width: 100%; object-fit: cover; border-radius: 12px; filter: none !important; -webkit-touch-callout: none; pointer-events: none; }
.reply-photo-wrap .peek-hint { position: absolute; left: 6px; bottom: 6px; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; color: #fff; background: rgba(0,0,0,.45); }
.peek-overlay { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; background: rgba(5,8,16,.9); pointer-events: none; animation: tkPeek .12s ease-out; }
.peek-overlay.hidden { display: none; }
.peek-overlay img { max-width: 100vw; max-height: 100vh; width: auto; height: auto; object-fit: contain; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
@keyframes tkPeek { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.adm-prem button { padding: 10px 14px; border-radius: 12px; font-weight: 700; border: 1px solid rgba(124,92,255,.5); background: rgba(124,92,255,.12); color: inherit; }
.adm-prem button.off { border-color: rgba(224,48,63,.5); background: rgba(224,48,63,.1); color: #e0303f; }
.adm-chips.adm-prem { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; }
.adm-chips.adm-prem button { height: 44px !important; min-height: 44px; padding: 0 12px !important; white-space: nowrap; line-height: 1 !important; font-size: 14px; border-radius: 12px !important; display: flex; align-items: center; justify-content: center; }
.adm-chips.adm-prem button.off { grid-column: 1 / -1; }
.adm-prem { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.adm-prem button { width: 100% !important; height: 46px !important; min-height: 46px !important; padding: 0 12px !important; white-space: nowrap; line-height: 1 !important; font-size: 14px; border-radius: 12px !important; display: flex; align-items: center; justify-content: center; }
.adm-prem button.off { grid-column: 1 / -1; }

/* V63 admin Premium switch */
.adm-prem-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:16px;border:1px solid rgba(124,92,255,.35);background:rgba(124,92,255,.08)}
.adm-prem-card.on{border-color:rgba(46,196,120,.55);background:rgba(46,196,120,.10)}
.adm-prem-card b{display:block;font-size:16px}
.adm-prem-card span{display:block;font-size:12.5px;opacity:.7;margin-top:2px}
.adm-switch{flex:none;width:58px;height:34px;border-radius:999px;border:0;background:#8b93a7;position:relative;padding:0!important;min-height:0!important;transition:background .2s}
.adm-switch i{position:absolute;top:4px;left:4px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.3);transition:transform .2s}
.adm-switch.on{background:#2ec478}
.adm-switch.on i{transform:translateX(24px)}
.adm-switch:disabled{opacity:.6}

/* ===== V64 Premium posts: black card, living gold edge, soft shimmer ===== */
@property --pg-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes pgSpin { to { --pg-ang: 360deg; } }
@keyframes pgGlow { 0%,100% { box-shadow: 0 0 0 1px rgba(90,150,255,.18), 0 6px 20px -8px rgba(60,120,240,.30); } 50% { box-shadow: 0 0 0 1px rgba(120,180,255,.30), 0 8px 24px -6px rgba(70,140,255,.42); } }
@keyframes pgShine { 0% { background-position: 160% 0; } 55%,100% { background-position: -60% 0; } }

html:not(#a):not(#b) .feed-card.premium-card {
  position: relative;
  border: 1.5px solid transparent !important;
  border-radius: 18px !important;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(70,130,255,.14), transparent 55%),
    linear-gradient(160deg, #101a2e 0%, #080d18 100%) padding-box,
    conic-gradient(from var(--pg-ang), #7db6ff, #3f7be0 25%, #1f3f86 50%, #3f7be0 75%, #7db6ff) border-box !important;
  color: #eaf3ff !important;
  animation: pgSpin 18s linear infinite, pgGlow 8s ease-in-out infinite !important;
}
html:not(#a):not(#b) .feed-card.premium-card::after {
  content: "" !important; display: block !important;
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(150,200,255,.07) 50%, transparent 62%);
  background-size: 260% 100%;
  animation: pgShine 12s ease-in-out infinite;
}
html:not(#a):not(#b) .feed-card.premium-card > * { position: relative; z-index: 1; }
html:not(#a):not(#b) .feed-card.premium-card > .media-bg { position: absolute; z-index: 0; }

/* gold pill */
html:not(#a):not(#b) .feed-card.premium-card .alias-pill,
html:not(#a):not(#b) .feed-card.premium-card .author-name.gold {
  background: linear-gradient(135deg, #d6e9ff, #84bbff 55%, #4b8df0) !important;
  color: #06173a !important; border: 0 !important; font-weight: 900 !important; letter-spacing: .3px;
  box-shadow: 0 0 10px rgba(110,170,255,.35);
}
html:not(#a):not(#b) .feed-card.premium-card .author-name.gold { padding: 3px 10px; border-radius: 999px; display: inline-block; }

/* text + icons in warm cream/gold */
html:not(#a):not(#b) .feed-card.premium-card .post-title,
html:not(#a):not(#b) .feed-card.jd.premium-card .post-title { color: #f1f7ff !important; text-shadow: 0 1px 12px rgba(70,130,255,.18); }
html:not(#a):not(#b) .feed-card.premium-card .jd-tag,
html:not(#a):not(#b) .feed-card.premium-card .tag-chip { color: #8fc2ff !important; }
html:not(#a):not(#b) .feed-card.premium-card .jd-where,
html:not(#a):not(#b) .feed-card.premium-card .post-meta-sub,
html:not(#a):not(#b) .feed-card.premium-card .jd-count,
html:not(#a):not(#b) .feed-card.premium-card .jd-count b,
html:not(#a):not(#b) .feed-card.premium-card .card-options-trigger,
html:not(#a):not(#b) .feed-card.premium-card .replies-counter { color: #a9c6ee !important; }
html:not(#a):not(#b) .feed-card.jd.premium-card .jd-vote .vote-score { color: #cfe4ff !important; }
html:not(#a):not(#b) .feed-card.jd.premium-card .jd-vote .vote-btn { color: #8fc2ff !important; opacity: .7; }
html:not(#a):not(#b) .feed-card.jd.premium-card .jd-vote .vote-btn.on-up,
html:not(#a):not(#b) .feed-card.jd.premium-card .jd-vote .vote-btn.on-down { opacity: 1; filter: drop-shadow(0 0 5px rgba(110,170,255,.6)); }
html:not(#a):not(#b) .thread-body > .feed-card.premium-card:not(.media-card) .author-name,
html:not(#a):not(#b) .thread-body > .feed-card.premium-card:not(.media-card) .post-meta-sub { color: #a9c6ee !important; }
html:not(#a):not(#b) .thread-body > .feed-card.premium-card:not(.media-card) .author-name.gold { color: #06173a !important; }
html:not(#a):not(#b) .thread-body > .feed-card.premium-card:not(.media-card) .replies-counter,
html:not(#a):not(#b) .thread-body > .feed-card.premium-card:not(.media-card) .reaction-bar { background: rgba(110,170,255,.10) !important; }
html:not(#a):not(#b) .thread-body > .feed-card.premium-card:not(.media-card) .post-title { color: #f1f7ff !important; }

/* photo posts: keep the picture, add the gold frame */
html:not(#a):not(#b) .feed-card.jd.premium-card.has-media { background: #080d18 !important; background:
  linear-gradient(#080d18,#080d18) padding-box,
  conic-gradient(from var(--pg-ang), #7db6ff, #3f7be0 25%, #1f3f86 50%, #3f7be0 75%, #7db6ff) border-box !important; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  html:not(#a):not(#b) .feed-card.premium-card { animation: none !important; }
  html:not(#a):not(#b) .feed-card.premium-card::after { animation: none; display: none !important; }
}

/* Premium thread: whole screen goes deep black, OP block gets a glowing gold base line */
html:not(#a):not(#b) #threadScreen.premium-thread { --thread-color: #0a1020; }
html:not(#a):not(#b) .thread-body > .feed-card.premium-card:not(.media-card) {
  position: relative; border-radius: 0 !important; border: 0 !important;
  border-bottom: 2px solid #3f7be0 !important;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(70,130,255,.16), transparent 55%),
    linear-gradient(160deg, #101a2e, #080d18) !important;
  box-shadow: 0 10px 26px -14px rgba(70,140,255,.40) !important;
  animation: pgGlowLine 8s ease-in-out infinite !important;
}
@keyframes pgGlowLine { 0%,100% { box-shadow: 0 10px 24px -14px rgba(60,120,240,.32); } 50% { box-shadow: 0 12px 30px -10px rgba(90,160,255,.50); } }
html:not(#a):not(#b) #threadScreen.premium-thread .thread-replies .reply-card { border: 1px solid rgba(90,150,255,.22) !important; }
html:not(#a):not(#b) #threadScreen.premium-thread .thread-body { background: #0a1020 !important; }
html:not(#a):not(#b) #threadScreen.premium-thread .op-pill { background: linear-gradient(135deg,#d6e9ff,#84bbff 55%,#4b8df0) !important; color: #06173a !important; border: 0 !important; }
html:not(#a):not(#b) .feed-card.premium-card { --accent: #3f7be0 !important; border-left: 1.5px solid transparent !important; }
html:not(#a):not(#b) .feed-card.jd.premium-card { border-left: 1.5px solid transparent !important; }

/* V66 boost rocket sits right beside the name pill */
html:not(#a):not(#b) .feed-card.jd .jd-flag.boost { flex: 0 0 auto; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; padding: 0; font-size: 15px; border-radius: 50%; background: rgba(255,255,255,.22); box-shadow: 0 0 12px rgba(120,180,255,.45); }
html:not(#a):not(#b) .feed-card.jd.premium-card .jd-flag.boost { background: linear-gradient(135deg, rgba(120,180,255,.35), rgba(60,120,240,.35)); border: 1px solid rgba(140,190,255,.55); }
html:not(#a):not(#b) .feed-card.jd .jd-top { flex-wrap: nowrap; }
html:not(#a):not(#b) .feed-card.jd .jd-where { flex: 1 1 0; min-width: 0; overflow: hidden; }
html:not(#a):not(#b) .feed-card.jd .jd-where > span:nth-of-type(1) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
html:not(#a):not(#b) .feed-card.jd .jd-where > span:nth-of-type(2), html:not(#a):not(#b) .feed-card.jd .jd-where > i { flex: 0 0 auto; }
html:not(#a):not(#b) .feed-card.jd .jd-flag.you, html:not(#a):not(#b) .feed-card.jd .post-menu-wrap { flex: 0 0 auto; }
/* crowded row (Premium + rocket + You): keep just the time */

/* ===== V67 Boost stages ===== */
.boost-sheet { position: fixed; inset: 0; z-index: 9999; background: rgba(5,8,18,.62); backdrop-filter: blur(3px); display: flex; align-items: flex-end; justify-content: center; animation: bsFade .18s ease; }
@keyframes bsFade { from { opacity: 0; } }
@keyframes bsUp { from { transform: translateY(24px); opacity: .6; } }
.boost-card { width: 100%; max-width: 520px; background: #111a2e; color: #eaf3ff; border-radius: 22px 22px 0 0; padding: 16px 16px calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 -12px 40px rgba(0,0,0,.45); animation: bsUp .22s ease; }
.boost-head { display: flex; align-items: center; justify-content: space-between; font-size: 18px; }
.boost-x { border: 0; background: rgba(255,255,255,.08); color: inherit; width: 32px; height: 32px; border-radius: 50%; font-size: 14px; }
.boost-sub { margin: 6px 0 12px; font-size: 13px; opacity: .72; }
.boost-stage { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; margin: 0 0 9px; border-radius: 16px; border: 1px solid rgba(120,170,255,.25); background: rgba(70,120,230,.10); color: inherit; font: inherit; }
.boost-stage .bs-ic { font-size: 24px; width: 34px; text-align: center; }
.boost-stage .bs-tx { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.boost-stage .bs-tx b { font-size: 15px; }
.boost-stage .bs-tx small { font-size: 12px; opacity: .7; margin-top: 2px; }
.boost-stage .bs-time { font-size: 12.5px; font-weight: 800; padding: 5px 10px; border-radius: 999px; background: rgba(120,170,255,.18); white-space: nowrap; }
.boost-stage.s2 { border-color: rgba(130,185,255,.5); background: rgba(70,130,255,.18); }
.boost-stage.s3 { border-color: rgba(170,210,255,.75); background: linear-gradient(135deg, rgba(80,140,255,.30), rgba(120,90,255,.22)); box-shadow: 0 0 18px -4px rgba(120,170,255,.55); }
.boost-stage:active { transform: scale(.985); }
.boost-note { margin: 4px 2px 0; font-size: 12px; opacity: .55; text-align: center; }

@keyframes bsPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(120,180,255,.5); } 70% { box-shadow: 0 0 0 9px rgba(120,180,255,0); } }
html:not(#a):not(#b) .feed-card.jd .jd-flag.boost.s1 { box-shadow: 0 0 8px rgba(160,200,255,.35); }
html:not(#a):not(#b) .feed-card.jd .jd-flag.boost.s2 { box-shadow: 0 0 14px rgba(120,180,255,.6); border: 1px solid rgba(160,205,255,.6); }
html:not(#a):not(#b) .feed-card.jd .jd-flag.boost.s3 { width: 34px; height: 34px; font-size: 17px; border: 1.5px solid rgba(200,225,255,.9); background: linear-gradient(135deg, rgba(120,180,255,.55), rgba(140,110,255,.5)); animation: bsPulse 3.4s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { html:not(#a):not(#b) .feed-card.jd .jd-flag.boost.s3 { animation: none; } }

/* V68 free daily boost + paid packs */
.boost-free { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; padding: 13px 14px; margin: 0 0 4px; border-radius: 16px; border: 1px solid rgba(130,190,255,.7); background: linear-gradient(135deg, rgba(80,140,255,.34), rgba(120,90,255,.26)); color: inherit; font: inherit; box-shadow: 0 0 18px -6px rgba(120,170,255,.6); }
.boost-free .bs-ic { font-size: 24px; width: 34px; text-align: center; }
.boost-free .bs-tx { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.boost-free .bs-tx b { font-size: 15px; }
.boost-free .bs-tx small { font-size: 12px; opacity: .75; margin-top: 2px; }
.boost-free .bs-time { font-size: 12px; font-weight: 900; padding: 5px 11px; border-radius: 999px; background: #8fc2ff; color: #06173a; }
.boost-free.off { border-color: rgba(120,170,255,.2); background: rgba(70,120,230,.08); box-shadow: none; opacity: .85; }
.boost-or { display: flex; align-items: center; gap: 10px; margin: 12px 2px 10px; font-size: 12px; opacity: .6; }
.boost-or::before, .boost-or::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.16); }
.boost-stage { opacity: .92; }
.boost-stage .bs-tx small { font-style: normal; }

/* V73 — every post carries its location */
html:not(#a):not(#b) .feed-card.jd .jd-loc { display:flex; align-items:center; gap:5px; margin:2px 0 6px; font-size:12.5px; font-weight:600; opacity:.85; min-width:0; color:inherit; }
html:not(#a):not(#b) .feed-card.jd .jd-loc svg { width:13px; height:13px; flex:0 0 auto; }
html:not(#a):not(#b) .feed-card.jd .jd-loc span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
html:not(#a):not(#b) .feed-card.jd.has-media .jd-loc { color:#fff !important; }
html:not(#a):not(#b) .feed-card.premium-card .jd-loc { color:#cfe0ff !important; }

/* V74 — Jodel-style nav pill, location panel, pins */
html:not(#a):not(#b) .bottom-nav-item.active { background: transparent !important; }
html:not(#a):not(#b) .bottom-nav-item.active .nav-icon {
  background: linear-gradient(135deg,#5b4be0,#7a6cff) !important; color:#fff !important;
  width: 74px; height: 40px; border-radius: 999px !important; display:flex; align-items:center; justify-content:center;
  margin: -6px auto 0; box-shadow: 0 8px 18px rgba(91,75,224,.32); transform: none;
}
html:not(#a):not(#b) .bottom-nav-item.active .nav-icon .ni { stroke:#fff; }
html:not(#a):not(#b) .bottom-nav-item.active { color: var(--ink,#111) !important; font-weight: 800; }
[data-theme="dark"] html:not(#a):not(#b) .bottom-nav-item.active .nav-icon { background: linear-gradient(135deg,#c6f432,#a4d81a) !important; }
[data-theme="dark"] .bottom-nav-item.active .nav-icon .ni { stroke:#0b1220 !important; }
.loc-caret { flex:0 0 auto; margin-left:4px; opacity:.6; transition: transform .2s; }
.location-pill.open .loc-caret { transform: rotate(180deg); }
.loc-sheet { position:fixed; inset:0; z-index:9998; background:rgba(5,8,18,.45); animation: bsFade .15s ease; }
.loc-panel { position:absolute; top:calc(env(safe-area-inset-top,0px) + 62px); left:0; right:0; max-height:78vh; overflow:auto; background:var(--card,#fff); color:var(--ink,#111); border-radius:0 0 22px 22px; padding:6px 0 18px; box-shadow:0 18px 40px rgba(0,0,0,.25); }
.loc-head { display:flex; align-items:center; gap:12px; padding:14px 18px 6px; font-weight:800; font-size:15px; opacity:.6; }
.loc-head i { flex:1; height:2px; background:rgba(128,128,150,.2); }
.loc-row { display:flex; align-items:center; gap:14px; width:100%; padding:12px 18px; background:none; border:0; border-bottom:1px solid rgba(128,128,150,.15); text-align:left; color:inherit; font:inherit; }
.loc-row .loc-main { display:flex; align-items:center; gap:14px; flex:1; background:none; border:0; color:inherit; font:inherit; text-align:left; padding:0; }
.loc-ic { width:44px; height:44px; border-radius:50%; background:#2b2d3a; display:grid; place-items:center; font-size:20px; flex:0 0 auto; }
.loc-ic.on { background:#5b4be0; }
.loc-tx { display:flex; flex-direction:column; min-width:0; flex:1; }
.loc-tx b { font-size:17px; } .loc-tx small { opacity:.65; font-size:13px; }
.loc-row.here b { color:#5b4be0; }
.loc-chev { font-size:22px; opacity:.5; }
.loc-mini { border:0; border-radius:999px; padding:8px 14px; background:rgba(128,128,150,.16); color:inherit; font-weight:700; font-size:13px; }
.loc-note { padding:6px 18px 4px; font-size:13.5px; line-height:1.45; opacity:.75; }
.loc-zones { display:flex; flex-wrap:wrap; gap:8px; padding:10px 18px 4px; }
.loc-zones.hidden { display:none; }
.loc-zones button { border:1.5px solid rgba(91,75,224,.35); background:none; color:inherit; border-radius:999px; padding:8px 14px; font-weight:700; font-size:14px; }
html:not(#a):not(#b) .loc-panel { background:#fff !important; color:#121528 !important; }
html[data-theme="dark"]:not(#a):not(#b) .loc-panel { background:#131c30 !important; color:#eef2ff !important; }
html:not(#a):not(#b) .loc-panel .loc-tx b, html:not(#a):not(#b) .loc-panel .loc-tx small, html:not(#a):not(#b) .loc-panel .loc-note, html:not(#a):not(#b) .loc-panel .loc-head, html:not(#a):not(#b) .loc-panel .loc-mini, html:not(#a):not(#b) .loc-panel .loc-zones button { color: inherit !important; }
html:not(#a):not(#b) .loc-panel .loc-row.here .loc-tx b { color:#5b4be0 !important; }
html[data-theme="dark"]:not(#a):not(#b) .loc-panel .loc-row.here .loc-tx b { color:#c6f432 !important; }
html:not(#a):not(#b) .loc-panel .loc-ic { color:#fff; }
html[data-theme="dark"]:not(#a):not(#b) .bottom-nav-item.active .nav-icon { background: linear-gradient(135deg,#c6f432,#a4d81a) !important; box-shadow:0 8px 18px rgba(198,244,50,.25); }
html[data-theme="dark"]:not(#a):not(#b) .bottom-nav-item.active .nav-icon .ni { stroke:#0b1220 !important; }
html[data-theme="dark"]:not(#a):not(#b) .bottom-nav-item.active { color:#fff !important; }

/* V76 — Channels page as a clean list (title, search, SUGGESTIONS rows with +) */
html:not(#a):not(#b) .ch-heading { padding: 6px 4px 0; margin: 0 0 8px; }
html:not(#a):not(#b) .ch-heading h2 { font-size: 22px; font-weight: 800; margin: 0; color:#5b4be0; }
html:not(#a):not(#b) .ch-search { display:flex; align-items:center; gap:12px; padding:0 16px; height:52px; border-radius:16px; background:rgba(128,128,150,.14); color:inherit; margin:6px 0 10px; }
html:not(#a):not(#b) .ch-search input { flex:1; border:0; outline:0; background:none; font:inherit; font-size:17px; color:inherit; min-width:0; }
html:not(#a):not(#b) .ch-search svg { opacity:.6; flex:0 0 auto; }
html:not(#a):not(#b) .ch-label { font-size:13px; font-weight:800; letter-spacing:.22em; opacity:.55; padding:14px 6px 10px; }
html:not(#a):not(#b) .community-grid { display:block !important; }
html:not(#a):not(#b) .ch-list { background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 1px 0 rgba(0,0,0,.04); }
html[data-theme="dark"]:not(#a):not(#b) .ch-list { background:#131c30; }
html:not(#a):not(#b) .ch-row { display:flex; align-items:center; gap:16px; width:100%; padding:14px 16px; background:none; border:0; border-bottom:1px solid rgba(128,128,150,.18); color:inherit; text-align:left; font:inherit; }
html:not(#a):not(#b) .ch-row:last-child { border-bottom:0; }
html:not(#a):not(#b) .ch-ic { font-size:30px; width:38px; text-align:center; flex:0 0 auto; }
html:not(#a):not(#b) .ch-tx { display:flex; flex-direction:column; flex:1; min-width:0; }
html:not(#a):not(#b) .ch-tx b { font-size:20px; font-weight:600; }
html:not(#a):not(#b) .ch-tx small { font-size:15px; opacity:.65; }
html:not(#a):not(#b) .ch-plus { width:64px; height:48px; border-radius:12px; background:#5b4be0; color:#fff; font-size:32px; font-weight:700; display:grid; place-items:center; flex:0 0 auto; line-height:1; }
html[data-theme="dark"]:not(#a):not(#b) .ch-plus { background:#c6f432; color:#0b1220; }
html:not(#a):not(#b) #explorePage .explorer-tools { margin: 2px 0 0; }
html:not(#a):not(#b) #explorePage .vibe-card { margin-top: 22px; }

/* V79 — Channels: smaller, youthful, professional controls */
html:not(#a):not(#b) #explorePage { padding-left:14px; padding-right:14px; }
html:not(#a):not(#b) .ch-heading h2 { font-size:19px; }
html:not(#a):not(#b) .ch-search { height:40px; border-radius:12px; padding:0 12px; gap:9px; margin:4px 0 8px; }
html:not(#a):not(#b) .ch-search input { font-size:14px; }
html:not(#a):not(#b) .ch-search svg { width:17px; height:17px; }
html:not(#a):not(#b) #explorePage .explorer-tools { display:flex; gap:7px; flex-wrap:nowrap; overflow-x:auto; }
html:not(#a):not(#b) #explorePage .explorer-filter { font-size:12.5px; font-weight:700; padding:6px 12px; min-height:0; height:32px; border-radius:999px; }
html:not(#a):not(#b) .ch-label { font-size:11px; padding:12px 4px 7px; }
html:not(#a):not(#b) .ch-list { border-radius:14px; }
html:not(#a):not(#b) .ch-row { padding:9px 12px; gap:12px; }
html:not(#a):not(#b) .ch-ic { font-size:20px; width:28px; }
html:not(#a):not(#b) .ch-tx b { font-size:15px; font-weight:700; }
html:not(#a):not(#b) .ch-tx small { font-size:12px; }
html:not(#a):not(#b) .ch-plus { width:34px; height:30px; border-radius:9px; font-size:20px; }
html:not(#a):not(#b) #explorePage .vibe-card { margin-top:16px; padding:14px; border-radius:16px; }
html:not(#a):not(#b) #explorePage .vibe-card h3 { font-size:16px; margin:2px 0; }
html:not(#a):not(#b) #explorePage .vibe-card p { font-size:12.5px; margin:0 0 8px; }
html:not(#a):not(#b) #explorePage .intention-grid { gap:6px; }
html:not(#a):not(#b) #explorePage .intention-grid button { min-height:0 !important; height:auto; padding:7px 8px !important; border-radius:10px !important; font-size:12.5px; display:flex; flex-direction:row; align-items:center; justify-content:center; gap:6px; }
html:not(#a):not(#b) #explorePage .intention-grid button * { font-size:inherit; }
html:not(#a):not(#b) .ch-heading { padding-top:12px; }

/* V80 */
.scam-warn { margin:8px 0 0; padding:8px 10px; border-radius:10px; font-size:12.5px; line-height:1.4; font-weight:600; background:rgba(245,166,35,.16); color:#9a5b00; border:1px solid rgba(245,166,35,.45); }
[data-theme="dark"] .scam-warn { color:#ffd48a; }
.road-tags { display:flex; gap:6px; overflow-x:auto; padding:2px 0 8px; }
.road-tags.hidden { display:none; }
.road-tags button { flex:0 0 auto; border:1.5px solid rgba(91,75,224,.35); background:none; color:inherit; border-radius:999px; padding:5px 11px; font-size:12px; font-weight:700; }
#profileStreak { margin:2px 0 0; font-weight:700; }
#langSel{border:1.5px solid rgba(128,128,150,.35);background:none;color:inherit;border-radius:10px;padding:6px 8px;font-weight:700;margin-left:auto}

/* V82 — Post of the day */
.potd-card { display:block; width:100%; text-align:left; margin:0 0 10px; padding:12px 14px; border-radius:16px; border:1.5px solid rgba(245,180,40,.55); background:linear-gradient(135deg,rgba(245,180,40,.16),rgba(245,180,40,.04)); color:inherit; font:inherit; }
.potd-card .potd-badge { display:inline-block; font-size:11px; font-weight:800; letter-spacing:.12em; color:#b97800; margin-bottom:4px; }
[data-theme="dark"] .potd-card .potd-badge { color:#ffcf6b; }
.potd-card p { margin:0 0 6px; font-size:15px; font-weight:600; line-height:1.4; }
.potd-card small { opacity:.7; font-size:12px; font-weight:600; }
.potd-img{display:block;width:100%;max-height:200px;object-fit:cover;border-radius:12px;margin:6px 0 8px}

/* V84 — compact language switch */
#langSel { display:none !important; }
html:not(#a):not(#b) #langPick small { white-space:nowrap; }
html:not(#a):not(#b) .lang-seg { display:inline-flex; margin-left:auto; padding:3px; gap:2px; border-radius:999px; background:rgba(128,128,150,.18); flex:0 0 auto; }
html:not(#a):not(#b) .lang-seg button { border:0; background:none; color:inherit; font:inherit; font-size:12px; font-weight:700; padding:5px 10px; border-radius:999px; opacity:.7; }
html:not(#a):not(#b) .lang-seg button.on { background:#5b4be0; color:#fff; opacity:1; box-shadow:0 2px 6px rgba(91,75,224,.35); }
html[data-theme="dark"]:not(#a):not(#b) .lang-seg button.on { background:#c6f432; color:#0b1220; }

/* V85 — category picker */
html:not(#a):not(#b) .cat-trigger { display:flex; align-items:center; gap:10px; width:100%; height:48px; padding:0 14px 0 8px; border-radius:14px; border:1.5px solid rgba(128,128,150,.28); background:rgba(128,128,150,.08); color:inherit; font:inherit; font-weight:700; font-size:15px; text-align:left; }
html:not(#a):not(#b) .cat-trigger svg { margin-left:auto; opacity:.55; }
html:not(#a):not(#b) .cat-dot { width:32px; height:32px; border-radius:10px; display:grid; place-items:center; font-size:17px; background:color-mix(in srgb, var(--t,#7c8cff) 22%, transparent); flex:0 0 auto; }
.cat-sheet { position:fixed; inset:0; z-index:10000; background:rgba(5,8,18,.55); backdrop-filter:blur(3px); display:flex; align-items:flex-end; animation:bsFade .15s ease; }
html:not(#a):not(#b) .cat-panel { width:100%; max-height:76vh; overflow:auto; background:#fff; color:#121528; border-radius:24px 24px 0 0; padding:10px 16px calc(18px + env(safe-area-inset-bottom,0px)); }
html[data-theme="dark"]:not(#a):not(#b) .cat-panel { background:#131c30; color:#eef2ff; }
.cat-grab { display:block; width:40px; height:4px; border-radius:4px; background:rgba(128,128,150,.4); margin:2px auto 10px; }
.cat-panel h4 { margin:0 0 12px; font-size:15px; font-weight:800; opacity:.75; }
.cat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
html:not(#a):not(#b) .cat-tile { display:flex; flex-direction:column; align-items:center; gap:7px; padding:12px 6px; border-radius:16px; border:1.5px solid transparent; background:rgba(128,128,150,.1); color:inherit; font:inherit; font-size:12.5px; font-weight:700; text-align:center; line-height:1.2; }
html:not(#a):not(#b) .cat-tile .cat-dot { width:40px; height:40px; font-size:21px; border-radius:13px; }
html:not(#a):not(#b) .cat-tile.on { border-color:var(--t); background:color-mix(in srgb, var(--t) 14%, transparent); box-shadow:0 4px 14px color-mix(in srgb, var(--t) 28%, transparent); }

/* =========================================================
   V86 — polish pass: calmer, cleaner, youthful & consistent
   ========================================================= */
html:not(#a):not(#b) .karma-level-card:empty { display:none !important; }

/* page headings: one rhythm everywhere */
html:not(#a):not(#b) .page-heading { margin:6px 0 14px; }
html:not(#a):not(#b) .page-heading h2 { font-size:24px; letter-spacing:-.02em; margin:2px 0 4px; }
html:not(#a):not(#b) .page-heading p { font-size:13.5px; opacity:.7; margin:0; }
html:not(#a):not(#b) .page-eyebrow { font-size:11px; letter-spacing:.16em; font-weight:800; }

/* Home: less crowded top area */
html:not(#a):not(#b) #homePage .feed-tab { font-size:15px; padding:10px 0; }
html:not(#a):not(#b) .category-chip { font-size:13px; padding:7px 13px; min-height:0; border-radius:999px; }
html:not(#a):not(#b) .prompt-card { padding:11px 13px; border-radius:16px; }
html:not(#a):not(#b) .prompt-card strong { font-size:15px; }
html:not(#a):not(#b) .prompt-card button { padding:8px 14px; font-size:13px; border-radius:999px; }
html:not(#a):not(#b) .trend-head { font-size:13px; font-weight:800; margin:12px 0 6px; }
html:not(#a):not(#b) .trend-card { padding:10px 12px; border-radius:14px; font-size:13.5px; }
html:not(#a):not(#b) .potd-card { border-radius:16px; }

/* feed cards: softer, consistent radius & shadow */
html:not(#a):not(#b) .feed-card { border-radius:18px; }

/* profile & menu rows: tighter, friendlier */
html:not(#a):not(#b) .profile-menu { display:flex; flex-direction:column; gap:8px; }
html:not(#a):not(#b) .profile-menu-item { padding:11px 13px; border-radius:16px; }
html:not(#a):not(#b) .profile-menu-item strong { font-size:15px; }
html:not(#a):not(#b) .profile-menu-item small { font-size:12px; opacity:.65; }
html:not(#a):not(#b) .menu-icon { width:38px; height:38px; border-radius:12px; font-size:18px; }
html:not(#a):not(#b) .profile-header-card { border-radius:22px; padding:16px; }

/* empty states: friendly instead of bare */
html:not(#a):not(#b) #notificationsContainer:empty::before,
html:not(#a):not(#b) #chatsContainer:empty::before { display:block; text-align:center; padding:56px 20px; font-weight:700; font-size:15px; opacity:.6; white-space:pre-line; line-height:1.7; }
html:not(#a):not(#b) #notificationsContainer:empty::before { content:"🔔\A You're all caught up\A Votes and replies will show up here."; }
html:not(#a):not(#b) #chatsContainer:empty::before { content:"💬\A No chats yet\A Tap ••• on any post to say hi."; }
html:not(#a):not(#b) .empty-state { padding:44px 20px; }
html:not(#a):not(#b) .empty-state-icon { font-size:40px; }
html:not(#a):not(#b) .empty-state h3 { font-size:17px; }
html:not(#a):not(#b) .empty-state p { font-size:13.5px; opacity:.7; }

/* buttons: one shape language (pills, soft) */
html:not(#a):not(#b) .btn-ghost, html:not(#a):not(#b) .btn-primary, html:not(#a):not(#b) .btn-green { border-radius:999px; font-weight:700; }
html:not(#a):not(#b) .fab, html:not(#a):not(#b) #createPostButton { border-radius:20px; }
html:not(#a):not(#b) input.switch:checked { background:#5b4be0 !important; }
html[data-theme="dark"]:not(#a):not(#b) input.switch:checked { background:#c6f432 !important; }
html:not(#a):not(#b) .profile-menu-item.premium-item strong, html:not(#a):not(#b) #premiumMenuButton strong { font-size:15px !important; }
html:not(#a):not(#b) .profile-menu-item.premium-item small, html:not(#a):not(#b) #premiumMenuButton small { font-size:12px !important; }
html:not(#a):not(#b) .profile-premium-button { border-radius:16px; padding:11px 13px; }
html:not(#a):not(#b) .profile-premium-button strong { font-size:15px !important; }
html:not(#a):not(#b) .profile-premium-button small { font-size:12px !important; }

/* V87 — compact modern post cards + category chip with icon */
html:not(#a):not(#b) .feed-card.jd { padding:12px 14px 10px !important; margin-bottom:10px !important; border-radius:18px !important; min-height:0 !important; }
html:not(#a):not(#b) .feed-card.jd .jd-top { margin-bottom:2px; min-height:0; }
html:not(#a):not(#b) .feed-card.jd .alias-pill { font-size:13px !important; padding:3px 9px !important; }
html:not(#a):not(#b) .feed-card.jd .jd-where { font-size:12px !important; }
html:not(#a):not(#b) .feed-card.jd .jd-loc { display:flex; align-items:center; flex-wrap:wrap; gap:6px 8px; margin:4px 0 8px; font-size:12px; }
html:not(#a):not(#b) .feed-card.jd .jd-cat { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:999px; font-weight:800; font-size:12px; color:var(--cc,#5b4be0); background:color-mix(in srgb, var(--cc,#5b4be0) 14%, transparent); }
html:not(#a):not(#b) .feed-card.jd .jd-place { display:inline-flex; align-items:center; gap:4px; opacity:.75; font-weight:600; }
html:not(#a):not(#b) .feed-card.jd .jd-place svg { width:12px; height:12px; }
html:not(#a):not(#b) .feed-card.jd.has-media .jd-cat { color:#fff; background:rgba(255,255,255,.22); }
html:not(#a):not(#b) .feed-card.jd .jd-tag { display:none !important; }
html:not(#a):not(#b) .feed-card.jd .post-title { font-size:16px !important; line-height:1.4 !important; margin:0 0 6px !important; }
html:not(#a):not(#b) .feed-card.jd .jd-extra { display:inline-block; font-size:13px !important; font-weight:800; padding:3px 10px; margin:2px 0 6px; border-radius:999px; background:rgba(128,128,150,.14); }
html:not(#a):not(#b) .feed-card.jd .jd-foot { margin-top:4px; gap:14px; }
html:not(#a):not(#b) .feed-card.jd .jd-count { font-size:13px !important; }
html:not(#a):not(#b) .feed-card.jd .jd-count svg { width:18px; height:18px; }
html:not(#a):not(#b) .feed-card.jd .jd-vote .vote-btn svg, html:not(#a):not(#b) .feed-card.jd .jd-vote .vote-btn { width:26px; height:26px; }
html:not(#a):not(#b) .feed-card.jd .jd-vote .vote-score { font-size:16px !important; }
html:not(#a):not(#b) .feed-card.jd .poll-row { padding:8px 12px; font-size:14px; border-radius:12px; }
html:not(#a):not(#b) .feed-card.jd.premium-card .jd-cat { color:#cfe0ff; background:rgba(143,194,255,.16); }

/* =========================================================
   V91 — smooth + premium dark, every screen size
   ========================================================= */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body { min-height: 100vh; min-height: 100dvh; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overscroll-behavior-y: none; }
img, video { max-width: 100%; }
.page, .modal-sheet, .cat-sheet, .chat-body, .thread-body { overscroll-behavior: contain; }

/* motion tokens */
:root { --ease: cubic-bezier(.22,.8,.24,1); --spring: cubic-bezier(.34,1.45,.5,1); --t-fast: .16s; --t-med: .28s; }

/* one calm transition for everything you touch */
button, a, .feed-card, .jd, .ch-row, .cat-tile, .profile-menu-item, .category-chip, .chip, .seg, .lang-seg button,
.bottom-nav-item, .nav-icon, .switch, .icon-button, .btn, .btn-primary, .btn-ghost, input, textarea, select {
  transition: background-color var(--t-med) var(--ease), color var(--t-med) var(--ease), border-color var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease), transform var(--t-fast) var(--ease), opacity var(--t-med) var(--ease);
}
button:active, .ch-row:active, .cat-tile:active, .profile-menu-item:active, .category-chip:active, .btn:active, .btn-primary:active { transform: scale(.97); }
.feed-card:active { transform: scale(.992); }
.fab-create:active { transform: translateX(-50%) scale(.92) !important; }
:focus { outline: none; }
:focus-visible { outline: 2px solid #c6f432; outline-offset: 2px; border-radius: 10px; }

/* the whole app glides between light and dark instead of snapping */
html.tk-theming, html.tk-theming *, html.tk-theming *::before, html.tk-theming *::after { transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease, fill .35s ease !important; }

/* feed cards ease in, one after another */
@keyframes tkRise { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.feed-card { animation: tkRise .42s var(--ease) both; }
.feed-card:nth-child(2) { animation-delay: .04s; } .feed-card:nth-child(3) { animation-delay: .08s; }
.feed-card:nth-child(4) { animation-delay: .12s; } .feed-card:nth-child(n+5) { animation-delay: .16s; }
@keyframes tkPop { 0% { transform: scale(1); } 40% { transform: scale(1.28); } 100% { transform: scale(1); } }
.vote-btn.active, .jd-vote .active { animation: tkPop .32s var(--spring); }

/* sheets and pickers rise with a soft spring */
@keyframes tkSheet { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-sheet, .cat-sheet { animation: tkSheet .34s var(--ease) both; }
.modal-backdrop, .cat-backdrop, .modal { animation: tkFade .25s ease both; }
@keyframes tkFade { from { opacity: 0; } to { opacity: 1; } }

/* thin, quiet scrollbars */
* { scrollbar-width: thin; scrollbar-color: rgba(127,127,150,.35) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: rgba(127,127,150,.35); border-radius: 8px; } ::-webkit-scrollbar-track { background: transparent; }

/* ---------- every screen size ---------- */
.fab-create, .bottom-nav { will-change: transform; }
@media (max-width: 360px) {
  .feed-card { border-radius: 20px; } .jd-body { font-size: 16px; }
  .bottom-nav-item span { font-size: 10px; }
}
/* tablets + desktop: calm centered app column with the glow around it */
@media (min-width: 700px) {
  html[data-theme="dark"]:not(#a):not(#b) body { background-attachment: fixed !important; }
  body { background-color: var(--page, #f2f5fb); }
  #app { max-width: 640px; margin-left: auto; margin-right: auto; box-shadow: 0 0 0 1px rgba(127,127,150,.12), 0 30px 90px rgba(0,0,0,.18); min-height: 100vh; min-height: 100dvh; position: relative; }
  html[data-theme="dark"]:not(#a):not(#b) #app { box-shadow: 0 0 0 1px var(--line), 0 40px 120px rgba(0,0,0,.6); }
  html:not(#a):not(#b) .top-header { left: calc(50% - 320px) !important; right: auto !important; width: 640px !important; transform: none !important; }
  html:not(#a):not(#b) .bottom-nav { left: calc(50% - 310px) !important; right: auto !important; width: 620px !important; transform: none !important; }
  .fab-create { margin-left: 0; }
}

@media (hover: none) { .feed-card:hover, .ch-row:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* the + post button stays out of the way on settings-style screens */
body:has(#profilePage.active) .fab-create, body:has(#premiumPage.active) .fab-create { opacity: 0; pointer-events: none; transform: translateX(-50%) scale(.8); }

/* V95b — same look, a little calmer: softer lime, gentler glows (dark only) */
html[data-theme="dark"]:not(#a):not(#b) { --lime: #a9cf4a; }
html[data-theme="dark"]:not(#a):not(#b) .sort-thumb, html[data-theme="dark"]:not(#a):not(#b) .prompt-card button, html[data-theme="dark"]:not(#a):not(#b) .ch-plus,
html[data-theme="dark"]:not(#a):not(#b) .lang-seg button.on, html[data-theme="dark"]:not(#a):not(#b) #createPostForm .publish-button,
html[data-theme="dark"]:not(#a):not(#b) .chat-screen .chat-composer .btn-primary, html[data-theme="dark"]:not(#a):not(#b) .thread-screen #threadReplySend,
html[data-theme="dark"]:not(#a):not(#b) .chat-accept .btn-primary { background: #a9cf4a !important; color: #0c1220 !important; box-shadow: none !important; }
html[data-theme="dark"]:not(#a):not(#b) .fab-create { background: linear-gradient(180deg,#b5d955,#9cc23f) !important; color: #0c1220 !important; border: 0 !important; box-shadow: 0 8px 20px rgba(0,0,0,.4), 0 0 0 5px rgba(169,207,74,.08) !important; }
html[data-theme="dark"]:not(#a):not(#b) .bottom-nav-item.active .nav-icon { background: linear-gradient(135deg,#b0d44f,#98bf3d) !important; box-shadow: 0 4px 12px rgba(0,0,0,.3) !important; }
html[data-theme="dark"]:not(#a):not(#b) input.switch:checked { background: #8fb83f !important; }
html[data-theme="dark"]:not(#a):not(#b) .feed-tabs .feed-tab.active { border-bottom-color: #a9cf4a !important; }
html[data-theme="dark"]:not(#a):not(#b) .pulse-dot { background: #a9cf4a !important; box-shadow: none !important; }
html[data-theme="dark"]:not(#a):not(#b) .prompt-card, html[data-theme="dark"]:not(#a):not(#b) .vibe-card { border-left-color: #a9cf4a !important; }
html[data-theme="dark"]:not(#a):not(#b) .feed-card, html[data-theme="dark"]:not(#a):not(#b) .profile-menu-item { box-shadow: 0 6px 18px rgba(0,0,0,.28) !important; }

/* V97 — dark posts: clean flat card + one curved coloured edge (same idea as light mode) */
html[data-theme="dark"]:not(#a):not(#b) .feed-card.jd {
  background: #131a2e !important; background-image: none !important;
  border: 1px solid rgba(255,255,255,.06) !important; border-radius: 24px !important;
  box-shadow: inset 5px 0 0 var(--accent, #8b7df2), 0 10px 26px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.04) !important;
  animation: tkRise .42s var(--ease) both !important;
}
html[data-theme="dark"]:not(#a):not(#b) .feed-card.jd::before, html[data-theme="dark"]:not(#a):not(#b) .feed-card.jd::after { display: none !important; }
html[data-theme="dark"]:not(#a):not(#b) .feed-card.jd.premium-card {
  --accent: #d9b24a; background: #17182a !important; border: 1px solid rgba(217,178,74,.18) !important;
  box-shadow: inset 5px 0 0 #d9b24a, 0 10px 26px rgba(0,0,0,.34) !important;
}
html[data-theme="dark"]:not(#a):not(#b) .feed-card.jd.boosted-card { animation: tkRise .42s var(--ease) both !important; }
html[data-theme="dark"]:not(#a):not(#b) .feed-card.jd:active { background: #172038 !important; }
html[data-theme="dark"]:not(#a):not(#b) .feed-card.jd .jd-cat { background: color-mix(in srgb, var(--cc, #8b7df2) 15%, transparent) !important; color: color-mix(in srgb, var(--cc, #8b7df2) 80%, #fff) !important; }
html[data-theme="dark"]:not(#a):not(#b) .feed-card.jd .jd-body { color: #eef1f8 !important; }
html[data-theme="dark"]:not(#a):not(#b) .feed-card.jd .jd-place { color: #9aa5bd !important; }

/* V99 — Post of the day: its own colour (aurora teal) nobody else uses */
html:not(#a):not(#b) .potd-card {
  position: relative; overflow: hidden; isolation: isolate; border: 1.5px solid transparent !important; border-radius: 20px !important; padding: 16px 18px !important; margin: 0 0 14px !important;
  background:
    linear-gradient(150deg, #ecfeff 0%, #f4fbff 55%, #eef2ff 100%) padding-box,
    linear-gradient(120deg, #06b6d4, #3b82f6 45%, #8b5cf6) border-box !important;
  box-shadow: 0 10px 30px rgba(6,182,212,.18) !important; color: #0b1b2b !important;
}
html[data-theme="dark"]:not(#a):not(#b) .potd-card {
  background:
    linear-gradient(150deg, #0d2a36 0%, #0f1f3a 60%, #1a1640 100%) padding-box,
    linear-gradient(120deg, #22d3ee, #5b8cff 50%, #9a7bff) border-box !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.4), 0 0 0 1px rgba(34,211,238,.08) !important; color: #eaf7fb !important;
}
html:not(#a):not(#b) .potd-card::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent); transform: skewX(-18deg); animation: potdShine 7s ease-in-out 1.5s infinite;
}
@keyframes potdShine { 0%, 70% { left: -60%; } 100% { left: 130%; } }
html:not(#a):not(#b) .potd-card > * { position: relative; z-index: 1; }
html:not(#a):not(#b) .potd-card .potd-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; margin: 0 0 10px; border-radius: 999px; font-size: 10.5px; font-weight: 900; letter-spacing: .14em;
  color: #fff !important; background: linear-gradient(120deg, #06b6d4, #4f7cff 60%, #8b5cf6); box-shadow: 0 6px 16px rgba(60,120,255,.35);
}
html:not(#a):not(#b) .potd-card p { font-size: 17px; font-weight: 700; line-height: 1.38; letter-spacing: -.01em; color: inherit; }
html:not(#a):not(#b) .potd-card small { opacity: .75; font-size: 12.5px; font-weight: 700; color: inherit; }
html[data-theme="dark"]:not(#a):not(#b) .potd-card small { color: #9fd6e6; opacity: 1; }
@media (prefers-reduced-motion: reduce) { html:not(#a):not(#b) .potd-card::after { animation: none; display: none; } }

/* V100 — pin counter in the post footer; dark cards share the page colour */
.feed-card.jd .jd-foot .jd-pin { margin-left: 0; }
.feed-card.jd .jd-pin.active { color: var(--accent, #7c5cff); }
.feed-card.jd .jd-pin.active .jd-ic { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent, #7c5cff) 55%, transparent)); }
.feed-card.jd .jd-pin:active .jd-ic { animation: tkPop .32s var(--spring); }
html[data-theme="dark"]:not(#a):not(#b) .feed-card.jd {
  background: #0c1220 !important; background-image: none !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  box-shadow: inset 5px 0 0 var(--accent, #8b7df2), 0 6px 18px rgba(0,0,0,.25) !important;
}
html[data-theme="dark"]:not(#a):not(#b) .feed-card.jd.premium-card { background: #0c1220 !important; border-color: rgba(217,178,74,.28) !important; box-shadow: inset 5px 0 0 #d9b24a, 0 6px 18px rgba(0,0,0,.25) !important; }
html[data-theme="dark"]:not(#a):not(#b) .feed-card.jd:active { background: #101830 !important; }

/* V102 — save-account nudge + recovery share buttons */
.save-nudge { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 12px 12px 12px 14px; border-radius: 18px; background: linear-gradient(135deg, rgba(124,108,255,.14), rgba(124,108,255,.05)); border: 1px solid rgba(124,108,255,.35); }
.save-nudge .sn-ic { font-size: 24px; }
.save-nudge div { flex: 1; min-width: 0; }
.save-nudge strong { display: block; font-size: 14px; font-weight: 800; }
.save-nudge small { display: block; font-size: 12px; opacity: .75; line-height: 1.3; margin-top: 2px; }
.save-nudge button[data-save-account] { padding: 9px 16px; border-radius: 999px; border: 0; font-weight: 800; font-size: 13px; background: #6a4cff; color: #fff; }
.save-nudge .sn-x { background: none; border: 0; font-size: 22px; opacity: .55; padding: 4px 8px; color: inherit; }
html[data-theme="dark"] .save-nudge { background: linear-gradient(135deg, rgba(139,125,242,.18), rgba(139,125,242,.06)); }
.rec-save { display: grid; gap: 8px; margin-top: 8px; }
.rec-save .reply-act { display: block; text-align: center; text-decoration: none; padding: 12px; border-radius: 14px; font-weight: 800; }

/* V103 premium renewal notice */
.renew-nudge { background: linear-gradient(135deg, rgba(212,175,55,.2), rgba(212,175,55,.06)); border-color: rgba(212,175,55,.5); }
.renew-nudge button[data-renew-premium] { padding: 9px 16px; border-radius: 999px; border: 0; font-weight: 800; font-size: 13px; background: #d4af37; color: #1a1400; }

/* =====================================================================
   V104 — Premium is GOLD (replaces the blue premium look, light + dark)
   ===================================================================== */
@keyframes pgGlow { 0%,100% { box-shadow: 0 0 0 1px rgba(214,170,60,.20), 0 8px 22px -10px rgba(214,170,60,.38); } 50% { box-shadow: 0 0 0 1px rgba(236,200,100,.34), 0 10px 28px -8px rgba(226,184,72,.50); } }
@keyframes pgGlowLine { 0%,100% { box-shadow: 0 10px 24px -14px rgba(214,170,60,.34); } 50% { box-shadow: 0 12px 30px -10px rgba(236,200,100,.52); } }
html:not(#a):not(#b) .feed-card.premium-card,
html[data-theme="dark"]:not(#a):not(#b) .feed-card.jd.premium-card {
  --accent: #d9b24a !important;
  border: 1.5px solid transparent !important;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(226,184,72,.16), transparent 55%),
    linear-gradient(160deg, #1b1710 0%, #0e0c08 100%) padding-box,
    conic-gradient(from var(--pg-ang), #f5dc8a, #d9b24a 25%, #8a6a1c 50%, #d9b24a 75%, #f5dc8a) border-box !important;
  color: #fbf3dc !important;
  animation: pgSpin 18s linear infinite, pgGlow 8s ease-in-out infinite !important;
}
html:not(#a):not(#b) .feed-card.premium-card::after {
  background: linear-gradient(115deg, transparent 38%, rgba(255,226,140,.09) 50%, transparent 62%);
  background-size: 260% 100%;
}
html[data-theme="dark"]:not(#a):not(#b) .feed-card.jd.premium-card::after { display: block !important; }
html:not(#a):not(#b) .feed-card.jd.premium-card.has-media,
html[data-theme="dark"]:not(#a):not(#b) .feed-card.jd.premium-card.has-media {
  background: linear-gradient(#0e0c08,#0e0c08) padding-box,
    conic-gradient(from var(--pg-ang), #f5dc8a, #d9b24a 25%, #8a6a1c 50%, #d9b24a 75%, #f5dc8a) border-box !important;
}
html:not(#a):not(#b) .feed-card.premium-card .alias-pill,
html:not(#a):not(#b) .feed-card.premium-card .author-name.gold,
html:not(#a):not(#b) #threadScreen.premium-thread .op-pill {
  background: linear-gradient(135deg, #fbeaa6, #e2b948 55%, #b88a1e) !important;
  color: #2a1d00 !important; border: 0 !important; font-weight: 900 !important;
  box-shadow: 0 0 12px rgba(226,184,72,.40);
}
html:not(#a):not(#b) .feed-card.premium-card .post-title,
html:not(#a):not(#b) .feed-card.jd.premium-card .post-title { color: #fff8e4 !important; text-shadow: 0 1px 12px rgba(226,184,72,.18); }
html:not(#a):not(#b) .feed-card.premium-card .jd-tag,
html:not(#a):not(#b) .feed-card.premium-card .tag-chip { color: #ecc766 !important; }
html:not(#a):not(#b) .feed-card.premium-card .jd-where,
html:not(#a):not(#b) .feed-card.premium-card .post-meta-sub,
html:not(#a):not(#b) .feed-card.premium-card .jd-count,
html:not(#a):not(#b) .feed-card.premium-card .jd-count b,
html:not(#a):not(#b) .feed-card.premium-card .card-options-trigger,
html:not(#a):not(#b) .feed-card.premium-card .replies-counter,
html:not(#a):not(#b) .feed-card.premium-card .jd-loc { color: #cdb87a !important; }
html:not(#a):not(#b) .feed-card.jd.premium-card .jd-vote .vote-score { color: #ffeeb8 !important; }
html:not(#a):not(#b) .feed-card.jd.premium-card .jd-vote .vote-btn { color: #ecc766 !important; opacity: .75; }
html:not(#a):not(#b) .feed-card.jd.premium-card .jd-vote .vote-btn.on-up,
html:not(#a):not(#b) .feed-card.jd.premium-card .jd-vote .vote-btn.on-down { opacity: 1; filter: drop-shadow(0 0 5px rgba(236,200,100,.65)); }
html:not(#a):not(#b) .feed-card.jd.premium-card .jd-cat { color: #f5dc8a; background: rgba(226,184,72,.16); }
html:not(#a):not(#b) .feed-card.jd.premium-card .jd-flag.boost { background: linear-gradient(135deg, rgba(240,205,100,.35), rgba(184,138,30,.35)); border: 1px solid rgba(240,205,100,.55); }
/* premium thread */
html:not(#a):not(#b) #threadScreen.premium-thread { --thread-color: #0e0c08; }
html:not(#a):not(#b) #threadScreen.premium-thread .thread-body { background: #0e0c08 !important; }
html:not(#a):not(#b) .thread-body > .feed-card.premium-card:not(.media-card) {
  border-bottom: 2px solid #d9b24a !important;
  background: radial-gradient(120% 120% at 100% 0%, rgba(226,184,72,.16), transparent 55%), linear-gradient(160deg, #1b1710, #0e0c08) !important;
}
html:not(#a):not(#b) .thread-body > .feed-card.premium-card:not(.media-card) .author-name,
html:not(#a):not(#b) .thread-body > .feed-card.premium-card:not(.media-card) .post-meta-sub { color: #cdb87a !important; }
html:not(#a):not(#b) .thread-body > .feed-card.premium-card:not(.media-card) .author-name.gold { color: #2a1d00 !important; }
html:not(#a):not(#b) .thread-body > .feed-card.premium-card:not(.media-card) .post-title { color: #fff8e4 !important; }
html:not(#a):not(#b) .thread-body > .feed-card.premium-card:not(.media-card) .replies-counter,
html:not(#a):not(#b) .thread-body > .feed-card.premium-card:not(.media-card) .reaction-bar { background: rgba(226,184,72,.10) !important; }
html:not(#a):not(#b) #threadScreen.premium-thread .thread-replies .reply-card { border: 1px solid rgba(226,184,72,.25) !important; }
/* Premium page hero + dark hero */
.premium-hero, [data-theme="dark"] .premium-hero { background: linear-gradient(135deg, #8a6a1c, #d9b24a 55%, #f0d27a) !important; color: #2a1d00 !important; }
.premium-hero h2, .premium-hero p, .premium-hero small, .premium-hero strong { color: #2a1d00 !important; }


/* =====================================================
   V118: clean colour edge on post cards.
   The stripe is now part of the card's own background, so it follows the
   rounded corners exactly (no grey outline, no curled crescent).
===================================================== */
html:not(#a):not(#b):not(#c) .feed-card:not(.has-media):not(.premium-card):not(.boosted-card) {
  border-left-color: transparent !important;
  box-shadow: var(--lift, 0 8px 22px rgba(30, 45, 90, .10)) !important;
  background-image: linear-gradient(var(--accent, #7c5cff), var(--accent, #7c5cff)) !important;
  background-size: 5px 100% !important;
  background-repeat: no-repeat !important;
  background-position: 0 0 !important;
  background-origin: border-box !important;
  background-clip: border-box !important;
}
html[data-theme="dark"]:not(#a):not(#b):not(#c) .feed-card:not(.has-media):not(.premium-card):not(.boosted-card) { box-shadow: 0 6px 18px rgba(0, 0, 0, .25) !important; }


/* =====================================================
   V118: Today's Gist question stands out; quick, smooth taps
===================================================== */
html:not(#a):not(#b) .post-title .gist-q { display: block; font-weight: 800; line-height: 1.3; color: color-mix(in srgb, var(--accent, #7c5cff) 70%, #000); }
html[data-theme="dark"]:not(#a):not(#b) .post-title .gist-q { color: color-mix(in srgb, var(--accent, #7c5cff) 55%, #fff); }
html:not(#a):not(#b) .post-title .gist-a { display: block; margin-top: 7px; font-weight: 500; }

button, a, [data-call], [data-action], .bottom-nav-item, .reaction-pill { touch-action: manipulation; }
.bottom-nav-item, .reaction-pill, .starter-chip, .vote-btn { transition: transform .1s ease, background-color .15s ease, color .15s ease; }
.bottom-nav-item:active, .reaction-pill:active, .starter-chip:active, .vote-btn:active { transform: scale(.92); }
.page.active { animation-duration: .14s !important; }          /* quicker screen change */
html.lite *, html.lite *::before, html.lite *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.lite .feed-card { box-shadow: none !important; }


/* Polls are switched off for now (see POLLS_ENABLED in script.js) */
html.no-polls #pollToggle, html.no-polls #pollBox, html.no-polls .poll-block { display: none !important; }

/* v124 translate */
.tr-btn{background:none;border:0;padding:6px 0 2px;margin:2px 0 0;font:inherit;font-size:12.5px;font-weight:600;color:#338df0;cursor:pointer;opacity:.9;-webkit-tap-highlight-color:transparent}
.tr-out{margin:6px 0 4px;padding:8px 10px;border-left:3px solid #338df0;border-radius:6px;background:rgba(51,141,240,.08);font-size:14px;line-height:1.4;display:flex;flex-direction:column;gap:2px}
.tr-out[hidden]{display:none!important}
.tr-out small{opacity:.7;font-size:11.5px}
html[data-theme="dark"] .tr-btn{color:#7db8ff}