/**
 * Kemono Mirror theme — visual language ported from kemono.cr's own
 * stylesheet (design tokens, sidebar + topbar shell, post/user cards).
 */

/* -------------------------------------------------------------------------
 * Design tokens (from kemono.cr :root)
 * ---------------------------------------------------------------------- */
:root {
	--color0-primary:   hsl(0, 0%, 95%);
	--color0-secondary: hsl(0, 0%, 70%);
	--color0-tertiary:  hsl(0, 0%, 45%);

	--color1-primary:   hsl(210, 6%, 12%);
	--color1-primary-transparent: hsla(210, 6%, 12%, .75);
	--color1-secondary: hsl(220, 7%, 25%);
	--color1-tertiary:  hsl(210, 15%, 5%);

	--sidebar-bg:        #282a2e;
	--sidebar-hover:     #1d1d1e;
	--sidebar-active:    #2c2c30;
	--topbar-bg:         #282a2e;

	--accent:            hsl(200, 100%, 80%);
	--accent-strong:     hsl(224, 27%, 49%);

	--sidebar-width:     12rem;
	--topbar-height:     2.75rem;
	--radius:            .35rem;
	--duration:          .25s;
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
}

.km-body {
	color: var(--color0-primary);
	background-color: var(--color1-primary);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
	line-height: 1.5;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* -------------------------------------------------------------------------
 * App shell — fixed left sidebar, content shifted right
 * ---------------------------------------------------------------------- */
.km-shell {
	min-height: 100vh;
}

.km-sidebar {
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	width: var(--sidebar-width);
	min-width: 160px;
	display: flex;
	flex-direction: column;
	background: var(--sidebar-bg);
	padding: .5em 0;
	overflow-y: auto;
	z-index: 20;
	transition: margin-left var(--duration) ease-in-out;
}

.km-sidebar__brand {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: .15rem .75rem .5rem;
	padding: 0 .5rem;
	height: 38px;
	border-radius: var(--radius);
	color: var(--color0-primary);
	font-weight: 700;
	font-size: 1rem;
}
.km-sidebar__brand:hover { background: var(--sidebar-hover); text-decoration: none; }
.km-sidebar__brand.is-active { background: var(--sidebar-active); }
.km-sidebar__brand-icon { width: 20px; height: 20px; }

.km-sidebar__nav {
	display: flex;
	flex-direction: column;
}

.km-sidebar__group {
	display: flex;
	flex-direction: column;
	margin-top: .75rem;
}

.km-sidebar__header {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0 .75rem .15rem;
	padding: 0 .5rem;
	height: 30px;
	color: var(--color0-primary);
	font-weight: 700;
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .03em;
	opacity: .85;
}

.km-sidebar__entry {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: .1rem .75rem;
	padding: 0 .5rem 0 1.25rem;
	height: 32px;
	border-radius: var(--radius);
	color: var(--color0-secondary);
	white-space: nowrap;
	font-size: .92rem;
}
.km-sidebar__entry:hover {
	background: var(--sidebar-hover);
	color: var(--color0-primary);
	text-decoration: none;
}
.km-sidebar__entry.is-active {
	background: var(--sidebar-active);
	color: var(--color0-primary);
}
.km-sidebar__icon { width: 18px; height: 18px; flex: 0 0 18px; object-fit: contain; }

.km-content {
	margin-left: var(--sidebar-width);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* -------------------------------------------------------------------------
 * Floating nav toggle (mobile only — the top bar was removed; this is the
 * one remaining way to open the collapsed sidebar under 900px).
 * ---------------------------------------------------------------------- */
.km-navtoggle {
	display: none; /* shown only in the <900px media query below */
	position: fixed;
	top: .75rem;
	left: .75rem;
	z-index: 30;
	width: 2.5rem;
	height: 2.5rem;
	background: var(--color1-secondary);
	border: 0;
	border-radius: var(--radius);
	color: var(--color0-primary);
	font-size: 1.25rem;
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}

/* -------------------------------------------------------------------------
 * Main content container
 * ---------------------------------------------------------------------- */
.km-main { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* SPA navigation transitions — content fades in after swap. */
.km-main { transition: opacity 0.08s ease-in; }
.km-main.is-transitioning { opacity: 0; transition: none; }

.km-container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 1.5rem;
}
.km-container--narrow { max-width: 960px; }

/* Full-bleed container: fills the whole content area (right of the sidebar)
 * edge to edge with no max-width, no padding. Used on the front page so the
 * jumbo hero fits the screen exactly — the content column (main + footer)
 * adds up to 100vh, so there's no page scrollbar. */
.km-container--full {
	max-width: none;
	margin: 0;
	padding: 0;
	flex: 1;        /* fill the space .km-main leaves after the footer */
	min-height: 0;  /* allow shrinking below content size on short screens */
	display: flex;
	flex-direction: column;
}
.km-container--full > .km-jumbo {
	flex: 1;
	min-height: 0;   /* override the 450px floor so it can't overflow the viewport */
	margin-bottom: 0;
	border-radius: 0;
	overflow-y: auto; /* if content is taller than a short screen, scroll inside the hero, not the page */
}

.km-section { margin-bottom: 2.5rem; }
.km-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 1rem;
}
.km-section__title {
	font-size: 1.4rem;
	font-weight: 600;
	margin: 0 0 1rem;
}
.km-section__head .km-section__title { margin: 0; }

.km-link { color: var(--accent); font-size: .95rem; }

.km-empty {
	color: var(--color0-secondary);
	padding: 2rem 0;
}

.km-notice {
	padding: 1rem 1.25rem;
	border-radius: var(--radius);
	background: var(--color1-secondary);
	margin: 1rem 0;
}
.km-notice--error {
	background: hsl(3, 45%, 22%);
	border: 1px solid hsl(3, 60%, 40%);
}

/* -------------------------------------------------------------------------
 * Jumbo welcome hero (static home) — mirrors kemono.cr .jumbo-welcome
 * ---------------------------------------------------------------------- */
.km-jumbo {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-flow: row nowrap;
	align-items: stretch;
	min-height: 450px;
	border-radius: var(--radius);
	background-color: rgba(0, 0, 0, .7);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
	margin-bottom: 2.5rem;
}
.km-jumbo__background {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-size: cover;
	background-position: center;
}
/* Mascot column on the left, like kemono.cr's .jumbo-welcome-mascot */
.km-jumbo__mascot {
	display: flex;
	align-items: flex-end;
	width: 48%;
	max-width: 520px;
	flex: 0 0 auto;
}
.km-jumbo__mascot img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center left;
}
/* Description / links column on the right — centred both axes */
.km-jumbo__description {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 100%;
	padding: 2rem;
}
.km-jumbo__header {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1rem;
}
.km-jumbo__logo { margin: 0; line-height: 1; }
.km-jumbo__logo img { height: 50px; width: auto; }
.km-jumbo__lead { font-size: 1.15rem; margin: .5rem 0; }
.km-jumbo__services {
	list-style: none;
	margin: .5rem 0 1.5rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem;
}
.km-service-tag {
	color: #fff;
	font-weight: 700;
	font-size: .85rem;
	padding: .3rem .7rem;
	border-radius: var(--radius);
}
.km-jumbo__desc { max-width: 720px; line-height: 1.7; color: var(--color0-primary); }
.km-jumbo__desc a { color: var(--accent); }

@media (max-width: 780px) {
	.km-jumbo { flex-direction: column; min-height: 0; }
	.km-jumbo__mascot { display: none; }
	.km-jumbo__description { padding: 1.5rem; }
}

/* -------------------------------------------------------------------------
 * Grids
 * ---------------------------------------------------------------------- */
.km-grid { display: grid; gap: .75rem; }

.km-grid--posts {
	grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 1400px) {
	.km-grid--posts { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1100px) {
	.km-grid--posts { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 800px) {
	.km-grid--posts { grid-template-columns: repeat(2, 1fr); }
}

/* kemono.cr's artists grid: centered, wrapping cards each capped at ~480px
 * (their .card-list--phone sizing), rather than a stretch-to-fill CSS grid. */
.km-grid--creators {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: stretch;
	gap: .5rem;
}
.km-grid--creators > .km-user-card {
	flex: 0 1 480px;
}

/* -------------------------------------------------------------------------
 * Post card — square tile, image cover, overlay header/footer
 * ---------------------------------------------------------------------- */
.km-post-card {
	display: block;
	color: #fff;
}
.km-post-card:hover { text-decoration: none; }
.km-post-card:hover .km-post-card__image {
	transform: scale(1.04);
}

.km-post-card__inner {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--color1-tertiary);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
	font-size: 80%;
}

.km-post-card__image-container {
	position: absolute;
	inset: 0;
	display: flex;
}
.km-post-card__image {
	object-fit: cover;
	width: 100%;
	height: 100%;
	transition: transform var(--duration) ease;
}
/* Avatar fallback (post with no thumbnail): show the creator's square icon
 * centered on a plain background rather than stretching it across the tile. */
.km-post-card__image--avatar {
	object-fit: contain;
	width: 50%;
	height: 50%;
	margin: auto;
	border-radius: var(--radius);
}
.km-post-card__noimage {
	margin: auto;
	color: var(--color0-tertiary);
	text-shadow: none;
}

.km-post-card__header,
.km-post-card__footer {
	position: relative;
	z-index: 1;
	padding: 5px 7px;
	background: rgba(0, 0, 0, .5);
}
.km-post-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.km-post-card__footer { text-align: right; }
.km-post-card__date { color: #fff; }

/* -------------------------------------------------------------------------
 * Artists search form — kemono.cr's #282a2e filter panel
 * ---------------------------------------------------------------------- */
.km-artist-search {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: 8px;
	background-color: var(--sidebar-bg);
	border-radius: var(--radius);
	margin: 0 auto 1.25rem;
	width: fit-content;
	max-width: 100%;
}
@media (max-width: 900px) {
	.km-artist-search { width: 100%; }
}
.km-artist-search__row { display: flex; }
.km-artist-search__input {
	flex: 1;
	background: var(--color1-tertiary);
	border: 1px solid var(--color1-secondary);
	border-right: 0;
	border-radius: var(--radius) 0 0 var(--radius);
	color: var(--color0-primary);
	padding: .5rem .75rem;
	font-size: .95rem;
	width: 500px;
}
.km-artist-search__button {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color1-secondary);
	border: 1px solid var(--color1-secondary);
	border-radius: 0 var(--radius) var(--radius) 0;
	color: var(--color0-primary);
	padding: 0 .9rem;
	cursor: pointer;
}
.km-artist-search__button img { width: 18px; height: 18px; }
.km-artist-search__wrapper { display: flex; gap: .5rem; flex-wrap: wrap; }
.km-artist-search__select {
	background: var(--color1-tertiary);
	border: 1px solid var(--color1-secondary);
	border-radius: var(--radius);
	color: var(--color0-primary);
	padding: .45rem .6rem;
	font-size: .9rem;
	min-width: 160px;
	flex: 1 1 auto;
}
.km-artist-search__sortdir {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color1-secondary);
	border: 1px solid var(--color1-secondary);
	border-radius: var(--radius);
	color: var(--color0-primary);
	padding: 0 .7rem;
	cursor: pointer;
}
.km-artist-search__sortdir img { width: 18px; height: 18px; transition: transform var(--duration); }
/* Descending flips the ascending glyph vertically, mirroring kemono.cr. */
.km-artist-search__sortdir img.desc { transform: scaleY(-1); }

.km-result-count {
	color: var(--color0-secondary);
	font-size: .9rem;
	margin: 0 0 1rem;
}

/* -------------------------------------------------------------------------
 * User (creator) card — horizontal, rounded icon + service badge
 * ---------------------------------------------------------------------- */
.km-user-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.1rem;
	border-radius: var(--radius);
	background: var(--color1-secondary);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
	color: #fff;
	overflow: hidden;
}
.km-user-card:hover {
	text-decoration: none;
	background: hsl(220, 7%, 30%);
}

/* Cover/banner behind the card — mirrors kemono.cr's artist grid, where each
 * card shows the creator's banner faded behind the icon + name. */
.km-user-card__cover {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}
.km-user-card__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .35;
}
.km-user-card__cover.km-img--broken { display: none; }
.km-user-card--has-cover::after {
	/* Darkening scrim so the icon, name and badge stay legible over the cover. */
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient( to right, rgba(40, 42, 46, .92), rgba(40, 42, 46, .6) );
	pointer-events: none;
}
.km-user-card--has-cover:hover::after {
	background: linear-gradient( to right, rgba(52, 55, 61, .9), rgba(52, 55, 61, .55) );
}
/* Lift the real content above the cover + scrim. */
.km-user-card__icon,
.km-user-card__info { position: relative; z-index: 1; }

.km-user-card__icon {
	width: 80px;
	height: 80px;
	flex: 0 0 80px;
	overflow: hidden;
	border-radius: 10px;
	background: var(--color1-tertiary);
	display: flex;
	align-items: center;
	justify-content: center;
}
.km-user-card__icon img { width: 100%; height: 100%; object-fit: cover; }
.km-user-card__icon-fallback { font-size: 2rem; color: var(--color0-secondary); }

.km-user-card__info {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	min-width: 0;
}
.km-user-card__name {
	font-weight: 300;
	font-size: 1.5rem;
	color: #fff;
	max-width: 320px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.km-user-card__service {
	width: fit-content;
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	padding: .2rem .5rem;
	border-radius: var(--radius);
	background: var(--accent-strong);
	text-transform: capitalize;
}
.km-user-card__count { color: var(--color0-secondary); font-size: .85rem; }

/* Service badge colours — exact kemono.cr brand hues */
.km-service--patreon       { background: #fa5742; }
.km-service--fanbox        { background: #2c333c; }
.km-service--fantia        { background: #e1097f; }
.km-service--gumroad       { background: #2b9fa4; }
.km-service--subscribestar { background: #009688; }
.km-service--discord       { background: #5165f6; }
.km-service--boosty        { background: #fd6035; }
.km-service--afdian        { background: #9169df; }
.km-service--dlsite        { background: #052a83; }
.km-service--fansly        { background: #2399f7; }
.km-service--candfans      { background: #e8486c; }
.km-service--onlyfans      { background: #008ccf; }

/* -------------------------------------------------------------------------
 * Creator hero (single-creator header)
 * ---------------------------------------------------------------------- */
.km-creator-hero { margin-bottom: 2rem; }
.km-creator-hero__banner {
	height: 220px;
	background-size: cover;
	background-position: center;
	border-radius: var(--radius);
	background-color: var(--color1-tertiary);
}
.km-creator-hero__bar {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin-top: -40px;
	padding: 0 1rem;
	position: relative;
}
.km-creator-hero__avatar {
	width: 120px;
	height: 120px;
	flex: 0 0 120px;
	border-radius: 12px;
	overflow: hidden;
	border: 3px solid var(--color1-primary);
	background: var(--color1-tertiary);
}
.km-creator-hero__avatar img { width: 100%; height: 100%; object-fit: cover; }
.km-creator-hero__meta { padding-top: 44px; }
.km-creator-hero__name { font-size: 2rem; font-weight: 300; margin: 0; }
.km-creator-hero__sub { color: var(--color0-secondary); }
.km-creator-hero__count { color: var(--color0-secondary); }

/* -------------------------------------------------------------------------
 * Single post
 * ---------------------------------------------------------------------- */
/* Bordered post card mirroring kemono.cr's .post (header / body / files /
 * footer), a single outlined block with rounded top+bottom corners. */
.km-post { max-width: 960px; margin: 0 auto; }

/* Header: a left creator column beside a title/date info panel. */
.km-post__header {
	display: flex;
	flex-flow: row nowrap;
	align-items: stretch;
	border: solid hsla(0, 0%, 50%, .7) .125em;
	border-radius: 10px 10px 0 0;
	overflow: hidden;
}
.km-post__user {
	flex: 0 0 220px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	text-align: center;
	background-color: rgba(0, 0, 0, .7);
	border-right: solid hsla(0, 0%, 50%, .7) .125em;
	padding: 1rem .5rem;
	color: var(--color0-primary);
}
.km-post__user:hover { text-decoration: none; }
.km-post__user-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.km-post__user-name { font-weight: 700; }
.km-post__info {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: .5rem;
	background-color: var(--color1-secondary);
	padding: 1rem 1.25rem 1rem 2rem;
}
.km-post__title { font-size: 1.7rem; font-weight: 500; margin: 0; }
.km-post__meta { color: var(--color0-secondary); font-size: .9rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.km-post__published { color: var(--color0-secondary); }

/* Body: bordered left/right, holds the rendered HTML content. */
.km-post__body {
	border-left: solid hsl(0, 0%, 50%) .125em;
	border-right: solid hsl(0, 0%, 50%) .125em;
	background: var(--color1-primary);
	padding: 1rem 1.25rem;
	overflow-wrap: break-word;
}
.km-post__content { line-height: 1.6; }
.km-post__content img { max-width: 100%; height: auto; }
.km-post__body img { max-width: 100%; height: auto; }

/* Files: a centred column for galleries, players and downloads. */
.km-post__files {
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	gap: 1.25rem;
	border-left: solid hsl(0, 0%, 50%) .125em;
	border-right: solid hsl(0, 0%, 50%) .125em;
	background: var(--color1-primary);
	padding: 1rem;
}
.km-post__files > * { width: 100%; margin-top: 0; margin-bottom: 0; }

/* Footer: bordered, rounded bottom corners, holds the prev/next nav. */
.km-post__footer {
	border: solid hsl(0, 0%, 50%) .125em;
	border-radius: 0 0 10px 10px;
	background: var(--color1-secondary);
	padding: .5rem 1rem;
}

/* Vertical, full-size image stack — mirrors kemono.cr's .post__files column:
 * each image at its natural size, centred, one per row (no cropping/grid). */
.km-gallery {
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	gap: .75rem;
}
.km-gallery__item {
	display: block;
	max-width: 100%;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--color1-tertiary);
}
.km-gallery__item img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Inline video / audio players (mp4/webm, mp3/etc. are streamed from the CDN). */
.km-videos { display: flex; flex-direction: column; gap: 1rem; margin: 1.25rem 0; }
.km-video { margin: 0; }
.km-video video {
	width: 100%;
	max-height: 80vh;
	border-radius: var(--radius);
	background: #000;
	display: block;
}
.km-video__name,
.km-audio__name {
	color: var(--color0-secondary);
	font-size: .85rem;
	margin-top: .35rem;
	word-break: break-word;
}
.km-audios { display: flex; flex-direction: column; gap: .75rem; margin: 1.25rem 0; }
.km-audio { margin: 0; }
.km-audio audio { width: 100%; display: block; }

/* External embed (YouTube / link previews Kemono stores on the post detail). */
.km-embed { margin: 1.25rem 0; }
.km-embed__link {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	padding: .9rem 1.1rem;
	border-radius: var(--radius);
	background: var(--color1-secondary);
	border-left: 3px solid var(--accent-strong);
}
.km-embed__link:hover { background: hsl(220, 7%, 30%); text-decoration: none; }
.km-embed__label { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color0-secondary); }
.km-embed__name { font-weight: 600; color: #fff; }
.km-embed__url { font-size: .8rem; color: var(--color0-secondary); word-break: break-all; }

/* Poll — a labelled bar per choice, width = vote share. */
.km-poll { margin: 1.25rem 0; padding: 1rem 1.2rem; border-radius: var(--radius); background: var(--color1-secondary); }
.km-poll__title { font-size: 1.1rem; margin: 0 0 .75rem; }
.km-poll__choices { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.km-poll__choice {
	position: relative;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: .55rem .75rem;
	border-radius: var(--radius);
	background: var(--color1-tertiary);
	overflow: hidden;
}
.km-poll__bar {
	position: absolute;
	inset: 0 auto 0 0;
	background: rgba(80, 101, 246, .35);
	z-index: 0;
}
.km-poll__text,
.km-poll__votes { position: relative; z-index: 1; }
.km-poll__votes { color: var(--color0-secondary); font-size: .85rem; white-space: nowrap; }
.km-poll__total { color: var(--color0-secondary); font-size: .85rem; margin: .6rem 0 0; }

.km-user-card__fav { color: var(--accent-strong); margin-left: .5rem; }

/* Post meta chips (edited / revisions / flagged) */
.km-post__edited,
.km-post__revisions,
.km-post__flagged {
	font-size: .8rem;
	color: var(--color0-secondary);
}
.km-post__flagged { color: #e0a13c; }

/* Prev / next post navigation — lives inside the bordered .km-post__footer. */
.km-post-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 0;
}
.km-post-nav__link {
	padding: .5rem 1rem;
	border-radius: var(--radius);
	background: var(--color1-tertiary);
	color: #fff;
}
.km-post-nav__link:hover { background: hsl(220, 7%, 30%); text-decoration: none; }
.km-post-nav__creator { background: transparent; color: var(--accent); }
.km-post-nav__creator:hover { background: var(--color1-tertiary); }
.km-post-nav__disabled { opacity: .4; pointer-events: none; }

/* Comments — a discussion list below the post card. */
.km-comments { max-width: 960px; margin: 1.75rem auto 0; }
.km-comments__title {
	font-size: 1.3rem;
	font-weight: 600;
	margin: 0 0 1rem;
	display: flex;
	align-items: center;
	gap: .6rem;
}
.km-comments__count {
	font-size: .85rem;
	font-weight: 600;
	color: var(--color0-secondary);
	background: var(--color1-secondary);
	border-radius: 999px;
	padding: .1rem .6rem;
}
.km-comments__empty { color: var(--color0-secondary); }
.km-comments__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.km-comment {
	background: var(--color1-secondary);
	border-radius: var(--radius);
	padding: .8rem 1rem;
}
.km-comment--reply { margin-left: 2rem; border-left: 3px solid var(--accent-strong); }
.km-comment__head {
	display: flex;
	align-items: baseline;
	gap: .75rem;
	margin-bottom: .35rem;
}
.km-comment__author { font-weight: 700; }
.km-comment__date { color: var(--color0-secondary); font-size: .8rem; }
.km-comment__body { line-height: 1.6; overflow-wrap: break-word; }
.km-comment__body p { margin: 0 0 .5rem; }
.km-comment__body p:last-child { margin-bottom: 0; }

/* Creator hero extra stats */
.km-creator-hero__stat { color: var(--color0-secondary); font-size: .9rem; }

/* Linked accounts */
.km-creator-links { margin: 1.25rem 0; }
.km-creator-links__title { font-size: 1.1rem; margin: 0 0 .6rem; }
.km-creator-links__list { display: flex; flex-wrap: wrap; gap: .6rem; }
.km-creator-links__item {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .4rem .75rem;
	border-radius: var(--radius);
	background: var(--color1-secondary);
	color: #fff;
}
.km-creator-links__item:hover { background: hsl(220, 7%, 30%); text-decoration: none; }

/* Announcements */
.km-announcements { margin: 1.25rem 0; }
.km-announcements__title { font-size: 1.1rem; margin: 0 0 .6rem; }
.km-announcement {
	padding: .9rem 1.1rem;
	border-radius: var(--radius);
	background: var(--color1-secondary);
	margin-bottom: .6rem;
}
.km-announcement__date { display: block; color: var(--color0-secondary); font-size: .8rem; margin-bottom: .35rem; }
.km-announcement__body { word-break: break-word; }
.km-announcement__body p { margin: 0 0 .5rem; }

.km-attachments { margin: 1.5rem 0; }
.km-attachments__title { font-size: 1.2rem; margin-bottom: .5rem; }
.km-attachments__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.km-attachments__list a {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .6rem .8rem;
	background: var(--color1-secondary);
	border-radius: var(--radius);
	color: var(--color0-primary);
}
.km-attachments__list a:hover { background: hsl(220, 7%, 30%); text-decoration: none; }
.km-attachments__kind {
	font-size: .7rem;
	text-transform: uppercase;
	background: var(--color1-tertiary);
	padding: .15rem .45rem;
	border-radius: var(--radius);
	color: var(--color0-secondary);
}

/* -------------------------------------------------------------------------
 * Search box (posts page + reusable) — centered, one-third width
 * ---------------------------------------------------------------------- */
.km-search-box {
	margin: 0 auto 1.25rem;
	padding: 8px;
	background-color: var(--sidebar-bg);
	border-radius: var(--radius);
	width: 100%;
	max-width: 33%;
}
.km-search-box__row { display: flex; }
.km-search-box__input {
	flex: 1;
	background: var(--color1-tertiary);
	border: 1px solid var(--color1-secondary);
	border-right: 0;
	border-radius: var(--radius) 0 0 var(--radius);
	color: var(--color0-primary);
	padding: .5rem .75rem;
	font-size: .95rem;
}
.km-search-box__button {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color1-secondary);
	border: 1px solid var(--color1-secondary);
	border-radius: 0 var(--radius) var(--radius) 0;
	color: var(--color0-primary);
	padding: 0 .9rem;
	cursor: pointer;
}
.km-search-box__button img { width: 18px; height: 18px; }
@media (max-width: 900px) {
	.km-search-box { max-width: 100%; }
}

/* -------------------------------------------------------------------------
 * Paginator — numbered page links, kemono.cr style
 * ---------------------------------------------------------------------- */
.km-paginator {
	text-align: center;
	margin: 2rem 0;
}
.km-paginator__pages {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	gap: .4rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.km-paginator__page {
	display: grid;
	place-items: center;
	min-width: 44px;
	min-height: 44px;
}
.km-paginator__link {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	min-width: 44px;
	min-height: 44px;
	padding: .5em;
	background: var(--color1-secondary);
	border-radius: var(--radius);
	color: var(--color0-primary);
}
a.km-paginator__link:hover { background: hsl(220, 7%, 30%); text-decoration: none; }
.km-paginator__page--current .km-paginator__link {
	background: var(--accent-strong);
	color: #fff;
	font-weight: 700;
}
.km-paginator__ellipsis {
	color: var(--color0-tertiary);
	min-width: auto;
}

/* -------------------------------------------------------------------------
 * Footer + broken image
 * ---------------------------------------------------------------------- */
.km-footer {
	border-top: 1px solid var(--color1-secondary);
	padding: 1.5rem;
	color: var(--color0-tertiary);
	font-size: .85rem;
}
.km-footer__inner {
	max-width: 1400px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.km-img--broken { opacity: .35; cursor: pointer; }

/* -------------------------------------------------------------------------
 * Tags cloud, FAQ, prose (importer)
 * ---------------------------------------------------------------------- */
.km-tag-cloud {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}
.km-tag {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .35rem .7rem;
	background: var(--color1-secondary);
	border-radius: var(--radius);
	color: var(--color0-primary);
	font-size: .9rem;
}
.km-tag:hover { background: hsl(220, 7%, 30%); text-decoration: none; }
.km-tag__count {
	background: var(--color1-tertiary);
	color: var(--color0-secondary);
	border-radius: 999px;
	padding: 0 .45rem;
	font-size: .75rem;
}

.km-faq { display: flex; flex-direction: column; gap: .6rem; }
.km-faq__item {
	background: var(--color1-secondary);
	border-radius: var(--radius);
	padding: .25rem .25rem;
}
.km-faq__q {
	cursor: pointer;
	padding: .75rem 1rem;
	font-weight: 600;
	list-style: none;
}
.km-faq__q::-webkit-details-marker { display: none; }
.km-faq__q::before { content: "▸ "; color: var(--accent); }
.km-faq__item[open] .km-faq__q::before { content: "▾ "; }
.km-faq__a { padding: 0 1rem 1rem 1.75rem; color: var(--color0-secondary); line-height: 1.6; }

.km-prose { line-height: 1.75; max-width: 720px; }
.km-prose p { margin: 0 0 1rem; }
.km-prose a { color: var(--accent); }
.km-prose code {
	background: var(--color1-tertiary);
	padding: .1rem .35rem;
	border-radius: 4px;
	font-size: .9em;
}

/* -------------------------------------------------------------------------
 * Responsive — collapse sidebar under 900px
 * ---------------------------------------------------------------------- */
@media (max-width: 900px) {
	.km-sidebar { margin-left: calc(-1 * var(--sidebar-width)); }
	.km-sidebar.is-open { margin-left: 0; }
	.km-content { margin-left: 0; }
	.km-navtoggle { display: block; }
}

/* Post card: stack the creator column above the info panel on narrow screens. */
@media (max-width: 620px) {
	.km-post__header { flex-direction: column; }
	.km-post__user {
		flex: 0 0 auto;
		flex-direction: row;
		justify-content: flex-start;
		gap: .6rem;
		border-right: 0;
		border-bottom: solid hsla(0, 0%, 50%, .7) .125em;
	}
	.km-post__user-avatar { width: 44px; height: 44px; }
	.km-post__info { padding: 1rem; }
	.km-post__title { font-size: 1.4rem; }
}