/*
 Theme Name:   Simracers DTF-style
 Theme URI:    https://simracers.gg
 Description:  Minimal DTF-style theme for sim racing: Popular + Latest front page, card archives.
 Author:       Simracers.gg
 Template:     twentytwentythree
 Version:      1.0.2
 Text Domain:  simracers-dtf
*/

/* ==========================================================================
   Theme: Light (default) and Dark (body.sr-theme-dark)
   ========================================================================== */

:root,
body.sr-body {
	--sr-bg: #f5f5f5;
	--sr-bg-elevated: #fff;
	--sr-bg-sidebar: #eee;
	--sr-border: #e0e0e0;
	--sr-border-strong: #ccc;
	--sr-text: #222;
	--sr-text-muted: #555;
	--sr-text-dim: #666;
	--sr-title: #111;
	--sr-link: #1a73e8;
	--sr-link-hover: #1557b0;
	--sr-header-bg: #fff;
	--sr-header-border: #e0e0e0;
	--sr-header-text: #222;
	--sr-header-link: #555;
	--sr-header-link-hover: #111;
	--sr-card-bg: #fff;
	--sr-card-border: #e0e0e0;
	--sr-card-title: #222;
	--sr-card-muted: #666;
	--sr-category-bg: #e8e8e8;
	--sr-category-text: #444;
	--sr-category-hover-bg: #ddd;
	--sr-short-row-hover: rgba(0, 0, 0, 0.04);
	--sr-shadow: rgba(0, 0, 0, 0.08);
	--sr-shadow-strong: rgba(0, 0, 0, 0.12);
}

body.sr-body.sr-theme-dark {
	--sr-bg: #1a1a1a;
	--sr-bg-elevated: #252525;
	--sr-bg-sidebar: #1f1f1f;
	--sr-border: #333;
	--sr-border-strong: #444;
	--sr-text: #e0e0e0;
	--sr-text-muted: #999;
	--sr-text-dim: #888;
	--sr-title: #fff;
	--sr-link: #7eb8da;
	--sr-link-hover: #9dd4f5;
	--sr-header-bg: #252525;
	--sr-header-border: #333;
	--sr-header-text: #fff;
	--sr-header-link: #b0b0b0;
	--sr-header-link-hover: #fff;
	--sr-card-bg: #252525;
	--sr-card-border: #333;
	--sr-card-title: #e8e8e8;
	--sr-card-muted: #777;
	--sr-category-bg: #3a3a3a;
	--sr-category-text: #b0b0b0;
	--sr-category-hover-bg: #444;
	--sr-short-row-hover: rgba(255, 255, 255, 0.03);
	--sr-shadow: rgba(0, 0, 0, 0.2);
	--sr-shadow-strong: rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   Base
   ========================================================================== */

.sr-body,
body.sr-body,
.sr-main-wrap {
	background: var(--sr-bg);
	color: var(--sr-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, sans-serif;
	line-height: 1.5;
	min-height: 100vh;
}

.sr-body a {
	color: var(--sr-link);
}

.sr-body a:hover {
	color: var(--sr-link-hover);
}

/* Layout: left sidebar | content | right sidebar */
.sr-main-wrap {
	display: grid;
	grid-template-columns: minmax(200px, 280px) 1fr minmax(200px, 280px);
	gap: 0;
	min-height: 100vh;
}

.sr-content {
	min-width: 0;
	width: 900px;
	max-width: 100%;
	padding: 1.5rem 1.5rem 2rem;
	justify-self: center;
}

.sr-sidebar {
	background: var(--sr-bg-sidebar);
	border-left: 1px solid var(--sr-border);
	border-right: 1px solid var(--sr-border);
	min-height: 400px;
	padding: 1.5rem 1rem;
}

.sr-sidebar--left {
	border-right: 1px solid var(--sr-border);
}

.sr-sidebar--right {
	border-left: 1px solid var(--sr-border);
}

/* Left sidebar content */
.sr-sidebar-left {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.sr-sidebar-left__block {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.sr-sidebar-left__block-title {
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--sr-title);
}

.sr-sidebar-left__desc {
	margin: 0;
	font-size: 0.85rem;
	color: var(--sr-text-muted);
}

.sr-theme-toggle--sidebar {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.sr-sidebar-left__topics {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sr-sidebar-left__topic {
	margin: 0.25rem 0;
}

.sr-sidebar-left__topic-link {
	display: inline-block;
	font-size: 0.9rem;
	color: var(--sr-text);
	text-decoration: none;
	padding: 0.2rem 0;
}

.sr-sidebar-left__topic-link:hover {
	color: var(--sr-link);
}

.sr-sidebar-left__topic-link.is-active {
	font-weight: 600;
	color: var(--sr-link);
}

.sr-sidebar-left__links {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
}

.sr-sidebar-left__link {
	font-size: 0.9rem;
	color: var(--sr-link);
	text-decoration: none;
}

.sr-sidebar-left__link:hover {
	text-decoration: underline;
}

/* Social icons (below About / Rules) */
.sr-sidebar-left__social-icons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.sr-sidebar-left__social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	color: var(--sr-text-muted);
	text-decoration: none;
	border-radius: 8px;
	transition: color 0.2s, background 0.2s;
}

.sr-sidebar-left__social-icon:hover {
	color: var(--sr-link);
	background: var(--sr-bg-elevated);
}

.sr-sidebar-left__social-icon .sr-icon {
	width: 22px;
	height: 22px;
}

/* Right sidebar content */
.sr-sidebar-right {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.sr-sidebar-right__block {
	background: var(--sr-bg-elevated);
	border: 1px solid var(--sr-border);
	border-radius: 8px;
	padding: 1rem;
}

.sr-sidebar-right__title {
	margin: 0 0 0.75rem;
	font-size: 1rem;
	font-weight: 600;
	color: var(--sr-title);
}

.sr-sidebar-right__authors {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sr-sidebar-right__author {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--sr-border);
	font-size: 0.9rem;
}

.sr-sidebar-right__author:last-child {
	border-bottom: none;
}

.sr-sidebar-right__author-avatar {
	flex-shrink: 0;
	display: block;
	line-height: 0;
}

.sr-sidebar-right__author-avatar-img {
	display: block;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
}

.sr-sidebar-right__author-info {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.2rem 0.4rem;
	min-width: 0;
}

.sr-sidebar-right__author-rank {
	color: var(--sr-text-muted);
	font-weight: 600;
	min-width: 1.25em;
}

.sr-sidebar-right__author-name {
	font-weight: 500;
	color: var(--sr-title);
	text-decoration: none;
}

.sr-sidebar-right__author-name:hover {
	color: var(--sr-link);
}

.sr-sidebar-right__author-meta {
	width: 100%;
	font-size: 0.8rem;
	color: var(--sr-text-muted);
}

.sr-sidebar-right__all {
	margin: 0.75rem 0 0;
	padding-top: 0.5rem;
	border-top: 1px solid var(--sr-border);
	font-size: 0.9rem;
}

.sr-sidebar-right__empty {
	margin: 0 0 0.5rem;
	font-size: 0.9rem;
	color: var(--sr-text-muted);
}

@media (max-width: 1024px) {
	.sr-main-wrap {
		grid-template-columns: 1fr;
	}

	.sr-sidebar {
		display: none;
	}

	.sr-content {
		width: 100%;
		max-width: none;
	}
}

/* ==========================================================================
   Header + theme toggle slider
   ========================================================================== */

.sr-header {
	background: var(--sr-header-bg);
	border-bottom: 1px solid var(--sr-header-border);
	padding: 0.75rem 0;
	padding-top: max(0.75rem, env(safe-area-inset-top));
	position: sticky;
	top: 0;
	z-index: 100;
}

.sr-header__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.sr-header__logo {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--sr-header-text) !important;
	text-decoration: none !important;
	letter-spacing: -0.02em;
}

.sr-header__logo:hover {
	opacity: 0.85;
}

/* Search in header */
.sr-header__search {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	flex: 1;
	max-width: 280px;
	margin: 0 0.5rem;
}

.sr-header__search-label.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.sr-header__search-input {
	flex: 1;
	min-width: 0;
	padding: 0.4rem 0.6rem;
	font-size: 0.9rem;
	border: 1px solid var(--sr-border);
	border-radius: 6px;
	background: var(--sr-bg);
	color: var(--sr-text);
}

.sr-header__search-input::placeholder {
	color: var(--sr-text-muted);
}

.sr-header__search-input:focus {
	outline: none;
	border-color: var(--sr-link);
}

.sr-header__search-btn {
	padding: 0.4rem 0.75rem;
	font-size: 0.875rem;
	border: 1px solid var(--sr-border);
	border-radius: 6px;
	background: var(--sr-bg-elevated);
	color: var(--sr-text);
	cursor: pointer;
	white-space: nowrap;
}

.sr-header__search-btn:hover {
	border-color: var(--sr-link);
	color: var(--sr-link);
}

.sr-header__nav {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.sr-header__link {
	color: var(--sr-header-link);
	text-decoration: none;
	font-size: 0.95rem;
}

.sr-header__link:hover {
	color: var(--sr-header-link-hover);
}

.sr-header__unread {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.25rem;
	height: 1.25rem;
	padding: 0 0.25rem;
	font-size: 0.75rem;
	font-weight: 600;
	background: #c62828;
	color: #fff;
	border-radius: 10px;
	margin-left: 0.2rem;
}

.sr-header__bell-wrap {
	position: relative;
	display: inline-flex;
}

.sr-header__link--bell {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	padding: 0.35rem 0.25rem;
	background: none;
	border: none;
	font: inherit;
	cursor: pointer;
	color: var(--sr-header-link) !important;
}

.sr-header__link--bell:hover {
	color: var(--sr-header-link-hover) !important;
}

.sr-header__bell-icon {
	flex-shrink: 0;
}

.sr-header__bell-badge {
	position: absolute;
	top: 0;
	right: 0;
	min-width: 1.125rem;
	height: 1.125rem;
	padding: 0 0.25rem;
	font-size: 0.7rem;
	font-weight: 600;
	line-height: 1.125rem;
	text-align: center;
	background: #c62828;
	color: #fff;
	border-radius: 10px;
	box-sizing: border-box;
}

.sr-header__notifications {
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 0.25rem;
	min-width: 280px;
	max-width: 360px;
	max-height: 70vh;
	overflow-y: auto;
	background: var(--sr-bg-elevated);
	border: 1px solid var(--sr-border);
	border-radius: 8px;
	box-shadow: 0 4px 20px var(--sr-shadow-strong);
	z-index: 10000;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.15s ease, visibility 0.15s ease;
}

.sr-header__notifications--open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.sr-header__notifications-inner {
	padding: 0.5rem 0;
}

.sr-header__notifications-section {
	padding: 0 0.75rem 0.5rem;
}

.sr-header__notifications-section:last-child {
	padding-bottom: 0;
}

.sr-header__notifications-heading {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--sr-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin-bottom: 0.35rem;
	padding: 0 0.25rem 0 0;
}

.sr-header__notifications-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sr-header__notifications-list li {
	margin: 0;
	padding: 0;
}

.sr-header__notifications-link {
	display: block;
	padding: 0.4rem 0.25rem;
	font-size: 0.9375rem;
	color: var(--sr-link);
	text-decoration: none;
	border-radius: 4px;
}

.sr-header__notifications-link:hover {
	background: var(--sr-bg-sidebar);
	color: var(--sr-link-hover);
}

.sr-header__notifications-messages {
	display: block;
	padding: 0.5rem 0.25rem;
	font-size: 0.9375rem;
	color: var(--sr-link);
	text-decoration: none;
	border-radius: 4px;
}

.sr-header__notifications-messages:hover {
	background: var(--sr-bg-sidebar);
	color: var(--sr-link-hover);
}

.sr-header__notifications-empty {
	margin: 0;
	padding: 0.75rem 1rem;
	font-size: 0.9375rem;
	color: var(--sr-text-muted);
}

.sr-header__menu {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 1rem;
}

.sr-header__menu a {
	color: var(--sr-header-link);
	text-decoration: none;
}

.sr-header__menu a:hover {
	color: var(--sr-header-link-hover);
}

/* Theme toggle: Light / Dark slider */
.sr-theme-toggle {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.sr-theme-toggle__label {
	font-size: 0.8rem;
	color: var(--sr-header-link);
	user-select: none;
}

.sr-theme-toggle__switch {
	position: relative;
	width: 44px;
	height: 24px;
	background: var(--sr-border);
	border-radius: 12px;
	cursor: pointer;
	transition: background 0.2s ease;
	border: none;
	padding: 0;
}

.sr-theme-toggle__switch:hover {
	background: var(--sr-border-strong);
}

.sr-theme-toggle__switch::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 20px;
	height: 20px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	transition: transform 0.2s ease;
}

body.sr-theme-dark .sr-theme-toggle__switch {
	background: var(--sr-link);
}

body.sr-theme-dark .sr-theme-toggle__switch:hover {
	background: var(--sr-link-hover);
}

body.sr-theme-dark .sr-theme-toggle__switch::after {
	transform: translateX(20px);
}

.sr-theme-toggle__input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.sr-footer {
	background: var(--sr-header-bg);
	border-top: 1px solid var(--sr-header-border);
	padding: 1rem;
	margin-top: 2rem;
}

.sr-footer__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	font-size: 0.85rem;
	color: var(--sr-text-muted);
}

.sr-footer__credit {
	color: var(--sr-text-dim);
}

.sr-footer__wp a {
	color: var(--sr-text-muted);
}

/* ==========================================================================
   Short feed
   ========================================================================== */

.sr-short-feed,
.sr-short-feed__bubble,
.sr-short-feed__list {
	text-align: left;
}

.sr-short-feed {
	margin-bottom: 2rem;
}

/* Period menu: Today / Week / Month / Year / All time */
.sr-short-feed__period {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-bottom: 0.75rem;
}

.sr-short-feed__period-btn {
	background: var(--sr-bg-elevated);
	border: 1px solid var(--sr-border);
	border-radius: 6px;
	padding: 0.4rem 0.75rem;
	font-size: 0.875rem;
	color: var(--sr-text-muted);
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.sr-short-feed__period-btn:hover:not(:disabled) {
	color: var(--sr-text);
	border-color: var(--sr-border-strong);
}

.sr-short-feed__period-btn.is-active {
	background: var(--sr-link);
	border-color: var(--sr-link);
	color: #fff;
}

.sr-short-feed__period-btn.is-active:hover:not(:disabled) {
	opacity: 0.9;
}

.sr-short-feed__period-btn:disabled {
	cursor: wait;
	opacity: 0.8;
}

.sr-short-feed__bubble {
	background: var(--sr-bg-elevated);
	border: 1px solid var(--sr-border);
	border-radius: 8px;
	padding: 0.75rem 1rem 0.5rem;
}

.sr-short-feed__list {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sr-short-card {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.6rem 0.25rem;
	border-bottom: 1px solid var(--sr-border);
	transition: background 0.15s ease;
	text-align: left;
}

.sr-short-card:last-child {
	border-bottom: none;
}

.sr-short-card:hover {
	background: var(--sr-short-row-hover);
}

.sr-short-card__body {
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex: 1;
	text-align: left;
	width: 100%;
}

/* Pin at start: fixed-width slot so titles align across rows */
.sr-short-card__pin-slot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	flex-shrink: 0;
}

/* Right column: comments only */
.sr-short-card__right {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: 0.75rem;
}

.sr-short-card__comments-slot {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	min-width: 2.5em;
	text-align: right;
}

.sr-short-card__pin {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.sr-short-card__pin-icon {
	display: block;
	stroke: #c62828;
}

body.sr-theme-dark .sr-short-card__pin-icon {
	stroke: #ef5350;
}

.sr-short-card__pin:hover .sr-short-card__pin-icon {
	stroke: #b71c1c;
}

body.sr-theme-dark .sr-short-card__pin:hover .sr-short-card__pin-icon {
	stroke: #e53935;
}

/* Title: only as wide as content so it stays left; spacer fills the rest */
.sr-short-card__title {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.35;
	flex: 0 1 auto;
	min-width: 0;
	max-width: 100%;
	text-align: left;
}

.sr-short-card__spacer {
	flex: 1;
	min-width: 0.5rem;
}

.sr-short-card__title a,
.sr-short-card__link {
	display: block;
	text-align: left;
	color: var(--sr-card-title);
	text-decoration: none;
}

.sr-short-card__title a:hover,
.sr-short-card__link:hover {
	color: var(--sr-link);
}

.sr-short-card__comments {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	flex-shrink: 0;
	font-size: 0.8rem;
	color: var(--sr-text-muted);
}

.sr-short-card__comments-icon {
	flex-shrink: 0;
	opacity: 0.8;
}

.sr-short-card__comments-count {
	font-size: 0.8rem;
}

.sr-short-card__votes {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	flex-shrink: 0;
	min-width: 2.5em;
	justify-content: flex-end;
	font-size: 0.8rem;
	color: var(--sr-text-muted);
}

body.sr-body .sr-short-card__plus {
	font-size: 0.8rem;
	color: #2e7d32 !important;
}

body.sr-body .sr-short-card__minus {
	font-size: 0.8rem;
	color: #c62828 !important;
}

/* Force left alignment in short feed (override parent/block theme) */
body .sr-short-feed .sr-short-feed__list .sr-short-card .sr-short-card__body .sr-short-card__title,
body .sr-short-feed .sr-short-feed__list .sr-short-card .sr-short-card__body .sr-short-card__title a,
.sr-short-feed .sr-short-card__title,
.sr-short-feed .sr-short-card__title a {
	text-align: left !important;
}

.sr-short-feed .sr-short-card__title a {
	display: block !important;
}

.sr-short-feed__more {
	margin: 0.5rem 0 0;
	padding-top: 0.5rem;
	border-top: 1px solid var(--sr-border);
	font-size: 0.9rem;
}

.sr-short-feed__more a,
.sr-short-feed__more-btn {
	color: var(--sr-text-muted);
	text-decoration: none;
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
}

.sr-short-feed__more a:hover,
.sr-short-feed__more-btn:hover:not(:disabled) {
	color: var(--sr-link);
}

.sr-short-feed__more-btn:disabled {
	cursor: wait;
	opacity: 0.8;
}

/* ==========================================================================
   Main feed sections
   ========================================================================== */

.sr-home-section {
	margin-bottom: 2.5rem;
}

.sr-home-section__title {
	margin: 0 0 1rem;
	font-size: 1.35rem;
	font-weight: 600;
	color: var(--sr-title);
	border-bottom: 2px solid var(--sr-border);
	padding-bottom: 0.5rem;
}

.sr-home-section__title a {
	color: var(--sr-title);
	text-decoration: none;
}

.sr-home-section__title a:hover {
	color: var(--sr-link);
}

.sr-front-page__admin-login {
	margin-top: 2.5rem;
	padding: 1rem 1.25rem;
	background: var(--sr-bg-elevated);
	border: 1px solid var(--sr-border);
	border-radius: 8px;
}

.sr-front-page__admin-login-text {
	margin: 0;
	font-size: 0.9rem;
	color: var(--sr-text-muted);
}

.sr-front-page__admin-login-text a {
	color: var(--sr-link);
}

/* ==========================================================================
   Card feed layout
   ========================================================================== */

.sr-feed {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sr-front-page .sr-feed {
	grid-template-columns: 1fr;
	gap: 0.75rem;
}

@media (min-width: 600px) {
	.sr-archive .sr-feed {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.25rem;
	}
}

@media (min-width: 960px) {
	.sr-archive .sr-feed {
		grid-template-columns: repeat(3, 1fr);
		gap: 1.5rem;
	}
}

/* ==========================================================================
   Post card
   ========================================================================== */

.sr-card {
	background: var(--sr-card-bg);
	border: 1px solid var(--sr-card-border);
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sr-card:hover {
	border-color: var(--sr-border-strong);
	box-shadow: 0 4px 16px var(--sr-shadow);
}

.sr-card__link {
	text-decoration: none;
	color: inherit;
}

.sr-card__body {
	padding: 1rem 1.15rem;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.sr-card__meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-bottom: 0.4rem;
	font-size: 0.8rem;
	color: var(--sr-card-muted);
}

.sr-card__category {
	display: inline-block;
	padding: 0.2em 0.5em;
	border-radius: 4px;
	background: var(--sr-category-bg);
	color: var(--sr-category-text);
	text-decoration: none;
}

.sr-card__category:hover {
	background: var(--sr-category-hover-bg);
	color: var(--sr-title);
}

.sr-card__date {
	color: var(--sr-text-dim);
}

.sr-card__title {
	margin: 0 0 0.5rem;
	font-size: 1.05rem;
	line-height: 1.35;
	font-weight: 600;
}

.sr-card__title a {
	color: var(--sr-card-title);
	text-decoration: none;
}

.sr-card__title a:hover {
	color: var(--sr-link);
}

.sr-card__excerpt {
	margin: 0 0 0.75rem;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--sr-text-muted);
	flex: 1;
}

.sr-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	font-size: 0.8rem;
	color: var(--sr-card-muted);
	margin-top: auto;
	padding-top: 0.5rem;
}

.sr-card__footer-right {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 0.5rem;
	margin-left: auto;
	min-width: 0;
	padding-right: 0.5rem;
}

.sr-card__author {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	text-decoration: none;
	color: var(--sr-text-muted);
}

.sr-card__author:hover {
	color: var(--sr-text-dim);
}

.sr-card__avatar {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	object-fit: cover;
}

.sr-card__comments {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	color: var(--sr-text-muted);
	white-space: nowrap;
	flex-shrink: 0;
}

.sr-card__comments-icon {
	flex-shrink: 0;
	opacity: 0.8;
}

.sr-card__comments-count {
	font-size: 0.8rem;
	white-space: nowrap;
}

.sr-card__views {
	font-size: 0.8rem;
	color: var(--sr-text-muted);
	white-space: nowrap;
	flex-shrink: 0;
}

.sr-card__votes {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.8rem;
	color: var(--sr-text-muted);
	white-space: nowrap;
	flex-shrink: 0;
}

body.sr-body .sr-card__plus {
	font-size: 0.8rem;
	color: #2e7d32 !important;
}

body.sr-body .sr-card__minus {
	font-size: 0.8rem;
	color: #c62828 !important;
}

/* ==========================================================================
   Archive
   ========================================================================== */

.sr-archive-header {
	margin-bottom: 1.5rem;
}

.sr-archive-title {
	margin: 0 0 0.25rem;
	color: var(--sr-title);
	font-size: 1.5rem;
}

.sr-archive-description {
	margin: 0;
	font-size: 0.95rem;
	color: var(--sr-text-muted);
}

.sr-front-page .sr-home-section p,
.sr-archive p {
	color: var(--sr-text-muted);
}

.sr-archive .nav-links,
.pagination {
	display: flex;
	gap: 0.5rem;
	margin-top: 1.5rem;
	flex-wrap: wrap;
}

.sr-archive .nav-links a,
.sr-archive .nav-links span {
	padding: 0.4em 0.75em;
	background: var(--sr-bg-elevated);
	border: 1px solid var(--sr-border);
	border-radius: 4px;
	color: var(--sr-text-muted);
	text-decoration: none;
}

.sr-archive .nav-links a:hover {
	background: var(--sr-border);
	color: var(--sr-title);
}

.sr-archive .nav-links .current {
	background: var(--sr-category-bg);
	color: var(--sr-title);
	border-color: var(--sr-border-strong);
}

/* ==========================================================================
   Write post (front-end editor)
   ========================================================================== */

.sr-write-post {
	max-width: 720px;
	margin: 0 auto;
	padding: 0 0 2rem;
}

.sr-write-post__title {
	margin: 0 0 1rem;
	font-size: 1.5rem;
	color: var(--sr-title);
}

.sr-write-post__error {
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
	background: rgba(200, 60, 60, 0.15);
	border: 1px solid #c44;
	border-radius: 6px;
	color: #c44;
}

.sr-write-post__form {
	background: var(--sr-bg-elevated);
	border: 1px solid var(--sr-border);
	border-radius: 8px;
	padding: 1.5rem;
}

.sr-write-post__field {
	margin: 0 0 1.25rem;
}

.sr-write-post__field label {
	display: block;
	margin-bottom: 0.35rem;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--sr-text);
}

.sr-write-post__field .required {
	color: #c44;
}

.sr-write-post__input {
	width: 100%;
	max-width: 100%;
	padding: 0.5rem 0.65rem;
	font-size: 1rem;
	border: 1px solid var(--sr-border);
	border-radius: 6px;
	background: var(--sr-bg);
	color: var(--sr-text);
}

.sr-write-post__input:focus {
	outline: none;
	border-color: var(--sr-link);
}

.sr-write-post__input--title {
	font-size: 1.1rem;
}

.sr-write-post__textarea {
	width: 100%;
	min-height: 80px;
	padding: 0.5rem 0.65rem;
	font-size: 0.95rem;
	border: 1px solid var(--sr-border);
	border-radius: 6px;
	background: var(--sr-bg);
	color: var(--sr-text);
	resize: vertical;
}

.sr-write-post__textarea:focus {
	outline: none;
	border-color: var(--sr-link);
}

.sr-write-post__select {
	width: 100%;
	max-width: 320px;
	padding: 0.5rem 0.65rem;
	font-size: 1rem;
	border: 1px solid var(--sr-border);
	border-radius: 6px;
	background: var(--sr-bg);
	color: var(--sr-text);
}

.sr-write-post__select:focus {
	outline: none;
	border-color: var(--sr-link);
}

.sr-write-post__field-hint {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.85rem;
	color: var(--sr-text-muted);
}

.sr-write-post__checkboxes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.25rem;
}

.sr-write-post__checkbox-label {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-weight: normal;
	cursor: pointer;
}

.sr-write-post__submit {
	margin: 1.5rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--sr-border);
	display: flex;
	align-items: center;
	gap: 1rem;
}

.sr-write-post__btn {
	padding: 0.5rem 1.25rem;
	font-size: 1rem;
	font-weight: 600;
	border: none;
	border-radius: 6px;
	background: var(--sr-link);
	color: #fff;
	cursor: pointer;
}

.sr-write-post__btn:hover {
	opacity: 0.9;
}

.sr-write-post__cancel {
	color: var(--sr-text-muted);
	text-decoration: none;
	font-size: 0.95rem;
}

.sr-write-post__cancel:hover {
	color: var(--sr-link);
}

/* TinyMCE wrapper: adapt to light/dark theme (write-post and comment form) */
.sr-body .wp-editor-wrap {
	margin-top: 0.25rem;
}

.sr-body .wp-editor-container,
.sr-body .mce-tinymce {
	background: var(--sr-bg-elevated);
	border-color: var(--sr-border);
}

.sr-body .wp-editor-container {
	border-radius: 6px;
}

.sr-body .mce-toolbar-grp,
.sr-body .mce-toolbar,
.sr-body .mce-menubar,
.sr-body .mce-panel {
	background: var(--sr-bg-elevated) !important;
	border-color: var(--sr-border) !important;
}

.sr-body .mce-toolbar button,
.sr-body .mce-menubar button {
	color: var(--sr-text) !important;
}

.sr-body .mce-toolbar button:hover,
.sr-body .mce-menubar button:hover {
	background: var(--sr-bg-sidebar) !important;
	color: var(--sr-text) !important;
}

.sr-body .wp-editor-tools {
	background: var(--sr-bg-elevated);
	border-color: var(--sr-border);
}

.sr-body .wp-editor-tabs .wp-switch-editor {
	background: var(--sr-bg-sidebar);
	color: var(--sr-text-muted);
	border-color: var(--sr-border);
}

.sr-body .wp-editor-tabs .wp-switch-editor:hover {
	color: var(--sr-text);
}

.sr-body .wp-editor-tabs .wp-switch-editor.switch-tmce.active,
.sr-body .wp-editor-tabs .wp-switch-editor.switch-html.active {
	background: var(--sr-bg-elevated);
	color: var(--sr-text);
	border-bottom-color: var(--sr-bg-elevated);
}

/* TinyMCE format dropdown (Paragraph / Headings) and listbox */
.sr-body .mce-listbox .mce-caret,
.sr-body .mce-listbox button {
	background: var(--sr-bg-elevated) !important;
	border-color: var(--sr-border) !important;
	color: var(--sr-text) !important;
}

.sr-body .mce-listbox .mce-text {
	color: var(--sr-text) !important;
}

.sr-body .mce-btn .mce-caret {
	border-top-color: var(--sr-text);
}

.sr-body .mce-btn button {
	color: var(--sr-text) !important;
}

/* TinyMCE dropdown panel (opened menu) */
.sr-body .mce-menu,
.sr-body .mce-listbox .mce-listbox-menu {
	background: var(--sr-bg-elevated) !important;
	border-color: var(--sr-border) !important;
}

.sr-body .mce-menu .mce-menu-item,
.sr-body .mce-listbox .mce-listbox-item {
	color: var(--sr-text) !important;
	background: transparent !important;
}

.sr-body .mce-menu .mce-menu-item:hover,
.sr-body .mce-listbox .mce-listbox-item:hover {
	background: var(--sr-bg-sidebar) !important;
}

/* QuickTags (Text/Code mode) toolbar and textarea */
.sr-body .quicktags-toolbar {
	background: var(--sr-bg-elevated) !important;
	border-color: var(--sr-border);
	border-width: 1px 1px 0;
	border-style: solid;
}

.sr-body .quicktags-toolbar .button {
	background: var(--sr-bg-sidebar) !important;
	color: var(--sr-text) !important;
	border-color: var(--sr-border) !important;
}

.sr-body .quicktags-toolbar .button:hover {
	background: var(--sr-border) !important;
	color: var(--sr-text) !important;
}

.sr-body .wp-editor-area {
	background: var(--sr-bg-elevated) !important;
	color: var(--sr-text) !important;
	border-color: var(--sr-border) !important;
}

/* Native select inside TinyMCE (format dropdown if rendered as select) */
.sr-body .mce-tinymce select,
.sr-body .wp-editor-wrap select {
	background: var(--sr-bg-elevated) !important;
	color: var(--sr-text) !important;
	border-color: var(--sr-border) !important;
}

.sr-write-post__insert-image {
	margin: 0.5rem 0 0;
}

.sr-write-post__insert-image-btn {
	padding: 0.4rem 0.75rem;
	font-size: 0.9rem;
	border: 1px solid var(--sr-border);
	border-radius: 6px;
	background: var(--sr-bg-elevated);
	color: var(--sr-text);
	cursor: pointer;
}

.sr-write-post__insert-image-btn:hover {
	border-color: var(--sr-link);
	color: var(--sr-link);
}

.sr-write-post__insert-image-btn:disabled {
	opacity: 0.7;
	cursor: wait;
}

.sr-write-post__file-hidden {
	position: absolute;
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	z-index: -1;
}

.sr-write-post .wp-editor-container {
	border: 1px solid var(--sr-border);
	border-radius: 6px;
}

/* Comment form: same editor container styling */
.sr-comment-form-bubble .wp-editor-container {
	border: 1px solid var(--sr-border);
	border-radius: 6px;
}

/* ==========================================================================
   Auth pages (login, register)
   ========================================================================== */

.sr-auth {
	max-width: 400px;
	margin: 0 auto;
	padding: 0 0 2rem;
}

.sr-auth__title {
	margin: 0 0 1rem;
	font-size: 1.5rem;
	color: var(--sr-title);
}

.sr-auth__error {
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
	background: rgba(200, 60, 60, 0.15);
	border: 1px solid #c44;
	border-radius: 6px;
	color: #c44;
}

.sr-auth__message {
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
	background: rgba(60, 160, 60, 0.15);
	border: 1px solid #3a3;
	border-radius: 6px;
	color: #3a3;
}

.sr-auth__form {
	display: block;
	width: 100%;
	max-width: none;
	box-sizing: border-box;
	background: var(--sr-bg-elevated);
	border: 1px solid var(--sr-border);
	border-radius: 8px;
	padding: 1.5rem;
}

.sr-auth__field {
	display: block;
	width: 100%;
	max-width: none;
	box-sizing: border-box;
	margin: 0 0 1rem;
}

.sr-auth__field--checkbox {
	margin-bottom: 0.75rem;
}

.sr-auth__field label {
	display: block;
	margin-bottom: 0.35rem;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--sr-text);
}

.sr-auth__field .required {
	color: #c44;
}

.sr-auth__forgot {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.9rem;
}

.sr-auth__forgot a {
	color: var(--sr-link);
}

.sr-auth__input {
	display: block;
	width: 100%;
	min-width: 0;
	max-width: none;
	box-sizing: border-box;
	padding: 0.5rem 0.65rem;
	font-size: 1rem;
	border: 1px solid var(--sr-border);
	border-radius: 6px;
	background: var(--sr-bg);
	color: var(--sr-text);
}

.sr-auth__input:focus {
	outline: none;
	border-color: var(--sr-link);
}

.sr-auth__checkbox-label {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-weight: normal;
	cursor: pointer;
}

.sr-auth__submit {
	display: block;
	width: 100%;
	max-width: none;
	margin: 1rem 0 0;
}

.sr-auth__btn {
	display: block;
	width: 100%;
	min-width: 0;
	max-width: none;
	box-sizing: border-box;
	padding: 0.5rem 1.25rem;
	font-size: 1rem;
	font-weight: 600;
	border: none;
	border-radius: 6px;
	background: var(--sr-link);
	color: #fff;
	cursor: pointer;
	text-align: center;
}

.sr-auth__btn:hover {
	opacity: 0.9;
}

.sr-auth__link {
	margin: 1rem 0 0;
	text-align: center;
	font-size: 0.95rem;
}

.sr-auth__link a {
	color: var(--sr-link);
}

.sr-auth__divider {
	margin: 1rem 0 0.5rem;
	text-align: center;
	font-size: 0.9rem;
	color: var(--sr-text-muted);
}

.sr-auth__oauth {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0.5rem 0 0;
}

.sr-auth__oauth-btn {
	display: block;
	text-align: center;
	padding: 0.5rem 1rem;
	font-size: 0.95rem;
	font-weight: 500;
	border-radius: 6px;
	border: 1px solid var(--sr-border);
	background: var(--sr-bg-elevated);
	color: var(--sr-text);
	text-decoration: none;
	transition: border-color 0.2s, background 0.2s;
}

.sr-auth__oauth-btn:hover {
	border-color: var(--sr-text-muted);
	background: var(--sr-bg);
	color: var(--sr-title);
}

.sr-auth__oauth-btn--google {
	border-color: #dadce0;
	background: #fff;
	color: #3c4043;
}

.sr-auth__oauth-btn--google:hover {
	border-color: #bdc1c6;
	background: #f8f9fa;
}

.sr-auth__oauth-btn--discord {
	border-color: #5865f2;
	background: #5865f2;
	color: #fff;
}

.sr-auth__oauth-btn--discord:hover {
	background: #4752c4;
	border-color: #4752c4;
	color: #fff;
}

body.sr-theme-dark .sr-auth__oauth-btn--google {
	border-color: #5f6368;
	background: #3c4043;
	color: #e8eaed;
}

body.sr-theme-dark .sr-auth__oauth-btn--google:hover {
	background: #5f6368;
	border-color: #5f6368;
}

/* ==========================================================================
   Profile page
   ========================================================================== */

.sr-profile {
	max-width: 520px;
	margin: 0 auto;
	padding: 0 0 2rem;
}

.sr-profile__title {
	margin: 0 0 1rem;
	font-size: 1.5rem;
	color: var(--sr-title);
}

.sr-profile__message {
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
	background: rgba(60, 160, 60, 0.15);
	border: 1px solid #3a3;
	border-radius: 6px;
	color: #3a3;
}

.sr-profile__error {
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
	background: rgba(200, 60, 60, 0.15);
	border: 1px solid #c44;
	border-radius: 6px;
	color: #c44;
}

.sr-profile__card {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	align-items: flex-start;
	background: var(--sr-bg-elevated);
	border: 1px solid var(--sr-border);
	border-radius: 8px;
	padding: 1.5rem;
	margin-bottom: 1.5rem;
}

.sr-profile__avatar-cell {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.sr-profile__avatar-form {
	display: block;
	margin: 0;
}

.sr-profile__file-hidden {
	position: absolute;
	width: 0;
	height: 0;
	opacity: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

.sr-profile__avatar-wrap {
	flex-shrink: 0;
}

.sr-profile__avatar-wrap .avatar {
	display: block;
	border-radius: 50%;
	height: auto;
}

.sr-profile__avatar-wrap--clickable {
	display: inline-block;
	position: relative;
	cursor: pointer;
	border-radius: 50%;
}

.sr-profile__avatar-wrap--clickable:hover .sr-profile__avatar-hint {
	opacity: 1;
}

.sr-profile__avatar-hint {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	font-size: 0.85rem;
	font-weight: 500;
	opacity: 0;
	transition: opacity 0.2s;
}

.sr-profile__avatar-remove {
	margin: 0;
}

.sr-profile__avatar-remove-btn {
	padding: 0.25rem 0.6rem;
	font-size: 0.85rem;
	background: transparent;
	border: 1px solid var(--sr-border);
	border-radius: 6px;
	color: var(--sr-text-muted);
	cursor: pointer;
}

.sr-profile__avatar-remove-btn:hover {
	color: var(--sr-text);
	border-color: var(--sr-text-muted);
}

.sr-profile__info {
	margin: 0;
	flex: 1;
	min-width: 200px;
}

.sr-profile__info dt {
	margin: 0.5rem 0 0.15rem;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--sr-text-muted);
}

.sr-profile__info dt:first-child {
	margin-top: 0;
}

.sr-profile__info dd {
	margin: 0;
	font-size: 1rem;
	color: var(--sr-text);
}

.sr-profile__info dd.sr-profile__pluses {
	color: #2e7d32;
	font-weight: 500;
}

body.sr-theme-dark .sr-profile__info dd.sr-profile__pluses {
	color: #81c784;
}

.sr-profile__info dt.sr-profile__pluses-dt {
	display: none;
}

.sr-profile__status-form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.sr-profile__status-input {
	flex: 1;
	min-width: 180px;
	max-width: 320px;
	padding: 0.4rem 0.6rem;
	font-size: 1rem;
	border: 1px solid var(--sr-border);
	border-radius: 6px;
	background: var(--sr-bg-elevated);
	color: var(--sr-text);
}

.sr-profile__status-btn {
	padding: 0.4rem 0.8rem;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--sr-bg-elevated);
	background: var(--sr-link);
	border: none;
	border-radius: 6px;
	cursor: pointer;
}

.sr-profile__status-btn:hover {
	background: var(--sr-link-hover);
}

.sr-profile__section {
	background: var(--sr-bg-elevated);
	border: 1px solid var(--sr-border);
	border-radius: 8px;
	padding: 1.5rem;
	margin-bottom: 1rem;
}

.sr-profile__section-title {
	margin: 0 0 1rem;
	font-size: 1.1rem;
	color: var(--sr-title);
}

.sr-profile__section--details {
	padding: 0;
}

.sr-profile__section--details[open] .sr-profile__section-summary {
	margin-bottom: 1rem;
}

.sr-profile__section-summary {
	display: block;
	padding: 1.5rem;
	margin: 0;
	list-style: none;
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--sr-title);
	cursor: pointer;
	user-select: none;
}

.sr-profile__section-summary::-webkit-details-marker {
	display: none;
}

.sr-profile__section-summary::marker {
	display: none;
}

.sr-profile__section-summary::before {
	content: '';
	display: inline-block;
	width: 0.5em;
	height: 0.5em;
	margin-right: 0.5em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	transform-origin: center;
	transition: transform 0.2s;
	vertical-align: 0.15em;
}

.sr-profile__section--details[open] .sr-profile__section-summary::before {
	transform: rotate(45deg);
}

.sr-profile__section-summary:hover {
	color: var(--sr-link);
}

.sr-profile__section--details .sr-profile__form {
	padding: 0 1.5rem 1.5rem;
}

.sr-profile__form {
	margin-bottom: 0;
}

.sr-profile__file {
	width: 100%;
	margin-top: 0.25rem;
	font-size: 0.95rem;
	color: var(--sr-text);
}

.sr-profile__remove {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--sr-border);
}

.sr-profile__remove-btn {
	padding: 0.35rem 0.75rem;
	font-size: 0.9rem;
	background: transparent;
	border: 1px solid var(--sr-border);
	border-radius: 6px;
	color: var(--sr-text-muted);
	cursor: pointer;
}

.sr-profile__remove-btn:hover {
	color: var(--sr-text);
	border-color: var(--sr-text-muted);
}

.sr-profile__link {
	margin: 1rem 0 0;
	font-size: 0.95rem;
}

.sr-profile__link a {
	color: var(--sr-link);
}

.sr-profile__link--bottom {
	margin-top: 1.5rem;
}

/* Recent posts list */
.sr-profile__posts {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sr-profile__post {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 1rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--sr-border);
}

.sr-profile__post:last-child {
	border-bottom: none;
}

.sr-profile__post-link {
	font-weight: 500;
	color: var(--sr-title);
	text-decoration: none;
}

.sr-profile__post-link:hover {
	color: var(--sr-link);
}

.sr-profile__post-meta {
	font-size: 0.9rem;
	color: var(--sr-text-muted);
}

.sr-profile__post-comments {
	display: inline-flex;
	align-items: center;
	margin-left: 0.35rem;
}

.sr-profile__post-comments::before {
	content: '';
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-right: 0.2em;
	background: currentColor;
	opacity: 0.7;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

/* Author subscribe block (single post, author archive) */
.sr-author-subscribe {
	margin: 1.5rem 0;
	padding: 1rem 1.25rem;
	background: var(--sr-bg-elevated);
	border: 1px solid var(--sr-border);
	border-radius: 8px;
}

.sr-author-subscribe__text {
	margin: 0 0 0.75rem;
	font-size: 0.95rem;
	color: var(--sr-text);
}

.sr-author-subscribe__form {
	display: inline-block;
	margin: 0;
}

.sr-author-subscribe__btn {
	padding: 0.4rem 1rem;
	font-size: 0.9rem;
	font-weight: 600;
	border: none;
	border-radius: 6px;
	background: var(--sr-link);
	color: #fff;
	cursor: pointer;
}

.sr-author-subscribe__btn:hover {
	opacity: 0.9;
}

.sr-author-subscribe__btn--secondary {
	background: transparent;
	border: 1px solid var(--sr-border);
	color: var(--sr-text-muted);
}

.sr-author-subscribe__btn--secondary:hover {
	color: var(--sr-text);
	border-color: var(--sr-text-muted);
}

/* Profile: My subscriptions */
.sr-profile__section-desc {
	margin: -0.5rem 0 1rem;
	font-size: 0.9rem;
	color: var(--sr-text-muted);
}

.sr-profile__subscriptions {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sr-profile__sub-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--sr-border);
}

.sr-profile__sub-item:last-child {
	border-bottom: none;
}

.sr-profile__sub-link {
	font-weight: 500;
	color: var(--sr-title);
	text-decoration: none;
}

.sr-profile__sub-link:hover {
	color: var(--sr-link);
}

.sr-profile__sub-form {
	display: inline-block;
	margin: 0;
}

.sr-profile__sub-btn {
	padding: 0.25rem 0.6rem;
	font-size: 0.85rem;
	background: transparent;
	border: 1px solid var(--sr-border);
	border-radius: 6px;
	color: var(--sr-text-muted);
	cursor: pointer;
}

.sr-profile__sub-btn:hover {
	color: var(--sr-text);
	border-color: var(--sr-text-muted);
}

/* ==========================================================================
   Authors page
   ========================================================================== */

.sr-authors {
	max-width: 560px;
	margin: 0 auto;
	padding: 0 0 2rem;
}

.sr-authors__title {
	margin: 0 0 1rem;
	font-size: 1.5rem;
	color: var(--sr-title);
}

.sr-authors__list {
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--sr-bg-elevated);
	border: 1px solid var(--sr-border);
	border-radius: 8px;
	overflow: hidden;
}

.sr-authors__item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem 0.75rem;
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--sr-border);
}

.sr-authors__item:last-child {
	border-bottom: none;
}

.sr-authors__rank {
	font-weight: 600;
	color: var(--sr-text-muted);
	min-width: 2em;
}

.sr-authors__name {
	font-weight: 500;
	color: var(--sr-title);
	text-decoration: none;
}

.sr-authors__name:hover {
	color: var(--sr-link);
}

.sr-authors__meta {
	font-size: 0.9rem;
	color: var(--sr-text-muted);
}

/* ==========================================================================
   Static pages (About, Rules)
   ========================================================================== */

.sr-static {
	max-width: 640px;
	margin: 0 auto;
	padding: 0 0 2rem;
}

.sr-static__title {
	margin: 0 0 1rem;
	font-size: 1.5rem;
	color: var(--sr-title);
}

.sr-static__content {
	background: var(--sr-bg-elevated);
	border: 1px solid var(--sr-border);
	border-radius: 8px;
	padding: 1.5rem;
}

.sr-static__content p {
	margin: 0 0 1rem;
}

.sr-static__content p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   Single post
   ========================================================================== */

.sr-single {
	padding: 0 0 2rem;
}

.sr-single__bubble {
	background: var(--sr-bg-elevated);
	border: 1px solid var(--sr-border);
	border-radius: 12px;
	padding: 1.5rem 2rem;
	box-shadow: 0 1px 3px var(--sr-shadow);
}

.sr-single__article {
	margin: 0;
}

.sr-single__header {
	margin-bottom: 1.5rem;
}

.sr-single__title {
	margin: 0 0 0.5rem;
	font-size: 1.75rem;
	line-height: 1.3;
	color: var(--sr-title);
}

.sr-single__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
	font-size: 0.9rem;
	color: var(--sr-text-muted);
}

.sr-single__author {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--sr-text);
	text-decoration: none;
}

.sr-single__author:hover {
	color: var(--sr-link);
}

.sr-single__avatar {
	display: block;
	border-radius: 50%;
	height: 32px;
	width: 32px;
}

.sr-single__date {
	font-size: 0.9rem;
}

.sr-single__category {
	color: var(--sr-link);
	text-decoration: none;
}

.sr-single__category:hover {
	text-decoration: underline;
}

.sr-single__votes-wrap .sr-single__views {
	font-size: 1rem;
	color: var(--sr-text-muted);
}

.sr-single__content {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--sr-text);
}

.sr-single__content p,
.sr-single__content ul,
.sr-single__content ol {
	margin: 0 0 1rem;
}

.sr-single__content p:last-child,
.sr-single__content ul:last-child,
.sr-single__content ol:last-child {
	margin-bottom: 0;
}

.sr-single__content a {
	color: var(--sr-link);
}

.sr-single__content img {
	max-width: 100%;
	height: auto;
}

/* Post plus/minus (upvote/downvote) counters */
.sr-single__votes-wrap {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid var(--sr-border);
	font-size: 1rem;
}

.sr-single__plus-wrap,
.sr-single__minus-wrap {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.sr-single__plus-count {
	min-width: 1.5em;
	font-weight: 600;
	color: var(--sr-text-muted);
}

body.sr-body .sr-single__plus-wrap--nonzero .sr-single__plus-count {
	color: #2e7d32 !important;
}

body.sr-body .sr-single__minus-wrap--nonzero .sr-single__minus-count {
	color: #c62828 !important;
}

.sr-single__plus-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	font-size: 1.25rem;
	line-height: 1;
	font-weight: 600;
	border: 1px solid var(--sr-border);
	border-radius: 6px;
	background: var(--sr-bg-elevated);
	color: var(--sr-text);
	cursor: pointer;
}

.sr-single__plus-btn:hover {
	border-color: var(--sr-link);
	color: var(--sr-link);
}

.sr-single__plus-btn:disabled {
	opacity: 0.7;
	cursor: wait;
}

.sr-single__plus-done {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--sr-text-muted);
}

.sr-single__minus-count {
	min-width: 1.5em;
	font-weight: 600;
	color: var(--sr-text-muted);
}

.sr-single__minus-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	font-size: 1.25rem;
	line-height: 1;
	font-weight: 600;
	border: 1px solid var(--sr-border);
	border-radius: 6px;
	background: var(--sr-bg-elevated);
	color: var(--sr-text-muted);
	cursor: pointer;
}

.sr-single__minus-btn:hover {
	border-color: var(--sr-text-muted);
	color: var(--sr-text);
}

.sr-single__minus-btn:disabled {
	opacity: 0.7;
	cursor: wait;
}

.sr-single__minus-done {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--sr-text-muted);
}

/* Comments: separate block below post bubble */
.sr-comments {
	margin-top: 1.5rem;
}

.sr-comments__title {
	margin: 0 0 1rem;
	font-size: 1.25rem;
}

.sr-comments__list {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}

.sr-comment-form-bubble,
.sr-comment-bubble {
	background: var(--sr-bg-elevated);
	border: 1px solid var(--sr-border);
	border-radius: 12px;
	padding: 1.25rem 1.5rem;
	box-shadow: 0 1px 3px var(--sr-shadow);
}

.sr-comment-form-bubble {
	margin-top: 0;
}

.sr-comments__list .sr-comment-bubble {
	margin-bottom: 0.75rem;
}

.sr-comments__list .sr-comment-bubble:last-child {
	margin-bottom: 0;
}

.sr-comment-bubble__votes-wrap {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 0.75rem;
	font-size: 0.9rem;
}

.sr-comment-bubble__plus-wrap,
.sr-comment-bubble__minus-wrap {
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.sr-comment-bubble__plus-count {
	min-width: 1.5em;
	font-weight: 600;
	color: var(--sr-text-muted);
}

body.sr-body .sr-comment-bubble__plus-wrap--nonzero .sr-comment-bubble__plus-count {
	color: #2e7d32 !important;
}

body.sr-body .sr-comment-bubble__minus-wrap--nonzero .sr-comment-bubble__minus-count {
	color: #c62828 !important;
}

.sr-comment-bubble__plus-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	font-size: 1rem;
	line-height: 1;
	font-weight: 600;
	border: 1px solid var(--sr-border);
	border-radius: 4px;
	background: var(--sr-bg-elevated);
	color: var(--sr-text);
	cursor: pointer;
}

.sr-comment-bubble__plus-btn:hover {
	border-color: var(--sr-link);
	color: var(--sr-link);
}

.sr-comment-bubble__plus-btn:disabled {
	opacity: 0.7;
	cursor: wait;
}

.sr-comment-bubble__plus-done {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	font-size: 1rem;
	font-weight: 600;
	color: var(--sr-text-muted);
}

.sr-comment-bubble__minus-count {
	min-width: 1.5em;
	font-weight: 600;
	color: var(--sr-text-muted);
}

.sr-comment-bubble__minus-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	font-size: 1rem;
	line-height: 1;
	font-weight: 600;
	border: 1px solid var(--sr-border);
	border-radius: 4px;
	background: var(--sr-bg-elevated);
	color: var(--sr-text-muted);
	cursor: pointer;
}

.sr-comment-bubble__minus-btn:hover {
	border-color: var(--sr-text-muted);
	color: var(--sr-text);
}

.sr-comment-bubble__minus-btn:disabled {
	opacity: 0.7;
	cursor: wait;
}

.sr-comment-bubble__minus-done {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	font-size: 1rem;
	font-weight: 600;
	color: var(--sr-text-muted);
}

/* Comment image (attached to comment) */
.sr-comment-image {
	margin: 0 0 0.75rem;
}

.sr-comment-image__img {
	max-width: 100%;
	height: auto;
	max-height: 300px;
	object-fit: contain;
	border-radius: 6px;
	border: 1px solid var(--sr-border);
}

.comment-form-insert-image {
	margin-top: 0.5rem;
}

.comment-form-insert-image .sr-write-post__insert-image-btn {
	margin-right: 0.5rem;
}

.sr-comment-form-login-required {
	margin: 0;
	color: var(--sr-text-muted);
}

.sr-comment-form-login-required a {
	color: var(--sr-link);
}

/* ==========================================================================
   Mobile & responsive
   ========================================================================== */

/* Header: top row (logo + menu toggle); on desktop only logo shows */
.sr-header__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex: 0 0 auto;
	min-width: 0;
}

.sr-header__menu-toggle {
	display: none;
	padding: 0.5rem;
	margin: -0.5rem 0 -0.5rem auto;
	background: none;
	border: none;
	border-radius: 6px;
	color: var(--sr-header-text);
	cursor: pointer;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	transition: background 0.2s;
}

.sr-header__menu-toggle:hover {
	background: var(--sr-bg-sidebar);
}

.sr-header__menu-toggle:focus {
	outline: 2px solid var(--sr-link);
	outline-offset: 2px;
}

.sr-header__menu-toggle-icon {
	display: block;
	width: 24px;
	height: 18px;
	position: relative;
}

.sr-header__menu-toggle-icon::before,
.sr-header__menu-toggle-icon::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	background: currentColor;
	border-radius: 1px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.sr-header__menu-toggle-icon::before {
	top: 0;
}

.sr-header__menu-toggle-icon::after {
	bottom: 0;
}

.sr-header__menu-toggle-icon {
	box-shadow: 0 8px 0 currentColor;
}

.sr-header--nav-open .sr-header__menu-toggle-icon::before {
	transform: translateY(8px) rotate(45deg);
}

.sr-header--nav-open .sr-header__menu-toggle-icon {
	box-shadow: none;
}

.sr-header--nav-open .sr-header__menu-toggle-icon::after {
	transform: translateY(-8px) rotate(-45deg);
}

/* Tablet: sidebars already hidden at 1024px; refine header */
@media (max-width: 900px) {
	.sr-header__inner {
		flex-wrap: wrap;
		gap: 0.75rem;
	}

	.sr-header__search {
		order: 3;
		width: 100%;
		max-width: none;
		margin: 0;
	}

	.sr-header__menu-toggle {
		display: flex;
	}

	.sr-header__nav {
		display: none;
		order: 4;
		width: 100%;
		flex-direction: column;
		gap: 0;
		padding: 0.5rem 0 0;
		border-top: 1px solid var(--sr-header-border);
		margin-top: 0.25rem;
	}

	.sr-header--nav-open .sr-header__nav {
		display: flex;
	}

	.sr-header__nav .sr-header__link {
		display: block;
		padding: 0.75rem 0.5rem;
		min-height: 44px;
		box-sizing: border-box;
		border-radius: 6px;
	}

	.sr-header__nav .sr-header__link:hover {
		background: var(--sr-bg-sidebar);
	}

	.sr-content {
		padding: 1rem 1rem 1.5rem;
	}

	.sr-short-feed__period {
		gap: 0.35rem;
	}

	.sr-short-feed__period-btn {
		padding: 0.5rem 0.6rem;
		min-height: 44px;
		box-sizing: border-box;
	}

	.sr-card__body {
		padding: 0.875rem 1rem;
	}

	.sr-home-section__title {
		font-size: 1.2rem;
	}
}

/* Mobile */
@media (max-width: 600px) {
	.sr-header__inner {
		padding: 0 0.75rem;
	}

	.sr-header__logo {
		font-size: 1.1rem;
	}

	.sr-content {
		padding: 0.75rem 0.75rem 1.25rem;
	}

	.sr-short-feed {
		margin-bottom: 1.5rem;
	}

	.sr-short-feed__bubble {
		padding: 0.6rem 0.75rem 0.4rem;
	}

	.sr-short-card {
		padding: 0.6rem 0.15rem;
		gap: 0.5rem;
	}

	.sr-short-card__title {
		font-size: 0.9rem;
	}

	.sr-home-section {
		margin-bottom: 1.75rem;
	}

	.sr-home-section__title {
		font-size: 1.1rem;
		margin-bottom: 0.75rem;
	}

	.sr-card__title {
		font-size: 1rem;
	}

	.sr-card__excerpt {
		font-size: 0.85rem;
	}

	.sr-front-page__admin-login {
		padding: 0.75rem 1rem;
		margin-top: 1.5rem;
	}

	.sr-front-page__admin-login-text {
		font-size: 0.85rem;
	}

	.sr-archive-title {
		font-size: 1.25rem;
	}

	.sr-single__bubble {
		padding: 1rem;
	}

	.sr-single__title {
		font-size: 1.35rem;
	}

	.sr-single__header {
		margin-bottom: 1rem;
	}

	.sr-single__meta {
		flex-wrap: wrap;
		gap: 0.5rem;
	}

	.sr-write-post__form {
		padding: 1rem;
	}

	.sr-write-post__title {
		font-size: 1.25rem;
	}

	.sr-auth {
		padding: 1rem 0.75rem;
	}

	.sr-auth__title {
		font-size: 1.35rem;
	}

	.sr-auth__form {
		padding: 1rem;
	}

	.sr-auth__input {
		font-size: 16px; /* prevents zoom on focus in iOS */
	}

	.sr-auth__btn {
		min-height: 44px;
		padding: 0.65rem 1.25rem;
	}

	.sr-profile__card {
		padding: 1rem;
	}

	.sr-profile__section-title {
		font-size: 1rem;
	}

	.sr-authors__title {
		font-size: 1.25rem;
	}

	.sr-authors__list {
		gap: 0.75rem;
	}

	.sr-footer__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
		padding: 1rem 0.75rem;
	}

	.sr-footer {
		padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0));
	}
}

/* Small phones */
@media (max-width: 380px) {
	.sr-header__inner {
		padding: 0 0.5rem;
	}

	.sr-content {
		padding: 0.5rem 0.5rem 1rem;
	}

	.sr-short-feed__period-btn {
		padding: 0.4rem 0.5rem;
		font-size: 0.8rem;
	}

	.sr-card__body {
		padding: 0.75rem 0.875rem;
	}
}

/* Touch-friendly: ensure tap targets */
@media (hover: none) and (pointer: coarse) {
	.sr-header__link {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}

	.sr-short-feed__more-btn {
		min-height: 44px;
		padding: 0.5rem 0.75rem;
	}

	.sr-card__link {
		min-height: 44px;
	}

	.sr-author-subscribe__btn,
	.sr-author-subscribe__btn--secondary {
		min-height: 44px;
		padding: 0.5rem 1rem;
	}

	.sr-sidebar-left__topic-link {
		padding: 0.5rem 0;
		min-height: 44px;
		box-sizing: border-box;
		display: inline-flex;
		align-items: center;
	}
}

/* Prevent horizontal scroll */
.sr-main-wrap,
.sr-content,
.sr-header__inner {
	max-width: 100%;
}

.sr-body {
	overflow-x: hidden;
}

.sr-card__title a,
.sr-short-card__title a {
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.sr-single__content img,
.sr-single__content iframe,
.sr-single__content video {
	max-width: 100%;
	height: auto;
}

.sr-single__content pre,
.sr-single__content code {
	max-width: 100%;
	overflow-x: auto;
}

/* ==========================================================================
   Author hover card popover
   ========================================================================== */

.sr-author-card-popover-wrap {
	position: fixed;
	z-index: 100001;
	width: 280px;
	min-height: 120px;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease, visibility 0.15s ease;
}

.sr-author-card-popover-wrap:not(.sr-author-card-popover-wrap--hidden) {
	pointer-events: auto;
	opacity: 1;
	visibility: visible;
}

.sr-author-card-popover-wrap--loading {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100px;
}

.sr-author-card-popover-wrap--loading::after {
	content: "";
	width: 24px;
	height: 24px;
	border: 2px solid var(--sr-border);
	border-top-color: var(--sr-link);
	border-radius: 50%;
	animation: sr-author-card-spin 0.6s linear infinite;
}

@keyframes sr-author-card-spin {
	to { transform: rotate(360deg); }
}

.sr-author-card {
	background: var(--sr-bg-elevated);
	border: 1px solid var(--sr-border);
	border-radius: 8px;
	box-shadow: 0 4px 16px var(--sr-shadow-strong);
	padding: 12px 14px;
	pointer-events: auto;
}

.sr-author-card__top {
	display: flex;
	gap: 12px;
	margin-bottom: 10px;
}

.sr-author-card__avatar-link {
	flex-shrink: 0;
}

.sr-author-card__avatar {
	display: block;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
}

.sr-author-card__main {
	min-width: 0;
	flex: 1;
}

.sr-author-card__name {
	display: block;
	font-weight: 600;
	color: var(--sr-title);
	text-decoration: none;
	margin-bottom: 2px;
}

.sr-author-card__name:hover {
	color: var(--sr-link);
}

.sr-author-card__year {
	font-size: 0.875rem;
	color: var(--sr-text-muted);
}

.sr-author-card__status {
	font-size: 0.8125rem;
	color: var(--sr-text-dim);
	margin: 4px 0 0;
	line-height: 1.35;
}

.sr-author-card__stats {
	display: flex;
	gap: 12px;
	font-size: 0.8125rem;
	color: var(--sr-text-muted);
	margin-bottom: 10px;
}

.sr-author-card__pluses {
	color: #2e7d32;
	font-weight: 500;
}

body.sr-theme-dark .sr-author-card__pluses {
	color: #81c784;
}

.sr-author-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--sr-border);
}

.sr-author-card__subscribe-wrap {
	display: flex;
	align-items: center;
}

.sr-author-card__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	box-sizing: border-box;
	font-size: 0.875rem;
	font-weight: 500;
	color: #111 !important;
	background: var(--sr-link);
	border: none;
	border-radius: 6px;
	cursor: pointer;
	transition: background 0.15s ease, opacity 0.15s ease;
	text-decoration: none;
}

.sr-author-card__icon {
	flex-shrink: 0;
	display: block;
	vertical-align: middle;
}

.sr-author-card__btn:hover {
	background: var(--sr-link-hover);
	color: #111 !important;
}

.sr-author-card__btn:disabled {
	opacity: 0.7;
	cursor: not-allowed;
}

.sr-author-card__btn--message {
	text-decoration: none;
	background: var(--sr-link);
	color: #111 !important;
}

.sr-author-card__btn--message:hover {
	background: var(--sr-link-hover);
	color: #111 !important;
}

.sr-author-card__btn--unsubscribe {
	background: var(--sr-link);
	color: #111 !important;
}

.sr-author-card__btn--unsubscribe:hover {
	background: var(--sr-link-hover);
	color: #111 !important;
}

/* ==========================================================================
   Private messages page
   ========================================================================== */

.sr-messages {
	max-width: 640px;
	margin: 0 auto;
	padding: 0 0 2rem;
}

.sr-messages__title {
	margin: 0 0 1rem;
	font-size: 1.5rem;
	color: var(--sr-title);
}

.sr-messages__back {
	color: var(--sr-link);
	text-decoration: none;
}

.sr-messages__back:hover {
	text-decoration: underline;
}

.sr-messages__title-sep {
	color: var(--sr-text-muted);
}

.sr-messages__message {
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
	background: rgba(60, 160, 60, 0.15);
	border: 1px solid #3a3;
	border-radius: 6px;
	color: #2e7d32;
}

.sr-messages__error {
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
	background: rgba(200, 60, 60, 0.15);
	border: 1px solid #c44;
	border-radius: 6px;
	color: #c44;
}

.sr-messages__empty {
	margin: 0;
	color: var(--sr-text-muted);
}

.sr-messages__thread-wrap {
	background: var(--sr-bg-elevated);
	border: 1px solid var(--sr-border);
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: 1rem;
}

.sr-messages__thread {
	padding: 1rem;
	max-height: 50vh;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.sr-messages__thread .sr-messages__empty {
	padding: 1rem 0;
}

.sr-messages__bubble {
	max-width: 85%;
	padding: 0.5rem 0.75rem;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.sr-messages__bubble--me {
	align-self: flex-end;
	background: var(--sr-link);
	color: #fff;
}

.sr-messages__bubble--them {
	align-self: flex-start;
	background: var(--sr-bg-sidebar);
	border: 1px solid var(--sr-border);
	color: var(--sr-text);
}

.sr-messages__bubble-name {
	font-size: 0.75rem;
	font-weight: 600;
	opacity: 0.9;
}

.sr-messages__bubble-body {
	font-size: 0.9375rem;
	line-height: 1.4;
	word-wrap: break-word;
}

.sr-messages__bubble-body p {
	margin: 0 0 0.5em;
}

.sr-messages__bubble-body p:last-child {
	margin-bottom: 0;
}

.sr-messages__bubble-time {
	font-size: 0.7rem;
	opacity: 0.8;
}

.sr-messages__form {
	padding: 0.75rem 1rem;
	border-top: 1px solid var(--sr-border);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.sr-messages__input {
	width: 100%;
	min-height: 60px;
	padding: 0.5rem 0.75rem;
	font-size: 1rem;
	font-family: inherit;
	border: 1px solid var(--sr-border);
	border-radius: 6px;
	background: var(--sr-bg-elevated);
	color: var(--sr-text);
	resize: vertical;
	box-sizing: border-box;
}

.sr-messages__submit {
	align-self: flex-end;
	padding: 0.5rem 1rem;
	font-size: 0.9375rem;
	font-weight: 500;
	color: #fff;
	background: var(--sr-link);
	border: none;
	border-radius: 6px;
	cursor: pointer;
}

.sr-messages__submit:hover {
	background: var(--sr-link-hover);
}

.sr-messages__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--sr-border);
	border-radius: 8px;
	background: var(--sr-bg-elevated);
	overflow: hidden;
}

.sr-messages__item {
	border-bottom: 1px solid var(--sr-border);
}

.sr-messages__item:last-child {
	border-bottom: none;
}

.sr-messages__item-link {
	display: block;
	padding: 0.75rem 1rem;
	text-decoration: none;
	color: var(--sr-text);
	transition: background 0.15s ease;
}

.sr-messages__item-link:hover {
	background: var(--sr-bg-sidebar);
}

.sr-messages__item-name {
	display: block;
	font-weight: 600;
	color: var(--sr-title);
	margin-bottom: 0.25rem;
}

.sr-messages__item-unread {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.25rem;
	height: 1.25rem;
	padding: 0 0.35rem;
	font-size: 0.75rem;
	font-weight: 600;
	background: #c62828;
	color: #fff;
	border-radius: 10px;
	margin-left: 0.35rem;
}

.sr-messages__item-preview {
	display: block;
	font-size: 0.875rem;
	color: var(--sr-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sr-messages__item-time {
	display: block;
	font-size: 0.75rem;
	color: var(--sr-text-dim);
	margin-top: 0.25rem;
}