/* f0ckwork omega */
/* originally written by sirx for f0ck.me */
/* heavily modified for f0ckm by Kibi Kelburton */
/* use whatever you like */
/* once upon a time this was a stiefelstrapse! but no more! */

/* This used to be a soulful attempt but ended up in being artificially enhanced! */

:root {
  --white: #fff;
  --black: #000;
  --bg: #111;
  --text: #fff;
  --gray: #262626;
  --accent: #9f0;
  --accent-rgb: 153, 255, 0;
  --sidebar-w: 300px;
  --emoji-fav-color: #f5c518;
  --nav-bg: #2b2b2b;
  --nav-brand-border: inset 1px #242424;
  --nav-brand-bg: #171717;
  --navigation-links-bg: #2b2b2b;
  --navigation-links-background-linear-gradient: rgba(0, 0, 0, .12), rgba(0, 0, 0, 0);
  --navigation-links-border-color: rgba(0, 0, 0, .8) rgba(0, 0, 0, .65) rgba(0, 0, 0, .5);
  --navigation-links-box-shadow: rgba(255, 255, 255, .05);
  --nav-link-background-linear-gradient: rgba(255, 255, 255, .04), rgba(255, 255, 255, 0);
  --nav-link-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 0px rgba(255, 255, 255, .04), inset 0 0px rgba(0, 0, 0, .15), 0 0px 0px rgba(0, 0, 0, .1);
  --nav-link-hover-bg: #333;
  --nav-border-color: rgba(255, 255, 255, .05);
  --dropdown-bg: #232323;
  --dropdown-item-hover: #0d0d0d;
  --nav-brand-font: 'VCR';
  --font: monospace;
  --pagination-background: #2b2b2b;
  --metadata-bg: #2b2b2b;
  --badge-bg: #171717;
  --badge-sfw: #02500b;
  --badge-nsfw: #E10DC3;
  --badge-nsfl: #660000;
  --badge-untagged: #555555;
  --badge-tag: #090909;
  --posts-meta-bg: #000000b8;
  --x2154: #215483;
  --bg-canvas-opacity: 0.81;
  --bg-canvas-blur: 30px;   /* runtime value set by applyBackgroundOpacitySettings() */
  --bg-canvas-zoom: 1.38;
  --bg-canvas-color: rgba(0, 0, 0, 0.09);
  --bg-canvas-color-opacity: 0.09;
  --onara-bg-opacity: 0.6;
  --onara-backdrop-blur: 5px;
  --onara-grid-dim-opacity: 1.0;
}

html:not([theme]), html[theme=""] {
  --badge-bg: #171717;
  --badge-sfw: #02500b;
  --badge-nsfw: #E10DC3;
  --badge-nsfl: #660000;
  --badge-untagged: #555555;
  --badge-tag: #090909;
}

html, body {
  touch-action: pan-x pan-y;
}
html[theme='f0ck'] {
  --accent: #9f0;
  --accent-rgb: 153, 255, 0;
  --emoji-fav-color: #f5c518;
  --bg: #111;
  --black: #000;
  --white: #fff;
  --gray: #262626;
  --nav-bg: #2b2b2b;
  --nav-brand-border: inset 1px #242424;
  --nav-brand-bg: #171717;
  --navigation-links-bg: #2b2b2b;
  --navigation-links-background-linear-gradient: rgba(0, 0, 0, .12), rgba(0, 0, 0, 0);
  --navigation-links-border-color: rgba(0, 0, 0, .8) rgba(0, 0, 0, .65) rgba(0, 0, 0, .5);
  --navigation-links-box-shadow: rgba(255, 255, 255, .05);
  --nav-link-background-linear-gradient: rgba(255, 255, 255, .04), rgba(255, 255, 255, 0);
  --nav-link-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 0px rgba(255, 255, 255, .04), inset 0 0px rgba(0, 0, 0, .15), 0 0px 0px rgba(0, 0, 0, .1);
  --nav-link-hover-bg: #333;
  --nav-border-color: rgba(255, 255, 255, .05);
  --dropdown-bg: #232323;
  --dropdown-item-hover: #0d0d0d;
  --nav-brand-font: 'VCR';
  --font: monospace;
  --pagination-background: #2b2b2b;
  --pagination-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 0px rgba(255, 255, 255, .04), inset 0 0px rgba(0, 0, 0, .15), 0 0px 0px rgba(0, 0, 0, .1);
  --pagination-anchor-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 1px rgba(255, 255, 255, .04), inset 0 -1px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .1);
  --pagination-background-hover: #333;
  --pagination-border-color: rgba(0, 0, 0, .8) rgba(0, 0, 0, .65) rgba(0, 0, 0, .5);
  --metadata-bg: #2b2b2b;
  --badge-bg: #171717;
  --posts-meta-bg: #000000b8;
  --badge-sfw: #02500b;
  --badge-nsfw: #E10DC3;
  --badge-nsfl: #660000;
  --badge-tag: #090909;
  --scrollbar-color: #555;
  --scroller-bg: #424242;
  --footbar-color: #9f0;
  --loading-indicator-color: #9f0;
  --img-border-width: 0;
  --img-border-color: #363636;
  --maximize_button: #9f0;
  --bg-gradient: linear-gradient(0deg, rgba(0, 0, 0, 0.94) 0%, rgb(6, 6, 6) 10%, rgb(43, 43, 43) 100%);
  /* appearance */
  background: black;
   --comment-bg: black;
   --motd-bg: var(--gray);
}

html[theme="f0ck"] .admin-search button {
  color: var(--black) !important;
}

html[theme="f0ck"] .pagination>a,
.pagination>span {
  border-radius: 3px;
  border: 1px solid var(--black);
}

html[theme="f0ck"] .pagination>span {
  border-radius: 3px;
}

html[theme='p1nk'] {
  --accent: #ff00d0;
  --accent-rgb: 255, 0, 208;
  --bg: #111;
  --black: #000;
  --white: #fff;
  --gray: #262626;
  --nav-bg: #201f1f;
  --nav-brand-border: inset 1px #242424;
  --nav-brand-bg: #171717;
  --navigation-links-bg: #201f1f;
  --navigation-links-background-linear-gradient: rgba(0, 0, 0, .12), rgba(0, 0, 0, 0);
  --navigation-links-border-color: rgba(0, 0, 0, .8) rgba(0, 0, 0, .65) rgba(0, 0, 0, .5);
  --navigation-links-box-shadow: rgba(255, 255, 255, .05);
  --nav-link-background-linear-gradient: rgba(255, 255, 255, .04), rgba(255, 255, 255, 0);
  --nav-link-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 1px rgba(255, 255, 255, .04), inset 0 -1px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .1);
  --nav-link-hover-bg: #333;
  --nav-border-color: rgba(255, 255, 255, .05);
  --dropdown-bg: #232323;
  --dropdown-item-hover: #0d0d0d;
  --nav-brand-font: 'VCR';
  --font: monospace;
  --pagination-background: #201f1f;
  --pagination-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 1px rgba(255, 255, 255, .04), inset 0 -1px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .1);
  ;
  --pagination-anchor-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 1px rgba(255, 255, 255, .04), inset 0 -1px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .1);
  --pagination-background-hover: #333;
  --pagination-border-color: rgba(0, 0, 0, .8) rgba(0, 0, 0, .65) rgba(0, 0, 0, .5);
  --badge-bg: #171717;
  --badge-sfw: #02500b;
  --badge-nsfw: #E10DC3;
  --badge-nsfl: #660000;
  --badge-tag: #090909;
  --metadata-bg: #2b2b2b;
  --posts-meta-bg: #000000b8;
  --scrollbar-color: #555;
  --scroller-bg: #424242;
  --footbar-color: #ff00d0;
  --loading-indicator-color: #ff00d0;
  --img-border-width: 0;
  --img-border-color: #363636;
  --maximize_button: #ff00d0;
  --bg-gradient: linear-gradient(0deg, rgba(0, 0, 0, 0.94) 0%, rgb(6, 6, 6) 10%, rgb(43, 43, 43) 100%);
  /* appearance */
  background: black;
  --motd-bg: #111;
  --comment-bg: #201f1f;
}

html[theme="p1nk"] .pagination>a,
.pagination>span {
  border-radius: 3px;
  border: 1px solid var(--black);
}

html[theme="p1nk"] .pagination>span {
  border-radius: 3px;
}

html[theme='orange'] {
  --accent: #ff6f00;
  --accent-rgb: 255, 111, 0;
  --bg: #111;
  --black: #000;
  --white: #fff;
  --gray: #262626;
  --nav-bg: #2b2b2b;
  --nav-brand-border: inset 1px #242424;
  --nav-brand-bg: #171717;
  --navigation-links-bg: #2b2b2b;
  --navigation-links-background-linear-gradient: rgba(0, 0, 0, .12), rgba(0, 0, 0, 0);
  --navigation-links-border-color: rgba(0, 0, 0, .8) rgba(0, 0, 0, .65) rgba(0, 0, 0, .5);
  --navigation-links-box-shadow: rgba(255, 255, 255, .05);
  --nav-link-background-linear-gradient: rgba(255, 255, 255, .04), rgba(255, 255, 255, 0);
  --nav-link-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 1px rgba(255, 255, 255, .04), inset 0 -1px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .1);
  --nav-link-hover-bg: #333;
  --dropdown-bg: #232323;
  --nav-border-color: rgba(255, 255, 255, .05);
  --dropdown-item-hover: #0d0d0d;
  --nav-brand-font: 'VCR';
  --font: monospace;
  --pagination-background: #2b2b2b;
  --pagination-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 1px rgba(255, 255, 255, .04), inset 0 -1px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .1);
  --pagination-anchor-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 1px rgba(255, 255, 255, .04), inset 0 -1px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .1);
  --pagination-background-hover: #333;
  --pagination-border-color: rgba(0, 0, 0, .8) rgba(0, 0, 0, .65) rgba(0, 0, 0, .5);
  --metadata-bg: #2b2b2b;
  --badge-bg: #151515;
  --posts-meta-bg: #000000b8;
  --badge-tag: #090909;
  --badge-sfw: #02500b;
  --badge-nsfw: #E10DC3;
  --badge-nsfl: #660000;
  --scrollbar-color: #555;
  --scroller-bg: #424242;
  --footbar-color: #ff6f00;
  --loading-indicator-color: #ff6f00;
  --img-border-width: 0;
  --img-border-color: #363636;
  --maximize_button: #ff6f00;
  --bg-gradient: linear-gradient(0deg, rgba(0, 0, 0, 0.94) 0%, rgb(6, 6, 6) 10%, rgb(43, 43, 43) 100%);
  /* appearance */
  background: black;
  --motd-bg: #111;
  --comment-bg: #2b2b2b;
}

html[theme="orange"] .pagination>a,
.pagination>span {
  border-radius: 3px;
  border: 1px solid var(--black);
}

html[theme="orange"] .pagination>span {
  border-radius: 3px;
}

html[theme='amoled'] {
  --accent: #fff;
  --accent-rgb: 255, 255, 255;
  --bg: #000;
  --black: #000;
  --white: #fff;
  --gray: #2f2d2d;
  --nav-bg: #000;
  --nav-brand-border: inset 1px #242424;
  --nav-brand-bg: #000;
  --navigation-links-bg: #000;
  --navigation-links-background-linear-gradient: rgba(0, 0, 0, .12), rgba(0, 0, 0, 0);
  --navigation-links-border-color: rgba(0, 0, 0, .8) rgba(0, 0, 0, .65) rgba(0, 0, 0, .5);
  --navigation-links-box-shadow: rgba(255, 255, 255, .05);
  --nav-link-background-linear-gradient: rgba(255, 255, 255, .04), rgba(255, 255, 255, 0);
  --nav-link-box-shadow: inset 0 0 0 1px rgb(92, 92, 92), inset 0 1px rgb(92, 92, 92), inset 0 -1px rgb(92, 92, 92), 0 1px 1px rgba(92, 92, 92, 0);
  --nav-link-hover-bg: #6a6a6a70;
  --nav-border-color: rgba(255, 255, 255, .20);
  --dropdown-bg: #232323;
  --dropdown-item-hover: #0d0d0d;
  --nav-brand-font: 'VCR';
  --font: monospace;
  --pagination-background: #000;
  --pagination-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0), inset 0 0px rgba(255, 255, 255, 0), inset 0 0px rgba(248, 248, 248, 0), 0 0px 0px rgba(255, 255, 255, 0);
  --pagination-anchor-box-shadow: inset 0 0 0 1px rgb(92, 92, 92), inset 0 1px rgb(92, 92, 92), inset 0 -1px rgb(92, 92, 92), 0 1px 1px rgba(92, 92, 92, 0);
  --pagination-background-hover: #6a6a6a70;
  --pagination-border-color: rgba(0, 0, 0, .8) rgba(0, 0, 0, .65) rgba(0, 0, 0, .5);
  --metadata-bg: #000;
  --badge-bg: #000;
  --posts-meta-bg: #000000b8;
  --badge-sfw: #02500b;
  --badge-nsfw: #E10DC3;
  --badge-nsfl: #660000;
  --badge-tag: #1a1a1a;
  --scrollbar-color: #444;
  --scroller-bg: #424242;
  --footbar-color: #fff;
  --loading-indicator-color: #fff;
  --img-border-width: 0;
  --img-border-color: #363636;
  --maximize_button: #fff;
  --bg-gradient: linear-gradient(0deg, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 10%, rgb(0, 0, 0) 100%);
  --motd-bg: #000;
  --comment-bg: black;
}

html[theme="amoled"] .comment-input textarea {
  border: 1px solid var(--nav-border-color);
}

html[theme="amoled"] .profile_head_user_stats > * {
    box-shadow: 1px 1px 1px #6a6a6a70;
}

html[theme="amoled"] #settings-quicknav a:hover, #settings-quicknav a.active {
  color: var(--black) !important;
}

html[theme="amoled"] .metadata {
  border: none;
}

html[theme="amoled"] .pagination>a,
.pagination>span {
  border-radius: 3px;
  border: 1px solid var(--black);
}

html[theme="amoled"] .pagination>span {
  border-radius: 3px;
}

html[theme="amoled"] .admin-search button {
  color: var(--black) !important;
}

html[theme="amoled"] table.table tbody tr:nth-of-type(2n+1) a {
  color: var(--white) !important;
  text-decoration: underline;
}

html[theme="amoled"] table.table tbody tr:nth-of-type(2n+1) {
  color: var(--white) !important;
}

html[theme="amoled"] table.table a {
  text-decoration: underline;
}

:root[theme='light'],
:root[theme='paper'],
html[theme='light'],
html[theme='paper'],
[theme='light'],
[theme='paper'] {
  --accent: #0070f3;
  --accent-rgb: 0, 112, 243;
  --emoji-fav-color: #f59e0b;
  --bg: #f6f8fa;
  --black: white;
  --white: black;
  --gray: #e2e8f0;
  --text: black;
  --text-muted: #64748b;
  --nav-bg: #ffffff;
  --nav-brand-border: 1px solid #e2e8f0;
  --nav-brand-bg: #ffffff;
  --navigation-links-bg: #f1f5f9;
  --navigation-links-background-linear-gradient: none;
  --navigation-links-border-color: #e2e8f0;
  --navigation-links-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  --nav-link-background-linear-gradient: none;
  --nav-link-box-shadow: none;
  --nav-link-hover-bg: #e2e8f0;
  --nav-border-color: #e2e8f0;
  --dropdown-bg: #ffffff;
  --dropdown-item-hover: #f1f5f9;
  --nav-brand-font: 'VCR';
  --font: monospace;
  --pagination-background: #ffffff;
  --pagination-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  --pagination-anchor-box-shadow: none;
  --pagination-background-hover: #f1f5f9;
  --pagination-border-color: #cbd5e1;
  --metadata-bg: #ffffff;
  --badge-bg: #f1f5f9;
  --posts-meta-bg: rgba(255, 255, 255, 0.94);
  --badge-sfw: #02500b;
  --badge-nsfw: #db2777;
  --badge-nsfl: #dc2626;
  --badge-tag: #f1f5f9;
  --scrollbar-color: #cbd5e1;
  --scroller-bg: #e2e8f0;
  --footbar-color: black;
  --loading-indicator-color: #0070f3;
  --img-border-width: 0;
  --img-border-color: #e2e8f0;
  --maximize_button: black;
  --bg-gradient: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
  background: #f6f8fa;
  --comment-bg: #ffffff;
  --motd-bg: #ffffff;
  color: black;
}

/* Base Body & Typography */
html[theme='light'],
html[theme='light'] body,
html[theme='paper'],
html[theme='paper'] body,
[theme='light'] body,
[theme='paper'] body {
  color: black !important;
  background: var(--bg) !important;
}

html[theme='light'] p,
html[theme='light'] span,
html[theme='light'] div,
html[theme='light'] label,
html[theme='light'] td,
html[theme='light'] th,
html[theme='light'] li,
html[theme='light'] .content,
html[theme='light'] .pagewrapper,
html[theme='light'] #main,
html[theme='paper'] p,
html[theme='paper'] span,
html[theme='paper'] div,
html[theme='paper'] label,
html[theme='paper'] td,
html[theme='paper'] th,
html[theme='paper'] li,
html[theme='paper'] .content,
html[theme='paper'] .pagewrapper,
html[theme='paper'] #main,
[theme='light'] p,
[theme='light'] span,
[theme='light'] div,
[theme='light'] label,
[theme='light'] td,
[theme='light'] th,
[theme='light'] li,
[theme='light'] .content,
[theme='light'] .pagewrapper,
[theme='light'] #main {
  color: black;
}

html[theme='light'] .text-muted,
html[theme='light'] .post-stats,
html[theme='light'] .post-meta,
html[theme='light'] .comment-date,
html[theme='light'] .comment-meta,
html[theme='light'] .comment-time,
html[theme='light'] .infobox-sub-heading,
html[theme='light'] .infobox-card-label,
html[theme='light'] .sidebar-activity-time,
html[theme='light'] .gchat-time,
html[theme='light'] .chat-time,
html[theme='paper'] .text-muted,
html[theme='paper'] .post-stats,
html[theme='paper'] .post-meta,
html[theme='paper'] .comment-date,
html[theme='paper'] .comment-meta,
html[theme='paper'] .comment-time,
html[theme='paper'] .infobox-sub-heading,
html[theme='paper'] .infobox-card-label,
html[theme='paper'] .sidebar-activity-time,
html[theme='paper'] .gchat-time,
html[theme='paper'] .chat-time,
[theme='light'] .text-muted,
[theme='light'] .post-stats,
[theme='light'] .post-meta,
[theme='light'] .comment-date,
[theme='light'] .comment-meta,
[theme='light'] .comment-time,
[theme='light'] .infobox-sub-heading,
[theme='light'] .infobox-card-label,
[theme='light'] .sidebar-activity-time,
[theme='light'] .gchat-time,
[theme='light'] .chat-time {
  color: #64748b !important;
}

html[theme='light'] a,
html[theme='paper'] a,
[theme='light'] a {
  color: #0284c7;
}

html[theme='light'] a:hover,
html[theme='paper'] a:hover,
[theme='light'] a:hover {
  color: #0369a1;
}

html[theme='light'] h1, html[theme='light'] h2, html[theme='light'] h3, html[theme='light'] h4, html[theme='light'] h5, html[theme='light'] h6,
html[theme='paper'] h1, html[theme='paper'] h2, html[theme='paper'] h3, html[theme='paper'] h4, html[theme='paper'] h5, html[theme='paper'] h6,
[theme='light'] h1, [theme='light'] h2, [theme='light'] h3, [theme='light'] h4, [theme='light'] h5, [theme='light'] h6 {
  color: black !important;
}

/* Navbar & Brand */
html[theme='light'] .navbar,
html[theme='paper'] .navbar {
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

html[theme='light'] .navbar-brand,
html[theme='paper'] .navbar-brand {
  background: #ffffff;
  color: #0f172a !important;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

html[theme='light'] .nav-link,
html[theme='paper'] .nav-link {
  color: #334155;
}

html[theme='light'] .nav-link:hover,
html[theme='paper'] .nav-link:hover {
  color: #0f172a;
  background: #f1f5f9;
}

html[theme='light'] .nav-link.active,
html[theme='paper'] .nav-link.active {
  color: #0070f3;
  background: rgba(0, 112, 243, 0.08);
}

html[theme='light'] .dropdown-menu,
html[theme='paper'] .dropdown-menu {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #1e293b;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

html[theme='light'] .dropdown-item,
html[theme='paper'] .dropdown-item {
  color: #334155;
}

html[theme='light'] .dropdown-item:hover,
html[theme='paper'] .dropdown-item:hover {
  background: #f1f5f9;
  color: #0f172a;
}

html[theme='light'] .dropdown-divider,
html[theme='paper'] .dropdown-divider {
  border-color: #e2e8f0;
}

html[theme='light'] .notif-dropdown,
html[theme='paper'] .notif-dropdown {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12);
}

html[theme='light'] .notif-dropdown::after,
html[theme='paper'] .notif-dropdown::after {
  border-bottom-color: #ffffff;
}

html[theme='light'] .notif-header,
html[theme='paper'] .notif-header {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  color: #0f172a;
}

html[theme='light'] .notif-tab,
html[theme='paper'] .notif-tab {
  color: #64748b;
}

html[theme='light'] .notif-tab:hover,
html[theme='paper'] .notif-tab:hover {
  color: #0f172a;
  background: #f1f5f9;
}

html[theme='light'] .notif-tab.active,
html[theme='paper'] .notif-tab.active {
  color: #0070f3;
  background: rgba(0, 112, 243, 0.08);
}

html[theme='light'] .notif-item,
html[theme='paper'] .notif-item {
  border-bottom: 1px solid #f1f5f9;
  color: #1e293b;
}

html[theme='light'] .notif-item:hover,
html[theme='paper'] .notif-item:hover {
  background: #f8fafc;
}

html[theme='light'] .notif-item.unread,
html[theme='paper'] .notif-item.unread {
  background: #f0fdf4;
}

html[theme='light'] kbd,
html[theme='light'] .shortcut-item kbd,
html[theme='paper'] kbd,
html[theme='paper'] .shortcut-item kbd {
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #cbd5e1;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

/* Board Bar & Navigation Filters */
html[theme='light'] .board-bar,
html[theme='paper'] .board-bar {
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
}

html[theme='light'] .board-chip,
html[theme='paper'] .board-chip {
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #e2e8f0;
}

html[theme='light'] .board-chip:hover,
html[theme='paper'] .board-chip:hover {
  background: #e2e8f0;
  color: #0f172a;
}

html[theme='light'] .board-chip.active,
html[theme='paper'] .board-chip.active {
  background: #0070f3;
  color: #ffffff;
  border-color: #0070f3;
}

/* Post Cards, Boards & Halls */
html[theme='light'] div.posts > a,
html[theme='paper'] div.posts > a {
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  border-radius: 6px;
}

html[theme='light'] div.posts > a:hover,
html[theme='paper'] div.posts > a:hover {
  border-color: #cbd5e1;
  box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.1);
}

html[theme='light'] div.posts > a::after,
html[theme='paper'] div.posts > a::after {
  background: rgba(255, 255, 255, 0.92);
  color: #0f172a;
  border-top: 1px solid #e2e8f0;
  text-shadow: none;
}

html[theme='light'] .board-card,
html[theme='light'] .hall-card,
html[theme='light'] .user-hall-card,
html[theme='light'] .subscription-card,
html[theme='paper'] .board-card,
html[theme='paper'] .hall-card,
html[theme='paper'] .user-hall-card,
html[theme='paper'] .subscription-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #1e293b;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

html[theme='light'] .board-card:hover,
html[theme='light'] .hall-card:hover,
html[theme='paper'] .board-card:hover,
html[theme='paper'] .hall-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.1);
}

html[theme='light'] ._204863,
html[theme='paper'] ._204863 {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  color: #0f172a;
}

html[theme='light'] ._204863 a,
html[theme='light'] ._204863 span,
html[theme='paper'] ._204863 a,
html[theme='paper'] ._204863 span {
  color: #0f172a;
}

html[theme='light'] .item-main-content .media-object,
html[theme='paper'] .item-main-content .media-object {
  background: #0f172a;
}

html[theme='light'] .metadata,
html[theme='paper'] .metadata {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #1e293b;
}

html[theme='light'] .metadata table td,
html[theme='light'] .metadata table th,
html[theme='paper'] .metadata table td,
html[theme='paper'] .metadata table th {
  color: #334155;
  border-color: #e2e8f0;
}

/* Icons & GapRight - aligned with .input-actions button */
html[theme='light'] .gapRight i.iconset,
html[theme='light'] .gapRight svg.iconset,
html[theme='light'] .gapRight > .iconset,
html[theme='light'] .gapRight button,
html[theme='paper'] .gapRight i.iconset,
html[theme='paper'] .gapRight svg.iconset,
html[theme='paper'] .gapRight > .iconset,
html[theme='paper'] .gapRight button,
[theme='light'] .gapRight i.iconset,
[theme='light'] .gapRight svg.iconset,
[theme='light'] .gapRight > .iconset,
[theme='light'] .gapRight button,
[theme='paper'] .gapRight i.iconset,
[theme='paper'] .gapRight svg.iconset,
[theme='paper'] .gapRight > .iconset,
[theme='paper'] .gapRight button {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 3px !important;
  color: #334155 !important;
  fill: #334155 !important;
}

html[theme='light'] .gapRight i.iconset:hover,
html[theme='light'] .gapRight svg.iconset:hover,
html[theme='light'] .gapRight > .iconset:hover,
html[theme='light'] .gapRight button:hover,
html[theme='paper'] .gapRight i.iconset:hover,
html[theme='paper'] .gapRight svg.iconset:hover,
html[theme='paper'] .gapRight > .iconset:hover,
html[theme='paper'] .gapRight button:hover,
[theme='light'] .gapRight i.iconset:hover,
[theme='light'] .gapRight svg.iconset:hover,
[theme='light'] .gapRight > .iconset:hover,
[theme='light'] .gapRight button:hover,
[theme='paper'] .gapRight i.iconset:hover,
[theme='paper'] .gapRight svg.iconset:hover,
[theme='paper'] .gapRight > .iconset:hover,
[theme='paper'] .gapRight button:hover,
html[theme='light'] .gapRight i.iconset.active,
html[theme='light'] .gapRight svg.iconset.active,
html[theme='light'] .gapRight > .iconset.active,
html[theme='light'] .gapRight button.active,
html[theme='paper'] .gapRight i.iconset.active,
html[theme='paper'] .gapRight svg.iconset.active,
html[theme='paper'] .gapRight > .iconset.active,
html[theme='paper'] .gapRight button.active,
[theme='light'] .gapRight i.iconset.active,
[theme='light'] .gapRight svg.iconset.active,
[theme='light'] .gapRight > .iconset.active,
[theme='light'] .gapRight button.active,
[theme='paper'] .gapRight i.iconset.active,
[theme='paper'] .gapRight svg.iconset.active,
[theme='paper'] .gapRight > .iconset.active,
[theme='paper'] .gapRight button.active,
html[theme='light'] .gapRight i.iconset.is-active,
html[theme='light'] .gapRight svg.iconset.is-active,
html[theme='light'] .gapRight > .iconset.is-active,
html[theme='light'] .gapRight button.is-active,
html[theme='paper'] .gapRight i.iconset.is-active,
html[theme='paper'] .gapRight svg.iconset.is-active,
html[theme='paper'] .gapRight > .iconset.is-active,
html[theme='paper'] .gapRight button.is-active,
[theme='light'] .gapRight i.iconset.is-active,
[theme='light'] .gapRight svg.iconset.is-active,
[theme='light'] .gapRight > .iconset.is-active,
[theme='light'] .gapRight button.is-active,
[theme='paper'] .gapRight i.iconset.is-active,
[theme='paper'] .gapRight svg.iconset.is-active,
[theme='paper'] .gapRight > .iconset.is-active,
[theme='paper'] .gapRight button.is-active {
  background: #f1f5f9 !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  fill: var(--accent) !important;
}

html[theme='light'] .gapRight #a_favo.fa-solid,
html[theme='paper'] .gapRight #a_favo.fa-solid,
[theme='light'] .gapRight #a_favo.fa-solid,
[theme='paper'] .gapRight #a_favo.fa-solid {
  color: #e11d48 !important;
  fill: #e11d48 !important;
  border-color: rgba(225, 29, 72, 0.4) !important;
}

html[theme='light'] i.iconset#a_oc,
html[theme='paper'] i.iconset#a_oc {
  color: inherit !important;
}

/* a_addtag and tag controls */
html[theme='light'] #a_addtag,
html[theme='light'] .tag-btn,
html[theme='paper'] #a_addtag,
html[theme='paper'] .tag-btn {
  color: #000 !important;
  fill: #000 !important;
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
}

html[theme='light'] #a_addtag i,
html[theme='light'] .tag-btn i,
html[theme='paper'] #a_addtag i,
html[theme='paper'] .tag-btn i {
  color: #000 !important;
}

html[theme='light'] #a_addtag:hover,
html[theme='light'] .tag-btn:hover,
html[theme='paper'] #a_addtag:hover,
html[theme='paper'] .tag-btn:hover {
  background: #e2e8f0 !important;
  color: #000 !important;
}

html[theme='light'] #a_toggle.rating-btn,
html[theme='paper'] #a_toggle.rating-btn {
  border-color: #cbd5e1;
}

html[theme='light'] svg.iconset,
html[theme='paper'] svg.iconset {
  fill: #000;
  color: #000;
}

html[theme='light'] svg.iconset:hover,
html[theme='paper'] svg.iconset:hover {
  fill: #000;
  color: #000;
}

html[theme='light'] .iconset#a_delete,
html[theme='paper'] .iconset#a_delete {
  stroke: #dc2626;
}

html[theme='light'] a.removetag,
html[theme='paper'] a.removetag {
  color: #dc2626 !important;
}

html[theme='light'] .tag-pill,
html[theme='light'] .item-tag,
html[theme='paper'] .tag-pill,
html[theme='paper'] .item-tag {
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #e2e8f0;
}

html[theme='light'] a#next,
html[theme='light'] a#prev,
html[theme='paper'] a#next,
html[theme='paper'] a#prev {
  color: #334155 !important;
  -webkit-text-stroke: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

html[theme='light'] .item_title,
html[theme='light'] .item-title,
html[theme='paper'] .item_title,
html[theme='paper'] .item-title {
  color: #0f172a;
}

html[theme='light'] .user-infobox-block,
html[theme='paper'] .user-infobox-block {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #1e293b;
}

/* Video Player Controls */
html[theme='light'] .v0ck_player_controls,
html[theme='paper'] .v0ck_player_controls {
  background: rgba(255, 255, 255, 0.95);
  border-top: 1px solid #e2e8f0;
  color: #0f172a;
}

html[theme='light'] .v0ck_player_button svg,
html[theme='light'] .v0ck_player_controls svg,
html[theme='paper'] .v0ck_player_button svg,
html[theme='paper'] .v0ck_player_controls svg {
  fill: #334155;
  color: #334155;
}

html[theme='light'] .v0ck_player_button svg:hover,
html[theme='paper'] .v0ck_player_button svg:hover {
  fill: #0f172a;
  color: #0f172a;
}

html[theme='light'] .v0ck_progress,
html[theme='paper'] .v0ck_progress {
  background: #e2e8f0;
}

html[theme='light'] .v0ck_progress_filled,
html[theme='paper'] .v0ck_progress_filled {
  background: #0070f3;
}

/* Comments System */
html[theme='light'] #comments-container,
html[theme='light'] .comments-container,
html[theme='light'] .comments-wrap,
html[theme='paper'] #comments-container,
html[theme='paper'] .comments-container,
html[theme='paper'] .comments-wrap {
  background: #ffffff;
  border: 1px solid #e2e8f0;
}

html[theme='light'] .comment,
html[theme='paper'] .comment {
  background: #ffffff;
  border-bottom: 1px solid #f1f5f9;
  color: #1e293b;
}

html[theme='light'] .linear-view .comment,
html[theme='paper'] .linear-view .comment {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #1e293b;
}

html[theme='light'] .comment:hover,
html[theme='paper'] .comment:hover {
  background: #fafbfc;
}

html[theme='light'] .comment.op-comment,
html[theme='paper'] .comment.op-comment {
  background: #f0f9ff;
  border-left: 3px solid #0070f3;
}

html[theme='light'] .comment-author,
html[theme='paper'] .comment-author {
  color: #0f172a;
  font-weight: 700;
}

html[theme='light'] .comment-date,
html[theme='light'] .comment-meta,
html[theme='paper'] .comment-date,
html[theme='paper'] .comment-meta {
  color: #94a3b8;
}

html[theme='light'] .comment-body,
html[theme='paper'] .comment-body {
  color: #334155;
}

html[theme='light'] .comment-input textarea,
html[theme='paper'] .comment-input textarea {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #0f172a;
}

html[theme='light'] .comment-input textarea:focus,
html[theme='paper'] .comment-input textarea:focus {
  border-color: #0070f3;
  box-shadow: 0 0 0 3px rgba(0, 112, 243, 0.12);
}

html[theme='light'] .comment-reactions-bar .reaction-pill,
html[theme='paper'] .comment-reactions-bar .reaction-pill {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #334155;
}

html[theme='light'] .comment-reactions-bar .reaction-pill.reacted,
html[theme='paper'] .comment-reactions-bar .reaction-pill.reacted {
  background: #dbeafe;
  border-color: #93c5fd;
  color: #1d4ed8;
}

html[theme='light'] .comment-reactions-bar .reaction-add-btn,
html[theme='paper'] .comment-reactions-bar .reaction-add-btn {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #64748b;
}

html[theme='light'] .emoji-picker-dropdown,
html[theme='light'] .comment-reaction-picker,
html[theme='paper'] .emoji-picker-dropdown,
html[theme='paper'] .comment-reaction-picker {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12);
  color: #0f172a;
}

html[theme='light'] .comment-quote-ref,
html[theme='light'] .comment a.quote-link,
html[theme='paper'] .comment-quote-ref,
html[theme='paper'] .comment a.quote-link {
  color: #0070f3;
  background: #eff6ff;
  padding: 1px 4px;
  border-radius: 3px;
}

/* Sidebars & Activity */
html[theme='light'] .global-sidebar-right,
html[theme='light'] .item-sidebar-right,
html[theme='light'] .index-sidebar-right,
html[theme='paper'] .global-sidebar-right,
html[theme='paper'] .item-sidebar-right,
html[theme='paper'] .index-sidebar-right {
  background: #ffffff;
  border-left: 1px solid #e2e8f0;
  color: #1e293b;
}

html[theme='light'] #sidebar-activity-container,
html[theme='paper'] #sidebar-activity-container {
  background: #ffffff;
  color: #1e293b;
  border-color: #e2e8f0;
}

html[theme='light'] .sidebar-activity-header,
html[theme='light'] .sidebar-section-header,
html[theme='paper'] .sidebar-activity-header,
html[theme='paper'] .sidebar-section-header {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  color: #0f172a;
}

html[theme='light'] .sidebar-activity-item,
html[theme='paper'] .sidebar-activity-item {
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
}

html[theme='light'] .sidebar-activity-item:hover,
html[theme='paper'] .sidebar-activity-item:hover {
  background: #f8fafc;
}

html[theme='light'] .global-sidebar-right-footer,
html[theme='light'] .item-sidebar-right-footer,
html[theme='light'] .index-sidebar-right-footer,
html[theme='paper'] .global-sidebar-right-footer,
html[theme='paper'] .item-sidebar-right-footer,
html[theme='paper'] .index-sidebar-right-footer {
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  color: #64748b;
}

html[theme='light'] .global-sidebar-right-footer a,
html[theme='paper'] .global-sidebar-right-footer a {
  color: #64748b;
}

html[theme='light'] .global-sidebar-right-footer a:hover,
html[theme='paper'] .global-sidebar-right-footer a:hover {
  color: #0f172a;
}

/* Chat & Messages */
html[theme='light'] .gchat-online-inner,
html[theme='paper'] .gchat-online-inner {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}

html[theme='light'] .gchat-online-count,
html[theme='paper'] .gchat-online-count {
  color: #0f172a !important;
}

html[theme='light'] .gchat-messages,
html[theme='light'] .chat-container,
html[theme='paper'] .gchat-messages,
html[theme='paper'] .chat-container {
  background: #ffffff;
}

html[theme='light'] .gchat-msg,
html[theme='paper'] .gchat-msg {
  color: #1e293b;
}

html[theme='light'] .gchat-input-bar,
html[theme='paper'] .gchat-input-bar {
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
}

html[theme='light'] .dm-container,
html[theme='light'] .dm-conversations,
html[theme='light'] .dm-thread,
html[theme='paper'] .dm-container,
html[theme='paper'] .dm-conversations,
html[theme='paper'] .dm-thread {
  background: #ffffff;
  border: 1px solid #e2e8f0;
}

html[theme='light'] .dm-conv-item,
html[theme='paper'] .dm-conv-item {
  border-bottom: 1px solid #f1f5f9;
  color: #1e293b;
}

html[theme='light'] .dm-conv-item:hover,
html[theme='paper'] .dm-conv-item:hover {
  background: #f8fafc;
}

html[theme='light'] .dm-conv-item.active,
html[theme='paper'] .dm-conv-item.active {
  background: #eff6ff;
}

html[theme='light'] .dm-bubble-in,
html[theme='paper'] .dm-bubble-in {
  background: #f1f5f9;
  color: #1e293b;
}

html[theme='light'] .dm-bubble-out,
html[theme='paper'] .dm-bubble-out {
  background: #0070f3;
  color: #ffffff;
}

/* Forms, Inputs & Controls */
html[theme='light'] input,
html[theme='light'] textarea,
html[theme='light'] select,
html[theme='paper'] input,
html[theme='paper'] textarea,
html[theme='paper'] select {
  background: #ffffff;
  color: #0f172a;
  border: 1px solid #cbd5e1;
}

html[theme='light'] input:focus,
html[theme='light'] textarea:focus,
html[theme='light'] select:focus,
html[theme='paper'] input:focus,
html[theme='paper'] textarea:focus,
html[theme='paper'] select:focus {
  border-color: #0070f3;
  box-shadow: 0 0 0 3px rgba(0, 112, 243, 0.12);
}

html[theme='light'] input::placeholder,
html[theme='light'] textarea::placeholder,
html[theme='paper'] input::placeholder,
html[theme='paper'] textarea::placeholder {
  color: #94a3b8;
}

html[theme='light'] button,
html[theme='light'] .btn,
html[theme='paper'] button,
html[theme='paper'] .btn {
}

html[theme='light'] button:hover,
html[theme='light'] .btn:hover,
html[theme='paper'] button:hover,
html[theme='paper'] .btn:hover {
  background: #f1f5f9;
  color: #0f172a;
}

html[theme='light'] .btn-primary,
html[theme='paper'] .btn-primary {
  background: #0070f3;
  color: #ffffff;
  border-color: #0070f3;
}

html[theme='light'] .btn-primary:hover,
html[theme='paper'] .btn-primary:hover {
  background: #005bb5;
  color: #ffffff;
}

html[theme='light'] .login-form,
html[theme='paper'] .login-form {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #1e293b;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08);
}

html[theme='light'] .login-form input,
html[theme='paper'] .login-form input {
  color: #0f172a;
}

html[theme='light'] .login-form button[type="submit"],
html[theme='paper'] .login-form button[type="submit"] {
  background: #0070f3;
  color: #ffffff;
  border: none;
}

/* Badges */
html[theme='light'] .badge,
html[theme='paper'] .badge {
  color: #334155;
  background: #f1f5f9;
}

html[theme='light'] .badge-dark,
html[theme='paper'] .badge-dark {
  background: #f1f5f9;
  color: #334155;
}

html[theme='light'] .badge-light,
html[theme='paper'] .badge-light {
  background: #ffffff;
  color: #0f172a;
}

html[theme='light'] .badge-sfw,
html[theme='paper'] .badge-sfw {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

html[theme='light'] .badge-nsfw,
html[theme='paper'] .badge-nsfw {
  background: #fce7f3;
  color: #be185d;
  border: 1px solid #fbcfe8;
}

html[theme='light'] .badge-nsfl,
html[theme='paper'] .badge-nsfl {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

/* Modals & Dialogs */
html[theme='light'] .modal-overlay,
html[theme='paper'] .modal-overlay {
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(8px);
}

html[theme='light'] .modal-content,
html[theme='light'] .infobox-modal-content,
html[theme='light'] .f0ck-modal-content,
html[theme='light'] .upload-modal-content,
html[theme='paper'] .modal-content,
html[theme='paper'] .infobox-modal-content,
html[theme='paper'] .f0ck-modal-content,
html[theme='paper'] .upload-modal-content {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
}

html[theme='light'] .modal-header,
html[theme='light'] .infobox-modal-header,
html[theme='paper'] .modal-header,
html[theme='paper'] .infobox-modal-header {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

html[theme='light'] .infobox-card,
html[theme='paper'] .infobox-card {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

html[theme='light'] .infobox-card:hover,
html[theme='paper'] .infobox-card:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

html[theme='light'] .infobox-card-value,
html[theme='paper'] .infobox-card-value {
  color: #0f172a !important;
}

html[theme='light'] .infobox-card-label,
html[theme='paper'] .infobox-card-label {
  color: #64748b !important;
}

html[theme='light'] .info-title-input,
html[theme='paper'] .info-title-input {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

html[theme='light'] .infobox-modal-body::-webkit-scrollbar-track,
html[theme='paper'] .infobox-modal-body::-webkit-scrollbar-track {
  background: #f1f5f9;
}

html[theme='light'] .infobox-modal-body::-webkit-scrollbar-thumb,
html[theme='paper'] .infobox-modal-body::-webkit-scrollbar-thumb {
  background: #cbd5e1;
}

/* Settings Page */
html[theme='light'] .preferences-settings-wrapper fieldset,
html[theme='light'] .settings-section,
html[theme='paper'] .preferences-settings-wrapper fieldset,
html[theme='paper'] .settings-section {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #1e293b;
}

html[theme='light'] .preferences-settings-wrapper legend,
html[theme='paper'] .preferences-settings-wrapper legend {
  color: #0f172a;
}

html[theme='light'] #settings-quicknav,
html[theme='paper'] #settings-quicknav {
  background: #ffffff;
  border: 1px solid #e2e8f0;
}

html[theme='light'] #settings-quicknav a,
html[theme='paper'] #settings-quicknav a {
  color: #64748b;
}

html[theme='light'] #settings-quicknav a:hover,
html[theme='light'] #settings-quicknav a.active,
html[theme='paper'] #settings-quicknav a:hover,
html[theme='paper'] #settings-quicknav a.active {
  color: #0070f3 !important;
  background: #eff6ff;
}

/* User Profile & Tables */
html[theme='light'] .profile_head,
html[theme='paper'] .profile_head {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #1e293b;
}

html[theme='light'] .profile_head_user_stats > *,
html[theme='paper'] .profile_head_user_stats > * {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #0f172a;
  box-shadow: none;
}

html[theme='light'] table.table,
html[theme='paper'] table.table {
  background: #ffffff;
  color: #1e293b;
  border: 1px solid #e2e8f0;
}

html[theme='light'] table.table thead th,
html[theme='paper'] table.table thead th {
  background: #f8fafc;
  color: #475569;
  border-bottom: 2px solid #e2e8f0;
}

html[theme='light'] table.table tbody tr:nth-of-type(2n+1),
html[theme='paper'] table.table tbody tr:nth-of-type(2n+1) {
  background: #ffffff;
  color: #1e293b !important;
}

html[theme='light'] table.table tbody tr:nth-of-type(2n),
html[theme='paper'] table.table tbody tr:nth-of-type(2n) {
  background: #f8fafc;
  color: #1e293b !important;
}

html[theme='light'] table.table tbody tr:nth-of-type(2n+1) a,
html[theme='light'] table.table a,
html[theme='paper'] table.table tbody tr:nth-of-type(2n+1) a,
html[theme='paper'] table.table a {
  color: #0284c7 !important;
  text-decoration: none;
}

html[theme='light'] table.table tbody tr:nth-of-type(2n+1) a:hover,
html[theme='light'] table.table a:hover,
html[theme='paper'] table.table tbody tr:nth-of-type(2n+1) a:hover,
html[theme='paper'] table.table a:hover {
  text-decoration: underline;
}

html[theme='light'] table.table td,
html[theme='paper'] table.table td {
  border-top: 1px solid #e2e8f0;
  color: #334155;
}

/* Pagination */
html[theme='light'] .pagination > a,
html[theme='light'] .pagination > span,
html[theme='paper'] .pagination > a,
html[theme='paper'] .pagination > span {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #334155;
  border-radius: 4px;
}

html[theme='light'] .pagination > a:hover,
html[theme='paper'] .pagination > a:hover {
  background: #f1f5f9;
  color: #0f172a;
}

html[theme='light'] .pagination > span,
html[theme='paper'] .pagination > span {
  color: #0070f3;
  font-weight: bold;
  background: #eff6ff;
  border-color: #bfdbfe;
}

/* Static Pages (About, Rules, Terms) */
html[theme='light'] .about,
html[theme='light'] .rules-wrap,
html[theme='light'] .terms-wrap,
html[theme='paper'] .about,
html[theme='paper'] .rules-wrap,
html[theme='paper'] .terms-wrap {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #1e293b;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Upload Page */
html[theme='light'] .upload-container,
html[theme='light'] .upload-form,
html[theme='paper'] .upload-container,
html[theme='paper'] .upload-form {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #1e293b;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

html[theme='light'] .upload-dropzone,
html[theme='light'] .drop-zone,
html[theme='paper'] .upload-dropzone,
html[theme='paper'] .drop-zone {
  background: #f8fafc;
  border: 2px dashed #cbd5e1;
  color: #64748b;
}

html[theme='light'] .upload-dropzone:hover,
html[theme='light'] .drop-zone:hover,
html[theme='paper'] .upload-dropzone:hover,
html[theme='paper'] .drop-zone:hover {
  background: #eff6ff;
  border-color: #0070f3;
  color: #0070f3;
}

html[theme='light'] .limit-remaining,
html[theme='paper'] .limit-remaining {
  color: #64748b;
}

html[theme="atmos"] {
  --accent: #1fb2b0;
  --accent-rgb: 31, 178, 176;
  --bg: #111;
  --black: #000;
  --white: #fff;
  --gray: #262626;
  --nav-bg: rgb(32, 32, 32);
  --nav-brand-border: inset 1px #242424;
  --nav-brand-bg: #171717;
  --navigation-links-bg: rgb(32, 32, 32);
  --navigation-links-background-linear-gradient: rgba(0, 0, 0, .12), rgba(0, 0, 0, 0);
  --navigation-links-border-color: rgba(0, 0, 0, .8) rgba(0, 0, 0, .65) rgba(0, 0, 0, .5);
  --navigation-links-box-shadow: rgba(255, 255, 255, .05);
  --nav-link-background-linear-gradient: rgba(255, 255, 255, .04), rgba(255, 255, 255, 0);
  --nav-link-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 0px rgba(255, 255, 255, .04), inset 0 0px rgba(0, 0, 0, .15), 0 0px 0px rgba(0, 0, 0, .1);
  --nav-link-hover-bg: #333;
  --nav-border-color: rgba(255, 255, 255, .05);
  --dropdown-bg: #232323;
  --dropdown-item-hover: #0d0d0d;
  --nav-brand-font: 'VCR';
  --font: monospace;
  --pagination-background: rgb(32, 32, 32);
  --pagination-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 0px rgba(255, 255, 255, .04), inset 0 0px rgba(0, 0, 0, .15), 0 0px 0px rgba(0, 0, 0, .1);
  --pagination-anchor-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 1px rgba(255, 255, 255, .04), inset 0 -1px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .1);
  --pagination-background-hover: #333;
  --pagination-border-color: rgba(0, 0, 0, .8) rgba(0, 0, 0, .65) rgba(0, 0, 0, .5);
  --metadata-bg: rgba(34, 34, 34, 0.8);
  --badge-bg: #131313;
  --posts-meta-bg: #000000b8;
  --badge-sfw: #68a728;
  --badge-nsfw: #a72828;
  --badge-nsfl: #660000;
  --badge-tag: #353535;
  --scrollbar-color: #555;
  --footbar-color: #1fb2b0;
  --loading-indicator-color: #1fb2b0;
  --img-border-width: 0;
  --img-border-color: #363636;
  --maximize_button: #1fb2b0;
  --bg-gradient: linear-gradient(0deg, rgba(0, 0, 0, 0.94) 0%, rgb(6, 6, 6) 10%, rgb(43, 43, 43) 100%);
  /* appearance */
  background: black;
  --motd-bg: #111;
  --comment-bg: #202020;
}

html[theme="atmos"] .pagination>a,
.pagination>span {
  border-radius: 3px;
  border: 1px solid var(--black);
}

html[theme="atmos"] .pagination>span {
  border-radius: 3px;
}

html[theme="term"] {
  --accent: #00DF00;
  --accent-rgb: 0, 223, 0;
  --bg: #000;
  --black: #000;
  --white: #fff;
  --gray: #262626;
  --nav-bg: #040404;
  --nav-brand-border: inset 1px #111111;
  --nav-brand-bg: #040404;
  --navigation-links-bg: #040404;
  --navigation-links-background-linear-gradient: rgba(0, 0, 0, .12), rgba(0, 0, 0, 0);
  --navigation-links-border-color: rgba(0, 0, 0, .8) rgba(0, 0, 0, .65) rgba(0, 0, 0, .5);
  --navigation-links-box-shadow: rgba(255, 255, 255, .05);
  --nav-link-background-linear-gradient: rgba(255, 255, 255, .04), rgba(255, 255, 255, 0);
  --nav-link-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 0px rgba(255, 255, 255, .04), inset 0 0px rgba(0, 0, 0, .15), 0 0px 0px rgba(0, 0, 0, .1);
  --nav-link-hover-bg: #282828;
  --nav-border-color: rgba(255, 255, 255, .05);
  --dropdown-bg: #040404;
  --dropdown-item-hover: #282828;
  --nav-brand-font: 'VCR';
  --font: monospace;
  --pagination-background: #040404;
  --pagination-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 0px rgba(255, 255, 255, .04), inset 0 0px rgba(0, 0, 0, .15), 0 0px 0px rgba(0, 0, 0, .1);
  --pagination-anchor-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 1px rgba(255, 255, 255, .04), inset 0 -1px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .1);
  --pagination-background-hover: #282828;
  --pagination-border-color: rgba(0, 0, 0, .8) rgba(0, 0, 0, .65) rgba(0, 0, 0, .5);
  --metadata-bg: #000;
  --badge-bg: #060606;
  --posts-meta-bg: #000000b8;
  --badge-sfw: #076a19;
  --badge-nsfw: #E10DC3;
  --badge-nsfl: #660000;
  --badge-tag: #131212;
  --scrollbar-color: #555;
  --scroller-bg: #424242;
  --tooltip-bg: #131212;
  --footbar-color: #00DF00;
  --loading-indicator-color: #00DF00;
  --img-border-width: 0;
  --img-border-color: #363636;
  --maximize_button: #00DF00;
  --bg-gradient: linear-gradient(0deg, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 10%, rgb(0, 0, 0) 100%);
  /* appearance */
  background: black;
  --comment-bg: black;
}

html[theme="term"] .pagination>a,
.pagination>span {
  border-radius: 3px;
  border: 1px solid var(--black);
}

html[theme="term"] .pagination>span {
  border-radius: 3px;
}

html[theme="term"] span#favs {
  box-shadow: var(--pagination-anchor-box-shadow);
  background-image: linear-gradient(to bottom, var(--nav-link-background-linear-gradient));
}

html[theme="term"] .metadata {
  text-shadow: 0px 0px 1px var(--accent), 1px 0px 2px var(--accent), 0px 0px 5px var(--black);
}

html[theme="term"] .metadata>.badge-dark,
#themeselector {
  box-shadow: var(--pagination-anchor-box-shadow);
  background-image: linear-gradient(to bottom, var(--nav-link-background-linear-gradient));
}

html[theme="term"] .navbar-brand:hover {
  background: #0a2008;
}

html[theme="iced"] {
  --accent: #0084ff;
  --accent-rgb: 0, 132, 255;
  --bg: #031c35;
  --black: #000;
  --white: #fff;
  --gray: rgba(255, 255, 255, .05);
  --nav-bg: #111d37;
  --nav-brand-border: inset 1px #242424;
  --nav-brand-bg: #000;
  --navigation-links-bg: #111d37;
  --navigation-links-background-linear-gradient: rgba(0, 0, 0, .12), rgba(0, 0, 0, 0);
  --navigation-links-border-color: rgba(0, 0, 0, .8) rgba(0, 0, 0, .65) rgba(0, 0, 0, .5);
  --navigation-links-box-shadow: rgba(255, 255, 255, .05);
  --nav-link-background-linear-gradient: rgba(255, 255, 255, .04), rgba(255, 255, 255, 0);
  --nav-link-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 0px rgba(255, 255, 255, .04), inset 0 0px rgba(0, 0, 0, .15), 0 0px 0px rgba(0, 0, 0, .1);
  --nav-link-hover-bg: #0a3f53;
  --nav-border-color: rgba(255, 255, 255, .05);
  --dropdown-bg: #111d37;
  --dropdown-item-hover: #0a3f53;
  --nav-brand-font: 'VCR';
  --font: monospace;
  --pagination-background: #111d37;
  --pagination-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 0px rgba(255, 255, 255, .04), inset 0 0px rgba(0, 0, 0, .15), 0 0px 0px rgba(0, 0, 0, .1);
  --pagination-anchor-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 1px rgba(255, 255, 255, .04), inset 0 -1px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .1);
  --pagination-background-hover: #0a3f53;
  --pagination-border-color: rgba(0, 0, 0, .8) rgba(0, 0, 0, .65) rgba(0, 0, 0, .5);
  --metadata-bg: #000e1a;
  --badge-bg: #091f39;
  --posts-meta-bg: #000000b8;
  --badge-sfw: #07866e;
  --badge-nsfw: #E10DC3;
  --badge-nsfl: #660000;
  --badge-tag: #22083c;
  --scrollbar-color: #555;
  --scroller-bg: #424242;
  --tooltip-bg: #0a3f53;
  --footbar-color: #0084ff;
  --loading-indicator-color: #0084ff;
  --img-border-width: 0;
  --img-border-color: #363636;
  --maximize_button: #0084ff;
  --bg-gradient: linear-gradient(0deg, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 10%, #062631 100%);
  /* appearance */
  background: black;
  --comment-bg: black;
}

html[theme="iced"] ._204863 {
  background: -webkit-linear-gradient(left, #102c5e, #111d37);
}

html[theme="iced"] svg.iconset {
  background: #111d37;
}

html[theme="iced"] svg.iconset#subscribe-btn {
  background: #111d37;
}

html[theme="iced"] svg.iconset:hover {
  background: #1b2f5a;
}

html[theme="iced"] .pagination>a,
.pagination>span {
  border-radius: 3px;
  border: 1px solid var(--black);
}

html[theme="iced"] .pagination>span {
  border-radius: 3px;
}

html[theme="iced"] .navbar-brand:hover {
  background: #1d2941;
}

/* f0ck95 */
html[theme='f0ck95'] {
  --accent: silver;
  --accent-rgb: 192, 192, 192;
  --bg: teal;
  --black: #000;
  --white: #fff;
  --gray: rgba(255, 255, 255, .05);
  ;
  --nav-bg: silver;
  --nav-brand-border: inset 1px black;
  --nav-brand-bg: silver;
  --navigation-links-bg: silver;
  --navigation-links-background-linear-gradient: rgba(0, 0, 0, .12), rgba(0, 0, 0, 0);
  --navigation-links-border-color: rgba(0, 0, 0, .8) rgba(0, 0, 0, .65) rgba(0, 0, 0, .5);
  --navigation-links-box-shadow: rgba(255, 255, 255, .05);
  --nav-link-background-linear-gradient: rgba(255, 255, 255, .04), rgba(255, 255, 255, 0);
  --nav-link-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 0px rgba(255, 255, 255, .04), inset 0 0px rgba(0, 0, 0, .15), 0 0px 0px rgba(0, 0, 0, .1);
  --nav-link-hover-bg: #8a8989;
  --nav-border-color: #282727;
  --dropdown-bg: silver;
  --dropdown-item-hover: #8a8989;
  --nav-brand-font: 'VCR';
  --font: monospace;
  --pagination-background: silver;
  --pagination-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 0px rgba(255, 255, 255, .04), inset 0 0px rgba(0, 0, 0, .15), 0 0px 0px rgba(0, 0, 0, .1);
  --pagination-anchor-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 1px rgba(255, 255, 255, .04), inset 0 -1px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .1);
  --pagination-background-hover: #8a8989;
  --pagination-border-color: rgba(0, 0, 0, .8) rgba(0, 0, 0, .65) rgba(0, 0, 0, .5);
  --metadata-bg: silver;
  --badge-bg: #a8a5a5;
  --posts-meta-bg: #000000b8;
  --badge-sfw: #339f72;
  --badge-nsfw: #E10DC3;
  --badge-nsfl: #660000;
  --badge-tag: #959393;
  --scrollbar-color: #555;
  --scroller-bg: #424242;
  --footbar-color: #000;
  --loading-indicator-color: #000;
  --img-border-width: 0;
  --img-border-color: #808080;
  --maximize_button: #000;
  --bg-gradient: linear-gradient(0deg, rgba(0, 128, 128, 0.514), rgba(0, 0, 0, 0) 10%, rgba(0, 128, 128, 0.363) 100%);
  /* appearance */
  background: teal;
  --comment-bg: black;
}

html[theme="f0ck95"] html,
body {
  color: var(--black);
}

html[theme="f0ck95"] a {
  color: var(--black);
}

html[theme="f0ck95"] .embed-responsive-image {
  border: none;
}

html[theme="f0ck95"] .nav-link,
.pagination>a,
.pagination>span {
  border-radius: 0;
  border-left: inset 1px silver;
  border-bottom: outset 1px silver;
  border-right: outset 1px silver;
  border-top: 1px outset gray;
  box-shadow: var(--pagination-anchor-box-shadow);
  background-image: linear-gradient(to bottom, var(--nav-link-background-linear-gradient));
}

html[theme="f0ck95"] .pagination>a:active,
.pagination>span {
  color: black;
}

html[theme="f0ck95"] .pagination>a,
.pagination>span {
  border-radius: 0;
  border-left: inset 1px silver;
  border-bottom: outset 1px silver;
  border-right: outset 1px silver;
  border-top: 1px outset gray;
}

html[theme="f0ck95"] .metadata {
  border-left: inset 2px silver;
  border-bottom: outset 2px silver;
  border-right: outset 2px silver;
  border-top: 2px outset #8c8888;
  color: var(--black);
}

html[theme="f0ck95"] .media-object {
  border-left: inset 2px silver;
  border-right: outset 2px silver;
}

html[theme="f0ck95"] .embed-responsive.embed-responsive-16by9 {
  background: black;
}

html[theme="f0ck95"] .embed-responsive-image {
  background: #0000;
}

html[theme="f0ck95"] span.placeholder {
  border-left: 1px solid var(--black);
}

html[theme="f0ck95"] #prev {
  color: white !important;
}

html[theme="f0ck95"] #next {
  color: white !important;
}

html[theme="4d"] {
  --accent: #f2ef0b;
  --accent-rgb: 242, 239, 11;
  --bg: #242424;
  --black: #000;
  --white: #fff;
  --gray: #262626;
  --nav-bg: #171717;
  --nav-brand-border: inset 1px #242424;
  --nav-brand-bg: #171717;
  --motd-bg: #252424;
  --navigation-links-bg: rgb(32, 32, 32);
  --navigation-links-background-linear-gradient: rgba(0, 0, 0, .12), rgba(0, 0, 0, 0);
  --navigation-links-border-color: rgba(0, 0, 0, .8) rgba(0, 0, 0, .65) rgba(0, 0, 0, .5);
  --navigation-links-box-shadow: rgba(255, 255, 255, .05);
  --nav-link-background-linear-gradient: rgba(255, 255, 255, .04), rgba(255, 255, 255, 0);
  --nav-link-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 0px rgba(255, 255, 255, .04), inset 0 0px rgba(0, 0, 0, .15), 0 0px 0px rgba(0, 0, 0, .1);
  --nav-link-hover-bg: #333;
  --nav-border-color: rgba(255, 255, 255, .05);
  --dropdown-bg: #232323;
  --dropdown-item-hover: #0d0d0d;
  --nav-brand-font: 'VCR';
  --font: monospace;
  --pagination-background: #171717;
  --pagination-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 0px rgba(255, 255, 255, .04), inset 0 0px rgba(0, 0, 0, .15), 0 0px 0px rgba(0, 0, 0, .1);
  --pagination-anchor-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 1px rgba(255, 255, 255, .04), inset 0 -1px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .1);
  --pagination-background-hover: #333;
  --pagination-border-color: rgba(0, 0, 0, .8) rgba(0, 0, 0, .65) rgba(0, 0, 0, .5);
  --metadata-bg: rgba(34, 34, 34, 0.8);
  --badge-bg: #131313;
  --posts-meta-bg: #000000b8;
  --badge-sfw: #68a728;
  --badge-nsfw: #E10DC3;
  --badge-nsfl: #660000;
  --badge-tag: #353535;
  --scrollbar-color: #555;
  --footbar-color: #1fb2b0;
  --loading-indicator-color: #1fb2b0;
  --img-border-width: 0;
  --img-border-color: #363636;
  --maximize_button: #1fb2b0;
  --bg-gradient: linear-gradient(0deg, rgba(0, 0, 0, 0.94) 0%, rgb(6, 6, 6) 10%, rgb(43, 43, 43) 100%);
  background: black;
  --comment-bg: #252424;
}

html[theme="4d"] #my-video {
  background: var(--black);
}

/* xd */

html[theme="xd"] {
  --accent: #17786a;
  --accent-rgb: 31, 178, 176;
  --bg: #0c0c0c;
  --black: #000;
  --white: #fff;
  --gray: #262626;
  --nav-bg: #101010;
  --nav-brand-border: inset 1px #242424;
  --nav-brand-bg: #171717;
  --motd-bg: #101010;
  --navigation-links-bg: rgb(32, 32, 32);
  --navigation-links-background-linear-gradient: rgba(0, 0, 0, .12), rgba(0, 0, 0, 0);
  --navigation-links-border-color: rgba(0, 0, 0, .8) rgba(0, 0, 0, .65) rgba(0, 0, 0, .5);
  --navigation-links-box-shadow: rgba(255, 255, 255, .05);
  --nav-link-background-linear-gradient: rgba(255, 255, 255, .04), rgba(255, 255, 255, 0);
  --nav-link-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 0px rgba(255, 255, 255, .04), inset 0 0px rgba(0, 0, 0, .15), 0 0px 0px rgba(0, 0, 0, .1);
  --nav-link-hover-bg: #333;
  --nav-border-color: #3b3b3c;
  --dropdown-bg: #232323;
  --dropdown-item-hover: #0d0d0d;
  --nav-brand-font: 'VCR';
  --font: monospace;
  --pagination-background: #171717;
  --pagination-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 0px rgba(255, 255, 255, .04), inset 0 0px rgba(0, 0, 0, .15), 0 0px 0px rgba(0, 0, 0, .1);
  --pagination-anchor-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 1px rgba(255, 255, 255, .04), inset 0 -1px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .1);
  --pagination-background-hover: #333;
  --pagination-border-color: rgba(0, 0, 0, .8) rgba(0, 0, 0, .65) rgba(0, 0, 0, .5);
  --metadata-bg: rgba(34, 34, 34, 0.8);
  --badge-bg: #131313;
  --posts-meta-bg: #000000b8;
  --badge-sfw: #68a728;
  --badge-nsfw: #E10DC3;
  --badge-nsfl: #660000;
  --badge-tag: #353535;
  --scrollbar-color: #555;
  --footbar-color: #1fb2b0;
  --loading-indicator-color: #1fb2b0;
  --img-border-width: 0;
  --img-border-color: #363636;
  --maximize_button: #1fb2b0;
  --bg-gradient: linear-gradient(0deg, rgba(0, 0, 0, 0.94) 0%, rgb(6, 6, 6) 10%, rgb(43, 43, 43) 100%);
  --comment-bg: #101010;
}

html[theme="xd"] .motd-container {
  border-top: 2px solid var(--nav-border-color);
  border-bottom: 1px solid var(--nav-border-color);
}

html[theme="xd"] .item-sidebar-right,
html[theme="xd"] .index-sidebar-right,
html[theme="xd"] .global-sidebar-right {
  background: #131313 !important;
  border-left: 2px solid var(--nav-border-color) !important;
}

html[theme="xd"] #my-video {
  background: var(--black);
}

/* f0ck95 - v2 (theme '95') */
html[theme='95'] {
  --accent: #000080;
  --accent-rgb: 0, 0, 128;
  --bg: #008080;
  --black: #000;
  --white: #fff;
  --gray: #808080;
  --silver: #c0c0c0;
  --nav-bg: #c0c0c0;
  --nav-brand-border: outset 2px #dfdfdf;
  --nav-brand-bg: #c0c0c0;
  --navigation-links-bg: #c0c0c0;
  --navigation-links-background-linear-gradient: none;
  --navigation-links-border-color: #dfdfdf #808080 #808080 #dfdfdf;
  --navigation-links-box-shadow: none;
  --nav-link-background-linear-gradient: none;
  --nav-link-box-shadow: none;
  --nav-link-hover-bg: #000080;
  --nav-border-color: #808080;
  --dropdown-bg: #c0c0c0;
  --dropdown-item-hover: #000080;
  --nav-brand-font: 'Tahoma', 'MS Sans Serif', sans-serif;
  --font: 'Tahoma', 'MS Sans Serif', sans-serif;
  --pagination-background: #c0c0c0;
  --pagination-box-shadow: none;
  --pagination-anchor-box-shadow: none;
  --pagination-background-hover: #000080;
  --pagination-border-color: #808080;
  --metadata-bg: #c0c0c0;
  --badge-bg: #c0c0c0;
  --posts-meta-bg: #c0c0c0cc;
  --badge-sfw: #008000;
  --badge-nsfw: #800000;
  --badge-nsfl: #000;
  --badge-tag: #808080;
  --scrollbar-color: #c0c0c0;
  --scroller-bg: #008080;
  --footbar-color: #000;
  --loading-indicator-color: #000080;
  --img-border-width: 2px;
  --img-border-color: #808080;
  --maximize_button: #000;
  --bg-gradient: none;
  background: #008080;
  --comment-bg: black;
}

html[theme='95'] body {
  color: #000;
  background: var(--bg);
}

html[theme='95'] a {
  color: #0000ee;
}

html[theme='95'] a:hover {
  text-decoration: underline;
}

html[theme='95'] .navbar {
  border-bottom: 2px outset #dfdfdf;
  background: #c0c0c0;
}

html[theme='95'] .navbar-brand {
  background: #000080;
  color: #fff !important;
  padding: 2px 10px;
  font-family: var(--nav-brand-font);
  box-shadow: inset 1px 1px #dfdfdf, inset -1px -1px #808080;
}

html[theme='95'] .nav-link,
html[theme='95'] .pagination>a,
html[theme='95'] .pagination>span,
html[theme='95'] button,
html[theme='95'] .btn {
  border: 2px outset #dfdfdf !important;
  background: #c0c0c0 !important;
  color: #000 !important;
  padding: 4px 8px !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

html[theme='95'] .nav-link:hover,
html[theme='95'] .pagination>a:hover,
html[theme='95'] button:hover,
html[theme='95'] .btn:hover {
  background: #c0c0c0 !important;
}

html[theme='95'] .nav-link:active,
html[theme='95'] .pagination>a:active,
html[theme='95'] button:active,
html[theme='95'] .btn:active {
  border: 2px inset #dfdfdf !important;
}

html[theme='95'] .dropdown-menu {
  background: #c0c0c0;
  border: 2px outset #dfdfdf;
  border-radius: 0;
}

html[theme='95'] .dropdown-item {
  color: #000;
}

html[theme='95'] .dropdown-item:hover {
  background: #000080;
  color: #fff;
}

html[theme='95'] .metadata,
html[theme='95'] .comment,
html[theme='95'] .login-form,
html[theme='95'] .user-infobox-block {
  border: 2px inset #dfdfdf !important;
  background-color: #c0c0c0 !important;
  color: #000 !important;
  padding: 10px !important;
  border-radius: 0 !important;
}

html[theme='95'] input,
html[theme='95'] textarea,
html[theme='95'] select {
  border: 2px inset #dfdfdf !important;
  background: #fff !important;
  color: #000 !important;
  border-radius: 0 !important;
  padding: 2px 4px !important;
}

html[theme='95'] .badge {
  border-radius: 0 !important;
  border: 1px solid #000 !important;
}

html[theme='95'] .posts>a {
  border: 2px outset #dfdfdf !important;
  background: #c0c0c0 !important;
}

html[theme='95'] .v0ck_player_controls {
  background: #c0c0c0 !important;
  border-top: 2px outset #dfdfdf !important;
  padding: 2px !important;
  display: flex !important;
  align-items: center !important;
}

html[theme='95'] .v0ck_player_button {
  background: #c0c0c0 !important;
  border: 2px outset #dfdfdf !important;
  border-radius: 0 !important;
  margin: 0 2px !important;
  padding: 2px !important;
}

html[theme='95'] .v0ck_player_button:active {
  border: 2px inset #dfdfdf !important;
}

html[theme='95'] .v0ck_player_button svg,
html[theme='95'] .v0ck_player_controls svg {
  fill: #000 !important;
  color: #000 !important;
}

html[theme='95'] .v0ck_progress {
  background: #fff !important;
  border: 2px inset #dfdfdf !important;
  height: 14px !important;
  border-radius: 0 !important;
}

html[theme='95'] .v0ck_progress_filled {
  background: #000080 !important;
}

html[theme='95'] .about {
  color: #000;
}

html[theme='95'] .gchat-online-inner {
  background: #c0c0c0 !important;
  border-bottom: 2px outset #dfdfdf !important;
  color: #000 !important;
}

html[theme='95'] .gchat-online-count {
  color: #000 !important;
}

html[theme='95'] .global-sidebar-right-footer,
html[theme='95'] .item-sidebar-right-footer,
html[theme='95'] .index-sidebar-right-footer {
  background: #c0c0c0 !important;
  border-top: 2px outset #dfdfdf !important;
  color: #000 !important;
}

html[theme='95'] .global-sidebar-right-footer>a {
  border-right: 2px outset #dfdfdf !important;
  color: #000 !important;
  opacity: 1 !important;
}

html[theme='95'] #sidebar-activity-container {
  background: #fff !important;
  border: 2px inset #dfdfdf !important;
  color: #000 !important;
}

html[theme='95'] .linear-view .comment {
  border: 2px inset #dfdfdf !important;
  background: #fff !important;
  margin-bottom: 8px !important;
  color: #000 !important;
}

html[theme='95'] .sidebar-activity-header {
  background: #000080 !important;
  color: #fff !important;
  padding: 4px 10px !important;
  border-bottom: 2px outset #dfdfdf !important;
}

html[theme='95'] #comments-container {
  background: #fff !important;
  border: 2px inset #dfdfdf !important;
  color: #000 !important;
}

html[theme='95'] .item-main-content {
  background: transparent !important;
  border: none !important;
  padding: 20px !important;
}

html[theme='95'] .item-main-content ._204863 {
  background: linear-gradient(90deg, #000080, #1084d0) !important;
  color: #fff !important;
  font-family: var(--font) !important;
  font-weight: bold !important;
  font-size: 13px !important;
  padding: 2px 4px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin: 0 !important;
  width: 100% !important;
  height: 24px !important;
  border-top: 2px outset #dfdfdf !important;
  border-left: 2px outset #dfdfdf !important;
  border-right: 2px outset #dfdfdf !important;
  box-sizing: border-box !important;
}

html[theme='95'] .item-main-content ._204863::after {
  content: " _ ❐ ✕ ";
  font-family: 'Arial', sans-serif;
  font-size: 10px;
  background: #c0c0c0;
  color: #000;
  border: 2px outset #dfdfdf;
  padding: 0 4px;
  line-height: 14px;
  height: 16px;
  display: flex;
  align-items: center;
}

html[theme='95'] .item-main-content .content {
  background: #c0c0c0 !important;
  border-bottom: 2px outset #dfdfdf !important;
  border-left: 2px outset #dfdfdf !important;
  border-right: 2px outset #dfdfdf !important;
  padding: 4px !important;
  flex: none !important;
  display: flex !important;
  box-sizing: border-box !important;
}

html[theme='95'] .item-main-content .media-object {
  background: #000 !important;
  border: 2px inset #dfdfdf !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html[theme='95'] .item-main-content .metadata {
  border: 2px inset #dfdfdf !important;
  background: #c0c0c0 !important;
  padding: 10px !important;
  margin-top: 10px !important;
  color: #000 !important;
}

/* removing in favor of new appearance */
/* 

/* Notifications */
.nav-item-rel {
  position: relative;
  display: inline-block;
}

.notif-count {
  position: absolute;
  top: 0;
  right: -5px;
  background: var(--badge-nsfw);
  color: white;
  font-size: 10px;
  padding: 2px 2px;
  border-radius: 3px;
  line-height: 1;
  font-weight: bold;
}

.flash-error {
  color: #ff4444;
  text-align: center;
  margin-bottom: 10px;
  font-weight: bold;
}

.flash-success {
  color: #000;
  background: var(--accent);
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 10px;
  text-align: center;
  font-weight: bold;
}


.notif-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  background: var(--dropdown-bg);
  border: 1px solid var(--nav-border-color);
  z-index: 10000 !important;
}

/* Arrow caret pointing up toward the icon */
.notif-dropdown::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid var(--nav-border-color);
}

.notif-dropdown::after {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid var(--dropdown-bg);
}

.notif-dropdown.visible {
  display: block;
}

@media (max-width: 768px) {
  .notif-dropdown {
    position: fixed;
    transform: none;
    width: 320px;
    max-width: calc(100vw - 16px);
    margin-top: 0;
  }

  /* Hide arrow on mobile — bell position varies */
  .notif-dropdown::before,
  .notif-dropdown::after {
    display: none;
  }
}

.notif-header {
  padding: 8px 10px 6px;
  border-bottom: 1px solid var(--nav-border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--white);
  background: var(--nav-bg);
}

.notif-header button#mark-all-read {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 0.7rem;
  padding: 0;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Notification Tabs (dropdown) */
.notif-tabs {
  display: flex;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.notif-tab {
  background: none;
  border: none;
  color: #888;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 10px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.15s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  position: relative;
}

.notif-tab:hover {
  color: #ccc;
  background: rgba(255, 255, 255, 0.05);
}

.notif-tab.active {
  color: var(--accent);
  background: rgba(var(--accent-rgb, 31, 178, 176), 0.1);
}

.notif-tab-badge {
  display: inline-block;
  background: var(--badge-nsfw);
  color: #fff;
  font-size: 9px;
  min-width: 14px;
  height: 14px;
  line-height: 14px;
  text-align: center;
  border-radius: 7px;
  padding: 0 3px;
  margin-left: 3px;
  font-weight: 700;
  vertical-align: middle;
}

/* Notification Page Tabs */
.notif-page-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(0, 0, 0, 0.15);
  border-radius: 4px 4px 0 0;
  overflow: hidden;
}

.notif-page-tab {
  flex: 1;
  background: none;
  border: none;
  color: #888;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 10px 20px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.2s ease;
  border-bottom: 2px solid transparent;
  position: relative;
}

.notif-page-tab:hover {
  color: #ccc;
  background: rgba(255, 255, 255, 0.03);
}

.notif-page-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: rgba(var(--accent-rgb, 31, 178, 176), 0.05);
}

.notif-list {
  max-height: 300px;
  overflow-y: auto;
}

.notif-item {
  padding: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: var(--dropdown-bg);
  cursor: pointer;
  transition: background 0.2s;
  font-size: 0.85rem;
  color: var(--white);
  display: block;
  text-decoration: none;
}

.notif-item:hover {
  background: var(--dropdown-item-hover);
  text-decoration: none;
  color: var(--white);
}

.notif-item.unread {
  border-left: 3px solid var(--accent);
  background: rgba(255, 255, 255, 0.02);
}

.notif-item.notif-with-thumb {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.notif-with-thumb .notif-thumb {
  flex-shrink: 0;
  width: 70px;
  height: 70px;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.notif-with-thumb .notif-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s;
}

.notif-item:hover .notif-thumb img {
  transform: scale(1.1);
}

.notif-with-thumb .notif-content {
  flex: 1;
  min-width: 0;
}

.notif-with-thumb .notif-info {
  font-weight: bold;
  color: var(--accent);
  font-size: 0.9em;
  margin-bottom: 2px;
}

.notif-with-thumb .notif-msg {
  color: #ccc;
  font-size: 0.85em;
  line-height: 1.2;
}

.notif-time {
  font-size: 0.75rem;
  color: #888;
  margin-top: 3px;
  display: block;
}

.notif-expandable:hover .notif-reason-preview {
  text-decoration: underline;
  color: #ffcccc;
}

.notif-reason-full {
  animation: slideDown 0.2s ease-out;
}

.notif-empty {
  text-align: center;
  font-size: smaller;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.notif-fade-out {
  opacity: 0 !important;
  transform: translateX(20px);
  max-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  transition: all 0.3s ease-in-out;
  pointer-events: none;
  overflow: hidden;
}

@keyframes notif-pulse {
  0% {
    box-shadow: 0 0 0 0 var(--accent, #e91e63);
    background: rgba(233, 30, 99, .18);
  }

  50% {
    box-shadow: 0 0 0 6px rgba(233, 30, 99, .0);
    background: rgba(233, 30, 99, .1);
  }

  100% {
    box-shadow: none;
    background: transparent;
  }
}

.notif-highlight {
  animation: notif-pulse 1.2s ease-out 2;
  border-radius: 6px;
}



/* Base style for all right sidebars */
.item-sidebar-right,
.index-sidebar-right,
.global-sidebar-right {
  display: flex !important;
  flex-direction: column !important;
  position: fixed !important;
  top: var(--navbar-h, 50px) !important;
  bottom: 0 !important;
  right: 0;
  width: 300px;
  max-width: 85%;
  height: auto !important;
  max-height: none !important;
  background: var(--nav-bg);
  border-left: 1px solid var(--nav-border-color);
  z-index: 900 !important;
  /* below navbar dropdowns (1000+) but above page content */
  transition: right 0.3s ease-in-out, visibility 0.3s !important;
  overflow: visible !important;
  /* iOS Safari: allow vertical scroll but let JS handle horizontal swipe-to-close */
  touch-action: pan-y;
}

body.sidebar-right-hidden .global-sidebar-right {
  right: -300px !important;
}

body.layout-modern.sidebar-right-hidden .global-sidebar-right {
  right: -300px !important;
}

/* Modern layout: wider 400px sidebar */
/* no more lol xd */
body.layout-modern .item-sidebar-right,
body.layout-modern .index-sidebar-right,
body.layout-modern .global-sidebar-right {
  width: 300px;
}

/* Prevent native image drag from hijacking the sidebar mouse-drag gesture */
.global-sidebar-right img,
.item-sidebar-right img,
.index-sidebar-right img {

}

/* Edge zone drag handle — pill tucked into the zone's right edge, slides out a little on hover */
#sidebar-drag-zone {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  overflow: clip;
  top: var(--navbar-h, 50px) !important;
  /* Visibility lives on the pill (below): the strip can't be hovered anymore since it's click-through */
  opacity: 1;
  /* The strip itself is click-through (overrides the inline pointer-events JS sets), so it never blocks
     what's underneath, e.g. the page modal's close button. Only the pill below takes pointer events;
     events on a pseudo-element still target #sidebar-drag-zone, so the drag/click handlers keep working. */
  pointer-events: none !important;
}

#sidebar-drag-zone::after {
  content: '';
  display: block;
  flex-shrink: 0;
  width: 5px;
  height: 40px;
  border-radius: 2px;
  background: var(--accent, #888);
  pointer-events: auto;
  cursor: pointer;
  opacity: 0.45;
  transition: height 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}

body.sidebar-right-hidden #sidebar-drag-zone::after {
  opacity: 0.7;
}

/* Hovering the pill brightens and grows it — no lateral movement keeps the cursor stable */
#sidebar-drag-zone:hover::after {
  opacity: 1;
  height: 56px;
}

/* Touch devices: no hover, so the handle stays fully visible */
@media (pointer: coarse) {
  #sidebar-drag-zone::after {
    opacity: 0.7;
  }
}

/* Left sidebar edge zone drag handle — mirrors #sidebar-drag-zone */
#sidebar-left-drag-zone {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  top: var(--navbar-h, 50px) !important;
  padding-left: 10px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

#sidebar-left-drag-zone::after {
  content: '';
  display: block;
  width: 4px;
  height: 40px;
  border-radius: 2px;
  background: var(--accent, #888);
  transition: height 0.2s ease, opacity 0.2s ease;
}

#sidebar-left-drag-zone:hover {
  opacity: 1;
}

#sidebar-left-drag-zone:hover::after {
  height: 56px;
}

/* Always show the handle on touch devices (no hover state available) */
@media (pointer: coarse) {
  #sidebar-left-drag-zone {
    opacity: 0.7;
    justify-content: flex-start;
    padding-left: 6px;
  }
}

/* Ensure intermediate tablet screens also hide correctly */
@media (max-width: 1199px) {

  body.sidebar-right-hidden .item-sidebar-right,
  body.sidebar-right-hidden .index-sidebar-right,
  body.sidebar-right-hidden .global-sidebar-right {
    right: -100% !important;
    /* Fallback for variable width sidebars */
    right: -300px !important;
  }
}



/* ============================================================
   ITEM PAGE LAYOUTS — Desktop (min-width: 1000px)
   Two layouts, clearly scoped to body class.
   body.layout-modern = 3-column (guests + use_new_layout members)
   body.layout-legacy = 2-column scrolling (!use_new_layout members)
   ============================================================ */
@media (min-width: 1000px) {

  /* ----------------------------------------------------------
     LAYOUT: MODERN — 3-column viewport-locked grid
     ---------------------------------------------------------- */
  body.layout-modern .item-layout-container {
    display: grid;
    grid-template-columns: min(350px, 30vw) minmax(0, 1fr) 300px;
    grid-template-rows: auto;
    flex: 1;
    height: calc(100vh - var(--navbar-h, 50px));
    width: 100%;
    overflow: hidden;
    transition: grid-template-columns 0.3s ease;
  }

  /* Collapsed right sidebar — grid track shrinks to 0 */
  body.layout-modern.sidebar-right-hidden .item-layout-container {
    grid-template-columns: min(300px, 30vw) minmax(0, 1fr) 0px;
  }

  body.layout-modern .item-sidebar-left {
    grid-column: 1;
    height: calc(100vh - var(--navbar-h, 50px));
    position: sticky;
    top: var(--navbar-h, 50px);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    border-right: 1px solid var(--nav-border-color);
    z-index: 1;
    box-shadow: 5px 0 15px rgba(0, 0, 0, 0.5) !important;
  }

  body.layout-modern .item-layout-container .item-main-content {
    grid-column: 2;
    height: calc(100vh - var(--navbar-h, 50px));
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 20px;
    min-height: 0;
    min-width: 0;
    gap: 0;
  }

  /* Flex spacers: absorb remaining space to vertically center content when it fits,
     collapse to 0 when content overflows — so scrolling works naturally. */
  body.layout-modern .item-layout-container .item-main-content::before,
  body.layout-modern .item-layout-container .item-main-content::after {
    content: '';
    flex: 1 0 0px;
  }

  /* All direct children must not shrink so they keep their natural size and
     the container scrolls instead of compressing children. */
  body.layout-modern .item-layout-container .item-main-content > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 800px;
  }

  body.layout-modern .item-layout-container .item-main-content .metadata {
    overflow: visible;
  }

  body.layout-modern .item-layout-container .item-main-content span#favs {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 100%;
    margin: 5px 0 0 0;
    z-index: 10;
    border: none;
  }

  /* Sidebar toggle: hide left sidebar (e.g. keybind toggle) */
  body.layout-modern .item-layout-container.sidebar-hidden {
    grid-template-columns: 0px minmax(0, 1fr) 400px;
  }

  body.layout-modern.sidebar-right-hidden .item-layout-container.sidebar-hidden {
    grid-template-columns: 0px minmax(0, 1fr) 0px;
  }

  /* By the time sidebar-hidden is added (post-slide), content is already off-screen */
  body.layout-modern .item-layout-container.sidebar-hidden .item-sidebar-left {
    display: none;
  }

  body.layout-modern .item-layout-container.sidebar-hidden .item-main-content {
    grid-column: 2;
  }

  /* Body-level left-sidebar hide — set by blocking inline script before first paint
     to prevent the sidebar from flashing visible. Mirrors the .sidebar-hidden rules above
     but activates from the body class so it works before the container element exists. */
  body.layout-modern.sidebar-left-hidden .item-layout-container,
  body.layout-modern.comments-hidden .item-layout-container {
    grid-template-columns: 0px minmax(0, 1fr) 400px;
  }

  body.layout-modern.sidebar-left-hidden.sidebar-right-hidden .item-layout-container,
  body.layout-modern.comments-hidden.sidebar-right-hidden .item-layout-container {
    grid-template-columns: 0px minmax(0, 1fr) 0px;
  }

  body.layout-modern.sidebar-left-hidden .item-layout-container .item-sidebar-left,
  body.layout-modern.comments-hidden .item-layout-container .item-sidebar-left {
    display: none !important;
  }

  body.layout-modern.sidebar-left-hidden .item-layout-container .item-main-content,
  body.layout-modern.comments-hidden .item-layout-container .item-main-content {
    grid-column: 2;
  }

  body.layout-modern .item-sidebar-right,
  body.layout-modern .global-sidebar-right {
    grid-column: 3;
    /* Inheritance from universal .item-sidebar-right (fixed, right: 0) */
  }

  body.layout-modern.sidebar-right-hidden .item-sidebar-right,
  body.layout-modern.sidebar-right-hidden .global-sidebar-right {
    /* Inheritance from universal body.sidebar-right-hidden .item-sidebar-right (right: -300px) */
    min-width: 0;
  }

  /* Toggle tab button — positioned absolutely inside sidebar, pokes out left edge */
  .item-sidebar-left {
    position: relative;
  }

  /* Removed local sidebar and toggle overrides — now using universal rules */

  /* ----------------------------------------------------------
     LAYOUT: LEGACY — 2-column, natural page scroll
     Right sidebar is fixed to viewport.
     ---------------------------------------------------------- */
  body.layout-legacy .item-layout-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    height: auto !important;
    overflow: visible !important;
  }

  /* Same track count as the open state so the sidebar toggle can animate the columns (f0ckm.js) */
  body.layout-legacy.sidebar-right-hidden .item-layout-container {
    grid-template-columns: minmax(0, 1fr) 0px;
  }

  body.layout-legacy .item-layout-container .item-main-content {
    grid-column: 1;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    gap: 0;
    padding: 20px;
  }

  body.layout-legacy .item-layout-container .item-main-content ._204863 {
    align-self: center;
    width: 800px;
    max-width: 100%;
  }

  body.layout-legacy .item-layout-container .item-main-content .content {
    align-self: center;
    width: 800px;
    max-width: 100%;
  }

  body.layout-legacy .item-layout-container .item-main-content .metadata {
    align-self: center;
    width: 600px;
    max-width: 100%;
  }

  body.layout-legacy .item-layout-container .item-main-content .item_title,
  body.layout-legacy .item-layout-container .item-main-content .item-title {
    align-self: center;
    width: 800px;
    max-width: 100%;
  }

  body.layout-legacy .item-layout-container #comments-container {
    width: 600px;
    max-width: 100%;
    align-self: center;
    flex: 0 0 auto !important;
    z-index: 1;
  }

  body.layout-legacy .item-layout-container .user-infobox-block {
    width: 800px;
    max-width: 100%;
  }

  body.layout-legacy .item-layout-container .item-sidebar-right,
  body.layout-legacy .item-layout-container .global-sidebar-right {
    /* Inheritance from universal .item-sidebar-right (fixed, right: 0) */
    grid-column: 2;
    grid-row: 1 / span 10;
  }

  /* Slide the legacy sidebar off-screen — handled by universal rule */
}

.sidebar-activity {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  touch-action: none;
  /* iOS Safari: keep horizontal swipe-to-close claimable by JS */
}

.sidebar-activity-header {
  padding: 15px;
  font-weight: bold;
  color: var(--accent);
  border-bottom: 1px solid var(--nav-border-color);
  font-family: 'VCR';
  font-size: 0.9em;
  letter-spacing: 1px;
}

/* Sidebar Tabs */
.sidebar-tabs {
  display: flex;
  width: 100%;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border-color);
  user-select: none;
  flex-shrink: 0;
  z-index: 2;
}

.sidebar-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 11px 0;
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  color: var(--text-color, #888);
  opacity: 0.55;
  font-size: 1.15em;
  position: relative;
  transition: color 0.2s ease, opacity 0.2s ease, background-color 0.2s ease;
}

.sidebar-tab:hover {
  color: var(--accent);
  opacity: 0.9;
  background: rgba(255, 255, 255, 0.03);
}

.sidebar-tab.active {
  color: var(--accent);
  opacity: 1;
}

.sidebar-tab::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 20%;
  right: 20%;
  height: 2px;
  background: transparent;
  transition: background-color 0.2s ease;
  border-radius: 2px 2px 0 0;
}

.sidebar-tab.active::after {
  background: var(--accent);
}

/* Sidebar Tab Content panels */
.sidebar-tab-content {
  display: none;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  touch-action: pan-y;
}

.sidebar-tab-content::-webkit-scrollbar {
  display: none;
}

.sidebar-tab-content.active {
  display: block;
}

/* Video Recommendations List */
.sidebar-recommendations-list {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
  padding: 6px;
  touch-action: pan-y;
}

.sidebar-recommendations-list::-webkit-scrollbar {
  display: none;
}

/* Recommendation Video Cards (YouTube-style) */
.sidebar-video-card {
  margin-bottom: 5px;
  padding: 2px 2px 2px 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.sidebar-video-card:hover,
.sidebar-video-card.touch-active {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

.sidebar-video-card.sidebar-card-swapping {
  opacity: 0.5;
}

.sidebar-video-card .sidebar-video-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.sidebar-video-thumb-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}

.sidebar-video-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

.sidebar-video-badges {
  position: absolute;
  bottom: 6px;
  right: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 10;
  pointer-events: none;
}

.sidebar-video-badges .sidebar-media-format-badge,
.sidebar-video-badges .sidebar-video-badge {
  position: static;
}

.sidebar-video-badge {
  position: absolute;
  bottom: 6px;
  right: 6px;
  font-size: 0.65em;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 3px;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.5px;
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  z-index: 10;
}

.sidebar-video-badge.rating-sfw {
  background-color: var(--badge-sfw, #02500b);
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.sidebar-video-badge.rating-nsfw {
  background-color: var(--badge-nsfw, #E10DC3);
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.sidebar-video-badge.rating-nsfl {
  background-color: var(--badge-nsfl, #660000);
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.sidebar-video-badge.rating-untagged {
  background-color: var(--badge-tag, #37474f);
  border: 1px dashed rgba(255, 255, 255, 0.35);
}

.sidebar-media-format-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  font-size: 0.65em;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  letter-spacing: 0.5px;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  line-height: 1;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  z-index: 10;
}

.sidebar-media-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(var(--accent-rgb, 128, 128, 128), 0.12), rgba(0, 0, 0, 0.45)), var(--nav-bg, #1e1e1e);
  color: var(--accent);
  font-size: 2em;
}

.sidebar-media-placeholder.audio {
  background: #000000;
  color: var(--accent);
  text-shadow: 0 0 16px color-mix(in srgb, var(--accent, #99ff00) 35%, transparent);
  perspective: 800px;
  overflow: hidden;
  outline: none !important;
}

.sidebar-media-placeholder.audio.has-cover {
  background: #000000;
}

.audio-cover-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: inherit;
  transition: opacity 0.25s ease, filter 0.25s ease;
  will-change: opacity, transform, filter;
  overflow: hidden;
}

.audio-reactive-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.35s ease;
  will-change: opacity, transform;
  overflow: hidden;
}

.audio-cover-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 125px;
  height: 125px;
  max-width: none;
  max-height: none;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #000000;
  background-image: none;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.88), 0 0 150px color-mix(in srgb, var(--accent, #99ff00) 45%, transparent);
  border: 2px solid color-mix(in srgb, var(--accent, #99ff00) 40%, transparent);
  outline: none !important;
  overflow: visible;
  pointer-events: none;
  z-index: 2;
  will-change: transform, box-shadow, border-color;
}

/* Motion trail ghost — disabled so cover art is not projected around the eye */
.eye-trail-ghost {
  display: none !important;
}

.audio-eye-inner-canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
}

.audio-void-outer-canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  border-radius: 0;
}

.audio-cover-circle i {
  font-size: 3.4rem;
  color: var(--accent);
  text-shadow: 0 0 16px color-mix(in srgb, var(--accent, #99ff00) 75%, transparent), 0 0 35px color-mix(in srgb, var(--accent, #99ff00) 40%, transparent);
  z-index: 2;
  position: relative;
  pointer-events: none;
  display: inline-block;
  will-change: transform, filter;
  transition: transform 0.04s linear;
}

.sidebar-media-placeholder.audio.has-cover .audio-cover-circle i {
  display: none !important;
}

.sidebar-media-placeholder.audio:has(.audio-cover-circle) > i {
  display: none !important;
}

.sidebar-media-placeholder.audio .audio-cover-circle {
  display: flex;
}

/* Tuner "Hide Eye": hides the disc and everything drawn inside it (inner bars, void tunnel, note) */
.sidebar-media-placeholder.audio.eye-hidden .audio-cover-circle {
  visibility: hidden !important;
}

.thumb > .sidebar-media-placeholder .audio-cover-circle,
.album-thumb-item > .sidebar-media-placeholder .audio-cover-circle,
.item-preview .sidebar-media-placeholder .audio-cover-circle {
  display: none !important;
}

.thumb > .sidebar-media-placeholder .audio-cover-backdrop,
.album-thumb-item > .sidebar-media-placeholder .audio-cover-backdrop,
.item-preview .sidebar-media-placeholder .audio-cover-backdrop,
.sidebar-activity-item .sidebar-media-placeholder .audio-cover-backdrop,
.recent-comment-media .sidebar-media-placeholder .audio-cover-backdrop,
.posts .sidebar-media-placeholder .audio-cover-backdrop,
.thumb > .sidebar-media-placeholder .audio-reactive-bg,
.album-thumb-item > .sidebar-media-placeholder .audio-reactive-bg,
.item-preview .sidebar-media-placeholder .audio-reactive-bg,
.sidebar-activity-item .sidebar-media-placeholder .audio-reactive-bg,
.recent-comment-media .sidebar-media-placeholder .audio-reactive-bg,
.posts .sidebar-media-placeholder .audio-reactive-bg {
  display: none !important;
}

.thumb > .sidebar-media-placeholder > i,
.album-thumb-item > .sidebar-media-placeholder > i,
.item-preview .sidebar-media-placeholder > i {
  display: flex !important;
}

.sidebar-media-placeholder.hidden {
  display: none !important;
}

.thumb > .sidebar-media-placeholder {
  z-index: 1;
  font-size: 2.8em;
  border-radius: inherit;
}

.album-thumb-item > .sidebar-media-placeholder.audio {
  z-index: 1;
  font-size: 1.25rem;
  border-radius: inherit;
}

.thumb:has(.sidebar-media-placeholder),
.thumb.thumb-fallback:has(.sidebar-media-placeholder) {
  opacity: 1 !important;
  background-image: none !important;
}

.v0ck > .sidebar-media-placeholder.audio,
.album-audio-wrapper > .sidebar-media-placeholder.audio,
.embed-responsive > .sidebar-media-placeholder.audio {
  z-index: 0;
  pointer-events: none;
  font-size: clamp(2rem, 5.5vw, 3.8rem);
  border-radius: inherit;
  background: #000000 !important;
}

.album-gallery-container.is-audio-active,
.album-audio-wrapper,
.embed-responsive:has(.sidebar-media-placeholder.audio) {
  background: #000000 !important;
}

.v0ck:fullscreen > .sidebar-media-placeholder.audio,
.v0ck.v0ck_fullscreen > .sidebar-media-placeholder.audio,
#main:fullscreen .v0ck.v0ck_fullscreen > .sidebar-media-placeholder.audio,
#onara-modal:fullscreen .v0ck.v0ck_fullscreen > .sidebar-media-placeholder.audio {
  font-size: clamp(3rem, 7.5vw, 5.5rem);
}

.v0ck:fullscreen .audio-cover-circle,
.v0ck.v0ck_fullscreen .audio-cover-circle,
#main:fullscreen .v0ck.v0ck_fullscreen .audio-cover-circle,
#onara-modal:fullscreen .v0ck.v0ck_fullscreen .audio-cover-circle {
  width: clamp(300px, 72vmin, 700px);
  height: clamp(300px, 72vmin, 700px);
  max-width: calc(100% - 60px);
  max-height: calc(100% - 80px);
}

.v0ck:fullscreen .audio-cover-circle i,
.v0ck.v0ck_fullscreen .audio-cover-circle i,
#main:fullscreen .v0ck.v0ck_fullscreen .audio-cover-circle i,
#onara-modal:fullscreen .v0ck.v0ck_fullscreen .audio-cover-circle i {
  font-size: clamp(5rem, 14vmin, 12rem);
}

.sidebar-media-placeholder.audio i {
  position: relative;
  z-index: 2;
  display: inline-block;
  transform-origin: center center;
  will-change: transform, filter;
  transition: transform 0.015s linear;
}

/* Audio Reactivity Tuner Overlay */
.f0ck-tuner-toggle {
  position: fixed;
  bottom: 65px;
  right: 20px;
  z-index: 99998;
  background: var(--nav-bg, #1a1a1a);
  color: var(--accent, #99ff00);
  border: 1.5px solid var(--accent, #99ff00);
  border-radius: 20px;
  padding: 6px 13px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.f0ck-tuner-toggle:hover {
  transform: scale(1.05);
  background: rgba(var(--accent-rgb, 153, 255, 0), 0.18);
}

.f0ck-audio-tuner-panel {
  position: fixed;
  bottom: 110px;
  right: 20px;
  z-index: 99999;
  width: 320px;
  max-height: 80vh;
  overflow-y: auto;
  scrollbar-width: none;
  background: rgba(18, 18, 22, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(var(--accent-rgb, 153, 255, 0), 0.45);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.9);
  padding: 14px 16px;
  color: #e6e6e6;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 11px;
}

.f0ck-audio-tuner-panel.hidden {
  display: none !important;
}

/* Embedded in Right Sidebar */
.sidebar-tuner-container {
  display: none;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  padding: 0;
  touch-action: pan-y;
}

/* Tuner scrolls (floating panel or sidebar container) but without a visible scrollbar */
.sidebar-tuner-container::-webkit-scrollbar,
.f0ck-audio-tuner-panel::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.sidebar-tuner-container.active {
  display: block;
}

.f0ck-audio-tuner-panel.in-sidebar {
  position: static;
  width: 100%;
  max-height: none;
  overflow-y: visible;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 14px 14px 40px 14px;
  box-sizing: border-box;
}

.f0ck-audio-tuner-panel.in-sidebar .f0ck-tuner-close {
  display: none;
}

.f0ck-tuner-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 8px;
}

.f0ck-tuner-section-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--accent, #99ff00);
  margin: 12px 0 6px 0;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(var(--accent-rgb, 153, 255, 0), 0.25);
}

.f0ck-tuner-section-title:first-child {
  margin-top: 0;
}

.f0ck-tuner-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--accent, #99ff00);
  display: flex;
  align-items: center;
  gap: 6px;
}

.f0ck-tuner-close {
  background: none;
  border: none;
  color: #888;
  font-size: 14px;
  cursor: pointer;
  padding: 2px 6px;
}

.f0ck-tuner-close:hover {
  color: #fff;
}

.f0ck-tuner-row {
  margin-bottom: 10px;
}

.f0ck-tuner-row-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  color: #bbb;
  font-size: 11px;
}

.f0ck-tuner-row-label span:last-child {
  font-weight: 700;
  color: var(--accent, #99ff00);
  font-family: monospace;
}

.f0ck-tuner-row input[type="range"] {
  width: 100%;
  accent-color: var(--accent, #99ff00);
  cursor: pointer;
  margin: 0;
  height: 4px;
  display: block;
}

.f0ck-tuner-footer {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 10px;
}

.f0ck-tuner-footer button {
  flex: 1;
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  transition: filter 0.15s ease, background 0.15s ease;
}

.f0ck-tuner-btn-copy {
  background: var(--accent, #99ff00);
  color: #000;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.f0ck-tuner-btn-copy:hover {
  filter: brightness(1.15);
}

.f0ck-tuner-btn-reset {
  background: rgba(255, 255, 255, 0.08);
  color: #ccc;
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.f0ck-tuner-btn-reset:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.f0ck-tuner-presets-bar {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.f0ck-tuner-presets-select-wrap {
  display: flex;
  gap: 6px;
  align-items: center;
}

.f0ck-tuner-preset-select {
  flex: 1;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  color: #fff;
  padding: 6px 8px;
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  outline: none;
}

.f0ck-tuner-preset-select:focus {
  border-color: var(--accent, #99ff00);
}

.f0ck-tuner-preset-select optgroup {
  color: var(--accent, #99ff00);
  background: #111;
  font-weight: bold;
}

.f0ck-tuner-preset-select option {
  color: #eee;
  background: #181818;
}

.f0ck-tuner-btn-icon {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #bbb;
  border-radius: 6px;
  padding: 6px 9px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.f0ck-tuner-btn-icon:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.f0ck-tuner-btn-icon:not(:disabled):hover {
  background: rgba(255, 50, 50, 0.25);
  border-color: rgba(255, 50, 50, 0.5);
  color: #ff5555;
}

.f0ck-tuner-presets-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.f0ck-tuner-preset-input {
  flex: 1;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  color: #fff;
  padding: 5px 8px;
  font-size: 11px;
  font-family: inherit;
  outline: none;
}

.f0ck-tuner-preset-input:focus {
  border-color: var(--accent, #99ff00);
}

.f0ck-tuner-btn-save-preset,
.f0ck-tuner-btn-import-preset {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #eee;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.f0ck-tuner-btn-save-preset:hover {
  background: var(--accent, #99ff00);
  border-color: var(--accent, #99ff00);
  color: #000;
}

.f0ck-tuner-btn-save-default {
  background: color-mix(in srgb, var(--accent, #99ff00) 18%, rgba(0, 0, 0, 0.4));
  border: 1px solid color-mix(in srgb, var(--accent, #99ff00) 45%, transparent);
  color: var(--accent, #99ff00);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.f0ck-tuner-btn-save-default:hover {
  background: var(--accent, #99ff00);
  border-color: var(--accent, #99ff00);
  color: #000;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent, #99ff00) 35%, transparent);
}

.f0ck-tuner-btn-factory-reset {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #aaa;
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.f0ck-tuner-btn-factory-reset:hover {
  background: rgba(255, 100, 100, 0.18);
  border-color: rgba(255, 100, 100, 0.4);
  color: #ff7777;
}

.f0ck-tuner-btn-import-preset:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* ── Tuner Sub-Tabs Navigation ────────────────────────────── */
.f0ck-tuner-subtabs-nav {
  display: flex;
  gap: 4px;
  background: rgba(0, 0, 0, 0.45);
  padding: 3px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  flex: 1;
  margin-right: 8px;
}

/* Sub-tab nav + background mode bar: scroll horizontally inside themselves instead of overflowing the sidebar */
.f0ck-tuner-subtabs-nav,
.f0ck-tuner-mode-bar {
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  /* No visible scrollbar: drag, swipe, or turn the mouse wheel (f0ckm.js maps it to sideways) */
  scrollbar-width: none !important;
  -ms-overflow-style: none;
}
.f0ck-tuner-subtabs-nav::-webkit-scrollbar,
.f0ck-tuner-mode-bar::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* Buttons keep their natural width (grow to fill when there is room); mode-bar buttons set flex:1 inline */
.f0ck-tuner-subtabs-nav > .f0ck-tuner-subtab-btn { flex: 1 0 auto; }
.f0ck-tuner-mode-bar > .f0ck-tuner-mode-btn { flex: 1 0 auto !important; }
.f0ck-tuner-header > .f0ck-tuner-close { flex-shrink: 0; }

.f0ck-tuner-subtab-btn,
.f0ck-tuner-mode-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: transparent;
  border: none;
  color: #8e8e93;
  font-size: 10.5px;
  font-weight: 600;
  padding: 5px 5px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.f0ck-tuner-subtab-btn:hover,
.f0ck-tuner-mode-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.f0ck-tuner-subtab-btn.active,
.f0ck-tuner-mode-btn.active {
  color: #000;
  background: var(--accent, #99ff00);
  font-weight: 700;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent, #99ff00) 40%, transparent);
}

.f0ck-tuner-subtab-pane {
  display: none;
}

.f0ck-tuner-subtab-pane.active {
  display: block;
}

/* ── Danmaku Debug Tools & Buttons Grid ───────────────────── */
.f0ck-danmaku-debug-card {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 12px;
}

.f0ck-danmaku-spawner-row {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.f0ck-danmaku-spawner-meta {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  align-items: center;
}

.f0ck-danmaku-debug-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 8px;
}

.f0ck-danmaku-debug-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ddd;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.f0ck-danmaku-debug-btn:hover {
  background: rgba(var(--accent-rgb, 153, 255, 0), 0.15);
  border-color: var(--accent, #99ff00);
  color: var(--accent, #99ff00);
}

.f0ck-danmaku-debug-btn.btn-primary {
  background: var(--accent, #99ff00);
  color: #000;
  border-color: var(--accent, #99ff00);
  font-weight: 700;
}

.f0ck-danmaku-debug-btn.btn-primary:hover {
  filter: brightness(1.15);
  color: #000;
}

.f0ck-danmaku-debug-btn.btn-danger {
  background: rgba(255, 68, 68, 0.12);
  border-color: rgba(255, 68, 68, 0.35);
  color: #ff6b6b;
}

.f0ck-danmaku-debug-btn.btn-danger:hover {
  background: rgba(255, 68, 68, 0.28);
  border-color: #ff4444;
  color: #fff;
}

.f0ck-danmaku-debug-btn.btn-warning {
  background: rgba(255, 180, 0, 0.12);
  border-color: rgba(255, 180, 0, 0.35);
  color: #ffb833;
}

.f0ck-danmaku-debug-btn.btn-warning:hover {
  background: rgba(255, 180, 0, 0.28);
  border-color: #ffaa00;
  color: #fff;
}

/* Tuner presets bar + footer: wrap onto more lines instead of overflowing the sidebar */
.f0ck-tuner-presets-bar { min-width: 0; max-width: 100%; box-sizing: border-box; }
.f0ck-tuner-presets-select-wrap { min-width: 0; }
.f0ck-tuner-presets-select-wrap .f0ck-tuner-preset-select { min-width: 0; }
.f0ck-tuner-presets-actions { flex-wrap: wrap; min-width: 0; }
.f0ck-tuner-presets-actions .f0ck-tuner-preset-input { flex: 1 1 100%; min-width: 0; box-sizing: border-box; }
.f0ck-tuner-presets-actions > button { flex: 1 1 auto; justify-content: center; }
.f0ck-tuner-footer { flex-wrap: wrap; }
.f0ck-tuner-footer > button { flex: 1 1 auto; min-width: 0; }

/* ── Tuner: style guide (square, flat, theme colours, no glow) + touch-friendly sliders ── */
.f0ck-audio-tuner-panel,
.f0ck-audio-tuner-panel *,
.f0ck-audio-tuner-panel *::before,
.f0ck-audio-tuner-panel *::after { border-radius: 0 !important; }

.f0ck-audio-tuner-panel:not(.in-sidebar) {
  background: var(--bg, #111);
  border: 1px solid var(--accent, #99ff00);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.f0ck-audio-tuner-panel { font-family: inherit; color: var(--text-color, var(--white, #e6e6e6)); }

.f0ck-audio-tuner-panel .f0ck-tuner-header { border-bottom-color: rgba(255, 255, 255, 0.1); }
.f0ck-audio-tuner-panel .f0ck-tuner-section-title {
  color: var(--text-muted, #8a8f98);
  letter-spacing: 0.12em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex; align-items: center; gap: 6px;
}
.f0ck-audio-tuner-panel .f0ck-tuner-section-title::before {
  content: ''; width: 3px; height: 10px; background: var(--accent, #99ff00); flex-shrink: 0;
}

/* Sub-tabs + mode switch: segmented control, active = solid accent, no glow */
.f0ck-audio-tuner-panel .f0ck-tuner-subtabs-nav,
.f0ck-audio-tuner-panel .f0ck-tuner-mode-bar {
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.f0ck-audio-tuner-panel .f0ck-tuner-subtab-btn,
.f0ck-audio-tuner-panel .f0ck-tuner-mode-btn { color: var(--text-muted, #8e8e93); }
.f0ck-audio-tuner-panel .f0ck-tuner-subtab-btn:hover,
.f0ck-audio-tuner-panel .f0ck-tuner-mode-btn:hover { color: var(--text-color, #fff); background: rgba(255, 255, 255, 0.06); }
.f0ck-audio-tuner-panel .f0ck-tuner-subtab-btn.active,
.f0ck-audio-tuner-panel .f0ck-tuner-mode-btn.active { background: var(--accent, #99ff00); color: #000; box-shadow: none; }

/* Panels / cards */
.f0ck-audio-tuner-panel :is(.f0ck-tuner-presets-bar, .f0ck-danmaku-debug-card) {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Inputs & selects */
.f0ck-audio-tuner-panel :is(.f0ck-tuner-preset-select, .f0ck-tuner-preset-input, input[type="text"], input[type="number"], select) {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-color, #fff);
  min-height: 30px;
}
.f0ck-audio-tuner-panel :is(.f0ck-tuner-preset-select, .f0ck-tuner-preset-input, input[type="text"], input[type="number"], select):focus {
  border-color: var(--accent, #99ff00); outline: none;
}

/* Buttons: primary = solid accent (outline on hover), the rest outlined; no glows */
.f0ck-audio-tuner-panel :is(.f0ck-tuner-btn-copy, .f0ck-danmaku-debug-btn.btn-primary) {
  background: var(--accent, #99ff00); border: 1px solid var(--accent, #99ff00); color: #000; filter: none;
}
.f0ck-audio-tuner-panel :is(.f0ck-tuner-btn-copy, .f0ck-danmaku-debug-btn.btn-primary):hover {
  background: transparent; color: var(--accent, #99ff00); filter: none;
}
.f0ck-audio-tuner-panel .f0ck-tuner-btn-save-default { background: transparent; border-color: var(--accent, #99ff00); }
.f0ck-audio-tuner-panel .f0ck-tuner-btn-save-default:hover { box-shadow: none; }
.f0ck-audio-tuner-panel :is(button, select, input):focus-visible { outline: 2px solid var(--accent, #99ff00); outline-offset: 1px; }

/* Value readout next to each label */
.f0ck-audio-tuner-panel .f0ck-tuner-row-label { color: var(--text-muted, #bbb); }
.f0ck-audio-tuner-panel .f0ck-tuner-row-label span:last-child {
  color: var(--accent, #99ff00); font-variant-numeric: tabular-nums;
}

/* Sliders: flat track, square accent thumb, generous hit area.
   touch-action pan-y: vertical drags still scroll the panel, horizontal drags move the slider. */
.f0ck-audio-tuner-panel input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 22px; margin: 0; padding: 0;
  background: transparent; cursor: pointer; touch-action: pan-y; display: block;
}
.f0ck-audio-tuner-panel input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; background: rgba(255, 255, 255, 0.15); border: 0;
}
.f0ck-audio-tuner-panel input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; margin-top: -5px;
  background: var(--accent, #99ff00); border: 0; box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.45);
  transition: transform 0.1s;
}
.f0ck-audio-tuner-panel input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); }
.f0ck-audio-tuner-panel input[type="range"]::-moz-range-track { height: 4px; background: rgba(255, 255, 255, 0.15); border: 0; }
.f0ck-audio-tuner-panel input[type="range"]::-moz-range-progress { height: 4px; background: var(--accent, #99ff00); }
.f0ck-audio-tuner-panel input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; background: var(--accent, #99ff00); border: 0; box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.45);
}
.f0ck-audio-tuner-panel input[type="range"]:focus { outline: none; }
.f0ck-audio-tuner-panel input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--text-color, #fff); outline-offset: 1px; }

/* Touch screens: bigger thumb and row so the slider is easy to grab */
@media (pointer: coarse) {
  .f0ck-audio-tuner-panel input[type="range"] { height: 34px; }
  .f0ck-audio-tuner-panel input[type="range"]::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -9px; }
  .f0ck-audio-tuner-panel input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; }
  .f0ck-audio-tuner-panel .f0ck-tuner-row { margin-bottom: 6px; }
}

.sidebar-video-details {
  display: flex;
  margin-top: 8px;
}

.sidebar-video-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  padding: 0px 0px 0px 5px;
}

.sidebar-video-title {
  font-size: 0.86em;
  font-weight: 600;
  color: var(--text-color, #eee);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  transition: color 0.15s ease;
}

.sidebar-video-card:hover .sidebar-video-title {
  color: var(--accent);
}

.sidebar-video-channel {
  font-size: 0.76em;
  color: #999;
  margin-top: 3px;
  line-height: 1.2;
}

.sidebar-video-user {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  max-width: 100%;
}

.sidebar-video-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px 5px;
  font-size: 0.7em;
  color: #777;
  margin-top: 2px;
}

.sidebar-video-time {
  opacity: 0.85;
}

.sidebar-video-xd {
  font-size: 0.8em;
  font-weight: bold;
  padding: 0 4px;
  border-radius: 2px;
  display: inline-block;
  background: rgba(255, 255, 255, 0.08);
  color: var(--accent);
}

.sidebar-personalized-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--accent, #a78bfa);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.sidebar-personalized-pill i {
  font-size: 0.9em;
}

.sidebar-dev-score {
  font-size: 0.85em;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(255, 170, 0, 0.16);
  color: #ffaa00;
  border: 1px solid rgba(255, 170, 0, 0.4);
  letter-spacing: 0.02em;
  font-family: monospace, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas;
  flex-shrink: 0;
}

.sidebar-dev-score i {
  font-size: 0.85em;
  opacity: 0.85;
}

html[theme='light'] .sidebar-dev-score,
html[theme='paper'] .sidebar-dev-score {
  background: rgba(217, 119, 6, 0.14);
  color: #b45309;
  border-color: rgba(217, 119, 6, 0.35);
}

/* Light / Paper themes */
html[theme='light'] .sidebar-tabs,
html[theme='paper'] .sidebar-tabs {
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
}

html[theme='light'] .sidebar-tab,
html[theme='paper'] .sidebar-tab {
  color: #64748b;
}

html[theme='light'] .sidebar-tab:hover,
html[theme='paper'] .sidebar-tab:hover {
  background: #f8fafc;
}

html[theme='light'] .sidebar-video-card,
html[theme='paper'] .sidebar-video-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

html[theme='light'] .sidebar-video-card:hover,
html[theme='paper'] .sidebar-video-card:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

html[theme='light'] .sidebar-video-title,
html[theme='paper'] .sidebar-video-title {
  color: #0f172a;
}

html[theme='light'] .sidebar-video-channel,
html[theme='paper'] .sidebar-video-channel {
  color: #64748b;
}

/* Theme 95 */
html[theme='95'] .sidebar-tabs {
  background: #c0c0c0;
  border-bottom: 2px solid #808080;
}

html[theme='95'] .sidebar-tab {
  border-right: 1px solid #808080;
  color: #000;
}

html[theme='95'] .sidebar-tab.active {
  background: #dfdfdf;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080;
}

html[theme='95'] .sidebar-video-card {
  background: #c0c0c0;
  border: 2px solid #808080;
  border-right-color: #fff;
  border-bottom-color: #fff;
}

html[theme='95'] .sidebar-video-title {
  color: #000;
  font-family: 'MS Sans Serif', sans-serif;
}

/* Sidebar Tag Feed Header & Active Card Highlighting */
.sidebar-tag-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--nav-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  margin-bottom: 6px;
  position: sticky;
  top: -6px;
  z-index: 10;
}

.sidebar-tag-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85em;
  font-weight: 700;
  color: var(--accent, #a78bfa);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-tag-title i {
  opacity: 0.85;
}

.sidebar-tag-count {
  font-size: 0.85em;
  font-weight: 500;
  color: var(--text-muted, #888);
  margin-left: 4px;
}

.sidebar-tag-order-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
  color: var(--text-color, #ccc);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 0.82em;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s ease;
}

.sidebar-tag-order-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: var(--accent, #a78bfa);
}

.sidebar-video-card.active-tag-item {
  border-color: var(--accent, #a78bfa) !important;
}

#sidebar-activity-container.sidebar-comments-list {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
  padding: 5px;
  touch-action: pan-y;
}

#sidebar-activity-container.sidebar-comments-list::-webkit-scrollbar {
  display: none;
}

#sidebar-activity-container.sidebar-comments-list .comment {
  margin-bottom: 5px;
  padding: 5px;
  font-size: 1em;
  border-bottom: 1px solid var(--nav-border-color);
  contain: layout style;
  margin-bottom: 5px;
}

.sidebar-activity .comment-content-inner {
  display: block;
  max-height: 80px;
  /* Roughly 4-5 lines */
  overflow: hidden;
  position: relative;
  white-space: pre-wrap;
}

/* Subtle fade to indicate more content */
.sidebar-activity .comment-content.has-overflow:not(.expanded) .comment-content-inner::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 20px;
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none;
}

.sidebar-activity .comment-content.expanded .comment-content-inner {
  max-height: unset;
  overflow: visible;
}

.sidebar-activity .read-more-btn,
.sidebar-activity .see-less-btn {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  padding: 0;
  margin-top: 5px;
  font-size: 0.85em;
  display: none;
  /* Hidden by default; CSS below shows it when has-overflow is present */
}

/* Show the button via CSS when the parent has has-overflow (set in the HTML template).
   This avoids depending on JS timing — the button is visible from the very first paint.
   JS checkOverflow() will later REMOVE has-overflow from short comments to hide it. */
.sidebar-activity .comment-content.has-overflow > .read-more-btn {
  display: block;
}


.item-comment-truncated-notice {
  display: block;
  margin-top: 8px;
  font-size: 0.85em;
  color: #666;
}

.load-full-comment-btn,
.collapse-comment-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  font-size: inherit;
  font-family: inherit;
  cursor: pointer;
  opacity: 0.85;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.15s;
}

.load-full-comment-btn:hover,
.collapse-comment-btn:hover {
  opacity: 1;
}

/* Avatar in sidebar activity */
.sidebar-avatar-link {
  flex-shrink: 0;
  display: flex;
}

.sidebar-avatar {
  width: 24px;
  height: 24px;
  object-fit: cover;
}

/* Shimmer placeholder while avatar image is still loading — GPU-composited */
.sidebar-avatar:not(.loaded) {
  background: rgba(255, 255, 255, 0.05);
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}

.sidebar-avatar:not(.loaded)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.10) 50%,
      transparent 100%);
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
  will-change: transform;
}

.read-more-btn,
.see-less-btn {
  display: inline;
  padding: 0;
  background: none;
  border: none;
  color: var(--accent);
  font-size: inherit;
  cursor: pointer;
  opacity: 0.8;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.read-more-btn:hover,
.see-less-btn:hover {
  opacity: 1;
}


#sidebar-activity-container.sidebar-comments-list .comment:last-child {
  border-bottom: none;
}

#sidebar-activity-container.sidebar-comments-list .comment-header {
  margin-bottom: 4px;
}

/* ─── Sidebar Loading State ────────────────────────────────────────────────── */

.sidebar-loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--accent);
  opacity: 0.6;
  font-size: 0.85em;
  gap: 10px;
}

.sidebar-loading-state i {
  font-size: 1.5em;
}

/* Mobile sidebar (max-width: 999px): sidebar fixed, capped to viewport width */
@media (max-width: 999px) {
  /* Sidebar itself: cap width to viewport, always right-anchored */
  .item-sidebar-right,
  .index-sidebar-right,
  .global-sidebar-right {
    width: min(280px, 80vw) !important;
    right: 0 !important;
  }

  body.sidebar-right-hidden .item-sidebar-right,
  body.sidebar-right-hidden .index-sidebar-right,
  body.sidebar-right-hidden .global-sidebar-right {
    right: calc(-1 * min(280px, 80vw)) !important;
  }

  /* Mobile: pagination centered in available space (left of sidebar) */
  .pagination-container-fluid {
    right: min(280px, 80vw) !important;
    transition: right 0.3s ease-in-out !important;
  }

  /* Sidebar hidden: pagination expands to full viewport width */
  body.sidebar-right-hidden .pagination-container-fluid {
    right: 0 !important;
  }

  #sidebar-right-toggle {
    top: 80% !important;
    transform: none !important;
  }
}

/* 600–999px: sidebar is attached to the grid, same as desktop but with mobile width.
   Grid reserves space for the sidebar so content is never hidden behind it. */
@media (min-width: 600px) and (max-width: 999px) {
  .index-layout-wrapper {
    padding-right: min(280px, 80vw);
  }

  body.sidebar-right-hidden .index-layout-wrapper {
    padding-right: 0;
  }

  /* Generic pagewrapper (non-index, non-item pages) also reserves space */
  .pagewrapper:not(:has(.index-layout-wrapper)):not(:has(.item-layout-container)) {
    padding-right: min(280px, 80vw);
  }

  body.sidebar-right-hidden
  .pagewrapper:not(:has(.index-layout-wrapper)):not(:has(.item-layout-container)) {
    padding-right: 0;
  }

  /* Restore layout-modern item stacking at 600–999px.
     Its CSS grid only activates at ≥1000px; without flex-column here
     the layout falls back to broken block flow. */
  body.layout-modern .item-layout-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 5px;
  }

  body.layout-modern .item-layout-container .item-main-content {
    order: 1;
  }

  body.layout-modern .item-sidebar-left {
    order: 2;
    z-index: 1;
  }

  /* Legacy layout: 2-column grid with mobile sidebar width. */
  body.layout-legacy .item-layout-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) min(280px, 80vw);
    height: auto !important;
    overflow: visible !important;
  }

  body.layout-legacy.sidebar-right-hidden .item-layout-container {
    grid-template-columns: minmax(0, 1fr) 0px;
  }
}

/* Very small screens (≤599px): sidebar is always a pure overlay — never reserve space for it.
   Wrappers stay at full width regardless of sidebar state; no transitions needed here.
   Item view also switches to stacked layout here (not at 999px). */
@media (max-width: 599px) {
  /* Item view: stack content above comments/sidebar-left */
  .item-layout-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 5px;
  }

  .item-layout-container .item-main-content {
    order: 1;
  }

  .item-sidebar-left {
    order: 2;
    z-index: 1;
  }

  .index-layout-wrapper,
  .item-layout-container,
  .pagewrapper,
  body.sidebar-right-hidden .index-layout-wrapper,
  body.sidebar-right-hidden .item-layout-container,
  body.sidebar-right-hidden .pagewrapper {
    padding-right: 5px !important;
    transition: none !important;
  }

  .pagination-container-fluid,
  body.sidebar-right-hidden .pagination-container-fluid {
    right: 0 !important;
    transition: none !important;
  }
}




.item-layout-container .item-main-content>._204863,
.item-layout-container .item-main-content>.item_title,
.item-layout-container .item-main-content>.item-title,
.item-layout-container .item-main-content>.content,
.item-layout-container .item-main-content>.metadata,
.item-layout-container .item-main-content #comments-container {
  width: 100%;
  max-width: 1100px;
  /* Optional cap to prevent excessive width on huge screens */
  min-height: 0;
  min-width: 0;
  z-index: 1;
}

/* Reset z-index in fullscreen to prevent sibling stacking contexts from showing metadata/comments over the player */
#main:fullscreen .item-layout-container .item-main-content>._204863,
#main:fullscreen .item-layout-container .item-main-content>.item_title,
#main:fullscreen .item-layout-container .item-main-content>.item-title,
#main:fullscreen .item-layout-container .item-main-content>.content,
#main:fullscreen .item-layout-container .item-main-content>.metadata,
#main:fullscreen .item-layout-container .item-main-content #comments-container,
#onara-modal:fullscreen .item-layout-container .item-main-content>._204863,
#onara-modal:fullscreen .item-layout-container .item-main-content>.item_title,
#onara-modal:fullscreen .item-layout-container .item-main-content>.item-title,
#onara-modal:fullscreen .item-layout-container .item-main-content>.content,
#onara-modal:fullscreen .item-layout-container .item-main-content>.metadata,
#onara-modal:fullscreen .item-layout-container .item-main-content #comments-container {
  z-index: auto;
}


.item-layout-container .item-main-content>.content {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.item-layout-container .item-main-content .media-object {
  height: auto;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.item-layout-container .item-main-content .embed-responsive {
  width: 100%;
  margin: 0 auto;
}

/* Modern layout: cap embed width so height ≈ viewport height regardless of column width.
   padding-top:56.25% means height = width × 0.5625, so max-width = max-height × (16/9).
   This prevents the embed from becoming huge when sidebars are hidden (wider center column). */
body.layout-modern .item-layout-container .item-main-content .embed-responsive:not(.is-expanded) {
  max-width: calc((100vh - var(--navbar-h, 50px) - 80px) * (16 / 9));
}

.item-main-content video,
.item-main-content img {
  /*max-height: calc(100vh - 180px);*/
  /* Leave space for ID and Metadata bars */
  object-fit: contain;
}

#comments-container {
  color: var(--white);
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

/* Modern: comments fill all remaining left-sidebar space; list scrolls internally */
body.layout-modern .item-sidebar-left #comments-container {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

body.layout-modern #comments-container .main-input {
  order: -1;
}

/* Legacy: comments sit in the page flow, no forced height */
body.layout-legacy #comments-container {
  display: flex !important;
  flex-direction: column;
  flex: 0 0 auto !important;
  min-height: 0;
  overflow: visible;
}

/* Pin tags + controls to the bottom of the left sidebar */
body.layout-modern .item-sidebar-left .sidebar-tags-container,
body.layout-modern .item-sidebar-left .tag-controls {
  flex-shrink: 0;
}

/* Modern layout: slide left inside the clipped sidebar column */
.item-sidebar-left #comments-container.faded-out,
.item-sidebar-left .sidebar-tags-container.faded-out,
.item-sidebar-left .tag-controls.faded-out {
  transform: translateX(-110%);
  pointer-events: none;
}

/* Legacy layout: simple opacity fade (overflow:visible means translateX hangs visible) */
body.layout-legacy #comments-container.faded-out {
  opacity: 0;
  pointer-events: none;
}

/* Full hidden state for comments & left sidebar — overrides flex !important so no plopping or ghost spacing occurs */
body.sidebar-left-hidden #comments-container,
body.comments-hidden #comments-container,
body.layout-legacy.sidebar-left-hidden #comments-container,
body.layout-legacy.comments-hidden #comments-container,
body.layout-legacy .item-layout-container.sidebar-hidden #comments-container,
body.layout-modern.sidebar-left-hidden #comments-container,
body.layout-modern.comments-hidden #comments-container,
body.layout-modern.sidebar-left-hidden .item-sidebar-left,
body.layout-modern.comments-hidden .item-sidebar-left,
body.layout-modern .item-layout-container.sidebar-hidden .item-sidebar-left,
body.sidebar-left-hidden #onara-modal #comments-container,
body.comments-hidden #onara-modal #comments-container,
body.sidebar-left-hidden #onara-modal .item-sidebar-left,
body.comments-hidden #onara-modal .item-sidebar-left,
#onara-modal #comments-container.is-hidden,
#comments-container.is-hidden,
.item-sidebar-left.is-hidden {
  display: none !important;
}

body.layout-legacy .comment-input {
  border-top: 1px solid var(--nav-border-color);
  border-left: 1px solid var(--nav-border-color);
  border-right: 1px solid var(--nav-border-color);
}

.item-sidebar-left .sidebar-tags-container,
.item-sidebar-left .tag-controls {
  transition: transform 0.3s ease-in-out;
}


.comments-controls {
  display: flex;
  align-items: center;
  gap: 5px;
}

.comments-controls button,
.comments-controls select {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--nav-border-color);
  color: var(--white);
  padding: 0 10px;
  height: 24px;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}

.comments-controls button:hover {
  background: rgba(255, 255, 255, 0.2);
}

.admin-pin-btn,
.admin-edit-btn,
.admin-delete-btn,
.delete-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: #888;
  cursor: pointer;
  text-decoration: underline;
}

.admin-delete-btn:hover,
.delete-btn:hover {
  color: #ff4444;
}

.admin-pin-btn:hover,
.admin-edit-btn:hover {
  color: var(--accent);
}

.comment-input {
  background: var(--bg);
  padding: 5px;
  border-bottom: 1px solid var(--nav-border-color);
  border-radius: 0;
}

.comment-input textarea {
  width: 100%;
  background: rgba(0, 0, 0, 0.2);
  border: none;
  color: var(--white);
  padding: 10px;
  min-height: 80px;
  resize: vertical;
  border-radius: 0;
  /* No rounded corners */
}

.input-actions {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.submit-comment {
  background: var(--accent);
  color: var(--black);
  border: 1px solid var(--accent);
  padding: 0 14px;
  font-weight: bold;
  cursor: pointer;
  border-radius: 3px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  position: relative;
}

.submit-comment .submit-spinner {
  display: none;
  position: absolute;
  transform: translate(-50%, -50%);
  margin: 0;
}

.submit-comment .submit-label {
  display: inline;
}

.submit-comment.loading {
  pointer-events: none;
  opacity: 0.7;
  cursor: wait;
}

.submit-comment.loading .submit-label {
  visibility: hidden;
}

.submit-comment.loading .submit-spinner {
  display: inline;
}

.submit-comment.uploading {
  pointer-events: none;
  opacity: 0.5;
  cursor: wait;
}

.cancel-reply {
  background: #555;
  color: #fff;
  border: 1px solid #555;
  padding: 0 10px;
  cursor: pointer;
  border-radius: 3px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
}

.char-counter {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.35);
  font-family: monospace;
  margin-right: auto;
  padding-left: 5px;
  align-self: center;
  transition: color 0.2s ease, font-weight 0.2s ease;
  user-select: none;
}

.char-counter.near-limit {
  color: #e6a817;
  font-weight: bold;
}

.char-counter.at-limit {
  color: #e84040;
  font-weight: bold;
}

/* ─── Comment File Upload ─────────────────────────────────────────────────── */

.comment-attach-btn {
  cursor: pointer;
  font-size: 13px;
}

.cf-spoiler-btn {
  background: none;
  border: none;
  color: #888;
  cursor: pointer;
  padding: 2px 4px;
  font-size: 12px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  transition: color 0.15s;
}

.cf-spoiler-btn:hover,
.cf-is-spoiler .cf-spoiler-btn {
  color: #f0a500;
}

.cf-is-spoiler {
  border-color: rgba(240, 165, 0, 0.4);
  background: rgba(240, 165, 0, 0.06);
}

.spoiler-attach-badge {
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  color: #f0a500;
  letter-spacing: 0.03em;
}

.comment-file-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
}

.comment-file-preview:empty {
  display: none;
}

.cf-preview-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 4px 6px;
  max-width: 220px;
}

.cf-preview-item img,
.cf-preview-item video {
  width: 48px;
  height: 48px;
  object-fit: cover;
  flex-shrink: 0;
}

.cf-preview-item i.fa-music {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  color: var(--accent);
  font-size: 20px;
  flex-shrink: 0;
}

.cf-filename {
  font-size: 0.75em;
  color: #aaa;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 110px;
}

.cf-remove-btn {
  background: none;
  border: none;
  color: #888;
  cursor: pointer;
  padding: 2px;
  font-size: 12px;
  flex-shrink: 0;
  transition: color 0.15s;
}

.cf-remove-btn:hover {
  color: #ff4444;
}

.cf-preview-item.cf-uploading {
  opacity: 0.6;
}

.cf-preview-item.cf-uploading .fa-spinner {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--accent);
}

/* ─── Comment Attachments (rendered below comment content) ────────────────── */

.comment-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.cf-attachment {
  display: inline-block;
  max-width: 100%;
}

.cf-attachment.cf-image img {
  max-width: 300px;
  object-fit: contain;
  cursor: pointer;
}

.cf-attachment.cf-video video {
  max-width: 400px;
}

.cf-attachment.cf-audio audio {
  width: 100%;
  max-width: 350px;
}

/* ─── Poll Button ─────────────────────────────────────────────────────────── */

.comment-poll-btn {
  cursor: pointer;
  font-size: 13px;
}

/* ─── Poll Builder ────────────────────────────────────────────────────────── */

.poll-builder {
  background: var(--bg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: pollBuilderIn 0.15s ease;
}

@keyframes pollBuilderIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.poll-question-input,
.poll-option-input {
  width: 100%;
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--white);
  padding: 5px 8px;
  font-family: var(--font, inherit);
  font-size: 0.85em;
  box-sizing: border-box;
}

.poll-question-input:focus,
.poll-option-input:focus {
  outline: none;
  border-color: var(--accent);
}

.poll-question-input {
  font-weight: 600;
}

.poll-options-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.poll-builder-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.poll-add-option-btn,
.poll-remove-btn {
  background: none;
  border: 1px solid rgba(255,255,255,0.15);
  color: #aaa;
  cursor: pointer;
  padding: 3px 10px;
  font-size: 0.8em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.15s, border-color 0.15s;
}

.poll-add-option-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.poll-remove-btn:hover {
  color: #ff4444;
  border-color: #ff4444;
}

/* ─── Poll Widget (rendered in comments) ─────────────────────────────────── */

.comment-poll {
  margin-top: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.09);
  padding: 10px;
  border-radius: 0;
}

.poll-question {
  font-weight: 600;
  font-size: 0.9em;
  margin-bottom: 8px;
  color: var(--white);
}

.poll-options {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 8px;
}

.poll-option {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  user-select: none;
  min-height: 30px;
  transition: border-color 0.15s;
}

.poll-option-clickable {
  cursor: pointer;
}

.poll-option-clickable:hover {
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.07);
}

.poll-option-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--accent);
  opacity: 0.18;
  transition: width 0.4s ease;
  pointer-events: none;
}

.poll-option-voted .poll-option-bar {
  opacity: 0.28;
}

.poll-option-text {
  position: relative;
  flex: 1;
  font-size: 0.85em;
  color: var(--white);
}

.poll-option-pct {
  position: relative;
  font-size: 0.78em;
  color: #888;
  font-family: monospace;
  white-space: nowrap;
}

.poll-vote-check {
  position: relative;
  color: var(--accent);
  font-size: 0.75em;
  flex-shrink: 0;
}

.poll-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78em;
  color: #666;
}

.poll-total {
  font-family: monospace;
}

.poll-expired-badge {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 1px 6px;
  font-size: 0.85em;
  color: #888;
}

.poll-delete-btn {
  background: none;
  border: none;
  color: #555;
  cursor: pointer;
  padding: 0;
  font-size: 0.85em;
  margin-left: auto;
  transition: color 0.15s;
}

.poll-delete-btn:hover {
  color: #ff4444;
}

.poll-anon-badge {
  font-size: 0.78em;
  color: #555;
  display: flex;
  align-items: center;
  gap: 3px;
}

.poll-public-badge {
  color: #6a9fb5;
}

.poll-anon-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8em;
  color: #aaa;
  cursor: pointer;
  user-select: none;
  border: 1px solid rgba(255,255,255,0.12);
  padding: 0px 10px;
  transition: color 0.15s, border-color 0.15s;
}

.poll-anon-toggle:has(.poll-anon-checkbox:checked) {
  color: var(--accent);
  border-color: var(--accent);
}

.poll-anon-checkbox {
  display: none;
}

.poll-option-voters {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 4px;
  align-items: center;
}

.poll-voter-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,0.1);
  transition: transform 0.12s, border-color 0.12s;
  display: block;
}

.poll-option-voters a:hover .poll-voter-avatar {
  transform: scale(1.2);
  border-color: var(--accent);
}

.sidebar-poll-preview {
  display: inline-flex;
  align-items: baseline;
  margin-top: 4px;
  font-size: 0.8em;
  color: #888;
  text-decoration: none;
  transition: color 0.12s;
}

.sidebar-poll-preview i {
  color: var(--accent);
  opacity: 0.7;
}

.sidebar-poll-preview:hover {
  color: var(--accent);
}


.comments-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-right: 5px;
  padding-left: 5px;
  padding-top: 5px;
}

body.layout-modern .comments-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1 1 auto;
  /* Grow to fill #comments-container */
  overflow-y: auto;
  /* Scroll comments here, not on the container */
  overflow-x: hidden;
  min-height: 0;
  background: var(--bg);
}

body.layout-legacy .comments-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 0 0 auto;
  /* Natural height */
  overflow: visible;
  /* Unified scrolling */
  min-height: 0;
  padding-right: 0px;
  padding-left: 0px;
  padding-top: 0px;
}

body.layout-legacy .blahlol {
  background: var(--bg);
  border-left: 1px solid var(--nav-border-color);
  border-right: 1px solid var(--nav-border-color);
  border-top: 1px solid var(--nav-border-color);
}

/* Comments hidden ("c"): nothing below closes the box, so it gets its own bottom border.
   comments-sliding = the comments are sliding up behind it or back down (comments.js); the border
   stays for the whole slide in both directions */
body.layout-legacy.comments-hidden .blahlol,
body.layout-legacy.comments-sliding .blahlol {
  border-bottom: 1px solid var(--nav-border-color);
}

body.layout-legacy .comments-list:not(:has(.comment)) {
  border: none;
}

body.layout-legacy .scroll-nav-wrapper {
  position: absolute;
  top: -75px;
  bottom: 0;
  right: -45px;
  width: 40px;
  pointer-events: none;
  z-index: 0;
  display: none;
}

body.layout-legacy .scroll-to-bottom {
  position: sticky;
  top: calc(100vh - 80px);
  width: 40px;
  height: 40px;
  background: var(--nav-bg);
  border: 1px solid var(--nav-border-color);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0.8;
}

body.layout-legacy .scroll-to-bottom:hover {
  background: var(--nav-link-hover-bg);
  opacity: 1;
  transform: translateY(-2px);
}



body.layout-legacy .scroll-to-bottom .icon-up {
  display: none;
}

body.layout-legacy .scroll-to-bottom.is-at-bottom .icon-up {
  display: block;
}

body.layout-legacy .scroll-to-bottom.is-at-bottom .icon-down {
  display: none;
}

body.layout-legacy .scroll-to-bottom svg {
  width: 20px;
  height: 20px;
}




.comments-list {
  scrollbar-width: thin;
}

.comment {
  display: flex;
  gap: 15px;
  padding: 10px;
  background-color: var(--comment-bg);
  /* Very light seethrough */
  border: 1px solid var(--nav-border-color);
  border-radius: 0;
  /* No rounded corners */
  position: relative;
  isolation: isolate;
  padding-bottom: 25px;
  /* Room for absolute permalink */
  overflow: hidden;
}

.comment > * {
  position: relative;
  z-index: 1;
}

.comment::before {
  content: "";
  display: var(--comment-banner-display, block);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: var(--comment-banner-max-height, 300px);
  background-image: var(--author-banner, none);
  background-position: var(--author-banner-position, center top);
  background-size: var(--author-banner-size, 100% auto);
  background-repeat: var(--author-banner-repeat, no-repeat);
  opacity: var(--author-banner-opacity, 0.08);
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  -webkit-mask-image: var(--comment-banner-mask, linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%));
  mask-image: var(--comment-banner-mask, linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%));
}

.comment.tall-comment::before {
  -webkit-mask-image: var(--comment-banner-mask, linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 50%));
  mask-image: var(--comment-banner-mask, linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 50%));
}

.comment.deleted {
  opacity: 0.5;
}

.comment-avatar img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 0;
  /* Square avatars */
}

.comment-avatar::after {
  content: "";
  display: block;
  height: 20px;
}

.comment-body {
  flex: 1;
  min-width: 0;
}

.comment-body {
  flex: 1;
  min-width: 0;
}

.comment-content p {
  margin: 0;
}

.comment-header {
  margin-bottom: 8px;
  font-size: 0.85em;
  color: #888;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  line-height: normal;
  flex-wrap: nowrap;
  gap: 2px 10px;
}

.comment-header-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  min-width: 0;
  flex-shrink: 1;
}

.pinned-badge {
  background: var(--accent);
  color: var(--nav-bg);
  font-size: 0.8em;
  padding: 1px 6px;
  border-radius: 2px;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  line-height: 1;
  margin-right: 5px;
}

.comment-header-left .pinned-badge {
  padding: 2px 3px;
}

.pinned-badge svg {
  width: 10px;
  height: 10px;
  display: block;
  stroke-width: 3;
}

.comment-footer {
  margin-top: 8px;
  font-size: 0.85em;
  color: #888;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 10px;
}

.comment-footer-left,
.comment-footer-right {
  display: flex;
  align-items: center;
  min-width: 0;
}

.comment-footer-right {
  flex-grow: 1;
  justify-content: flex-end;
}

.comment-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}

.comment-header button,
.comment-header a,
.comment-header span,
.comment-footer button,
.comment-footer a,
.comment-footer span {
  padding: 0;
  margin: 0;
  line-height: 1;
  font-family: inherit;
  font-size: inherit;
  vertical-align: top;
}

.comment-meta button,
.comment-meta a {
  background: none;
  border: none;
  cursor: pointer;
  color: #888;
  padding-right: 8px;
  display: flex;
  align-items: center;
  transition: color 0.1s;
  text-decoration: none;
}

.comment-meta button svg,
.comment-meta a svg {
  width: 14px;
  height: 14px;
  display: block;
  margin-right: 2px;
}

.comment-header button:hover,
.comment-header a:hover,
.comment-footer button:hover,
.comment-footer a:hover {
  color: var(--white);
}

.report-comment-btn:hover {
  opacity: 1 !important;
  color: var(--accent, #e91e63) !important;
}

.comment-permalink {
  position: absolute;
  bottom: 5px;
  left: 10px;
  font-size: 0.7em !important;
  color: #555 !important;
  white-space: nowrap;
  font-family: 'VCR';
}

.comment-permalink:hover {
  color: #888 !important;
}

.comment-author {
  font-weight: bold;
  color: var(--accent);
  margin-right: 2px;
  padding-right: 0 !important;
  white-space: nowrap;
  flex-shrink: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.anon-tripcode {
  font-family: monospace;
  font-size: 0.82em;
  font-weight: 600;
  color: #00d2ff;
  background: rgba(0, 210, 255, 0.08);
  border: 1px solid rgba(0, 210, 255, 0.2);
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 4px;
  cursor: help;
  user-select: all;
  letter-spacing: 0.5px;
  display: inline-block;
  vertical-align: middle;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.anon-tripcode:hover {
  background: rgba(0, 210, 255, 0.18);
  border-color: rgba(0, 210, 255, 0.4);
}

.comment-time {
  margin-right: 5px;
  font-size: 0.8em;
  color: #777;
  margin-bottom: 1px;
  text-decoration: none;
  align-self: baseline;
  flex-shrink: 0;
  white-space: nowrap;
}

.comment-time:hover {
  color: #aaa;
  text-decoration: underline;
}


.admin-delete-btn:hover,
.delete-btn:hover {
  color: #ff4444 !important;
}

.admin-pin-btn.active {
  color: var(--accent) !important;
}


.comment-permalink {
  color: #666;
  text-decoration: none;
}

.comment-permalink:hover {
  text-decoration: underline;
}

.reply-btn,
.quote-btn {
  background: none;
  border: none;
  color: #888;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  margin: 0;
}

.comment-context-link,
.comment-timestamp {
  color: var(--accent);
  text-decoration: none;
  font-family: 'VCR', monospace;
  font-size: 0.9em;
  opacity: 1;
  cursor: pointer;
  vertical-align: top;
  white-space: nowrap;
}

.comment-context-link:hover,
.comment-timestamp:hover {
  opacity: 1;
  text-decoration: underline;
}

.linear-view .comment {
  margin-left: 0 !important;
}

.linear-view .comment-replies {
  display: none !important;
}

@keyframes comment-highlight {
  0% {
    background: rgba(var(--accent-rgb, 255, 255, 255), 0.3);
  }

  100% {
    background: rgba(255, 255, 255, 0.03);
  }
}

.highlight-comment {
  animation: comment-highlight 2s ease-out;
  border-color: var(--accent) !important;
}

.comment-preview-popup {
  background: #000000 !important;
  /* Absolute solid black */
  border: 1px solid var(--accent);
  box-shadow: 0 20px 50px #000000;
  /* Fully opaque black shadow */
  padding: 15px;
  max-width: min(600px, calc(100vw - 30px));
  max-height: 500px;
  overflow-y: auto;
  pointer-events: auto;
  opacity: 1 !important;
  transform: translateY(5px);
  animation: preview-fade-in 0.1s forwards ease-out;
  /* Faster animation */
  z-index: 1000001;
}

.comment-preview-popup .comment {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

@keyframes preview-fade-in {
  to {
    transform: translateY(0);
  }
}

.comment-backlinks {
  display: contents;
}

.comments-header-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 15px;
  padding: 0 5px;
}

.display-mode-selector {
  display: flex;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 4px;
  gap: 4px;
}

.mode-btn {
  background: transparent;
  border: none;
  color: #888;
  padding: 6px 14px;
  cursor: pointer;
  font-size: 0.8em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mode-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

.mode-btn.active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.mode-btn i {
  font-size: 1.1em;
}

.comment-backlinks a {
  margin-left: 4px;
  text-decoration: none;
  color: var(--accent);
}

.comment-backlinks a:hover {
  text-decoration: underline;
}

.comment-content {
  line-height: 1.4;
  word-break: break-word;
  white-space: pre-wrap;
}

.spoiler {
  background-color: #000 !important;
  color: #000 !important;
  cursor: pointer !important;
  transition: color 0.1s;
  border-radius: 4px;
  pointer-events: auto !important;
  /* Ensure interaction even if parent has pointer-events: none */
}

/* Ensure spoilers properly envelope media */
.spoiler:has(.vocaroo-embed-wrap, .video-embed-wrap, .yt-embed-wrap, .audio-embed-wrap, img, video, iframe, audio) {
  display: inline-block;
  width: max-content;
  max-width: 100%;
  vertical-align: middle;
}

.spoiler .vocaroo-embed-wrap,
.spoiler .video-embed-wrap,
.spoiler .audio-embed-wrap {
  display: inline-block !important;
  vertical-align: middle;
  width: auto !important;
  max-width: 480px;
  margin: 4px 2px;
}

.spoiler .yt-embed-wrap {
  display: inline-block !important;
  width: 480px;
  max-width: 100%;
  /* YouTube needs a base width for the aspect ratio padding trick */
}

.spoiler img,
.spoiler video,
.spoiler iframe,
.spoiler audio,
.spoiler .sidebar-video-link {
  display: inline-block;
  vertical-align: middle;
  filter: brightness(0);
  background-color: #000 !important;
  color: #000 !important;
  pointer-events: none;
  transition: filter 0.1s;
}

.spoiler .mention,
.spoiler a {
  filter: brightness(0);
  background-color: #000 !important;
  color: #000 !important;
  pointer-events: none;
  transition: filter 0.1s;
}

.spoiler:hover {
  color: #fff !important;
}

.spoiler:hover img,
.spoiler:hover video,
.spoiler:hover iframe,
.spoiler:hover audio,
.spoiler:hover .sidebar-video-link,
.spoiler:hover .mention,
.spoiler:hover a {
  filter: none;
  background-color: transparent !important;
  color: inherit !important;
  pointer-events: auto;
}

.spoiler.revealed {
  color: #fff !important;
}

.spoiler.revealed img,
.spoiler.revealed video,
.spoiler.revealed iframe,
.spoiler.revealed audio,
.spoiler.revealed .sidebar-video-link,
.spoiler.revealed .mention,
.spoiler.revealed a {
  filter: none;
  background-color: transparent !important;
  color: inherit !important;
  pointer-events: auto;
}

.blur-text {
  filter: blur(10px);
  cursor: pointer !important;
  transition: filter 0.2s ease;
  pointer-events: auto !important;
  display: inline-block;
  max-width: 100%;
}

.blur-text:hover,
.blur-text.revealed {
  filter: blur(0);
}

.blur-text img,
.blur-text video,
.blur-text iframe,
.blur-text audio,
.blur-text .vocaroo-embed-wrap,
.blur-text .video-embed-wrap,
.blur-text .yt-embed-wrap,
.blur-text .audio-embed-wrap {
  filter: blur(10px);
  transition: filter 0.2s ease;
}

.blur-text:hover img,
.blur-text:hover video,
.blur-text:hover iframe,
.blur-text:hover audio,
.blur-text:hover .vocaroo-embed-wrap,
.blur-text:hover .video-embed-wrap,
.blur-text:hover .yt-embed-wrap,
.blur-text:hover .audio-embed-wrap,
.blur-text.revealed img,
.blur-text.revealed video,
.blur-text.revealed iframe,
.blur-text.revealed audio,
.blur-text.revealed .vocaroo-embed-wrap,
.blur-text.revealed .video-embed-wrap,
.blur-text.revealed .yt-embed-wrap,
.blur-text.revealed .audio-embed-wrap {
  filter: none;
}

.comment-children {
  margin-top: 15px;
  margin-left: 10px;
  border-left: 1px solid var(--nav-border-color);
  padding-left: 15px;
}

@media screen and (max-width: 600px) {
  .comment-children {
    margin-left: 5px;
    padding-left: 8px;
  }
}

.loading:not(.submit-comment),
.error {
  text-align: center;
  color: #888;
}

.deleted-msg {
  color: #666;
  font-style: italic;
}


html[theme="f0ck95"] #tags .badge>a:first-child {
  text-shadow: 1px 1px #8080805e;
}

html[theme="f0ck95"] .badge.badge-greentext.badge-light.mr-2 {
  color: #b5bd68;
}

html[theme="f0ck95"] .pagination>span {
  border: 1px dashed grey !important;
  color: black;
  text-shadow: none;
}

html[theme="f0ck95"] .dropdown-menu {
  border-color: gray;
}

html[theme="f0ck95"] .err span {
  text-shadow: 0px 0px transparent;
}

html[theme="f0ck95"] .err {
  background: silver;
  border: outset 2px gray;
}

html[theme="f0ck95"] div.posts>a::after {
  color: var(--white);
}

html[theme="f0ck95"] .about {
  color: black;
}

html[theme="f0ck95"] .badge-dark,
#themeselector {
  border: inset 1px gray;
  background: #a8a5a5;
}

html[theme="f0ck95"] .badge-light {
  color: #000;
  text-shadow: none;
  border: 1px outset;
  border-radius: 0;
}

html[theme="f0ck95"] .badge-success {
  color: #000;
  text-shadow: none;
  border: 1px outset;
  border-radius: 0;
}

html[theme="f0ck95"] .badge-danger {
  color: #000;
  text-shadow: none;
  border: 1px outset;
  border-radius: 0;
}

html[theme="f0ck95"] img.avatar {
  border-top-left-radius: 0;
}

html[theme="f0ck95"] ._204863 {
  content: " ";
  background: -webkit-linear-gradient(left, #08216b, #a5cef7);
  background: linear-gradient(90deg, #08216b, #a5cef7);
  text-align: left;
  width: 100%;
  color: white;
  height: auto;
  border-left: inset 2px silver;
  border-top: inset 2px silver;
  border-right: outset 2px silver;
  border-bottom: outset 2px silver;
  line-height: 1.7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 4px;
  box-sizing: border-box;
}

html[theme="f0ck95"] ._204863 .location {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

html[theme="f0ck95"] ._204863 .location::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: var(--favicon-url, url('/s/img/favicon.gif'));
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  flex-shrink: 0;
}

html[theme="f0ck95"] .iconset#a_delete {
  stroke: var(--black);
}

html[theme="f0ck95"] .iconset#a_favo {
  fill: var(--black);
}

html[theme="f0ck95"] .gapD {
  height: 16px;
  background: #08f;
  width: max-content;
  display: flex;
}

html[theme="f0ck95"] svg.iconset {
  display: inline-block;
  height: 18px;
  cursor: pointer;
  width: 21px;
  background: silver;
  margin: 1px;
  padding: 1px;
  border: 1px outset silver;
  position: relative;
  right: 2px;
}

html[theme="f0ck95"] .gapRight {
  display: flex;
  align-items: center;
}

html[theme="f0ck95"] input {
  color: #000;
}

html[theme="f0ck95"] .embed-responsive-image {
  left: 2px;
  right: 2px;
}

html[theme="f0ck95"] ._error_message {
  color: black;
  text-shadow: none;
}

html[theme="f0ck95"] ._error_topbar {
  background: -webkit-linear-gradient(left, #08216b, #a5cef7);
}

html[theme="f0ck95"] .f0ckgle {
  color: black;
}

html[theme="f0ck95"] .admin-search button {
  color: black;
}

/* f0ck95dARK */
html[theme='f0ck95d'] {
  --accent: #fff;
  --accent-rgb: 255, 255, 255;
  --bg: #0e0f0f;
  --black: #000;
  --white: #fff;
  --gray: silver;
  --nav-bg: #0b0a0a;
  --nav-brand-border: inset 1px black;
  --nav-brand-bg: #0000;
  --navigation-links-bg: #0b0b0b;
  --navigation-links-background-linear-gradient: rgba(0, 0, 0, .12), rgba(0, 0, 0, 0);
  --navigation-links-border-color: rgba(0, 0, 0, .8) rgba(0, 0, 0, .65) rgba(0, 0, 0, .5);
  --navigation-links-box-shadow: rgba(255, 255, 255, .05);
  --nav-link-background-linear-gradient: rgba(255, 255, 255, .04), rgba(255, 255, 255, 0);
  --nav-link-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 0px rgba(255, 255, 255, .04), inset 0 0px rgba(0, 0, 0, .15), 0 0px 0px rgba(0, 0, 0, .1);
  --nav-link-hover-bg: #333131;
  --nav-border-color: #282727;
  --dropdown-bg: #333131;
  --dropdown-item-hover: #444242;
  --nav-brand-font: 'VCR';
  --font: monospace;
  --pagination-background: #0b0a0a;
  --pagination-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 0px rgba(255, 255, 255, .04), inset 0 0px rgba(0, 0, 0, .15), 0 0px 0px rgba(0, 0, 0, .1);
  --pagination-anchor-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 1px rgba(255, 255, 255, .04), inset 0 -1px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .1);
  --pagination-background-hover: #8a8989;
  --pagination-border-color: rgba(0, 0, 0, .8) rgba(0, 0, 0, .65) rgba(0, 0, 0, .5);
  --metadata-bg: #0b0a0a;
  --badge-bg: #0f0e0e;
  --posts-meta-bg: #000000b8;
  --badge-sfw: teal;
  --badge-nsfw: #a72828;
  --badge-nsfl: #660000;
  --badge-tag: #2f2f2f;
  --scrollbar-color: #555;
  --scroller-bg: #424242;
  --footbar-color: #fff;
  --loading-indicator-color: #fff;
  --img-border-width: 0;
  --img-border-color: #808080;
  --maximize_button: #fff;
  --bg-gradient: linear-gradient(0deg, rgba(0, 0, 0, 0.94) 0%, rgb(6, 6, 6) 10%, rgb(43, 43, 43) 100%);
  /* appearance */
  background: black;
  --motd-bg: #111;
  --comment-bg: #0b0a0a;
}

html[theme="f0ck95d"] .item_title,
html[theme="f0ck95d"] .item-title {
  background: black;
  border-left: 2px solid gray;
  border-right: 2px solid gray;
}

html[theme="f0ck95d"] .err {
  background: #4c4c4c;
  border: 2px outset gray;
}

html[theme="f0ck95d"] ._error_topbar {
  background: #081f3e;
}

html[theme="f0ck95d"] ._204863 {
  content: " ";
  background: -webkit-linear-gradient(left, #0e111a, #073c71);
  background: linear-gradient(90deg, #0e111a, #073c71);
  text-align: left;
  width: 100%;
  color: white;
  height: auto;
  border: 2px solid gray;
  line-height: 1.7;
  display: flex;
  align-items: center;
  padding: 0px 5px;
  box-sizing: border-box;
}

html[theme="f0ck95d"] ._204863 .location {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

html[theme="f0ck95d"] ._204863 .location::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: var(--favicon-url, url('/s/img/favicon.gif'));
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

html[theme="f0ck95d"] .embed-responsive-image {
  left: 2px;
  right: 2px;
}

html[theme="f0ck95d"] .media-object {
  border-left: 2px solid gray;
  border-right: 2px solid gray;
  background: black;
  border-bottom: 2px solid gray;
}



html[theme="f0ck95d"] .embed-responsive-image {
  border: none;
}

html[theme="f0ck95d"] .embed-responsive-image {
  background: #0000;
}

html[theme="f0ck95d"] html,
body {
  color: var(--white);
}

html[theme="f0ck95d"] a {
  color: var(--white);
}

html[theme="f0ck95d"] span#favs {
  background: rgba(255, 255, 255, .04), rgba(255, 255, 255, 0);
  background-image: linear-gradient(to bottom, var(--nav-link-background-linear-gradient));

}

html[theme="f0ck95d"] .nav-link,
.pagination>a,
.pagination>span {
  border-radius: 0;
  border-left: inset 1px black;
  border-bottom: outset 1px black;
  border-right: outset 1px black;
  border-top: 1px inset black;
}

html[theme="f0ck95d"] .metadata {
  border-left: inset 1px silver;
  border-bottom: outset 1px silver;
  border-right: outset 1px silver;
  border-top: inset 2px silver;
  color: var(--accent);
}

html[theme="f0ck95d"] span.placeholder {
  border-left: 1px solid var(--gray);
  opacity: 0.5;
}

html[theme="f0ck95d"] #prev {
  color: white;
}

html[theme="f0ck95d"] #next {
  color: white;
}

/* same */
/* html[theme="f0ck95d"] .navbar-brand:hover {
  background: transparent;
} */

html[theme="f0ck95d"] .pagination>span {
  border: 1px dashed var(--accent) !important;
  color: white;
  text-shadow: none;
}

html[theme="f0ck95d"] .dropdown-menu {
  border-left: inset 1px #4c4c4c;
  border-bottom: outset 1px #4c4c4c;
  border-right: outset 1px #4c4c4c;
  border-top: outset 0px #4c4c4c;
}

html[theme="f0ck95d"] .err span {
  text-shadow: 0px 0px transparent;
}

html[theme="f0ck95d"] div.posts>a::after {
  color: var(--white);
}

html[theme="f0ck95d"] .about {
  color: var(--white);
}

html[theme="f0ck95d"] .badge-dark,
#themeselector {
  border: inset 1px gray;
  background: rgba(255, 255, 255, .04), rgba(255, 255, 255, 0);
  background-image: linear-gradient(to bottom, var(--nav-link-background-linear-gradient));
  box-shadow: var(--nav-link-box-shadow);
}

html[theme="f0ck95d"] .badge-light {
  text-shadow: none;
  border: 1px outset;
  border-radius: 0;
}

html[theme="f0ck95d"] .badge-success {
  text-shadow: none;
  border: 1px outset;
  border-radius: 0;
}

html[theme="f0ck95d"] .badge-danger {
  text-shadow: none;
  border: 1px outset;
  border-radius: 0;
}

html[theme="f0ck95d"] .admin-search button {
  color: black;
}

html[theme="f0ck95d"] .embed-responsive.embed-responsive-16by9 {
  background: black;

}

/* fullscreen */
html[res="fullscreen"] ._204863 {
  border-top: none;
}

html[res="fullscreen"] .metadata {
  border-bottom: none;
}

html[res="fullscreen"] .embed-responsive-16by9::before {
  padding-top: 32.99%;
}

html[res="fullscreen"] .container {
  max-width: 80% !important;
  padding: 0 !important;
}

@media screen and (max-width: 600px) {
  html[res="fullscreen"] .container {
    max-width: 100% !important;
  }

  html[res="fullscreen"] #main {
    padding: 0 !important;
  }
}

html[res="fullscreen"] span#favs {
  padding: 0 !important;
}


/* Global scrollbar rules */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-color);
  background-clip: content-box;
  border: 3px solid transparent;
  border-radius: 10px;
  transition: background-color 0.2s;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--accent);
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

* {
  scrollbar-color: var(--scrollbar-color) transparent;
  scrollbar-width: thin;
}

/* Linux Firefox "thin" is often too small and hard to see. Use auto there. */
/* html.is-linux.is-firefox *:not(html):not(body) {
  scrollbar-width: auto;
} */

/* Strictly hide root body and html scrollbar everywhere - eliminates gutter spacing */
html,
body {
  scrollbar-gutter: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

*,
::before,
::after {
  box-sizing: border-box;
  outline: 0;
  -webkit-tap-highlight-color: transparent;
}

@font-face {
  font-family: 'VCR';
  src: url('/s/vcr.ttf') format('truetype');
  /* https://www.dafont.com/vcr-osd-mono.font */
}

html {
  background-color: var(--bg) !important;
  background: var(--bg) !important;
}


body {
  background: transparent !important;
  color: var(--white);
  margin: 0;
  font-family: var(--font);
  line-height: 2;
  overflow-x: hidden;
  font-size: medium;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

html {
  width: 100%;
  height: 100%;
  scrollbar-gutter: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}


.noscript-badge {
  display: block;
}

a {
  color: var(--accent)
    /* !important */
  ;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

a.post_source:hover,
a.id-link:hover {
  text-decoration: underline;
}

a.btn.disabled {
  pointer-events: none;
  user-select: none;
}

.btn.disabled,
.btn:disabled {
  user-select: none;
  font-weight: bold;
  text-shadow: 1px 1px 1px var(--black);
}

h5 {
  margin: 0;
  font-size: x-large;
}

.mr-2 {
  margin-right: 0.5rem !important;
}

/* Thumbnail size — driven by data-thumb-size on <html> (set by scroller grid-mode picker) */
:root { --thumb-min: 118px; }
html[data-thumb-size="s"]  { --thumb-min:  80px; }
html[data-thumb-size="m"]  { --thumb-min: 118px; }
html[data-thumb-size="l"]  { --thumb-min: 180px; }
html[data-thumb-size="xl"] { --thumb-min: 260px; }

div.posts {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--thumb-min, 118px), 1fr));
  grid-auto-flow: dense;
  justify-items: center;
  grid-gap: 5px;
  margin: 0;
  padding: 0;
  margin-bottom: 35px;
}

/* Mobile: Ensure at least 3 columns for S/M, and at least 2 columns for L/XL */
@media (max-width: 600px) {
  html:not([data-thumb-size="l"]):not([data-thumb-size="xl"]) div.posts {
    grid-template-columns: repeat(3, 1fr);
  }

  html[data-thumb-size="l"] div.posts,
  html[data-thumb-size="xl"] div.posts {
    grid-template-columns: repeat(2, 1fr);
  }
}

div.posts>a:not(.notif-item) {
  display: inline-block;
  position: relative;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  transition: box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              outline-color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

div.posts>a:not(.notif-item)::before {
  content: "";
  display: block;
  margin-top: 100%;
}

div.posts>a:not(.notif-item):hover,
div.posts>a:not(.notif-item):focus-visible,
div.posts>a:not(.notif-item).touch-active {
  box-shadow: 0 0 0 1px var(--white);
}

div.posts>a:not(.notif-item)::after {
  position: absolute;
  right: 0;
  top: 0;
  content: attr(data-ext) " / " attr(data-user);
  color: var(--white);
  text-shadow: 0px 1px var(--black);
  font-size: 10px;
  background: var(--posts-meta-bg);
  visibility: hidden;
  width: 100%;
  text-align: center;
  font-family: vcr;
  text-transform: uppercase;
  word-break: break-word;
}

div.posts>a:not(.notif-item):hover::after,
div.posts>a:not(.notif-item):focus-visible::after,
div.posts>a:not(.notif-item).touch-active::after {
  visibility: visible;
}

/* Navbar */
.nav {
  background: var(--bg);
  text-align: left;
}

/* .navbar layout defined in view-specific navbar section below */


.navbar.scrolled {
  background: var(--nav-bg, #2b2b2b) !important;
  /*box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);*/
}

.navbar.scrolled .navbar-brand {
  /*background: transparent !important;*/
}

.navbar-brand {
  padding-right: 5px;
  padding-left: 5px;
}

.navbar-brand:hover {
  text-decoration: none;
  transition: ease all .2s;
  background: var(--black);
}

span.f0ck {
  font-family: var(--nav-brand-font);
  font-size: 20px;
  text-shadow: 1px 1px 1px var(--black), 0px 0px 0px var(--green), -1px -1px 0px var(--black), 1px -1px 0px var(--black), -1px 1px 0px var(--black), 0px 0px 0px var(--green);
}

.navbar.navbar-expand-lg {
  background: var(--nav-bg);
}

.navbar-expand-lg .navbar-collapse {
  display: flex;
  flex-basis: auto;
}

.navbar-collapse {
  flex-grow: 1;
}

#navbarSupportedContent {
  padding: 0;
}

.nav-link-identifier {
  width: 100%;
}

.navbar-expand-lg .navbar-nav {
  flex-direction: row;
}

.navbar-nav {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 5px 0 5px 0;
  margin-bottom: 0;
  list-style: none;
  margin: 0;
  align-self: center;
  margin-left: .5rem;
  margin-right: .5rem;
}

ul.navbar-nav li.nav-item {
  margin-right: .5rem;
}

.navigation-links {
  display: flex;
  border: 1px solid var(--navigation-links-border-color);
  background: var(--navigation-links-bg);
}

.nav-item {
  width: auto;
  white-space: nowrap;
  text-align: center;
}

.nav-link {
  padding: 0;
  padding-right: 0;
  padding-left: 0;
  display: flex;
  justify-content: center;
  min-width: 17px;
  border: 1px solid var(--black);
  border-radius: 3px;
  background-image: linear-gradient(to bottom, var(--nav-link-background-linear-gradient));
  box-shadow: var(--nav-link-box-shadow);
}

.navbar-expand-lg .navbar-nav .nav-link,
.pagination>a,
.pagination>span {
  padding-right: .5rem;
  padding-left: .5rem;
}

.pagination>a,
.pagination>span {
  margin-right: 0px;
  margin-left: 5px;
}

.nav-item:hover>a:hover,
.dropdown-item:hover>a:hover {
  background-color: var(--nav-link-hover-bg);
}

.nav-link[data-toggle="dropdown"].ddcontent::after {
  content: "\00a0(" attr(content) ")\00a0\25bc";
}

.nav-link[data-toggle="dropdown"]:not(.ddcontent)::after {
  content: "\00a0\25bc";
}

.mandy {
  visibility: hidden;
}

@media (max-width: 444px) {
  .mandy {
    position: fixed;
    width: inherit;
    height: 100%;
    top: 0;
    z-index: -1;
    bottom: 25px;
    visibility: visible;
  }

  #randbutton {
    height: inherit;
    width: inherit;
    background: var(--bg);
    border: none;
    transition: .2s ease;
  }

  #randbutton:active {
    background: var(--gray);
    transition: .2s ease;
  }

  /* .metadata {
    margin-bottom: 45px;
  } */

  .embed-responsive-16by9::before {
    padding-top: 75% !important;
  }

  .pagination {
    justify-content: center !important;
  }
}

@media (max-width: 1240px) {
  .nav-link[data-toggle="dropdown"]::after {
    content: "" !important;
  }
}

@media (max-width: 768px) {
  /*   .nav-link[data-toggle="dropdown"]::after {
  content: "" !important;
  } */

  .fa-solid.fa-angle-up,
  .fa-regular.fa-image {
    margin-right: 5px;
  }

  .navbar {
    display: flex !important;
    flex-wrap: wrap !important;
  }

  .navbar-header {
    flex: 1;
  }

  .nav-right-group {
    flex-shrink: 0;
    margin-left: 0;
    padding: 0 8px;
  }

  /* nav-left-group / navbarContent spans full width on the second row */
  .nav-left-group {
    width: 100%;
    order: 10;
  }

  .navbar-brand {
    grid-area: unset !important;
  }

  .navigation-links {
    grid-row: 2;
  }

  .navbar-expand-lg .navbar-nav {
    justify-content: center;
  }

  #navbarSupportedContent {
    grid-row: 3;
  }

  /* On mobile: center the notification dropdown in the viewport */
  .nav-right-group .notif-dropdown {
    right: 0;
    left: auto;
    transform: none;
  }

  /* Hide caret arrow on mobile */
  .nav-right-group .notif-dropdown::before,
  .nav-right-group .notif-dropdown::after {
    display: none;
  }
}

span.placeholder {
  border-left: 1px solid var(--accent);
  margin-left: 3px;
  user-select: none;
}

.navbar .nav-item .dropdown-menu {
  display: none;
}

.dropup,
.dropright,
.dropdown,
.dropleft {
  position: relative;
}

.navbar .nav-item:hover .dropdown-menu {
  display: block;
}

.dropdown:hover .nav-link {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  transition: .2s ease;
  background-color: var(--nav-link-hover-bg);
}

.navbar-nav .dropdown-menu {
  float: none;
}

.dropdown-menu {
  background: var(--dropdown-bg);
  position: absolute;
  top: 100%;
  width: 100%;
  z-index: 1000;
  min-width: calc(100% - 10px);
  padding: 0;
  margin: 0;
  font-size: 1rem;
  text-align: center;
  list-style: none;
  border-left: 1px solid;
  border-right: 1px solid;
  border-bottom: 1px solid;
  border-color: var(--black);
}

.dropdown-item {
  width: 100%;
  display: block;
}

.dropdown-menu>li:hover {
  background: var(--dropdown-item-hover);
}

.dropdown-menu a {
  width: 100%;
  display: inline-block;
}

@media (max-width: 1056px) {

  /* Navbar grid layout removed for modern-navbar compatibility */

  .pagination-container-fluid {
    justify-content: center;
  }

  .pagination {
    justify-content: flex-end !important;
  }

  .pagination a:nth-last-child(2),
  .pagination a:nth-last-child(3),
  .pagination a:nth-child(2),
  .pagination a:nth-child(3) {
    display: none;
  }

  html,
  body {
    text-align: center;
  }
}

@media (max-width: 1325px) {
  /* ranking page - idea */
  /* .ranking {
    grid-template-columns: 1fr 1fr !important;
  } */

  .by-user,
  .by-stats,
  .by-hoster {
    grid-column: unset !important;
    grid-row: unset !important;
  }
}


@media (max-width: 905px) {
  .ranking {
    display: flex !important;
    flex-flow: column;
    justify-content: center !important;
  }

  .ranking div {
    display: flex;
    flex-flow: column;
  }
}

.media-object {
  text-align: center;
  align-self: center;
  overflow: hidden;
  border: 1px solid #363636;
  border-top: none;
}

/* Pagination */
.pagination-wrapper {
  align-items: center;
  display: flex;
  background: var(--pagination-background);
  border: 1px solid var(--pagination-border-color);
  width: 100%;
}



.pagination-container-fluid {
  display: flex;
  margin-left: 0;
  /* width is auto so right-edge offset shrinks the available space */
  justify-content: center;
  position: fixed;
  bottom: 0;
  left: 0;
  /* Match sidebar width so centering is relative to the content area */
  right: 300px;
  pointer-events: none;
  z-index: 10;
  /* Mirror the sidebar slide transition */
  transition: right 0.3s ease-in-out;
}

/* Modern layout: wider sidebar needs wider offset */
body.layout-modern .pagination-container-fluid {
  right: 400px;
}

/* Sidebar hidden — reclaim the full width */
body.sidebar-right-hidden .pagination-container-fluid,
body.layout-modern.sidebar-right-hidden .pagination-container-fluid {
  right: 0;
}

.bottom-pagination.fixed-pagination {
  margin: 10px auto;
  pointer-events: auto;
  background: rgba(15, 15, 15, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 2px;
  max-width: fit-content;
}

/* Ensure pagination container is hidden when requested */
.pagination-container-fluid[style*="display: none"] {
  display: none !important;
}

.pagination {
  display: flex;
  justify-content: space-around;
  width: 100%;
  padding: 5px;
  color: transparent;
}

.pagination>a,
.pagination>span {
  float: left;
  padding: 0 5px;
  min-width: 17px;
  font-size: 14px;
  font-weight: 500;
  color: var(--accent);
  text-align: center;
}

.pagination>span {
  border: 1px solid var(--accent) !important;
}

@media (max-width: 768px) {
  .pagination>a,
  .pagination>span {
    font-size: 19px;
    min-width: 26px;
    padding: 2px 7px;
  }
}

.pagination :first-child {
  margin-left: 0;
}

.pagination>a {
  text-decoration: none;
  text-shadow: 0 1px var(--black);
  background-clip: padding-box;
  box-shadow: var(--pagination-anchor-box-shadow);
  background-image: linear-gradient(to bottom, var(--nav-link-background-linear-gradient));
}

.pagination>a:hover {
  background-color: var(--pagination-background-hover);
}

.pagination>a:active,
.pagination>span {
  color: var(--accent);
  text-shadow: 0 -1px var(--black);
  box-shadow: var(--pagination-anchor-box-shadow);
  box-shadow: inset 0px -2px 0px var(--accent);
}

/* Content */
@media (max-width: 999px) {
  .container {
    max-width: 960px;
  }

  .dropdown-menu {
    position: absolute;
    left: 0;
  }

  .dropdown-menu li {
    white-space: normal;
    word-wrap: anywhere;
  }
}

.content,
._204863,
.item_title,
.item-title {
  animation: contentSlideIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
  will-change: transform, opacity;
}

.content {
  display: grid;
  justify-content: space-around;
  grid-template-columns: 0fr 1fr 0fr;
  position: relative;
  max-width: 100%;
}

.content.slide-next,
._204863.slide-next,
.item_title.slide-next,
.item-title.slide-next,
#onara-modal .content.slide-next,
#onara-modal ._204863.slide-next,
#onara-modal .item_title.slide-next,
#onara-modal .item-title.slide-next {
  animation: contentSlideInRight 0.45s cubic-bezier(0.16, 1, 0.3, 1) both !important;
  will-change: transform, opacity;
}

.content.slide-prev,
._204863.slide-prev,
.item_title.slide-prev,
.item-title.slide-prev,
#onara-modal .content.slide-prev,
#onara-modal ._204863.slide-prev,
#onara-modal .item_title.slide-prev,
#onara-modal .item-title.slide-prev {
  animation: contentSlideInLeft 0.45s cubic-bezier(0.16, 1, 0.3, 1) both !important;
  will-change: transform, opacity;
}

.content.slide-out-left,
._204863.slide-out-left,
.item_title.slide-out-left,
.item-title.slide-out-left,
#onara-modal .content.slide-out-left,
#onara-modal ._204863.slide-out-left,
#onara-modal .item_title.slide-out-left,
#onara-modal .item-title.slide-out-left {
  animation: contentSlideOutLeft 0.22s cubic-bezier(0.3, 0, 0.8, 1) forwards !important;
  pointer-events: none;
  will-change: transform, opacity;
}

.content.slide-out-right,
._204863.slide-out-right,
.item_title.slide-out-right,
.item-title.slide-out-right,
#onara-modal .content.slide-out-right,
#onara-modal ._204863.slide-out-right,
#onara-modal .item_title.slide-out-right,
#onara-modal .item-title.slide-out-right {
  animation: contentSlideOutRight 0.22s cubic-bezier(0.3, 0, 0.8, 1) forwards !important;
  pointer-events: none;
  will-change: transform, opacity;
}

.content.fade-in-zoom,
._204863.fade-in-zoom,
.item_title.fade-in-zoom,
.item-title.fade-in-zoom {
  animation: contentFadeInZoom 0.35s cubic-bezier(0.16, 1, 0.3, 1) both !important;
  will-change: transform, opacity;
}

.content.fade-out-zoom,
._204863.fade-out-zoom,
.item_title.fade-out-zoom,
.item-title.fade-out-zoom {
  animation: contentFadeOutZoom 0.18s cubic-bezier(0.3, 0, 0.8, 1) forwards !important;
  pointer-events: none;
  will-change: transform, opacity;
}

@keyframes contentFadeInZoom {
  0% {
    opacity: 0;
    transform: scale(1.03);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes contentFadeOutZoom {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.97);
  }
}

@keyframes contentSlideIn {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes contentSlideInRight {
  0% {
    opacity: 0;
    transform: translateX(70px) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes contentSlideInLeft {
  0% {
    opacity: 0;
    transform: translateX(-70px) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes contentSlideOutLeft {
  0% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(-70px) scale(0.97);
  }
}

@keyframes contentSlideOutRight {
  0% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(70px) scale(0.97);
  }
}

.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  z-index: 1;
  position: relative;
  padding-top: 5vh;
  padding-bottom: 15px;
}

.populateME {
  position: relative;
  left: 5px;
}

.gapRight {
  align-items: center;
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
  vertical-align: middle;
}

.admin-lock-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  min-width: 21px;
  cursor: pointer;
  background: #312c2c;
  margin: 1px;
  padding: 0 2px;
  border: 1px outset #221d1d;
  color: var(--white);
  font-size: 11px;
  text-transform: uppercase;
  line-height: normal;
  transition: all 0.1s ease;
  vertical-align: middle;
}

.iconset-svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  stroke: none;
  display: block;
}

#a_hall {
  color: inherit;
}

.gapLeft {
  align-self: center;
}

.imageDoor {
  width: 25px;
  height: 29px;
  display: inline-flex;
  padding: 2px;
}

.imageDoor img {
  background: var(--accent);
  width: inherit;
}

._204863 {
  content: " ";
  background: -webkit-linear-gradient(left, #131313, #4f4a4f);
  text-align: left;
  width: 100%;
  color: var(--white);
  height: auto;
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: auto 1fr auto;
  line-height: 1.7;
  border: 1px solid #363636;
  z-index: 1;
  position: relative;
}

.location a,
.location .location-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease;
}

.location a:hover,
.location .location-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

.chan-rehost-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 16px;
  min-width: 100px;
  box-sizing: border-box;
  white-space: nowrap;
  flex-shrink: 0;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: inherit;
  background: rgba(74, 222, 128, 0.15);
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, 0.3);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease;
}

.chan-rehost-action-btn:hover {
  background: rgba(74, 222, 128, 0.28);
  border-color: rgba(74, 222, 128, 0.55);
  color: #4ade80;
  text-decoration: none;
}

.chan-rehost-action-btn:active {
  transform: scale(0.98);
}

.chan-rehost-action-btn.rehosted {
  background: rgba(74, 222, 128, 0.2);
  border-color: rgba(74, 222, 128, 0.4);
  color: #4ade80;
  min-width: auto;
  padding: 4px 12px;
}

.chan-rehost-action-btn.loading {
  opacity: 0.75;
  cursor: wait;
  pointer-events: none;
}

.item_title,
.item-title,
.item-itle {
  width: 100%;
  max-width: 1100px;
  border-top: none;
  padding: 0px 0px 5px 0px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.82em;
  font-family: inherit;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.6;
  box-sizing: border-box;
  min-height: calc(1.6em + 5px) !important;
  z-index: 1;
  position: relative;
}

.item_title_text:empty::before,
.item_title:empty::before,
.item-title:empty::before,
.item-itle:empty::before {
  content: '\00a0';
  visibility: hidden;
  user-select: none;
  pointer-events: none;
}

.item_title:has(.info-title-edit-wrap),
.item-title:has(.info-title-edit-wrap),
.item-itle:has(.info-title-edit-wrap) {
  white-space: normal;
  overflow: visible;
}

.item_title:has(.info-title-edit-wrap) .item_title_text {
  cursor: pointer;
  display: inline-block;
  max-width: 100%;
  transition: color 0.15s ease, opacity 0.15s ease;
}

.item_title:has(.info-title-edit-wrap) .item_title_text:hover {
  color: #fff;
}

.item_title_text.no-title,
.item_title_text em {
  font-style: italic;
  color: var(--text-muted, rgba(255, 255, 255, 0.45));
}

.item_title:has(.info-title-edit-wrap) .item_title_text.no-title:hover em,
.item_title:has(.info-title-edit-wrap) .item_title_text:hover em {
  color: var(--accent, #9f0);
}

/* .location {
  padding-left: 5px;
} */

/* ===== Viewport Locking for Index/Feed Page Layout ===== */
html:has(.index-container),
body:has(.index-container) {
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
}

.pagewrapper:has(.index-container),
body:has(.index-container) > .pagewrapper {
  height: calc(100vh - var(--navbar-h, 50px)) !important;
  height: calc(100dvh - var(--navbar-h, 50px)) !important;
  max-height: calc(100vh - var(--navbar-h, 50px)) !important;
  max-height: calc(100dvh - var(--navbar-h, 50px)) !important;
  overflow: hidden !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

#main:has(.index-container),
body:has(.index-container) > .pagewrapper > #main {
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

/* Index page layout with sidebar */
.index-layout-wrapper {
  display: flex;
  width: 100%;
  height: calc(100vh - var(--navbar-h, 50px)) !important;
  height: calc(100dvh - var(--navbar-h, 50px)) !important;
  max-height: calc(100vh - var(--navbar-h, 50px)) !important;
  max-height: calc(100dvh - var(--navbar-h, 50px)) !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
  box-sizing: border-box;
  gap: 0;
}

.index-layout-wrapper .index-container {
  flex: 1 1 auto;
  min-width: 0;
}

@media (min-width: 1000px) {

  /* Reserve space for the fixed sidebar so content doesn't flow behind it */
  .index-layout-wrapper {
    padding-right: 300px;
  }

  /* Modern layout: wider sidebar */
  body.layout-modern .index-layout-wrapper {
    padding-right: 300px;
  }

  /* Collapse reserved space when sidebar is hidden */
  body.sidebar-right-hidden .index-layout-wrapper {
    padding-right: 0;
  }
}

.index-container {
  width: 100%;
  height: calc(100vh - var(--navbar-h, 50px)) !important;
  height: calc(100dvh - var(--navbar-h, 50px)) !important;
  max-height: calc(100vh - var(--navbar-h, 50px)) !important;
  max-height: calc(100dvh - var(--navbar-h, 50px)) !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: auto;
  overscroll-behavior-x: contain;
  box-sizing: border-box;
  padding: 5px 20px 75px 20px;
  margin: 0;
}

/* Main page scroller: scrolls as before (wheel, touch, keyboard, infinite scroll) but draws no scrollbar */
.index-container {
  scrollbar-width: none !important;
  -ms-overflow-style: none;
}

.index-container::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

@media (min-width: 361px) {
  .embed-responsive-image {
    bottom: unset !important;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }

  .embed-responsive-image {
    bottom: unset !important;
  }

}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }

  .embed-responsive-image {
    bottom: unset !important;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }

  .embed-responsive-image {
    bottom: unset !important;
  }
}

@media (min-width: 576px) {
  .container {
    max-width: 100%;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 100%;
  }
}

@media (min-width: 992px) {
  .container:not(:has(.item-layout-container)) {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container:not(:has(.item-layout-container)) {
    max-width: 1140px;
  }
}


.embed-responsive {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
}

.embed-responsive-16by9::before {
  padding-top: 52.25%;
}

body.layout-legacy.sidebar-right-hidden .embed-responsive-16by9::before {
  padding-top: 52.25%; /* Specify the exact value you want here when sidebar is hidden */
}

@media 
  (-webkit-min-device-pixel-ratio: 1.05) and (-webkit-max-device-pixel-ratio: 1.15), 
  (min-resolution: 1.05dppx) and (max-resolution: 1.15dppx) {
  body.layout-modern .embed-responsive-16by9::before {
    padding-top: 46.25%;
  }
  body.layout-legacy .embed-responsive-16by9::before {
    padding-top: 46.25%;
  }
  body.layout-legacy.sidebar-right-hidden .embed-responsive-16by9::before {
    padding-top: 46.25%;
  }
}


@media 
  (-webkit-min-device-pixel-ratio: 1.2), 
  (min-resolution: 1.2dppx) and (max-resolution: 1.25dppx) {
  body.layout-modern .embed-responsive-16by9::before {
    padding-top: 52.25%;
  }
  body.layout-legacy .embed-responsive-16by9::before {
    padding-top: 52.25%;
  }
  body.layout-legacy.sidebar-right-hidden .embed-responsive-16by9::before {
    padding-top: 52.25%;
  }
}

@media 
  (-webkit-min-device-pixel-ratio: 1.26) and (-webkit-max-device-pixel-ratio: 1.38) and (min-width: 700px), 
  (min-resolution: 1.26dppx) and (max-resolution: 1.38dppx) and (min-width: 700px) {
    
    body.layout-legacy .embed-responsive-16by9::before {
      padding-top: 41.25%;
    }

    body.layout-modern .embed-responsive-16by9::before {
      padding-top: 41.25%;
    }

    body.layout-modern.sidebar-right-hidden .embed-responsive-16by9::before {
      padding-top: 41.25%;
    }
      
    body.layout-legacy.sidebar-right-hidden .embed-responsive-16by9::before {
      padding-top: 41.25%;
    }

    body.layout-legacy .scroll-nav-wrapper {
      z-index: 0;
    }
      
    @media (max-height: 640px) {
      body.layout-legacy .item-layout-container .item-main-content {
        margin-left: 0!important;
        margin-right: 0!important;
      }
    }

    @media (max-width: 300px) {
      body.layout-legacy .item-layout-container .item-main-content {
        margin-left: 15em!important;
        margin-right: 15em!important;
      }
    }
      
    body.layout-legacy .item-layout-container .item-main-content {
      margin-left: 4em;
      margin-right: 4em;
    }
}

@media 
  (-webkit-min-device-pixel-ratio: 1.39) and (min-width: 700px), 
  (min-resolution: 1.39dppx) and (min-width: 700px) {
    
    body.layout-legacy .embed-responsive-16by9::before {
      padding-top: 41.25%;
    }

    body.layout-legacy.sidebar-right-hidden .embed-responsive-16by9::before {
      padding-top: 41.25%;
    }
}

/* ─── JS-driven DPR fallbacks (Firefox ignores zoom in CSS dppx queries) ─── */
/* These mirror the @media resolution rules above using [data-dpr] set by JS  */

/* ~105–115% zoom */
html[data-dpr="dpr-110"] body.layout-modern .embed-responsive-16by9::before {
  padding-top: 52.25%;
}
html[data-dpr="dpr-110"] body.layout-legacy .embed-responsive-16by9::before {
  padding-top: 52.25%;
}
html[data-dpr="dpr-110"] body.layout-legacy.sidebar-right-hidden .embed-responsive-16by9::before {
  padding-top: 52.25%;
}

/* ~120–125% zoom */
html[data-dpr="dpr-120"] body.layout-modern .embed-responsive-16by9::before {
  padding-top: 52.25%;
}
html[data-dpr="dpr-120"] body.layout-legacy .embed-responsive-16by9::before {
  padding-top: 52.25%;
}
html[data-dpr="dpr-120"] body.layout-legacy.sidebar-right-hidden .embed-responsive-16by9::before {
  padding-top: 52.25%;
}

/* ~126–138% zoom */
html[data-dpr="dpr-130"] body.layout-legacy .embed-responsive-16by9::before {
  padding-top: 52.25%;
}
html[data-dpr="dpr-130"] body.layout-modern .embed-responsive-16by9::before {
  padding-top: 52.25%;
}
html[data-dpr="dpr-130"] body.layout-modern.sidebar-right-hidden .embed-responsive-16by9::before {
  padding-top: 52.25%;
}
html[data-dpr="dpr-130"] body.layout-legacy.sidebar-right-hidden .embed-responsive-16by9::before {
  padding-top: 52.25%;
}

/* ~139–154% zoom (the 150% tier) */
html[data-dpr="dpr-150"] body.layout-legacy .embed-responsive-16by9::before {
  padding-top: 52.25%;
}
html[data-dpr="dpr-150"] body.layout-legacy.sidebar-right-hidden .embed-responsive-16by9::before {
  padding-top: 52.25%;
}

/* ≥155% zoom (high DPR — covers fractional scaling + zoom combos) */
html[data-dpr="dpr-high"] body.layout-legacy .embed-responsive-16by9::before {
  padding-top: 52.25%;
}
html[data-dpr="dpr-high"] body.layout-legacy.sidebar-right-hidden .embed-responsive-16by9::before {
  padding-top: 52.25%;
}

/* ─── Large / Ultrawide display overrides ─── */
/* On wider screens the %-based padding creates too much vertical space.    */
/* These kick in based on effective CSS viewport width (works in all browsers). */

/* ── 1440p-class displays (viewport ≥ 2000px) ── */
@media (min-width: 2000px) {
  body.layout-legacy .embed-responsive-16by9::before {
    padding-top: 62.25%;
  }
  body.layout-legacy.sidebar-right-hidden .embed-responsive-16by9::before {
    padding-top: 62.25%;
  }
}

/* 1440p at 110% zoom */
@media (min-width: 2000px) and (max-width: 2499px) and (min-resolution: 1.05dppx) {
  body.layout-legacy .embed-responsive-16by9::before {
    padding-top: 62.25%;
  }
  body.layout-legacy.sidebar-right-hidden .embed-responsive-16by9::before {
    padding-top: 62.25%;
  }
}
html[data-dpr="dpr-110"] body.layout-legacy .embed-responsive-16by9::before {
  /* Firefox 110% on 1440p handled below via data-screen */
}

/* ── QHD ultrawide range (viewport ≥ 2500px) ── */
@media (min-width: 2500px) {
  body.layout-legacy .embed-responsive-16by9::before {
    padding-top: 62.25%;
  }
  body.layout-legacy.sidebar-right-hidden .embed-responsive-16by9::before {
    padding-top: 62.25%;
  }
}

/* ── Full ultrawide at 100% zoom (viewport ≥ 3000px) ── */
@media (min-width: 3000px) {
  body.layout-legacy .embed-responsive-16by9::before {
    padding-top: 62.25%;
  }
  body.layout-legacy.sidebar-right-hidden .embed-responsive-16by9::before {
    padding-top: 62.25%;
  }
}

/* Ultrawide + zoomed in (still wide enough to need reduction) */
@media (min-width: 2000px) and (min-resolution: 1.39dppx) {
  body.layout-legacy .embed-responsive-16by9::before {
    padding-top: 62.25%;
  }
  body.layout-legacy.sidebar-right-hidden .embed-responsive-16by9::before {
    padding-top: 62.25%;
  }
}

/* Firefox DPR fallbacks for large screens — combine data-dpr + min-width */
@media (min-width: 2000px) {
  html[data-dpr="dpr-110"] body.layout-legacy .embed-responsive-16by9::before {
    padding-top: 62.25%;
  }
  html[data-dpr="dpr-110"] body.layout-legacy.sidebar-right-hidden .embed-responsive-16by9::before {
    padding-top: 62.25%;
  }
  html[data-dpr="dpr-120"] body.layout-legacy .embed-responsive-16by9::before {
    padding-top: 62.25%;
  }
  html[data-dpr="dpr-120"] body.layout-legacy.sidebar-right-hidden .embed-responsive-16by9::before {
    padding-top: 62.25%;
  }
  html[data-dpr="dpr-130"] body.layout-legacy .embed-responsive-16by9::before {
    padding-top: 62.25%;
  }
  html[data-dpr="dpr-130"] body.layout-legacy.sidebar-right-hidden .embed-responsive-16by9::before {
    padding-top: 62.25%;
  }
  html[data-dpr="dpr-150"] body.layout-legacy .embed-responsive-16by9::before {
    padding-top: 62.25%;
  }
  html[data-dpr="dpr-150"] body.layout-legacy.sidebar-right-hidden .embed-responsive-16by9::before {
    padding-top: 62.25%;
  }
  html[data-dpr="dpr-high"] body.layout-legacy .embed-responsive-16by9::before {
    padding-top: 62.25%;
  }
  html[data-dpr="dpr-high"] body.layout-legacy.sidebar-right-hidden .embed-responsive-16by9::before {
    padding-top: 62.25%;
  }
}

@media (min-width: 3000px) {
  html[data-dpr="dpr-1x"] body.layout-legacy .embed-responsive-16by9::before {
    padding-top: 62.25%;
  }
  html[data-dpr="dpr-1x"] body.layout-legacy.sidebar-right-hidden .embed-responsive-16by9::before {
    padding-top: 62.25%;
  }
}

.embed-responsive-4by3::before {
  padding-top: 75%;
}

.embed-responsive::before {
  display: block;
  content: "";
}

.embed-responsive .embed-responsive-item,
.embed-responsive video,
#ruffle-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
  touch-action: none;
  user-select: none;
}

.ruffle-gesture-overlay {
  position: absolute;
  top: 0;
  right: 0;
  width: 5%;
  height: 100%;
  z-index: 10;
  pointer-events: auto;
}

@media (max-width: 768px) {
  .ruffle-gesture-overlay {
    display: none;
    /* No overlay on mobile to keep Flash interactive */
  }
}

/* Danmaku toggle button on Ruffle embeds — appears on hover */
.ruffle-danmaku-toggle, .ruffle-fullscreen-toggle {
  position: absolute;
  bottom: 10px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.45);
  font-size: 16px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.ruffle-danmaku-toggle {
  left: 10px;
}

.ruffle-fullscreen-toggle {
  right: 10px;
}

.embed-responsive:hover .ruffle-danmaku-toggle,
#ruffle-container:hover .ruffle-danmaku-toggle,
.embed-responsive:hover .ruffle-fullscreen-toggle,
#ruffle-container:hover .ruffle-fullscreen-toggle {
  opacity: 1;
  pointer-events: auto;
}

.ruffle-danmaku-toggle:hover, .ruffle-fullscreen-toggle:hover {
  background: rgba(0, 0, 0, 0.75);
  border-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.85);
}

.ruffle-danmaku-toggle.active {
  color: var(--accent, #9f0);
  border-color: var(--accent, #9f0);
  background: rgba(0, 0, 0, 0.65);
}

.ruffle-danmaku-toggle.active:hover {
  background: rgba(0, 0, 0, 0.8);
}

/* Strikethrough line when inactive */
.ruffle-danmaku-toggle:not(.active)::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 15%;
  width: 70%;
  height: 2px;
  background: rgba(255, 80, 80, 0.8);
  transform: rotate(-45deg);
  border-radius: 1px;
  pointer-events: none;
}




.embed-responsive-image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: auto;
  height: 100%;
  box-sizing: content-box;
  scrollbar-color: var(--scrollbar-color) transparent;
  scrollbar-width: thin;
  border-top: none;
}

.previous-post,
.next-post {
  display: flex;
  height: 100%;
  position: relative;
}

#prev {
  z-index: 1;
  font-size: 30px;
  opacity: 0.6;
  text-shadow: 2px 2px 2px var(--black);
  padding: 25px;
}

#prev::before {
  content: "\00BB";
}

#next::before {
  content: "\00AB";
}

#next {
  z-index: 1;
  font-size: 30px;
  opacity: 0.6;
  text-shadow: 2px 2px 2px var(--black);
  padding: 25px;
}

#next:hover,
#prev:hover {
  opacity: 1;
}

.arrow-next {
  height: 100%;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: start;
  position: absolute;
}

.arrow-prev {
  height: 100%;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-end;
  position: absolute;
}

/* image */
#f0ck-image {
  height: 100%;
  width: 100%;
  max-width: 100%;
  object-fit: contain;
}

/* Floating overlay button to trigger modal when inline expand is active */
.image-modal-btn {
  display: none;
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 22px;
  cursor: pointer;
  z-index: 10;
  opacity: 1;
  pointer-events: auto;
  transition: color 0.2s ease, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8), 0 0 1px rgba(0, 0, 0, 0.5);
  padding: 0;
}

.image-modal-btn:hover {
  color: var(--accent);
}

html.image-expand-active .image-modal-btn {
  display: inline-flex;
}

/* Inline image expansion */
.embed-responsive.is-expanded::before {
  display: none !important;
}

.embed-responsive.is-expanded {
  height: auto !important;
  overflow: visible !important;
}

.embed-responsive.is-expanded .embed-responsive-image,
.embed-responsive.is-expanded a#elfe,
.embed-responsive.is-expanded img#f0ck-image {
  position: static !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
}

/* In modern layout expanded state, explicitly lift the max-height cap */
body.layout-modern .embed-responsive.is-expanded img#f0ck-image {
  max-height: none !important;
}



a#elfe {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
}

/* metadata */
/* Hall badge — compact primary + overflow pill */
.hall-badge-wrap {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1.5px 5px;
}

.hall-badge-primary {
  color: var(--accent);
  text-decoration: none;
  font-size: inherit;
}

.hall-badge-primary:hover {
  text-decoration: underline;
}

a.remove-from-hall {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.8em;
  text-decoration: none;
  vertical-align: middle;
  line-height: 1;
  transition: color 0.15s;
}

a.remove-from-hall:hover {
  color: #e74c3c;
}


.hall-overflow-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 3px;
  padding: 0 4px;
  font-size: 0.78em;
  color: rgba(255, 255, 255, 0.55);
  cursor: default;
  line-height: 1.6;
  user-select: none;
}

.hall-overflow-pill:hover {
  color: var(--white);
  background: rgba(255, 255, 255, 0.14);
}

.hall-overflow-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--dropdown-bg, #1e1e1e);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  padding: 4px 0;
  min-width: 120px;
  max-width: 200px;
  z-index: 200;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
}

.hall-overflow-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(255, 255, 255, 0.15);
}

.hall-overflow-pill:hover .hall-overflow-tooltip {
  display: block;
}

.hall-overflow-tooltip a {
  display: block;
  padding: 3px 10px;
  color: var(--white);
  text-decoration: none;
  font-size: 0.9em;
  transition: background 0.1s;
}

.hall-overflow-tooltip a:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--accent);
}

#halls-container {
  grid-template-columns: 1fr 1fr 1fr;
  margin: 35px;
}

@media (max-width: 768px) {
  #halls-container {
    grid-template-columns: 1fr 1fr;
  }
}

.badge:empty {
  display: none;
}

.metadata {
  text-align: center;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background-color: var(--metadata-bg);
  border: 1px solid #363636;
  border-top: none;
  z-index: 1;
  position: relative;
}

#themeselector {
  color: var(--white);
  border: 0;
  margin: 0;
  padding: 0;
  font-family: var(--font);
  background-color: var(--metadata-bg);
  text-align: center;
}

.badge-dark,
#themeselector {
  background-color: var(--badge-bg);
  border: 1px solid var(--black);
  /*margin: 5px;*/
}

.badge.badge-dark.image-source {
  white-space: normal;
  word-wrap: anywhere;
}

@keyframes newTagGlow {
  0% {
    background-color: #302f2fa3;
  }

  100% {}
}

.new-tag-glow {
  animation: newTagGlow 1s ease-out;
}

span#tags {
  grid-column: 1/4;
  display: inline-block;
  vertical-align: middle;
  padding-top: 2.5px;
  padding-bottom: 2.5px;
}

body.layout-modern span#tags {
  border-bottom: none;
}

span#tags:empty {
  display: none;
}

.tags-inner {
  display: contents;
}

span#tags .tags-inner>span {
  display: inline-block;
  margin-top: 2.5px;
  margin-bottom: 2.5px;
  margin-right: 0.5rem;
}

span#tags:not(.tags-expanded) .tags-inner>span:nth-child(n+11) {
  display: none;
}

.show-tags-toggle {
  font-size: 0.8em;
  color: var(--accent);
  margin-top: 5px;
  cursor: pointer;
  text-decoration: underline;
  vertical-align: middle;
}

.badge-success {
  color: var(--white);
  background-color: var(--badge-sfw, #02500b);
  padding-right: 5px;
  padding-left: 5px;
  border-radius: 3px;
  text-shadow: 1px 1px var(--black);
  text-transform: uppercase;
}

.badge-danger {
  color: var(--white);
  background-color: var(--badge-nsfw, #E10DC3);
  padding-right: 5px;
  padding-left: 5px;
  border-radius: 3px;
  text-shadow: 1px 1px var(--black);
  text-transform: uppercase;
}

.badge-light {
  color: var(--white);
  background-color: var(--badge-tag);
  border-radius: 3px;
  text-shadow: 1px 1px var(--black);
  padding-right: 5px;
  padding-left: 5px;
  padding-top: 1.5px;
  padding-bottom: 1.5px;
}

a.removetag {
  vertical-align: middle;
  display: inline-flex;
}

a.removetag i {
  vertical-align: middle;
}

/* Tag Badge & Hover-to-Exclude Action */
.tag-badge {
  display: inline-flex;
  align-items: center;
  position: relative;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  vertical-align: middle;
}

.tag-badge a.tag-name {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.tag-badge .tag-exclude-btn {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0 0 0 5px;
  cursor: pointer;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8em;
  line-height: 1;
  vertical-align: middle;
  border-radius: 50%;
  outline: none;
  opacity: 0.85;
  width: 14px;
  max-width: 14px;
  overflow: visible;
  pointer-events: auto;
  transform: scale(1);
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tag-badge .tag-exclude-btn:hover,
.tag-badge .tag-exclude-btn:focus-visible {
  opacity: 1;
  color: #ff4757 !important;
  transform: scale(1.28);
  filter: drop-shadow(0 0 6px rgba(255, 71, 87, 0.75));
}

/* Excluded Tag State */
.tag-badge.tag-is-excluded {
  opacity: 0.75;
  box-shadow: inset 0 0 0 1px rgba(255, 71, 87, 0.55), 0 0 8px rgba(255, 71, 87, 0.2);
  background-color: rgba(255, 71, 87, 0.15) !important;
}

.tag-badge.tag-is-excluded a.tag-name {
  text-decoration: line-through;
  text-decoration-color: rgba(255, 71, 87, 0.8);
  text-decoration-thickness: 1.5px;
  opacity: 0.85;
}

.tag-badge.tag-is-excluded .tag-exclude-btn {
  opacity: 0.95;
  color: #ff4757;
}

.tag-badge.tag-is-excluded .tag-exclude-btn:hover {
  color: #2ed573 !important;
  filter: drop-shadow(0 0 6px rgba(46, 213, 115, 0.75));
}

.badge-greentext {
  color: #789922;
  text-shadow: inherit !important;
  background-color: #252525;
}

.badge-greentext .tag-name {
  color: #789922 !important;
}

.badge-german {
  background: linear-gradient(180deg, black 33.33%, red 33.33%, red 66.66%, yellow 66.66%) !important;
  box-shadow: 0px 0px 1px white;
}

.badge-dutch {
  background: linear-gradient(180deg, #ad1c23 33.33%, white 33.33%, white 66.66%, #26468f 66.66%) !important;
  color: #000 !important;
}

.badge-void {
  background: #000 !important;
  color: #000 !important;
}

.about {
  padding: 10px;
  color: white;
  word-break: break-word;
  background: var(--navigation-links-bg);
  text-align: left;
}

@media (max-width: 999px) {
  .index-container {
    padding-left: 5px;
    padding-right: 5px;
  }
}

@media (max-width: 600px) {
  .index-container {
    padding-left: 5px;
    padding-right: 5px;
    margin: 0;
  }
}

/* .pbwork box-shadow removed as per user request */
/* .navbar.pbwork::after handles the top progress bar now */

@media(max-height: 820px) {
  /*.embed-responsive-16by9::before {
    padding-top: 45.25%;
  }*/
}

@media(max-height: 755px) {
  /*.embed-responsive-16by9::before {
    padding-top: 40.25%;
  }*/
}

@media(max-height: 640px) {
  /* Generic fallback */
  /*.embed-responsive-16by9::before {
    padding-top: 36.25%;
  }*/

  /* body.layout-legacy .item-layout-container .item-main-content {
    margin-left: 120px;
    margin-right: 120px;
  } */

  /* layout-modern: both sidebar AND comments visible — column is narrow, full 16:9 fits */
  body.layout-modern:not(.sidebar-right-hidden):not(.sidebar-left-hidden) .item-layout-container:not(.sidebar-hidden) .embed-responsive-16by9::before {
    padding-top: 54.25%;
  }

  /* layout-modern: either sidebar OR comments hidden (or both) — column is wider, reduce */
  body.layout-modern.sidebar-right-hidden .embed-responsive-16by9::before,
  body.layout-modern .item-layout-container.sidebar-hidden .embed-responsive-16by9::before,
  body.layout-modern.sidebar-left-hidden .embed-responsive-16by9::before {
    padding-top: 40.25%;
  }
}

@media(max-height: 525px) {
  .embed-responsive-16by9::before {
    padding-top: 26.25%;
  }
}

@media(max-height: 414px) {
  .embed-responsive-16by9::before {
    padding-top: 16.25%;
  }
}

@media(max-height: 300px) {
  .embed-responsive-16by9::before {
    padding-top: 14.5%;
  }
}

@media(max-width: 580px) {
  .embed-responsive-16by9::before {
    padding-top: 100%;
  }
}

@media(max-width: 555px) {
  .metadata {
    grid-template-columns: 1fr 1fr;
  }

  span#tags {
    grid-column: 1/3;
  }

  a#prev:focus,
  a#next:focus {
    background: var(--nav-bg);
    border-radius: 350px;
    opacity: 0.6;
    transition: .2s ease-in-out;
  }

  span#favs {
    grid-column: 1/3 !important;
  }

}

.post_source {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 20ch;
  display: inline-block;
}

audio::-webkit-media-controls {
  filter: invert(100%) contrast(2) opacity(95%) hue-rotate(180deg);
}

audio::-webkit-media-controls-timeline {
  filter: contrast(0);
}

div.about>div {
  float: right;
  max-width: 500px;
  margin-left: 5px;
}

div.about>div img {
  max-width: 99%;
  height: auto;
}

div.about>div p {
  font-size: 7pt;
  margin-top: 0;
}

/* loginform */
body[type='login'] {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.login-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 20px;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 0;
  border: 1px solid var(--accent);
}

.login-form button[type="submit"] {
  width: 100%;
  margin: 18px 0 9px 0;
  background: var(--bg);
  border: 1px solid var(--black);
  color: var(--white);
  opacity: 0.6;
  padding: 8px 20px;
  border-radius: 0;
  overflow: hidden;
}

.login-form button[type="submit"]:hover {
  cursor: pointer;
  opacity: 1;
}

.login-form input {
  background: var(--bg);
  border: 1px solid var(--black);
  padding: 5px;
  margin-bottom: 10px;
  border-radius: 0;
  width: max-content;
  max-width: 300px;

}

/* Markdown Styles */
.comment-content .greentext {
  color: #789922;
  font-family: monospace;
  display: inline-block;
}

.comment-content blockquote {
  border-left: 3px solid var(--accent);
  margin: 5px 0;
  padding-left: 10px;
  opacity: 0.8;
}

.comment-content pre {
  background: var(--gray);
  padding: 15px;
  border-radius: 4px;
  overflow-x: auto;
}

.comment-content code {
  background: var(--gray);
  font-family: monospace !important;
}

.comment-content ul,
.comment-content ol {
  padding-left: 20px;
}

/* Dynamic page content (about / rules) */
.dynamic-page-content blockquote {
  color: #789922;
  border-left: 3px solid #789922;
  margin: 6px 0;
  padding-left: 10px;
  font-family: monospace;
}

.dynamic-page-content blockquote p {
  margin: 0;
  color: #789922;
}

.dynamic-page-content pre {
  background: #222;
  padding: 10px;
  border-radius: 4px;
  overflow-x: auto;
}

.dynamic-page-content code {
  background: #333;
  padding: 2px 4px;
  border-radius: 3px;
  font-family: monospace;
}

.dynamic-page-content ul,
.dynamic-page-content ol {
  padding-left: 20px;
}

.dynamic-page-content h1,
.dynamic-page-content h2,
.dynamic-page-content h3,
.dynamic-page-content h4 {
  color: var(--white);
}

.dynamic-page-content p {
  margin-top: 0;
  margin-bottom: 1.2em;
}

.dynamic-page-content p:last-child {
  margin-bottom: 0;
}


/* Emoji Picker */
.input-actions {
  position: relative;
  /* Context for picker */
}

/* .emoji-picker {
  position: relative;
  width: 100%;
  max-width: 85vw;
  max-height: 300px;
  background: var(--dropdown-bg);
  border: 1px solid var(--black);
  padding: 10px;
  z-index: 1000;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  border-radius: 8px;
} */

.emoji-picker {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: 200px;
  max-height: 200px;
  background: var(--bg);
  border: 1px solid var(--nav-border-color);
  padding: 5px;
  z-index: 0;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  border-radius: 0px;
  margin-top: 5px;
  transform-origin: top center;
  animation: emojiPickerIn 0.2s ease forwards;
}
.emoji-picker.picker-closing {
  animation: emojiPickerOut 0.18s ease forwards;
  pointer-events: none;
  overflow: hidden;
}
@keyframes emojiPickerIn {
  from { opacity: 0; transform: translateY(-8px) scaleY(0.96); }
  to   { opacity: 1; transform: translateY(0)    scaleY(1); }
}
@keyframes emojiPickerOut {
  from { opacity: 1; transform: translateY(0)    scaleY(1); }
  to   { opacity: 0; transform: translateY(-8px) scaleY(0.96); }
}

/* Tabbed mode — switched to column layout by JS when packs are present */
.emoji-picker.has-tabs {
  min-height: 200px;
  max-height: 200px;
  overflow: hidden;
  flex-direction: column;
  flex-wrap: nowrap;
  padding: 0;
}

/* Hold-to-preview sticker overlay */
/* Sticker favorites toast notification */
.emoji-fav-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(20,20,20,0.92);
  border: 1px solid var(--emoji-fav-color, #f5c518);
  color: var(--white, #fff);
  padding: 10px 20px;
  border-radius: 24px;
  font-size: 0.875em;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  z-index: 100000;
  backdrop-filter: blur(8px);
  transition: none;
}
.emoji-fav-toast.toast-in {
  animation: emojiToastIn 0.22s ease forwards;
}
.emoji-fav-toast.toast-out {
  animation: emojiToastOut 0.3s ease forwards;
}
@keyframes emojiToastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes emojiToastOut {
  from { opacity: 1; transform: translateX(-50%) translateY(0); }
  to   { opacity: 0; transform: translateX(-50%) translateY(10px); }
}

.sticker-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.8);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.sticker-preview-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}
.sticker-preview-overlay img,
.sticker-preview-overlay video {
  max-width: min(85vw, 420px);
  max-height: min(85vh, 420px);
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Fav button inside sticker preview overlay */
.sticker-preview-fav-btn {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.2);
  background: rgba(0,0,0,0.55);
  color: rgba(255,255,255,0.55);
  font-size: 1.2em;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  backdrop-filter: blur(4px);
}
.sticker-preview-fav-btn:hover,
.sticker-preview-fav-btn.is-fav {
  color: var(--emoji-fav-color, #f5c518);
  border-color: var(--emoji-fav-color, #f5c518);
  background: rgba(0,0,0,0.75);
}

.emoji-picker img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  cursor: pointer;
  transition: transform 0.1s, background 0.1s;
  padding: 4px;
  border-radius: 4px;
}

.emoji-picker img:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* ── Tabbed picker ── */
.emoji-picker-tabs {
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  flex-shrink: 0;
  background: var(--bg);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  scrollbar-width: none;
  padding: 0;
}
.emoji-picker-tabs::-webkit-scrollbar { display: none; }

.ep-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  opacity: 0.55;
  padding: 4px;
}

.ep-tab:hover { opacity: 1; background: rgba(255,255,255,0.07); }

.ep-tab.active {
  opacity: 1;
  background: rgba(255,255,255,0.12);
  border-bottom: 2px solid var(--accent, #fff);
}

.ep-tab-favs.active {
  border-bottom-color: var(--emoji-fav-color, #f5c518);
  background: rgba(245,197,24,0.1);
}

/* Subtle dot indicator when fav tab is set as default */
.ep-tab-default::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--emoji-fav-color, #f5c518);
  opacity: 0.7;
}
.ep-tab-default {
  position: relative;
}
.ep-tab-default.active::after {
  display: none; /* hide dot when the tab is actively selected — border is enough */
}

.ep-tab img,
.ep-tab video,
.ep-tab i {
  width: 28px;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}

.emoji-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: 0;
  overflow-y: auto;
  flex: 1;
  padding: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.2) transparent;
  align-content: start;
}

.emoji-picker-grid img,
.emoji-picker-grid video {
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  object-fit: contain;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  box-sizing: border-box;
}

/* Sticker wrapper — holds img/video + optional fav badge */
.ep-sticker-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 4px;
  box-sizing: border-box;
  /* Suppress native mobile long-press menu (save image, copy link, etc.) */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.ep-sticker-wrap img,
.ep-sticker-wrap video {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}

/* Fav star badge — top-right corner of sticker */
.ep-fav-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 9px;
  color: var(--emoji-fav-color, #f5c518);
  pointer-events: none;
  line-height: 1;
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.7));
}

/* Hide badge in the favorites tab itself — everything there is already a fav */
.emoji-picker-grid.favs-active .ep-fav-badge {
  display: none;
}

.emoji-picker-grid img:hover,
.emoji-picker-grid video:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* video emojis in comment content */
.comment-content video.emoji,
video.emoji {
  height: auto;
  /* vertical-align: middle; */
  display: inline-block;
  max-width: 200px;
}

/* video in emoji autocomplete dropdown */
.emoji-ac-item video {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
}


/* User Mentions */
.mention {
  text-decoration: none !important;
  color: var(--accent);
  font-weight: bold;
}

.mention:hover {
  text-decoration: underline !important;
}

/* Mention Autocomplete Dropdown */
.mention-suggestions {
  position: fixed;
  z-index: 10001;
  background: #222;
  border: 1px solid #444;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  max-height: 200px;
  overflow-y: auto;
  font-family: var(--font);
}

.mention-suggestion-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid #333;
}

.mention-suggestion-item:last-child {
  border-bottom: none;
}

.mention-suggestion-item.active,
.mention-suggestion-item:hover {
  background: #333;
}

.mention-suggestion-item img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 10px;
  object-fit: cover;
}

.mention-name {
  font-weight: bold;
  color: #eee;
  margin-right: 8px;
}

.mention-display {
  font-size: 0.85em;
  color: #888;
}

.external-link-icon {
  font-size: 0.65em;
  margin-left: 4px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

/* ── Inline emoji autocomplete dropdown ── */
.emoji-autocomplete {
  position: fixed;
  /* set by JS via getBoundingClientRect */
  z-index: 9999;
  background: var(--dropdown-bg, #1a1a1a);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.6);
  flex-direction: column;
  max-height: 220px;
  overflow-y: auto;
  padding: 4px;
  gap: 2px;
  overscroll-behavior: contain;
}

.emoji-ac-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.1s;
  user-select: none;
}

.emoji-ac-item:hover,
.emoji-ac-item.active {
  background: rgba(255, 255, 255, 0.1);
}

.emoji-ac-item img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
}

.emoji-ac-item span {
  font-size: 0.85em;
  color: var(--text-muted, #aaa);
  font-family: var(--font-mono, monospace);
}

.emoji-trigger {
  cursor: pointer;
  vertical-align: middle;
}

.spoiler-trigger {
  cursor: pointer;
  vertical-align: middle;
}


/* visualizer */
canvas.audio-visualizer,
.v0ck canvas.audio-visualizer,
.embed-responsive canvas.audio-visualizer {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 100%;
  pointer-events: none;
  z-index: 1 !important;
}

/* tags */
span#tags {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  line-height: 1.4;
  padding: 5px;
}

input {
  padding: 0;
  margin: 0;
  border: none;
  color: #fff;
  background-color: var(--badge-tag);
}

/* Tag Autocomplete Dropdown */
.tag-ac-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.tag-ac-wrapper form {
  display: flex;
  align-items: center;
  height: 100%;
}

.tag-ac-input {
  font-size: inherit;
  min-width: 80px;
  background-color: var(--badge-tag);
  color: #fff;
  border: none;
  outline: none;
  height: 20px;
  line-height: normal;
  display: block;
}

.tag-ac-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.tag-suggestions {
  position: absolute;
  bottom: 100%;
  top: auto;
  left: 0;
  min-width: 220px;
  max-width: 320px;
  max-height: 260px;
  overflow-y: auto;
  background: var(--dropdown-bg, #1a1a1a);
  border: 1px solid var(--black, #000);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
  z-index: 1000;
  margin-bottom: 8px;
  animation: tagDropIn 0.15s ease-out;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-color, #555) transparent;
}

@keyframes tagDropIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tag-suggestion-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  min-height: 44px;
  cursor: pointer;
  transition: background 0.12s;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.tag-suggestion-item:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.tag-suggestion-item:hover,
.tag-suggestion-item:active,
.tag-suggestion-item.active {
  background: rgba(255, 255, 255, 0.1);
}

.tag-suggestion-name {
  font-size: 14px;
  color: var(--accent, #e0e0e0);
  font-weight: 500;
}

.tag-suggestion-meta {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  margin-left: 12px;
  white-space: nowrap;
}

/* Section headers inside the suggestion dropdown (e.g. "Tags" / "Titles") */
.tag-suggestion-header {
  padding: 5px 12px 3px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  user-select: none;
}

/* Icon prefix for title-type suggestion items */
.tag-suggestion-icon {
  flex-shrink: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  margin-right: 8px;
}

.tag-suggestion-item--title .tag-suggestion-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--white, #e0e0e0);
}


@media (max-width: 555px) {
  .tag-suggestions {
    position: absolute;
    right: auto;
    top: auto;
    bottom: 100%;
    min-width: unset !important;
    max-width: unset !important;
    max-height: inital !important;
    border-radius: 0px;
    margin-bottom: 5px;
  }

  .tag-suggestion-item {
    min-height: 48px;
    padding: 12px 16px;
  }

  .tag-suggestion-name {
    font-size: 16px;
  }

  .tag-suggestion-meta {
    font-size: 12px;
  }
}


/* toasts */
div#flash {
  position: fixed;
  bottom: -28px;
  z-index: 100200 !important;
  left: 0;
  width: 100%;
  text-align: center;
  font-weight: bold;
}

div#flash.error {
  background-color: #fddfdf;
  border-bottom: 2px solid #f1a899;
  color: #5f3f3f;
}

div#flash.success {
  background-color: #4caf50;
  border-bottom: 2px solid #006018;
  color: #001c07;
}

div#flash.warn {
  background-color: #fffa90;
  border-bottom: 2px solid #dad55e;
  color: #777620;
}

/* sfw/nsfw indexpage */
div.posts>a>p {
  height: 100%;
  width: 100%;
  position: absolute;
  bottom: calc(0px - 12px);
}

div.posts>a>p:before {
  content: "";
  position: absolute;
  right: 0;
  bottom: -2px;
  height: 13px;
  width: 100%;
}

div.posts>a[data-mode="sfw"]>p:before {
  background: #000000;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(63, 196, 61, 0) 85%, rgba(63, 196, 61, 1) 100%);
}

div.posts>a[data-mode="nsfw"]>p:before {
  background: #000000;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(227, 7, 7, 0) 85%, rgb(227, 7, 203) 100%);
}

div.posts>a[data-mode="nsfl"]>p::before {
  background: #000;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(227, 7, 7, 0) 85%, rgb(231, 3, 3) 100%);
}

div.posts>a[data-mode="null"]>p::before {
  background: #000000;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(63, 196, 61, 0) 85%, rgb(244, 222, 0) 100%);
}

.hide-item-ratings-active div.posts>a>p::before {
  display: none !important;
}

div#footbar {
  width: 100%;
  text-align: center;
  margin-top: -30px;
  transition: .2s ease-in-out;
  user-select: none;
  color: transparent;
}

/* avatar */
img.avatar {
  height: auto;
  position: relative;
  width: 25px;
  margin: 1px;
  /*  left: -7px; */
  top: 0;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

.ranking-table img.avatar {
  left: 0;
  border-radius: 3px;
  display: block;
  margin: 0 auto;
}

/* log */
div.logwrap {
  height: auto;
  text-align: left;
}

div.logwrap>p {
  line-height: 0;
}

/* ranking page overhaul - clean tables */
.ranking-page {
  padding: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.ranking-page h1,
.ranking-page h3 {
  color: var(--white);
  letter-spacing: 1px;
}

.ranking-wrapper {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  margin-top: 30px;
}

@media (max-width: 992px) {
  .ranking-wrapper {
    flex-direction: column;
    gap: 30px;
  }

  .section-big,
  .section-small {
    width: 100%;
    flex: none;
  }
}

.section-big {
  flex: 2;
}

.section-small {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.clean-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 15px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.clean-table th {
  background: rgba(255, 255, 255, 0.05);
  color: var(--accent);
  text-align: left;
  padding: 15px;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: bold;
  border-bottom: 2px solid var(--accent);
}

.clean-table td {
  padding: 12px 15px;
  vertical-align: middle;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
}

.clean-table tbody tr:last-child td {
  border-bottom: none;
}

.clean-table tbody tr:hover {
  background: rgba(var(--accent-rgb), 0.03);
}

.rank-cell {
  width: 60px;
  font-weight: bold;
  color: var(--accent) !important;
  font-size: 1.1em;
}

.avatar-cell {
  width: 80px;
}

.rank-avatar {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: block;
}

.user-cell a {
  font-weight: bold;
  text-decoration: none !important;
}

.count-cell {
  font-weight: bold;
  text-align: right !important;
}

.clean-table .count-col {
  text-align: right !important;
}

.stats-box-simple {
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  padding: 20px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.stats-box-simple h3 {
  margin-top: 0;
  font-size: 1.1em;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.3);
  padding-bottom: 10px;
  margin-bottom: 15px;
}

.stats-table td:first-child,
.f0cks-table td:first-child {
  font-size: 0.9em;
  opacity: 0.7;
}

.stats-table td:last-child,
.f0cks-table td:last-child {
  text-align: right;
  font-weight: bold;
}

/* Premium Ranking Podium */
.ranking-podium {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 30px;
  margin: 40px 0 60px;
  padding: 20px;
  background: radial-gradient(circle at center, rgba(var(--accent-rgb), 0.1) 0%, transparent 70%);
}

.podium-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.podium-item:hover {
  transform: translateY(-15px);
}

.podium-avatar-wrapper {
  position: relative;
  margin-bottom: 20px;
}

.podium-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--accent);
  background: var(--black);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  display: block;
  margin: 0 auto;
}

.podium-crown {
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%) rotate(-10deg);
  font-size: 2em;
  filter: drop-shadow(0 0 10px gold);
  z-index: 2;
}

.podium-rank-label {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--white);
  padding: 4px 15px;
  border-radius: 20px;
  font-weight: 800;
  font-size: 1.2em;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.podium-info {
  text-align: center;
}

.podium-name {
  font-weight: 800;
  font-size: 1.4em;
  color: var(--white);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  margin-bottom: 5px;
  display: block;
}

.podium-count {
  font-size: 1em;
  color: var(--accent);
  font-weight: bold;
  letter-spacing: 1px;
}

/* Rank specific podium styles */
.podium-item.rank-1 {
  order: 2;
  transform: scale(1.1);
}

.podium-item.rank-1:hover {
  transform: scale(1.15) translateY(-15px);
}

.podium-item.rank-2 {
  order: 1;
}

.podium-item.rank-3 {
  order: 3;
}

.rank-1 .podium-avatar {
  border-color: #FFD700;
  width: 140px;
  height: 140px;
  box-shadow: 0 0 40px rgba(255, 215, 0, 0.3);
}

.rank-2 .podium-avatar {
  border-color: #C0C0C0;
  width: 110px;
  height: 110px;
  box-shadow: 0 0 30px rgba(192, 192, 192, 0.2);
}

.rank-3 .podium-avatar {
  border-color: #CD7F32;
  width: 100px;
  height: 100px;
  box-shadow: 0 0 20px rgba(205, 127, 50, 0.1);
}

.rank-1 .podium-rank-label {
  background: linear-gradient(135deg, #FFD700, #FFA500);
  color: #000;
}

.rank-1 .podium-count {
  color: #FFD700;
}

.rank-2 .podium-rank-label {
  background: linear-gradient(135deg, #C0C0C0, #808080);
}

.rank-2 .podium-count {
  color: #C0C0C0;
}

.rank-3 .podium-rank-label {
  background: linear-gradient(135deg, #CD7F32, #8B4513);
}

.rank-3 .podium-count {
  color: #CD7F32;
}

@media (max-width: 992px) {
  .ranking-podium {
    flex-direction: column;
    align-items: center;
    gap: 50px;
    padding-top: 40px;
  }

  .podium-item {
    order: unset !important;
  }

  .podium-item.rank-1 {
    transform: scale(1);
  }
}

/* Responsive clean table for Ranking */
@media (max-width: 600px) {
  .ranking-table tr {
    display: grid;
    grid-template-areas:
      "rank avatar user"
      "rank avatar count";
    grid-template-columns: 50px 70px 1fr;
    grid-template-rows: auto auto;
    gap: 0 15px;
    padding: 15px;
    align-items: center;
  }

  .rank-cell {
    grid-area: rank;
    font-size: 1.4em !important;
  }

  .avatar-cell {
    grid-area: avatar;
    padding: 0 !important;
    width: auto;
  }

  .user-cell {
    grid-area: user;
    padding: 0 !important;
    align-self: end;
  }

  .count-cell {
    grid-area: count;
    padding: 0 !important;
    text-align: left !important;
    align-self: start;
    opacity: 0.7;
    font-size: 0.9em;
  }

  .count-cell:after {
    content: " tags";
  }

  .ranking-table thead {
    display: none;
  }

  .rank-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }

  .ranking-page {
    padding: 15px;
  }

  .ranking-wrapper {
    margin-top: 15px;
  }
}

.topf0ckers {
  text-align: center;
  padding: 20px 0;
}

/* tags */
#tags .badge>a:first-child {
  color: inherit !important;
  text-shadow: 1px 1px black;
}

/* tooltips */
[tooltip] {
  position: relative;
}

[tooltip]::before,
[tooltip]::after {
  text-transform: none;
  font-size: .9em;
  line-height: 1;
  user-select: none;
  pointer-events: none;
  position: absolute;
  display: block;
  visibility: hidden;
  opacity: 0;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0s linear 0.18s;
}

[tooltip]::before {
  content: '';
  border: 5px solid transparent;
  z-index: 100001;
}

[tooltip]::after {
  content: attr(tooltip);
  font-family: Helvetica, sans-serif;
  text-align: center;
  min-width: 3em;
  max-width: 70em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 1ch 1.5ch;
  border-radius: .3ch;
  box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
  background: var(--tooltip-bg, #333);
  color: #fff;
  z-index: 100000;
}

[tooltip]:hover::before,
[tooltip]:hover::after {
  visibility: visible;
  opacity: 1;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0s linear 0s;
}

[tooltip='']::before,
[tooltip='']::after {
  display: none !important;
  visibility: hidden !important;
}

[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
  bottom: 100%;
  border-bottom-width: 0;
  border-top-color: var(--tooltip-bg, #333);
}

[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
  bottom: calc(100% + 5px);
}

[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::before,
[tooltip][flow^="up"]::after {
  left: 50%;
  transform: translate(-50%, -.25em);
}

[tooltip][flow^="down"]::before {
  top: 100%;
  border-top-width: 0;
  border-bottom-color: var(--tooltip-bg, #333);
}

[tooltip][flow^="down"]::after {
  top: calc(100% + 5px);
}

[tooltip][flow^="down"]::before,
[tooltip][flow^="down"]::after {
  left: 50%;
  transform: translate(-50%, .25em);
}

[tooltip][flow^="left"]::before {
  top: 50%;
  border-right-width: 0;
  border-left-color: var(--tooltip-bg, #333);
  left: calc(0em - 5px);
  transform: translate(-.5em, -50%);
}

[tooltip][flow^="left"]::after {
  top: 50%;
  right: calc(100% + 5px);
  transform: translate(-.5em, -50%);
}

[tooltip][flow^="right"]::before {
  top: 50%;
  border-left-width: 0;
  border-right-color: var(--tooltip-bg, #333);
  right: calc(0em - 5px);
  transform: translate(.5em, -50%);
}

[tooltip][flow^="right"]::after {
  top: 50%;
  left: calc(100% + 5px);
  transform: translate(.5em, -50%);
}

[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after,
[tooltip][flow^="down"]:hover::before,
[tooltip][flow^="down"]:hover::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

[tooltip][flow^="left"]:hover::before,
[tooltip][flow^="left"]:hover::after,
[tooltip][flow^="right"]:hover::before,
[tooltip][flow^="right"]:hover::after {
  opacity: 1;
  transform: translate(0, -50%);
}

.timeago:hover {
  cursor: pointer;
}

/* buttons */
svg.iconset,
i.iconset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  width: 23px;
  font-size: 13px;
  cursor: pointer;
  background: #312c2c;
  margin: 1px;
  padding: 1px;
  border: 1px outset #221d1d;
  position: relative;
  right: 2px;
}

svg.iconset:hover,
i.iconset:hover {
  background: #7b7b77 !important;
  transition: .2s ease;
}

svg.iconset.active,
i.iconset.active {
  color: var(--accent) !important;
  border-style: inset;
}



/* favorites */
span#favs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-left: 0;
  grid-column: 1/4;
  padding: 5px;
  background: var(--badge-bg);
  border-top: 1px solid var(--nav-border-color);
}


body.layout-modern span#favs {
  border-top: none;
}

span#favs[hidden] {
  display: none !important;
}

#favs>a {
  display: flex;
}

#favs>a img {
  border: 2px solid var(--accent);
  display: block;
}

/* audio thumbnails */
/*a[data-mime^="audio"] {
  background-color: var(--accent);
}*/

/* err page */
._error_wrapper {
  display: flex;
  justify-content: center;
}

.err {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: auto;
  margin: 50px;
  background: var(--gray);
  max-width: 100%;
  width: 500px;
}

._error_topbar {
  border-bottom: inset 2px gray;
  text-align: left;
  padding-left: 10px;
}

._error_content {
  display: grid;
  grid-template-columns: auto;
}

._error_content img {
  max-width: 100%;
  width: 100%;
  padding: 5px;
  margin: 0;
}

._error_message {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto 1fr;
  margin: 5px;
  padding: 5px;
  text-shadow: 1px 1px black;
  text-align: center;
}

.err code {
  font-weight: bold;
  text-align: center;
  align-self: baseline;
  font-size: 15px;
}

._error_filter_hint {
  grid-column: 1 / -1;
  margin-top: 12px;
  padding: 8px 14px;
  border: 1px dashed rgba(242, 239, 11, 0.35);
  background: rgba(242, 239, 11, 0.06);
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.82em;
  line-height: 1.5;
  text-align: center;
  text-shadow: none;
}

._error_filter_hint i {
  margin-right: 5px;
  opacity: 0.7;
}

._error_filter_hint strong {
  color: var(--accent, #f2ef0b);
  font-weight: 700;
}

._error_filter_hint a {
  color: var(--accent, #f2ef0b);
  text-decoration: underline;
  text-underline-offset: 2px;
}

._error_filter_hint a:hover {
  opacity: 0.8;
}

._error_filter_actions {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}

._error_see_anyways_btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--accent, #f2ef0b);
  color: #111;
  font-weight: 700;
  font-size: 0.95em;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s ease, transform 0.1s ease;
}

._error_see_anyways_btn i {
  color: #111;
  opacity: 0.9;
  margin-right: 2px;
}

._error_see_anyways_btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

._error_see_anyways_btn:active {
  transform: translateY(0);
}

/* Admin search css early test */
.admin-search {
  margin-top: 15px;
  display: flex;
  justify-content: center;
}

.admin-search button {
  background: var(--accent);
  border: none;
  color: var(--white);
  padding: 15px;
}

.admin-search button:hover {
  transition: .2s all;
  opacity: 0.7;
  cursor: pointer;
}

.admin-search input {
  padding: 15px;
  border: 1px solid var(--accent);
}

table img {
  border: 1px solid;
}

.results {
  padding: 5px;
}

.mview_desc {
  visibility: hidden;
}

/* fix for mobile table view in search! */
@media screen and (max-width: 650px) {

  .results table.table th,
  .results table.table td,
  .admin-users-table th,
  .admin-users-table td {
    display: flex;
    padding: 5px;
  }

  /*.results table.table tr td:first-child,
  .admin-users-table tr td:first-child {
    float: right;
  }*/

  .results table.table tbody td,
  .admin-users-table tbody td {
    display: block;
    box-shadow: 0px 1px 0px var(--accent);
  }

  .results table.table tbody td:before,
  .admin-users-table tbody td:before {
    content: attr(data-th);
    display: block;
    text-align: left;
  }

  .results table thead,
  .admin-users-table thead {
    display: none;
  }

  .results table.table td img {
    position: relative;
    width: 100%;
  }

  .mview_desc {
    visibility: visible;
  }
}

/* gapRight icon colors & active states */
.gapRight i.iconset,
.gapRight svg.iconset,
.gapRight button {
  color: var(--white, #fff);
  fill: var(--white, #fff);
}

.gapRight #a_favo.fa-solid {
  color: #ff6b9d !important;
  fill: #ff6b9d !important;
  border-color: rgba(255, 107, 157, 0.4) !important;
}

@keyframes fav-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.32); }
  100% { transform: scale(1); }
}

.fav-pop {
  animation: fav-pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* pin icon */
.iconset#a_pin {
  color: inherit;
  fill: inherit;
}

.iconset#a_pin::before {
  display: inline-block;
  transition: transform 0.25s ease;
}

/* pinned: rotate just the glyph so tip points down – "pushed into the board" */
.iconset#a_pin.active::before {
  transform: rotate(-45deg);
}

.imageDoor:hover:after {
  content: "";
  background-image: var(--hover-image);
  height: 128px;
  width: 128px;
  display: inline-block;
  position: absolute;
  z-index: 999;
}

/* Fix for navbar on mobile devices */
@media (max-width: 768px) {
  .navbar-nav {
    display: grid !important;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 0.25em;
  }
}

/* Navbar Rework */
.navbar-nav-guests {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 5px 0 5px 0;
  margin-bottom: 0;
  list-style: none;
  margin: 0;
  margin-right: 0px;
  margin-left: 0px;
  align-self: center;
  margin-left: .5rem;
  margin-right: .5rem;
}

.navbar-expand-lg .navbar-nav-guests {
  flex-direction: row;
}

ul.navbar-nav-guests li.nav-item {
  margin-right: .5rem;
}

.navbar-expand-lg .navbar-nav-guests .nav-link,
.pagination>a,
.pagination>span {
  padding-right: .5rem;
  padding-left: .5rem;
}

@media (max-width: 768px) {
  ul.navbar-nav-guests {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    grid-gap: .25em;
    margin: 0;
    padding: 5px;
  }

  ul.navbar-nav-guests li.nav-item {
    margin-right: unset;
  }

  .nav-link.user {
    justify-content: left;
  }
}

.navigation-links-guest {
  justify-content: center;
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  width: 100%;
}

/* Pagination Responsiveness */
@media (max-width: 799px) {

  .navbar-expand-lg .navbar-nav-guests .nav-link,
  .pagination>a,
  .pagination>span {
    padding-right: 2px;
    padding-left: 2px;
  }

  .pagination>a,
  .pagination>span {
    margin-right: 2px;
    margin-left: 2px;
  }

  .pagination {
    justify-content: center !important;
  }
}

/* f0ckgle */
.f0ckgle {
  display: grid;
  align-content: center;
  height: auto;
}

.search-title {
  text-align: center;
  font-size: xxx-large;
}

.admin-search input {
  padding: 15px;
  border: 1px solid var(--accent);
  min-width: 30%;
}

.profile_head_avatar {
  margin: 0;
}

.profile_head_username {
  font-weight: bold;
  padding: 5px;
  position: relative;
  word-break: break-word;
}

.profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.layersoffear {
  display: grid;
}

.user_content_wrapper {
  display: grid;
  grid-column-gap: 5px;
  padding: 5px;
}

.f0cks h5,
.favs h5 {
  background: var(--dropdown-bg);
}

.uploads-header,
.favs-header {
  display: grid;
  grid-template-columns: 1fr auto;
  background: var(--img-border-color);
  padding: 0px 5px 0px 5px;
}

div.user-uploads div.posts {
  padding: 5px;
  background: var(--dropdown-bg);
}

div.favs div.posts {
  padding: 5px;
  background: var(--dropdown-bg);
}



#bg {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  /* Always full width, shifted left by half the sidebar so it stays centred under the content. The size
     never changes with the sidebar, so the drawing is never stretched or redrawn: the sidebar toggle only
     moves it (transform, GPU), see toggleSidebarRight() in f0ckm.js */
  width: 100vw;
  height: 100%;
  transform: translate3d(calc(var(--sidebar-w, 300px) / -2), 0, 0) scale(var(--bg-canvas-zoom, 1.38));
  transform-origin: center center;
  z-index: -2;
  transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.45, 0, 0.2, 1);
  opacity: var(--bg-canvas-opacity, 0.81);
  filter: var(--bg-canvas-filter, none);
  -webkit-filter: var(--bg-canvas-filter, none);
  background-color: var(--bg-canvas-color, transparent);
}

body.sidebar-right-hidden,
body:not(:has(.global-sidebar-right)):not(:has(.item-sidebar-right)):not(:has(.index-sidebar-right)) {
  --sidebar-w: 0px !important;
}

body.sidebar-right-hidden #bg,
body:not(:has(.global-sidebar-right)):not(:has(.item-sidebar-right)):not(:has(.index-sidebar-right)) #bg {
  width: 100vw !important;
}

@media (min-width: 600px) and (max-width: 999px) {
  :root {
    --sidebar-w: min(280px, 80vw);
  }
}

@media (max-width: 599px) {
  :root {
    --sidebar-w: 0px !important;
  }
  #bg {
    width: 100vw !important;
  }
}

button#togglebg {
  display: inline;
  cursor: pointer;
  background: transparent;
  border: 0;
}

@keyframes fadeInFX {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeOutFX {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}


@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: var(--bg-canvas-opacity, 1.0);
  }
}

@keyframes fadeOut {
  0% {
    opacity: var(--bg-canvas-opacity, 1.0);
  }

  100% {
    opacity: 0;
  }
}

#bg.fader-in,
.fader-in {
  opacity: var(--bg-canvas-opacity, 1.0) !important;
}

#bg.fader-out,
.fader-out {
  opacity: 0 !important;
  transition: opacity 0.22s cubic-bezier(0.25, 0, 0.4, 1) !important;
}

.fast-fade {
  transition: opacity 0.2s cubic-bezier(0.25, 0, 0.4, 1) !important;
}

.grid-transition {
  opacity: 0;
}

.grid-transition.show {
  opacity: 1 !important;
  transition: opacity 0.3s ease-in-out;
}

/* Fix double transition: disable individual item entry animation when the whole grid is fading in, except for pinning animations */
.posts.grid-transition a:not(.anim-boxshadow) {
  animation: none;
}

/* ─── Posts Grid Skeleton: always visible, no animation lag ─────────────────────────
   Simple static dark placeholder — always painted, zero CPU/GPU cost.
   The <a.thumb> is always visible; placeholder disappears when .loaded is added. */

/* Static dark placeholder — always shown, no animation */
div.posts>a.lazy-thumb:not(.loaded) {
  background: rgba(255, 255, 255, 0.05);
}

/* Once loaded: apply real image instantly */
div.posts>a.thumb.loaded {
  background-image: var(--thumb-bg);
}

/* Ensure child elements (labels, indicators) stay above the background */
div.posts>a.thumb > .thumb-indicators,
div.posts>a.thumb > p {
  position: absolute;
  z-index: 1;
}

.thumb-indicators {
    display: grid;
    grid-template-columns: 1fr 1fr;
    bottom: 5px;
    left: 5px;
    gap: 2px;
    align-items: center;
}

/* Make individual item entry subtler and faster for infinite scroll */
@keyframes fadeInFX {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* Item view media fades in — grid items do NOT fade in per-item to avoid paint floods */
img#f0ck-image,
div.imageDoor,
video {
  animation: 0.35s ease-out 0s 1 both fadeInFX;
}

.settings {
  display: grid;
  justify-content: center;
}

/* Touch-friendly font-size slider */
#font_size_slider {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 3px;
  background: var(--nav-border-color, #555);
  outline: none;
  touch-action: manipulation;
  /* prevent scroll stealing */
  cursor: pointer;
}

#font_size_slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent, #e91e63);
  cursor: grab;
  border: 3px solid var(--white, #fff);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
  transition: transform .1s;
}

#font_size_slider::-webkit-slider-thumb:active {
  transform: scale(1.2);
  cursor: grabbing;
}

#font_size_slider::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent, #e91e63);
  cursor: grab;
  border: 3px solid var(--white, #fff);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
  transition: transform .1s;
}

#font_size_slider::-moz-range-thumb:active {
  transform: scale(1.2);
  cursor: grabbing;
}

input[name="i_avatar"] {
  text-align: center;
  width: 50px;
  padding: 10px;
}

input#s_avatar {
  padding: 5px;
  border: 1px solid var(--black);
  border-radius: 0;
  background-image: linear-gradient(to bottom, var(--nav-link-background-linear-gradient));
  box-shadow: var(--nav-link-box-shadow);
  cursor: pointer;
}

#s_avatar:hover {
  background: #ffffff0f;
}

.theforceofthree {
  display: grid;
  grid-template-columns: 0.4fr 1fr 0.4fr;
}

.upload {
  padding: 10px;
}

/* Infinite scroll loading indicator */
.loading-spinner {
  display: inline-block;
  font-size: 12px;
  color: var(--footbar-color);
  animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 0.1;
  }

  50% {
    opacity: 1;
  }
}



/* Modern Tags Layout */
.tags-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  padding: 20px 0;
  margin: 35px;
}

.tag-card {
  display: flex;
  flex-direction: column;
  background: var(--badge-bg, #171717);
  border-radius: 0;
  overflow: hidden;
  text-decoration: none !important;
  transition: transform 0.2s, box-shadow 0.2s;
  border: 1px solid var(--nav-border-color, rgba(255, 255, 255, 0.1));
  position: relative;
}

.tag-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
  background: var(--dropdown-bg, #232323);
  border-color: var(--accent, #9f0);
}

.tag-card-image {
  width: 100%;
  height: 100px;
  overflow: hidden;
  position: relative;
  background: #000;
}

.tag-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
  opacity: 0.8;
}

.tag-card:hover .tag-card-image img {
  transform: scale(1.1);
  opacity: 1;
}

.tag-card-image-title {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1em;
  font-weight: 700;
  font-family: var(--font, monospace);
  color: #fff;
  text-align: center;
  padding: 0 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow:
    0 0 8px rgba(0, 0, 0, 0.9),
    0 1px 3px rgba(0, 0, 0, 0.8),
    0 0 24px rgba(0, 0, 0, 0.7);
  background: linear-gradient(to bottom,
      transparent 0%,
      transparent 35%,
      rgba(0, 0, 0, 0.4) 100%);
  transition: letter-spacing 0.25s, font-size 0.25s;
  pointer-events: none;
}

.tag-card:hover .tag-card-image-title {
  font-size: 1.18em;
  letter-spacing: 0.1em;
}

/* Hall rating badge */
.hall-rating-badge {
  position: absolute;
  bottom: 6px;
  left: 8px;
  font-size: 0.65em;
  font-weight: 800;
  font-family: var(--font, monospace);
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 2px;
  pointer-events: none;
  text-transform: uppercase;
  line-height: 1.4;
  z-index: 2;
}

.hall-rating-sfw {
  background: rgba(0, 180, 80, 0.85);
  color: #fff;
  border: 1px solid rgba(0, 255, 100, 0.3);
}

.hall-rating-nsfw {
  background: rgba(220, 40, 60, 0.85);
  color: #fff;
  border: 1px solid rgba(255, 60, 80, 0.3);
}

.hall-rating-nsfl {
  background: rgba(80, 0, 120, 0.9);
  color: #e0b0ff;
  border: 1px solid rgba(160, 60, 200, 0.4);
}

.tag-card-content {
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.tag-name {
  color: var(--white, #fff);
  font-size: 1.1em;
  font-family: var(--font, monospace);
  word-break: break-word;
  overflow-wrap: anywhere;
}

.tag-count {
  color: #888;
  font-size: 0.9em;
}

.tag-description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.85em;
  color: #aaa;
  line-height: 1.4;
  word-break: break-word;
}

/* Search Overlay */
#search-overlay,
#excluded-tags-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(5px);
  z-index: 100100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

#search-overlay.visible,
#excluded-tags-overlay.visible {
  opacity: 1;
}

#search-input {
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--accent);
  color: var(--white);
  font-size: 3rem;
  width: 100%;
  max-width: 800px;
  text-align: center;
  outline: none;
  font-family: var(--font);
  padding: 10px;
}

#search-input::placeholder {
  color: #555;
  text-transform: uppercase;
}

#search-close,
#excluded-tags-close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: var(--white);
  font-size: 2rem;
  cursor: pointer;
  font-family: sans-serif;
  opacity: 0.7;
  transition: opacity 0.2s;
}

#search-close:hover,
#excluded-tags-close:hover {
  opacity: 1;
}

/* Delete Tag Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(5px);
  z-index: 100100;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  background: var(--dropdown-bg);
  border: 1px solid var(--nav-border-color);
  padding: 30px;
  border-radius: 0;
  text-align: center;
  min-width: 300px;
}

.modal-content h3 {
  margin-top: 0;
  color: var(--white);
}

.modal-content p {
  color: #ccc;
  margin: 20px 0;
}

.modal-actions {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.modal-actions button {
  padding: 10px 20px;
  border: none;
  border-radius: 0;
  cursor: pointer;
  font-weight: bold;
  font-family: var(--font);
}

.btn-danger {
  background: #e74c3c;
  color: white;
}

.btn-danger:hover {
  background: #c0392b;
}

.btn-secondary {
  background: #555;
  color: white;
}

.btn-secondary:hover {
  background: #666;
}

/* Nav User Dropdown */
.nav-user-dropdown {
  position: relative;
  margin-left: 5px;
}

.nav-mime-dropdown {
  position: relative;
  display: inline-block;
}

.nav-mime-btn {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--white);
  padding: 5px 5px;
  font-size: 0.8em;
  font-weight: bold;
  cursor: pointer;
  border-radius: 0;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 50px;
  justify-content: center;
  opacity: 0.8;
}

.nav-mime-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  opacity: 1;
}

.nav-mime-btn::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 12px;
}

.nav-mime-menu {
  display: none;
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  background: var(--dropdown-bg);
  min-width: 150px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
  z-index: 1000;
  border-radius: 0;
  border: 1px solid var(--nav-border-color);
  overflow: hidden;
}


.nav-mime-dropdown:hover .nav-mime-menu,
.nav-mime-dropdown.stay-open .nav-mime-menu {
  display: block;
}

.nav-mime-item {
  color: #ccc;
  padding: 10px 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9em;
  transition: all 0.2s;
  cursor: pointer;
  user-select: none;
}

.nav-mime-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--accent);
}

.nav-mime-item input[type="checkbox"] {
  accent-color: var(--black);
  cursor: pointer;
}

.nav-mime-item.locked {
  cursor: not-allowed !important;
  opacity: 0.85;
}

.nav-mime-item.locked:hover {
  background: transparent !important;
  color: #ccc !important;
}

.nav-mime-item.locked input[type="checkbox"] {
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.filter-pill.locked {
  cursor: not-allowed !important;
  opacity: 0.85;
}

.nav-mime-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 5px 0;
}

.nav-mime-clear {
  background: transparent;
  border: none;
  color: #888;
  padding: 8px 15px;
  width: 100%;
  text-align: left;
  font-size: 0.8em;
  cursor: pointer;
  transition: all 0.2s;
}

.nav-mime-clear:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

.nav-mime-menu.visible {
  display: block;
  animation: fadeInDown 0.2s ease-out;
}

.nav-mime-menu a {
  color: #ccc;
  padding: 10px 15px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9em;
  transition: all 0.2s;
}

.nav-mime-menu a:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--accent);
}

.nav-mime-menu a svg {
  opacity: 0.7;
}

.nav-mime-menu a:hover svg {
  opacity: 1;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.nav-user-btn {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--white);
  padding: 5px 5px;
  font-size: 0.8em;
  font-weight: bold;
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 50px;
  justify-content: center;
  opacity: 0.8;
  height: 32px;
}

/* Avatar-style button variant */
.nav-avatar-btn {
  background: none;
  border: 1px solid transparent;
  min-width: unset;
  border-radius: 0;
  line-height: 1;
  opacity: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: border-color 0.2s, background 0.2s;
}

/* Hover / open state for the dropdown buttons (square, no glow) */
.nav-user-dropdown:hover > .nav-user-btn,
.nav-avatar-btn.is-active {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
  opacity: 1;
}

.nav-user-dropdown,
.nav-user-dropdown .nav-user-btn,
.nav-user-dropdown .nav-avatar-img,
.nav-user-dropdown .nav-user-menu {
  border-radius: 0 !important;
}

.nav-avatar-btn.is-active .nav-avatar-caret {
  transform: rotate(180deg);
}

.nav-avatar-caret {
  transition: transform 0.2s ease;
}

.nav-avatar-img {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: cover;
  flex-shrink: 0;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.nav-avatar-img:hover {
  opacity: 0.8;
}

.nav-avatar-name {
  font-size: 14px;
  color: var(--white);
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-avatar-caret {
  font-size: 0.7em;
  opacity: 0.6;
  flex-shrink: 0;
}





.nav-user-btn::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 10px;
}

.nav-user-menu {
  display: none;
  position: absolute;
  top: calc(100%);
  left: auto;
  right: 0;
  min-width: 100%;
  /* at least as wide as the avatar button */
  background: var(--dropdown-bg);
  border: 1px solid var(--nav-border-color);
  border-radius: 0;
  z-index: 10000 !important;
  overflow: hidden;
}


.nav-user-menu.show {
  display: block;
}

.nav-user-menu a {
  display: block;
  padding: 5px 10px;
  color: var(--white);
  text-decoration: none;
  transition: background 0.2s;
}

.nav-user-menu a:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Own uploads awaiting approval: count on the right of the "Pending" entry */
.nav-user-menu a.nav-menu-pending {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.nav-menu-count {
  min-width: 18px;
  padding: 1px 5px;
  box-sizing: border-box;
  background: var(--accent);
  color: #000;
  font-size: 0.75em;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Nothing waiting: still shown, but quiet */
.nav-menu-count.is-zero {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-muted, #8a8f98);
}

.nav-user-divider {
  display: none;
  height: 1px;
  background: var(--nav-border-color);
  margin: 5px 0;
}

@media (max-width: 768px) {
  .nav-user-divider {
    display: block;
  }
}

#nav-user-toggle {
  min-width: 100px;
  text-align: left;
  display: grid;
  grid-template-columns: auto 1fr auto;
}

/* nav-links base: horizontal flex row on desktop */
.nav-links {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 5px;
}

.nav-links a {
  color: var(--white);
  text-decoration: none;
  font-size: 14px;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.nav-links a:hover {
  opacity: 1;
}

.nav-links svg {
  vertical-align: middle;
}


/* Login Modal */
#login-modal,
#register-modal,
#shortcuts-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.85);
  /* Semi-transparent black backdrop */
  z-index: 99999;
  display: flex;
  /* Hidden by default via inline style usually, or JS toggles class */
  justify-content: center;
  align-items: center;
  padding: 20px;
  backdrop-filter: blur(5px);
}

.flash-success {
  color: var(--accent);
  background: var(--bg);
  border: 1px solid var(--accent);
  padding: 10px;
  margin-bottom: 15px;
  font-size: 0.9em;
  text-align: center;
}

.flash-error {
  color: #ff4444;
  background: var(--bg);
  border: 1px solid #ff4444;
  padding: 10px;
  margin-bottom: 15px;
  font-size: 0.9em;
  text-align: center;
}

#flash-container {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 600px;
  z-index: 100200 !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.flash-message {
  background: var(--bg);
  padding: 15px 20px;
  border-radius: 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
  animation: slideDown 0.3s ease-out;
  pointer-events: auto;
  font-size: 0.95em;
  border: 1px solid var(--accent);
}

@keyframes slideDown {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.flash-message.flash-success {
  border-color: var(--accent);
  color: var(--accent);
}

.flash-message.flash-error {
  border-color: #ff4444;
  color: #ff4444;
}

.flash-message.flash-info {
  border-color: #f0a030;
  color: #f0a030;
}

.login-modal-content {
  background: var(--bg);
  border: 1px solid var(--accent);
  border-radius: 0;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  max-width: 400px;
  width: 100%;
  position: relative;
  text-align: center;
}

.login-modal-content {
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}

.login-modal-content .login-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  background: transparent;
  /* Override default login-form bg if needed */
}

.login-modal-content .login-image {
  max-width: 100%;
  margin-bottom: 1rem;
  border-radius: 0;
}

.login-notice {
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid var(--accent);
  padding: 12px;
  margin-bottom: 15px;
  font-size: 0.85em;
  color: var(--white);
  text-align: left;
  line-height: 1.5;
  border-radius: 2px;
}

.notification-dot {
  width: 10px;
  height: 10px;
  background-color: #39ff14;
  /* Matrix neon green */
  border-radius: 50%;
  display: inline-block;
  margin-left: 5px;
  box-shadow: 0 0 5px #39ff14;
}

.login-modal-content input[type="text"],
.login-modal-content input[type="email"],
.login-modal-content input[type="password"] {
  width: 100%;
  padding: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--nav-border-color);
  color: var(--white);
  font-family: var(--font);
}

.login-modal-content input:focus {
  border-color: var(--accent);
  outline: none;
}

.login-modal-content button[type="submit"] {
  background: var(--accent);
  color: var(--black);
  border: none;
  padding: 10px;
  font-weight: bold;
  cursor: pointer;
  font-family: var(--font);
  margin-top: 10px;
}

.login-modal-content button[type="submit"]:hover {
  filter: brightness(1.1);
}

#login-modal-close,
#register-modal-close,
#shortcuts-modal-close {
  position: absolute;
  top: 10px;
  right: 15px;
  background: none;
  border: none;
  color: var(--white);
  font-size: 1.5rem;
  cursor: pointer;
  opacity: 0.7;
}

#login-modal-close:hover,
#register-modal-close:hover {
  opacity: 1;
  color: var(--accent);
}

/* Comments System */
/* Primary definition moved up to line 1082 to avoid overrides */
video.autoplay-gif {
  background: rgba(0, 0, 0, 0) !important;
}

#comments-container {
  color: var(--white);
  font-family: var(--font);
  background: rgba(0, 0, 0, 0.2);
}

/* Definitions consolidated at line 1099 */

.comment {
  padding: 10px;
  background: var(--bg);
  display: flex;
  gap: 15px;
  margin-bottom: 0px;
}

.comment.deleted .comment-content {
  color: #888;
  font-style: italic;
}

.comment-avatar img {
  width: 40px;
  height: 40px;
}

.comment-body {
  flex: 1;
  min-width: 0;
}

/* .comment-meta styles moved to earlier consolidation block */

.comment-author {
  font-weight: bold;
  color: var(--white);
  margin-right: 3px;
  align-self: baseline;
}

.comment-permalink {
  color: #666;
  text-decoration: none;
}

.comment-content {
  line-height: 1.4;
  word-break: break-word;
  overflow: auto;
  white-space: pre-wrap;
}

/* .reply-btn consolidated earlier */

/* .comment-children consolidated earlier */

.comment-input textarea {
  width: 100%;
  min-height: 80px;
  background: #000000a1;
  border: none;
  color: var(--white);
  padding: 10px;
  font-family: inherit;
  resize: vertical;
}

.input-actions {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
  position: relative;
}

.input-actions button {
  height: 30px;
  min-width: 30px;
  padding: 0 10px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 0;
  border: 1px solid var(--nav-border-color, rgba(255, 255, 255, 0.15));
  background: var(--navigation-links-bg, rgba(255, 255, 255, 0.08));
  color: var(--white, #fff);
  box-shadow: none;
  text-shadow: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  margin: 0;
  vertical-align: middle;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.input-actions button i {
  font-size: 13px;
  line-height: 1;
}

.input-actions button:hover,
.input-actions button.active,
.input-actions button.is-active {
  background: var(--nav-link-hover-bg, rgba(255, 255, 255, 0.15));
  border-color: var(--accent);
  color: var(--accent);
  text-decoration: none;
}

.input-actions button:hover i,
.input-actions button.active i,
.input-actions button.is-active i {
  color: var(--accent);
}

.input-actions button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Primary actions: Submit, Save, DM send */
.input-actions .submit-comment,
.input-actions .save-edit-btn,
.input-actions .dm-send-btn {
  background: var(--accent);
  color: var(--black);
  border: 1px solid var(--accent);
  padding: 0 14px;
}

.input-actions .submit-comment:hover,
.input-actions .save-edit-btn:hover,
.input-actions .dm-send-btn:hover {
  background: var(--accent);
  color: var(--black);
  border-color: var(--accent);
  opacity: 0.9;
}

/* Cancel buttons: regular theme buttons (style guide), accent on hover like the others */
.input-actions .cancel-reply,
.input-actions .cancel-edit-btn {
  padding: 0 10px;
}

/* Comment / DM input buttons: style guide (square, flat, theme colours, no glow) */
.input-actions,
.input-actions * {
  border-radius: 0 !important;
}

.input-actions button:active {
  opacity: 0.75;
}

.input-actions button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.emoji-picker {
  box-shadow: none !important;
}

/* Light / Paper Theme */
html[theme='light'] .input-actions button,
html[theme='paper'] .input-actions button,
[theme='light'] .input-actions button,
[theme='paper'] .input-actions button {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #334155;
}

html[theme='light'] .input-actions button:hover,
html[theme='paper'] .input-actions button:hover,
[theme='light'] .input-actions button:hover,
[theme='paper'] .input-actions button:hover,
html[theme='light'] .input-actions button.active,
html[theme='paper'] .input-actions button.active,
[theme='light'] .input-actions button.active,
[theme='paper'] .input-actions button.active,
html[theme='light'] .input-actions button.is-active,
html[theme='paper'] .input-actions button.is-active,
[theme='light'] .input-actions button.is-active,
[theme='paper'] .input-actions button.is-active {
  background: #f1f5f9;
  border-color: var(--accent);
  color: var(--accent);
}

html[theme='light'] .input-actions button:hover i,
html[theme='paper'] .input-actions button:hover i,
[theme='light'] .input-actions button:hover i,
[theme='paper'] .input-actions button:hover i,
html[theme='light'] .input-actions button.active i,
html[theme='paper'] .input-actions button.active i,
[theme='light'] .input-actions button.active i,
[theme='paper'] .input-actions button.active i,
html[theme='light'] .input-actions button.is-active i,
html[theme='paper'] .input-actions button.is-active i,
[theme='light'] .input-actions button.is-active i,
[theme='paper'] .input-actions button.is-active i {
  color: var(--accent);
}

html[theme='light'] .input-actions .submit-comment,
html[theme='light'] .input-actions .save-edit-btn,
html[theme='light'] .input-actions .dm-send-btn,
html[theme='paper'] .input-actions .submit-comment,
html[theme='paper'] .input-actions .save-edit-btn,
html[theme='paper'] .input-actions .dm-send-btn,
[theme='light'] .input-actions .submit-comment,
[theme='light'] .input-actions .save-edit-btn,
[theme='light'] .input-actions .dm-send-btn,
[theme='paper'] .input-actions .submit-comment,
[theme='paper'] .input-actions .save-edit-btn,
[theme='paper'] .input-actions .dm-send-btn {
  background: var(--accent);
  color: var(--black);
  border-color: var(--accent);
}

html[theme='light'] .input-actions .cancel-reply,
html[theme='light'] .input-actions .cancel-edit-btn,
html[theme='paper'] .input-actions .cancel-reply,
html[theme='paper'] .input-actions .cancel-edit-btn,
[theme='light'] .input-actions .cancel-reply,
[theme='light'] .input-actions .cancel-edit-btn,
[theme='paper'] .input-actions .cancel-reply,
[theme='paper'] .input-actions .cancel-edit-btn {
  background: #e2e8f0;
  color: #475569;
  border-color: #cbd5e1;
}

html[theme='light'] .input-actions .cancel-reply:hover,
html[theme='light'] .input-actions .cancel-edit-btn:hover,
html[theme='paper'] .input-actions .cancel-reply:hover,
html[theme='paper'] .input-actions .cancel-edit-btn:hover,
[theme='light'] .input-actions .cancel-reply:hover,
[theme='light'] .input-actions .cancel-edit-btn:hover,
[theme='paper'] .input-actions .cancel-reply:hover,
[theme='paper'] .input-actions .cancel-edit-btn:hover {
  background: #cbd5e1;
  border-color: #94a3b8;
  color: #0f172a;
}

html[theme='light'] .char-counter,
html[theme='paper'] .char-counter,
[theme='light'] .char-counter,
[theme='paper'] .char-counter {
  color: #64748b;
}

.comment-input.reply-input {
  margin-top: 10px;
  margin-bottom: 10px;
}

.loading:not(.submit-comment),
.error {
  text-align: center;
  padding: 20px;
  color: #888;
}

/* Markdown Styles */
.comment-content .greentext {
  color: #789922;
  font-family: monospace;
  display: inline-block;
}

.comment-content blockquote {
  border-left: 3px solid var(--accent);
  margin: 5px 0;
  padding-left: 10px;
  opacity: 0.8;
}

.comment-content ul,
.comment-content ol {
  padding-left: 20px;
}

.comment-content a {
  color: #1fb2b0;
}

.comment-content a:hover {
  text-decoration: underline;
}

/* YouTube embed wrapper */
.yt-embed-wrap {
  display: block;
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 8px 0;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.yt-embed-wrap::before {
  content: '';
  display: block;
  padding-top: 56.25%;
  /* 16:9 */
}

.yt-embed-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Same-site video embed wrapper */
.video-embed-wrap {
  display: block;
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 8px 0;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  background: #000;
}

.video-embed-wrap:has(.autoplay-gif) {
  background: transparent;
  box-shadow: none;
}

.video-embed-wrap video {
  width: 100%;
  display: block;
  max-height: 500px;
  background: #000;
}

/* Same-site audio embed wrapper */
.audio-embed-wrap {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 8px 0;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  background: rgba(0, 0, 0, 0.3);
  padding: 6px 8px;
  position: relative;
}

.image-embed-wrap {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 480px;
}

.comment-content .image-embed-wrap {
  max-width: 200px;
}

.admin-delete-attachment-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  background: rgba(0, 0, 0, 0.6);
  color: #ff4d4d;
  border: none;
  border-radius: 3px;
  padding: 3px 6px;
  cursor: pointer;
  font-size: 11px;
  font-family: monospace;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out, background 0.2s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.image-embed-wrap:hover .admin-delete-attachment-btn,
.video-embed-wrap:hover .admin-delete-attachment-btn,
.audio-embed-wrap:hover .admin-delete-attachment-btn {
  opacity: 1;
  pointer-events: auto;
}

.admin-delete-attachment-btn:hover {
  background: rgba(0, 0, 0, 0.8);
  color: #ff6666;
}

.admin-delete-attachment-btn:active {
  transform: scale(0.95);
}

.audio-embed-wrap audio {
  width: 100%;
  display: block;
  outline: none;
}

/* Vocaroo embed wrapper */
.vocaroo-embed-wrap {
  display: block;
  width: 100%;
  max-width: 300px;
  height: 60px;
  margin: 8px 0;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  background: #000;
}

.vocaroo-embed-wrap iframe {
  width: 100%;
  height: 100%;
  border: none;
}

@media (max-width: 600px) {

  .yt-embed-wrap,
  .video-embed-wrap,
  .audio-embed-wrap {
    max-width: 100%;
  }
}

#comment-sor {
  background: none;
  border: none;
}

/* Admin buttons consolidated earlier in the file */

/* Edit mode */
.edit-textarea {
  width: 100%;
  min-height: 80px;
  background: var(--bg);
  border: 1px solid var(--accent);
  color: var(--white);
  padding: 10px;
  border-radius: 4px;
  font-family: inherit;
  resize: vertical;
  margin-bottom: 8px;
}

.edit-actions {
  display: flex;
  gap: 8px;
}

.save-edit-btn,
.cancel-edit-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-weight: bold;
}

.save-edit-btn {
  background: var(--accent);
  color: var(--black);
}

.cancel-edit-btn {
  background: #666;
  color: white;
}

/* Pinned comments */
.comment.pinned {
  background: var(--comment-bg);
  border-left: 3px solid var(--accent);
}

.pinned-badge {
  background: var(--accent);
  color: var(--black);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.75em;
  font-weight: bold;
  margin-right: 8px;
}

/* .admin-pin-btn consolidated earlier */

/* Two-level comment replies */
.comment-replies {
  margin-left: 5px;
  border-left: 2px solid var(--badge-tag);
  padding-left: 5px;
  margin-top: 0px;
}

.comment.reply {
  background: var(--bg);
}

.reply-mention {
  color: var(--accent);
  font-weight: bold;
  margin-right: 4px;
}

.submanage {
  text-align: center;
  border-top: 1px solid black;
}

/* AJAX Loading Bar */
.navbar.pbwork::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--accent);
  z-index: 2000;
  animation: pbwork-anim 2s infinite linear;
  width: 100%;
  transform-origin: 0% 50%;
}

@keyframes pbwork-anim {
  0% {
    transform: scaleX(0);
  }

  50% {
    transform: scaleX(0.5);
  }

  100% {
    transform: scaleX(1);
  }
}

/* Session Page Grid Layout */
.session-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
}

.session-card {
  background: var(--nav-bg);
  border: 1px solid transparent;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.session-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  border-color: var(--accent);
}

.session-card.current {
  border: 1px solid #2ecc71;
  box-shadow: 0 0 10px rgba(46, 204, 113, 0.2);
}

.session-card.current .session-user {
  color: #2ecc71;
}

.session-header {
  background: rgba(0, 0, 0, 0.2);
  padding: 10px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.session-user {
  font-weight: bold;
  font-size: 1.1em;
  color: var(--accent);
}

.session-badges {
  display: flex;
  align-items: center;
  gap: 8px;
}

.session-id {
  font-family: monospace;
  color: #666;
  font-size: 0.9em;
}

.session-body {
  padding: 15px;
  flex-grow: 1;
}

.session-info {
  margin-bottom: 8px;
  font-size: 0.9em;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
}

.session-info:last-child {
  margin-bottom: 0;
}

.session-info .label {
  font-weight: bold;
  color: #888;
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.session-info .value {
  color: var(--white);
  word-break: break-all;
}

.browser-info {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: monospace;
  font-size: 0.85em;
  opacity: 0.9;
}

.session-footer {
  padding: 10px 15px;
  background: rgba(0, 0, 0, 0.1);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.badge-kmsi {
  background: #333;
  color: #ccc;
  border: 1px solid #555;
}

span.badge.badge-current {
  font-weight: bold;
  font-size: 12.5px;
  margin: 5px;
  padding: 2px;
  text-transform: uppercase;
}

.badge-current {
  background: var(--accent);
  color: var(--black);
}

.session-page-title {
  grid-column: 1 / -1;
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--accent);
  color: var(--white);
  font-size: 1.5em;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.session-stats {
  font-size: 0.6em;
  color: var(--accent);
  vertical-align: middle;
  margin-left: 10px;
}

.session-delete {
  color: #888;
  text-decoration: none;
  font-size: 1.2em;
  margin-left: auto;
  transition: color 0.2s;
  padding: 0 5px;
}

.session-delete:hover {
  color: #e74c3c;
  text-decoration: none;
}

/* Avatar Upload Styles */
.avatar-settings-wrapper {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 30px;
  background: var(--metadata-bg);
  border-radius: 8px;
  padding-bottom: 20px;
}

@media (max-width: 768px) {
  .avatar-settings-wrapper {
    grid-template-columns: 1fr;
    gap: 15px;
  }
}

.avatar-preview-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-left: 10px;
}

.avatar-preview-label {
  font-size: 0.85em;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.avatar-preview-img {
  width: 128px;
  height: 128px;
  object-fit: cover;
  border: 3px solid var(--accent);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray);
  color: #666;
  font-size: 3em;
  font-weight: bold;
}

.avatar-upload-section,
.avatar-item-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.avatar-upload-section h4,
.avatar-item-section h4 {
  margin: 0;
  color: var(--white);
  font-size: 1em;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 5px;
}

.avatar-hint {
  margin: 0;
  font-size: 0.8em;
  color: #666;
}

.avatar-upload-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.avatar-filename {
  color: #888;
  font-size: 0.9em;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.avatar-progress-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}

.avatar-progress-bar {
  flex: 1;
  height: 8px;
  background: var(--gray);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.avatar-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), #4ade80);
  border-radius: 4px;
  transition: width 0.15s ease;
  position: relative;
}

.avatar-progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.3),
      transparent);
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

.avatar-progress-text {
  font-size: 0.85em;
  color: var(--accent);
  min-width: 40px;
  text-align: right;
  font-family: monospace;
}

.avatar-upload-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.avatar-status {
  font-size: 0.9em;
  padding: 5px 0;
  min-height: 1.5em;
}

.avatar-status.success {
  color: #4ade80;
}

.avatar-status.error {
  color: #ef4444;
}

.avatar-item-input-wrapper {
  display: flex;
  gap: 10px;
  align-items: center;
}

.avatar-item-input-wrapper .input {
  flex: 1;
  max-width: 150px;
}

.button {
  padding: 8px 16px;
  background: var(--accent);
  color: var(--black);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9em;
  transition: background 0.2s ease, transform 0.1s ease, opacity 0.2s ease;
}

.button:hover:not(:disabled) {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.button:active:not(:disabled) {
  transform: translateY(0);
}

.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.button-danger {
  background: #ef4444;
  color: white;
}

.button-danger:hover:not(:disabled) {
  background: #dc2626;
}

.button-secondary {
  background: #6b7280;
  color: white;
}

.button-secondary:hover:not(:disabled) {
  background: #4b5563;
}

.git-hash {
  font-size: 10px;
  color: #666;
  user-select: none;
  text-align: center;
  align-content: center;
}

.comment-content img {
  /*max-height: 200px;*/
  max-width: 480px;
  width: 200px;
}

/*.sidebar-comment-img {
  max-height: 128px !important;
}*/

.sidebar-comment-img.emoji {
  width: auto;
  max-width: 120px !important;
  object-fit: contain;
  vertical-align: top;
}

video.sidebar-comment-img.emoji {
  max-width: 120px !important;
  /* vertical-align: middle; */
  object-fit: contain;
  display: inline-block;
}

.sidebar-activity .video-embed-wrap {
  display: block;
  max-width: 100%;
  box-shadow: none;
  margin: 4px 0;
}

.sidebar-video-link {
  display: block;
  font-size: 0.8em;
  color: var(--accent);
  text-decoration: none;
}

.sidebar-video-link .yt-title {
  font-weight: 500;
}

.sidebar-video-link i {
  margin-right: 4px;
}

.comment-content img:not(.emoji) {
  display: block;
  cursor: pointer;
  max-width: 200px;
  width: auto;
}

/* Smaller emojis in the narrow left sidebar */
body.layout-modern .comment-content img.emoji {
  height: auto;
  max-width: max-content;
  vertical-align: text-top;
}

body.layout-legacy .comment-content img.emoji {
  height: auto;
  width: auto;
  max-width: 200px;
}

.new-item-fade {
  box-shadow: inset 3px 0px 0px var(--accent);
}

.sidebar-activity .new-item-fade {
  box-shadow: none;
}




.comment-highlighted {
  box-shadow: inset 3px 0px 0px var(--accent) !important;
  background-color: var(--bg) !important;
}

.anchor-target {
  box-shadow: inset 3px 0px 0px var(--accent) !important;
  background: rgba(17, 17, 17, 0.55) !important;
  padding-left: 5px;
}

@keyframes activityGlow {
  0% {
    color: var(--accent);
    /* transform: scale(1); */
    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
  }

  50% {
    color: #1fb2b0;
    /* transform: scale(1.2); */
    filter: drop-shadow(0 0 10px #1fb2b0);
  }

  100% {
    color: var(--accent);
    /* transform: scale(1); */
    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
  }
}

.activity-glowing {
  animation: activityGlow 1s ease-in-out;
  transform-origin: center;
  display: inline-block;
}

/* MOTD Display (Integrated into Navbar) */
.motd-container {
  grid-column: 1 / -1;
  width: 100%;
  background: var(--motd-bg);
  text-align: left;
  z-index: 999;
  border-top: 1px solid var(--nav-border-color);
  border-bottom: 1px solid var(--nav-border-color);
  font-size: 0.85em;
  padding: 4px 0;
  position: relative;
  order: 2;
}

#motd-display {
  text-transform: initial;
}

.motd-content {
  line-height: 1.4;
  display: inline-block;
  min-height: 1.4em;
  /* padding: 0 30px 0 10px; */
  /* Space for X button */
}

#motd-display,
#motd-display-guest {
  left: 5px;
  position: relative;
}

.motd-close {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-muted, #888);
  font-size: 1.2em;
  cursor: pointer;
  padding: 0 5px;
  line-height: 1;
  transition: color 0.2s;
}

.motd-close:hover {
  color: var(--accent);
}

.motd-content a {
  color: var(--accent, #9f0);
  text-decoration: underline;
}

.motd-content a:hover {
  filter: brightness(1.2);
}

.navbar-brand {
  display: grid;
  grid-template-columns: 1fr auto;
}

.image-brand {
  width: 5cm;
}

.kontrollelement {
  grid-column: 2;
}

.metadata {
  grid-template-columns: 0.4fr auto 0.4fr;
  grid-template-rows: auto 1fr;
  background-color: transparent !important;
  border: none !important;
}

html[theme="f0ck95d"] .badge-dark {
  border: none;
  background-image: none;
  box-shadow: none;
}

.steuerung {
  font-size: large;
  font-family: monospace;
  user-select: none;
  -webkit-user-select: none;
}

.steuerung a,
.steuerung button {
  color: white;
  display: inline-block;
  vertical-align: middle;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.steuerung a:hover,
.steuerung button:hover {
  opacity: 0.8;
}

.steuerung a:active,
.steuerung button:active,
.steuerung a.is-clicked,
.steuerung button.is-clicked {
  opacity: 0.6;
}

.steuerung.steuerung-icon {
  font-size: x-large;
}

.steuerung.steuerung-icon a,
.steuerung.steuerung-icon button {
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6em;
  transition: opacity 0.15s ease;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: inherit;
}

.steuerung.steuerung-icon a:hover,
.steuerung.steuerung-icon button:hover {
  opacity: 0.8;
}

.steuerung.steuerung-icon a:active,
.steuerung.steuerung-icon button:active,
.steuerung.steuerung-icon a.is-clicked,
.steuerung.steuerung-icon button.is-clicked {
  opacity: 0.6;
}

html[theme='light'] .steuerung a,
html[theme='paper'] .steuerung a,
[theme='light'] .steuerung a,
[theme='paper'] .steuerung a {
  color: var(--accent);
}

html[theme='light'] .steuerung a:hover,
html[theme='light'] .steuerung button:hover,
html[theme='paper'] .steuerung a:hover,
html[theme='paper'] .steuerung button:hover,
[theme='light'] .steuerung a:hover,
[theme='light'] .steuerung button:hover,
[theme='paper'] .steuerung a:hover,
[theme='paper'] .steuerung button:hover {
  color: var(--accent);
  opacity: 0.75;
}

html[theme='light'] .steuerung.steuerung-icon,
html[theme='light'] .steuerung.steuerung-icon a,
html[theme='light'] .steuerung.steuerung-icon button,
html[theme='light'] .steuerung.steuerung-icon i,
html[theme='paper'] .steuerung.steuerung-icon,
html[theme='paper'] .steuerung.steuerung-icon a,
html[theme='paper'] .steuerung.steuerung-icon button,
html[theme='paper'] .steuerung.steuerung-icon i,
[theme='light'] .steuerung.steuerung-icon,
[theme='light'] .steuerung.steuerung-icon a,
[theme='light'] .steuerung.steuerung-icon button,
[theme='light'] .steuerung.steuerung-icon i,
[theme='paper'] .steuerung.steuerung-icon,
[theme='paper'] .steuerung.steuerung-icon a,
[theme='paper'] .steuerung.steuerung-icon button,
[theme='paper'] .steuerung.steuerung-icon i {
  color: var(--accent);
}

html[theme='light'] .steuerung.steuerung-icon a:hover,
html[theme='light'] .steuerung.steuerung-icon button:hover,
html[theme='paper'] .steuerung.steuerung-icon a:hover,
html[theme='paper'] .steuerung.steuerung-icon button:hover,
[theme='light'] .steuerung.steuerung-icon a:hover,
[theme='light'] .steuerung.steuerung-icon button:hover,
[theme='paper'] .steuerung.steuerung-icon a:hover,
[theme='paper'] .steuerung.steuerung-icon button:hover {
  color: var(--accent);
  opacity: 0.75;
}

/* "Back to top" below the comments, all screen sizes; f0ckm.js toggles .is-visible once the
   container it sits in is scrolled far enough (class name kept from when it was mobile-only) */
.mobile-scroll-to-top {
  /* Same size as the steuerung chevrons (.steuerung-icon: x-large, 1.6em wide, icon at 0.85em) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6em;
  height: 1.6em;
  padding: 0;
  font-size: x-large;
  line-height: 1;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
  background: none;
  border: none;
  color: var(--white);
  position: absolute;
  bottom: 15px;
  cursor: pointer;
  left: 50%;
  transform: translateX(-50%);
}

.mobile-scroll-to-top .fa-solid {
  font-size: 0.85em;
  pointer-events: none;
}

.mobile-scroll-to-top.is-visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.15s ease, visibility 0s;
}

/* Hover / press feedback like the steuerung controls (is-clicked is set by the shared feedback) */
.mobile-scroll-to-top.is-visible:hover { opacity: 0.8; }
.mobile-scroll-to-top.is-visible:active,
.mobile-scroll-to-top.is-visible.is-clicked { opacity: 0.6; }

/* Horizontal centre next to the right sidebar is computed in f0ckm.js (inline `left`);
   50% above is only the fallback before the script has run */

.steuerung.steuerung-icon .fa-solid {
  font-size: 0.85em;
}


.blahlol {
  grid-column: 1 / 4;
  width: 100%;
}

body.layout-modern .blahlol {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

body.layout-modern .blahlol .blahlol-meta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
}

body.layout-modern .blahlol .gapRight {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
}

body.layout-modern .blahlol:not(:has(.blahlol-meta)) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

body.layout-modern .blahlol:not(:has(.blahlol-meta)) .gapRight {
  flex-basis: 100%;
  width: 100%;
}

span#favs {
  background: transparent !important;
}

.badge-dark,
#themeselector {
  background-color: unset;
  border: unset;
}

._204863 {
  background: none;
  border: none;
  background-color: none;
}

html[theme="iced"] ._204863 {
  background: none;
}

.media-object {
  border: none;
}

/*.v0ck {
  background: transparent !important;
}*/



html[theme="f0ck95"] .embed-responsive.embed-responsive-16by9 {
  background: var(--nav-bg) !important;
}

.v0ck_overlay {
  background-color: transparent;
}

/* .v0ck_player_controls {
  background: rgba(0, 0, 0, 0.10) !important;
} */

html[theme="term"] .image-brand {
  filter: hue-rotate(-50deg);
}

html[theme="f0ck"] .image-brand {
  filter: hue-rotate(-50deg);
}

html[theme="p1nk"] .image-brand {
  filter: hue-rotate(150deg);
}

html[theme="orange"] .image-brand {
  filter: hue-rotate(-160deg);
}

.v0ck_overlay {
  background-color: none !important;
}

.tags {
  display: grid;
}

@media (min-width: 600px) {
  .tags {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .tags {
    grid-template-columns: repeat(3, 1fr);
  }
}

.tag {
  box-shadow: 1px 1px 1px black;
  display: grid;
  margin: 5px;
  grid-template-columns: auto;
  grid-template-rows: 1fr;
}

.navigation-rechts {
  display: flex;
}

.about {
  background: none !important;
}

.login-image {
  width: 300px;
}

.tos {
  margin: 2em;
}

.nav-link[data-toggle="dropdown"]::after {
  content: "" !important;
}

/* .dropdown-menu.shii {
  width: auto;
} */

@media (min-width: 900px) {
  .tags {
    grid-template-columns: repeat(auto-fill, 20em);
    justify-content: center;
  }
}

.tag img {
  width: 100%;
}

@media (max-width: 1056px) {

  html,
  body {
    text-align: left;
    max-width: 100vw;
    overflow-x: clip;
    scrollbar-width: none !important;
  }
}

/* Fade in video on page load */

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}



.image-brand {
  width: 4cm;
}

.pagewrapper {
  padding: 5px;
  padding-bottom: 65px;
  /* Reserve space for fixed pagination */
  position: relative;
}

@media (min-width: 1000px) {
  .pagewrapper {
    padding-right: 300px;
  }

  body.layout-modern .pagewrapper {
    padding-right: 400px;
  }

  body.sidebar-right-hidden .pagewrapper {
    padding-right: 5px;
  }
}

/* 
   Since Index and Item pages have their own layout wrappers that handle space reservation,
   we disable the generic pagewrapper padding on those pages to avoid "double padding" or broken expansion.
*/
@media (min-width: 1000px) {

  .pagewrapper:has(.index-layout-wrapper),
  .pagewrapper:has(.item-layout-container),
  .pagewrapper:has(.meme-layout-wrapper),
  body.private-gate-active .pagewrapper {
    padding-right: 0 !important;
  }
}

.container {
  padding-top: 1vh;
}

#next,
#prev {
  visibility: hidden;
}

/* Navbar grid layout removed for modern-navbar compatibility */

.bg-black {
  background: #0000008a !important;
}

.pagination>a {
  background: #232323b2;
}

html[theme="paper"] .pagination {
  color: white;
}

html[theme="paper"] .navbar-brand {
  background: transparent;
}

.navbar-brand:hover {
  background: transparent;
}

div.search {
  display: grid;
}

div.sbt {
  display: grid;
  grid-template-columns: 1fr auto;
  align-content: center;
}

#sbtButton {
  visibility: hidden;
}

#sbtInput {
  background: #00000021;
  box-shadow: -1px -1px 0px #252525;
  border: inset 1px #0000001c;
  padding: revert;
  box-shadow: inset 0px 0px 5px 1px #0000005e;
  width: 100%;
}

/* === VIEW-SPECIFIC STYLES === */

/* === NAVBAR STYLES === */

/* ── Always-visible sticky navbar ── */
.navbar,
body > nav.navbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 10070 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  flex-shrink: 0 !important;
  min-height: 42px !important;
  box-sizing: border-box !important;
  font-family: var(--font);
  border-bottom: 1px solid var(--nav-border-color);
  background: var(--nav-bg) !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Brand: always visible, flush left */
.navbar-brand {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  height: 40px !important;
  max-width: 180px;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Nav collapse: fills middle, always visible on desktop */
.nav-collapse {
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
}

/* Right group: flush right */
.nav-right-group {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 5px;
  flex-shrink: 0;
  margin-left: auto;
}

/* MOTD: wraps to its own full-width row below brand+links+right-group */
.motd-container {
  order: 999;
  width: 100%;
  flex-shrink: 0;
}

/* Uniform size for all Font Awesome icons in the navbar */
.navbar .fa-solid,
.navbar .fa-regular,
.navbar .fa {
  font-size: 14px;
  width: 14px;
  text-align: center;
  line-height: 1;
}

/* Hamburger button: hidden on desktop */
.navbar-toggler {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  gap: 5px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
}

.navbar-toggler span {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Animated X when open */
.navbar-toggler.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.navbar-toggler.is-open span:nth-child(2) {
  opacity: 0;
}

.navbar-toggler.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Icon cluster: tags / filter / search */
.nav-icon-cluster {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 6px;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.nav-icon-cluster a,
.nav-item-rel>a,
.nav-right-group>a {
  color: #fff;
  opacity: 0.75;
  transition: opacity 0.2s;
}

.nav-icon-cluster a:hover,
.nav-item-rel>a:hover,
.nav-right-group>a:hover {
  opacity: 1;
}

/* Right-anchor all dropdowns inside nav-right-group */
.nav-right-group .nav-user-menu,
#nav-user-menu,
#nav-visitor-menu {
  left: auto;
  right: 0;
  transform: none;
  z-index: 10000 !important;
}

/* At least as wide as the toggle button (.nav-user-dropdown is sized by it), wider only if an entry needs it */
#nav-visitor-menu {
  box-sizing: border-box;
  min-width: 100%;
  width: max-content;
  white-space: nowrap;
}

#nav-visitor-menu a {
  white-space: nowrap;
  padding: 7px 14px;
}

.nav-right-group .notif-dropdown,
#notif-dropdown {
  left: auto;
  right: 0;
  /* anchor to bell container right edge; JS overrides on mobile */
  transform: none;
  z-index: 10000 !important;
}

/* Shift arrow to sit directly under the bell icon */
.nav-right-group .notif-dropdown::before,
.nav-right-group .notif-dropdown::after {
  left: auto;
  right: 0;
  transform: none;
}

/* Bell active state: lights up when notification dropdown is open */
#nav-notif-btn {
  transition: color 0.15s ease, filter 0.15s ease, transform 0.15s ease;
}

#nav-notif-btn.is-active {
  opacity: 1;
}

/* ── Mobile: ≤768px ── */
@media (max-width: 800px) {

  /* Show hamburger */
  .navbar-toggler {
    display: flex;
    color: white;
  }

  /* Hide desktop icon cluster */
  .nav-icon-cluster {
    display: none;
  }

  /* On mobile: right group stays in the single top row */
  .nav-right-group {
    gap: 15px;
    padding: 0 4px;
    margin-left: auto;
  }

  /* nav-collapse: hidden by default, opens as full-width row below brand+right */
  .nav-collapse {
    display: none;
    flex: none;
    /* override desktop flex:1 so width:100% takes effect */
    order: 10;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding: 6px 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: var(--nav-bg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    gap: 4px;
  }

  .nav-collapse.show {
    display: flex;
    animation: navFadeIn 0.2s ease-out;
  }

  /* Guests: menu items aligned right, next to the thumb and the visitor menu */
  .nav-collapse-guest,
  .nav-collapse-guest .nav-links {
    justify-content: flex-end;
  }

  @keyframes navFadeIn {
    from {
      opacity: 0;
      transform: translateY(-4px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Nav links: horizontal row on mobile too */
  .nav-links {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    gap: 4px;
  }

  .nav-links>a {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    font-size: 0.9em;
  }



  .nav-halls-dropdown .nav-halls-btn {
    display: block;
    padding: 13px 16px;
    width: 100%;
    text-align: left;
  }

  .nav-halls-dropdown .nav-user-menu {
    position: static !important;
    display: none;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: none;
    border: none;
    right: auto;
    left: auto;
    width: 100%;
  }

  .nav-halls-dropdown:hover .nav-user-menu,
  .nav-halls-dropdown.is-open .nav-user-menu {
    display: block;
  }

  /* Avatar dropdown stays floating (absolute) on mobile */
  .nav-right-group .nav-user-menu {
    position: absolute;
  }

  .nav-item-rel {
    position: relative;
    display: inline-flex;
  }

}

@media (max-width: 467px) {

  /* .nav-avatar-name,
  .nav-avatar-caret {
    display: none;
  } */
}


.switch-container {
  display: inline-flex;
  align-items: center;
  margin-right: 15px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 18px;
  margin-bottom: 0;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked+.slider {
  background-color: #f44336;
}

input:checked+.slider:before {
  transform: translateX(16px);
}

.switch-label {
  margin-right: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}

.mode-selector {
  display: inline-flex;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  overflow: hidden;
  vertical-align: middle;
  grid-column: 1;
}

.mode-btn {
  display: inline-block;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  border: none;
  padding: 2px 8px;
  font-size: 11px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s;
  line-height: 18px;
}

.mode-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  text-decoration: none;
}

.mode-btn.active {
  background: var(--accent);
  color: var(--bg);
  font-weight: bold;
}

.mode-btn:not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}

/* ---------- Multi-select rating toggles (filter modal) ---------- */
.rating-selector {
  display: inline-flex;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  overflow: hidden;
  vertical-align: middle;
  grid-column: 1;
}

.rating-selector.locked {
  cursor: not-allowed;
  opacity: 0.9;
}

.rating-toggle-btn {
  display: inline-block;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  border: none;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  padding: 2px 8px;
  font-size: 11px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
  line-height: 18px;
  font-family: inherit;
  user-select: none;
}

.rating-toggle-btn:last-child {
  border-right: none;
}

.rating-toggle-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.rating-toggle-btn.locked {
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.rating-toggle-btn.locked:not(.active) {
  opacity: 0.45 !important;
}

.rating-toggle-btn.locked.active {
  opacity: 1 !important;
}

/* Per-rating active colours */
.rating-toggle-btn.active[data-rating="sfw"] {
  background: #2e7d32;
  color: #fff;
  font-weight: bold;
}

.rating-toggle-btn.active[data-rating="nsfw"] {
  background: #c62828;
  color: #fff;
  font-weight: bold;
}

.rating-toggle-btn.active[data-rating="nsfl"] {
  background: #6a1b9a;
  color: #fff;
  font-weight: bold;
}

.rating-toggle-btn.active[data-rating="untagged"] {
  background: #37474f;
  color: #fff;
  font-weight: bold;
}

.rating-toggle-btn.rating-toggle-all.active {
  background: var(--accent);
  color: var(--bg, #000);
  font-weight: bold;
}


/* ---------- Random / Shuffle mode button ---------- */
.shuffle-btn {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--white);
  padding: 5px 5px;
  font-size: 0.8em;
  font-weight: bold;
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 50px;
  justify-content: center;
  opacity: 0.8;
  grid-row: 2;
}

.shuffle-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
  opacity: 1;
}

.shuffle-btn.active {
  background: var(--accent);
  color: var(--bg, #000);
  border-color: rgba(255, 255, 255, 0.2);
  font-weight: bold;
}

@keyframes shuffle-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.shuffle-btn.is-shuffling .shuffle-icon {
  display: inline-block;
  animation: shuffle-spin 0.4s ease-out;
}


.notif-footer {
  padding: 10px;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(0, 0, 0, 0.2);
}

.view-all-notifs {
  color: var(--accent) !important;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 0.5px;
}

.view-all-notifs:hover {
  text-decoration: underline !important;
}

/* ---------- footer.html styles ---------- */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100100;
}

body.modal-open {
  overflow: hidden;
}

.modal-content {
  background: #222;
  padding: 20px;
  width: 90%;
  max-width: 400px;
  color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.modal-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 15px;
}

textarea.mod-reason {
  width: 100%;
  height: 80px;
  margin-top: 10px;
  background: #333;
  color: #fff;
  border: 1px solid #444;
  resize: vertical;
  padding: 8px;
  border-radius: 4px;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

textarea.mod-reason:focus {
  outline: none;
  border-color: #666;
}

.error-msg {
  color: #ff6b6b;
  font-size: 0.9em;
  margin-top: 5px;
  display: none;
}

.error-msg:not(:empty) {
  display: block;
}

#report-error {
  color: #ff6b6b;
  font-size: 0.88em;
  margin: 10px 0 5px 0;
  padding: 8px 12px;
  background: rgba(255, 107, 107, 0.12);
  border: 1px solid rgba(255, 107, 107, 0.35);
  border-radius: 4px;
  text-align: left;
  line-height: 1.4;
  word-break: break-word;
  animation: fadeIn 0.2s ease-in-out;
}

#report-error:empty {
  display: none !important;
}

.field-error {
  border-color: #ff6b6b !important;
  box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.4) !important;
  animation: fieldShake 0.4s ease-in-out;
}

#modal-report-recaptcha.field-error {
  border: 1px solid #ff6b6b !important;
  border-radius: 4px;
  box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.4) !important;
  padding: 4px;
}

@keyframes fieldShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

/* ---------- notifications.html styles ---------- */
.notif-history-container {
  max-width: 760px !important;
  margin: 0 auto;
  padding: 20px 10px;
}

.notif-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.notif-page-header h2 {
  font-size: 0.9em;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #777;
}

.notifications-list-full.posts {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 0 !important;
  width: 100% !important;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
}

.notif-reason {
  font-size: 0.85em;
  color: #ffb8b8;
  margin-top: 4px;
}

.notifications-page .notif-item {
  display: grid !important;
  grid-template-columns: auto 1fr;
  width: 100%;
  align-items: center;
  padding: 8px 15px;
  text-decoration: none;
  color: #999;
  border-bottom: 1px solid rgba(255, 255, 255, 0.02);
  font-size: 0.9em;
  transition: all 0.1s;
}

.notifications-page .notif-item:last-child {
  border-bottom: none;
}

.notifications-page .notif-item:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #eee;
}

.notifications-page .notif-item.unread {
  background: rgba(var(--accent-rgb, 31, 178, 176), 0.03);
  color: #eee;
  border-left: 2px solid var(--accent, #1fb2b0);
  font-weight: 500;
  grid-template-columns: auto;
}

.notif-user {
  font-weight: bold;
  color: #bbb;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notif-item.unread .notif-user {
  color: var(--accent, #1fb2b0);
}

.notif-msg {
  white-space: wrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notif-time {
  font-family: monospace;
  font-size: 0.8em;
  color: #444;
}

.notif-item:hover .notif-time {
  color: #777;
}

.btn-small {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #666;
  padding: 3px 10px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 10px;
  text-transform: uppercase;
  transition: all 0.2s;
}

.btn-small:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #888;
  color: #ccc;
}

/* ---------- subscriptions.html styles ---------- */
.subs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 15px;
  margin-bottom: 40px;
}

.sub-card {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.sub-link {
  text-decoration: none;
  color: inherit;
  display: block;
  flex-grow: 1;
}

.sub-card img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  display: block;
}

.sub-info {
  padding: 8px;
}

.sub-id {
  display: block;
  font-weight: bold;
  color: var(--accent);
}

.sub-user {
  display: block;
  font-size: 0.85em;
  color: #888;
}

.unsub-btn {
  width: 100%;
  border: none;
  background: rgba(200, 50, 50, 0.2);
  color: #ff6666;
  padding: 8px;
  cursor: pointer;
  font-size: 0.9em;
  transition: background 0.2s;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.unsub-btn:hover {
  background: rgba(200, 50, 50, 0.4);
}

/* ---------- mod/approve.html styles ---------- */
.approval-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.approval-card {
  background: var(--nav-bg);
  border: 1px solid var(--nav-border-color);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.approval-card-media {
  width: 100%;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.approval-card-media img,
.approval-card-media video,
.approval-card-media iframe {
  max-width: 100%;
  max-height: 300px;
  width: 100%;
  object-fit: contain;
}

.approval-card-body {
  padding: 15px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.approval-card-info {
  font-size: 14px;
  color: var(--white);
}

.approval-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.approval-card-actions {
  margin-top: auto;
  display: flex;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--nav-border-color);
}

.approval-card-actions a {
  flex: 1;
  text-align: center;
  padding: 8px;
  text-decoration: none;
}

/* ---------- mod/audit.html styles ---------- */
.audit-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 20px;
}

@media (min-width: 768px) {
  .audit-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.audit-card {
  background: var(--badge-bg);
  border: 1px solid var(--nav-border-color);
  border-radius: 8px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.2s ease, border-color 0.2s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.audit-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
}

.audit-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid var(--nav-border-color);
  padding-bottom: 10px;
  margin-bottom: 5px;
}

.audit-card-user {
  font-weight: bold;
  font-size: 1.1em;
}

.audit-card-time {
  font-size: 0.85em;
  color: #888;
}

.audit-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.audit-card-row {
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.audit-label {
  font-size: 0.8em;
  text-transform: uppercase;
  color: #888;
  min-width: 80px;
}

.audit-value {
  word-break: break-all;
}

.audit-reason-box {
  margin-top: 5px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.2);
  border-left: 3px solid var(--accent);
  font-style: italic;
  font-size: 0.9em;
}

.badge-action {
  text-transform: uppercase;
  font-size: 0.75em;
}

/* Audit filter bar */
.audit-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 18px;
  padding: 12px 14px;
  background: var(--badge-bg);
  border: 1px solid var(--nav-border-color);
  border-radius: 8px;
}

.audit-filter-input {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--nav-border-color);
  border-radius: 5px;
  color: inherit;
  font-size: 0.85em;
  padding: 5px 10px;
  outline: none;
  transition: border-color 0.2s;
}

.audit-filter-input:focus {
  border-color: var(--accent);
}

select.audit-filter-input {
  min-width: 180px;
}

input.audit-filter-input {
  min-width: 160px;
}

.audit-filter-btn {
  cursor: pointer;
  font-size: 0.8em;
  padding: 5px 12px;
  border: none;
  line-height: 1.6;
}

.audit-filter-clear {
  opacity: 0.7;
}

.audit-filter-clear:hover {
  opacity: 1;
}

/* Header right group (time + id) */
.audit-card-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

/* Entry ID badge */
.audit-entry-id {
  font-size: 0.72em;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  color: var(--accent);
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--nav-border-color);
  border-radius: 4px;
  padding: 1px 6px;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.audit-diff {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  padding: 10px;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 0.85em;
  line-height: 1.4;
  word-break: break-all;
  border: 1px solid rgba(255, 255, 255, 0.05);
  margin-top: 5px;
}

.diff-removed {
  color: #ff8080;
  background-color: rgba(255, 0, 0, 0.15);
  display: block;
  padding: 0 4px;
}

.diff-added {
  color: #80ff80;
  background-color: rgba(0, 255, 0, 0.15);
  display: block;
  padding: 0 4px;
}

div.posts>a.thumb.has-notif {
  box-shadow: inset 0 0 0 1000px rgba(255, 0, 0, 0.28) !important;
  border: 1px solid var(--accent);
}

div.posts>a.thumb.has-notif:hover,
div.posts>a.thumb.has-notif:focus-visible {
  box-shadow: inset 0 0 0 1000px rgba(255, 0, 0, 0.4), 0 0 0 2px var(--accent) !important;
}

div.posts>a.thumb.has-notif::after {
  content: attr(data-ext) " / " attr(data-user) !important;
  visibility: hidden;
  opacity: 1 !important;
  background-color: var(--posts-meta-bg) !important;
  color: var(--accent) !important;
  font-weight: normal !important;
  z-index: 10 !important;
}

div.posts>a.thumb.has-notif:hover::after,
div.posts>a.thumb.has-notif:focus-visible::after {
  visibility: visible !important;
}

/* Sidebar toggle reflow glide (flipSidebarGrids): tiles move under a still cursor, so hover styling
   would ride along with the tile that was hovered. Hover is off until the tiles have landed. */
div.posts.sidebar-flipping {
  pointer-events: none;
}

div.posts.sidebar-flipping>a:not(.notif-item):not(.has-notif):hover,
div.posts.sidebar-flipping>a:not(.notif-item):not(.has-notif).touch-active {
  box-shadow: none !important;
}

html[theme='light'] div.posts.sidebar-flipping>a:not(.notif-item):not(.has-notif):hover,
html[theme='paper'] div.posts.sidebar-flipping>a:not(.notif-item):not(.has-notif):hover {
  border-color: #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

div.posts.sidebar-flipping>a.thumb.has-notif:hover {
  box-shadow: inset 0 0 0 1000px rgba(255, 0, 0, 0.28) !important;
}

div.posts.sidebar-flipping>a:hover::after,
div.posts.sidebar-flipping>a.touch-active::after {
  visibility: hidden !important;
}

/* Stretch the <p> to fill the entire thumb so p::after is always centered */
div.posts>a.thumb.has-notif p {
  position: absolute !important;
  inset: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

div.posts>a.thumb.has-notif p::after {
  content: "!" !important;
  position: static !important;
  color: var(--accent) !important;
  font-size: 40px !important;
  font-weight: 900 !important;
  text-shadow: 0 0 10px #000, 0 0 20px rgba(var(--accent-rgb), 0.5) !important;
  z-index: 200 !important;
  pointer-events: none !important;
  visibility: visible !important;
}

.thumb {
  position: relative;
  overflow: hidden;
}

/* ===== Dynamic Thumbnail Sizes ===== */
/* Size tier 2: 2×2 grid cells */
div.posts>a.thumb[data-size="2"] {
  grid-column: span 2;
  grid-row: span 2;
}

.thumb>.preview-video,
.sidebar-video-thumb-wrap>.preview-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  animation: none; /* cancel the global video fadeInFX */
  transition: opacity 0.2s ease-in;
}

.thumb>.preview-video.playing,
.sidebar-video-thumb-wrap>.preview-video.playing {
  opacity: 1;
}

.thumb p {
  position: relative;
  z-index: 10;
  pointer-events: none;
}

div.posts>a::after {
  z-index: 10 !important;
  pointer-events: none;
}

/* Fallback placeholder for thumbnails that failed to load */
.thumb.thumb-fallback {
  background-size: contain !important;
  background-color: #0e0e1a !important;
  opacity: 0.6;
}


.pin-indicator {
  position: relative;
  left: 5px;
  font-size: 13px;
  fill: var(--accent);
  color: var(--accent);
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.8));
  z-index: 15;
  pointer-events: none;
}

.oc-indicator {
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.65em;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.4;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    z-index: 10;
}

/* For sub-cards which have a simpler structure */
.sub-link .pin-indicator {
  top: 3px;
  left: 3px;
}

/* Content Warning Modal */
#content-warning-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(5px);
}

.content-warning-content {
  background: var(--bg);
  border: 1px solid var(--nav-border-color);
  padding: 2rem;
  max-width: 500px;
  width: 90%;
  text-align: center;
  border-radius: 4px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  color: var(--font-color);
}

.content-warning-content h3 {
  margin-top: 0;
  color: var(--accent);
  margin-bottom: 1rem;
}

.content-warning-content p {
  margin-bottom: 2rem;
  line-height: 1.5;
}

.content-warning-content .modal-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.content-warning-content button {
  padding: 10px 20px;
  cursor: pointer;
  font-family: var(--font);
  font-weight: bold;
  border: none;
  border-radius: 3px;
  text-transform: uppercase;
  color: var(--black);
}

.content-warning-content #cw-accept {
  background: var(--accent);
}

.content-warning-content #cw-accept:hover {
  opacity: 0.9;
}

.content-warning-content #cw-decline {
  background: var(--gray);
  color: var(--white);
}


.content-warning-content #cw-decline:hover {
  background: #333;
}

/* Video Player Settings Menu: style guide (square, flat, theme colours, no glow) */
.v0ck_settings_container {
  position: relative;
  display: flex;
  align-items: center;
}

.v0ck_settings_menu {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 6px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 190px;
  padding: 4px 0;
  box-sizing: border-box;
  background: var(--bg, #111);
  border: 1px solid var(--accent);
  border-radius: 0;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  z-index: 20;
}

.v0ck_settings_menu.v0ck_hidden {
  display: none;
}

.v0ck_settings_menu,
.v0ck_settings_menu * {
  border-radius: 0 !important;
}

/* Rows: label left, control right; one flat hover surface */
.v0ck_menu_item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  color: var(--text-color, #fff);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.v0ck_menu_item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.v0ck_bg_row {
  cursor: default;
}

/* Plain action rows (Download): accent on hover, separated from the toggles above */
button.v0ck_menu_item {
  margin-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

button.v0ck_menu_item:hover {
  color: var(--accent);
}

.v0ck_switch_label {
  margin: 0;
  font-size: inherit;
  color: inherit;
}

/* Square switch: accent track with black knob when on */
.v0ck_cool_switch {
  position: relative;
  flex-shrink: 0;
  width: 32px;
  height: 16px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}

.v0ck_cool_switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  background: #fff;
  transition: transform 0.15s;
}

.v0ck_cool_switch.active {
  background: var(--accent);
  border-color: var(--accent);
}

.v0ck_cool_switch.active::after {
  background: #000;
  transform: translateX(16px);
}

.v0ck_cool_switch:hover {
  border-color: var(--accent);
}

/* Fix hover effect for settings button (viewBox scaling issue) */
.v0ck_settings_btn svg:hover {
  stroke-width: 2px !important;
  /* Override the default 30px which is for large viewBoxes */
}

/* Ensure SVG is vertically centered */
.v0ck_settings_btn svg {
  vertical-align: middle;
}

/* Mobile Optimized Player Controls */
@media screen and (max-width: 600px) {

  .v0ck_volume:hover+input[type="range"][name="volume"],
  .v0ck_player_controls>input[type="range"][name="volume"]:hover {
    min-width: 40px !important;
    /* Smaller expansion on mobile */
    max-width: 40px !important;
  }
}

body.layout-modern .navbar-header,
body.layout-legacy .navbar-header {
  background: transparent;
}

.sidebar-tags-container {
  padding: 5px;
  background: var(--bg);
  border-top: 1px solid var(--nav-border-color);
  overflow: visible;
  flex-shrink: 0;
}

.subf0ck-tag-scope {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-muted, #888);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.subf0ck-tag-scope code {
  font-size: 11px;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  padding: 1px 4px;
  border-radius: 3px;
}

/* ===== layout-modern: flexible by default, viewport-locked for item view ===== */
@media (min-width: 1000px) {
  body.layout-modern {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-y: auto;
  }

  /* Viewport lock to enable full app view and prevent scrollbars (standalone item view only) */
  body.layout-modern:not(.onara-modal-open):has(> .pagewrapper .item-layout-container) {
    overflow: hidden;
    height: 100vh;
  }

  body.layout-modern>.pagewrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* Reset top/side padding but let sidebar-aware padding-right be handled below */
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-bottom: 0 !important;
    padding-right: 0;
    /* overridden to 300px by sidebar rule below for generic pages */
  }

  body.layout-modern:not(.onara-modal-open):has(> .pagewrapper .item-layout-container)>.pagewrapper {
    min-height: 0;
    overflow: hidden;
    height: calc(100vh - var(--navbar-h, 50px));
  }


  body.layout-modern:not(.onara-modal-open):has(> .pagewrapper .item-layout-container)>.pagewrapper>#main,
  body.layout-modern:not(.onara-modal-open):has(> .pagewrapper .item-layout-container)>#main {
    min-height: 0;
    overflow: hidden;
    height: 100%;
  }
}

/* layout-modern: restore sidebar right-padding AND block-flow for generic pages
   (profile, settings, subscriptions, tags, etc.) — identical behaviour to layout-legacy.
   Specialized pages (index, item, meme) manage their own layout, so exclude them.
   Must be ≥1000px so the gap at 1000–1199px is covered. */
@media (min-width: 1000px) {
  body.layout-modern>.pagewrapper:not(:has(.index-layout-wrapper)):not(:has(.item-layout-container)):not(:has(.meme-layout-wrapper)) {
    padding-right: 300px;
  }

  body.layout-modern.sidebar-right-hidden>.pagewrapper:not(:has(.index-layout-wrapper)):not(:has(.item-layout-container)):not(:has(.meme-layout-wrapper)) {
    padding-right: 0;
  }
}

/* For generic pages in layout-modern, reset #main to plain block flow so children
   fill the full available width — mirrors layout-legacy exactly and prevents any
   flex child centering (e.g. margin:0 auto shrinking content like on /subscriptions). */
body.layout-modern>.pagewrapper:not(:has(.index-layout-wrapper)):not(:has(.item-layout-container)):not(:has(.meme-layout-wrapper)):not(:has(.messages-convo-page))>#main {
  display: block !important;
  width: 100%;
}

@media (min-width: 1000px) {


  /* metadata + comment headers must sit above the grid overflow */
  body.layout-modern .metadata,
  body.layout-modern .comment-header {
    z-index: 1;
    position: relative;
  }



  body.layout-modern .sidebar-tags-container {
    overflow-y: visible !important;
  }

  body.layout-modern .sidebar-tags-container span#tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    max-height: 70px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-color) transparent;
  }

  body.layout-modern #tags .mr-2 {
    margin-right: 0 !important;
  }
}

/* ===== layout-legacy: natural page scroll (2-column, body scrolls) ===== */
@media (min-width: 1000px) {
  body.layout-legacy {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    display: block;
  }

  body.layout-legacy>.wrapper,
  body.layout-legacy>.pagewrapper {
    display: block;
    height: auto;
    min-height: 100vh;
    padding-top: 0 !important;
  }

  body.layout-legacy>#main:not(.messages-convo-page),
  body.layout-legacy #main:not(.messages-convo-page) {
    display: block;
    height: auto;
    /*padding-top: 0 !important;*/
  }

  body.layout-legacy .item-layout-container {
    height: auto !important;
    min-height: 0;
  }

  body.layout-legacy .metadata,
  body.layout-legacy .comment-header {
    z-index: 100 !important;
    position: relative;
  }

  body.layout-legacy .sidebar-tags-container,
  body.layout-legacy .comments-list {
    overflow-y: visible !important;
  }
}

/* Global Breakout Tooltip System (Replaces native CSS tooltips to prevent clipping/scrolling bugs) */
[tooltip]::before,
[tooltip]::after {
  display: none !important;
}

#f0ck-breakout-tooltip {
  font-family: Helvetica, sans-serif;
  text-align: center;
  padding: 5px 10px;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  background: #535050;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  z-index: 1000000;
  pointer-events: none;
  position: fixed;
  line-height: normal;
  display: block;
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

#f0ck-breakout-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}

#f0ck-breakout-tooltip::before {
  content: '';
  position: absolute;
  border: 5px solid transparent;
  z-index: 1000001;
}

#f0ck-breakout-tooltip[data-flow="up"]::before,
#f0ck-breakout-tooltip[data-flow="up-left"]::before {
  top: 100%;
  left: var(--arrow-left, 50%);
  transform: translateX(-50%);
  border-top-color: #535050;
  border-bottom-width: 0;
}

#f0ck-breakout-tooltip[data-flow="up-left"]::before {
  /* arrow-left is now computed dynamically; no override needed */
}

#f0ck-breakout-tooltip[data-flow="down"]::before {
  bottom: 100%;
  left: var(--arrow-left, 50%);
  transform: translateX(-50%);
  border-bottom-color: var(--tooltip-bg, #131212);
  border-top-width: 0;
}

#f0ck-breakout-tooltip[data-flow="left"]::before {
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  border-left-color: var(--tooltip-bg, #131212);
  border-right-width: 0;
}

#f0ck-breakout-tooltip[data-flow="right"]::before {
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  border-right-color: var(--tooltip-bg, #131212);
  border-left-width: 0;
}

/* Tag Controls Refinement */
.tag-controls {
  display: flex;
  align-items: center;
  padding: 5px;
  gap: 10px;
}

.tag-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--badge-tag, #171717);
  border: 1px outset #221d1d;
  color: var(--white, #fff) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  text-decoration: none !important;
  /* Match badge proportions */
  padding: 1.5px 5px;
  border-radius: 3px;
  font-size: inherit;
  line-height: inherit;
}


.tag-btn.is-sfw {
  color: #28a745 !important;
}

.tag-btn.is-nsfw {
  color: #dc3545 !important;
}

/* Rating Button — icon-only, badge-proportioned (backward compatibility) */
#a_toggle.rating-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Match badge proportions exactly */
  padding: 1.5px 5px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background-color: #444;
  color: #fff;
  font-size: inherit;
  line-height: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
  font-family: inherit;
}

#a_toggle.rating-btn.is-sfw {
  background-color: var(--badge-sfw, #02500b);
  border-color: rgba(0, 0, 0, 0.15);
}

#a_toggle.rating-btn.is-nsfw {
  background-color: var(--badge-nsfw, #E10DC3);
  border-color: rgba(0, 0, 0, 0.15);
}

#a_toggle.rating-btn.is-nsfl {
  background-color: var(--badge-nsfl, #660000);
  border-color: rgba(0, 0, 0, 0.15);
}

#a_toggle.rating-btn.is-untagged {
  background-color: #444;
}

/* Rating Tag — interactive rating badge (SFW / NSFW / NSFL / UNTAGGED) */
.rating-tag {
  user-select: none;
  cursor: default;
}

.rating-tag.can-cycle {
  cursor: pointer;
}

.rating-tag .rating-label {
  pointer-events: none;
  color: inherit !important;
  text-shadow: 1px 1px black;
}

.rating-tag.is-untagged,
.badge.badge-untagged {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.55) !important;
  border: 1px dashed rgba(255, 255, 255, 0.35);
  padding: 0.5px 4px;
  border-radius: 3px;
  text-transform: uppercase;
  box-sizing: border-box;
}

html[theme='light'] .rating-tag.is-untagged,
html[theme='light'] .badge.badge-untagged,
html[theme='paper'] .rating-tag.is-untagged,
html[theme='paper'] .badge.badge-untagged {
  color: rgba(0, 0, 0, 0.55) !important;
  border-color: rgba(0, 0, 0, 0.35);
}

.rating-tag a {
  color: inherit !important;
  text-decoration: none !important;
  pointer-events: none;
}

.rating-tag.can-cycle a {
  cursor: pointer;
}

/* ── #tags box (tags, rating badge, add-tag button): style guide (square, flat, theme colours, no glow) ──
   Same rules as the .gapRight action row. Rating badges keep their rating colours. */
span#tags,
span#tags *,
span#tags *::before,
span#tags *::after {
  border-radius: 0 !important;
}

span#tags :is(.badge, .rating-tag, .rating-label, .tag-btn, a, i) {
  box-shadow: none !important;
  text-shadow: none !important;
}

/* The "new tag" highlight fades the background only: flat, no glow */
span#tags .new-tag-glow {
  box-shadow: none !important;
}

/* One height for everything in the row: tags, rating badge, add-tag button and the tag input. Each used
   to get its height from its own padding/borders (25.4 / 26.4 / 21 / 20px); now they share --tag-h
   (the rating badge's height: 1.4em line + its label border) and centre their content inside it */
span#tags {
  --tag-h: calc(1.4em + 4px);
}

span#tags .tags-inner > .badge,
span#tags .tag-btn,
span#tags .tag-ac-wrapper {
  box-sizing: border-box;
  height: var(--tag-h);
  display: inline-flex;
  align-items: center;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

span#tags .tag-controls {
  padding-top: 2.5px;
  padding-bottom: 2.5px;
}

span#tags .tag-ac-wrapper form {
  height: 100%;
}

span#tags .tag-ac-input {
  box-sizing: border-box;
  height: 100%;
}

span#tags .tag-btn {
  min-width: 26px;
  background: var(--navigation-links-bg, rgba(255, 255, 255, 0.08));
  border: 1px solid var(--nav-border-color, rgba(255, 255, 255, 0.15));
  color: var(--white, #fff) !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

span#tags .tag-btn:hover,
span#tags .tag-btn.is-active {
  background: var(--nav-link-hover-bg, rgba(255, 255, 255, 0.15));
  border-color: var(--accent);
  color: var(--accent) !important;
}

/* Rating-coloured tag buttons keep their rating colour (hover still shows the accent border) */
span#tags .tag-btn.is-sfw:not(:hover) {
  color: #28a745 !important;
}

span#tags .tag-btn.is-nsfw:not(:hover) {
  color: #dc3545 !important;
}

span#tags :is(.tag-btn, .rating-tag.can-cycle, .badge a):hover {
  transform: none;
}

span#tags :is(.tag-btn, .rating-tag.can-cycle):active {
  opacity: 0.75;
}

span#tags :is(.tag-btn, .rating-tag, .badge a):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}



.rules {
  padding: 10px;
}

/* Shortcuts List */
#shortcuts-modal .login-modal-content {
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}

#shortcuts-modal .login-modal-content::-webkit-scrollbar-thumb {
  background-color: var(--accent);
  background-clip: content-box;
  border: 3px solid transparent;
  border-radius: 10px;
}

.shortcuts-content {
  padding: 10px 20px 20px 20px;
  color: var(--white);
  text-align: left;
}

.shortcut-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 15px;
}

.shortcut-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 8px;
  font-family: var(--font);
  gap: 15px;
}

.shortcut-item span:first-child {
  flex-shrink: 0;
  white-space: nowrap;
}

.shortcut-item span:last-child {
  text-align: right;
  opacity: 0.8;
}

.shortcut-item kbd {
  background: var(--badge-bg);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--accent);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.9em;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}

#help-button:hover {
  opacity: 1 !important;
}

#shortcut-theme {
  cursor: pointer;
}

@media (max-width: 480px) {
  #shortcuts-modal {
    padding: 10px;
  }

  .shortcuts-content h2 {
    font-size: 1.2rem;
    margin-bottom: 15px !important;
  }

  .shortcut-item {
    font-size: 12px;
    gap: 8px;
  }
}

#a_username {
  color: var(--white);
  display: inline;
}

.id-link {
  color: var(--white);
}

/* Image Modal / Lightbox */
.image-modal-overlay {
  background-color: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100100;
  overflow: auto;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity 0.3s ease;
  display: none;
  /* Hidden by default */
  flex-direction: column;
}

.image-modal-overlay.visible {
  display: flex !important;
}

.image-modal-close {
  position: fixed;
  top: 20px;
  right: 30px;
  color: #fff;
  font-size: 32px;
  font-weight: bold;
  cursor: pointer;
  z-index: 10002;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transition: all 0.2s;
}

.image-modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.image-modal-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: 40px;
  box-sizing: border-box;
  margin: auto;
}

/* Explicitly isolate modal image from on-page styles */
.image-modal-container img#image-modal-img {
  display: block;
  margin: auto;
  max-width: calc(100vw - 80px) !important;
  max-height: calc(100vh - 80px) !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
  border-radius: 2px;
  animation: modalZoomIn 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  cursor: move !important;
  /* Fallback */
  cursor: -webkit-grab !important;
  cursor: -moz-grab !important;
  cursor: grab !important;
  /* Standard rules must be last */
  transform-origin: center;
  transition: transform 0.05s ease-out;
  user-select: none;
}

/* Mobile responsive scaling for the image modal */
@media (max-width: 768px) {
  .image-modal-container {
    padding: 0 !important;
  }

  .image-modal-container img#image-modal-img {
    max-width: 100vw !important;
    max-height: 100vh !important;
    object-fit: contain;
  }

  .image-modal-close {
    top: 10px;
    right: 15px;
    width: 40px;
    height: 40px;
    font-size: 28px;
    background: rgba(0, 0, 0, 0.8);
    /* Higher contrast on mobile */
  }
}

/* Hardened 'Closed Grab' / Grabbing state */
body.modal-is-grabbing,
body.modal-is-grabbing * {
  cursor: move !important;
  /* Fallback */
  cursor: -webkit-grabbing !important;
  cursor: -moz-grabbing !important;
  cursor: grabbing !important;
  /* Standard rules must be last */
}

@keyframes modalZoomIn {
  from {
    transform: scale(0.98);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

body.modal-open {
  overflow: hidden !important;
  padding-right: var(--scrollbar-width, 0px);
}

body.layout-modern .tag-controls {
  background: var(--bg);
  border-top: 1px solid var(--nav-border-color);
}

body.layout-modern .sidebar-tags-container {
  background: var(--bg);

}

body.layout-modern .tag-ac-wrapper {
  margin-left: 4px !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
}

body.layout-modern .tag-ac-input {
  padding: 0 2px;
  min-width: 60px;
}

.phrase {
  text-align: center;
  font-size: small;
  background: rgba(0, 0, 0, 0.2);
}

/* Global Drag & Drop Overlay */
#drop-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(var(--accent-rgb), 0.15);
  backdrop-filter: blur(8px);
  z-index: 10000;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  border: 4px dashed var(--accent);
  margin: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  border-radius: 20px;
}

#drop-overlay.active {
  display: flex;
  pointer-events: auto;
}

#drop-overlay .overlay-content {
  background: var(--shade1, #111);
  padding: 40px;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 1);
  border: 1px solid var(--shade3, #333);
}

#drop-overlay h2 {
  margin: 15px 0 0 0;
  font-size: 2rem;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 2px;
}

#drop-overlay svg {
  color: var(--accent);
  filter: drop-shadow(0 0 15px var(--accent));
}

/* Upload modal: a dropdown right under the navbar "Upload" link (f0ck_upload_init.js positions it),
   style guide (square, flat, theme colours). The rest of the page stays visible: no dim, no blur,
   the full-screen layer lets clicks through, only the panel takes them. */
#upload-drag-modal {
  position: fixed;
  inset: 0;
  /* Above the sticky navbar (10070) and so its MOTD row; below the mobile nav menu (10075) */
  z-index: 10072;
  display: none;
  background: none;
  pointer-events: none;
}

#upload-drag-modal.show {
  display: block;
}

#upload-drag-modal .modal-content {
  position: fixed;
  top: calc(var(--navbar-h, 50px) + 6px);
  left: 8px;
  width: min(760px, calc(100vw - 16px));
  max-width: none;
  max-height: calc(100vh - var(--navbar-h, 50px) - 18px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0;
  box-sizing: border-box;
  background: var(--bg, #111);
  border: 1px solid var(--accent);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
  scrollbar-width: none;
  animation: upload-dropdown-in 0.16s ease-out;
}

#upload-drag-modal .modal-content::-webkit-scrollbar {
  display: none;
}

@keyframes upload-dropdown-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  #upload-drag-modal .modal-content { animation: none; }
}

#upload-drag-modal .modal-content,
#upload-drag-modal .modal-content *,
#upload-drag-modal .modal-content *::before,
#upload-drag-modal .modal-content *::after {
  border-radius: 0 !important;
}

#upload-drag-modal .modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--text-color, var(--white, #fff));
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

#upload-drag-modal .modal-close:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* Header / scrolling body / footer: the panel itself doesn't scroll (so the close button stays put),
   .modal-body does; the title sticks to its top, the upload button + progress + status to its bottom */
#upload-drag-modal .modal-content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#upload-drag-modal .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

#upload-drag-modal .modal-body::-webkit-scrollbar {
  display: none;
}

#upload-drag-modal .upload-title {
  position: sticky;
  top: 0;
  /* Above everything the form layers inside the panel (badges 5-100, tag input 9998, emoji picker 10000);
     all of it lives in the panel's own stacking context, so these numbers don't leak outside */
  z-index: 10001;
  padding: 16px 62px 12px 18px;
  background: var(--bg, #111);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 1.05em;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: left;
}

#upload-drag-modal .modal-close {
  z-index: 10002;
}

#upload-drag-modal .upload-footer {
  position: sticky;
  bottom: 0;
  z-index: 10001;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px -1rem -1rem;
  padding: 12px 1rem 14px;
  background: var(--bg, #111);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

#upload-drag-modal .upload-footer .upload-status {
  padding: 0;
}

#upload-drag-modal .upload-container {
  max-width: 100%;
  width: 100%;
  box-shadow: none;
}

/* Private Society Gate */
.private-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
  gap: 15px;
}

.private-gate h1 {
  font-family: 'VCR', monospace;
  font-size: 3rem;
  color: var(--accent);
  letter-spacing: 2px;
}

.private-gate p {
  color: var(--white);
  opacity: 0.7;
  font-size: 1.1rem;
}

.private-gate-btn {
  background: var(--accent);
  color: var(--black);
  border: none;
  padding: 10px 40px;
  font-weight: bold;
  font-size: 1rem;
  cursor: pointer;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: opacity 0.2s;
}

.private-gate-btn:hover {
  opacity: 0.85;
}

.private-gate-actions {
  display: flex;
  gap: 15px;
  align-items: center;
}

.private-gate-btn-secondary {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}

.private-gate-btn-secondary:hover {
  background: var(--accent);
  color: var(--black);
}

.index-sidebar-right-footer,
.item-sidebar-right-footer,
.global-sidebar-right-footer {
  display: grid;
  /* One equal column per item, however many links the footer has */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-items: center;
  align-content: center;
  border-top: 1px solid var(--nav-border-color);
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.3);
  min-height: 30px;
  text-align: center;
}

.global-sidebar-right-footer>a {
  border-right: 1px solid var(--gray);
  opacity: 0.8;
}

.global-sidebar-right-footer>a:hover {
  opacity: 1;
}

/* Navbar "Upload" while its dropdown is open (f0ck_upload_init.js) */
nav.navbar #nav-upload-link.is-active,
nav.navbar #nav-upload-link.is-active i {
  color: var(--accent) !important;
  opacity: 1;
}

nav.navbar #nav-upload-link.is-active {
  box-shadow: inset 0 -2px 0 var(--accent);
}

nav.navbar #nav-upload-link i {
  display: inline-block;
  transition: transform 0.15s;
}

nav.navbar #nav-upload-link.is-active i {
  transform: rotate(180deg);
}

/* Navbar entries (settings gear, user/anon menu "Settings") whose page is open in the page modal */
nav.navbar a[data-page-modal].is-active,
nav.navbar a[data-page-modal].is-active i {
  color: var(--accent) !important;
  opacity: 1;
}

nav.navbar a.desktop-only[data-page-modal].is-active {
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* Entry whose page is open in the page modal (clicking it again closes the page) */
.global-sidebar-right-footer>a.is-active {
  opacity: 1;
  color: var(--accent);
  box-shadow: inset 0 -2px 0 var(--accent);
}

#help-button {
  cursor: pointer;
}

/* Divider between every entry; the last one (random, far right) closes the row */
.global-sidebar-right-footer>#help-button:not(:last-child) {
  border-right: 1px solid var(--gray);
}

.global-sidebar-right-footer>:last-child {
  border-right: 0;
}

.git-hash {
  font-family: monospace;
  font-size: 10px;
  opacity: 0.5;
  text-align: right;
  padding-right: 5px;
}

.item-preview {
  background: #0000001f;
  display: grid;
  grid-template-columns: auto 1fr;
  margin-top: 5px;
  gap: 5px;
}

.item-preview a {
  align-self: center;
}

.item-preview a img {
  display: grid;
  height: 32px;
  background: black;
  border-radius: 5px;
  margin: 5px;
}

.item-preview .sidebar-thumb-link {
  position: relative;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  margin: 5px;
  overflow: hidden;
  flex-shrink: 0;
  text-decoration: none;
}

.item-preview .sidebar-media-placeholder {
  position: absolute;
  inset: 0;
  width: 32px;
  height: 32px;
  font-size: 14px;
  border-radius: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item-preview .sidebar-media-placeholder.audio {
  background: #000000;
  color: var(--accent);
}

.item-preview .sidebar-media-placeholder.audio > i {
  display: flex !important;
  font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════
   PRIVATE MESSAGES / DM SYSTEM
   ═══════════════════════════════════════════════════════════ */

/* ── Page layout ─────────────────────────────────────────── */
.messages-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  min-height: auto;
}

.messages-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border, #333);
  padding-bottom: 12px;
  gap: 12px;
}

.messages-header h2 {
  margin: 0;
  font-size: 1.1em;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.dm-back-btn {
  color: var(--accent);
  font-size: 1.4em;
  text-decoration: none;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background 0.15s;
}

.dm-back-btn:hover {
  background: var(--bg2, #222);
}

.dm-convo-header-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.dm-convo-badge.badge-nsfw {
  background: var(--badge-nsfw);
}

.badge-nsfl {
  color: var(--white);
  background-color: var(--badge-nsfl);
  padding-right: 5px;
  padding-left: 5px;
  padding-top: 1.5px;
  padding-bottom: 1.5px;
  border-radius: 3px;
  text-shadow: 1px 1px var(--black);
  text-transform: uppercase;
}

.dm-convo-delete {
  background: var(--badge-nsfw);
  border: none;
  border-radius: 5px;
}

.dm-header-avatar {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  object-fit: cover;
}

.dm-header-username {
  font-weight: 600;
  font-size: 1em;
  text-decoration: none;
  color: var(--fg, #ddd);
}

.dm-header-username:hover {
  text-decoration: underline;
}

.dm-header-name-wrap {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.2;
}

.dm-presence {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72em;
  color: #666;
  min-height: 14px;
}

.dm-presence-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #555;
}

.dm-presence--online .dm-presence-dot {
  background: #3ddc84;
  box-shadow: 0 0 0 2px rgba(61, 220, 132, 0.25);
  animation: dm-presence-pulse 2s ease infinite;
}

.dm-presence--online {
  color: #3ddc84;
}

.dm-presence--recent .dm-presence-dot {
  background: #f5a623;
}

.dm-presence--recent {
  color: #f5a623;
}

@keyframes dm-presence-pulse {

  0%,
  100% {
    box-shadow: 0 0 0 2px rgba(61, 220, 132, 0.25);
  }

  50% {
    box-shadow: 0 0 0 4px rgba(61, 220, 132, 0.1);
  }
}

/* ── Key notice banner ───────────────────────────────────── */
.dm-key-notice {
  background: rgba(255, 200, 80, 0.15);
  border: 1px solid rgba(255, 200, 80, 0.4);
  color: #ffc850;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 0.88em;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.dm-key-export-inline {
  background: rgba(255, 200, 80, 0.25);
  border: 1px solid rgba(255, 200, 80, 0.5);
  color: #ffc850;
  padding: 3px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9em;
}

.dm-key-export-inline:hover {
  background: rgba(255, 200, 80, 0.4);
}

/* ── Inbox list ──────────────────────────────────────────── */
.dm-inbox-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dm-convo-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--bg2, #1a1a1a);
  border: 1px solid transparent;
  text-decoration: none;
  color: var(--fg, #ccc);
  transition: background 0.15s, border-color 0.15s;
  position: relative;
}

.dm-convo-card:hover {
  background: var(--bg3, #222);
  border-color: var(--accent);
}

.dm-convo-card.dm-convo-unread {
  border-color: var(--accent);
}

.dm-convo-avatar {
  width: 42px;
  height: 42px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}

.dm-convo-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.dm-convo-name {
  font-weight: 600;
  font-size: 0.95em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dm-convo-time {
  font-size: 0.78em;
  color: #666;
}

.dm-convo-badge {
  background: var(--accent);
  color: var(--bg, #000);
  font-size: 0.72em;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  flex-shrink: 0;
}

/* ── Thread ──────────────────────────────────────────────── */
.dm-thread {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 15px;
  min-height: 200px;
  max-height: calc(100vh - 420px);
}

/* ── Message bubbles ─────────────────────────────────────── */
.dm-msg {
  display: flex;
  flex-direction: column;
  max-width: 75%;
  gap: 3px;
}

.dm-msg-mine {
  align-self: flex-end;
  align-items: flex-end;
}

.dm-msg-theirs {
  align-self: flex-start;
  align-items: flex-start;
}

.dm-bubble {
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 0.92em;
  line-height: 1.45;
  word-break: break-word;
}

/* Full-width when message contains a block embed (YouTube etc.) */
.dm-msg.dm-has-embed {
  width: 90%;
  min-width: 280px;
  max-width: 90%;
}

.dm-bubble .yt-embed-wrap {
  max-width: 100%;
  margin: 4px 0 0;
  min-width: 400px;
}

@media (max-width: 700px) {
  .dm-bubble .yt-embed-wrap {
    min-width: 300px;
  }
}

.dm-msg-mine .dm-bubble {
  background: #090909;
  color: var(--white);
  border-bottom-right-radius: 4px;
}

.dm-msg-theirs .dm-bubble {
  background: var(--bg2, #222);
  color: var(--fg, #ddd);
  border: 1px solid #333;
  border-bottom-left-radius: 4px;
}

.dm-msg-time {
  font-size: 0.72em;
  color: #555;
  padding: 0 4px;
}

.dm-unreadable {
  font-style: italic;
  opacity: 0.5;
  font-size: 0.88em;
}

/* ── Message edit / delete actions ─────────────────────── */
.dm-msg {
  position: relative;
}

.dm-msg-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  margin-top: 1px;
}

.dm-msg:hover .dm-msg-actions,
.dm-msg:focus-within .dm-msg-actions {
  opacity: 1;
  pointer-events: auto;
}

.dm-msg-action-btn {
  background: none;
  border: none;
  color: #555;
  cursor: pointer;
  font-size: 0.78em;
  padding: 2px 5px;
  border-radius: 4px;
  line-height: 1;
  transition: color 0.12s, background 0.12s;
}

.dm-msg-action-btn:hover {
  color: var(--fg, #ddd);
  background: rgba(255, 255, 255, 0.07);
}

.dm-msg-action-btn[data-action="delete"]:hover {
  color: #e55;
}

/* Inline edit textarea */
.dm-edit-wrap {
  width: 100%;
}

.dm-edit-textarea {
  width: 100%;
  min-height: 60px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: var(--fg, #ddd);
  font: inherit;
  font-size: 0.92em;
  padding: 6px 8px;
  resize: vertical;
  box-sizing: border-box;
}

.dm-edit-actions {
  display: flex;
  gap: 6px;
  margin-top: 5px;
}

.dm-edit-save,
.dm-edit-cancel {
  font-size: 0.8em;
  padding: 3px 10px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
}

.dm-edit-save {
  background: var(--badge-bg, #4a90d9);
  color: #fff;
}

.dm-edit-cancel {
  background: rgba(255, 255, 255, 0.08);
  color: var(--fg, #ddd);
}

/* (edited) badge */
.dm-edited {
  color: #555;
  font-size: 0.85em;
  margin-left: 3px;
}

/* Delete fade-out */
@keyframes dm-msg-fade-out {
  to {
    opacity: 0;
    transform: scaleY(0);
    max-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
}

.dm-msg-deleting {
  animation: dm-msg-fade-out 0.25s ease forwards;
  transform-origin: top;
  overflow: hidden;
}

/* ── Reply banner ────────────────────────────────────────── */
.dm-reply-banner {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.05);
  border-left: 3px solid var(--badge-bg, #4a90d9);
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 0.8em;
  color: #aaa;
  margin-bottom: 5px;
  animation: dm-reply-in 0.12s ease;
}

@keyframes dm-reply-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dm-reply-banner__icon {
  color: var(--badge-bg, #4a90d9);
  flex-shrink: 0;
}

.dm-reply-banner__body {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dm-reply-banner__body strong {
  color: var(--fg, #ddd);
}

.dm-reply-banner__close {
  background: none;
  border: none;
  color: #555;
  cursor: pointer;
  padding: 2px 4px;
  font-size: 1em;
  flex-shrink: 0;
  transition: color 0.12s;
}

.dm-reply-banner__close:hover {
  color: var(--fg, #ddd);
}

/* ── Send form ───────────────────────────────────────────── */
.dm-send-form {
  border-top: 1px solid #333;
  flex-shrink: 0;
}

.dm-input {
  flex: 1;
  background: var(--bg2, #1a1a1a);
  border: 1px solid #444;
  color: var(--fg, #ddd);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.92em;
  resize: none;
  min-height: 44px;
  max-height: 140px;
  font-family: inherit;
  transition: border-color 0.15s;
  line-height: 1.4;
}

.dm-input:focus {
  outline: none;
  border-color: var(--accent);
}

.dm-send-btn {
  background: var(--accent);
  color: var(--bg, #000);
  border: none;
  font-weight: 700;
  cursor: pointer;
  font-size: 0.9em;
  flex-shrink: 0;
  transition: opacity 0.15s;
  height: 28px;
  border-radius: 10%;
}

.dm-send-btn:hover {
  opacity: 0.85;
}

.dm-send-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── State messages ──────────────────────────────────────── */
.dm-loading,
.dm-empty,
.dm-error {
  color: #666;
  font-size: 0.9em;
  padding: 24px;
  text-align: center;
  line-height: 1.6;
}

.dm-error {
  color: #e06c6c;
}

/* ── Key Manager Modal ───────────────────────────────────── */
.dm-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 15000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.dm-modal {
  background: var(--bg, #111);
  border: 1px solid var(--accent);
  border-radius: 10px;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 28px;
  position: relative;
}

.dm-modal h2 {
  margin: 0 0 6px;
  font-size: 1.1em;
  color: var(--accent);
}

.dm-modal-sub {
  font-size: 0.85em;
  color: #888;
  margin: 0 0 18px;
  line-height: 1.5;
}

.dm-modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  color: #888;
  font-size: 1.4em;
  cursor: pointer;
  line-height: 1;
}

.dm-modal-close:hover {
  color: var(--fg, #ddd);
}

.dm-key-status {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 0.85em;
  margin-bottom: 18px;
  border: 1px solid #333;
}

.dm-key-section {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #2a2a2a;
}

.dm-key-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.dm-key-section h3 {
  font-size: 0.9em;
  margin: 0 0 6px;
  color: var(--fg, #ccc);
}

.dm-key-section p {
  font-size: 0.82em;
  color: #777;
  margin: 0 0 10px;
  line-height: 1.5;
}

.dm-key-input {
  display: block;
  width: 100%;
  background: var(--bg2, #1a1a1a);
  border: 1px solid #444;
  color: var(--fg, #ddd);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 0.88em;
  margin-bottom: 8px;
  box-sizing: border-box;
  font-family: inherit;
}

.dm-key-input:focus {
  outline: none;
  border-color: var(--accent);
}

.dm-key-btn {
  background: var(--accent);
  color: var(--bg, #000);
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.86em;
  transition: opacity 0.15s;
}

.dm-key-btn:hover {
  opacity: 0.85;
}

.dm-key-btn-danger {
  background: #d94f4f;
  color: #fff;
}

.dm-key-danger h3 {
  color: #d94f4f;
}

.dm-key-msg {
  font-size: 0.82em;
  margin-top: 8px;
  min-height: 18px;
}

.dm-msg-ok {
  color: #5cb85c;
}

.dm-msg-err {
  color: #e06c6c;
}

/* ── Blocking modal (seed-phrase setup / recovery) ───────── */
.dm-modal-blocking {
  z-index: 20000;
  /* above everything */
}

.dm-modal-blocking .dm-modal {
  max-width: 540px;
}

/* ── Seed word grid ──────────────────────────────────────── */
.dm-seed-grid,
.dm-recovery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 16px 0;
}

.dm-seed-word {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid #333;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 0.9em;
}

.dm-seed-num {
  color: #555;
  font-size: 0.78em;
  min-width: 16px;
  text-align: right;
  flex-shrink: 0;
}

.dm-seed-val {
  color: var(--accent);
  font-weight: 600;
  font-family: monospace;
  letter-spacing: 0.03em;
  word-break: break-all;
}

/* Recovery inputs reuse .dm-seed-word layout */
.dm-seed-input-wrap input.dm-recovery-word {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--fg, #ddd);
  font-size: 0.88em;
  font-family: monospace;
  padding: 0;
  width: 100%;
  min-width: 0;
}

.dm-seed-input-wrap:focus-within {
  border-color: var(--accent);
}

/* Copy / primary button */
.dm-key-btn-primary {
  background: var(--accent);
  color: var(--bg, #000);
  width: 100%;
  margin-top: 4px;
}

.dm-key-btn-primary:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.dm-copy-seed {
  width: 100%;
  background: rgba(255, 255, 255, 0.07);
  color: var(--fg, #ddd);
  border: 1px solid #444;
  margin-bottom: 14px;
}

/* Forced-confirm checkbox */
.dm-seed-confirm {
  background: rgba(255, 200, 80, 0.08);
  border: 1px solid rgba(255, 200, 80, 0.3);
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 14px;
}

.dm-seed-confirm label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 0.87em;
  color: #ffc850;
  line-height: 1.4;
}

.dm-seed-confirm input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
}

@media (max-width: 500px) {

  .dm-seed-grid,
  .dm-recovery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Navbar DM icon ──────────────────────────────────────── */
#nav-dm-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* reuse .notif-count styling for dm badge — already defined */

/* ── Mobile adjustments ──────────────────────────────────── */
@media (max-width: 600px) {
  .messages-page {
    padding: 10px;
  }

  .dm-msg {
    max-width: 90%;
  }

  .dm-thread {
    max-height: calc(100vh - 240px);
  }

  .dm-modal {
    padding: 20px;
  }
}

/* ══════════════════════════════════════════════════════════
   Full-height chat layout — conversation page
   ══════════════════════════════════════════════════════════ */

/* ── UNIVERSAL: position:fixed takes it out of flow entirely ───────
   No pagewrapper padding, no body scroll involvement, just viewport-anchored. */
.messages-convo-page {
  position: fixed !important;
  top: var(--navbar-h, 50px) !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1;
  display: flex !important;
  flex-direction: column !important;
  transition: right 0.3s ease-in-out;
}

/* Desktop: 300px reserved space (both layouts) */
@media (min-width: 1000px) {
  body:not(.sidebar-right-hidden) .messages-convo-page {
    right: 300px !important;
  }
}

/* Attached Mobile: mobile sidebar width reserved space */
@media (min-width: 600px) and (max-width: 999px) {
  body:not(.sidebar-right-hidden) .messages-convo-page {
    right: min(280px, 80vw) !important;
  }
}

/* Kill the pagewrapper min-height and overflow so body doesn't scroll behind it */
html:has(.messages-convo-page),
body:has(.messages-convo-page) {
  height: 100%;
  overflow: hidden;
}

body:has(.messages-convo-page) .pagewrapper {
  min-height: 0 !important;
  overflow: hidden;
  padding: 0 !important;
}

/* ── Shared: convo pane is a flex column ──────────────────
   Both viewports share this — desktop gets explicit height
   above, mobile gets height from fixed pagewrapper. */
.messages-convo-page {
  overflow: hidden;
  padding: 0;
  max-width: 720px;
  /* Removed width: 100% here because it overconstrains the fixed element 
     against left:0 and right:300px, causing negative margins and overlap. */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  /* flex:1 + min-height:0 for mobile where parent is fixed pagewrapper */
  flex: 1;
  min-height: 0;
}

/* Header: never shrinks */
.messages-convo-page .messages-header {
  flex-shrink: 0;
  padding: 10px 16px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--border, #333);
}

/* Key notice banner if visible */
.messages-convo-page #dm-key-notice {
  flex-shrink: 0;
}

/* Thread: grows + scrolls — min-height:0 is critical */
.messages-convo-page .dm-thread {
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 16px;
}

/* Input bar: never shrinks */
.messages-convo-page .dm-send-form {
  flex-shrink: 0;
  margin-top: 0;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid #333;
}


.notif-count-dm {
  position: absolute;
  top: -7px;
  right: -5px;
  background: var(--badge-nsfw);
  color: white;
  font-size: 10px;
  padding: 2px 2px;
  border-radius: 3px;
  line-height: 1;
}

.dm-bubble .emoji {
  max-width: 200px;
}

/* ── DM Post Preview Card ─────────────────────────────────── */
a.dm-post-card,
span.dm-post-card {
  display: flex;
  align-items: stretch;
  gap: 0;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.3);
  margin: 6px 0 2px;
  max-width: 320px;
  transition: border-color 0.15s, background 0.15s;
  cursor: pointer;
}

a.dm-post-card:hover {
  border-color: var(--accent);
  background: rgba(0, 0, 0, 0.4);
}

/* Loading state */
span.dm-post-card--loading {
  opacity: 0.55;
}

.dm-post-card__thumb-wrap {
  position: relative;
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  background: #111;
  overflow: hidden;
}

.dm-post-card__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dm-post-card__thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #555;
  font-size: 1.2em;
}

/* Media type badge (top-right of thumb) */
.dm-post-card__type-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(0, 0, 0, 0.7);
  color: var(--accent, #aaa);
  font-size: 0.65em;
  padding: 2px 4px;
  border-radius: 4px;
  line-height: 1.2;
  pointer-events: none;
}

.dm-post-card__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 8px 12px;
  min-width: 160px;
  flex: 1;
}

.dm-post-card__id {
  font-weight: 700;
  font-size: 0.88em;
  color: var(--accent, #aaa);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dm-post-card__uploader,
.dm-post-card__comments {
  font-size: 0.75em;
  color: rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dm-post-card__uploader i,
.dm-post-card__comments i {
  font-size: 0.85em;
  opacity: 0.7;
  flex-shrink: 0;
}

/* Invert text colors inside a "mine" bubble so card still reads well */
.dm-msg-mine .dm-post-card__uploader,
.dm-msg-mine .dm-post-card__comments {
  color: rgba(255, 255, 255, 0.65);
}

.dm-msg-mine a.dm-post-card {
  background: rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 255, 255, 0.15);
}

/* ── DM Encrypted Attachment Card ────────────────────────── */
a.dm-attachment-card {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.28);
  margin: 6px 0 2px;
  padding: 10px 14px 10px 12px;
  max-width: 300px;
  min-width: 180px;
  transition: border-color 0.15s, background 0.15s;
  cursor: pointer;
  color: inherit;
  position: relative;
}

a.dm-attachment-card:hover {
  border-color: var(--accent);
  background: rgba(0, 0, 0, 0.4);
}

.dm-attachment-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
  font-size: 1.1em;
  color: var(--accent, #aaa);
}

.dm-attachment-card__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.dm-attachment-card__name {
  font-size: 0.82em;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--fg, #ddd);
}

.dm-attachment-card__size {
  font-size: 0.72em;
  color: rgba(255, 255, 255, 0.4);
}

.dm-attachment-card__dl {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.85em;
  color: rgba(255, 255, 255, 0.35);
  padding-left: 4px;
  transition: color 0.15s;
}

a.dm-attachment-card:hover .dm-attachment-card__dl {
  color: var(--accent, #aaa);
}

/* Lock badge — indicates E2EE */
a.dm-attachment-card::after {
  content: '\f023';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.6em;
  position: absolute;
  top: 4px;
  right: 6px;
  color: rgba(255, 255, 255, 0.2);
  pointer-events: none;
}

/* Inside "mine" bubble */
.dm-msg-mine a.dm-attachment-card {
  background: rgba(0, 0, 0, 0.18);
  border-color: rgba(255, 255, 255, 0.14);
}

/* ── Attach button (paperclip) ────────────────────────────── */
.dm-attach-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 0 6px;
  font-size: 1em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  transition: color 0.15s;
}

.dm-attach-btn:hover {
  color: var(--accent, #aaa);
}

.dm-attach-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ── Inline attachment preview (image / video / audio) ───── */
.dm-attachment-preview {
  position: relative;
  margin: 4px 0 2px;
  border-radius: 10px;
  overflow: hidden;
  max-width: 320px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.dm-attachment-preview__img {
  display: block;
  max-width: 100%;
  max-height: 360px;
  width: auto;
  height: auto;
  object-fit: contain;
  cursor: zoom-in;
  border-radius: 10px;
}

.dm-attachment-preview__video {
  display: block;
  max-width: 100%;
  max-height: 300px;
  width: 100%;
  border-radius: 10px;
  background: #000;
}

.dm-attachment-preview__audio {
  display: block;
  width: 100%;
  padding: 8px 6px;
  accent-color: var(--accent, #aaa);
}

/* Loading placeholder while decrypting */
.dm-attachment-preview--loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  color: rgba(255, 255, 255, 0.3);
  font-size: 1.2em;
}

/* Floating download button in the preview corner */
.dm-attachment-preview__dl {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(0, 0, 0, 0.55);
  color: rgba(255, 255, 255, 0.75);
  border-radius: 6px;
  padding: 5px 7px;
  font-size: 0.78em;
  text-decoration: none;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
  z-index: 2;
}

.dm-attachment-preview__dl:hover {
  background: var(--accent, #aaa);
  color: #000;
}

/* Eye-slash on card when preview is open */
.dm-attachment-card[data-previewed="true"] .dm-attachment-card__dl i {
  color: var(--accent, #aaa);
}

a.gchat-post-card,
span.gchat-post-card {
  display: inline-flex;
  align-items: stretch;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.3);
  margin: 4px 0 2px;
  max-width: 280px;
  transition: border-color 0.15s, background 0.15s;
  vertical-align: middle;
  cursor: pointer;
}

a.gchat-post-card:hover {
  border-color: var(--accent);
  background: rgba(0, 0, 0, 0.45);
}

span.gchat-post-card--loading {
  opacity: 0.55;
}

.gchat-post-card__thumb-wrap {
  position: relative;
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  background: #111;
  overflow: hidden;
}

.gchat-post-card__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gchat-post-card__thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #555;
  font-size: 1em;
}

.gchat-post-card__type-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  background: rgba(0, 0, 0, 0.75);
  color: var(--accent, #aaa);
  font-size: 0.6em;
  padding: 2px 3px;
  border-radius: 3px;
  line-height: 1.2;
  pointer-events: none;
}

.gchat-post-card__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 6px 10px;
  min-width: 120px;
  flex: 1;
}

.gchat-post-card__id {
  font-weight: 700;
  font-size: 0.82em;
  color: var(--accent, #aaa);
  white-space: nowrap;
}

.gchat-post-card__uploader,
.gchat-post-card__comments {
  font-size: 0.72em;
  color: rgba(255, 255, 255, 0.45);
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gchat-post-card__uploader i,
.gchat-post-card__comments i {
  font-size: 0.85em;
  opacity: 0.7;
  flex-shrink: 0;
}

/* Köpfe — random corner image */
#koepfe-img {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: -1;
  max-height: 200px;
  opacity: 0;
  user-select: none;
  -webkit-user-drag: none;
  will-change: opacity;
  pointer-events: none;
}

#koepfe-img.visible {
  opacity: 1;
}

.mode-filter {
  display: grid;
  justify-content: center;
  margin: 20px;
  grid-template-rows: 1fr;
  grid-template-columns: auto;
  gap: 5px;
}

/* Excluded Tags Filter Modal Section */
.excluded-tags-section-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}

.excluded-tags-section-title {
  font-size: 1.05em;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.excluded-tags-section-title i {
  color: #ff4757;
  font-size: 0.9em;
}

.excluded-tags-count-badge {
  background: #ff4757;
  color: #fff;
  font-size: 0.72em;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 12px;
  line-height: 1.2;
  box-shadow: 0 2px 6px rgba(255, 71, 87, 0.4);
}

#nav_excluded_tags_list {
  margin-bottom: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  max-width: 100%;
  min-height: 28px;
  align-items: center;
}

.excluded-tag-chip {
  padding: 5px 12px;
  border-radius: 20px;
  background: rgba(255, 71, 87, 0.12);
  border: 1px solid rgba(255, 71, 87, 0.35);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9em;
  color: #f1f2f6;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.excluded-tag-chip:hover {
  background: rgba(255, 71, 87, 0.2);
  border-color: rgba(255, 71, 87, 0.55);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(255, 71, 87, 0.25);
}

.excluded-tag-chip .remove-excluded-tag {
  color: #ff4757;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.15em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  transition: all 0.2s ease;
  cursor: pointer;
}

.excluded-tag-chip .remove-excluded-tag:hover {
  color: #fff;
  background: #ff4757;
  transform: scale(1.18);
}

.no-excluded-tags-hint {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.9em;
  font-style: italic;
}

.nav-exclude {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  position: relative;
}

#nav_exclude_tag_input {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--nav-border-color);
  color: var(--white);
  padding: 10px;
}

#nav_exclude_suggestions {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background: #1e1e1e;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.5);
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
}

.nav-mime-filter {
  position: relative;
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 1fr 1fr;
}

/* ── Meme Pages (Critical) ────────────────────────────── */
.meme-select-container,
.meme-creator-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 5vh 20px 20px;
  /* matched to .container standards */
  position: relative;
  z-index: 10;
}

.meme-header {
  margin-bottom: 25px;
  border-bottom: 1px solid var(--accent, #9f0);
  padding-bottom: 15px;
}

.meme-title {
  font-family: var(--nav-brand-font, 'VCR'), monospace;
  color: var(--accent, #9f0);
  text-transform: uppercase;
  margin: 0;
}

.meme-subtitle {
  font-family: var(--font, monospace);
  color: #888;
  margin: 5px 0 20px 0;
}

.category-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 20px;
}

.category-chip {
  background: var(--nav-bg, #2b2b2b);
  border: 1px solid var(--nav-border-color, rgba(255, 255, 255, .05));
  color: var(--white, #fff);
  padding: 6px 14px;
  border-radius: 20px;
  font-family: var(--font, monospace);
  font-size: 0.85em;
  cursor: pointer;
}

.category-chip.active {
  background: var(--accent, #9f0);
  color: var(--black, #000);
  border-color: var(--accent, #9f0);
}

.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 15px;
}

.anim {
  margin: 0;
  animation: color 0.6s linear infinite !important;
}

@keyframes color {
  0% {
    color: red;
  }

  25% {
    color: yellow;
  }

  50% {
    color: #1FB2B0;
  }

  75% {
    color: #23dd06;
  }

  100% {
    color: red;
  }
}

.anim-boxshadow {
  margin: 0;
  animation: boxshadow 0.6s linear infinite !important;
}

@keyframes boxshadow {
  0% {
    box-shadow: 0 0 0 2px red;
  }

  25% {
    box-shadow: 0 0 0 2px yellow;
  }

  50% {
    box-shadow: 0 0 0 2px #1FB2B0;
  }

  75% {
    box-shadow: 0 0 0 2px #23dd06;
  }

  100% {
    box-shadow: 0 0 0 2px red;
  }
}

.gapRight,
body.layout-modern .gapRight,
body.layout-legacy .gapRight {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  vertical-align: middle;
}

.gapRight>svg.iconset,
.gapRight>i.iconset,
.gapRight>button,
.gapRight>.iconset,
.gapRight i.iconset,
.gapRight svg.iconset,
.gapRight button,
body.layout-modern .gapRight>svg.iconset,
body.layout-modern .gapRight>i.iconset,
body.layout-modern .gapRight>button,
body.layout-modern .gapRight>.iconset,
body.layout-legacy .gapRight>svg.iconset,
body.layout-legacy .gapRight>i.iconset,
body.layout-legacy .gapRight>button,
body.layout-legacy .gapRight>.iconset {
  height: 30px;
  min-width: 30px;
  width: 30px;
  padding: 0;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 3px;
  border: 1px solid var(--nav-border-color, rgba(255, 255, 255, 0.15));
  background: var(--navigation-links-bg, rgba(255, 255, 255, 0.08));
  color: var(--white, #fff);
  fill: var(--white, #fff);
  font-family: inherit;
  font-size: 13px;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  margin: 0;
  position: static;
  right: auto;
  vertical-align: middle;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.gapRight i.iconset.fa-regular,
.gapRight svg.iconset.fa-regular,
.gapRight i.iconset.far,
.gapRight i.fa-regular,
.gapRight i.far,
body.layout-legacy .gapRight>i.iconset.fa-regular,
body.layout-modern .gapRight>i.iconset.fa-regular {
  font-weight: 400 !important;
}

.gapRight i.iconset.fa-regular::before,
.gapRight svg.iconset.fa-regular::before,
.gapRight i.iconset.far::before,
.gapRight i.fa-regular::before,
.gapRight i.far::before,
body.layout-legacy .gapRight>i.iconset.fa-regular::before,
body.layout-modern .gapRight>i.iconset.fa-regular::before {
  font-weight: 400 !important;
}

.gapRight>svg.iconset:hover,
.gapRight>i.iconset:hover,
.gapRight>button:hover,
.gapRight>.iconset:hover,
.gapRight i.iconset:hover,
.gapRight svg.iconset:hover,
.gapRight button:hover,
.gapRight>svg.iconset.active,
.gapRight>i.iconset.active,
.gapRight>button.active,
.gapRight>.iconset.active,
.gapRight i.iconset.active,
.gapRight svg.iconset.active,
.gapRight button.active,
.gapRight>svg.iconset.is-active,
.gapRight>i.iconset.is-active,
.gapRight>button.is-active,
.gapRight>.iconset.is-active,
.gapRight i.iconset.is-active,
.gapRight svg.iconset.is-active,
.gapRight button.is-active,
body.layout-modern .gapRight>svg.iconset:hover,
body.layout-modern .gapRight>i.iconset:hover,
body.layout-modern .gapRight>button:hover,
body.layout-modern .gapRight>.iconset:hover,
body.layout-modern .gapRight>svg.iconset.active,
body.layout-modern .gapRight>i.iconset.active,
body.layout-modern .gapRight>button.active,
body.layout-modern .gapRight>.iconset.active,
body.layout-legacy .gapRight>svg.iconset:hover,
body.layout-legacy .gapRight>i.iconset:hover,
body.layout-legacy .gapRight>button:hover,
body.layout-legacy .gapRight>.iconset:hover,
body.layout-legacy .gapRight>svg.iconset.active,
body.layout-legacy .gapRight>i.iconset.active,
body.layout-legacy .gapRight>button.active,
body.layout-legacy .gapRight>.iconset.active {
  background: var(--nav-link-hover-bg, rgba(255, 255, 255, 0.15)) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  fill: var(--accent) !important;
  text-decoration: none;
}

.gapRight>.iconset#a_favo,
body.layout-legacy .gapRight>.iconset#a_favo {
  fill: inherit;
}

/* ── .gapRight action row: style guide (square, flat, theme colours, no glow) ──
   Forced because some actions set rounded corners / shadows inline (chan rehost pills) or via
   infobox rules (text-shadow, hover scale). The favourite heart keeps its pink "favourited" colour. */
.gapRight,
.gapRight *,
.gapRight *::before,
.gapRight *::after {
  border-radius: 0 !important;
}

.gapRight :is(button, a, i, svg, .iconset) {
  box-shadow: none !important;
  text-shadow: none !important;
}

/* No hover scale; not !important, so the favourite "pop" animation still plays */
.gapRight :is(button, a, i, svg, .iconset):hover {
  transform: none;
}

.gapRight :is(button, a, i, svg, .iconset):active {
  opacity: 0.75;
}

.gapRight :is(button, a, i, svg, .iconset):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* OC Toggle Icon - inherits from .gapRight i.iconset */
i.iconset#a_oc {
  color: inherit;
  fill: inherit;
}

/* OC Feature */
.oc-badge {
  background: #009fff;
  color: #000;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: bold;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
  user-select: none;
  font-family: 'VCR';
}

.oc-badge svg.iconset-oc {
  width: 14px;
  height: 14px;
}

.oc-option {
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
  justify-content: center;
  margin-bottom: 5px;
}

.oc-option input[type="checkbox"] {
  cursor: pointer;
  width: 16px;
  height: 16px;
}

.oc-label {
  font-weight: 500;
  color: var(--white);
  opacity: 0.9;
}

.oc-label i {
  color: #ffd700;
  margin-right: 4px;
}

/* Premium Responsive Table System */
.responsive-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--white);
}

.responsive-table th,
.responsive-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

@media (max-width: 768px) {

  .responsive-table,
  .responsive-table thead,
  .responsive-table tbody,
  .responsive-table th,
  .responsive-table td,
  .responsive-table tr {
    display: block;
  }

  /* Hide table headers (but keep for accessibility) */
  .responsive-table thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .responsive-table tr {
    margin-bottom: 30px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .responsive-table td {
    border: none;
    position: relative;
    padding: 12px 15px !important;
    min-height: 48px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
    text-align: left !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    box-sizing: border-box;
  }

  /* Highlight the first cell (User Info) as a card header */
  .responsive-table td:first-child {
    background: rgba(255, 255, 255, 0.06);
    padding: 20px 20px !important;
    padding-left: 20px !important;
    /* Explicit reset to fix "cramped to right" bug */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 5px;
    display: block;
    /* Ensure it takes full width for the header style */
    width: 100%;
    box-sizing: border-box;
  }

  .responsive-table td:first-child::before {
    display: none !important;
    /* Force hide label */
  }

  .user-info-cell {
    width: 100%;
    justify-content: flex-start;
  }

  .responsive-table td::before {
    content: attr(data-label);
    position: static;
    width: auto;
    white-space: nowrap;
    font-weight: 800;
    color: var(--accent);
    font-size: 0.65em;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.8;
    margin-bottom: 2px;
  }

  /* Special handling for the Actions cell */
  .responsive-table td[data-label="Actions"] {
    background: rgba(0, 0, 0, 0.2);
    padding: 15px !important;
    margin-top: 10px;
    display: block;
    border-bottom: none;
  }

  .responsive-table td[data-label="Actions"]::before {
    position: static;
    display: block;
    width: 100%;
    margin-bottom: 12px;
    text-align: center;
  }

  .user-actions-row {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px !important;
    width: 100%;
    justify-content: stretch !important;
  }

  .user-actions-row button {
    margin: 0 !important;
    width: 100%;
    justify-content: center;
    font-size: 0.8em;
    padding: 10px 5px !important;
  }

  /* Fix for ghost users/incomplete rows */
  .responsive-table td:empty {
    display: none;
  }
}

.admin-header-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 35px;
  flex-wrap: wrap;
  gap: 15px;
}

@media (max-width: 600px) {
  .admin-header-flex {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .admin-header-flex h2 {
    margin-bottom: 8px !important;
    font-size: 1.8em;
  }

  .admin-header-flex button {
    width: 100%;
    max-width: 300px;
  }
}

/* profile stuff */

.profile_head {
  display: grid;
  grid-template-columns: auto 1fr;
  background: var(--nav-bg);
  position: relative;
  z-index: 1;
  min-height: 140px;
  border: 1px solid var(--nav-border-color);
}

.profile_head::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--author-banner, none);
  background-size: var(--author-banner-size, cover);
  background-position: var(--author-banner-position, center top);
  opacity: 0.3;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
}

.profile_head_avatar {
  display: grid;
  align-items: normal;
  padding: 5px;
}

.layersoffear {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 1fr auto;
}

.profile_head_user_stats {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: center;
  gap: 5px;
  padding: 5px;
}

/* Profile stat chips: style guide (square, flat, theme colours, no glow). !important beats the
   per-theme shadow rules (amoled/light/paper) that would bring the shadow back */
.profile_head_user_stats > * {
  /* Same 30px height as #edit-profile-btn (border included), text centred */
  box-sizing: border-box;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  line-height: 1;
  white-space: nowrap;
  background: var(--bg);
  border: 1px solid var(--nav-border-color, rgba(255, 255, 255, 0.15));
  padding: 0 8px;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.profile_head_user_stats a {
  color: var(--accent);
}

/* Normal cursor on the chips; pointer only where something happens: the joined date (hover tooltip)
   and the comment / tag / hall count links */
.profile_head_user_stats > * {
  cursor: default;
}

.profile_head_user_stats > .stat-joined,
.profile_head_user_stats a {
  cursor: pointer;
}

/* Edit-profile toggle and edit-banner button on the profile banner: square, flat, theme colours, one
   size (30x30); accent on hover and while editing. The banner button is positioned by its wrapper. */
#edit-profile-btn {
  position: absolute;
  bottom: 5px;
  left: 5px;
  z-index: 20;
}

#edit-profile-btn,
#inline-banner-edit-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  font-size: 13px;
  line-height: 1;
  background: var(--dropdown-bg, #232323);
  border: 1px solid var(--nav-border-color, rgba(255, 255, 255, 0.15));
  color: var(--white, #fff);
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

#edit-profile-btn:hover,
#edit-profile-btn.is-active,
#inline-banner-edit-btn:hover {
  background: var(--nav-link-hover-bg, #333);
  border-color: var(--accent);
  color: var(--accent);
}

#edit-profile-btn:active,
#inline-banner-edit-btn:active {
  opacity: 0.75;
}

#edit-profile-btn:focus-visible,
#inline-banner-edit-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
/* Profile content (uploads / favourites panels): style guide (square, flat, theme colours, no glow).
   Each section is a panel with a title bar; the thumbnails inside keep their own grid styling. */
.user_content_wrapper {
  gap: 8px;
  padding: 8px;
}

.user_content_wrapper > .user-uploads,
.user_content_wrapper > .favs {
  min-width: 0;
  background: var(--dropdown-bg, #232323);
  border: 1px solid var(--nav-border-color, rgba(255, 255, 255, 0.15));
  border-radius: 0 !important;
  box-shadow: none !important;
}

.uploads-header,
.favs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--bg, #111);
  border-bottom: 1px solid var(--nav-border-color, rgba(255, 255, 255, 0.15));
  padding: 6px 8px;
  font-weight: bold;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.uploads-header a,
.favs-header a {
  color: var(--accent);
  font-weight: normal;
  text-decoration: none;
}

.uploads-header a:hover,
.favs-header a:hover {
  text-decoration: underline;
}

.user_content_wrapper div.user-uploads div.posts,
.user_content_wrapper div.favs div.posts {
  background: transparent;
  padding: 6px;
}

.user_content_wrapper .private-favs-msg {
  padding: 12px 8px;
  color: var(--text-muted, rgba(255, 255, 255, 0.6));
}



@media (max-width: 700px) {
  .profile_head_user_stats {
    display: flex;
    flex-wrap: wrap;
  }
  .profile_head_user_stats > * {
    flex-grow: 1;
    text-align: center;
  }

  .user_content_wrapper {
    grid-template-columns: auto;
    grid-auto-flow: column;
    grid-template-rows: auto auto;
  }
}

.setting-item {
  display: grid;
}

textarea#profile_description {
  height: 7em;
  background: var(--nav-bg);
  color: var(--white);
}

.profile-settings-actions {
  padding-top: 10px;
}

.profile_description {
  font-size: 0.8em;
  color: var(--white);
  max-width: 500px;
  word-wrap: break-word;
}

/* =============================================
   USER ALTERNATIVE INFOBOX STYLES
   ============================================= */

/* When user infobox is active, expand .blahlol to full metadata width */
.blahlol:has(.user-infobox-block) {
  grid-column: 1 / -1;
  background: var(--comment-bg);
}

.user-infobox-block {
  display: flex;
  gap: 5px;
  background: var(--comment-bg);
  border: 1px solid var(--author-border, rgba(0, 255, 0, 0.2));
  line-height: 1;
  padding: 5px;
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
  min-height: 40px;
  box-sizing: border-box;
}

/* ── Banner inside alternative infobox ──────────────────────────────── */

.user-infobox-block {
  position: relative;
  z-index: 1;
}

.user-infobox-block::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--author-banner, none);
  background-size: var(--author-banner-size, cover);
  background-position: var(--author-banner-position, center top);
  background-repeat: var(--author-banner-repeat, no-repeat);
  opacity: var(--author-banner-opacity, 0.3);
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
}

/* ── End banner styles ────────────────────────────────────────────────── */

.user-infobox-avatar {
  flex-shrink: 0;
}


.user-infobox-avatar img {
  width: 60px;
  height: 60px;
  object-fit: cover;
}

.user-infobox-info {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.user-infobox-header {
  display: grid;
  align-items: center;
  padding-bottom: 6px;
  grid-template-columns: auto 1fr;
}

.user-infobox-mime {
  background: black;
  padding: 4px;
  margin: 2px;
  font-size: 6px;
  border-radius: 3px;
  font-weight: bold;
  text-transform: uppercase;
  cursor: default;
  user-select: none;
  align-self: self-end;
}

.user-infobox-actions i {
    background: none;
    border: none;
    font-size: 20px;
    align-self: baseline;
    margin: 1px 10px 0px 0px;
    padding: 0;
    top: 2px;
    right: 0;
    left: 5px;
    color: var(--accent);
    text-shadow: 0px 0px 5px black;
}

.user-infobox-actions > i:hover {
    background: none !important;
    transform: scale(1.1);
}

.user-infobox-block #a_favo.fa-regular,
.user-infobox-block .gapRight #a_favo.fa-regular,
.user-infobox-block .user-infobox-actions #a_favo.fa-regular,
body.layout-legacy .user-infobox-block .gapRight > #a_favo.fa-regular,
body.layout-modern .user-infobox-block .gapRight > #a_favo.fa-regular {
    font-weight: 400 !important;
}


.user-infobox-block #a_favo.fa-regular::before,
.user-infobox-block .gapRight #a_favo.fa-regular::before,
.user-infobox-block .user-infobox-actions #a_favo.fa-regular::before,
body.layout-legacy .user-infobox-block .gapRight > #a_favo.fa-regular::before,
body.layout-modern .user-infobox-block .gapRight > #a_favo.fa-regular::before {
    font-weight: 400 !important;
}

.user-infobox-username {
  font-weight: 700;
  color: var(--author-accent, inherit) !important;
  text-decoration: none;
}


.user-infobox-timestamp {
  font-size: 0.8em;
  color: #888;
  letter-spacing: 0.5px;
  text-align: right;
}

.timestamp-link {
  color: inherit;
  text-decoration: none;
  text-shadow: 1px 1px 1px black;
  font-size: 14px;
}

.timestamp-link:hover {
  text-decoration: underline;
  color: var(--accent);
}


.user-infobox-description {
  font-size: 0.9em;
  line-height: 1.5;
  color: #ccc;
  text-align: left;
  text-shadow: 0px 0px 5px black;
  word-break: break-word;
}

.user-infobox-body {
  display: grid;
  grid-template-columns: 1fr auto;
}

.user-infobox-actions {
  flex-shrink: 0;
  display: flex;
  flex-flow:column;
  align-items: center;
  gap: 10px;
}

/* =============================================
   xD Score Badge
   ============================================= */

.xd-score-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 4px;
  font-family: var(--font, monospace);
  font-size: 0.82em;
  font-weight: bold;
  letter-spacing: 0.5px;
  cursor: default;
  user-select: none;
  border: 1px solid transparent;
  transition: filter 0.2s ease;
}

.xd-score-badge:hover {
  filter: brightness(1.15);
}

/* xD num */
.xd-score-num {
  font-size: 0.85em;
  opacity: 0.75;
  font-weight: normal;
}

/* Tier 1: 1–4 pts — muted lime */
.xd-tier-1 {
  background: #1a2e10;
  color: #7ec850;
  border-color: #3a5a20;
}

/* Tier 2: 5–14 pts — yellow-green */
.xd-tier-2 {
  background: #2a2d00;
  color: #c8d830;
  border-color: #5a6400;
}

/* Tier 3: 15–29 pts — orange */
.xd-tier-3 {
  background: #2d1800;
  color: #e08030;
  border-color: #6a3800;
}

/* Tier 4: 30–59 pts — red-orange */
.xd-tier-4 {
  background: #2d0a00;
  color: #e84020;
  border-color: #7a2010;
}

/* Tier 5: 60+ pts — neon, pulsing glow */
.xd-tier-5 {
  background: #1a0000;
  color: #ff5500;
  border-color: #ff3300;
  box-shadow: 0 0 6px rgba(255, 80, 0, 0.5);
  animation: xd-pulse 1.8s ease-in-out infinite;
}

/* ─── xD score filter in filter modal ─────────────────────────────── */
.nav-xd-filter {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.nav-xd-label {
  display: block;
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #888;
  margin-bottom: 6px;
}

.nav-xd-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

body.layout-modern .xd-score-wrapper {
  margin: 0;
  padding: 0px 5px 0px 5px;
  background: var(--bg);
}

@keyframes xd-pulse {

  0%,
  100% {
    box-shadow: 0 0 5px rgba(255, 80, 0, 0.4), 0 0 12px rgba(255, 50, 0, 0.2);
  }

  50% {
    box-shadow: 0 0 10px rgba(255, 100, 0, 0.8), 0 0 22px rgba(255, 60, 0, 0.4);
  }
}

/* ─── xD Score Slider ──────────────────────────────────────────────── */
.xd-slider {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right,
      var(--xd-fill, #4caf50) 0%,
      var(--xd-fill, #4caf50) var(--xd-pct, 0%),
      rgba(255, 255, 255, 0.12) var(--xd-pct, 0%));
  outline: none;
  cursor: pointer;
  min-width: 120px;
}

/* Custom mobile-friendly slider that replaces the native range input */
.nav-xd-custom-slider {
  flex: 1;
  min-width: 120px;
}

.xd-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--xd-fill, #4caf50);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: border-color 0.2s, transform 0.1s;
}

.xd-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.xd-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--xd-fill, #4caf50);
  cursor: pointer;
}

.xd-slider-val {
  display: inline-block;
  min-width: 28px;
  text-align: center;
  font-family: monospace;
  font-size: 0.9em;
  font-weight: bold;
  color: var(--xd-fill, #4caf50);
  padding: 1px 5px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.2);
}

/* ─── Grid mode / thumbnail size picker (filter modal) ────────────── */
.nav-grid-mode {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.nav-grid-mode-label {
  display: block;
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #888;
  margin-bottom: 8px;
}

.nav-grid-size-btns {
  display: flex;
  gap: 6px;
}

.nav-grid-size-btn {
  flex: 1;
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.82em;
  font-weight: 700;
  font-family: var(--font, monospace);
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.14s, border-color 0.14s, color 0.14s;
  letter-spacing: 0.04em;
}

.nav-grid-size-btn:hover {
  background: rgba(255, 255, 255, 0.13);
  color: #fff;
}

.nav-grid-size-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #000;
}

/* ─── xD score wrapper ─────────────────────────────────────────────── */
.xd-score-wrapper {
    text-align: right;
    padding-bottom: 5px;
    padding-left: 5px;
    background: var(--bg);
    padding-right: 5px;
    border-left: 1px solid var(--nav-border-color);
    border-right: 1px solid var(--nav-border-color);
}



/* ─── xD score thumbnail indicator (position fix) ─────────────────── */
.thumb-xd-indicator {
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.65em;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.4;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  z-index: 10;
}

.thumb-xd-indicator.xd-tier-1 {
  color: #a8e6a3;
  border-color: #a8e6a3;
}

.thumb-xd-indicator.xd-tier-2 {
  color: #ffe066;
  border-color: #ffe066;
}

.thumb-xd-indicator.xd-tier-3 {
  color: #ffa94d;
  border-color: #ffa94d;
}

.thumb-xd-indicator.xd-tier-4 {
  color: #ff6b6b;
  border-color: #ff6b6b;
}

.thumb-xd-indicator.xd-tier-5 {
  color: #ff3cac;
  border-color: #ff3cac;
}


/* Performance & Utility */
.desktop-only {
  display: inline-block !important;
}

.mobile-only {
  display: none !important;
}

@media (max-width: 768px) {
  .desktop-only {
    display: none !important;
  }

  .mobile-only {
    display: block !important;
  }
}

#reports-table-body tr {
  text-align: center;
}

/* Meta Suggestions */
.meta-suggestions-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 10px;
}

.meta-suggestion {
  padding: 0.35rem 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.8);
  user-select: text;
  max-width: 100%;
  min-width: 0;
}

.meta-suggestion span {
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: normal;
  min-width: 0;
  flex: 1;
}

.meta-suggestion:hover {
  background: var(--bg);
  border-color: var(--accent);
  transform: translateY(-1px);
}

.meta-suggestion i {
  font-size: 0.7rem;
  opacity: 0.6;
}

.meta-suggestion.selected {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.4) !important;
}

.meta-suggestion.selected i {
  color: var(--accent);
  opacity: 1;
}

#metadata-modal .f0ck-modal-body {
  max-height: 400px;
  overflow-y: auto;
}

/* Selection-edit popover for meta-suggestion pills */
.sel-tag-popover {
  position: fixed;
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 6px;
  background: #1e1e2e;
  border: 1px solid var(--accent, #9f0);
  border-radius: 8px;
  padding: 5px 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
  animation: sel-pop-in 0.12s ease;
}

@keyframes sel-pop-in {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.sel-tag-popover input {
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: 0.85em;
  font-family: var(--font, monospace);
  min-width: 80px;
  max-width: 220px;
  width: auto;
}

.sel-tag-popover-confirm {
  background: var(--accent, #9f0);
  color: #000;
  border: none;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 0.8em;
  font-weight: bold;
  cursor: pointer;
  white-space: nowrap;
}

.sel-tag-popover-confirm:hover {
  filter: brightness(1.15);
}

/* ── Emoji Admin Card Grid ─────────────────────────────────────────── */
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  padding: 4px;
}

.emoji-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 10px 12px;
  background: var(--dropdown-bg);
  border: 1px solid var(--nav-border-color);
  border-radius: 6px;
  transition: border-color .2s, box-shadow .2s, transform .15s;
}

.emoji-card:hover {
  border-color: var(--accent);
}

.emoji-card .emoji-preview,
.emoji-card video.emoji-preview {
  height: 80px;
  max-width: 90px;
  object-fit: contain;
  image-rendering: auto;
}

.emoji-card .emoji-label {
  font-family: monospace;
  font-size: .85em;
  color: var(--accent);
  text-align: center;
  word-break: break-all;
  line-height: 1.2;
}

.emoji-card .emoji-url {
  font-size: .65em;
  opacity: .45;
  text-align: center;
  word-break: break-all;
  line-height: 1.15;
  max-height: 2.3em;
  overflow: hidden;
}

.emoji-card .emoji-delete {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(200, 0, 0, .85);
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s;
}

.emoji-card:hover .emoji-delete {
  opacity: 1;
}

.emoji-card .emoji-delete:hover {
  background: #e00;
}

/* ================================================================
   GLOBAL CHAT WIDGET — Facebook-style, bottom-right (left of sidebar)
   ================================================================ */

#gchat-widget {
  position: fixed;
  bottom: 0;
  right: calc(300px + 18px);
  z-index: 950;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  pointer-events: none;
  font-family: var(--font, monospace);
  max-height: calc(100dvh - var(--navbar-h, 50px));
  overflow: hidden;
}

body.sidebar-right-hidden #gchat-widget {
  right: 18px;
}

body.scroller-active #gchat-widget {
  display: none !important;
}

/* Reopen bubble — appears when chat is closed */
#gchat-reopen-bubble {
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 9998;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: var(--color-primary, #2a2a2a);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  opacity: 0.75;
  transition: opacity 0.15s, transform 0.15s;
}

#gchat-reopen-bubble:hover {
  opacity: 1;
  transform: scale(1.08);
}

.gchat-bubble-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: #e53935;
  color: #fff;
  font-size: 0.68em;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  pointer-events: none;
  animation: gchat-badge-pop 0.2s ease;
}

body.sidebar-right-hidden #gchat-reopen-bubble {
  right: 18px;
}

body.scroller-active #gchat-reopen-bubble {
  display: none !important;
}

@media (max-width: 999px) {
  #gchat-widget {
    right: calc(280px + 14px);
  }

  body.sidebar-right-hidden #gchat-widget {
    right: 14px;
  }
}

/* Chat panel — always visible */
#gchat-panel {
  pointer-events: all;
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 40dvh;
  max-height: calc(100dvh - var(--navbar-h, 50px));
  background: var(--bg, #1a1a1a);
  border: 1px solid var(--nav-border-color, rgba(255, 255, 255, 0.08));
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.65);
  overflow: hidden;
}

/* Float mode — detached from bottom-right, freely positioned */
#gchat-panel.gchat-floating {
  position: fixed;
  right: auto;
  bottom: auto;
  max-height: calc(100dvh - var(--navbar-h, 50px));
}

/* Draggable header cursor in float mode */
#gchat-panel.gchat-floating #gchat-header {
  cursor: move;
}

/* Minimized state — only header visible */
#gchat-panel.gchat-minimized {
  height: auto !important;
  max-height: 42px;
}

#gchat-panel.gchat-minimized #gchat-messages,
#gchat-panel.gchat-minimized #gchat-input-area {
  display: none !important;
}

/* Header */
#gchat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  height: 42px;
  background: var(--nav-bg, #111);
  border-bottom: 1px solid var(--nav-border-color, rgba(255, 255, 255, 0.08));
  cursor: default;
  user-select: none;
  flex-shrink: 0;
}

.gchat-header-btns {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}

#gchat-title {
  font-size: 0.82em;
  font-weight: bold;
  color: var(--accent, #f2ef0b);
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.gchat-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #e53935;
  color: #fff;
  font-size: 0.72em;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  animation: gchat-badge-pop 0.2s ease;
}

@keyframes gchat-badge-pop {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }

  60% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.gchat-icon-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 12px;
  transition: color 0.15s, background 0.15s;
  line-height: 1;
}

.gchat-icon-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

/* Messages area */
/* Pinned topic bar */
/* Online users bar */
#gchat-online {
  display: none;
  flex-shrink: 0;
  border-bottom: 1px solid var(--nav-border-color, rgba(255, 255, 255, 0.07));
  background: rgba(0, 0, 0, 0.15);
}

.gchat-online-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 10px;
  gap: 8px;
}

.gchat-online-count {
  font-size: 0.68em;
  color: rgba(255, 255, 255, 0.45);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
}

.gchat-online-count::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4caf50;
  flex-shrink: 0;
}

.gchat-online-avatars {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  /* stack right-to-left */
}

.gchat-online-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--bg, #1a1a1a);
  margin-left: -6px;
  flex-shrink: 0;
  transition: transform 0.1s;
}

.gchat-online-avatar:last-child {
  margin-left: 0;
}

.gchat-online-avatars:hover .gchat-online-avatar {
  transform: scale(1.1);
}

.gchat-online-extra {
  font-size: 0.65em;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 1px 5px;
  margin-left: -2px;
  white-space: nowrap;
}

#gchat-topic {
  padding: 5px 10px;
  font-size: 0.78em;
  font-weight: 600;
  color: var(--bg, #111);
  background: var(--accent, #f2ef0b);
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  word-break: break-word;
  white-space: pre-wrap;
  flex-shrink: 0;
  opacity: 0.95;
}

#gchat-messages {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-color, #333) transparent;
  overscroll-behavior: contain;
}

/* Single message row */
.gchat-msg {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  max-width: 100%;
}

.gchat-msg.gchat-msg-in {
  opacity: 1;
  transform: translateY(0);
}

.gchat-msg.gchat-msg-self {
  flex-direction: row-reverse;
}

.gchat-avatar-link {
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
}

.gchat-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.gchat-bubble-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: calc(100% - 36px);
}

.gchat-msg-self .gchat-bubble-wrap {
  align-items: flex-end;
}

.gchat-username {
  font-size: 0.7em;
  font-weight: bold;
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
  color: var(--white, #fff);
}

.gchat-bubble {
  background: rgba(0, 0, 0, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px 14px 14px 3px;
  padding: 6px 10px;
  font-size: 0.82em;
  line-height: 1.4;
  color: var(--white, #f0f0f0);
  word-break: break-word;
  white-space: pre-wrap;
  max-width: 100%;
}

.gchat-msg-self .gchat-bubble {
  background: rgba(0, 0, 0, 0.98);
  border-color: rgba(var(--accent-rgb, 242, 239, 11), 0.25);
  border-radius: 14px 14px 3px 14px;
  color: #fff;
}

.gchat-time {
  font-size: 0.65em;
  opacity: 0.45;
  white-space: nowrap;
}

/* Greentext inside chat bubbles */
.gchat-bubble .gchat-greentext {
  color: #6abf69;
  display: block;
}

/* Spoiler/blur inside chat bubbles inherit existing styles */
.gchat-bubble .spoiler,
.gchat-bubble .blur-text {
  cursor: pointer;
}

/* Emoji images inside chat bubbles */
.gchat-bubble .emoji {
  height: 10.4em;
  vertical-align: middle;
  display: inline-block;
}

/* @mention links in chat */
.gchat-bubble .mention {
  color: var(--accent, #f2ef0b);
  text-decoration: none;
  font-weight: bold;
}

.gchat-bubble .mention:hover {
  text-decoration: underline;
}

/* Input area — stacked: toolbar on top, input row below */
#gchat-input-area {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--nav-border-color, rgba(255, 255, 255, 0.07));
  background: var(--nav-bg, #0d0d0d);
  flex-shrink: 0;
  position: relative;
}

/* Toolbar row */
#gchat-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px 2px;
}

.gchat-tool-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
  transition: color 0.15s, background 0.15s;
  line-height: 1.3;
  user-select: none;
}

.gchat-tool-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

/* Input + send row */
#gchat-input-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 4px 8px 8px;
}

#gchat-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--white, #fff);
  font-family: var(--font, monospace);
  font-size: 0.82em;
  padding: 7px 12px;
  resize: none;
  outline: none;
  line-height: 1.4;
  transition: border-color 0.15s;
  scrollbar-width: thin;
}

#gchat-input:focus {
  border-color: var(--accent, #f2ef0b);
}

#gchat-input::placeholder {
  opacity: 0.4;
}

#gchat-send-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--accent, #f2ef0b);
  color: var(--bg, #111);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  flex-shrink: 0;
}

#gchat-send-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

#gchat-send-btn:active {
  transform: scale(0.92);
}

/* Emoji picker grid (above input area, inside panel) */
#gchat-emoji-picker {
  display: none;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  padding: 8px;
  overflow-y: auto;
  max-height: 140px;
  background: var(--nav-bg, #111);
  border-top: 1px solid var(--nav-border-color, rgba(255, 255, 255, 0.08));
  scrollbar-width: thin;
}

#gchat-emoji-picker img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  cursor: pointer;
  border-radius: 4px;
  padding: 2px;
  transition: background 0.1s;
}

#gchat-emoji-picker img:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* :emoji inline autocomplete — portaled to body */
#gchat-emoji-ac {
  position: fixed;
  z-index: 2000;
  background: var(--bg, #1a1a1a);
  border: 1px solid var(--nav-border-color, rgba(255, 255, 255, 0.12));
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: 180px;
  scrollbar-width: thin;
}

.gchat-emoji-ac-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 0.82em;
  color: rgba(255, 255, 255, 0.8);
  transition: background 0.1s;
}

.gchat-emoji-ac-item:hover,
.gchat-emoji-ac-item.active {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.gchat-emoji-ac-item img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}

@media (max-width: 999px) {
  #gchat-widget {
    right: calc(280px + 14px);
  }

  body.sidebar-right-hidden #gchat-widget {
    right: 14px;
  }
}

/* @user mention autocomplete — portaled to body, always opens upward */
#gchat-mention-ac {
  position: fixed;
  z-index: 2000;
  background: var(--bg, #1a1a1a);
  border: 1px solid var(--nav-border-color, rgba(255, 255, 255, 0.12));
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: 200px;
  scrollbar-width: thin;
}

.gchat-mention-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 0.82em;
  color: rgba(255, 255, 255, 0.8);
  transition: background 0.1s;
}

.gchat-mention-item:hover,
.gchat-mention-item.active {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.gchat-mention-item img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.gchat-mention-name {
  font-weight: bold;
}

.gchat-mention-display {
  opacity: 0.55;
  margin-left: 4px;
  font-size: 0.9em;
}

/* Top-edge height resize handle */
#gchat-resize-h {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  cursor: ns-resize;
  z-index: 10;
  user-select: none;
  touch-action: none;
}

/* Left-side width resize handle */
#gchat-resize-w {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  cursor: ew-resize;
  z-index: 10;
  user-select: none;
  touch-action: none;
}

#gchat-resize-e {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  cursor: ew-resize;
  z-index: 10;
  user-select: none;
  touch-action: none;
}


/* Panel needs relative positioning for the absolute left handle */
#gchat-panel {
  position: relative;
}

/* Message action row — timestamp + reply + delete */
.gchat-msg-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s;
  margin-top: 2px;
}

.gchat-msg:hover .gchat-msg-actions {
  opacity: 1;
}

.gchat-reply-btn,
.gchat-del-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
  font-size: 10px;
  line-height: 1;
  transition: background 0.12s, color 0.12s;
}

.gchat-reply-btn {
  color: rgba(255, 255, 255, 0.4);
}

.gchat-reply-btn:hover {
  color: var(--accent, #f2ef0b);
  background: rgba(255, 255, 255, 0.06);
}

.gchat-del-btn {
  color: rgba(255, 100, 100, 0.5);
}

.gchat-del-btn:hover {
  color: #ff5555;
  background: rgba(255, 80, 80, 0.1);
}

/* ── Chat embedded media ─────────────────────────────────────────────────── */
.gchat-embed-img,
.gchat-embed-video,
.gchat-embed-audio,
.gchat-embed-yt {
  display: block;
  margin-top: 6px;
  max-width: 100%;
}

.gchat-embed-img img {
  max-width: 100%;
  max-height: 200px;
  border-radius: 6px;
  display: block;
  object-fit: contain;
  cursor: zoom-in;
}

.gchat-embed-img img:hover {
  opacity: 0.9;
}

.gchat-embed-video video {
  max-width: 100%;
  max-height: 350px;
  border-radius: 6px;
  display: block;
}

.gchat-embed-audio audio {
  width: 100%;
  height: 36px;
}

/* Old iframe embed (no longer used, kept for safety) */
.gchat-embed-yt {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 6px;
}

.gchat-embed-yt iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* ── YouTube oEmbed preview card ──────────────────────────────────────────── */
.gchat-yt-card {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
  max-width: 320px;
}

.gchat-yt-card:hover {
  background: rgba(255, 255, 255, 0.1);
}

.gchat-yt-thumb-wrap {
  position: relative;
  flex-shrink: 0;
  width: 110px;
  height: 62px;
  overflow: hidden;
}

.gchat-yt-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gchat-yt-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  font-size: 1.6rem;
  color: #ff0000;
  pointer-events: none;
  transition: background 0.15s;
}

.gchat-yt-card:hover .gchat-yt-play {
  background: rgba(0, 0, 0, 0.55);
}

.gchat-yt-info {
  flex: 1;
  min-width: 0;
  padding: 6px 8px 6px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gchat-yt-title {
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gchat-yt-author {
  font-size: 0.7rem;
  opacity: 0.55;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Chat image modal ──────────────────────────────────────────────────────── */
#gchat-img-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.85);
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  animation: gchat-modal-fade 0.18s ease;
}

#gchat-img-modal.gchat-img-modal-open {
  display: flex;
}

@keyframes gchat-modal-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

#gchat-img-modal-inner {
  position: relative;
  max-width: 92vw;
  max-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#gchat-img-modal-img {
  max-width: 92vw;
  max-height: 92vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 8px 48px rgba(0, 0, 0, 0.9);
  cursor: default;
}


/* ── Same-site item preview card ───────────────────────────────────────────── */
.gchat-item-card {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s, border-color 0.15s;
  max-width: 260px;
  width: 100%;
}

.gchat-item-card:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--accent, rgba(255, 255, 255, 0.2));
  text-decoration: none;
}

.gchat-item-card-thumb {
  position: relative;
  flex-shrink: 0;
  width: 80px;
  height: 60px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
}

.gchat-item-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gchat-item-card-icon {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 4px;
  padding: 2px 5px;
  font-size: 0.72rem;
  color: #fff;
  line-height: 1;
  pointer-events: none;
}

.gchat-item-card-info {
  flex: 1;
  min-width: 0;
  padding: 6px 8px 6px 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.gchat-item-card-id {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent, #f2ef0b);
  white-space: nowrap;
}

.gchat-item-card-meta {
  font-size: 0.7rem;
  opacity: 0.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Same-site item preview card ───────────────────────────────────────────── */
.gchat-item-card {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s, border-color 0.15s;
  max-width: 260px;
  width: 100%;
}

.gchat-item-card:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--accent, rgba(255, 255, 255, 0.2));
  text-decoration: none;
}

.gchat-item-card-thumb {
  position: relative;
  flex-shrink: 0;
  width: 80px;
  height: 60px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
}

.gchat-item-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gchat-item-card-icon {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 4px;
  padding: 2px 5px;
  font-size: 0.72rem;
  color: #fff;
  line-height: 1;
  pointer-events: none;
}

.gchat-item-card-info {
  flex: 1;
  min-width: 0;
  padding: 6px 8px 6px 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.gchat-item-card-id {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent, #f2ef0b);
  white-space: nowrap;
}

.gchat-item-card-meta {
  font-size: 0.7rem;
  opacity: 0.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =============================================
   SETTINGS PAGE – MOBILE OVERFLOW FIXES
   Prevents long i18n strings (Deutsch / Zange)
   from expanding past the viewport on mobile.
   ============================================= */

.settings {
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
  word-break: break-word;
  overflow-wrap: anywhere;
  padding: 20px;
}

.settings h1,
.settings h2,
.settings h4,
.settings label,
.settings span,
.settings small,
.settings p,
.settings legend {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.settings fieldset {
  min-width: 0;
  /* prevent fieldsets from blowing out grid */
  max-width: 100%;
  box-sizing: border-box;
}

/* Anchor targets: offset scroll so fixed navbar + quicknav don't overlap headings */
.settings h2[id] {
  /* navbar (~50px) + quicknav bar (~37px) + a little breathing room */
  scroll-margin-top: calc(var(--navbar-h, 50px) + 44px);
}

/* Settings quick-nav bar */
#settings-quicknav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 14px;
  background: var(--motd-bg);
  border-bottom: 1px solid var(--nav-border-color);
  position: fixed;
  top: var(--navbar-h, 50px);
  left: 0;
  right: 0;
  z-index: 200;
}
#settings-quicknav a {
  font-size: 0.82em;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--nav-border-color);
  color: var(--text-muted);
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
#settings-quicknav a:hover,
#settings-quicknav a.active {
  background: var(--accent);
  color: var(--black);
  border-color: var(--accent);
}

@media (max-width: 600px) {
  .settings {
    padding: 0 4px;
  }

  /* Account info table: stack label and value */
  .settings .account-info-table td {
    display: block;
    width: 100% !important;
    padding: 2px 0;
  }

  .settings .account-info-table tr {
    display: block;
    margin-bottom: 8px;
  }

  /* Display name row – stack input & button vertically */
  .settings .account-info-table td[style*="display: flex"] {
    flex-wrap: wrap;
  }

  /* Account actions grid – single column on mobile */
  .settings .account-actions-grid {
    grid-template-columns: 1fr !important;
  }

  /* Prevent flex rows from overflowing */
  .settings .setting-item label[style*="display: flex"] {
    flex-wrap: wrap;
  }

  .settings .setting-item label span {
    flex: 1;
    min-width: 0;
  }

  /* Hint text under checkboxes */
  .settings small.text-muted {
    display: block;
    margin-left: 0 !important;
    margin-top: 2px;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* Username color row */
  .settings .setting-item div[style*="display: flex"] {
    flex-wrap: wrap;
  }

  /* Linked accounts wrapper */
  .settings .linked-accounts-wrapper,
  .settings .preferences-settings-wrapper,
  .settings .account-settings-wrapper,
  .settings .profile-settings-wrapper {
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  .settings .account-settings-wrapper {
    padding: 12px !important;
  }

  /* Fieldset legend text */
  .settings fieldset legend {
    font-size: 1em !important;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}

#nav-meme-link,
#nav-upload-link {
  white-space: nowrap;
}

/* --- Admin IP History Styles --- */
.admin-ips-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
  color: var(--white);
}

.admin-ips-table th {
  padding: 15px;
  text-align: left;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 1px;
  color: #888;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.admin-ips-table tr {
  transition: all 0.2s ease;
}

.admin-ips-table tbody tr {
  background: rgba(255, 255, 255, 0.02);
}

.admin-ips-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.05);
}

.admin-ips-table td {
  padding: 15px;
  vertical-align: middle;
}

.ip-badge {
  font-family: monospace;
  padding: 4px 10px;
  background: rgba(var(--accent-rgb, 153, 255, 0), 0.1);
  border: 1px solid rgba(var(--accent-rgb, 153, 255, 0), 0.2);
  color: var(--accent);
  border-radius: 4px;
  font-size: 0.9rem;
  word-break: break-all;
  display: inline-block;
  max-width: 100%;
}

.date-cell {
  font-size: 0.85rem;
  color: #aaa;
}

.date-label {
  display: block;
  font-size: 0.7rem;
  color: #666;
  text-transform: uppercase;
  margin-bottom: 2px;
}

/* Filter badge style on navbar */
.filter-badge {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 800;
  padding: 2px 4px;
  line-height: 1;
  text-transform: uppercase;
  color: #fff !important;
  cursor: pointer;
  font-family: var(--font, monospace);
  letter-spacing: 0.5px;
  z-index: 10;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  user-select: none;
}

.filter-badge-sfw {
  background: var(--badge-sfw, #68a728);
}

.filter-badge-nsfw {
  background: var(--badge-nsfw, #E10DC3);
}

.filter-badge-nsfl {
  background: var(--badge-nsfl, #660000);
}

.filter-badge-unt {
  background: #ff9800;
  /* Amber/Orange */
}

.filter-badge-all {
  background: var(--nav-border-color);
  /* Slate grey */
}

/* Multi-rating mode: neutral wrapper + individual colored letter chips */
.filter-badge-multi {
  background: transparent;
  padding: 0;
  gap: 2px;
  box-shadow: none;
}

.filter-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 11px;
  height: 11px;
  border-radius: 2px;
  font-size: 8px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}

.filter-letter-sfw  { background: var(--badge-sfw,  #68a728); }
.filter-letter-nsfw { background: var(--badge-nsfw, #E10DC3); }
.filter-letter-nsfl { background: var(--badge-nsfl, #660000); }
.filter-letter-unt  { background: #ff9800; }


/* Dynamic MIME icons styles */
.filter-rating-row {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  justify-content: center;
}

.filter-mime-icons {
  display: inline-flex;
  gap: 3px;
  margin-left: 0;
  margin-top: 2px;
  justify-content: center;
  align-items: center;
}

.mime-icon {
  font-size: 7px !important;
  width: auto !important;
  /* Override navbar icon fixed width */
  text-align: center;
  line-height: 1;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
  animation: dot-fade-in 0.2s ease-out forwards;
}

@keyframes dot-fade-in {
  from {
    opacity: 0;
    transform: scale(0.5);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.mime-icon-video {
  text-shadow: 0 0 3px #00bcd4;
}

.mime-icon-image {
  text-shadow: 0 0 3px #2ecc71;
}

.mime-icon-audio {
  text-shadow: 0 0 3px #e84393;
}

.mime-icon-flash {
  text-shadow: 0 0 3px #f1c40f;
}

/* ZOMG Mode glowing Z indicator */
.zomg-z {
  color: #f1c40f;
  /* Gold/Yellow */
  font-weight: 900;
  text-shadow: 0 0 3px #f1c40f;
  margin-left: 2px;
  animation: zomg-pulse 1.5s infinite alternate;
}

@keyframes zomg-pulse {
  from {
    text-shadow: 0 0 2px #f1c40f;
  }

  to {
    text-shadow: 0 0 6px #f1c40f, 0 0 10px #f1c40f;
  }
}

/* =============================================
   POST & FILE INFO MODAL (RETHOUGHT DESIGN)
   ============================================= */

/* Modal Container & Animation */
.infobox-modal-content {
  max-width: 580px !important;
  width: 92% !important;
  padding: 0 !important;
  background: rgba(22, 23, 27, 0.94) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), 0 0 40px rgba(var(--accent-rgb, 153, 255, 0), 0.08) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  text-align: left !important;
  animation: infobox-pop-in 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes infobox-pop-in {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Modal Header */
.infobox-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.infobox-header-title {
  display: flex;
  align-items: center;
  gap: 12px;
}


.infobox-header-text h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--white, #fff);
  letter-spacing: -0.01em;
}

.infobox-sub-heading {
  font-size: 0.8rem;
  color: var(--text-muted, #999);
  display: block;
  margin-top: 2px;
}

.infobox-sub-heading code {
  font-family: var(--font-mono, monospace);
  background: rgba(255, 255, 255, 0.08);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--accent, #9f0);
  font-size: 0.85em;
}

.infobox-close-icon-btn {
  background: transparent;
  border: none;
  color: #888;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.1rem;
  transition: all 0.15s ease;
}

.infobox-close-icon-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* Modal Body */
.infobox-modal-body {
  padding: 18px 20px;
  max-height: 72vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Custom Scrollbar for Modal Body */
.infobox-modal-body::-webkit-scrollbar {
  width: 6px;
}

.infobox-modal-body::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.15);
}

.infobox-modal-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.infobox-modal-body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.35);
}

/* Sections */
.infobox-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.infobox-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent, #9f0);
  opacity: 0.9;
}

/* Cards Grid */
.infobox-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.infobox-card {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.infobox-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}

.infobox-card.full-width {
  grid-column: 1 / -1;
}

.infobox-card-label {
  font-size: 0.76rem;
  font-weight: 600;
  color: #888;
  display: flex;
  align-items: center;
  gap: 6px;
}

.infobox-card-label i {
  font-size: 0.85em;
  color: var(--accent, #9f0);
  opacity: 0.8;
}

.infobox-card-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.infobox-card-value {
  font-size: 0.92rem;
  color: #eee;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.infobox-card-value-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.font-mono {
  font-family: var(--font-mono, monospace);
}

/* Title Input */
.info-title-edit-wrap {
  display: flex;
  align-items: center;
  margin-top: 2px;
}

.info-title-input {
  flex: 1;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  padding: 7px 10px;
  font-size: 0.88rem;
  outline: none;
  transition: all 0.18s ease;
}

.info-title-input:focus {
  border-color: var(--accent, #9f0);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #9f0) 25%, transparent);
  background: rgba(0, 0, 0, 0.5);
}

.info-title-save-btn {
  background: var(--accent, #9f0);
  color: #111;
  border: none;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.9rem;
  transition: transform 0.12s ease, opacity 0.15s ease;
  flex-shrink: 0;
}

.info-title-save-btn:hover {
  transform: scale(1.04);
  opacity: 0.9;
}

.info-title-status {
  font-size: 0.78rem;
  margin-top: 2px;
  display: block;
}

/* Visibility Badge & Action Buttons */
.visibility-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #fff;
}

.infobox-action-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #ddd;
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s ease;
}

.infobox-action-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}

/* Expiration Controls */
.infobox-expiry-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.expiry-status-label {
  font-size: 0.88rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.info-expiry-edit-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.infobox-select {
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 0.8rem;
  outline: none;
}

.infobox-select:focus {
  border-color: var(--accent, #9f0);
}

/* MIME Pill & Link Pill */
.mime-pill {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 3px 8px;
  border-radius: 5px;
  font-family: var(--font-mono, monospace);
  font-size: 0.82rem;
  color: #e0e0e0;
}

.infobox-link-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent, #9f0);
  background: color-mix(in srgb, var(--accent, #9f0) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, #9f0) 30%, transparent);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s ease;
}

.infobox-link-pill:hover {
  background: color-mix(in srgb, var(--accent, #9f0) 22%, transparent);
  border-color: var(--accent, #9f0);
  color: var(--accent, #9f0);
  text-decoration: none;
}

.infobox-source-link {
  color: var(--accent, #9f0);
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  word-break: break-all;
  font-size: 0.88rem;
}

.infobox-source-link:hover {
  text-decoration: underline;
}

/* Hash Codeblock & Copy Button */
.copy-hash-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #bbb;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
}

.copy-hash-btn:hover {
  background: var(--accent, #9f0);
  border-color: var(--accent, #9f0);
  color: #111;
}

.info-hash-codeblock {
  margin: 2px 0 0 0;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  white-space: pre-wrap;
  word-break: break-all;
  font-family: var(--font-mono, monospace);
  font-size: 0.8rem;
  color: #ddd;
  user-select: all;
}

.info-hash-codeblock code {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}

/* Repost Badges */
.infobox-reposts-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.repost-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s ease;
}

.repost-pill.phash {
  background: rgba(255, 170, 0, 0.12);
  border: 1px solid rgba(255, 170, 0, 0.3);
  color: #ffb732;
}

.repost-pill.exact {
  background: rgba(0, 200, 81, 0.12);
  border: 1px solid rgba(0, 200, 81, 0.3);
  color: #00e676;
}

.repost-pill:hover {
  transform: translateY(-1px);
  filter: brightness(1.2);
  text-decoration: none;
}

/* Modal Footer */
.infobox-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  background: rgba(0, 0, 0, 0.25);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.btn-infobox-action {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #eee;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.18s ease;
}

.btn-infobox-action:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}

.btn-infobox-close {
  background: var(--accent, #9f0);
  border: 1px solid var(--accent, #9f0);
  color: #111;
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
}

.btn-infobox-close:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* Mobile Responsive */
@media (max-width: 540px) {
  .infobox-cards-grid {
    grid-template-columns: 1fr;
  }
}

/* =============================================
   NSFW / NSFL PREMIUM ZERO-LAG BACKGROUND BLUR
   ============================================= */
/* Stretch the thumbnail paragraph to cover the whole box */
.blur-nsfw-active div.posts > a.thumb[data-mode="nsfw"] p,
.blur-nsfl-active div.posts > a.thumb[data-mode="nsfl"] p,
.blur-sfw-active div.posts > a.thumb[data-mode="sfw"] p,
.blur-untagged-active div.posts > a.thumb[data-mode="null"] p {
  position: absolute !important;
  inset: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 8 !important;
}

/* Premium Blur Overlay for NSFW */
.blur-nsfw-active div.posts > a.thumb[data-mode="nsfw"] p::after {
  content: "NSFW" !important;
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  letter-spacing: 2px !important;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.9) !important;
  background: rgba(10, 10, 12, 0.65) !important;
  pointer-events: none !important;
  opacity: 1 !important;
  transition: opacity 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Premium Blur Overlay for NSFL */
.blur-nsfl-active div.posts > a.thumb[data-mode="nsfl"] p::after {
  content: "NSFL" !important;
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ff3b30 !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  letter-spacing: 2px !important;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.9) !important;
  background: rgba(10, 10, 12, 0.75) !important;
  pointer-events: none !important;
  opacity: 1 !important;
  transition: opacity 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Premium Blur Overlay for SFW */
.blur-sfw-active div.posts > a.thumb[data-mode="sfw"] p::after {
  content: "SFW" !important;
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #30d158 !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  letter-spacing: 2px !important;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.9) !important;
  background: rgba(10, 10, 12, 0.6) !important;
  pointer-events: none !important;
  opacity: 1 !important;
  transition: opacity 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Premium Blur Overlay for Untagged */
.blur-untagged-active div.posts > a.thumb[data-mode="null"] p::after {
  content: "UNTAGGED" !important;
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ff9f0a !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  letter-spacing: 2px !important;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.9) !important;
  background: rgba(10, 10, 12, 0.65) !important;
  pointer-events: none !important;
  opacity: 1 !important;
  transition: opacity 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Click reveal transition state (reveals on click adding .revealed, no hover reveal) */
.blur-nsfw-active div.posts > a.thumb.revealed p::after,
.blur-nsfl-active div.posts > a.thumb.revealed p::after,
.blur-sfw-active div.posts > a.thumb.revealed p::after,
.blur-untagged-active div.posts > a.thumb.revealed p::after {
  opacity: 0 !important;
}

/* Notification exclamation mark override for active blur states (both blurred and revealed) */
.blur-nsfw-active div.posts > a.thumb[data-mode="nsfw"].has-notif p::after,
.blur-nsfl-active div.posts > a.thumb[data-mode="nsfl"].has-notif p::after,
.blur-sfw-active div.posts > a.thumb[data-mode="sfw"].has-notif p::after,
.blur-untagged-active div.posts > a.thumb[data-mode="null"].has-notif p::after {
  content: "!" !important;
  color: var(--accent) !important;
  font-size: 40px !important;
  font-weight: 900 !important;
  text-shadow: 0 0 10px #000, 0 0 20px rgba(var(--accent-rgb), 0.5) !important;
  background: rgba(255, 0, 0, 0.28) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.blur-nsfw-active div.posts > a.thumb.revealed.has-notif p::after,
.blur-nsfl-active div.posts > a.thumb.revealed.has-notif p::after,
.blur-sfw-active div.posts > a.thumb.revealed.has-notif p::after,
.blur-untagged-active div.posts > a.thumb.revealed.has-notif p::after {
  opacity: 1 !important;
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Premium corner hide button styled dynamically inside revealed cards */
.blur-nsfw-active a.thumb p .hide-thumb-btn,
.blur-nsfl-active a.thumb p .hide-thumb-btn,
.blur-sfw-active a.thumb p .hide-thumb-btn,
.blur-untagged-active a.thumb p .hide-thumb-btn {
  display: none !important;
}

.blur-nsfw-active a.thumb.revealed p .hide-thumb-btn,
.blur-nsfl-active a.thumb.revealed p .hide-thumb-btn,
.blur-sfw-active a.thumb.revealed p .hide-thumb-btn,
.blur-untagged-active a.thumb.revealed p .hide-thumb-btn {
  display: flex !important;
  position: absolute !important;
  bottom: 15px !important;
  right: 0 !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 100 !important;
  pointer-events: auto !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
  transition: background 0.2s, transform 0.2s, border-color 0.2s, color 0.2s !important;
  padding: 0 !important;
  font-size: 11px !important;
  line-height: 1 !important;
}

/* Post detail page media-object blur overlay support (NSFW, NSFL, SFW, Untagged) */
.blur-detail-active.blur-nsfw-active .media-object[data-mode="nsfw"]:not(.revealed),
.blur-detail-active.blur-nsfl-active .media-object[data-mode="nsfl"]:not(.revealed),
.blur-detail-active.blur-sfw-active .media-object[data-mode="sfw"]:not(.revealed),
.blur-detail-active.blur-untagged-active .media-object[data-mode="untagged"]:not(.revealed) {
  position: relative !important;
  cursor: pointer !important;
}

.blur-detail-active.blur-nsfw-active .media-object[data-mode="nsfw"]:not(.revealed) > *,
.blur-detail-active.blur-nsfl-active .media-object[data-mode="nsfl"]:not(.revealed) > *,
.blur-detail-active.blur-sfw-active .media-object[data-mode="sfw"]:not(.revealed) > *,
.blur-detail-active.blur-untagged-active .media-object[data-mode="untagged"]:not(.revealed) > * {
  filter: blur(40px) brightness(0.6) !important;
  -webkit-filter: blur(40px) brightness(0.6) !important;
  pointer-events: none !important;
  user-select: none !important;
  transition: filter 0.35s ease, -webkit-filter 0.35s ease !important;
  z-index: 1;
}

.media-object.revealed > * {
  filter: none !important;
  -webkit-filter: none !important;
  pointer-events: auto !important;
}

.blur-detail-active.blur-nsfw-active .media-object[data-mode="nsfw"]:not(.revealed)::after,
.blur-detail-active.blur-nsfl-active .media-object[data-mode="nsfl"]:not(.revealed)::after,
.blur-detail-active.blur-sfw-active .media-object[data-mode="sfw"]:not(.revealed)::after,
.blur-detail-active.blur-untagged-active .media-object[data-mode="untagged"]:not(.revealed)::after {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 1000 !important;
  color: #fff !important;
  font-family: inherit !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  text-align: center !important;
  white-space: pre-wrap !important;
  cursor: pointer !important;
  transition: opacity 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9) !important;
  pointer-events: none !important;
  opacity: 1 !important;
}

.blur-detail-active.blur-nsfw-active .media-object[data-mode="nsfw"]:not(.revealed)::after {
  content: "NSFW\A \A Click to reveal" !important;
  font-size: 18px !important;
  color: #ffffff !important;
  background: rgba(10, 10, 12, 0.45) !important;
}
.blur-detail-active.blur-nsfl-active .media-object[data-mode="nsfl"]:not(.revealed)::after {
  content: "NSFL\A \A Click to reveal" !important;
  font-size: 18px !important;
  color: #ff3b30 !important;
  background: rgba(10, 10, 12, 0.55) !important;
}
.blur-detail-active.blur-sfw-active .media-object[data-mode="sfw"]:not(.revealed)::after {
  content: "SFW\A \A Click to reveal" !important;
  font-size: 18px !important;
  color: #30d158 !important;
  background: rgba(10, 10, 12, 0.4) !important;
}
.blur-detail-active.blur-untagged-active .media-object[data-mode="untagged"]:not(.revealed)::after {
  content: "UNTAGGED\A \A Click to reveal" !important;
  font-size: 18px !important;
  color: #ff9f0a !important;
  background: rgba(10, 10, 12, 0.45) !important;
}

/* Hide overlay when revealed */
.media-object.revealed::after {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* =============================================
   NOTIFICATION THUMBNAIL BLUR
   JS swaps img src to /t/{id}_blur.webp and adds
   .notif-thumb-blurred. CSS only handles the label
   overlay and hover/reveal transitions.
   ============================================= */

/* Blurred thumb: position for overlay */
.notif-thumb.notif-thumb-blurred {
  position: relative;
}

/* Overlay label */
.notif-thumb.notif-thumb-blurred::after {
  content: attr(data-mode);
  text-transform: uppercase;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
  background: rgba(10, 10, 12, 0.45);
  color: #ffffff;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 2;
}

/* NSFL label gets a red tint */
.notif-thumb.notif-thumb-blurred[data-mode="nsfl"]::after {
  color: #ff3b30;
}

/* Hide overlay on hover (JS handles the actual src swap) */
.notif-thumb.notif-thumb-blurred:hover::after {
  opacity: 0;
}

/* Revealed state: hide overlay */
.notif-thumb.notif-thumb-blurred.revealed::after {
  opacity: 0;
  pointer-events: none;
}
/* ── NSFP Tag Manager ─────────────────────────────────────────────────────── */
.nsfp-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 20px;
  padding: 6px 14px 6px 12px;
  font-size: 0.88em;
  font-weight: 600;
  color: color-mix(in srgb, var(--accent) 70%, #fff);
  transition: background 0.2s, border-color 0.2s;
}
.nsfp-tag-chip:hover {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}
.nsfp-tag-chip .chip-id {
  font-size: 0.78em;
  opacity: 0.6;
  font-weight: 400;
  font-family: monospace;
}
.nsfp-tag-chip .chip-remove {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0 0 0 2px;
  font-size: 1.1em;
  line-height: 1;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.nsfp-tag-chip .chip-remove:hover {
  opacity: 1;
  color: #ff4090;
}
.nsfp-chips-area {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 44px;
  padding: 10px;
  background: rgba(0,0,0,0.2);
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.06);
  margin-top: 12px;
}
.nsfp-chips-empty {
  color: #888;
  font-size: 0.9em;
  font-style: italic;
  align-self: center;
  margin: 0 auto;
}
.nsfp-search-wrap { position: relative; }
.nsfp-search-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  width: 100%;
  max-height: 260px;
  overflow-y: auto;
  background: var(--dropdown-bg, #1a1a1a);
  border: 1px solid var(--black, #000);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.6);
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-color, #555) transparent;
}
.nsfp-search-input {
  width: 100%;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 1em;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.nsfp-search-input:focus { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.nsfp-search-input::placeholder { color: rgba(255,255,255,0.35); }
.nsfp-search-result-item {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  min-height: 44px;
  cursor: pointer;
  transition: background 0.12s;
  box-sizing: border-box;
  user-select: none;
}
.nsfp-search-result-item:not(:last-child) { border-bottom: 1px solid rgba(255,255,255,0.06); }
.nsfp-search-result-item:hover { background: rgba(255,255,255,0.1); }
.nsfp-search-result-item .result-id {
  font-family: monospace;
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  flex-shrink: 0;
  margin-right: 4px;
}
.nsfp-search-result-item .result-tag { font-size: 14px; font-weight: 500; color: var(--accent); }
.nsfp-search-result-item .result-norm { font-size: 11px; color: rgba(255,255,255,0.35); margin-left: 12px; white-space: nowrap; }
.nsfp-search-result-item.already-added { opacity: 0.55; cursor: default; }
.nsfp-search-result-item.already-added::after {
  content: 'added';
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  margin-left: auto;
  white-space: nowrap;
}
.nsfp-status-msg {
  font-size: 0.85em;
  font-weight: 600;
  margin-top: 8px;
  min-height: 18px;
  display: block;
}

/* =============================================
   ARCHIVE DOWNLOAD VIEW
   ============================================= */
.archive-download-view {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 260px;
}

.archive-download-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px 24px;
  text-align: center;
  max-width: 480px;
  width: 100%;
}

.archive-download-icon {
  font-size: 64px;
  color: var(--accent);
  opacity: 0.9;
}

.archive-download-filename {
  font-size: 1.1em;
  font-weight: 700;
  color: var(--white, #eee);
  word-break: break-all;
  overflow-wrap: anywhere;
  max-width: 100%;
  line-height: 1.4;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
  border-radius: 4px;
  padding: 6px 12px;
  font-family: monospace;
  letter-spacing: 0.3px;
}

.archive-download-size {
  font-size: 0.85em;
  color: rgba(255, 255, 255, 0.45);
  font-family: monospace;
  letter-spacing: 0.5px;
}

.archive-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 32px;
  background: var(--accent);
  color: var(--black);
  font-weight: 700;
  font-size: 1em;
  text-decoration: none !important;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  cursor: pointer;
  letter-spacing: 0.5px;
  margin-top: 4px;
}


.archive-download-btn i {
  font-size: 1em;
}

/* ── Filtered-upload ghost thumbnail ──────────────────────────────────────────
   Shown when the current user's freshly-uploaded item is hidden by an active
   content filter (SFW / NSFW / NSFL mode). Disappears on manual page reload.
   ──────────────────────────────────────────────────────────────────────────── */
a.thumb.filtered-upload-ghost,
a.lazy-thumb.filtered-upload-ghost {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 2px dashed rgba(255, 255, 255, 0.25) !important;
  box-sizing: border-box;
}

/* Strongly blur the background thumbnail image */
a.thumb.filtered-upload-ghost::before,
a.lazy-thumb.filtered-upload-ghost::before {
  content: '';
  position: absolute;
  inset: -6px; /* bleed out so blur edges don't show */
  background: var(--thumb-bg) center / cover no-repeat;
  filter: blur(14px) brightness(0.45);
  z-index: 0;
}

/* Dark overlay to give the label good contrast */
a.thumb.filtered-upload-ghost::after,
a.lazy-thumb.filtered-upload-ghost::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1;
}

/* Hover: slightly brighten to hint it's clickable */
a.thumb.filtered-upload-ghost:hover::before,
a.lazy-thumb.filtered-upload-ghost:hover::before {
  filter: blur(14px) brightness(0.6);
}

a.thumb.filtered-upload-ghost:hover::after,
a.lazy-thumb.filtered-upload-ghost:hover::after {
  background: rgba(0, 0, 0, 0.3);
}

/* Overlay label inside the ghost thumb */
.filtered-upload-ghost-label {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px;
  text-align: center;
  pointer-events: none;
  color: rgba(255, 255, 255, 0.92);
  user-select: none;
}

.filtered-upload-ghost-label .fug-icon {
  font-size: 1.4em;
  opacity: 0.85;
  line-height: 1;
}

.filtered-upload-ghost-label .fug-title {
  font-size: 0.65em;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.25;
  text-transform: uppercase;
  opacity: 0.95;
}

.filtered-upload-ghost-label .fug-hint {
  font-size: 0.58em;
  opacity: 0.6;
  line-height: 1.3;
  font-weight: 400;
}

/* ── Banner Crop Modal ─────────────────────────────────────────────────────── */

.banner-crop-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 20px;
  box-sizing: border-box;
  font-family: inherit;
  user-select: none;
  -webkit-user-select: none;
}

.banner-crop-wrapper {
  width: auto;
  max-width: 1200px;
  background: var(--bg);
  padding: 20px;
  border-radius: 8px;
  border: 1px solid var(--nav-border-color);
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.banner-crop-title {
  margin: 0;
  color: #fff;
}

.banner-crop-hint {
  color: #aaa;
  font-size: 0.85em;
  text-align: center;
  margin-bottom: 4px;
}

.banner-crop-canvas-wrapper {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 400 / 120;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--nav-border-color);
  border-radius: 4px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
  background: #111;
  margin: 0 auto;
}

.banner-crop-canvas {
  width: 100%;
  height: 100%;
  display: block;
  cursor: move;
  touch-action: none;
  pointer-events: auto !important;
}

.banner-crop-controls {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 15px;
}

.banner-crop-zoom-label {
  display: flex;
  gap: 10px;
  align-items: center;
  flex: 1;
  min-width: 200px;
  color: #fff;
}

.banner-crop-zoom-slider {
  flex: 1;
}

.banner-crop-actions {
  display: flex;
  gap: 10px;
}

/* Avatar inline edit button */
.profile_head_avatar {
    position: relative;
}
.avatar-edit-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    line-height: 1;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease, color 0.2s ease;
    font-size: 1.5em;
    text-shadow: 0 0 5px rgba(0,0,0,0.8);
    z-index: 10;
}
.profile-avatar-img {
    display: block;
    width: 55px;
    height: 55px;
    object-fit: cover;
    transition: filter 0.2s ease;
}
.avatar-image-wrapper .profile-avatar-img:hover ~ .avatar-edit-btn,
.avatar-edit-btn:hover {
    opacity: 1;
}
.avatar-edit-btn:hover {
    color: var(--accent);
}
.edit-mode-active .avatar-image-wrapper:has(.avatar-edit-btn:hover) .profile-avatar-img,
.edit-mode-active .avatar-image-wrapper .profile-avatar-img:hover {
    filter: brightness(0.6);
}
.edit-mode-active #inline-banner-edit-wrapper { display: block !important; }

/* Settings Direct-Editable Profile Card */
.editable-profile-card {
  position: relative;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  border-radius: 8px;
}
.editable-profile-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.card-banner-controls-overlay {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 6px;
  z-index: 10;
}

.card-overlay-btn {
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
  font-size: 0.78rem;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}
.card-overlay-btn:hover {
  background: rgba(0, 0, 0, 0.9);
  border-color: var(--accent);
  color: var(--accent);
}
.card-overlay-btn.btn-danger:hover {
  border-color: #ff6b6b;
  color: #ff6b6b;
}

.editable-avatar-container {
  position: relative;
  cursor: pointer;
}
.avatar-hover-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  border-radius: 50%;
  color: #fff;
  font-size: 1.25rem;
}
.editable-avatar-container:hover .avatar-hover-overlay {
  opacity: 1;
}

.avatar-quick-remove {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ff4757;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 0.72rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  transition: transform 0.15s ease, background 0.15s ease;
}
.avatar-quick-remove:hover {
  transform: scale(1.15);
  background: #ff6b6b;
}

.inline-edit-username-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
}
.user-infobox-username[contenteditable="true"] {
  border-bottom: 1px dashed rgba(255, 255, 255, 0.3);
  padding: 1px 6px;
  border-radius: 3px;
  transition: all 0.2s ease;
  min-width: 80px;
  max-width: 320px;
  white-space: nowrap;
  overflow: visible;
  cursor: text;
}
.user-infobox-username[contenteditable="true"]:hover {
  border-bottom-color: var(--accent);
  background: rgba(255, 255, 255, 0.05);
}
.user-infobox-username[contenteditable="true"]:focus {
  outline: none;
  border-bottom: 2px solid var(--accent);
  background: rgba(0, 0, 0, 0.3);
  min-width: 120px;
}

.color-picker-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.8);
  cursor: pointer;
  font-size: 0.68rem;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
  flex-shrink: 0;
  transition: transform 0.2s ease, border-color 0.2s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
.color-picker-badge:hover {
  transform: scale(1.18);
  border-color: #fff;
}

.user-infobox-description[contenteditable="true"] {
  min-height: 44px;
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  transition: all 0.2s ease;
  position: relative;
}
.user-infobox-description[contenteditable="true"]:empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted);
  font-style: italic;
}
.user-infobox-description[contenteditable="true"]:hover {
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.03);
}
.user-infobox-description[contenteditable="true"]:focus {
  outline: none;
  border-style: solid;
  border-color: var(--accent);
  background: rgba(0, 0, 0, 0.3);
}

.inline-save-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 3px 10px;
  font-size: 0.78rem;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.inline-save-btn:hover {
  opacity: 0.9;
}

.item-main-content {
  padding-left: 15px;
  padding-right: 15px;
}

/* ==========================================================================
   ONARA ALTERNATIVE FLAVOR: Fullscreen See-Through Modal Wrapper
   ========================================================================== */

/* Prevent scrolling on background document when Onara modal is active or closing */
body.onara-modal-open,
body.onara-modal-closing {
  overflow: hidden !important;
}

/* Override html's scrollbar-gutter: stable so the page fills full viewport width */
html:has(body.onara-modal-open),
html:has(body.onara-modal-closing) {
  overflow: hidden !important;
  scrollbar-gutter: auto !important;
}

/* Background main page elements and containers are transparent so #bg canvas and grid shine through */
body.onara-modal-open .pagewrapper,
body.onara-modal-closing .pagewrapper {
  pointer-events: none !important;
  user-select: none !important;
  margin-top: var(--navbar-h, 50px) !important;
  background: transparent !important;
}

body.onara-modal-open .index-container,
body.onara-modal-closing .index-container,
body.onara-modal-open div.posts,
body.onara-modal-closing div.posts {
  background: transparent !important;
}

body.onara-modal-open:not(.onara-modal-closing) .pagewrapper > *:not(.index-layout-wrapper):not(#main),
body.onara-modal-open:not(.onara-modal-closing) .index-container > *:not(.posts),
body.onara-modal-open:not(.onara-modal-closing) #footbar,
body.onara-modal-open:not(.onara-modal-closing) .pagination-container-fluid {
  opacity: var(--onara-grid-dim-opacity, 1) !important;
  filter: none !important;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.onara-modal-closing .pagewrapper > *:not(.index-layout-wrapper):not(#main),
body.onara-modal-closing .index-container > *:not(.posts),
body.onara-modal-closing #footbar,
body.onara-modal-closing .pagination-container-fluid {
  opacity: 1 !important;
  filter: none !important;
  transition: opacity 0.2s cubic-bezier(0.25, 0, 0.4, 1) !important;
}

/* All non-active background thumbnails shine through with the configured grid opacity */
body.onara-modal-open:not(.onara-modal-closing) .posts > a.thumb:not(.onara-active) {
  opacity: var(--onara-grid-dim-opacity, 1) !important;
  filter: none !important;
  box-shadow: none !important;
  outline: none !important;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              scale 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

body.onara-modal-closing .posts > a.thumb:not(.onara-active) {
  opacity: 1 !important;
  filter: none !important;
  box-shadow: none !important;
  outline: none !important;
  scale: 1;
  transition: opacity 0.2s cubic-bezier(0.25, 0, 0.4, 1),
              scale 0.3s cubic-bezier(0.25, 0, 0.4, 1) !important;
}

body.onara-modal-open:not(.onara-modal-closing) .posts > a.thumb:not(.onara-active)::after {
  visibility: hidden !important;
  opacity: 0 !important;
}

body.onara-modal-closing .posts > a.thumb:not(.onara-active)::after {
  visibility: hidden !important;
  opacity: 0 !important;
}

/* ONLY the single currently active thumbnail in the background shines through with prominent glow */
body.onara-modal-open:not(.onara-modal-closing) .posts > a.thumb.onara-active {
  opacity: 1 !important;
  filter: none !important;
  /* Accent ring + glow, plus a depth shadow underneath for the lifted-out 3D look */
  box-shadow: 0 0 0 3px var(--accent, #9f0), 0 0 20px var(--accent, #9f0), 0 0 35px rgba(255, 255, 255, 0.9),
              0 18px 40px rgba(0, 0, 0, 0.7) !important;
  z-index: 52 !important;
  position: relative !important;
  /* Pops out toward the viewer (scale is separate from the magnetic hover's translate) */
  scale: 1.1;
  transition: box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease,
              scale 0.45s cubic-bezier(0.22, 1.3, 0.36, 1) !important;
}

body.onara-modal-open:not(.onara-modal-closing) .posts > a.thumb.onara-active::after {
  visibility: visible !important;
  opacity: 1 !important;
  transition: opacity 0.25s ease !important;
}

/* Smooth fade-out of active thumbnail border / glow when Onara modal closes */
body.onara-modal-closing .posts > a.thumb.onara-active,
body.onara-modal-closing .posts > a.thumb.loaded.onara-active {
  opacity: 1 !important;
  filter: none !important;
  box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent, 0 0 0 0 transparent, 0 0 0 0 transparent !important;
  outline-color: transparent !important;
  border-color: transparent !important;
  z-index: 50 !important;
  position: relative !important;
  scale: 1;
  transition: box-shadow 0.2s cubic-bezier(0.25, 0, 0.4, 1),
              outline-color 0.2s cubic-bezier(0.25, 0, 0.4, 1),
              border-color 0.2s cubic-bezier(0.25, 0, 0.4, 1),
              opacity 0.2s cubic-bezier(0.25, 0, 0.4, 1),
              scale 0.3s cubic-bezier(0.25, 0, 0.4, 1) !important;
}

body.onara-modal-closing .posts > a.thumb.onara-active::after {
  opacity: 0 !important;
  transition: opacity 0.2s cubic-bezier(0.25, 0, 0.4, 1) !important;
}

body.onara-modal-open .posts > a.thumb.loaded,
body.onara-modal-closing .posts > a.thumb.loaded {
  opacity: 1 !important;
  filter: none !important;
  z-index: 50 !important;
  position: relative !important;
}

body.onara-modal-open:not(.onara-modal-closing) #bg,
body.onara-modal-open:not(.onara-modal-closing) #bg.fader-in {
  z-index: 51 !important;
  cursor: pointer !important;
  transition: transform 0.6s cubic-bezier(0.45, 0, 0.2, 1) !important;
  animation: none !important;
  opacity: var(--bg-canvas-opacity, 1.0) !important;
}

body.onara-modal-closing #bg,
body.onara-modal-closing #bg.fader-in,
body.onara-modal-closing #bg.fader-out,
body.onara-modal-closing #bg.fast-fade,
body.onara-modal-open #bg.fader-out {
  z-index: 51 !important;
  cursor: default !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transition: opacity 0.2s cubic-bezier(0.25, 0, 0.4, 1) !important;
}

/* Navbar and right sidebar stay fully visible, sharp, and interactive */
body.onara-modal-open nav.navbar {
  opacity: 1 !important;
  filter: none !important;
  pointer-events: auto !important;
  z-index: 10070 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
}

/* Ensure hamburger dropdown is interactive and above the Onara modal */
body.onara-modal-open nav.navbar .nav-collapse {
  z-index: 10075 !important;
  pointer-events: auto !important;
}

body.onara-modal-open .global-sidebar-right {
  opacity: 1 !important;
  filter: none !important;
  pointer-events: auto !important;
  z-index: 10060 !important;
}

body.onara-modal-open #sidebar-drag-zone {
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 10059 !important;
  top: var(--navbar-h, 50px) !important;
}

body.onara-modal-open .admin-bar {
  z-index: 100080 !important;
  filter: none !important;
}
body.onara-modal-open .admin-bar.open {
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

/* Modal wrapper covers main content area with subtle dark glassmorphism, respecting sidebar */
.onara-modal-wrapper {
  position: fixed !important;
  top: var(--navbar-h, 50px) !important;
  bottom: 0 !important;
  left: 0 !important;
  right: var(--sidebar-w, 300px) !important;
  width: auto !important;
  height: calc(100vh - var(--navbar-h, 50px)) !important;
  z-index: 10050 !important;
  display: none;
  flex-direction: column !important;
  background: rgba(0, 0, 0, var(--onara-bg-opacity, 0.4)) !important;
  backdrop-filter: blur(var(--onara-backdrop-blur, 5px)) saturate(130%) !important;
  -webkit-backdrop-filter: blur(var(--onara-backdrop-blur, 5px)) saturate(130%) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none !important;
  overscroll-behavior-y: auto !important;
  overscroll-behavior-x: contain !important;
  box-sizing: border-box !important;
  opacity: 0;
  cursor: pointer;
  will-change: opacity, backdrop-filter;
  transition: right 0.3s ease-in-out !important;
}

.onara-modal-wrapper::-webkit-scrollbar {
  display: none;
}

/* Static server-load fallback when page is directly visited on an onara item URL */
body.onara-modal-open .onara-modal-wrapper:not(.onara-fade-out):not(.onara-fade-in) {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Silky animated opening */
.onara-modal-wrapper.onara-fade-in {
  display: flex !important;
  animation: onaraModalFadeIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  pointer-events: auto !important;
}

/* Silky animated closing */
.onara-modal-wrapper.onara-fade-out {
  display: flex !important;
  animation: onaraModalFadeOut 0.22s cubic-bezier(0.25, 0, 0.4, 1) forwards !important;
  pointer-events: none !important;
}

/* Sidebar hidden: modal expands to right edge */
body.sidebar-right-hidden .onara-modal-wrapper {
  right: 0 !important;
}

/* Tablet (600px - 999px): sidebar is min(280px, 80vw) */
@media (min-width: 600px) and (max-width: 999px) {
  .onara-modal-wrapper {
    right: min(280px, 80vw) !important;
  }
  body.sidebar-right-hidden .onara-modal-wrapper {
    right: 0 !important;
  }
}

/* Mobile (<= 599px): sidebar is pure overlay, modal uses full width */
@media (max-width: 599px) {
  .onara-modal-wrapper {
    right: 0 !important;
  }
}

@keyframes onaraModalFadeIn {
  0% {
    opacity: 0;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    background: rgba(0, 0, 0, 0);
  }
  100% {
    opacity: 1;
    backdrop-filter: blur(var(--onara-backdrop-blur, 5px)) saturate(130%);
    -webkit-backdrop-filter: blur(var(--onara-backdrop-blur, 5px)) saturate(130%);
    background: rgba(0, 0, 0, var(--onara-bg-opacity, 0.6));
  }
}

@keyframes onaraModalFadeOut {
  0% {
    opacity: 1;
    backdrop-filter: blur(var(--onara-backdrop-blur, 5px)) saturate(130%);
    -webkit-backdrop-filter: blur(var(--onara-backdrop-blur, 5px)) saturate(130%);
    background: rgba(0, 0, 0, var(--onara-bg-opacity, 0.6));
  }
  100% {
    opacity: 0;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    background: rgba(0, 0, 0, 0);
  }
}

.onara-backdrop {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  z-index: 1 !important;
  cursor: pointer;
}

.onara-modal-content {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  min-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex: 1 0 auto !important;
  padding: 20px 0 80px 0 !important;
  box-sizing: border-box !important;
  cursor: pointer;
  will-change: transform, opacity;
}

/* Smooth modal content elevation during entrance & exit */
.onara-modal-wrapper.onara-fade-in .onara-modal-content {
  animation: onaraContentScaleIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.onara-modal-wrapper.onara-fade-out .onara-modal-content {
  animation: onaraContentScaleOut 0.2s cubic-bezier(0.25, 0, 0.4, 1) forwards !important;
}

@keyframes onaraContentScaleIn {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.985);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes onaraContentScaleOut {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
}

/* Keep .blahlol completely static on new item load — never fade in or animate */
.blahlol,
.blahlol *,
#onara-item-mount .blahlol,
#onara-item-mount .blahlol * {
  animation: none !important;
  transition: none !important;
}

.blahlol,
#onara-item-mount .blahlol {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

#onara-item-mount .item-layout-container {
  animation: none !important;
  transform: none !important;
  opacity: 1 !important;
}

/* Modern loading shimmer spinner inside mount */
.onara-mount-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 360px;
  width: 100%;
  color: var(--accent, #99ff00);
  font-size: 2rem;
  opacity: 0;
  animation: onaraMountSpinnerFade 0.25s 0.12s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes onaraMountSpinnerFade {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 0.75; transform: scale(1); }
}

#onara-item-mount {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  cursor: pointer;
}

/* Center the item layout inside modal and make it 100% scrollable */
#onara-modal .item-layout-container,
body.layout-legacy #onara-modal .item-layout-container,
body.layout-modern #onara-modal .item-layout-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  margin: 0 auto !important;
  padding: 0 15px !important;
  box-sizing: border-box !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  cursor: pointer;
}

#onara-modal .item-main-content,
body.layout-legacy #onara-modal .item-layout-container .item-main-content,
body.layout-modern #onara-modal .item-layout-container .item-main-content {
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 850px !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  grid-column: auto !important;
}

#onara-modal .item-main-content::before,
#onara-modal .item-main-content::after {
  display: none !important;
}

#onara-modal .item-main-content > *,
#onara-modal .content,
#onara-modal ._204863,
#onara-modal .item_title,
#onara-modal .item-title,
#onara-modal .metadata,
#onara-modal #comments-container,
#onara-modal .item-sidebar-left,
#onara-modal .media-object,
#onara-modal .v0ck {
  cursor: default;
}

/* Clickables keep the pointer. :is() takes its most specific argument (a[href]), so this outranks the
   `cursor: default` block above, including for clickables that are direct children of .item-main-content */
#onara-modal :is(a, a[href], button, .btn, [role="button"], label, .rating-tag, .sidebar-tag,
  .iconset, .mobile-scroll-to-top, .danmaku-marker, summary, select) {
  cursor: pointer;
}

#onara-modal :is(button, .btn, [role="button"]):disabled {
  cursor: not-allowed;
}

#onara-modal input,
#onara-modal textarea,
#onara-modal [contenteditable="true"] {
  cursor: text;
}

#onara-modal .item-main-content > * {
  width: 100% !important;
  max-width: 800px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#onara-modal .content.slide-next,
#onara-modal .content.slide-prev,
#onara-modal ._204863.slide-next,
#onara-modal ._204863.slide-prev,
#onara-modal .item_title.slide-next,
#onara-modal .item_title.slide-prev,
#onara-modal .item-title.slide-next,
#onara-modal .item-title.slide-prev,
#onara-modal .content:not(.slide-out-left):not(.slide-out-right):not(.fade-out-zoom),
#onara-modal ._204863:not(.slide-out-left):not(.slide-out-right):not(.fade-out-zoom),
#onara-modal .item_title:not(.slide-out-left):not(.slide-out-right):not(.fade-out-zoom),
#onara-modal .item-title:not(.slide-out-left):not(.slide-out-right):not(.fade-out-zoom) {
  animation: contentFadeInZoom 0.32s cubic-bezier(0.16, 1, 0.3, 1) both !important;
  will-change: transform, opacity;
}

#onara-modal .content.slide-out-left,
#onara-modal .content.slide-out-right,
#onara-modal ._204863.slide-out-left,
#onara-modal ._204863.slide-out-right,
#onara-modal .item_title.slide-out-left,
#onara-modal .item_title.slide-out-right,
#onara-modal .item-title.slide-out-left,
#onara-modal .item-title.slide-out-right,
#onara-modal .content.fade-out-zoom,
#onara-modal ._204863.fade-out-zoom,
#onara-modal .item_title.fade-out-zoom,
#onara-modal .item-title.fade-out-zoom {
  animation: contentFadeOutZoom 0.18s cubic-bezier(0.3, 0, 0.8, 1) forwards !important;
  pointer-events: none;
  will-change: transform, opacity;
}

#onara-modal .item-main-content .metadata {
  width: 100% !important;
  max-width: 600px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#onara-modal #comments-container {
  display: flex !important;
  flex-direction: column !important;
  flex: 0 0 auto !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  width: 100% !important;
  max-width: 600px !important;
}

/* Modern layout: left sidebar flows below media inside modal */
body.layout-modern #onara-modal .item-sidebar-left {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 600px !important;
  height: auto !important;
  max-height: none !important;
  position: static !important;
  order: 2 !important;
  margin: 20px auto 0 auto !important;
  border-right: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.layout-modern #onara-modal .item-main-content {
  order: 1 !important;
}

/* Auxiliary modals, overlays, and dialogs MUST open in front of Onara modal and fixed bars */
body.onara-modal-open .modal-overlay,
body.onara-modal-open .image-modal-overlay,
body.onara-modal-open .dm-modal-overlay,
body.onara-modal-open .swal2-container,
body.onara-modal-open .modal-backdrop,
body.onara-modal-open .modal,
body.onara-modal-open #image-modal,
body.onara-modal-open #report-modal,
body.onara-modal-open #info-modal,
body.onara-modal-open #visibility-modal,
body.onara-modal-open #halls-modal,
body.onara-modal-open #mod-action-modal,
body.onara-modal-open #warning-modal,
body.onara-modal-open #content-warning-modal,
body.onara-modal-open #login-modal,
body.onara-modal-open #register-modal,
body.onara-modal-open #shortcuts-modal,
body.onara-modal-open #excluded-tags-overlay,
body.onara-modal-open #search-overlay,
body.onara-modal-open #upload-drag-modal,
body.onara-modal-open #rethumb-capture-modal,
body.onara-modal-open #gchat-img-modal {
  z-index: 100100 !important;
}

/* Toast and flash notifications must always float in front of Onara modal and all overlays */
#f0ck-flash-container,
#flash-container,
div#flash,
#share-toast,
.emoji-fav-toast,
.flash-message,
.toast {
  z-index: 100200 !important;
}

#onara-modal:fullscreen {
  overflow: hidden !important;
  background: #000 !important;
}

#onara-modal:fullscreen .onara-backdrop {
  display: none !important;
}

#onara-modal:fullscreen .onara-modal-content {
  overflow: hidden !important;
  padding: 0 !important;
}

/* ==========================================================================
   Bulk Item Selection & Operations (Themed: No rounded corners, no box shadows)
   ========================================================================== */

/* Square checkbox indicator on thumbnails */
.thumb-select-check {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  border-radius: 0 !important;
  background: var(--bg, #111);
  border: 1px solid var(--accent, #9f0);
  color: var(--accent, #9f0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-family: var(--font, monospace);
  z-index: 25;
  pointer-events: none;
  opacity: 0;
  box-shadow: none !important;
  transition: opacity 0.15s ease;
}

.bulk-selection-active .thumb .thumb-select-check {
  opacity: 0.85;
}

.thumb.bulk-selected .thumb-select-check {
  opacity: 1 !important;
  background: var(--accent, #9f0) !important;
  color: var(--black, #000) !important;
  font-weight: bold !important;
}

/* Selected thumbnail outline: theme-colored border, no shadows, no transform */
.thumb.bulk-selected {
  outline: 2px solid var(--accent, #9f0) !important;
  outline-offset: -2px !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
}

/* Long-press holding indicator: dashed border */
.thumb.thumb-longpressing {
  outline: 1px dashed var(--accent, #9f0) !important;
  outline-offset: -1px !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Floating Bulk Action Bar (fixed to bottom, themed border and background) */
#bulk-action-bar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--dropdown-bg, #232323) !important;
  border-top: 2px solid var(--accent, #9f0) !important;
  border-left: 1px solid var(--accent, #9f0) !important;
  border-right: 1px solid var(--accent, #9f0) !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  padding: 6px 12px;
  box-shadow: none !important;
  opacity: 0;
  /* Hidden = really hidden: no Tab stops or screen-reader access to its buttons. visibility flips only
     after the slide/fade out has finished (0.2s delay), and immediately when showing (see .visible) */
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.2s ease, opacity 0.2s ease, visibility 0s linear 0.2s;
  user-select: none;
  font-family: var(--font, monospace) !important;
  max-width: 100vw;
}

#bulk-action-bar.visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: transform 0.2s ease, opacity 0.2s ease, visibility 0s linear 0s;
}

.bulk-count-box {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: bold;
  font-size: 12px;
  color: var(--white, #fff);
  padding-right: 10px;
  border-right: 1px solid var(--nav-border-color, #444);
  white-space: nowrap;
  font-family: var(--font, monospace);
}

.bulk-count-num {
  background: var(--bg, #111);
  color: var(--accent, #9f0);
  border: 1px solid var(--accent, #9f0);
  border-radius: 0 !important;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: bold;
  box-shadow: none !important;
}

.bulk-actions-group {
  /* Equal columns: every action button is exactly as wide as the widest one */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: stretch;
  gap: 6px;
  /* Sized to its content so 1fr resolves to the widest button, not to a share of the bar */
  width: max-content;
}

/* All bar buttons: style guide (square, flat, theme colours, no glow), one size, one look.
   Delete / Add Tags / close used to have their own filled or red variants; they are plain now. */
.bulk-btn,
.bulk-btn-primary,
.bulk-btn-danger,
.bulk-btn-close {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 30px;
  margin: 0;
  padding: 0 10px;
  border-radius: 0 !important;
  font-size: 12px;
  font-weight: normal !important;
  font-family: var(--font, monospace) !important;
  line-height: 1;
  border: 1px solid var(--nav-border-color, #444) !important;
  background: var(--navigation-links-bg, var(--nav-bg, #2b2b2b)) !important;
  color: var(--white, #fff) !important;
  cursor: pointer;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  transform: none !important;
  transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  white-space: nowrap;
}

.bulk-btn:hover,
.bulk-btn:focus-visible,
.bulk-dropdown-wrap:has(.bulk-dropdown-menu.show) > .bulk-btn {
  background: var(--nav-link-hover-bg, #333) !important;
  color: var(--accent, #9f0) !important;
  border-color: var(--accent, #9f0) !important;
}

.bulk-btn:focus-visible {
  outline: 2px solid var(--accent, #9f0);
  outline-offset: 1px;
}

.bulk-btn:active {
  opacity: 0.75;
}

/* Close (x) sits outside the equal-width group: same height and look, square */
.bulk-btn-close {
  width: 30px;
  flex: 0 0 30px;
  padding: 0;
  margin-right: 4px;
}

.bulk-btn .bulk-chevron {
  font-size: 10px;
}

.bulk-dropdown-wrap {
  display: flex;
}

/* Bulk rating dropdown wrapper */
.bulk-dropdown-wrap {
  position: relative;
}

.bulk-dropdown-menu {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  background: var(--dropdown-bg, #232323);
  border: 1px solid var(--accent, #9f0);
  border-radius: 0 !important;
  padding: 4px;
  display: none;
  flex-direction: column;
  gap: 2px;
  box-shadow: none !important;
  min-width: 120px;
  z-index: 100000;
  font-family: var(--font, monospace);
}

.bulk-dropdown-menu.show {
  display: flex;
}

.bulk-menu-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 0 !important;
  font-size: 11.5px;
  font-family: var(--font, monospace);
  background: transparent;
  border: none;
  color: var(--white, #fff);
  cursor: pointer;
  text-align: left;
  box-shadow: none !important;
  transition: background 0.1s ease, color 0.1s ease;
  white-space: nowrap;
}

.bulk-menu-item:hover {
  background: var(--nav-link-hover-bg, #333);
  color: var(--accent, #9f0);
}

.bulk-menu-item.rating-sfw {
  border-left: 3px solid var(--badge-sfw, #02500b);
}
.bulk-menu-item.rating-sfw:hover {
  background: var(--badge-sfw, #02500b);
  color: #fff;
}

.bulk-menu-item.rating-nsfw {
  border-left: 3px solid var(--badge-nsfw, #E10DC3);
}
.bulk-menu-item.rating-nsfw:hover {
  background: var(--badge-nsfw, #E10DC3);
  color: #fff;
}

.bulk-menu-item.rating-nsfl {
  border-left: 3px solid var(--badge-nsfl, #660000);
}
.bulk-menu-item.rating-nsfl:hover {
  background: var(--badge-nsfl, #660000);
  color: #fff;
}

/* Bulk Modals (Add Tags / Remove Tags) */
.bulk-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 100300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.bulk-modal-overlay.visible {
  display: flex;
}

.bulk-modal-card {
  background: var(--bg, #111);
  border: 1px solid var(--accent, #9f0);
  border-radius: 0 !important;
  padding: 18px;
  width: 100%;
  max-width: 440px;
  box-shadow: none !important;
  color: var(--white, #fff);
  font-family: var(--font, monospace);
  position: relative;
}

.bulk-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--nav-border-color, #444);
  padding-bottom: 8px;
}

.bulk-modal-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: bold;
  font-family: var(--font, monospace);
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--accent, #9f0);
}

.bulk-modal-close {
  background: none;
  border: none;
  color: var(--white, #fff);
  font-size: 16px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 0 !important;
  font-family: var(--font, monospace);
}

.bulk-modal-close:hover {
  color: #ff4444;
}

.bulk-modal-desc {
  font-size: 12px;
  color: #aaa;
  margin-bottom: 12px;
  line-height: 1.4;
  font-family: var(--font, monospace);
}

.bulk-tag-chips-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 10px;
  min-height: 24px;
}

.bulk-tag-chip {
  background: var(--badge-bg, #171717);
  border: 1px solid var(--accent, #9f0);
  color: var(--white, #fff);
  border-radius: 0 !important;
  padding: 2px 8px;
  font-size: 11px;
  font-family: var(--font, monospace);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: none !important;
}

.bulk-tag-chip .remove-chip-btn {
  cursor: pointer;
  opacity: 0.7;
  font-size: 10px;
}

.bulk-tag-chip .remove-chip-btn:hover {
  opacity: 1;
  color: #ff4444;
}

.bulk-input-container {
  position: relative;
  margin-bottom: 14px;
}

.bulk-text-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--nav-border-color, #444);
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 8px 10px;
  color: var(--white, #fff);
  font-size: 13px;
  font-family: var(--font, monospace);
  outline: none;
  box-sizing: border-box;
}

.bulk-text-input:focus {
  border-color: var(--accent, #9f0);
  outline: none;
  box-shadow: none !important;
}

.bulk-tag-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--dropdown-bg, #232323);
  border: 1px solid var(--accent, #9f0);
  border-radius: 0 !important;
  max-height: 160px;
  overflow-y: auto;
  z-index: 100310;
  box-shadow: none !important;
  display: none;
  font-family: var(--font, monospace);
}

.bulk-suggestion-item {
  padding: 6px 10px;
  font-size: 12px;
  font-family: var(--font, monospace);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--white, #fff);
  border-radius: 0 !important;
}

.bulk-suggestion-item:hover,
.bulk-suggestion-item.highlighted {
  background: var(--accent, #9f0);
  color: var(--black, #000);
  font-weight: bold;
}

.bulk-suggestion-count {
  font-size: 10px;
  opacity: 0.7;
}

.bulk-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.bulk-modal-btn {
  padding: 6px 14px;
  border-radius: 0 !important;
  font-size: 12px;
  font-family: var(--font, monospace) !important;
  cursor: pointer;
  border: 1px solid var(--nav-border-color, #444);
  background: var(--nav-bg, #2b2b2b);
  color: var(--white, #fff);
  box-shadow: none !important;
  transition: all 0.12s ease;
}

.bulk-modal-btn:hover {
  background: var(--nav-link-hover-bg, #333);
  color: var(--accent, #9f0);
  border-color: var(--accent, #9f0);
}

.bulk-modal-btn-submit {
  background: var(--accent, #9f0) !important;
  color: var(--black, #000) !important;
  font-weight: bold !important;
  border: 1px solid var(--accent, #9f0) !important;
  box-shadow: none !important;
}

.bulk-modal-btn-submit:hover {
  filter: brightness(1.15);
}

.bulk-modal-btn-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: none;
}

/* Responsive tweaks for mobile devices */
@media (max-width: 768px) {
  #bulk-action-bar {
    width: 100vw;
    padding: 6px 8px;
    justify-content: space-between;
    gap: 4px;
  }

  .bulk-count-box {
    padding-right: 6px;
    font-size: 11.5px;
    gap: 4px;
  }

  /* Phones: icon-only buttons, still all the same size */
  .bulk-btn {
    padding: 0 8px;
    gap: 3px;
  }

  .bulk-btn > span,
  .bulk-btn .bulk-chevron {
    display: none;
  }

  .bulk-modal-card {
    padding: 14px;
  }
}

/* ==========================================================================
   ALBUM GALLERY & INDICATOR STYLES
   ========================================================================== */

.album-indicator {
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.65em;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.4;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.album-indicator i {
  font-size: 0.85em;
  color: var(--accent);
}

.album-gallery-container {
  position: relative;
  overflow: hidden;
  max-width: 100%;
  box-sizing: border-box;
}

.album-active-image {
  transition: opacity 0.18s ease;
}

.album-img-fade {
  animation: albumFadeIn 0.22s ease-out;
}

@keyframes albumFadeIn {
  from {
    opacity: 0.4;
    transform: scale(0.99);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.album-controls-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 20;
}

.album-btn {
  background: none;
  border: none;
  color: var(--accent);
  pointer-events: auto;
  opacity: 0.5;
  cursor: pointer;
}

.album-btn i {
  font-size: 1.1rem;
  transition: transform 0.15s ease;
}

.album-btn:hover {
  opacity: 1;
  color: var(--accent);
}

.album-thumbnails-strip {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  max-width: calc(100% - 32px);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(14, 14, 18, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 12px;
  z-index: 22;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior: contain;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  scrollbar-width: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  scroll-behavior: smooth;
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.album-thumbnails-strip.is-dragging {
  cursor: grabbing !important;
  scroll-behavior: auto !important;
}

.album-thumb-item {
  cursor: pointer;
}

.album-thumb-item img {
  -webkit-user-drag: none;
  user-select: none;
}

/* Audio Track Info Badge (Artist & Song Title on top-left) */
.audio-track-info-badge {
  position: absolute;
  top: 5px;
  left: 10px;
  text-align: left;
  z-index: 25;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.audio-track-info-badge.is-visible {
  opacity: 1;
}

.audio-track-info-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  min-width: 0;
  line-height: 1.25;
}

.audio-track-artist {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  align-self: flex-start;
}

.audio-track-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  text-align: left;
  align-self: flex-start;
}

@media (hover: hover) {
  .album-gallery-container:hover .album-thumbnails-strip,
  .album-gallery-container:focus-within .album-thumbnails-strip {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
}

.album-gallery-container.v0ck_hover .album-thumbnails-strip,
.album-gallery-container.strip-peek .album-thumbnails-strip,
.album-gallery-container:has(.v0ck.v0ck_hover) .album-thumbnails-strip,
.album-thumbnails-strip.is-visible,
.album-thumbnails-strip.strip-peek {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.album-thumbnails-strip::-webkit-scrollbar {
  display: none;
}

.album-video-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #000;
}

.album-audio-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}

.album-gallery-container.is-video-active .album-thumbnails-strip,
.album-gallery-container.is-audio-active .album-thumbnails-strip {
  /* Follows the player controls: lifted above them only while they are shown (.v0ck_hover), back
     down with them when they auto-hide, on the same 0.3s timing as the controls' slide */
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), bottom 0.3s ease;
}

.album-gallery-container.is-video-active:has(.v0ck.v0ck_hover) .album-thumbnails-strip,
.album-gallery-container.is-audio-active:has(.v0ck.v0ck_hover) .album-thumbnails-strip {
  bottom: 58px;
}

/* YouTube controls occupy ~56px at the bottom — lift strip above them */
.album-gallery-container.is-youtube-active .album-thumbnails-strip {
  bottom: 62px;
}

.album-gallery-container.is-video-active .image-modal-btn,
.album-gallery-container.is-audio-active .image-modal-btn {
  display: none !important;
}

@media (max-width: 768px) {
  .album-gallery-container.is-video-active:has(.v0ck.v0ck_hover) .album-thumbnails-strip,
  .album-gallery-container.is-audio-active:has(.v0ck.v0ck_hover) .album-thumbnails-strip {
    bottom: 48px;
  }
  .album-gallery-container.is-youtube-active .album-thumbnails-strip {
    bottom: 52px;
  }
}

.album-thumb-item {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid transparent;
  opacity: 0.6;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  margin: 0;
  background: #000;
  touch-action: pan-x;
  user-select: none;
  -webkit-user-select: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.album-thumb-item:hover {
  opacity: 0.9;
  transform: scale(1.06);
}

.album-thumb-item.active {
  border-color: var(--accent);
  opacity: 1;
  transform: scale(1.1);
  box-shadow: 0 0 12px rgba(var(--accent-rgb, 31, 178, 176), 0.6);
}

.album-thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.album-thumb-mime-badge {
  position: absolute;
  bottom: 2px;
  right: 2px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 0.62rem;
  padding: 1px 3px;
  border-radius: 3px;
  pointer-events: none;
  line-height: 1;
}

.album-media-stage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.album-stage-link {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#f0ck-album-video {
  max-width: 100%;
  max-height: 100%;
  border-radius: 4px;
}

@media (max-width: 768px) {
  .album-btn {
    width: 38px;
    height: 38px;
  }
  .album-btn i {
    font-size: 0.95rem;
  }
  .album-controls-overlay {
    padding: 0 8px;
  }
  .album-thumb-item {
    width: 36px;
    height: 36px;
  }
  .album-thumbnails-strip {
    bottom: 8px;
    padding: 4px 8px;
    gap: 6px;
    max-width: calc(100% - 16px);
    box-sizing: border-box;
  }
  .audio-track-info-badge {
    top: 8px;
    left: 8px;
    padding: 4px 8px;
    gap: 6px;
    max-width: calc(100% - 70px);
  }
  .audio-track-title {
    font-size: 0.78rem;
  }
  .audio-track-artist {
    font-size: 0.68rem;
  }
}

/* Chan Rehost Details Modal / Popup */
.chan-rehost-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: transparent;
  backdrop-filter: none;
  z-index: 100200;
  display: block;
}

.chan-rehost-modal .chan-rehost-modal-content,
.chan-rehost-modal.chan-rehost-popup-mode .chan-rehost-modal-content {
  position: fixed !important;
  width: 270px !important;
  max-width: calc(100vw - 20px) !important;
  background: #18181b !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
  padding: 10px 12px !important;
  text-align: left !important;
  box-sizing: border-box !important;
  animation: chanRehostPopupIn 0.12s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 100201 !important;
}

@keyframes chanRehostPopupIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(3px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.chan-rehost-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.chan-rehost-popup-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: #d4d4d8;
  display: flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.chan-rehost-popup-title i {
  color: #4ade80;
  font-size: 0.82rem;
}

.chan-rehost-popup-close {
  background: none;
  border: none;
  color: #71717a;
  font-size: 1.15rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: color 0.15s;
}

.chan-rehost-popup-close:hover {
  color: #fff;
}

.chan-rehost-ratings.chan-rehost-popup-ratings {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}

.chan-rehost-ratings.chan-rehost-popup-ratings .chan-rehost-pill {
  flex: 1;
  padding: 6px 2px;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: #a1a1aa;
  cursor: pointer;
  transition: all 0.12s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  white-space: nowrap;
}

.chan-rehost-ratings.chan-rehost-popup-ratings .chan-rehost-pill:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.chan-rehost-popup-actions {
  display: flex;
  gap: 6px;
}

.chan-rehost-popup-save-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #16a34a !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}

.chan-rehost-popup-save-btn:hover {
  background: #15803d !important;
}

.chan-rehost-popup-save-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.chan-rehost-modal-content {
  background: #18181b;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  width: 92%;
  max-width: 480px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7);
  padding: 22px 24px;
  text-align: left;
  box-sizing: border-box;
}
.chan-rehost-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.chan-rehost-modal-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
}
.chan-rehost-modal-post-link {
  font-size: 0.85rem;
  color: #4ade80;
  text-decoration: none;
  font-weight: 600;
  margin-left: 6px;
}
.chan-rehost-modal-post-link:hover {
  text-decoration: underline;
}
.chan-rehost-modal-close {
  background: none;
  border: none;
  color: #888;
  font-size: 1.4rem;
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
}
.chan-rehost-modal-close:hover {
  color: #fff;
}
.chan-rehost-form-group {
  margin-bottom: 16px;
}
.chan-rehost-form-group label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: #aaa;
  margin-bottom: 7px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.chan-rehost-ratings {
  display: flex;
  gap: 8px;
}
.chan-rehost-pill {
  flex: 1;
  padding: 8px 4px;
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: #ccc;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.chan-rehost-pill:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.chan-rehost-pill.active.untagged {
  background: #3f3f46;
  border-color: #71717a;
  color: #fff;
}
.chan-rehost-pill.active.sfw {
  background: #15803d;
  border-color: #22c55e;
  color: #fff;
}
.chan-rehost-pill.active.nsfw {
  background: #b91c1c;
  border-color: #ef4444;
  color: #fff;
}
.chan-rehost-pill.active.nsfl {
  background: #450a0a;
  border-color: #991b1b;
  color: #fca5a5;
}
.chan-rehost-input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 9px 12px;
  color: #fff;
  font-family: inherit;
  font-size: 0.88rem;
  outline: none;
  transition: border-color 0.15s;
}
.chan-rehost-input:focus {
  border-color: #3b82f6;
}
.chan-rehost-textarea {
  resize: vertical;
  min-height: 56px;
}
.chan-rehost-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}
.chan-rehost-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.chan-rehost-edit-btn:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}
/* Tap-to-activate sliders on touch devices (see f0ckm.js): locked sliders let touches through to the page,
   so scrolling over them can't change a value; a tap unlocks one */
html.range-tap-lock input[type="range"]:not(.v0ck input):not(#volume-slider):not([data-no-tap-lock]):not(.range-unlocked) {
  pointer-events: none;
  opacity: 0.7;
}
html.range-tap-lock input[type="range"].range-unlocked {
  opacity: 1;
  outline: 1px solid var(--accent);
  outline-offset: 4px;
}

/* Header close (×) for modals whose header has no other close control; full screen on phones, so it must
   always be visible. Clicks the modal's own Cancel button so closing behaves exactly the same. */
.modal-x {
  position: absolute; top: 12px; right: 12px; z-index: 1;
  width: 36px; height: 36px; margin: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 0 !important;
  color: var(--text-color, #fff); font-size: 1.6em; line-height: 1; cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.modal-x:hover { color: var(--accent); border-color: var(--accent); }

/* Guest comment box (comments.js renderGuestInput): looks exactly like the real input, but inert.
   Clicks fall through to the wrapper, which opens the login modal. */
.comment-input.is-guest { cursor: pointer; }
.comment-input.is-guest textarea,
.comment-input.is-guest .submit-comment {
  pointer-events: none;
  user-select: none;
}

a#nav-upload-link {
    user-select: none;
}
/* Background toggle (l key / player button): the fade out matches the 1.5s fade in instead of the quick
   0.22s navigation fade-out. bg-toggle-fade is set by toggleBackground() while the background is off. */
#bg.fader-out.bg-toggle-fade,
body.onara-modal-open #bg.bg-toggle-fade:is(.fader-in, .fader-out) {
  transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.45, 0, 0.2, 1) !important;
}

/* ── Album thumbnail strip: style guide (square, flat, theme colours, no glow) ──
   Same look as the bulk bar / tuner: theme panel background, nav border, accent for state. No blur,
   no shadows, no hover/active scaling (the active thumb is marked by its accent border instead).
   Positioning, show/hide and the mobile sizes are left to the rules above. */
.album-thumbnails-strip,
.album-thumb-item,
.album-thumb-mime-badge {
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.album-thumbnails-strip {
  background: var(--dropdown-bg, #232323);
  border: 1px solid var(--nav-border-color, rgba(255, 255, 255, 0.15));
  padding: 4px;
  gap: 4px;
}

.album-thumb-item {
  border: 2px solid var(--nav-border-color, rgba(255, 255, 255, 0.15));
  opacity: 0.55;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}

.album-thumb-item:hover,
.album-thumb-item:focus-visible {
  opacity: 0.9;
  transform: none;
}

.album-thumb-item.active {
  opacity: 1;
  border-color: var(--accent, #9f0);
  transform: none;
}

.album-thumb-item:focus-visible {
  outline: 2px solid var(--accent, #9f0);
  outline-offset: 1px;
}

.album-thumb-mime-badge {
  background: var(--bg, #111);
  color: var(--white, #fff);
  border: 1px solid var(--nav-border-color, rgba(255, 255, 255, 0.15));
  bottom: 0;
  right: 0;
}

/* Dragging the album strip: grabbing cursor everywhere until the mouse is released (the thumbnails'
   own pointer cursor would otherwise win, and leaving the strip would drop back to the page cursor) */
html.album-strip-dragging,
html.album-strip-dragging * {
  cursor: grabbing !important;
  user-select: none !important;
}

/* Legacy comment slide (comments.js slideLegacyComments): while it runs, the container's height comes
   from --comments-slide-h (animated) and it clips its content, so the comments disappear exactly at its
   top edge, right under the .blahlol box. !important + the extra class outrank layouts that pin the
   container (Onara: height: auto !important; overflow: visible !important). Registered so the height
   animates smoothly instead of jumping. */
@property --comments-slide-h {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

#comments-container.is-comments-sliding,
#onara-modal #comments-container.is-comments-sliding {
  height: var(--comments-slide-h) !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  flex: 0 0 auto !important;
}

/* Legacy .blahlol meta row (infobox off): ID / user / OC badge on the left, time (+ expiry) on the right */
.blahlol-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 2px 6px;
}

/* .blahlol hands down a 32px line-height (the time link has its own 28px): use the tags' 1.4 so the
   row is as compact as the tag row below it */
.blahlol-meta-row,
.blahlol-meta-row * {
  line-height: 1.4;
}

.blahlol-meta-row > .blahlol-id-badge {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}

.blahlol-meta-row > .blahlol-meta-right {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

/* Meta row: the time (smaller font) gets exactly the same box height as the user badge instead of a
   line box from its own font size; the text is centred inside it */
.blahlol-meta-row > .blahlol-id-badge,
.blahlol-meta-row > .blahlol-meta-right {
  box-sizing: border-box;
  height: 1.4em;
}

.blahlol-meta-right > .badge,
.blahlol-meta-right .timestamp-link,
.blahlol-meta-right .timeago {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  height: 100%;
}

/* Magnetic thumbnail hover (f0ckm.js): one ring per grid glides between thumbnails with a slight spring
   overshoot; the hovered thumb leans toward the cursor (--pull-x/--pull-y). Flat 1px ring, no glow.
   Transform/translate only, so it stays on the compositor. */
div.posts > .thumb-magnet {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  z-index: 3;
  pointer-events: none;
  box-shadow: 0 0 0 1px var(--white);
  opacity: 0;
  will-change: transform;
  transition:
    transform 0.32s cubic-bezier(0.22, 1.25, 0.36, 1),
    width 0.32s cubic-bezier(0.22, 1.25, 0.36, 1),
    height 0.32s cubic-bezier(0.22, 1.25, 0.36, 1),
    opacity 0.15s ease;
}

div.posts > .thumb-magnet.is-on {
  opacity: 1;
}

div.posts > .thumb-magnet.no-glide {
  transition: opacity 0.15s ease;
}

/* The thumbnail the ring is on (mouse or keyboard) drops its own hover/focus/touch-active shadow, so
   only the gliding ring shows; a plain touch tap without the ring keeps its own highlight */
div.posts.has-thumb-magnet > a.magnet-target:not(.notif-item) {
  box-shadow: none;
}

div.posts.has-thumb-magnet > a.thumb:not(.notif-item) {
  translate: var(--pull-x, 0px) var(--pull-y, 0px);
  transition: box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              outline-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              translate 0.3s cubic-bezier(0.22, 1.25, 0.36, 1);
}

/* Rubber-band thumbnail drag (f0ckm.js): follows the mouse 1:1 while held (no translate transition),
   then springs back on release with the regular translate transition, a bit slower and bouncier */
div.posts.has-thumb-magnet > a.thumb.thumb-dragging:not(.notif-item),
div.posts > a.thumb.thumb-dragging:not(.notif-item) {
  translate: var(--pull-x, 0px) var(--pull-y, 0px);
  transition: box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: 4;
}

div.posts > a.thumb:not(.notif-item):not(.thumb-dragging) {
  translate: var(--pull-x, 0px) var(--pull-y, 0px);
}

div.posts > a.thumb.thumb-returning:not(.notif-item) {
  transition: box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              outline-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              translate 0.5s cubic-bezier(0.22, 1.45, 0.36, 1);
}

div.posts > .thumb-magnet.is-dragging {
  transition: opacity 0.15s ease;
}

html.thumb-drag-active,
html.thumb-drag-active * {
  cursor: grabbing !important;
  user-select: none !important;
}

div.posts > .thumb-magnet.is-returning {
  transition:
    transform 0.5s cubic-bezier(0.22, 1.45, 0.36, 1),
    opacity 0.15s ease;
}

/* ── Laser cursor (laser-cursor.js) ──
   Canvas above everything that never intercepts the mouse. While it is on, the native cursor is hidden
   on every element and pseudo-element, so it never shows; the laser draws its own version of whatever
   cursor the element would have (pointer, text, resize, ...). Each :not(#\#) counts as one ID, so the
   triple :not() outranks every `cursor: ... !important` rule on the site, including ID-based ones
   (Onara's `body.onara-modal-open:not(...) #bg.fader-in { cursor: pointer !important }` beat a
   single one: the hand showed in the free space around the item).
   [data-laser-probe] is set for an instant by the script to read the cursor an element would show. */
#laser-cursor-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2147483647;
}

html.laser-cursor-on:not(#\#):not(#\#):not(#\#):not([data-laser-probe]),
html.laser-cursor-on :not(#\#):not(#\#):not(#\#):not([data-laser-probe]),
html.laser-cursor-on :not(#\#):not(#\#):not(#\#):not([data-laser-probe])::before,
html.laser-cursor-on :not(#\#):not(#\#):not(#\#):not([data-laser-probe])::after {
  cursor: none !important;
}