/*
Theme Name: Simracers
Theme URI: https://github.com/simracers/theme
Author: Simracers
Description: A content portal for sim racing — news, guides, hardware, esports. Inspired by vc.ru/dtf.ru. Clean feed, topic categories, author cards.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: simracers
*/

/* ==========================================================================
   CSS Variables — sim racing / motorsport feel
   ========================================================================== */
:root {
  --sr-black: #0d0d0d;
  --sr-dark: #1a1a1a;
  --sr-card: #242424;
  --sr-border: #333;
  --sr-muted: #888;
  --sr-text: #e5e5e5;
  --sr-accent: #e63900;
  --sr-accent-hover: #ff4d1a;
  --sr-success: #22c55e;
  --sr-radius: 8px;
  --sr-radius-sm: 4px;
  --sr-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --sr-font-mono: "JetBrains Mono", "Fira Code", monospace;
  --sr-header-h: 56px;
  --sr-sidebar-w: 220px;
  --sr-content-max: 720px;
  --sr-main-max: 1400px;
  --sr-gap: 24px;
  /* Картинки в постах: макс. высота, обрезка по центру */
  --sr-figure-img-max-height: 400px;
  /* В ленте — единый размер превью: соотношение сторон (ширина / высота), картинка заполняет кадр по центру */
  --sr-card-figure-aspect: 16 / 10;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: var(--sr-font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--sr-text);
  background: var(--sr-black);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  color: var(--sr-accent);
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(230, 57, 0, 0.15);
}
a:hover { color: var(--sr-accent-hover); text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
button { -webkit-tap-highlight-color: transparent; }

/* ==========================================================================
   Layout — three columns: left sidebar | main center | right sidebar
   ========================================================================== */
.sr-wrap {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
.sr-main {
  flex: 1;
  display: flex;
  max-width: var(--sr-main-max);
  margin: 0 auto;
  width: 100%;
  padding: 0 var(--sr-gap);
  gap: 0;
}
/* Left sidebar — nav + themes */
.sr-sidebar-left {
  width: var(--sr-sidebar-w);
  flex-shrink: 0;
  padding: var(--sr-gap) var(--sr-gap) var(--sr-gap) 0;
  border-right: 1px solid var(--sr-border);
}
.sr-nav-left { margin-bottom: var(--sr-gap); }
.sr-nav-list { list-style: none; padding: 0; margin: 0; }
.sr-nav-list li { margin: 0; }
.sr-nav-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 12px 14px;
  border-radius: var(--sr-radius-sm);
  color: var(--sr-text);
  font-size: 0.95rem;
}
.sr-nav-list a:hover { background: var(--sr-card); color: var(--sr-accent); text-decoration: none; }
.sr-nav-list a.current {
  background: rgba(230, 57, 0, 0.15);
  color: var(--sr-accent);
  font-weight: 500;
}
.sr-nav-list a.current:hover { color: var(--sr-accent-hover); }
.sr-nav-icon { opacity: 0.7; font-size: 0.85rem; }
.sr-sidebar-left-section { margin-bottom: var(--sr-gap); }
.sr-sidebar-left-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sr-muted);
  margin: 0 0 10px;
  padding: 0 10px;
}
.sr-sidebar-left .sr-topics-list { padding: 0; margin: 0; list-style: none; }
.sr-sidebar-left .sr-topics-list li { margin: 0; }
.sr-sidebar-left .sr-topics-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 12px 10px;
  border-radius: var(--sr-radius-sm);
  color: var(--sr-text);
  font-size: 0.9rem;
}
.sr-sidebar-left .sr-topics-list a:hover { background: var(--sr-card); color: var(--sr-accent); text-decoration: none; }
.sr-sidebar-left .sr-topic-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--sr-radius-sm);
  background: var(--sr-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.sr-sidebar-left-footer {
  margin-top: var(--sr-gap);
  padding-top: var(--sr-gap);
  border-top: 1px solid var(--sr-border);
}
.sr-sidebar-left-footer a {
  display: block;
  min-height: 44px;
  padding: 12px 10px;
  line-height: 1.4;
  color: var(--sr-muted);
  font-size: 0.9rem;
}
.sr-sidebar-left-footer a:hover { color: var(--sr-text); text-decoration: none; }
/* Main center — post space, centered */
.sr-content {
  flex: 1;
  min-width: 0;
  max-width: var(--sr-content-max);
  margin-left: auto;
  margin-right: auto;
  padding: var(--sr-gap);
  border-right: 1px solid var(--sr-border);
}
/* Right sidebar — same width as left */
.sr-sidebar-right {
  width: var(--sr-sidebar-w);
  flex-shrink: 0;
  padding: var(--sr-gap) 0 var(--sr-gap) var(--sr-gap);
}
.sr-sidebar-right-block {
  background: var(--sr-card);
  border-radius: var(--sr-radius);
  padding: var(--sr-gap);
  margin-bottom: var(--sr-gap);
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--sr-muted);
  text-align: center;
}
.sr-tab-groups-placeholder { min-height: 180px; }
.sr-placeholder-label { font-size: 0.9rem; margin-bottom: 4px; }
.sr-placeholder-icon { font-size: 2rem; opacity: 0.5; margin-bottom: 8px; }
.sr-placeholder-hint { font-size: 0.8rem; margin: 0; opacity: 0.8; }
.sr-widget-placeholder .sr-placeholder-hint { margin-top: 8px; }
.sr-sidebar-right .sr-widget {
  margin-bottom: var(--sr-gap);
  padding: 0;
}
.sr-sidebar-right .sr-widget:last-child { margin-bottom: 0; }
.sr-sidebar-right .sr-sidebar-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--sr-text);
  margin: 0 0 10px;
}

/* ==========================================================================
   Header
   ========================================================================== */
.sr-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--sr-header-h);
  background: var(--sr-dark);
  border-bottom: 1px solid var(--sr-border);
}
.sr-header-inner {
  max-width: var(--sr-main-max);
  margin: 0 auto;
  padding: 0 var(--sr-gap);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sr-gap);
}
.sr-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.sr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 20px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: var(--sr-radius-sm);
  cursor: pointer;
  border: none;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.sr-btn:focus { outline: 2px solid var(--sr-accent); outline-offset: 2px; }
.sr-btn-primary {
  background: var(--sr-accent);
  color: #fff;
}
.sr-btn-primary:hover { background: var(--sr-accent-hover); color: #fff; }
.sr-btn-outline {
  background: transparent;
  color: var(--sr-text);
  border: 1px solid var(--sr-border);
}
.sr-btn-outline:hover { background: var(--sr-card); color: var(--sr-text); border-color: var(--sr-muted); }
.sr-logo {
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--sr-text);
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 0;
  -webkit-tap-highlight-color: transparent;
}
.sr-logo:hover { color: var(--sr-accent); text-decoration: none; }
.sr-logo-icon { width: 28px; height: 28px; flex-shrink: 0; }
/* Mobile menu toggle — visible only on small screens */
.sr-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0 -8px 0 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--sr-text);
  cursor: pointer;
  border-radius: var(--sr-radius-sm);
}
.sr-menu-toggle:hover { background: var(--sr-card); color: var(--sr-accent); }
.sr-menu-toggle:focus { outline: 2px solid var(--sr-accent); outline-offset: 2px; }
.sr-menu-toggle-icon {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor;
}
.sr-menu-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 199;
}
.sr-sidebar-close {
  display: none;
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: var(--sr-card);
  color: var(--sr-text);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--sr-radius-sm);
}
.sr-sidebar-close:hover { background: var(--sr-border); color: var(--sr-accent); }
.sr-sidebar-close:focus { outline: 2px solid var(--sr-accent); outline-offset: 2px; }

.sr-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.sr-nav a {
  padding: 8px 12px;
  border-radius: var(--sr-radius-sm);
  color: var(--sr-muted);
  font-size: 0.9rem;
}
.sr-nav a:hover { color: var(--sr-text); background: var(--sr-card); text-decoration: none; }
.sr-nav a.current { color: var(--sr-accent); }

/* Header profile dropdown (avatar + chevron) */
.sr-header-profile {
  position: relative;
}
.sr-header-profile-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 4px;
  border: none;
  background: transparent;
  color: var(--sr-text);
  cursor: pointer;
  border-radius: var(--sr-radius-sm);
  -webkit-tap-highlight-color: transparent;
}
.sr-header-profile-trigger:hover {
  background: var(--sr-card);
}
.sr-header-profile-trigger:focus {
  outline: 2px solid var(--sr-accent);
  outline-offset: 2px;
}
.sr-header-profile-trigger[aria-expanded="true"] {
  background: var(--sr-card);
}
.sr-header-profile-trigger[aria-expanded="true"] .sr-header-profile-chevron {
  transform: rotate(180deg);
}
.sr-header-profile-avatar {
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: #e0e0e0;
  flex-shrink: 0;
}
.sr-header-profile-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sr-header-profile-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sr-muted);
  transition: transform 0.2s ease, color 0.2s ease;
}
/* Chevron accent when there are unread messages */
.sr-header-profile-chevron.sr-chevron-has-unread {
  color: var(--sr-accent);
}
.sr-header-profile-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  background: var(--sr-card);
  border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  padding: 6px 0;
  z-index: 110;
  display: none;
  flex-direction: column;
}
.sr-header-profile.is-open .sr-header-profile-dropdown {
  display: flex;
}
.sr-header-profile-dropdown[hidden] {
  display: none !important;
}
.sr-header-profile.is-open .sr-header-profile-dropdown:not([hidden]) {
  display: flex;
}
.sr-header-profile-item {
  display: block;
  flex: 0 0 auto;
  padding: 10px 16px;
  color: var(--sr-text);
  font-size: 0.95rem;
  text-decoration: none;
  border: none;
  background: none;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  line-height: 1.4;
}
.sr-header-profile-item:hover {
  background: var(--sr-dark);
  color: var(--sr-accent);
  text-decoration: none;
}
.sr-header-profile-item + .sr-header-profile-item {
  margin-top: 0;
  border-top: none;
}
/* Messages item: label + unread dot */
.sr-header-profile-item-messages {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.sr-header-profile-item-messages .sr-header-profile-item-label {
  flex: 1;
  min-width: 0;
}
.sr-unread-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sr-accent);
}
.sr-header-profile-dropdown .sr-header-profile-item {
  min-height: 44px;
  -webkit-appearance: none;
  appearance: none;
}

/* ==========================================================================
   Feed tabs (Popular / Fresh)
   ========================================================================== */
.sr-feed-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: var(--sr-gap);
  border-bottom: 1px solid var(--sr-border);
}
.sr-feed-tabs a {
  padding: 10px 16px;
  color: var(--sr-muted);
  font-size: 0.95rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.sr-feed-tabs a:hover { color: var(--sr-text); text-decoration: none; }
.sr-feed-tabs a.current { color: var(--sr-accent); border-bottom-color: var(--sr-accent); }

/* ==========================================================================
   Feed switcher — dropdown above brief bubble (only brief feed changes)
   ========================================================================== */
.sr-feed-switcher-wrap {
  margin-bottom: 10px;
}
.sr-feed-select {
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--sr-muted);
  background: transparent;
  border: none;
  padding: 8px 24px 8px 0;
  min-height: 44px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='%23888'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  -webkit-tap-highlight-color: transparent;
}
.sr-feed-select:hover { color: var(--sr-text); }
.sr-feed-select:focus { outline: 2px solid var(--sr-accent); outline-offset: 2px; }
.sr-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Bubbles — card-style containers
   ========================================================================== */
.sr-bubble {
  background: var(--sr-card);
  border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius);
  overflow: hidden;
}
.sr-bubble-brief {
  margin-bottom: var(--sr-gap);
  padding: 12px 16px 16px;
}
.sr-bubble-brief .sr-brief-feed {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* ==========================================================================
   Brief feed — titles + comment count only
   ========================================================================== */
.sr-brief-feed {
  margin-bottom: var(--sr-gap);
  padding-bottom: var(--sr-gap);
  border-bottom: 1px solid var(--sr-border);
}
.sr-brief-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 6px 0;
  border-bottom: 1px solid var(--sr-border);
}
.sr-brief-item:last-child { border-bottom: none; }
.sr-brief-title-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sr-brief-pin {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  color: var(--sr-muted);
  line-height: 1;
}
.sr-brief-pin svg { display: block; }
.sr-brief-item-pinned .sr-brief-pin { color: var(--sr-accent); }
.sr-brief-title {
  display: block;
  flex: 1;
  min-width: 0;
  font-size: 0.85rem;
  line-height: 1.3;
  color: var(--sr-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sr-brief-title:hover { color: var(--sr-accent); text-decoration: none; }
.sr-brief-comments {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 28px;
  padding: 2px 0;
  font-size: 0.8rem;
  color: var(--sr-muted);
  -webkit-tap-highlight-color: transparent;
}
.sr-brief-comments:hover { color: var(--sr-accent); text-decoration: none; }
.sr-brief-comments:focus { outline: 2px solid var(--sr-accent); outline-offset: 2px; }
.sr-brief-comments-icon {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  opacity: 0.85;
}
.sr-brief-comments-count { font-variant-numeric: tabular-nums; }
.sr-brief-item-more { display: none; }
.sr-brief-feed.sr-brief-expanded .sr-brief-item-more { display: flex; }
.sr-brief-feed.sr-brief-expanded .sr-brief-more-wrap { display: none; }
.sr-brief-more-wrap {
  margin: 10px 0 0;
  padding: 0;
  text-align: left;
}
.sr-brief-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--sr-muted);
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sr-brief-more-btn:hover { color: var(--sr-text); }
.sr-brief-more-btn:disabled { opacity: 0.7; cursor: wait; }
.sr-brief-more-btn:focus { outline: 2px solid var(--sr-accent); outline-offset: 2px; }
.sr-brief-more-chevron {
  font-size: 0.65em;
  opacity: 0.9;
}

/* ==========================================================================
   Post cards — bubble: author, category, title, 350-char text, expand, comments
   ========================================================================== */
.sr-feed { display: flex; flex-direction: column; gap: var(--sr-gap); }
.sr-card {
  position: relative;
  display: block;
  padding: var(--sr-gap);
  text-align: left;
  background: var(--sr-card);
  border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius);
  overflow: hidden;
  cursor: pointer;
}
.sr-card-body {
  min-width: 0;
}

/* Author — avatar + nickname */
.sr-card-author {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.sr-card-author-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.sr-card-author-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--sr-text);
}
.sr-card-author-name:hover { color: var(--sr-accent); text-decoration: none; }

/* Category + time — below author */
.sr-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--sr-muted);
  margin-bottom: 10px;
}
.sr-card-topic {
  color: var(--sr-muted);
  font-size: 0.85rem;
}
a.sr-card-topic {
  text-decoration: none;
  cursor: pointer;
}
a.sr-card-topic:hover { color: var(--sr-accent); text-decoration: underline; }

.sr-card-title {
  margin: 0 0 10px;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--sr-text);
}
.sr-card:hover .sr-card-title { color: var(--sr-accent); }

/* Post text — full content; long posts collapsed by max-height, "Show fully" expands */
.sr-card-content { margin-bottom: 12px; }
.sr-card-content-collapse {
  max-height: var(--sr-card-collapse-height, 28em);
  overflow: hidden;
  transition: max-height 0.25s ease-out;
}
.sr-card-no-overflow .sr-card-content-collapse,
.sr-card.is-expanded .sr-card-content-collapse {
  max-height: none;
}
.sr-card-body-content {
  margin: 0;
  font-size: 0.95rem;
  color: var(--sr-text);
  line-height: 1.5;
}
.sr-card-body-content p { margin: 0 0 0.75em; }
.sr-card-body-content p:first-child { margin-top: 0; }
.sr-card-body-content p:last-child { margin-bottom: 0; }
.sr-card-body-content strong { font-weight: 700; }
.sr-card-body-content em { font-style: italic; }
.sr-card-body-content u { text-decoration: underline; }
.sr-card-body-content ul, .sr-card-body-content ol { margin: 0 0 0.75em; padding-left: 1.5em; }
.sr-card-body-content li { margin: 0.2em 0; }
.sr-card-body-content a { color: var(--sr-accent); }
/* В ленте — картинка целиком (без обрезки), высота карточек может различаться */
.sr-card-body-content figure,
.sr-card-body-content .sr-figure {
  margin: 1em 0;
  overflow: hidden;
  border-radius: var(--sr-radius);
  display: block;
  background: var(--sr-dark);
}
.sr-card-body-content figure img,
.sr-card-body-content .sr-figure img {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
  max-height: min(400px, 60vh);
  object-fit: contain;
  object-position: center;
  border-radius: var(--sr-radius);
}
.sr-card-body-content figcaption {
  margin-top: 6px;
  font-size: 0.9em;
  color: var(--sr-muted);
  text-align: center;
}
.sr-card.is-expanded .sr-card-show-more-wrap { display: none; }
.sr-card-show-more-wrap { margin: 8px 0 0; }
.sr-card-show-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 0;
  min-height: 44px;
  font-size: 0.9rem;
  color: var(--sr-accent);
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sr-card-show-more:hover { color: var(--sr-text); text-decoration: underline; }
.sr-card-show-more:focus { outline: 2px solid var(--sr-accent); outline-offset: 2px; }
.sr-card-show-more-chevron { font-size: 0.7em; opacity: 0.9; }
.sr-card.is-expanded .sr-card-show-more-chevron { transform: rotate(180deg); }

/* Comments at bottom */
.sr-card-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 0.85rem;
  color: var(--sr-muted);
  padding-top: 8px;
  border-top: 1px solid var(--sr-border);
}
.sr-card-footer a { color: var(--sr-muted); }
.sr-card-footer a:hover { color: var(--sr-text); text-decoration: none; }

/* ==========================================================================
   Single post — in its own bubble
   ========================================================================== */
.sr-bubble-post {
  margin-bottom: var(--sr-gap);
  padding: var(--sr-gap);
}
.sr-single .sr-article-header { margin-bottom: var(--sr-gap); }
.sr-single .sr-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-size: 0.9rem;
  color: var(--sr-muted);
  margin-bottom: 12px;
}
.sr-single .sr-article-cat {
  color: var(--sr-muted);
  text-decoration: none;
}
.sr-single a.sr-article-cat:hover { color: var(--sr-accent); text-decoration: underline; }
.sr-single .sr-article-title { font-size: 1.75rem; margin: 0 0 12px; line-height: 1.3; }
.sr-single .sr-article-featured {
  border-radius: var(--sr-radius);
  overflow: hidden;
  margin-bottom: var(--sr-gap);
  background: var(--sr-card);
}
.sr-single .entry-content {
  font-size: 1.05rem;
  line-height: 1.65;
}
.sr-single .entry-content p { margin: 0 0 1em; }
.sr-single .entry-content strong { font-weight: 700; }
.sr-single .entry-content em { font-style: italic; }
.sr-single .entry-content u { text-decoration: underline; }
.sr-single .entry-content ul, .sr-single .entry-content ol { margin: 0 0 1em; padding-left: 1.5em; }
.sr-single .entry-content li { margin: 0.25em 0; }
.sr-single .entry-content h2 { font-size: 1.35rem; margin: 1.5em 0 0.5em; }
.sr-single .entry-content img { border-radius: var(--sr-radius); max-width: 100%; height: auto; }
.sr-single .entry-content {
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.sr-single .entry-content pre,
.sr-single .entry-content code { max-width: 100%; overflow-x: auto; }
/* На странице поста — картинки целиком, без обрезки; подпись под изображением */
.sr-single .entry-content .sr-figure,
.sr-single .entry-content figure {
  margin: 1.5em 0;
  overflow: visible;
  border-radius: var(--sr-radius);
  display: block;
  background: var(--sr-dark);
}
.sr-single .entry-content .sr-figure img,
.sr-single .entry-content figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--sr-radius);
  vertical-align: middle;
}
.sr-single .entry-content .sr-figure figcaption,
.sr-single .entry-content figure figcaption {
  margin-top: 8px;
  padding: 0 4px;
  font-size: 0.9rem;
  color: var(--sr-muted);
  text-align: center;
}

/* ==========================================================================
   Comments — compact layout, only registered users can comment
   ========================================================================== */
.sr-bubble-comments {
  padding: 16px var(--sr-gap) var(--sr-gap);
}
.sr-bubble-comments .sr-comments {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.sr-comments-title { font-size: 1.05rem; margin: 0 0 0.6em; }
.sr-comment-list { list-style: none; padding: 0; margin: 0 0 0.75em; }
.sr-comment-list .comment { padding: 8px 0; border-bottom: 1px solid var(--sr-border); }
.sr-comment-list .comment:last-child { border-bottom: none; }
.sr-comment-list .comment-body { display: block; }
/* Author + date on one row: avatar, name left; date right */
.sr-comment-list .comment-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.sr-comment-list .comment-author {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sr-comment-list .comment-author img,
.sr-comment-list .comment-author .comment-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}
.sr-comment-list .comment-author .fn { font-weight: 500; font-size: 0.9rem; }
.sr-comment-list .comment-author .fn a { color: var(--sr-text); }
.sr-comment-list .comment-author .fn a:hover { color: var(--sr-accent); text-decoration: none; }
.sr-comment-list .comment-meta { font-size: 0.8rem; color: var(--sr-muted); }
.sr-comment-list .comment-meta .comment-date { color: var(--sr-muted); }
.sr-comment-list .comment-content { font-size: 0.9rem; line-height: 1.45; margin-bottom: 4px; }
.sr-comment-list .comment-reply-wrap { margin: 0; }
.sr-comment-list .comment-reply-link {
  font-size: 0.85rem;
  color: var(--sr-accent);
  text-decoration: none;
}
.sr-comment-list .comment-reply-link:hover { color: var(--sr-accent-hover); text-decoration: underline; }
/* Вложенные ответы (треды): меньший отступ */
.sr-comment-list .children {
  list-style: none;
  padding: 0 0 0 16px;
  margin: 6px 0 0;
  border-left: 2px solid var(--sr-border);
}
.sr-comment-list .children .comment { padding: 6px 0 6px 10px; }
.sr-comment-list .children .comment-body { display: block; }
.sr-comment-list .children .comment-author img,
.sr-comment-list .children .comment-author .comment-avatar { width: 28px; height: 28px; }
/* Ответы на 5-й и 6-й уровень (depth 6 и 7): без нового отступа — отображаются на том же уровне */
.sr-comment-list .children .children .children .children .children,
.sr-comment-list .children .children .children .children .children .children {
  padding-left: 0;
  margin-left: 0;
  margin-top: 6px;
  border-left: none;
}
.sr-comment-list .children .children .children .children .children .comment,
.sr-comment-list .children .children .children .children .children .children .comment {
  padding: 6px 0 6px 10px;
}
.sr-comments-login-required {
  margin: 0.75em 0 0;
  padding: 10px 12px;
  background: var(--sr-dark);
  border-radius: var(--sr-radius-sm);
  font-size: 0.9rem;
  color: var(--sr-muted);
}
.sr-comments-login-required a { color: var(--sr-accent); }
.sr-comments-login-required a:hover { color: var(--sr-accent-hover); text-decoration: none; }
.sr-comments-login-required .sr-link-btn {
  margin: 0;
  padding: 0;
  font: inherit;
  color: var(--sr-accent);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
}
.sr-comments-login-required .sr-link-btn:hover { color: var(--sr-accent-hover); text-decoration: underline; }

/* ==========================================================================
   Footer
   ========================================================================== */
.sr-footer {
  margin-top: auto;
  padding: var(--sr-gap);
  border-top: 1px solid var(--sr-border);
  text-align: center;
  font-size: 0.9rem;
  color: var(--sr-muted);
}
.sr-footer a { color: var(--sr-muted); }
.sr-footer a:hover { color: var(--sr-text); }
.sr-footer-social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: var(--sr-gap);
}
.sr-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--sr-muted);
  border-radius: var(--sr-radius-sm);
  -webkit-tap-highlight-color: transparent;
}
.sr-social-icon:hover { color: var(--sr-accent); }
.sr-social-icon:focus { outline: 2px solid var(--sr-accent); outline-offset: 2px; }
.sr-social-svg { width: 24px; height: 24px; }

/* ==========================================================================
   Archive header
   ========================================================================== */
.sr-archive-header { margin-bottom: var(--sr-gap); }
.sr-archive-title { font-size: 1.5rem; margin: 0 0 8px; }
.sr-archive-desc { color: var(--sr-muted); margin: 0; font-size: 0.95rem; }

/* ==========================================================================
   Pagination
   ========================================================================== */
.sr-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: var(--sr-gap) 0;
}
.sr-pagination a,
.sr-pagination span {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: var(--sr-radius-sm);
  background: var(--sr-card);
  color: var(--sr-text);
  font-size: 0.9rem;
}
.sr-pagination a:hover { background: var(--sr-border); text-decoration: none; }
.sr-pagination .current { background: var(--sr-accent); color: #fff; }

/* ==========================================================================
   Write post modal (reference: dark popup, avatar, topic, title, content, Publish)
   ========================================================================== */
.sr-write-modal {
  position: fixed;
  inset: 0;
  z-index: 310;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sr-gap);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.sr-write-modal[aria-hidden="false"].sr-write-modal-open {
  opacity: 1;
  visibility: visible;
}
.sr-write-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  cursor: pointer;
}
.sr-write-box {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--sr-card);
  border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius);
  padding: var(--sr-gap);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
}
.sr-write-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--sr-muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--sr-radius-sm);
}
.sr-write-close:hover { color: var(--sr-text); background: var(--sr-dark); }
.sr-write-close:focus { outline: 2px solid var(--sr-accent); outline-offset: 2px; }
.sr-write-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
}
.sr-write-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.sr-write-user-meta { flex: 1; min-width: 0; }
.sr-write-username {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--sr-text);
  margin-bottom: 4px;
}
.sr-write-topic-wrap {
  position: relative;
  display: inline-block;
}
.sr-write-topic {
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--sr-muted);
  background: transparent;
  border: none;
  padding: 4px 20px 4px 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12' fill='%23888'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
}
.sr-write-topic:hover { color: var(--sr-text); }
.sr-write-topic:focus { outline: 2px solid var(--sr-accent); outline-offset: 2px; }
.sr-write-chevron { display: none; }
.sr-write-form .sr-write-row { margin-bottom: 16px; }
.sr-write-form .sr-write-row label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.9rem;
  color: var(--sr-text);
}
.sr-write-input {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--sr-text);
  background: var(--sr-dark);
  border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius-sm);
}
.sr-write-input:focus { border-color: var(--sr-accent); outline: none; }
.sr-write-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 10px;
  background: var(--sr-dark);
  border: 1px solid var(--sr-border);
  border-bottom: none;
  border-radius: var(--sr-radius-sm) var(--sr-radius-sm) 0 0;
}
.sr-write-tb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 4px 10px;
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--sr-muted);
  background: transparent;
  border: none;
  border-radius: var(--sr-radius-sm);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sr-write-tb-btn:hover { color: var(--sr-text); background: var(--sr-card); }
.sr-write-tb-btn:focus { outline: 2px solid var(--sr-accent); outline-offset: 1px; }
.sr-write-tb-btn strong, .sr-write-tb-btn em, .sr-write-tb-btn u { font-size: 0.9rem; }
.sr-write-tb-sep {
  width: 1px;
  height: 20px;
  background: var(--sr-border);
  margin: 0 4px;
}
.sr-write-editor {
  width: 100%;
  min-height: 200px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--sr-text);
  background: var(--sr-dark);
  border: 1px solid var(--sr-border);
  border-radius: 0 0 var(--sr-radius-sm) var(--sr-radius-sm);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.sr-write-editor:focus { border-color: var(--sr-accent); outline: none; }
.sr-write-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--sr-muted);
}
.sr-write-editor img { max-width: 100%; height: auto; border-radius: var(--sr-radius-sm); }
.sr-editor-img-placeholder {
  display: inline-block;
  margin: 4px 0;
  padding: 6px 10px;
  font-family: var(--sr-font-mono), monospace;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--sr-muted);
  background: var(--sr-dark);
  border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius-sm);
  white-space: pre-wrap;
  word-break: break-all;
  max-width: 100%;
}
.sr-write-pending-images {
  display: none;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--sr-border);
}
.sr-write-pending-images:not(:empty) { display: block; }
.sr-write-pending-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  padding: 10px;
  padding-right: 42px;
  background: var(--sr-dark);
  border-radius: var(--sr-radius-sm);
}
.sr-write-pending-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: var(--sr-card);
  color: var(--sr-muted);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--sr-radius-sm);
  -webkit-tap-highlight-color: transparent;
}
.sr-write-pending-remove:hover { color: var(--sr-text); background: var(--sr-border); }
.sr-write-pending-remove:focus { outline: 2px solid var(--sr-accent); outline-offset: 1px; }
.sr-write-pending-thumb {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: var(--sr-radius-sm);
  overflow: hidden;
  background: var(--sr-card);
}
.sr-write-pending-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sr-write-pending-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sr-write-caption {
  width: 100%;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--sr-text);
  background: var(--sr-card);
  border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius-sm);
}
.sr-write-caption:focus { border-color: var(--sr-accent); outline: none; }
.sr-write-add-to-text { align-self: flex-start; }
.sr-write-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0 0;
}
.sr-write-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sr-gap);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.sr-write-preview-modal[aria-hidden="false"].sr-write-preview-open {
  opacity: 1;
  visibility: visible;
}
.sr-write-preview-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  cursor: pointer;
}
.sr-write-preview-box {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--sr-card);
  border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius);
  padding: var(--sr-gap);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
}
.sr-write-preview-content { padding-right: 36px; }
.sr-write-preview-title {
  margin: 0 0 12px;
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--sr-text);
}
.sr-write-preview-body {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--sr-text);
}
.sr-write-preview-body figure,
.sr-write-preview-body .sr-figure { margin: 1em 0; border-radius: var(--sr-radius-sm); }
.sr-write-preview-body figure img,
.sr-write-preview-body .sr-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--sr-radius-sm);
  vertical-align: middle;
}
.sr-write-preview-body figure figcaption,
.sr-write-preview-body .sr-figure figcaption {
  margin-top: 6px;
  font-size: 0.9rem;
  color: var(--sr-muted);
  text-align: center;
}
.sr-write-preview-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--sr-muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--sr-radius-sm);
}
.sr-write-preview-close:hover { color: var(--sr-text); background: var(--sr-dark); }
.sr-write-preview-close:focus { outline: 2px solid var(--sr-accent); outline-offset: 2px; }

/* Write form — caption modal (after image upload) */
.sr-write-caption-modal {
  position: fixed;
  inset: 0;
  z-index: 330;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sr-gap);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.sr-write-caption-modal[aria-hidden="false"].sr-write-caption-open {
  opacity: 1;
  visibility: visible;
}
.sr-write-caption-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  cursor: pointer;
}
.sr-write-caption-box {
  position: relative;
  width: 100%;
  max-width: 400px;
  background: var(--sr-card);
  border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius);
  padding: var(--sr-gap);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
}
.sr-write-caption-preview {
  margin-bottom: 16px;
  border-radius: var(--sr-radius-sm);
  overflow: hidden;
  background: var(--sr-dark);
}
.sr-write-caption-preview img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 240px;
  object-fit: contain;
}
.sr-write-caption-row { margin: 0 0 16px; }
.sr-write-caption-row label { display: block; margin-bottom: 6px; font-size: 0.9rem; color: var(--sr-muted); }
.sr-write-caption-actions {
  display: flex;
  gap: 10px;
  margin: 0;
  justify-content: flex-end;
}
.sr-write-caption-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--sr-muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--sr-radius-sm);
}
.sr-write-caption-close:hover { color: var(--sr-text); background: var(--sr-dark); }
.sr-write-caption-close:focus { outline: 2px solid var(--sr-accent); outline-offset: 2px; }

.sr-write-textarea {
  width: 100%;
  min-height: 180px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--sr-text);
  background: var(--sr-dark);
  border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius-sm);
  resize: vertical;
}
.sr-write-textarea:focus { border-color: var(--sr-accent); outline: none; }
.sr-write-submit-wrap {
  margin: 20px 0 0;
  text-align: right;
}
.sr-write-publish { min-height: 44px; padding: 10px 24px; }
.sr-write-message {
  margin: 12px 0 0;
  padding: 10px 12px;
  font-size: 0.9rem;
  border-radius: var(--sr-radius-sm);
}
.sr-write-error { background: rgba(220, 53, 69, 0.15); color: #e55369; }
.sr-write-success { background: rgba(34, 197, 94, 0.15); color: var(--sr-success); }

/* ==========================================================================
   Profile settings modal (avatar, email, password, feed, notifications, delete)
   ========================================================================== */
.sr-settings-modal {
  position: fixed;
  inset: 0;
  z-index: 350;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sr-gap);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.sr-settings-modal.is-open {
  opacity: 1;
  visibility: visible;
}
.sr-settings-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  cursor: pointer;
}
.sr-settings-box {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--sr-card);
  border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius);
  padding: var(--sr-gap);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
}
.sr-settings-title {
  margin: 0 44px 0 0;
  padding-right: 12px;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--sr-text);
}
.sr-settings-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--sr-muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--sr-radius-sm);
}
.sr-settings-close:hover { color: var(--sr-text); background: var(--sr-dark); }
.sr-settings-close:focus { outline: 2px solid var(--sr-accent); outline-offset: 2px; }
.sr-settings-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--sr-border);
}
.sr-settings-section:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.sr-settings-section-title {
  margin: 0 0 12px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--sr-text);
}
.sr-settings-avatar-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.sr-settings-avatar-img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.sr-settings-avatar-actions { min-width: 0; }
.sr-settings-avatar-actions .sr-btn {
  margin-right: 8px;
  margin-bottom: 4px;
}
.sr-settings-avatar-msg { margin-top: 8px; }
.sr-settings-hint {
  margin: 0 0 10px;
  font-size: 0.9rem;
  color: var(--sr-muted);
}
.sr-settings-form .sr-form-row {
  margin: 0 0 14px;
}
.sr-settings-form .sr-form-row label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.9rem;
  color: var(--sr-text);
}
.sr-settings-input {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--sr-text);
  background: var(--sr-dark);
  border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius-sm);
}
.sr-settings-input:focus { border-color: var(--sr-accent); outline: none; }
.sr-settings-form .sr-form-submit { margin-bottom: 0; }
.sr-settings-message {
  margin: 10px 0 0;
  padding: 10px 12px;
  font-size: 0.9rem;
  border-radius: var(--sr-radius-sm);
}
.sr-settings-error { background: rgba(220, 53, 69, 0.15); color: #e55369; }
.sr-settings-success { background: rgba(34, 197, 94, 0.15); color: var(--sr-success); }
.sr-settings-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sr-settings-links li { margin: 0; }
.sr-settings-link-btn {
  display: block;
  width: 100%;
  padding: 12px 14px;
  text-align: left;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--sr-text);
  background: var(--sr-dark);
  border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius-sm);
  cursor: pointer;
  margin-bottom: 8px;
  -webkit-tap-highlight-color: transparent;
}
.sr-settings-link-btn:hover { background: var(--sr-card); border-color: var(--sr-muted); color: var(--sr-accent); }
.sr-settings-link-btn:focus { outline: 2px solid var(--sr-accent); outline-offset: 2px; }
.sr-settings-link-btn:last-child { margin-bottom: 0; }
.sr-settings-danger .sr-settings-section-title { color: var(--sr-text); }
.sr-settings-danger .sr-btn-danger {
  color: #e55369;
  border-color: rgba(229, 83, 105, 0.5);
}
.sr-settings-danger .sr-btn-danger:hover:not(:disabled) {
  background: rgba(229, 83, 105, 0.15);
  border-color: #e55369;
}
.sr-settings-danger .sr-btn-danger:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Under construction sub-modal (feed settings / notifications placeholder) */
.sr-under-construction-modal {
  position: fixed;
  inset: 0;
  z-index: 360;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sr-gap);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.sr-under-construction-modal.is-open {
  opacity: 1;
  visibility: visible;
}
.sr-under-construction-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  cursor: pointer;
}
.sr-under-construction-box {
  position: relative;
  width: 100%;
  max-width: 360px;
  background: var(--sr-card);
  border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius);
  padding: var(--sr-gap);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
}
.sr-under-construction-title {
  margin: 0 44px 0 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--sr-text);
}
.sr-under-construction-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--sr-muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--sr-radius-sm);
}
.sr-under-construction-close:hover { color: var(--sr-text); background: var(--sr-dark); }
.sr-under-construction-close:focus { outline: 2px solid var(--sr-accent); outline-offset: 2px; }
.sr-under-construction-text {
  margin: 20px 0 0;
  font-size: 1rem;
  color: var(--sr-muted);
}

/* Comment form — rich text editor (toolbar + contenteditable) */
.sr-comment-editor-wrap { margin-top: 6px; }
.sr-comment-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  padding: 6px 8px;
  background: var(--sr-dark);
  border: 1px solid var(--sr-border);
  border-bottom: none;
  border-radius: var(--sr-radius-sm) var(--sr-radius-sm) 0 0;
}
.sr-comment-tb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 2px 8px;
  font-family: inherit;
  font-size: 0.8rem;
  color: var(--sr-muted);
  background: transparent;
  border: none;
  border-radius: var(--sr-radius-sm);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sr-comment-tb-btn:hover { color: var(--sr-text); background: var(--sr-card); }
.sr-comment-tb-btn:focus { outline: 2px solid var(--sr-accent); outline-offset: 1px; }
.sr-comment-tb-btn strong, .sr-comment-tb-btn em, .sr-comment-tb-btn u { font-size: 0.85rem; }
.sr-comment-tb-img { cursor: pointer; }
.sr-comment-tb-sep {
  width: 1px;
  height: 16px;
  background: var(--sr-border);
  margin: 0 2px;
}
.sr-comment-editor {
  width: 100%;
  min-height: 96px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--sr-text);
  background: var(--sr-dark);
  border: 1px solid var(--sr-border);
  border-radius: 0 0 var(--sr-radius-sm) var(--sr-radius-sm);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.sr-comment-editor:focus { border-color: var(--sr-accent); outline: none; }
.sr-comment-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--sr-muted);
}
.sr-comment-editor .sr-editor-img-placeholder { max-width: 100%; }
.sr-comment-actions { margin: 8px 0 0; }
.sr-comment-pending-images {
  display: none;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--sr-border);
}
.sr-comment-pending-images:not(:empty) { display: block; }
.sr-comment-pending-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
  padding: 8px;
  padding-right: 38px;
  background: var(--sr-dark);
  border-radius: var(--sr-radius-sm);
}
.sr-comment-pending-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  background: var(--sr-card);
  color: var(--sr-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--sr-radius-sm);
  -webkit-tap-highlight-color: transparent;
}
.sr-comment-pending-remove:hover { color: var(--sr-text); background: var(--sr-border); }
.sr-comment-pending-remove:focus { outline: 2px solid var(--sr-accent); outline-offset: 1px; }
.sr-comment-pending-thumb {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: var(--sr-radius-sm);
  overflow: hidden;
  background: var(--sr-card);
}
.sr-comment-pending-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sr-comment-pending-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sr-comment-caption {
  width: 100%;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--sr-text);
  background: var(--sr-card);
  border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius-sm);
}
.sr-comment-caption:focus { border-color: var(--sr-accent); outline: none; }
.sr-comment-add-to-text { align-self: flex-start; }
#commentform .comment-form-comment > label { font-size: 0.9rem; margin-bottom: 4px; display: block; }
#commentform .form-submit { margin: 8px 0 0; }
#commentform .form-submit input[type="submit"] { min-height: 36px; padding: 6px 16px; font-size: 0.9rem; }
/* Comment preview modal */
.sr-comment-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sr-gap);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.sr-comment-preview-modal[aria-hidden="false"].sr-comment-preview-open {
  opacity: 1;
  visibility: visible;
}
.sr-comment-preview-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  cursor: pointer;
}
.sr-comment-preview-box {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--sr-card);
  border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius);
  padding: var(--sr-gap);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
}
.sr-comment-preview-content {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--sr-text);
  padding-right: 36px;
}
.sr-comment-preview-content figure,
.sr-comment-preview-content .sr-figure { margin: 1em 0; overflow: hidden; border-radius: var(--sr-radius-sm); }
.sr-comment-preview-content figure img,
.sr-comment-preview-content .sr-figure img {
  display: block;
  width: 100%;
  max-height: var(--sr-figure-img-max-height);
  object-fit: cover;
  object-position: center;
  border-radius: var(--sr-radius-sm);
}
.sr-comment-preview-content figure figcaption,
.sr-comment-preview-content .sr-figure figcaption {
  margin-top: 6px;
  font-size: 0.9rem;
  color: var(--sr-muted);
  text-align: center;
}
.sr-comment-preview-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--sr-muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--sr-radius-sm);
}
.sr-comment-preview-close:hover { color: var(--sr-text); background: var(--sr-dark); }
.sr-comment-preview-close:focus { outline: 2px solid var(--sr-accent); outline-offset: 2px; }

/* Comment form — caption modal (after image upload) */
.sr-comment-caption-modal {
  position: fixed;
  inset: 0;
  z-index: 330;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sr-gap);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.sr-comment-caption-modal[aria-hidden="false"].sr-comment-caption-open {
  opacity: 1;
  visibility: visible;
}
.sr-comment-caption-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  cursor: pointer;
}
.sr-comment-caption-box {
  position: relative;
  width: 100%;
  max-width: 400px;
  background: var(--sr-card);
  border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius);
  padding: var(--sr-gap);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
}
.sr-comment-caption-preview {
  margin-bottom: 16px;
  border-radius: var(--sr-radius-sm);
  overflow: hidden;
  background: var(--sr-dark);
}
.sr-comment-caption-preview img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 240px;
  object-fit: contain;
}
.sr-comment-caption-row { margin: 0 0 16px; }
.sr-comment-caption-row label { display: block; margin-bottom: 6px; font-size: 0.9rem; color: var(--sr-muted); }
.sr-comment-caption-actions {
  display: flex;
  gap: 10px;
  margin: 0;
  justify-content: flex-end;
}
.sr-comment-caption-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--sr-muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--sr-radius-sm);
}
.sr-comment-caption-close:hover { color: var(--sr-text); background: var(--sr-dark); }
.sr-comment-caption-close:focus { outline: 2px solid var(--sr-accent); outline-offset: 2px; }

/* ==========================================================================
   Login modal
   ========================================================================== */
.sr-login-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sr-gap);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.sr-login-modal[aria-hidden="false"].sr-login-modal-open {
  opacity: 1;
  visibility: visible;
}
.sr-login-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  cursor: pointer;
}
.sr-login-box {
  position: relative;
  width: 100%;
  max-width: 400px;
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--sr-dark);
  border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius);
  padding: var(--sr-gap);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
}
.sr-login-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--sr-muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--sr-radius-sm);
}
.sr-login-close:hover { color: var(--sr-text); background: var(--sr-card); }
.sr-login-close:focus { outline: 2px solid var(--sr-accent); outline-offset: 2px; }
.sr-login-title {
  margin: 0 0 20px;
  font-size: 1.5rem;
  font-weight: 600;
}
#sr-login-form label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.9rem;
  color: var(--sr-muted);
}
#sr-login-form input[type="text"],
#sr-login-form input[type="password"] {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--sr-text);
  background: var(--sr-card);
  border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius-sm);
}
#sr-login-form input:focus {
  border-color: var(--sr-accent);
  outline: none;
}
#sr-login-form .login-remember {
  margin-bottom: 16px;
  min-height: 44px;
  display: flex;
  align-items: center;
}
#sr-login-form .login-remember label {
  display: inline;
  margin-left: 8px;
  cursor: pointer;
  padding: 8px 0;
}
#sr-login-form input[type="submit"] {
  width: 100%;
  min-height: 44px;
  padding: 12px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
  background: var(--sr-accent);
  border: none;
  border-radius: var(--sr-radius-sm);
  cursor: pointer;
}
#sr-login-form input[type="submit"]:hover { background: var(--sr-accent-hover); }
.sr-login-switch {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--sr-border);
  font-size: 0.95rem;
  color: var(--sr-muted);
}
.sr-link-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 12px;
  margin: -8px -12px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: inherit;
  color: var(--sr-accent);
  cursor: pointer;
  text-decoration: underline;
  -webkit-tap-highlight-color: transparent;
}
.sr-link-btn:hover { color: var(--sr-accent-hover); }
.sr-link-btn:focus { outline: 2px solid var(--sr-accent); outline-offset: 2px; }
.sr-register-panel {
  display: none;
}
.sr-login-modal.sr-show-register .sr-login-panel {
  display: none;
}
.sr-login-modal.sr-show-register .sr-register-panel {
  display: block;
}
#sr-register-form .sr-form-row {
  margin-bottom: 16px;
}
#sr-register-form .sr-form-row label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.9rem;
  color: var(--sr-muted);
}
#sr-register-form .sr-form-row input[type="text"],
#sr-register-form .sr-form-row input[type="email"],
#sr-register-form .sr-form-row input[type="password"] {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--sr-text);
  background: var(--sr-card);
  border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius-sm);
}
#sr-register-form .sr-form-row input[type="password"]::placeholder {
  color: var(--sr-muted);
}
.sr-register-message.sr-register-error {
  margin: 12px 0 0;
  padding: 10px 12px;
  background: rgba(220, 53, 69, 0.15);
  color: #e55369;
  font-size: 0.9rem;
  border-radius: var(--sr-radius-sm);
}
#sr-register-form .sr-form-row input:focus {
  border-color: var(--sr-accent);
  outline: none;
}
#sr-register-form .sr-form-submit {
  margin-top: 20px;
  margin-bottom: 0;
}
#sr-register-form .sr-form-submit input {
  width: 100%;
  min-height: 44px;
  padding: 12px;
  font-size: 1rem;
  cursor: pointer;
}
.sr-login-message {
  margin: 12px 0 0;
  padding: 10px 12px;
  background: rgba(34, 197, 94, 0.15);
  color: var(--sr-success);
  font-size: 0.9rem;
  border-radius: var(--sr-radius-sm);
}
.sr-login-error {
  margin: 12px 0 0;
  padding: 10px 12px;
  background: rgba(220, 53, 69, 0.15);
  color: #e55369;
  font-size: 0.9rem;
  border-radius: var(--sr-radius-sm);
}

/* ==========================================================================
   Responsive — mobile first friendly
   ========================================================================== */
@media (max-width: 1100px) {
  .sr-sidebar-right { display: none; }
  .sr-content { border-right: none; }
  .sr-card-thumb { width: 160px; }
}
@media (max-width: 768px) {
  .sr-menu-toggle { display: flex; }
  .sr-sidebar-left {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(320px, 85vw);
    max-width: 320px;
    z-index: 200;
    padding: calc(var(--sr-header-h) + 16px) 16px 16px;
    padding-left: max(16px, env(safe-area-inset-left));
    margin: 0;
    border-right: 1px solid var(--sr-border);
    background: var(--sr-dark);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
    transform: translateX(-100%);
    transition: transform 0.25s ease-out;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  body.sr-menu-open .sr-sidebar-left { transform: translateX(0); }
  .sr-sidebar-close {
    display: flex;
    align-items: center;
    justify-content: center;
    top: calc(var(--sr-header-h) + 8px);
  }
  .sr-menu-backdrop {
    display: block;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease-out;
  }
  body.sr-menu-open .sr-menu-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
  .sr-content { border-right: none; border-left: none; max-width: none; }
  .sr-main { padding-left: var(--sr-gap); padding-right: var(--sr-gap); }
  .sr-card-thumb { width: 120px; }
  .sr-header { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  .sr-main { padding-left: calc(var(--sr-gap) + env(safe-area-inset-left)); padding-right: calc(var(--sr-gap) + env(safe-area-inset-right)); }
  .sr-footer { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
}
@media (max-width: 600px) {
  .sr-card { grid-template-columns: 1fr; }
  .sr-card-thumb { grid-column: 1; grid-row: 1; width: 100%; aspect-ratio: 2/1; }
  .sr-card-footer a { min-height: 44px; display: inline-flex; align-items: center; padding: 8px 0; }
  :root { --sr-gap: 16px; }
  .sr-content { padding: var(--sr-gap); }
  body { font-size: 16px; }
  .sr-article-title { font-size: 1.5rem; }
  .sr-pagination { flex-wrap: wrap; justify-content: center; gap: 8px; }
  /* Login modal — safe area, compact padding */
  .sr-login-modal { padding: max(var(--sr-gap), env(safe-area-inset-top)) max(var(--sr-gap), env(safe-area-inset-right)) max(var(--sr-gap), env(safe-area-inset-bottom)) max(var(--sr-gap), env(safe-area-inset-left)); }
  .sr-login-box { max-height: calc(100vh - 2 * var(--sr-gap)); padding-bottom: max(var(--sr-gap), env(safe-area-inset-bottom)); }
  .sr-login-close { top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); }
  /* Write post modal — safe area */
  .sr-write-modal { padding: max(var(--sr-gap), env(safe-area-inset-top)) max(var(--sr-gap), env(safe-area-inset-right)) max(var(--sr-gap), env(safe-area-inset-bottom)) max(var(--sr-gap), env(safe-area-inset-left)); }
  .sr-write-box { max-height: calc(100vh - 2 * var(--sr-gap)); padding-bottom: max(var(--sr-gap), env(safe-area-inset-bottom)); }
  .sr-write-close { top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); }
  .sr-login-title { font-size: 1.35rem; }
  .sr-header-right .sr-btn { padding-left: 14px; padding-right: 14px; font-size: 0.9rem; }
  .sr-header-inner .sr-logo { min-width: 0; }
  /* Brief feed — comfortable tap */
  .sr-brief-feed { max-width: none; }
  .sr-brief-item { min-height: 44px; padding: 12px 0; }
  .sr-brief-title { font-size: 1rem; }
  .sr-brief-more-wrap { margin-top: 16px; }
  .sr-brief-more-btn { min-height: 44px; padding: 12px 0; }
  /* Feed sort dropdown — 16px font avoids iOS zoom on focus, 44px tap target */
  .sr-feed-select { font-size: 16px; min-height: 44px; padding: 10px 36px 10px 12px; }
  .sr-feed-switcher-wrap { margin-bottom: 12px; }
}
@media (max-width: 380px) {
  .sr-logo span:not(.sr-logo-icon) { font-size: 1rem; }
  .sr-header-right .sr-btn { padding-left: 10px; padding-right: 10px; font-size: 0.85rem; }
}

/* ==========================================================================
   Front End PM — dark theme (Messages page)
   Targets #fep-wrapper (output by [front-end-pm] shortcode)
   ========================================================================== */
#fep-wrapper {
  background: var(--sr-card) !important;
  color: var(--sr-text) !important;
  border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius);
}
#fep-wrapper a:not(.fep-button) {
  color: var(--sr-accent) !important;
}
#fep-wrapper a:not(.fep-button):hover {
  color: var(--sr-accent-hover) !important;
}
/* Header / welcome box (#fep-header.fep-table) */
#fep-wrapper #fep-header,
#fep-wrapper #fep-header.fep-table {
  background: var(--sr-card) !important;
  border: 1px solid var(--sr-border) !important;
  color: var(--sr-text) !important;
}
#fep-wrapper .fep-header-welcome,
#fep-wrapper .fep-header-unread-text,
#fep-wrapper .fep-header-box-size {
  color: var(--sr-text) !important;
}
/* Menu toggle button */
#fep-wrapper #fep-menu-toggle-button.fep-button {
  background: var(--sr-card) !important;
  border: 1px solid var(--sr-border) !important;
  color: var(--sr-text) !important;
}
#fep-wrapper #fep-menu-toggle-button.fep-button:hover {
  background: var(--sr-dark) !important;
  color: var(--sr-accent) !important;
}
/* Menu links: New Message, Message Box, Settings, etc. */
#fep-wrapper #fep-menu .fep-button,
#fep-wrapper .fep-button {
  background: var(--sr-card) !important;
  border: 1px solid var(--sr-border) !important;
  color: var(--sr-text) !important;
}
#fep-wrapper #fep-menu .fep-button:hover,
#fep-wrapper .fep-button:hover {
  background: var(--sr-dark) !important;
  border-color: var(--sr-muted) !important;
  color: var(--sr-accent) !important;
}
#fep-wrapper #fep-menu .fep-button-active,
#fep-wrapper .fep-button-active {
  background: rgba(230, 57, 0, 0.2) !important;
  border-color: var(--sr-accent) !important;
  color: var(--sr-accent) !important;
}
/* Content area and "No messages found" */
#fep-wrapper #fep-content {
  background: transparent !important;
  color: var(--sr-text);
  border-color: var(--sr-border) !important;
}
/* Send Message form block — gray border (override plugin white border) */
#fep-wrapper #fep-content .fep-form,
#fep-wrapper #fep-content form,
#fep-wrapper .fep-form {
  border: 1px solid var(--sr-border) !important;
  border-radius: var(--sr-radius);
  padding: var(--sr-gap);
  background: var(--sr-card);
}
/* Any wrapper around the form (e.g. div containing .fep-form) — force gray border */
#fep-wrapper #fep-content div[style*="border"] {
  border-color: var(--sr-border) !important;
}
body.sr-fep-messages-page #fep-wrapper #fep-content {
  border-color: var(--sr-border) !important;
}
#fep-wrapper #fep-content .fep-error {
  background: var(--sr-card) !important;
  border: 1px solid var(--sr-accent) !important;
  color: var(--sr-text) !important;
}
#fep-wrapper #fep-content table,
#fep-wrapper .fep-table {
  background: var(--sr-card) !important;
  border-color: var(--sr-border);
  color: var(--sr-text);
}
#fep-wrapper #fep-content table th,
#fep-wrapper #fep-content table td {
  border-color: var(--sr-border);
  color: var(--sr-text);
}
/* Footer (plugin link) */
#fep-wrapper #fep-footer {
  background: transparent !important;
  border-color: var(--sr-border);
  color: var(--sr-muted);
}
#fep-wrapper #fep-footer a {
  color: var(--sr-muted) !important;
}
/* Form inputs (compose message page) */
#fep-wrapper input[type="text"],
#fep-wrapper input[type="email"],
#fep-wrapper input[type="url"],
#fep-wrapper textarea,
#fep-wrapper select {
  background: var(--sr-dark) !important;
  border: 1px solid var(--sr-border) !important;
  color: var(--sr-text) !important;
}
#fep-wrapper input:focus,
#fep-wrapper textarea:focus,
#fep-wrapper select:focus {
  border-color: var(--sr-accent) !important;
  outline: none;
}

/* ==========================================================================
   FEP Send Message form — match Write post editor style
   ========================================================================== */
#fep-wrapper .fep-form,
#fep-wrapper form {
  max-width: 100%;
}
#fep-wrapper .fep-form h2,
#fep-wrapper .fep-form .fep-form-heading,
#fep-wrapper #fep-content h2 {
  margin: 0 0 20px;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--sr-text);
}
#fep-wrapper .fep-form .fep-form-field,
#fep-wrapper .fep-form p,
#fep-wrapper form > p {
  margin-bottom: 16px;
}
#fep-wrapper .fep-form label,
#fep-wrapper .fep-form .fep-label,
#fep-wrapper form label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.9rem;
  color: var(--sr-text);
}
#fep-wrapper .fep-form input[type="text"],
#fep-wrapper .fep-form input[type="email"],
#fep-wrapper .fep-form input[type="url"],
#fep-wrapper form input[type="text"],
#fep-wrapper form input[type="email"] {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--sr-text);
  background: var(--sr-dark);
  border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius-sm);
}
#fep-wrapper .fep-form textarea.wp-editor-area,
#fep-wrapper form textarea {
  min-height: 200px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--sr-text);
  background: var(--sr-dark);
  border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius-sm);
}
/* WordPress editor wrapper (Visual/Code) */
#fep-wrapper .wp-editor-wrap,
#fep-wrapper .wp-editor-container {
  border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius-sm);
  background: var(--sr-dark);
}
#fep-wrapper .wp-editor-wrap .wp-editor-tools,
#fep-wrapper .wp-editor-wrap .wp-editor-toolbar {
  background: var(--sr-dark);
  border-bottom: 1px solid var(--sr-border);
  padding: 8px 10px;
}
#fep-wrapper .wp-editor-wrap .wp-editor-tabs button,
#fep-wrapper .wp-editor-wrap .quicktags-toolbar input {
  background: transparent;
  border: none;
  color: var(--sr-muted);
  padding: 2px 6px;
  font-family: inherit;
  font-size: 0.7rem;
  border-radius: var(--sr-radius-sm);
  cursor: pointer;
  min-height: 22px;
  line-height: 1.2;
}
#fep-wrapper .wp-editor-wrap .wp-editor-tabs button:hover,
#fep-wrapper .wp-editor-wrap .wp-editor-tabs button.wp-switch-editor,
#fep-wrapper .wp-editor-wrap .quicktags-toolbar input:hover {
  color: var(--sr-text);
  background: var(--sr-card);
}
#fep-wrapper .wp-editor-wrap .mce-toolbar-grp,
#fep-wrapper .wp-editor-wrap .mce-toolbar {
  background: var(--sr-dark) !important;
  border: none !important;
  border-bottom: 1px solid var(--sr-border) !important;
}
#fep-wrapper .wp-editor-wrap .mce-btn {
  background: transparent !important;
  border: none !important;
  color: var(--sr-muted) !important;
}
#fep-wrapper .wp-editor-wrap .mce-btn:hover,
#fep-wrapper .wp-editor-wrap .mce-btn:focus {
  color: var(--sr-text) !important;
  background: var(--sr-card) !important;
}
#fep-wrapper .wp-editor-wrap .mce-edit-area,
#fep-wrapper .wp-editor-wrap .mce-panel {
  background: var(--sr-dark) !important;
  border-color: var(--sr-border) !important;
}
#fep-wrapper .wp-editor-wrap iframe.body {
  background: var(--sr-dark) !important;
}
/* TinyMCE iframe body (dark content area) — inject via JS or editor_css; we style container */
#fep-wrapper .wp-editor-container .wp-editor-area {
  color: var(--sr-text);
  background: var(--sr-dark);
}
/* File upload row */
#fep-wrapper .fep-form input[type="file"],
#fep-wrapper form input[type="file"] {
  font-size: 0.9rem;
  color: var(--sr-text);
}
#fep-wrapper .fep-form .fep-attachment,
#fep-wrapper form .fep-attachment,
#fep-wrapper .fep-form [class*="attachment"] {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--sr-border);
}
#fep-wrapper .fep-form a[href="#"],
#fep-wrapper form a.fep-remove,
#fep-wrapper form a[href*="remove"] {
  color: var(--sr-accent);
  font-size: 0.9rem;
}
#fep-wrapper .fep-form a[href="#"]:hover,
#fep-wrapper form a.fep-remove:hover {
  color: var(--sr-accent-hover);
}
#fep-wrapper .fep-form input[type="submit"],
#fep-wrapper form input[type="submit"],
#fep-wrapper .fep-form button[type="submit"],
#fep-wrapper form button[type="submit"] {
  min-height: 44px;
  padding: 10px 20px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  color: #fff;
  background: var(--sr-accent);
  border: none;
  border-radius: var(--sr-radius-sm);
  cursor: pointer;
}
#fep-wrapper .fep-form input[type="submit"]:hover,
#fep-wrapper form input[type="submit"]:hover,
#fep-wrapper .fep-form button[type="submit"]:hover {
  background: var(--sr-accent-hover);
}

/* Blocked Users (token input) — dark theme */
#fep-wrapper ul.token-input-list-facebook {
  background-color: var(--sr-dark) !important;
  border-color: var(--sr-border) !important;
  color: var(--sr-text);
}
#fep-wrapper ul.token-input-list-facebook li input {
  background-color: var(--sr-dark) !important;
  color: var(--sr-text) !important;
}
#fep-wrapper li.token-input-token-facebook {
  background-color: var(--sr-card) !important;
  color: var(--sr-text) !important;
  border-color: var(--sr-border) !important;
}
#fep-wrapper li.token-input-token-facebook span {
  color: var(--sr-muted) !important;
}
#fep-wrapper li.token-input-selected-token-facebook {
  background-color: var(--sr-accent) !important;
  border-color: var(--sr-accent) !important;
  color: #fff !important;
}
#fep-wrapper div.token-input-dropdown-facebook {
  background-color: var(--sr-dark) !important;
  border-color: var(--sr-border) !important;
}
#fep-wrapper div.token-input-dropdown-facebook p {
  color: var(--sr-muted) !important;
}
#fep-wrapper div.token-input-dropdown-facebook ul li {
  background-color: var(--sr-dark) !important;
  color: var(--sr-text);
}
#fep-wrapper div.token-input-dropdown-facebook ul li.token-input-dropdown-item-facebook,
#fep-wrapper div.token-input-dropdown-facebook ul li.token-input-dropdown-item2-facebook {
  background-color: var(--sr-dark) !important;
}
#fep-wrapper div.token-input-dropdown-facebook ul li.token-input-selected-dropdown-item-facebook {
  background-color: var(--sr-accent) !important;
  color: #fff !important;
}

/* ==========================================================================
   FEP Message box (message list) — dark cards per message
   Override plugin inline styles: .fep-odd-even > div (F2F7FC/FAFAFA), title heads
   ========================================================================== */
body.sr-fep-messages-page #fep-wrapper .fep-odd-even > div,
body.sr-fep-messages-page #fep-wrapper .fep-odd-even > div:nth-child(odd),
body.sr-fep-messages-page #fep-wrapper .fep-odd-even > div:nth-child(even) {
  background: var(--sr-card) !important;
  background-color: var(--sr-card) !important;
  border-color: var(--sr-border) !important;
  color: var(--sr-text) !important;
}
body.sr-fep-messages-page #fep-wrapper .fep-message .fep-message-title-heading,
body.sr-fep-messages-page #fep-wrapper .fep-per-message .fep-message-title {
  background: var(--sr-card) !important;
  background-color: var(--sr-card) !important;
  color: var(--sr-text) !important;
}
body.sr-fep-messages-page #fep-wrapper #fep-content-single-heads .fep-message-head:hover,
body.sr-fep-messages-page #fep-wrapper #fep-content-single-heads .fep-message-head-active {
  background: var(--sr-dark) !important;
  background-color: var(--sr-dark) !important;
  color: var(--sr-text) !important;
}
#fep-wrapper #fep-content .fep-table,
#fep-wrapper #fep-content table.fep-message-table,
#fep-wrapper .fep-message-list,
#fep-wrapper .fep-message {
  background: var(--sr-card) !important;
  border-color: var(--sr-border) !important;
  color: var(--sr-text) !important;
}
#fep-wrapper #fep-content tbody tr,
#fep-wrapper #fep-content .fep-message,
#fep-wrapper .fep-message-row,
#fep-wrapper .fep-table-row {
  background: var(--sr-card) !important;
  border-bottom: 1px solid var(--sr-border) !important;
  color: var(--sr-text) !important;
}
#fep-wrapper .fep-table-row:hover {
  background: var(--sr-dark) !important;
}
#fep-wrapper .fep-table-row .fep-column {
  color: var(--sr-text) !important;
}
#fep-wrapper .fep-table-row .fep-message-author,
#fep-wrapper .fep-table-row .fep-message-date {
  color: var(--sr-text) !important;
}
#fep-wrapper .fep-table-row .fep-message-date {
  color: var(--sr-muted) !important;
}
#fep-wrapper .fep-table-row .fep-column-title a {
  color: var(--sr-accent) !important;
}
#fep-wrapper .fep-table-row .fep-column-title a:hover {
  color: var(--sr-accent-hover) !important;
}
#fep-wrapper .fep-cb-check-uncheck-all-div,
#fep-wrapper .fep-cb-check-uncheck-all-div label {
  color: var(--sr-text) !important;
}
#fep-wrapper input[type="checkbox"].fep-cb,
#fep-wrapper input[type="checkbox"].fep-cb-check-uncheck-all {
  accent-color: var(--sr-accent);
  background: var(--sr-dark) !important;
  border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius-sm);
}
#fep-wrapper #fep-content tbody tr:hover,
#fep-wrapper .fep-message:hover {
  background: var(--sr-dark) !important;
}
#fep-wrapper #fep-content td,
#fep-wrapper #fep-content th,
#fep-wrapper .fep-message td,
#fep-wrapper .fep-message th {
  border-color: var(--sr-border) !important;
  color: var(--sr-text) !important;
}
/* Bulk action bar and "Show all" — same background as main content (no separate strip) */
#fep-wrapper .fep-action-table,
#fep-wrapper .fep-action-table > div,
#fep-wrapper .fep-table.fep-action-table {
  background: var(--sr-card) !important;
  background-color: var(--sr-card) !important;
  border-color: var(--sr-border) !important;
  color: var(--sr-text) !important;
}
#fep-wrapper .fep-bulk-action,
#fep-wrapper .fep-filters,
#fep-wrapper #fep-content > div:first-child,
#fep-wrapper .fep-table thead {
  background: var(--sr-card) !important;
  background-color: var(--sr-card) !important;
  border-color: var(--sr-border) !important;
  color: var(--sr-text) !important;
}
#fep-wrapper .fep-bulk-action select,
#fep-wrapper .fep-filters select,
#fep-wrapper #fep-content select {
  background: var(--sr-dark) !important;
  border: 1px solid var(--sr-border) !important;
  color: var(--sr-text) !important;
}
#fep-wrapper .fep-bulk-action .fep-button,
#fep-wrapper .fep-filters .fep-button {
  background: var(--sr-card) !important;
  border: 1px solid var(--sr-border) !important;
  color: var(--sr-text) !important;
}
#fep-wrapper .fep-action-table button.fep-button[type="submit"],
#fep-wrapper .fep-action-table .fep-button[name="fep_action"] {
  min-height: 32px;
  padding: 6px 12px;
  font-size: 0.85rem;
}

/* ==========================================================================
   FEP Directory (user list) — dark rows, Block / Send Message links
   ========================================================================== */
#fep-wrapper .fep-directory-table,
#fep-wrapper #fep-directory table,
#fep-wrapper .fep-user-list {
  background: var(--sr-card) !important;
  border-color: var(--sr-border) !important;
}
#fep-wrapper .fep-directory-table tr,
#fep-wrapper #fep-directory tbody tr {
  background: var(--sr-card) !important;
  border-color: var(--sr-border) !important;
  color: var(--sr-text) !important;
}
#fep-wrapper .fep-directory-table tr:hover,
#fep-wrapper #fep-directory tbody tr:hover {
  background: var(--sr-dark) !important;
}
#fep-wrapper .fep-directory-table td,
#fep-wrapper .fep-directory-table th,
#fep-wrapper #fep-directory td,
#fep-wrapper #fep-directory th {
  border-color: var(--sr-border) !important;
  color: var(--sr-text) !important;
}
#fep-wrapper .fep-directory-table a,
#fep-wrapper #fep-directory a {
  color: var(--sr-accent) !important;
}
#fep-wrapper .fep-directory-table a:hover,
#fep-wrapper #fep-directory a:hover {
  color: var(--sr-accent-hover) !important;
}

/* ==========================================================================
   FEP Dialog (thread view) — participants, message bubbles, composer
   ========================================================================== */
#fep-wrapper .fep-thread-participants,
#fep-wrapper .fep-participants,
#fep-wrapper .fep-message-head,
#fep-wrapper [class*="participant"] {
  background: var(--sr-card) !important;
  border: 1px solid var(--sr-border) !important;
  border-radius: var(--sr-radius-sm);
  color: var(--sr-text) !important;
  padding: 10px 14px;
}
#fep-wrapper .fep-thread-participants *,
#fep-wrapper .fep-participants *,
#fep-wrapper .fep-message-head * {
  color: inherit !important;
}
#fep-wrapper .fep-thread-participants a,
#fep-wrapper .fep-participants a,
#fep-wrapper .fep-message-head a {
  color: var(--sr-accent) !important;
}
/* Single message bubbles in thread */
#fep-wrapper .fep-message-content,
#fep-wrapper .fep-per-message,
#fep-wrapper .fep-per-message-own,
#fep-wrapper .fep-per-message-admin,
#fep-wrapper .fep-message-content-own,
#fep-wrapper .fep-message-content-admin {
  background: var(--sr-card) !important;
  border: 1px solid var(--sr-border) !important;
  border-radius: var(--sr-radius);
  color: var(--sr-text) !important;
  padding: 12px 16px;
}
#fep-wrapper .fep-per-message-own .fep-message-content,
#fep-wrapper .fep-message-content-own {
  background: var(--sr-dark) !important;
  border-color: var(--sr-muted) !important;
}
#fep-wrapper .fep-message-content p,
#fep-wrapper .fep-per-message p {
  color: var(--sr-text) !important;
}
#fep-wrapper .fep-message-content .fep-message-date,
#fep-wrapper .fep-per-message .fep-message-date,
#fep-wrapper .fep-message-meta {
  color: var(--sr-muted) !important;
}
/* Toggle Messages button */
#fep-wrapper .fep-toggle-messages,
#fep-wrapper input[type="button"][value*="Toggle"],
#fep-wrapper button[type="button"] {
  background: var(--sr-card) !important;
  border: 1px solid var(--sr-border) !important;
  color: var(--sr-text) !important;
  padding: 8px 16px;
  border-radius: var(--sr-radius-sm);
  cursor: pointer;
}
#fep-wrapper .fep-toggle-messages:hover,
#fep-wrapper input[type="button"][value*="Toggle"]:hover {
  background: var(--sr-dark) !important;
  color: var(--sr-accent) !important;
}

/* ==========================================================================
   FEP Avatars — single image, no overlay; dark fallback
   ========================================================================== */
#fep-wrapper .fep-avatar-p,
#fep-wrapper .fep-avatar-1,
#fep-wrapper .fep-avatar-2 {
  background: var(--sr-card) !important;
  border-radius: 50%;
}
#fep-wrapper .fep-avatar,
#fep-wrapper .avatar,
#fep-wrapper img.avatar {
  background: var(--sr-card) !important;
  border-radius: 50%;
  overflow: hidden;
  z-index: 1;
}
#fep-wrapper td .avatar,
#fep-wrapper .fep-message .avatar,
#fep-wrapper .fep-per-message .avatar {
  display: block !important;
}
/* Hide duplicate default silhouette overlay on top of custom avatar */
#fep-wrapper .fep-avatar-wrap .avatar + img[src*="gravatar"][src*="d=mm"],
#fep-wrapper .fep-avatar-wrap img.dashicons,
#fep-wrapper td .avatar + .dashicons {
  display: none !important;
}
#fep-wrapper .fep-avatar-wrap {
  position: relative;
}
#fep-wrapper .fep-avatar-wrap img.avatar {
  position: relative;
  z-index: 2;
}

/* Override inline light backgrounds in FEP content */
body.sr-fep-messages-page #fep-wrapper #fep-content div[style*="background-color"],
body.sr-fep-messages-page #fep-wrapper #fep-content div[style*="background:"] {
  background: var(--sr-card) !important;
}
body.sr-fep-messages-page #fep-wrapper table[style*="background"],
body.sr-fep-messages-page #fep-wrapper td[style*="background"] {
  background: var(--sr-card) !important;
}
body.sr-fep-messages-page #fep-wrapper tr[style*="background"] {
  background: var(--sr-card) !important;
}
/* Participants label contrast */
#fep-wrapper .fep-participants-label,
#fep-wrapper .fep-message-head label {
  color: var(--sr-text) !important;
}

/* ==========================================================================
   FEP Settings — Blocked Users token-input: same background as content, smaller width
   ========================================================================== */
#fep-wrapper ul.token-input-list-facebook,
#fep-wrapper .token-input-list-facebook {
  width: 100% !important;
  max-width: 280px !important;
  background: var(--sr-card) !important;
  border-color: var(--sr-border) !important;
  color: var(--sr-text) !important;
}
#fep-wrapper ul.token-input-list-facebook li input,
#fep-wrapper .token-input-list-facebook li input {
  background: var(--sr-card) !important;
  color: var(--sr-text) !important;
}
#fep-wrapper li.token-input-token-facebook {
  background: var(--sr-dark) !important;
  border-color: var(--sr-border) !important;
  color: var(--sr-text) !important;
}
#fep-wrapper li.token-input-token-facebook span {
  color: var(--sr-muted) !important;
}
#fep-wrapper li.token-input-selected-token-facebook {
  background: var(--sr-accent) !important;
  border-color: var(--sr-accent) !important;
  color: #fff !important;
}
#fep-wrapper li.token-input-input-token-facebook {
  background: transparent !important;
}
#fep-wrapper div.token-input-dropdown-facebook {
  max-width: 280px !important;
  width: 100% !important;
  background: var(--sr-card) !important;
  border-color: var(--sr-border) !important;
}
#fep-wrapper div.token-input-dropdown-facebook p {
  color: var(--sr-muted) !important;
}
#fep-wrapper div.token-input-dropdown-facebook ul li {
  background: var(--sr-card) !important;
  color: var(--sr-text) !important;
}
#fep-wrapper div.token-input-dropdown-facebook ul li.token-input-selected-dropdown-item-facebook {
  background: var(--sr-dark) !important;
  color: var(--sr-accent) !important;
}
#fep-wrapper .fep-form-field-blocked_users .token-input-list-facebook {
  max-width: 280px !important;
}