.admin {
	padding: 4px;
	border-radius: 4px;
	background: green;
	margin: 6px;
	width: 200px;
	display: inline-block;
}
.admin.protected {
	background: red;
}
.admin INPUT[type="submit"] {
	width: 100%;
}
.admin.protected INPUT[type="submit"] {
	width: 90%;
}


.bbcode {
	overflow-wrap: anywhere;
}
.bbcode BLOCKQUOTE {
	border: 1px solid black;
	padding: 8px;
	background: #DDD;
}
.bbcode .anchor A.alink {
	visibility: hidden;
}
.bbcode .anchor:hover A.alink {
	visibility: visible;
}

.comment {
	text-align: left;
	position: relative;
	overflow-wrap: anywhere;
}
.comment IMG {
	max-width: 100%;
}
.comment .info {
	visibility: hidden;
	text-align: center;
	padding: var(--block-padding);
	background: var(--block);
	border: 1px solid var(--block-border);
	position: absolute;
	top: 0;
	left: -180px;
	width: 180px;
	z-index: 1;
	box-shadow: 0 0 4px #000;
	border-radius: 4px;
}
.comment:hover .info {
	visibility: visible;
}

.comment_add INPUT:not([type="checkbox"]):not([type="radio"]),
.comment_add TEXTAREA,
.comment_add BUTTON,
.comment_add SELECT {
	width: 100%;
}

#comment-list-recent .more {
	display: block;
	padding-top: 8px;
}
.comment_big_list {
	display: flex;
	gap: 1em;
}
.comment_big_list .thumb {
	flex: 0;
}
.comment_big_list .comment_list {
	flex: 1;
	border-left: 1px solid var(--block-border);
}
.comment_big_list .comment {
	margin-left: 0;
}

/* checkbox, title, doc link */
.ext-list TD:nth-child(1) {
    width: 1em;
}
.ext-list TD:nth-child(2) {
    width: 12em;
}
.ext-list TD:nth-child(3) {
    width: 1em;
}

#handle_pixel_media IMG {
    max-width: 100%;
}

.command_example {
	margin: 12pt;
	padding-left: 16pt;
}

.command_example code {
    padding:4pt;
    border: dashed 2px black;
    background: inherit;
}

.command_example p {
    padding-left: 16pt;
}

@media (min-width: 750px) {
    .command_example code {
        display: table-cell;
        width: 256px;
    }

    .command_example p {
        display: table-cell;
    }
}

SECTION#image-list {
	box-shadow: none;
}
SECTION#image-list .blockbody {
	background: none;
	border: none;
	padding: 0px;
	text-align: left;
}
.shm-image-list {
	display: grid;
	grid-template-columns: repeat( auto-fill, calc(var(--thumb-width) + 42px) );
	place-items: center;
}
.shm-image-list .thumb {
	margin-bottom: 8px;
}

.setupblocks {
	column-width: 400px;
	column-gap: 1em;
	max-width: 1200px;
	margin: auto;
}
.setupblocks > .setupblock:first-of-type { margin-top: 0; }

.setupblock {
	break-inside: avoid;
	text-align: center;
}
.setupblock TEXTAREA {
	width: 100%;
	font-size: 0.75rem;
	resize: vertical;
}
.setupblock SELECT[multiple] {
	width: 100%;
}

.advanced_settings INPUT {
	width: 100%;
}

#Setupmain {
	box-shadow: none;
}
#Setupmain>.blockbody {
	background: none;
	border: none;
	margin: 0;
	padding: 0;
}
.setupblock .form {
	width: 100%;
}
.setupblock .form TH {
	font-weight: normal;
}
.setupblock .advanced {
    color: var(--danger-color);
    background: var(--danger-background);
}
.setupsubmit {
	margin-top: 1em;
	padding: 1em;
	width: 100%;
}

:root {
	--added-background: lightgreen;
	--removed-background: lightcoral;

	--flash-color: #882;
	--flash-border: #660;
	--blink-base-color: #FF70;
	--blink-blink-color: #FF7F;
}

@media (prefers-color-scheme: dark) {
	:root {
		--added-background: green;
		--removed-background: coral;
	}
}

INPUT, TEXTAREA, SELECT, BUTTON {
	box-sizing: border-box;
	font-size: 1em;
}

TABLE.form {width: 300px;}
TABLE.zebra {width: 100%;}

TABLE.form TD, TABLE.form TH {vertical-align: middle;}
TABLE.form TBODY TR TD {text-align: left;}
TABLE.form TBODY TR TH {text-align: right; padding-right: 4px; width: 1%; white-space: nowrap;}
TABLE.form TBODY TR.header TD,
TABLE.form TBODY TR.header TH {text-align: center; width: auto;}
TABLE.form TD + TH {padding-left: 8px;}
TABLE.form INPUT:not([type="checkbox"]):not([type="radio"]),
TABLE.form SELECT,
TABLE.form TEXTAREA,
TABLE.form BUTTON {width: 100%;}

H1, H2, H3 {
    overflow-wrap: anywhere;
}

*[onclick],
H3[class~="shm-toggler"] {
    cursor: pointer;
}

@keyframes blink {
    0% {background-color: var(--blink-base-color);}
    25% {background-color: var(--blink-blink-color);}
    50% {background-color: var(--blink-base-color);}
    75% {background-color: var(--blink-blink-color);}
    100% {background-color: var(--blink-base-color);}
}
.blink {
    animation: blink 2s linear 1;
}

#flash {
    color: #444;
    background-color: var(--flash-color);
    margin-bottom: 1rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--flash-border);
}
#flash B {
    display: block;
    padding: 8px;
    border-radius: var(--border-radius);
}

.tag {
    overflow-wrap: anywhere;
}

.prose {
    text-align: left;
}
.prose P:first-child {
    margin-top: 0;
}
.prose P:last-child {
    margin-bottom: 0;
}

TABLE#large_upload_form.form {
	width: 100%;
}

.mini_upload INPUT:not([type="checkbox"]):not([type="radio"]),
.mini_upload TEXTAREA,
.mini_upload BUTTON,
.mini_upload SELECT {
	width: 100%;
}

TABLE.form.image_info {
    width: 550px;
    max-width: 100%;
}

.image_info .edit {
    display: block;
}
.image_info .view {
    display: none;
}

.image_info.infomode-view .edit {
    display: none;
}
.image_info.infomode-view .view {
    display: block;
}

.image_info TEXTAREA {
    min-width: 100%;
    min-height: 3rem;
}
.image_info .image-info-sidebar-box {
    vertical-align: top;
}

.post_controls FORM {
    margin-bottom: 0.75em;
}
.post_controls FORM:last-child {
    margin-bottom: 0;
}

#downtime #message, #downtime #login {
	text-align: center;
}
#downtime H3 {
	margin-top: 32px;
}
#downtime #login_table {
	margin: auto;
}


/* Colours fall back to neutral values on themes without these variables */

#main_image.booru-nav-full {
	max-width: none !important;
	max-height: none !important;
}

/* "fit to screen": the space below the header, measured by script.js */
#shm_post_media #main_image.fit-both {
	max-height: var(--booru-fit-height, 95vh);
}

#booru-nav-toast {
	position: fixed;
	left: 50%;
	bottom: 1.5rem;
	z-index: 1000;
	padding: 0.5rem 1rem;
	background: var(--badge-bg, rgba(0, 0, 0, 0.8));
	color: var(--badge-fg, #fff);
	border-radius: var(--radius, 4px);
	box-shadow: var(--shadow, 0 2px 8px rgba(0, 0, 0, 0.3));
	font-weight: bold;
	opacity: 0;
	transform: translate(-50%, 0.5rem);
	transition: opacity 0.15s, transform 0.15s;
	pointer-events: none;
}
#booru-nav-toast.visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

.search-seq A.disabled {
	color: var(--muted, #999);
	opacity: 0.6;
}

.booru-nav-notice {
	margin: 0 0 0.6rem;
	padding: 0.45rem 0.8rem;
	background: var(--panel, #f4f4f4);
	border: 1px solid var(--panel-border, #ccc);
	border-radius: var(--radius, 4px);
	color: var(--text, inherit);
	font-size: 0.9em;
}
.booru-nav-notice[hidden] {
	display: none;
}
.booru-nav-notice BUTTON {
	padding: 0;
	background: none;
	border: none;
	color: var(--link, #0645ad);
	font: inherit;
	font-weight: bold;
	cursor: pointer;
}
.booru-nav-notice BUTTON:hover {
	background: none;
	text-decoration: underline;
}

#booru-nav-help {
	min-width: 18rem;
	padding: 1rem 1.25rem;
	background: var(--page, #fff);
	color: var(--text, #222);
	border: 2px solid var(--panel-border, #ccc);
	border-radius: var(--radius, 4px);
	box-shadow: var(--shadow, 0 4px 16px rgba(0, 0, 0, 0.3));
}
#booru-nav-help::backdrop {
	background: rgba(0, 0, 0, 0.45);
}
#booru-nav-help H3 {
	margin: 0 0 0.75rem;
}
#booru-nav-help TABLE {
	width: 100%;
	margin-bottom: 0.75rem;
	border-collapse: collapse;
}
#booru-nav-help TD {
	padding: 0.25rem 0.5rem 0.25rem 0;
	vertical-align: middle;
}
#booru-nav-help KBD {
	display: inline-block;
	min-width: 1.6em;
	padding: 0.1em 0.45em;
	background: var(--panel, #eee);
	border: 1px solid var(--panel-border, #bbb);
	border-bottom-width: 2px;
	border-radius: 4px;
	font-family: inherit;
	font-size: 0.85em;
	text-align: center;
	white-space: nowrap;
}

.tagcategoryblock {
	margin:0.6rem 1rem 0.6rem 0;
	padding:0.5rem 0.6rem 0.7rem;
	width:18rem;
	border:1px solid #AAAAAA;
	border-radius:0.25rem;
	display:inline-block;
}
.tagcategoryblock table {
	width:100%;
	border-spacing:0;
}
.tagcategoryblock input, .tagcategoryblock span {
	width:100%;
	height:100%;
}
.tagcategoryblock td:first-child {
	padding:0.3rem 0.7rem 0.4rem 0;
	text-align:right;
	width:40%;
}
.tagcategoryblock td:last-child {
	width:60%;
}
.tagcategoryblock td:last-child span {
	width:7ch;
	padding:0.24rem 0.7rem 0.5rem 0;
}
.tagcategoryblock button {
	width:100%;
	margin-top:0.4rem;
	padding:0.2rem 0.6rem;
}

.tagcategoryblock input[type="color"] {
	height: 22px;
}

.tagcategoryblock .tc_colorswatch {
	display:inline-block;
	vertical-align:middle;
	height:1.25rem;
	width:1.25rem;
	border-radius:4px;
}

/* State-based visibility rules */
/* Hide all state-dependent elements by default */
.tagcategoryblock .tc-view,
.tagcategoryblock .tc-edit,
.tagcategoryblock .tc-delete {
	display: none;
}

/* In viewing mode: show view elements only */
.tagcategoryblock.tc-viewing .tc-view {
	display: inline-block;
}

/* In editing mode: show edit elements only */
.tagcategoryblock.tc-editing .tc-edit {
	display: block;
}

/* In deleting mode: show edit and delete elements */
.tagcategoryblock.tc-deleting .tc-edit,
.tagcategoryblock.tc-deleting .tc-delete {
	display: block;
}

.pools_next_img {
	display: block;
	font-size: 77%;
	text-align: right;
	float: right;
}

.pools_prev_img {
	display: block;
	font-size: 77%;
	text-align: left;
	float: left;
}

/*
 * Colours fall back to neutral values on themes without these variables.
 * "svg" must stay lowercase: SVG tag names are case-sensitive in CSS, and
 * Firefox won't match "SVG" (leaving the icons default black).
 */

.post-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem 0;
}

.post-actions .pa-group {
	display: inline-flex;
	align-items: center;
	gap: 0.15rem;
	padding: 0.15rem 0.4rem 0.15rem 0.15rem;
	background: var(--panel, #f4f4f4);
	border: 1px solid var(--panel-border, #ccc);
	border-radius: 999px;
}
.post-actions .pa-vote {
	padding-right: 0.15rem;
}

/* icon buttons: plain, round, coloured when pressed */
.post-actions .pa-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	background: none;
	border: none;
	border-radius: 50%;
	color: var(--muted, #888);
	cursor: pointer;
	transition: color 0.12s, background 0.12s, transform 0.12s;
}
.post-actions .pa-btn svg {
	width: 1.25rem;
	height: 1.25rem;
	fill: currentColor;
}
.post-actions .pa-btn:hover:not(:disabled) {
	background: var(--hover-bg, #eee);
	transform: scale(1.1);
}
.post-actions .pa-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}
.post-actions .pa-btn:focus-visible {
	outline: none;
	box-shadow: var(--glow, 0 0 0 3px rgba(0, 120, 255, 0.4));
}

.post-actions .pa-vote-up[aria-pressed="true"],
.post-actions .pa-vote-up:hover:not(:disabled) { color: var(--good, #2a2); }
.post-actions .pa-vote-down[aria-pressed="true"],
.post-actions .pa-vote-down:hover:not(:disabled) { color: var(--bad, #c33); }
.post-actions .pa-favorite:hover:not(:disabled) { color: var(--warn, #e6a800); }

/* the star is an outline until favorited */
.post-actions .pa-favorite svg {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linejoin: round;
}
.post-actions .pa-favorite[aria-pressed="true"] {
	color: var(--warn, #e6a800);
}
.post-actions .pa-favorite[aria-pressed="true"] svg {
	fill: currentColor;
}

.post-actions .pa-score,
.post-actions .pa-fav-count {
	min-width: 1.6rem;
	font-weight: bold;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
.post-actions .pa-score.score-up { color: var(--good, #2a2); }
.post-actions .pa-score.score-down { color: var(--bad, #c33); }

.post-actions .pa-download {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.35rem 0.8rem;
	background: var(--accent, #888);
	color: var(--accent-fg, #fff);
	border-radius: 999px;
	font-weight: bold;
}
.post-actions .pa-download:hover {
	background: var(--accent-strong, #666);
	color: var(--accent-fg, #fff);
	text-decoration: none;
}
.post-actions .pa-download svg {
	width: 1.1rem;
	height: 1.1rem;
	fill: currentColor;
}

@keyframes pa-shake {
	25% { transform: translateX(-3px); }
	75% { transform: translateX(3px); }
}
.post-actions .pa-failed {
	animation: pa-shake 0.2s 2;
	color: var(--bad, #c33);
}

/* Colours fall back to neutral values on themes without these variables */

/*
 * The avatar itself: a square window onto the image. Its size can be set by
 * whatever contains it; the crop is in percentages so it scales with it.
 */
.avatar-crop {
	position: relative;
	display: inline-block;
	width: var(--avatar-crop-size, 128px);
	max-width: 100%;
	/* square from its width, so a narrow container can't distort the crop */
	height: auto;
	aspect-ratio: 1;
	overflow: hidden;
	vertical-align: middle;
	background: var(--panel, #eee);
}
.avatar-crop > IMG.avatar-crop-img {
	position: absolute;
	max-width: none;
	max-height: none;
	object-fit: fill;
	user-select: none;
	-webkit-user-drag: none;
}

/* ---------- editor ---------- */

.avatar-crop-editor {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	align-items: flex-start;
}
.ace-stage {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	width: min(100%, 22rem);
}
.avatar-crop.ace-viewport {
	width: 100%;
	border-radius: var(--radius, 6px);
	box-shadow: var(--shadow, 0 2px 8px rgba(0, 0, 0, 0.25));
	cursor: grab;
	touch-action: none;
}
.avatar-crop.ace-viewport.dragging {
	cursor: grabbing;
}
/* round guide: profile pictures are often shown as circles */
.avatar-crop.ace-viewport::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.28);
	outline: 2px solid rgba(255, 255, 255, 0.85);
	outline-offset: -2px;
	pointer-events: none;
}
.ace-hint {
	margin: 0;
	color: var(--muted, #888);
	font-size: 0.85em;
	text-align: center;
}
.ace-zoom {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}
.ace-zoom INPUT {
	flex: 1;
}

.ace-side {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.ace-label {
	margin: 0;
	font-weight: bold;
}
.ace-previews {
	display: flex;
	align-items: flex-end;
	gap: 1rem;
}
.avatar-crop.ace-preview-large {
	width: 6rem;
	border-radius: 50%;
}
.avatar-crop.ace-preview-small {
	width: 2.5rem;
	border-radius: 50%;
}
.ace-side FORM {
	display: flex;
	gap: 0.5rem;
}

.avatar-editor .avatar-container {
    border: 2px solid var(--text);
}

#Statsmain .avatar-container,
.avatar-editor .avatar-container {
    margin: 0 auto;
    width: min(var(--pavatar-width), 192px);
    height: min(var(--pavatar-height), 192px);
    max-width: 192px;
    max-height: 192px;
}

#Statsmain .avatar,
.avatar-editor .avatar {
    max-width: 192px;
    max-height: 192px;
}

.avatar-container {
    overflow: hidden;
    width: var(--pavatar-width);
    height: var(--pavatar-height);
    max-width: 100%;
    text-align: center;
    display: inline-block;
}

/* Colours fall back to neutral values on themes without these variables */

.uh-drop {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-height: 11rem;
	margin-bottom: 1rem;
	padding: 1.5rem;
	background: var(--panel, #f6f6f6);
	border: 2px dashed var(--panel-border, #bbb);
	border-radius: var(--radius, 6px);
	color: var(--text, inherit);
	text-align: center;
	cursor: pointer;
	transition: border-color 0.12s, background 0.12s, min-height 0.2s;
}
.uh-drop.uh-has-items {
	min-height: 6rem;
}
.uh-drop:hover,
.uh-drop:focus-visible,
.uh-drop.uh-dragging {
	border-color: var(--accent-strong, #888);
	background: var(--hover-bg, #eee);
	outline: none;
}
.uh-drop.uh-dragging {
	box-shadow: var(--glow, 0 0 0 3px rgba(0, 0, 0, 0.15));
}
.uh-drop-text {
	font-size: 1.1rem;
}
.uh-drop-text BUTTON {
	padding: 0;
	background: none;
	border: none;
	color: var(--link, #0645ad);
	font: inherit;
	font-weight: bold;
	text-decoration: underline;
	cursor: pointer;
}
.uh-url-row {
	display: flex;
	gap: 0.4rem;
	width: min(100%, 28rem);
	cursor: default;
}
.uh-url-row INPUT {
	flex: 1;
	min-width: 0;
}

/* one card per file */
.uh-queue {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr));
	gap: 0.75rem;
	margin-bottom: 1rem;
}
.uh-queue:empty {
	display: none;
}
.uh-item {
	display: flex;
	gap: 0.75rem;
	padding: 0.6rem;
	background: var(--panel, #f6f6f6);
	border: 1px solid var(--panel-border, #ccc);
	border-radius: var(--radius, 6px);
}
.uh-item.uh-skipped {
	opacity: 0.65;
}
.uh-item.uh-skipped .uh-fields {
	display: none;
}
.uh-preview {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 6.5rem;
	height: 6.5rem;
	overflow: hidden;
	background: var(--page, #fff);
	border-radius: calc(var(--radius, 6px) - 2px);
	color: var(--muted, #888);
	font-weight: bold;
}
.uh-preview IMG,
.uh-preview VIDEO {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.uh-info {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.35rem;
	min-width: 0;
}
.uh-head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.uh-name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	font-weight: bold;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.uh-size {
	color: var(--muted, #888);
	font-size: 0.85em;
	white-space: nowrap;
}
.uh-remove {
	flex: none;
	width: 1.6rem;
	height: 1.6rem;
	padding: 0;
	background: none;
	border: none;
	border-radius: 50%;
	color: var(--muted, #888);
	cursor: pointer;
}
.uh-remove:hover {
	background: var(--hover-bg, #eee);
	color: var(--bad, #c33);
}

.uh-status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.85em;
}
.uh-status-pending { color: var(--muted, #888); }
.uh-status-ok { color: var(--good, #2a2); }
.uh-status-bad { color: var(--bad, #c33); font-weight: bold; }
.uh-existing-thumb {
	max-width: 2.5rem;
	max-height: 2.5rem;
	border-radius: 3px;
}

.uh-fields {
	display: grid;
	gap: 0.3rem;
}
.uh-field {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr);
	align-items: center;
	gap: 0.4rem;
	font-size: 0.9em;
}
.uh-field > SPAN {
	color: var(--muted, #888);
}
.uh-field INPUT,
.uh-field SELECT {
	width: 100%;
}

/* upload progress */
.uh-progress {
	position: relative;
	height: 1.8rem;
	margin-bottom: 1rem;
	overflow: hidden;
	background: var(--panel, #eee);
	border: 1px solid var(--panel-border, #ccc);
	border-radius: 999px;
}
.uh-progress[hidden] {
	display: none;
}
.uh-progress > DIV {
	width: 0;
	height: 100%;
	background: var(--accent-strong, #888);
	transition: width 0.15s;
}
.uh-progress > SPAN {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	font-size: 0.85em;
}

#handle_video_media VIDEO {
    width: 100%;
    max-height: 85vh;
    background: black;
}

.autocomplete_completions {
    position: absolute;
    z-index: 1000;
    border: 1px solid #ccc;
    color: #000;
    background-color: #fff;
    padding: 5px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 1em;
    white-space: nowrap;
    overflow: hidden;
    text-align: left;
}
.autocomplete_completions LI {
    padding: 0.15em;
}
.autocomplete_completions .selected {
    background-color: #ccc;
    outline: none;
}

.stats-table{display:inline-table;width:auto;}
.stats-container{display:inline-block;margin:10px;}
.thumb IMG {
	border-width: 2px !important;
}

.shm-thumb-has_child img {
	border-color: lime !important;
}

.shm-thumb-has_parent img {
	border-color: #cc0 !important;
}

.shm-thumb-has_child.shm-thumb-has_parent img {
	border-color: lime #cc0 #cc0 lime !important;
}

#reportedimage .reason {
	max-width: 30em;
	overflow-wrap: anywhere;
}
#reportedimage .formstretch INPUT {
	width: 100%;
}

.added-tag{background:var(--added-background);}
.deleted-tag{background:var(--removed-background);text-decoration:line-through;}

/* ==========================================================================
   Kawaii Pink: a gallery-first Shimmie2 theme in a soft pastel palette
   ========================================================================== */

:root {
	color-scheme: light dark;

	/* surfaces */
	--page: #FFF8FA;
	--surface: #FFFFFF;
	--panel: #FFF0F5;
	--panel-border: #F5D5E0;
	--header-bg: rgba(255, 252, 253, 0.86);
	--header-fg: #4A2433;
	--subnav-bg: #FFF0F5;
	--hover-bg: #FFE6EF;
	--input-bg: #FFFFFF;

	/* text + links */
	--text: #3D2230;
	--muted: #8C6173;
	--link: #C2255C;
	--link-hover: #E64980;
	--tag-count: #B0899A;

	/* accents */
	--accent: #E8508A;
	--accent-strong: #D6336C;
	--accent-soft: #FFD6E5;
	--accent-fg: #FFFFFF;
	--lavender: #EDE4FF;
	--lavender-fg: #6741D9;
	--selected-bg: #FFF8FA;
	--danger-bg: #FFE3EA;
	--danger-fg: #8A1538;

	/* tag categories */
	--cat-artist: #D9480F;
	--cat-copyright: #9C36B5;
	--cat-character: #2B8A3E;
	--cat-species: #C2255C;
	--cat-meta: #5C677D;

	/* status colours: score, ratings, badges */
	--good: #2B8A3E;
	--bad: #D6336C;
	--warn: #B07A00;
	--badge-bg: rgba(46, 18, 32, 0.78);
	--badge-fg: #FFF8FA;

	--radius: 10px;
	--radius-lg: 18px;
	--shadow: 0 1px 2px rgba(120, 40, 70, 0.06), 0 4px 14px rgba(120, 40, 70, 0.08);
	--shadow-lift: 0 2px 4px rgba(120, 40, 70, 0.08), 0 12px 28px rgba(120, 40, 70, 0.16);
	--glow: 0 0 0 3px rgba(232, 80, 138, 0.3);

	--font: "Nunito", ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, -apple-system, sans-serif;
	--gutter: 1.5rem;
	--sidebar: 15rem;
	--row-height: calc(var(--thumb-height, 192px) + 24px);
	--header-height: 4rem;
}

@media (prefers-color-scheme: dark) {
	:root {
		--page: #1C1317;
		--surface: #261A20;
		--panel: #2E2027;
		--panel-border: #47313C;
		--header-bg: rgba(28, 19, 23, 0.86);
		--header-fg: #FFE4ED;
		--subnav-bg: #2E2027;
		--hover-bg: #3A2831;
		--input-bg: #1C1317;

		--text: #F7E6EC;
		--muted: #BE9DAA;
		--link: #FF9EC0;
		--link-hover: #FFC2D6;
		--tag-count: #94737F;

		--accent: #F06595;
		--accent-strong: #FF8FB3;
		--accent-soft: #4A2635;
		--accent-fg: #1C1317;
		--lavender: #2F2645;
		--lavender-fg: #C5B3FF;
		--selected-bg: #1C1317;
		--danger-bg: #4D1F30;
		--danger-fg: #FFE4ED;

		--cat-artist: #FFA94D;
		--cat-copyright: #E599F7;
		--cat-character: #8CE99A;
		--cat-species: #FFA8C5;
		--cat-meta: #ADB5BD;

		--good: #69DB7C;
		--bad: #FF8FB3;
		--warn: #FFD43B;
		--badge-bg: rgba(10, 4, 8, 0.78);
		--badge-fg: #FFE4ED;

		--shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.25);
		--shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.35), 0 12px 28px rgba(0, 0, 0, 0.45);
		--glow: 0 0 0 3px rgba(255, 143, 179, 0.3);
	}
}

/* ---------- base ---------- */

* {
	box-sizing: border-box;
}

:root {
	font-size: 15px;
	font-family: var(--font);
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
}

BODY {
	margin: 0;
	background: var(--page);
	color: var(--text);
}

BODY.layout-grid,
BODY.layout-no-left {
	display: grid;
	grid-template-columns: var(--sidebar) minmax(0, 1fr);
	grid-template-rows: auto 1fr auto;
	column-gap: var(--gutter);
	min-height: 100vh;
}

A,
A:visited {
	color: var(--link);
	text-decoration: none;
}
A:hover {
	color: var(--link-hover);
}

H1, H2, H3, H4, H5 {
	margin: 0;
	line-height: 1.25;
}
H4 { font-size: 1.2rem; }
H5 { font-size: 1.05rem; }

CODE {
	background: var(--panel);
	padding: 0 0.3rem;
	border-radius: 4px;
	font-size: 0.9rem;
}

HR {
	border: none;
	border-top: 1px solid var(--panel-border);
}

::selection {
	background: var(--accent);
	color: var(--accent-fg);
}

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

.skip-link {
	position: absolute;
	top: -3rem;
	left: 1rem;
	z-index: 200;
	padding: 0.5rem 1rem;
	background: var(--accent-strong);
	color: var(--accent-fg) !important;
	border-radius: 999px;
	font-weight: 700;
}
.skip-link:focus {
	top: 0.5rem;
}

/* ---------- header: logo, search, tabs, account in one sticky bar ---------- */

HEADER {
	position: sticky;
	top: 0;
	z-index: 100;
	grid-column: 1 / -1;
	grid-row: 1;
	margin-bottom: 1.25rem;
	background: var(--header-bg);
	color: var(--header-fg);
	border-bottom: 1px solid var(--panel-border);
	-webkit-backdrop-filter: saturate(1.4) blur(12px);
	backdrop-filter: saturate(1.4) blur(12px);
}

.header-bar {
	display: flex;
	align-items: center;
	gap: 0.75rem 1.25rem;
	min-height: var(--header-height);
	padding: 0.5rem var(--gutter);
}

HEADER #site-title {
	flex: none;
	font-size: 1.3rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	white-space: nowrap;
}
HEADER #site-title A,
HEADER #site-title A:visited {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	color: var(--header-fg);
}
HEADER #site-title .logo {
	flex: none;
	width: 2rem;
	height: 2rem;
}

/* search: always visible, the main way around an art site */
.header-search {
	position: relative;
	display: flex;
	flex: 1 1 18rem;
	max-width: 34rem;
	order: 2;
}
.header-search INPUT[type="search"] {
	flex: 1;
	min-width: 0;
	height: 2.6rem;
	padding: 0 3rem 0 1.1rem;
	background: var(--panel);
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: 0.95rem;
}
.header-search INPUT[type="search"]:hover {
	border-color: var(--panel-border);
}
.header-search INPUT[type="search"]:focus {
	background: var(--input-bg);
	border-color: var(--accent);
}
.header-search BUTTON {
	position: absolute;
	top: 0.3rem;
	right: 0.3rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border-radius: 50%;
}
.header-search BUTTON svg,
.upload-button svg,
.menu-toggle svg {
	fill: currentColor;
}

.header-tabs {
	display: contents;
}

HEADER UL#navbar,
HEADER UL#navbar-right,
HEADER UL#subnavbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}
HEADER UL#navbar {
	order: 1;
	gap: 0.15rem;
}
HEADER UL#navbar-right {
	order: 3;
	gap: 0.5rem;
	margin-left: auto;
	flex: none;
}
HEADER UL LI {
	margin: 0;
	padding: 0;
	list-style: none;
}

HEADER UL#navbar LI A,
HEADER UL#navbar-right LI A.tab,
HEADER UL#navbar-right LI A.current-page:not(.upload-button):not(.account-link):not(.sign-in) {
	display: inline-block;
	padding: 0.45rem 0.8rem;
	color: var(--header-fg);
	font-weight: 700;
	border-radius: 999px;
	transition: background 0.12s, color 0.12s;
}
HEADER UL#navbar LI A:hover,
HEADER UL#navbar-right LI A.tab:hover {
	background: var(--hover-bg);
}
HEADER UL#navbar LI A.current-page,
HEADER UL#navbar-right LI A.current-page:not(.upload-button):not(.account-link):not(.sign-in) {
	background: var(--accent-soft);
	color: var(--accent-strong);
}

A.upload-button,
A.upload-button:visited,
A.sign-in,
A.sign-in:visited {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 1.05rem;
	border-radius: 999px;
	font-weight: 800;
	white-space: nowrap;
	transition: background 0.12s, transform 0.12s, box-shadow 0.12s;
}
A.upload-button,
A.upload-button:visited {
	background: var(--accent);
	color: var(--accent-fg);
	box-shadow: var(--shadow);
}
A.upload-button:hover {
	background: var(--accent-strong);
	color: var(--accent-fg);
	transform: translateY(-1px);
}
A.sign-in,
A.sign-in:visited {
	border: 1.5px solid var(--accent);
	color: var(--accent-strong);
}
A.sign-in:hover {
	background: var(--accent-soft);
}

A.account-link,
A.account-link:visited {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.2rem 0.8rem 0.2rem 0.2rem;
	color: var(--header-fg);
	border-radius: 999px;
	font-weight: 700;
}
A.account-link:hover,
A.account-link.current-page {
	background: var(--hover-bg);
}
.account-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 2.1rem;
	height: 2.1rem;
	overflow: hidden;
	background: linear-gradient(135deg, #FFA8C5, #B197FC);
	color: #FFFFFF;
	border-radius: 50%;
	font-weight: 800;
}
/* plain avatars (Gravatar, avatar_post without the crop extension) */
.account-avatar .avatar-container {
	width: 100%;
	height: 100%;
}
.account-avatar IMG:not(.avatar-crop-img) {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* avatars cropped from posts: fill the circle, keeping the crop's framing */
.account-avatar .avatar-crop {
	--avatar-crop-size: 100%;
	display: block;
	width: 100%;
}
.account-name {
	max-width: 9rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* the menu button only shows on small screens */
.menu-toggle-input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.menu-toggle {
	display: none;
}

/* sub-navigation: the current section's pages as soft chips */
HEADER UL#subnavbar {
	gap: 0.3rem;
	padding: 0 var(--gutter) 0.6rem;
}
HEADER UL#subnavbar:empty {
	display: none;
}
HEADER UL#subnavbar A,
HEADER UL#subnavbar A:visited {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	background: var(--panel);
	color: var(--header-fg);
	border-radius: 999px;
	font-size: 0.88rem;
	font-weight: 600;
	white-space: nowrap;
	transition: background 0.12s;
}
HEADER UL#subnavbar A:hover {
	background: var(--hover-bg);
}
HEADER UL#subnavbar A.current-page {
	background: var(--accent);
	color: var(--accent-fg);
}

/* labelled groups, e.g. admin links under Site / Content / Moderation / Users */
HEADER UL#subnavbar .sub-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem;
}
HEADER UL#subnavbar .sub-group + .sub-group {
	margin-left: 0.5rem;
	padding-left: 0.75rem;
	border-left: 1px solid var(--panel-border);
}
HEADER UL#subnavbar .sub-group-end {
	margin-left: auto;
}
.sub-group-label {
	margin-right: 0.1rem;
	color: var(--muted);
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

#subtitle {
	padding: 0.4rem var(--gutter);
	font-size: 0.85rem;
	background: var(--panel);
	border-top: 1px solid var(--panel-border);
}

/* blotter: site news as a slim notice bar */
#blotter1 {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.35rem var(--gutter);
	background: var(--lavender);
	color: var(--lavender-fg);
	font-size: 0.82rem;
}
#blotter1 > SPAN[style] {
	position: static !important;
}
#blotter1 A {
	color: var(--lavender-fg);
	font-weight: 700;
}
#blotter2 {
	padding: 0 var(--gutter) 0.4rem;
	background: var(--lavender);
	font-size: 0.88rem;
}
#blotter2 UL {
	margin: 0;
	padding-left: 1.1rem;
}
#blotter2 LI SPAN[style] {
	color: var(--lavender-fg) !important;
	font-weight: 700;
}

/* ---------- sidebar: light lists, no heavy boxes ---------- */

NAV {
	grid-column: 1;
	grid-row: 2;
	padding: 0 0 1.5rem var(--gutter);
	font-size: 0.92rem;
}

NAV SECTION + SECTION {
	margin-top: 1.4rem;
}

NAV SECTION > H3 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 0 0.45rem;
	color: var(--muted);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	user-select: none;
}
NAV SECTION > H3.shm-toggler::after {
	content: "–";
	opacity: 0.5;
}
NAV SECTION > H3.shm-toggler:hover {
	color: var(--accent-strong);
}

NAV SECTION > .blockbody {
	overflow-wrap: anywhere;
}

NAV TABLE {
	width: 100%;
}
NAV TD {
	vertical-align: middle;
}

NAV INPUT[type="text"],
NAV INPUT[type="search"],
NAV INPUT[type="password"],
NAV INPUT[type="email"],
NAV SELECT,
NAV TEXTAREA {
	width: 100%;
}

/* ---------- tag lists (sidebar + post page) ---------- */

TABLE.tag_list {
	width: 100%;
	border-collapse: collapse;
}
TABLE.tag_list > THEAD {
	display: none;
}
TABLE.tag_list > TBODY > TR {
	display: flex;
	align-items: baseline;
	gap: 0.35rem;
	padding: 0.05rem 0.35rem;
	margin: 0 -0.35rem;
	border-radius: 6px;
}
TABLE.tag_list > TBODY > TR > TD {
	display: block;
	padding: 0;
	text-align: left;
	line-height: 1.7;
}
TABLE.tag_list > TBODY > TR > TD.tag_name_cell {
	flex: 1;
	min-width: 0;
	font-weight: 600;
}
TABLE.tag_list > TBODY > TR:hover {
	background: var(--hover-bg);
}
TABLE.tag_list .ars {
	white-space: nowrap;
	opacity: 0;
	transition: opacity 0.12s;
}
TABLE.tag_list > TBODY > TR:hover .ars,
TABLE.tag_list .ars:focus-within {
	opacity: 1;
}
@media (hover: none) {
	TABLE.tag_list .ars { opacity: 1; }
}
TABLE.tag_list .ars A {
	display: inline-block;
	min-width: 1.1em;
	color: var(--muted);
	font-weight: 800;
	text-align: center;
}
TABLE.tag_list .ars A.ars-add:hover { color: var(--good); }
TABLE.tag_list .ars A.ars-subtract:hover,
TABLE.tag_list .ars A.ars-remove:hover { color: var(--bad); }
/* the wiki "?" link, like + – ×, only shows on hover */
TABLE.tag_list > TBODY > TR > TD.tag_info_link_cell {
	order: 3;
	font-size: 0.8em;
	opacity: 0;
}
TABLE.tag_list > TBODY > TR:hover > TD.tag_info_link_cell,
TABLE.tag_list > TBODY > TR > TD.tag_info_link_cell:focus-within {
	opacity: 1;
}
@media (hover: none) {
	TABLE.tag_list > TBODY > TR > TD.tag_info_link_cell { display: none; }
}
TABLE.tag_list > TBODY > TR > TD.tag_info_link_cell A {
	color: var(--tag-count);
}
TABLE.tag_list > TBODY > TR > TD:after {
	content: "";
}

.tag_count {
	display: inline-block;
	color: var(--tag-count);
	font-size: 0.82em;
	font-weight: 600;
}
.tag_count:before { content: ""; }
.tag_count:after { content: ""; }

.more {
	display: inline-block;
	margin-top: 0.3rem;
	font-weight: 700;
}
.more:after {
	content: " »";
}

/* per-category tag groups, each with its own colour */
.tag-category-heading {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 1rem 0 0.2rem;
	color: var(--header-fg);
	font-size: 0.85rem;
	font-weight: 800;
}
.tag-category-heading::before {
	content: "";
	width: 0.55rem;
	height: 0.55rem;
	background: var(--cat-color, var(--muted));
	border-radius: 50%;
}
.tag-category-heading:first-child {
	margin-top: 0;
}
.tag-category-heading[data-category="artist"] { --cat-color: var(--cat-artist); }
.tag-category-heading[data-category="copyright"],
.tag-category-heading[data-category="series"] { --cat-color: var(--cat-copyright); }
.tag-category-heading[data-category="character"] { --cat-color: var(--cat-character); }
.tag-category-heading[data-category="species"] { --cat-color: var(--cat-species); }
.tag-category-heading[data-category="meta"] { --cat-color: var(--cat-meta); }
.tag-category-heading[data-category="general"] { --cat-color: var(--accent); }

/* tags past a category's limit, folded away */
DETAILS.tag-more > SUMMARY {
	margin-top: 0.15rem;
	color: var(--muted);
	font-size: 0.85em;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}
DETAILS.tag-more > SUMMARY::-webkit-details-marker {
	display: none;
}
DETAILS.tag-more > SUMMARY::before {
	content: "▸ ";
}
DETAILS.tag-more[open] > SUMMARY::before {
	content: "▾ ";
}
DETAILS.tag-more > SUMMARY:hover {
	color: var(--link-hover);
}

/* ---------- main article ---------- */

ARTICLE {
	grid-column: 2;
	grid-row: 2;
	min-width: 0;
	margin: 0 var(--gutter) 0 0;
}
ARTICLE SECTION + SECTION {
	margin-top: 1.25rem;
}
ARTICLE SECTION > H3 {
	padding: 0.85rem 1.1rem 0;
	background: var(--surface);
	color: var(--header-fg);
	border: 1px solid var(--panel-border);
	border-bottom: none;
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	font-size: 1.1rem;
	font-weight: 800;
}
ARTICLE SECTION > .blockbody {
	padding: 0.85rem 1.1rem 1.1rem;
	background: var(--surface);
	border: 1px solid var(--panel-border);
	border-top: none;
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
	box-shadow: var(--shadow);
}
ARTICLE SECTION > H3:only-child {
	padding-bottom: 0.85rem;
	border-bottom: 1px solid var(--panel-border);
	border-radius: var(--radius-lg);
}
ARTICLE SECTION > .blockbody:first-child {
	padding-top: 1.1rem;
	border-top: 1px solid var(--panel-border);
	border-radius: var(--radius-lg);
}

/* the post grid, paginator, post media and post info sit on the bare page */
ARTICLE SECTION#image-list > .blockbody,
ARTICLE SECTION#paginator > .blockbody,
ARTICLE SECTION#search-seq > .blockbody,
ARTICLE SECTION#post-actions > .blockbody,
ARTICLE SECTION[id$="_media"] > .blockbody,
ARTICLE SECTION#ImageInfo > .blockbody,
ARTICLE SECTION#home > .blockbody,
ARTICLE SECTION#profile > .blockbody {
	background: none;
	border: none;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
}
SECTION#image-list > H3 {
	display: none;
}
ARTICLE SECTION#search-seq + SECTION {
	margin-top: 0.5rem;
}
/* the "resized to" notice sits over the top of the stage, not above the art */
ARTICLE SECTION[id$="_media"] .booru-nav-notice {
	margin: 0 0 0.4rem;
	font-size: 0.85rem;
}

/* ---------- thumbnails: justified rows, the art edge to edge ---------- */

.shm-image-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
/* keeps the last row from stretching to fill the width */
.shm-image-list::after {
	content: "";
	flex-grow: 999;
}

.shm-image-list .thumb,
A.thumb {
	position: relative;
	display: block;
	flex: 1 1 auto;
	height: var(--row-height);
	max-width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: var(--panel);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	transition: box-shadow 0.18s, transform 0.18s;
}
.shm-image-list .thumb:hover,
A.thumb:hover,
A.thumb:focus-visible {
	box-shadow: var(--shadow-lift);
	transform: translateY(-3px);
	outline: none;
}
A.thumb:focus-visible {
	box-shadow: var(--shadow-lift), 0 0 0 3px var(--accent);
}
.shm-image-list .thumb IMG,
A.thumb IMG {
	display: block;
	height: 100%;
	min-width: 100%;
	max-width: 100%;
	width: auto;
	object-fit: cover;
	transition: transform 0.35s ease;
}
.shm-image-list .thumb:hover IMG,
A.thumb:hover IMG {
	transform: scale(1.04);
}

/* score / favs / rating: over the art, shown on hover */
.thumb-stats {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 0.6rem;
	padding: 1.4rem 0.6rem 0.45rem;
	background: linear-gradient(transparent, rgba(30, 10, 20, 0.72));
	color: #FFFFFF;
	font-size: 0.8rem;
	font-weight: 800;
	line-height: 1.2;
	white-space: nowrap;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 0.18s, transform 0.18s;
	pointer-events: none;
}
.thumb:hover .thumb-stats,
.thumb:focus-visible .thumb-stats {
	opacity: 1;
	transform: none;
}
/* without hover, only stats worth showing stay over the art */
@media (hover: none) {
	.thumb-stats {
		opacity: 1;
		transform: none;
		padding-top: 1rem;
		font-size: 0.75rem;
	}
	.thumb-stats .score-zero,
	.thumb-stats .favs-zero {
		display: none;
	}
	.thumb-stats:not(:has(.score-up, .score-down, .favs:not(.favs-zero), .rating:not(.rating-unknown))) {
		display: none;
	}
}
.thumb-stats:empty { display: none; }
.thumb-stats .score-up { color: #8CE99A; }
.thumb-stats .score-down { color: #FFA8C5; }
.thumb-stats .favs { color: #FFC2D6; }
/* unrated posts don't need a "?" on every thumbnail */
.thumb-stats .rating {
	margin-left: auto;
	padding: 0 0.35rem;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 4px;
	color: #FFFFFF;
}
.thumb-stats .rating-unknown { display: none; }
.thumb-stats .rating-s { background: rgba(64, 192, 87, 0.85); }
.thumb-stats .rating-q { background: rgba(250, 176, 5, 0.9); color: #2B1A00; }
.thumb-stats .rating-e { background: rgba(240, 62, 62, 0.9); }

.rating-s { color: var(--good); }
.rating-q { color: var(--warn); }
.rating-e { color: var(--bad); }

/* file-type badges, e.g. GIF / WEBM */
A.thumb::before {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 1;
	padding: 0.1rem 0.45rem;
	background: var(--badge-bg);
	color: var(--badge-fg);
	border-radius: 999px;
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	pointer-events: none;
}
/* mimes may carry parameters, e.g. "image/gif; animated=true" */
A.thumb[data-mime*="animated=true"]::before { content: "ANIM"; }
A.thumb[data-mime^="video/"]::before { content: "VIDEO"; }
A.thumb[data-mime^="video/webm"]::before { content: "WEBM"; }
A.thumb[data-mime^="video/mp4"]::before { content: "MP4"; }
A.thumb[data-mime^="image/gif"]::before { content: "GIF"; }
A.thumb[data-mime^="image/apng"]::before { content: "APNG"; }
A.thumb[data-mime^="audio/"]::before { content: "AUDIO"; }
A.thumb[data-mime^="image/svg+xml"]::before { content: "SVG"; }

/* relationships extension: a coloured ring for parents / children */
.shm-thumb-has_child { box-shadow: 0 0 0 3px #8CE99A, var(--shadow) !important; }
.shm-thumb-has_parent { box-shadow: 0 0 0 3px #FFD43B, var(--shadow) !important; }
.shm-thumb-has_child IMG,
.shm-thumb-has_parent IMG,
.shm-thumb-has_child.shm-thumb-has_parent IMG {
	border: none !important;
}

/* relationships: parent / sibling / child posts as a strip of small cards,
   not full-width rows (their thumbs aren't in an .shm-image-list) */
SECTION#PostRelationshipsParent > .blockbody,
SECTION#PostRelationshipsChildren > .blockbody {
	padding: 0.75rem 1rem;
	font-weight: 600;
}
.shm-relationships-parent-thumbs,
.shm-relationships-child-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 0.7rem;
}
.shm-parent-thumbs,
.shm-sibling-thumbs,
.shm-child-thumbs {
	display: contents;
}
.shm-relationships-parent-thumbs A.thumb,
.shm-relationships-child-thumbs A.thumb {
	flex: none;
	height: 7.5rem;
}
.shm-relationships-parent-thumbs A.thumb IMG,
.shm-relationships-child-thumbs A.thumb IMG {
	width: auto;
	min-width: 0;
	max-width: 15rem;
}
.shm-parent-thumbs A.thumb::after {
	content: "Parent";
	position: absolute;
	top: 6px;
	right: 6px;
	padding: 0.1rem 0.45rem;
	background: var(--badge-bg);
	color: var(--badge-fg);
	border-radius: 999px;
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	pointer-events: none;
}

/* ---------- paginator ---------- */

.paginator {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 6px;
	padding: 2rem 0 0.5rem;
}
.paginator A,
.paginator SPAN {
	min-width: 2.5rem;
	padding: 0.45rem 0.8rem;
	background: var(--surface);
	border: 1px solid var(--panel-border);
	border-radius: 999px;
	font-weight: 700;
	text-align: center;
	transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.paginator .current {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-fg);
}
.paginator .gap {
	min-width: 0;
	padding-inline: 0.2rem;
	background: none;
	border-color: transparent;
	color: var(--muted);
}
.paginator .disabled {
	color: var(--muted);
	opacity: 0.5;
}
.paginator A:hover {
	background: var(--accent-soft);
	border-color: var(--accent);
	color: var(--accent-strong);
}

/* ---------- forms + buttons ---------- */

FORM { margin: 0; }
FORM + FORM { margin-top: 0.5rem; }

INPUT[type="text"],
INPUT[type="search"],
INPUT[type="password"],
INPUT[type="email"],
INPUT[type="url"],
INPUT[type="number"],
INPUT[type="date"],
SELECT,
TEXTAREA {
	padding: 0.4rem 0.65rem;
	background: var(--input-bg);
	color: var(--text);
	border: 1px solid var(--panel-border);
	border-radius: var(--radius);
	font-family: inherit;
	font-size: inherit;
	transition: border-color 0.12s, box-shadow 0.12s;
}
INPUT:focus,
SELECT:focus,
TEXTAREA:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: var(--glow);
}
INPUT::placeholder,
TEXTAREA::placeholder {
	color: var(--muted);
	opacity: 0.85;
}
INPUT[type="search"]::-webkit-search-cancel-button {
	cursor: pointer;
}

INPUT[type="submit"],
INPUT[type="button"],
BUTTON {
	padding: 0.45rem 1.1rem;
	background: var(--accent);
	color: var(--accent-fg);
	border: none;
	border-radius: 999px;
	font-family: inherit;
	font-size: inherit;
	font-weight: 800;
	cursor: pointer;
	transition: background 0.12s, transform 0.12s;
}
INPUT[type="submit"]:hover,
INPUT[type="button"]:hover,
BUTTON:hover {
	background: var(--accent-strong);
}
INPUT[type="submit"]:active,
INPUT[type="button"]:active,
BUTTON:active {
	transform: scale(0.97);
}

INPUT[type="checkbox"],
INPUT[type="radio"],
INPUT[type="range"] {
	accent-color: var(--accent);
}

/* autocomplete dropdown (upstream styles it plain white) */
.autocomplete_completions {
	z-index: 300;
	overflow: hidden;
	background: var(--surface);
	color: var(--text);
	border: 1px solid var(--panel-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lift);
}
.autocomplete_completions LI {
	padding: 0.35em 0.8em;
	cursor: pointer;
}
.autocomplete_completions .selected {
	background: var(--hover-bg);
}

/* ---------- tables ---------- */

TABLE { border-spacing: 0; }
THEAD { font-weight: 700; }
TD { vertical-align: top; }

TABLE.zebra {
	border-collapse: separate;
	border: 1px solid var(--panel-border);
	border-radius: var(--radius);
	overflow: hidden;
}
TABLE.zebra TH {
	padding: 0.5rem 0.7rem;
	text-align: left;
	background: var(--panel);
	color: var(--header-fg);
	border-bottom: 1px solid var(--panel-border);
}
TABLE.zebra TD {
	padding: 0.4rem 0.7rem;
	border-bottom: 1px solid var(--panel-border);
}
TABLE.zebra > TBODY > TR:last-child > TD { border-bottom: none; }
TABLE.zebra > TBODY > TR:nth-child(odd) { background: var(--surface); }
TABLE.zebra > TBODY > TR:nth-child(even) { background: var(--page); }
TABLE.zebra > TBODY > TR:hover { background: var(--hover-bg); }
TABLE.zebra INPUT:not([type="checkbox"]):not([type="radio"]),
TABLE.zebra SELECT,
TABLE.zebra TEXTAREA,
TABLE.zebra BUTTON {
	width: 100%;
}

/* ---------- home page ---------- */

.home-hero {
	position: relative;
	padding: 3.5rem 1.5rem 3rem;
	text-align: center;
	background:
		radial-gradient(circle at 15% 20%, rgba(255, 168, 197, 0.55), transparent 45%),
		radial-gradient(circle at 85% 30%, rgba(177, 151, 252, 0.45), transparent 45%),
		radial-gradient(circle at 50% 110%, rgba(255, 212, 59, 0.3), transparent 50%),
		var(--surface);
	border: 1px solid var(--panel-border);
	border-radius: 28px;
	box-shadow: var(--shadow);
}
.home-hero H1 {
	font-size: clamp(1.8rem, 4.5vw, 3rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--header-fg);
}
.home-sitename {
	background: linear-gradient(90deg, var(--accent-strong), #9775FA);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.home-hero > P,
.home-message {
	max-width: 36rem;
	margin: 0.75rem auto 0;
	color: var(--muted);
	font-size: 1.1rem;
}
.home-search {
	position: relative;
	display: flex;
	gap: 0.5rem;
	max-width: 38rem;
	margin: 1.75rem auto 0;
	padding: 0.4rem;
	background: var(--input-bg);
	border: 1px solid var(--panel-border);
	border-radius: 999px;
	box-shadow: var(--shadow-lift);
}
.home-search:focus-within {
	border-color: var(--accent);
	box-shadow: var(--shadow-lift), var(--glow);
}
.home-search INPUT[type="search"] {
	flex: 1;
	min-width: 0;
	padding: 0.55rem 1rem;
	background: none;
	border: none;
	font-size: 1.05rem;
}
.home-search INPUT[type="search"]:focus {
	box-shadow: none;
}
.home-search BUTTON {
	padding: 0.6rem 1.6rem;
	font-size: 1rem;
}
.home-hero .home-count {
	margin-top: 1rem;
	font-size: 0.9rem;
	font-weight: 700;
}

.home-explore {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	gap: 0.9rem;
	margin-top: 1.5rem;
}
A.explore-card,
A.explore-card:visited {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	column-gap: 0.85rem;
	align-items: center;
	padding: 1rem 1.1rem;
	background: var(--surface);
	color: var(--text);
	border: 1px solid var(--panel-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
	transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
A.explore-card:hover {
	transform: translateY(-3px);
	border-color: var(--accent);
	box-shadow: var(--shadow-lift);
}
.explore-icon {
	grid-row: 1 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	background: var(--accent-soft);
	color: var(--accent-strong);
	border-radius: 14px;
	font-size: 1.35rem;
	font-weight: 800;
}
A.explore-card:nth-child(2n) .explore-icon {
	background: var(--lavender);
	color: var(--lavender-fg);
}
.explore-title {
	font-weight: 800;
	font-size: 1.02rem;
}
.explore-blurb {
	color: var(--muted);
	font-size: 0.88rem;
}

.home-section {
	margin-top: 2.5rem;
}
.home-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.9rem;
}
.home-section-head H2 {
	font-size: 1.45rem;
	font-weight: 800;
	color: var(--header-fg);
}
.home-section-head A {
	font-weight: 700;
}

.home-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
A.tag-chip,
A.tag-chip:visited {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.95rem;
	background: var(--surface);
	color: var(--text);
	border: 1px solid var(--panel-border);
	border-radius: 999px;
	font-weight: 700;
	transition: border-color 0.12s, background 0.12s;
}
A.tag-chip::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	background: var(--cat-color, var(--accent));
	border-radius: 50%;
}
A.tag-chip:hover {
	background: var(--hover-bg);
	border-color: var(--accent);
}
A.tag-chip[data-category="artist"] { --cat-color: var(--cat-artist); }
A.tag-chip[data-category="copyright"],
A.tag-chip[data-category="series"] { --cat-color: var(--cat-copyright); }
A.tag-chip[data-category="character"] { --cat-color: var(--cat-character); }
A.tag-chip[data-category="species"] { --cat-color: var(--cat-species); }
A.tag-chip[data-category="meta"] { --cat-color: var(--cat-meta); }

/* ---------- post page ---------- */

/* "‹ Previous | Search: tags | Next ›" bar above the post */
.search-seq {
	display: flex;
	align-items: center;
	gap: 1rem;
}
.search-seq .prevlink,
.search-seq .nextlink {
	padding: 0.4rem 1rem;
	background: var(--surface);
	border: 1px solid var(--panel-border);
	border-radius: 999px;
	font-weight: 800;
	white-space: nowrap;
	transition: background 0.12s, border-color 0.12s;
}
.search-seq .prevlink:hover,
.search-seq .nextlink:hover {
	background: var(--accent-soft);
	border-color: var(--accent);
}
.search-seq-query {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--muted);
	font-weight: 600;
}

/* the art on a soft stage */
ARTICLE SECTION[id$="_media"] > .blockbody {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 0.4rem;
	background: var(--panel);
	border-radius: var(--radius-lg);
}
#main_image {
	display: block;
	max-width: 100%;
	/* fit to screen; booru_nav measures the space left below the header */
	max-height: var(--booru-fit-height, 80vh);
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: var(--radius);
	box-shadow: var(--shadow-lift);
}
VIDEO#main_image {
	background: #000;
}

#ImageInfo {
	max-width: 52rem;
	padding: 1.1rem 1.25rem;
	background: var(--surface);
	border: 1px solid var(--panel-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
}
#ImageInfo:has(> .blockbody:empty) {
	display: none;
}

TABLE.form.image_info {
	width: 100%;
}
.image_info TH {
	padding: 0.2rem 1rem 0.2rem 0;
	text-align: left;
	color: var(--muted);
	font-weight: 700;
}
.image_info TEXTAREA {
	width: 100%;
}

/* sidebar tools are secondary to the art: soft buttons, and a careful Delete */
NAV INPUT[type="submit"],
NAV INPUT[type="button"],
NAV BUTTON {
	background: var(--panel);
	color: var(--accent-strong);
	border: 1px solid var(--panel-border);
}
NAV INPUT[type="submit"]:hover,
NAV INPUT[type="button"]:hover,
NAV BUTTON:hover {
	background: var(--accent-soft);
	border-color: var(--accent);
}
#image_delete_form INPUT[type="submit"],
FORM[action*="delete"] INPUT[type="submit"][value^="Delete"] {
	background: none;
	color: var(--bad);
	border: 1px solid currentColor;
}
#image_delete_form INPUT[type="submit"]:hover,
FORM[action*="delete"] INPUT[type="submit"][value^="Delete"]:hover {
	background: var(--bad);
	color: var(--accent-fg);
	border-color: var(--bad);
}

.post_controls FORM { margin-bottom: 0.6em; }
.post_controls FORM:last-child { margin-bottom: 0; }
.post_controls INPUT[type="submit"],
.post_controls SELECT {
	width: 100%;
}

/* sidebar facts about the post */
NAV SECTION#Informationleft .blockbody {
	color: var(--muted);
	line-height: 1.75;
}

/* compact vote buttons in one row */
#Post_Scoreleft .blockbody {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
}
#Post_Scoreleft FORM,
#Post_Scoreleft FORM + FORM {
	margin: 0;
}
#Post_Scoreleft BR {
	display: none;
}
#Post_Scoreleft #votes-content {
	flex-basis: 100%;
	margin-top: 0.2rem;
}
#Post_Scoreleft INPUT[type="submit"] {
	padding: 0.25rem 0.6rem;
	font-size: 0.85rem;
}

/* ---------- comments ---------- */

.comment {
	width: 100%;
	margin-bottom: 0.7rem;
	padding: 0.6rem 0.85rem;
	background: var(--panel);
	border-radius: var(--radius);
}
.comment .meta {
	min-width: 9rem;
	padding-right: 1rem;
	color: var(--muted);
	font-size: 0.85rem;
}
.comment .username {
	font-weight: 800;
	font-size: 1rem;
}
SPAN.comment-info SPAN { margin-right: 1.5em; }
SPAN.comment-info SPAN B { margin-right: 0.4em; color: var(--muted); }
#comments P {
	text-align: left;
	overflow-wrap: anywhere;
}

/* ---------- sign in / sign up ---------- */
/* the narrow no-left pages only: the user list shares data-page="user_admin" */

BODY.layout-no-left[data-page="user_admin"] ARTICLE SECTION > H3 {
	padding-top: 1.5rem;
	font-size: 1.5rem;
	text-align: center;
}
BODY.layout-no-left[data-page="user_admin"] ARTICLE SECTION > .blockbody {
	padding: 1.25rem 1.5rem 1.5rem;
}
BODY.layout-no-left[data-page="user_admin"] ARTICLE TABLE {
	width: 100%;
}
BODY.layout-no-left[data-page="user_admin"] ARTICLE TR {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin-bottom: 0.8rem;
}
BODY.layout-no-left[data-page="user_admin"] ARTICLE TD,
BODY.layout-no-left[data-page="user_admin"] ARTICLE TH {
	width: auto !important;
	padding: 0;
	text-align: left;
	font-weight: 700;
}
BODY.layout-no-left[data-page="user_admin"] ARTICLE INPUT:not([type="checkbox"]):not([type="radio"]) {
	width: 100%;
	padding: 0.6rem 0.8rem;
}
BODY.layout-no-left[data-page="user_admin"] ARTICLE INPUT[type="submit"] {
	margin-top: 0.4rem;
	padding: 0.7rem;
}
BODY.layout-no-left[data-page="user_admin"] ARTICLE SMALL {
	display: block;
	margin-top: 0.4rem;
	text-align: center;
	font-size: 0.95rem;
}

/* ---------- user list (user_admin/list) ---------- */

BODY[data-page="user_admin"] TABLE.zebra.form {
	width: 100%;
	font-size: 0.92rem;
}
BODY[data-page="user_admin"] TABLE.zebra.form TH,
BODY[data-page="user_admin"] TABLE.zebra.form TD {
	padding: 0.35rem 0.6rem;
	white-space: nowrap;
	vertical-align: middle;
}
BODY[data-page="user_admin"] TABLE.zebra.form > THEAD > TR:first-child > TH {
	font-size: 0.8rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}
BODY[data-page="user_admin"] TABLE.zebra.form > THEAD > TR:first-child > TH > A {
	color: inherit;
}
/* the filter row: compact inputs, the date ranges side by side */
BODY[data-page="user_admin"] TABLE.zebra.form > THEAD > TR ~ TR > TD {
	padding: 0.4rem 0.4rem;
	background: var(--panel);
	border-bottom: 1px solid var(--panel-border);
}
BODY[data-page="user_admin"] TABLE.zebra.form > THEAD INPUT:not([type="checkbox"]):not([type="radio"]),
BODY[data-page="user_admin"] TABLE.zebra.form > THEAD SELECT {
	min-width: 0;
	padding: 0.25rem 0.45rem;
	font-size: 0.85rem;
}
BODY[data-page="user_admin"] TABLE.zebra.form > THEAD INPUT[type="date"] {
	width: 8.75rem !important;
}
BODY[data-page="user_admin"] TABLE.zebra.form > THEAD INPUT[type="date"] + BR {
	display: none;
}
BODY[data-page="user_admin"] TABLE.zebra.form > THEAD INPUT[type="date"] + BR + INPUT {
	margin-left: 0.3rem;
}
BODY[data-page="user_admin"] TABLE.zebra.form > THEAD BUTTON {
	padding: 0.3rem 0.8rem;
}
/* ID: narrow and muted */
BODY[data-page="user_admin"] TABLE.zebra.form > TBODY > TR > TD:first-child {
	width: 1%;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
	text-align: right;
}
BODY[data-page="user_admin"] TABLE.zebra.form > TBODY > TR > TD:nth-child(2) > A {
	font-weight: 700;
}
/* the wide tables scroll sideways on phones rather than the page */
BODY[data-page="user_admin"] ARTICLE .blockbody:has(> TABLE.zebra.form) {
	overflow-x: auto;
}

/* ---------- misc blocks ---------- */

.setupblock,
.tagcategoryblock {
	margin: 0.6rem 1rem 0.6rem 0;
	padding: 0.75rem 1rem 1rem;
	background: var(--surface);
	border: 1px solid var(--panel-border);
	border-radius: var(--radius-lg);
}
.tagcategoryblock {
	display: inline-block;
	width: 18rem;
}
/* each settings block is one card; its heading and body aren't cards too */
.setupblock > H3,
.tagcategoryblock > H3 {
	padding: 0 0 0.6rem;
	background: none;
	border: none;
	border-radius: 0;
	font-size: 1.05rem;
	text-align: left;
}
.setupblock > .blockbody,
.tagcategoryblock > .blockbody {
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	box-shadow: none;
}

#flash {
	margin: 0 0 1.25rem;
	padding: 0.8rem 1.1rem;
	text-align: center;
	background: var(--danger-bg);
	color: var(--danger-fg);
	border-radius: var(--radius-lg);
	font-weight: 700;
}
#flash .blink {
	font-weight: inherit;
}

#large_upload_form { width: 600px; max-width: 100%; }

.withleft { margin-left: 1rem; }

UL.flat-list { margin: 0; padding: 0; }

BODY.layout-no-left NAV { display: none; }
BODY.layout-no-left ARTICLE { grid-column: 1 / -1; margin-left: var(--gutter); }

/* narrow, centred pages: sign in / sign up, the account page, home */
BODY.layout-no-left[data-page="user_admin"] ARTICLE {
	width: 100%;
	max-width: 26rem;
	margin: 2rem auto 0;
	padding-inline: var(--gutter);
}
BODY.layout-no-left[data-page="user"] ARTICLE {
	width: 100%;
	max-width: 60rem;
	margin-inline: auto;
	padding-inline: var(--gutter);
}
BODY.layout-no-left[data-page="home"] ARTICLE {
	width: 100%;
	max-width: 90rem;
	margin-inline: auto;
	padding-inline: var(--gutter);
}

#short-wiki-description { padding: 0 0 1rem; }

/* ---------- account page ---------- */

.profile-card {
	display: flex;
	gap: 1.5rem;
	align-items: flex-start;
	padding: 1.5rem;
	background:
		radial-gradient(circle at 0% 0%, rgba(255, 168, 197, 0.35), transparent 40%),
		var(--surface);
	border: 1px solid var(--panel-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
}
.profile-avatar {
	flex: none;
	width: 6.5rem;
	height: 6.5rem;
	overflow: hidden;
	border-radius: 50%;
	background: linear-gradient(135deg, #FFA8C5, #B197FC);
	box-shadow: 0 0 0 4px var(--surface), 0 0 0 6px var(--accent-soft);
}
.profile-avatar IMG:not(.avatar-crop-img) {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* avatars cropped from posts fill the circle; the crop keeps its framing */
.profile-avatar .avatar-crop {
	display: block;
	width: 100%;
}
.profile-initial {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: #FFFFFF;
	font-size: 2.8rem;
	font-weight: 800;
}
.profile-main {
	flex: 1;
	min-width: 0;
}
.profile-heading {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	margin-bottom: 1rem;
}
.profile-heading H2 {
	font-size: 1.8rem;
	font-weight: 800;
	overflow-wrap: anywhere;
}
.profile-class {
	padding: 0.15rem 0.7rem;
	background: var(--lavender);
	color: var(--lavender-fg);
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 800;
}
A.profile-logout,
A.profile-logout:visited {
	margin-left: auto;
	padding: 0.4rem 1.1rem;
	background: var(--surface);
	color: var(--text);
	border: 1px solid var(--panel-border);
	border-radius: 999px;
	font-weight: 700;
}
A.profile-logout:hover {
	border-color: var(--bad);
	color: var(--bad);
}
.profile-stats {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
	gap: 0.5rem;
}
.profile-stat {
	padding: 0.5rem 0.8rem;
	background: var(--panel);
	border-radius: var(--radius);
	font-size: 0.92rem;
}
.profile-main P {
	margin: 0.8rem 0 0;
	color: var(--muted);
	font-size: 0.9rem;
}

/* Preferences: the User Options settings, right on the account page */
SECTION#preferences {
	scroll-margin-top: calc(var(--header-height) + 1rem);
}
.preference-blocks {
	column-width: 22rem;
	max-width: none;
}
/* one panel, with each extension's settings as a plain sub-section */
.preference-blocks .setupblock {
	margin: 0 0 1rem;
	padding: 0;
	background: none;
	border: none;
	text-align: left;
}
.preference-blocks .setupblock > H3 {
	padding: 0 0 0.3rem;
	background: none;
	border: none;
	border-bottom: 1px solid var(--panel-border);
	border-radius: 0;
	color: var(--header-fg);
	font-size: 0.95rem;
	text-align: left;
}
.preference-blocks .setupblock > .blockbody {
	padding: 0.5rem 0 0;
	background: none;
	border: none;
	box-shadow: none;
	text-align: left;
}
.preference-blocks TABLE.form {
	width: 100%;
}
.preference-blocks TABLE.form TH {
	width: 1%;
	white-space: nowrap;
}
.preference-blocks TEXTAREA {
	min-height: 5rem;
}
SECTION#preferences .setupsubmit {
	position: static;
	margin: 0.25rem 0 0;
}

/* Account: name / password / email forms side by side */
SECTION#Operationsmain > .blockbody {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
	align-items: start;
	gap: 1rem;
}
SECTION#Operationsmain FORM + FORM,
SECTION#Operationsmain FORM P {
	margin: 0;
}
SECTION#Operationsmain TABLE.form {
	width: 100%;
}
SECTION#Operationsmain TABLE.form THEAD TH {
	padding-bottom: 0.4rem;
	text-align: left;
}
SECTION#Operationsmain TABLE.form INPUT:not([type="checkbox"]),
SECTION#Operationsmain TABLE.form SELECT {
	width: 100%;
}
SECTION#Operationsmain TABLE.form LABEL {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

/* ---------- admin pages ---------- */

/* Board Config: settings index + filter in the sidebar, save button always in reach */
#settings-index {
	position: sticky;
	top: calc(var(--header-height) + 1rem);
}
#settings-index .blockbody {
	max-height: calc(100vh - var(--header-height) - 5rem);
	overflow-y: auto;
}
#settings-index INPUT[type="search"] {
	width: 100%;
	margin-bottom: 0.5rem;
}
#settings-index UL {
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 1.8;
}
#settings-index LI[hidden],
.setupblock[hidden],
.setupblock TR[hidden] {
	display: none;
}
.settings-none {
	margin: 0;
	color: var(--muted);
}
.setupblock {
	scroll-margin-top: calc(var(--header-height) + 1rem);
}

.setupsubmit {
	position: sticky;
	bottom: 1rem;
	z-index: 5;
	display: block;
	width: auto;
	min-width: 14rem;
	margin: 1rem auto 0;
	padding: 0.7rem 2rem;
	box-shadow: var(--shadow-lift);
}
.setupsubmit.unsaved,
.ext-save-bar INPUT[type="submit"].unsaved {
	background: var(--accent-strong);
	box-shadow: var(--shadow-lift), var(--glow);
}

/* Extension Manager: toolbar on top, save bar pinned to the bottom */
.ext-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	margin-bottom: 1rem;
	padding: 0.7rem 0.9rem;
	background: var(--surface);
	border: 1px solid var(--panel-border);
	border-radius: var(--radius-lg);
}
.ext-toolbar INPUT[type="search"] {
	flex: 0 1 18rem;
}
.ext-jumps {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2rem 0.8rem;
	font-size: 0.9em;
	font-weight: 700;
}
TABLE.ext-list TR[hidden],
ARTICLE SECTION[hidden] {
	display: none;
}
ARTICLE SECTION[id] {
	scroll-margin-top: calc(var(--header-height) + 1rem);
}
ARTICLE SECTION.ext-save-bar {
	position: sticky;
	bottom: 0;
	z-index: 5;
}
ARTICLE SECTION.ext-save-bar > .blockbody {
	padding: 0.6rem;
	background: none;
	border: none;
	box-shadow: none;
	text-align: center;
}
ARTICLE SECTION.ext-save-bar INPUT[type="submit"] {
	width: auto;
	min-width: 14rem;
	padding: 0.7rem 2rem;
	box-shadow: var(--shadow-lift);
}

/* Board Admin: tools as a grid of cards, not a column of half-empty boxes */
BODY[data-page="admin"] ARTICLE {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
	align-items: start;
	gap: 1rem;
}
BODY[data-page="admin"] ARTICLE > * {
	min-width: 0;
}
BODY[data-page="admin"] ARTICLE SECTION + SECTION {
	margin-top: 0;
}
BODY[data-page="admin"] ARTICLE #flash {
	grid-column: 1 / -1;
}
BODY[data-page="admin"] ARTICLE TABLE.form {
	width: 100%;
}

/* ---------- footer ---------- */

FOOTER {
	grid-column: 1 / -1;
	grid-row: 3;
	margin-top: 3rem;
	background: var(--surface);
	border-top: 1px solid var(--panel-border);
	color: var(--muted);
	font-size: 0.88rem;
}
.footer-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 2rem;
	padding: 1.5rem var(--gutter);
}
.footer-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--header-fg);
	font-weight: 800;
	font-size: 1rem;
}
.footer-brand .logo {
	width: 1.4rem;
	height: 1.4rem;
}
.footer-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.1rem;
	list-style: none;
}
.footer-links A,
.footer-links A:visited {
	color: var(--text);
	font-weight: 700;
}
.footer-links A:hover {
	color: var(--link-hover);
}
.footer-credits {
	flex-basis: 100%;
	margin: 0;
	font-size: 0.78rem;
}
.footer-credits A,
.footer-credits A:visited {
	color: var(--muted);
	text-decoration: underline;
}
.footer-credits A:hover { color: var(--link-hover); }

/* ---------- smaller screens ---------- */

/* the search drops to its own row before the tabs get squeezed */
@media screen and (max-width: 1180px) {
	.header-bar {
		flex-wrap: wrap;
	}
	.header-search {
		order: 4;
		flex-basis: 100%;
		max-width: none;
	}
}

@media screen and (max-width: 800px) {
	:root {
		--gutter: 0.75rem;
		--row-height: 9rem;
	}

	BODY.layout-grid,
	BODY.layout-no-left {
		grid-template-columns: minmax(0, 1fr);
		column-gap: 0;
	}
	HEADER { grid-column: 1; grid-row: 1; margin-bottom: 0.9rem; }

	.header-bar {
		gap: 0.5rem 0.6rem;
		padding-block: 0.5rem;
	}
	HEADER #site-title {
		flex: 1;
		min-width: 0;
		font-size: 1.15rem;
	}
	HEADER #site-title A {
		max-width: 100%;
	}
	HEADER #site-title SPAN {
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.header-search { order: 3; }

	/* the tabs fold into a menu */
	.menu-toggle {
		order: 2;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.6rem;
		height: 2.6rem;
		color: var(--header-fg);
		border-radius: 50%;
		cursor: pointer;
	}
	.menu-toggle:hover,
	.menu-toggle-input:checked + .menu-toggle {
		background: var(--hover-bg);
	}
	.menu-toggle-input:focus-visible + .menu-toggle {
		outline: 2px solid var(--accent);
	}
	.header-tabs {
		display: none;
		order: 5;
		flex-basis: 100%;
		flex-direction: column;
		gap: 0.6rem;
		padding: 0.25rem 0 0.4rem;
	}
	.menu-toggle-input:checked ~ .header-tabs {
		display: flex;
	}
	HEADER UL#navbar {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
		gap: 0.25rem;
	}
	HEADER UL#navbar LI A {
		display: block;
		padding: 0.6rem 0.9rem;
		background: var(--panel);
		border-radius: var(--radius);
	}
	HEADER UL#navbar-right {
		margin-left: 0;
		justify-content: space-between;
	}

	HEADER UL#subnavbar {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}
	HEADER UL#subnavbar .sub-group {
		flex-wrap: nowrap;
	}
	HEADER UL#subnavbar .sub-group-end { margin-left: 0; }

	ARTICLE,
	BODY.layout-no-left ARTICLE {
		grid-column: 1;
		grid-row: 2;
		margin: 0 var(--gutter);
	}
	BODY.layout-no-left[data-page] ARTICLE {
		margin-inline: 0;
		padding-inline: var(--gutter);
	}
	NAV {
		grid-column: 1;
		grid-row: 3;
		margin: 2rem var(--gutter) 0;
		padding: 1.1rem;
		background: var(--surface);
		border: 1px solid var(--panel-border);
		border-radius: var(--radius-lg);
	}
	FOOTER { grid-column: 1; grid-row: 4; }

	.withleft { margin: 0; }

	.shm-image-list { gap: 6px; }

	.home-hero { padding: 2.25rem 1rem 2rem; border-radius: var(--radius-lg); }
	.home-search BUTTON { padding-inline: 1.1rem; }
	.home-explore { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
	A.explore-card { grid-template-columns: 1fr; padding: 0.9rem; row-gap: 0.35rem; }
	.explore-icon { grid-row: auto; width: 2.4rem; height: 2.4rem; }
	A.explore-card:last-child:nth-child(odd) { grid-column: 1 / -1; }

	.search-seq { gap: 0.5rem; }
	.search-seq .prevlink,
	.search-seq .nextlink { padding: 0.35rem 0.8rem; }
	ARTICLE SECTION[id$="_media"] > .blockbody { padding: 0.5rem; }

	.profile-card { flex-direction: column; align-items: center; text-align: center; }
	.profile-heading { justify-content: center; }
	A.profile-logout { margin-left: 0; }
	.profile-stats { width: 100%; text-align: left; }

	.footer-inner { flex-direction: column; text-align: center; }
	.footer-links { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
	}
}

/*# sourceMappingURL=Kawaii.1792820850.c12807a6027c125fe3eeacc07d872f01.css.map */