/* Shared flat surfaces for desktop and mobile. Media and dialog controls keep
 * their own shape; only page sections and sidebar wrappers are flattened. */
body {
	background: var(--neo-card);
}

body .neo-shell,
body .neo-gallery-shell,
body .neo-friends-shell {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	gap: 0;
}

.neo-topbar__inner {
	max-width: none;
}

.neo-main .neo-hero {
	margin: 0;
}

.neo-hero__cover,
.neo-hero__bar {
	border-radius: 0;
	box-shadow: none;
}

.neo-main .neo-feed {
	gap: 0;
}

.neo-card,
.neo-widget,
.neo-space-nav,
.neo-composer,
.neo-comments,
.neo-pagehead,
.neo-album,
.neo-guestbook,
.neo-friends,
.neo-gallery-side-card {
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: var(--neo-card);
}

.neo-main .neo-card,
.neo-main .neo-space-nav,
.neo-main .neo-composer,
.neo-main .neo-comments,
.neo-main .neo-pagehead,
.neo-main .neo-album,
.neo-main .neo-guestbook {
	margin: 0;
	border-bottom: 1px solid var(--neo-border);
}

.neo-left .neo-widget,
.neo-right .neo-widget,
.neo-gallery-side-card {
	margin: 0;
	padding: 20px 18px;
	border-bottom: 1px solid var(--neo-border);
}

.neo-widget__title {
	color: var(--neo-text);
	font-size: 14px;
	letter-spacing: 0;
}

.neo-gallery-stat,
.neo-album-card,
.neo-gallery-empty {
	border-radius: 0;
	box-shadow: none;
}

.neo-friends-grid {
	gap: 0;
}

.neo-friend-card,
.neo-friend-card:nth-child(n),
.neo-friend-card:hover {
	min-height: 0;
	border: 0;
	border-bottom: 1px solid var(--neo-border);
	border-radius: 0;
	box-shadow: none;
	background: var(--neo-card);
	transform: none;
}

.neo-guestbook__form {
	border: 0;
	border-bottom: 1px solid var(--neo-border);
	border-radius: 0;
	background: transparent;
}

.neo-footer {
	margin-top: 0;
	border-top: 1px solid var(--neo-border);
	background: var(--neo-card);
}

.neo-widget-empty {
	margin: 0;
	color: var(--neo-text-3);
	font-size: 13px;
}

.neo-widget-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
}

.neo-widget-stats > div {
	display: flex;
	flex-direction: column-reverse;
	text-align: center;
}

.neo-widget-stats > div + div {
	border-left: 1px solid var(--neo-border);
}

.neo-widget-stats dt {
	color: var(--neo-text-2);
	font-size: 12px;
}

.neo-widget-stats dd {
	margin: 0;
	font-size: 23px;
	font-weight: 650;
	font-variant-numeric: tabular-nums;
}

.neo-widget .neo-widget-posts,
.neo-widget .neo-widget-comments {
	margin: 0;
	padding: 0;
	list-style: none;
}

.neo-widget .neo-widget-posts li,
.neo-widget .neo-widget-comments li {
	margin: 0;
	padding: 0;
}

.neo-widget .neo-widget-posts a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 0;
	color: var(--neo-text);
}

.neo-widget-posts a > span {
	min-width: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
}

.neo-widget-posts time {
	flex-shrink: 0;
	color: var(--neo-text-3);
	font-size: 11px;
	font-variant-numeric: tabular-nums;
}

.neo-widget-comments button {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	width: 100%;
	padding: 10px 0;
	border: 0;
	background: transparent;
	color: var(--neo-text);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.neo-widget-comments button:hover strong {
	color: var(--neo-accent);
}

.neo-widget-comments .avatar {
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--neo-card-weak);
}

.neo-widget-comment-body {
	display: grid;
	gap: 3px;
	min-width: 0;
}

.neo-widget-comment-body strong {
	font-size: 13px;
	font-weight: 600;
}

.neo-widget-comment-body > span {
	color: var(--neo-text-2);
	font-size: 12px;
	line-height: 1.6;
	overflow-wrap: anywhere;
}

.neo-widget-terms {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
}

.neo-widget-terms.is-categories {
	display: grid;
	gap: 0;
}

.neo-widget-terms a {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 6px 0;
	color: var(--neo-text-2);
	overflow-wrap: anywhere;
}

.neo-widget-terms a:hover {
	color: var(--neo-accent);
}

.neo-widget-terms.is-categories a {
	justify-content: space-between;
}

.neo-widget-terms small {
	color: var(--neo-text-3);
}

.neo-widget-notice {
	margin: 0;
	line-height: 1.85;
	overflow-wrap: anywhere;
}

.neo-widget-notice-link {
	display: inline-block;
	margin-top: 10px;
}

/* Native versions of kanle's compact friends, TOC and social sidebars. */
.neo-widget .neo-widget-friends,
.neo-widget .neo-widget-toc ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.neo-widget .neo-widget-friends li,
.neo-widget .neo-widget-toc li {
	margin: 0;
	padding: 0;
}

.neo-widget-friends a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 0;
	color: var(--neo-text);
}

.neo-widget-friend-avatar {
	position: relative;
	display: grid;
	place-items: center;
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	overflow: hidden;
	border-radius: 7px;
	background: var(--neo-card-weak);
	color: var(--neo-text-2);
	font-size: 15px;
}

.neo-widget-friend-avatar img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.neo-widget-friend-avatar img[hidden] {
	display: none;
}

.neo-widget-friend-info {
	display: grid;
	flex: 1;
	gap: 3px;
	min-width: 0;
}

.neo-widget-friend-info strong,
.neo-widget-friend-info small {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.neo-widget-friend-info strong {
	font-size: 13px;
	font-weight: 600;
}

.neo-widget-friend-info small {
	color: var(--neo-text-3);
	font-size: 12px;
}

.neo-widget-friends svg,
.neo-widget-social svg {
	flex: 0 0 16px;
	color: var(--neo-text-3);
}

.neo-widget-friends a:hover strong,
.neo-widget-social a:hover {
	color: var(--neo-accent);
}

.neo-widget-friend-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 12px;
	margin-top: 12px;
	font-size: 12px;
}

.neo-widget.neo-article-toc:not(.has-toc),
.neo-widget-toc[hidden] {
	display: none;
}

.neo-widget-toc {
	max-height: min(50vh, 420px);
	overflow: auto;
	overscroll-behavior: contain;
}

.neo-widget-toc a {
	display: block;
	padding: 7px 10px;
	border-left: 2px solid var(--neo-border);
	color: var(--neo-text-2);
	font-size: 13px;
	line-height: 1.55;
	overflow-wrap: anywhere;
}

.neo-widget-toc .is-subheading a {
	padding-left: 24px;
	font-size: 12px;
}

.neo-widget-toc a[aria-current="location"] {
	border-left-color: var(--neo-accent);
	background: var(--neo-card-weak);
	color: var(--neo-text);
	font-weight: 600;
}

.neo-widget-toc a:hover {
	color: var(--neo-accent);
}

.neo-toc-target {
	scroll-margin-top: calc(var(--neo-topbar-h, 64px) + 16px);
}

.neo-widget-social {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
}

.neo-widget-social a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-width: 0;
	max-width: 100%;
	padding: 5px 0;
	color: var(--neo-text);
	font-size: 13px;
	overflow-wrap: anywhere;
}

.neo-widget-subscribe {
	margin-top: 12px;
}

.neo-widget-subscribe-row {
	display: flex;
	gap: 6px;
}

.neo-widget-subscribe input {
	min-width: 0;
	width: 100%;
	padding: 7px;
	border: 1px solid var(--neo-border);
	border-radius: 4px;
	background: var(--neo-card-weak);
	color: var(--neo-text-2);
	font: inherit;
	font-size: 12px;
}

.neo-widget-subscribe button {
	flex-shrink: 0;
	padding: 6px 9px;
	border: 1px solid var(--neo-border);
	border-radius: 4px;
	background: var(--neo-card);
	color: var(--neo-text);
	font: inherit;
	font-size: 12px;
	cursor: pointer;
}

.neo-widget-copy-status {
	display: block;
	margin-top: 5px;
	color: var(--neo-text-3);
	font-size: 12px;
}

.neo-widget-copy-status:empty {
	display: none;
}

.neo-widget-friends a:focus-visible,
.neo-widget-friend-actions a:focus-visible,
.neo-widget-toc a:focus-visible,
.neo-widget-social a:focus-visible,
.neo-widget-subscribe input:focus-visible,
.neo-widget-subscribe button:focus-visible {
	outline: 2px solid var(--neo-accent);
	outline-offset: 2px;
}

@media (min-width: 821px) {
	body .neo-shell,
	body .neo-gallery-shell,
	body .neo-friends-shell,
	.neo-topbar__inner {
		max-width: var(--neo-columns-total, 1240px);
		margin-right: auto;
		margin-left: auto;
	}

	.neo-shell,
	.neo-gallery-shell,
	.neo-friends-shell {
		grid-template-columns: var(--neo-column-left, 220px) minmax(0, 1fr) var(--neo-column-right, 300px);
	}

	.neo-shell > .neo-main,
	.neo-gallery-main,
	.neo-friends-main {
		border-right: 1px solid var(--neo-border);
		border-left: 1px solid var(--neo-border);
	}

	.neo-left,
	.neo-right {
		top: var(--neo-topbar-h);
		max-height: calc(100vh - var(--neo-topbar-h));
		overflow-y: auto;
	}
}

@media (min-width: 821px) and (max-width: 1120px) {
	body .neo-shell,
	body .neo-gallery-shell,
	body .neo-friends-shell,
	.neo-topbar__inner {
		max-width: var(--neo-columns-two, 940px);
	}

	.neo-shell,
	.neo-gallery-shell,
	.neo-friends-shell {
		grid-template-columns: min(var(--neo-column-left, 220px), 30vw) minmax(0, 1fr);
	}

	.neo-gallery-right,
	.neo-friends-shell > .neo-right {
		display: none;
	}

	.neo-right {
		max-height: none;
		gap: 0;
	}
}

@media (max-width: 820px) {
	.neo-shell > .neo-right {
		display: block;
		position: static;
		width: 100%;
		max-height: none;
		overflow: visible;
		border-top: 1px solid var(--neo-border);
	}

	.neo-left {
		padding: 0;
		background: var(--neo-card);
	}
}