/* Content mode: 18+ popup, All / Straight / Futanari switches, per-mode menus */

/* ---------- 18+ popup (first visit) ---------- */
.cm-gate {display: none;}
html.cm-gate-on, html.cm-gate-on body {overflow: hidden;}
html.cm-gate-on .cm-gate {display: flex; position: fixed; inset: 0; z-index: 100000; align-items: center; justify-content: center;
	padding: 16px; overflow-y: auto; background: rgba(10,7,16,0.55);
	-webkit-backdrop-filter: blur(18px) saturate(0.8); backdrop-filter: blur(18px) saturate(0.8);}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	html.cm-gate-on .cm-gate {background: rgba(10,7,16,0.96);}
}
.cm-gate__box {width: 100%; max-width: 470px; margin: auto; padding: 32px 30px 24px; text-align: center; color: #fff;
	background: linear-gradient(180deg, #221a31 0%, #17121f 100%); border: 1px solid rgba(180,124,255,0.22);
	border-radius: 24px; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.03) inset;
	animation: cm-gate-in .35s ease both;}
@keyframes cm-gate-in {from {opacity: 0; transform: translateY(14px) scale(.98);} to {opacity: 1; transform: none;}}
.cm-gate__box:focus {outline: none;}
.cm-gate__badge {width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center;
	font-size: 22px; font-weight: 700; letter-spacing: 0; color: #fff; background: var(--grad); box-shadow: var(--glow);}
.cm-gate__title {font-size: 26px; font-weight: 700; margin-bottom: 10px;}
.cm-gate__text {font-size: 14px; line-height: 1.6; color: #b9b1cc; margin: 0 0 22px;}
.cm-gate__ask {font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: #9d8fc0; margin-bottom: 12px;}
.cm-gate__btns {display: grid; grid-template-columns: 1fr 1fr; gap: 10px;}
.cm-gate .cm-gate__btn {height: 48px; padding: 0 14px; border-radius: 14px; font-size: 15px; font-weight: 700; color: #fff;
	background: rgba(255,255,255,0.06); background-image: none; box-shadow: inset 0 0 0 1px rgba(180,124,255,0.35);
	transition: background-color .2s, box-shadow .2s, transform .1s;}
.cm-gate .cm-gate__btn:hover {background-color: rgba(168,85,247,0.2); background-image: none; box-shadow: inset 0 0 0 1px rgba(200,150,255,0.7);}
.cm-gate .cm-gate__btn:active {transform: scale(.98);}
.cm-gate .cm-gate__btn--main {grid-column: 1 / -1; height: 54px; font-size: 17px; background: var(--grad); box-shadow: var(--glow);}
.cm-gate .cm-gate__btn--main:hover {background: var(--grad-hover); box-shadow: var(--glow);}
.cm-gate__note {font-size: 12px; color: #8a819e; margin-top: 14px;}
.cm-gate__leave {display: inline-block; margin-top: 14px; font-size: 13px; color: #8a819e !important; text-decoration: underline;}
.cm-gate__leave:hover {color: #fff !important;}
@media (max-width: 470px) {
	.cm-gate__box {padding: 26px 20px 20px; border-radius: 20px;}
	.cm-gate__title {font-size: 22px;}
	.cm-gate__text {font-size: 13px;}
}

/* switching in progress */
html.cm-loading .content {opacity: .45; transition: opacity .2s; pointer-events: none;}

/* ---------- Switches: All Content / Straight / Futanari ---------- */
.cm-sw {margin: 0 0 22px; padding-bottom: 20px; border-bottom: 1px solid var(--bdc); user-select: none;}
.cm-sw__row {display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer;
	position: relative; min-height: 38px;}
.cm-sw__name {font-size: 17px; font-weight: 700; color: var(--tt); line-height: 1.2;}
.cm-sw__row--all .cm-sw__name {font-size: 20px;}
.cm-sw__input {position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none;}
.cm-sw__track {flex: 0 0 auto; position: relative; width: 40px; height: 22px; border-radius: 11px;
	background: rgba(127,118,150,0.35); transition: background-color .2s, box-shadow .2s;}
.cm-sw__track::after {content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%;
	background: #f4f2f9; box-shadow: 0 2px 6px rgba(0,0,0,0.35); transition: transform .2s, background-color .2s;}
.cm-sw__input:checked + .cm-sw__track {background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%); box-shadow: 0 0 14px -4px rgba(139,92,246,0.9);}
.cm-sw__input:checked + .cm-sw__track::after {transform: translateX(18px); background: #2e1065;}
.cm-sw__input:focus-visible + .cm-sw__track {outline: 2px solid var(--accent); outline-offset: 2px;}
.cm-sw__row:hover .cm-sw__track {box-shadow: 0 0 0 3px var(--accent-soft);}
.cm-sw__tree {position: relative; margin-left: 9px; padding-left: 22px;}
.cm-sw__tree::before {content: ''; position: absolute; left: 0; top: 0; bottom: 19px; width: 2px; border-radius: 2px;
	background: rgba(127,118,150,0.35);}
.cm-sw__tree .cm-sw__row::before {content: ''; position: absolute; left: -22px; top: 50%; width: 14px; height: 2px;
	border-radius: 2px; background: rgba(127,118,150,0.35);}
.cm-sw.is-nudge .cm-sw__tree {animation: cm-nudge .3s;}
@keyframes cm-nudge {25% {transform: translateX(-4px);} 75% {transform: translateX(4px);}}

/* ---------- Menus for each mode ---------- */
.cm-menu__group {break-inside: avoid; margin-bottom: 14px;}
.cm-menu__cap {font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--tt-3);
	padding: 0 10px 6px;}
.cm-menu .menu {column-width: auto; columns: auto;}
.sidebar .cm-menu .menu {border-bottom: 0; padding-bottom: 0;}
.sidebar .cm-menu {border-bottom: 1px solid var(--bdc); padding-bottom: 8px; margin-bottom: 4px;}
.sidebar .cm-menu:last-child {border-bottom: 0; padding-bottom: 0; margin-bottom: 0;}   /* nothing under the menu */
.cm-menu .menu li a {font-weight: 600;}
.menu--hub li a {background: var(--accent-soft); color: var(--accent);}
.cm-menu .menu li a.is-current {background: var(--grad); color: #fff;}
.cm-menu .menu li a.is-current + span {color: rgba(255,255,255,0.85);}

/* "Categories" dropdown on the video page: switches + menu */
.header-nav .menu-drop {position: absolute; top: calc(100% + 12px); left: 0; width: 760px; max-width: calc(100vw - 80px);
	display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 28px;
	background: var(--bg-pop); border: 1px solid rgba(255,255,255,0.08); border-radius: 18px;
	padding: 22px 22px 10px; box-shadow: 0 24px 60px -12px rgba(0,0,0,0.75); --tt: #fff; --tt-3: #9c95ae; --bdc: rgba(255,255,255,0.08);
	opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s, visibility .2s;}
.header-nav .menu-drop::before {content: ''; position: absolute; left: 0; right: 0; top: -16px; height: 16px;}
.header-nav .header__menu > li:hover .menu-drop, .header-nav .header__menu > li:focus-within .menu-drop {opacity: 1; visibility: visible; transform: none;}
.header-nav .menu-drop .menu {position: static; width: auto; max-width: none; opacity: 1; visibility: visible; transform: none;
	background: none; border: 0; padding: 0; box-shadow: none;}
.header-nav .menu-drop .menu::before {display: none;}
.header-nav .menu-drop .cm-menu {columns: 2 170px; column-gap: 24px;}
.header-nav .menu-drop .cm-sw {border-bottom: 0; margin: 0; padding: 0;}
.mobile-menu .menu-drop {display: block; padding: 15px 0 0; margin-bottom: 20px;}

/* ---------- Compact switch above the list (phones, tablets) ---------- */
.cm-bar {display: none;}
@media screen and (max-width: 1220px) {
	.cm-bar {display: flex; align-items: center; gap: 12px; margin: -12px 0 22px;}
}
.cm-bar__label {font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--tt-3);}
.cm-bar__seg {flex: 1 1 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px;
	border-radius: 14px; background: var(--bg-4); border: 1px solid var(--bdc);}
.cm-bar .cm-bar__btn {height: 36px; padding: 0 8px; border-radius: 10px; font-size: 14px; font-weight: 700;
	color: var(--tt-l); background: none; background-image: none; box-shadow: none;}
.cm-bar .cm-bar__btn:hover {background: var(--accent-soft); background-image: none; color: var(--tt); box-shadow: none;}
.cm-bar .cm-bar__btn.is-active {background: var(--grad); color: #fff; box-shadow: var(--glow);}
@media (max-width: 380px) {
	.cm-bar__label {display: none;}
}

/* ---------- Futa badge on previews (All Content mode) ---------- */
.thumb__label--futa {left: 8px; bottom: 8px; background: var(--grad); font-weight: 700; letter-spacing: .5px;}

/* ---------- Category description (bottom of category pages) ---------- */
.descr--cat {font-size: 14px; line-height: 1.7;}
.descr--cat img {display: block; width: 100%; max-width: 640px; height: auto; border-radius: var(--radius); margin: 6px 0;}

/* ---------- Category page: title + intro (top part of the description) ---------- */
.cat-head {margin-bottom: 26px;}
.cat-head__title {font-size: 28px; line-height: 1.2; font-weight: 700; color: var(--tt); margin-bottom: 14px; text-transform: none;}
.cat-head__title span {font-size: .62em; font-weight: 500; color: var(--tt-3);}
.cat-intro {background: var(--bg-4); border: 1px solid var(--bdc); border-radius: var(--radius); padding: 14px;}
.cat-intro__body {display: flow-root; font-size: 14px; line-height: 1.65; color: var(--tt-l);}
.cat-intro__body p {margin: 0;}
.cat-intro__body p + p {margin-top: 8px;}
.cat-intro__body img {float: left; display: block; width: 132px; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
	border-radius: 10px; margin: 2px 16px 2px 0;}
.cat-intro__body a {color: var(--accent);}
.cat-intro .cat-intro__more {display: flex; align-items: center; gap: 6px; margin: 10px auto 0; height: 32px; padding: 0 16px;
	border-radius: 16px; font-size: 13px; font-weight: 600; color: var(--accent); background: var(--accent-soft);
	background-image: none; box-shadow: none;}
.cat-intro .cat-intro__more:hover {background: var(--grad); color: #fff; box-shadow: none;}
.cat-intro .cat-intro__more[hidden] {display: none;}
.cat-intro__more svg {width: 16px; height: 16px; transition: transform .2s;}
.cat-intro.is-open .cat-intro__more svg {transform: rotate(180deg);}
@media screen and (max-width: 760px) {
	.cat-head {margin-bottom: 20px;}
	.cat-head__title {font-size: 22px; margin-bottom: 12px;}
	.cat-intro {padding: 12px;}
	.cat-intro__body {font-size: 13px; line-height: 1.6;}
	.cat-intro__body img {width: 88px; margin: 2px 12px 2px 0; border-radius: 10px;}
	/* phones: about 160 characters, the rest opens with the arrow button */
	.cat-intro.is-clamped .cat-intro__body {max-height: calc(1.6em * 5); overflow: hidden;
		-webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent);}
}
.descr--cat h2 {font-size: 18px; text-transform: none; color: var(--tt);}
/* Bottom SEO text: in the content column under the videos, a card like the intro block at the top */
.descr--bottom {margin: 28px 0 0; padding: 20px 22px 22px; background: var(--bg-4); border: 1px solid var(--bdc);
	border-radius: var(--radius); grid-gap: 10px 0;}
.descr--bottom h2 {margin-bottom: 2px;}
@media screen and (max-width: 590px) {
	.descr--bottom {padding: 16px; margin-top: 22px;}
}
.descr--cat a {color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent-ring); text-underline-offset: 3px;}

/* ---------- Tag page (/tags/blonde/): "#" badge before the title (drawn by CSS, not part of the H1 text) ---------- */
.tag-head__title::before {content: "#"; display: inline-grid; place-items: center; width: 1.3em; height: 1.3em; margin-right: .4em;
	border-radius: 10px; background: var(--grad); color: #fff; font-size: .8em; font-weight: 800; line-height: 1;
	vertical-align: .1em; box-shadow: var(--glow);}
.tag-head__name {font-style: normal; text-transform: capitalize;}
@media screen and (max-width: 760px) {
	.tag-head__title::before {border-radius: 8px;}
}

/* Admin only: "Meta tags" button to the right of the tag page title (amber, like "Edit #ID" on video pages) */
.tag-head__row {display: flex; align-items: flex-start; gap: 14px;}
.tag-head__row .tag-head__title {flex: 1 1 auto; min-width: 0;}
.adm-meta {flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 30px; margin-top: 3px; padding: 0 12px; border-radius: 999px;
	font-size: 12.5px; font-weight: 700; color: #fbbf24; background: rgba(251,191,36,.1); box-shadow: inset 0 0 0 1px rgba(251,191,36,.45);
	transition: background-color .2s, color .2s;}
.adm-meta:hover {color: #1a1205; background: #fbbf24;}
.adm-meta[hidden] {display: none;}
.adm-meta svg {width: 14px; height: 14px;}
@media screen and (max-width: 760px) {
	.adm-meta {width: 30px; padding: 0; justify-content: center; margin-top: 0;}
	.adm-meta span {display: none;}   /* phones: just the pencil */
}