/* ============================================================
   TMOHENTAI — child theme (port of tmohentai.app design)
   Tokens tomados de tmohentai.css original + ajustes dark-mode.
   Sin dependencia de Bootstrap: estilos escritos a medida.
   ============================================================ */

:root {
	/* Accent (crimson TMO) */
	--tmo-accent:       #bd362f;
	--tmo-accent-hover: #802420;

	/* Surfaces (dark) */
	--tmo-bg:      #1a1a1a;
	--tmo-bg-1:    #222;
	--tmo-bg-2:    #2b2b2b;
	--tmo-bg-3:    #3a3a3a;
	--tmo-line:    #444;
	--tmo-line-2:  #555;

	/* Text */
	--tmo-ink:   #ffffff;
	--tmo-ink-2: #d0d0d0;
	--tmo-ink-3: #b9b9b9;
	--tmo-ink-4: #888;

	/* Category type colors (border-bottom of title in card) */
	--tmo-cat-manga:    #5bc0de;
	--tmo-cat-hentai:   #bd362f;
	--tmo-cat-doujin:   #4caf50;
	--tmo-cat-oneshot:  #f0ad4e;
	--tmo-cat-yaoi:     #6a1b9a;
	--tmo-cat-yuri:     #e91e63;
	--tmo-cat-other:    #5bc0de;
	--tmo-cat-novela:   #9e9e9e;

	/* Semantic buttons */
	--tmo-success: #5cb85c;
	--tmo-warn:    #f0ad4e;
	--tmo-info:    #5bc0de;

	/* Rhythm */
	--tmo-r-sm: 4px;
	--tmo-r-md: 6px;
	--tmo-r-lg: 10px;

	--tmo-nav-h: 50px;
}

/* ============ BASE ============ */
html, body { margin: 0; padding: 0; }
* { box-sizing: border-box; }

body.tmo-theme {
	background: var(--tmo-bg);
	color: var(--tmo-ink-2);
	font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.4;
	-webkit-font-smoothing: antialiased;
	min-height: 100vh;
}

body.tmo-theme a { color: var(--tmo-ink); text-decoration: none; }
body.tmo-theme a:hover { color: var(--tmo-accent); }
body.tmo-theme button, body.tmo-theme input, body.tmo-theme select, body.tmo-theme textarea {
	font: inherit; color: inherit;
}
body.tmo-theme img { max-width: 100%; height: auto; }

body.tmo-theme.admin-bar .tmo-navbar { top: 32px; }

/* ============ NAVBAR (top) ============ */
.tmo-navbar {
	position: sticky; top: 0; z-index: 100;
	background: var(--tmo-bg-1);
	border-bottom: 3px solid var(--tmo-accent);
	height: var(--tmo-nav-h);
	display: flex; align-items: center;
	padding: 0 20px;
	gap: 24px;
}
.tmo-brand {
	font-weight: 700;
	font-size: 20px;
	color: var(--tmo-ink);
	letter-spacing: 0.03em;
	text-decoration: none;
	white-space: nowrap;
}
.tmo-brand:hover { color: var(--tmo-accent); }
.tmo-brand em { color: var(--tmo-accent); font-style: normal; }

.tmo-nav {
	display: flex; gap: 2px; align-items: center; flex: 1;
}
.tmo-nav a {
	color: var(--tmo-ink-2);
	font-size: 13px;
	font-weight: 500;
	padding: 14px 14px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	transition: background .15s, color .15s;
	white-space: nowrap;
}
.tmo-nav a i { margin-right: 6px; opacity: 0.85; }
.tmo-nav a:hover, .tmo-nav a.active {
	background: var(--tmo-bg-2);
	color: var(--tmo-ink);
}

.tmo-nav-right { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.tmo-nav-right a {
	color: var(--tmo-ink-2);
	font-size: 13px;
	font-weight: 500;
	padding: 8px 14px;
	border-radius: var(--tmo-r-sm);
}
.tmo-nav-right a.primary {
	background: var(--tmo-accent);
	color: #fff;
}
.tmo-nav-right a.primary:hover { background: var(--tmo-accent-hover); }

.tmo-nav-toggle {
	display: none;
	background: transparent; border: 1px solid var(--tmo-line);
	color: var(--tmo-ink); padding: 6px 10px; border-radius: var(--tmo-r-sm); cursor: pointer;
}

/* ============ CONTAINER ============ */
.tmo-container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 20px 16px 40px;
}
.tmo-row { display: flex; gap: 20px; flex-wrap: wrap; }
.tmo-col-main { flex: 1 1 0; min-width: 0; }
.tmo-col-side { flex: 0 0 300px; max-width: 300px; }

/* ============ PANEL ============ */
.tmo-panel {
	background: var(--tmo-bg-1);
	border: 1px solid var(--tmo-line);
	border-radius: var(--tmo-r-md);
	margin-bottom: 20px;
	overflow: hidden;
}
.tmo-panel-head {
	background: var(--tmo-bg-2);
	color: var(--tmo-ink);
	padding: 10px 16px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	display: flex; align-items: center; gap: 10px;
	border-bottom: 1px solid var(--tmo-line);
}
.tmo-panel-head.accent {
	background: var(--tmo-accent);
	color: #fff;
	border-bottom-color: var(--tmo-accent);
}
.tmo-panel-body { padding: 16px; }

/* ============ TABS (top panel) ============ */
.tmo-tabs {
	display: flex;
	border-bottom: 1px solid var(--tmo-line);
	background: var(--tmo-bg-2);
}
.tmo-tab {
	flex: 1;
	text-align: center;
	padding: 14px 10px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--tmo-ink-3);
	cursor: pointer;
	transition: background .15s, color .15s;
	border-right: 1px solid var(--tmo-line);
	text-decoration: none;
}
.tmo-tab:last-child { border-right: none; }
.tmo-tab:hover { background: var(--tmo-bg-3); color: var(--tmo-ink); }
.tmo-tab.active {
	background: var(--tmo-accent);
	color: #fff;
}

/* Legend row */
.tmo-legend {
	display: flex; flex-wrap: wrap; gap: 12px;
	padding: 10px 14px;
	font-size: 12px;
	color: var(--tmo-ink-3);
	background: var(--tmo-bg-1);
	border-bottom: 1px solid var(--tmo-line);
}
.tmo-legend .lg {
	display: inline-flex; align-items: center; gap: 6px;
}
.tmo-legend .sw {
	display: inline-block; width: 12px; height: 12px;
	border-radius: 2px;
}

/* ============ GRID + CARD ============ */
.tmo-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	padding: 14px;
}

.tmo-card {
	display: block;
	position: relative;
	border-radius: var(--tmo-r-sm);
	overflow: hidden;
	background: var(--tmo-bg-2);
	text-decoration: none;
	color: var(--tmo-ink);
	transition: transform .15s ease, box-shadow .15s ease;
	box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.tmo-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0,0,0,0.55);
}

.tmo-card-cover {
	position: relative;
	aspect-ratio: 2 / 3;
	background: var(--tmo-bg-3);
	overflow: hidden;
}
.tmo-card-cover img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .3s ease;
}
.tmo-card:hover .tmo-card-cover img { transform: scale(1.04); }

/* Cover overlay gradient */
.tmo-card-cover::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.85) 100%);
	pointer-events: none;
}

/* Top-left: type icon badge */
.tmo-card-type {
	position: absolute; top: 8px; left: 8px; z-index: 2;
	display: inline-flex; align-items: center; gap: 5px;
	padding: 3px 8px;
	font-size: 11px; font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #fff;
	background: rgba(0,0,0,0.65);
	backdrop-filter: blur(4px);
	border-radius: 3px;
	text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

/* Top-right: rating */
.tmo-card-rating {
	position: absolute; top: 8px; right: 8px; z-index: 2;
	display: inline-flex; align-items: center; gap: 4px;
	padding: 3px 7px;
	font-size: 11px; font-weight: 600;
	color: #fff;
	background: rgba(0,0,0,0.65);
	backdrop-filter: blur(4px);
	border-radius: 3px;
}
.tmo-card-rating i { color: #f5c518; }

/* Bottom area: title + meta overlaid on cover */
.tmo-card-body {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
	padding: 10px 12px 12px;
}
.tmo-card-title {
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0.02em;
	margin: 0 0 6px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-shadow: 0 1px 3px rgba(0,0,0,0.85);
	border-bottom: 3px solid var(--tmo-cat-hentai);
	padding-bottom: 5px;
}

/* Color the title border based on category */
.tmo-card[data-cat="manga"]   .tmo-card-title { border-bottom-color: var(--tmo-cat-manga); }
.tmo-card[data-cat="hentai"]  .tmo-card-title { border-bottom-color: var(--tmo-cat-hentai); }
.tmo-card[data-cat="doujin"]  .tmo-card-title { border-bottom-color: var(--tmo-cat-doujin); }
.tmo-card[data-cat="oneshot"] .tmo-card-title { border-bottom-color: var(--tmo-cat-oneshot); }
.tmo-card[data-cat="yaoi"]    .tmo-card-title { border-bottom-color: var(--tmo-cat-yaoi); }
.tmo-card[data-cat="yuri"]    .tmo-card-title { border-bottom-color: var(--tmo-cat-yuri); }
.tmo-card[data-cat="novela"]  .tmo-card-title { border-bottom-color: var(--tmo-cat-novela); }
.tmo-card[data-cat="other"]   .tmo-card-title { border-bottom-color: var(--tmo-cat-other); }

/* Also color the top-left type badge */
.tmo-card[data-cat="manga"]   .tmo-card-type { background: color-mix(in srgb, var(--tmo-cat-manga) 85%, #000); }
.tmo-card[data-cat="hentai"]  .tmo-card-type { background: color-mix(in srgb, var(--tmo-cat-hentai) 85%, #000); }
.tmo-card[data-cat="doujin"]  .tmo-card-type { background: color-mix(in srgb, var(--tmo-cat-doujin) 85%, #000); }
.tmo-card[data-cat="oneshot"] .tmo-card-type { background: color-mix(in srgb, var(--tmo-cat-oneshot) 85%, #000); }
.tmo-card[data-cat="yaoi"]    .tmo-card-type { background: color-mix(in srgb, var(--tmo-cat-yaoi) 85%, #000); }
.tmo-card[data-cat="yuri"]    .tmo-card-type { background: color-mix(in srgb, var(--tmo-cat-yuri) 85%, #000); }

.tmo-card-detail {
	display: flex; gap: 10px; align-items: center;
	font-size: 11px;
	color: rgba(255,255,255,0.85);
	text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
.tmo-card-detail i { opacity: 0.85; margin-right: 3px; }

/* ============ BUTTONS ============ */
.tmo-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	padding: 9px 15px;
	border-radius: var(--tmo-r-sm);
	font-size: 13px;
	font-weight: 600;
	color: var(--tmo-ink);
	background: var(--tmo-bg-3);
	border: 1px solid var(--tmo-line-2);
	cursor: pointer;
	transition: background .15s;
	text-decoration: none;
	text-align: center;
	white-space: nowrap;
}
.tmo-btn:hover { background: var(--tmo-line); color: #fff; }
.tmo-btn-primary { background: var(--tmo-accent); border-color: var(--tmo-accent); color: #fff; }
.tmo-btn-primary:hover { background: var(--tmo-accent-hover); border-color: var(--tmo-accent-hover); color: #fff; }
.tmo-btn-success { background: var(--tmo-success); border-color: var(--tmo-success); color: #fff; }
.tmo-btn-success:hover { background: #4e9f4e; color: #fff; }
.tmo-btn-warn    { background: var(--tmo-warn); border-color: var(--tmo-warn); color: #111; }
.tmo-btn-block   { display: flex; width: 100%; }
.tmo-btn-lg      { padding: 12px 20px; font-size: 14px; }
.tmo-btn-sm      { padding: 6px 10px; font-size: 12px; }
.tmo-btn-outline { background: transparent; border: 1px solid var(--tmo-line-2); color: var(--tmo-ink-2); }
.tmo-btn-outline:hover { background: var(--tmo-bg-2); color: var(--tmo-ink); }

/* ============ LABELS / BADGES ============ */
.tmo-label {
	display: inline-block;
	padding: 3px 8px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	border-radius: 3px;
	letter-spacing: 0.04em;
	color: #fff;
	margin: 0 3px 3px 0;
}
.tmo-label-danger  { background: var(--tmo-accent); }
.tmo-label-info    { background: var(--tmo-info); }
.tmo-label-default { background: #777; }
.tmo-label-success { background: var(--tmo-success); }
.tmo-label-warn    { background: var(--tmo-warn); color: #111; }

/* ============ FILTERS SIDEBAR ============ */
.tmo-filter-panel { padding: 0; }
.tmo-filter-head {
	padding: 10px 14px;
	background: var(--tmo-bg-2);
	border-bottom: 1px solid var(--tmo-line);
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	color: var(--tmo-ink);
}
.tmo-filter-body { padding: 14px; }
.tmo-filter-body input[type="text"],
.tmo-filter-body select {
	width: 100%;
	padding: 9px 11px;
	background: var(--tmo-bg-2);
	border: 1px solid var(--tmo-line);
	color: var(--tmo-ink);
	border-radius: var(--tmo-r-sm);
	margin-bottom: 10px;
	outline: none;
}
.tmo-filter-body input:focus, .tmo-filter-body select:focus { border-color: var(--tmo-accent); }

.tmo-genre-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.tmo-genre-pill {
	display: inline-block;
	padding: 4px 9px;
	border-radius: 999px;
	font-size: 11px;
	background: var(--tmo-bg-2);
	border: 1px solid var(--tmo-line);
	color: var(--tmo-ink-2);
	cursor: pointer;
	transition: all .15s;
	text-decoration: none;
}
.tmo-genre-pill:hover { background: var(--tmo-bg-3); color: var(--tmo-ink); }
.tmo-genre-pill.active { background: var(--tmo-accent); color: #fff; border-color: var(--tmo-accent); }

/* ============ PAGINATION ============ */
.tmo-pagination {
	display: flex; justify-content: center; align-items: center; gap: 3px;
	padding: 20px 0 0;
}
.tmo-pagination a, .tmo-pagination span {
	min-width: 36px; height: 36px;
	padding: 0 12px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--tmo-bg-2);
	border: 1px solid var(--tmo-line);
	color: var(--tmo-ink-2);
	border-radius: var(--tmo-r-sm);
	text-decoration: none;
	font-size: 13px;
}
.tmo-pagination a:hover { background: var(--tmo-bg-3); color: var(--tmo-ink); }
.tmo-pagination .current { background: var(--tmo-accent); border-color: var(--tmo-accent); color: #fff; }
.tmo-pagination .dots { cursor: default; }

/* ============ DETAIL PAGE ============ */
.tmo-detail { display: flex; gap: 20px; flex-wrap: wrap; }
.tmo-detail-side { flex: 0 0 300px; max-width: 300px; display: flex; flex-direction: column; gap: 12px; }
.tmo-detail-main { flex: 1 1 0; min-width: 0; }
.tmo-detail-cover {
	width: 100%;
	aspect-ratio: 2/3;
	border-radius: var(--tmo-r-md);
	overflow: hidden;
	background: var(--tmo-bg-2);
	border: 1px solid var(--tmo-line);
}
.tmo-detail-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.tmo-detail-type-banner {
	text-align: center;
	padding: 10px;
	border-radius: var(--tmo-r-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #fff;
	font-size: 14px;
}

.tmo-detail-actions { display: flex; flex-direction: column; gap: 8px; }

.tmo-detail-related .tmo-rel-row {
	display: flex; gap: 10px; align-items: center;
	padding: 8px 0;
	border-bottom: 1px solid var(--tmo-line);
	text-decoration: none;
}
.tmo-detail-related .tmo-rel-row:last-child { border-bottom: none; }
.tmo-detail-related .tmo-rel-row img {
	width: 50px; height: 70px; object-fit: cover; border-radius: 3px; flex-shrink: 0;
}
.tmo-detail-related .tmo-rel-row .t { flex: 1; color: var(--tmo-ink-2); font-size: 12px; line-height: 1.3; }
.tmo-detail-related .tmo-rel-row:hover .t { color: var(--tmo-accent); }

.tmo-detail-title {
	font-size: 22px;
	font-weight: 700;
	color: var(--tmo-ink);
	line-height: 1.25;
	margin: 0;
}
.tmo-detail-alt { color: var(--tmo-ink-3); font-size: 13px; font-style: italic; margin-top: 4px; }

.tmo-prop-row {
	display: grid; grid-template-columns: 140px 1fr; gap: 10px;
	padding: 10px 0;
	border-bottom: 1px dashed var(--tmo-line);
	font-size: 13px;
}
.tmo-prop-row:last-child { border-bottom: none; }
.tmo-prop-label {
	font-weight: 700;
	text-transform: uppercase;
	color: var(--tmo-ink-3);
	font-size: 11px;
	letter-spacing: 0.05em;
	align-self: center;
}
.tmo-prop-value { color: var(--tmo-ink-2); }

.tmo-synopsis {
	color: var(--tmo-ink-2);
	line-height: 1.6;
	font-size: 14px;
}

/* Preview thumbs */
.tmo-preview-grid {
	display: flex; flex-wrap: wrap; gap: 6px;
	padding: 10px 0;
}
.tmo-preview-grid a {
	width: 80px; height: 110px;
	border-radius: 3px;
	overflow: hidden;
	background: var(--tmo-bg-3);
	border: 1px solid var(--tmo-line);
	flex-shrink: 0;
}
.tmo-preview-grid img { width: 100%; height: 100%; object-fit: cover; }

/* Chapter list (same as before but adjusted for dark) */
.tmo-chapters { display: flex; flex-direction: column; gap: 4px; }
.tmo-chapter-row {
	display: grid; grid-template-columns: 70px 1fr auto auto; gap: 12px;
	align-items: center;
	padding: 10px 14px;
	background: var(--tmo-bg-2);
	border: 1px solid var(--tmo-line);
	border-radius: var(--tmo-r-sm);
	color: var(--tmo-ink-2);
	text-decoration: none;
	transition: all .15s;
}
.tmo-chapter-row:hover {
	background: var(--tmo-bg-3);
	border-color: var(--tmo-line-2);
	color: var(--tmo-ink);
}
.tmo-chapter-row .num { font-weight: 700; color: var(--tmo-accent); font-size: 13px; }
.tmo-chapter-row .title { font-size: 13px; }
.tmo-chapter-row .date { font-size: 11px; color: var(--tmo-ink-4); }

/* ============ READER ============ */
.tmo-reader-body { background: #0a0a0a; color: var(--tmo-ink); min-height: 100vh; }

.tmo-reader-topbar {
	position: fixed; top: 0; left: 0; right: 0;
	height: 46px; z-index: 1000;
	background: rgba(18,18,18,0.97);
	backdrop-filter: blur(10px);
	display: flex; align-items: center;
	padding: 0 16px; gap: 14px;
	border-bottom: 1px solid #222;
}
body.admin-bar .tmo-reader-topbar { top: 32px; }

.tmo-rt-back {
	display: inline-flex; align-items: center; gap: 6px;
	color: var(--tmo-ink);
	padding: 6px 10px; border-radius: var(--tmo-r-sm);
	font-size: 13px;
}
.tmo-rt-back:hover { background: var(--tmo-bg-2); }
.tmo-rt-title {
	flex: 1; min-width: 0;
	font-size: 14px; font-weight: 600; color: var(--tmo-ink);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tmo-rt-right { display: flex; gap: 4px; align-items: center; }
.tmo-rt-btn {
	width: 34px; height: 34px;
	border-radius: var(--tmo-r-sm);
	background: transparent;
	border: none;
	color: var(--tmo-ink); cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	text-decoration: none;
}
.tmo-rt-btn:hover { background: var(--tmo-bg-2); }
.tmo-rt-counter {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 13px; color: var(--tmo-ink-2);
	padding: 0 8px;
	min-width: 60px; text-align: center;
}

/* Autoplay progress bar below topbar */
.tmo-autoplay-bar {
	position: fixed; top: 46px; left: 0;
	height: 2px; width: 0%;
	background: linear-gradient(90deg, var(--tmo-accent-hover), var(--tmo-accent));
	z-index: 1000;
	transition: width .2s linear;
}

/* Pages (cascade) */
.tmo-reader-wrap {
	padding: 54px 0 100px;
	display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.tmo-reader-img-wrap { width: 100%; max-width: 900px; background: #0a0a0a; }
.tmo-reader-img-wrap img {
	width: 100%; height: auto; display: block;
	margin: 0 auto;
	opacity: 0;
	transition: opacity .2s;
}
.tmo-reader-img-wrap img.loaded { opacity: 1; }

/* Reader footer (between pages and bottom bar) */
.tmo-reader-footer {
	display: flex; gap: 10px; justify-content: center;
	padding: 24px 16px;
	flex-wrap: wrap;
}

/* Floating bottom bar */
.tmo-reader-bottom-bar {
	position: fixed; bottom: 18px; left: 50%;
	transform: translateX(-50%);
	z-index: 1000;
	display: flex; align-items: center;
	background: rgba(18,18,18,0.96);
	backdrop-filter: blur(10px);
	border: 1px solid #2b2b2b;
	border-radius: 100px;
	padding: 6px 10px;
	gap: 4px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.tmo-bb-btn {
	width: 36px; height: 36px;
	border-radius: 50%;
	border: none;
	background: transparent;
	color: var(--tmo-ink);
	cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	text-decoration: none;
}
.tmo-bb-btn:hover { background: var(--tmo-bg-3); }
.tmo-bb-btn.accent { background: var(--tmo-accent); color: #fff; }
.tmo-bb-btn.accent:hover { background: var(--tmo-accent-hover); }
.tmo-bb-speed {
	padding: 6px 14px;
	font-size: 12px;
	font-weight: 700;
	color: var(--tmo-ink);
	background: var(--tmo-bg-3);
	border: 1px solid var(--tmo-line);
	border-radius: 100px;
	cursor: pointer;
	white-space: nowrap;
}
.tmo-bb-divider {
	width: 1px; height: 20px;
	background: var(--tmo-line);
	margin: 0 4px;
}

/* ============ FOOTER ============ */
.tmo-site-footer {
	margin-top: 40px;
	padding: 26px 20px 20px;
	background: #101010;
	border-top: 1px solid var(--tmo-line);
	color: var(--tmo-ink-3);
}
.tmo-site-footer .fcols {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 26px;
	max-width: 1280px;
	margin: 0 auto 20px;
}
.tmo-site-footer h5 {
	font-size: 12px; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.06em;
	color: var(--tmo-ink); margin: 0 0 10px;
}
.tmo-site-footer a { color: var(--tmo-ink-3); display: block; font-size: 13px; padding: 2px 0; }
.tmo-site-footer a:hover { color: var(--tmo-accent); }
.tmo-site-footer .copy {
	text-align: center;
	font-size: 11px;
	color: var(--tmo-ink-4);
	padding-top: 12px;
	border-top: 1px solid var(--tmo-line);
	max-width: 1280px;
	margin: 0 auto;
}

/* ============ SCROLLBAR ============ */
body.tmo-theme ::-webkit-scrollbar { width: 10px; height: 10px; }
body.tmo-theme ::-webkit-scrollbar-track { background: #111; }
body.tmo-theme ::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 5px; }
body.tmo-theme ::-webkit-scrollbar-thumb:hover { background: #555; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
	.tmo-grid { grid-template-columns: repeat(3, 1fr); }
	.tmo-col-side { flex: 0 0 260px; }
	.tmo-site-footer .fcols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
	.tmo-nav { display: none; position: absolute; top: var(--tmo-nav-h); left: 0; right: 0; background: var(--tmo-bg-1); flex-direction: column; padding: 8px 0; border-bottom: 1px solid var(--tmo-line); }
	.tmo-nav.open { display: flex; }
	.tmo-nav a { padding: 10px 20px; border-bottom: 1px solid var(--tmo-line); }
	.tmo-nav-toggle { display: inline-flex; }
	.tmo-row { flex-direction: column; }
	.tmo-col-side { flex: 1 1 auto; max-width: 100%; }
	.tmo-detail { flex-direction: column; }
	.tmo-detail-side { flex: 1 1 auto; max-width: 100%; }
	.tmo-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 10px; }
	.tmo-prop-row { grid-template-columns: 1fr; gap: 3px; }
}
@media (max-width: 480px) {
	.tmo-container { padding: 12px 8px 30px; }
	.tmo-card-title { font-size: 11px; }
	.tmo-site-footer .fcols { grid-template-columns: 1fr; }
}

/* Fade in for grid */
@keyframes tmoFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tmo-fade { animation: tmoFade .25s ease; }


/* ── Topbar inline search ─────────────────────────────────────────── */
.tmo-nav-search {
	display: flex;
	align-items: center;
	gap: 6px;
	background: var(--tmo-bg-2);
	border: 1px solid var(--tmo-line);
	border-radius: 9999px;
	padding: 4px 10px 4px 12px;
	min-width: 220px;
	max-width: 320px;
	flex: 0 1 auto;
	margin: 0 12px;
	transition: border-color 0.15s, background 0.15s;
}
.tmo-nav-search:focus-within {
	border-color: var(--tmo-accent);
	background: var(--tmo-bg);
}
.tmo-nav-search > i {
	color: var(--tmo-ink-3);
	font-size: 13px;
}
.tmo-nav-search > input[type="search"] {
	flex: 1;
	border: none;
	background: transparent;
	color: var(--ink);
	font-size: 13px;
	outline: none;
	padding: 6px 0;
	min-width: 0;
}
.tmo-nav-search > input::placeholder { color: var(--tmo-ink-3); }
@media (max-width: 900px) {
	.tmo-nav-search { display: none; }
}

/* Page-perfil tab buttons hover/active states */
.tmo-perfil-tab[aria-selected="true"] {
	background: var(--tmo-accent) !important;
	color: #fff !important;
}
.tmo-perfil-tab:hover:not([aria-selected="true"]) {
	background: var(--tmo-bg-2);
	color: var(--ink);
}


/* ── Footer social row ────────────────────────────────────────────── */
.tmo-footer-social {
	display: flex;
	gap: 8px;
	justify-content: center;
	padding: 12px 0;
	border-top: 1px solid var(--tmo-line);
	margin-top: 12px;
}
.tmo-footer-social > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--tmo-bg-2);
	color: var(--tmo-ink-2);
	font-size: 15px;
	transition: background 0.15s, color 0.15s, transform 0.15s;
	text-decoration: none;
}
.tmo-footer-social > a:hover {
	background: var(--tmo-accent);
	color: #fff;
	transform: translateY(-2px);
}


/* === REDESIGN-2026-05-04 === */
/* ==================================================================
   TMOHentai — Single-manga REDESIGN (red theme, 2-col, preview gallery)
   Layered on top of original tmohentai.css.
   ================================================================== */

/* Override accent palette to saturated red */
:root {
	--tmo-accent: #d83a3a;
	--tmo-accent-hover: #b82929;
	--tmo-bg: #161616;
	--tmo-bg-2: #232323;
	--tmo-bg-3: #2c2c2c;
	--tmo-line: #383838;
	--tmo-ink: #f5f5f5;
	--tmo-ink-2: #c8c8c8;
	--tmo-ink-3: #888;
	--ink: #f5f5f5;
	--ink-2: #c8c8c8;
	--ink-3: #888;
}

/* Override base body bg/font for the redesign */
body.tmo-theme {
	background: #0e0e0e;
	color: var(--ink);
	font-family: 'Inter Tight', system-ui, -apple-system, sans-serif;
}
body.tmo-theme h1, body.tmo-theme h2, body.tmo-theme h3, body.tmo-theme h4, body.tmo-theme h5 {
	font-family: 'Inter Tight', system-ui, sans-serif; /* drop the serif Fraunces */
}

/* ─────────────── NAVBAR ─────────────── */
.tmo-navbar.tmo-navbar-red {
	background: #c93030;
	border: none;
	color: #fff;
	padding: 10px 24px;
	display: flex;
	align-items: center;
	gap: 18px;
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.tmo-navbar.tmo-navbar-red .tmo-brand {
	color: #fff;
	font-size: 18px;
	font-weight: 800;
	text-decoration: none;
	letter-spacing: 0.02em;
}
.tmo-navbar.tmo-navbar-red .tmo-brand strong { font-weight: 800; }
.tmo-navbar.tmo-navbar-red .tmo-brand em {
	font-style: normal;
	opacity: .85;
	font-weight: 500;
}
.tmo-navbar.tmo-navbar-red .tmo-nav {
	display: flex;
	gap: 4px;
	flex: 1;
	justify-content: center;
}
.tmo-navbar.tmo-navbar-red .tmo-nav a {
	color: #fff;
	text-decoration: none;
	padding: 8px 14px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	transition: background 0.15s;
}
.tmo-navbar.tmo-navbar-red .tmo-nav a:hover,
.tmo-navbar.tmo-navbar-red .tmo-nav a.active {
	background: rgba(255,255,255,0.18);
}
.tmo-navbar.tmo-navbar-red .tmo-nav a > i {
	font-size: 13px;
	opacity: .9;
}
.tmo-navbar.tmo-navbar-red .tmo-nav-right {
	display: flex;
	align-items: center;
	gap: 8px;
}
.tmo-navbar.tmo-navbar-red .tmo-nav-link {
	color: #fff;
	text-decoration: none;
	padding: 7px 14px;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 500;
	transition: background 0.15s;
}
.tmo-navbar.tmo-navbar-red .tmo-nav-link:hover { background: rgba(255,255,255,0.18); }
.tmo-navbar.tmo-navbar-red .tmo-nav-userlink {
	color: #fff;
	text-decoration: none;
	padding: 6px 12px;
	border-radius: 4px;
	font-size: 14px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.tmo-navbar.tmo-navbar-red .tmo-nav-userlink:hover,
.tmo-navbar.tmo-navbar-red .tmo-nav-icon:hover { background: rgba(255,255,255,0.18); }
.tmo-navbar.tmo-navbar-red .tmo-nav-icon {
	color: #fff;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	text-decoration: none;
}
.tmo-navbar.tmo-navbar-red .tmo-nav-lang { font-size: 16px; opacity: .9; padding: 0 4px; }
.tmo-navbar.tmo-navbar-red .tmo-nav-toggle {
	background: none;
	border: none;
	color: #fff;
	font-size: 18px;
	display: none;
	cursor: pointer;
	padding: 6px 10px;
}

@media (max-width: 900px) {
	.tmo-navbar.tmo-navbar-red {
		padding: 10px 12px;
		flex-wrap: wrap;
	}
	.tmo-navbar.tmo-navbar-red .tmo-nav-toggle { display: inline-flex; order: 2; margin-left: auto; }
	.tmo-navbar.tmo-navbar-red .tmo-nav { display: none; flex-basis: 100%; flex-direction: column; gap: 2px; padding-top: 10px; }
	.tmo-navbar.tmo-navbar-red .tmo-nav.open { display: flex; }
	.tmo-navbar.tmo-navbar-red .tmo-nav a { padding: 10px 14px; }
	.tmo-navbar.tmo-navbar-red .tmo-nav-right { order: 3; gap: 4px; }
	.tmo-navbar.tmo-navbar-red .tmo-nav-link { padding: 6px 10px; font-size: 13px; }
}

/* ─────────────── SINGLE-MANGA REDESIGN ─────────────── */
.tmo-sm-page {
	max-width: 1180px;
	margin: 0 auto;
	padding: 30px 16px 60px;
}

.tmo-sm-title h1 {
	color: var(--tmo-accent);
	font-size: clamp(20px, 2.6vw, 28px);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin: 0 0 12px;
	line-height: 1.2;
}
.tmo-sm-title {
	border-bottom: 2px solid var(--tmo-accent);
	margin-bottom: 28px;
	padding-bottom: 6px;
}

.tmo-sm-grid {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 30px;
}
@media (max-width: 900px) {
	.tmo-sm-grid { grid-template-columns: 1fr; }
}

/* Sidebar */
.tmo-sm-side { display: flex; flex-direction: column; gap: 12px; }

.tmo-sm-type-banner {
	background: var(--tmo-accent);
	color: #fff;
	text-align: center;
	padding: 8px 12px;
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	border-radius: 4px 4px 0 0;
}
.tmo-sm-cover {
	background: var(--tmo-bg-2);
	border-radius: 0 0 4px 4px;
	overflow: hidden;
}
.tmo-sm-cover img {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 3/4;
	object-fit: cover;
}
.tmo-sm-cover-foot {
	padding: 8px 10px;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: var(--ink-2);
	background: #1a1a1a;
}
.tmo-sm-cover-foot .gender-icons { color: #ef4444; font-size: 14px; }
.tmo-sm-cover-foot .status-row { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; }
.tmo-sm-cover-foot .status-pill {
	padding: 2px 8px;
	border-radius: 3px;
	color: #fff;
	font-weight: 700;
	font-size: 10px;
	text-transform: uppercase;
}
.tmo-sm-cover-foot .bg-green-600 { background: #16a34a; }
.tmo-sm-cover-foot .bg-blue-600 { background: #2563eb; }
.tmo-sm-cover-foot .bg-amber-600 { background: #d97706; }

/* Action buttons stack */
.tmo-sm-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.tmo-sm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 14px;
	border-radius: 4px;
	font-weight: 600;
	font-size: 13px;
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: opacity 0.15s, transform 0.05s;
	width: 100%;
}
.tmo-sm-btn:hover { opacity: 0.92; }
.tmo-sm-btn:active { transform: scale(0.98); }
.tmo-sm-btn-white { background: #fff; color: #1a1a1a; }
.tmo-sm-btn-success { background: #28a745; color: #fff; }
.tmo-sm-btn-fav { background: #6b7280; color: #fff; }
.tmo-sm-btn-fav.is-on { background: #ec4899; }
.tmo-sm-btn-download { background: #dc3545; color: #fff; }
.tmo-sm-btn-warn { background: #ffc107; color: #1a1a1a; }

/* Related */
.tmo-sm-related { margin-top: 18px; }
.tmo-sm-related h3 {
	color: var(--tmo-accent);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-bottom: 1px solid var(--tmo-accent);
	padding-bottom: 6px;
	margin: 0 0 8px;
	text-align: center;
}
.tmo-sm-related ul { list-style: none; padding: 0; margin: 0; }
.tmo-sm-related li { border-bottom: 1px solid var(--tmo-line); padding: 8px 0; }
.tmo-sm-related li:last-child { border-bottom: none; }
.tmo-sm-related a {
	display: flex;
	gap: 10px;
	text-decoration: none;
	align-items: center;
}
.tmo-sm-related img {
	width: 42px;
	height: 56px;
	object-fit: cover;
	border-radius: 3px;
	flex-shrink: 0;
}
.tmo-sm-related span {
	color: var(--tmo-accent);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
}
.tmo-sm-related a:hover span { color: #fff; }

/* Main column */
.tmo-sm-main { display: flex; flex-direction: column; gap: 32px; min-width: 0; }

.tmo-sm-section h2 {
	color: var(--tmo-accent);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-bottom: 1px solid var(--tmo-accent);
	padding-bottom: 6px;
	margin: 0 0 14px;
}

.tmo-sm-synopsis h4 {
	color: var(--ink);
	font-size: 15px;
	font-weight: 600;
	margin: 0 0 6px;
}
.tmo-sm-synopsis .content,
.tmo-sm-synopsis p {
	color: var(--ink-2);
	font-size: 14px;
	line-height: 1.6;
}
.tmo-sm-synopsis .muted { color: var(--ink-3); }

/* Meta rows */
.tmo-sm-meta { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.meta-row { display: flex; gap: 12px; align-items: flex-start; }
.meta-key {
	color: var(--ink);
	font-weight: 600;
	font-size: 13px;
	min-width: 110px;
}
.meta-val { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.meta-pill {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 3px;
	font-size: 11px;
	font-weight: 600;
	text-decoration: none;
	color: #fff;
}
.type-pill { background: var(--tmo-accent); }
.genre-pill { background: #4b5563; }
.genre-pill:hover { background: #6b7280; }
.uploader-pill { background: #6b7280; display: inline-flex; align-items: center; gap: 4px; }
.uploader-pill:hover { background: #4b5563; }
.lang-flag { font-size: 14px; }
.lang-name { color: var(--tmo-accent); font-size: 13px; font-weight: 500; }

/* Share row */
.tmo-sm-share {
	margin-top: 18px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}
.tmo-sm-share .share-label {
	color: var(--ink-3);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	margin-right: 6px;
}
.share-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 9999px;
	font-size: 12px;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: opacity 0.15s;
}
.share-btn:hover { opacity: 0.88; }
.share-wa { background: #25d366; }
.share-tg { background: #0088cc; }
.share-tw { background: #1da1f2; }
.share-dc { background: #5865f2; }
.share-link { background: #4b5563; }

/* Preview head + LEER button */
.tmo-sm-preview-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
	border-bottom: 1px solid var(--tmo-accent);
	padding-bottom: 6px;
}
.tmo-sm-preview-head h2 {
	border-bottom: none;
	padding-bottom: 0;
	margin: 0;
}
.tmo-sm-btn-leer {
	background: var(--tmo-accent);
	color: #fff;
	padding: 8px 22px;
	border-radius: 4px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	transition: background 0.15s;
}
.tmo-sm-btn-leer:hover { background: var(--tmo-accent-hover); }

/* Preview grid */
.tmo-sm-preview-grid {
	background: var(--tmo-bg-3);
	border-radius: 6px;
	padding: 14px;
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 8px;
}
@media (max-width: 800px) { .tmo-sm-preview-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 480px) { .tmo-sm-preview-grid { grid-template-columns: repeat(3, 1fr); } }

.preview-thumb {
	display: block;
	aspect-ratio: 3/4;
	background: var(--tmo-bg-2);
	border-radius: 3px;
	overflow: hidden;
	transition: transform 0.15s;
}
.preview-thumb:hover { transform: scale(1.05); z-index: 5; }
.preview-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.preview-empty {
	grid-column: 1 / -1;
	text-align: center;
	padding: 32px;
	color: var(--ink-3);
}
.preview-empty i { font-size: 32px; opacity: 0.4; margin-bottom: 8px; display: block; }

/* Suggestions */
.tmo-sm-suggestions {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}
@media (max-width: 700px) { .tmo-sm-suggestions { grid-template-columns: repeat(2, 1fr); } }

.suggestion-card {
	display: block;
	text-decoration: none;
	background: var(--tmo-bg-2);
	border-radius: 4px;
	overflow: hidden;
	transition: transform 0.15s;
}
.suggestion-card:hover { transform: translateY(-3px); }
.suggestion-card img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.suggestion-card .title {
	display: block;
	padding: 8px 10px;
	color: var(--tmo-accent);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
}

/* Comments */
.tmo-sm-comments h2 .cnt {
	background: var(--tmo-accent);
	color: #fff;
	padding: 1px 8px;
	border-radius: 999px;
	font-size: 11px;
	margin-left: 6px;
	display: inline-block;
}
.tmo-sm-login-prompt {
	background: #f59e0b;
	color: #1a1a1a;
	padding: 16px 20px;
	border-radius: 6px;
	text-align: center;
	font-weight: 600;
	font-size: 14px;
}
.tmo-sm-login-prompt a { color: #1a1a1a; text-decoration: underline; }

/* ─────────────── FOOTER (3-col) ─────────────── */
.tmo-site-footer {
	background: #0a0a0a;
	border-top: 1px solid var(--tmo-line);
	padding: 36px 24px 18px;
	margin-top: 50px;
}
.tmo-site-footer .fcols3 {
	max-width: 1180px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr 1.5fr;
	gap: 40px;
}
@media (max-width: 700px) {
	.tmo-site-footer .fcols3 { grid-template-columns: 1fr; gap: 26px; }
}
.tmo-site-footer h5 {
	color: var(--ink-3);
	font-size: 13px;
	font-weight: 600;
	margin: 0 0 12px;
}
.tmo-site-footer .fcols3 a {
	display: block;
	color: var(--tmo-accent);
	text-decoration: none;
	font-size: 13px;
	padding: 4px 0;
}
.tmo-site-footer .fcols3 a:hover { color: #fff; }

.tmo-tg-cta {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	background: #0088cc;
	color: #fff !important;
	padding: 10px 18px !important;
	border-radius: 6px;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	transition: background 0.15s;
	margin-bottom: 12px;
}
.tmo-tg-cta:hover { background: #0077b3; color: #fff !important; }
.tmo-footer-mini-social {
	display: flex;
	gap: 8px;
	margin-top: 6px;
}
.tmo-footer-mini-social a {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--tmo-bg-2);
	color: var(--ink-3) !important;
	font-size: 13px;
	padding: 0 !important;
	transition: background 0.15s, color 0.15s;
}
.tmo-footer-mini-social a:hover {
	background: var(--tmo-accent);
	color: #fff !important;
}

.tmo-site-footer .copy {
	max-width: 1180px;
	margin: 24px auto 0;
	padding-top: 18px;
	border-top: 1px solid var(--tmo-line);
	text-align: center;
	color: var(--ink-3);
	font-size: 12px;
}


/* === REDESIGN POLISH 2026-05-04 === */
/* Force button text color for white variant (parent theme override-proof) */
.tmo-sm-btn.tmo-sm-btn-white,
.tmo-sm-btn.tmo-sm-btn-white > i,
.tmo-sm-btn.tmo-sm-btn-white > * { color: #1a1a1a !important; }
.tmo-sm-btn.tmo-sm-btn-warn,
.tmo-sm-btn.tmo-sm-btn-warn > i { color: #1a1a1a !important; }
.tmo-sm-btn.tmo-sm-btn-success,
.tmo-sm-btn.tmo-sm-btn-success > i,
.tmo-sm-btn.tmo-sm-btn-fav,
.tmo-sm-btn.tmo-sm-btn-fav > i,
.tmo-sm-btn.tmo-sm-btn-download,
.tmo-sm-btn.tmo-sm-btn-download > i { color: #fff !important; }

/* Brand font weight + opacity for readable italic */
.tmo-navbar.tmo-navbar-red .tmo-brand {
    color: #fff !important;
    font-size: 19px;
}
.tmo-navbar.tmo-navbar-red .tmo-brand strong { color: #fff !important; font-weight: 800; }
.tmo-navbar.tmo-navbar-red .tmo-brand em {
    color: #fff !important;
    opacity: 1;
    font-style: italic;
    font-weight: 500;
}

/* Default WP comments_template output: hide the legacy fallback when there are no posts */
.tmo-sm-comments .comment-respond .form-submit { margin-top: 14px; }
.tmo-sm-comments .commentlist,
.tmo-sm-comments ol.comment-list { list-style: none; padding: 0; margin: 14px 0 0; }
.tmo-sm-comments .comment-form-comment label,
.tmo-sm-comments .comment-form label {
    color: var(--ink-2);
    font-size: 12px;
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
}
.tmo-sm-comments .comment-form input[type="text"],
.tmo-sm-comments .comment-form input[type="email"],
.tmo-sm-comments .comment-form input[type="url"],
.tmo-sm-comments .comment-form textarea {
    width: 100%;
    background: var(--tmo-bg-2);
    border: 1px solid var(--tmo-line);
    border-radius: 4px;
    color: var(--ink);
    padding: 8px 12px;
    font-size: 13px;
    margin-bottom: 12px;
    font-family: inherit;
}
.tmo-sm-comments .comment-form textarea { min-height: 90px; }
.tmo-sm-comments #submit,
.tmo-sm-comments .submit {
    background: var(--tmo-accent);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.tmo-sm-comments #submit:hover { background: var(--tmo-accent-hover); }
.tmo-sm-comments .comment-notes { color: var(--ink-3); font-size: 12px; }


/* === READER REDESIGN 2026-05-04 === */
body.tmo-reader-body {
	background: #0e0e0e;
	color: var(--ink);
	margin: 0;
	font-family: 'Inter Tight', system-ui, -apple-system, sans-serif;
}
body.tmo-reader-body main.tmo-container { display: contents; }

/* Top navbar */
.tmo-rd-topbar {
	background: #c93030;
	color: #fff;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 8px 20px;
	position: sticky;
	top: 0;
	z-index: 200;
	box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.tmo-rd-brand {
	color: #fff !important;
	font-weight: 800;
	font-size: 17px;
	text-decoration: none;
	letter-spacing: 0.01em;
}
.tmo-rd-nav {
	display: flex;
	gap: 4px;
	align-items: center;
}
.tmo-rd-btn {
	background: none;
	border: none;
	color: #fff !important;
	font-size: 13.5px;
	font-weight: 500;
	padding: 8px 14px;
	border-radius: 4px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	transition: background 0.12s;
	white-space: nowrap;
}
.tmo-rd-btn:hover { background: rgba(255,255,255,.18); }
.tmo-rd-btn-report { color: #fed7aa !important; }

.tmo-rd-dd { position: relative; }
.tmo-rd-dd-menu {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	min-width: 200px;
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 6px 20px rgba(0,0,0,.4);
	display: none;
	z-index: 201;
	padding: 6px 0;
	color: #1a1a1a;
}
.tmo-rd-dd-menu.open { display: block; }
.tmo-rd-dd-menu .tmo-rd-dd-section-label {
	color: #888;
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 7px 14px 3px;
}
.tmo-rd-dd-menu > a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	color: #1a1a1a !important;
	text-decoration: none;
	font-size: 13px;
	font-weight: 500;
}
.tmo-rd-dd-menu > a:hover { background: #f1f1f1; color: #c93030 !important; }
.tmo-rd-dd-menu > a > i { width: 14px; color: #c93030; font-size: 12px; }
.tmo-rd-dd-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	font-size: 13px;
	color: #1a1a1a;
	cursor: pointer;
}
.tmo-rd-dd-toggle:hover { background: #f1f1f1; }
.tmo-rd-dd-toggle input { margin: 0; cursor: pointer; }
.tmo-rd-dd-info {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 4px 12px;
	padding: 8px 14px 10px;
	font-size: 12px;
	color: #444;
	border-top: 1px solid #eee;
}
.tmo-rd-dd-info .k { color: #888; }
.tmo-rd-dd-info .v { color: #1a1a1a; font-weight: 600; }

.tmo-rd-nav-right {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 8px;
}
.tmo-rd-page-select {
	background: #fff;
	color: #1a1a1a;
	border: none;
	border-radius: 3px;
	padding: 5px 8px;
	font-size: 13px;
	min-width: 64px;
	cursor: pointer;
	font-weight: 600;
}
.tmo-rd-arrow {
	background: rgba(255,255,255,.95);
	color: #c93030 !important;
	border: none;
	width: 34px;
	height: 30px;
	border-radius: 3px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	transition: background 0.12s, transform 0.12s;
}
.tmo-rd-arrow:hover { background: #fff; transform: translateX(2px); }
.tmo-rd-auth-link {
	color: #fff !important;
	text-decoration: none;
	padding: 6px 12px;
	border-radius: 3px;
	font-size: 13px;
	font-weight: 500;
}
.tmo-rd-auth-link:hover { background: rgba(255,255,255,.18); }
.tmo-rd-register { font-weight: 600; }

/* Title banner */
.tmo-rd-title-banner {
	background: #c93030;
	color: #fff;
	text-align: center;
	padding: 28px 20px;
	margin: 26px auto 0;
	max-width: 1180px;
	border-radius: 4px;
	box-shadow: 0 4px 14px rgba(201,48,48,.3);
}
.tmo-rd-title-banner h1 {
	margin: 0 0 6px;
	font-size: clamp(20px, 2.8vw, 30px);
	font-weight: 600;
	font-family: 'Inter Tight', system-ui, sans-serif;
}
.tmo-rd-title-banner p {
	margin: 0;
	font-size: 14px;
	opacity: 0.96;
	font-weight: 600;
}
.tmo-rd-title-banner p strong { font-weight: 700; }

/* Reader image area */
.tmo-rd-area {
	max-width: 1100px;
	margin: 26px auto 0;
	padding: 0 16px;
	min-height: 400px;
}
.tmo-rd-area[data-mode="cascade"] .tmo-rd-page { margin-bottom: 6px; }
.tmo-rd-area[data-mode="cascade"] .tmo-rd-page[hidden] { display: block !important; visibility: visible; }
.tmo-rd-area[data-mode="paginated"] .tmo-rd-page[hidden] { display: none; }

.tmo-rd-page {
	display: flex;
	justify-content: center;
}
.tmo-rd-page img {
	max-width: 100%;
	height: auto;
	display: block;
	background: #1a1a1a;
	cursor: pointer;
	border-radius: 2px;
}
body.tmo-rd-fullwidth .tmo-rd-page img { max-width: 100% !important; width: 100%; }
body.tmo-rd-fullwidth .tmo-rd-area { max-width: 100%; padding: 0; }

.tmo-rd-empty {
	text-align: center;
	padding: 80px 20px;
	color: var(--ink-3);
}
.tmo-rd-empty i { font-size: 48px; opacity: 0.4; margin-bottom: 12px; display: block; }

/* Footer bar (red) */
.tmo-rd-footer-bar {
	background: #c93030;
	color: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 14px 30px;
	margin-top: 30px;
}
.tmo-rd-fb-btn {
	color: #fff !important;
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
	padding: 8px 16px;
	border-radius: 3px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: background 0.12s;
}
.tmo-rd-fb-btn:hover { background: rgba(255,255,255,.18); }

/* Comments below reader */
.tmo-rd-comments {
	max-width: 1100px;
	margin: 0 auto;
	padding: 30px 20px 60px;
}
.tmo-rd-comments h2 {
	color: var(--tmo-accent);
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 14px;
}
.tmo-rd-login-prompt {
	background: #f59e0b;
	color: #1a1a1a;
	padding: 14px 18px;
	border-radius: 4px;
	text-align: center;
	font-weight: 600;
	font-size: 14px;
}
.tmo-rd-login-prompt a { color: #1a1a1a; text-decoration: underline; }

/* Mobile */
@media (max-width: 900px) {
	.tmo-rd-topbar { flex-wrap: wrap; padding: 8px 12px; gap: 6px; }
	.tmo-rd-nav { order: 3; flex-basis: 100%; overflow-x: auto; padding-top: 6px; }
	.tmo-rd-btn { padding: 7px 10px; font-size: 12px; }
	.tmo-rd-nav-right { order: 2; margin-left: auto; gap: 4px; }
	.tmo-rd-page-select { min-width: 50px; padding: 4px 6px; font-size: 12px; }
	.tmo-rd-auth-link { padding: 5px 8px; font-size: 12px; }
	.tmo-rd-title-banner { margin: 12px 8px 0; padding: 18px 14px; }
	.tmo-rd-title-banner h1 { font-size: 18px; }
	.tmo-rd-area { padding: 0 8px; margin-top: 12px; }
	.tmo-rd-footer-bar { padding: 12px 16px; }
	.tmo-rd-fb-btn { font-size: 12px; padding: 6px 10px; }
}


/* === HOME REDESIGN 2026-05-04 === */
.tmo-home {
	max-width: 1280px;
	margin: 0 auto;
	padding: 22px 16px 60px;
}
.tmo-home-grid {
	display: grid;
	grid-template-columns: 1fr 280px;
	gap: 22px;
}
@media (max-width: 1000px) { .tmo-home-grid { grid-template-columns: 1fr; } }

/* Tabs */
.tmo-home-tabs {
	display: flex;
	gap: 8px;
	margin-bottom: 14px;
}
.tmo-home-tab {
	flex: 1;
	background: #c93030;
	color: #fff !important;
	text-align: center;
	padding: 14px 12px;
	border-radius: 6px;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.04em;
	text-decoration: none;
	transition: opacity 0.15s, transform 0.05s;
}
.tmo-home-tab:hover { opacity: 0.92; }
.tmo-home-tab.active {
	background: #e74c3c;
	box-shadow: 0 4px 12px rgba(231,76,60,0.4);
}

/* Legend */
.tmo-home-legend {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 16px;
	padding: 8px 0 18px;
	border-bottom: 1px solid var(--tmo-line);
	margin-bottom: 18px;
}
.tmo-home-legend .lg-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--ink-2);
	font-size: 13px;
	font-weight: 500;
}
.tmo-home-legend .lg-dot {
	width: 12px;
	height: 12px;
	border-radius: 2px;
	display: inline-block;
}

/* Card grid */
.tmo-home-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}
@media (max-width: 900px) { .tmo-home-cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .tmo-home-cards { grid-template-columns: repeat(2, 1fr); } }

.tmo-card {
	position: relative;
	display: block;
	background: #1a1a1a;
	border-radius: 4px;
	overflow: hidden;
	aspect-ratio: 3/4;
	text-decoration: none;
	color: #fff !important;
	transition: transform 0.15s, box-shadow 0.15s;
}
.tmo-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 22px rgba(0,0,0,0.5);
}
.tmo-card-strip {
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 5px;
	z-index: 3;
}
.tmo-card-cover {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.tmo-card-title {
	position: absolute;
	top: 10px; left: 8px; right: 50px;
	color: #fff !important;
	background: linear-gradient(180deg, rgba(0,0,0,0.85), rgba(0,0,0,0.5));
	padding: 4px 8px 5px;
	border-radius: 3px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	z-index: 4;
	line-height: 1.2;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-shadow: 0 1px 2px rgba(0,0,0,0.7);
}
.tmo-card-rating {
	position: absolute;
	top: 8px; right: 8px;
	background: rgba(0,0,0,0.85);
	color: #fff !important;
	padding: 3px 8px;
	border-radius: 3px;
	font-size: 12px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	z-index: 4;
}
.tmo-card-rating .fa-star { color: #fbbf24; font-size: 11px; }
.tmo-card-gender {
	position: absolute;
	left: 8px;
	bottom: 32px;
	z-index: 4;
	color: #60a5fa !important;
	font-size: 13px;
	background: rgba(0,0,0,0.6);
	padding: 3px 6px;
	border-radius: 3px;
}
.tmo-card-meta {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	background: linear-gradient(0deg, rgba(0,0,0,0.92), rgba(0,0,0,0.55));
	color: #fff !important;
	padding: 7px 8px 6px;
	font-size: 10.5px;
	display: flex;
	align-items: center;
	gap: 6px;
	z-index: 4;
}
.tmo-card-meta .flag { font-size: 13px; }
.tmo-card-meta i { opacity: 0.85; font-size: 10px; }

/* Empty */
.tmo-home-empty {
	padding: 60px 20px;
	text-align: center;
	color: var(--ink-3);
	background: var(--tmo-bg-2);
	border-radius: 6px;
}

/* Right sidebar panels */
.tmo-home-side { display: flex; flex-direction: column; gap: 14px; }
.tmo-home-panel {
	background: var(--tmo-bg-2);
	border-radius: 6px;
	padding: 14px 16px;
	border-top: 2px solid #c93030;
}
.tmo-home-panel h3 {
	color: var(--tmo-accent);
	font-size: 13px;
	font-weight: 700;
	margin: 0 0 12px;
	letter-spacing: 0.04em;
	display: flex;
	align-items: center;
	gap: 6px;
	border-bottom: 1px solid var(--tmo-line);
	padding-bottom: 8px;
}
.tmo-home-filter-icons {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.tmo-home-filter-icons .ico-btn {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #c93030;
	color: #fff !important;
	padding: 12px 0;
	border-radius: 4px;
	font-size: 16px;
	text-decoration: none;
	transition: background 0.15s;
}
.tmo-home-filter-icons .ico-btn:hover { background: #e74c3c; }
.tmo-home-search {
	display: flex;
	gap: 6px;
}
.tmo-home-search input[type="search"] {
	flex: 1;
	background: var(--tmo-bg);
	border: 1px solid var(--tmo-line);
	color: var(--ink);
	border-radius: 4px;
	padding: 9px 10px;
	font-size: 13px;
	min-width: 0;
}
.tmo-home-search input[type="search"]:focus { outline: 1px solid var(--tmo-accent); border-color: var(--tmo-accent); }
.tmo-home-search button {
	background: #c93030;
	color: #fff;
	border: none;
	padding: 9px 14px;
	border-radius: 4px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: background 0.15s;
}
.tmo-home-search button:hover { background: #e74c3c; }
.tmo-home-tg {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: #0088cc;
	color: #fff !important;
	padding: 12px 14px;
	border-radius: 4px;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	transition: background 0.15s;
}
.tmo-home-tg:hover { background: #0077b3; color: #fff !important; }

/* LATEST CONTENTS */
.tmo-home-latest {
	margin-top: 32px;
	background: #1a1a1a;
	border-radius: 6px;
	padding: 18px 20px 22px;
}
.tmo-home-latest-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid #c93030;
	padding-bottom: 8px;
	margin-bottom: 12px;
}
.tmo-home-latest-head h2 {
	color: var(--tmo-accent);
	font-size: 16px;
	font-weight: 700;
	margin: 0;
	letter-spacing: 0.04em;
}
.tmo-home-latest-head .view-toggle { display: flex; gap: 4px; }
.tmo-home-latest-head .vt {
	background: #c93030;
	border: none;
	color: #fff;
	width: 32px;
	height: 28px;
	border-radius: 3px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.tmo-home-latest-head .vt:not(.active) { background: var(--tmo-bg-2); color: var(--ink-2); }

/* LIST VIEW (default) — text rows with category color stripe */
.tmo-latest-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
}
@media (max-width: 900px) { .tmo-latest-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .tmo-latest-list { grid-template-columns: 1fr; } }

.tmo-latest-list .latest-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 12px;
	color: var(--tmo-accent) !important;
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
	border-radius: 0 4px 4px 0;
	transition: background 0.12s, transform 0.12s;
	min-height: 32px;
	background: linear-gradient(90deg, color-mix(in srgb, var(--cat-color) 16%, transparent) 0%, color-mix(in srgb, var(--cat-color) 8%, transparent) 30%, transparent 70%);
	border-left: 3px solid var(--cat-color);
}
.tmo-latest-list .latest-row:hover { color: #fff !important; }
.tmo-latest-list .latest-row .latest-cover { display: none; }  /* hidden in list view */
.tmo-latest-list .latest-row .title {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tmo-latest-list .latest-row .meta {
	color: var(--ink-3);
	font-size: 11px;
	font-weight: 500;
	white-space: nowrap;
	display: inline-flex;
	gap: 5px;
	align-items: center;
}
.tmo-latest-list .latest-row .meta i { opacity: 0.7; font-size: 10px; }

/* GRID VIEW — card with cover */
.tmo-latest-list.view-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 900px) { .tmo-latest-list.view-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .tmo-latest-list.view-grid { grid-template-columns: repeat(2, 1fr); } }

.tmo-latest-list.view-grid .latest-row {
	flex-direction: column;
	align-items: stretch;
	padding: 0;
	background: var(--tmo-bg-2);
	border-radius: 6px;
	border-left: none;
	border-top: 4px solid var(--cat-color);
	overflow: hidden;
	min-height: 0;
	transition: transform 0.15s, box-shadow 0.15s;
}
.tmo-latest-list.view-grid .latest-row:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 22px rgba(0,0,0,0.5);
}
.tmo-latest-list.view-grid .latest-row .latest-cover {
	display: block;
	width: 100%;
	aspect-ratio: 3/4;
	object-fit: cover;
	background: #1a1a1a;
}
.tmo-latest-list.view-grid .latest-row .title {
	white-space: normal;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	padding: 8px 10px 4px;
	color: var(--tmo-accent) !important;
	font-size: 12px;
	line-height: 1.3;
	min-height: 38px;
}
.tmo-latest-list.view-grid .latest-row .meta {
	padding: 4px 10px 10px;
	border-top: 1px solid var(--tmo-line);
	margin-top: auto;
}

/* Pagination */
.tmo-home-pagination {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 24px;
}
.tmo-home-pagination .pg-btn {
	background: var(--tmo-bg-2);
	color: var(--ink-2);
	border: none;
	padding: 10px 22px;
	border-radius: 3px;
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
}
.tmo-home-pagination .pg-btn-next { background: #c93030; color: #fff; }
.tmo-home-pagination .pg-btn-next:hover { background: #e74c3c; }
.tmo-home-pagination .pg-btn:disabled { opacity: 0.5; cursor: not-allowed; }