.custom-tooltip {
	position: absolute;
	background: #111;
	color: #fff;
	padding: 8px 12px;
	border-radius: 6px;
	font-size: 13px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px) scale(0.95);
	transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
	white-space: nowrap;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
	z-index: 999;
}

.custom-tooltip.show {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
}

/* ── [o] shortcode components ────────────────────────────────────────────
   Light-mode base for the theme's own accordion shortcode (formerly styled
   with W3.CSS; [p] and [uu] were retired in favor of this single shortcode).
   Uses the om-official new-UI accent — violet fill + lavender tint. Dark
   mode keeps the same violet identity (deepened, own glow) rather than
   switching to the generic lit-edge blue/purple treatment — see the
   html[data-wp-dark-mode-active] block further down. */
@keyframes om-fade-in { from { opacity: 0 } to { opacity: 1 } }

.om-acc {
	margin: 16px 0;
	font-family: monospace, monospace;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .2), 0 4px 20px 0 rgba(0, 0, 0, .19);
}

.om-acc-btn {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	border: 0;
	padding: 10px 16px;
	background: #6b5b95;
	color: #fff;
	font-weight: 600;
	font-family: inherit;
	font-size: 11px;
	text-align: left;
	cursor: pointer;
	transition: background 0.25s, transform 0.15s;
}
@media (min-width: 600px) {
	.om-acc-btn {
		font-size: 14px;
	}
}

.om-acc-btn:hover {
	background: #5d4e83;
	transform: translateY(-1px);
}

.om-acc-btn:focus-visible {
	outline: 2px solid #6b5b95;
	outline-offset: 2px;
}

.om-acc-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.om-list-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: rgba(255, 255, 255, .18);
	color: #fff;
	cursor: pointer;
	transition: background 0.2s;
}
.om-list-toggle:hover {
	background: rgba(255, 255, 255, .32);
}
.om-list-toggle[aria-pressed="true"] {
	background: rgba(255, 255, 255, .45);
}

.om-acc-count {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .25);
	color: #fff;
	font-size: 14px;
	line-height: 1.4;
}

.om-acc-body {
	padding: 12px 16px;
	background: #eef2ff;
	border: 1px solid rgba(107, 91, 149, .18);
	border-top: 0;
}

/* List view: a real <ul> the toggle's JS builds from data-om-name/data-om-size
   (see omBuildList in custom.js) — deliberately NOT a CSS reformat of the
   Gutenberg buttons block, because that fought the block's own uppercase/
   center/underline styling instead of replacing it. .om-acc-buttons and
   .om-acc-list are toggled via the [hidden] attribute, not display, so this
   file only needs to style the list, not fight visibility specificity. */
.om-acc-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.om-acc-list-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid rgba(107, 91, 149, .15);
	text-align: left;
}
.om-acc-list-item:last-child {
	border-bottom: 0;
}
.om-acc-list-meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.om-acc-list-name {
	font-size: 13px;
	font-weight: 600;
	text-transform: none;
	color: #2b2b33;
	word-break: break-word;
}
.om-acc-list-size {
	font-size: 12px;
	font-weight: 400;
	color: #6b6b7a;
}
.om-acc-list-link {
	flex-shrink: 0;
	padding: 5px 14px;
	border-radius: 999px;
	border: 1px solid #6b5b95;
	background: none;
	color: #6b5b95;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	text-transform: none;
	white-space: nowrap;
	transition: background .2s, color .2s;
}
.om-acc-list-link:hover {
	background: #6b5b95;
	color: #fff;
}
@media (max-width: 480px) {
	.om-acc-list-item {
		flex-direction: column;
		align-items: flex-start;
	}
	.om-acc-list-link {
		align-self: flex-start;
	}
}

.om-acc-body {
	display: none;
}
.om-acc-body.is-open {
	display: block;
	animation: om-fade-in .3s;
}

.hr {
	width: 70%; /* your requirement */
	height: 3px; /* thicker bar */
	display: block;
	position: relative;
	padding: 2em 0;
	margin: 0 auto; /* centered */
}

.hr::before,
.hr::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 3px; /* thicker stripe */
	bottom: 50%;
	left: 0;
}

/* Darker striped background bar */
.hr::before {
	background: repeating-linear-gradient(
		90deg,
		#2b2b2b 0%,
		#2b2b2b 5%,
		transparent 5%,
		transparent 10%
	);
	background-size: 60px;
	background-position: center;
	z-index: 1;
	opacity: 0.5;
}

/* Darker animated rainbow bar */
.hr::after {
	background: linear-gradient(
		to right,
		#00c77f 5% /* dark teal-green */,
		#e1d85e 15% /* dark gold */,
		#e1d85e 25%,
		#ff4a5e 35% /* dark rose red */,
		#ff4a5e 45%,
		#b464ff 55% /* deep violet */,
		#b464ff 65%,
		#35dce0 75% /* rich aqua */,
		#35dce0 85%,
		#00c77f 95%
	);
	background-size: 200%;
	background-position: 0%;
	animation: hrBarMove 15s linear infinite;
	transition:
		opacity 0.3s ease,
		animation 0.3s ease;
	opacity: 0.9;
}

@keyframes hrBarMove {
	0% {
		background-position: 0%;
	}
	100% {
		background-position: 200%;
	}
}

/* ===== Animated Variant (.hr.anim) ===== */

.hr.anim::before {
	background: repeating-linear-gradient(
		90deg,
		#2b2b2b 0%,
		#2b2b2b 5%,
		transparent 5%,
		transparent 10%,
		#2b2b2b 10%,
		#2b2b2b 15%,
		transparent 15%,
		transparent 20%,
		#2b2b2b 20%,
		#2b2b2b 25%,
		transparent 25%,
		transparent 30%,
		#2b2b2b 30%,
		#2b2b2b 35%,
		transparent 35%,
		transparent 40%,
		#2b2b2b 40%,
		#2b2b2b 45%,
		transparent 45%,
		transparent 50%,
		#2b2b2b 50%,
		#2b2b2b 55%,
		transparent 55%,
		transparent 60%,
		#2b2b2b 60%,
		#2b2b2b 65%,
		transparent 65%,
		transparent 70%,
		#2b2b2b 70%,
		#2b2b2b 75%,
		transparent 75%,
		transparent 80%,
		#2b2b2b 80%,
		#2b2b2b 85%,
		transparent 85%,
		transparent 90%,
		#2b2b2b 90%,
		#2b2b2b 95%,
		transparent 95%,
		transparent 100%
	);

	background-size: 600px;
	background-position: center;
	animation: hrBarMove 120s linear infinite;
}

/* Hover: turbo mode (like CodePen) */
.hr.anim:hover::before {
	animation-duration: 20s;
}

.hr.anim:hover::after {
	animation-duration: 2s;
}

/* Title Animation Underline for h1, h2, h3 */
h1 a.title-animation-underline,
h2 a.title-animation-underline,
h3 a.title-animation-underline,
h1.title-animation-underline,
h2.title-animation-underline,
h3.title-animation-underline {
	--underline-position: bottom;
	--underline-size: 2px;
	background-image: linear-gradient(90deg, currentColor, currentColor);
	background-repeat: no-repeat;
	background-size: 0% var(--underline-size);
	background-position: 0% var(--underline-position);
	transition: 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
	display: inline;
	padding: 2px 0;
}

h1 a.title-animation-underline:hover,
h2 a.title-animation-underline:hover,
h3 a.title-animation-underline:hover,
h1.title-animation-underline:hover,
h2.title-animation-underline:hover,
h3.title-animation-underline:hover {
	background-size: 100% var(--underline-size);
}

/* Link hover styles from Syron */
.entry-title a,
.entry-title a.title-animation-underline {
	transition: all ease 0.3s;
}

.entry-title a:hover,
.entry-title a.title-animation-underline:hover {
	color: #2f2e35;
}

.gridlove-post .entry-title a:hover,
.gridlove-box .entry-title a:hover {
	color: #2f2e35;
}

/* Override white text in overlays */
.entry-overlay .entry-title a:hover,
.gridlove-cover-content .entry-title a:hover {
	color: #2f2e35;
}

/* Image hover animation from Syron */
.entry-image,
.widget_posts_image {
	overflow: hidden;
}

.entry-image img,
.gridlove-posts-widget .entry-image img,
.widget_meks_posts_widget .entry-image img,
.widget_posts_image img {
	transition:
		transform 0.8s ease,
		filter 0.8s ease;
}

.entry-image:hover img,
.gridlove-post:hover .entry-image img,
.gridlove-posts-widget article:hover .entry-image img,
.widget_meks_posts_widget li:hover .entry-image img,
.widget_posts_image:hover img {
	transform: scale(1.15);
}


/* === Moved from WP Customizer (Additional CSS) on 2026-05-18T04:20:15Z === */

/* Hide orphaned wpDiscuz source-code editor popup leaking into the footer.
   wpDiscuz (dormant fallback) still echoes this markup, but om-comments dequeues
   its stylesheet so the normal display:none is gone. 2026-07-03. */
#wpd-editor-source-code-wrapper,
#wpd-editor-source-code-wrapper-bg { display: none !important; }

/* Global site font — Hanken Grotesk (the Knowledge Desk card font), set 2026-07-03.
   Base rule so every element inherits it; specific accents (Hartsinger logo,
   Pacifico badge, JetBrains Mono code, Iowan Old Style .gsa-tl timeline) keep
   their own font-family via more-specific rules and are unaffected. */
html, body, button, input, select, textarea, optgroup {
	font-family: 'Hanken Grotesk', system-ui, sans-serif;
}

body h1, h2, b, p, div, a {
	font-family: 'Hanken Grotesk', system-ui, sans-serif;
}

.gridlove-sidebar-user {
	margin-top: 18px;
}

.warning {
	font-size: 14px;
	color: #ffb703;
	text-transform: uppercase;
}

.warning-text {
	font-size: 14px;
	color: #caf0f8;
}

.wpd-notice {
	text-align: center;
	margin-top: 12px;
	font-weight: 600;
	border: 1px dashed grey;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}
.wpd-notice a {
	text-decoration: underline;
}
.issues_bar {
	gap: 3px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 15px;
	background-color: #3a5a40;
	color: #fefae0;
	padding: 10px 12px;
	border-radius: 10px;
}

.widget_posts {
	display: flex;
	flex-direction: column;
}

.widget_posts_image img {
	border-radius: 5px;
}

.widget_posts_header {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.widget_posts_header a {
	font-size: 0.8em;
	  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


.gridlove-post {
	height: 333px;
}

.custom-tooltip {
  position: absolute;
  background: #222;
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12px;
  max-width: 500px;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  z-index: 9999;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(5px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}


.wp-block-button__link {
  position: relative;
}


.entry-meta .ongoing {
	text-decoration: none;
	text-transform: uppercase;
	padding: 1px 12px;
	border-radius: 50px;
	display: inline-block;
	transition: all .5s;
	font-size: 11px;
	font-weight: bold;
	cursor: pointer;
	border: none;
	position: relative;
	background: red;
	color: #fff;
	box-shadow: 0px 5px 5px rgba(0,0,0,0.2);
	transform: translateY(0px);
	animation: pulseAndFade 5s infinite;
}

.entry-meta .reuploaded {
	text-decoration: none;
	text-transform: uppercase;
	padding: 1px 12px;
	border-radius: 50px;
	display: inline-block;
	transition: all .5s;
	font-size: 11px;
	font-weight: bold;
	cursor: pointer;
	border: none;
	position: relative;
	background: #2196F3;
	color: #fff;
	box-shadow: 0px 5px 5px rgba(0,0,0,0.2);
	transform: translateY(0px);
	animation: pulseAndFade 5s infinite;
}

.entry-meta .ongoing:hover {
	box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
  transform: translateY(-2px);
}
	
@keyframes pulseAndFade {
	0% {
		transform: scaleX(1) scaleY(1);
		opacity: 1;
	}
	50% {
		transform: scaleX(1.1) scaleY(1.1);
		opacity: 0;
	}
	51% {
		transform: scaleX(1) scaleY(1);
		opacity: 0;
	}
	100% {
		transform: scaleX(1) scaleY(1);
		opacity: 1;
	}
}

#breadcrumbs {
	font-size: 13px;
}

.entry-image .gridlove-cat {
	background-color: rgba(0,0,0,.45);
}

.entry-category a {
	padding: 6px 10px;
}

.gridlove-post-a .entry-image img {
	height: 200px;
}

.box-inner-ellipsis .entry-title {
	font-size: 15px;
	line-height: 1.25;
}

.entry-meta {
	bottom: 15px !important;
	margin-top: 8px;
}

mark {
padding: 0;
}

.red-color {
	color: red;	
}

.entry-image img {
	border-radius: 11px 11px 0px 0px;
}

.entry-image a:after {
	border-radius: 11px 11px 0px 0px;
}

.supportbot{
	text-align: center;
	font-size: 85%;
}


.grow {
  height: 30.7px;
  position: relative;
  transition: height 0.9s;
  -webkit-transition: height 0.9s;
  overflow: hidden;
}
	.grow:hover {
  height: 360px;
}

@media only screen and (max-width: 768px) {
.grow {
  height: 30.7px;
  position: relative;
  transition: height 0.9s;
  -webkit-transition: height 0.9s;
  overflow: hidden;
}
	.grow:hover {
  height: 620px;
}
}


.changelogs{
	margin-top: 60px;
	margin-bottom: 30px;
	padding: 0px 12px 9px 12px;
	font-size: 12.5px;
	text-align: center;
	width: 88%;
	box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .2), 0 4px 20px 0 rgba(0, 0, 0, .19);
}

.cheader {
	margin-bottom: 9px;
}
div.ctext::before {
	content: "** ";
}
.cheader{
	background: red;
	padding: 3px 0 3px 0;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	color: #fff;
}

.dlbt {
	margin-top: 17px;
	box-shadow:inset 0px 0px 0px 0px #ffffff;
	background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
	background-color:#f9f9f9;
	border-radius:6px;
	border:1px solid #dcdcdc;
	display:inline-block;
	cursor:pointer;
	color:#666666;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:9px 31px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff;
}
.dlbt:hover {
	background:linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
	background-color:#e9e9e9;
}
.dlbt:active {
	position:relative;
	top:1px;
}


.noticee2{
background: #264653;
	width: 88%; 
	padding-top: 10px; 
	padding-bottom: 11px; 
	padding-right: 8px; 
	padding-left: 8px; 
	margin-bottom: 18px; 
	text-align: center; 
	color: white;
}

@media (min-width:600px) 
{
	.noticee{
		height: auto;
	}
}

.noupdates {
	font-size: 11px;
	margin: 25px 12px 10px 12px;
}

.omgcircle {
	color: white; 
	font-size: 13px; 
padding: 2px 6px 2px 6px;	
	border-radius: 50%;
}

.updates-title{
	font-size: 20px;
	text-align: center;
	
}

.widget{    padding: 6px 23px 23px;
    line-height: 1.43;
    clear: both
}

.gridlove-box p {
    margin-bottom: 26px;
}
.wp-block-separator{
margin: 25px auto 25px auto;
}
.wpd-view-replies-text{
	color: red;
}


.entry-content h2{
    font-family: monospace;
	margin-bottom: 30px;
	margin-top: 30px;
	text-align: center;
}
.entry-content h2{
    font-size:20px;
	    font-weight: 800;
}

.ny{
	  font-size: 13px;
	  text-align: center;
		font-weight: 550;
}            

@media (min-width:600px) 
{
.entry-content h2{
    font-size: 24px;
	    font-weight: 500;
}
	.ny{
	 font-size: 16px;
	 text-align: center;
	font-weight: 550;
}   
}


.linky{
	font-size: 11px;
}

.recent{
	margin-top: 22px;
	padding: 12px 14px;
	
}
recent, a{
	color: #3399ff;
}
.rainbow-box {
  border: 3px solid transparent;
  border-image: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
  border-image-slice: 1;
  height: auto;
  margin-top: 5px;
	margin-bottom: 40px;
	padding: 20px 10px 20px 10px;
  width: auto;
}

#comments #wpdcom span, #wpdcom span{
	    font-size: 0.98em;
}

.pms-account-subscription-action-link {
    color: #3399ff;
}


.d3 {
  color: white;
	font-weight: bold;
	font-size: 17px;
  text-shadow: 2px 2px 5px darkgreen;
}

.re3 {
	font-size: 11px;
	margin-left: 4%;
	color: red;
	font-weight: bold;
	
	
}

.fixx{
	font-size: 10px;
}

.redc{
	color: red;
}

.purc{
	color: purple;
}

.greenc{
	color: green;
}

a.linky{
	color: #3399ff;
}

a.linky:hover{
	color: orange;
}


.tutlink{
	padding-right: 6%;
	padding-top: 4%;
}

.wp-block-buttons{
  display: flex;
  justify-content: center;
}

.olalink{
	color: #3399ff;
	font-size: 13px;
}

.box {
        align-self: flex-end;
        animation-duration: 2.5s;
        animation-iteration-count: infinite;
        margin: 0 auto 0 auto;
        transform-origin: bottom;
    }
    .bounce-7 {
        animation-name: bounce-7;
        animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);
    }
    @keyframes bounce-7 {
        0%   { transform: scale(1,1)      translateY(0); }
        10%  { transform: scale(1.1,.9)   translateY(0); }
        30%  { transform: scale(.9,1.1)   translateY(-100px); }
        50%  { transform: scale(1.05,.95) translateY(0); }
        57%  { transform: scale(1,1)      translateY(-7px); }
        64%  { transform: scale(1,1)      translateY(0); }
        100% { transform: scale(1,1)      translateY(0); }
    }
/* ── Premium badge — "Halo Pulse" (replaces the old .glow neon text) ── */
.premium-badge-wrap {
  text-align: center;
  margin-top: 25px;
}

.premium-badge {
  --pb-size: 44px;            /* overall scale            */
  --pb-glow: 255, 128, 128;   /* coral glow colour (R,G,B)*/
  --pb-text: #ffffff;         /* lettering colour         */

  position: relative;
  display: inline-grid;
  place-items: center;
  padding: 0.9em 1.5em;       /* breathing room for the halo */
  font-family: 'Pacifico', cursive;
  font-size: var(--pb-size);
  line-height: 1;
  isolation: isolate;
}

.premium-badge__text {
  position: relative;
  z-index: 1;
  color: var(--pb-text);
  text-shadow: 0 2px 10px rgba(var(--pb-glow), 0.5);
  white-space: nowrap;
}

/* soft coral core that gently breathes */
.premium-badge__glow {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 5em;
  height: 1.7em;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
              rgba(var(--pb-glow), 0.85) 0%,
              rgba(var(--pb-glow), 0.5) 40%,
              rgba(var(--pb-glow), 0) 75%);
  filter: blur(14px);
  animation: pb-breathe 3.4s ease-in-out infinite backwards;
  pointer-events: none;
}

/* rings that radiate outward, one after another */
.premium-badge__halo {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 6em;
  height: 2.3em;
  border-radius: 50%;
  background: radial-gradient(closest-side,
              rgba(var(--pb-glow), 0) 54%,
              rgba(var(--pb-glow), 0.5) 72%,
              rgba(var(--pb-glow), 0) 100%);
  filter: blur(2px);
  transform-origin: center;
  opacity: 0;                 /* stay invisible until the animation drives it */
  animation: pb-halo 3.6s ease-out infinite backwards;
  pointer-events: none;
}
.premium-badge__halo:nth-of-type(1) { animation-delay: 0s; }
.premium-badge__halo:nth-of-type(2) { animation-delay: 0.9s; }
.premium-badge__halo:nth-of-type(3) { animation-delay: 1.8s; }
.premium-badge__halo:nth-of-type(4) { animation-delay: 2.7s; }

@keyframes pb-halo {
  0%   { transform: scale(0.5);  opacity: 0.6; }
  100% { transform: scale(1.85); opacity: 0; }
}

@keyframes pb-breathe {
  0%, 100% { transform: scale(1.02); opacity: 0.9; }
  50%      { transform: scale(1.1);  opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .premium-badge__glow { animation: none; }
  .premium-badge__halo { animation: none; opacity: 0; }
}

div.scroll { 
				text-align: center;
				margin: 10px; 
				padding: 9px; 
				width: 95%; 
				height: 180px; 
				overflow-x: hidden; 
				overflow-y: auto; 
				border: 0.9px solid green;
			} 

.user-menu:link{
	color: #818181;
	font-size: 19px;
	margin-right: 5px;
	margin-left: 5px;
	text-decoration: none;
	
}
.user-menu-s:link{
	color: #818181;
	font-size: 24px;
	margin-right: 15px;
	margin-left: 15px;
	text-decoration: none;
	
}
.user-menu-s:visited {
  color: #818181;
}

.user-menu:visited {
  color: #818181;
}

.hashtag{
	float: right;
	font-size: 12px;
	font-weight: 700;
}
a.hashtag{
	color: #3399ff;
}

a.hashtag:hover{
	color: black;
}

.box-single {
  position: relative;
}

.ribbonboth{
	color:white;
 width: 2.4em;
 padding: 12px 0;
 position: absolute;
 top: -6px;
 right: 60px;
 text-align: center;
 border-top-left-radius: 3px;
	font-weight: bold;
}

.ribbon4k{
	font-size: 10px;
	 background: #941CF3;
	line-height: 1.4em;
}

.ribbonboth, .ribbon2{
		font-size: 10px;
	 background: #F47530;
		line-height: 1.2em;
}

.ribbon2, .ribbon4k {
	color:white;
 width: 2.4em;
 padding: 12px 0;
 position: absolute;
 top: -6px;
 right: 20px;
 text-align: center;
 border-top-left-radius: 3px;
	font-weight: bold;
}
.ribbonboth:before, .ribbon2:before, .ribbon4k:before {
 height: 0;
 width: 0;
 right: -6.5px;
 top: 0.1px;
 border-bottom: 6px solid #8D5A20;
 border-right: 6px solid transparent;
	
}
.ribbonboth:before, .ribbonboth:after, .ribbon2:before, .ribbon2:after, .ribbon4k:before, .ribbon4k:after {
  content: "";
  position: absolute;
}
.ribbonboth:after, .ribbon2:after, .ribbon4k:after {
  height: 0;
  width: 0;
  bottom: -14px;
  left: 0;
  border-bottom: 15px solid transparent;
}

.ribbonboth:after, .ribbon2:after{
	border-left: 12.5px solid #F47530;
  border-right: 12.5px solid #F47530;
}

.ribbon4k:after{
	border-left: 12.5px solid #941CF3;
  border-right: 12.5px solid #941CF3;
}

.comments-area, .meks_ess, .gridlove-box{
		box-shadow: 0 4px 8px 0 rgba(0,0,0,0.3);
  transition: 0.6s;
	border-radius: 11px;
}
 .comments-area:hover, .meks_ess:hover, .gridlove-box:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.meks_ess{
	padding: 10px 10px;
}

.gridlove-highlight {
	color: #fff;
	text-shadow: 1px 1px black;
    background: -webkit-linear-gradient(110deg, #a60af3 40%, rgba(0, 0, 0, 0) 30%), -webkit-radial-gradient(farthest-corner at 0% 0%, #7a00cc 70%, #c03fff 70%);
    background: -o-linear-gradient(110deg, #a60af3 40%, rgba(0, 0, 0, 0) 30%), -o-radial-gradient(farthest-corner at 0% 0%, #7a00cc 70%, #c03fff 70%);
    background: -moz-linear-gradient(110deg, #a60af3 40%, rgba(0, 0, 0, 0) 30%), -moz-radial-gradient(farthest-corner at 0% 0%, #7a00cc 70%, #c03fff 70%);
    background: linear-gradient(110deg, #a60af3 40%, rgba(0, 0, 0, 0) 30%), radial-gradient(farthest-corner at 0% 0%, #7a00cc 70%, #c03fff 70%);
}
.comment-author-link {
	font-style: normal;
	color: yellow;
	text-transform: Capitalize;
}
em {
	font-style: italic;
}

::selection {
  background: #fff2a8;
}
::-moz-selection {
  background: #fff2a8;
}


.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 0.01px dotted #818181;
}

.tooltip .tooltiptext {
	font-size: 11px;
  visibility: hidden;
  width: 120px;
  background-color: #818181;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
 
  position: absolute;
  z-index: 1;
	top: 100%;
  left: 50%;
  margin-left: -60px;
	opacity: 0;
  transition: opacity 1.3s;
}

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  bottom: 100%; 
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #818181 transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
	opacity: 1;
}


.layout-simple, .col-lg-6, .jp-relatedposts-post{
	transition:all 5s ease;
}

.layout-simple:hover, .col-lg-6:hover, .jp-relatedposts-post:hover{
	-webkit-transform: scale(0.94);
	-ms-transform: scale(0.94);
	transform: scale(0.94);

}

.wp-block-buttons{
	margin-top: 48px;
	margin-bottom: 48px;
	text-align: center;
}

.blink {
	cursor: default;
	margin-left: 6px;
	padding: 2px;
  position: absolute;
	border-radius: 0%;
  animation: bounce 2s infinite 2s;
}


.tblink {
  animation: blink-animation 1s steps(5, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
}
@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

@keyframes bounceScale {
  0%, 20% {
    opacity: 0;
    border-width: 3px;
  }
  10% {
    opacity: 1;
  }
  20%, 100% {
    transform: scale(2);
    border-width: 1px;
    opacity: 0;
  }
}

@keyframes bounce {
  0%, 20% {
    transform: scale(1);
		color: transparent;
  }
  5% {
    transform: scale(1.15);
  }
}


.nav__notification__num {
  position: absolute;
  user-select: none;
  cursor: default;
  font-size: 0.5rem;
  width: 1.2rem;
  height: 1.2rem;
  color: white;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 30%;
  top: 0rem;
  right: -0.4rem;
  box-sizing: border-box;
  // will-change: transform;
  // transition: transform 
		cubic-bezier(0.3,0,0.7,1);
}

.count {
  position: absolute;
  user-select: none;
  cursor: default;
  font-size: 0.50rem;
  background: #6b5b95;
  width: 1.29rem;
  height: 1.30rem;
  color: #ffffff;
	font-weight: 700;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.15);
  top: -0.2rem;
  right: -0.3rem;
}


.stage{
		margin-top: 150px;
}





/* === Sidebar action button — "Drawer pull-out" card === */
.gridlove-actions-button .gridlove-sidebar-action.gsa-pullout {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: #ffffff;
	color: #1f2937;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.06);
	cursor: pointer;
	transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
	box-sizing: border-box;
	overflow: visible;
}

.gridlove-actions-button .gridlove-sidebar-action.gsa-pullout:hover,
.gridlove-actions-button .gridlove-sidebar-action.gsa-pullout:focus-visible {
	color: #111827;
	border-color: #d4d4d8;
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06), 0 10px 20px rgba(15, 23, 42, 0.08);
	outline: none;
}

.gridlove-actions-button .gridlove-sidebar-action.gsa-pullout:active {
	transform: translateY(0);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 3px 8px rgba(15, 23, 42, 0.06);
}

.gridlove-actions-button .gridlove-sidebar-action.gsa-pullout .gsa-icon {
	display: block;
	width: 22px;
	height: 22px;
	stroke: currentColor;
}

.gridlove-actions-button .gridlove-sidebar-action.gsa-pullout .gsa-badge {
	position: absolute;
	top: -7px;
	right: -7px;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	background: #6b5b95;
	color: #ffffff;
	font-size: 11px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
	border-radius: 999px;
	border: 1px solid #ffffff;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.15);
	white-space: nowrap;
	pointer-events: none;
}

.gridlove-actions-button .gridlove-sidebar-action.gsa-pullout .gsa-badge:empty {
	display: none;
}

/* === Header action buttons: Telegram circle / Login pill / Initials avatar === */

/* Telegram — violet accent circle with filled white plane */
.gridlove-actions-button.gridlove-action-telegram > span.gsa-telegram {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	gap: 0;
	background: #6b5b95;
	color: #ffffff;
	border: 0;
	border-radius: 50%;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(107, 91, 149, 0.22);
	cursor: pointer;
	transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.gridlove-actions-button.gridlove-action-telegram > span.gsa-telegram:hover,
.gridlove-actions-button.gridlove-action-telegram > span.gsa-telegram:focus-visible {
	background: #7a6aa5;
	color: #ffffff;
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08), 0 10px 22px rgba(107, 91, 149, 0.30);
	outline: none;
}

.gridlove-actions-button.gridlove-action-telegram > span.gsa-telegram .gsa-icon {
	display: block;
	width: 22px;
	height: 22px;
}

/* Auth — Log in pill (logged out) */
.gridlove-actions-button.gridlove-action-auth > span.gsa-login-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0 16px 0 14px;
	gap: 8px;
	background: #ffffff;
	color: #1f2937;
	border: 1px solid #e5e7eb;
	border-radius: 999px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.06);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, color 160ms ease;
}

.gridlove-actions-button.gridlove-action-auth > span.gsa-login-pill:hover,
.gridlove-actions-button.gridlove-action-auth > span.gsa-login-pill:focus-visible {
	color: #111827;
	border-color: #d4d4d8;
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06), 0 10px 22px rgba(15, 23, 42, 0.08);
	outline: none;
}

.gsa-login-pill .gsa-icon {
	display: block;
	width: 18px;
	height: 18px;
	color: #6b7280;
	flex-shrink: 0;
}

.gsa-login-pill:hover .gsa-icon {
	color: #374151;
}

.gsa-login-pill .gsa-login-text {
	font: inherit;
	color: inherit;
	line-height: 1;
}

/* Mobile/compact: icon-only round button instead of the labeled pill */
.gsa-login-pill.gsa-login-pill--compact {
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 50%;
}

/* Auth — Initials avatar with green presence dot (logged in) */
.gridlove-actions-button.gridlove-action-auth > span.gsa-avatar {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: var(--gsa-bg, #6b5b95);
	color: #ffffff;
	border: 0;
	border-radius: 50%;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.10);
	cursor: pointer;
	transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
	overflow: visible;
}

.gridlove-actions-button.gridlove-action-auth > span.gsa-avatar:hover,
.gridlove-actions-button.gridlove-action-auth > span.gsa-avatar:focus-visible {
	transform: translateY(-1px);
	filter: brightness(1.06);
	box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08), 0 10px 22px rgba(15, 23, 42, 0.12);
	outline: none;
	color: #ffffff;
}

.gsa-avatar .gsa-initials {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1;
	color: #ffffff;
	user-select: none;
	font-family: inherit;
}

.gsa-avatar .gsa-presence {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 12px;
	height: 12px;
	background: #22c55e;
	border: 2px solid #ffffff;
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.06);
}

/* Equal spacing between header action buttons */
.gridlove-actions > li.gridlove-actions-button + li.gridlove-actions-button {
	margin-left: 10px;
}

/* Keep the bounce animation on the sidebar drawer, but flow it inline like its siblings */
.gridlove-actions > li.gridlove-actions-button.blink {
	position: static;
	margin-top: 0;
	padding: 0;
}

/* Lock action button geometry across all viewports — defeats the theme's
   @media (max-width:1023px) rule that forces .gridlove-actions-button > span
   to height:50px / padding:0 12px / line-height:50px. */
.gridlove-actions > li.gridlove-actions-button > span.gsa-telegram,
.gridlove-actions > li.gridlove-actions-button > span.gsa-avatar,
.gridlove-actions > li.gridlove-actions-button > span.gridlove-sidebar-action.gsa-pullout,
.gridlove-actions > li.gridlove-actions-button > span.gsa-login-pill.gsa-login-pill--compact {
	width: 44px !important;
	height: 44px !important;
	padding: 0 !important;
	line-height: 1 !important;
	box-sizing: border-box !important;
	font-size: 14px !important;
	vertical-align: middle !important;
}

.gridlove-actions > li.gridlove-actions-button > span.gsa-login-pill {
	height: 44px !important;
	padding: 0 16px 0 14px !important;
	line-height: 1 !important;
	box-sizing: border-box !important;
	font-size: 14px !important;
	vertical-align: middle !important;
}

/* Ensure each action LI aligns to the same baseline regardless of overhanging
   badges/dots that would otherwise shift the inline-block baseline. */
.gridlove-actions > li.gridlove-actions-button {
	vertical-align: middle !important;
	line-height: 1 !important;
}

/* Mobile: scale action buttons down — the responsive header is shorter than
   desktop, so 44×44 looks visually heavy. Shrink to 38×38 (and the loose pill
   gets shorter horizontal padding to match). */
@media (max-width: 782px) {
	.gridlove-actions > li.gridlove-actions-button > span.gsa-telegram,
	.gridlove-actions > li.gridlove-actions-button > span.gsa-avatar,
	.gridlove-actions > li.gridlove-actions-button > span.gridlove-sidebar-action.gsa-pullout,
	.gridlove-actions > li.gridlove-actions-button > span.gsa-login-pill.gsa-login-pill--compact {
		width: 38px !important;
		height: 38px !important;
	}
	.gridlove-actions > li.gridlove-actions-button > span.gsa-login-pill {
		height: 38px !important;
		padding: 0 14px 0 12px !important;
		font-size: 13px !important;
	}
	/* Slightly smaller icon glyphs inside the smaller buttons */
	.gridlove-actions-button.gridlove-action-telegram > span.gsa-telegram .gsa-icon,
	.gridlove-actions-button .gridlove-sidebar-action.gsa-pullout .gsa-icon {
		width: 20px;
		height: 20px;
	}
	.gsa-login-pill .gsa-icon {
		width: 16px;
		height: 16px;
	}
	/* Trim the overhanging badge + presence dot proportionally */
	.gridlove-actions-button .gridlove-sidebar-action.gsa-pullout .gsa-badge {
		top: -6px;
		right: -6px;
		min-width: 18px;
		height: 18px;
		padding: 0 5px;
		font-size: 10px;
		line-height: 18px;
		border-width: 1.5px;
	}
	.gsa-avatar .gsa-initials {
		font-size: 13px;
	}
	.gsa-avatar .gsa-presence {
		width: 10px;
		height: 10px;
		border-width: 1.5px;
	}
	/* Tighten the gap between actions to match the smaller buttons */
	.gridlove-actions > li.gridlove-actions-button + li.gridlove-actions-button {
		margin-left: 8px;
	}
}

/* PFO filter shell — Sort by / Time range custom dropdowns. */

.pfo-shell {
	--pfo-bg: #ffffff;
	--pfo-border: #e5e7eb;
	--pfo-border-hover: #d4d4d8;
	--pfo-text: #0f172a;
	--pfo-text-muted: #6b7280;
	--pfo-accent: #6b5b95;
	--pfo-accent-soft: #eef2ff;
	--pfo-accent-tint: rgba(107, 91, 149, 0.10);
	--pfo-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.05);
	--pfo-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.04);
	--pfo-shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.06);

	display: flex;
	justify-content: flex-end;
	margin: 0 0 16px;
}

/* Dark mode for the sort / time-range filters — the component is token-driven,
   so we just re-point its --pfo-* variables. */
html[data-wp-dark-mode-active] .pfo-shell {
	--pfo-bg: var(--om-content-bg);
	--pfo-border: rgba(var(--om-content-txt-rgb), 0.16);
	--pfo-border-hover: rgba(var(--om-content-txt-rgb), 0.30);
	--pfo-text: var(--om-content-h);
	--pfo-text-muted: var(--om-content-meta);
	--pfo-accent: #7a6aa3;
	--pfo-accent-soft: rgba(107, 91, 149, 0.28);
	--pfo-accent-tint: rgba(107, 91, 149, 0.20);
	--pfo-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
	--pfo-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.40);
	--pfo-shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.50);
}

.pfo-form {
	display: flex;
	align-items: flex-end;
	gap: 12px;
	flex-wrap: wrap;
}

.pfo-field {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 220px;
}

.pfo-field.is-hidden { display: none; }

.pfo-field-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pfo-text-muted);
	line-height: 1;
	padding-left: 2px;
	font-family: inherit;
}

.pfo-select {
	position: relative;
	width: 100%;
}

.pfo-trigger {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 48px;
	padding: 0 14px 0 12px;
	background: var(--pfo-bg);
	color: var(--pfo-text);
	border: 1px solid var(--pfo-border);
	border-radius: 12px;
	box-shadow: var(--pfo-shadow-sm);
	font: 600 14px/1 inherit;
	letter-spacing: 0.005em;
	text-align: left;
	cursor: pointer;
	transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
	-webkit-appearance: none;
	appearance: none;
}

.pfo-trigger:hover {
	border-color: var(--pfo-border-hover);
	box-shadow: var(--pfo-shadow-md);
}

.pfo-trigger:focus-visible,
.pfo-select.is-open .pfo-trigger {
	outline: none;
	border-color: var(--pfo-accent);
	box-shadow: 0 0 0 3px var(--pfo-accent-tint), var(--pfo-shadow-sm);
}

.pfo-trigger-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: var(--pfo-accent-soft);
	color: var(--pfo-accent);
	flex-shrink: 0;
}

.pfo-trigger-icon .pfo-icon {
	width: 16px;
	height: 16px;
	display: block;
}

.pfo-trigger-label {
	flex: 1 1 auto;
	color: var(--pfo-text);
	font-weight: 700;
	font-size: 14px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pfo-trigger-chevron {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	color: var(--pfo-text-muted);
	transition: transform 200ms ease, color 160ms ease;
	flex-shrink: 0;
}

.pfo-trigger-chevron .pfo-icon {
	width: 16px;
	height: 16px;
	display: block;
}

.pfo-select.is-open .pfo-trigger-chevron {
	transform: rotate(180deg);
	color: var(--pfo-accent);
}

/* Listbox panel */
.pfo-listbox {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	z-index: 60;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--pfo-bg);
	border: 1px solid var(--pfo-border);
	border-radius: 14px;
	box-shadow: var(--pfo-shadow-lg);
	max-height: 360px;
	overflow-y: auto;
	min-width: 260px;
}

.pfo-listbox[hidden] { display: none; }

.pfo-option {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 10px;
	cursor: pointer;
	user-select: none;
	transition: background 120ms ease;
	min-height: 48px;
	color: var(--pfo-text);
}

.pfo-option:hover,
.pfo-option:focus-visible {
	background: var(--pfo-accent-soft);
	outline: none;
}

.pfo-option.is-selected {
	background: var(--pfo-accent-soft);
	color: var(--pfo-accent);
}

.pfo-option.is-selected .pfo-option-label,
.pfo-option.is-selected .pfo-option-desc {
	color: var(--pfo-accent);
}

.pfo-option-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 9px;
	background: var(--pfo-accent-soft);
	color: var(--pfo-accent);
	flex-shrink: 0;
}

.pfo-option:hover .pfo-option-icon,
.pfo-option.is-selected .pfo-option-icon {
	background: rgba(107, 91, 149, 0.18);
}

.pfo-option-icon .pfo-icon {
	width: 16px;
	height: 16px;
	display: block;
}

.pfo-option-text {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 2px;
	min-width: 0;
}

.pfo-option-label {
	font-weight: 700;
	font-size: 14px;
	color: var(--pfo-text);
	line-height: 1.2;
	white-space: nowrap;
}

.pfo-option-desc {
	font-size: 11px;
	color: var(--pfo-text-muted);
	font-weight: 500;
	line-height: 1.3;
	white-space: normal;
}

.pfo-option-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	color: var(--pfo-accent);
	opacity: 0;
	flex-shrink: 0;
}

.pfo-option.is-selected .pfo-option-check { opacity: 1; }

.pfo-option-check .pfo-icon {
	width: 16px;
	height: 16px;
	display: block;
}

/* Responsive — stack vertically on narrow viewports */
@media (max-width: 640px) {
	.pfo-shell {
		justify-content: stretch;
	}
	.pfo-form {
		width: 100%;
		gap: 10px;
	}
	.pfo-field {
		min-width: 0;
		flex: 1 1 calc(50% - 5px);
	}
	.pfo-listbox {
		min-width: 100%;
	}
	.pfo-trigger {
		padding: 0 12px 0 10px;
		min-height: 44px;
	}
	.pfo-option { padding: 10px; }
}

@media (max-width: 420px) {
	.pfo-field {
		flex: 1 1 100%;
	}
}

/* === Sidebar drawer activity timeline === */
.gsa-timeline-box {
	padding: 12px 14px 4px;
}
.gsa-timeline-box .updates-title {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #6b7280;
	margin: 0 0 10px 0;
	padding-left: 18px;
	font-family: inherit;
}
.gsa-timeline {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}
/* Reset font on all timeline descendants so the global body{font-family:serif}
   rule doesn't leak into the time/platform/meta chips. Title is re-serif'd below. */
.gsa-timeline,
.gsa-timeline * {
	font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
.gsa-tl-item {
	position: relative;
	padding: 0 0 9px 18px;
	min-height: 0;
}
.gsa-tl-item:not(:last-child)::before {
	content: '';
	position: absolute;
	left: 4px;
	top: 11px;
	bottom: -2px;
	width: 2px;
	background: #e5e7eb;
	border-radius: 1px;
}
.gsa-tl-link {
	display: block;
	color: inherit;
	text-decoration: none;
	background: transparent;
}
.gsa-tl-link:hover {
	background: transparent;
}
.gsa-tl-dot {
	position: absolute;
	left: 0;
	top: 2px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 2px solid #d1d5db;
	background: #ffffff;
	box-sizing: border-box;
	z-index: 1;
	transition: transform 160ms ease, box-shadow 160ms ease;
}
.gsa-tl-item.is-latest .gsa-tl-dot {
	background: #6b5b95;
	border-color: #6b5b95;
	box-shadow: 0 0 0 3px rgba(107, 91, 149, 0.18);
}
.gsa-tl-link:hover .gsa-tl-dot {
	transform: scale(1.05);
}
.gsa-tl-link:hover .gsa-tl-item:not(.is-latest) .gsa-tl-dot {
	border-color: #6b5b95;
}
.gsa-tl-body {
	min-width: 0;
}
.gsa-tl-top {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 5px;
	margin-bottom: 2px;
	line-height: 1;
}
.gsa-tl-time {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: #6b7280;
	text-transform: uppercase;
	line-height: 1;
}
.gsa-tl-sep {
	color: #d1d5db;
	font-weight: 700;
	line-height: 1;
}
.gsa-tl-platform {
	display: inline-block;
	padding: 1px 6px;
	background: #f3f4f6;
	color: #374151;
	border-radius: 5px;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1.4;
	text-transform: uppercase;
}
.gsa-tl-platform--nf       { background: #fce7e9; color: #b1184a; }
.gsa-tl-platform--amzn     { background: #e6f0ff; color: #0c4a9e; }
.gsa-tl-platform--dsnp     { background: #e8ebff; color: #2643b6; }
.gsa-tl-platform--hmax,
.gsa-tl-platform--max      { background: #efe5ff; color: #4f1d96; }
.gsa-tl-platform--aptv,
.gsa-tl-platform--atvp,
.gsa-tl-platform--appletv  { background: #f3f4f6; color: #111827; }
.gsa-tl-platform--hulu     { background: #d8f7e6; color: #0a6b32; }
.gsa-tl-platform--pcok     { background: #e7f1ff; color: #0844a3; }
.gsa-tl-platform--mubi     { background: #fff4d6; color: #8a5b00; }
.gsa-tl-platform--zee5     { background: #f0e7ff; color: #4b1a91; }
.gsa-tl-platform--sony     { background: #1f2937; color: #ffffff; }
.gsa-tl-platform--hotstar  { background: #d5e9d9; color: #0d5b22; }
.gsa-tl-platform--aha      { background: #ffe6cc; color: #a14b00; }
.gsa-tl-platform--mx       { background: #ffe9d1; color: #a44400; }
.gsa-tl-platform--jio      { background: #e1e9ff; color: #1e3a8a; }
.gsa-tl-platform--bbc      { background: #ffe2e2; color: #9a1313; }
.gsa-tl-title {
	font-family: 'Iowan Old Style', 'Apple Garamond', 'Baskerville', 'Source Serif Pro', Georgia, serif;
	font-size: 14px;
	font-weight: 600;
	color: #0f172a;
	line-height: 1.2;
	margin: 0 0 2px 0;
	letter-spacing: 0;
}
.gsa-tl-title-text {
	transition: color 160ms ease;
}
.gsa-tl-link:hover .gsa-tl-title-text {
	color: #6b5b95;
}
.gsa-tl-year {
	font-family: 'Iowan Old Style', 'Apple Garamond', 'Baskerville', 'Source Serif Pro', Georgia, serif;
	color: #9ca3af;
	font-weight: 500;
}
.gsa-tl-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	color: #6b7280;
	line-height: 1.4;
	margin-top: 1px;
}
.gsa-tl-meta .psc-badge {
	/* Plugin emits inline styles; just normalize spacing/sizing in the timeline */
	margin: 0 !important;
	font-size: 10px !important;
	padding: 1px 7px !important;
	line-height: 1.4 !important;
}
.gsa-tl-cat {
	display: inline-block;
	padding: 1px 7px;
	background: #f3f4f6;
	color: #374151;
	border-radius: 999px;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.03em;
	line-height: 1.4;
	text-transform: uppercase;
}
/* Source pill (BluRay / WEB-DL / HDRip / …) — neutral lavender-tinted */
.gsa-tl-source {
	background: #eef2ff;
	color: #4338ca;
}
.gsa-tl-source--bluray     { background: #e0f2fe; color: #075985; }
.gsa-tl-source--webdl,
.gsa-tl-source--webrip     { background: #e8ebff; color: #3730a3; }
.gsa-tl-source--hdrip,
.gsa-tl-source--brrip,
.gsa-tl-source--bdrip,
.gsa-tl-source--dvdrip     { background: #ecfccb; color: #3f6212; }
.gsa-tl-source--hdtv       { background: #fee2e2; color: #991b1b; }
.gsa-tl-source--cam,
.gsa-tl-source--hdcam,
.gsa-tl-source--hdtc       { background: #fef3c7; color: #92400e; }
.gsa-timeline-empty {
	font-size: 13px;
	color: #6b7280;
	text-align: center;
	padding: 10px 0;
	font-style: italic;
}

/* === Categories widget — redesigned (violet accent, parent/child hierarchy) === */
.widget_categories {
	--gcat-bg: #ffffff;
	--gcat-border: #e5e7eb;
	--gcat-text: #0f172a;
	--gcat-text-muted: #6b7280;
	--gcat-text-faint: #9ca3af;
	--gcat-accent: #6b5b95;
	--gcat-accent-soft: #eef2ff;
	--gcat-divider: #eef0f3;
}

/* Per-parent accent — each top-level category gets its own colour. Because
   --gcat-accent is a custom property, every descendant (children rows, bullets,
   hovers, the header underline) inherits that parent's colour automatically,
   keeping each group visually distinct from its siblings. Cycles every 6. */
.widget_categories > ul > .cat-item:nth-of-type(6n+1) { --gcat-accent: #6b5b95; --gcat-accent-soft: #eef2ff; }
.widget_categories > ul > .cat-item:nth-of-type(6n+2) { --gcat-accent: #2f8f83; --gcat-accent-soft: #e6f4f1; }
.widget_categories > ul > .cat-item:nth-of-type(6n+3) { --gcat-accent: #b47b3f; --gcat-accent-soft: #f6efe3; }
.widget_categories > ul > .cat-item:nth-of-type(6n+4) { --gcat-accent: #a2506b; --gcat-accent-soft: #f6e9ee; }
.widget_categories > ul > .cat-item:nth-of-type(6n+5) { --gcat-accent: #3f6fa2; --gcat-accent-soft: #e8eef6; }
.widget_categories > ul > .cat-item:nth-of-type(6n+6) { --gcat-accent: #5b8f4f; --gcat-accent-soft: #ebf3e8; }

/* Container */
.widget.widget_categories {
	background: var(--gcat-bg);
	border: 1px solid var(--gcat-border);
	border-radius: 14px;
	padding: 18px 18px 18px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 1px 3px rgba(15, 23, 42, 0.04);
}

/* Title — inherit the theme's regular widget-title font (no serif override). */
.widget_categories .widget-title {
	margin: 0 0 12px 0;
	padding: 0;
	border: 0;
}

/* Search input injected by JS — falls back invisibly if JS is off */
.widget_categories .gcat-search {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 10px 0;
	padding: 2px 10px;
	background: #f3f4f6;
	border: 1px solid transparent;
	border-radius: 8px;
	transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.widget_categories .gcat-search:focus-within {
	background: #ffffff;
	border-color: var(--gcat-accent);
	box-shadow: 0 0 0 3px rgba(107, 91, 149, 0.10);
}
.widget_categories .gcat-search-icon {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	color: var(--gcat-text-muted);
}
.widget_categories .gcat-search input {
	flex: 1 1 auto;
	border: 0;
	background: transparent;
	outline: none;
	padding: 4px 0;
	font-size: 13px;
	line-height: 1.2;
	color: var(--gcat-text);
	font-family: inherit;
	min-width: 0;
}
.widget_categories .gcat-search input::placeholder {
	color: var(--gcat-text-muted);
}

/* =====================================================================
   NATIVE DARK PALETTE (step 2 of the wp-dark-mode migration)
   Overrides the --om-* design tokens emitted by dynamic-css.php. Because the
   theme's structural color rules now read these tokens, this single block
   flips the whole theme to dark. Light mode is untouched (this only applies
   under html[data-wp-dark-mode-active]). Override BOTH the hex token and its
   -rgb channel wherever the theme uses rgba(var(--om-*-rgb), a).
   Accent (--om-*-acc) and brand red (--om-logo-bg) are intentionally left on
   their light values (theme-options-driven blue stays; see accent convention).
   ===================================================================== */
html[data-wp-dark-mode-active] {
	/* Surfaces — body is the deepest layer, content/cards sit slightly above it */
	--om-body-bg:        #0f1012;
	--om-content-bg:     #17191d;  --om-content-bg-rgb:  23,25,29;

	/* Body / heading / meta text */
	--om-content-txt:    #d4d6d9;  --om-content-txt-rgb: 212,214,217;
	--om-content-h:      #e0e2e4;  --om-content-h-rgb:   224,226,228;
	--om-module-h:       #e0e2e4;  --om-module-h-rgb:    224,226,228;
	--om-content-meta:   #9aa0a6;

	/* Header (main / bottom / sticky share the dark surface). The -txt tokens
	   also feed subtle rgba() borders, so their channels must flip too. */
	--om-header-main-bg:    #16181c;
	--om-header-main-txt:   #dfe1e3;  --om-header-main-txt-rgb:   223,225,227;
	--om-header-bottom-bg:  #16181c;
	--om-header-bottom-txt: #dfe1e3;  --om-header-bottom-txt-rgb: 223,225,227;
	--om-header-sticky-bg:  #16181c;
	--om-header-sticky-txt: #dfe1e3;  --om-header-sticky-txt-rgb: 223,225,227;

	/* Top bar (already dark in light mode) and footer — nudged to match palette */
	--om-header-top-bg:  #0f1012;
	--om-header-top-txt: #c9ccd1;
	--om-footer-bg:      #141518;
	--om-footer-txt:     #dfe1e3;

	/* Accents toned down for dark: the bright legacy blue (#009cff) glares on dark
	   surfaces, so soften + slightly darken it (links, hovers, active states). */
	--om-content-acc:        #2f88cc;  --om-content-acc-rgb:        47,136,204;
	--om-header-main-acc:    #2f88cc;
	--om-header-bottom-acc:  #2f88cc;
	--om-header-sticky-acc:  #2f88cc;
}

/* Floating native dark-mode toggle button (om-native-dark-mode mu-plugin).
   Bottom-left to avoid the bottom-right back-to-top button. Moon in light
   (click = go dark), sun in dark (click = go light). */
.om-dark-toggle{position:fixed;left:16px;bottom:16px;z-index:9998;width:44px;height:44px;padding:0;border:0;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;background:#ffffff;color:#20232a;box-shadow:0 4px 14px rgba(0,0,0,.18);transition:background .2s ease,color .2s ease,transform .15s ease}
.om-dark-toggle:hover{transform:translateY(-2px)}
.om-dark-toggle svg{width:22px;height:22px;display:block}
.om-dark-toggle .om-dt-sun{display:none}
html[data-wp-dark-mode-active] .om-dark-toggle{background:#17191d;color:#f4c948;box-shadow:0 4px 16px rgba(0,0,0,.5)}
html[data-wp-dark-mode-active] .om-dark-toggle .om-dt-moon{display:none}
html[data-wp-dark-mode-active] .om-dark-toggle .om-dt-sun{display:block}

/* =====================================================================
   DARK STRAGGLERS (step 4 mop-up) — theme components with hardcoded colors
   that the --om-* token layer doesn't reach (the plugin engine used to darken
   these at runtime). Scoped to dark mode + !important so they reliably win over
   min.css / w3.css / plugin CSS. Routed through the tokens for consistency.
   Covers: off-canvas sidebar, widgets, comments, forms, footer, misc.
   ===================================================================== */

/* Off-canvas sidebar panel (was #f3f3f3) */
html[data-wp-dark-mode-active] .gridlove-sidebar-action-wrapper { background: var(--om-body-bg) !important; }

/* Sidebar widget boxes + their text/links/titles */
html[data-wp-dark-mode-active] .widget,
html[data-wp-dark-mode-active] .gridlove-box { background: var(--om-content-bg) !important; color: var(--om-content-txt) !important; }
html[data-wp-dark-mode-active] .widget a,
html[data-wp-dark-mode-active] .gridlove-box a,
html[data-wp-dark-mode-active] .widget li,
html[data-wp-dark-mode-active] .widget li a,
html[data-wp-dark-mode-active] .widget_categories li,
html[data-wp-dark-mode-active] .widget_categories li a,
html[data-wp-dark-mode-active] .gridlove_category_widget li a,
html[data-wp-dark-mode-active] .gridlove_category_widget .category-text { color: var(--om-content-txt) !important; }
html[data-wp-dark-mode-active] .widget a:hover,
html[data-wp-dark-mode-active] .gridlove-box a:hover,
html[data-wp-dark-mode-active] .widget li a:hover { color: var(--om-content-acc) !important; }
html[data-wp-dark-mode-active] .widget-title,
html[data-wp-dark-mode-active] .widget-title a,
html[data-wp-dark-mode-active] .gridlove-box .widget-title { color: var(--om-content-h) !important; }

/* Rows / list separators inside widgets — soften light borders for dark */
html[data-wp-dark-mode-active] .widget li,
html[data-wp-dark-mode-active] .gridlove-box li,
html[data-wp-dark-mode-active] .widget .gridlove-post { border-color: rgba(var(--om-content-txt-rgb), 0.14) !important; }

/* Tag-cloud pills */
html[data-wp-dark-mode-active] .widget_tag_cloud a,
html[data-wp-dark-mode-active] .tagcloud a { background: rgba(var(--om-content-txt-rgb), 0.08) !important; color: var(--om-content-txt) !important; border-color: rgba(var(--om-content-txt-rgb), 0.14) !important; }

/* Comments */
html[data-wp-dark-mode-active] #comments,
html[data-wp-dark-mode-active] .comments-area,
html[data-wp-dark-mode-active] .comment-body,
html[data-wp-dark-mode-active] .comment-respond,
html[data-wp-dark-mode-active] #respond { background: transparent !important; color: var(--om-content-txt) !important; }
html[data-wp-dark-mode-active] .comment-list li,
html[data-wp-dark-mode-active] .comment-body,
html[data-wp-dark-mode-active] .comment { border-color: rgba(var(--om-content-txt-rgb), 0.14) !important; }
html[data-wp-dark-mode-active] .comment-author cite,
html[data-wp-dark-mode-active] .comment-author cite a,
html[data-wp-dark-mode-active] .comment-metadata a { color: var(--om-content-h) !important; }

/* Form fields (comment + search + generic) */
html[data-wp-dark-mode-active] input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]),
html[data-wp-dark-mode-active] textarea,
html[data-wp-dark-mode-active] select,
html[data-wp-dark-mode-active] .form-control { background: rgba(var(--om-content-txt-rgb), 0.06) !important; color: var(--om-content-txt) !important; border-color: rgba(var(--om-content-txt-rgb), 0.18) !important; }
html[data-wp-dark-mode-active] input::placeholder,
html[data-wp-dark-mode-active] textarea::placeholder { color: var(--om-content-meta) !important; }

/* Footer: bg is tokenized (--om-footer-bg); make inner widgets transparent so they
   don't sit as lighter boxes, and soften the divider. */
html[data-wp-dark-mode-active] .gridlove-footer .widget,
html[data-wp-dark-mode-active] .gridlove-footer .gridlove-box { background: transparent !important; }
html[data-wp-dark-mode-active] .gridlove-footer .widget-title,
html[data-wp-dark-mode-active] .gridlove-footer .widget-title a { color: var(--om-footer-txt) !important; }
html[data-wp-dark-mode-active] .gridlove-footer-bottom,
html[data-wp-dark-mode-active] .gridlove-footer .widget li { border-color: rgba(255, 255, 255, 0.08) !important; }

/* Misc: code/pre blocks + the off-canvas login dropdown */
html[data-wp-dark-mode-active] code,
html[data-wp-dark-mode-active] pre,
html[data-wp-dark-mode-active] kbd { background: rgba(var(--om-content-txt-rgb), 0.08) !important; color: var(--om-content-txt) !important; }
html[data-wp-dark-mode-active] .gridlove-action-login .sub-menu { background: var(--om-content-bg) !important; color: var(--om-content-txt) !important; }

/* Off-canvas side panel: "Last 24 hours" timeline + "Browse by Year" pills.
   Timeline titles are #0f172a (near-black → invisible on dark); lift to light.
   Platform/source chips are self-contained (own bg+text) so left untouched. */
html[data-wp-dark-mode-active] .gsa-tl-title,
html[data-wp-dark-mode-active] .gsa-tl-title-text { color: var(--om-content-h) !important; }
html[data-wp-dark-mode-active] .gsa-tl-time,
html[data-wp-dark-mode-active] .gsa-tl-meta,
html[data-wp-dark-mode-active] .gsa-tl-year { color: var(--om-content-meta) !important; }
html[data-wp-dark-mode-active] .gsa-tl-dot { background: var(--om-content-bg) !important; border-color: rgba(var(--om-content-txt-rgb), 0.40) !important; }
/* Colorful chips (platform / source / category badges) keep their light-mode
   hues; on a dark bg those saturated pastels glare, so dim them a touch. */
html[data-wp-dark-mode-active] .gsa-tl-platform,
html[data-wp-dark-mode-active] .gsa-tl-source,
html[data-wp-dark-mode-active] .gsa-tl-cat { filter: brightness(0.86) saturate(0.9); }
/* Year pills carry an INLINE light-lavender bg + dark text — override both
   (needs !important to beat the inline styles from om-year-tax.php). */
html[data-wp-dark-mode-active] .gsa-year-cloud a { background: rgba(var(--om-content-txt-rgb), 0.10) !important; color: var(--om-content-txt) !important; }

/* Year pills — hover: subtle lift + fill with the accent. !important is needed
   to beat the inline lavender bg/text emitted by om-year-tax.php. */
.gsa-year-cloud a { transition: background-color 150ms ease, color 150ms ease, transform 150ms ease; }
.gsa-year-cloud a:hover,
.gsa-year-cloud a:focus-visible {
	background: #6b5b95 !important;
	color: #ffffff !important;
	transform: translateY(-1px);
}
html[data-wp-dark-mode-active] .gsa-year-cloud a:hover,
html[data-wp-dark-mode-active] .gsa-year-cloud a:focus-visible {
	background: var(--om-content-acc) !important;
	color: #ffffff !important;
}

/* Ajax Search Pro: the search box is transparent with WHITE text + placeholder
   (built to sit on a dark backing). In dark mode it can land on a light-ish
   container, hiding the placeholder. Give the field an explicit dark fill so the
   white placeholder stays legible. ASP's placeholder color isn't !important. */
html[data-wp-dark-mode-active] div.asp_m .probox { background: var(--om-content-bg) !important; box-shadow: inset 0 0 0 1px rgba(var(--om-content-txt-rgb), 0.14) !important; }
html[data-wp-dark-mode-active] div.asp_m .probox .proinput input.orig,
html[data-wp-dark-mode-active] div.asp_m .probox .proinput input.autocomplete { color: #fff !important; }
html[data-wp-dark-mode-active] div.asp_m .probox .proinput input::placeholder { color: #fff !important; opacity: 0.7 !important; }
html[data-wp-dark-mode-active] div.asp_m .probox .proinput input::-webkit-input-placeholder { color: #fff !important; opacity: 0.7 !important; }
html[data-wp-dark-mode-active] div.asp_m .probox .proinput input::-moz-placeholder { color: #fff !important; opacity: 0.7 !important; }
html[data-wp-dark-mode-active] div.asp_m .probox .proinput input:-ms-input-placeholder { color: #fff !important; opacity: 0.7 !important; }
/* The ASP OUTER container has a light lavender gradient bg (#9083b2) + gray drop
   shadow — that's the frame/padding band + purple glow around the field. Darken
   it so the frame sits a touch below the input fill. */
html[data-wp-dark-mode-active] div.asp_m.asp_m_2,
html[data-wp-dark-mode-active] div.asp_m { background: var(--om-body-bg) !important; background-image: none !important; box-shadow: none !important; }

/* Dark mode — wp-dark-mode plugin adds `data-wp-dark-mode-active` on <html>.
   The plugin's color-filter inverts our light gray pill into an awkward shade
   that no longer matches the (transparent) <input> inside it. Override the
   surface and text colors explicitly so the search blends with the dark widget. */
html[data-wp-dark-mode-active] .widget_categories .gcat-search {
	background: rgba(0, 0, 0, 0.22) !important;
	border-color: rgba(255, 255, 255, 0.10) !important;
}
html[data-wp-dark-mode-active] .widget_categories .gcat-search:focus-within {
	background: rgba(0, 0, 0, 0.28) !important;
	border-color: var(--gcat-accent) !important;
	box-shadow: 0 0 0 3px rgba(107, 91, 149, 0.20) !important;
}
/* Specificity (0,6,2) — must out-weigh the site-wide dark form-field rule
   (input:not(...)) at (0,5,2), else that rule paints a light film over the
   input and the darkened wrapper never shows. Uses the input's real type +
   aria-label attributes to reach the needed specificity without hacks. */
html[data-wp-dark-mode-active] .widget.widget_categories .gcat-search input[type="search"][aria-label] {
	color: rgba(255, 255, 255, 0.92) !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}
html[data-wp-dark-mode-active] .widget_categories .gcat-search input::placeholder {
	color: rgba(255, 255, 255, 0.50) !important;
}
html[data-wp-dark-mode-active] .widget_categories .gcat-search-icon {
	color: rgba(255, 255, 255, 0.55) !important;
}

/* OS-level dark-mode fallback for users without the plugin enabled. */
@media (prefers-color-scheme: dark) {
	html:not([data-wp-dark-mode-active]) .widget_categories .gcat-search {
		background: rgba(0, 0, 0, 0.22);
		border-color: rgba(255, 255, 255, 0.10);
	}
	html:not([data-wp-dark-mode-active]) .widget_categories .gcat-search:focus-within {
		background: rgba(0, 0, 0, 0.28);
		border-color: var(--gcat-accent);
		box-shadow: 0 0 0 3px rgba(107, 91, 149, 0.20);
	}
	html:not([data-wp-dark-mode-active]) .widget_categories .gcat-search input {
		color: rgba(255, 255, 255, 0.92);
		background: transparent;
		border: 0;
	}
	html:not([data-wp-dark-mode-active]) .widget_categories .gcat-search input::placeholder {
		color: rgba(255, 255, 255, 0.50);
	}
	html:not([data-wp-dark-mode-active]) .widget_categories .gcat-search-icon {
		color: rgba(255, 255, 255, 0.55);
	}
}

/* List reset */
.widget_categories ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.widget_categories ul ul {
	margin: 4px 0 0 0;
	padding: 0;
}

/* Top-level category row: violet-tinted icon square + UPPERCASE label + count */
.widget_categories > ul > .cat-item {
	margin: 0;
	padding: 0;
}
.widget_categories > ul > .cat-item + .cat-item {
	margin-top: 4px;
}
/* Breathing room below the final group so the last row isn't flush to the edge. */
.widget_categories > ul > .cat-item:last-child {
	margin-bottom: 10px;
}
.widget_categories > ul > .cat-item > a {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 4px 12px 0;
	color: var(--gcat-text);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.2;
	border-bottom: 2px solid var(--gcat-accent);
	text-decoration: none;
	transition: color 160ms ease;
}
.widget_categories > ul > .cat-item > a::before {
	content: '';
	display: inline-block;
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	border-radius: 8px;
	background-color: var(--gcat-accent);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 16px 16px;
}
.widget_categories > ul > .cat-item > a:hover {
	color: var(--gcat-accent);
}
.widget_categories > ul > .cat-item > a > .cat-count {
	margin-left: auto;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--gcat-text-faint);
}
/* When the count gets wrapped by the wp_list_categories filter, it's a sibling
   of <a> inside the <li>, not a child of <a>. Catch both placements: */
.widget_categories > ul > .cat-item > .cat-count {
	position: absolute;
	right: 4px;
	top: 12px;
	font-size: 12px;
	font-weight: 600;
	color: var(--gcat-text-faint);
}
.widget_categories > ul > .cat-item {
	position: relative;
}

/* Child (.children) rows: dot bullet + sentence-case label + count */
.widget_categories .children .cat-item {
	margin: 0;
	padding: 0;
	position: relative;
}
.widget_categories .children .cat-item > a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 4px 8px 14px;
	color: var(--gcat-text);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
	transition: color 160ms ease;
}
.widget_categories .children .cat-item > a::before {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--gcat-accent);
	flex-shrink: 0;
	transition: background 160ms ease, transform 160ms ease;
}
.widget_categories .children .cat-item > a:hover {
	color: var(--gcat-accent);
}
.widget_categories .children .cat-item > a:hover::before {
	background: var(--gcat-accent);
	transform: scale(1.25);
}
.widget_categories .children .cat-item > .cat-count,
.widget_categories .children .cat-item > a > .cat-count {
	margin-left: auto;
	font-size: 12px;
	font-weight: 500;
	color: var(--gcat-text-faint);
}
.widget_categories .children .cat-item > .cat-count {
	position: absolute;
	right: 4px;
	top: 9px;
}

/* When filtering, JS sets [data-gcat-hide] on non-matching items */
.widget_categories .cat-item[data-gcat-hide="true"] {
	display: none;
}

/* === Tag cloud widget — pill layout (live search, uniform sizes) === */
.widget_tag_cloud {
	--gtag-bg: #ffffff;
	--gtag-border: #e5e7eb;
	--gtag-text: #0f172a;
	--gtag-text-muted: #6b7280;
	--gtag-pill-bg: #f3f4f6;
	--gtag-pill-bg-hover: #e8e6f4;
	--gtag-accent: #6b5b95;
	--gtag-accent-soft: #eef2ff;
}

.widget.widget_tag_cloud {
	background: var(--gtag-bg);
	border: 1px solid var(--gtag-border);
	border-radius: 12px;
	padding: 12px 14px 10px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 1px 3px rgba(15, 23, 42, 0.04);
}

/* Tag search — injected by custom.js, mirrors the categories search field.
   Scoped to the tag widget (the .gcat-search rules are scoped to categories),
   reusing the same look via the --gtag-* tokens. */
.widget_tag_cloud .gtag-search {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 10px 0;
	padding: 2px 10px;
	background: var(--gtag-pill-bg);
	border: 1px solid transparent;
	border-radius: 8px;
	transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.widget_tag_cloud .gtag-search:focus-within {
	background: #ffffff;
	border-color: var(--gtag-accent);
	box-shadow: 0 0 0 3px rgba(107, 91, 149, 0.10);
}
.widget_tag_cloud .gtag-search .gcat-search-icon {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	color: var(--gtag-text-muted);
}
.widget_tag_cloud .gtag-search input {
	flex: 1 1 auto;
	border: 0;
	background: transparent;
	outline: none;
	padding: 4px 0;
	font-size: 13px;
	line-height: 1.2;
	color: var(--gtag-text);
	font-family: inherit;
	min-width: 0;
}
.widget_tag_cloud .gtag-search input::placeholder {
	color: var(--gtag-text-muted);
}
/* Dark mode — recessed dark fill (not a light tint). The input rule needs
   (0,6,2) specificity to beat the site-wide dark form-field rule; matched via
   the input's real type + aria-label, same technique as the categories search. */
html[data-wp-dark-mode-active] .widget_tag_cloud .gtag-search {
	background: rgba(0, 0, 0, 0.22) !important;
	border-color: rgba(255, 255, 255, 0.10) !important;
}
html[data-wp-dark-mode-active] .widget_tag_cloud .gtag-search:focus-within {
	background: rgba(0, 0, 0, 0.28) !important;
	border-color: var(--gtag-accent) !important;
	box-shadow: 0 0 0 3px rgba(107, 91, 149, 0.20) !important;
}
html[data-wp-dark-mode-active] .widget.widget_tag_cloud .gtag-search input[type="search"][aria-label] {
	color: rgba(255, 255, 255, 0.92) !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}
html[data-wp-dark-mode-active] .widget_tag_cloud .gtag-search input::placeholder {
	color: rgba(255, 255, 255, 0.50) !important;
}
html[data-wp-dark-mode-active] .widget_tag_cloud .gtag-search .gcat-search-icon {
	color: rgba(255, 255, 255, 0.55) !important;
}
@media (prefers-color-scheme: dark) {
	html:not([data-wp-dark-mode-active]) .widget_tag_cloud .gtag-search {
		background: rgba(0, 0, 0, 0.22);
		border-color: rgba(255, 255, 255, 0.10);
	}
	html:not([data-wp-dark-mode-active]) .widget_tag_cloud .gtag-search:focus-within {
		background: rgba(0, 0, 0, 0.28);
		border-color: var(--gtag-accent);
		box-shadow: 0 0 0 3px rgba(107, 91, 149, 0.20);
	}
	html:not([data-wp-dark-mode-active]) .widget_tag_cloud .gtag-search input {
		color: rgba(255, 255, 255, 0.92);
	}
	html:not([data-wp-dark-mode-active]) .widget_tag_cloud .gtag-search input::placeholder {
		color: rgba(255, 255, 255, 0.50);
	}
	html:not([data-wp-dark-mode-active]) .widget_tag_cloud .gtag-search .gcat-search-icon {
		color: rgba(255, 255, 255, 0.55);
	}
}

/* Title: icon square + label, like the categories parent row */
/* Plain title, no icon — matches the Categories widget title. */
.widget_tag_cloud .widget-title {
	margin: 0 0 12px 0;
	padding: 0;
	border: 0;
}

/* Tag cloud root — now a vertical stack of three grouped sections */
.widget_tag_cloud .tagcloud {
	display: block;
}
.widget_tag_cloud .tagcloud-grouped {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.widget_tag_cloud .tagcloud-section {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
/* Section header: same structure as the Categories parent row (MOVIES) —
   solid-accent icon square + UPPERCASE label + count on the RIGHT + a 2px
   accent underline bar. --gtag-accent is per-section (set further below). */
.widget_tag_cloud .tagcloud-section-title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 12px 4px 12px 0;
	border: 0;
	border-bottom: 2px solid var(--gtag-accent);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gtag-text);
	line-height: 1.2;
	font-family: inherit;
}
.widget_tag_cloud .tagcloud-section-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: var(--gtag-accent);
	color: #ffffff;
	flex-shrink: 0;
}
.widget_tag_cloud .tagcloud-section-icon svg {
	width: 15px;
	height: 15px;
	display: block;
}
.widget_tag_cloud .tagcloud-section-label {
	color: inherit;
}
.widget_tag_cloud .tagcloud-section-count {
	margin-left: auto;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--gtag-text-muted);
	background: none;
	padding: 0;
	border-radius: 0;
	line-height: 1.2;
}
.widget_tag_cloud .tagcloud-section-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 5px;
}

/* Every pill: uniform size, gray bg, dark text + muted count */
.widget_tag_cloud .tagcloud a.tag-cloud-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 10px;
	background: var(--gtag-pill-bg);
	color: var(--gtag-text);
	border: 0;
	border-radius: 999px;
	font-size: 12px !important;       /* defeat inline style="font-size:Xpt" from WP cloud */
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
	transition: background 160ms ease, color 160ms ease, transform 120ms ease;
	letter-spacing: 0;
	text-transform: none;
}
.widget_tag_cloud .tagcloud a.tag-cloud-link:hover,
.widget_tag_cloud .tagcloud a.tag-cloud-link:focus-visible {
	background: var(--gtag-pill-bg-hover);
	color: var(--gtag-accent);
	outline: none;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 2px 6px rgba(107, 91, 149, 0.10);
}
.widget_tag_cloud .tagcloud a.tag-cloud-link:active {
	box-shadow: none;
}
.widget_tag_cloud .tagcloud .tag-link-count {
	font-size: 10px;
	font-weight: 500;
	color: var(--gtag-text-muted);
	margin-left: 1px;
}
.widget_tag_cloud .tagcloud a.tag-cloud-link:hover .tag-link-count {
	color: var(--gtag-accent);
}

/* ============================================================
   Knowledge Desk card — grouped "Read first" / "Good to know"
   Markup injected by auto_insert_after_post() in functions.php.
   Fonts (Hanken Grotesk + JetBrains Mono) enqueued as om-kd-fonts.
   ============================================================ */
/* Light mode (default — matches the theme's light skin) */
.kd-card {
  --kd-accent:          oklch(0.50 0.18 277);            /* indigo                            */
  --kd-accent-soft:     oklch(0.50 0.18 277 / 0.35);
  --kd-accent-tint:     oklch(0.95 0.03 277);            /* faint indigo chip bg              */
  --kd-warn:            oklch(0.62 0.16 50);             /* amber                             */
  --kd-chip-ink:        #fff;                            /* text on the bright chips          */
  --kd-ink:             oklch(0.26 0.02 277);            /* headings                          */
  --kd-body:            oklch(0.33 0.015 277);           /* body text                         */
  --kd-muted:           oklch(0.55 0.02 277);
  --kd-muted-ico:       oklch(0.60 0.02 277);
  --kd-border:          oklch(0.92 0.008 280);
  --kd-surface:         #fff;                            /* card surface                      */
  --kd-shadow:          0 1px 2px rgba(24, 24, 40, 0.04), 0 22px 48px -28px rgba(24, 24, 40, 0.2);
  --kd-primary-bg:      oklch(0.975 0.012 277);          /* "read first" raised panel         */
  --kd-primary-border:  oklch(0.92 0.022 277);
  --kd-primary-divider: oklch(0.91 0.02 277);
  --kd-divider:         oklch(0.95 0.006 280);
}

/* Dark mode — applied when WP Dark Mode marks <html data-wp-dark-mode-active>.
   The card carries .wp-dark-mode-ignore so the plugin leaves its colours to us. */
html[data-wp-dark-mode-active] .kd-card {
  --kd-accent:          oklch(0.78 0.13 282);            /* periwinkle — pops on dark         */
  --kd-accent-soft:     oklch(0.78 0.13 282 / 0.40);
  --kd-accent-tint:     oklch(0.78 0.13 282 / 0.15);
  --kd-warn:            oklch(0.80 0.14 70);
  --kd-chip-ink:        oklch(0.18 0.02 277);            /* dark text on the bright chips     */
  --kd-ink:             oklch(0.96 0.01 277);
  --kd-body:            oklch(0.84 0.015 277);
  --kd-muted:           oklch(0.66 0.02 277);
  --kd-muted-ico:       oklch(0.66 0.02 277);
  --kd-border:          oklch(1 0 0 / 0.10);
  --kd-surface:         oklch(0.21 0.018 277);
  --kd-shadow:          0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 18px 40px -24px rgba(0, 0, 0, 0.7);
  --kd-primary-bg:      oklch(0.26 0.025 282);
  --kd-primary-border:  oklch(0.78 0.13 282 / 0.22);
  --kd-primary-divider: oklch(1 0 0 / 0.09);
  --kd-divider:         oklch(1 0 0 / 0.07);
}

/* keep the card's box model self-contained on the dark site */
.kd-card, .kd-card *, .kd-card *::before, .kd-card *::after { box-sizing: border-box; }

/* ---- Card shell ---- */
.kd-card {
  width: 690px;
  max-width: 100%;
  margin: 0 auto;
  background: var(--kd-surface);
  border: 1px solid var(--kd-border);
  border-radius: 18px;
  box-shadow: var(--kd-shadow);
  overflow: hidden;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  color: var(--kd-body);
  text-align: left;
}

/* ---- Icons ---- */
.kd-card .kd-ico { width: 1em; height: 1em; display: block; }

/* ---- Header ---- */
.kd-header { display: flex; align-items: center; gap: 14px; padding: 28px 32px 22px; }
.kd-header__icon {
  width: 46px; height: 46px; flex: none;
  border-radius: 13px;
  background: var(--kd-accent-tint);
  color: var(--kd-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 23px;
}
.kd-header__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kd-header__title { font-weight: 800; font-size: 24px; letter-spacing: -0.01em; color: var(--kd-ink); margin: 0; }
.kd-header__subtitle { font-weight: 500; font-size: 13.5px; color: var(--kd-muted); }

/* ---- "Read this first" group ---- */
.kd-readfirst {
  margin: 4px 22px 0;
  padding: 4px 18px 16px;
  background: var(--kd-primary-bg);
  border: 1px solid var(--kd-primary-border);
  border-radius: 16px;
}
.kd-readfirst__head { display: flex; align-items: center; gap: 8px; padding: 14px 0 10px; }
.kd-label {
  font: 700 10px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--kd-accent);
}
.kd-count {
  font: 600 10px/1 'JetBrains Mono', ui-monospace, monospace;
  color: var(--kd-chip-ink); background: var(--kd-accent);
  border-radius: 999px; padding: 3px 7px;
}

/* ---- Primary item (inside Read first) ---- */
.kd-item {
  display: flex; gap: 12px; padding: 12px 0;
  border-top: 1px solid var(--kd-primary-divider);
  font-size: 14.5px; line-height: 1.58; color: var(--kd-body);
}
.kd-item__ico { display: inline-flex; font-size: 18px; padding-top: 2px; flex: none; }
.kd-item__ico--rec { color: var(--kd-accent); }
.kd-item__ico--important { color: var(--kd-warn); }
.kd-item__body { flex: 1; min-width: 0; }

/* ---- Severity tag chips ---- */
.kd-tag {
  display: inline-block;
  font: 700 9px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.08em;
  padding: 3px 7px; border-radius: 5px;
  color: var(--kd-chip-ink); margin-right: 7px;
}
.kd-tag--rec { background: var(--kd-accent); }
.kd-tag--important { background: var(--kd-warn); }

/* ---- "Good to know" section ---- */
.kd-section { padding: 4px 30px 24px; }
.kd-section__label {
  font: 700 10px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--kd-muted); padding: 16px 0 2px;
}
.kd-row {
  display: flex; gap: 12px; padding: 14px 0;
  border-top: 1px solid var(--kd-divider);
  font-size: 14.5px; line-height: 1.58; color: var(--kd-body);
}
.kd-row__ico { display: inline-flex; font-size: 18px; padding-top: 1px; flex: none; color: var(--kd-muted-ico); }

/* ---- Inline elements ---- */
.kd-strong { font-weight: 700; color: var(--kd-ink); }
.kd-card .kd-link {
  color: var(--kd-accent); font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2.5px;
  text-decoration-color: var(--kd-accent-soft);
}
.kd-card .kd-link:hover { text-decoration-color: var(--kd-accent); }

/* tighter padding on small screens */
@media (max-width: 600px) {
  .kd-header { padding: 22px 18px 16px; }
  .kd-readfirst { margin: 4px 12px 0; padding: 4px 14px 12px; }
  .kd-section { padding: 4px 18px 20px; }
}

/* ---- Collapsible behaviour (native <details>/<summary>) ---- */
details.kd-card > summary.kd-header {
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
details.kd-card > summary.kd-header::-webkit-details-marker { display: none; }
details.kd-card > summary.kd-header::marker { content: ''; }
details.kd-card > summary.kd-header:focus-visible {
  outline: 2px solid var(--kd-accent);
  outline-offset: -3px;
}
.kd-header__chevron {
  margin-left: auto;
  flex: none;
  display: inline-flex;
  font-size: 20px;
  color: var(--kd-muted);
  transition: transform .25s ease, color .2s ease;
}
details.kd-card[open] > summary .kd-header__chevron { transform: rotate(180deg); }
summary.kd-header:hover .kd-header__chevron { color: var(--kd-accent); }
/* tighten the header's bottom space only while collapsed */
details.kd-card:not([open]) > summary.kd-header { padding-bottom: 26px; }

/* gentle reveal of the body when opened */
details.kd-card[open] > .kd-readfirst,
details.kd-card[open] > .kd-section { animation: kd-reveal .28s ease both; }
@keyframes kd-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .kd-header__chevron { transition: none; }
  details.kd-card[open] > .kd-readfirst,
  details.kd-card[open] > .kd-section { animation: none; }
}

/* ── Unified post Tags section (quality + genre/language pills) ──────────────
   Dark/light per the om convention: light-default token layer + dark override
   scoped to html[data-wp-dark-mode-active]; .wp-dark-mode-ignore on the root. */
.om-tags-section{
	--ots-surface:#fff; --ots-border:#ececec; --ots-shadow:0 1px 3px rgba(0,0,0,.04);
	--ots-legend-ink:#555; --ots-divider:#eee;
	--ots-pill-bg:#fff; --ots-pill-ink:#333; --ots-pill-border:#e6e6e6;
	--ots-pill-shadow:0 1px 2px rgba(0,0,0,.05);
	--ots-pill-ink-hover:#111; --ots-pill-border-hover:#cfcfcf;
	border:1px solid var(--ots-border); border-radius:12px; padding:16px 18px;
	background:var(--ots-surface); box-shadow:var(--ots-shadow); margin:14px 0;
}
html[data-wp-dark-mode-active] .om-tags-section{
	--ots-surface:#1e1f24; --ots-border:#33353b; --ots-shadow:0 1px 3px rgba(0,0,0,.4);
	--ots-legend-ink:#aeb3bd; --ots-divider:#33353b;
	--ots-pill-bg:#2a2c33; --ots-pill-ink:#e6e8ec; --ots-pill-border:#3a3d45;
	--ots-pill-shadow:0 1px 2px rgba(0,0,0,.3);
	--ots-pill-ink-hover:#fff; --ots-pill-border-hover:#50535c;
}
.om-tags-section .om-tags-legend{display:flex;flex-wrap:wrap;gap:18px;padding-bottom:12px;border-bottom:1px solid var(--ots-divider);margin-bottom:14px}
.om-tags-section .om-tl{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--ots-legend-ink)}
.om-tags-section .om-tags-pills{display:flex;flex-wrap:wrap;gap:8px}
.om-tags-section a.om-pill{display:inline-flex!important;align-items:center;gap:7px;background:var(--ots-pill-bg)!important;border:1px solid var(--ots-pill-border)!important;border-radius:999px!important;padding:5px 13px!important;margin:0!important;font-size:13px;font-weight:600;color:var(--ots-pill-ink)!important;text-decoration:none!important;box-shadow:var(--ots-pill-shadow);transition:border-color .15s,box-shadow .15s,color .15s}
.om-tags-section a.om-pill:hover{border-color:var(--ots-pill-border-hover)!important;box-shadow:0 1px 4px rgba(0,0,0,.12);color:var(--ots-pill-ink-hover)!important}
.om-tags-section .om-dot{display:inline-block;width:7px;height:7px;border-radius:50%;flex:0 0 auto}

/* ── Redesigned single-post header card (2026-06-30) ───────────────────────
   Light-default token layer + dark override (om dark/light convention);
   .wp-dark-mode-ignore on the root so the plugin doesn't recolour it. */
.oh-header{
	--oh-surface:#fff; --oh-border:#ececec; --oh-shadow:0 1px 3px rgba(0,0,0,.05);
	--oh-title:#16181d; --oh-meta:#6b7280; --oh-cat-ink:#374151; --oh-cat-border:#d7dae0;
	background:var(--oh-surface)!important; border:1px solid var(--oh-border); border-radius:16px;
	padding:22px 24px; box-shadow:var(--oh-shadow); margin-bottom:18px;
}
html[data-wp-dark-mode-active] .oh-header{
	--oh-surface:#15171c; --oh-border:#2a2d34; --oh-shadow:0 2px 10px rgba(0,0,0,.45);
	--oh-title:#e0e2e4; --oh-meta:#9aa0ac; --oh-cat-ink:#c7ccd6; --oh-cat-border:#3a3d45;
}
.oh-header .oh-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.oh-header .oh-cats{display:flex;flex-wrap:wrap;gap:8px}
.oh-header a.oh-cat{display:inline-block;padding:5px 14px;border:1px solid var(--oh-cat-border);border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--oh-cat-ink)!important;text-decoration:none;background:transparent!important}
.oh-header a.oh-cat:hover{border-color:#3b6fde;color:#3b6fde!important}
.oh-header a.oh-google{display:inline-block;padding:7px 16px;border-radius:999px;background:#21a366!important;color:#fff!important;font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap;box-shadow:0 1px 2px rgba(0,0,0,.15)}
.oh-header a.oh-google:hover{background:#1c8a56!important}
.oh-header .oh-metaline{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:2px 0 14px;font-size:13px;color:var(--oh-meta)}
.oh-header .oh-metaline a{color:var(--oh-meta);text-decoration:none}
.oh-header .oh-metaline a.oh-admin{color:#e0556e!important;font-weight:700}
.oh-header .oh-metaline .meta-item{display:inline-flex;align-items:center;margin:0;line-height:1.4}
.oh-header .oh-metaline .meta-date span,.oh-header .oh-metaline .meta-comments a,.oh-header .oh-metaline .meta-views{display:inline-flex;align-items:center}
.oh-header .oh-metaline .meta-comments a:before,.oh-header .oh-metaline .meta-date span:before,.oh-header .oh-metaline .meta-views:before,.oh-header .oh-metaline .meta-rtime:before{vertical-align:middle;line-height:1;margin-left:0}
.oh-header .oh-metaline a,.oh-header .oh-metaline .updated{text-decoration:none!important;border-bottom:0!important;box-shadow:none!important}
.oh-header .oh-title{font-size:25px;line-height:1.28;font-weight:800;letter-spacing:-.005em;color:var(--oh-title)!important;margin:4px 0 16px;border:0;padding:0}
@media(min-width:768px){.oh-header .oh-title{font-size:29px}}
.oh-header .oh-pills{display:flex;flex-wrap:wrap;gap:6px}
.oh-header .oh-pill{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.02em;line-height:1.6;color:#fff!important;text-decoration:none;box-shadow:0 1px 2px rgba(0,0,0,.15);border:0}
.oh-header .oh-pill.oh-year{background:#0ea5b7!important}
.oh-header .oh-pill.oh-res{background:#3b6fde!important}
.oh-header .oh-pill.oh-hdr{background:#7c3aed!important}
.oh-header .oh-pill.oh-audio{background:#a16207!important}
.oh-header .oh-pill.oh-fps{background:#e0556e!important}
.oh-header .oh-pill.oh-edition{background:#12b886!important}
.oh-header .oh-pill.oh-format{background:#0ea5b7!important}
.oh-header .oh-pill.oh-status-on{background:#fa5252!important}
.oh-header .oh-pill.oh-status-re{background:#748ffc!important}
@media(max-width:600px){.oh-header{padding:16px 16px}.oh-header .oh-title{font-size:22px}}

/* ── Tags widget: adopt the bottom Tags-section dot-pill design ─────────────
   Colored category dot per pill (Language=violet, Quality=blue, Genre=crimson),
   white/dark pill surface + border, legend-style section dots. */
.widget_tag_cloud{--gtag-pill-surface:#ffffff;--gtag-pill-border:#e6e6e6}
html[data-wp-dark-mode-active] .widget_tag_cloud{
	--gtag-bg:#1e1f24;--gtag-border:#33353b;--gtag-text:#e0e2e4;--gtag-text-muted:#9aa0ac;
	--gtag-pill-surface:#2a2c33;--gtag-pill-border:#3a3d45;--gtag-pill-bg-hover:#343742;--gtag-accent-soft:#33353b;
}
/* per-section accent — drives the header icon square, underline bar, and pill
   dot. Each section is distinct, mirroring the per-parent accents in Categories. */
.widget_tag_cloud .tagcloud-section--genre{--gtag-accent:#6b5b95}
.widget_tag_cloud .tagcloud-section--language{--gtag-accent:#2f8f83}
.widget_tag_cloud .tagcloud-section--quality{--gtag-accent:#3f6fa2}
/* pills: white/dark surface + border + leading category dot */
.widget_tag_cloud .tagcloud a.tag-cloud-link{background:var(--gtag-pill-surface)!important;border:1px solid var(--gtag-pill-border)!important;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.widget_tag_cloud .tagcloud a.tag-cloud-link::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--gtag-accent);flex:0 0 auto}
.widget_tag_cloud .tagcloud a.tag-cloud-link:hover{background:var(--gtag-pill-bg-hover)!important}

/* ── Dark mode: download buttons — "lit edge" ───────────────────────────────
   In light mode nearly every download button carries the WP core preset
   `has-vivid-cyan-blue-to-vivid-purple-gradient-background` (~67k occurrences;
   a few others use different gradient/solid presets). Painted as a FILL on a
   dark surface those saturated gradients read as washed-out pastel smears.

   So the gradient changes job rather than disappearing: in dark mode it stops
   being the fill and becomes the light source — a hairline lit rim plus a soft
   bloom underneath, around a black body. The button reads black, keeps the
   site's existing colour identity, and still announces itself as the primary
   action on the page (it is: it's why the visitor is here).

   The rim is done with the two-background / padding-box + border-box trick —
   the fill paints to the padding edge, the gradient paints to the border edge,
   so a 1px transparent border becomes a gradient hairline that follows the
   pill radius. The `background` SHORTHAND is what makes this work: it resets
   the preset's background-image in the same declaration.

   Geometry (radius/padding/font) is left to core + the light-mode rules.

   NOTE on the doubled class: the dark-mode rules above set
   `.gridlove-box a{color}` / `.gridlove-box a:hover{color}` !important, which
   outranks a single `.wp-block-button__link` on specificity — the label would
   inherit body-grey at rest and accent-blue on hover. Repeating the class
   (a.x.x) clears that without resorting to an ancestor selector, so these keep
   working wherever a button block is placed.

   SCOPE — the lit rim means "primary action", so it is spent only on buttons
   that are the point of their region: post download buttons, the comment
   composer's Comment/submit, the Log in card, the request-hint call to action,
   and plain form submits inside post content. Secondary comment controls
   (reply / edit / translate / emoji / GIF / AI / moderation) stay as the quiet
   ghost buttons they already are — if everything glows, nothing does. */
html[data-wp-dark-mode-active] {
	--omb-fill:       linear-gradient(180deg, #1b1f26 0%, #0b0c0f 100%);
	--omb-fill-hover: linear-gradient(180deg, #262b34 0%, #121419 100%);
	--omb-rim:        linear-gradient(135deg, #0693e3 0%, #6f6ae8 52%, #9b51e0 100%);
	--omb-rim-hover:  linear-gradient(135deg, #21a8f0 0%, #8b86ff 52%, #b46bf5 100%);
	--omb-glow:       0 2px 16px -7px rgba(111, 106, 232, 0.75);
	--omb-glow-hover: 0 6px 22px -6px rgba(111, 106, 232, 0.95);
}
html[data-wp-dark-mode-active] a.wp-block-button__link.wp-block-button__link,
html[data-wp-dark-mode-active] a.wp-element-button.wp-element-button,
html[data-wp-dark-mode-active] #omcom .omc-submit,
html[data-wp-dark-mode-active] #omcom a.omc-login-btn,
html[data-wp-dark-mode-active] #omcom a.omc-request-hint-btn,
html[data-wp-dark-mode-active] .entry-content button[type="submit"],
html[data-wp-dark-mode-active] .entry-content input[type="submit"] {
	border: 1px solid transparent !important;
	background: var(--omb-fill) padding-box, var(--omb-rim) border-box !important;
	color: #d9dbde !important;
	/* inset top highlight = raised/pressable affordance; the outer bloom is the
	   gradient bleeding onto the card, which is what catches the eye. */
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), var(--omb-glow) !important;
	transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
html[data-wp-dark-mode-active] a.wp-block-button__link.wp-block-button__link:hover,
html[data-wp-dark-mode-active] a.wp-element-button.wp-element-button:hover,
html[data-wp-dark-mode-active] #omcom .omc-submit:hover:not(:disabled),
html[data-wp-dark-mode-active] #omcom a.omc-login-btn:hover,
html[data-wp-dark-mode-active] #omcom a.omc-request-hint-btn:hover,
html[data-wp-dark-mode-active] .entry-content button[type="submit"]:hover,
html[data-wp-dark-mode-active] .entry-content input[type="submit"]:hover {
	background: var(--omb-fill-hover) padding-box, var(--omb-rim-hover) border-box !important;
	/* the theme's generic a:hover recolours the label to the accent blue, which
	   dims it against the now-brighter body — hold it white. */
	color: #e2e4e6 !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), var(--omb-glow-hover) !important;
	transform: translateY(-1px);
	filter: none !important;   /* omc-login-btn dims itself with brightness(.94) */
}
/* Press: settle back down and pull the bloom in tight. */
html[data-wp-dark-mode-active] a.wp-block-button__link.wp-block-button__link:active,
html[data-wp-dark-mode-active] a.wp-element-button.wp-element-button:active,
html[data-wp-dark-mode-active] #omcom .omc-submit:active:not(:disabled),
html[data-wp-dark-mode-active] #omcom a.omc-login-btn:active,
html[data-wp-dark-mode-active] #omcom a.omc-request-hint-btn:active,
html[data-wp-dark-mode-active] .entry-content button[type="submit"]:active,
html[data-wp-dark-mode-active] .entry-content input[type="submit"]:active {
	transform: translateY(0);
	box-shadow:
		inset 0 2px 4px rgba(0, 0, 0, 0.55),
		0 1px 8px -6px rgba(111, 106, 232, 0.7) !important;
}
/* Keyboard focus needs a ring that doesn't rely on the rim (the rim is always
   on, so it can't signal focus by itself). */
html[data-wp-dark-mode-active] a.wp-block-button__link.wp-block-button__link:focus-visible,
html[data-wp-dark-mode-active] a.wp-element-button.wp-element-button:focus-visible,
html[data-wp-dark-mode-active] #omcom .omc-submit:focus-visible,
html[data-wp-dark-mode-active] #omcom a.omc-login-btn:focus-visible,
html[data-wp-dark-mode-active] #omcom a.omc-request-hint-btn:focus-visible,
html[data-wp-dark-mode-active] .entry-content button[type="submit"]:focus-visible,
html[data-wp-dark-mode-active] .entry-content input[type="submit"]:focus-visible {
	outline: 2px solid #8b86ff !important;
	outline-offset: 2px !important;
}
/* Disabled submit (om-comments disables it while posting / when empty): kill
   the rim and the bloom outright. A glowing button that ignores clicks is a
   worse lie than a dim one. */
html[data-wp-dark-mode-active] #omcom .omc-submit:disabled {
	background: rgba(var(--om-content-txt-rgb), 0.10) !important;
	color: var(--om-content-meta) !important;
	border-color: rgba(var(--om-content-txt-rgb), 0.16) !important;
	box-shadow: none !important;
	opacity: 1 !important;
	transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
	html[data-wp-dark-mode-active] a.wp-block-button__link.wp-block-button__link,
	html[data-wp-dark-mode-active] a.wp-element-button.wp-element-button,
	html[data-wp-dark-mode-active] #omcom .omc-submit,
	html[data-wp-dark-mode-active] #omcom a.omc-login-btn,
	html[data-wp-dark-mode-active] #omcom a.omc-request-hint-btn { transition: none; }
	html[data-wp-dark-mode-active] a.wp-block-button__link.wp-block-button__link:hover,
	html[data-wp-dark-mode-active] a.wp-element-button.wp-element-button:hover,
	html[data-wp-dark-mode-active] #omcom .omc-submit:hover,
	html[data-wp-dark-mode-active] #omcom a.omc-login-btn:hover,
	html[data-wp-dark-mode-active] #omcom a.omc-request-hint-btn:hover { transform: none; }
	html[data-wp-dark-mode-active] .om-acc-btn { transition: none; }
	html[data-wp-dark-mode-active] .om-acc-btn:hover { transform: none; }
}

/* [o] buttons: unlike the generic lit-edge tier above, these keep the
   om-official violet accent as their identity rather than switching to the
   neutral dark-gray/blue-rim treatment — same hue as light mode, just
   deepened for contrast against a dark page, with a violet-tinted glow
   instead of the shared blue/purple one. */
html[data-wp-dark-mode-active] .om-acc-btn {
	background: linear-gradient(180deg, #7a68a8 0%, #574a7d 100%) !important;
	color: #fff !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 2px 16px -7px rgba(107, 91, 149, 0.65) !important;
}
html[data-wp-dark-mode-active] .om-acc-btn:hover {
	background: linear-gradient(180deg, #8a77bd 0%, #6b5b95 100%) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 6px 22px -6px rgba(107, 91, 149, 0.85) !important;
}
html[data-wp-dark-mode-active] .om-acc-btn:active {
	background: linear-gradient(180deg, #5d4e83 0%, #453a5f 100%) !important;
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.45) !important;
}
html[data-wp-dark-mode-active] .om-acc-btn:focus-visible {
	outline: 2px solid #b9a7e0 !important;
	outline-offset: 2px !important;
}

/* [o] collapsible bodies: the light-mode lavender tint (#eef2ff) would
   glare against a dark page, so swap it for the standard content-card
   tokens with a thin violet-tinted rim to keep the accent link to the
   button above it. */
html[data-wp-dark-mode-active] .om-acc-body {
	background: var(--om-content-bg) !important;
	color: var(--om-content-txt) !important;
	border-color: rgba(107, 91, 149, 0.35) !important;
}

/* List view: same violet-on-dark identity as the light-mode rows above, just
   lightened to hold up on the dark card background. */
html[data-wp-dark-mode-active] .om-acc-list-item {
	border-bottom-color: rgba(107, 91, 149, 0.28) !important;
}
html[data-wp-dark-mode-active] .om-acc-list-name {
	color: var(--om-content-h) !important;
}
html[data-wp-dark-mode-active] .om-acc-list-size {
	color: var(--om-content-meta) !important;
}
html[data-wp-dark-mode-active] .om-acc-list-link {
	border-color: #b6a7d6 !important;
	color: #b6a7d6 !important;
}
html[data-wp-dark-mode-active] .om-acc-list-link:hover {
	background: #7a68a8 !important;
	color: #fff !important;
}

/* Broken-link buttons (om-broken-links mu-plugin) are dimmed with
   opacity .55 + grayscale(1). That reads fine over the light gradient, but a
   55%-opacity black button vanishes into the dark card — and it must NOT get
   the lit rim, which is the site's "this is clickable" signal. Flat, dashed,
   unlit: the exact inverse of the live buttons. */
html[data-wp-dark-mode-active] .om-broken-link.om-broken-link.wp-block-button__link,
html[data-wp-dark-mode-active] .om-broken-link.om-broken-link.wp-element-button {
	opacity: 1 !important;
	filter: none !important;
	background: rgba(var(--om-content-txt-rgb), 0.07) !important;
	color: var(--om-content-meta) !important;
	border: 1px dashed rgba(var(--om-content-txt-rgb), 0.28) !important;
	box-shadow: none !important;
	transform: none !important;
}

/* ── Dark mode: pills & badges — "tinted outline" ───────────────────────────
   Same system as the lit-edge buttons above (dark body, coloured edge,
   coloured ink — never a saturated fill), but at LABEL weight: no bloom, no
   lift, no transition. Buttons are actions and get the gradient rim; these are
   labels and get a flat hue rim. Keeping the two tiers visually distinct is
   the point — otherwise the page reads as wall-to-wall glowing chrome.

   Every hue is PRESERVED, because on these pills the colour is data: year vs
   resolution vs HDR vs audio vs fps vs edition vs status are told apart by hue
   alone. Flattening them all to one neutral chip would destroy the encoding.
   So each variant declares its hue as `--omp` (rgb channels, for the tinted
   body + rim) and `--omp-ink` (the hue lightened until it holds up as text on
   a dark tint). The shared rule consumes both.

   NOTE the doubled class on anchors (a.oh-pill.oh-pill): same
   `.gridlove-box a{color:…!important}` trap as the buttons — it is in fact why
   these pills' `color:#fff!important` was already losing, leaving grey-on-
   saturated text (worst on "Google it!") in dark mode before this block. */
html[data-wp-dark-mode-active] .oh-header a.oh-pill.oh-pill,
html[data-wp-dark-mode-active] .oh-header a.oh-google.oh-google,
html[data-wp-dark-mode-active] .psc-badge,
html[data-wp-dark-mode-active] .entry-meta .ongoing,
html[data-wp-dark-mode-active] .entry-meta .reuploaded {
	--omp: 148, 163, 184;          /* neutral fallback */
	--omp-ink: #c7ccd6;
	background: rgba(var(--omp), 0.14) !important;
	background-image: none !important;
	border: 1px solid rgba(var(--omp), 0.42) !important;
	color: var(--omp-ink) !important;
	box-shadow: none !important;
	text-shadow: none !important;
	animation: none !important;    /* .ongoing/.reuploaded pulse — noise on dark */
}
/* per-variant hues (rgb channels + lightened ink) */
html[data-wp-dark-mode-active] .oh-header a.oh-pill.oh-year,
html[data-wp-dark-mode-active] .oh-header a.oh-pill.oh-format { --omp: 14, 165, 183;  --omp-ink: #4fd3e4; }
html[data-wp-dark-mode-active] .oh-header a.oh-pill.oh-res     { --omp: 59, 111, 222;  --omp-ink: #8bacf5; }
html[data-wp-dark-mode-active] .oh-header a.oh-pill.oh-hdr     { --omp: 124, 58, 237;  --omp-ink: #b794fa; }
html[data-wp-dark-mode-active] .oh-header a.oh-pill.oh-audio   { --omp: 202, 138, 4;   --omp-ink: #e3b341; }
html[data-wp-dark-mode-active] .oh-header a.oh-pill.oh-fps     { --omp: 224, 85, 110;  --omp-ink: #f2899b; }
html[data-wp-dark-mode-active] .oh-header a.oh-pill.oh-edition { --omp: 18, 184, 134;  --omp-ink: #4fd6a8; }
html[data-wp-dark-mode-active] .oh-header a.oh-pill.oh-status-on { --omp: 250, 82, 82; --omp-ink: #ff8787; }
html[data-wp-dark-mode-active] .oh-header a.oh-pill.oh-status-re { --omp: 116, 143, 252; --omp-ink: #a5b4fd; }
html[data-wp-dark-mode-active] .oh-header a.oh-google.oh-google  { --omp: 33, 163, 102; --omp-ink: #4ade9b; }
html[data-wp-dark-mode-active] .psc-badge                        { --omp: 249, 115, 22; --omp-ink: #fdba74; }
html[data-wp-dark-mode-active] .entry-meta .ongoing              { --omp: 250, 82, 82;  --omp-ink: #ff8787; }
html[data-wp-dark-mode-active] .entry-meta .reuploaded           { --omp: 33, 150, 243; --omp-ink: #7cc4fb; }

/* Pills that are links get a hover, since they navigate to the archive. */
html[data-wp-dark-mode-active] .oh-header a.oh-pill.oh-pill:hover,
html[data-wp-dark-mode-active] .oh-header a.oh-google.oh-google:hover {
	background: rgba(var(--omp), 0.24) !important;
	border-color: rgba(var(--omp), 0.68) !important;
	color: var(--omp-ink) !important;
}
/* Category pills are already a transparent outline in both modes — only the
   hover needed fixing (it hardcoded the light-mode blue). */
html[data-wp-dark-mode-active] .oh-header a.oh-cat.oh-cat:hover {
	border-color: var(--om-content-acc) !important;
	color: var(--om-content-acc) !important;
}

/* Off-canvas timeline category chip: a near-white chip (#f3f4f6) that the old
   brightness(.86) filter barely dented — it still glared. Give it the real
   neutral treatment and drop the filter. Platform/source chips keep their
   filter: their hues are self-contained and still read correctly. */
html[data-wp-dark-mode-active] .gsa-tl-cat {
	filter: none !important;
	background: rgba(var(--om-content-txt-rgb), 0.10) !important;
	color: var(--om-content-txt) !important;
	border: 1px solid rgba(var(--om-content-txt-rgb), 0.20) !important;
}

/* ── Dark mode: text emphasis ceiling ───────────────────────────────────────
   Dark-theme best practice (Material's 87/60/38 emphasis scale, and the
   general rule against pure white on near-black): high-emphasis text should
   land around 13–14:1, not 17–20:1. Above that, light bleeds past the glyph
   edges — "halation" — and small/bold text starts to buzz. Body
   (--om-content-txt, ~12:1) and meta (--om-content-meta, ~6.7:1 ≈ Material's
   60%) already measured correctly and are deliberately untouched; what needed
   capping was everything ABOVE high-emphasis. Retuned at the token level in
   the dark palette block: --om-content-h / --om-module-h / --om-header-*-txt /
   --om-footer-txt / --oh-title, plus the lit-edge button ink.

   White on a saturated COLOURED fill (year-pill hover, etc.) is left alone —
   that is not the halation case and needs the contrast.

   Below: the stragglers that hardcode a colour instead of reading a token. */

/* Recent-comments author names were `color: yellow` (pure #ff0, 17:1). NOTE the
   widget surface is dark in BOTH modes, so this is only scoped to dark per the
   brief — the same harshness exists in light mode if you want it extended. */
html[data-wp-dark-mode-active] .comment-author-link,
html[data-wp-dark-mode-active] .comment-author-link a { color: #e3c04a !important; }