/* ==========================================================================
   Rostrum Forum — forum.css
   Modern, clean design. All colours come from CSS custom properties so
   the admin can override everything through the Appearance panel.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Custom property defaults (overridden by inline style from PHP)
   -------------------------------------------------------------------------- */
#rf-wrapper {
  --rf-color:              #3b82f6;
  --rf-color-accent:       #1d4ed8;
  --rf-text:               #1f2937;
  --rf-text-light:         #6b7280;
  --rf-link:               #3b82f6;
  --rf-bg:                 #ffffff;
  --rf-bg-alt:             #f9fafb;
  --rf-border:             #e5e7eb;
  --rf-indicator-read:     #9ca3af;
  --rf-indicator-unread:   #3b82f6;
  --rf-font:               system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --rf-font-size:          14px;
  --rf-radius:             8px;
  --rf-radius-sm:          4px;
  --rf-shadow:             0 1px 3px rgba(0,0,0,.08);
  --rf-shadow-md:          0 4px 12px rgba(0,0,0,.1);
  --rf-transition:         160ms ease;
}

/* --------------------------------------------------------------------------
   Base reset inside the wrapper
   -------------------------------------------------------------------------- */
#rf-wrapper {
  font-family: var(--rf-font);
  font-size:   var(--rf-font-size);
  color:       var(--rf-text);
  line-height: 1.7;
  text-shadow: none;
  box-sizing:  border-box;
}

#rf-wrapper *,
#rf-wrapper *::before,
#rf-wrapper *::after {
  box-sizing: inherit;
}

#rf-wrapper a {
  color:           var(--rf-link);
  text-decoration: none;
  border:          none;
  box-shadow:      none;
  font-size:       inherit;
  font-weight:     inherit;
  transition:      color var(--rf-transition);
}

#rf-wrapper a:hover {
  color:           var(--rf-color-accent);
  text-decoration: underline;
}

#rf-wrapper pre,
#rf-wrapper code {
  white-space: pre-wrap;
  word-wrap:   break-word;
}

#rf-wrapper img  { max-width: 100%; height: auto; }
#rf-wrapper iframe { max-width: 100%; }

.rf-clear { clear: both; }
.screen-reader-text { position: absolute !important; clip: rect(1px,1px,1px,1px); width: 1px; height: 1px; overflow: hidden; }

/* --------------------------------------------------------------------------
   Header / Navigation
   -------------------------------------------------------------------------- */
#rf-header {
  display:         flex;
  align-items:     center;
  flex-wrap:       wrap;
  gap:             8px;
  padding:         12px 0 10px;
  border-bottom:   1px solid var(--rf-border);
  margin-bottom:   16px;
}

#rf-navigation {
  display:   flex;
  flex-wrap: wrap;
  gap:       4px;
  flex:      1;
}

#rf-navigation a {
  display:       inline-flex;
  align-items:   center;
  gap:           5px;
  padding:       5px 12px;
  border-radius: var(--rf-radius-sm);
  font-size:     13px;
  font-weight:   500;
  color:         var(--rf-text);
  transition:    background var(--rf-transition), color var(--rf-transition);
}

#rf-navigation a:hover {
  background:      var(--rf-bg-alt);
  text-decoration: none;
}

/* Active / highlight links */
#rf-navigation a.rf-home-link { color: var(--rf-color); }

/* Login / logout */
#rf-navigation a.rf-logout-link,
#rf-navigation a.rf-login-link  { color: var(--rf-text-light); }

#rf-nav-mobile { display: none; cursor: pointer; padding: 6px 10px; border-radius: var(--rf-radius-sm); font-size: 13px; font-weight: 600; border: 1px solid var(--rf-border); }

/* Search input */
#rf-search {
  display:     flex;
  align-items: center;
  gap:         6px;
  position:    relative;
}

#rf-search input[type="search"] {
  border:        1px solid var(--rf-border);
  border-radius: var(--rf-radius);
  padding:       6px 12px;
  font-size:     13px;
  background:    var(--rf-bg-alt);
  color:         var(--rf-text);
  outline:       none;
  transition:    border-color var(--rf-transition);
}

#rf-search input[type="search"]:focus { border-color: var(--rf-color); }
#rf-search .rf-search-icon { color: var(--rf-text-light); }

/* Breadcrumbs */
#rf-breadcrumbs {
  display:      flex;
  flex-wrap:    wrap;
  align-items:  center;
  gap:          4px;
  font-size:    13px;
  color:        var(--rf-text-light);
  padding:      6px 0 12px;
}

#rf-breadcrumbs a { color: var(--rf-text-light); }
#rf-breadcrumbs a:hover { color: var(--rf-color); text-decoration: none; }
#rf-breadcrumbs .rf-breadcrumb-sep { font-size: 10px; color: var(--rf-border); }
#rf-breadcrumbs .rf-breadcrumb-icon { margin-right: 4px; }

/* --------------------------------------------------------------------------
   Title element (section headers in overview / forum view)
   -------------------------------------------------------------------------- */
.rf-title-element {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  background:      var(--rf-color);
  color:           #fff;
  padding:         10px 16px;
  border-radius:   var(--rf-radius) var(--rf-radius) 0 0;
  font-size:       15px;
  font-weight:     600;
  margin-top:      18px;
}

.rf-title-element:first-child { margin-top: 0; }
.rf-title-element.rf-title-dark { background: var(--rf-text); }
.rf-title-icon { margin-right: 8px; }
.rf-last-post-headline { font-size: 12px; font-weight: 400; opacity: .75; }

/* --------------------------------------------------------------------------
   Content container and rows
   -------------------------------------------------------------------------- */
.rf-content-container {
  border:        1px solid var(--rf-border);
  border-top:    none;
  border-radius: 0 0 var(--rf-radius) var(--rf-radius);
  overflow:      hidden;
  margin-bottom: 4px;
}

.rf-content-element {
  display:      flex;
  align-items:  flex-start;
  gap:          12px;
  padding:      12px 16px;
  border-bottom: 1px solid var(--rf-border);
  background:   var(--rf-bg);
  transition:   background var(--rf-transition);
}

.rf-content-element:last-child { border-bottom: none; }
.rf-content-element:nth-child(even) { background: var(--rf-bg-alt); }

/* --------------------------------------------------------------------------
   Forum elements
   -------------------------------------------------------------------------- */
.rf-forum-status {
  flex-shrink: 0;
  width:       40px;
  height:      40px;
  display:     flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--rf-radius);
  background:  var(--rf-bg-alt);
  border:      1px solid var(--rf-border);
  font-size:   18px;
  color:       var(--rf-indicator-read);
  transition:  color var(--rf-transition), border-color var(--rf-transition);
}

.rf-forum-status.unread {
  color:         var(--rf-indicator-unread);
  border-color:  var(--rf-color);
  background:    color-mix(in srgb, var(--rf-color) 8%, transparent);
}

.rf-forum-name { flex: 1; min-width: 0; }
.rf-forum-title { font-size: 15px; font-weight: 600; display: block; }
.rf-forum-description { display: block; color: var(--rf-text-light); font-size: 12px; margin-top: 2px; }
.rf-forum-stats,
.rf-forum-lastpost-small { display: block; color: var(--rf-text-light); font-size: 12px; margin-top: 4px; }
.rf-forum-subforums { display: block; color: var(--rf-text-light); font-size: 12px; margin-top: 4px; }

.rf-forum-poster {
  flex-shrink: 0;
  width:       160px;
  font-size:   12px;
  color:       var(--rf-text-light);
  display:     flex;
  align-items: center;
  gap:         8px;
}

.rf-poster-avatar img { border-radius: var(--rf-radius-sm); flex-shrink: 0; }
.rf-poster-summary { min-width: 0; overflow: hidden; }
.rf-poster-summary a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rf-no-topics { display: block; color: var(--rf-text-light); font-size: 12px; }

/* --------------------------------------------------------------------------
   Topic elements
   -------------------------------------------------------------------------- */
.rf-topic-status {
  flex-shrink: 0;
  width:       36px;
  height:      36px;
  display:     flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background:  var(--rf-bg-alt);
  border:      2px solid var(--rf-border);
  color:       var(--rf-indicator-read);
  font-size:   15px;
  transition:  all var(--rf-transition);
}

.rf-topic-status.unread {
  color:        var(--rf-indicator-unread);
  border-color: var(--rf-color);
  background:   color-mix(in srgb, var(--rf-color) 8%, transparent);
}

.rf-topic-name { flex: 1; min-width: 0; }

.rf-topic-name > a {
  font-size:    14px;
  font-weight:  600;
  display:      block;
  overflow:     hidden;
  text-overflow: ellipsis;
  white-space:  nowrap;
}

.rf-topic-icon {
  margin-right: 4px;
  font-size:    11px;
  color:        var(--rf-text-light);
}

.rf-topic-name small {
  display:    block;
  color:      var(--rf-text-light);
  font-size:  12px;
  margin-top: 2px;
}

.rf-topic-stats,
.rf-topic-lastpost-small { display: none; }   /* shown on small screens only */

.rf-topic-poster {
  flex-shrink: 0;
  width:       140px;
  font-size:   12px;
  color:       var(--rf-text-light);
  display:     flex;
  align-items: center;
  gap:         8px;
}

/* Sticky topic highlight */
.rf-topic-sticky .rf-topic-name > a { color: var(--rf-color-accent); }

/* --------------------------------------------------------------------------
   Page numbers (inline pagination in topic rows)
   -------------------------------------------------------------------------- */
.rf-pages {
  display:   inline-flex;
  flex-wrap: wrap;
  gap:       3px;
  font-size: 12px;
}

.rf-pages a {
  display:       flex;
  align-items:   center;
  justify-content: center;
  min-width:     24px;
  height:        22px;
  padding:       0 5px;
  border:        1px solid var(--rf-border);
  border-radius: var(--rf-radius-sm);
  color:         var(--rf-text-light);
  font-size:     11px;
}

.rf-pages a:hover { background: var(--rf-color); color: #fff; border-color: var(--rf-color); text-decoration: none; }

/* Full pagination bar */
.rf-pages-and-menu {
  display:     flex;
  align-items: center;
  flex-wrap:   wrap;
  gap:         8px;
  padding:     8px 0;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.rf-btn {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  padding:       6px 14px;
  border-radius: var(--rf-radius-sm);
  font-size:     13px;
  font-weight:   500;
  cursor:        pointer;
  border:        1px solid transparent;
  text-decoration: none !important;
  transition:    background var(--rf-transition), color var(--rf-transition), border-color var(--rf-transition);
  white-space:   nowrap;
}

.rf-btn-primary  { background: var(--rf-color);  color: #fff; border-color: var(--rf-color); }
.rf-btn-primary:hover  { background: var(--rf-color-accent); border-color: var(--rf-color-accent); color: #fff; }
.rf-btn-neutral  { background: var(--rf-bg-alt); color: var(--rf-text); border-color: var(--rf-border); }
.rf-btn-neutral:hover  { border-color: var(--rf-text-light); color: var(--rf-text); }
.rf-btn-danger   { background: #fef2f2; color: #dc2626; border-color: #fecaca; }
.rf-btn-danger:hover   { background: #dc2626; color: #fff; border-color: #dc2626; }
.rf-btn-success  { background: #f0fdf4; color: #16a34a; border-color: #bbf7d0; }
.rf-btn-success:hover  { background: #16a34a; color: #fff; }
.rf-btn-cancel   { background: transparent; color: var(--rf-text-light); }
.rf-menu-icon    { font-size: 12px; }

/* Forum menu (New Topic / Reply bar) */
.rf-forum-menu { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }

/* --------------------------------------------------------------------------
   Main title
   -------------------------------------------------------------------------- */
.rf-main-title {
  font-size:    20px;
  font-weight:  700;
  color:        var(--rf-text);
  margin:       12px 0 16px;
  padding:      0;
  border:       none;
  line-height:  1.3;
}

.rf-main-title-icon { margin-right: 8px; color: var(--rf-text-light); font-size: 16px; }
.rf-main-description { color: var(--rf-text-light); font-size: 13px; margin-top: -10px; margin-bottom: 16px; }

/* --------------------------------------------------------------------------
   Post element
   -------------------------------------------------------------------------- */
.rf-post-element {
  display:       flex;
  gap:           0;
  border:        1px solid var(--rf-border);
  border-radius: var(--rf-radius);
  margin-bottom: 10px;
  background:    var(--rf-bg);
  box-shadow:    var(--rf-shadow);
  overflow:      hidden;
  transition:    box-shadow var(--rf-transition);
}

.rf-post-element:hover { box-shadow: var(--rf-shadow-md); }
.rf-post-element.rf-highlight-post { outline: 2px solid var(--rf-color); }

/* Author sidebar */
.rf-post-author-container {
  width:      160px;
  flex-shrink: 0;
  border-right: 1px solid var(--rf-border);
  padding:    16px 12px;
  background: var(--rf-bg-alt);
  text-align: center;
}

.rf-post-author .avatar {
  display:       block;
  margin:        0 auto 10px;
  border-radius: var(--rf-radius);
  max-width:     80px;
  height:        auto;
}

.rf-post-author-name { font-weight: 600; font-size: 13px; word-break: break-word; margin-bottom: 4px; }
.rf-post-author-name a { color: var(--rf-text); }
.rf-post-author-name a.highlight-admin { color: #dc2626 !important; }
.rf-post-author-name a.highlight-moderator { color: #059669 !important; }

.rf-post-author-meta { font-size: 11px; color: var(--rf-text-light); margin-bottom: 4px; }
.rf-post-counter { display: block; }

.rf-post-author-group { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-top: 4px; }

.rf-usergroup-tag {
  display:       inline-block;
  padding:       1px 8px;
  border-radius: var(--rf-radius-sm);
  font-size:     10px;
  font-weight:   500;
  line-height:   18px;
  white-space:   nowrap;
}

.rf-tag-banned       { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.rf-tag-topic-author { background: color-mix(in srgb, var(--rf-color) 12%, transparent); color: var(--rf-color-accent); border: 1px solid color-mix(in srgb, var(--rf-color) 25%, transparent); }

.rf-reputation-badges { color: #f59e0b; font-size: 11px; margin-top: 3px; }
.rf-mention-name { font-size: 11px; color: var(--rf-text-light); }
.rf-user-online  .rf-post-author-container::before { content: ''; display: block; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; margin: 0 auto 8px; }
.rf-user-offline .rf-post-author-container::before { content: ''; display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--rf-border); margin: 0 auto 8px; }

/* Post body */
.rf-post-wrapper { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.rf-post-header {
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  padding:       8px 14px;
  border-bottom: 1px solid var(--rf-border);
  background:    var(--rf-bg-alt);
  font-size:     12px;
  color:         var(--rf-text-light);
  gap:           8px;
}

.rf-post-date a { color: var(--rf-text-light); }
.rf-post-date a:hover { color: var(--rf-color); text-decoration: none; }

.rf-post-menu {
  display:   flex;
  flex-wrap: wrap;
  gap:       4px;
}

.rf-post-menu a {
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  padding:       3px 8px;
  font-size:     11px;
  border:        1px solid var(--rf-border);
  border-radius: var(--rf-radius-sm);
  color:         var(--rf-text-light);
  transition:    all var(--rf-transition);
}

.rf-post-menu a:hover { background: var(--rf-color); color: #fff; border-color: var(--rf-color); text-decoration: none; }
.rf-post-menu-delete:hover { background: #dc2626 !important; border-color: #dc2626 !important; }
.rf-report-link, .rf-report-exists { color: #f59e0b; font-size: 13px; }

.rf-post-message {
  padding: 14px 16px;
  flex:    1;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.rf-post-message p:first-child { margin-top: 0; }
.rf-post-message p:last-child  { margin-bottom: 0; }

.rf-post-message blockquote {
  border-left: 3px solid var(--rf-color);
  padding:     8px 14px;
  margin:      10px 0;
  background:  var(--rf-bg-alt);
  border-radius: 0 var(--rf-radius-sm) var(--rf-radius-sm) 0;
  font-size:   13px;
  color:       var(--rf-text-light);
}

.rf-quote-title { font-size: 11px; font-weight: 600; margin-bottom: 5px; color: var(--rf-text); }

.rf-post-footer {
  display:      flex;
  align-items:  center;
  flex-wrap:    wrap;
  gap:          8px;
  padding:      8px 14px;
  border-top:   1px solid var(--rf-border);
  background:   var(--rf-bg-alt);
  font-size:    12px;
  color:        var(--rf-text-light);
}

.rf-post-meta { margin-left: auto; }
.rf-post-edit-date { font-style: italic; }

.rf-signature {
  padding:     8px 14px;
  border-top:  1px dashed var(--rf-border);
  font-size:   12px;
  color:       var(--rf-text-light);
  font-style:  italic;
}

/* --------------------------------------------------------------------------
   Reactions
   -------------------------------------------------------------------------- */
.rf-post-reactions { display: flex; flex-wrap: wrap; gap: 4px; }
.rf-post-reactions a {
  display:       inline-flex;
  align-items:   center;
  font-size:     18px;
  padding:       2px 5px;
  border-radius: var(--rf-radius-sm);
  border:        1px solid var(--rf-border);
  transition:    all var(--rf-transition);
  cursor:        pointer;
}

.rf-post-reactions a:hover { border-color: var(--rf-color); background: color-mix(in srgb, var(--rf-color) 8%, transparent); text-decoration: none; }
.rf-post-reactions a.rf-reaction-active { border-color: var(--rf-color); background: color-mix(in srgb, var(--rf-color) 12%, transparent); }

.rf-post-reactions-summary { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 14px; }
.rf-reaction-count { font-size: 12px; color: var(--rf-text-light); }

/* --------------------------------------------------------------------------
   Editor
   -------------------------------------------------------------------------- */
#rf-editor-form {
  border:        1px solid var(--rf-border);
  border-radius: var(--rf-radius);
  overflow:      hidden;
  margin-top:    16px;
}

#rf-editor-form .rf-title-element { margin-top: 0; }

.rf-editor-element { padding: 0; }

.rf-editor-row {
  padding:       10px 14px;
  border-bottom: 1px solid var(--rf-border);
}

.rf-editor-row.rf-no-padding { padding: 0; }
.rf-editor-row:last-child { border-bottom: none; }

.rf-editor-row-subject {
  display:     flex;
  align-items: center;
  gap:         10px;
}

.rf-editor-row-subject label { white-space: nowrap; font-weight: 600; font-size: 13px; }

.rf-subject-input,
.rf-editor-row-subject input[type="text"] {
  flex:          1;
  padding:       7px 10px;
  border:        1px solid var(--rf-border);
  border-radius: var(--rf-radius-sm);
  font-size:     14px;
  color:         var(--rf-text);
  outline:       none;
  transition:    border-color var(--rf-transition);
}

.rf-subject-input:focus,
.rf-editor-row-subject input[type="text"]:focus { border-color: var(--rf-color); }

/* wp_editor textarea override */
#rf-editor-form .wp-editor-container { border: none !important; }
#rf-editor-form #wp-message-editor-tools { border-bottom: 1px solid var(--rf-border); }

.rf-editor-row-submit {
  display:       flex;
  align-items:   center;
  gap:           8px;
  padding:       10px 14px;
  background:    var(--rf-bg-alt);
}

.rf-editor-left { flex: 1; }
.rf-editor-right { display: flex; justify-content: flex-end; }

.rf-checkbox-label { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.rf-editor-uploads { display: flex; flex-direction: column; gap: 4px; }
.rf-editor-uploads label { font-weight: 600; font-size: 13px; }

/* --------------------------------------------------------------------------
   Polls
   -------------------------------------------------------------------------- */
.rf-poll {
  margin-bottom: 14px;
}

.rf-poll-result {
  display:       flex;
  align-items:   center;
  gap:           10px;
  padding:       6px 0;
  font-size:     13px;
}

.rf-poll-result > span:first-child { flex: 1; }

.rf-poll-bar {
  flex:          2;
  height:        10px;
  background:    var(--rf-bg-alt);
  border:        1px solid var(--rf-border);
  border-radius: 999px;
  overflow:      hidden;
}

.rf-poll-bar > div {
  height:     100%;
  background: var(--rf-color);
  transition: width 400ms ease;
}

.rf-poll-option {
  display:       flex;
  align-items:   center;
  gap:           8px;
  padding:       4px 0;
  cursor:        pointer;
  font-size:     13px;
}

/* --------------------------------------------------------------------------
   Spoilers
   -------------------------------------------------------------------------- */
.rf-spoiler { margin: 10px 0; }
.rf-spoiler-btn {
  cursor:        pointer;
  background:    var(--rf-bg-alt);
  border:        1px solid var(--rf-border);
  border-radius: var(--rf-radius-sm);
  padding:       5px 12px;
  font-size:     13px;
  font-family:   var(--rf-font);
  transition:    all var(--rf-transition);
}
.rf-spoiler-btn:hover { background: var(--rf-color); color: #fff; border-color: var(--rf-color); }
.rf-spoiler-content { margin-top: 6px; padding: 10px 14px; border: 1px dashed var(--rf-border); border-radius: var(--rf-radius-sm); }

/* --------------------------------------------------------------------------
   Sticky panel (moderator)
   -------------------------------------------------------------------------- */
#rf-sticky-panel { display: none; margin-bottom: 12px; }

.rf-action-panel {
  display: flex;
  flex-wrap: wrap;
}

.rf-action-panel-option {
  flex:          1;
  padding:       14px 16px;
  cursor:        pointer;
  border-right:  1px solid var(--rf-border);
  text-align:    center;
}

.rf-action-panel-option:last-child { border-right: none; }
.rf-action-panel-option input { display: none; }
.rf-action-panel-title { font-size: 16px; font-weight: 600; display: block; }
.rf-action-panel-desc  { font-size: 12px; color: var(--rf-text-light); display: block; margin-top: 4px; }

/* --------------------------------------------------------------------------
   Statistics
   -------------------------------------------------------------------------- */
#rf-statistics {
  margin-top:    20px;
  border:        1px solid var(--rf-border);
  border-radius: var(--rf-radius);
  overflow:      hidden;
}

#rf-statistics-body { padding: 14px 16px; }

#rf-statistics-elements {
  display:   flex;
  flex-wrap: wrap;
  gap:       16px;
}

.rf-statistics-element { text-align: center; }
.rf-element-number { font-size: 20px; font-weight: 700; color: var(--rf-text); }
.rf-statistics-icon { margin-right: 6px; color: var(--rf-color); }
.rf-element-name { font-size: 12px; color: var(--rf-text-light); }

#rf-statistics-online-users { font-size: 12px; color: var(--rf-text-light); margin-top: 10px; }
.rf-online-icon { margin-right: 4px; }

/* --------------------------------------------------------------------------
   Unread controls
   -------------------------------------------------------------------------- */
#rf-read-unread {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         12px;
  font-size:   12px;
  color:       var(--rf-text-light);
  padding:     8px 0;
}

.rf-indicator {
  display:       inline-block;
  width:         10px;
  height:        10px;
  border-radius: 50%;
}

.rf-indicator.rf-unread { background: var(--rf-indicator-unread); }
.rf-indicator.rf-read   { background: var(--rf-indicator-read); }
.rf-indicator-label     { display: flex; align-items: center; gap: 4px; }
.rf-indicator-label a   { color: var(--rf-text-light); }
.rf-indicator-label a:hover { color: var(--rf-color); text-decoration: none; }

/* --------------------------------------------------------------------------
   Notices and errors
   -------------------------------------------------------------------------- */
.rf-notices-panel {
  background:    color-mix(in srgb, var(--rf-color) 8%, transparent);
  border:        1px solid color-mix(in srgb, var(--rf-color) 25%, transparent);
  border-radius: var(--rf-radius);
  padding:       10px 14px;
  margin-bottom: 12px;
}

.rf-notice { font-size: 13px; color: var(--rf-text); padding: 4px 0; }
.rf-error  { background: #fef2f2; border: 1px solid #fecaca; border-radius: var(--rf-radius); padding: 12px 16px; font-size: 14px; color: #dc2626; margin-bottom: 12px; }

/* --------------------------------------------------------------------------
   Profile
   -------------------------------------------------------------------------- */
#rf-profile-header {
  display:       flex;
  align-items:   flex-start;
  gap:           16px;
  padding:       20px;
  border:        1px solid var(--rf-border);
  border-radius: var(--rf-radius);
  margin-bottom: 16px;
  background:    var(--rf-bg-alt);
}

#rf-profile-avatar img { border-radius: var(--rf-radius); max-width: 96px; }

#rf-profile-info h2 { margin: 0 0 6px; font-size: 20px; }

#rf-profile-meta { font-size: 13px; }
#rf-profile-meta dl { display: grid; grid-template-columns: 1fr 2fr; gap: 6px 16px; }
#rf-profile-meta dt { color: var(--rf-text-light); font-weight: 500; }

/* --------------------------------------------------------------------------
   Members list
   -------------------------------------------------------------------------- */
.rf-members .rf-content-element {
  align-items: center;
  gap:         10px;
}

.rf-member .avatar { border-radius: 50%; flex-shrink: 0; }

/* --------------------------------------------------------------------------
   Uploads
   -------------------------------------------------------------------------- */
.rf-uploaded-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.rf-uploaded-file a { display: block; }
.rf-uploaded-file img {
  border:        1px solid var(--rf-border);
  border-radius: var(--rf-radius-sm);
  max-width:     200px;
  height:        auto;
  display:       block;
}

/* --------------------------------------------------------------------------
   Subscription / navigation badges
   -------------------------------------------------------------------------- */
#rf-topic-subscription,
#rf-forum-subscription {
  display:     inline-flex;
  align-items: center;
  gap:         6px;
  font-size:   13px;
  color:       var(--rf-text-light);
  padding:     6px 12px;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  #rf-nav-mobile { display: inline-flex; align-items: center; gap: 6px; }
  #rf-navigation { display: none; width: 100%; flex-direction: column; padding: 4px 0; }
  #rf-navigation.rf-nav-open { display: flex; }

  .rf-forum-poster,
  .rf-topic-poster { display: none; }

  .rf-topic-stats,
  .rf-topic-lastpost-small,
  .rf-forum-lastpost-small { display: block; }

  .rf-post-author-container { width: 100px; }

  #rf-statistics-elements { gap: 10px; }

  .rf-action-panel-option { min-width: 50%; }
}

@media (max-width: 480px) {
  .rf-post-author-container { display: none; }
  .rf-post-element { flex-direction: column; }
}