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

body {
  background: #0b0d0f;
  font-family: 'Inter', -apple-system, sans-serif;
  color: #e9e6de;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 0;
}

/* =========================
   AUTH
========================= */

#authContainer {
  width: 100%;
  max-width: 400px;
  background: #14171a;
  border: 1px solid #2a2f35;
  border-radius: 20px;
  padding: 40px;
  margin: auto;
}

.auth-modal h1 {
  font-family: 'Source Serif 4', serif;
  font-size: 28px;
  margin-bottom: 8px;
  text-align: center;
}

.auth-modal .subtitle {
  color: #a6a399;
  text-align: center;
  margin-bottom: 30px;
}

#authToggle {
  display: flex;
  gap: 8px;
  background: #1b1f23;
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 24px;
}

#authToggle button {
  flex: 1;
  padding: 10px;
  background: transparent;
  border: none;
  color: #a6a399;
  cursor: pointer;
  border-radius: 8px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  transition: all .2s;
}

#authToggle button.active {
  background: #2a2f35;
  color: #e9e6de;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: 12px;
  color: #a6a399;
  margin-bottom: 4px;
  font-family: 'IBM Plex Mono', monospace;
}

.form-group input {
  width: 100%;
  padding: 12px;
  background: #1b1f23;
  border: 1px solid #2a2f35;
  border-radius: 8px;
  color: #e9e6de;
  font-size: 14px;
}

.form-group input:focus {
  outline: none;
  border-color: #3fa88c;
}

#authSubmit {
  width: 100%;
  padding: 12px;
  background: #3fa88c;
  color: #e9e6de;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'IBM Plex Mono', monospace;
  transition: background .2s;
}

#authSubmit:hover {
  background: #4db89a;
}

.auth-links {
  text-align: center;
  margin-top: 16px;
}

.auth-links button {
  background: transparent;
  border: none;
  color: #a6a399;
  cursor: pointer;
  font-size: 12px;
  font-family: 'IBM Plex Mono', monospace;
}

.auth-links button:hover {
  color: #e9e6de;
}

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

#appContainer {
  width: 100%;
  height: 100vh;
  height: 100dvh; /* falls back to the line above on browsers that don't support dvh */
  display: flex;
  flex-direction: column;
  background: #14171a;
  overflow: hidden;
  border: none;
  border-radius: 0;
  position: relative;
}

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

@media (min-width: 768px) {

  body {
    padding: 24px;
  }

  #appContainer {
    max-width: 950px;
    height: calc(100vh - 48px);
    height: calc(100dvh - 48px);
    border: 1px solid #2a2f35;
    border-radius: 20px;
  }
}

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

@media (min-width: 1200px) {

  #appContainer {
    max-width: 1250px;
  }
}

/* =========================
   LARGE DESKTOP
========================= */

@media (min-width: 1600px) {

  #appContainer {
    max-width: 1450px;
  }
}

/* =========================
   YOUR EXISTING STYLES
========================= */

.ark-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 12px;
  border-bottom: 1px solid #2a2f35;
}

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

.wordmark span {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  letter-spacing: .12em;
}

.header-icons {
  display: flex;
  gap: 12px;
  align-items: center;
}

.auth-btn {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  padding: 6px 16px;
  border-radius: 12px;
  border: 1px solid #3a4048;
  background: transparent;
  color: #a6a399;
  cursor: pointer;
  transition: all 0.2s;
}

.auth-btn:hover {
  border-color: #3fa88c;
  color: #e9e6de;
}

.topic-tabs {
  display: flex;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid #2a2f35;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  flex-wrap: wrap;
}

.tab {
  padding-bottom: 8px;
  cursor: pointer;
  color: #6f6d66;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}

.tab.active {
  color: #e9e6de;
  border-bottom-color: #e9e6de;
}

.tab:hover {
  color: #c5c1b6;
}

.card {
  position: relative;
  height: 100%;
  flex-shrink: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #2a2f35;
  background: #14171a;
  cursor: pointer;
  transition: background 0.15s;
  overflow: hidden; /* .card-body is the scrollable element, not .card itself */
}

.card:active {
  background: #1a1e22;
}

/* The signature element — every post reads as a wire-service printout
   this platform pulled in and is vouching for, not just another feed
   item. Runs the full height of the card now that there's room for it
   to actually register instead of disappearing in a compact row. */
.card .perf {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 18px;
  background-image: radial-gradient(circle, #2a2f35 1.6px, transparent 1.6px);
  background-size: 18px 13px;
  background-position: center;
  pointer-events: none;
}

.card-body {
  height: 100%;
  overflow-y: auto;
  padding: 64px 24px 96px 44px; /* left padding clears the perforated edge; top/bottom give breathing room and clear the fixed bottom nav */
}

.meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #6f6d66;
  margin-bottom: 18px;
}

.headline {
  font-family: 'Source Serif 4', serif;
  font-size: 28px;
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: #e9e6de;
  margin-bottom: 16px;
}

.content-preview {
  font-size: 16px;
  line-height: 1.6;
  color: #a6a399;
  margin-bottom: 18px;
  max-width: 46em;
}

.stamp-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.stamp {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  padding: 5px 12px;
  border-radius: 5px;
  background: #20252a;
  color: #a6a399;
}

.stamp.teal { background: #1c2b27; color: #3fa88c; }
.stamp.amber { background: #2b2419; color: #d89b4a; }

.waterline {
  height: 4px;
  background: #20252a;
  border-radius: 2px;
  margin: 18px 0 6px;
  max-width: 320px;
}

.waterline .fill {
  height: 100%;
  border-radius: 2px;
  background: #3fa88c;
  width: 82%;
}

.waterline-label {
  display: flex;
  justify-content: space-between;
  max-width: 320px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: #6f6d66;
}

.source-panel {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #1b1f23;
  border-top: 1px solid #3a4048;
  padding: 20px 24px 30px;
  border-radius: 20px 20px 0 0;
  max-width: 500px;
  margin: 0 auto;
  z-index: 100;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.source-panel.open {
  transform: translateY(0);
  display: block;
}

.source-panel .handle {
  width: 40px;
  height: 4px;
  background: #3a4048;
  border-radius: 2px;
  margin: 0 auto 16px;
}

.source-panel h4 {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: #6f6d66;
  margin-bottom: 8px;
}

.source-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #2a2f35;
  font-size: 13px;
  color: #a6a399;
}

.source-item .badge {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  background: #20252a;
  padding: 2px 8px;
  border-radius: 12px;
  color: #6f6d66;
}

.close-panel {
  margin-top: 12px;
  text-align: center;
  color: #6f6d66;
  font-size: 12px;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: background 0.2s;
}

.close-panel:hover {
  background: #2a2f35;
  color: #e9e6de;
}

/* =========================
   BOTTOM BAR - FIXED
========================= */

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  padding: 14px 0 16px;
  border-top: 1px solid #2a2f35;
  background: #14171a;
  z-index: 50;
  max-width: 100%;
}

@media (min-width: 768px) {
  .bottom-bar {
    left: 50%;
    transform: translateX(-50%);
    max-width: 948px;
    border-radius: 0 0 20px 20px;
    border-left: 1px solid #2a2f35;
    border-right: 1px solid #2a2f35;
    border-bottom: 1px solid #2a2f35;
  }
}

@media (min-width: 1200px) {
  .bottom-bar {
    max-width: 1248px;
  }
}

@media (min-width: 1600px) {
  .bottom-bar {
    max-width: 1448px;
  }
}

.bottom-bar svg {
  width: 20px;
  height: 20px;
  stroke: #6f6d66;
  fill: none;
  stroke-width: 2;
  cursor: pointer;
}

.bottom-bar svg.active {
  stroke: #e9e6de;
}

/* Add padding to the feed container so content doesn't get hidden behind the fixed bottom bar */
#feedContainer {
  flex: 1;
  min-height: 0; /* flex items default to min-height:auto, which refuses to
    shrink below content size — without this override, feedContainer grows
    to fit ALL stacked cards combined instead of its allocated flex space,
    which pushes the whole page taller than the screen and lets the header
    scroll away with everything else instead of staying fixed in place */
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* old Edge */
}

#feedContainer::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}
.depth-nudge {
  background: #1b1f23;
  padding: 12px 20px;
  text-align: center;
  font-size: 12px;
  color: #a6a399;
  border-top: 1px solid #2a2f35;
  font-family: 'IBM Plex Mono', monospace;
  cursor: pointer;
}

.depth-nudge span {
  color: #3fa88c;
}

.toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: #1b1f23;
  border: 1px solid #3a4048;
  padding: 10px 20px;
  border-radius: 40px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: #e9e6de;
  opacity: 0;
  transition: all 0.3s ease;
  pointer-events: none;
  z-index: 200;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.settings-btn {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  padding: 5px 5px;
  border-radius: 12px;
  border: 1px solid #3a4048;
  background: transparent;
  color: #a6a399;
  cursor: pointer;
  transition: all 0.2s;
}

.settings-btn:hover {
   border-color: #3fa88c;
  color: #e9e6de;
}
/* =========================
   PROFILE PANEL
========================= */

.profile-panel {
  z-index: 110;
  max-height: 80vh;
  overflow-y: auto;
}

.profile-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

.profile-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #20252a;
  color: #3fa88c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 16px;
  flex-shrink: 0;
}

.profile-name {
  font-family: 'Source Serif 4', serif;
  font-size: 18px;
  color: #e9e6de;
}

.profile-handle {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: #6f6d66;
  margin-top: 2px;
}

.profile-bio {
  font-size: 13px;
  color: #a6a399;
  line-height: 1.5;
  margin-bottom: 16px;
}

.profile-stats {
  display: flex;
  gap: 24px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #2a2f35;
}

.profile-stats > div {
  display: flex;
  flex-direction: column;
}

.profile-stats span {
  font-family: 'Source Serif 4', serif;
  font-size: 18px;
  color: #e9e6de;
}

.profile-stats label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: #6f6d66;
  margin-top: 2px;
}

.profile-follow-btn,
.profile-edit-btn {
  width: 100%;
  margin-bottom: 8px;
}

.creator-stamp {
  cursor: pointer;
}

.creator-stamp:hover {
  background: #2a2f35;
}

/* =========================
   EMAIL VERIFICATION BANNER
========================= */

.verify-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  background: #2b2419;
  border-bottom: 1px solid #3a3020;
  font-size: 12px;
  color: #d89b4a;
}

.verify-banner-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.verify-banner-actions button {
  background: none;
  border: 1px solid #d89b4a;
  color: #d89b4a;
  border-radius: 6px;
  padding: 4px 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  cursor: pointer;
}

.verify-banner-actions button:hover {
  background: #3a3020;
}

/* =========================
   CREATE PANEL
========================= */

.create-type-toggle {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.create-type-toggle button {
  flex: 1;
  background: #20252a;
  border: 1px solid #2a2f35;
  color: #a6a399;
  border-radius: 8px;
  padding: 8px 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  cursor: pointer;
}

.create-type-toggle button.active {
  border-color: #3fa88c;
  color: #3fa88c;
}

#createForm select,
#createForm textarea {
  width: 100%;
  background: #14171a;
  border: 1px solid #2a2f35;
  border-radius: 8px;
  padding: 10px 12px;
  color: #e9e6de;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  resize: vertical;
}

.add-row-btn {
  background: none;
  border: 1px dashed #3a4048;
  color: #a6a399;
  border-radius: 8px;
  padding: 8px;
  width: 100%;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  cursor: pointer;
  margin-top: 6px;
}

.dynamic-row {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}

.dynamic-row input {
  flex: 1;
  background: #14171a;
  border: 1px solid #2a2f35;
  border-radius: 6px;
  padding: 8px 10px;
  color: #e9e6de;
  font-size: 12px;
}

.dynamic-row button {
  background: none;
  border: 1px solid #2a2f35;
  color: #a6a399;
  border-radius: 6px;
  padding: 0 10px;
  cursor: pointer;
}

/* =========================
   SETTINGS PANEL
========================= */

.settings-section {
  margin-bottom: 20px;
}

.settings-section > label {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: #6f6d66;
  margin-bottom: 8px;
}

.settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #2a2f35;
  font-size: 13px;
  color: #e9e6de;
}

.settings-row span:first-child {
  color: #a6a399;
}

.profile-signout-btn {
  width: 100%;
  background: none;
  border: 1px solid #3a4048;
  color: #a6a399;
}

.profile-signout-btn:hover {
  border-color: #d89b4a;
  color: #d89b4a;
}

/* =========================
   NEWS LINK-OUT
========================= */

.news-link-out {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid #2a2f35;
  font-size: 12px;
  color: #a6a399;
  text-decoration: none;
}

.news-link-out:hover {
  color: #3fa88c;
}

.news-link-out svg {
  flex-shrink: 0;
}

/* =========================
   REVIEW QUEUE
========================= */

.review-card {
  background: #20252a;
  border: 1px solid #2a2f35;
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
}

.review-slides {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  font-size: 12px;
  color: #a6a399;
  line-height: 1.6;
}

.review-slides li {
  padding-left: 14px;
  position: relative;
}

.review-slides li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: #6f6d66;
}

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

.review-approve-btn,
.review-reject-btn {
  flex: 1;
  border-radius: 8px;
  padding: 8px 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  cursor: pointer;
}

.review-approve-btn {
  background: none;
  border: 1px solid #3fa88c;
  color: #3fa88c;
}

.review-reject-btn {
  background: none;
  border: 1px solid #3a4048;
  color: #a6a399;
}

/* =========================
   REPORT CONTROL
========================= */

.card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid #20252a;
}

.save-toggle-btn {
  background: none;
  border: none;
  color: #3a4048;
  cursor: pointer;
  padding: 4px;
  line-height: 0;
}

.save-toggle-btn svg {
  width: 16px;
  height: 16px;
}

.save-toggle-btn:hover {
  color: #a6a399;
}

.save-toggle-btn.saved {
  color: #3fa88c;
}

.save-toggle-btn.saved svg {
  fill: currentColor;
}

.report-control {
  position: relative;
}

.report-toggle-btn {
  background: none;
  border: none;
  color: #3a4048;
  font-size: 14px;
  cursor: pointer;
  padding: 4px;
}

.report-toggle-btn:hover {
  color: #a6a399;
}

.report-menu {
  display: none;
  position: absolute;
  bottom: 24px;
  right: 0;
  background: #20252a;
  border: 1px solid #2a2f35;
  border-radius: 8px;
  padding: 6px;
  flex-direction: column;
  gap: 2px;
  min-width: 120px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
  z-index: 5;
}

.report-control.open .report-menu {
  display: flex;
}

.report-reason-btn {
  background: none;
  border: none;
  color: #a6a399;
  text-align: left;
  padding: 6px 8px;
  border-radius: 5px;
  font-size: 12px;
  cursor: pointer;
}

.report-reason-btn:hover {
  background: #2a2f35;
  color: #e9e6de;
}

/* =========================
   MODERATION QUEUE
========================= */

.moderation-card {
  background: #20252a;
  border: 1px solid #2a2f35;
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
}

.moderation-reason {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  background: #2b2419;
  color: #d89b4a;
  padding: 3px 8px;
  border-radius: 4px;
  margin-top: 6px;
}

.moderation-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.moderation-dismiss-btn,
.moderation-remove-btn {
  flex: 1;
  border-radius: 8px;
  padding: 8px 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  cursor: pointer;
}

.moderation-dismiss-btn {
  background: none;
  border: 1px solid #3a4048;
  color: #a6a399;
}

.moderation-remove-btn {
  background: none;
  border: 1px solid #d89b4a;
  color: #d89b4a;
}

.content-preview {
  font-size: 13px;
  color: #a6a399;
  line-height: 1.5;
  margin-bottom: 8px;
}

/* =========================
   HEADER SEARCH/SAVE ICONS + SEARCH BAR
========================= */

.header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.header-icon-btn {
  background: none;
  border: none;
  color: #6f6d66;
  cursor: pointer;
  padding: 4px;
  line-height: 0;
}

.header-icon-btn svg {
  width: 18px;
  height: 18px;
}

.header-icon-btn:hover {
  color: #e9e6de;
}

.search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-bottom: 1px solid #2a2f35;
}

.search-bar input {
  flex: 1;
  background: #14171a;
  border: 1px solid #2a2f35;
  border-radius: 8px;
  padding: 8px 12px;
  color: #e9e6de;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
}

.search-bar button {
  background: none;
  border: none;
  color: #6f6d66;
  cursor: pointer;
  font-size: 14px;
}

/* =========================
   CARD SLIDE VIEWER
========================= */

.card-viewer {
  display: none;
  position: fixed;
  inset: 0;
  background: #14171a;
  z-index: 300;
  flex-direction: column;
}

.card-viewer.open {
  display: flex;
}

.card-viewer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 10px;
}

.card-viewer-top span {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #6f6d66;
}

.card-viewer-top button {
  background: none;
  border: none;
  color: #a6a399;
  font-size: 16px;
  cursor: pointer;
}

.card-viewer-dots {
  display: flex;
  gap: 5px;
  padding: 0 18px 16px;
}

.card-viewer-dots .dot {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: #2a2f35;
}

.card-viewer-dots .dot.active {
  background: #e9e6de;
}

.card-viewer-dots .dot.done {
  background: #4a5058;
}

.card-viewer-body {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 32px 60px;
}

.card-viewer-headline {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: #6f6d66;
  margin-bottom: 14px;
}

.card-viewer-caption {
  font-family: 'Source Serif 4', serif;
  font-size: 22px;
  line-height: 1.5;
  color: #e9e6de;
}

.card-viewer-tap-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  z-index: 1;
  cursor: pointer;
}

.card-viewer-tap-left {
  left: 0;
}

.card-viewer-tap-right {
  right: 0;
}

/* =========================
   TOGGLE SWITCH
========================= */

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  inset: 0;
  background: #2a2f35;
  border-radius: 22px;
  cursor: pointer;
  transition: background 0.15s;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  top: 3px;
  background: #a6a399;
  border-radius: 50%;
  transition: transform 0.15s, background 0.15s;
}

.toggle-switch input:checked + .toggle-slider {
  background: #1c2b27;
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(18px);
  background: #3fa88c;
}

/* =========================
   READ-ALOUD CONTROL
========================= */

.listen-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 1px solid #2a2f35;
  color: #a6a399;
  border-radius: 20px;
  padding: 7px 14px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  cursor: pointer;
  margin-bottom: 16px;
}

.listen-btn:hover {
  border-color: #3a4048;
  color: #e9e6de;
}

.listen-btn.playing {
  border-color: #3fa88c;
  color: #3fa88c;
}

.listen-btn svg {
  width: 13px;
  height: 13px;
}