/*
Theme Name: AutoHouse89
Theme URI: https://autohouse89.ru
Author: Telex
Description: AutoHouse89 — автопортал, сообщество автолюбителей Салехарда и ЯНАО. Тёмная тема с левым сайдбаром и циановыми акцентами.
Version: 36.2.0

License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: autohouse89
Tags: dark, automotive, community, full-site-editing, wide-blocks
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
*/

/* ----------------------------------------------------------------
   CSS Variables — single source of truth is theme.json palette.
   Short aliases below reference var(--wp--preset--color--*) so
   all color changes only need to happen in theme.json.
   ---------------------------------------------------------------- */

:root {
	--ah89-sidebar-w: 160px;
	--ah89-topbar-h: 52px;
	--ah89-mobile-nav-h: 56px;
	--ah89-bg-base: var(--wp--preset--color--base, #0a0a0f);
	--ah89-bg-sidebar: var(--wp--preset--color--sidebar, #0c0c12);
	--ah89-bg-surface: var(--wp--preset--color--surface, #151519);
	--ah89-bg-card: var(--wp--preset--color--card, #1c1c24);
	--ah89-bg-topbar: var(--wp--preset--color--topbar, #101016);
	--ah89-border: var(--wp--preset--color--border, #2a2a36);
	--ah89-text: var(--wp--preset--color--text, #d8d8e0);
	--ah89-muted: var(--wp--preset--color--muted, #7a7a8e);
	--ah89-accent: var(--wp--preset--color--accent, #00e5ff);
	--ah89-green: var(--wp--preset--color--green, #00c853);
	--ah89-red: var(--wp--preset--color--red, #ff3d00);
	--ah89-white: var(--wp--preset--color--white, #ffffff);
}

/* ----------------------------------------------------------------
   Light Theme Override — muted steel-grey palette, not pure white.
   Widget sidebar is noticeably darker than main content area.
   ---------------------------------------------------------------- */

[data-theme="light"] {
	--ah89-bg-base: #c8c8d0;
	--ah89-bg-sidebar: #b8b8c2;
	--ah89-bg-surface: #d0d0d8;
	--ah89-bg-card: #dcdce4;
	--ah89-bg-topbar: #bfbfc9;
	--ah89-border: #a0a0b0;
	--ah89-text: #1a1a2e;
	--ah89-muted: #4e4e62;
	--ah89-accent: #007a8f;
	--ah89-green: #007040;
	--ah89-red: #b82800;
	--ah89-white: #0e0e16;
}

[data-theme="light"] body {
	background: #c0c0ca;
}

[data-theme="light"] .main-content-area {
	background: #c8c8d0;
}

/* Widget sidebar — darker than main content for visual separation */
[data-theme="light"] .ah89-feed-layout__sidebar {
	background: #aaaab6;
	border-left-color: #9090a0;
}

/* Widget cards inside sidebar — darker background */
[data-theme="light"] .ah89-sidebar-widget-card,
[data-theme="light"] .ah89-weather-widget,
[data-theme="light"] .ah89-music-widget,
[data-theme="light"] .ah89-online-widget,
[data-theme="light"] .ah89-stats-widget,
[data-theme="light"] .ah89-city-banner,
[data-theme="light"] .ah89-install-widget {
	background: #a0a0ac;
	border-color: #8e8ea0;
}

[data-theme="light"] .ah89-chat-msg--own {
	background: rgba(0, 122, 143, 0.1);
	border-color: rgba(0, 122, 143, 0.25);
}

[data-theme="light"] .ah89-dm-msg--own .ah89-dm-msg__bubble {
	background: rgba(0, 122, 143, 0.1);
	border-color: rgba(0, 122, 143, 0.25);
}

[data-theme="light"] .ah89-track-row {
	background: #d4d4dc;
}

[data-theme="light"] .ah89-track-row:hover {
	background: rgba(0, 122, 143, 0.08);
}

[data-theme="light"] .ah89-mini-player {
	background: #b8b8c2;
	border-top-color: var(--ah89-accent);
}

[data-theme="light"] .ah89-feed-card:hover {
	border-color: rgba(0, 122, 143, 0.45);
}

/* Widget overlays — keep dark so text stays readable on cover images */
[data-theme="light"] .ah89-widget-cover__overlay {
	background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.6) 100%);
}

[data-theme="light"] .ah89-widget-cover__overlay--darker {
	background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.7) 100%);
}

/* Keep widget text light on dark overlays */
[data-theme="light"] .ah89-widget-cover__content {
	color: #e0e0e8;
}

[data-theme="light"] .ah89-widget-cover__content .ah89-sidebar-widget-card__title {
	color: rgba(255,255,255,0.8) !important;
}

[data-theme="light"] .ah89-city-banner__name {
	color: #ffffff;
	text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

[data-theme="light"] .ah89-city-banner__tagline {
	color: rgba(255,255,255,0.85);
	text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

[data-theme="light"] .ah89-weather-widget__temp {
	color: var(--ah89-accent);
	text-shadow: none;
}

[data-theme="light"] .ah89-music__title {
	text-shadow: none;
}

[data-theme="light"] .ah89-music-widget__title {
	color: #00e5ff;
}

[data-theme="light"] .ah89-music-widget__text {
	color: #e0e0e8;
}

[data-theme="light"] .ah89-music-widget__freq {
	color: #ff5722;
}

[data-theme="light"] .ah89-online-widget__title {
	color: #ffffff;
}

[data-theme="light"] .ah89-online-widget__count {
	color: #00c853;
}

[data-theme="light"] .ah89-online-widget__user {
	color: #e0e0e8;
	background: rgba(255,255,255,0.1);
}

[data-theme="light"] ::selection {
	background-color: var(--ah89-accent);
	color: #ffffff;
}

[data-theme="light"] ::-webkit-scrollbar-track {
	background: #c0c0ca;
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
	background: #9090a0;
}

[data-theme="light"] .ah89-auth-modal {
	background: #d8d8e0;
	border-color: #a0a0b0;
}

[data-theme="light"] .ah89-auth-field-input {
	background: #c8c8d0 !important;
	border-color: #a0a0b0 !important;
	color: #1a1a2e !important;
}

[data-theme="light"] .ah89-lightbox {
	background: rgba(30,30,40,0.92);
}

[data-theme="light"] .ah89-lightbox__close,
[data-theme="light"] .ah89-lightbox__prev,
[data-theme="light"] .ah89-lightbox__next {
	color: #ffffff;
}

/* Theme toggle button in sidebar */
.ah89-theme-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: calc(100% - 32px);
	margin: 8px 16px 0;
	padding: 7px 0;
	background: transparent;
	border: 1px solid var(--ah89-border);
	border-radius: 6px;
	color: var(--ah89-muted);
	font-size: 0.625rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s;
}

.ah89-theme-toggle:hover {
	color: var(--ah89-accent);
	border-color: var(--ah89-accent);
}

.ah89-theme-toggle svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

/* ----------------------------------------------------------------
   Reset & Foundation
   ---------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--ah89-bg-base);
	color: var(--ah89-text);
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

/* ----------------------------------------------------------------
   Grid Layout: sidebar + main
   ---------------------------------------------------------------- */

.wp-site-blocks {
	display: grid;
	grid-template-columns: var(--ah89-sidebar-w) 1fr;
	min-height: 100vh;
}

.wp-block-template-part.site-sidebar {
	grid-column: 1;
	grid-row: 1;
	position: sticky;
	top: 0;
	align-self: start;
	height: 100vh;
	overflow-y: auto;
	background: var(--ah89-bg-sidebar);
	border-right: 1px solid var(--ah89-border);
	z-index: 200;
}

.main-content-area {
	grid-column: 2;
	grid-row: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background: var(--ah89-bg-base);
	overflow-x: hidden;
	max-width: 100%;
}

/* ----------------------------------------------------------------
   Sidebar Inner
   ---------------------------------------------------------------- */

.ah89-sidebar {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 4px 0 20px;
}

.ah89-sidebar__logo {
	padding: 2px 8px 6px;
	font-size: 1.125rem;
	font-weight: 800;
	color: var(--ah89-white);
	letter-spacing: -0.02em;
	line-height: 1.2;
	border-bottom: 1px solid var(--ah89-border);
	text-decoration: none;
	display: block;
	text-align: center;
}

.ah89-sidebar__logo img {
	width: 120px;
	height: auto;
	display: block;
	margin: 0 auto 4px;
	border-radius: 8px;
	opacity: 0.9;
	transition: opacity 0.2s;
}

.ah89-sidebar__logo:hover img {
	opacity: 1;
}

.ah89-sidebar__logo span {
	color: var(--ah89-accent);
}

/* Sidebar Nav */
.ah89-sidebar__nav {
	flex: 1;
	padding: 12px 0;
	overflow-y: auto;
}

.ah89-sidebar__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ah89-sidebar__nav li {
	margin: 0;
}

.ah89-sidebar__nav a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 16px;
	color: var(--ah89-muted);
	font-size: 0.8125rem;
	font-weight: 500;
	text-decoration: none;
	transition: color 0.15s, background 0.15s;
	border-left: 3px solid transparent;
}

.ah89-sidebar__nav a:hover,
.ah89-sidebar__nav a.is-active {
	color: var(--ah89-accent);
	background: rgba(0, 229, 255, 0.06);
	border-left-color: var(--ah89-accent);
}

.ah89-sidebar__nav a svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	opacity: 0.7;
}

.ah89-sidebar__nav a:hover svg,
.ah89-sidebar__nav a.is-active svg {
	opacity: 1;
}

/* Sidebar Footer Widgets */
.ah89-sidebar__footer {
	padding: 16px;
	border-top: 1px solid var(--ah89-border);
	margin-top: auto;
}

.ah89-sidebar__city {
	font-family: 'Courier New', Courier, monospace;
	font-size: 0.625rem;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--ah89-muted);
	text-align: center;
	margin: 0;
	line-height: 1.6;
}

/* ----------------------------------------------------------------
   Topbar
   ---------------------------------------------------------------- */

.ah89-topbar {
	background: var(--ah89-bg-topbar);
	border-bottom: 1px solid var(--ah89-border);
	flex-shrink: 0;
	overflow: hidden;
	max-width: 100%;
	box-sizing: border-box;
}

.ah89-topbar__inner {
	display: flex;
	align-items: center;
	gap: 12px;
	height: var(--ah89-topbar-h);
	padding: 0 20px;
	max-width: 100%;
	box-sizing: border-box;
	overflow: hidden;
}

.ah89-topbar__search {
	display: flex;
	align-items: center;
	flex: 1;
	max-width: 420px;
	background: var(--ah89-bg-card);
	border: 1px solid var(--ah89-border);
	border-radius: 6px;
	overflow: hidden;
}

.ah89-topbar__search input {
	flex: 1;
	background: transparent;
	border: none;
	color: var(--ah89-text);
	font-size: 0.8125rem;
	padding: 8px 12px;
	outline: none;
}

.ah89-topbar__search input::placeholder {
	color: var(--ah89-muted);
}

.ah89-topbar__search-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 34px;
	background: var(--ah89-accent);
	border: none;
	cursor: pointer;
	color: var(--ah89-bg-base);
	flex-shrink: 0;
}

.ah89-topbar__search-btn svg {
	width: 16px;
	height: 16px;
}

.ah89-topbar__spacer {
	flex: 1;
}

.ah89-topbar__weather {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: 'Courier New', Courier, monospace;
	font-size: 0.75rem;
	color: var(--ah89-muted);
	white-space: nowrap;
}

.ah89-topbar__weather-city {
	display: inline;
}

/* Weather icon: hidden by default on desktop, shown on all mobile screens */
.ah89-topbar__weather-icon {
	display: none;
	width: 16px;
	height: 16px;
	color: var(--ah89-accent);
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
}

.ah89-topbar__weather-icon svg {
	width: 16px;
	height: 16px;
}

@media (max-width: 782px) {
	.ah89-topbar__weather-icon {
		display: inline-flex;
	}
}

.ah89-topbar__weather-temp {
	color: var(--ah89-white);
	font-weight: 600;
}

.ah89-topbar__icons {
	display: flex;
	align-items: center;
	gap: 4px;
}

.ah89-topbar__icon-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	background: transparent;
	border: none;
	border-radius: 6px;
	color: var(--ah89-muted);
	cursor: pointer;
	transition: color 0.15s, background 0.15s;
	position: relative;
}

.ah89-topbar__icon-btn:hover {
	color: var(--ah89-accent);
	background: rgba(0, 229, 255, 0.08);
}

.ah89-topbar__icon-btn svg {
	width: 18px;
	height: 18px;
}

.ah89-topbar__login-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--ah89-accent);
	color: var(--ah89-bg-base);
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border: none;
	border-radius: 4px;
	padding: 7px 14px;
	cursor: pointer;
	transition: background 0.15s;
	white-space: nowrap;
}

.ah89-topbar__login-btn:hover {
	background: var(--ah89-white);
}

/* ----------------------------------------------------------------
   Main Content Area
   ---------------------------------------------------------------- */

.ah89-main {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 20px;
}

.ah89-placeholder {
	text-align: center;
	max-width: 480px;
}

.ah89-placeholder__icon {
	width: 64px;
	height: 64px;
	margin: 0 auto 24px;
	opacity: 0.15;
	color: var(--ah89-accent);
}

.ah89-placeholder__title {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--ah89-white);
	margin: 0 0 8px;
}

.ah89-placeholder__text {
	font-size: 0.875rem;
	color: var(--ah89-muted);
	margin: 0;
	line-height: 1.6;
}

/* ----------------------------------------------------------------
   Footer (inside main)
   ---------------------------------------------------------------- */

.ah89-footer {
	padding: 0;
	border-top: 1px solid var(--ah89-border);
	background: var(--ah89-bg-sidebar);
}

.ah89-footer__inner {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 32px;
	padding: 32px 40px 20px;
}

.ah89-footer__col {
	min-width: 0;
}

.ah89-footer__col--bottom {
	grid-column: 1 / -1;
	border-top: 1px solid var(--ah89-border);
	padding-top: 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
}

.ah89-footer__heading {
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--ah89-white);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0 0 12px;
}

.ah89-footer__text {
	font-size: 0.75rem;
	color: var(--ah89-muted);
	line-height: 1.6;
	margin: 0 0 8px;
}

.ah89-footer__city-tag {
	font-family: 'Courier New', Courier, monospace;
	font-size: 0.625rem;
	color: var(--ah89-muted);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin: 0;
}

.ah89-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ah89-footer__links li {
	font-size: 0.75rem;
	color: var(--ah89-muted);
	margin-bottom: 6px;
	line-height: 1.5;
}

.ah89-footer__links a {
	color: var(--ah89-accent);
	text-decoration: none;
	transition: color 0.15s;
	cursor: pointer;
}

.ah89-footer__links a:hover {
	color: var(--ah89-white);
}

.ah89-footer__links a[data-section] {
	cursor: pointer;
	pointer-events: auto;
}

.ah89-footer__copy {
	font-size: 0.6875rem;
	color: var(--ah89-muted);
	margin: 0;
}

.ah89-footer__copy a {
	color: var(--ah89-muted);
	text-decoration: none;
}

.ah89-footer__copy a:hover {
	color: var(--ah89-accent);
}

@media (max-width: 782px) {
	.ah89-footer__inner {
		grid-template-columns: 1fr;
		gap: 24px;
		padding: 24px 16px 16px;
	}

	.ah89-footer__col--bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ----------------------------------------------------------------
   Auth Modal
   ---------------------------------------------------------------- */

.ah89-auth-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.7);
	z-index: 9000;
	align-items: center;
	justify-content: center;
}

.ah89-auth-overlay.is-open {
	display: flex;
}

.ah89-auth-modal {
	background: var(--ah89-bg-card);
	border: 1px solid var(--ah89-border);
	border-radius: 8px;
	width: 380px;
	max-width: 90vw;
	padding: 32px 28px;
	position: relative;
}

.ah89-auth-modal__close {
	position: absolute;
	top: 12px;
	right: 12px;
	background: none;
	border: none;
	color: var(--ah89-muted);
	cursor: pointer;
	font-size: 1.25rem;
	line-height: 1;
}

.ah89-auth-modal__close:hover {
	color: var(--ah89-white);
}

.ah89-auth-modal__title {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--ah89-white);
	margin: 0 0 20px;
}

.ah89-auth-modal__tabs {
	display: flex;
	gap: 0;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--ah89-border);
}

.ah89-auth-modal__tab {
	flex: 1;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	color: var(--ah89-muted);
	font-size: 0.8125rem;
	font-weight: 600;
	padding: 8px 0;
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s;
}

.ah89-auth-modal__tab.is-active {
	color: var(--ah89-accent);
	border-bottom-color: var(--ah89-accent);
}



/* Auth form container — auth.js creates exactly one form at a time inside
   #ah89-auth-form-container. No visibility toggling needed. */

#ah89-auth-form-container {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ah89-auth-field-row {
	display: block;
	width: 100%;
	margin-bottom: 0;
}

.ah89-auth-field-label {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--ah89-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 6px;
}

.ah89-auth-field-input {
	display: block;
	width: 100%;
	min-height: 40px;
	height: 40px;
	background: var(--ah89-bg-surface, #151519);
	border: 1px solid var(--ah89-border, #2a2a36);
	border-radius: 4px;
	color: var(--ah89-text, #d8d8e0);
	font-size: 0.875rem;
	font-family: system-ui, -apple-system, sans-serif;
	padding: 10px 12px;
	outline: none;
	margin: 0;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
}

.ah89-auth-field-input:focus {
	border-color: var(--ah89-accent);
}

.ah89-auth-field-input::placeholder {
	color: var(--ah89-muted);
}

.ah89-auth-form__forgot-hint {
	font-size: 0.75rem;
	color: var(--ah89-muted);
	margin: 0 0 12px;
}

.ah89-auth-form__submit {
	background: var(--ah89-accent);
	color: var(--ah89-bg-base);
	border: none;
	border-radius: 4px;
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 11px;
	cursor: pointer;
	transition: background 0.15s;
	margin-top: 4px;
}

.ah89-auth-form__submit:hover {
	background: var(--ah89-white);
}

.ah89-auth-form__msg {
	font-size: 0.75rem;
	min-height: 1.2em;
	margin: 0;
}

.ah89-auth-form__msg.is-error {
	color: var(--ah89-red);
}

.ah89-auth-form__msg.is-success {
	color: var(--ah89-green);
}

.ah89-auth-form__forgot {
	display: block;
	text-align: center;
	font-size: 0.75rem;
	color: var(--ah89-muted);
	margin-top: 10px;
	text-decoration: none;
	transition: color 0.15s;
}

.ah89-auth-form__forgot:hover {
	color: var(--ah89-accent);
}

/* Topbar user slot — holds either login button or avatar */
.ah89-topbar__user-slot {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

/* Server-rendered user element in topbar — now an <a> tag */
.ah89-topbar__user {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	position: relative;
	padding: 4px 8px;
	border-radius: 4px;
	transition: background 0.15s;
	text-decoration: none;
	color: inherit;
}

.ah89-topbar__user:hover {
	background: rgba(0, 229, 255, 0.08);
	color: inherit;
	text-decoration: none;
}

/* Ensure login button and avatar are always clickable */
.ah89-topbar__login-btn,
.ah89-topbar__user-info,
.ah89-topbar__user-avatar,
.ah89-topbar__user-wrap,
.ah89-topbar__user,
#ah89-topbar-user-slot {
	pointer-events: auto;
	position: relative;
	z-index: 10;
	cursor: pointer;
}

/* Ensure user slot has enough tap area on mobile */
#ah89-topbar-user-slot {
	min-width: 34px;
	min-height: 34px;
	display: inline-flex;
	align-items: center;
}

/* ----------------------------------------------------------------
   Mobile: bottom nav & sidebar collapse
   ---------------------------------------------------------------- */

.ah89-mobile-nav {
	display: none;
}

.ah89-mobile-more-panel {
	display: none;
}

@media (max-width: 782px) {
	.wp-site-blocks {
		grid-template-columns: 1fr;
		overflow-x: hidden;
		max-width: 100vw;
	}

	.wp-block-template-part.site-sidebar {
		display: none;
	}

	.main-content-area {
		grid-column: 1;
		padding-bottom: var(--ah89-mobile-nav-h);
		max-width: 100vw;
		overflow-x: hidden;
	}

	/* Ensure template-part wrappers don't break layout */
	.main-content-area > .wp-block-template-part,
	.main-content-area > .wp-block-group,
	.main-content-area > header,
	.main-content-area > footer {
		max-width: 100%;
		overflow-x: hidden;
	}

	/* Hide search from topbar on mobile — it moves below */
	.ah89-topbar__inner .ah89-topbar__search {
		display: none !important;
	}

	/* Also hide spacer on mobile since search is gone */
	.ah89-topbar__inner .ah89-topbar__spacer {
		display: none;
	}

	/* Mobile search bar below topbar */
	.ah89-mobile-search,
	#ah89-mobile-search-bar {
		display: flex !important;
		align-items: center;
		background: var(--ah89-bg-topbar);
		border-bottom: 1px solid var(--ah89-border);
		padding: 6px 12px;
		gap: 0;
		max-width: 100%;
		box-sizing: border-box;
	}

	.ah89-mobile-search input {
		flex: 1;
		background: var(--ah89-bg-card);
		border: 1px solid var(--ah89-border);
		border-right: none;
		border-radius: 6px 0 0 6px;
		color: var(--ah89-text);
		font-size: 0.8125rem;
		padding: 10px 12px;
		outline: none;
	}

	.ah89-mobile-search input::placeholder {
		color: var(--ah89-muted);
	}

	.ah89-mobile-search input:focus {
		border-color: var(--ah89-accent);
	}

	.ah89-mobile-search button {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 40px;
		background: var(--ah89-accent);
		border: none;
		border-radius: 0 6px 6px 0;
		cursor: pointer;
		color: var(--ah89-bg-base);
		flex-shrink: 0;
	}

	.ah89-mobile-search button svg {
		width: 16px;
		height: 16px;
	}

	/* Mobile bottom nav */
	.ah89-mobile-nav {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: var(--ah89-mobile-nav-h);
		background: var(--ah89-bg-sidebar);
		border-top: 1px solid var(--ah89-border);
		z-index: 300;
		align-items: center;
		justify-content: space-around;
		padding: 0;
	}

	.ah89-mobile-nav__btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 2px;
		background: none;
		border: none;
		color: var(--ah89-muted);
		font-size: 0.5625rem;
		font-weight: 500;
		cursor: pointer;
		padding: 6px 0;
		text-decoration: none;
		min-width: 48px;
	}

	.ah89-mobile-nav__btn svg {
		width: 22px;
		height: 22px;
	}

	.ah89-mobile-nav__btn.is-active,
	.ah89-mobile-nav__btn:hover {
		color: var(--ah89-accent);
	}

	/* Mobile "more" panel */
	.ah89-mobile-more-panel {
		position: fixed;
		bottom: var(--ah89-mobile-nav-h);
		left: 0;
		right: 0;
		background: var(--ah89-bg-card);
		border-top: 1px solid var(--ah89-border);
		z-index: 290;
		padding: 20px;
		transform: translateY(100%);
		transition: transform 0.25s ease;
	}

	.ah89-mobile-more-panel.is-open {
		display: block;
		transform: translateY(0);
	}

	.ah89-mobile-more-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 16px;
	}

	.ah89-mobile-more-grid a {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 6px;
		color: var(--ah89-muted);
		font-size: 0.6875rem;
		font-weight: 500;
		text-decoration: none;
		padding: 10px 0;
		border-radius: 6px;
		transition: color 0.15s, background 0.15s;
	}

	.ah89-mobile-more-grid a:hover {
		color: var(--ah89-accent);
		background: rgba(0, 229, 255, 0.06);
	}

	.ah89-mobile-more-grid a svg {
		width: 24px;
		height: 24px;
	}
}

/* Mobile search bar: hidden on desktop */
.ah89-mobile-search {
	display: none;
}

/* Ensure mobile search is visible on mobile even inside WP template-part wrappers */
@media (max-width: 782px) {
	#ah89-mobile-search-bar {
		display: flex !important;
	}
}

/* ----------------------------------------------------------------
   Section visibility defaults — CSS fallback
   Only #ah89-section-home is visible by default.
   All other sections are hidden until navigation.js explicitly shows them.
   ---------------------------------------------------------------- */

#ah89-section-home,
#ah89-section-content,
#ah89-section-profile,
#ah89-section-chat,
#ah89-section-dm,
#ah89-section-members,
#ah89-section-notifications,
#ah89-section-gallery,
#ah89-section-videos,
#ah89-section-music,
#ah89-section-moderation {
	display: none !important;
}

#ah89-section-home.ah89-section-visible,
#ah89-section-music.ah89-section-visible,
#ah89-section-profile.ah89-section-visible,
#ah89-section-chat.ah89-section-visible,
#ah89-section-dm.ah89-section-visible,
#ah89-section-members.ah89-section-visible,
#ah89-section-notifications.ah89-section-visible,
#ah89-section-gallery.ah89-section-visible,
#ah89-section-videos.ah89-section-visible,
#ah89-section-moderation.ah89-section-visible,
#ah89-section-content.ah89-section-visible {
	display: block !important;
}

#ah89-section-chat.ah89-section-visible,
#ah89-section-dm.ah89-section-visible {
	display: flex !important;
}

/* ----------------------------------------------------------------
   Section Panels (Garages, Catalog, Ads)
   ---------------------------------------------------------------- */

.ah89-section {
	padding: 24px 20px;
	min-height: calc(100vh - var(--ah89-topbar-h));
}

@media (min-width: 783px) {
	.ah89-section {
		padding: 24px 40px;
	}
}

.ah89-feed {
	margin: 0;
}

.ah89-profile {
	max-width: 720px;
}

.ah89-section__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
	flex-wrap: wrap;
	gap: 12px;
}

.ah89-section__title {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--ah89-white);
	margin: 0;
}

.ah89-section__add-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--ah89-accent);
	color: var(--ah89-bg-base);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	border: none;
	border-radius: 4px;
	padding: 8px 16px;
	cursor: pointer;
	transition: background 0.15s;
}

.ah89-section__add-btn:hover {
	background: var(--ah89-white);
}

.ah89-section__loading,
.ah89-section__empty {
	color: var(--ah89-muted);
	font-size: 0.875rem;
	text-align: center;
	padding: 40px 0;
	margin: 0;
}

/* ---- Section Form ---- */

.ah89-section__form-wrap {
	display: none;
	margin-bottom: 24px;
}

.ah89-section__form-wrap.is-open {
	display: block;
}

.ah89-form {
	background: var(--ah89-bg-card);
	border: 1px solid var(--ah89-border);
	border-radius: 8px;
	padding: 20px;
}

.ah89-form__grid,
.ah89-section .ah89-form__grid,
.ah89-section__form-wrap .ah89-form__grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
	gap: 14px !important;
	margin-bottom: 16px !important;
	visibility: visible !important;
	opacity: 1 !important;
}

.ah89-form__label,
.ah89-section .ah89-form__label,
.ah89-section__form-wrap .ah89-form__label {
	font-size: 0.6875rem !important;
	font-family: 'Courier New', Courier, monospace !important;
	font-weight: 600 !important;
	color: var(--ah89-muted) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 4px !important;
	visibility: visible !important;
	opacity: 1 !important;
}

.ah89-form__label--full {
	grid-column: 1 / -1;
}

.ah89-form input,
.ah89-form select,
.ah89-form textarea,
.ah89-section .ah89-form input,
.ah89-section .ah89-form select,
.ah89-section .ah89-form textarea,
.ah89-section__form-wrap input,
.ah89-section__form-wrap select,
.ah89-section__form-wrap textarea {
	width: 100% !important;
	background: var(--ah89-bg-surface) !important;
	border: 1px solid var(--ah89-border) !important;
	border-radius: 4px !important;
	color: var(--ah89-text) !important;
	font-size: 0.8125rem !important;
	font-family: system-ui, -apple-system, sans-serif !important;
	padding: 9px 10px !important;
	outline: none !important;
	transition: border-color 0.15s !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	box-sizing: border-box !important;
}

.ah89-form input:focus,
.ah89-form select:focus,
.ah89-form textarea:focus,
.ah89-section .ah89-form input:focus,
.ah89-section .ah89-form select:focus,
.ah89-section .ah89-form textarea:focus {
	border-color: var(--ah89-accent) !important;
}

.ah89-form input::placeholder,
.ah89-form textarea::placeholder {
	color: var(--ah89-muted);
}

.ah89-form select,
.ah89-section .ah89-form select,
.ah89-section__form-wrap select {
	cursor: pointer !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237a7a8e' d='M3 5l3 3 3-3'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 10px center !important;
	padding-right: 28px !important;
}

.ah89-form textarea {
	resize: vertical;
	min-height: 60px;
}

.ah89-form__buttons {
	display: flex;
	gap: 10px;
}

.ah89-form__submit {
	background: var(--ah89-accent);
	color: var(--ah89-bg-base);
	border: none;
	border-radius: 4px;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 10px 20px;
	cursor: pointer;
	transition: background 0.15s;
}

.ah89-form__submit:hover {
	background: var(--ah89-white);
}

.ah89-form__cancel {
	background: transparent;
	color: var(--ah89-muted);
	border: 1px solid var(--ah89-border);
	border-radius: 4px;
	font-size: 0.75rem;
	font-weight: 600;
	padding: 10px 16px;
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s;
}

.ah89-form__cancel:hover {
	color: var(--ah89-white);
	border-color: var(--ah89-muted);
}

.ah89-form__msg {
	font-size: 0.75rem;
	min-height: 1.2em;
	margin: 0 0 8px;
}

.ah89-form__msg.is-error {
	color: var(--ah89-red);
}

.ah89-form__msg.is-success {
	color: var(--ah89-green);
}

/* ---- Cards ---- */

.ah89-card {
	background: var(--ah89-bg-card);
	border: 1px solid var(--ah89-border);
	border-radius: 8px;
	padding: 16px;
	margin-bottom: 12px;
	transition: border-color 0.15s;
	max-width: 680px;
}

.ah89-card:hover {
	border-color: var(--ah89-accent);
}

.ah89-card__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 8px;
}

.ah89-card__title {
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--ah89-white);
	margin: 0;
	flex: 1;
}

.ah89-card__price {
	font-family: 'Courier New', Courier, monospace;
	font-size: 1rem;
	font-weight: 700;
	color: var(--ah89-green);
	white-space: nowrap;
}

.ah89-card__actions {
	display: flex;
	gap: 6px;
	flex-shrink: 0;
	flex-wrap: wrap;
}

.ah89-card__action-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-width: 40px;
	height: 34px;
	background: var(--ah89-bg-surface);
	border: 1px solid var(--ah89-border);
	border-radius: 6px;
	color: var(--ah89-text);
	font-size: 0.75rem;
	font-weight: 600;
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s, background 0.15s;
	padding: 0 12px;
	white-space: nowrap;
}

.ah89-card__action-btn:hover {
	color: var(--ah89-accent);
	border-color: var(--ah89-accent);
	background: rgba(0, 229, 255, 0.08);
}

.ah89-card__delete:hover,
.ah89-card__delete-top:hover,
.ah89-card__delete-detail:hover {
	color: var(--ah89-red);
	border-color: var(--ah89-red);
	background: rgba(255, 61, 0, 0.08);
}

.ah89-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 6px;
}

.ah89-card__tag {
	display: inline-block;
	background: var(--ah89-bg-surface);
	border: 1px solid var(--ah89-border);
	border-radius: 3px;
	padding: 2px 8px;
	font-size: 0.6875rem;
	color: var(--ah89-text);
}

.ah89-card__tag--mono {
	font-family: 'Courier New', Courier, monospace;
}

.ah89-card__tag--accent {
	color: var(--ah89-accent);
	border-color: rgba(0, 229, 255, 0.3);
}

.ah89-card__badge {
	display: inline-block;
	font-size: 0.625rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 3px 8px;
	border-radius: 3px;
	margin-bottom: 6px;
}

.ah89-card__badge--pending {
	background: rgba(255, 140, 0, 0.15);
	color: #ffab40;
	border: 1px solid rgba(255, 140, 0, 0.3);
}

.ah89-card__line {
	font-size: 0.8125rem;
	color: var(--ah89-muted);
	margin: 4px 0 0;
}

.ah89-card__line--mono {
	font-family: 'Courier New', Courier, monospace;
	word-break: break-word;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ah89-card__author-line {
	font-size: 0.6875rem;
	color: var(--ah89-muted);
	margin: 6px 0 2px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.ah89-card__author-line::before {
	content: '';
	display: inline-block;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--ah89-accent);
	flex-shrink: 0;
	opacity: 0.6;
}

.ah89-card__author-avatar {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.ah89-card__author-name {
	cursor: pointer;
	transition: color 0.15s;
}

.ah89-card__author-name:hover {
	color: var(--ah89-accent);
}

.ah89-card__author-name--loading {
	color: var(--ah89-muted);
	font-style: italic;
}

.ah89-card__author-profile-link {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	background: transparent;
	border: 1px solid var(--ah89-border);
	border-radius: 3px;
	color: var(--ah89-muted);
	font-size: 0.5625rem;
	font-weight: 600;
	padding: 2px 6px;
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s;
	margin-left: 4px;
	white-space: nowrap;
	text-decoration: none;
}

.ah89-card__author-profile-link:hover {
	color: var(--ah89-accent);
	border-color: var(--ah89-accent);
}

.ah89-card__author-profile-link svg {
	width: 10px;
	height: 10px;
}

/* ---- Card View / Details Button ---- */

.ah89-card__view-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(0, 229, 255, 0.06);
	border: 1px solid rgba(0, 229, 255, 0.3);
	border-radius: 6px;
	color: var(--ah89-accent);
	font-size: 0.75rem;
	font-weight: 700;
	padding: 8px 16px;
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s, background 0.15s;
	margin-top: 8px;
}

.ah89-card__view-btn:hover {
	background: rgba(0, 229, 255, 0.15);
	border-color: var(--ah89-accent);
}

.ah89-card__view-btn.is-open {
	color: var(--ah89-muted);
	border-color: var(--ah89-muted);
}



/* ---- Card Details Panel ---- */

.ah89-card__details {
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
	background: var(--ah89-bg-surface);
	border-top: 1px solid var(--ah89-border);
	padding: 0 16px;
	margin-top: 0;
}

.ah89-card__details.is-open {
	max-height: 800px;
	opacity: 1;
	padding: 16px;
	margin-top: 10px;
}

.ah89-card__detail-row {
	display: flex;
	gap: 12px;
	margin-bottom: 8px;
	font-size: 0.8125rem;
	align-items: baseline;
}

.ah89-card__detail-label {
	color: var(--ah89-muted);
	font-family: 'Courier New', Courier, monospace;
	min-width: 120px;
	text-transform: uppercase;
	font-size: 0.6875rem;
	flex-shrink: 0;
}

.ah89-card__detail-value {
	color: var(--ah89-text);
	word-break: break-word;
}

.ah89-card__detail-value a {
	color: var(--ah89-accent);
	text-decoration: none;
}

.ah89-card__detail-value a:hover {
	color: var(--ah89-white);
}

.ah89-card__details-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
	padding-top: 10px;
	border-top: 1px solid var(--ah89-border);
}

.ah89-card__details-actions .ah89-card__action-btn {
	min-width: 36px;
	height: 36px;
	font-size: 0.9375rem;
}

.ah89-card__gallery {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	margin-top: 12px;
	padding-bottom: 8px;
}

.ah89-card__gallery img {
	width: 80px;
	height: 80px;
	object-fit: cover;
	border-radius: 6px;
	cursor: pointer;
	border: 1px solid var(--ah89-border);
	flex-shrink: 0;
	transition: border-color 0.15s;
}

.ah89-card__gallery img:hover {
	border-color: var(--ah89-accent);
}

/* Card preview image (fallback for cards without --has-preview modifier) */
.ah89-card__preview-img {
	width: 100%;
	max-height: 220px;
	object-fit: cover;
	border-radius: 8px 8px 0 0;
	margin-bottom: 0;
	display: block;
}

/* Phone line should not break each character */
.ah89-card__line--phone {
	font-family: 'Courier New', Courier, monospace;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}



/* ---- Vertical card layout (Variant A): photo on top, content below ---- */

.ah89-card--has-preview {
	display: flex;
	flex-direction: column;
}

.ah89-card--has-preview > .ah89-card__preview-wrap {
	width: 100%;
	margin-bottom: 0;
}

.ah89-card--has-preview > .ah89-card__preview-wrap .ah89-card__preview-img {
	width: 100%;
	height: auto;
	max-height: 220px;
	object-fit: cover;
	border-radius: 8px 8px 0 0;
	margin-bottom: 0;
	display: block;
}

.ah89-card--has-preview > .ah89-card__body-wrap {
	flex: 1;
	min-width: 0;
}

@media (max-width: 782px) {
	.ah89-card--has-preview > .ah89-card__preview-wrap .ah89-card__preview-img {
		max-height: 180px;
	}
}

/* Inline edit forms open as overlay modals — not inserted inside cards */
.ah89-inline-edit-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.7);
	z-index: 9500;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

.ah89-inline-edit-modal {
	background: var(--ah89-bg-card);
	border: 1px solid var(--ah89-border);
	border-radius: 10px;
	width: 520px;
	max-width: 95vw;
	max-height: 85vh;
	overflow-y: auto;
	padding: 24px 20px;
	position: relative;
}

.ah89-inline-edit-modal__title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--ah89-white);
	margin: 0 0 16px;
}

.ah89-inline-edit-modal__close {
	position: absolute;
	top: 12px;
	right: 12px;
	background: none;
	border: none;
	color: var(--ah89-muted);
	font-size: 1.25rem;
	cursor: pointer;
	line-height: 1;
}

.ah89-inline-edit-modal__close:hover {
	color: var(--ah89-white);
}

/* Moderation edit form */
.ah89-mod-edit-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.7);
	z-index: 9500;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ah89-mod-edit-modal {
	background: var(--ah89-bg-card);
	border: 1px solid var(--ah89-border);
	border-radius: 8px;
	width: 480px;
	max-width: 90vw;
	max-height: 80vh;
	overflow-y: auto;
	padding: 24px 20px;
	position: relative;
}

.ah89-mod-edit-modal__title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--ah89-white);
	margin: 0 0 16px;
}

.ah89-mod-edit-modal__close {
	position: absolute;
	top: 10px;
	right: 10px;
	background: none;
	border: none;
	color: var(--ah89-muted);
	font-size: 1.25rem;
	cursor: pointer;
	line-height: 1;
}

.ah89-mod-edit-modal__close:hover {
	color: var(--ah89-white);
}

.ah89-mod-btn--edit {
	background: rgba(0, 229, 255, 0.15);
	color: var(--ah89-accent);
	border: 1px solid rgba(0, 229, 255, 0.3);
}

/* ----------------------------------------------------------------
   Sidebar Moderation visibility
   ---------------------------------------------------------------- */

.ah89-mod-only {
	display: none;
}

.ah89-mod-only.is-visible {
	display: list-item;
}

/* ----------------------------------------------------------------
   Topbar User Avatar (logged-in state)
   ---------------------------------------------------------------- */

.ah89-topbar__user-info {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	padding: 4px 10px;
	border-radius: 4px;
	transition: background 0.15s;
}

.ah89-topbar__user-info:hover {
	background: rgba(0, 229, 255, 0.08);
}

/* Topbar user dropdown menu */
.ah89-topbar__user-wrap {
	position: relative;
}

.ah89-topbar__user-dropdown {
	display: none;
	position: absolute;
	right: 0;
	top: 100%;
	margin-top: 4px;
	background: var(--ah89-bg-card);
	border: 1px solid var(--ah89-border);
	border-radius: 8px;
	z-index: 100;
	min-width: 160px;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.ah89-topbar__user-dropdown.is-open {
	display: block;
}

.ah89-topbar__user-dropdown-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	color: var(--ah89-text);
	font-size: 0.8125rem;
	font-weight: 500;
	cursor: pointer;
	border: none;
	background: none;
	width: 100%;
	text-align: left;
	transition: background 0.15s, color 0.15s;
}

.ah89-topbar__user-dropdown-item:hover {
	background: rgba(0, 229, 255, 0.08);
	color: var(--ah89-accent);
}

.ah89-topbar__user-dropdown-item svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.ah89-topbar__user-dropdown-item--logout {
	border-top: 1px solid var(--ah89-border);
	color: var(--ah89-red);
}

.ah89-topbar__user-dropdown-item--logout:hover {
	color: var(--ah89-red);
	background: rgba(255, 61, 0, 0.08);
}

.ah89-topbar__user-avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1.5px solid var(--ah89-accent);
	object-fit: cover;
}

.ah89-topbar__user-name {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--ah89-text);
	white-space: nowrap;
	max-width: 120px;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (max-width: 782px) {
	.ah89-topbar__user-name {
		display: none;
	}
}

/* ----------------------------------------------------------------
   Scrollbar
   ---------------------------------------------------------------- */

::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

::-webkit-scrollbar-track {
	background: var(--ah89-bg-base);
}

::-webkit-scrollbar-thumb {
	background: var(--ah89-border);
	border-radius: 3px;
}

html {
	scrollbar-color: var(--ah89-border) var(--ah89-bg-base);
	scrollbar-width: thin;
}

/* ----------------------------------------------------------------
   Selection & Focus
   ---------------------------------------------------------------- */

::selection {
	background-color: var(--ah89-accent);
	color: var(--ah89-bg-base);
}

:focus-visible {
	outline: 2px solid var(--ah89-accent);
	outline-offset: 2px;
}

/* ----------------------------------------------------------------
   align:full clamp inside main
   ---------------------------------------------------------------- */

.main-content-area .alignfull {
	margin-left: 0;
	margin-right: 0;
	width: 100%;
	max-width: 100%;
}

/* ----------------------------------------------------------------
   Profile Section
   ---------------------------------------------------------------- */

.ah89-profile__header {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--ah89-border);
}

.ah89-profile__avatar {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	border: 2px solid var(--ah89-accent);
	flex-shrink: 0;
	object-fit: cover;
	cursor: pointer;
	transition: opacity 0.15s, border-color 0.15s;
	position: relative;
}

.ah89-profile__avatar:hover {
	opacity: 0.8;
	border-color: var(--ah89-accent);
}

.ah89-profile__avatar-hint {
	display: none;
	position: absolute;
	bottom: -20px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 0.5625rem;
	color: var(--ah89-muted);
	white-space: nowrap;
	pointer-events: none;
}

.ah89-profile__avatar-wrap {
	position: relative;
	flex-shrink: 0;
}

.ah89-profile__avatar-wrap:hover .ah89-profile__avatar-hint {
	display: block;
}

.ah89-profile__info {
	flex: 1;
	min-width: 0;
}

.ah89-profile__name {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--ah89-white);
	margin: 0 0 3px;
}

.ah89-profile__role-badge {
	display: inline-block;
	font-size: 0.625rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 3px 10px;
	border-radius: 3px;
	background: rgba(0, 229, 255, 0.12);
	color: var(--ah89-accent);
	border: 1px solid rgba(0, 229, 255, 0.3);
}

.ah89-profile__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: flex-start;
	margin-bottom: 20px;
}

.ah89-profile__stat {
	background: var(--ah89-bg-card);
	border: 1px solid var(--ah89-border);
	border-radius: 6px;
	padding: 10px 14px;
	text-align: center;
	min-width: 90px;
	max-width: 130px;
	flex: 0 1 auto;
}

.ah89-profile__stat-value {
	font-family: 'Courier New', Courier, monospace;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--ah89-accent);
	display: block;
	line-height: 1;
	margin-bottom: 3px;
}

.ah89-profile__stat-label {
	font-size: 0.625rem;
	color: var(--ah89-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.ah89-profile__actions {
	display: flex;
	gap: 8px;
	margin-bottom: 20px;
	flex-wrap: wrap;
	padding-top: 16px;
	border-top: 1px solid var(--ah89-border);
}

/* ---- Profile: Two-column layout on PC ---- */

.ah89-profile__layout {
	display: flex;
	gap: 20px;
	margin-bottom: 20px;
}

.ah89-profile__layout-left {
	flex: 1;
	min-width: 0;
}

.ah89-profile__layout-right {
	width: 260px;
	flex-shrink: 0;
}

@media (max-width: 860px) {
	.ah89-profile__layout {
		flex-direction: column;
	}

	.ah89-profile__layout-right {
		width: 100%;
	}
}

/* Profile nav menu */
.ah89-profile__nav {
	list-style: none;
	margin: 0 0 16px;
	padding: 6px;
	background: var(--ah89-bg-card);
	border: 1px solid var(--ah89-border);
	border-radius: 8px;
}

.ah89-profile__nav-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	margin-bottom: 1px;
	border-radius: 6px;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
	color: var(--ah89-muted);
	font-size: 0.8125rem;
	font-weight: 500;
}

.ah89-profile__nav-item:hover {
	background: rgba(0, 229, 255, 0.06);
	color: var(--ah89-accent);
}

.ah89-profile__nav-item.is-active {
	background: rgba(0, 229, 255, 0.1);
	color: var(--ah89-accent);
	border-left: 3px solid var(--ah89-accent);
}

.ah89-profile__nav-item svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	opacity: 0.7;
}

.ah89-profile__nav-item:hover svg {
	opacity: 1;
}

.ah89-profile__nav-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	border-radius: 9px;
	background: var(--ah89-accent);
	color: var(--ah89-bg-base);
	font-size: 0.5rem;
	font-weight: 700;
	padding: 0 5px;
	margin-left: auto;
}

/* Profile sidebar blocks */
.ah89-profile__sidebar-block {
	background: var(--ah89-bg-card);
	border: 1px solid var(--ah89-border);
	border-radius: 8px;
	padding: 14px;
	margin-bottom: 10px;
}

.ah89-profile__sidebar-title {
	font-size: 0.6875rem;
	font-weight: 700;
	color: var(--ah89-white);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 0 0 10px;
}

/* Quick actions grid */
.ah89-profile__quick-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
}

.ah89-profile__quick-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	background: transparent;
	border: 1px solid var(--ah89-border);
	border-radius: 6px;
	color: var(--ah89-muted);
	font-size: 0.625rem;
	font-weight: 600;
	padding: 8px 6px;
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s, background 0.15s;
	text-align: center;
}

.ah89-profile__quick-btn:hover {
	color: var(--ah89-accent);
	border-color: var(--ah89-accent);
	background: rgba(0, 229, 255, 0.06);
}

.ah89-profile__quick-btn svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

/* Badges in profile */
.ah89-profile__badges-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.ah89-profile__badge-item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border-radius: 12px;
	font-size: 0.6875rem;
	font-weight: 600;
	border: 1px solid var(--ah89-border);
	background: var(--ah89-bg-surface);
	color: var(--ah89-text);
}

.ah89-profile__badges-hint {
	font-size: 0.625rem;
	color: var(--ah89-muted);
	margin: 8px 0 0;
	line-height: 1.4;
}

.ah89-profile__email {
	font-size: 0.75rem;
	color: var(--ah89-muted);
	margin: 2px 0 0;
}

.ah89-profile__action-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: var(--ah89-bg-card);
	color: var(--ah89-text);
	border: 1px solid var(--ah89-border);
	border-radius: 4px;
	font-size: 0.6875rem;
	font-weight: 600;
	padding: 8px 14px;
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s;
}

.ah89-profile__action-btn:hover {
	color: var(--ah89-accent);
	border-color: var(--ah89-accent);
}

.ah89-profile__action-btn--primary {
	background: var(--ah89-accent);
	color: var(--ah89-bg-base);
	border-color: var(--ah89-accent);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.ah89-profile__action-btn--primary:hover {
	background: var(--ah89-white);
	border-color: var(--ah89-white);
	color: var(--ah89-bg-base);
}

.ah89-profile__action-btn--logout {
	color: var(--ah89-red);
	border-color: rgba(255, 61, 0, 0.3);
}

.ah89-profile__action-btn--logout:hover {
	color: var(--ah89-white);
	background: var(--ah89-red);
	border-color: var(--ah89-red);
}

.ah89-profile__not-logged {
	text-align: center;
	padding: 60px 20px;
	color: var(--ah89-muted);
	font-size: 0.9375rem;
}

.ah89-profile__not-logged-btn {
	display: inline-block;
	margin-top: 16px;
	background: var(--ah89-accent);
	color: var(--ah89-bg-base);
	border: none;
	border-radius: 4px;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 10px 24px;
	cursor: pointer;
}

/* ---- Section list containers: consistent card width ---- */

.ah89-section__list {
	max-width: 680px;
}

/* ----------------------------------------------------------------
   Feed Section
   ---------------------------------------------------------------- */

.ah89-feed__compose {
	background: var(--ah89-bg-card);
	border: 1px solid var(--ah89-border);
	border-radius: 14px;
	padding: 16px;
	margin-bottom: 24px;
	max-width: 640px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

.ah89-feed__compose textarea {
	width: 100%;
	background: var(--ah89-bg-surface);
	border: 1px solid var(--ah89-border);
	border-radius: 4px;
	color: var(--ah89-text);
	font-size: 0.875rem;
	font-family: system-ui, -apple-system, sans-serif;
	padding: 12px;
	outline: none;
	resize: vertical;
	min-height: 70px;
	transition: border-color 0.15s;
}

.ah89-feed__compose textarea:focus {
	border-color: var(--ah89-accent);
}

.ah89-feed__compose textarea::placeholder {
	color: var(--ah89-muted);
}

.ah89-feed__compose-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 10px;
}

.ah89-feed__compose-hint {
	font-size: 0.6875rem;
	color: var(--ah89-muted);
}

.ah89-feed__compose-btn {
	background: var(--ah89-accent);
	color: var(--ah89-bg-base);
	border: none;
	border-radius: 4px;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 9px 20px;
	cursor: pointer;
	transition: background 0.15s;
}

.ah89-feed__compose-btn:hover {
	background: var(--ah89-white);
}

.ah89-feed__compose-attach {
	display: flex;
	gap: 8px;
	margin-top: 8px;
}

.ah89-feed__attach-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: transparent;
	border: 1px solid var(--ah89-border);
	border-radius: 4px;
	color: var(--ah89-muted);
	font-size: 0.6875rem;
	font-weight: 600;
	padding: 5px 10px;
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s;
}

.ah89-feed__attach-btn:hover {
	color: var(--ah89-accent);
	border-color: var(--ah89-accent);
}

.ah89-feed__attach-btn svg {
	width: 14px;
	height: 14px;
}

.ah89-feed__attach-previews {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-top: 6px;
}

.ah89-feed__attach-previews img,
.ah89-feed__attach-previews video {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 4px;
	border: 1px solid var(--ah89-border);
}

.ah89-feed-card__media {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin: 10px 0 12px;
	justify-content: center;
	padding: 0;
}

.ah89-feed-card__media img {
	width: 100%;
	max-width: 100%;
	max-height: 480px;
	border-radius: 14px;
	cursor: pointer;
	object-fit: cover;
	display: block;
}

/* Multiple images in a single post: constrain to grid */
.ah89-feed-card__media img:not(:only-child) {
	width: calc(50% - 3px);
	max-height: 320px;
	aspect-ratio: 1;
	border-radius: 12px;
}

.ah89-feed-card__media video {
	width: 100%;
	max-height: 480px;
	border-radius: 14px;
	display: block;
}

/* DM media attachments */
.ah89-dm-msg__media {
	margin-top: 6px;
}

.ah89-dm-msg__media img {
	max-width: 200px;
	max-height: 200px;
	border-radius: 6px;
	cursor: pointer;
	object-fit: cover;
}

.ah89-dm-msg__media video {
	max-width: 200px;
	max-height: 200px;
	border-radius: 6px;
}

.ah89-dm__conv-attach {
	display: flex;
	align-items: center;
}

.ah89-dm__attach-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	background: transparent;
	border: 1px solid var(--ah89-border);
	border-radius: 6px;
	color: var(--ah89-muted);
	cursor: pointer;
	flex-shrink: 0;
	transition: color 0.15s, border-color 0.15s;
}

.ah89-dm__attach-btn:hover {
	color: var(--ah89-accent);
	border-color: var(--ah89-accent);
}

.ah89-dm__attach-btn svg {
	width: 16px;
	height: 16px;
}

.ah89-feed__compose-msg {
	font-size: 0.75rem;
	min-height: 1.2em;
	margin: 6px 0 0;
}

.ah89-feed__compose-msg.is-error {
	color: var(--ah89-red);
}

.ah89-feed__compose-msg.is-success {
	color: var(--ah89-green);
}

.ah89-feed__list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: stretch;
	max-width: 640px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.ah89-feed-card {
	background: var(--ah89-bg-card);
	border: 1px solid var(--ah89-border);
	border-radius: 16px;
	padding: 18px 20px;
	transition: border-color 0.2s, box-shadow 0.2s;
	width: 100%;
	overflow: hidden;
}

.ah89-feed-card:hover {
	border-color: rgba(0, 229, 255, 0.3);
	box-shadow: 0 4px 20px rgba(0, 229, 255, 0.06);
}

.ah89-feed-card__header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.ah89-feed-card__avatar {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	flex-shrink: 0;
	object-fit: cover;
	border: 2px solid var(--ah89-border);
}

.ah89-feed-card__author {
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--ah89-white);
}

.ah89-feed-card__date {
	font-size: 0.6875rem;
	color: var(--ah89-muted);
	margin-left: auto;
	white-space: nowrap;
}

.ah89-feed-card__body {
	font-size: 0.9375rem;
	color: var(--ah89-text);
	line-height: 1.65;
	margin: 0 0 10px;
	white-space: pre-wrap;
	word-break: break-word;
	min-height: 2.4em;
	padding: 2px 0;
}

.ah89-feed-card__hashtags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 10px;
}

.ah89-feed-card__hashtag {
	font-size: 0.75rem;
	color: var(--ah89-accent);
	font-weight: 600;
}

.ah89-feed-card__footer {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-top: 12px;
	margin-top: 12px;
	border-top: 1px solid var(--ah89-border);
}

.ah89-feed-card__like-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: transparent;
	border: 1px solid var(--ah89-border);
	border-radius: 4px;
	color: var(--ah89-muted);
	font-size: 0.75rem;
	font-weight: 600;
	padding: 5px 12px;
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s;
}

.ah89-feed-card__like-btn:hover,
.ah89-feed-card__like-btn.is-liked {
	color: var(--ah89-red);
	border-color: var(--ah89-red);
}

.ah89-feed-card__like-btn svg {
	width: 14px;
	height: 14px;
}

.ah89-feed-card__edit-btn,
.ah89-feed-card__delete-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid var(--ah89-border);
	border-radius: 4px;
	color: var(--ah89-muted);
	cursor: pointer;
	padding: 5px 8px;
	font-size: 0.75rem;
	transition: color 0.15s, border-color 0.15s;
	margin-left: 4px;
}

.ah89-feed-card__edit-btn:hover {
	color: var(--ah89-accent);
	border-color: var(--ah89-accent);
}

.ah89-feed-card__delete-btn:hover {
	color: var(--ah89-red);
	border-color: var(--ah89-red);
}

/* ----------------------------------------------------------------
   Chat Section
   ---------------------------------------------------------------- */

.ah89-chat {
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--ah89-topbar-h));
	padding: 0 0 0 0;
}

.ah89-chat__header {
	display: flex;
	align-items: center;
	padding: 16px 20px;
	border-bottom: 1px solid var(--ah89-border);
	flex-shrink: 0;
}

.ah89-chat__title {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--ah89-white);
	margin: 0;
}

.ah89-chat__messages {
	flex: 1;
	overflow-y: auto;
	padding: 16px 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ah89-chat-msg {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 10px 14px;
	background: var(--ah89-bg-card);
	border: 1px solid var(--ah89-border);
	border-radius: 8px;
	position: relative;
	transition: border-color 0.15s;
}

.ah89-chat-msg--own {
	background: #252530;
	border-color: rgba(0, 229, 255, 0.15);
}

.ah89-chat-msg__avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	flex-shrink: 0;
	object-fit: cover;
}

.ah89-chat-msg__body {
	flex: 1;
	min-width: 0;
}

.ah89-chat-msg__author {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--ah89-accent);
	margin-bottom: 2px;
}

.ah89-chat-msg__text {
	font-size: 0.875rem;
	color: var(--ah89-text);
	line-height: 1.5;
	white-space: pre-wrap;
	word-break: break-word;
	margin: 0;
}

.ah89-chat-msg__time {
	font-size: 0.625rem;
	color: var(--ah89-muted);
	margin-top: 4px;
}

.ah89-chat-msg__delete {
	position: absolute;
	top: 6px;
	right: 6px;
	display: none;
	background: transparent;
	border: 1px solid var(--ah89-border);
	border-radius: 4px;
	color: var(--ah89-muted);
	cursor: pointer;
	width: 24px;
	height: 24px;
	align-items: center;
	justify-content: center;
	font-size: 0.75rem;
}

.ah89-chat-msg:hover .ah89-chat-msg__delete {
	display: flex;
}

.ah89-chat-msg__delete:hover {
	color: var(--ah89-red);
	border-color: var(--ah89-red);
}

.ah89-chat__compose {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 12px 20px;
	border-top: 1px solid var(--ah89-border);
	background: var(--ah89-bg-topbar);
	flex-shrink: 0;
	flex-wrap: wrap;
}

.ah89-chat__compose-actions {
	display: flex;
	gap: 4px;
	flex-shrink: 0;
}

.ah89-chat__attach-btn,
.ah89-chat__voice-btn,
.ah89-dm__voice-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	background: transparent;
	border: 1px solid var(--ah89-border);
	border-radius: 6px;
	color: var(--ah89-muted);
	cursor: pointer;
	flex-shrink: 0;
	transition: color 0.15s, border-color 0.15s;
}

.ah89-chat__attach-btn:hover,
.ah89-chat__voice-btn:hover,
.ah89-dm__voice-btn:hover {
	color: var(--ah89-accent);
	border-color: var(--ah89-accent);
}

.ah89-chat__voice-btn.is-recording,
.ah89-dm__voice-btn.is-recording {
	color: var(--ah89-red);
	border-color: var(--ah89-red);
	animation: ah89-pulse 1s infinite;
}

.ah89-chat__attach-btn svg,
.ah89-chat__voice-btn svg,
.ah89-dm__voice-btn svg {
	width: 16px;
	height: 16px;
}

.ah89-chat-msg__media {
	margin-top: 6px;
}

.ah89-chat-msg__media img {
	max-width: 200px;
	max-height: 200px;
	border-radius: 6px;
	cursor: pointer;
	object-fit: cover;
}

.ah89-chat-msg__media video,
.ah89-chat-msg__media audio {
	max-width: 240px;
	border-radius: 6px;
}

.ah89-dm-msg__media audio {
	max-width: 200px;
	border-radius: 6px;
}

.ah89-chat__compose textarea {
	flex: 1;
	background: var(--ah89-bg-surface);
	border: 1px solid var(--ah89-border);
	border-radius: 6px;
	color: var(--ah89-text);
	font-size: 0.875rem;
	font-family: system-ui, -apple-system, sans-serif;
	padding: 10px 12px;
	outline: none;
	resize: none;
	min-height: 42px;
	max-height: 120px;
	transition: border-color 0.15s;
}

.ah89-chat__compose textarea:focus {
	border-color: var(--ah89-accent);
}

.ah89-chat__compose textarea::placeholder {
	color: var(--ah89-muted);
}

.ah89-chat__send-btn {
	background: var(--ah89-accent);
	color: var(--ah89-bg-base);
	border: none;
	border-radius: 6px;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 10px 18px;
	cursor: pointer;
	transition: background 0.15s;
	white-space: nowrap;
}

.ah89-chat__send-btn:hover {
	background: var(--ah89-white);
}

/* ----------------------------------------------------------------
   DM (Private Messages) Section
   ---------------------------------------------------------------- */

.ah89-dm {
	display: flex;
	height: calc(100vh - var(--ah89-topbar-h));
}

.ah89-dm__threads {
	width: 280px;
	flex-shrink: 0;
	border-right: 1px solid var(--ah89-border);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.ah89-dm__threads-header {
	padding: 16px;
	border-bottom: 1px solid var(--ah89-border);
	flex-shrink: 0;
}

.ah89-dm__threads-title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--ah89-white);
	margin: 0;
}

.ah89-dm__threads-list {
	flex: 1;
	overflow-y: auto;
}

.ah89-dm__thread {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--ah89-border);
	cursor: pointer;
	transition: background 0.15s;
}

.ah89-dm__thread:hover,
.ah89-dm__thread.is-active {
	background: rgba(0, 229, 255, 0.06);
}

.ah89-dm__thread-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	flex-shrink: 0;
	object-fit: cover;
}

.ah89-dm__thread-info {
	flex: 1;
	min-width: 0;
}

.ah89-dm__thread-name {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--ah89-white);
	margin-bottom: 2px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ah89-dm__thread-preview {
	font-size: 0.6875rem;
	color: var(--ah89-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ah89-dm__thread-meta {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	flex-shrink: 0;
}

.ah89-dm__thread-time {
	font-size: 0.5625rem;
	color: var(--ah89-muted);
	white-space: nowrap;
}

.ah89-dm__unread-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	border-radius: 9px;
	background: var(--ah89-accent);
	color: var(--ah89-bg-base);
	font-size: 0.5625rem;
	font-weight: 700;
	padding: 0 5px;
}

.ah89-dm__conversation {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ah89-dm__conv-header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--ah89-border);
	flex-shrink: 0;
}

.ah89-dm__conv-back {
	display: none;
	background: transparent;
	border: 1px solid var(--ah89-border);
	border-radius: 4px;
	color: var(--ah89-muted);
	cursor: pointer;
	padding: 4px 8px;
	font-size: 0.75rem;
}

.ah89-dm__conv-back:hover {
	color: var(--ah89-accent);
	border-color: var(--ah89-accent);
}

.ah89-dm__conv-name {
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--ah89-white);
	margin: 0;
}

.ah89-dm__conv-messages {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ah89-dm__conv-empty {
	color: var(--ah89-muted);
	font-size: 0.875rem;
	text-align: center;
	padding: 40px 0;
	margin: 0;
}

.ah89-dm-msg {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	max-width: 75%;
}

.ah89-dm-msg--own {
	align-self: flex-end;
	flex-direction: row-reverse;
}

.ah89-dm-msg__bubble {
	background: var(--ah89-bg-card);
	border: 1px solid var(--ah89-border);
	border-radius: 8px;
	padding: 8px 12px;
}

.ah89-dm-msg--own .ah89-dm-msg__bubble {
	background: #252530;
	border-color: rgba(0, 229, 255, 0.2);
}

.ah89-dm-msg__delete {
	display: none;
	background: transparent;
	border: 1px solid var(--ah89-border);
	border-radius: 4px;
	color: var(--ah89-muted);
	cursor: pointer;
	width: 22px;
	height: 22px;
	align-items: center;
	justify-content: center;
	font-size: 0.6875rem;
	flex-shrink: 0;
	align-self: flex-start;
	margin-top: 4px;
	transition: color 0.15s, border-color 0.15s;
}

.ah89-dm-msg:hover .ah89-dm-msg__delete {
	display: flex;
}

.ah89-dm-msg__delete:hover {
	color: var(--ah89-red);
	border-color: var(--ah89-red);
}

.ah89-dm-msg__text {
	font-size: 0.8125rem;
	color: var(--ah89-text);
	line-height: 1.5;
	white-space: pre-wrap;
	word-break: break-word;
	margin: 0;
}

.ah89-dm-msg__time {
	font-size: 0.5625rem;
	color: var(--ah89-muted);
	margin-top: 4px;
}

.ah89-dm__conv-compose {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 12px 16px;
	border-top: 1px solid var(--ah89-border);
	background: var(--ah89-bg-topbar);
	flex-shrink: 0;
	flex-wrap: wrap;
}

.ah89-dm__conv-compose textarea {
	flex: 1;
	background: var(--ah89-bg-surface);
	border: 1px solid var(--ah89-border);
	border-radius: 6px;
	color: var(--ah89-text);
	font-size: 0.875rem;
	font-family: system-ui, -apple-system, sans-serif;
	padding: 10px 12px;
	outline: none;
	resize: vertical;
	min-height: 42px;
	max-height: 160px;
	transition: border-color 0.15s;
}

.ah89-dm__conv-compose textarea:focus {
	border-color: var(--ah89-accent);
}

.ah89-dm__conv-compose textarea::placeholder {
	color: var(--ah89-muted);
}

.ah89-dm__conv-send {
	background: var(--ah89-accent);
	color: var(--ah89-bg-base);
	border: none;
	border-radius: 6px;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	padding: 9px 16px;
	cursor: pointer;
	white-space: nowrap;
}

.ah89-dm__conv-send:hover {
	background: var(--ah89-white);
}

/* Topbar DM badge */
.ah89-topbar__dm-badge {
	position: absolute;
	top: 2px;
	right: 2px;
	min-width: 16px;
	height: 16px;
	border-radius: 8px;
	background: var(--ah89-accent);
	color: var(--ah89-bg-base);
	font-size: 0.5rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 4px;
	line-height: 1;
}

.ah89-topbar__dm-badge.is-hidden {
	display: none;
}

/* Topbar Chat badge */
.ah89-topbar__chat-badge {
	position: absolute;
	top: 2px;
	right: 2px;
	min-width: 16px;
	height: 16px;
	border-radius: 8px;
	background: var(--ah89-green);
	color: var(--ah89-bg-base);
	font-size: 0.5rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 4px;
	line-height: 1;
}

.ah89-topbar__chat-badge.is-hidden {
	display: none;
}

/* DM Mobile: single column */
@media (max-width: 782px) {
	.ah89-dm {
		flex-direction: column;
	}

	.ah89-dm__threads {
		width: 100%;
		border-right: none;
		border-bottom: 1px solid var(--ah89-border);
	}

	.ah89-dm__threads.is-hidden {
		display: none;
	}

	.ah89-dm__conversation.is-hidden {
		display: none;
	}

	.ah89-dm__conv-back {
		display: inline-flex;
	}

	.ah89-chat {
		height: calc(100vh - var(--ah89-topbar-h) - var(--ah89-mobile-nav-h));
	}

	.ah89-dm {
		height: calc(100vh - var(--ah89-topbar-h) - var(--ah89-mobile-nav-h));
	}
}


/* ----------------------------------------------------------------
   Members Section
   ---------------------------------------------------------------- */

.ah89-members {
	padding: 24px 20px;
	min-height: calc(100vh - var(--ah89-topbar-h));
}

@media (min-width: 783px) {
	.ah89-members {
		padding: 24px 40px;
	}
}

.ah89-members__search {
	display: flex;
	align-items: center;
	background: var(--ah89-bg-card);
	border: 1px solid var(--ah89-border);
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: 20px;
	max-width: 400px;
}

.ah89-members__search input {
	flex: 1;
	background: transparent;
	border: none;
	color: var(--ah89-text);
	font-size: 0.8125rem;
	padding: 10px 14px;
	outline: none;
}

.ah89-members__search input::placeholder {
	color: var(--ah89-muted);
}

.ah89-members__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 14px;
}

@media (max-width: 600px) {
	.ah89-members__grid {
		grid-template-columns: 1fr;
	}
}

.ah89-member-card {
	background: var(--ah89-bg-card);
	border: 1px solid var(--ah89-border);
	border-radius: 8px;
	padding: 20px 16px;
	text-align: center;
	transition: border-color 0.15s;
}

.ah89-member-card:hover {
	border-color: var(--ah89-accent);
}

.ah89-member-card__avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: 2px solid var(--ah89-border);
	object-fit: cover;
	margin-bottom: 10px;
}

.ah89-member-card__name {
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--ah89-white);
	margin: 0 0 4px;
}

.ah89-member-card__role {
	display: inline-block;
	font-size: 0.5625rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 2px 8px;
	border-radius: 3px;
	background: rgba(0, 229, 255, 0.12);
	color: var(--ah89-accent);
	border: 1px solid rgba(0, 229, 255, 0.3);
	margin-bottom: 8px;
}

.ah89-member-card__info {
	font-size: 0.6875rem;
	color: var(--ah89-muted);
	margin: 2px 0;
}

.ah89-member-card__msg-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 10px;
	background: transparent;
	border: 1px solid var(--ah89-border);
	border-radius: 4px;
	color: var(--ah89-muted);
	font-size: 0.6875rem;
	font-weight: 600;
	padding: 6px 14px;
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s;
}

.ah89-member-card__msg-btn:hover {
	color: var(--ah89-accent);
	border-color: var(--ah89-accent);
}

.ah89-members__load-more {
	display: block;
	margin: 20px auto 0;
	background: var(--ah89-bg-card);
	border: 1px solid var(--ah89-border);
	border-radius: 4px;
	color: var(--ah89-text);
	font-size: 0.75rem;
	font-weight: 600;
	padding: 10px 24px;
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s;
}

.ah89-members__load-more:hover {
	color: var(--ah89-accent);
	border-color: var(--ah89-accent);
}

/* ----------------------------------------------------------------
   Notifications Section
   ---------------------------------------------------------------- */

.ah89-notifications {
	padding: 24px 20px;
	min-height: calc(100vh - var(--ah89-topbar-h));
	max-width: 800px;
}

@media (min-width: 783px) {
	.ah89-notifications {
		padding: 24px 40px;
	}
}

.ah89-notifications__mark-all {
	background: transparent;
	border: 1px solid var(--ah89-border);
	border-radius: 4px;
	color: var(--ah89-muted);
	font-size: 0.6875rem;
	font-weight: 600;
	padding: 7px 14px;
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s;
}

.ah89-notifications__mark-all:hover {
	color: var(--ah89-accent);
	border-color: var(--ah89-accent);
}

.ah89-notif-card {
	background: var(--ah89-bg-card);
	border: 1px solid var(--ah89-border);
	border-radius: 8px;
	padding: 14px 16px;
	margin-bottom: 10px;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	transition: border-color 0.15s;
}

.ah89-notif-card--unread {
	border-left: 3px solid var(--ah89-accent);
}

.ah89-notif-card__icon {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--ah89-bg-surface);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--ah89-accent);
}

.ah89-notif-card__icon svg {
	width: 16px;
	height: 16px;
}

.ah89-notif-card__body {
	flex: 1;
	min-width: 0;
}

.ah89-notif-card__text {
	font-size: 0.8125rem;
	color: var(--ah89-text);
	margin: 0 0 4px;
	line-height: 1.4;
}

.ah89-notif-card__time {
	font-size: 0.625rem;
	color: var(--ah89-muted);
}

/* Topbar notification badge */
.ah89-topbar__notif-badge {
	position: absolute;
	top: 2px;
	right: 2px;
	min-width: 16px;
	height: 16px;
	border-radius: 8px;
	background: var(--ah89-red);
	color: var(--ah89-white);
	font-size: 0.5rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 4px;
	line-height: 1;
}

.ah89-topbar__notif-badge.is-hidden {
	display: none;
}

/* Service Section — moved to subdomain service.autohouse89.ru */

.ah89-mod-badge-card__type {
	font-size: 0.625rem;
	color: var(--ah89-muted);
	margin-left: 2px;
}

/* Required field indicator */
.ah89-form__label--required::after {
	content: " *";
	color: var(--ah89-red);
	font-weight: 700;
}


/* ----------------------------------------------------------------
   Gallery Section
   ---------------------------------------------------------------- */

.ah89-gallery__tabs {
	display: flex;
	gap: 0;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--ah89-border);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	flex-wrap: nowrap;
}

.ah89-gallery__tabs::-webkit-scrollbar {
	display: none;
}

.ah89-gallery__tab {
	flex: 0 0 auto;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	color: var(--ah89-muted);
	font-size: 0.8125rem;
	font-weight: 600;
	padding: 8px 16px;
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s;
	white-space: nowrap;
}

.ah89-gallery__tab.is-active {
	color: var(--ah89-accent);
	border-bottom-color: var(--ah89-accent);
}

.ah89-gallery__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 12px;
}

@media (max-width: 600px) {
	.ah89-gallery__grid {
		grid-template-columns: 1fr;
	}
}

.ah89-gallery-card {
	background: var(--ah89-bg-card);
	border: 1px solid var(--ah89-border);
	border-radius: 8px;
	overflow: hidden;
	transition: border-color 0.15s;
	position: relative;
}

.ah89-gallery-card:hover {
	border-color: var(--ah89-accent);
}

.ah89-gallery-card__img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	display: block;
	cursor: pointer;
	background: var(--ah89-bg-base);
}

.ah89-gallery-card__info {
	padding: 10px 12px;
}

.ah89-gallery-card__author {
	font-size: 0.6875rem;
	color: var(--ah89-muted);
	margin: 0 0 4px;
}

.ah89-gallery-card__desc {
	font-size: 0.75rem;
	color: var(--ah89-text);
	margin: 0 0 6px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ah89-gallery-card__footer {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ah89-gallery-card__like-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: transparent;
	border: 1px solid var(--ah89-border);
	border-radius: 4px;
	color: var(--ah89-muted);
	font-size: 0.6875rem;
	font-weight: 600;
	padding: 3px 8px;
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s;
}

.ah89-gallery-card__like-btn:hover,
.ah89-gallery-card__like-btn.is-liked {
	color: var(--ah89-red);
	border-color: var(--ah89-red);
}

.ah89-gallery-card__like-btn svg {
	width: 12px;
	height: 12px;
}

.ah89-gallery-card__delete-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	background: transparent;
	border: 1px solid var(--ah89-border);
	border-radius: 4px;
	color: var(--ah89-muted);
	cursor: pointer;
	font-size: 0.75rem;
	margin-left: auto;
	transition: color 0.15s, border-color 0.15s;
}

.ah89-gallery-card__delete-btn:hover {
	color: var(--ah89-red);
	border-color: var(--ah89-red);
}

.ah89-gallery-card__badge {
	position: absolute;
	top: 8px;
	left: 8px;
	display: inline-block;
	font-size: 0.5625rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 2px 6px;
	border-radius: 3px;
	background: rgba(255, 140, 0, 0.85);
	color: #fff;
	z-index: 2;
}

/* ----------------------------------------------------------------
   Lightbox
   ---------------------------------------------------------------- */

.ah89-lightbox {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.95);
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ah89-lightbox__img {
	max-width: 90%;
	max-height: 85vh;
	object-fit: contain;
	z-index: 100001;
	border-radius: 4px;
}

.ah89-lightbox__close {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 100002;
	background: transparent;
	border: none;
	color: #fff;
	font-size: 32px;
	cursor: pointer;
	padding: 10px;
	line-height: 1;
	pointer-events: auto;
}

.ah89-lightbox__close:hover {
	color: var(--ah89-accent);
}

.ah89-lightbox__prev,
.ah89-lightbox__next {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	z-index: 100002;
	background: transparent;
	border: none;
	color: #fff;
	font-size: 40px;
	cursor: pointer;
	padding: 20px;
	pointer-events: auto;
	line-height: 1;
}

.ah89-lightbox__prev {
	left: 10px;
}

.ah89-lightbox__next {
	right: 10px;
}

.ah89-lightbox__prev:hover,
.ah89-lightbox__next:hover {
	color: var(--ah89-accent);
}

/* ----------------------------------------------------------------
   Videos Section
   ---------------------------------------------------------------- */

.ah89-videos__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
}

@media (max-width: 600px) {
	.ah89-videos__grid {
		grid-template-columns: 1fr;
	}
}

.ah89-video-card {
	background: var(--ah89-bg-card);
	border: 1px solid var(--ah89-border);
	border-radius: 8px;
	overflow: hidden;
	transition: border-color 0.15s;
	position: relative;
}

.ah89-video-card:hover {
	border-color: var(--ah89-accent);
}

.ah89-video-card__preview {
	width: 100%;
	aspect-ratio: 16/9;
	background: var(--ah89-bg-base);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	position: relative;
}

.ah89-video-card__play-icon {
	width: 48px;
	height: 48px;
	color: var(--ah89-accent);
	opacity: 0.85;
}

.ah89-video-card__player {
	width: 100%;
	aspect-ratio: 16/9;
	display: none;
	background: #000;
}

.ah89-video-card__player video {
	width: 100%;
	height: 100%;
	outline: none;
}

.ah89-video-card__info {
	padding: 12px;
}

.ah89-video-card__title {
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--ah89-white);
	margin: 0 0 4px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ah89-video-card__meta {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 0.6875rem;
	color: var(--ah89-muted);
	margin-bottom: 8px;
}

.ah89-video-card__footer {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ah89-video-card__like-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: transparent;
	border: 1px solid var(--ah89-border);
	border-radius: 4px;
	color: var(--ah89-muted);
	font-size: 0.6875rem;
	font-weight: 600;
	padding: 3px 8px;
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s;
}

.ah89-video-card__like-btn:hover,
.ah89-video-card__like-btn.is-liked {
	color: var(--ah89-red);
	border-color: var(--ah89-red);
}

.ah89-video-card__like-btn svg {
	width: 12px;
	height: 12px;
}

.ah89-video-card__delete-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	background: transparent;
	border: 1px solid var(--ah89-border);
	border-radius: 4px;
	color: var(--ah89-muted);
	cursor: pointer;
	font-size: 0.75rem;
	margin-left: auto;
	transition: color 0.15s, border-color 0.15s;
}

.ah89-video-card__delete-btn:hover {
	color: var(--ah89-red);
	border-color: var(--ah89-red);
}

.ah89-video-card__badge {
	position: absolute;
	top: 8px;
	left: 8px;
	display: inline-block;
	font-size: 0.5625rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 2px 6px;
	border-radius: 3px;
	background: rgba(255, 140, 0, 0.85);
	color: #fff;
	z-index: 2;
}

/* ----------------------------------------------------------------
   Settings Section
   ---------------------------------------------------------------- */

.ah89-settings {
	max-width: 480px;
}

.ah89-settings__subtitle {
	font-size: 1rem;
	font-weight: 700;
	color: var(--ah89-white);
	margin: 0 0 16px;
}

.ah89-password-field {
	position: relative;
	display: flex;
	align-items: center;
}

.ah89-password-field input {
	padding-right: 40px;
}

.ah89-password-toggle {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: none;
	color: var(--ah89-muted);
	cursor: pointer;
	padding: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ah89-password-toggle:hover {
	color: var(--ah89-accent);
}

.ah89-password-toggle svg {
	width: 18px;
	height: 18px;
}

.ah89-password-toggle.is-visible svg {
	opacity: 0.5;
}

/* File input styling */
.ah89-form input[type="file"] {
	padding: 8px;
	font-size: 0.75rem;
}

.ah89-form input[type="file"]::file-selector-button {
	background: var(--ah89-accent);
	color: var(--ah89-bg-base);
	border: none;
	border-radius: 3px;
	padding: 6px 12px;
	font-size: 0.6875rem;
	font-weight: 700;
	cursor: pointer;
	margin-right: 8px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.ah89-form input[type="file"]::file-selector-button:hover {
	background: var(--ah89-white);
}

/* ----------------------------------------------------------------
   Photo Upload Preview
   ---------------------------------------------------------------- */

.ah89-photo-upload {
	margin-bottom: 12px;
}

.ah89-photo-upload__label {
	font-size: 0.6875rem;
	font-family: 'Courier New', Courier, monospace;
	font-weight: 600;
	color: var(--ah89-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	display: block;
	margin-bottom: 6px;
}

.ah89-photo-upload__previews {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 8px;
}

.ah89-photo-upload__thumb {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 4px;
	border: 1px solid var(--ah89-border);
}

.ah89-photo-upload__status {
	font-size: 0.6875rem;
	color: var(--ah89-muted);
	margin-top: 4px;
}

.ah89-photo-upload__status.is-error {
	color: var(--ah89-red);
}

.ah89-photo-upload__status.is-success {
	color: var(--ah89-green);
}

/* ----------------------------------------------------------------
   Moderation Section
   ---------------------------------------------------------------- */

.ah89-moderation {
	padding: 24px 20px;
	min-height: calc(100vh - var(--ah89-topbar-h));
}

@media (min-width: 783px) {
	.ah89-moderation {
		padding: 24px 40px;
	}
}

.ah89-moderation__dashboard {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-bottom: 24px;
}

@media (max-width: 600px) {
	.ah89-moderation__dashboard {
		grid-template-columns: repeat(2, 1fr);
	}
}

.ah89-mod-counter {
	background: var(--ah89-bg-card);
	border: 1px solid var(--ah89-border);
	border-radius: 8px;
	padding: 16px;
	text-align: center;
	transition: border-color 0.15s;
}

.ah89-mod-counter:hover {
	border-color: var(--ah89-accent);
}

.ah89-mod-counter__value {
	font-family: 'Courier New', Courier, monospace;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--ah89-accent);
	display: block;
	margin-bottom: 4px;
}

.ah89-mod-counter__label {
	font-size: 0.6875rem;
	color: var(--ah89-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.ah89-moderation__tabs {
	display: flex;
	gap: 0;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--ah89-border);
	overflow-x: auto;
	flex-wrap: nowrap;
}

.ah89-moderation__tab {
	flex: 0 0 auto;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	color: var(--ah89-muted);
	font-size: 0.75rem;
	font-weight: 600;
	padding: 8px 14px;
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s;
	white-space: nowrap;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.ah89-moderation__tab.is-active {
	color: var(--ah89-accent);
	border-bottom-color: var(--ah89-accent);
}

.ah89-mod-item {
	background: var(--ah89-bg-card);
	border: 1px solid var(--ah89-border);
	border-radius: 8px;
	padding: 14px 16px;
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.ah89-mod-item__info {
	flex: 1;
	min-width: 0;
}

.ah89-mod-item__title {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ah89-white);
	margin: 0 0 2px;
}

.ah89-mod-item__meta {
	font-size: 0.6875rem;
	color: var(--ah89-muted);
}

.ah89-mod-item__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 12px;
}

.ah89-mod-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 0 10px;
	height: 28px;
	white-space: nowrap;
	border-radius: 3px;
	border: none;
	cursor: pointer;
	transition: opacity 0.15s;
}

.ah89-mod-btn:hover {
	opacity: 0.85;
}

.ah89-mod-btn--approve {
	background: var(--ah89-green);
	color: var(--ah89-bg-base);
}

.ah89-mod-btn--reject {
	background: rgba(255, 140, 0, 0.8);
	color: var(--ah89-bg-base);
}

.ah89-mod-btn--delete {
	background: var(--ah89-red);
	color: var(--ah89-white);
}

.ah89-mod-users {
	margin-top: 24px;
}

.ah89-mod-users__title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--ah89-white);
	margin: 0 0 16px;
}

.ah89-mod-user-row {
	background: var(--ah89-bg-card);
	border: 1px solid var(--ah89-border);
	border-radius: 8px;
	padding: 10px 14px;
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.ah89-mod-user-row__avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	flex-shrink: 0;
	object-fit: cover;
}

.ah89-mod-user-row__info {
	flex: 1;
	min-width: 0;
}

.ah89-mod-user-row__name {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--ah89-white);
}

.ah89-mod-user-row__meta {
	font-size: 0.625rem;
	color: var(--ah89-muted);
}

.ah89-mod-user-row select {
	background: var(--ah89-bg-surface);
	border: 1px solid var(--ah89-border);
	border-radius: 4px;
	color: var(--ah89-text);
	font-size: 0.6875rem;
	padding: 5px 8px;
	cursor: pointer;
}

.ah89-mod-user-row__save-btn {
	display: inline-flex;
	align-items: center;
	background: transparent;
	border: 1px solid var(--ah89-accent);
	border-radius: 3px;
	color: var(--ah89-accent);
	font-size: 0.625rem;
	font-weight: 700;
	text-transform: uppercase;
	padding: 4px 10px;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
	white-space: nowrap;
}

.ah89-mod-user-row__save-btn:hover {
	background: var(--ah89-accent);
	color: var(--ah89-bg-base);
}

.ah89-mod-user-row__role-msg {
	font-size: 0.5625rem;
	margin: 0;
	min-height: 1em;
}

.ah89-mod-user-row__role-msg.is-success {
	color: var(--ah89-green);
}

.ah89-mod-user-row__role-msg.is-error {
	color: var(--ah89-red);
}

.ah89-mod-user-row__block-btn {
	display: inline-flex;
	align-items: center;
	background: rgba(255, 61, 0, 0.08);
	border: 1px solid rgba(255, 61, 0, 0.3);
	border-radius: 3px;
	color: #ff3d00;
	font-size: 0.625rem;
	font-weight: 700;
	text-transform: uppercase;
	padding: 4px 8px;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}

.ah89-mod-user-row__block-btn:hover {
	background: var(--ah89-red);
	color: var(--ah89-white);
}

.ah89-mod-user-row__block-btn--unblock {
	background: rgba(0, 200, 83, 0.1);
	border: 1px solid rgba(0, 200, 83, 0.3);
	color: #00c853;
}

.ah89-mod-user-row__block-btn--unblock:hover {
	background: var(--ah89-green);
	color: var(--ah89-bg-base);
}

.ah89-mod-plugin-msg {
	background: var(--ah89-bg-card);
	border: 1px solid var(--ah89-border);
	border-radius: 8px;
	padding: 40px 20px;
	text-align: center;
	color: var(--ah89-muted);
	font-size: 0.875rem;
	line-height: 1.6;
}

/* Service Works Settings — moved to subdomain service.autohouse89.ru */

/* ---- Moderation: Badges ---- */

.ah89-mod-badges-section {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--ah89-border);
}

.ah89-mod-badges-section__title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--ah89-white);
	margin: 0 0 16px;
}

.ah89-mod-badges-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0;
}

.ah89-mod-badge-card {
	padding: 8px 16px;
	border-radius: 20px;
	font-size: 0.8125rem;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid var(--ah89-border);
	background: var(--ah89-bg-card);
	color: var(--ah89-text);
}

.ah89-mod-badge-card__icon {
	font-size: 1rem;
}

.ah89-mod-badge-card__status {
	font-size: 0.5625rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 2px 6px;
	border-radius: 3px;
	margin-left: 4px;
}

.ah89-mod-badge-card__status--active {
	background: rgba(0, 200, 83, 0.15);
	color: var(--ah89-green);
}

.ah89-mod-badge-card__status--inactive {
	background: rgba(255, 61, 0, 0.15);
	color: var(--ah89-red);
}

.ah89-mod-badge-form {
	background: var(--ah89-bg-card);
	border: 1px solid var(--ah89-border);
	border-radius: 8px;
	padding: 16px;
	margin-top: 12px;
}

.ah89-mod-badge-assign {
	background: var(--ah89-bg-card);
	border: 1px solid var(--ah89-border);
	border-radius: 8px;
	padding: 16px;
	margin-top: 12px;
	display: flex;
	align-items: flex-end;
	gap: 10px;
	flex-wrap: wrap;
}

/* ---- Moderation: Block/Unblock user ---- */

.ah89-mod-user-row__block-btn--blocked {
	background: var(--ah89-red);
	color: var(--ah89-white);
	border-color: var(--ah89-red);
}

.ah89-mod-user-row__unblock-btn {
	display: inline-flex;
	align-items: center;
	background: transparent;
	border: 1px solid var(--ah89-green);
	border-radius: 3px;
	color: var(--ah89-green);
	font-size: 0.625rem;
	font-weight: 700;
	text-transform: uppercase;
	padding: 4px 8px;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}

.ah89-mod-user-row__unblock-btn:hover {
	background: var(--ah89-green);
	color: var(--ah89-bg-base);
}

.ah89-mod-user-row__blocked-badge {
	font-size: 0.5625rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 2px 6px;
	border-radius: 3px;
	background: rgba(255, 61, 0, 0.15);
	color: var(--ah89-red);
	border: 1px solid rgba(255, 61, 0, 0.3);
}

.ah89-mod-section-subtitle {
	font-size: 1rem;
	font-weight: 700;
	color: var(--ah89-white);
	margin: 24px 0 12px;
	padding-top: 16px;
	border-top: 1px solid var(--ah89-border);
}

/* Registration management */
.ah89-mod-registration {
	background: var(--ah89-bg-card);
	border: 1px solid var(--ah89-border);
	border-radius: 8px;
	padding: 20px;
	margin: 16px 0;
}

.ah89-mod-registration__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}

.ah89-mod-registration__label {
	font-size: 0.875rem;
	color: var(--ah89-text);
	font-weight: 600;
}

.ah89-mod-registration__toggle {
	position: relative;
	width: 48px;
	height: 26px;
	background: var(--ah89-border);
	border-radius: 13px;
	cursor: pointer;
	border: none;
	transition: background 0.2s;
	flex-shrink: 0;
}

.ah89-mod-registration__toggle.is-active {
	background: var(--ah89-accent);
}

.ah89-mod-registration__toggle::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--ah89-white);
	transition: transform 0.2s;
}

.ah89-mod-registration__toggle.is-active::after {
	transform: translateX(22px);
}

.ah89-mod-registration__invite {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.ah89-mod-registration__invite-url {
	flex: 1;
	min-width: 200px;
	background: var(--ah89-bg-surface);
	border: 1px solid var(--ah89-border);
	border-radius: 4px;
	color: var(--ah89-accent);
	font-family: 'Courier New', Courier, monospace;
	font-size: 0.75rem;
	padding: 8px 10px;
	word-break: break-all;
	overflow-wrap: break-word;
	white-space: normal;
}

.ah89-mod-registration__copy-btn {
	background: transparent;
	border: 1px solid var(--ah89-accent);
	border-radius: 4px;
	color: var(--ah89-accent);
	font-size: 0.6875rem;
	font-weight: 600;
	padding: 7px 12px;
	cursor: pointer;
	transition: background 0.15s;
	white-space: nowrap;
}

.ah89-mod-registration__copy-btn:hover {
	background: rgba(0, 229, 255, 0.1);
}

/* Content carousel */
.ah89-carousel {
	margin-bottom: 24px;
	overflow: hidden;
	position: relative;
	max-width: 100%;
	box-sizing: border-box;
}

.ah89-carousel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.ah89-carousel__title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--ah89-white);
	margin: 0;
}

.ah89-carousel__nav {
	display: flex;
	gap: 4px;
}

.ah89-carousel__nav-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: transparent;
	border: none;
	border-radius: 0;
	color: var(--ah89-accent);
	cursor: pointer;
	transition: color 0.15s, text-shadow 0.15s, transform 0.15s;
	font-size: 1.5rem;
	font-weight: 700;
	text-shadow: 0 0 8px rgba(0, 229, 255, 0.5);
}

.ah89-carousel__nav-btn:hover {
	color: var(--ah89-white);
	text-shadow: 0 0 14px rgba(0, 229, 255, 0.8), 0 0 28px rgba(0, 229, 255, 0.4);
	transform: scale(1.15);
}

.ah89-carousel__track {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 4px 0;
}

.ah89-carousel__track::-webkit-scrollbar {
	display: none;
}

.ah89-carousel__item {
	flex: 0 0 260px;
	background: var(--ah89-bg-card);
	border: 1px solid var(--ah89-border);
	border-radius: 8px;
	padding: 14px 16px;
	cursor: pointer;
	transition: border-color 0.15s, transform 0.15s;
}

.ah89-carousel__item:hover {
	border-color: var(--ah89-accent);
	transform: translateY(-2px);
	z-index: 2;
}

.ah89-carousel__item-tag {
	font-size: 0.5625rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 2px 8px;
	border-radius: 3px;
	background: rgba(0, 229, 255, 0.12);
	color: var(--ah89-accent);
	border: 1px solid rgba(0, 229, 255, 0.3);
	display: inline-block;
	margin-bottom: 8px;
}

.ah89-carousel__item-title {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ah89-white);
	margin: 0 0 4px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ah89-carousel__item-meta {
	font-size: 0.6875rem;
	color: var(--ah89-muted);
	margin: 0;
}

.ah89-carousel__item--has-thumb {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.ah89-carousel__item-thumb {
	width: 56px;
	height: 56px;
	border-radius: 6px;
	object-fit: cover;
	flex-shrink: 0;
	border: 1px solid var(--ah89-border);
}

.ah89-carousel__item-content {
	flex: 1;
	min-width: 0;
}

@media (max-width: 600px) {
	.ah89-carousel__item {
		flex: 0 0 220px;
	}
}

/* Clickable avatars and usernames everywhere on the site */
[data-ah89-user-click] {
	cursor: pointer;
	transition: opacity 0.15s;
}

/* ---- User Mini-Profile Popover ---- */

.ah89-user-popover {
	background: var(--ah89-bg-card);
	border: 1px solid var(--ah89-border);
	border-radius: 12px;
	padding: 16px;
	width: 280px;
	max-width: 90vw;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
	animation: ah89-popover-in 0.15s ease-out;
}

@keyframes ah89-popover-in {
	from { opacity: 0; transform: translateY(-8px); }
	to { opacity: 1; transform: translateY(0); }
}

.ah89-user-popover__loading {
	color: var(--ah89-muted);
	font-size: 0.8125rem;
	text-align: center;
	padding: 12px 0;
}

.ah89-user-popover__header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
}

.ah89-user-popover__avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 2px solid var(--ah89-accent);
	object-fit: cover;
	flex-shrink: 0;
}

.ah89-user-popover__info {
	flex: 1;
	min-width: 0;
}

.ah89-user-popover__name {
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--ah89-white);
	margin: 0 0 2px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ah89-user-popover__role {
	display: inline-block;
	font-size: 0.5625rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 2px 8px;
	border-radius: 3px;
	background: rgba(0, 229, 255, 0.12);
	color: var(--ah89-accent);
	border: 1px solid rgba(0, 229, 255, 0.3);
	margin-right: 6px;
}

.ah89-user-popover__reg {
	font-size: 0.625rem;
	color: var(--ah89-muted);
}

.ah89-user-popover__status {
	margin-bottom: 6px;
}

.ah89-user-popover__city {
	font-size: 0.6875rem;
	color: var(--ah89-muted);
	margin: 0 0 10px;
}

.ah89-user-popover__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding-top: 10px;
	border-top: 1px solid var(--ah89-border);
}

.ah89-user-popover__btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: transparent;
	border: 1px solid var(--ah89-border);
	border-radius: 4px;
	color: var(--ah89-muted);
	font-size: 0.6875rem;
	font-weight: 600;
	padding: 6px 12px;
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s, background 0.15s;
	white-space: nowrap;
}

.ah89-user-popover__btn:hover {
	color: var(--ah89-accent);
	border-color: var(--ah89-accent);
	background: rgba(0, 229, 255, 0.06);
}

.ah89-user-popover__btn--profile {
	color: var(--ah89-accent);
	border-color: rgba(0, 229, 255, 0.3);
}

.ah89-user-popover__btn--write {
	color: var(--ah89-text);
}

@media (max-width: 480px) {
	.ah89-user-popover {
		width: calc(100vw - 24px);
		left: 12px !important;
	}
}

.ah89-feed-card__avatar[data-ah89-user-click]:hover {
	opacity: 0.8;
	outline: 2px solid var(--ah89-accent);
	outline-offset: 1px;
	border-radius: 50%;
}

.ah89-feed-card__author[data-ah89-user-click]:hover {
	color: var(--ah89-accent);
}

.ah89-online-widget__user[data-ah89-user-click]:hover {
	background: rgba(0, 229, 255, 0.08);
	border-radius: 16px;
}

.ah89-chat-msg__author[data-ah89-user-click]:hover,
.ah89-dm__thread-name[data-ah89-user-click]:hover {
	text-decoration: underline;
	color: var(--ah89-accent);
}

.ah89-chat-msg__avatar[data-ah89-user-click]:hover {
	opacity: 0.8;
	outline: 2px solid var(--ah89-accent);
	outline-offset: 1px;
	border-radius: 50%;
}

.ah89-member-card__name[data-ah89-user-click]:hover,
.ah89-member-card__avatar[data-ah89-user-click]:hover {
	opacity: 0.8;
}

/* Online widget */
.ah89-online-widget {
	background: var(--ah89-bg-card);
	border: 1px solid var(--ah89-border);
	border-radius: 10px;
	padding: 16px;
	margin-bottom: 12px;
	min-height: 100px;
}

.ah89-online-widget__header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
}

.ah89-online-widget__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ah89-green);
	animation: ah89-pulse 2s infinite;
}

@keyframes ah89-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.4; }
}

.ah89-online-widget__title {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--ah89-white);
	margin: 0;
}

.ah89-online-widget__count {
	font-family: 'Courier New', Courier, monospace;
	font-size: 0.75rem;
	color: var(--ah89-green);
	margin-left: auto;
}

.ah89-online-widget__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.ah89-online-widget__user {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px 8px;
	background: var(--ah89-bg-surface);
	border-radius: 16px;
	font-size: 0.6875rem;
	color: var(--ah89-text);
}

.ah89-online-widget__user img {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	object-fit: cover;
}

/* Feed layout with sidebar widget on desktop */
.ah89-feed-layout {
	display: flex;
	gap: 0;
	align-items: flex-start;
	max-width: 100%;
	overflow-x: hidden;
}

.ah89-feed-layout__main {
	flex: 1;
	min-width: 0;
	padding-right: 24px;
}

.ah89-feed-layout__sidebar {
	width: 320px;
	flex-shrink: 0;
	position: sticky;
	top: var(--ah89-topbar-h);
	align-self: flex-start;
	height: calc(100vh - var(--ah89-topbar-h));
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 0;
	background: var(--ah89-bg-sidebar);
	border-left: 1px solid var(--ah89-border);
	padding: 16px;
}

/* Scrollbar for sidebar widgets */
.ah89-feed-layout__sidebar::-webkit-scrollbar {
	width: 4px;
}

.ah89-feed-layout__sidebar::-webkit-scrollbar-track {
	background: transparent;
}

.ah89-feed-layout__sidebar::-webkit-scrollbar-thumb {
	background: var(--ah89-border);
	border-radius: 2px;
}

@media (max-width: 1100px) {
	.ah89-feed-layout__sidebar {
		width: 280px;
	}
}

@media (max-width: 960px) {
	.ah89-feed-layout {
		flex-direction: column;
	}

	.ah89-feed-layout__main {
		padding-right: 0;
	}

	.ah89-feed-layout__sidebar {
		width: 100%;
		position: static;
		height: auto;
		overflow: visible;
		background: transparent;
		border-left: none;
		padding: 0;
		gap: 12px;
	}
}

/* ---- Sidebar widget card base ---- */

.ah89-sidebar-widget-card {
	background: var(--ah89-bg-card);
	border: 1px solid var(--ah89-border);
	border-radius: 10px;
	padding: 16px;
	margin-bottom: 12px;
}

.ah89-sidebar-widget-card__title {
	font-family: 'Courier New', Courier, monospace;
	font-size: 0.625rem;
	font-weight: 700;
	color: var(--ah89-muted);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin: 0 0 10px;
}

/* ---- Weather Widget (sidebar) ---- */

.ah89-weather-widget {
	background: var(--ah89-bg-card);
	border: 1px solid var(--ah89-border);
	border-radius: 10px;
	padding: 16px;
	margin-bottom: 12px;
	min-height: 140px;
}

.ah89-weather-widget__header {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 10px;
}

.ah89-weather-widget__city {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--ah89-white);
	margin: 0;
}

.ah89-weather-widget__desc {
	font-size: 0.6875rem;
	color: var(--ah89-muted);
	margin: 0;
}

.ah89-weather-widget__temp {
	font-family: 'Courier New', Courier, monospace;
	font-size: 2.5rem;
	font-weight: 700;
	color: var(--ah89-accent);
	line-height: 1;
	margin: 0 0 8px;
	text-shadow: 0 2px 10px rgba(0,229,255,0.3);
}

.ah89-weather-widget__details {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ah89-weather-widget__detail {
	font-size: 0.6875rem;
	color: var(--ah89-muted);
}

.ah89-weather-widget__detail span {
	color: var(--ah89-text);
	font-weight: 600;
}

/* ---- Music Promo Widget ---- */

.ah89-music-widget {
	background: var(--ah89-bg-card);
	border: 1px solid var(--ah89-border);
	border-radius: 10px;
	padding: 16px;
	margin-bottom: 12px;
	position: relative;
	overflow: hidden;
	min-height: 160px;
}

.ah89-music-widget__title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--ah89-accent);
	font-style: italic;
	margin: 0 0 4px;
}

.ah89-music-widget__freq {
	font-family: 'Courier New', Courier, monospace;
	font-size: 0.625rem;
	color: #ff3d00;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin: 0 0 10px;
}

.ah89-music-widget__text {
	font-size: 0.75rem;
	color: var(--ah89-text);
	margin: 0 0 12px;
	line-height: 1.4;
}

.ah89-music-widget__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: transparent;
	border: 1px solid var(--ah89-accent);
	border-radius: 4px;
	color: var(--ah89-accent);
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 8px 16px;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
	width: 100%;
	justify-content: center;
}

.ah89-music-widget__btn:hover {
	background: var(--ah89-accent);
	color: var(--ah89-bg-base);
}

/* ---- Widget Cover (background image overlay pattern) ---- */

.ah89-widget-cover {
	position: relative;
	overflow: hidden;
}

.ah89-widget-cover__img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	pointer-events: none;
}

.ah89-widget-cover__overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.7) 100%);
	z-index: 1;
	pointer-events: none;
}

.ah89-widget-cover__overlay--darker {
	background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.8) 100%);
}

.ah89-widget-cover__content {
	position: relative;
	z-index: 2;
}

/* ---- City Banner Widget ---- */

.ah89-city-banner {
	background: var(--ah89-bg-base);
	border: 1px solid var(--ah89-border);
	border-radius: 10px;
	padding: 20px 16px;
	margin-bottom: 12px;
	text-align: center;
	min-height: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ah89-city-banner__name {
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--ah89-white);
	margin: 0 0 6px;
	text-shadow: 0 2px 8px rgba(0,0,0,0.6);
	letter-spacing: 0.02em;
}

.ah89-city-banner__tagline {
	font-size: 0.6875rem;
	color: rgba(255,255,255,0.8);
	margin: 0;
	line-height: 1.5;
	text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}



/* ---- Install App Widget ---- */

.ah89-install-widget {
	background: var(--ah89-bg-card);
	border: 1px solid var(--ah89-border);
	border-radius: 10px;
	padding: 16px;
	margin-bottom: 12px;
	text-align: center;
}

.ah89-install-widget.is-hidden {
	display: none;
}

.ah89-install-widget__icon {
	width: 40px;
	height: 40px;
	margin: 0 auto 10px;
	color: var(--ah89-accent);
	display: flex;
	align-items: center;
	justify-content: center;
}

.ah89-install-widget__icon svg {
	width: 40px;
	height: 40px;
}

.ah89-install-widget__title {
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--ah89-white);
	margin: 0 0 4px;
}

.ah89-install-widget__text {
	font-size: 0.6875rem;
	color: var(--ah89-muted);
	margin: 0 0 12px;
	line-height: 1.5;
}

.ah89-install-widget__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: transparent;
	border: 1px solid var(--ah89-accent);
	border-radius: 4px;
	color: var(--ah89-accent);
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 8px 16px;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
	width: 100%;
}

.ah89-install-widget__btn:hover {
	background: var(--ah89-accent);
	color: var(--ah89-bg-base);
}

.ah89-install-widget__btn svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* ---- Community Stats Widget ---- */

.ah89-stats-widget {
	background: var(--ah89-bg-card);
	border: 1px solid var(--ah89-border);
	border-radius: 10px;
	padding: 16px;
	margin-bottom: 12px;
}

.ah89-stats-widget__title {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--ah89-white);
	margin: 0 0 12px;
}

.ah89-stats-widget__list {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ah89-stats-widget__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 6px 8px;
	cursor: pointer;
	transition: background 0.15s;
	border-radius: 4px;
	margin: 0 -8px;
}

.ah89-stats-widget__row:hover {
	background: rgba(0, 229, 255, 0.06);
}

.ah89-stats-widget__label {
	font-size: 0.75rem;
	color: var(--ah89-muted);
}

.ah89-stats-widget__value {
	font-family: 'Courier New', Courier, monospace;
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--ah89-accent);
}

/* ----------------------------------------------------------------
   Mobile Adaptation Fixes
   ---------------------------------------------------------------- */

@media (max-width: 782px) {
	/* Forms: full-width grid on mobile */
	.ah89-form__grid {
		grid-template-columns: 1fr !important;
	}

	/* Buttons: bigger tap targets on mobile */
	.ah89-form__submit,
	.ah89-form__cancel,
	.ah89-section__add-btn {
		min-height: 44px;
		font-size: 0.8125rem;
		padding: 10px 16px;
	}

	/* Cards: proper padding on mobile */
	.ah89-card {
		padding: 12px;
		margin-left: auto;
		margin-right: auto;
		max-width: 100%;
	}

	/* Feed layout main — center content on mobile */
	.ah89-feed-layout__main {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0 12px;
	}

	/* Compose block — centered, full width with padding */
	.ah89-feed__compose {
		width: 100%;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
		box-sizing: border-box;
	}

	/* Feed list — centered, full width */
	.ah89-feed__list {
		max-width: 100%;
		width: 100%;
		padding: 0;
		align-items: center;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 24px;
	}

	.ah89-feed-card {
		padding: 16px;
		border-radius: 14px;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}

	.ah89-feed-card__avatar {
		width: 36px;
		height: 36px;
	}

	.ah89-feed-card__media {
		justify-content: center;
		padding: 0;
	}

	.ah89-feed-card__media img {
		width: 100%;
		max-width: 100%;
		max-height: 320px;
		border-radius: 12px;
		display: block;
		margin: 0 auto;
	}

	.ah89-feed-card__media img:not(:only-child) {
		width: calc(50% - 3px);
		max-height: 260px;
	}

	.ah89-feed-card__media video {
		max-height: 320px;
	}

	/* Carousel — centered on mobile */
	.ah89-carousel {
		width: 100%;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
	}

	/* Card details: smaller label width */
	.ah89-card__detail-label {
		min-width: 80px;
		font-size: 0.625rem;
	}

	/* Profile stats: smaller on mobile */
	.ah89-profile__stat {
		min-width: 80px;
		max-width: none;
		padding: 10px 8px;
	}

	.ah89-profile__stat-value {
		font-size: 1.25rem;
	}

	/* Profile actions: wrap and full-width */
	.ah89-profile__actions {
		flex-direction: column;
	}

	.ah89-profile__action-btn {
		width: 100%;
		justify-content: center;
		min-height: 44px;
	}

	/* Section header: stack on mobile */
	.ah89-section__header {
		flex-direction: column;
		align-items: flex-start;
	}

	/* Gallery grid: 2 columns on small screens */
	.ah89-gallery__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}

	/* Members grid: 1 column on small screens */
	.ah89-members__grid {
		grid-template-columns: 1fr;
	}

	/* Moderation dashboard: 2 columns */
	.ah89-moderation__dashboard {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}

	/* Moderation tabs: scroll horizontally */
	.ah89-moderation__tabs {
		-webkit-overflow-scrolling: touch;
	}

	/* Moderation item: stack actions below */
	.ah89-mod-item {
		flex-direction: column;
		align-items: flex-start;
	}

	/* Chat compose: wrap properly */
	.ah89-chat__compose {
		flex-wrap: wrap;
	}

	.ah89-chat__compose textarea {
		width: 100%;
		min-width: 0;
	}

	.ah89-chat__send-btn {
		width: 100%;
		margin-top: 4px;
	}

	/* DM compose: stack vertically on mobile for full-width input */
	.ah89-dm__conv-compose {
		flex-wrap: wrap;
		gap: 6px;
		padding: 10px 12px;
	}

	.ah89-dm__conv-compose .ah89-dm__conv-attach {
		order: 2;
		display: flex;
		gap: 4px;
		flex-shrink: 0;
	}

	.ah89-dm__conv-compose textarea {
		width: 100%;
		min-width: 0;
		min-height: 48px;
		max-height: 140px;
		order: 1;
		font-size: 1rem;
		padding: 12px;
		border-radius: 8px;
		resize: vertical;
	}

	.ah89-dm__conv-send {
		width: 100%;
		order: 3;
		min-height: 44px;
		font-size: 0.875rem;
	}

	/* Footer links smaller */
	.ah89-footer__links li {
		font-size: 0.6875rem;
	}

	/* Auth modal: fit mobile */
	.ah89-auth-modal {
		width: 100%;
		max-width: 95vw;
		padding: 24px 16px;
		margin: 0 8px;
	}

	/* Inline edit forms: proper layout */
	.ah89-inline-edit .ah89-form__grid {
		grid-template-columns: 1fr;
	}

	/* Carousel items: smaller on mobile */
	.ah89-carousel__item {
		flex: 0 0 200px;
	}

	.ah89-carousel__item--has-thumb {
		flex-direction: column;
	}

	.ah89-carousel__item-thumb {
		width: 100%;
		height: 80px;
	}

	/* Music track rows: compact */
	.ah89-track-row {
		padding: 8px;
		gap: 8px;
	}

	.ah89-track-row__num {
		display: none;
	}

	.ah89-track-row__duration {
		display: none;
	}

	/* Badge assign row: stack */
	.ah89-mod-badge-assign {
		flex-direction: column;
		align-items: stretch;
	}

	/* Card view buttons: full width */
	.ah89-card__view-btn {
		width: 100%;
		justify-content: center;
		min-height: 44px;
		font-size: 0.8125rem;
	}

	/* Card action buttons: bigger on mobile */
	.ah89-card__action-btn {
		min-width: 40px;
		height: 38px;
		font-size: 0.6875rem;
		padding: 0 12px;
	}

	/* Limit card max-width to viewport on mobile */
	.ah89-card {
		max-width: 100%;
	}

	.ah89-section__list {
		max-width: 100%;
	}
}

@media (max-width: 480px) {
	/* Gallery: 1 column on very small screens */
	.ah89-gallery__grid {
		grid-template-columns: 1fr;
	}

	/* Videos: 1 column */
	.ah89-videos__grid {
		grid-template-columns: 1fr;
	}

	/* Topbar: tighter */
	.ah89-topbar__inner {
		padding: 0 8px;
		gap: 4px;
	}

	.ah89-topbar__icon-btn {
		width: 30px;
		height: 30px;
	}

	/* Prevent topbar weather from wrapping */
	.ah89-topbar__weather {
		font-size: 0.625rem;
	}

	/* On narrow screens: show city text at readable size matching temperature */
	.ah89-topbar__weather-city {
		display: inline;
		font-size: 0.625rem;
	}

	.ah89-topbar__weather {
		flex-shrink: 0;
		font-size: 0.6875rem;
	}

	/* Distribute topbar items evenly on narrow screens */
	.ah89-topbar__inner {
		justify-content: space-between;
	}

	/* More spacing between badge icons for better tap targets */
	.ah89-topbar__icons {
		gap: 6px;
	}

	/* Ensure all content stays within viewport */
	.ah89-section,
	.ah89-feed,
	.ah89-profile,
	.ah89-chat,
	.ah89-dm,
	.ah89-members,
	.ah89-notifications,
	.ah89-moderation {
		max-width: 100vw;
		overflow-x: hidden;
		box-sizing: border-box;
	}

	/* Feed section — center content proportionally */
	.ah89-feed {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 16px 0 0;
	}

	.ah89-feed-layout {
		width: 100%;
		max-width: 100%;
		padding: 0;
	}

	.ah89-feed-layout__main {
		padding-right: 0;
		padding-left: 0;
	}

	/* Section panels — center their content on mobile */
	.ah89-section {
		padding: 16px 12px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.ah89-section__header {
		width: 100%;
	}
}

/* Mobile: sidebar widgets compact */
@media (max-width: 960px) {
	.ah89-weather-widget__temp {
		font-size: 2rem;
	}

	.ah89-stats-widget__list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 4px;
	}

	.ah89-stats-widget__row {
		margin: 0;
	}

	.ah89-sidebar-widget-card,
	.ah89-weather-widget,
	.ah89-music-widget,
	.ah89-online-widget,
	.ah89-stats-widget,
	.ah89-city-banner {
		margin-bottom: 10px;
		max-width: 100%;
		box-sizing: border-box;
	}

	/* Ensure feed layout doesn't overflow */
	.ah89-feed-layout__main {
		max-width: 100%;
		overflow-x: hidden;
	}

	/* Feed layout — center everything on tablet/mobile */
	.ah89-feed-layout {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
}




/* ----------------------------------------------------------------
   Music Section
   ---------------------------------------------------------------- */

.ah89-music__header {
	margin-bottom: 16px;
}

.ah89-music__header-text {
	min-width: 0;
}

.ah89-music__title {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--ah89-accent);
	font-style: italic;
	margin: 0 0 2px;
	text-shadow: 0 0 12px rgba(0, 229, 255, 0.5), 0 0 30px rgba(0, 229, 255, 0.2);
}

.ah89-music__subtitle {
	font-family: 'Courier New', Courier, monospace;
	font-size: 0.6875rem;
	color: #ff3d00;
	margin: 0;
	letter-spacing: 0.04em;
}

/* Track list wrapper */
.ah89-tracks-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--ah89-border);
}

.ah89-tracks-header__label {
	font-family: 'Courier New', Courier, monospace;
	font-size: 0.625rem;
	font-weight: 700;
	color: var(--ah89-muted);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin: 0;
}

.ah89-tracks-header__badge {
	font-family: 'Courier New', Courier, monospace;
	font-size: 0.5625rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 3px 10px;
	border-radius: 3px;
	color: var(--ah89-accent);
	border: 1px solid rgba(0, 229, 255, 0.4);
	background: rgba(0, 229, 255, 0.08);
}

.ah89-track-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	background: #111518;
	border: 1px solid var(--ah89-border);
	border-radius: 6px;
	margin-bottom: 6px;
	transition: border-color 0.2s, background 0.2s;
}

.ah89-track-row:hover {
	border-color: rgba(0, 229, 255, 0.3);
	background: rgba(0, 212, 255, 0.04);
}

.ah89-track-row.is-active-track {
	background: rgba(0, 212, 255, 0.1);
	border-color: var(--ah89-accent);
}

.ah89-track-row__num {
	font-family: 'Courier New', Courier, monospace;
	font-size: 0.75rem;
	color: var(--ah89-muted);
	width: 28px;
	text-align: center;
	flex-shrink: 0;
}

.ah89-track-row__info {
	flex: 1;
	min-width: 0;
}

.ah89-track-row__title {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ah89-white);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ah89-track-row__artist {
	font-family: 'Courier New', Courier, monospace;
	font-size: 0.6875rem;
	color: var(--ah89-muted);
}

.ah89-track-row__duration {
	font-family: 'Courier New', Courier, monospace;
	font-size: 0.6875rem;
	color: var(--ah89-muted);
	flex-shrink: 0;
}

.ah89-track-row__actions {
	display: flex;
	gap: 6px;
	flex-shrink: 0;
	flex-wrap: wrap;
}

/* Text-based action buttons on tracks */
.ah89-track-row__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 28px;
	background: transparent;
	border: 1px solid var(--ah89-border);
	border-radius: 4px;
	color: var(--ah89-muted);
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s, background 0.15s;
	font-size: 0.625rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0 10px;
	white-space: nowrap;
}

.ah89-track-row__btn:hover {
	color: var(--ah89-accent);
	border-color: var(--ah89-accent);
}

.ah89-track-row__btn--play {
	color: var(--ah89-accent);
	border-color: rgba(0, 229, 255, 0.3);
}

.ah89-track-row__btn--play:hover {
	background: rgba(0, 229, 255, 0.1);
}

.ah89-track-row__btn--play.is-playing {
	color: #000;
	background: var(--ah89-accent);
	border-color: var(--ah89-accent);
}

.ah89-track-row__btn--playlist {
	color: var(--ah89-accent);
	border-color: rgba(0, 229, 255, 0.3);
}

.ah89-track-row__btn--playlist:hover {
	background: rgba(0, 229, 255, 0.1);
}

.ah89-track-row__btn--delete {
	color: var(--ah89-red);
	border-color: rgba(255, 61, 0, 0.3);
}

.ah89-track-row__btn--delete:hover {
	color: var(--ah89-white);
	background: var(--ah89-red);
	border-color: var(--ah89-red);
}

.ah89-track-row__btn svg {
	width: 14px;
	height: 14px;
}

.ah89-track-row__badge {
	font-family: 'Courier New', Courier, monospace;
	font-size: 0.5625rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 2px 6px;
	border-radius: 3px;
	background: rgba(0, 229, 255, 0.12);
	color: var(--ah89-accent);
	border: 1px solid rgba(0, 229, 255, 0.3);
	flex-shrink: 0;
}

.ah89-playlist-card {
	background: var(--ah89-bg-card);
	border: 1px solid var(--ah89-border);
	border-radius: 8px;
	padding: 14px 16px;
	margin-bottom: 10px;
}

.ah89-playlist-card__title {
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--ah89-white);
	margin: 0 0 4px;
}

.ah89-playlist-card__count {
	font-size: 0.6875rem;
	color: var(--ah89-muted);
}

/* ----------------------------------------------------------------
   Mini Player — hidden by default, shown only when JS adds
   .ah89-mini-player--visible class after user clicks play.
   This prevents the player from appearing on page load.
   ---------------------------------------------------------------- */

.ah89-mini-player {
	position: fixed;
	bottom: 0;
	left: var(--ah89-sidebar-w);
	right: 0;
	height: 60px;
	background: #111518;
	border-top: 3px solid var(--ah89-accent);
	display: none !important;
	align-items: center;
	gap: 10px;
	padding: 0 16px;
	z-index: 250;
	overflow: hidden;
	max-width: 100vw;
	box-sizing: border-box;
}

.ah89-mini-player.ah89-mini-player--visible {
	display: flex !important;
}

/* Mini player cover icon */
.ah89-mini-player__cover {
	width: 42px;
	height: 42px;
	border-radius: 6px;
	background: linear-gradient(135deg, rgba(0,229,255,0.15) 0%, rgba(0,229,255,0.05) 100%);
	border: 1px solid rgba(0,229,255,0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--ah89-accent);
}

.ah89-mini-player__cover svg {
	width: 22px;
	height: 22px;
}

/* Mini player time display */
.ah89-mini-player__time {
	font-family: 'Courier New', Courier, monospace;
	font-size: 0.625rem;
	color: var(--ah89-muted);
	white-space: nowrap;
	flex-shrink: 0;
}

/* Mini player volume slider */
.ah89-mini-player__volume-wrap {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}

.ah89-mini-player__volume-icon {
	color: var(--ah89-muted);
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.ah89-mini-player__volume {
	-webkit-appearance: none;
	appearance: none;
	width: 70px;
	height: 4px;
	background: var(--ah89-border);
	border-radius: 2px;
	outline: none;
	cursor: pointer;
}

.ah89-mini-player__volume::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--ah89-accent);
	cursor: pointer;
}

.ah89-mini-player__volume::-moz-range-thumb {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--ah89-accent);
	border: none;
	cursor: pointer;
}

.ah89-mini-player__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: transparent;
	border: none;
	color: var(--ah89-muted);
	cursor: pointer;
	flex-shrink: 0;
	transition: color 0.15s;
}

.ah89-mini-player__btn:hover {
	color: var(--ah89-accent);
}

.ah89-mini-player__btn--play {
	width: 42px;
	height: 42px;
	background: var(--ah89-accent);
	border-radius: 50%;
	color: #000000;
}

.ah89-mini-player__btn--play:hover {
	background: var(--ah89-white);
	color: #000000;
}

.ah89-mini-player__btn svg {
	width: 18px;
	height: 18px;
}

.ah89-mini-player__btn--play svg {
	width: 20px;
	height: 20px;
}

.ah89-mini-player__btn--close {
	width: 32px;
	height: 32px;
	color: var(--ah89-muted);
	flex-shrink: 0;
	border: 1px solid var(--ah89-border);
	border-radius: 4px;
	background: rgba(255, 61, 0, 0.08);
}

.ah89-mini-player__btn--close:hover {
	color: var(--ah89-red);
	border-color: var(--ah89-red);
	background: rgba(255, 61, 0, 0.15);
}

.ah89-mini-player__btn--close svg {
	width: 16px;
	height: 16px;
}

.ah89-mini-player__info {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
	overflow: hidden;
}

.ah89-mini-player__title {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--ah89-white);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ah89-mini-player__artist {
	font-size: 0.625rem;
	color: var(--ah89-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ah89-mini-player__progress {
	flex: 1 1 0;
	min-width: 40px;
	height: 4px;
	background: var(--ah89-border);
	border-radius: 2px;
	cursor: pointer;
	position: relative;
}

.ah89-mini-player__progress-bar {
	height: 100%;
	background: var(--ah89-accent);
	border-radius: 2px;
	width: 0;
	transition: width 0.1s linear;
}

@media (max-width: 782px) {
	.ah89-mini-player {
		left: 0;
		bottom: 64px;
		gap: 6px;
		padding: 0 6px;
		height: 52px;
		display: none !important;
	}

	.ah89-mini-player.ah89-mini-player--visible {
		display: flex !important;
	}

	/* Hide prev/next, volume, time on mobile */
	.ah89-mini-player__btn:not(.ah89-mini-player__btn--play):not(.ah89-mini-player__btn--close) {
		display: none;
	}

	.ah89-mini-player__volume-wrap,
	.ah89-mini-player__time {
		display: none;
	}

	/* Track row: stack vertically on mobile */
	.ah89-track-row {
		flex-wrap: wrap;
	}

	.ah89-track-row__actions {
		width: 100%;
		flex-wrap: wrap;
		margin-top: 6px;
		padding-top: 6px;
		border-top: 1px solid var(--ah89-border);
	}

	.ah89-track-row__btn {
		font-size: 0.625rem;
		height: 28px;
		padding: 0 10px;
		flex: 1;
		min-width: 0;
		justify-content: center;
	}

	.ah89-mini-player__btn--play {
		width: 36px;
		height: 36px;
	}

	.ah89-mini-player__btn--play svg {
		width: 16px;
		height: 16px;
	}

	.ah89-mini-player__btn--close {
		width: 28px;
		height: 28px;
	}

	.ah89-mini-player__btn--close svg {
		width: 14px;
		height: 14px;
	}

	.ah89-mini-player__info {
		flex: 1 1 0;
		min-width: 0;
	}

	.ah89-mini-player__title {
		font-size: 0.6875rem;
		max-width: 100%;
	}

	.ah89-mini-player__artist {
		font-size: 0.5625rem;
	}

	/* Hide progress bar on very narrow screens to save space */
	.ah89-mini-player__progress {
		display: none;
	}

	.main-content-area {
		padding-bottom: calc(var(--ah89-mobile-nav-h) + 52px);
	}
}

@media (min-width: 783px) and (max-width: 1024px) {
	.ah89-mini-player__progress {
		min-width: 60px;
	}
}