// ==UserScript==
// @name         AO3 Dark Mode Reskin
// @name:de      AO3 Dunkelmodus
// @name:fr      Mode Sombre pour AO3
// @name:es      Modo Oscuro para AO3
// @name:ja      AO3ダークモード
// @name:zh-CN   AO3暗黑模式
// @name:it      Modalità Scura per AO3
// @name:ru      Тёмный режим для AO3
// @name:pt-BR   Modo Escuro para AO3
// @name:pt-PT   Modo Escuro para AO3
// @name:ko      AO3 다크 모드
// @namespace    ko-fi.com/awesome97076
// @version      1
// @license      MIT
// @description  A modern, accessible dark theme for Ao3
// @description:de Ein modernes, zugängliches dunkles Theme für Ao3
// @description:fr Un thème sombre moderne et accessible pour Ao3
// @description:es Un tema oscuro moderno y accesible para Ao3
// @description:ja Ao3のためのモダンでアクセシブルなダークテーマ
// @description:zh-CN 为Ao3设计的现代化、易访问的暗黑主题
// @description:it Un tema scuro moderno e accessibile per Ao3
// @description:ru Современная, доступная тёмная тема для Ao3
// @description:pt-BR Um tema escuro moderno e acessível para Ao3
// @description:pt-PT Um tema escuro moderno e acessível para Ao3
// @description:ko Ao3를 위한 현대적이고 접근성 있는 다크 테마
// @author       Awesome
// @match        https://archiveofourown.org/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=archiveofourown.org
// @grant        none
// @run-at       document-start
// @downloadURL none
// ==/UserScript==

(function() {
    'use strict';
    const style = document.createElement('style');
    style.innerHTML = `
:root {
	--background-color: #121212;
	--primary-bg-color: #1c1c1c;
	--secondary-bg-color: #2a2a2a;
	--tertiary-bg-color: #444;
	--quaternary-bg-color: #555;
	--highlight-bg-color: #111111;
	--hover-bg-color: #444444;
	--background-primary: #121212;
	--background-secondary: #1e1e1e;
	--background-tertiary: #2a2a2a;
	--background-highlight: #333333;
	--text-color: #e0e0e0;
	--text-secondary: #bbbbbb;
	--text-tertiary: #999999;
	--text-muted: #777777;
	--link-color: rgb(21, 184, 190);
	--link-visited: #c87cffcc;
	--accent-primary: #e05b5b;
	--accent-secondary: #b74040;
	--accent-tertiary: #973535;
	--ao3-red-dark: #8c1c1c;
	--ao3-red-medium: #a82828;
	--ao3-red-light: #c43535;
	--alert-error: #cf6679;
	--alert-warning: #ffe066;
	--alert-success: #81c784;
	--alert-info: #64b5f6;
	--border-primary: #424242;
	--border-secondary: #333333;
	--shadow-color: rgba(0, 0, 0, 0.4);
	--box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
	--hover-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
	--transition: all 0.2s ease;
	--header-background: #202020;
	--footer-background: #1a1a1a;
	--font-family: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Helvetica, sans-serif, 'GNU Unifont';
	--font-size-small: 0.9rem;
	--font-size-base: 1rem;
	--font-size-large: 1.3em;
	--font-size-larger: 1.8rem;
	--font-size-xlarge: 2.2rem;
	--border-radius: 8px;
	--border-radius-large: 12px
}
#header a, #header a:visited, #header .primary .open a, #header .primary .dropdown:hover a, #header .primary .dropdown a:focus {
	color: var(--text-color)
}
#dashboard, #dashboard.own, .error, .comment_error, .kudos_error, #header ul.primary, .LV_invalid, .LV_invalid_field, input.LV_invalid_field:hover, input.LV_invalid_field:active, textarea.LV_invalid_field:hover, textarea.LV_invalid_field:active, #header .primary a, #header .primary input, #header .search input {
	border-color: var(--border-primary) !important
}
#header ul.primary, #footer, .autocomplete .dropdown ul li:hover, .autocomplete .dropdown li.selected, a.tag:hover {
	background:var(--background-color)
}
.actions a:visited, .action:visited, .action a:link, .action a:visited {
	color: var(--text-tertiary)
}
form.verbose legend, .verbose form legend {
	background: var(--background-color);
	color: var(--text-color);
	border: 1px solid var(--border-primary);
	box-shadow: 1px 2px 3px #999
}
#outer, .javascript, .statistics .index li:nth-of-type(2n), #tos_prompt, .announcement input[type="submit"], .nomination dt {
	background: var(--background-color)
}
body, html {
	background: var(--background-color);
	color: var(--text-color);
	font-family: var(--font-family);
	margin: 0;
	padding: 0;
	line-height: 1.5;
	scroll-behavior: smooth
}
#outer {
	background: var(--background-color)
}
#main {
	font-size: 1.1em;
	padding: 0;
	margin: 0 auto;
	max-width: 95%;
	width: 95%;
	background: var(--background-color)
}
#main.dashboard {
	max-width: 85%;
	width: 100%;
	margin-left: 14em;
	padding-left: 1em
}
h1, h2, h3, h4, h5, h6, .heading {
	color: var(--text-color);
	font-family: Georgia, serif;
	font-weight: 400;
	line-height: 1.2;
	margin-bottom: 0.6em
}
p {
	margin-bottom: 1em;
	text-align: justify;
	letter-spacing: 0.02em
}
a, a:link {
	color: var(--link-color);
	text-decoration: none;
	border-bottom: 1px solid var(--accent-secondary);
	transition: color var(--transition), border-color var(--transition)
}
a:visited {
	color: var(--link-visited);
	border-bottom: 1px dashed var(--accent-tertiary)
}
a:hover, a:focus {
	color: var(--text-secondary);
	border-color: var(--accent-tertiary);
	text-decoration: none
}
a:focus, button:focus, input:focus, textarea:focus, select:focus {
	outline: 2px solid var(--link-color);
	outline-offset: 2px
}
#header {
	background: var(--header-background);
	margin: 0 0 1em;
	border-bottom: 1px solid var(--border-primary);
	font-size: 0.875em;
	position: relative;
	z-index: 100
}
#header .primary {
	background: var(--ao3-red-dark);
	box-shadow: inset 0 -6px 10px rgba(0, 0, 0, 0.35), 1px 1px 3px -1px rgba(0, 0, 0, 0.25);
	position: relative
}
#header .primary a {
	color: var(--text-color);
	padding: 0.429em 0.75em;
	border-bottom: none;
	display: inline-block
}
#header .heading a {
	color: var(--ao3-red-light);
	font-size: 1.714em;
	line-height: 1.75em;
	border-bottom: none
}
#header .dropdown .menu,#small_login {
	background: var(--background-secondary);
	border: 1px solid var(--border-primary);
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
	z-index: 101
}
#header .dropdown .menu a {
	color: var(--text-color);
	border-bottom: none;
	display: block
}
#header .dropdown .menu a:hover,#header .dropdown .menu a:focus {
	background: var(--background-highlight);
	color: var(--accent-primary)
}
.header.module {
	position: relative;
	padding-bottom: 1em;
	margin-bottom: 1em
}
.header.module ul.required-tags {
	position: absolute;
	left: 0;
	top: 0;
	width: 40px;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(4, auto);
	gap: 0.25em
}
.header.module p.datetime {
	position: absolute;
	right: 0;
	top: 0;
	margin: 0;
	text-align: right;
	white-space: nowrap
}
.header.module h4.heading {
	margin: 0 100px 0.5em 50px;
	line-height: 1.3;
	overflow-wrap: break-word;
	word-wrap: break-word;
	word-break: break-word;
	hyphens: auto
}
.header.module h5.fandoms {
	clear: both;
	margin: 0.5em 0 0 0;
	padding: 0;
	width: 100%
}
@media (max-width: 480px) {
	.header.module ul.required-tags {
		position: static;
		display: flex;
		width: 100%;
		margin-bottom: 0.5em
}
	.header.module ul.required-tags li {
		margin-right: 0.5em
}
	.header.module h4.heading {
		margin: 0.5em 0;
		width: 100%
}
	.header.module p.datetime {
		position: static;
		text-align: left;
		margin: 0.5em 0;
		width: 100%
}
}
.header.module ul.required-tags li span {
	display: block;
	width: 25px;
	height: 25px
}
#footer {
	background: var(--footer-background);
	border-top: 2px solid var(--ao3-red-dark);
	padding: 1em 0;
	color: var(--text-color)
}
#footer a {
	color: var(--text-color);
	border-bottom: 1px solid var(--text-tertiary)
}
#footer a:hover, #footer a:focus {
	color: var(--accent-primary);
	background: transparent;
	border-color: var(--accent-primary)
}
input, textarea, select, button {
	font-family: var(--font-family)
}
input, textarea {
	width: 98%;
	background: var(--tertiary-bg-color);
	color: var(--text-color);
	border: 1px solid var(--border-primary);
	border-radius: var(--border-radius);
	padding: 0.5em;
	transition: var(--transition)
}
input:focus, textarea:focus, select:focus {
	background: var(--quaternary-bg-color) !important;
	border-color: var(--link-color) !important;
	color: var(--text-color) !important;
	box-shadow: 0 0 0 2px rgba(21, 184, 190, 0.25) !important;
	outline: none
}
select {
	vertical-align: text-top;
	width: 100%;
	min-width: 10.5em;
	appearance: none;
	background: var(--tertiary-bg-color);
	color: var(--text-color);
	border: 1px solid var(--border-primary);
	border-radius: var(--border-radius);
	padding: 5px 7px;
	font-size: var(--font-size-base);
	font-weight: 500;
	cursor: pointer;
	transition: var(--transition);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	padding-right: 12px
}
select:hover {
	background-color: var(--quaternary-bg-color);
	border-color: var(--border-primary);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
	transform: scale(1.02);
	z-index: 999
}
option {
	background: var(--tertiary-bg-color);
	color: var(--text-color);
	padding: 5px
}
fieldset, form dl {
	background: var(--primary-bg-color);
	border: 1px solid var(--border-primary);
	border-radius: var(--border-radius);
	margin: 0.643em;
	padding: 0.643em
}
.action, .action:link, .actions a, .actions a:link,.actions button, .actions input, .actions label,button, input[type=submit] {
	background: var(--background-tertiary);
	color: var(--text-color);
	border: 1px solid var(--border-primary);
	font-size: var(--font-size-base);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-radius: var(--border-radius);
	cursor: pointer;
	transition: var(--transition);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	margin: 4px;
	padding: 0.5em 1em;
	box-shadow: none;
	text-shadow: none
}
.action:hover, .actions a:hover, .actions button:hover,.actions input:hover, button:hover, input[type=submit]:hover {
	background: var(--background-highlight);
	border-color: var(--accent-primary);
	color: var(--accent-primary);
	transform: translateY(-1px)
}
.group-group, #main li.blurb {
	display: flex;
	gap: 12px;
	padding: 10px;
	margin: 8px 0;
	border-radius: var(--border-radius-large);
	background: var(--primary-bg-color);
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
	position: relative;
	transition: all 0.2s ease;
	flex-wrap: wrap;
	flex-direction: column;
	align-items: stretch
}
#main li.blurb:hover {
	transform: scale(1.02);
	box-shadow: var(--hover-box-shadow);
	background: var(--secondary-bg-color)
}
.blurb .header {
	display: inline-flex;
	margin-bottom: 8px;
	flex-direction: row;
	flex-wrap: wrap;
	min-height: auto
}
.blurb h4.heading a {
	font-size: 1.4rem !important;
	color: var(--link-color);
	text-decoration: none;
	transition: color var(--transition);
	font-size: var(--font-size-larger);
	line-height: 1.3;
	max-width: 60%;
	white-space: break-spaces;
	border-bottom: none;
	margin: 0 20px
}
.blurb h4.heading a:hover {
	color: var(--text-secondary)
}
h5:nth-child(2) > a{
	font-size: 1.2rem !important
}
#outer .group .heading {
	font-size: 1.2rem;
	margin: 0 auto;
	line-height: 1.3;
	order: 2;
	display: inline-flex;
	flex-wrap: wrap;
	white-space: nowrap;
	position: relative;
	justify-content: center;
	flex-grow: 1
}
.blurb .datetime {
	font-size: 1rem;
	order: 3;
	position: static;
	margin: 0
}
h5.heading {
	order: 4 !important
}
.category-group, .relationships-group, .characters-group, .meta dd {
	position: relative;
	padding: 5px;
	margin: 0;
	border: none;
	border-radius: var(--border-radius);
	background: var(--secondary-bg-color);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	display: flex;
	gap: 8px;
	max-height: 10em;
	overflow-y: auto;
	font-size: 1.2rem;
	overflow-x: hidden;
	scrollbar-width: thin;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: flex-start;
	max-width: 100%;
	justify-content: flex-start
}
.blurb ul li, .blurb dd ul li {
	border: 3px solid #000;
	border-radius: var(--border-radius);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1)
}
.blurb ul li a, .blurb dd ul li a {
	border: none;
	text-decoration: none;
	padding: 0.2em 0.6em
}
li.relationships a {
	background: none
}
a.tag {
	display: inline-block;
	background: var(--background-tertiary);
	color: var(--text-color);
	padding: 0.2em 0.6em;
	margin: 0.2em;
	border-radius: 3px;
	border-bottom: none;
	transition: background-color 0.2s ease, color 0.2s ease;
	font-weight: 500;
	font-size: 1.2rem;
	line-height: 1.4;
	white-space: nowrap;
	max-height: none;
	overflow: visible
}
a.tag:hover {
	background: var(--accent-primary);
	color: var(--text-color);
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	text-decoration: none
}
.commas li {
	display: inline-block;
	margin-right: 0px;
	margin-bottom: 0px
}
.commas li:after {
	font-size: 6px;
	content: ""
}
.tags li {
	padding-left: 0;
	padding-right: 0
}
dl.stats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 6px 0 3px;
	padding: 0;
	line-height: 1.4;
	float: none;
	clear: both;
	text-align: left
}
dl.stats > div {
	align-items: flex-start;
	margin-right: 0.3em;
	margin-bottom: 0.15em;
	display: flex !important;
	flex-direction: column !important
}
.words-group,.chapters-group,.comments-group,.kudos-group,.bookmarks-group,.hits-group,.collections-group,.language-group {
	width: auto;
	min-width: 100px;
	flex-grow: 0;
	flex-shrink: 0
}
.stats dt, .stats dd {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	background: transparent;
	width: auto;
	min-width: 0;
	display: inline;
	clear: none;
	float: none;
	margin: auto
}
.blurb ul.required-tags {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, auto);
	gap: 3px;
	list-style: none;
	padding: 0;
	margin: 0;
	position: relative;
	opacity: 0.9;
	width: auto
}
.blurb ul.required-tags li:nth-child(1) {
	grid-column: 1;
	grid-row: 1
}
.blurb ul.required-tags li:nth-child(2) {
	grid-column: 1;
	grid-row: 2
}
.blurb ul.required-tags li:nth-child(3) {
	grid-column: 2;
	grid-row: 1
}
.blurb ul.required-tags li:nth-child(4) {
	grid-column: 2;
	grid-row: 2
}
.blurb ul.required-tags li+li+li,.blurb ul.required-tags li+li+li+li {
	position: relative;
	left: 0
}
.blurb ul.required-tags li+li+li+li {
	top: 0
}
.blurb ul.required-tags li, .blurb ul.required-tags li a, .blurb ul.required-tags li span {
	border: none;
	box-shadow: none
}
#workskin {
	margin: 0 auto !important;
	background: var(--background-primary) !important;
	color: var(--text-color) !important;
	padding: 1em !important;
	border-radius: var(--border-radius);
	box-shadow: var(--box-shadow);
	font-size: var(--font-size-large);
	line-height: 1.6;
	max-width: 72em;
	overflow-x: auto;
	overflow-y: hidden
}
.preface {
	background: var(--background-secondary);
	border-radius: 4px;
	border-top: none;
	padding: 1em;
	margin: 1em 0;
	float: none
}
.userstuff {
	line-height: 1.6;
	word-wrap: break-word
}
.userstuff p, .userstuff details {
	margin: 1.5em 0;
	padding: 0;
	text-rendering: optimizelegibility
}
.userstuff a {
	color: var(--accent-primary)
}
.userstuff blockquote {
	background: var(--background-tertiary);
	border-left: 3px solid var(--accent-primary);
	padding: 1em;
	margin: 1em 0;
	border-radius: 0 var(--border-radius) var(--border-radius) 0
}
.userstuff h3 {
	font-weight: 500;
	padding: .125em;
	border-bottom: .25em double var(--border-primary)
}
.userstuff code, .userstuff pre {
	background: var(--background-tertiary);
	color: var(---text-color);
	font-family: "Monaco", "Consolas", Courier, monospace;
	padding: 0.2em 0.4em;
	border-radius: 3px;
	border: 1px solid var(--border-primary)
}
.userstuff pre {
	padding: 1em;
	overflow-x: auto
}
.userstuff p:only-child:empty,.userstuff p:only-child:blank,.userstuff details:only-child:empty,.userstuff details:only-child:blank {
	margin: 0;
	padding: 0;
	height: 0.5em;
	min-height: 0.5em;
	line-height: 0.5
}
ol.thread {
	list-style: none;
	padding: 0;
	margin: 0
}
li.comment {
	position: relative;
	background: var(--background-secondary);
	border-radius: 4px;
	margin-bottom: 16px;
	padding: 12px 16px;
	box-shadow: 0 1px 3px var(--shadow-color);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	border: 1px solid var(--border-primary);
	overflow: visible
}
li.comment:hover {
	transform: translateY(-2px);
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2)
}
li.odd.comment {
	background: var(--background-secondary)
}
li.even.comment {
	background: var(--background-highlight)
}
.comment h4.byline {
	background: var(--background-tertiary);
	padding: 0.5em 1em;
	margin: 0;
	border-radius: var(--border-radius) var(--border-radius) 0 0
}
.comment .heading.byline a {
	color: var(--accent-primary);
	font-weight: 600;
	text-decoration: none;
	border-bottom: none
}
.comment .heading.byline a:hover {
	text-decoration: underline
}
.comment .posted.datetime {
	font-size: 0.85rem;
	color: var(--text-tertiary);
	margin-left: auto
}
.comment blockquote.userstuff {
	clear: both;
	background: var(--background-tertiary);
	border-radius: var(--border-radius);
	border-left: 3px solid var(--accent-primary);
	padding: 12px;
	margin: 10px 0;
	font-size: 1.1rem;
	line-height: 1.6;
	color: var(--text-color)
}
.comment blockquote.userstuff p {
	margin-bottom: 0.75em
}
.comment blockquote.userstuff p:last-child {
	margin-bottom: 0
}
.thread .thread {
	margin-left: 2em;
	border-left: 2px solid var(--border-primary)
}
ol.thread ol.thread {
	margin-left: 20px;
	position: relative
}
ol.thread ol.thread::before {
	content: '';
	position: absolute;
	left: -20px;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--border-primary);
	border-radius: 1px
}
ol.thread ol.thread li.comment::before {
	content: '';
	position: absolute;
	left: -20px;
	top: 20px;
	width: 18px;
	height: 2px;
	background: var(--border-primary);
	border-radius: 1px
}
form.filters {
	width: 24%;
	border-radius: var(--border-radius);
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
	float: right
}
.filters .expander {
	background: var(--tertiary-bg-color);
	border: none;
	border-radius: var(--border-radius);
	color: var(--text-color)
}
.filters .expander::before {
	content: "⮞";
	color: var(--text-color);
	position: absolute;
	left: 2%;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1em
}
.filters .expanded .expander::before {
	content: "⮟";
	color: var(--text-color);
	position: absolute;
	left: 2%;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1em
}
.filters .expander:hover {
	transform: scale(1.05);
	z-index: 999
}
.filters .indicator:before {
	background: var(--tertiary-bg-color);
	color: var(--text-tertiary);
	display: inline-block;
	border: 1px solid var(--border-primary);
	margin-right: .25em;
	text-align: center
}
.filters .exclude .indicator:before {
	content: " ✕";
	padding: 2px 5px;
	border-radius: 3px
}
.filters .include .indicator:before {
	content: " ✓";
	padding: 2px 5px;
	border-radius: 3px
}
.filters .exclude .indicator:hover::before {
	content: " ✕";
	background-color: rgba(203, 144, 144, 0.3);
	color: rgb(204, 110, 110);
	padding: 2px 5px;
	border-radius: 3px
}
.filters .include .indicator:hover::before {
	content: " ✓";
	background-color: rgba(156, 203, 144, 0.3);
	color: rgb(112, 204, 110);
	padding: 2px 5px;
	border-radius: 3px
}
.filters .indicator span {
	font-size: var(--font-size-base);
	white-space: normal;
	display: inline-block;
	margin-left: 14px;
	line-height: 1.4
}
#dashboard {
	background: var(--background-secondary);
	width: 11.25em;
	float: left;
	padding: 1em;
	border-right: 1px solid var(--border-primary)
}
#dashboard a, #dashboard span {
	color: var(--text-color);
	display: block;
	white-space: normal;
	height: auto;
	line-height: 2;
	padding: 0.5em;
	margin: 0;
	border: 0;
	border-radius: 3px;
	background: transparent;
	vertical-align: middle;
	word-wrap: break-word;
	box-shadow: none
}
#dashboard a:hover {
	background: var(--background-highlight);
	color: var(--accent-primary)
}
#dashboard .current {
	background: var(--background-highlight);
	color: var(--accent-primary);
	border-left: 3px solid var(--accent-primary)
}
.notice, .comment_notice, .kudos_notice {
	background: var(--background-secondary);
	border: 1px solid var(--border-primary);
	border-left: 3px solid var(--alert-info);
	color: var(--text-color);
	padding: 1em;
	margin: 1em 0;
	border-radius: 3px
}
.alert.flash, .error, .comment_error, .kudos_error {
	background: var(--background-secondary);
	border: 1px solid var(--border-primary);
	border-left: 3px solid var(--alert-error);
	color: var(--alert-error);
	padding: 1em;
	margin: 1em 0;
	border-radius: 3px
}
.caution {
	background: var(--background-secondary);
	border: 1px solid var(--border-primary);
	border-left: 3px solid var(--alert-warning);
	color: var(--alert-warning);
	padding: 1em;
	margin: 1em 0;
	border-radius: 3px
}
.pagination {
	margin: 1em 0;
	text-align: center
}
.pagination a, .pagination span {
	display: inline-block;
	padding: 0.3em 0.7em;
	margin: 0 0.2em;
	border-radius: var(--border-radius)
}
.pagination a {
	background: var(--tertiary-bg-color);
	color: var(--text-color);
	border: 1px solid var(--border-primary)
}
.pagination a:hover {
	background: var(--quaternary-bg-color);
	color: var(--link-color)
}
.pagination .current {
	background: var(--link-color);
	color: var(--text-color);
	border: 1px solid var(--border-primary)
}
::-webkit-scrollbar {
	width: 12px;
	height: 12px;
	background: var(--background-primary)
}
::-webkit-scrollbar-track {
	background: var(--background-primary)
}
::-webkit-scrollbar-thumb {
	background: var(--background-tertiary);
	border-radius: 6px;
	border: 3px solid var(--background-primary)
}
::-webkit-scrollbar-thumb:hover {
	background: var(--background-highlight)
}
.category-group::-webkit-scrollbar,.relationships-group::-webkit-scrollbar,.characters-group::-webkit-scrollbar {
	width: 6px;
	height: 6px
}
.category-group::-webkit-scrollbar-thumb,.relationships-group::-webkit-scrollbar-thumb,.characters-group::-webkit-scrollbar-thumb {
	border-width: 1px
}
.work.meta.group {
	display: flex;
	gap: 12px;
	float: none;
	padding: 10px;
	margin: 8px 0;
	border-radius: 10px;
	background: var(--primary-bg-color);
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
	position: relative;
	transition: all 0.2s ease;
	flex-wrap: wrap;
	align-items: baseline;
	flex-direction: row
}
.work.meta.group:hover {
	background: var(--secondary-bg-color);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
	transform: translateY(-2px)
}
.meta dt {
	min-width: 0;
	width: 8%;
	text-align: end
}
.meta dd {
	width: 90%
}
.draft, .draft .wrapper, .unread, .child, .unreviewed, .unwrangled {
	background: var(--tertiary-bg-color);
	border: 1px dashed var(--border-primary);
	border-radius: var(--border-radius);
	opacity: 0.95
}
span.claimed, span.unread {
	color: var(--link-color)
}
.replied, span.claimed, span.unread {
	background: var(--tertiary-bg-color);
	border: 1px solid var(--border-primary)
}
table {
	background: var(--primary-bg-color);
	border-collapse: collapse;
	margin: auto;
	width: 100%;
	border-radius: var(--border-radius);
	overflow: hidden
}
th {
	background: var(--secondary-bg-color);
	color: var(--text-color);
	padding: 0.5em;
	text-align: left;
	border-bottom: 1px solid var(--border-primary)
}
td {
	padding: 0.5em;
	background: var(--primary-bg-color);
	border-bottom: 1px solid var(--border-secondary)
}
tr:hover {
	background: var(--tertiary-bg-color)
}
.group-group .userstuff {
	padding: 6px;
	border-radius: var(--border-radius);
	background: var(--secondary-bg-color);
	max-height: 13em;
	overflow-y: auto;
	font-size: 1.3rem;
	line-height: 1.6;
	min-width: 99.5%
}
.group-group::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--quaternary-bg-color), var(--secondary-bg-color), var(--highlight-bg-color));
	border-radius: 10px 10px 0 0;
	opacity: 0.7
}
.group-group > div:not(:last-child) {
	margin-bottom: 8px
}
.announcement .userstuff a, .announcement .userstuff a:link, .announcement {
	color: var(--accent-secondary)
}
.userstuff a:visited:hover {
	color: var(--accent-primary)
}
@media (max-width: 768px) {
	#main {
		width: 92%;
		padding: 0 8px
}
	form.filters {
		width: 100%;
		float: none;
		margin-left: 0;
		margin-bottom: 16px
}
	#dashboard {
		width: 100%;
		float: none;
		border-right: none;
		border-bottom: 1px solid var(--border-primary);
		margin-bottom: 1em
}
	#main.dashboard {
		margin-left: 0;
		padding-left: 1em
}
	.meta dt {
		width: 20%
}
	.meta dd {
		width: 75%
}
	dl.stats {
		grid-template-columns: repeat(auto-fill, minmax(100px, 1fr))
}
	ol.thread ol.thread {
		margin-left: 10px
}
	ol.thread ol.thread::before {
		left: -10px
}
	ol.thread ol.thread li.comment::before {
		left: -10px;
		width: 8px
}
}
@media (prefers-color-scheme: dark) {
	#workskin img {
		box-shadow: 0 0 0 1px var(--border-primary);
		border-radius: var(--border-radius)
}
}
h4.landmark, h5.landmark, .landmark, .landmark a, .index .heading.landmark {
	font-size: 0;
	line-height: 0;
	height: 0;
	margin: 0;
	clear: both;
	color: transparent;
	opacity: 0
}
.blurb .header .heading, .blurb .header ul {
	margin: .375em 5.25em 0 65px
}
.blurb .header img {
	position: relative;
	margin: 0
}
.delete a, span.delete {
	border: 0;
	color: var(--alert-error);
	font-weight: 700;
	margin-right: .375em;
	padding: 0 .1em .15em;
	box-shadow: -1px -1px 2px rgba(0, 0, 0, 0.5);
	border-radius: .875em
}
blockquote {
	font-family: var(--font-family);
	margin: .643em
}
blockquote p:first-child {
	margin-top: 0
}
blockquote p:last-child {
	margin-bottom: 0
}
*:focus {
	outline: none
}
a:focus, button:focus, input:focus, select:focus, textarea:focus {
	outline: 2px solid var(--link-color);
	outline-offset: 2px
}
.icon, .comment .icon {
	background-color: var(--primary-bg-color);
	border-radius: 50%;
	overflow: hidden
}
body, .toggled form, .dynamic form, .secondary, .dropdown {
	background: var(--background-primary);
	color: var(--text-color)
}
#header, #footer, #main, #dashboard {
	background: var(--background-primary)
}
a, a:link, a:visited:hover {
	color: var(--accent-primary);
	border-bottom-color: var(--accent-secondary)
}
a:visited {
	color: var(--link-visited);
	border-bottom-color: var(--accent-tertiary)
}
a:hover, a:focus {
	color: var(--accent-tertiary)
}
a:active, a:focus, button:focus {
	outline: 1px dotted var(--accent-primary)
}
fieldset, form dl, fieldset dl dl, fieldset fieldset fieldset, fieldset fieldset dl dl, dd.hideme, form blockquote.userstuff {
	background: var(--background-secondary);
	border-color: var(--border-secondary);
	box-shadow: inset 1px 0 5px var(--shadow-color)
}
fieldset fieldset, fieldset dl dl, form blockquote.userstuff {
	background: var(--background-tertiary)
}
form dt {
	border-bottom-color: var(--border-secondary)
}
input, textarea, select {
	background: var(--background-tertiary);
	color: var(--text-color);
	border-color: var(--border-primary)
}
input:focus, textarea:focus, select:focus {
	background: var(--background-highlight) !important;
	border-color: var(--accent-primary) !important;
	box-shadow: 0 0 0 1px var(--accent-secondary)
}
.LV_invalid {
	background: #efd1d1;
	border-color: var(--alert-error);
	color: var(--alert-error);
	box-shadow: 1px 1px 2px var(--shadow-color)
}
.autocomplete div.dropdown ul {
	background: var(--background-primary);
	border-color: var(--border-secondary);
	box-shadow: 1px 3px 5px var(--shadow-color);
	color: var(--text-color)
}
.autocomplete .dropdown ul li:hover, .autocomplete .dropdown li.selected {
	background: var(--accent-primary);
	color: var(--text-color)
}
.ui-sortable li {
	background: var(--background-tertiary);
	border-color: var(--border-primary)
}
.ui-sortable li:hover {
	background: var(--background-highlight);
	border-color: var(--border-primary);
	box-shadow: 1px 1px 3px var(--shadow-color)
}
#header .actions a:hover, #header .actions a:focus, #header .dropdown:hover a, #header .open a {
	background: var(--background-highlight)
}
#header .menu, #small_login {
	background: var(--background-secondary);
	box-shadow: 1px 1px 3px -1px var(--shadow-color)
}
#header .menu li {
	border-bottom-color: var(--border-primary)
}
#header h2 {
	border-top-color: var(--border-primary);
	color: var(--text-color)
}
#dashboard ul {
	border-top-color: var(--border-primary)
}
#dashboard.own {
	background: transparent;
	border-top-color: var(--ao3-red-dark);
	border-bottom-color: var(--ao3-red-dark)
}
#main.errors {
	background-position: top right;
	background-repeat: no-repeat
}
#main.errors p, #main.errors .heading {
	color: var(--text-color)
}
thead, tfoot {
	border-bottom-color: var(--border-primary)
}
tfoot td {
	border-top-color: var(--border-primary)
}
tbody tr {
	border-bottom-color: var(--background-highlight)
}
thead td {
	background: var(--background-tertiary);
	border-bottom-color: var(--background-highlight)
}
th, tr:hover, col.name {
	background: var(--background-secondary);
	border-color: var(--border-primary)
}
.actions a, .actions a:link, .action, .action:link, .actions button, .actions input, input[type="submit"], button, .current, .actions label {
	background: var(--background-tertiary);
	color: var(--text-color);
	border: 1px solid var(--border-primary);
	border-bottom: 1px solid var(--border-secondary);
	background-image: none;
	box-shadow: none
}
.actions a:hover, .actions button:hover, .actions input:hover, .actions a:focus, .actions button:focus, .actions input:focus, label.action:hover, .action:hover, .action:focus {
	color: var(--accent-primary);
	border-top-color: var(--border-primary);
	border-left-color: var(--border-primary);
	box-shadow: inset 2px 2px 2px var(--shadow-color)
}
.actions a:active, .current, a.current, a:link.current, .current a:visited {
	color: var(--text-color);
	background: var(--background-highlight);
	border-color: var(--text-secondary);
	box-shadow: inset 1px 1px 3px var(--shadow-color)
}
.actions label.disabled {
	background: var(--background-tertiary);
	color: var(--text-muted)
}
li.blurb, .blurb .blurb {
	border-color: var(--border-primary);
	background: var(--background-secondary);
	box-shadow: 0 1px 3px var(--shadow-color)
}
.blurb h4 a:link, .blurb h4 img {
	color: var(--accent-primary)
}
.own, .draft, .draft .wrapper, .unread, .child, .unwrangled, .unreviewed {
	background: var(--background-tertiary);
	opacity: 0.95
}
span.unread, .replied, span.claimed, .actions span.defaulted {
	background: var(--background-secondary);
	color: var(--accent-primary);
	border-color: var(--border-primary)
}
.canonical, li.requested {
	font-weight: 700;
	color: var(--accent-primary)
}
.draggable, .droppable, span.requested, .nominations .rejected {
	color: var(--alert-error)
}
span.offered, .replied, .nominations .approved {
	color: var(--alert-success)
}
.nominations .approved {
	background: rgba(129, 199, 132, 0.2)
}
.nominations .rejected {
	background: rgba(207, 102, 121, 0.2)
}
div.comment, li.comment {
	border-color: var(--border-primary);
	background: var(--background-secondary)
}
.thread .even {
	background: var(--background-highlight)
}
.comment .userstuff {
	color: var(--text-color)
}
.notice, .comment_notice, .kudos_notice, ul.notes, .caution, .error, .comment_error, .kudos_error, .alert.flash {
	background: var(--background-secondary);
	border-color: var(--alert-info);
	box-shadow: inset 1px 1px 2px var(--shadow-color);
	color: var(--text-color)
}
.error, .comment_error, .kudos_error, .alert.flash {
	background: var(--background-secondary);
	border-color: var(--alert-error);
	color: var(--alert-error)
}
.caution {
	border-color: var(--alert-warning);
	color: var(--alert-warning)
}
.announcement .userstuff {
	background: var(--background-tertiary);
	border-color: var(--border-primary);
	color: var(--text-color)
}
.event .userstuff {
	background: var(--ao3-red-dark);
	border-color: var(--ao3-red-medium);
	color: var(--text-color)
}
.event .userstuff a {
	color: var(--text-secondary)
}
.alert .userstuff {
	background: var(--alert-warning);
	border-color: var(--alert-warning);
	color: #333
}
.userstuff {
	color: var(--text-color)
}
.userstuff h2 {
	color: var(--text-color)
}
.userstuff hr {
	border-color: var(--border-primary)
}
.userstuff blockquote {
	border-color: var(--border-primary)
}
dl.meta {
	border-color: var(--border-primary);
	background: var(--background-secondary)
}
#modal-bg {
	background: rgba(0, 0, 0, 0.7)
}
#modal {
	background: var(--background-secondary);
	border-color: var(--background-tertiary);
	color: var(--text-color);
	box-shadow: 0 0 8px 0 var(--shadow-color)
}
#modal .content {
	border-bottom-color: var(--border-primary)
}
a.tag:hover, .listbox .heading a.tag:visited:hover {
	background: var(--accent-primary);
	color: var(--text-color)
}
span.symbol {
	color: var(--accent-primary);
	border-color: var(--accent-primary)
}
.question a:hover {
	background: var(--accent-primary);
	border-color: var(--accent-secondary);
	color: var(--text-color)
}
span.question {
	background: var(--background-tertiary);
	border-color: var(--accent-primary)
}
`;
    document.head.appendChild(style);

    // Function to wrap elements with a specific selector inside a div with class
    function wrapElements(parent, selectors, className) {
        selectors.forEach(selector => {
            const elements = parent.querySelectorAll(selector);

            if (elements.length > 0) {
                const wrapper = document.createElement('div');
                wrapper.className = className;
                elements[0].parentNode.insertBefore(wrapper, elements[0]);
                elements.forEach(el => wrapper.appendChild(el));
            }
        });
    }

    window.onload = function() {
        // For dl.stats elements
        const statsList = document.querySelectorAll('dl.stats');
        statsList.forEach(dl => {
            wrapElements(dl, ['.language'], 'language-group');
            wrapElements(dl, ['.words'], 'words-group');
            wrapElements(dl, ['.chapters'], 'chapters-group');
            wrapElements(dl, ['.comments'], 'comments-group');
            wrapElements(dl, ['.kudos'], 'kudos-group');
            wrapElements(dl, ['.bookmarks'], 'bookmarks-group');
            wrapElements(dl, ['.hits'], 'hits-group');
            wrapElements(dl, ['.collections'], 'collections-group');
        });

        const listItems = document.querySelectorAll('li');
        listItems.forEach(li => {
            wrapElements(li, ['.freeforms', 'li.warnings'], 'category-group');
            wrapElements(li, ['.relationships'], 'relationships-group');
            wrapElements(li, ['.characters'], 'characters-group');
            wrapElements(li, ['.userstuff, .characters-group, .relationships-group, .category-group'], 'group-group');
        });
    };
})();