@charset "UTF-8";

:root {
	--obs-bg: #050506;
	--obs-raised: #09090b;
	--obs-surface: #111115;
	--obs-glass: rgba(15, 15, 18, .84);
	--obs-text: #f3f1f1;
	--obs-muted: #a7a2a3;
	--obs-faint: #777276;
	--obs-border: rgba(255, 255, 255, .08);
	--obs-border-strong: rgba(255, 255, 255, .14);
	--obs-accent: #9e111b;
	--obs-accent-bright: #d22b35;
	--obs-radius: 6px;
	--primary: #9e111b;
	--dark: #09090b;
	--secondary: #252429;
	--white: #f3f1f1;
	--black: #f3f1f1;
	--light: #1a191d;
	--muted: #a7a2a3;
	--gray: #35343a;
	--gray-100: #f3f1f1;
	--gray-200: #d0cccd;
	--gray-300: #777276;
	--gray-400: #4a484e;
	--gray-500: #29282d;
	--gray-600: #1c1b1f;
	--gray-700: #141317;
	--gray-800: #0d0d0f;
	--gray-900: #050506;
	--background: 5, 5, 6;
}

html { background: var(--obs-bg); }

body {
	min-height: 100vh;
	color: var(--obs-text) !important;
	font-family: Inter, "Segoe UI", Arial, sans-serif;
	letter-spacing: 0;
	background: linear-gradient(180deg, rgba(9,9,11,.86) 0, rgba(5,5,6,.9) 26rem, rgba(7,7,8,.94) 100%) fixed !important;
}

body, .navbar-light, .navbar-dark, .card, .modal-content,
.comment-write textarea, #root > div.App { color: var(--obs-text) !important; }

a, .text-info, .text-primary { color: #db6a70 !important; }
a:hover, a:focus { color: #f0a2a6 !important; text-decoration: none; }
.text-muted, .post-meta, .post-meta a { color: #fff !important; }

.container, .container-fluid, #settings, #submit, #page,
#article, #thread, #userpage { background: transparent !important; }

.app-shell {
	width: 100%;
	max-width: 1440px;
	padding-right: clamp(16px, 2vw, 32px);
	padding-left: clamp(16px, 2vw, 32px);
}

#main-content-row {
	align-items: flex-start;
	margin-right: -10px;
	margin-left: -10px;
}

#main-content-col {
	min-width: 0;
	padding-right: 10px;
	padding-left: 10px;
}

.site-banner-link {
	position: relative;
	display: block;
	overflow: hidden;
	height: clamp(180px, 16vw, 230px);
	background: #080809;
	border-bottom: 1px solid var(--obs-border);
}

.site-banner-link::after {
	position: absolute;
	inset: 0;
	content: "";
	pointer-events: none;
	background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(5,5,6,.72));
}

.site-banner {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 48%;
}

.srd {
	position: relative;
	z-index: 1031;
	min-height: 24px;
	padding: 4px 1rem;
	color: #eee9ea;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0;
	background: linear-gradient(90deg, #25070a, #5b0c13 48%, #25070a) !important;
	border-bottom: 1px solid rgba(210,43,53,.2);
	box-shadow: none;
}

#navbar, .navbar {
	min-height: 62px;
	background: rgba(7,7,8,.9) !important;
	border-bottom: 1px solid var(--obs-border);
	box-shadow: 0 10px 30px rgba(0,0,0,.28);
	backdrop-filter: blur(16px) saturate(120%);
	-webkit-backdrop-filter: blur(16px) saturate(120%);
}

.navbar-brand { gap: .65rem; }
#header--icon {
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	box-shadow: none;
	object-fit: contain;
}


.auth-official-logo {
	display: block;
	width: min(128px, 34vw);
	height: min(128px, 34vw);
	margin: 0 auto 1.25rem;
	object-fit: contain;
}

#logo-Obsession {
	width: min(154px, 32vw) !important;
	height: auto;
	filter: none;
}

.navbar-light .navbar-nav .nav-link,
.navbar-dark .navbar-nav .nav-link {
	color: #c9c5c6 !important;
	border-radius: 4px;
	transition: color 180ms ease, background-color 180ms ease;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
	color: #fff !important;
	background: rgba(255,255,255,.06);
}

.form-control, textarea.form-control, .comment-write textarea,
.search .form-control, .custom-select {
	color: var(--obs-text) !important;
	background: rgba(255,255,255,.045) !important;
	border: 1px solid var(--obs-border-strong) !important;
	border-radius: var(--obs-radius) !important;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
	transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.search .form-control { height: 38px; padding-left: 1rem; }
.form-control::placeholder, textarea::placeholder { color: var(--obs-faint) !important; }

.form-control:focus, textarea.form-control:focus,
.comment-write textarea:focus, .custom-select:focus {
	background: rgba(255,255,255,.065) !important;
	border-color: rgba(210,43,53,.7) !important;
	box-shadow: 0 0 0 3px rgba(158,17,27,.18) !important;
}

.btn, .page-link {
	min-height: 34px;
	color: #d9d5d6 !important;
	background: #19181c !important;
	border: 1px solid var(--obs-border-strong) !important;
	border-radius: var(--obs-radius) !important;
	box-shadow: none;
	transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 120ms ease;
}

.btn:hover, .btn:focus, .page-link:hover, .page-link:focus {
	color: #fff !important;
	background: #222126 !important;
	border-color: rgba(255,255,255,.22) !important;
	box-shadow: none !important;
	transform: none;
}

.btn:active, .page-link:active { transform: translateY(1px); }

.btn:focus-visible, a:focus-visible, button:focus-visible {
	outline: 2px solid var(--obs-accent-bright);
	outline-offset: 2px;
}

.btn-primary, .btn-primary.active,
.btn-primary:not(:disabled, .disabled):active,
.show > .btn-primary.dropdown-toggle {
	color: #fff !important;
	background: var(--obs-accent) !important;
	border-color: #b92631 !important;
}

.btn-primary:hover, .btn-primary:focus {
	background: #b31d28 !important;
	border-color: #d04a53 !important;
}

.btn-secondary, .btn-light {
	background: #19181c !important;
	border-color: var(--obs-border-strong) !important;
}

.btn-danger {
	background: #451418 !important;
	border-color: rgba(196,59,67,.55) !important;
}

.btn-success {
	background: #173d2a !important;
	border-color: rgba(78,155,114,.5) !important;
}

.btn.disabled, .btn:disabled, .page-link.disabled { opacity: .45; cursor: not-allowed; }

.home-toolbar { overflow: visible; padding-top: 6px; }
.create-post-button { height: 40px; font-weight: 700; }

.sorting {
	float: none;
	justify-content: flex-end !important;
	gap: 8px;
}

.sorting > div {
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
}

.sorting .mx-2, .sorting .ml-2 {
	margin-right: 0 !important;
	margin-left: 0 !important;
}

.actual-post, .post-preview, #frontpage .pseudo-submit-form.card,
#search .search-results.card, .settings-section, .comment-box,
.comment .comment-body, .directory--link, .modlog-action,
.table, .popover, .modal-content {
	background: var(--obs-surface) !important;
	border: 1px solid var(--obs-border) !important;
	border-radius: var(--obs-radius) !important;
	box-shadow: 0 10px 30px rgba(0,0,0,.16);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.actual-post {
	margin: 0 0 12px;
	overflow: visible;
	transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.actual-post:hover {
	background: #141419 !important;
	border-color: rgba(255,255,255,.13) !important;
	box-shadow: 0 14px 34px rgba(0,0,0,.24);
	transform: none;
}

.actual-post .card-header { padding: .6rem .3rem .55rem .7rem !important; }
.actual-post .card-block { min-width: 0; padding: .8rem 1rem .7rem .3rem; }

.actual-post .post-actions {
	padding: .25rem .9rem .72rem;
	border-top: 1px solid rgba(255,255,255,.05);
}

.actual-post .post-actions button,
.actual-post .post-actions a { color: #b8b3b5 !important; }

.actual-post .post-actions button:hover,
.actual-post .post-actions a:hover { color: #fff !important; }

.post-title a {
	color: #f5f3f3 !important;
	font-weight: 650;
	line-height: 1.35;
}

.post-img {
	border: 1px solid var(--obs-border);
	border-radius: 4px;
	background: #0a0a0c;
	object-fit: cover;
}

.voting {
	margin-left: .35rem;
	padding: .45rem .65rem !important;
	background: rgba(0,0,0,.16);
	border-right: 1px solid rgba(255,255,255,.05);
}

.score, .score-up { color: #eee9ea !important; }
.arrow-up::before, .active.arrow-up::before,
.upvoted .arrow-mobile-up { color: var(--obs-accent-bright) !important; }
.arrow-down::before, .active.arrow-down::before,
.downvoted .arrow-mobile-down { color: #8c8789 !important; }

#sidebar-content {
	flex: 0 0 300px;
	width: 300px;
	max-width: 300px;
	margin-right: 10px;
	margin-left: 10px;
}

.sidebar {
	margin-top: 16px;
	padding: 18px !important;
	background: var(--obs-glass) !important;
	border: 1px solid var(--obs-border);
	border-radius: var(--obs-radius);
	box-shadow: 0 18px 50px rgba(0,0,0,.34);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.community-sidebar > a:first-of-type > img {
	max-height: 180px;
	object-fit: cover;
	border: 1px solid var(--obs-border);
	border-radius: 4px;
}

.sidebar-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin: 0 2px;
	color: #fff !important;
	border-radius: 4px;
	transition: color 160ms ease, background-color 160ms ease;
}

.sidebar-link:hover, .sidebar-link:focus {
	color: #fff !important;
	background: rgba(255,255,255,.07);
	text-shadow: none;
}

#sidebar--directory--btn, .sidebar .btn-block {
	margin-bottom: 9px !important;
	padding: .65rem .8rem;
}

#sidebar--directory--head { font-size: .92rem; }

#sidebar--directory--subhead {
	color: rgba(255,255,255,.65);
	font-size: .7rem;
}

.sidebar--rules { padding: .9rem .1rem .1rem; color: var(--obs-muted); }

.sidebar--rules h3 {
	color: var(--obs-text);
	font-size: .95rem;
	font-weight: 700;
	letter-spacing: 0;
}

.directory--link { color: var(--obs-text) !important; }

.directory--link:hover {
	background: #17171b !important;
	border-color: var(--obs-border-strong) !important;
	box-shadow: 0 12px 28px rgba(0,0,0,.24);
	transform: none;
}

.dropdown-menu, #header--dropdown-menu {
	padding: .45rem;
	color: var(--obs-text);
	background: rgba(15,15,18,.98) !important;
	border: 1px solid var(--obs-border-strong) !important;
	border-radius: var(--obs-radius);
	box-shadow: 0 18px 42px rgba(0,0,0,.45);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

.dropdown-item {
	color: #c8c4c5 !important;
	border-radius: 4px;
	transition: color 160ms ease, background-color 160ms ease;
}

.dropdown-item:hover, .dropdown-item:focus, .dropdown-item.active {
	color: #fff !important;
	background: rgba(255,255,255,.07) !important;
}

.table { overflow: hidden; }
.table th, .table td { border-color: var(--obs-border) !important; }
.table-striped tbody tr:nth-of-type(odd) { background: rgba(255,255,255,.02); }
.modal-backdrop.show { background: rgba(0,0,0,.84); }
.popover-user-profile, .popover-body { background: transparent !important; }

.alert { border: 1px solid var(--obs-border-strong); border-radius: var(--obs-radius); }
.pagination { gap: 4px; }

.page-item.disabled .page-link {
	color: var(--obs-faint) !important;
	background: #101013 !important;
}

@media (max-width: 991.98px) {
	.app-shell { max-width: 100%; }
	#main-content-row { margin-right: -8px; margin-left: -8px; }
	#main-content-col { padding-right: 8px; padding-left: 8px; }
}

@media (max-width: 767.98px) {
	.srd {
		min-height: var(--obs-ticker-height);
		padding: 4px var(--obs-mobile-gutter);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: center;
	}


#logo-Obsession { width: 128px !important; }
	.app-shell { padding-right: 12px; padding-left: 12px; }
	.home-toolbar { padding-top: 0; }

	.sorting {
		overflow-x: auto;
		justify-content: flex-start !important;
		padding-bottom: 10px !important;
		scrollbar-width: none;
	}

	.sorting::-webkit-scrollbar { display: none; }
	.sorting > div { flex-wrap: nowrap; justify-content: flex-start; }
	.actual-post { margin-bottom: 9px; }
	.actual-post .card-header { padding: .45rem .25rem .4rem .5rem !important; }
	.actual-post .card-block { padding: .58rem .65rem .48rem .2rem; }
	.actual-post .post-actions { padding: .25rem .6rem .6rem; }
	.sidebar { margin: 10px 0 16px; }
	.dropdown-menu { max-width: calc(100vw - 24px); }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* Profile layout */
#userpage .app-shell { max-width: 1440px; }
#userpage #main-content-row { display: block; margin: 0; }
#userpage #main-content-col { width: 100%; padding: 0; }

.profile-shell {
	width: 100%;
	margin: 20px 0 0;
	color: var(--obs-text);
}

.profile-hero {
	position: relative;
	min-height: 280px;
	overflow: hidden;
	background-color: #0b0b0d;
	background-position: center;
	background-size: cover;
	border: 1px solid var(--obs-border);
	border-radius: var(--obs-radius);
	box-shadow: 0 20px 55px rgba(0,0,0,.34);
}

.profile-hero__shade {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(90deg, rgba(5,5,6,.96) 0%, rgba(5,5,6,.74) 48%, rgba(5,5,6,.58) 100%),
		linear-gradient(0deg, rgba(5,5,6,.94), transparent 66%);
}

.profile-hero__content {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 126px minmax(0,1fr);
	gap: 28px;
	align-items: center;
	min-height: 280px;
	padding: 30px 32px;
}

.profile-avatar,
.profile-identity,
.profile-stats,
.profile-stat,
.profile-main-grid,
.profile-primary-column,
.profile-secondary-column,
.profile-panel { min-width: 0; }

.profile-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
}

.profile-avatar .profile-pic-100-wrapper {
	position: relative;
	display: block;
	width: 112px;
	height: 112px;
}

.profile-avatar .profile-pic-100 {
	width: 112px;
	height: 112px;
	margin: 0 !important;
	object-fit: cover;
	background: #0a0a0c;
	border: 3px solid rgba(255,255,255,.82);
	border-radius: 50%;
	box-shadow: 0 0 0 6px rgba(5,5,6,.58), 0 16px 32px rgba(0,0,0,.38);
}

.profile-avatar .profile-pic-100-hat {
	width: 112px;
	height: auto;
}

.profile-name-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 14px;
	align-items: center;
}

#profile--name {
	max-width: 100%;
	margin: 0;
	font-size: clamp(1.75rem, 3vw, 2.55rem);
	font-weight: 800;
	line-height: 1.08;
	overflow-wrap: anywhere;
}

.profile-identity-icons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	color: var(--obs-muted);
}

.profile-subtitle {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	margin-top: 10px;
	font-size: .93rem;
	font-weight: 650;
}

.profile-dates {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin-top: 16px;
	color: var(--obs-muted);
	font-size: .84rem;
}

.profile-dates strong { color: #d7d3d4; }

.profile-stats {
	display: grid;
	grid-template-columns: repeat(6,minmax(0,1fr));
	gap: 8px;
	align-self: stretch;
	align-content: center;
	margin-top: 14px;
}

.profile-stat {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 72px;
	padding: 12px;
	color: #fff !important;
	text-align: center;
	background: rgba(9,9,11,.66);
	border: 1px solid var(--obs-border);
	border-radius: 5px;
}

.profile-stat strong {
	color: var(--obs-text);
	font-size: 1.18rem;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

.profile-stat span {
	margin-top: 4px;
	font-size: .72rem;
	text-transform: uppercase;
}

.profile-stat:hover {
	color: var(--obs-text) !important;
	background: rgba(20,20,24,.78);
	border-color: var(--obs-border-strong);
}

.profile-main-grid {
	display: grid;
	grid-template-columns: minmax(0,1fr) minmax(300px,360px);
	gap: 14px;
	margin-top: 14px;
}

.profile-primary-column,
.profile-secondary-column {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.profile-panel {
	padding: 20px;
	background: rgba(17,17,21,.92) !important;
	border: 1px solid var(--obs-border);
	border-radius: var(--obs-radius);
	box-shadow: 0 12px 32px rgba(0,0,0,.18);
}

.profile-panel h2 {
	margin: 0 0 14px;
	color: var(--obs-text);
	font-size: .84rem;
	font-weight: 800;
	text-transform: uppercase;
}

.profile-panel h3 {
	margin: 18px 0 8px;
	color: #d8d4d5;
	font-size: .8rem;
	font-weight: 700;
	text-transform: uppercase;
}

.profile-panel__heading {
	display: flex;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
}

.profile-copy,
.profile-copy p,
.profile-copy li {
	max-width: 100%;
	color: #c3bfc0;
	line-height: 1.65;
	overflow-wrap: anywhere;
}

.profile-copy > :last-child { margin-bottom: 0; }
.profile-empty { margin: 0; color: var(--obs-muted); }

.profile-badges,
.profile-awards {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.profile-badges a,
.profile-badges > img {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 5px;
	background: #0b0b0d;
	border: 1px solid var(--obs-border);
	border-radius: 5px;
}

.profile-badges img {
	max-width: 55px;
	height: 60px;
	object-fit: contain;
}

.profile-award {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	padding: 8px 10px;
	color: #d7d3d4;
	background: #0c0c0e;
	border: 1px solid var(--obs-border);
	border-radius: 4px;
}

.profile-action-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.profile-action-buttons form { display: inline-flex; }

.profile-action-form {
	display: grid;
	gap: 9px;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--obs-border);
}

.profile-action-form p { margin: 0; color: var(--obs-muted); }

.profile-form-actions {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
}

.profile-details { margin: 0; }

.profile-details > div {
	display: grid;
	grid-template-columns: minmax(0,1fr) auto;
	gap: 14px;
	padding: 9px 0;
	border-bottom: 1px solid rgba(255,255,255,.055);
}

.profile-details > div:last-child { border-bottom: 0; }
.profile-details dt { color: var(--obs-muted); font-weight: 500; }
.profile-details dd { margin: 0; color: var(--obs-text); font-weight: 700; text-align: right; overflow-wrap: anywhere; }

.profile-moderates,
.profile-alts {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--obs-border);
}

.profile-moderates {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
}

.profile-moderates strong { width: 100%; color: var(--obs-muted); font-size: .76rem; text-transform: uppercase; }
.profile-alts ul { margin: 8px 0 0; padding-left: 20px; }

.profile-history {
	display: grid;
	grid-template-columns: repeat(2,minmax(0,1fr));
	gap: 7px 12px;
}

.profile-history h2 { grid-column: 1 / -1; }
.profile-history a { color: #c9c5c6 !important; font-size: .86rem; }
.profile-history a:hover { color: #fff !important; }

.profile-moderation {
	margin: 14px 0;
	background: rgba(13,13,16,.94);
	border: 1px solid var(--obs-border);
	border-radius: var(--obs-radius);
}

.profile-moderation > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 50px;
	padding: 0 18px;
	color: #d8d4d5;
	font-weight: 750;
	cursor: pointer;
	list-style: none;
}

.profile-moderation > summary::-webkit-details-marker { display: none; }
.profile-moderation > summary .fa-chevron-down { transition: transform 180ms ease; }
.profile-moderation[open] > summary .fa-chevron-down { transform: rotate(180deg); }

.profile-moderation__body {
	padding: 18px;
	border-top: 1px solid var(--obs-border);
}

.admintools-user-lower-desktop {
	display: grid;
	grid-template-columns: repeat(3,minmax(0,1fr));
	gap: 14px;
}

.admintools-user-lower-desktop > * {
	min-width: 0;
	margin: 0 !important;
	padding: 14px;
	background: #101014;
	border: 1px solid var(--obs-border) !important;
	border-radius: 5px;
}

.admintools-user-lower-desktop .actionbtns {
	display: flex;
	grid-column: 1 / -1;
	flex-wrap: wrap;
	gap: 8px;
}

.admintools-user-lower-desktop .actionbtns form {
	display: inline-flex;
	margin: 0 !important;
}

.admintools-user-lower-desktop .form-control { margin-bottom: 8px; }

#profile-content--nav {
	display: flex;
	flex-wrap: nowrap;
	gap: 4px;
	overflow-x: auto;
	margin-top: 14px;
	padding: 0 4px;
	border-bottom: 1px solid var(--obs-border);
	scrollbar-width: none;
}

#profile-content--nav::-webkit-scrollbar { display: none; }

#profile-content--nav .nav-link {
	color: #fff !important;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	border-radius: 4px 4px 0 0;
	font-weight: 650;
}

#profile-content--nav .nav-link:hover {
	color: var(--obs-text) !important;
	background: rgba(255,255,255,.04);
}

#profile-content--nav .nav-link.active {
	color: var(--obs-text) !important;
	background: transparent;
	border-bottom-color: var(--obs-accent-bright);
}

#userpage .comment-write,
#userpage .comment-box {
	margin-top: 14px;
}

@media (max-width: 1099.98px) {
	.profile-hero__content {
		grid-template-columns: 112px minmax(0,1fr);
		gap: 22px;
	}

	.profile-stats {
		grid-column: 1 / -1;
		grid-template-columns: repeat(6,minmax(0,1fr));
	}

	.profile-stat { min-height: 62px; }
}

@media (max-width: 767.98px) {
	.srd {
		min-height: var(--obs-ticker-height);
		padding: 4px var(--obs-mobile-gutter);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: center;
	}
	#userpage .app-shell { padding-right: 12px; padding-left: 12px; }
	.profile-shell { margin-top: 10px; }
	.profile-hero { min-height: 220px; }
	.profile-hero__shade {
		background: linear-gradient(0deg, rgba(5,5,6,.96), rgba(5,5,6,.58));
	}

	.profile-hero__content {
		grid-template-columns: 86px minmax(0,1fr);
		gap: 16px;
		min-height: 220px;
		padding: 22px 18px;
	}

	.profile-avatar .profile-pic-100-wrapper,
	.profile-avatar .profile-pic-100 {
		width: 78px;
		height: 78px;
	}

	.profile-avatar .profile-pic-100-hat { width: 78px; }
	#profile--name { font-size: clamp(1.45rem,8vw,2rem); }
	.profile-dates { margin-top: 10px; }
	.profile-stats {
		grid-template-columns: repeat(3,minmax(0,1fr));
		gap: 6px;
	}

	.profile-stat { min-height: 58px; padding: 8px 5px; }
	.profile-stat strong { font-size: 1rem; }
	.profile-stat span { font-size: .62rem; }

	.profile-main-grid { grid-template-columns: minmax(0,1fr); }
	.profile-panel { padding: 16px; }
	.profile-secondary-column { grid-row: auto; }

	.admintools-user-lower-desktop { grid-template-columns: minmax(0,1fr); }
	.admintools-user-lower-desktop .actionbtns { grid-column: 1; }
	.profile-moderation__body { padding: 12px; }
	.profile-action-buttons .btn { flex: 1 1 auto; }
	.profile-details > div { gap: 8px; }
}

@media (max-width: 420px) {
	.profile-hero__content {
		grid-template-columns: 70px minmax(0,1fr);
		padding: 18px 14px;
	}

	.profile-avatar .profile-pic-100-wrapper,
	.profile-avatar .profile-pic-100 {
		width: 64px;
		height: 64px;
	}

	.profile-avatar .profile-pic-100-hat { width: 64px; }
	.profile-subtitle { font-size: .82rem; }
	.profile-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
	.profile-history { grid-template-columns: minmax(0,1fr); }
	.profile-history h2 { grid-column: 1; }
}

/* Ambient background */
body {
	position: relative;
	isolation: isolate;
}

.obsession-aurora {
	position: fixed;
	z-index: -1;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	pointer-events: none;
	contain: strict;
	background:
		linear-gradient(145deg, #050506 0%, #09070a 48%, #050506 100%);
}

.obsession-aurora::after {
	position: absolute;
	inset: 0;
	content: "";
	background:
		linear-gradient(180deg, rgba(5,5,6,.24), rgba(5,5,6,.72)),
		linear-gradient(90deg, rgba(5,5,6,.42), transparent 50%, rgba(5,5,6,.42));
}

.obsession-aurora canvas {
	display: block;
	width: 100%;
	height: 100%;
	opacity: .78;
}

.page-profile {
	background: linear-gradient(180deg, #09090b 0, #050506 28rem, #070708 100%) fixed !important;
}

@media (prefers-reduced-motion: reduce) {
	.obsession-aurora canvas { display: none; }
}
/* Secondary application surfaces */
.bg-white,
.bg-light {
	color: var(--obs-text) !important;
	background-color: #0d0d10 !important;
}

.box-shadow-bottom {
	border-bottom: 1px solid var(--obs-border);
	box-shadow: none !important;
}

.shop-tabs {
	z-index: 1020;
	border-bottom: 1px solid var(--obs-border);
}

.shop-tabs .container,
.shop-tabs .row {
	background: transparent !important;
}

.shop-tabs .shop-tab {
	border-color: transparent !important;
	border-right-color: var(--obs-border) !important;
	border-radius: 0 !important;
}

.shop-tabs .shop-tab:not(.active) {
	color: #fff !important;
	background: #111115 !important;
}

.shop-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin: 28px auto 8px;
	color: #d8d4d5;
	font-size: 2rem;
	background: #111115;
	border: 1px solid var(--obs-border-strong);
	border-radius: 50%;
}

.shop {
	background: #101014 !important;
}

.shop thead,
.table thead.bg-primary {
	background: #19181c !important;
	border-bottom: 2px solid var(--obs-accent);
}

.shop td,
.shop th {
	vertical-align: middle;
}

.shop .btn-success {
	color: #dbeee3 !important;
	background: #173d2a !important;
}

#casino-game-wrapper {
	margin-top: 22px;
	margin-bottom: 32px;
	padding: 22px !important;
	background: rgba(17,17,21,.92) !important;
	border: 1px solid var(--obs-border);
	border-radius: var(--obs-radius);
	box-shadow: 0 18px 44px rgba(0,0,0,.26);
}

#casino-game-wrapper hr {
	border-color: var(--obs-border);
}

#casino-game-wrapper .alert {
	color: var(--obs-text);
	background: #0d0d10;
}

.leaderboard-marsey-trophy {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	background: #0b0b0d;
	border: 1px solid var(--obs-border);
	border-radius: 4px;
}

.leaderboard-marsey-trophy__trophy {
	position: static !important;
	font-size: 1.15rem;
}

#chat .container {
	max-width: 1440px;
}

#chat #main-content-row {
	margin-top: 18px;
	background: rgba(13,13,16,.88);
	border: 1px solid var(--obs-border);
	border-radius: var(--obs-radius);
	box-shadow: 0 18px 44px rgba(0,0,0,.24);
}

#chat #shrink {
	padding: 6px 10px 14px;
}

#chat-window .chat-group {
	padding: 10px;
	border-radius: 4px;
}

#chat-window .chat-group:nth-child(even) {
	background: rgba(255,255,255,.035);
}

#chat .chat-line {
	margin-left: 10px;
	padding: 3px 8px;
}

#chat .chat-message {
	color: #d7d3d4 !important;
}

#chat #message {
	gap: 6px;
	align-items: flex-end;
	padding: 12px;
	background: #0b0b0d;
	border: 1px solid var(--obs-border);
	border-radius: var(--obs-radius);
}

#chat #input-text {
	min-height: 42px;
	max-height: 120px;
	resize: vertical !important;
}

#chat #online {
	padding: 10px;
	background: transparent !important;
	border-left: 1px solid var(--obs-border);
}

#submit .submission,
#thread #main-content-col > .card,
#search .search-results {
	border-color: var(--obs-border) !important;
}

@media (max-width: 767.98px) {
	.srd {
		min-height: var(--obs-ticker-height);
		padding: 4px var(--obs-mobile-gutter);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: center;
	}
	.shop-mark {
		width: 58px;
		height: 58px;
		margin-top: 18px;
		font-size: 1.5rem;
	}

	.shop {
		font-size: .78rem;
	}

	.shop td,
	.shop th {
		padding: 9px 7px;
	}

	.shop-table-actions .btn {
		width: 100%;
		margin: 2px 0;
		padding: 5px;
		font-size: .72rem;
	}

	#casino-game-wrapper {
		margin-top: 12px;
		padding: 16px 12px !important;
		border-right: 0;
		border-left: 0;
		border-radius: 0;
	}

	#chat #main-content-row {
		margin: 8px 0 0;
		border-right: 0;
		border-left: 0;
		border-radius: 0;
	}

	#chat #main-content-col {
		padding: 0;
	}

	#chat #message {
		position: sticky;
		bottom: 58px;
		z-index: 5;
		padding: 8px;
	}

	#chat #message .btn {
		min-width: 38px;
		padding: 7px;
	}

	#chat #chatsend {
		margin-left: 0 !important;
	}
}
/* Community sidebar widgets */
.sidebar-widget {
	margin: 0 0 14px;
	padding: 14px;
	background: rgba(9,9,11,.62);
	border: 1px solid var(--obs-border);
	border-radius: 5px;
}

.sidebar-widget__eyebrow {
	margin-bottom: 10px;
	color: var(--obs-muted);
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.sidebar-featured-user,
.sidebar-level-row,
.sidebar-stat-row {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.sidebar-featured-user {
	padding: 8px;
	color: var(--obs-text) !important;
	background: rgba(255,255,255,.035);
	border-radius: 4px;
}

.sidebar-featured-user:hover,
.sidebar-level-row:hover {
	background: rgba(255,255,255,.06);
}

.sidebar-featured-user img,
.sidebar-level-row img {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	object-fit: cover;
	border-radius: 50%;
}

.sidebar-featured-user span,
.sidebar-level-row span {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sidebar-featured-user strong {
	margin-left: auto;
	color: var(--obs-accent-bright);
}

.sidebar-stat-row {
	justify-content: space-between;
	padding-top: 9px;
	margin-top: 9px;
	color: var(--obs-muted);
	border-top: 1px solid rgba(255,255,255,.06);
	font-size: .78rem;
}

.sidebar-stat-row strong,
.sidebar-level-row strong {
	color: var(--obs-text);
}

.sidebar-widget__title {
	display: block;
	margin-bottom: 9px;
	color: var(--obs-text) !important;
	font-weight: 700;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.sidebar-poll__options {
	display: grid;
	gap: 6px;
}

.sidebar-poll__options a {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	padding: 7px 8px;
	color: #fff !important;
	background: rgba(255,255,255,.035);
	border-radius: 4px;
	font-size: .78rem;
}

.sidebar-poll__options a:hover {
	color: var(--obs-text) !important;
	background: rgba(180,30,45,.14);
}

.sidebar-poll__options span {
	min-width: 0;
	overflow-wrap: anywhere;
}

.sidebar-poll__options strong {
	flex: 0 0 auto;
	color: var(--obs-accent-bright);
}

.sidebar-levels {
	display: grid;
	gap: 6px;
}

.sidebar-level-row {
	padding: 6px;
	color: #fff !important;
	font-size: .78rem;
}

.sidebar-level-row strong { margin-left: auto; color: var(--obs-accent-bright); }
.sidebar-empty { margin: 0; color: var(--obs-muted); font-size: .8rem; line-height: 1.5; }

/* Vote state and moderation menu layering */
.upvote-button.active,
.active.arrow-up::before {
	color: #d22b35 !important;
	text-shadow: 0 0 8px rgba(210,43,53,.3);
	opacity: 1 !important;
}

.downvote-button.active,
.active.arrow-down::before {
	color: #91b8c9 !important;
	text-shadow: 0 0 8px rgba(145,184,201,.22);
	opacity: 1 !important;
}

.actual-post:focus-within,
.actual-post:has(.dropdown-menu.show),
.comment:focus-within,
.comment:has(.dropdown-menu.show) {
	position: relative;
	z-index: 30;
}

.actual-post:has(.dropdown-menu.show),
.comment:has(.dropdown-menu.show) {
	overflow: visible;
}

.post-actions .dropdown-menu,
.comment-actions .dropdown-menu {
	z-index: 2000 !important;
}

.post-actions .dropdown-actions,
.comment-actions .dropdown-actions {
	position: relative;
	z-index: 2001;
}


/* Profile popovers are fixed-size previews, independent of the full profile page. */
.popover {
	width: min(520px, calc(100vw - 28px));
	max-width: min(520px, calc(100vw - 28px)) !important;
	min-width: 0;
}

.popover-body,
.popover-user-profile {
	width: 100%;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	overflow: hidden;
}

.pop-banner {
	display: block;
	width: 100%;
	height: 180px;
	max-height: 180px;
	object-fit: cover;
	object-position: center;
}

.popover-bio-div {
	max-width: 100%;
	max-height: 112px;
	overflow: auto;
	overflow-wrap: anywhere;
}

.popover-bio,
.popover-bio * {
	max-width: 100%;
	overflow-wrap: anywhere;
}

.popover-bio img,
.popover-bio video,
.popover-bio iframe,
.popover-bio table {
	display: block;
	max-width: 100% !important;
	height: auto !important;
}

.popover-badges-div {
	max-width: 100%;
	max-height: 132px;
	overflow-y: auto;
	overflow-x: hidden;
}

.pop-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	min-width: 0;
	max-width: 100%;
}

.pop-badge {
	flex: 0 0 42px;
	width: 42px;
	height: 42px;
	object-fit: contain;
}

@media (max-width: 576px) {
	.popover {
		width: calc(100vw - 20px);
		max-width: calc(100vw - 20px) !important;
	}
	.pop-banner { height: 128px; max-height: 128px; }
}
/* Compact profile previews and cursor-level vote feedback. */
.popover-profile-identity { min-width: 0; }
.popover-profile-identity .text-truncate { min-width: 0; }
.popover-profile-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; font-size: .72rem; opacity: .72; }
.popover-profile-meta strong { font-weight: 700; }
.popover-profile-stats { flex-wrap: wrap; align-items: stretch !important; gap: 8px !important; }
.pop-profile-stat { display: inline-flex; flex-direction: column; gap: 2px; min-width: 0; color: #d7d3d4 !important; font-size: .7rem; line-height: 1.15; }
.pop-profile-stat strong { color: #f3f1f1; font-size: .82rem; }
.pop-profile-stat:hover { color: #fff !important; }
.pop-badges { gap: 4px; }
.pop-badge { flex: 0 0 34px; width: 34px; height: 34px; }
.vote-xp-float { position: fixed; z-index: 100000; pointer-events: none; color: #f3f1f1; font-size: .86rem; font-weight: 800; line-height: 1; opacity: 0; transform: translateY(5px); text-shadow: 0 1px 8px rgba(0,0,0,.9); transition: opacity 120ms ease, transform 880ms ease-out; }
.vote-xp-float.is-visible { opacity: 1; transform: translateY(-18px); }
/* Community asset submissions and moderation */
#directory--wrapper .directory--link--icon,
#directory--wrapper .directory--link:hover .directory--link--icon {
	color: #fff !important;
}
.community-art-header,
.community-review-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: 1.25rem;
}
.community-art-header h1,
.community-review-header h1 {
	margin: .2rem 0 .35rem;
	font-size: clamp(1.7rem, 3vw, 2.4rem);
}
.community-art-header p,
.community-review-header p {
	margin: 0;
}
.community-art-nav {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
}
.community-art-nav a {
	padding: .55rem .75rem;
	border: 1px solid var(--obs-border);
	border-radius: var(--obs-radius);
	color: var(--obs-muted);
	background: rgba(255,255,255,.03);
}
.community-art-nav a:hover,
.community-art-nav a.active {
	color: var(--obs-text);
	border-color: var(--obs-border-strong);
	background: rgba(158,17,27,.2);
	text-decoration: none;
}
.community-art-guidelines,
.community-review-section {
	padding: 1.15rem;
	margin-bottom: 1.25rem;
	border: 1px solid var(--obs-border);
	border-radius: var(--obs-radius);
	background: rgba(17,17,21,.72);
}
.community-art-guidelines-heading {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
}
.community-art-guidelines-heading > i {
	color: var(--obs-text);
	font-size: 1.25rem;
	margin-top: .2rem;
}
.community-art-guidelines h2,
.community-review-section h2 {
	margin: 0;
	font-size: 1.1rem;
}
.community-art-guidelines p {
	margin: .2rem 0 0;
	color: var(--obs-muted);
}
.community-art-guidelines ul {
	margin: 1rem 0 0;
	padding-left: 1.25rem;
	color: var(--obs-muted);
}
.community-art-guidelines li + li { margin-top: .4rem; }
.community-art-form { background: rgba(17,17,21,.72) !important; }
.community-art-submission { overflow: hidden; }
.community-art-submission img {
	display: block;
	max-height: 180px;
	object-fit: cover;
	margin: -.75rem -.75rem .8rem;
	width: calc(100% + 1.5rem);
}
.community-review-section-heading {
	display: flex;
	align-items: center;
	gap: .65rem;
	margin-bottom: .9rem;
}
.community-review-section-heading h2 { margin: 0; }
.community-review-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.65rem;
	height: 1.65rem;
	padding: 0 .4rem;
	border-radius: 999px;
	background: rgba(158,17,27,.28);
	color: var(--obs-text);
	font-size: .8rem;
	font-weight: 700;
}
.community-review-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1rem;
}
.community-review-card {
	overflow: hidden;
	border: 1px solid var(--obs-border);
	border-radius: var(--obs-radius);
	background: rgba(255,255,255,.025);
}
.community-review-preview {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 150px;
	background: #08080a;
}
.community-review-preview--banner { min-height: 120px; }
.community-review-preview img {
	display: block;
	width: 100%;
	max-height: 220px;
	object-fit: contain;
}
.community-review-card-body { padding: 1rem; }
.community-review-card h3 {
	margin: .25rem 0 0;
	font-size: 1rem;
}
.community-review-type {
	color: var(--obs-muted);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.community-review-status { color: var(--obs-muted); font-size: .78rem; }
.community-review-notes { color: var(--obs-muted); white-space: pre-wrap; }
.community-review-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: 1rem;
}
.community-review-actions form { margin: 0; }
.community-review-empty {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: 1.25rem;
	color: var(--obs-muted);
}
.community-review-empty i { color: #fff; }
.community-review-history {
	display: grid;
	gap: .45rem;
}
.community-review-history-row {
	display: grid;
	grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1fr);
	gap: .75rem;
	align-items: center;
	padding: .7rem;
	border-bottom: 1px solid var(--obs-border);
}
@media (max-width: 700px) {
	.community-art-header,
	.community-review-header { align-items: flex-start; flex-direction: column; }
	.community-review-history-row { grid-template-columns: 1fr; gap: .2rem; }
}
/* Inactive voting controls stay neutral; only the selected direction uses the accent. */
.upvote-button:not(.active)::before,
.arrow-up:not(.active)::before {
	color: #8c8789 !important;
	text-shadow: none !important;
	opacity: .78 !important;
}

.downvote-button:not(.active)::before,
.arrow-down:not(.active)::before {
	color: #8c8789 !important;
	text-shadow: none !important;
	opacity: .78 !important;
}

/* Mobile modal and chat stability */
@media (max-width: 767.98px) {
	.srd {
		min-height: var(--obs-ticker-height);
		padding: 4px var(--obs-mobile-gutter);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: center;
	}
	.modal {
		padding: 12px !important;
	}
	.modal-dialog {
		width: 100%;
		max-width: 100%;
		margin: auto;
		pointer-events: none;
	}
	.modal-content {
		max-height: calc(100dvh - 24px);
		overflow: hidden auto;
		pointer-events: auto;
	}
	.modal-body {
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	.modal .close {
		z-index: 2;
		min-width: 44px;
		min-height: 44px;
		padding: 0 !important;
	}
	#chat #main-content-row {
		display: flex;
		flex-direction: column;
		gap: 0;
	}
	#chat #main-content-col {
		order: 2;
		min-width: 0;
	}
	#chat .chat-online-column {
		display: block !important;
		order: 1;
		width: 100% !important;
		max-width: none !important;
		padding: 10px 12px !important;
		border-bottom: 1px solid var(--obs-border);
	}
	#chat .chat-online-column h5 {
		margin-bottom: 8px;
	}
	#chat .chat-online-column #online {
		display: flex;
		flex-wrap: wrap;
		gap: 8px 14px;
		max-height: none;
		overflow: visible;
		padding: 0;
		background: transparent !important;
		border: 0;
	}
	#chat .chat-online-column #online > li {
		margin: 0;
		min-width: 0;
	}
	#chat .chat-online-column #online img {
		width: 22px;
		height: 22px;
		object-fit: cover;
		vertical-align: middle;
	}
	#chat #shrink {
		padding: 6px 8px 10px;
	}
	#chat-window {
		max-height: min(58dvh, 520px);
		min-height: 180px;
		-webkit-overflow-scrolling: touch;
	}
	#chat #message {
		position: sticky;
		bottom: 0;
		display: flex !important;
		flex-wrap: wrap;
		align-items: center;
		gap: 6px;
		z-index: 5;
		padding: 8px;
		margin-bottom: env(safe-area-inset-bottom);
	}
	#chat #message > span {
		flex: 0 0 auto;
	}
	#chat #input-text {
		flex: 1 1 0;
		min-width: 0;
		width: auto;
		max-height: 120px;
		resize: none !important;
	}
	#chat #chatsend {
		flex: 0 0 40px;
		margin-left: 0 !important;
	}
	#chat .chat-official-toggle {
		flex: 0 0 100%;
		order: 5;
		margin: 2px 0 0 !important;
		padding-left: 2px;
	}
}
/* Administrator workspace */
.admin-management-padding {
	padding-left: 1rem;
	padding-right: 1rem;
}
.admin-management-page {
	max-width: 1180px;
	margin: 0 auto;
	padding: 1.5rem 0 4rem;
}
.admin-management-heading,
.admin-section-heading,
.admin-list-card-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
}
.admin-management-heading {
	margin-bottom: 1.5rem;
}
.admin-eyebrow {
	margin: 0 0 .35rem;
	color: var(--text-muted, #a7a2a3);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.admin-management-heading h1,
.admin-management-section h2 {
	margin: 0;
}
.admin-management-heading h1 {
	font-size: clamp(1.75rem, 3vw, 2.5rem);
}
.admin-management-section {
	margin-top: 1.5rem;
	padding: 1.25rem;
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 8px;
	background: rgba(17, 17, 21, .76);
}
.admin-section-heading {
	align-items: baseline;
	margin-bottom: 1rem;
}
.admin-section-heading h2 {
	font-size: 1.25rem;
}
.admin-role-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: .75rem;
}
.admin-role-card {
	min-width: 0;
	padding: .95rem;
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 6px;
	background: rgba(24, 23, 27, .7);
}
.admin-role-card-economy {
	border-color: rgba(210, 43, 53, .55);
}
.admin-role-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	margin-bottom: .65rem;
}
.admin-role-level,
.admin-economy-badge {
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}
.admin-role-level {
	color: var(--text-muted, #a7a2a3);
}
.admin-economy-badge {
	padding: .2rem .4rem;
	border-radius: 4px;
	color: #f3f1f1;
	background: rgba(158, 17, 27, .75);
}
.admin-role-card h3 {
	margin: 0 0 .4rem;
	font-size: 1rem;
}
.admin-role-card p {
	margin: 0;
	color: var(--text-muted, #a7a2a3);
	font-size: .85rem;
	line-height: 1.45;
}
.admin-list {
	display: grid;
	gap: .75rem;
}
.admin-list-card {
	padding: 1rem;
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 6px;
	background: rgba(9, 9, 11, .58);
}
.admin-identity {
	display: flex;
	align-items: center;
	gap: .7rem;
	min-width: 0;
}
.admin-avatar-link,
.admin-avatar-link img {
	flex: 0 0 auto;
}
.admin-avatar-link img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
}
.admin-name {
	font-weight: 700;
}
.admin-role-summary,
.admin-stat-strip,
.admin-protected-note {
	color: var(--text-muted, #a7a2a3);
	font-size: .85rem;
}
.admin-stat-strip {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: .65rem;
}
.admin-stat-strip strong {
	color: #f3f1f1;
}
.admin-protected-note {
	margin-top: .9rem;
	padding-top: .75rem;
	border-top: 1px solid rgba(255, 255, 255, .07);
}
.admin-admin-actions {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(255, 255, 255, .07);
}
.admin-preset-form {
	display: grid;
	grid-template-columns: auto minmax(180px, 280px) auto;
	align-items: end;
	gap: .6rem;
}
.admin-preset-form label {
	margin: 0;
	color: var(--text-muted, #a7a2a3);
	font-size: .8rem;
}
.admin-custom-access {
	margin-top: .8rem;
}
.admin-custom-access summary {
	cursor: pointer;
	width: fit-content;
}
.admin-custom-form {
	margin-top: .8rem;
	padding: 1rem;
	border: 1px solid rgba(255, 255, 255, .07);
	border-radius: 6px;
	background: rgba(24, 23, 27, .45);
}
.admin-permission-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .35rem .9rem;
	max-height: 360px;
	overflow: auto;
	padding: .25rem 0 .75rem;
}
.admin-permission-option {
	display: flex;
	align-items: center;
	gap: .45rem;
	min-width: 0;
	margin: 0;
	padding: .35rem .4rem;
	border-radius: 4px;
	font-size: .82rem;
}
.admin-permission-option:hover {
	background: rgba(255, 255, 255, .04);
}
.admin-permission-option span {
	min-width: 0;
	overflow-wrap: anywhere;
}
.admin-permission-option small {
	margin-left: auto;
	color: var(--text-muted, #a7a2a3);
	white-space: nowrap;
}
.admin-economy-permissions {
	margin: .8rem 0;
	padding-top: .8rem;
	border-top: 1px solid rgba(210, 43, 53, .35);
}
.admin-economy-permissions h4 {
	margin: 0 0 .45rem;
	font-size: .9rem;
}
.admin-reference-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .8rem;
}
.admin-reference-level {
	padding: .85rem;
	border: 1px solid rgba(255, 255, 255, .07);
	border-radius: 6px;
}
.admin-reference-level h3 {
	margin: 0 0 .55rem;
	font-size: .95rem;
}
.admin-chip-list {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
}
.admin-permission-chip {
	padding: .25rem .45rem;
	border-radius: 4px;
	color: var(--text-muted, #a7a2a3);
	background: rgba(255, 255, 255, .05);
	font-size: .75rem;
}
.admin-permission-chip-economy {
	color: #f3f1f1;
	background: rgba(158, 17, 27, .6);
}
@media (max-width: 900px) {
	.admin-role-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.admin-preset-form {
		grid-template-columns: 1fr 1fr;
	}
	.admin-preset-form label {
		grid-column: 1 / -1;
	}
	.admin-preset-form button {
		grid-column: 1 / -1;
	}
}
@media (max-width: 600px) {
	.admin-management-page {
		padding-top: 1rem;
	}
	.admin-management-heading,
	.admin-list-card-header {
		flex-direction: column;
	}
	.admin-management-heading .btn {
		width: 100%;
	}
	.admin-role-grid,
	.admin-reference-grid,
	.admin-permission-grid {
		grid-template-columns: 1fr;
	}
	.admin-stat-strip {
		justify-content: flex-start;
	}
	.admin-preset-form {
		grid-template-columns: 1fr;
	}
}
.admin-add-panel {
	margin-bottom: 1rem;
	padding: 1rem;
	border: 1px solid rgba(255, 255, 255, .07);
	border-radius: 6px;
	background: rgba(24, 23, 27, .45);
}
.admin-add-panel h3 {
	margin: 0 0 .75rem;
	font-size: 1rem;
}
.admin-add-form {
	grid-template-columns: minmax(180px, 1fr) minmax(180px, 280px) auto;
}
.admin-add-form label {
	display: block;
	margin-bottom: .35rem;
	color: var(--text-muted, #a7a2a3);
	font-size: .8rem;
}
.admin-remove-form {
	display: inline-block;
	margin: .8rem .5rem 0 0;
}
@media (max-width: 600px) {
	.admin-add-form {
		grid-template-columns: 1fr;
	}
}


/* Keep every tooltip centered, readable, and independent of page overflow. */
.tooltip {
	position: absolute !important;
	z-index: 3000 !important;
	margin: 0 !important;
	pointer-events: none !important;
}
.tooltip-inner {
	max-width: min(240px, calc(100vw - 16px)) !important;
	padding: .35rem .6rem !important;
	text-align: center !important;
	white-space: normal !important;
	word-break: normal !important;
}

/* Shared Obsession mobile shell */
:root {
	--obs-ticker-height: 24px;
	--obs-navbar-height: 62px;
	--obs-header-total-height: 86px;
	--obs-mobile-bottom-height: 76px;
	--obs-mobile-gutter: 14px;
	--obs-touch-target: 44px;
	--obs-control-height: 44px;
	--obs-card-gap: 12px;
	--obs-section-gap: 20px;
}

html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
img, video, canvas, iframe { max-width: 100%; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }

.obs-mobile-bottom-nav { display: none; }

.mobile-drawer-content { display: none; }
#mobile-drawer-backdrop { display: none; }

@media (max-width: 767.98px) {
	.srd {
		min-height: var(--obs-ticker-height);
		padding: 4px var(--obs-mobile-gutter);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: center;
	}
	#navbar, .navbar { min-height: var(--obs-navbar-height); }
	#navbar .container-fluid,
	#navbar .navbar-brand,
	#logo-container { min-width: 0; }
	#navbar .navbar-brand { display: flex; align-items: center; flex: 1 1 auto; overflow: hidden; }
	#header--icon { width: 38px; height: 38px; flex: 0 0 38px; }
	#logo-Obsession { width: min(132px, 39vw) !important; max-width: 100%; height: auto; }
	.mobile-nav-icon,
	.navbar-toggler { width: var(--obs-touch-target); min-width: var(--obs-touch-target); height: var(--obs-touch-target); padding: 0; display: inline-flex; align-items: center; justify-content: center; }
	.mobile-nav-icon { position: relative; }
	.mobile-secondary-action { display: none !important; }
	.navbar-toggler { border: 1px solid var(--obs-border-strong); border-radius: var(--obs-radius); }
	.navbar-toggler-icon { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: none; }
	#navbarResponsive {
		position: fixed;
		top: var(--obs-header-total-height);
		right: 0;
		z-index: 1050;
		display: none;
		width: min(88vw, 360px);
		height: calc(100dvh - var(--obs-header-total-height));
		max-height: calc(100dvh - var(--obs-header-total-height));
		padding: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		background: rgba(10, 10, 12, .985) !important;
		border-left: 1px solid var(--obs-border-strong);
		box-shadow: -18px 0 44px rgba(0,0,0,.45);
	}
	#navbarResponsive.is-open { display: block !important; }
	#mobile-drawer-backdrop {
		position: fixed;
		inset: var(--obs-header-total-height) 0 0;
		z-index: 1040;
		background: rgba(0,0,0,.66);
	}
	#mobile-drawer-backdrop.is-visible { display: block; }
	html.mobile-drawer-open, body.mobile-drawer-open { overflow: hidden; }
	.mobile-drawer-content { display: block; padding: 12px var(--obs-mobile-gutter) calc(24px + env(safe-area-inset-bottom)); }
	.mobile-drawer-close {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		min-height: var(--obs-touch-target);
		padding: 8px 10px;
		color: var(--obs-muted);
		background: transparent;
		border: 1px solid transparent;
		border-radius: var(--obs-radius);
	}
	.mobile-drawer-close:hover, .mobile-drawer-close:focus-visible { color: #fff; background: rgba(255,255,255,.06); border-color: var(--obs-border); }
	.mobile-drawer-section { padding: 12px 0 16px; border-bottom: 1px solid var(--obs-border); }
	.mobile-drawer-heading { padding: 4px 10px 6px; color: var(--obs-faint); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
	.mobile-drawer-link {
		display: flex !important;
		align-items: center;
		min-height: var(--obs-touch-target);
		padding: 8px 10px !important;
		color: var(--obs-text) !important;
		border-radius: var(--obs-radius);
		overflow-wrap: anywhere;
	}
	.mobile-drawer-link:hover, .mobile-drawer-link:focus-visible { color: #fff !important; background: rgba(255,255,255,.07); }
	.mobile-drawer-link i { width: 22px; color: #d98a8e; text-align: center; }
	.mobile-drawer-logout { width: 100%; text-align: left; }
	.mobile-drawer-context { padding-top: 16px; min-width: 0; }
	.mobile-drawer-context img, .mobile-drawer-context video { max-width: 100%; height: auto; }
	.obs-mobile-bottom-nav {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1035;
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		min-height: var(--obs-mobile-bottom-height);
		padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
		background: rgba(7,7,8,.97);
		border-top: 1px solid var(--obs-border-strong);
		box-shadow: 0 -10px 28px rgba(0,0,0,.28);
	}
	.obs-mobile-bottom-nav__item {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 0;
		min-height: var(--obs-touch-target);
		padding: 5px 3px;
		gap: 3px;
		color: var(--obs-muted) !important;
		font-size: .68rem;
		line-height: 1.1;
		text-align: center;
		text-decoration: none !important;
		border-radius: var(--obs-radius);
	}
	.obs-mobile-bottom-nav__item i { font-size: 1.05rem; line-height: 1; }
	.obs-mobile-bottom-nav__item.is-active { color: #f0a2a6 !important; background: rgba(158,17,27,.18); }
	.obs-mobile-bottom-nav__count {
		position: absolute;
		top: 3px;
		right: calc(50% - 23px);
		min-width: 16px;
		padding: 1px 4px;
		color: #fff;
		background: var(--obs-accent);
		border-radius: 8px;
		font-size: .6rem;
		line-height: 1.2;
	}
	.app-shell, #main-content-row, #main-content-col, .actual-post, .post-preview, .card, .modal-dialog { min-width: 0; max-width: 100%; }
	.app-shell { padding-right: var(--obs-mobile-gutter); padding-left: var(--obs-mobile-gutter); }
	.post-title, .post-body, .comment-body, .post-meta, .username, .profile-identity, .profile-bio { overflow-wrap: anywhere; }
	.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.modal-dialog { width: calc(100% - 24px); margin: 12px auto; }
	.modal-content { max-height: calc(100dvh - 24px); overflow: auto; }
	input.form-control, select.form-control, textarea.form-control, .custom-select { min-height: var(--obs-control-height); font-size: 16px !important; }
}

@media (max-width: 374px) {
	#logo-Obsession { width: min(112px, 35vw) !important; }
	#header--icon { width: 34px; height: 34px; flex-basis: 34px; }
	.mobile-drawer-content { padding-right: 12px; padding-left: 12px; }
	.obs-mobile-bottom-nav { padding-right: 4px; padding-left: 4px; }
	.obs-mobile-bottom-nav__item { font-size: .62rem; }
}

@media (min-width: 768px) {
	#navbarResponsive { display: flex !important; }
}

/* Reusable responsive patterns for later page work. */
.mobile-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	min-width: 0;
}
.mobile-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: var(--obs-card-gap);
	min-width: 0;
}
.mobile-form-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--obs-card-gap);
	min-width: 0;
}
.responsive-media {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	object-fit: contain;
}
.mobile-sticky-offset {
	padding-bottom: calc(var(--obs-mobile-bottom-height) + env(safe-area-inset-bottom));
}

@media (max-width: 767.98px) {
	.mobile-toolbar { gap: 8px; }
	.mobile-form-row { grid-template-columns: minmax(0, 1fr); }
	.mobile-sticky-offset { padding-bottom: calc(var(--obs-mobile-bottom-height) + env(safe-area-inset-bottom)); }
}