/* =====================================================
   ModernTheme — NzbPlanet  (single stylesheet, no base CSS)
   =====================================================

   CODING STANDARDS — READ BEFORE EDITING
   ───────────────────────────────────────
   BREAKPOINTS (only these two are allowed):
     Mobile:       @media (max-width: 767px)   ← phones, narrow tablets
     Extra-small:  @media (max-width: 480px)   ← only for very tight adjustments
   NEVER use 600px, 640px, 900px, 1024px, or any other width.

   RESPONSIVE CSS LOCATION:
     All @media blocks MUST go at the very bottom of this file
     (after all base styles), in descending breakpoint order:
       1. @media (max-width: 1024px)  — sidebar/nav tweaks (if any)
       2. @media (max-width: 767px)   — mobile rules
       3. @media (max-width: 480px)   — extra-small rules
     Never scatter media queries inline with component styles.

   ADDING NEW MOBILE RULES:
     DO NOT create a new @media block. Find the LAST existing
     @media (max-width: 767px) block at the bottom of this file
     and ADD your rule inside it. Same for 480px. One block per
     breakpoint at the bottom — never a new standalone block.

   ALL CSS goes in this file only.
   Never edit the legacy style file or any other CSS file.
   ===================================================== */

/* ── 1. Font ─────────────────────────────────────── */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

/* ── 2. Design Tokens ────────────────────────────── */
:root {
  --font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Light mode surfaces */
  --c-bg: #ffffff;
  --c-surface: #F5F5F3;
  --c-subnav: #f1f5f9;
  --c-border: #e2e8f0;
  --c-border-focus: #0070ff;

  /* Primary — matched to design spec */
  --c-primary: #0070ff;
  --c-primary-hov: #3391ff;
  --c-primary-act: #0056cc;
  --c-primary-dark: #003d99;
  --c-primary-muted: rgba(0, 112, 255, 0.1);

  /* Semantic */
  --c-success: #16c784;
  --c-success-dark: #0fa26a;
  --c-warning: #ffb020;
  --c-danger: #ff3b3b;

  /* Light text */
  --c-heading: #0f172a;
  --c-body: #334155;
  --c-secondary: #475569;
  --c-muted: #64748b;
  --c-disabled: #94a3b8;
  --c-link: #0070ff;
  --c-link-hov: #3391ff;

  --c-sidebar-bg: #ffffff;
  --c-sidebar-text: #334155;
  --c-sidebar-hov: #f1f5f9;

  --c-popular-card-bg: #dff5f5;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;

  --sh-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05);
  --sh-md: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
}

/* ── Dark mode — spec palette ────────────────────── */
[data-theme="dark"] {
  /* Backgrounds (spec: Background → Surface 1 → 2 → 3 → Hover) */
  --c-bg: #0b0f19;
  --c-surface: #111827;
  --c-surface-2: #161b26;
  --c-surface-3: #1f2937;
  --c-surface-hov: #252f3f;
  --c-border: #2d3748;
  --c-border-hov: #3d4656;
  --c-border-focus: #0070ff;

  /* Primary — same brand blue in dark mode */
  --c-primary: #0070ff;
  --c-primary-hov: #3391ff;
  --c-primary-act: #0056cc;
  --c-primary-dark: #003d99;
  --c-primary-muted: rgba(0, 112, 255, 0.15);

  /* Semantic */
  --c-success: #16c784;
  --c-success-dark: #0fa26a;
  --c-warning: #ffb020;
  --c-danger: #ff3b3b;

  /* Dark text */
  --c-heading: #f9fafb;
  --c-body: #d1d5db;
  --c-secondary: #9ca3af;
  --c-muted: #9ca3af;
  --c-disabled: #6b7280;
  --c-link: #3391ff;
  --c-link-hov: #0070ff;

  --c-subnav: #1e293b;
  --c-sidebar-bg: #111827;
  --c-sidebar-text: #d1d5db;
  --c-sidebar-hov: #1f2937;

  --c-popular-card-bg: #1e293b;

  --sh-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --sh-md: 0 4px 16px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* ── 3. Reset ────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: var(--c-body);
  background: #F5F5F3;
}

ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
img {
  max-width: 100%;
  height: auto;
  border: 0;
}
a {
  color: var(--c-link);
  text-decoration: none;
}
a:hover {
  color: var(--c-link-hov);
}

input,
select,
textarea,
button {
  font-family: var(--font);
}
/* jQuery UI overrides font to Verdana and inflates font-size — kill both at the source */
.ui-widget {
  font-family: var(--font) !important;
  font-size: 13px !important;
}
.ui-widget *:not(.fa, .fa-solid) {
  font-family: var(--font) !important;
}

/* ── 4. Typography ───────────────────────────────── */
h1 {
  font-size: 22px;
  font-weight: 500;
  line-height: 36px;
  letter-spacing: -0.03em;
  color: var(--c-heading);
  margin: 0;
}
h2 {
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: -0.02em;
  color: var(--c-heading);
  margin: 0;
}
h3 {
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  color: var(--c-heading);
  margin: 0;
}

th,
table.data th,
table.highlight th {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-muted);
  border-bottom: 1px solid var(--c-border);
  padding: 10px 12px;
  background: var(--c-surface);
  white-space: nowrap;
}

td,
table.data td,
table.highlight td {
  font-size: 11px;
  font-weight: 400;
  line-height: 21px;
  color: var(--c-body);
  padding: 3px 4px;
  border-bottom: 1px solid var(--c-border);
  vertical-align: middle;
}

table.data,
table.highlight {
  font-variant-numeric: tabular-nums;
  border-collapse: collapse;
  width: 100%;
  background: var(--c-surface);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-sm);
}

.hint,
.m_detail,
small {
  font-size: 13px;
  font-weight: 500;
  color: var(--c-muted);
}

/* ── 5. Page Layout ──────────────────────────────── */

/* Full-width header bar — background stretches edge-to-edge */
#statusbar {
  width: 100%;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  box-shadow: var(--sh-sm);
}

/* Inner row constrained to same width as #page so logo aligns with sidebar */
.statusbar-nzb-div {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Centered page container */
#page {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 15px 24px 0;
}

/* CSS Grid: explicit placement so sidebar is always left and content right,
   regardless of DOM order. Extra children (badges div) auto-flow to row 2. */
.contentborder2 {
  border: none;
  background: transparent;
  padding-bottom: 0;
  display: grid;
  grid-template-columns: 210px 1fr;
  grid-template-rows: auto;
  /*gap: 10px;*/
}

#sidebar {
  grid-column: 1;
  grid-row: 1;
  width: 200px;
  padding: 8px 8px 0;
  box-sizing: border-box;
}

#content {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

/* Badges/links div and any other children span full width below the columns */
.contentborder2 > div:not(#content):not(#sidebar) {
  grid-column: 1 / -1;
}
.contentborder2.sidebar-hidden {
  grid-template-columns: 1fr;
}
.contentborder2.sidebar-hidden #content {
  grid-column: 1;
}

.mt-0 {
  margin-top: 0 !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

/* Legacy structural elements hidden by ModernTheme */
#logo {
  display: none;
}
body > hr {
  display: none;
}

/* ═══════════════════════════════════════════════════
   Subnav Zone — two bars that read as one tinted band
   Row 1: #list-nav (Home / Browse / Forum…)
   Row 2: #header   (category tabs + search)
   ═══════════════════════════════════════════════════ */

/* ── Row 1: secondary links — hidden, replaced by sidebar ── */
#list-nav {
  display: none !important;
}
#list-nav_UNUSED {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0 24px;
  height: 36px;
  gap: 0;
  background: var(--c-subnav);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  width: 100%;
  box-sizing: border-box;
}
#list-nav li {
  list-style: none;
}
#list-nav li a {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--c-secondary);
  text-decoration: none;
  white-space: nowrap;
  border-radius: 0;
  transition:
    color 0.12s,
    background 0.12s;
}
#list-nav li a i {
  font-size: 11px;
  opacity: 0.8;
}
#list-nav li a:hover {
  color: var(--c-primary);
  background: rgba(0, 112, 255, 0.07);
}

/* ── Row 2: category nav + search ── */
#header {
  width: 100%;
  background: var(--c-subnav);
  border-bottom: 1px solid var(--c-border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
#menu {
  display: block;
}

#menucontainer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
  height: 40px;
  gap: 12px;
}

/* Category tab links */
#menulink > ul {
  display: flex;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 40px;
  gap: 2px;
}
#menulink > ul > li {
  position: relative;
  display: flex;
  align-items: center;
}
#menulink > ul > li > a {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 40px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-secondary);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition:
    color 0.12s,
    border-color 0.12s,
    background 0.12s;
}
#menulink > ul > li > a i {
  font-size: 12px;
}
/* Desktop chevron on categories that have a submenu */
#menulink > ul > li:has(> ul) > a::after {
  content: "\f078";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 8px;
  opacity: 0.45;
  margin-left: 3px;
  transition:
    transform 0.15s,
    opacity 0.15s;
}
#menulink > ul > li:has(> ul):hover > a::after {
  opacity: 1;
  transform: rotate(180deg);
  color: var(--c-primary);
}

#menulink > ul > li:hover > a,
#menulink > ul > li > a:hover {
  color: var(--c-primary);
  border-bottom-color: var(--c-primary);
  background: rgba(0, 112, 255, 0.05);
}

/* Category dropdowns */
#menulink > ul > li > ul {
  display: none;
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  min-width: 170px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 3000;
  padding: 4px 0;
  list-style: none;
}
#menulink > ul > li > ul::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}
#menulink > ul > li:hover > ul {
  display: block;
}
#menulink > ul > li > ul > li > a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 16px;
  font-size: 13px;
  color: var(--c-body);
  text-decoration: none;
  white-space: nowrap;
  transition:
    background 0.1s,
    color 0.1s;
}
#menulink > ul > li > ul > li > a:hover {
  background: var(--c-sidebar-hov);
  color: var(--c-primary);
}
#menulink > ul > li > ul > li > a > b > u {
  font-weight: 600;
  font-style: normal;
  text-decoration: none;
}

/* ── Mobile nav topbar + flyout (hidden on desktop, shown ≤767px via media query) ── */
.mob-topbar {
  display: none;
  align-items: center;
  justify-content: space-between;
  height: 42px;
  padding: 0 4px;
}
.mob-cat-btn,
.mob-search-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  height: 34px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-secondary);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 20px;
  cursor: pointer;
  white-space: nowrap;
  transition:
    color 0.12s,
    background 0.12s,
    border-color 0.12s;
}
.mob-cat-btn:hover,
.mob-search-btn:hover {
  color: var(--c-primary);
  border-color: var(--c-primary);
  background: var(--c-primary-muted);
}
.mob-cat-btn i,
.mob-search-btn i {
  font-size: 12px;
  color: inherit;
}
.mob-search-btn.mob-search-active {
  color: var(--c-primary);
  background: var(--c-primary-muted);
  border-color: var(--c-primary);
}
.nav-watch-icon {
  padding: 0 10px !important;
}
.nav-hide-desktop {
  display: none !important;
}
.mmenu-mobile-only {
  display: none;
}
.mob-watch-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 260px;
  max-width: 85vw;
  background: var(--c-surface);
  border-right: 1px solid var(--c-border);
  z-index: 1051;
  transform: translateX(-100%);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mob-watch-drawer.mob-open {
  transform: translateX(0);
}
.mob-cat-divider-label {
  padding: 6px 16px 2px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.mob-cat-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1050;
}
.mob-cat-overlay.mob-open {
  display: block;
}

.mob-cat-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 280px;
  max-width: 85vw;
  background: var(--c-surface);
  border-right: 1px solid var(--c-border);
  z-index: 1051;
  transform: translateX(-100%);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mob-cat-drawer.mob-open {
  transform: translateX(0);
}

.mob-cat-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--c-heading);
  border-bottom: 1px solid var(--c-border);
  flex-shrink: 0;
}
.mob-cat-close {
  background: none;
  border: none;
  font-size: 17px;
  color: var(--c-muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  line-height: 1;
}
.mob-cat-close:hover {
  background: var(--c-subnav);
  color: var(--c-body);
}

.mob-cat-body {
  overflow-y: auto;
  flex: 1;
  padding: 6px 0;
  -webkit-overflow-scrolling: touch;
}

.mob-cat-item {
  display: flex;
  align-items: center;
  padding: 5px 16px;
  font-size: 13px;
  color: var(--c-body);
  text-decoration: none;
  gap: 10px;
  cursor: pointer;
}
.mob-cat-item:hover {
  background: var(--c-subnav);
}
.mob-cat-top {
  font-weight: 600;
  color: var(--c-primary);
}

.mob-cat-group {
  margin: 0;
}
.mob-cat-parent-row {
  display: flex;
  align-items: center;
}
.mob-cat-parent-row .mob-cat-parent {
  flex: 1;
}
.mob-cat-toggle {
  background: none;
  border: none;
  padding: 0 12px;
  cursor: pointer;
  color: var(--c-muted);
  line-height: 1;
  height: 100%;
  display: flex;
  align-items: center;
}
.mob-cat-subs {
  display: none;
}
.mob-cat-subs.mob-subs-open {
  display: block;
}
.mob-cat-chev {
  font-size: 10px;
  transition: transform 0.18s;
}

.mob-cat-icon {
  width: 16px;
  text-align: center;
  font-size: 12px;
  color: inherit;
  flex-shrink: 0;
}
.mob-cat-sub {
  padding-left: 36px;
  font-size: 12.5px;
  color: var(--c-secondary);
}

.mob-cat-divider {
  height: 1px;
  background: var(--c-border);
  margin: 6px 0;
}

/* Search form — visual order: [text] [category ▾] [🔍 button] */
#menusearchlink {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
#headsearch_form {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: 3px;
  transition: border-color 0.15s;
  overflow: hidden;
}
#headsearch_form:focus-within {
  border-color: var(--c-primary);
}
/* Reorder: text → select → button (HTML has button first) */
#headsearch {
  order: 1;
}
#headcat {
  order: 2;
}
.gobutton {
  order: 3;
}
#headsearch {
  height: 26px;
  padding: 0 8px;
  width: 160px;
  border: none;
  background: transparent;
  color: var(--c-body);
  font-size: 13px;
  outline: none;
}
#headcat {
  order: 2;
  height: 26px;
  padding: 0 4px;
  border: none;
  border-left: 1px solid var(--c-border);
  border-right: 1px solid var(--c-border);
  background: transparent;
  color: var(--c-secondary);
  font-size: 12px;
  outline: none;
  cursor: pointer;
}
.gobutton {
  display: flex;
}
.gobutton input[type="button"] {
  width: 28px;
  height: 28px;
  background: #4db5ff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  flex-shrink: 0;
}
.gobutton input[type="button"]:hover {
  background-color: var(--c-primary-hov);
}

/* Mobile — list-nav hidden, category bar = scroll strip + full-width search below */

/* ── 6. Header nav ───────────────────────────────── */

/* Flex row: logo left, nav right */
.statusbar-nzb-div {
  display: flex;
  align-items: center;
  height: 64px;
  border: none;
  width: 100%;
}

.hdr-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: auto;
  text-decoration: none;
}

.hdr-logo img {
  height: 72px;
  width: auto;
  display: block;
}

#dropfix {
  flex-shrink: 0;
  float: none;
  width: auto;
}

/* General anchor style inside header — excludes the nav action buttons */
#statusbar a:not(.nav-btn-login):not(.nav-btn-register) {
  color: var(--c-body);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.12s;
}
#statusbar a:not(.nav-btn-login):not(.nav-btn-register):hover {
  color: var(--c-primary);
}

/* Nav list */
.top_navigation {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.top-menu {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.top-menu li {
  list-style: none;
  float: none;
  border: none;
  padding: 0;
  margin: 0;
}
.top-menu > li > a:not(.nav-btn-login):not(.nav-btn-register) {
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-body);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* ── Logged-in nav ────────────────────────── */
.top-menu-loggedin {
  display: flex;
  align-items: center;
  gap: 2px;
}
.top-menu-loggedin .nav-item {
  position: relative;
  list-style: none;
}

.top-menu-loggedin .nav-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-body);
  text-decoration: none;
  border-radius: var(--r-sm);
  white-space: nowrap;
  transition:
    background 0.12s,
    color 0.12s;
  cursor: pointer;
}
.top-menu-loggedin .nav-link:hover {
  background: var(--c-sidebar-hov);
  color: var(--c-primary);
}
.top-menu-loggedin .nav-link i {
  font-size: 13px;
}
.nav-label {
  display: block;
  max-width: 100px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Sidebar toggle button */
.nav-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--c-muted);
  border-radius: var(--r-sm);
  font-size: 15px;
  transition:
    background 0.12s,
    color 0.12s;
}
.nav-icon-btn:hover {
  background: var(--c-sidebar-hov);
  color: var(--c-primary);
}

/* Unread badge */
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #4db5ff;
  color: #fff;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

/* Dropdown chevron */
.nav-caret {
  font-size: 10px !important;
  opacity: 0.55;
  margin-left: 1px;
}

/* Dropdown menu */
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 210px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  z-index: 2000;
  padding: 8px 0 8px;
  list-style: none;
  margin: 0;
}
/* Invisible bridge covers the gap between nav link and dropdown so hover doesn't break */
.nav-dropdown-menu::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}
.nav-dropdown-right {
  left: auto;
  right: 0;
}
.top-menu-loggedin .nav-item:hover > .nav-dropdown-menu {
  display: block;
}
.nav-dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 18px;
  font-size: 13px;
  color: var(--c-body);
  text-decoration: none;
  white-space: nowrap;
  transition:
    background 0.1s,
    color 0.1s;
}
.nav-dropdown-menu a:hover {
  background: var(--c-sidebar-hov);
  color: var(--c-primary);
}
.nav-dropdown-menu i {
  width: 14px;
  font-size: 13px;
  color: var(--c-muted);
  flex-shrink: 0;
}
.nav-dropdown-menu a:hover i {
  color: var(--c-primary);
}
.nav-dropdown-menu li.nav-dropdown-header {
  padding: 12px 18px 6px 18px !important;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-muted);
  display: block;
}
.nav-dropdown-menu li {
  border-bottom: 1px solid var(--c-border);
}
.nav-dropdown-menu li:last-child {
  border-bottom: none;
}
.nav-dropdown-divider {
  height: 1px;
  background: var(--c-border);
  margin: 0;
  border-bottom: none;
}
.nav-dropdown-menu li.nav-dropdown-header {
  border-bottom: none;
}
.nav-logout,
.nav-logout i {
  color: #dc2626 !important;
}

/* Theme toggle button in nav */
.nav-theme-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--c-muted);
  border-radius: var(--r-sm);
  font-size: 16px;
  transition:
    background 0.12s,
    color 0.12s;
}
.nav-theme-btn:hover {
  background: var(--c-sidebar-hov);
  color: var(--c-primary);
}
.nav-theme-btn .fa-sun {
  color: #ffb020;
}
.nav-theme-btn:hover .fa-sun {
  color: #e09900;
}

/* Donate CTA button in main nav */
.nav-donate-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  margin-left: 4px;
  background: linear-gradient(135deg, #38bdf8 0%, #0070ff 100%);
  color: #fff !important;
  font-size: 11px;
  font-weight: 600;
  border-radius: 20px;
  text-decoration: none !important;
  white-space: nowrap;
  transition:
    opacity 0.15s,
    box-shadow 0.15s,
    transform 0.1s;
  box-shadow: 0 2px 8px rgba(56, 189, 248, 0.4);
}
.nav-donate-btn:hover {
  opacity: 0.88;
  box-shadow: 0 4px 14px rgba(56, 189, 248, 0.55);
  transform: translateY(-1px);
  color: #fff !important;
}
.nav-donate-btn i {
  font-size: 13px;
  color: #fff !important;
}

/* Login / Register header buttons — use #statusbar for specificity parity */
#statusbar .nav-btn-login,
#statusbar .nav-btn-register {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 22px;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s;
  line-height: 1.4;
  outline: none;
}

#statusbar .nav-btn-login {
  border: 1.5px solid var(--c-border);
  color: var(--c-body);
  background: transparent;
}
#statusbar .nav-btn-login:hover,
#statusbar .nav-btn-login:focus {
  border-color: var(--c-primary);
  color: var(--c-primary);
}

#statusbar .nav-btn-register {
  background: var(--c-primary);
  color: #fff;
  border: 1.5px solid var(--c-primary);
}
#statusbar .nav-btn-register:hover,
#statusbar .nav-btn-register:focus {
  background: var(--c-primary-hov);
  border-color: var(--c-primary-hov);
  color: #fff;
}

/* ── 7. Sidebar ──────────────────────────────────── */
#sidebar {
  background: var(--c-sidebar-bg);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  border: 1px solid var(--c-border);
  overflow: hidden;
  font-size: 13px;
}

#sidebar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
#sidebar li {
  margin: 0;
  padding: 0;
  border: none;
  background-image: none;
}
#sidebar li li {
  margin: 0;
  padding: 0;
  border: none;
  background-image: none;
}

#sidebar li a,
#sidebar a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  color: var(--c-sidebar-text);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition:
    background 0.15s,
    color 0.15s;
}

#sidebar li a:hover,
#sidebar a:hover {
  background: var(--c-sidebar-hov);
  color: var(--c-primary);
}

/* Active item */
#sidebar li li.active > a {
  background: var(--c-primary-muted);
  color: var(--c-primary);
}

/* Sidebar profile card buttons — override #sidebar a specificity */
#sidebar .sb-view-profile-btn,
#sidebar .sb-view-profile-btn:link,
#sidebar .sb-view-profile-btn:visited {
  background: var(--c-primary) !important;
  color: #fff !important;
  text-decoration: none;
}
#sidebar .sb-view-profile-btn:hover {
  background: var(--c-primary-hov) !important;
  color: #fff !important;
}
#sidebar .sb-upgrade-link {
  background: rgba(255, 176, 32, 0.1) !important;
  color: var(--c-warning) !important;
  border: 1px solid var(--c-warning);
  padding: 5px;
  line-height: 1.2;
}
#sidebar .sb-upgrade-link:hover {
  background: rgba(255, 176, 32, 0.2) !important;
}

/* Sidebar menu links must never have an unwanted coloured background */
#sidebar li.menu_main ul li a,
#sidebar li.menu_recentposts ul li a,
#sidebar li.menu_useful ul li a {
  background: transparent;
}

/* Section headings — sentence case, bold, dark (matches reference) */
#sidebar h2,
#sidebar .menucaption {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-heading);
  padding: 16px 14px 6px;
  margin: 0;
  height: auto;
  background: none;
}

#sidebar h2 font,
#sidebar h2 u {
  color: var(--c-heading);
  text-decoration: none;
}

#sidebar .m_wel {
  font-weight: 600;
  color: var(--c-heading);
}
#sidebar .m_detail {
  color: var(--c-secondary);
}

/* ── 8. Cards ────────────────────────────────────── */
.contentborder {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  padding: 28px 32px;

  color: var(--c-body);
}

/* ── 9. Login Page ───────────────────────────────── */
.login-card {
  padding: 0;
  overflow: hidden;
  width: 100%;
  max-width: none;
  margin: 0;
}

.login-panel {
  display: flex;
  min-height: 440px;
}

.login-form-col {
  flex: 0 0 560px;
  width: 560px;
  padding: 40px 48px;
}

.login-deco-col {
  flex: 1;
  min-width: 200px;
  background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 60%, #e0f2fe 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 20px;
}

.login-globe-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

.otp-card {
  max-width: 480px;
  margin: 0 auto;
  padding: 40px 48px;
}
.otp-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #2563eb;
  margin: 0 auto 20px;
}
.otp-title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--c-heading);
  margin: 0 0 20px;
  text-align: center;
}
.otp-info-notice {
  padding: 10px 14px;
  margin: 0 0 20px;
}
.otp-bottom-notice {
  margin-top: 4px;
}
.login-form-col .btn-login {
  margin-bottom: 5px;
}
.otp-deco-col {
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
}
.otp-deco-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
}
.otp-deco-sub {
  font-size: 14px;
  color: #1e40af;
  margin: 0;
  text-align: center;
  line-height: 1.6;
  font-weight: 500;
}

.login-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--c-heading);
  margin: 0 0 24px;
  text-align: center;
}
.login-subtitle {
  font-size: 14px;
  color: var(--c-muted);
  margin: 0 0 24px;
}

.login-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--r-sm);
  color: #dc2626;
  padding: 12px 16px;
  font-size: 14px;
  margin-bottom: 16px;
  text-align: center;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.login-field {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.lf-icon {
  position: absolute;
  left: 12px;
  color: var(--c-muted);
  display: flex;
  align-items: center;
  pointer-events: none;
  z-index: 1;
  font-size: 15px;
  width: 16px;
  height: 16px;
  justify-content: center;
}

.login-field input[type="text"],
.login-field input[type="password"],
.login-field input[type="email"] {
  width: 100%;
  padding: 12px 42px 12px 40px;
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-sm);
  font-size: 14px;
  color: var(--c-body);
  background: var(--c-surface);
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
  outline: none;
}
.login-field input:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-muted);
}

.lf-eye {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--c-muted);
  padding: 4px;
  display: flex;
  align-items: center;
  transition: color 0.12s;
}
.lf-eye:hover {
  color: var(--c-body);
}

.login-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--c-body);
}
.login-remember input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--c-primary);
  cursor: pointer;
  margin: 0;
}
.login-remember label {
  cursor: pointer;
  margin: 0;
}

.btn-login {
  width: 100%;
  padding: 13px;
  background: var(--c-primary);
  color: #fff;
  border: none;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition:
    background 0.15s,
    box-shadow 0.15s;
  margin-top: 4px;
}
.btn-login:hover {
  background: var(--c-primary-hov);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}
.btn-login-passkey {
  background: #1a4995 !important;
}
.login-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
form .login-actions {
  margin: 0;
}
.btn-action {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  border: 1.5px solid var(--c-primary);
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--c-primary);
  text-decoration: none;
  background: var(--c-surface);
  transition:
    border-color 0.12s,
    color 0.12s,
    background 0.12s;
}
.btn-action:hover {
  background: var(--c-primary);
  color: #fff;
}

/* ── 10. Register Page ───────────────────────────── */
.reg-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--c-heading);
  margin: 0 0 6px;
  text-align: center;
}
.reg-subtitle {
  font-size: 14px;
  color: var(--c-muted);
  margin: 0 0 24px;
  text-align: center;
}

.reg-form {
  display: flex;
  flex-direction: column;
}
.reg-textarea {
  width: 100%;
  min-height: 140px;
  resize: vertical;
  padding: 12px 14px;
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-sm);
  font-size: 14px;
  color: var(--c-body);
  background: var(--c-surface);
  font-family: inherit;
  line-height: 1.5;
  outline: none;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.reg-textarea:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-muted);
}

/* Contact page bottom row: captcha left, button+note right */
.contact-bottom {
  display: flex;
  gap: 24px;
  align-items: center;
  margin-top: 4px;
}
.contact-captcha {
  flex-shrink: 0;
}
.contact-actions {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.contact-actions .btn-login {
  margin-top: 0;
  width: 100%;
}

/* 2-column field grid */
.reg-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 20px;
  margin-bottom: 14px;
}

.reg-field-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.reg-field-full {
}
.reg-optional {
  font-size: 11px;
  font-weight: 400;
  color: var(--c-muted);
}

.reg-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-body);
}
.reg-label em {
  color: var(--c-primary);
  font-style: normal;
}
.reg-hint {
  font-size: 12px;
  color: var(--c-muted);
}
.reg-generate-link {
  color: var(--c-primary);
  font-weight: 500;
}
.reg-generate-link:hover {
  color: var(--c-primary-hov);
}

.reg-success {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: var(--r-sm);
  color: #15803d;
  padding: 12px 16px;
  font-size: 14px;
  margin-bottom: 16px;
  text-align: center;
}
.reg-success-hint {
  font-size: 12px;
  color: #166534;
  margin: 8px 0 0;
}

/* Turnstile captcha */
.reg-captcha {
  text-align: center;
}

/* Agree + submit row */
.reg-bottom {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  margin-top: 4px;
}
.reg-agree {
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--c-body);
  margin-bottom: 0;
}
.reg-agree input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--c-primary);
  cursor: pointer;
  margin: 2px 0 0;
  flex-shrink: 0;
  margin-left: 15px;
}
.reg-agree label {
  cursor: pointer;
  line-height: 1.5;
}
.reg-rules-link {
  font-weight: 600;
}
.reg-bottom .btn-login {
  width: auto;
  padding: 13px 28px;
  margin-top: 0;
  white-space: nowrap;
}

.reg-footer-note {
  font-size: 12px;
  color: var(--c-muted);
  text-align: center;
  margin: 14px 0 0;
}

/* Stack to single column on narrow screens */

/* Rules modal */
.reg-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.reg-modal {
  background: var(--c-surface);
  border-radius: var(--r-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  max-width: 650px;
  width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.reg-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--c-border);
  flex-shrink: 0;
}
.reg-modal-header h3 {
  margin: 0;
  font-size: 17px;
}

.reg-modal-close {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--c-muted);
  padding: 2px 6px;
  border-radius: var(--r-sm);
  transition:
    color 0.12s,
    background 0.12s;
}
.reg-modal-close:hover {
  color: var(--c-body);
  background: var(--c-sidebar-hov);
}

.reg-modal-body {
  padding: 20px 24px;
  overflow-y: auto;
  font-size: 13px;
  color: var(--c-body);
  line-height: 1.7;
}
.reg-modal-body p {
  margin: 0 0 10px;
}
.reg-modal-body ul {
  margin: 0 0 14px;
  padding-left: 20px;
  list-style: disc;
}
.reg-modal-body ul li {
  margin-bottom: 4px;
}

/* ── 10.5 verify2fa Page ───────────────────────────── */

.2fa-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--c-heading);
  margin: 0 0 6px;
  text-align: center;
}

/* ── 11. Buttons (general) ───────────────────────── */
input[type="submit"],
input[type="button"],
button:not(.nav-icon-btn):not(.nav-theme-btn):not(.lf-eye):not(.reg-modal-close):not([class]),
.btn {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 400;
  padding: 10px 20px;
  border-radius: var(--r-sm);
  cursor: pointer;
  border: none;
  outline: none;
  background: var(--c-primary);
  color: #fff;
  transition:
    background 0.12s,
    box-shadow 0.12s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  white-space: nowrap;
}
input[type="submit"]:hover,
input[type="button"]:hover,
button:not(.nav-icon-btn):not(.nav-theme-btn):not(.lf-eye):not(.reg-modal-close):not([class]):hover,
.btn:hover {
  background: var(--c-primary-hov);
}

/* ── 11b. Sidebar profile card ───────────────────── */
.sb-profile-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 10px 10px 10px;
  margin-bottom: 5px;
}
.sb-profile-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.sb-avatar-wrap {
  flex-shrink: 0;
}
.sb-avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--c-border);
  display: block;
}
.sb-avatar-initials {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--c-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  flex-shrink: 0;
}
.sb-user-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.sb-username {
  font-size: 15px;
  font-weight: 500;
  color: var(--c-heading);
  max-width: 130px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  width: fit-content;
  border: 1.5px solid var(--c-primary);
  color: var(--c-primary);
}
.sb-role-admin {
  border-color: #0070ff;
  color: #0070ff;
}
.sb-role-moderator {
  border-color: #16c784;
  color: #16c784;
}
.sb-role-vip {
  border-color: #ffb020;
  color: #ffb020;
}
.sb-role-platinum {
  border-color: #a855f7;
  color: #a855f7;
}
.sb-role-editor {
  border-color: #14b8a6;
  color: #14b8a6;
}
.sb-role-lult {
  border-color: #f97316;
  color: #f97316;
}
.sb-divider {
  height: 1px;
  background: var(--c-border);
  margin: 12px 0;
}
.sb-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1px;
  font-size: 13px;
}
.sb-stat-label {
  color: var(--c-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.sb-stat-value {
  font-weight: 600;
  color: var(--c-heading);
}
.sb-val-green {
  color: var(--c-success) !important;
}
.sb-val-red {
  color: var(--c-danger) !important;
}
.sb-val-muted {
  color: var(--c-muted) !important;
  font-weight: 400 !important;
}
.sb-report-link {
  color: inherit;
  text-decoration: none;
}
.sb-report-link:hover {
  text-decoration: underline;
}
#sidebar a.sb-report-link {
  padding: 0 5px;
  background: red;
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
}
.sb-upgrade-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px;
  margin-top: 10px;
  background: rgba(255, 176, 32, 0.1);
  color: var(--c-warning);
  border: 1px solid var(--c-warning);
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.12s;
}
.sb-upgrade-link:hover {
  background: rgba(255, 176, 32, 0.2);
  color: var(--c-warning);
}
.sb-view-profile-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 10px;
  margin-top: 12px;
  background: var(--c-primary);
  color: #fff;
  border-radius: var(--r-sm);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: background 0.12s;
}
.sb-view-profile-btn:hover {
  background: var(--c-primary-hov);
  color: #fff;
}

/* ── 11c. Sidebar menu ────────────────────────────── */
#sidebar ul {
  padding: 0;
  margin: 0;
  list-style: none;
  padding-bottom: 1px;
}
#sidebar li {
  list-style: none;
  border-bottom: 2px solid var(--c-border);
  padding-top: 2px;
  padding-bottom: 2px;
}
#sidebar ul li.menu_useful:last-of-type {
  border: 0 !important;
}
#sidebar li.menu_main h2,
#sidebar li.menu_recentposts h2,
#sidebar li.menu_useful h2 {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-muted);
  padding: 5px 14px;
  text-decoration: none;
  margin: 0;
}
#sidebar li.menu_main h2 span,
#sidebar li.menu_recentposts h2 span,
#sidebar li.menu_useful h2 span {
  text-decoration: underline;
}
#sidebar li.menu_main ul li a,
#sidebar li.menu_recentposts ul li a,
#sidebar li.menu_useful ul li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 10px;
  font-size: 13px;
  font-weight: 400;
  color: var(--c-body);
  text-decoration: none;
  border-radius: var(--r-sm);
  transition:
    background 0.12s,
    color 0.12s;
}
#sidebar li.menu_main ul li a:hover,
#sidebar li.menu_recentposts ul li a:hover,
#sidebar li.menu_useful ul li a:hover {
  background: var(--c-sidebar-hov);
  color: var(--c-primary);
}
#sidebar .sb-mi {
  width: 16px;
  font-size: 13px;
  color: var(--c-muted);
  flex-shrink: 0;
  text-align: center;
}
#sidebar li.menu_main ul li a:hover .sb-mi,
#sidebar li.menu_recentposts ul li a:hover .sb-mi,
#sidebar li.menu_useful ul li a:hover .sb-mi {
  color: var(--c-primary);
}
/* Hide legacy img icons embedded in title HTML from the database */
#sidebar li.menu_main ul li a img,
#sidebar li.menu_recentposts ul li a img,
#sidebar li.menu_useful ul li a img {
  display: none;
}

/* ── 11d. Sidebar stats card ──────────────────────── */
.sb-stats-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 10px 10px 10px;
  margin-top: 12px;
  margin-bottom: 10px;
}
.sb-stats-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-muted);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* ── 12. Footer ──────────────────────────────────── */
.footer {
  width: 100%;
  height: auto;
  background: var(--c-sidebar-hov);
  border-top: 1px solid var(--c-border);
  padding: 20px 24px 24px;
  margin-top: 24px;
  text-align: center;
  font-size: 12px;
  color: var(--c-secondary);
}
.footer b,
.footer strong {
  font-weight: 500;
  color: var(--c-secondary);
}
.footer a {
  color: var(--c-secondary);
  text-decoration: none;
}
.footer a:hover {
  color: var(--c-primary);
}

div[style*="clear: both"] {
  padding: 12px 0;
  text-align: center;
}
div[style*="clear: both"] a {
  color: var(--c-secondary);
  font-size: 12px;
}
div[style*="clear: both"] a:hover {
  color: var(--c-primary);
}

/* ── 12. Tables ──────────────────────────────────── */
table.data:not(.innerdata) tr:hover > td,
table.highlight:not(.innerdata) tr:hover > td {
  background: var(--c-sidebar-hov);
}

/* ── 13. Scrollbar ───────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--c-bg);
}
::-webkit-scrollbar-thumb {
  background: var(--c-border);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--c-muted);
}

/* ── 14. Responsive ──────────────────────────────── */

/* Tablet — login card starts to get tight; flex form column, shrink globe */

/* Tablet/mobile — sidebar becomes slide-in overlay, content goes full-width */

/* Phablet — tighter spacing, login panel collapses */

/* Narrow — hide nav text labels, show icons only */

/* Mobile — very small screens */

/* 360px — absolute minimum, squeeze everything */

/* ── Category offcanvas (mobile subcategory navigator) ── */
#cat-offcanvas {
  position: fixed;
  top: 0;
  left: -290px;
  width: 280px;
  height: 100%;
  background: var(--c-surface);
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.22);
  z-index: 5000;
  transition: left 0.25s ease;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
#cat-offcanvas.open {
  left: 0;
}
.cat-oc-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--c-border);
  flex-shrink: 0;
}
#cat-oc-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--c-text);
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
#cat-oc-title i {
  color: var(--c-primary);
  font-size: 16px;
}
#cat-oc-title:hover {
  color: var(--c-primary);
}
#cat-oc-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--c-text-muted);
  font-size: 16px;
  padding: 6px 8px;
  border-radius: 6px;
  line-height: 1;
  flex-shrink: 0;
}
#cat-oc-close:hover {
  background: var(--c-sidebar-hov);
  color: var(--c-text);
}
#cat-oc-list {
  list-style: none;
  padding: 6px 0;
  margin: 0;
}
#cat-oc-list li a {
  display: block;
  padding: 11px 20px 11px 36px;
  color: var(--c-text);
  font-size: 14px;
  text-decoration: none;
}
#cat-oc-list li a:hover,
#cat-oc-list li a:active {
  background: var(--c-sidebar-hov);
  color: var(--c-primary);
}
#cat-oc-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 4999;
  display: none;
}
#cat-oc-backdrop.active {
  display: block;
}

/* ── Mobile user side panel ───────────────────────── */
#mob-user-panel {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  width: 280px;
  height: 100%;
  background: var(--c-surface);
  border-left: 1px solid var(--c-border);
  z-index: 9100;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#mob-user-panel.open {
  transform: translateX(0);
}
#mob-user-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9099;
  opacity: 0;
  transition: opacity 0.25s;
}
#mob-user-backdrop.active {
  display: block;
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════
   Payment thank-you pages (success.tpl / thankyou.tpl) — ty-*
   ═══════════════════════════════════════════════════════════ */
.ty-wrap {
  padding: 0;
}
.ty-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 20px;
  padding: 40px 32px;
  box-shadow: var(--sh-md);
}
.ty-inner {
  margin: 0 auto;
  text-align: center;
}
.ty-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 6px;
}
.ty-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.ty-icon-success {
  background: #22c55e;
  color: #fff;
}
.ty-icon-crypto {
  background: rgba(247, 147, 26, 0.12);
  color: #f7931a;
}
.ty-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--c-heading);
  margin: 0;
}
.ty-sub {
  font-size: 14px;
  color: var(--c-text-muted);
  margin: 0 0 18px;
  line-height: 1.5;
}
.ty-txn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #22c55e;
  border-radius: 24px;
  padding: 7px 18px;
  margin-bottom: 18px;
}
.ty-txn-label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.85);
}
.ty-txn-value {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  word-break: break-all;
}
.ty-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  background: rgba(37, 99, 235, 0.06);
  border: 1px solid rgba(37, 99, 235, 0.15);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0 auto 16px auto;
  width: max-content;
}
.ty-notice i {
  color: var(--c-primary);
  font-size: 15px;
  margin-top: 2px;
  flex-shrink: 0;
}
.ty-notice p {
  margin: 0;
  font-size: 13px;
  color: var(--c-text);
  line-height: 1.5;
}
.ty-steps {
  list-style: none;
  margin: 0 auto 12px auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
  max-width: fit-content;
}
.ty-steps li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--c-text);
  line-height: 1.5;
}
.ty-steps li i {
  color: #22c55e;
  font-size: 12.5px;
  margin-top: 3px;
  flex-shrink: 0;
}
.ty-help {
  font-size: 13px;
  color: var(--c-text-muted);
  margin: 0 0 20px;
}
.ty-help a {
  color: var(--c-primary);
  text-decoration: none;
  font-weight: 600;
}
.ty-help a:hover {
  text-decoration: underline;
}
.ty-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  background: var(--c-primary);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 9px;
  transition: background 0.15s;
}
.ty-btn:hover {
  background: #1d4ed8;
  color: #fff;
  text-decoration: none;
}
[data-theme="dark"] .ty-notice {
  background: rgba(37, 99, 235, 0.1);
}

@media (max-width: 767px) {
  #mob-user-panel {
    display: block;
  }
  /* suppress dropdown on mobile — panel replaces it */
  .nav-dropdown-right {
    display: none !important;
  }
}
.mob-up-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-sidebar);
}
.mob-up-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mob-up-avatar {
  font-size: 28px;
  color: var(--c-primary);
}
.mob-up-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--c-body);
}
#mob-up-close {
  background: none;
  border: none;
  padding: 6px 8px;
  cursor: pointer;
  color: var(--c-muted);
  font-size: 17px;
  line-height: 1;
}
.mob-up-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mob-up-divider {
  height: 6px;
  background: var(--c-sidebar);
}
.mob-up-links li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 13px;
  color: var(--c-body);
  text-decoration: none;
  transition:
    background 0.1s,
    color 0.1s;
  border-bottom: 1px solid var(--c-border);
}
.mob-up-links li a:active {
  background: var(--c-sidebar-hov);
  color: var(--c-primary);
}
.mob-up-links li a i {
  width: 15px;
  font-size: 13px;
  color: var(--c-muted);
  flex-shrink: 0;
}
.mob-up-divider {
  height: 1px;
}
.mob-up-badge {
  margin-left: auto;
  background: var(--c-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  padding: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mob-up-logout {
  color: #e53e3e !important;
}
.mob-up-logout i {
  color: #e53e3e !important;
}

/* ── Announcement section ─────────────────────────── */
.ann-section-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 600;
  color: var(--c-heading);
  margin: 20px 0 18px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--c-border);
}
.ann-section-heading i {
  font-size: 16px;
  color: var(--c-primary);
}

/* ── Announcement cards ───────────────────────────── */
.announcements-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 7px;
}
.ann-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: var(--sh-sm);
}
.ann-card-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ann-card-icon i {
  font-size: 18px;
}
.ann-card-body {
  flex: 1;
  min-width: 0;
}
.ann-card-title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 5px;
  line-height: 1.3;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ann-card-desc {
  font-size: 13px;
  color: var(--c-secondary);
  line-height: 1.55;
}
.ann-card-date {
  font-size: 11px;
  font-weight: 400;
  color: var(--c-muted);
  margin-left: 6px;
  vertical-align: middle;
}
.ann-see-more {
  margin-bottom: 10px;
  font-size: 13px;
}
.ann-see-more a {
  color: var(--c-primary);
  text-decoration: none;
}
.ann-see-more a:hover {
  text-decoration: underline;
}
.ann-toggle {
  color: var(--c-primary);
  font-size: 12px;
  white-space: nowrap;
}
.ann-toggle:hover {
  text-decoration: underline;
}

/* ── Site Footer ──────────────────────────────────── */
.site-footer {
  margin-top: 48px;
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 120%, rgba(0, 112, 255, 0.05) 0%, transparent 70%);
  pointer-events: none;
}

.sf-inner {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  padding: 32px 24px 28px;
  display: grid;
  grid-template-columns: 180px 1fr 1fr 1fr auto;
  gap: 0;
  align-items: start;
}

/* Brand */
.sf-brand {
  padding-right: 20px;
}
.sf-logo-link {
  display: inline-block;
  text-decoration: none;
  margin-bottom: 8px;
}
.sf-logo-img {
  height: 40px;
  width: auto;
  display: block;
}
.sf-tagline {
  font-size: 13px;
  color: var(--c-muted);
  margin: 0 0 12px;
  line-height: 1.5;
}
.sf-donate-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(135deg, #38bdf8 0%, #0070ff 100%);
  border-radius: 20px;
  transition:
    opacity 0.14s,
    box-shadow 0.14s;
  margin-left: 25px;
}
.sf-donate-btn:hover {
  opacity: 0.88;
  box-shadow: 0 2px 8px rgba(0, 112, 255, 0.35);
  color: #fff;
}
.sf-donate-btn i {
  font-size: 11px;
}

/* Columns */
.sf-col {
  padding: 0 24px;
  border-left: 1px solid var(--c-border);
}
.sf-col-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-heading);
  margin: 0 0 10px;
}
.sf-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sf-links a {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--c-secondary);
  text-decoration: none;
  transition: color 0.12s;
}
.sf-links a:hover {
  color: var(--c-primary);
}
.sf-links a i {
  width: 14px;
  text-align: center;
  font-size: 11px;
  opacity: 0.7;
  flex-shrink: 0;
}

/* Trust / badges column */
.sf-trust {
  padding-left: 24px;
  border-left: 1px solid var(--c-border);
}
.sf-trust-heading {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-heading);
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 14px;
}
.sf-trust-heading i {
  font-size: 11px;
  color: var(--c-primary);
}
.sf-badges {
  display: flex;
  flex-direction: row;
  gap: 7px;
  flex-wrap: nowrap;
}
.sf-badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--c-border);
  border-radius: 7px;
  overflow: hidden;
  text-decoration: none;
  transition:
    border-color 0.14s,
    box-shadow 0.14s;
}
.sf-badge:hover {
  border-color: var(--c-primary);
  box-shadow: var(--sh-sm);
}
.sf-badge-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.sf-badge-icon i {
  font-size: 12px;
}
.sf-badge-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  padding: 3px 8px 3px 6px;
  border-left: 1px solid var(--c-border);
}
.sf-badge-text small {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.sf-badge-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--c-heading);
}
.sf-badge-ssl .sf-badge-icon {
  background: rgba(0, 112, 255, 0.1);
}
.sf-badge-ssl .sf-badge-icon i {
  color: #0070ff;
}
.sf-badge-dmca .sf-badge-icon {
  background: rgba(22, 199, 132, 0.1);
}
.sf-badge-dmca .sf-badge-icon i {
  color: #16c784;
}
.sf-badge-rss .sf-badge-icon {
  background: rgba(249, 115, 22, 0.1);
}
.sf-badge-rss .sf-badge-icon i {
  color: #f97316;
}

/* Bottom bar */
/* Wave divider */
.sf-wave {
  line-height: 0;
  overflow: hidden;
}
.sf-wave svg {
  display: block;
  width: 100%;
  height: 32px;
  fill: #dbeafe;
}
[data-theme="dark"] .sf-wave svg {
  fill: rgba(0, 112, 255, 0.07);
}

.sf-bottom {
  position: relative;
  background: #deeafe 0%;
}
[data-theme="dark"] .sf-bottom {
  background: #121f3a;
}
.sf-bottom-inner {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 24px;
  flex-wrap: wrap;
}
.sf-legal {
  font-size: 12px;
  color: var(--c-secondary);
  margin: 0;
  line-height: 1.6;
}
.sf-trust-copy {
  font-size: 12px;
  color: var(--c-muted);
  margin: 14px 0 0;
  line-height: 1.4;
}

/* ── jQuery UI Tabs — global override ─────────────── */
.ui-tabs {
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}
.ui-tabs .ui-widget-header {
  background: transparent;
  border: none;
}
.ui-tabs .ui-tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0 0 28px;
  padding: 0;
  border: none;
  border-bottom: 2px solid var(--c-border);
  background: transparent;
}
.ui-tabs .ui-tabs-nav li {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 0;
  list-style: none;
  top: 0;
}
.ui-tabs .ui-tabs-nav li a {
  display: block;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  color: var(--c-secondary);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition:
    color 0.15s,
    border-color 0.15s;
  background: transparent;
}
.ui-tabs .ui-tabs-nav li a:hover {
  color: var(--c-primary);
}
.ui-tabs .ui-tabs-nav li.ui-state-active a,
.ui-tabs .ui-tabs-nav li.ui-tabs-active a {
  color: var(--c-primary);
  border-bottom-color: var(--c-primary);
}
.ui-tabs .ui-tabs-nav li.ui-state-active,
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
  background: transparent;
  border: none;
}
.ui-tabs .ui-tabs-panel {
  padding: 0;
  border: none;
  background: transparent;
}

/* ── Global form elements ─────────────────────────── */
input.med,
input.long {
  padding: 8px 12px;
  font-size: 13px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: var(--c-surface);
  color: var(--c-body);
  outline: none;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
  box-sizing: border-box;
}
input.med:focus,
input.long:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-muted);
}
/* Inputs inside prof-field stretch to fill right column */
.prof-field input.med,
.prof-field input.long {
  flex: 1;
  min-width: 0;
  width: auto;
}
.prof-input-row input.med {
  width: auto;
  flex: 1;
  min-width: 0;
}
select {
  padding: 8px 12px;
  font-size: 13px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: var(--c-surface);
  color: var(--c-body);
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s;
}
select:focus {
  border-color: var(--c-primary);
}
input[type="submit"],
button[type="submit"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 22px;
  font-size: 13px;
  font-weight: 400;
  color: #fff;
  background: var(--c-primary);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition:
    background 0.15s,
    box-shadow 0.15s;
  font-family: var(--font);
}
input[type="submit"]:hover,
button[type="submit"]:hover {
  background: var(--c-primary-hov);
  box-shadow: 0 2px 8px rgba(0, 112, 255, 0.3);
}
button[type="submit"].btn-sm {
  padding: 7px 14px;
  font-size: 12px;
}
input[type="button"],
input[type="reset"] {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 400;
  background: var(--c-subnav);
  color: var(--c-secondary);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.14s;
}
input[type="button"]:hover,
input[type="reset"]:hover {
  background: var(--c-border);
}
.hint {
  font-size: 11px;
  color: var(--c-muted);
  margin-top: 4px;
  line-height: 1.5;
}
code {
  font-family: "SF Mono", "Fira Mono", monospace;
  font-size: 14px;
  color: var(--c-success);
  background: rgba(22, 199, 132, 0.1);
  padding: 2px 7px;
  border-radius: 4px;
}

/* ── Profile Page ─────────────────────────────────── */
.profile-div {
  margin-top: 10px;
}

/* Headings */
.profile-div .box-header h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--c-heading);
  margin: 0 0 24px;
  padding: 2px;
  border: none;
  background: none;
  text-transform: none;
  text-align: center;
  background-color: #deeafe;
  border-radius: var(--r-md);
}
.profile-div #setting .box-header h3,
.profile-div #options .box-header h3,
.profile-div #integration .box-header h3,
.profile-div #api_rss .box-header h3,
.profile-div #invites .box-header h3 {
  font-size: 16px;
  margin: 28px 0 16px;
}

/* Two-column flex layout */
.profile-div .optionpanel,
.profile-div .settingpanel {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
}
.profile-div .optionpanel .left-div,
.profile-div .optionpanel .right-div,
.profile-div .settingpanel .left-div,
.profile-div .settingpanel .right-div,
.profile-div .optionpanel .lw5,
.profile-div .optionpanel .rw5 {
  width: auto !important;
  flex: 1;
  padding: 0 !important;
  float: none !important;
}
/* settingfooter (Update button) spans full width below the two columns */
.profile-div .settingfooter {
  flex: 0 0 100%;
}

/* Card container */
.profile-div .box-content {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  overflow: hidden;
}

/* Data table */
.profile-div table.input {
  width: 100%;
  border-collapse: collapse;
}
.profile-div table.input th,
.profile-div table.input td {
  padding: 8px 14px;
  font-size: 13px;
  border-bottom: 1px solid var(--c-border);
  vertical-align: middle;
  text-align: left;
}
.profile-div table.input th {
  width: 38%;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-secondary);
  white-space: nowrap;
  text-transform: none;
  letter-spacing: normal;
}
.profile-div table.input td {
  color: var(--c-body);
}
.profile-div table.input tr:last-child th,
.profile-div table.input tr:last-child td {
  border-bottom: none;
}

/* Account info box — override inline teal border */
.profile-div [style*="border:1px solid #3AA1B2"],
.profile-div [style*="border: 1px solid #3AA1B2"] {
  border: 1px solid var(--c-border) !important;
  border-radius: 10px !important;
  padding: 0 !important;
  overflow: hidden;
  background: var(--c-surface);
}
.profile-div [style*="border:1px solid #3AA1B2"] table.input th,
.profile-div [style*="border: 1px solid #3AA1B2"] table.input th {
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--c-secondary);
}
.profile-div table.input th[colspan="4"] h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-heading);
  text-transform: none;
  margin: 0;
  padding: 14px 0 4px;
}

/* Broader th override — all tables inside profile page */
.profile-div th {
  text-transform: none;
  letter-spacing: normal;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-secondary);
}
/* savesearchtab has class="data" so table.data th (0,1,2) beats .profile-div th (0,1,1) — needs higher specificity */
.profile-div table.savesearchtab th {
  text-transform: none !important;
  letter-spacing: normal;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-secondary);
}
/* Integration: inputs inside table cells should fill the cell */
.profile-div table.input td input.med,
.profile-div table.input td input.long {
  width: 100%;
  box-sizing: border-box;
}

/* Admin/Mod divider row */
.prof-admin-row {
  background: rgba(255, 59, 59, 0.06) !important;
  border-top: 2px solid rgba(255, 59, 59, 0.15) !important;
}
.prof-admin-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--c-danger);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.prof-admin-badge i {
  font-size: 12px;
}

/* Excluded categories grid */
.exccat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 20px;
  padding: 10px 0;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  padding-left: 10px;
}
.exccategoryname {
  font-size: 11px;
  font-weight: 700;
  color: var(--c-heading);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  padding-bottom: 5px;
  border-bottom: 2px solid var(--c-primary-muted);
  padding-left: 30px;
}
.exccategorycontent {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 2px 0;
}
.exccategoryvalue {
  font-size: 12px;
  color: var(--c-body);
}
.exccat-hint {
  margin-top: 12px;
  text-align: center;
}

/* Invites tab */
.invite-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
.invite-send-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.invite-count-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.invite-count-row > i {
  font-size: 28px;
  color: var(--c-primary);
  opacity: 0.8;
}
.invite-count-num {
  display: block;
  font-size: 28px;
  font-weight: 800;
  color: var(--c-heading);
  line-height: 1;
}
.invite-count-label {
  display: block;
  font-size: 12px;
  color: var(--c-muted);
  margin-top: 2px;
}
.invite-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.invite-url-row {
  border-top: 1px solid var(--c-border);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.invite-url-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 5px;
}
.invite-url-code {
  font-size: 12px;
  word-break: break-all;
}
.invite-pending-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  overflow: hidden;
}
.invite-pending-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-heading);
  margin: 0;
  padding: 14px 16px;
  border-bottom: 1px solid var(--c-border);
}
.invite-pending-table {
  width: 100%;
  border-collapse: collapse;
}
.invite-pending-table th {
  font-size: 11px;
  font-weight: 700;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 8px 14px;
  border-bottom: 1px solid var(--c-border);
  text-align: left;
}
.invite-pending-table td {
  font-size: 12px;
  color: var(--c-body);
  padding: 8px 14px;
  border-bottom: 1px solid var(--c-border);
}
.invite-pending-table tr:last-child td {
  border-bottom: none;
}

/* Old th h3 cleanup */

/* Host history inner table */
.profile-div table.data {
  border-collapse: collapse;
  width: 100%;
}
.profile-div table.data thead th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-muted);
  padding: 6px 10px;
  border-bottom: 1px solid var(--c-border);
}
.profile-div table.data td {
  font-size: 12px;
  padding: 6px 10px;
  color: var(--c-body);
}

/* Settings tab — modern form layout */
.prof-section-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--c-heading);
  margin: 0 0 10px;
  text-align: center;
  background-color: #deeafe;
  border-radius: var(--r-md);
  padding: 2px;
}
.prof-settings-grid {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 20px;
  align-items: start;
}
.prof-form-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  overflow: hidden;
}
.prof-field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  padding: 7px 16px;
  min-height: 52px;
  border-bottom: 1px solid var(--c-border);
}
.prof-field:last-child {
  border-bottom: none;
}
.prof-field label {
  font-size: 11px;
  font-weight: 700;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0;
}
.prof-field > label:first-child {
  width: 160px;
  flex-shrink: 0;
  display: block;
}
.prof-field > input,
.prof-field > select {
  flex: 1;
  min-width: 0;
}
.prof-field > .prof-input-row,
.prof-field > .prof-radio-row,
.prof-field > .prof-checkbox-opt,
.prof-field > div,
.prof-field > span.prof-api-code,
.prof-field > .prof-endpoints {
  flex: 1;
  min-width: 0;
}
.prof-field > .hint {
  flex-basis: 100%;
  padding-left: 176px;
  margin: 0 0 8px;
}
.prof-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.prof-input-row input {
  flex: 1;
  min-width: 0;
}
.btn-gen {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
  background: var(--c-subnav);
  color: var(--c-secondary);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.14s;
  flex-shrink: 0;
}
.btn-gen:hover {
  background: var(--c-border);
}
.prof-avatar-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.prof-avatar-wrap img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--c-border);
  display: block;
}
.prof-file-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 400;
  color: var(--c-secondary);
  background: var(--c-subnav);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.14s;
}
.prof-file-btn:hover {
  background: var(--c-border);
}
.prof-file-btn input[type="file"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.prof-form-footer {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--c-border);
}

/* Fix integration/options height constraints */
/* Integration panel show/hide (toggled by JS) */
.div-hide {
  display: none !important;
}
#sabnzbDiv,
#nzbDiv {
  height: auto !important;
  margin-top: 16px;
}
/* Api/Rss new components */
.prof-api-code {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "SF Mono", "Fira Mono", monospace;
  font-size: 12px;
  color: var(--c-success);
  background: rgba(22, 199, 132, 0.1);
  padding: 6px 10px;
  border-radius: 6px;
}
.prof-endpoints {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.prof-endpoint-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  padding: 4px 0;
}
.prof-endpoint-label {
  font-weight: 600;
  color: var(--c-secondary);
  min-width: 90px;
}
.prof-rss-options {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  padding: 16px;
  border-bottom: 1px solid var(--c-border);
}
.prof-rss-options > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.prof-rss-url-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  flex-wrap: wrap;
  font-size: 13px;
}
.prof-rss-url-row code {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
.profile-div .optionpanel[style*="height"] {
  height: auto !important;
}

/* Misc */
.profile-div .settingfooter {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--c-border);
}
.profile-div .profile-box {
  text-align: center;
  padding: 16px;
}
.profile-div .profile-box img {
  border-radius: 50%;
  border: 3px solid var(--c-border);
}
.profile-div .invitesuccess {
  color: var(--c-success);
  font-size: 12px;
  font-weight: 600;
}
.profile-div img[src*="compat.png"] {
  border-radius: 8px;
  opacity: 0.9;
  margin-top: 8px;
}
.profile-div .rss_feed_tab {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
}
.profile-div .rss_label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.profile-div .rss_feed_tab td {
  padding: 0 12px;
  vertical-align: top;
}
.profile-div .rss_feed_tab td:first-child {
  padding-left: 0;
}
.profile-div .error {
  padding: 10px 16px;
  background: rgba(255, 59, 59, 0.1);
  border: 1px solid rgba(255, 59, 59, 0.3);
  border-radius: 8px;
  color: var(--c-danger);
  font-size: 13px;
  margin-bottom: 16px;
}

/* Options / Integration responsive grid */
.prof-options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
/* Radio / checkbox rows inside prof-field */
.prof-radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.prof-radio-opt,
.prof-checkbox-opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--c-body);
  cursor: pointer;
  user-select: none;
}
/* Integration card logo header */
.prof-integ-title {
  padding: 10px 16px;
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.prof-integ-logo {
  height: 32px;
  width: auto;
  object-fit: contain;
}

/* ── Color-coded action buttons ──────────────────── */
/* Compact shared styles for all color-coded action buttons */
.btn-add,
.btn-edit,
.btn-delete,
.btn-warning,
.btn-purple {
  padding: 2px 8px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  line-height: 1.4 !important;
  border: none !important;
  white-space: nowrap !important;
}
.btn-add {
  background: var(--c-success) !important;
  color: #fff !important;
}
.btn-add:hover {
  background: #12a86e !important;
}
.btn-edit {
  background: var(--c-primary) !important;
  color: #fff !important;
}
.btn-edit:hover {
  background: var(--c-primary-hov) !important;
}
.btn-delete {
  background: var(--c-danger) !important;
  color: #fff !important;
}
.btn-delete:hover {
  background: #e02020 !important;
}

/* ── Custom Searches card layout ─────────────────── */
.prof-cs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--c-border);
  width: 100%;
}
.prof-cs-form {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr auto;
  gap: 10px;
  padding: 14px 16px;
  align-items: end;
  border-bottom: 1px solid var(--c-border);
}
.prof-cs-form > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.prof-cs-form select,
.prof-cs-form input[type="text"] {
  width: 100%;
  box-sizing: border-box;
}
.prof-cs-form .rss_label {
  text-transform: none;
  letter-spacing: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--c-muted);
}
.prof-cs-action {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}
.prof-cs-list-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.prof-cs-list-wrap .savesearchtab {
  width: 100%;
  border-collapse: collapse;
  min-width: 460px;
}
.prof-cs-list-wrap .savesearchtab th,
.prof-cs-list-wrap .savesearchtab td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--c-border);
  font-size: 13px;
  text-align: left;
}
.prof-cs-list-wrap .savesearchtab tr:last-child td {
  border-bottom: none;
}
.prof-cs-list-wrap .savesearchtab tr.datalist:hover td {
  background: var(--c-subnav);
}

/* ── Browse Page ─────────────────────────────────── */
/* RSS icon in page heading */
.br-rss-link {
  margin-left: 7px;
  vertical-align: middle;
  text-decoration: none;
}
.br-rss-icon {
  font-size: 14px;
  color: #ee802f;
  vertical-align: middle;
  transition: opacity 0.12s;
}
.br-rss-link:hover .br-rss-icon {
  opacity: 0.7;
}

/* Top header bar (title left, view/filter right) */
.browse-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.browse-row.half-row,
.browse-row .half-row {
  float: none !important;
}
.title-has-rss-link {
  display: flex;
  align-items: center;
}
.title-has-rss-link a {
  position: relative;
  top: -5px;
}
.half-row.pull-right {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  flex-shrink: 0;
}

/* View toggle buttons (Cinema/Cover/List) */
.br-view-toggles {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.br-view-label {
  font-size: 11px;
  color: var(--c-muted);
  margin-right: 2px;
}
.br-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--c-secondary);
  text-decoration: none;
  border: 1px solid var(--c-border);
  transition:
    background 0.12s,
    color 0.12s,
    border-color 0.12s;
}
.br-view-btn:hover {
  background: var(--c-primary);
  color: #fff;
  border-color: var(--c-primary);
}
.br-view-active {
  background: var(--c-primary);
  color: #fff !important;
  border-color: var(--c-primary);
}
.br-view-btn i {
  font-size: 11px;
}

/* Search info icon (pager row) */
.br-search-info-icon {
  font-size: 15px;
  color: var(--c-primary);
  cursor: pointer;
  vertical-align: middle;
  padding-top: 2px;
}

/* Password lock icon */
.br-lock-icon {
  color: #4db5ff !important;
  font-size: 12px;
  vertical-align: middle;
  margin-left: 4px;
}
.color-red {
  color: #dc2626;
}

/* Sort arrows in headers */
.br-th {
  position: relative;
  white-space: nowrap;
  padding-right: 16px !important;
}
.br-sort {
  position: absolute;
  right: 3px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.15s;
}
.br-th:hover .br-sort {
  visibility: visible;
  opacity: 1;
}
.br-sort a {
  color: var(--c-muted);
  font-size: 9px;
  line-height: 0.6;
  display: block;
  text-decoration: none;
}
.br-sort a:hover {
  color: var(--c-primary);
}

/* Category pill badge */
.br-cat-link {
  font-size: 12px;
  color: var(--c-primary);
  text-decoration: none;
  white-space: nowrap;
}
.br-cat-link:hover {
  text-decoration: underline;
}

/* Info icons row */
.br-info-cell {
  width: 110px;
  text-align: center;
  vertical-align: middle;
}
.mid {
  text-align: center !important;
}
.br-icons {
  display: inline-flex;
  align-items: center;
  gap: 6.5px;
  flex-wrap: nowrap;
}
.br-icon {
  font-size: 12px;
  color: #1a1a1a;
  transition: color 0.12s;
}
.br-icon-dim {
  color: #9ca3af !important;
  cursor: default !important;
  pointer-events: none;
}
.br-icon-info {
  cursor: pointer;
}
.br-icon-video {
  cursor: pointer;
}
.br-icons a:hover .br-icon,
.br-icons span:hover .br-icon {
  opacity: 0.72;
}
div.icon_nzb::before,
div.icon_cart::before,
div.icon_sab::before,
div.icon_nzbget::before,
.br-icon {
  color: #4db5ff;
}
.br-icon-dim {
  color: #e2e6ee !important;
}

[data-theme="dark"] div.icon_nzbget::before,
[data-theme="dark"] div.icon_nzb::before,
[data-theme="dark"] div.icon_cart::before,
[data-theme="dark"] div.icon_sab::before,
[data-theme="dark"] .br-icon {
  color: var(--c-primary) !important;
}
[data-theme="dark"] .br-icon-dim {
  color: #9ca3af !important;
}

/* Comments link */
.br-cmts-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--c-body);
  font-size: 12px;
  text-decoration: none;
  white-space: nowrap;
}
.br-cmts-link:hover {
  color: var(--c-primary);
}
.br-cmts-link i {
  font-size: 12px;
}
.br-cmts-link.br-cmts-dim {
  color: #9ca3af !important;
  cursor: default;
}
.br-cmts-link.br-cmts-dim:hover {
  color: #9ca3af !important;
}

/* Comments hover popup */
.br-cmts-cell {
  position: relative !important;
  overflow: visible !important;
}
.br-cmts-popup {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  width: 400px !important;
  min-width: 400px !important;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  z-index: 999999;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}
/* CSS hover keeps popup open while mouse is over td OR popup */
.br-cmts-cell:hover .br-cmts-popup {
  display: block !important;
}
.br-cmts-popup table.comment {
  width: 100%;
  border-collapse: collapse;
}
.br-cmts-popup table.comment th {
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-primary);
  border-bottom: 1px solid var(--c-border);
  text-align: left;
  white-space: nowrap;
}
/* !important needed to override #browsetable td { white-space:nowrap; overflow:hidden } */
.br-cmts-popup table.comment td {
  padding: 4px 8px !important;
  font-size: 10px !important;
  color: var(--c-body) !important;
  border-bottom: 1px solid var(--c-border);
  vertical-align: top !important;
  white-space: normal !important;
  overflow: visible !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  background: none !important;
}

/* Comment hover popup */
/* :not(#comments) excludes the empty jump-target anchor (<a id="comments">)
   in viewnzb.tpl — it isn't one of the "commentsNNN" hover-popup elements
   this rule is meant for, but it does technically start with "comments". */
[id^="comments"]:not(#comments) {
  border-radius: 8px !important;
  border: 1px solid var(--c-border) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.13) !important;
  background: var(--c-surface) !important;
  padding: 0 !important;
  overflow: hidden;
  width: 500px !important;
}
[id^="comments"] table.comment {
  margin: 0 !important;
  width: 100% !important;
  border-collapse: collapse;
}
[id^="comments"] table.comment th {
  background: rgba(37, 99, 235, 0.07) !important;
  color: var(--c-primary) !important;
  font-size: 10px !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 6px 10px !important;
  border-bottom: 2px solid var(--c-primary) !important;
  font-weight: 700;
}
[id^="comments"] table.comment td {
  font-size: 10px !important;
  padding: 3px 5px !important;
  vertical-align: top !important;
  border-bottom: 1px solid var(--c-border) !important;
  background: none !important;
  color: var(--c-body) !important;
  line-height: 1.5;
}
[id^="comments"] table.comment td:first-child {
  width: 120px;
  min-width: 120px;
}
[id^="comments"] table.comment td:first-child img {
  display: none !important;
}
[id^="comments"] table.comment td:last-child {
  word-break: break-word;
  overflow-wrap: break-word;
  text-align: left !important;
}
[id^="comments"] table.comment tr:last-child td {
  border-bottom: none !important;
}
[id^="comments"] table.comment a {
  color: var(--c-primary);
  text-decoration: none;
}
[id^="comments"] table.comment a:hover {
  text-decoration: underline;
}

/* ── qTip tooltips (preinfo / series / mediainfo / newznab) ── */
/* Base container — border-radius + shadow */
.qtip,
.ui-tooltip {
  border-radius: 8px !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  max-width: 340px !important;
  overflow: hidden;
  z-index: 9999 !important;
}

.ui-tooltip.ui-helper-reset {
  height: fit-content !important;
}

/* Titlebar: primary blue strip */
.ui-tooltip-preinfo .ui-tooltip-titlebar,
.ui-tooltip-series .ui-tooltip-titlebar,
.ui-tooltip-mediainfo .ui-tooltip-titlebar,
.ui-tooltip-newznab .ui-tooltip-titlebar {
  background: var(--c-primary) !important;
  border-color: var(--c-primary) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
  border-radius: 8px 8px 0 0 !important;
}

/* Content area: theme surface */
.ui-tooltip-preinfo .ui-tooltip-content,
.ui-tooltip-series .ui-tooltip-content,
.ui-tooltip-mediainfo .ui-tooltip-content,
.ui-tooltip-newznab .ui-tooltip-content {
  background: var(--c-surface) !important;
  border-color: var(--c-border) !important;
  color: var(--c-body) !important;
  font-size: 12px !important;
  padding: 5px 10px !important;
  line-height: 1.5 !important;
}

/* Content inner elements */
.ui-tooltip-content b {
  color: var(--c-body);
  font-weight: 600;
}
.ui-tooltip-content ul {
  margin: 4px 0 4px 14px;
  padding: 0;
  font-size: 11px;
}
.ui-tooltip-content li {
  margin: 2px 0;
  word-break: break-all;
}
.ui-tooltip-content hr {
  border: none;
  border-top: 1px solid var(--c-border);
  margin: 6px 0;
}
/* Close button in titlebar */
.ui-tooltip-titlebar .ui-state-default {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: transparent !important;
}
.ui-tooltip-titlebar .ui-state-hover {
  background: rgba(255, 255, 255, 0.35) !important;
}

/* Mediainfo / video-info tooltip — compact, appears above icon */
.ui-tooltip-mediainfo {
  max-width: 260px !important;
  width: 260px !important;
}
.ui-tooltip-mediainfo .ui-tooltip-content {
  padding: 4px 8px !important;
}
.ui-tooltip-mediainfo .ui-tooltip-content table {
  width: 100%;
  border-collapse: collapse;
}
.ui-tooltip-mediainfo .ui-tooltip-content td,
.ui-tooltip-mediainfo .ui-tooltip-content th {
  font-size: 11px !important;
  padding: 2px 4px !important;
  line-height: 1.4 !important;
  word-break: break-word;
  vertical-align: top;
}
.ui-tooltip-mediainfo .ui-tooltip-content th {
  color: var(--c-muted);
  font-weight: 600;
}
.ui-tooltip-mediainfo .ui-tooltip-content td {
  color: var(--c-body);
}

/* Search tips popup */
.ui-tooltip-search {
  max-width: 360px !important;
  border-color: var(--c-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14) !important;
}
.ui-tooltip-search .ui-tooltip-content {
  background: var(--c-surface) !important;
  border-color: var(--c-border) !important;
  color: var(--c-body) !important;
  font-size: 12px !important;
  line-height: 1.7 !important;
  padding: 12px 14px !important;
  border-radius: 8px !important;
}
.ui-tooltip-search .ui-tooltip-content b {
  color: var(--c-primary) !important;
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}
.ui-tooltip-search .ui-tooltip-content b + b {
  margin-top: 8px;
  border-top: 1px solid var(--c-border);
  padding-top: 8px;
}

/* ── Top Downloads table (browse10) ── */
.td-section {
  width: 74%;
  margin: 10px auto 12px;
  text-align: center;
}
.td-scroll-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.td-mobile-cards {
  display: none;
}
.td-heading {
  font-size: 15px !important;
  font-weight: 600;
  color: var(--c-body);
  margin: 0 0 6px !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.td-heading .td-period {
  font-size: 11px;
  font-weight: 400;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.td-fire-icon {
  color: #ea580c;
  font-size: 14px;
}
/* Use ID selector to beat legacy table.data styles */
#topdownloadstable {
  width: 100%;
  table-layout: fixed;
  margin: 0;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  background: var(--c-surface);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-sm);
}
#topdownloadstable td,
#topdownloadstable th {
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  line-height: 21px;
  color: var(--c-body);
  padding: 3px 5px;
  border: 1px solid var(--c-border);
  vertical-align: middle;
  white-space: nowrap;
  text-align: center;
}
#topdownloadstable td:first-child,
#topdownloadstable th:first-child {
  text-align: left;
}
#topdownloadstable th:nth-child(2) {
  width: 7%;
}
#topdownloadstable th:nth-child(3) {
  width: 9%;
}
#topdownloadstable th:nth-child(4) {
  width: 7%;
}
#topdownloadstable th:nth-child(5) {
  width: 65px;
}
#topdownloadstable th {
  font-weight: 600;
  color: var(--c-primary);
  background: rgba(37, 99, 235, 0.07);
  border-bottom: 2px solid var(--c-primary);
  text-transform: none;
  letter-spacing: normal;
}
#topdownloadstable a.title {
  color: var(--c-body);
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#topdownloadstable a.title:hover {
  color: var(--c-primary);
}
#topdownloadstable tr:hover td {
  background: var(--c-subnav);
}
.site-ad {
  text-align: center;
  margin: 8px 0;
}

/* ── Search page ── */
.sr-header {
  position: relative;
  text-align: center;
  padding: 4px 0 10px;
}
.sr-perpage-wrap {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  padding: 4px 10px;
  background: var(--c-surface);
}
.sr-perpage-wrap form {
  display: contents;
}
.sr-perpage-label {
  color: var(--c-muted);
}
.sr-perpage-select {
  font-size: 11px;
  padding: 2px 4px;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  background: var(--c-surface);
  color: var(--c-body);
}
.sr-form-wrap {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  padding: 10px 14px;
  max-width: 760px;
  margin: 0 auto 10px;
}
.sr-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
}
.sphinxsearchdiv.sr-input-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  width: 100%;
}
.sqlsearchdiv.sr-input-group {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.sr-flex-inputs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  width: 100%;
}
.sr-flex-inputs select {
  flex: 1 1 120px;
  font-size: 13px;
  color: var(--c-body);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 5px;
  padding: 5px 7px;
  cursor: pointer;
  box-sizing: border-box;
  width: auto !important;
}
.sr-kw-input {
  flex: 1 1 200px;
  min-width: 0;
  width: auto;
}
/* Override br-filter-box wrapper styles when used directly on search inputs */
.sr-form-wrap input.br-filter-box,
.sr-form-wrap select.br-filter-box {
  display: block;
  background: var(--c-surface);
  font-size: 13px;
  color: var(--c-body);
  border: 1px solid var(--c-border);
  border-radius: 5px;
  padding: 5px 8px;
  box-sizing: border-box;
  flex: 1 1 120px;
  min-width: 0;
}
.sr-search-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sr-submit-btn {
  flex: none;
  padding: 5px 14px !important;
  font-size: 13px;
  font-weight: 600;
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
  align-self: stretch;
  box-sizing: border-box;
  line-height: 1.4;
}
.sr-toggle-row {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.sr-toggle-btn {
  font-size: 11px;
  background: none;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  padding: 2px 10px;
  cursor: pointer;
  color: var(--c-primary);
  font-weight: 500;
}
.sr-toggle-btn:hover {
  background: var(--c-subnav);
}

#browsetable {
  overflow: visible !important;
  border-collapse: collapse;
  table-layout: fixed;
}

/* Fallback widths using existing th classes — no br-col-* needed.
   Lower specificity (no ID) so overridden by #browsetable th.br-col-* once Smarty cache clears. */
table.data.icons th.mid.br-th {
  width: 8%;
} /* 7 cols × 8% = 56% */
table.data.icons th.mid:not(.br-th) {
  width: 3%;
} /* checkbox = 3%; Name gets remaining 41% */

/* Final widths once br-col-* classes compile (higher specificity via #id — wins over fallback) */
.br-table {
  table-layout: fixed;
}
#browsetable th.br-col-cat {
  width: 8%;
}
#browsetable th.br-col-info {
  width: 10%;
}
#browsetable th.br-col-posted {
  width: 6%;
}
#browsetable th.br-col-size {
  width: 8%;
}
#browsetable th.br-col-hits {
  width: 6%;
}
#browsetable th.br-col-cmts {
  width: 5%;
}
#browsetable th.br-col-links {
  width: 8%;
}
#browsetable th.br-col-chk {
  width: 3%;
}
#browsetable th.br-col-admin {
  width: 3%;
}
#browsetable a.title {
  color: var(--c-body);
  text-decoration: none;
  font-weight: 500;
  font-size: 12px;
}
#browsetable a.title:hover {
  color: var(--c-primary);
}
#browsetable tr:hover td {
  background: var(--c-subnav) !important;
}
#browsetable td {
  vertical-align: middle;
  padding: 3px 4px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 21px;
  border: 1px solid var(--c-border);
  white-space: nowrap;
  overflow: hidden;
}
#browsetable td.item {
  white-space: normal;
  text-align: left;
  overflow: visible;
}
.br-name-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
}
.br-name-wrap > label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.br-name-wrap > label a.title {
  display: block;
}
/* Title truncation — browse10 only */
.br-trunc .br-name-wrap > label a.title,
.br-trunc .br-name-wrap > a.title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.br-trunc .br-name-wrap > a.title {
  display: block;
  min-width: 0;
}
.br-name-wrap > .br-lock-icon,
.br-name-wrap > .br-nuke-icon {
  flex-shrink: 0;
}
#browsetable td.br-cat-cell {
  text-align: center;
}
#browsetable td.br-info-cell {
  overflow: visible;
}
#browsetable td.less {
  padding: 4px 5px;
}
#browsetable th {
  padding: 3px 6px;
  font-size: 11px;
  line-height: 21px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  color: var(--c-primary);
  border: 1px solid var(--c-border);
}
/* header row — browsers auto-wrap flat <tr> in <tbody> */
#browsetable > tbody > tr:first-child > th {
  background: rgba(37, 99, 235, 0.07);
  border-bottom: 2px solid var(--c-primary);
}

/* Action icon divs — replace sprite images with Font Awesome */
div.icon {
  width: 16px;
  height: 16px;
  background-image: none !important;
  border-radius: 3px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s;
  position: relative;
}
table.data td.icons div.icon {
  opacity: 1 !important;
}
div.icon:hover {
  background: var(--c-subnav);
}
div.icon_nzb > a {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  font-size: 0;
}
div.icon_nzb::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f019";
  color: #4db5ff;
  font-size: 12px;
}
div.icon.icon_nzb.tick_icon::before {
  content: "\f019";
  color: var(--c-success) !important;
}
div.icon_sab_clicked::before,
div.icon_nzbget_clicked::before,
div.icon_nzbvortex_clicked::before {
  color: var(--c-success) !important;
}
[data-theme="dark"] div.icon_cart_clicked::before,
[data-theme="dark"] div.icon_sab_clicked::before,
[data-theme="dark"] div.icon_nzbget_clicked::before,
[data-theme="dark"] div.icon_nzbvortex_clicked::before {
  color: var(--c-success) !important;
}
div.icon_cart {
  cursor: pointer;
}
div.icon_cart::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f07a";
  color: #4db5ff;
  font-size: 12px;
}
div.icon_cart_clicked::before {
  color: var(--c-success) !important;
}
div.icon_sab::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f362";
  color: #4db5ff;
  font-size: 12px;
}
div.icon_nzbget::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f0ee";
  font-size: 12px;
}
/* td.icons: keep as table-cell (no display:flex — it breaks td border rendering) */
table.data td.icons {
  width: auto !important;
  padding: 4px 6px;
  vertical-align: middle;
  white-space: nowrap;
}

/* New NZB rows highlight */
tr.new-nzb td {
  background: rgba(22, 199, 132, 0.06) !important;
}
tr.new-nzb:hover td {
  background: rgba(22, 199, 132, 0.12) !important;
}

/* ── Pager ── */
div.pager {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
}
div.pager a,
div.pager span {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 28px;
  padding: 0 8px;
  border-radius: 5px !important;
  border: 1px solid var(--c-border) !important;
  background: var(--c-surface) !important;
  color: var(--c-secondary) !important;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition:
    background 0.12s,
    color 0.12s,
    border-color 0.12s;
}
div.pager a:hover {
  background: rgba(37, 99, 235, 0.08) !important;
  color: var(--c-primary) !important;
  border-color: var(--c-primary) !important;
}
div.pager .current {
  background: var(--c-primary) !important;
  color: #fff !important;
  border-color: var(--c-primary) !important;
  font-weight: 700 !important;
}
div.pager input#txtjumptopage {
  height: 28px;
  padding: 0 6px;
  border-radius: 5px;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-body);
  font-size: 12px;
  width: 50px;
  text-align: center;
  outline: none;
  transition: border-color 0.12s;
}
div.pager input#txtjumptopage:focus {
  border-color: var(--c-primary);
}

/* Pager + multi-ops row */
#browse-row-form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 0;
  padding: 5px 0;
}
.browse-row-form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}
.pager-opt-width {
  flex: 1 1 0;
  min-width: 0;
}
.selected-opt-width {
  flex: 1 1 0;
  min-width: 0;
}
.nzb_multi_operations--wrapper {
  margin-top: 10px;
}
.nzb_multi_operations {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex: 1;
  margin-top: 10px;
  margin-bottom: 8px;
}
.nzb_multi_operations small {
  color: var(--c-muted);
  font-size: 11px;
  margin-right: 2px;
}

/* Filter box (Top Downloads dropdown) */
.br-filter-box {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--c-secondary);
  background: var(--c-subnav);
  border: 1px solid var(--c-border);
  border-radius: 5px;
  padding: 2px 8px;
}
.br-filter-box label,
.br-filter-box span {
  color: var(--c-muted);
  white-space: nowrap;
}
.br-filter-box select {
  border: 1px solid var(--c-border);
  border-radius: 3px;
  padding: 4px 3px;
  background: var(--c-surface);
  color: var(--c-body);
}
.br-filter-box form {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
input[type="submit"].br-clear-new-btn {
  appearance: none;
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: var(--c-primary);
  border: 1px solid var(--c-primary);
  cursor: pointer;
  transition:
    background 0.12s,
    color 0.12s,
    border-color 0.12s;
  line-height: 1.6;
}
div.nzb_multi_operations input[type="submit"],
div.nzb_multi_operations input[type="button"] {
  padding: 2px 8px !important;
  font-size: 11px !important;
  border-radius: 4px !important;
}
/* High-specificity overrides to beat legacy div.nzb_multi_operations .class gradient rules */
div.nzb_multi_operations input.nzb_multi_operations_download,
div.nzb_multi_operations input.nzb_multi_operations_download:hover {
  background: var(--c-success) !important;
  color: #fff !important;
  border: none !important;
}
div.nzb_multi_operations input.nzb_multi_operations_cart,
div.nzb_multi_operations input.nzb_multi_operations_cart:hover {
  background: var(--c-primary) !important;
  color: #fff !important;
  border: none !important;
}
div.nzb_multi_operations input.nzb_multi_operations_sab,
div.nzb_multi_operations input.nzb_multi_operations_sab:hover,
div.nzb_multi_operations input.nzb_multi_operations_nzbget,
div.nzb_multi_operations input.nzb_multi_operations_nzbget:hover {
  background: #ee802f !important;
  color: #fff !important;
  border: none !important;
}
div.nzb_multi_operations input.nzb_multi_operations_report,
div.nzb_multi_operations input.nzb_multi_operations_report:hover {
  background: var(--c-primary) !important;
  color: #fff !important;
  border: none !important;
}
div.nzb_multi_operations input.nzb_multi_operations_edit,
div.nzb_multi_operations input.nzb_multi_operations_edit:hover {
  background: #b45309 !important;
  color: #fff !important;
  border: none !important;
}
div.nzb_multi_operations input.nzb_multi_operations_delete,
div.nzb_multi_operations input.nzb_multi_operations_delete:hover {
  background: var(--c-danger) !important;
  color: #fff !important;
  border: none !important;
}
div.nzb_multi_operations input.nzb_multi_operations_reprocess,
div.nzb_multi_operations input.nzb_multi_operations_reprocess:hover,
div.nzb_multi_operations input.nzb_multi_operations_rebuilt,
div.nzb_multi_operations input.nzb_multi_operations_rebuilt:hover {
  background: #64748b !important;
  color: #fff !important;
  border: none !important;
}

/* Nuke icon (nuked release indicator) */
.br-nuke-icon {
  color: var(--c-danger);
  font-size: 11px;
  margin-left: 3px;
  vertical-align: middle;
}

/* Browse All page header */
.ba-header {
  position: relative;
  display: block;
  text-align: left;
  padding: 4px 0 8px;
}
.ba-heading {
  font-size: 22px;
  font-weight: 500;
  margin: 0;
  display: inline-flex;
  align-items: center;
}
.ba-heading .br-rss-link {
  position: relative;
  top: -5px;
}
.ba-header-controls {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
}
.ba-top-dl-form {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ba-top-dl-form label {
  font-size: 13px;
  color: var(--c-muted);
  white-space: nowrap;
  font-weight: 500;
}

/* Browse page footer info box */
.browse-final-box {
  margin-left: auto;
  width: fit-content;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  padding: 8px 14px;
  background: var(--c-subnav);
  font-size: 12px;
}
.browserow {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: space-between;
  padding: 3px 0;
}
.browserow + .browserow {
  border-top: 1px solid var(--c-border);
}
.browserow label {
  color: var(--c-muted);
  white-space: nowrap;
  font-weight: 500;
  cursor: default;
  margin: 0;
}
.brsnums {
  display: flex;
  align-items: center;
  gap: 6px;
}
.brsnums font[color="green"] {
  color: var(--c-primary) !important;
  font-weight: 600;
  font-style: normal;
}
.brsrowlink {
  font-size: 11px;
  color: var(--c-muted) !important;
  text-decoration: none;
}
.brsrowlink:hover {
  color: var(--c-primary) !important;
}
.brsrowlink font {
  color: inherit !important;
}

/* Extra button color variants */
.btn-warning {
  background: #ee802f !important;
  color: #fff !important;
}
.btn-warning:hover {
  background: #92400e !important;
}
.btn-purple {
  background: #64748b !important;
  color: #fff !important;
}
.btn-purple:hover {
  background: #475569 !important;
}

/* Mobile browse cards — hidden by default, shown via media query below */
.br-mobile-cards {
  display: none;
}

/* ── Colorbox (jquery.colorbox-min.js v1.3.19) ── */
/* Overlay: JS creates it without position:fixed — CSS must provide it */
#cboxOverlay {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.62);
  z-index: 9000;
}
#colorbox {
  z-index: 9001;
  outline: none;
}
/* Zero out the 9-patch sprite border pieces so JS calculates padding=0 */
#cboxTopLeft,
#cboxTopRight,
#cboxBottomLeft,
#cboxBottomRight {
  width: 0 !important;
  height: 0 !important;
}
#cboxTopCenter,
#cboxBottomCenter {
  height: 0 !important;
}
#cboxMiddleLeft,
#cboxMiddleRight {
  width: 0 !important;
}
/* Wrapper: visual container with rounded corners */
#cboxWrapper {
  background: var(--c-surface);
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
/* Content: JS sizes this to innerWidth/innerHeight */
#cboxContent {
  position: relative;
  background: var(--c-surface) !important;
  overflow: hidden;
}
/* NFO pre */
#cboxLoadedContent pre {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  white-space: pre-wrap;
  margin: 0;
  padding: 10px 14px;
  color: var(--c-body);
}
/* Title bar — blue header at top */
#cboxTitle {
  position: absolute !important;
  top: 0;
  bottom: auto;
  left: 0;
  right: 0;
  z-index: 4;
  height: 38px;
  line-height: 38px;
  padding: 0 42px 0 14px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--c-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#cboxCurrent {
  display: none !important;
}
#cboxLoadedContent {
  overflow: auto !important;
  margin-top: 38px !important;
  height: auto !important;
}
/* Close button — top-right inside the blue header */
#cboxClose {
  position: absolute !important;
  top: 5px !important;
  right: 6px !important;
  bottom: auto !important;
  width: 28px !important;
  height: 28px !important;
  font-size: 0;
  cursor: pointer;
  z-index: 5;
  border-radius: 5px;
  transition: background 0.12s;
}
#cboxClose::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f00d";
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}
#cboxClose:hover {
  background: rgba(255, 255, 255, 0.15);
}
#cboxClose:hover::before {
  color: #fff;
}
/* Prev / Next navigation — hidden, not used on these modals */
#cboxPrevious,
#cboxNext {
  display: none !important;
}

/* ── Console modal (viewconsole.tpl loaded in colorbox) ── */
/* ── Console/Game modal (viewconsole.tpl loaded in colorbox) ── */
#consoleinfo {
  padding: 0;
  color: var(--c-body);
  font-size: 13px;
  background-image: linear-gradient(rgba(243, 246, 251, 0.88), rgba(243, 246, 251, 0.88)), var(--cv-bg, none);
  background-size: cover;
  background-position: center;
}
body[data-theme="dark"] #consoleinfo {
  background-image: linear-gradient(rgba(13, 18, 28, 0.88), rgba(13, 18, 28, 0.88)), var(--cv-bg, none);
}
.cv-wrap {
  padding: 14px;
}
.cv-body {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.cv-left {
  flex-shrink: 0;
  width: 220px;
}
.cv-shot-img {
  /* width: 100%; */
  max-width: 100%;
  display: block;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
.cv-right {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.cv-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--c-body);
  margin: 0 0 5px;
  line-height: 1.3;
}
.cv-year {
  font-weight: 400;
  color: var(--c-secondary);
}
.cv-genre {
  font-size: 12px;
  color: var(--c-secondary);
  margin: 0 0 8px;
}
.cv-ratings {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
}
.cv-badge {
  display: inline-block;
  padding: 2px 8px;
  background: var(--c-primary);
  color: #fff;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}
.cv-votes {
  font-size: 11px;
  color: var(--c-secondary);
}
.cv-section {
  margin: 0 0 10px;
}
.cv-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: var(--c-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 3px;
}
.cv-section .more {
  font-size: 12px;
  line-height: 1.55;
}
.cv-details {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 6px 0 10px;
  font-size: 12px;
  color: var(--c-body);
}
.cv-details strong {
  color: var(--c-secondary);
  font-weight: 600;
}
.cv-bottom-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.cv-bottom-row .cv-ratings {
  margin: 0;
}
.cv-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.cv-btn {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  text-decoration: none !important;
  color: var(--c-body) !important;
  transition:
    background 0.12s,
    border-color 0.12s;
}
.cv-btn:hover {
  background: var(--c-surface-2);
}
.cv-btn-primary {
  background: var(--c-primary) !important;
  border-color: var(--c-primary) !important;
  color: #fff !important;
}
.cv-btn-primary:hover {
  background: var(--c-primary-hov) !important;
  border-color: var(--c-primary-hov) !important;
}
span.more {
  color: var(--c-body) !important;
}

/* ── Movie modal (viewmovie.tpl loaded in colorbox) ── */
#movieinfo {
  padding: 0;
  color: var(--c-body);
  font-size: 13px;
  background-image: linear-gradient(rgba(243, 246, 251, 0.88), rgba(243, 246, 251, 0.88)), var(--mv-bg, none);
  background-size: cover;
  background-position: center;
}
body[data-theme="dark"] #movieinfo {
  background-image: linear-gradient(rgba(13, 18, 28, 0.88), rgba(13, 18, 28, 0.88)), var(--mv-bg, none);
}
.mv-wrap {
  padding: 16px;
}
.tv-releases-wrap {
  overflow-x: auto;
}
#movieinfo .mv-layout {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
#movieinfo .mv-cover {
  flex-shrink: 0;
  width: 150px;
}
#movieinfo .mv-cover-img {
  width: 100%;
  display: block;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
#movieinfo .mv-body {
  flex: 1;
  overflow: hidden;
}
#movieinfo .mv-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--c-body);
  margin: 0 0 6px;
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 10px !important;
}
#movieinfo .mv-year {
  font-size: 14px;
  font-weight: 400;
  color: var(--c-muted);
}
#movieinfo .mv-meta {
  font-size: 12px;
  color: var(--c-muted);
  margin: 0 0 10px;
}
#movieinfo .mv-sep {
  margin: 0 5px;
}
#movieinfo .mv-ratings {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}
#movieinfo .mv-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  background: transparent;
  border: 1px solid;
  white-space: nowrap;
}
#movieinfo .mv-badge-imdb {
  color: #e6a817;
  border-color: #e6a817;
}
#movieinfo .mv-badge-rt {
  color: #fa4032;
  border-color: #fa4032;
}
#movieinfo .mv-badge-mc {
  color: #66cc33;
  border-color: #66cc33;
}
#movieinfo .mv-badge-tmdb {
  color: #01b4e4;
  border-color: #01b4e4;
}
.mv-tomato {
  font-size: 12px;
  line-height: 1;
}
#movieinfo .mv-badge small {
  font-weight: 400;
  opacity: 0.8;
  font-size: 10px;
}
#movieinfo .mv-tagline {
  font-size: 12px;
  font-style: italic;
  color: var(--c-muted);
  margin: 0 0 8px;
}
#movieinfo .mv-plot {
  font-size: 12px;
  color: var(--c-body);
  line-height: 1.6;
  margin: 0 0 10px;
}
#movieinfo .mv-detail {
  font-size: 12px;
  color: var(--c-body);
  line-height: 1.5;
  margin: 0 0 10px;
}
#movieinfo .mv-detail strong {
  color: var(--c-secondary);
  font-weight: 600;
}
#movieinfo .mv-bottom-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
#movieinfo .mv-bottom-row .mv-ratings {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}
#movieinfo .mv-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
/* TV popup overrides */
#movieinfo.tv-popup .mv-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
#movieinfo.tv-popup .mv-title-row .mv-title {
  margin-bottom: 0;
  flex: 1;
}
#movieinfo.tv-popup .mvm-rating-top {
  flex-shrink: 0;
  margin-top: 2px;
}
#movieinfo.tv-popup .mv-info-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0 10px;
}
#movieinfo.tv-popup .mv-info-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
}
#movieinfo.tv-popup .mv-info-label {
  font-weight: 600;
  color: var(--c-secondary, #6b7280);
  min-width: 46px;
  flex-shrink: 0;
}
#movieinfo.tv-popup .mv-info-val {
  flex: 1;
}
#movieinfo.tv-popup .mv-info-net {
  font-size: 12px;
  color: var(--c-secondary, #6b7280);
  flex-shrink: 0;
}
#movieinfo.tv-popup .mv-bottom-row {
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}
#movieinfo.tv-popup .mv-links {
  justify-content: flex-end;
}
#coverstable {
  margin-top: 8px;
  margin-bottom: 8px;
  border-collapse: collapse;
}
#coverstable td,
#coverstable th {
  border: 1px solid var(--c-border, #d1d5db);
}
#movieinfo .mv-btn {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 6px;
  text-decoration: none !important;
  border: 1px solid var(--c-border);
  background: var(--c-bg);
  color: var(--c-body) !important;
  transition:
    background 0.12s,
    border-color 0.12s;
}
#movieinfo .mv-btn:hover {
  background: var(--c-surface);
  border-color: var(--c-primary);
  color: var(--c-primary) !important;
}
#movieinfo .mv-btn-primary {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff !important;
}
#movieinfo .mv-btn-primary:hover {
  background: var(--c-primary-hov);
  border-color: var(--c-primary-hov);
  color: #fff !important;
}

/* ── Music modal (viewmusic.tpl loaded in colorbox) ── */
#musicinfo {
  padding: 0;
  color: var(--c-body);
  font-size: 13px;
}
.mu-wrap {
  padding: 16px;
}
.mu-layout {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.mu-cover {
  flex-shrink: 0;
  width: 160px;
}
.mu-cover-img {
  width: 100%;
  display: block;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}
.mu-body {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.mu-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--c-body);
  margin: 0 0 4px;
  line-height: 1.3;
}
.mu-year {
  font-size: 14px;
  font-weight: 400;
  color: var(--c-secondary);
}
.mu-artist {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-primary);
  margin: 0 0 4px;
}
.mu-genre {
  font-size: 12px;
  color: var(--c-secondary);
  margin: 0 0 10px;
}
.mu-details {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  font-size: 12px;
  color: var(--c-body);
  margin: 0 0 12px;
}
.mu-details strong {
  color: var(--c-secondary);
  font-weight: 600;
}
.mu-details .fa {
  color: var(--c-secondary);
  width: 14px;
  text-align: center;
}
.mu-section {
  margin: 0 0 10px;
}
.mu-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: var(--c-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 5px;
}
.mu-tracklist {
  margin: 0;
  padding-left: 18px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px 16px;
}
.mu-tracklist li {
  font-size: 12px;
  color: var(--c-body);
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mu-review {
  font-size: 12px;
  color: var(--c-body);
  line-height: 1.6;
  margin: 0;
}

/* ── Edit Release popup ── */
.edit-release-form {
  padding: 12px 16px 4px;
}
.erf-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.erf-row label {
  width: 86px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-body);
  text-align: right;
}
.erf-row select,
.erf-row input[type="text"],
.erf-row input[type="password"] {
  flex: 1;
  padding: 5px 8px;
  border: 1px solid var(--c-border, #d1d5db);
  border-radius: 5px;
  font-size: 12px;
  background: var(--c-surface, #fff);
  color: var(--c-body);
  min-width: 0;
}
.erf-row select:focus,
.erf-row input:focus {
  outline: none;
  border-color: var(--c-primary, #2563eb);
}
.erf-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
  padding-bottom: 4px;
}
.erf-save-btn {
  padding: 7px 20px;
  background: var(--c-primary, #2563eb);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.erf-save-btn:hover {
  opacity: 0.88;
}
.erf-success {
  padding: 20px 16px;
  color: #065f46;
  background: #d1fae5;
  border-radius: 6px;
  margin: 12px;
  font-size: 13px;
  font-weight: 500;
}
body[data-theme="dark"] .erf-success {
  background: #064e3b;
  color: #6ee7b7;
}

/* ── Details page (viewnzb) ── */

/* Mobile-only header (title + poster) — hidden on desktop, which uses the
   tabbed table instead. Shown/styled inside the mobile media query below. */
.vn-mobile-header {
  display: none;
}

/* Mobile-only comment cards — lives inside #tabs-7 (unlike the rest of the
   .vn-mobile-* blocks, which live inside .vn-mobile-header), so it needs
   its own hide rule: without this it would appear on desktop too once the
   Comments tab is clicked. Shown/styled inside the mobile media query. */
.vn-mobile-comments {
  display: none;
}

/* Comments click-to-reveal summary — same chevron convention as the /rss
   page's toggle. Stays open by default (desktop never sees it collapsed,
   since #tabs-7 is already gated behind its own tab click there); a small
   inline script closes it on mobile viewports specifically on load. */
.vn-comments-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-heading);
  cursor: pointer;
  list-style: none;
  user-select: none;
  padding: 4px 0 10px;
}
.vn-comments-summary::-webkit-details-marker {
  display: none;
}
.vn-comments-summary::before {
  content: "\f105";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 12px;
  color: var(--c-muted);
  transition: transform 0.15s;
}
.vn-comments-details[open] > .vn-comments-summary::before {
  transform: rotate(90deg);
}

/* Strip the browse-grid table treatment — details is a definition list */
/* ── Nested innerdata tables — wrapper owns card styling, table.data does the rest ── */
.innerdata-td {
  padding: 0 !important;
  background: transparent !important;
}
.innerdata-wrap {
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  border: 1px solid var(--c-border);
}
table.innerdata {
  border-radius: 0 !important;
  overflow: visible !important;
  box-shadow: none !important;
}
table.innerdata th {
  padding: 3px 6px !important;
  font-size: 11px !important;
  line-height: 21px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: var(--c-primary) !important;
  border: 1px solid var(--c-border) !important;
  text-align: left !important;
  width: auto !important;
  min-width: unset !important;
  max-width: unset !important;
  background: rgba(37, 99, 235, 0.07) !important;
  border-bottom: 2px solid var(--c-primary) !important;
}

table.innerdata th.mid {
  text-align: center !important;
}

#detailstable {
  box-shadow: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
  overflow: visible !important;
}

/* Label column — matches profile page label style */
#detailstable > tbody > tr > th,
#detailstable > tr > th {
  width: 130px !important;
  min-width: 110px !important;
  max-width: 150px !important;
  text-align: right !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: capitalize !important;
  color: var(--c-secondary, #475569) !important;
  background: var(--c-surface) !important;
  vertical-align: top !important;
  padding: 7px 12px 7px 10px !important;
  white-space: nowrap !important;
  border-right: 1px solid var(--c-border) !important;
  border-bottom: 1px solid var(--c-border) !important;
}
[data-theme="dark"] #detailstable > tbody > tr > th,
[data-theme="dark"] #detailstable > tr > th {
  background: var(--c-surface) !important;
  color: var(--c-muted) !important;
}

/* Value column — direct children only, does not cascade into nested tables */
#detailstable > tbody > tr > td,
#detailstable > tr > td {
  background: var(--c-surface) !important;
  padding: 3px 4px !important;
  font-size: 13px !important;
  color: var(--c-body) !important;
  vertical-align: top !important;
  word-break: break-word !important;
  border-bottom: 1px solid var(--c-border) !important;
  vertical-align: middle !important;
}
.movie-info-col a {
  color: var(--c-link) !important;
}
.movie-info-col a:hover {
  color: var(--c-link-hov) !important;
}
.det-link {
  color: var(--c-link) !important;
}
.det-link:hover {
  color: var(--c-link-hov) !important;
}

/* No hover highlight — definition table, not a clickable grid */
#detailstable > tbody > tr:hover > th,
#detailstable > tbody > tr:hover > td:not(.innerdata-td),
#detailstable > tr:hover > th,
#detailstable > tr:hover > td:not(.innerdata-td),
#filestable tr:hover td,
#tabs-8 #browsetable tr:hover td {
  background-color: var(--c-surface) !important;
}

/* Kill hover on data cells in nested tables inside detailstable */
#detailstable table tr:hover > td {
  background-color: initial !important;
}

/* Release name text */
#detailstable td font[size] {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--c-body) !important;
  line-height: 1.4 !important;
}

/* Images inside the table td */
#detailstable td img {
  border-radius: 6px;
  vertical-align: top;
  max-width: 100%;
}

/* Download buttons row — flexbox for reliable side-by-side layout */
.btn-downloads {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
  padding: 4px 0 !important;
  vertical-align: middle !important;
}
.btn-downloads .icon {
  display: contents !important; /* transparent wrapper — child <a> becomes the flex item */
}
.btn-downloads .btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 5px 11px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--c-primary) !important;
  background: transparent !important;
  border-radius: 5px !important;
  border: 1.5px solid var(--c-primary) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  margin: 0 !important;
  transition:
    background 0.15s,
    color 0.15s !important;
  letter-spacing: 0 !important;
  line-height: 1.4 !important;
}
.btn-downloads .btn:hover {
  background: var(--c-primary) !important;
  color: #fff !important;
}

/* FA6 icons for download buttons — same characters as browse page icons */
.btn-downloads .icon_nzb1 > a::before,
.btn-downloads .icon_nzb1 > a:before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f019";
}
.btn-downloads .icon_cart_div > a::before,
.btn-downloads .icon_cart_div > a:before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f07a";
}
.btn-downloads .icon_sab_div > a::before,
.btn-downloads .icon_sab_div > a:before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f362";
}
.btn-downloads .icon_nzbgetbig_div > a::before,
.btn-downloads .icon_nzbgetbig_div > a:before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f0ee";
}

/* Comment info icon — FA6 circle-info (\f05a) via CSS, not FA4 kit */
.nzb-info-icon {
  display: inline-block;
  cursor: pointer;
  vertical-align: middle;
  margin-left: 5px;
  font-style: normal;
}
.nzb-info-icon::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f05a";
  color: var(--c-primary, #0070ff);
  font-size: 15px;
}

/* Report NZB submit buttons (inline form, not the popup) */
.cnfvalidatenxb .report-btn {
  display: inline-block !important;
  width: auto !important;
  padding: 5px 12px !important;
  font-size: 12px !important;
  border-radius: 5px !important;
  cursor: pointer !important;
  font-weight: 500 !important;
  border: none !important;
  margin: 0 4px 0px 0 !important;
}

/* NFO tab — theme-aware monospace block */
#nfo {
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  line-height: 1.55;
  white-space: pre;
  overflow-x: auto;
  overflow-y: auto;
  padding: 18px 20px;
  background: #f8fafc;
  color: #1e293b;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  margin: 0;
  max-height: 580px;
}
body[data-theme="dark"] #nfo {
  background: #0f172a;
  color: #cbd5e1;
  border-color: #334155;
}

/* descfull hidden by default; shown when more... is clicked */
span.descfull {
  display: none;
}

/* span.more — fix hardcoded #222 color for dark mode */
#detailstable span.more,
#detailstable .descinitial,
#detailstable .descfull {
  color: var(--c-body) !important;
}
#detailstable td span.more {
  display: block;
  margin-bottom: 5px;
}

/* ── Images row: movie poster left, backdrop right ── */
.images-movie-row {
  display: flex;
  gap: 12px;
  padding-left: 10px;
  align-items: center;
}
.images-movie-row .img-poster {
  height: 260px;
  width: auto;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  display: block;
}
.images-movie-row .backdrop-wrap {
  display: flex;
  flex: 1;
  justify-content: center;
}
.images-movie-row .img-backdrop {
  width: auto;
  max-width: 500px !important;
  height: 260px;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  display: block;
}

/* ── Images row: TV banner / cover + episode screenshot ── */
.images-tv-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.img-tv-banner {
  width: 700px;
  height: 130px;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  display: block;
  max-width: 100%;
}
.img-tv-poster {
  height: 200px;
  width: auto;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  display: block;
}
.img-tv-screenshot {
  height: 200px;
  width: auto;
  max-width: 100%;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  display: block;
}

/* 0day alert banner */
#alert_beta {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: #991b1b;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 13px;
margin-bottom: 5px;
}
body[data-theme="dark"] #alert_beta {
  background: #450a0a;
  border-color: #7f1d1d;
  color: #fca5a5;
}
#alert_beta .close {
  float: right;
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: inherit;
}

/* Footer hint */
#tabs-1 .hint {
  text-align: center;
  padding: 5px 0;
  font-size: 12px;
  color: var(--c-muted);
}

/* ── Report NZB popup ── */
.report-actions-wrapper {
  padding: 14px 16px 16px;
  font-size: 13px;
}
.report-actions-wrapper > .report-label {
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--c-body);
}
.report-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.report-btn {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  transition: opacity 0.15s;
}
.report-btn:hover {
  opacity: 0.85;
}
.report-btn.password {
  background: #fee2e2;
  color: #991b1b;
}
.report-btn.wrongcat {
  background: #fef3c7;
  color: #92400e;
}
.report-btn.wronginfo {
  background: #dbeafe;
  color: #1e40af;
}
.report-btn.other {
  background: #f3f4f6;
  color: #374151;
}
body[data-theme="dark"] .report-btn.password {
  background: #450a0a;
  color: #fca5a5;
}
body[data-theme="dark"] .report-btn.wrongcat {
  background: #451a03;
  color: #fde68a;
}
body[data-theme="dark"] .report-btn.wronginfo {
  background: #1e3a5f;
  color: #93c5fd;
}
body[data-theme="dark"] .report-btn.other {
  background: #1f2937;
  color: #d1d5db;
}
.report-reason-wrapper {
  margin-top: 12px;
}
.report-reason-wrapper label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 12px;
  color: var(--c-body);
}
.report-reason-wrapper textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 9px;
  border: 1px solid var(--c-border, #d1d5db);
  border-radius: 6px;
  font-size: 12px;
  resize: vertical;
  background: var(--c-surface, #fff);
  color: var(--c-body);
  min-height: 70px;
}
.report-reason-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 8px;
}
.report-btn.cancel-btn {
  background: #f3f4f6;
  color: #374151;
  width: auto;
  padding: 7px 16px;
}
.report-btn.confirm-btn {
  background: var(--c-primary, #2563eb);
  color: #fff;
  width: auto;
  padding: 7px 16px;
}
body[data-theme="dark"] .report-btn.cancel-btn {
  background: #1f2937;
  color: #d1d5db;
}
#bulk-report-message h4 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-body);
}
#bulk-report-message ul {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 160px;
  overflow-y: auto;
}
#bulk-report-message li {
  padding: 4px 8px;
  border-radius: 4px;
  margin-bottom: 4px;
  font-size: 12px;
}
#bulk-report-message li.success {
  background: #d1fae5;
  color: #065f46;
}
#bulk-report-message li.warning {
  background: #fef3c7;
  color: #92400e;
}
#bulk-report-message li.error {
  background: #fee2e2;
  color: #991b1b;
}
body[data-theme="dark"] #bulk-report-message li.success {
  background: #064e3b;
  color: #6ee7b7;
}
body[data-theme="dark"] #bulk-report-message li.warning {
  background: #451a03;
  color: #fde68a;
}
body[data-theme="dark"] #bulk-report-message li.error {
  background: #450a0a;
  color: #fca5a5;
}

/* ══════════════════════════════════════════════════════════════
   ── viewnzb: styles moved from inline <style> block in tpl ──
   ══════════════════════════════════════════════════════════════ */

/* ── Movie info 2-col grid ── */
.movie-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 24px;
  margin: 8px 0;
}
.movie-info-col {
  line-height: 1.8;
}

/* ── TV info: grid left, buttons right ── */
.tvinfo-meta-wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 8px;
  margin-bottom: 5px;
  margin-right: 10px;
  gap: 16px;
}
.tvinfo-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 24px;
  flex: 1;
}
.tvinfo-info-col {
  line-height: 1.8;
}
.tvinfo-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-end;
  flex-shrink: 0;
}

/* ── Movie info ratings + link buttons ── */
.rss-link-icon {
  color: #f26522;
  font-size: 14px;
  margin-left: 8px;
  vertical-align: middle;
}
.movie-meta-wrap {
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 5px;
  margin-right: 10px;
}

.movie-ratings {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 0px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.rating-badge small {
  font-weight: 400;
  font-size: 11px;
  opacity: 0.8;
}

/* Icons via FA6 ::before — inherits badge text color, no emoji color issues */
.rating-badge::before {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  font-size: 11px;
  margin-right: 2px;
  line-height: 1;
  display: inline-block;
}

.imdb-badge,
.tmdb-badge,
.rt-badge,
.mc-badge {
  position: relative;
}
.imdb-badge::before {
  content: "";
  background-image: url(/imagesnew/icons/imdb.png);
  width: 30px;
  height: 88%;
  min-height: 15px;
  background-size: contain;
  background-repeat: no-repeat;
margin-right: 3px;
} /* fa-star        — IMDb            */
.tmdb-badge::before {
  content: "";
  background-image: url(/imagesnew/icons/tmdb.png);
  width: 20px;
  height: 100%;
  min-height: 18px;
  background-size: contain;
  background-repeat: no-repeat;
}
.rt-badge::before {
  content: "";
  background-image: url(/imagesnew/icons/rt.png);
  width: 20px;
  height: 100%;
  min-height: 18px;
  background-size: contain;
  background-repeat: no-repeat;
}
.mc-badge::before {
  content: "";
  background-image: url(/imagesnew/icons/metacritic.png);
  width: 20px;
  height: 100%;
  min-height: 18px;
  background-size: contain;
  background-repeat: no-repeat;
}
.thetvdb-badge::before {
  content: "";
  background-image: url(/imagesnew/icons/tvdb.png);
  width: 20px;
  height: 100%;
  min-height: 18px;
  background-size: contain;
  background-repeat: no-repeat;
}
.igdb-badge::before {
  content: "";
  background-image: url(/imagesnew/icons/igdb.png);
  width: 40px;
  min-height: 18px;
  background-size: contain;
  background-repeat: no-repeat;
}
[data-theme="dark"] .igdb-badge::before {
  content: "";
  background-image: url(/imagesnew/icons/igdbdark.png);
  width: 40px;
  min-height: 18px;
  background-size: contain;
  background-repeat: no-repeat;
}
.igdb-badge {
  background: #fbe6f5;
  color: black;
  border: 1px solid #d60be7;
}
[data-theme="dark"] .igdb-badge {
  background: #8505a9;
  color: #b8b2b2;
  border: 1px solid #d60be7;
}
.rt .thetvdb-badge {
  background: #f1f5f9;
  color: #166534;
  border: 1px solid #86efac;
}
.rt-badge {
  background: #fff1f0;
  color: #c0392b;
  border: 1px solid #fca5a5;
}
.tmdb-badge {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #86efac;
}
.mc-badge {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #93c5fd;
}
.imdb-badge {
  background: #fefce8;
  color: #854d0e;
  border: 1px solid #fde047;
}

[data-theme="dark"] .rt-badge {
  background: #450a0a;
  color: #fca5a5;
  border-color: #7f1d1d;
}
[data-theme="dark"] .mc-badge {
  background: #052e16;
  color: #86efac;
  border-color: #14532d;
}
[data-theme="dark"] .tmdb-badge {
  background: #1e3a5f;
  color: #93c5fd;
  border-color: #1d4ed8;
}
[data-theme="dark"] .imdb-badge {
  background: #422006;
  color: #fde047;
  border-color: #854d0e;
}
[data-theme="dark"] .thetvdb-badge {
  background: #555;
  color: #fdfdfd;
  border: 1px solid #86efac;
}
.movie-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 4px;
}

.tv-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 4px;
}

.movie-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  border: 1.5px solid var(--c-border);
  color: var(--c-body) !important;
  background: var(--c-surface);
  text-decoration: none !important;
  cursor: pointer;
  transition:
    border-color 0.15s,
    color 0.15s;
  white-space: nowrap;
}
.watchlist-btn {
  border: 1.5px solid #16c784 !important;
}
.watchlist-btn-minus {
  border: 1.5px solid #da4f49 !important;
}
.movie-link-btn:hover {
  border-color: var(--c-primary) !important;
  color: var(--c-primary) !important;
}
button.movie-link-btn {
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
  line-height: 1;
}
.movie-link-primary {
  background: var(--c-primary) !important;
  color: #fff !important;
  border-color: var(--c-primary) !important;
}
.movie-link-primary:hover {
  background: var(--c-primary-hov, #3391ff) !important;
  border-color: var(--c-primary-hov, #3391ff) !important;
  color: #fff !important;
}

/* AJAX spinner */
.dataloader {
  border: 3px solid var(--c-border, #e2e8f0);
  border-radius: 50%;
  border-top-color: var(--c-primary, #0070ff);
  width: 20px;
  height: 20px;
  animation: nzb-spin 2s linear infinite;
  margin: 2px auto;
}
@keyframes nzb-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ── Report NZB popup: explicit per-button hover (prevents global blue override) ── */
.report-btn.password:hover {
  background: #fca5a5 !important;
  color: #991b1b !important;
  opacity: 1 !important;
}
.report-btn.wrongcat:hover {
  background: #fcd34d !important;
  color: #92400e !important;
  opacity: 1 !important;
}
.report-btn.wronginfo:hover {
  background: #93c5fd !important;
  color: #1e40af !important;
  opacity: 1 !important;
}
.report-btn.other:hover {
  background: #e5e7eb !important;
  color: #374151 !important;
  opacity: 1 !important;
}
[data-theme="dark"] .report-btn.password:hover {
  background: #7f1d1d !important;
  color: #fca5a5 !important;
  opacity: 1 !important;
}
[data-theme="dark"] .report-btn.wrongcat:hover {
  background: #78350f !important;
  color: #fde68a !important;
  opacity: 1 !important;
}
[data-theme="dark"] .report-btn.wronginfo:hover {
  background: #1e3a8a !important;
  color: #93c5fd !important;
  opacity: 1 !important;
}
[data-theme="dark"] .report-btn.other:hover {
  background: #374151 !important;
  color: #d1d5db !important;
  opacity: 1 !important;
}

/* ── Files table card shadow ── */
#filestable {
  margin-top: 8px;
  box-shadow: var(--sh-sm);
}

/* ── Comments tab (#tabs-7): style comment listing table ── */
#tabs-7 .comments table {
  width: 100%;
  border-collapse: collapse;
  box-shadow: var(--sh-sm);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: 20px;
  background: var(--c-surface);
}
#tabs-7 .comments table th {
  background: var(--c-subnav) !important;
  color: var(--c-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  padding: 9px 14px !important;
  border-bottom: 2px solid var(--c-border) !important;
}
[data-theme="dark"] #tabs-7 .comments table th {
  background: var(--c-surface-3) !important;
}
#tabs-7 .comments table td {
  padding: 10px 14px !important;
  font-size: 13px !important;
  vertical-align: top !important;
  border-bottom: 1px solid var(--c-border) !important;
  color: var(--c-body) !important;
}
#tabs-7 .comments table tr:last-child td {
  border-bottom: none !important;
}
.comment-action-cell {
  white-space: nowrap;
  width: 1px;
  padding: 6px 12px !important;
  text-align: center;
  vertical-align: middle;
}
.comment-action-btn {
  color: var(--c-link) !important;
  font-size: 12px;
  text-decoration: none !important;
  padding: 2px 4px;
  border-radius: 3px;
  transition: color 0.15s;
}
.comment-action-btn:hover {
  color: var(--c-link);
}
.comment-action-delete:hover {
  color: #ef4444;
}
.comment-action-divider {
  color: var(--c-border);
  margin: 0 2px;
  font-size: 11px;
}

/* ── Comments tab: add-comment form ── */
#tabs-7 center {
  text-align: left !important;
  max-width: 700px;
  display: block !important;
  margin: 12px auto 0;
}
#tabs-7 form[name="frmcomment"] {
  display: block;
  text-align: left;
}
#tabs-7 form[name="frmcomment"] label {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-heading);
  display: inline;
}
#tabs-7 form[name="frmcomment"] textarea {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 10px 12px !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-sm) !important;
  font-size: 13px !important;
  font-family: var(--font) !important;
  resize: vertical !important;
  background: var(--c-surface) !important;
  color: var(--c-body) !important;
  min-height: 110px !important;
  margin-top: 8px !important;
  transition: border-color 0.15s;
}
#tabs-7 form[name="frmcomment"] textarea:focus {
  border-color: var(--c-primary) !important;
  outline: none;
  box-shadow: 0 0 0 3px var(--c-primary-muted);
}
#tabs-7 form[name="frmcomment"] input[type="submit"] {
  display: inline-block !important;
  width: auto !important;
  background: var(--c-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  padding: 8px 28px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  font-family: var(--font) !important;
  letter-spacing: 0.01em !important;
  margin-top: 10px !important;
  transition:
    opacity 0.15s,
    transform 0.1s;
}
#tabs-7 form[name="frmcomment"] input[type="submit"]:hover {
  opacity: 0.88 !important;
  transform: translateY(-1px);
}

/* ── Similar NZBs tab (#tabs-8): column widths set inline on <th> in viewnzb.tpl ── */
#tabs-8 #browsetable {
  table-layout: fixed !important;
}
#tabs-8 #browsetable th {
  text-transform: capitalize !important;
}
#tabs-8 h1 {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--c-heading) !important;
  margin: 0 0 12px !important;
}
#tabs-8 center {
  text-align: left !important;
}

/* ── Files table — targeted by unique #filestable ID, no page collision ── */
#filestable th {
  padding: 3px 8px !important;
  font-size: 11px !important;
  line-height: 21px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: #0070ff !important;
  border: 1px solid var(--c-border) !important;
  background: rgba(0, 112, 255, 0.07) !important;
  border-bottom: 2px solid #0070ff !important;
  white-space: nowrap !important;
}
/* Sortable plugin wraps th content in <a> — jQuery UI .ui-widget-content a { color: #222 }
   overrides inherited color, so we must target <a> directly */
.ui-widget-content a {
  color: var(--c-link);
}
#filestable th a,
#filestable th a:visited,
#filestable th a:hover {
  color: #0070ff !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  font-size: 11px !important;
}
[data-theme="dark"] #filestable th {
  color: #3391ff !important;
  background: rgba(0, 112, 255, 0.1) !important;
  border-bottom-color: #3391ff !important;
}
[data-theme="dark"] #filestable th a,
[data-theme="dark"] #filestable th a:visited,
[data-theme="dark"] #filestable th a:hover {
  color: #3391ff !important;
}

/* Replace GIF sort arrows with FA6 icons */
#filestable .SortArrow img {
  display: none !important;
}
#filestable .SortArrow {
  display: inline-block;
  font-size: 0; /* hide any stray text inside the span */
  margin-left: 4px;
  vertical-align: middle;
  opacity: 0.35;
}
/* Explicit font-family on ::after itself — pseudo-elements do not reliably inherit */
#filestable .SortArrow::after {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  font-size: 10px;
  content: "\f0dc"; /* fa-sort — neutral updown arrows */
  display: inline-block;
}
#filestable th.Selected .SortArrow {
  opacity: 1;
}
#filestable th.Selected .SortArrow[sortdir="down"]::after {
  content: "\f0dd" !important;
} /* fa-sort-down */
#filestable th.Selected .SortArrow[sortdir="up"]::after {
  content: "\f0de" !important;
} /* fa-sort-up  */

/* ── Comments table — sort links + FA6 sort arrows ── */
.comments table th a,
.comments table th a:visited,
.comments table th a:hover {
  color: var(--c-primary) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  font-size: 11px !important;
}
[data-theme="dark"] .comments table th a,
[data-theme="dark"] .comments table th a:visited,
[data-theme="dark"] .comments table th a:hover {
  color: #3391ff !important;
}
.comments table .SortArrow img {
  display: none !important;
}
.comments table .SortArrow {
  display: inline-block;
  font-size: 0;
  margin-left: 4px;
  vertical-align: middle;
  opacity: 0.35;
}
.comments table .SortArrow::after {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  font-size: 10px;
  content: "\f0dc";
  display: inline-block;
}
.comments table th.Selected .SortArrow {
  opacity: 1;
}
.comments table th.Selected .SortArrow[sortdir="down"]::after {
  content: "\f0dd" !important;
}
.comments table th.Selected .SortArrow[sortdir="up"]::after {
  content: "\f0de" !important;
}

/* Comment user column */
.comment-user-cell {
  vertical-align: top !important;
  padding: 12px 10px !important;
  width: 160px !important;
  min-width: 140px !important;
}
.comment-user {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.comment-avatar {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0;
  border: 2px solid var(--c-border);
  display: block !important;
}
.comment-user-details {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.comment-username {
  font-weight: 600;
  font-size: 13px;
  color: var(--c-link) !important;
  text-decoration: none !important;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 110px;
  display: block;
}
.comment-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(37, 99, 235, 0.08);
  color: var(--c-primary);
  width: fit-content;
}
.comment-role-badge.comment-role-admin,
.comment-role-badge.comment-role-moderator {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}
.comment-role-badge.comment-role-lult {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}
.comment-role-badge.comment-role-editor {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}
.comment-warned {
  font-size: 11px;
  color: #f59e0b;
}
.comment-provider {
  font-size: 11px;
  color: #16a34a;
  font-weight: 500;
  display: inline-block;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
.comment-date {
  font-size: 11px;
  color: var(--c-muted);
  line-height: 1.5;
  margin-top: 2px;
}

/* Bordered data rows */
#filestable td {
  border: 1px solid var(--c-border) !important;
  padding: 5px 8px !important;
  font-size: 13px !important;
  vertical-align: middle !important;
}

/* 4 columns: #, Filename (icon inline), Completion, Size */
#filestable th:nth-child(1),
#filestable td.files-col-num {
  width: 44px;
  text-align: center !important;
}
#filestable td.files-col-num {
  color: var(--c-muted) !important;
  font-size: 12px !important;
}
#filestable th:nth-child(3),
#filestable td.files-col-pct {
  width: 100px;
  text-align: center !important;
}
#filestable th:nth-child(4),
#filestable td.files-col-size {
  width: 90px;
  text-align: right !important;
  font-variant-numeric: tabular-nums;
  padding-right: 14px !important;
}
#filestable .files-type-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 7px;
  opacity: 0.75;
}

/* Alternating stripe */
#filestable tr.alt td {
  background: var(--c-subnav, #f1f5f9) !important;
}
[data-theme="dark"] #filestable tr.alt td {
  background: var(--c-surface-2, #161b26) !important;
}

/* fa-flag not in custom FA4 kit — redirect to FA6 Free (\f024 = flag, same codepoint) */
i.fa.br-flag-icon {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
}

tr.br-flagged > td {
  background-color: #fff0f0 !important;
}
tr.br-flagged.alt > td {
  background-color: #ffe8e8 !important;
}
#browsetable tr.br-flagged:hover > td,
#searchtable tr.br-flagged:hover > td,
table.data tr.br-flagged:hover > td {
  background-color: #ffd8d8 !important;
}
#browsetable tr.br-flagged.alt:hover > td,
#searchtable tr.br-flagged.alt:hover > td,
table.data tr.br-flagged.alt:hover > td {
  background-color: #ffd0d0 !important;
}
[data-theme="dark"] tr.br-flagged > td {
  background-color: #2a0f0f !important;
}
[data-theme="dark"] tr.br-flagged.alt > td {
  background-color: #240c0c !important;
}
[data-theme="dark"] #browsetable tr.br-flagged:hover > td,
[data-theme="dark"] #searchtable tr.br-flagged:hover > td,
[data-theme="dark"] table.data tr.br-flagged:hover > td {
  background-color: #3d1212 !important;
}
[data-theme="dark"] #browsetable tr.br-flagged.alt:hover > td,
[data-theme="dark"] #searchtable tr.br-flagged.alt:hover > td,
[data-theme="dark"] table.data tr.br-flagged.alt:hover > td {
  background-color: #361010 !important;
}
[data-theme="dark"] .br-card.br-flagged {
  background-color: #2a0f0f;
}
[data-theme="dark"] .br-chip-flagged {
  color: #e74c3c;
}
.br-flag-tip {
  display: none;
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  background: #1e293b;
  color: #f1f5f9;
  font-size: 12.5px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  max-width: 320px;
  line-height: 1.4;
  white-space: pre-wrap;
}

/* Show more / show less toggle */
.nzb-rm-content span {
  display: none;
}
.nzb-rm-link {
  display: inline;
}

/* ── Report NZB form ─────────────────────────────── */
.report-nzb-wrap {
  padding: 24px;
  max-width: 520px;
  margin: 0 auto;
  font-family: var(--font);
}
.report-nzb-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 700;
  color: var(--c-heading);
  margin-bottom: 14px;
}
.report-nzb-header i {
  color: var(--c-danger);
  font-size: 15px;
}
.report-nzb-title {
  background: var(--c-subnav);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-body);
  margin-bottom: 18px;
  line-height: 1.5;
  word-break: break-word;
}
.report-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.report-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  font-size: 13px;
  font-family: var(--font);
  color: var(--c-body);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  resize: vertical;
  outline: none;
  transition: border-color 0.15s;
}
.report-textarea:focus {
  border-color: var(--c-border-focus);
}
.report-nzb-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}
.report-btn-submit {
  background: var(--c-primary);
  color: #fff;
  border: none;
  border-radius: var(--r-sm);
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: background 0.15s;
}
.report-btn-submit:hover {
  background: var(--c-primary-hov);
}
.report-alert {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 14px;
}
.report-alert-success {
  background: rgba(22, 199, 132, 0.1);
  color: var(--c-success-dark);
  border: 1px solid rgba(22, 199, 132, 0.25);
}
.report-alert-error {
  background: rgba(255, 59, 59, 0.08);
  color: var(--c-danger);
  border: 1px solid rgba(255, 59, 59, 0.2);
}
.report-nzb-notice {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 18px;
  padding: 10px 14px;
  background: var(--c-primary-muted);
  border-radius: var(--r-sm);
  font-size: 12px;
  color: var(--c-secondary);
  line-height: 1.5;
}
.report-nzb-notice i {
  color: var(--c-primary);
  margin-top: 1px;
  flex-shrink: 0;
}

/* ── NZB Reports queue ───────────────────────────── */
.nzbrep-wrap {
  padding: 20px 0;
}
.nzbrep-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.nzbrep-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--c-heading);
  display: flex;
  align-items: center;
  gap: 8px;
}
.nzbrep-title i {
  color: var(--c-danger);
}
.nzbrep-bulk {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.nzbrep-select {
  padding: 6px 10px;
  font-size: 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-body);
  outline: none;
}
.nzbrep-btn {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font);
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background 0.15s;
}
.nzbrep-btn-primary {
  background: var(--c-primary);
  color: #fff;
}
.nzbrep-btn-primary:hover {
  background: var(--c-primary-hov);
}
.nzbrep-btn-secondary {
  background: var(--c-subnav);
  color: var(--c-body);
  border: 1px solid var(--c-border);
}
.nzbrep-btn-secondary:hover {
  background: var(--c-border);
}
.nzbrep-table {
  font-size: 20px;
}
.nzbrep-btn-xs {
  padding: 5px 8px !important;
  font-size: 11px;
  background: var(--c-primary-muted);
  color: var(--c-primary);
  border: 1px solid rgba(0, 112, 255, 0.2);
}
.nzbrep-btn-xs:hover {
  background: var(--c-primary);
  color: #fff;
}
.nzbrep-solved-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--c-success-dark);
}
.nzbrep-solved-badge i {
  font-size: 11px;
}
.nzbrep-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 24px 20px;
  background: var(--c-subnav);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  font-size: 14px;
  color: var(--c-success-dark);
  font-weight: 500;
}
.nzbrep-denied {
  padding: 20px;
  color: var(--c-danger);
  font-weight: 600;
  font-size: 14px;
}
.nzbrep-wrap table.data td {
  font-size: 13px;
}

/* ── Tutorials page ── */
.tutorials-wrap {
  padding: 16px 0 32px;
}
.tutorials-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.tutorials-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  background: var(--c-primary);
  color: #fff !important;
  text-decoration: none !important;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}
.tutorials-add-btn:hover {
  background: var(--c-primary-hov, #3391ff);
  color: #fff !important;
}
.tutorials-page-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--c-body);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.tutorials-category-section {
  margin-bottom: 24px;
}
.tutorials-category-title {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--c-primary);
  padding-bottom: 7px;
  border-bottom: 2px solid var(--c-primary);
  margin-bottom: 10px;
}
.tutorials-accordion {
  border: 1px solid var(--c-border);
  border-radius: 8px;
  overflow: hidden;
}
.tutorials-item {
  border-bottom: 1px solid var(--c-border);
}
.tutorials-item:last-child {
  border-bottom: none;
}
.tutorials-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  background: var(--c-surface);
  transition: background 0.15s;
  user-select: none;
}
.tutorials-trigger:hover {
  background: var(--c-sidebar-hov);
}
.tutorials-icon {
  color: var(--c-primary);
  font-size: 11px;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.tutorials-expanded .tutorials-icon {
  transform: rotate(90deg);
}
.tutorials-question {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-body);
  line-height: 1.4;
}
.tutorials-content {
  height: 0;
  overflow: hidden;
  transition: height 0.25s ease;
}
.tutorials-content-inner {
  padding: 14px 20px 16px 36px;
  background: var(--c-subnav);
  border-top: 1px solid var(--c-border);
}
.tutorials-content-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-body);
  margin-bottom: 8px;
  text-align: center;
}
.tutorials-content-body {
  font-size: 13px;
  color: var(--c-secondary);
  line-height: 1.7;
}

/* ── Trending page ── */
.tr-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--c-border);
}
.tr-header-title {
  font-size: 20px;
  font-weight: 500;
  color: var(--c-body);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 0;
}
.tr-header-title > i {
  color: #ef4444;
}
.tr-view-switcher {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tr-view-label {
  font-size: 12px;
  color: var(--c-muted);
  margin-right: 2px;
}
.tr-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 5px;
  border: 1px solid var(--c-border);
  color: var(--c-muted);
  text-decoration: none !important;
  font-size: 13px;
  transition: all 0.15s;
}
.tr-view-btn:hover {
  border-color: var(--c-primary);
  color: var(--c-primary) !important;
}
.tr-view-active,
.tr-view-active:hover {
  background: var(--c-primary) !important;
  color: #fff !important;
  border-color: var(--c-primary) !important;
}
.tr-section {
  margin-bottom: 28px;
}
.tr-section-title {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-primary);
  padding-bottom: 7px;
  border-bottom: 2px solid var(--c-primary);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.tr-section-title > i {
  color: var(--c-primary);
  font-size: 12px;
}
/* Grid view */
.tr-covers-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tr-cover-item {
  flex: 0 0 calc(12.5% - 7px);
}
.tr-cover-item a {
  display: block;
}
.tr-cover-item img {
  width: 100%;
  display: block;
  border-radius: 4px;
  border: 1px solid var(--c-border);
  transition:
    opacity 0.15s,
    transform 0.15s;
}
.tr-cover-item img:hover {
  opacity: 0.82;
  transform: translateY(-2px);
}
/* List view */
.tr-list-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  overflow: hidden;
}
.tr-list-item {
  padding: 7px 12px;
  border-bottom: 1px solid var(--c-border);
}
.tr-list-item:nth-child(odd) {
  border-right: 1px solid var(--c-border);
}
.tr-list-item:nth-last-child(-n + 2):not(:nth-child(odd) ~ *),
.tr-list-item:last-child {
  border-bottom: none;
}
.tr-list-item a {
  font-size: 13px;
  color: var(--c-link);
  text-decoration: none;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tr-list-item a:hover {
  color: var(--c-primary);
}

/* ── TV Calendar ── */
.cal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--c-border);
  flex-wrap: wrap;
  gap: 10px;
}
.cal-header-title {
  font-size: 20px;
  font-weight: 500;
  color: var(--c-body);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  margin-top: 8px;
}
.cal-header-title > i {
  color: var(--c-primary);
}
.cal-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cal-search-form {
  display: flex;
  align-items: center;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--c-surface);
}
.cal-search-form input {
  border: none;
  outline: none;
  background: transparent;
  padding: 5px 10px;
  font-size: 13px;
  color: var(--c-body);
  width: 150px;
}
.cal-search-form button {
  border: none;
  background: var(--c-primary);
  color: #fff;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.15s;
}
.cal-search-form button:hover {
  background: var(--c-primary-hov, #3391ff);
}
.cal-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--c-border);
  color: var(--c-body) !important;
  text-decoration: none !important;
  transition: all 0.15s;
  white-space: nowrap;
}
.cal-nav-btn:hover {
  border-color: var(--c-primary);
  color: var(--c-primary) !important;
}

/* Popular Today */
.cal-popular {
  margin-bottom: 22px;
}
.cal-section-label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-muted);
  padding-bottom: 7px;
  border-bottom: 2px solid var(--c-primary);
  margin-bottom: 12px;
  #display: flex;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.cal-section-label > i {
  color: #ef4444;
}
.cal-popular-grid {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.cal-popular-card {
  text-align: center;
  width: 205px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--c-popular-card-bg);
}
.cal-popular-card img {
  width: 100%;
  display: block;
}
.cal-popular-info {
  text-align: center;
}
.cal-popular-time {
  font-size: 10px;
  color: #00ff64;
  font-weight: 600;
  margin-bottom: 3px;
  background: var(--c-primary);
}
.cal-popular-show {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-body) !important;
  text-decoration: none !important;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: -3px;
}
.cal-popular-show:hover {
  color: var(--c-primary) !important;
}
.cal-popular-ep {
  font-size: 11px;
  color: var(--c-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-popular-code {
  font-size: 11px;
  color: var(--c-primary);
  font-weight: 600;
  margin-top: 2px;
}

/* Month navigation */
.cal-month-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 8px 0;
  margin-bottom: 10px;
}
.cal-month-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--c-body);
}
.cal-month-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 5px;
  border: 1px solid var(--c-border);
  color: var(--c-muted) !important;
  text-decoration: none !important;
  font-size: 12px;
  transition: all 0.15s;
}
.cal-month-arrow:hover {
  border-color: var(--c-primary);
  color: var(--c-primary) !important;
}
/* Positioned absolutely (like .ba-header-controls elsewhere) so it sits
   at the far right without shifting the arrows/month label off-center —
   margin-left:auto would have shrunk the centered group's available
   space instead of leaving it truly centered. */
.viewcalendarpage .cal-month-nav {
  position: relative;
}
.viewcalendarpage .cal-jump-form {
  display: flex;
  align-items: center;
  gap: 6px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.viewcalendarpage .cal-jump-input {
  height: 28px;
  padding: 0 8px;
  font-size: 12px;
  border: 1px solid var(--c-border);
  border-radius: 5px;
  background: var(--c-surface);
  color: var(--c-body);
  outline: none;
}
.viewcalendarpage .cal-jump-input:focus {
  border-color: var(--c-primary);
}
.viewcalendarpage .cal-jump-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 5px;
  border: 1px solid var(--c-border);
  background: var(--c-primary);
  color: #fff;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.15s;
}
.viewcalendarpage .cal-jump-btn:hover {
  background: var(--c-primary-hov);
}
/* Same date-jump control as viewcalendar.tpl above, copied and rescoped
   under .calendar2page since calendar2.tpl is a separate template with
   its own duplicated .cal-week/.cal-day markup. */
.calendar2page .cal-month-nav {
  position: relative;
}
.calendar2page .cal-jump-form {
  display: flex;
  align-items: center;
  gap: 6px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.calendar2page .cal-jump-input {
  height: 28px;
  padding: 0 8px;
  font-size: 12px;
  border: 1px solid var(--c-border);
  border-radius: 5px;
  background: var(--c-surface);
  color: var(--c-body);
  outline: none;
}
.calendar2page .cal-jump-input:focus {
  border-color: var(--c-primary);
}
.calendar2page .cal-jump-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 5px;
  border: 1px solid var(--c-border);
  background: var(--c-primary);
  color: #fff;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.15s;
}
.calendar2page .cal-jump-btn:hover {
  background: var(--c-primary-hov);
}

/* 7-day week grid */
.cal-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.cal-day {
  border: 1px solid var(--c-border);
  border-radius: 6px;
  overflow: hidden;
  min-height: 60px;
}
.cal-day-head {
  text-align: center;
  padding: 8px 10px 6px;
  background: var(--c-subnav);
  border-bottom: 1px solid var(--c-border);
}
.cal-day-name {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-muted);
}
.cal-day-date {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--c-body);
  line-height: 1.3;
}
.cal-day-today .cal-day-head {
  background: var(--c-primary);
  border-bottom-color: transparent;
}
.cal-day-today .cal-day-name {
  color: rgba(255, 255, 255, 0.75);
}
.cal-day-today .cal-day-date {
  color: #fff;
}
.cal-entry {
  text-align: center;
  padding: 5px 8px;
  border-bottom: 1px solid var(--c-border);
}
.cal-entry:last-child {
  border-bottom: none;
}
.cal-entry-time {
  display: block;
  font-size: 10px;
  color: var(--c-primary);
  font-weight: 600;
  background: var(--c-popular-card-bg);
}
.cal-entry-show {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-body) !important;
  text-decoration: none !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-entry-show:hover {
  color: var(--c-primary) !important;
}
.cal-entry-ep {
  display: block;
  font-size: 12px;
  color: var(--c-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-entry-code {
  display: inline-block;
  font-size: 11px;
  color: var(--c-primary);
  text-decoration: none !important;
  font-weight: 600;
}
.cal-entry-code:hover {
  text-decoration: underline !important;
}
.cal-empty {
  padding: 12px 8px;
  font-size: 12px;
  color: var(--c-muted);
  text-align: center;
}

/* Search results table */
.cal-search-results-wrap {
  margin-top: 4px;
}
.cal-search-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  overflow: hidden;
  font-size: 13px;
}
.cal-search-table thead tr {
  background: var(--c-subnav);
}
.cal-search-table th {
  padding: 9px 14px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-muted);
  text-align: left;
  border-bottom: 2px solid var(--c-border);
}
.cal-search-table td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--c-border);
  vertical-align: middle;
  color: var(--c-body);
}
.cal-search-table tbody tr:last-child td {
  border-bottom: none;
}
.cal-search-table tbody tr:hover td {
  background: var(--c-sidebar-hov);
}
.cal-today-badge {
  display: inline-block;
  padding: 2px 8px;
  background: var(--c-primary);
  color: #fff;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}

/* Cover view — date pill nav */
.cal-date-nav {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 16px;
}
.cal-date-pill {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid var(--c-border);
  font-size: 12px;
  font-weight: 600;
  color: var(--c-muted) !important;
  text-decoration: none !important;
  transition: all 0.15s;
  white-space: nowrap;
}
.cal-date-pill:hover {
  border-color: var(--c-primary);
  color: var(--c-primary) !important;
}

/* Cover view — 3-column grid */
.cal-cov-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.cal-cov-col {
  border: 1px solid var(--c-border);
  border-radius: 6px;
  overflow: hidden;
}
.cal-cov-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--c-border);
}
.cal-cov-entry:last-child {
  border-bottom: none;
}
.cal-cov-entry img {
  width: 50px;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid var(--c-border);
  flex-shrink: 0;
}
.cal-cov-info {
  min-width: 0;
}

/* ── Monthly Calendar Grid ── */
.hiderow {
  display: none !important;
}
.cal-month-grid {
  border: 1px solid var(--c-border);
  border-radius: 8px;
  overflow: hidden;
}
.cal-month-headers {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  background: var(--c-subnav);
  border-bottom: 2px solid var(--c-primary);
}
.cal-month-header-cell {
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-muted);
  text-align: center;
  min-width: 0;
  overflow: hidden;
}
.cal-month-header-today {
  color: var(--c-primary);
}
.cal-month-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-bottom: 1px solid var(--c-border);
}
.cal-month-row:last-child {
  border-bottom: none;
}
.cal-month-cell {
  border-right: 1px solid var(--c-border);
  min-height: 80px;
  padding-bottom: 4px;
  min-width: 0;
  overflow: hidden;
}
.cal-month-cell:last-child {
  border-right: none;
}
.cal-month-cell-head {
  padding: 5px 8px 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-muted);
  background: #f1f5f9;
  border-bottom: 1px solid var(--c-border);
  text-align: center;
}

[data-theme="dark"] .cal-month-cell-head {
  padding: 5px 8px 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-muted);
  background: #1e293b;
  border-bottom: 1px solid var(--c-border);
  text-align: center;
}

.cal-month-today .cal-month-cell-head {
  background: var(--c-primary);
  color: #fff;
  border-bottom-color: transparent;
}
.cal-month-cell .cal-entry {
  border-bottom: 1px solid var(--c-border);
}
.cal-month-cell .cal-entry:last-of-type {
  border-bottom: none;
}
.cal-empty-month {
  padding: 10px 8px;
  font-size: 12px;
  color: var(--c-border);
  text-align: center;
}
.cal-readmore {
  padding: 4px 8px;
}
.cal-readmore-btn {
  font-size: 10px;
  color: var(--c-primary) !important;
  text-decoration: none !important;
  font-weight: 600;
}
.cal-readmore-btn:hover {
  text-decoration: underline !important;
}

/* ── Private Messages ── */
.pm-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--c-border);
}
.pm-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--c-body);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.pm-title i {
  color: var(--c-primary);
}
.pm-compose-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: var(--c-primary);
  color: #fff !important;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none !important;
}
.pm-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
}
.pm-tab {
  padding: 5px 12px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--c-body) !important;
  text-decoration: none !important;
  border: 1px solid var(--c-border);
  transition:
    border-color 0.15s,
    color 0.15s;
}
.pm-tab:hover {
  border-color: var(--c-primary);
  color: var(--c-primary) !important;
}
.pm-tab-active {
  background: var(--c-primary);
  color: #fff !important;
  border-color: var(--c-primary);
}
.pm-tab-active:hover {
  color: #fff !important;
}
.pm-list {
  border: 1px solid var(--c-border);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 8px;
}
.pm-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--c-border);
}
.pm-row:last-child {
  border-bottom: none;
}
.pm-unread {
  background: var(--c-subnav);
}
.pm-row-icon {
  width: 24px;
  flex-shrink: 0;
  padding-top: 2px;
  text-align: center;
  font-size: 12px;
}
.pm-icon-in {
  color: var(--c-primary);
}
.pm-icon-out {
  color: var(--c-muted);
}
.pm-row-body {
  flex: 1;
  min-width: 0;
}
.pm-row-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
  flex-wrap: wrap;
}
.pm-row-sender {
  font-size: 13px;
  font-weight: 500;
  color: var(--c-body) !important;
  text-decoration: none !important;
}
.pm-row-sender:hover {
  color: var(--c-primary) !important;
}
.pm-badge {
  font-size: 10px;
  font-weight: 700;
  background: var(--c-primary);
  color: #fff;
  padding: 1px 6px;
  border-radius: 10px;
  flex-shrink: 0;
}
.pm-row-date {
  font-size: 11px;
  color: var(--c-muted);
  margin-left: auto;
  white-space: nowrap;
}
.pm-row-preview {
  font-size: 12px;
  color: var(--c-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}
.pm-row-actions {
  display: flex;
  gap: 10px;
}
.pm-action-btn {
  font-size: 11px;
  color: var(--c-primary) !important;
  text-decoration: none !important;
  font-weight: 500;
}
.pm-action-btn:hover {
  text-decoration: underline !important;
}
.pm-check {
  flex-shrink: 0;
  margin-top: 3px;
}
.pm-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 12px;
  color: var(--c-body);
  flex-wrap: wrap;
}
.pm-footer label {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.pm-pipe {
  color: var(--c-muted);
}
.pm-footer input[type="submit"] {
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid var(--c-border);
  background: var(--c-subnav);
  color: var(--c-body);
  font-size: 12px;
  cursor: pointer;
}
.pm-empty {
  padding: 24px;
  text-align: center;
  font-size: 13px;
  color: var(--c-muted);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* PM Conversation / Read */
.pm-convo-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--c-border);
  flex-wrap: wrap;
}
.pm-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid var(--c-border);
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--c-body) !important;
  text-decoration: none !important;
  flex-shrink: 0;
  transition:
    border-color 0.15s,
    color 0.15s;
}
.pm-back-btn:hover {
  border-color: var(--c-primary);
  color: var(--c-primary) !important;
}
.pm-convo-with {
  font-size: 13px;
  color: var(--c-muted);
}
.pm-convo-with strong {
  color: var(--c-body);
}
.pm-convo-count {
  margin-left: auto;
  font-size: 11px;
  color: var(--c-muted);
}
.pm-single-card {
  border: 1px solid var(--c-border);
  border-radius: 6px;
  overflow: hidden;
}
.pm-single-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--c-subnav);
  border-bottom: 1px solid var(--c-border);
  font-size: 12px;
}
.pm-single-body {
  padding: 12px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--c-body);
}

/* PM Chat bubbles */
.pm-bubble-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.pm-bubble {
  max-width: 72%;
}
.pm-bubble-self {
  align-self: flex-end;
}
.pm-bubble-other {
  align-self: flex-start;
}
.pm-bubble-meta {
  font-size: 11px;
  color: var(--c-muted);
  margin-bottom: 4px;
}
.pm-bubble-self .pm-bubble-meta {
  text-align: right;
}
.pm-bubble-body {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
  word-break: break-word;
}
.pm-bubble-self .pm-bubble-body {
  background: var(--c-primary);
  color: #fff;
  border-bottom-right-radius: 2px;
}
.pm-bubble-other .pm-bubble-body {
  background: var(--c-subnav);
  color: var(--c-body);
  border: 1px solid var(--c-border);
  border-bottom-left-radius: 2px;
}

/* PM Reply / Compose */
.pm-reply-form {
  border: 1px solid var(--c-border);
  border-radius: 6px;
  overflow: hidden;
  margin-top: 12px;
}
.pm-reply-textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: 13px;
  border: none;
  background: var(--c-surface);
  color: var(--c-body);
  resize: vertical;
  min-height: 80px;
  box-sizing: border-box;
  display: block;
  outline: none;
}
.pm-reply-footer {
  display: flex;
  justify-content: flex-end;
  padding: 8px 10px;
  border-top: 1px solid var(--c-border);
  background: var(--c-subnav);
}
.pm-reply-submit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  background: var(--c-primary);
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.pm-compose-wrap {
  border: 1px solid var(--c-border);
  border-radius: 6px;
  overflow: hidden;
}
.pm-form-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface);
}
.pm-form-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-muted);
  width: 28px;
  flex-shrink: 0;
}
.pm-form-input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--c-body);
  font-size: 13px;
  outline: none;
}
.pm-form-textarea {
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: var(--c-surface);
  color: var(--c-body);
  resize: vertical;
  min-height: 120px;
  font-size: 13px;
  box-sizing: border-box;
  display: block;
  outline: none;
}
.pm-form-actions {
  padding: 8px 10px;
  border-top: 1px solid var(--c-border);
  background: var(--c-subnav);
  display: flex;
  justify-content: flex-end;
}
.pm-alert {
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 12px;
  margin-bottom: 10px;
  border: 1px solid var(--c-border);
  background: var(--c-subnav);
  color: var(--c-body);
}

/* ── NZB Import ── */
.nimport-wrap {
  padding: 8px 0 16px;
}
.nimport-header {
  margin-bottom: 8px;
}
.nimport-title {
  font-size: 20px;
  font-weight: 500;
  color: var(--c-body);
  margin: 0 0 2px;
}
.nimport-title i {
  color: var(--c-primary);
  margin-right: 5px;
}
.nimport-subtitle {
  font-size: 13px;
  color: var(--c-muted);
  margin: 0;
}
.nimport-rules {
  background: var(--c-surface);
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 5px;
}
.nimport-rules ul {
  margin: 0;
  padding-left: 5px;
padding-top: 5px;
padding-bottom: 5px;
}
.nimport-rules li {
  font-size: 13px;
  color: var(--c-body);
  margin-bottom: 4px;
  line-height: 1.4;
padding-top: 2px;
}
.nimport-rules li:last-child {
  margin-bottom: 0;
}
.nimport-example {
  color: var(--c-primary);
  font-weight: 500;
}
.nimport-ext {
  color: var(--c-muted);
}
.nimport-no {
  color: #ef4444;
  font-weight: 600;
}
.nimport-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 8px;
}
.nimport-field {
  margin-bottom: 10px;
}
.nimport-field:last-child {
  margin-bottom: 0;
}
.nimport-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-body);
  margin-bottom: 4px;
}
.nimport-file {
  display: block;
  width: 100%;
  font-size: 13px;
  color: var(--c-body);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 5px;
  padding: 5px 8px;
  cursor: pointer;
  box-sizing: border-box;
}
.nimport-file:focus {
  outline: none;
  border-color: var(--c-border-focus);
}
.nimport-select {
  display: block;
  width: 100%;
  max-width: 280px;
  font-size: 13px;
  color: var(--c-body);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 5px;
  padding: 5px 8px;
  cursor: pointer;
  box-sizing: border-box;
}
.nimport-select:focus {
  outline: none;
  border-color: var(--c-border-focus);
}
.nimport-check-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--c-body);
  cursor: pointer;
}
.nimport-checkbox {
  width: 13px;
  height: 13px;
  cursor: pointer;
  accent-color: var(--c-primary);
}
.nimport-hint {
  display: block;
  font-size: 12px;
  color: var(--c-muted);
  margin-top: 3px;
}
.nimport-actions {
  padding-top: 2px;
}
.nimport-submit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--c-primary);
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.nimport-submit:hover {
  background: var(--c-primary-hov);
}
.nimport-results {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 8px;
}
.nimport-results-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-body);
  margin: 0 0 6px;
}
.nimport-results-title i {
  color: #22c55e;
  margin-right: 5px;
}
.nimport-results-body {
  font-size: 13px;
  color: var(--c-body);
  line-height: 1.6;
}
.nimport-denied {
  text-align: center;
  padding: 24px 16px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  margin-bottom: 8px;
}
.nimport-denied-icon {
  font-size: 22px;
  color: #ef4444;
  margin-bottom: 6px;
  display: block;
}
.nimport-denied p {
  font-size: 13px;
  color: var(--c-body);
  margin: 0 0 4px;
}
.nimport-muted {
  color: var(--c-muted) !important;
  font-size: 12px !important;
}
.nimport-disclaimer {
  font-size: 12px;
  color: var(--c-muted);
  text-align: center;
  padding: 8px 0;
  border-top: 1px solid var(--c-border);
  margin-top: 4px;
}
.nimport-info {
background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 7px;
  padding: 8px 12px;
  margin-bottom: 8px;
}
.nimport-rule {
  border-radius: 7px;
  padding: 8px 12px;
  background: #fef9c3;
  border: 1px solid #fde047;
}
[data-theme="dark"] .nimport-info {
  background: #0b0f19;
  border: 1px solid #bfdbfe;
  border-radius: 7px;
  padding: 8px 12px;
  margin-bottom: 8px;
}
[data-theme="dark"] .nimport-rule {
  border-radius: 7px;
  padding: 8px 12px;
  background: #0b0f19;
  border: 1px solid #9ca3af;
}
/* ── Add Tutorial page (add_tutorial.tpl) ── */
.at-wrap {
  padding: 8px 0 16px;
}
.at-header {
  margin-bottom: 14px;
  text-align: center;
}
.at-title {
  font-size: 20px;
  font-weight: 500;
  color: var(--c-body);
  margin: 0;
}
.at-title i {
  color: var(--c-primary);
  margin-right: 6px;
}
.at-msg {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  padding: 14px 16px;
  font-size: 13px;
  color: var(--c-body);
  text-align: center;
}
.at-error {
  padding: 10px 16px;
  background: rgba(255, 59, 59, 0.1);
  border: 1px solid rgba(255, 59, 59, 0.3);
  border-radius: 8px;
  color: var(--c-danger);
  font-size: 13px;
  margin-bottom: 12px;
}
.at-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  padding: 18px 20px;
}
.at-field {
  margin-bottom: 14px;
}
.at-field:last-of-type {
  margin-bottom: 0;
}
.at-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-body);
  margin-bottom: 5px;
}
.at-input,
.at-select {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-size: 13px;
  color: var(--c-body);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  padding: 8px 10px;
  outline: none;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.at-input:focus,
.at-select:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-muted);
}
.at-textarea {
  width: 100%;
  box-sizing: border-box;
}
.at-actions {
  padding-top: 6px;
}
.at-submit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--c-primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 9px 22px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.at-submit:hover {
  background: var(--c-primary-hov);
}

/* ── Release Edit page (release-edit.tpl) ── */
.rle-title {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 10px;
  display: inline-flex;
  align-items: center;
}
.rle-error {
  padding: 10px 16px;
  background: rgba(255, 59, 59, 0.1);
  border: 1px solid rgba(255, 59, 59, 0.3);
  border-radius: 8px;
  color: var(--c-danger);
  font-size: 13px;
  margin-bottom: 12px;
}
.rle-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  overflow: hidden;
}
.rle-field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  padding: 7px 16px;
  min-height: 52px;
  border-bottom: 1px solid var(--c-border);
}
.rle-field:last-child {
  border-bottom: none;
}
.rle-field label {
  font-size: 11px;
  font-weight: 700;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0;
}
.rle-field > label:first-child {
  width: 160px;
  flex-shrink: 0;
  display: block;
}
.rle-field > input,
.rle-field > select,
.rle-field > div {
  min-width: 0;

}
.rle-input {
  padding: 8px 12px;
  font-size: 13px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: var(--c-surface);
  color: var(--c-body);
  outline: none;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
  box-sizing: border-box;
  width: auto;
}
.rle-input:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-muted);
}
.rle-file-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 400;
  color: var(--c-secondary);
  background: var(--c-subnav);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.14s;
}
.rle-file-btn:hover {
  background: var(--c-border);
}
.rle-file-btn input[type="file"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.rle-footer {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--c-border);
}

/* ── NZB Watermark Decoder ── */
.nwm-wrap {
  padding: 8px 0 16px;
}
.nwm-header {
  margin-bottom: 8px;
}
.nwm-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-body);
  margin: 0 0 2px;
}
.nwm-title i {
  color: var(--c-primary);
  margin-right: 5px;
}
.nwm-subtitle {
  font-size: 12px;
  color: var(--c-muted);
  margin: 0;
}
.nwm-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 8px;
}
.nwm-field {
  margin-bottom: 10px;
}
.nwm-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-body);
  margin-bottom: 4px;
}
.nwm-input {
  display: block;
  width: 100%;
  font-size: 12px;
  color: var(--c-body);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 5px;
  padding: 5px 8px;
  box-sizing: border-box;
  font-family: monospace;
  transition: border-color 0.15s;
}
.nwm-input:focus {
  outline: none;
  border-color: var(--c-border-focus);
}
.nwm-hint {
  display: block;
  font-size: 11px;
  color: var(--c-muted);
  margin-top: 3px;
}
.nwm-actions {
  padding-top: 2px;
}
.nwm-submit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--c-primary);
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.nwm-submit:hover {
  background: var(--c-primary-hov);
}
.nwm-result {
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.nwm-result-error {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #ef4444;
}
.nwm-result-ok {
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.25);
  color: var(--c-body);
  justify-content: space-between;
}
.nwm-result-label {
  font-weight: 600;
  color: var(--c-muted);
}
.nwm-result-uid {
  font-size: 16px;
  font-weight: 700;
  color: var(--c-primary);
  font-family: monospace;
}

/* ── Advanced Search ── */
.as-wrap {
  padding: 8px 0 16px;
}
.as-search-section {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 10px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.as-mode-tabs {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--c-border);
  padding-bottom: 6px;
}
.as-mode-tab {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-muted);
  cursor: pointer;
}
.as-mode-tab input[type="radio"] {
  accent-color: var(--c-primary);
}
.as-mode-tab:has(input:checked) {
  color: var(--c-primary);
}
.as-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
}
.as-fields:last-child {
  margin-bottom: 0;
}
.as-fields-sql {
  padding-top: 4px;
  border-top: 1px solid var(--c-border);
  justify-content: center;
}
.as-input {
  flex: 1 1 200px;
  font-size: 13px;
  color: var(--c-body);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 5px;
  padding: 5px 8px;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.as-input:focus {
  outline: none;
  border-color: var(--c-border-focus);
}
.as-select {
  flex: 1 1 120px;
  font-size: 13px;
  color: var(--c-body);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 5px;
  padding: 5px 7px;
  cursor: pointer;
  box-sizing: border-box;
}
.as-select-sm {
  flex: none;
  font-size: 13px;
}
.as-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--c-primary);
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.as-btn:hover {
  background: var(--c-primary-hov);
}
.as-perpage {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.as-perpage-label {
  font-size: 11px;
  color: var(--c-muted);
}

/* ── Search page advanced mode (src-*) ── */
.sr-form-wrap.src-adv-active .filter_fields {
  margin: 0;
}
.sr-form-wrap.src-adv-active .sr-input-row {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
.sr-form-wrap.src-adv-active .sphinxsearchdiv.sr-input-group {
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
}
.sr-form-wrap.src-adv-active .sr-flex-inputs {
  flex-wrap: nowrap;
  width: 100%;
  justify-content: center;
}
.sr-form-wrap.src-adv-active .ssearchcat_form_cls {
  flex: 1 1 160px;
  min-width: 0;
  display: flex;
}
.sr-form-wrap.src-adv-active .ssearchcat_form_cls select {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.sr-form-wrap.src-adv-active .sqlsearchdiv.sr-input-group {
  flex-direction: row;
  justify-content: center;
}
.sr-form-wrap.src-adv-active .br-filter-box,
.sr-form-wrap.src-adv-active .sr-kw-input,
.sr-form-wrap.src-adv-active .ssearchcat_form_cls select {
  flex: 1 1 160px;
  font-size: 13px;
  color: var(--c-body);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 5px;
  padding: 5px 8px;
  box-sizing: border-box;
  height: auto;
  min-height: 32px;
}
.sr-form-wrap.src-adv-active .sqlsearchdiv select {
  flex: none;
  font-size: 13px;
  color: var(--c-body);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 5px;
  padding: 5px 7px;
  cursor: pointer;
  box-sizing: border-box;
}
.sr-form-wrap.src-adv-active .sqlsearchdiv {
  padding-top: 8px;
  border-top: 1px solid var(--c-border);
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  display: flex;
  gap: 6px;
  align-items: center;
}
/* Mode tabs */
.src-mode-tabs {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--c-border);
  padding-bottom: 6px;
}
.src-mode-tab {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-muted);
  cursor: pointer;
}
.src-mode-tab input[type="radio"] {
  accent-color: var(--c-primary);
}
.src-mode-tab:has(input:checked) {
  color: var(--c-primary);
}
/* Comment search form */
.src-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.src-input {
  flex: 1 1 200px;
  font-size: 13px;
  color: var(--c-body);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 5px;
  padding: 5px 8px;
  box-sizing: border-box;
}
.src-input:focus {
  outline: none;
  border-color: var(--c-border-focus);
}
.src-select {
  flex: 1 1 120px;
  font-size: 13px;
  color: var(--c-body);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 5px;
  padding: 5px 7px;
  cursor: pointer;
  box-sizing: border-box;
}
.src-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--c-primary);
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.src-btn:hover {
  background: var(--c-primary-hov);
}

/* ── Upcoming Movies ── */
.up-wrap {
  padding: 8px 0 16px;
}

.up-nav {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  padding: 6px 12px;
  margin-bottom: 10px;
}
.up-nav-table {
  width: 100%;
  border-collapse: collapse;
}
.up-nav-table tr + tr td {
  border-top: 1px solid var(--c-border);
}
.up-source-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  padding: 5px 12px 5px 0;
  vertical-align: top;
  width: 100px;
}
.up-links-cell {
  padding: 4px 0;
  line-height: 1.8;
}
.up-list-link {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 500;
  color: var(--c-muted);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 4px;
  padding: 2px 8px;
  margin: 2px 3px 2px 0;
  text-decoration: none;
  transition: all 0.15s;
}
.up-list-link:hover {
  color: var(--c-primary);
  border-color: var(--c-primary);
  background: var(--c-surface);
}

.up-heading-row {
  margin-bottom: 8px;
}
.up-heading {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-body);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.up-heading i {
  color: var(--c-primary);
  font-size: 12px;
}

.up-results {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.up-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  padding: 10px 12px;
  transition: border-color 0.15s;
}
.up-card:hover {
  border-color: var(--c-border-focus);
}

.up-poster {
  flex-shrink: 0;
  width: 60px;
}
.up-poster img {
  width: 60px;
  height: auto;
  border-radius: 3px;
  display: block;
}

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

.up-title-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 4px;
}
.up-title-link {
  font-size: 15px;
  font-weight: 600;
  color: var(--c-body);
  text-decoration: none;
}
.up-title-link:hover {
  color: var(--c-primary);
}
.up-year {
  font-size: 11px;
  color: var(--c-muted);
}
.up-year a {
  color: var(--c-muted);
  text-decoration: none;
}
.up-year a:hover {
  color: var(--c-primary);
}
.up-score {
  font-size: 10px;
  font-weight: 700;
  background: var(--c-primary);
  color: #fff;
  border-radius: 3px;
  padding: 1px 5px;
  line-height: 1.4;
}

.up-synopsis {
  font-size: 11px;
  color: var(--c-muted);
  margin: 0 0 5px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.up-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-bottom: 7px;
}
.up-meta-item {
  font-size: 11px;
  color: var(--c-muted);
}
.up-meta-item b {
  color: var(--c-body);
  font-weight: 600;
}
.up-meta-item a {
  color: var(--c-muted);
  text-decoration: none;
}
.up-meta-item a:hover {
  color: var(--c-primary);
}

.up-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}
.up-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  background: var(--c-primary);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 3px 9px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s;
}
.up-btn:hover {
  background: var(--c-primary-hov);
  color: #fff;
}
.up-btn-add {
  background: #16a34a;
}
.up-btn-add:hover {
  background: #15803d;
}
.up-btn-del {
  background: #dc2626;
}
.up-btn-del:hover {
  background: #b91c1c;
}

.up-empty {
  padding: 24px;
  text-align: center;
  font-size: 12px;
  color: var(--c-muted);
}

/* ── Movies list (movies.tpl) ── */
.mvm-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 4px;
}
.mvm-poster {
  flex-shrink: 0;
  width: 80px;
}
.mvm-thumb {
  width: 80px;
  height: auto;
  border-radius: 3px;
  display: block;
}
.mvm-body {
  flex: 1;
  min-width: 0;
}
.mvm-title-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 3px;
}
.mvm-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-body);
  text-decoration: none;
}
.mvm-title:hover {
  color: var(--c-primary);
}
.mvm-year {
  font-size: 11px;
  color: var(--c-muted);
}
.mvm-year a {
  color: var(--c-muted);
  text-decoration: none;
}
.mvm-year a:hover {
  color: var(--c-primary);
}
.mvm-tagline {
  font-size: 11px;
  font-style: italic;
  color: var(--c-muted);
  margin: 0 0 3px;
}
.mvm-plot {
  font-size: 11px;
  color: var(--c-muted);
  margin: 0 0 5px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mvm-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 14px;
  margin-bottom: 5px;
}
.mvm-meta-item {
  font-size: 11px;
  color: var(--c-muted);
}
.mvm-meta-item b {
  color: var(--c-body);
  font-weight: 600;
}
.mvm-meta-item a {
  color: var(--c-muted);
  text-decoration: none;
}
.mvm-meta-item a:hover {
  color: var(--c-primary);
}
.mvm-ratings {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 6px;
}
.mvm-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}
.mvm-nzb-table {
  margin-bottom: 10px;
}

/* ── Movie Detail (viewmoviefull.tpl) ── */
/* vmf hero */
.vmf-hero {
  position: relative;
}
.vmf-backdrop {
  position: relative;
  line-height: 0;
  overflow: hidden;
  border-radius: 8px;
}
.vmf-backdrop img {
  width: 100%;
  height: auto;
  display: block;
}
.vmf-hero-bottom {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  padding: 0 12px 10px 14px;
}
.vmf-hero-has-backdrop .vmf-hero-bottom {
  margin-top: -235px;
  position: relative;
  z-index: 2;
}
.vmf-poster {
  flex-shrink: 0;
  margin-left: 5px;
}
.vmf-poster img {
  width: 100%;
  height: auto;
  max-height: 300px;
  display: block;
  border-radius: 8px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
  border: 2px solid var(--c-surface);
}
.vmf-poster-tv img {
  width: 100%;
  height: auto;
  max-height: 280px;
  display: block;
  border-radius: 8px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
  border: 2px solid var(--c-surface);
  margin-left: 5px;
}
.vmf-hero-title {
  flex: 1;
  min-width: 0;
  margin-bottom: 12px;
}
.vmf-hero-title h1 {
  font-size: 20px;
  font-weight: 700;
  color: var(--c-heading);
  margin: 0;
  line-height: 1.25;
}
.vmf-hero-title a {
  margin-left: 5px;
  position: relative;
  top: -5px;
}
/* vmf card body */
.vmf-card-body {
  padding: 6px 0;
}
.vmf-plot {
  margin-bottom: 5px;
  font-size: 13px;
  color: var(--c-body);
  line-height: 1.5;
}
.vmf-tagline {
  font-size: 12px;
  font-style: italic;
  color: var(--c-muted);
  margin-bottom: 14px;
}
.vmf-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 24px;
  padding-bottom: 8px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--c-border);
}
.vmf-info-grid-series {
  grid-template-columns: 1fr 260px;
  gap: 16px 24px;
  align-items: start;
}
.vmf-info-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.vmf-info-col-box {
  border: 1px solid #6ede95;
  border-radius: 10px;
  padding: 12px 16px;
  gap: 3px;
  background-color: #f1f5f9;
  margin-top: -18px;
}
.vmf-info-col-title {
  font-size: 10px;
  color: #fcfffd;
  font-weight: 600;
  margin-bottom: 3px;
  background: #555;
  text-align: center;
  border-radius: 20px;
}
[data-theme="dark"] .vmf-info-col-box {
  background: rgba(255, 255, 255, 0.04);
}
.vmf-info-row {
  font-size: 13px;
  color: var(--c-body);
}
.vmf-info-rating {
  font-size: 13px;
  margin-bottom: 8px;
  margin-right: 73px;
}
.vmf-info-row strong {
  color: var(--c-heading);
  font-weight: 600;
  margin-right: 3px;
}
/* Clamp actors to 2 lines via pure CSS — this is the permanent collapsed
   state rendered from first paint, so there's no flash of the full list
   while JS loads. JS only measures overflow to show/hide the toggle link
   and flips this class on click — it never rewrites the text itself. */
.actorsdetails.actors-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.actors-toggle-link {
  white-space: nowrap;
}
.vmf-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  padding: 7px 0;
  border-bottom: 1px solid var(--c-border);
  margin-bottom: 6px;
}
.vmf-tv-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  border-bottom: 1px solid var(--c-border);
  margin-bottom: 6px;
}
.vmf-staff {
  font-size: 13px;
  color: var(--c-muted);
  margin-bottom: 5px;
}
.vmf-staff a {
  color: var(--c-link);
  text-decoration: none;
}

/* vmf filter bar */
.vmf-filter-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 0 10px;
}
.vmf-filter-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--c-subnav);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  padding: 3px;
}
.vmf-filter-label {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  background: #4db5ff;
  color: #fff;
  letter-spacing: 0.06em;
  margin-right: 2px;
}
.vmf-filter-label-hd {
  background: #da4f49;
}
.vmf-filter-label-EX {
  background: #16c784;
}
.vmf-filter-link {
  font-size: 13px;
  padding: 3px 9px;
  border-radius: 4px;
  color: var(--c-secondary);
  text-decoration: none;
  transition:
    background 0.12s,
    color 0.12s;
}
.vmf-filter-link:hover {
  background: var(--c-border);
  color: var(--c-body);
}
.vmf-filter-link.vmf-filter-active,
.vmf-filter-link.vmf-filter-active:hover {
  background: var(--c-primary);
  color: #fff;
}
.vmf-filter-all {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 600;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  color: var(--c-body);
  text-decoration: none;
  transition:
    border-color 0.12s,
    color 0.12s;
}
.vmf-filter-all:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
}
.vmf-filter-all.vmf-filter-active {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff !important;
}

.vmf-admin-shift {
  top: 510px !important;
}
.vmf-clear {
  clear: both;
}
.vmf-side-col {
  position: relative;
}
.vmf-movie-ratings {
  margin: 6px 0 10px;
}
.vmf-premium-note {
  color: #dc2626;
}
.vmf-cmts-user {
  width: 90px;
}
.vmf-cmts-td {
  background: none !important;
}
.vmf-no-results {
  width: 100%;
  display: inline-block;
  text-align: center;
  font-size: 15px;
  padding: 16px 0;
}
.vmf-mobile-cards {
  display: none;
}
/* ── View Anime (va-) ── */
/* Episode group title row */
.va-ep-group td {
  padding: 5px 8px !important;
  background: var(--c-subnav, #f3f4f6) !important;
  border-top: 1px solid var(--c-border, #e5e7eb) !important;
  border-bottom: none !important;
}
.va-ep-group-title {
  font-size: 12px;
  font-weight: 600;
  color: #4a9e4a;
  margin-right: 8px;
}
[data-theme="dark"] .va-ep-group td {
  background: var(--c-subnav, #111827) !important;
  border-color: var(--c-border, #374151) !important;
}
.va-card-body {
  padding: 6px 0;
}
.va-info-grid {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px 20px;
  align-items: start;
  padding-bottom: 8px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--c-border);
}
.va-info-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
}
.va-anime-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--c-heading);
  margin: 0 0 4px;
}
.va-cover-col {
  display: flex;
  justify-content: flex-start;
}
.va-cover-img {
  width: 100%;
  max-width: 150px;
  height: auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.35);
}
.va-bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
  margin-top: 6px;
}
.va-rating-cell {
  font-size: 13px;
  color: var(--c-body);
}
.va-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ── Game Console Cards (gc-) ── */
.gc-filter-fields {
  margin-bottom: 8px;
}
.gc-chevron {
  transition: transform 0.2s;
}
.gc-chevron-open {
  transform: rotate(180deg);
}
.gc-card {
  display: flex;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--c-border);
}
.gc-cover {
  flex-shrink: 0;
  width: 110px;
}
.gc-cover-img {
  width: 110px;
  height: auto;
  display: block;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.gc-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.gc-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.gc-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  color: var(--c-heading);
}
.gc-title a {
  color: inherit;
  text-decoration: none;
}
.gc-title a:hover {
  color: var(--c-primary);
}
.gc-platform-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--c-primary, #2563eb);
  color: #fff;
  white-space: nowrap;
  flex-shrink: 0;
}
.gc-rating {
  font-size: 12px;
}
.gc-plot {
  font-size: 13px;
  color: var(--c-body);
  line-height: 1.5;
}
.gc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 12px;
}
.gc-meta-item {
  color: var(--c-body);
}
.gc-meta-item strong {
  color: var(--c-heading);
  font-weight: 600;
}
.gc-links {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 2px;
}
.gc-releases {
  margin-bottom: 6px;
}
.gc-releases .br-table {
  border-top: none;
}

/* ── My Shows (ms-) ── */
.ms-today {
  margin-bottom: 22px;
}
.ms-today-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-muted);
  padding-bottom: 7px;
  border-bottom: 2px solid var(--c-primary);
  margin-bottom: 12px;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.ms-today-label > i {
  color: #ef4444;
}
.ms-today-grid {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  justify-content: center;
}
.ms-today-card {
  text-align: center;
  width: 150px;
  flex-shrink: 0;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--c-popular-card-bg);
}
.ms-today-time {
  font-size: 10px;
  color: #00ff64;
  font-weight: 600;
  margin-bottom: 3px;
  background: var(--c-primary);
}
.ms-today-card img {
  width: 100%;
  display: block;
}
.ms-today-info {
  text-align: center;
}
.ms-today-show {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-body) !important;
  text-decoration: none !important;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: -3px;
}
.ms-today-show:hover {
  color: var(--c-primary) !important;
}
.ms-today-ep {
  font-size: 11px;
  color: var(--c-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ms-today-code {
  font-size: 11px;
  color: var(--c-primary);
  font-weight: 600;
  margin-top: 2px;
}

.ms-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.ms-header-browse {
  margin-bottom: 0;
}
.ms-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ms-page-title {
  font-size: 22px;
  font-weight: 500;
  color: var(--c-heading);
  margin: 0;
}
.ms-watchlist-tag {
  font-size: 12px;
  font-weight: 500;
  color: #22c55e;
  font-style: italic;
}
.ms-rss {
  font-size: 14px;
}
.ms-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: fit-content;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  overflow: hidden;
}
.ms-nav-link {
  font-size: 13px;
  color: var(--c-primary);
  text-decoration: none;
  padding: 5px 12px;
  border-right: 1px solid var(--c-border);
  background: var(--c-surface);
  transition: background 0.15s;
  white-space: nowrap;
}
.ms-nav-link:last-child {
  border-right: none;
}
.ms-nav-link:hover {
  background: var(--c-subnav, #f3f4f6);
  color: var(--c-primary);
}
.ms-nav-active {
  font-weight: 600;
  background: var(--c-primary, #2563eb) !important;
  color: #fff !important;
}
[data-theme="dark"] .ms-nav-link:hover {
  background: var(--c-subnav, #1f2937);
}

.ms-shows-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-bottom: 10px;
}
.ms-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--c-surface);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s;
}
.ms-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.13);
  border-color: rgba(37, 99, 235, 0.38);
}
.ms-cover {
  width: 100%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--c-subnav, #f3f4f6);
  flex-shrink: 0;
  position: relative;
}
.ms-cover-link {
  display: block;
  width: 100%;
  height: 100%;
}
@media (max-width: 767px) {
  .ms-cover-link,
  .mme-cover-link {
    pointer-events: none;
    cursor: default;
  }
}
.ms-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.22s ease;
  text-align: center;
}
.ms-card:hover .ms-cover-img {
  transform: scale(1.05);
}
.ms-cover-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.76);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.ms-card:hover .ms-cover-overlay {
  opacity: 1;
}
.ms-overlay-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
}
.ms-overlay-label {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.45);
}
.ms-cover-overlay .ms-badge-cat {
  background: rgba(37, 99, 235, 0.35) !important;
  color: #93c5fd !important;
  border: 1px solid rgba(37, 99, 235, 0.5);
  white-space: normal;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}
.ms-cover-overlay .ms-badge-qual {
  background: rgba(20, 184, 166, 0.35) !important;
  color: #5eead4 !important;
  border: 1px solid rgba(20, 184, 166, 0.5);
  white-space: normal;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}
.ms-body {
  flex: 1;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.ms-show-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--c-heading);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
  margin-bottom: 1px;
  text-align: center;
}
.ms-show-title:hover {
  color: var(--c-primary);
}
.ms-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.ms-badge-cat {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(37, 99, 235, 0.1);
  color: var(--c-primary);
  border-radius: 3px;
  padding: 1px 5px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ms-badge-qual {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(20, 184, 166, 0.1);
  color: #14b8a6;
  border-radius: 3px;
  padding: 1px 5px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ms-airdate {
  font-size: 10px;
  color: var(--c-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
.ms-airdate-left {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ms-airdate i {
  font-size: 9px;
  color: var(--c-primary);
  opacity: 0.65;
}
.ms-airdate-tba {
  font-style: italic;
  color: var(--c-muted);
}
.ms-status {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
  background: rgba(20, 184, 166, 0.5);
  border-radius: 3px;
  padding: 1px 5px;
}
.ms-status-ended {
  color: #fff;
  background: #ef4444;
}
.ms-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  margin-top: auto;
  padding-top: 5px;
  border-top: 1px solid var(--c-border);
}
.ms-act-link {
  color: var(--c-primary);
  text-decoration: none;
  font-weight: 600;
}
.ms-act-link:hover {
  text-decoration: underline;
}
.ms-act-sep {
  display: none;
}
.ms-act-remove {
  color: #ef4444;
}
[data-theme="dark"] .ms-card:hover {
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
}
.ms-upgrade-notice {
  text-align: center;
  padding: 32px 16px;
}
.ms-upgrade-notice i {
  font-size: 32px;
  color: var(--c-primary);
  margin-bottom: 12px;
  display: block;
}
.ms-upgrade-notice p {
  font-size: 16px;
  margin-bottom: 14px;
  color: var(--c-heading);
}
.ms-preview-img {
  max-width: 100%;
  margin-top: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* ── My Shows Edit All (mea-) ── */
.mea-table-wrap {
  border: 1px solid var(--c-border);
  border-radius: 6px;
}
.mea-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  table-layout: fixed;
}
.mea-th {
  padding: 5px 4px;
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  border-bottom: 1px solid var(--c-border);
  border-right: 1px solid var(--c-border);
  white-space: nowrap;
  color: var(--c-heading);
  background: var(--c-subnav, #f3f4f6);
}
.mea-th:last-child {
  border-right: none;
}
.mea-th-show {
  text-align: left;
}
.mea-th-group-hdr {
  background: rgba(37, 99, 235, 0.12) !important;
  color: var(--c-primary) !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 2px solid rgba(37, 99, 235, 0.3) !important;
}
.mea-th-group-hdr-qual {
  background: rgba(20, 184, 166, 0.12) !important;
  color: #14b8a6 !important;
  border-bottom-color: rgba(20, 184, 166, 0.3) !important;
}
.mea-th-cat {
  background: rgba(37, 99, 235, 0.2) !important;
  color: var(--c-primary) !important;
}
.mea-th-qual {
  background: rgba(20, 184, 166, 0.2) !important;
  color: #14b8a6 !important;
}
.mea-th-cat label,
.mea-th-qual label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
}
.mea-th-qual-first {
  border-left: 2px solid rgba(20, 184, 166, 0.3) !important;
}
.mea-th-size {
  width: 126px;
}
.mea-td {
  padding: 5px 4px;
  border-bottom: 1px solid var(--c-border);
  border-right: 1px solid var(--c-border);
  vertical-align: middle;
}
.mea-td:last-child {
  border-right: none;
}
.mea-td-chk {
  text-align: center;
}
.mea-td-cat {
  background: rgba(37, 99, 235, 0.2);
}
.mea-td-qual {
  background: rgba(20, 184, 166, 0.2);
}
.mea-td-size {
  white-space: nowrap;
}
.mea-row {
  background: var(--c-surface);
}
.mea-row.mea-alt {
  background: var(--c-subnav, #f9fafb);
}
[data-theme="dark"] .mea-row.mea-alt {
  background: var(--c-subnav, #1f2937);
}
.mea-show-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-primary);
  text-decoration: none;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mea-show-link:hover {
  text-decoration: underline;
}
.mea-chk {
  cursor: pointer;
  width: 13px;
  height: 13px;
  accent-color: var(--c-primary);
}
.mea-select {
  font-size: 10px;
  padding: 5px 2px;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  background: var(--c-surface);
  color: var(--c-body);
  text-align: center;
}
.mea-browse-row {
  padding: 0 !important;
}
.mys-browse-row {
  padding: 10px 0;
}
.mea-footer {
  margin-top: 10px;
}
.mea-row-chk {
  accent-color: #ef4444;
}

.hdspnactive {
  background-color: #87cefa;
  color: #fff;
  padding: 1px 6px;
  border-radius: 3px;
  display: inline-block;
}

/* ═══════════════════════════════════════
   Cinema Poster Grid  (moviescinema.tpl)
═══════════════════════════════════════ */
.cmc-search-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px;
  border-radius: 30px;
  border: 1px solid var(--c-border, #d1d5db);
  background: var(--c-surface, #fff);
  color: var(--c-secondary, #6b7280);
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.cmc-search-toggle:hover,
.cmc-search-toggle.cmc-search-active {
  background: var(--c-primary, #2563eb);
  border-color: var(--c-primary, #2563eb);
  color: #fff;
}
.cmc-chevron {
  font-size: 11px;
  transition: transform 0.2s ease;
}
.cmc-chevron-open {
  transform: rotate(180deg);
}
.cmc-filter-fields {
  margin-bottom: 4px;
}
/* ── Sort + filter bar ── */
.cmc-sort-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 12px;
}
.cmc-sort-pills {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
}
.cmc-sort-btn {
  display: inline-block;
  padding: 1px 10px;
  border-radius: 30px;
  border: 1px solid var(--c-border, #d1d5db);
  background: var(--c-surface, #fff);
  color: var(--c-secondary, #6b7280);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.cmc-sort-btn:hover,
.cmc-sort-btn.active {
  background: var(--c-primary, #2563eb);
  border-color: var(--c-primary, #2563eb);
  color: #fff;
  text-decoration: none;
}
.cmc-lbl-short {
  display: none;
}
.cmc-lbl-full {
  display: inline;
}
.cmc-filter-form {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.cmc-filter-label {
  font-size: 13px;
  color: var(--text-secondary, #6b7280);
}
/* ── Poster grid ── */
.cmc-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  padding: 4px 0 16px;
}
.cmc-card {
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface, #fff);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.cmc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
}
.cmc-poster-wrap {
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--surface-alt, #f3f4f6);
  text-align: center;
}
.cmc-mob-poster-overlay {
  display: none;
}
.mcc-mob-poster-overlay {
  display: none;
}
.cmc-poster-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* ── Hover overlay ── */
.cmc-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  opacity: 0;
  transition: opacity 0.28s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 36px 8px 8px;
}
.cmc-card:hover .cmc-overlay {
  opacity: 1;
}
.cmc-overlay-badges {
  position: absolute;
  top: 6px;
  left: 0;
  right: 0;
  padding: 0 5px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 4px;
}
.cmc-mob-actions,
.cmc-mob-badges {
  display: none;
}
.cmc-badge {
  display: inline-block;
  font-size: 10px;
  line-height: 1.2;
  padding: 2px 5px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  white-space: nowrap;
}
.cmc-res {
  border-color: rgba(37, 99, 235, 0.8);
  background: rgba(37, 99, 235, 0.5);
}
/* ── New / Flagged card corner ribbons ── */
.cmc-card-new .cmc-poster-wrap::after {
  content: "NEW";
  position: absolute;
  top: 3px;
  left: -30px;
  width: 100px;
  padding: 2px 0;
  background: #16c784;
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
  transform: rotate(-45deg);
  z-index: 10;
  pointer-events: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.cmc-card-flagged .cmc-poster-wrap::after {
  content: "REPORTED";
  position: absolute;
  top: 16px;
  right: -30px;
  width: 120px;
  padding: 4px 0;
  background: #dc2626;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
  transform: rotate(45deg);
  z-index: 10;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.cmc-more-btn {
  display: inline-block;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 5px;
  padding: 5px 14px;
  font-size: 12px;
  text-decoration: none;
  transition: background 0.15s;
}
.cmc-more-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  text-decoration: none;
}
.cmc-downloads {
  color: rgba(255, 255, 255, 0.75);
  font-size: 11px;
}
/* ── Card info (below poster) ── */
.cmc-info {
  text-align: center;
  padding: 6px 6px 10px;
}
.cmc-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #111827);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmc-title:hover {
  color: var(--accent, #2563eb);
}
.cmc-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 11px;
}
.cmc-meta-movie {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 5px;
}
.cmc-year {
  color: var(--text-muted, #9ca3af);
  text-decoration: none;
}
/* desktop: hidden — hover title= on More Info button shows release name */
.cmc-relname {
  display: none;
}
/* moviescinema release name — desktop: hidden; mobile: marquee */
.mcc-relname {
  display: none;
}
/* Desktop: single-line ellipsis — hide clone span, show text inline */
.mcc-relname .mar-inner,
.cmc-relname .mar-inner,
.mvb-relname .mar-inner,
.tvb-relname .mar-inner {
  display: inline;
}
.mcc-relname .mar-inner + .mar-inner,
.cmc-relname .mar-inner + .mar-inner,
.mvb-relname .mar-inner + .mar-inner,
.tvb-relname .mar-inner + .mar-inner {
  display: none;
}
.cmc-year:hover {
  color: var(--accent, #2563eb);
}
.cmc-rating {
  color: #f59e0b;
  font-size: 13px;
}
.cmc-rating .fa-star {
  font-size: 10px;
}
[data-theme="dark"] .cmc-search-toggle {
  background: var(--c-surface, #1f2937);
  border-color: var(--c-border, #374151);
  color: var(--c-secondary, #9ca3af);
}
[data-theme="dark"] .cmc-search-toggle:hover,
[data-theme="dark"] .cmc-search-toggle.cmc-search-active {
  background: var(--c-primary, #2563eb);
  border-color: var(--c-primary, #2563eb);
  color: #fff;
}
[data-theme="dark"] .cmc-sort-btn {
  background: var(--c-surface, #1f2937);
  border-color: var(--c-border, #374151);
  color: var(--c-secondary, #9ca3af);
}
[data-theme="dark"] .cmc-card {
  background: var(--surface, #1f2937);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] .cmc-poster-wrap {
  background: #111827;
}
[data-theme="dark"] .cmc-title {
  color: var(--text-primary, #f9fafb);
}
/* ═══════════════════════════════════════
   Series Detail Page (viewseries.tpl)
═══════════════════════════════════════ */
.vs-season-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 10px 0 12px;
}
.vs-season-tab {
  display: inline-block;
  padding: 4px 13px;
  border-radius: 16px;
  border: 1px solid var(--c-border, #d1d5db);
  background: var(--c-surface, #fff);
  color: var(--c-secondary, #6b7280);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition:
    background 0.12s,
    border-color 0.12s,
    color 0.12s;
}
.vs-season-tab:hover,
.vs-season-tab.active {
  background: var(--c-primary, #2563eb);
  border-color: var(--c-primary, #2563eb);
  color: #fff;
  text-decoration: none;
}
.vs-release-table {
  margin-bottom: 12px;
}
.vs-season-hdr td {
  padding: 10px 14px !important;
  background: linear-gradient(to right, rgba(37, 99, 235, 0.07), transparent) !important;
  border-top: 2px solid var(--c-border, #e5e7eb) !important;
  border-bottom: 1px solid var(--c-border, #e5e7eb) !important;
  border-left: 3px solid var(--c-primary, #2563eb) !important;
}
.vs-season-hdr-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.vs-season-ops {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.vs-season-ops small {
  font-size: 11px;
  color: var(--c-secondary, #6b7280);
  margin-right: 2px;
}
.vs-season-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--c-primary, #2563eb);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.vs-season-label::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-primary, #2563eb);
  flex-shrink: 0;
}
[data-theme="dark"] .vs-season-hdr td {
  background: linear-gradient(to right, rgba(37, 99, 235, 0.12), transparent) !important;
  border-color: var(--c-border, #374151) !important;
  border-left-color: var(--c-primary, #3b82f6) !important;
}
[data-theme="dark"] .vs-season-label {
  color: var(--c-primary, #3b82f6);
}
[data-theme="dark"] .vs-season-label::before {
  background: var(--c-primary, #3b82f6);
}
/* Episode info row */
.vs-episode-info td {
  padding: 5px 8px !important;
  background: var(--c-subnav, #f3f4f6) !important;
  border-top: 1px solid var(--c-border, #e5e7eb) !important;
  border-bottom: none !important;
}
.vs-ep-num {
  display: inline-block;
  font-weight: 700;
  font-size: 10px;
  background: var(--c-primary, #2563eb);
  color: #fff;
  padding: 0px 10px;
  border-radius: 30px;
  margin-right: 6px;
}
.vs-ep-airdate {
  font-size: 11px;
  color: #b565c4;
  margin-right: 8px;
}
.vs-ep-title {
  font-size: 12px;
  font-weight: 600;
  color: #4a9e4a;
  margin-right: 8px;
}
.vs-ep-summary {
  font-size: 11px;
  color: var(--c-secondary, #6b7280);
}
.epmore,
.epless {
  font-size: 11px;
  color: var(--c-link, #2563eb);
  text-decoration: none;
  margin-left: 3px;
}
[data-theme="dark"] .vs-season-tab {
  background: var(--c-surface, #1f2937);
  border-color: var(--c-border, #374151);
  color: var(--c-secondary, #9ca3af);
}
[data-theme="dark"] .vs-episode-info td {
  background: var(--c-subnav, #111827) !important;
  border-color: var(--c-border, #374151) !important;
}
.vs-hidden {
  display: none;
}
/* TV cover page — episode info below poster card */
.cmc-ep-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  background: var(--c-primary, #2563eb);
  padding: 0px 10px;
  border-radius: 30px;
  white-space: nowrap;
  flex-shrink: 0;
}
.mv-title-badge {
  font-size: 12px;
  vertical-align: middle;
}
.br-ep-badge {
  margin-left: 6px;
  vertical-align: middle;
}
.cmc-ep-title {
  font-size: 11px;
  color: var(--c-secondary, #6b7280);
  white-space: normal;
  word-break: break-word;
  text-align: center;
  line-height: 1.3;
}

/* Series release table — column widths match viewmoviefull.tpl */
.vs-release-table {
  table-layout: fixed;
}
.vs-release-table th.br-col-cat {
  width: 7%;
}
.vs-release-table th.br-col-info {
  width: 10%;
}
.vs-release-table th.br-col-posted {
  width: 5%;
}
.vs-release-table th.br-col-size {
  width: 7%;
}
.vs-release-table th.br-col-hits {
  width: 6%;
}
.vs-release-table th.br-col-cmts {
  width: 4%;
}
.vs-release-table th.br-col-links {
  width: 6%;
}
.vs-release-table th.br-col-chk {
  width: 3%;
}

/* ═══════════════════════════════════════
   Myshows Add/Edit Page (myshows-add.tpl)
═══════════════════════════════════════ */
.msa-title-stack {
  display: flex;
  flex-direction: column;
}
.msa-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.msa-breadcrumb {
  font-size: 12px;
  color: #22c55e;
}
.msa-show-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--c-text);
  margin: 0 0 16px;
}
.msa-layout {
  display: flex;
  gap: 28px;
  align-items: stretch;
  margin-top: 12px;
}
.msa-cover {
  flex: 0 0 200px;
  display: flex;
  align-items: center;
}
.msa-cover-img {
  width: 100%;
  border-radius: 6px;
  display: block;
}
.msa-form {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  padding: 20px 0;
}
.msa-section {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}
.msa-section-label {
  flex: 0 0 90px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-primary);
  display: flex;
  align-items: center;
  gap: 4px;
}
.msa-section-label-qual {
  color: #14b8a6;
}
.msa-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 16px;
}
.msa-check-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  cursor: pointer;
  color: var(--c-text);
  user-select: none;
}
.msa-check-label input[type="checkbox"] {
  accent-color: var(--c-primary);
  width: 13px;
  height: 13px;
  cursor: pointer;
}
.msa-size-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.msa-select {
  font-size: 11px;
  padding: 3px 6px;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  background: var(--c-surface);
  color: var(--c-text);
}
.msa-footer {
  margin-top: 20px;
}

/* browse-row with no left side (myshows) — push filter to the right */
.browse-row-myshows {
  justify-content: flex-end !important;
  padding: 0 !important;
}

/* ═══════════════════════════════════════
   Series List Page (viewserieslist.tpl)
═══════════════════════════════════════ */

/* Toolbar: letter nav + country + search */
.vsl-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 8px;
  padding: 8px 12px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: var(--c-surface);
}
.vsl-jumpbar-wrap {
  flex: 1;
  width: auto !important;
  float: none !important;
}
.vsl-jumpbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
}
.vsl-jump-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-text-muted);
  margin-right: 6px;
  white-space: nowrap;
}
.vsl-pill {
  display: inline-block;
  padding: 2px 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-text-muted);
  border-radius: 4px;
  text-decoration: none;
  transition:
    background 0.15s,
    color 0.15s;
}
.vsl-pill:hover {
  background: var(--c-border);
  color: var(--c-text);
}
.vsl-pill-active {
  background: var(--c-primary) !important;
  color: #fff !important;
}

/* Pager + search on one row */
.vsl-pager-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
}
.vsl-pager-row > div.pager {
  flex: 1;
}

.vsl-country,
.vsl-country form {
  float: none !important;
  width: auto !important;
  display: flex;
  align-items: center;
}
.vsl-select {
  font-size: 12px;
  padding: 5px 8px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background: var(--c-surface);
  color: var(--c-text);
  cursor: pointer;
}
.vsl-search-form {
  display: flex !important;
  align-items: center;
  gap: 6px;
  float: none !important;
  margin: 0 0 0 auto !important;
  width: auto !important;
}
.vsl-search-label {
  font-size: 12px;
  color: var(--c-text-muted);
  white-space: nowrap;
}
.vsl-search-input {
  font-size: 12px;
  padding: 5px 8px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background: var(--c-surface);
  color: var(--c-text);
  width: 180px;
}
.vsl-search-btn {
  font-size: 12px;
  padding: 5px 12px;
  background: var(--c-primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  line-height: 1;
}
.vsl-search-btn:hover {
  background: #1d4ed8;
}

/* Letter group header */
.vsl-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 4px !important;
}
.vsl-letter-head {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-primary) !important;
  padding: 0 !important;
  border-bottom: 1px solid var(--c-border);
  margin: 0 0 2px !important;
}

/* Series item */
.vsl-item {
  display: flex !important;
  gap: 14px !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid var(--c-border) !important;
  align-items: flex-start !important;
  background: none !important;
}
.vsl-item:last-child {
  border-bottom: none !important;
}

/* Cover image */
.vsl-item .image_details {
  flex: 0 0 72px !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.vsl-item .image_details img.shadow {
  width: 72px !important;
  height: 100px !important;
  object-fit: cover;
  border-radius: 6px;
  display: block !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
}

/* Item body */
.vsl-item .contents {
  flex: 1 !important;
  min-width: 0 !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.vsl-item .contents > a.title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--c-text) !important;
  text-decoration: none !important;
  display: block !important;
  margin-bottom: 3px !important;
  line-height: 1.3 !important;
}
.vsl-item .contents > a.title font {
  font-size: inherit !important;
}
.vsl-item .contents > a.title:hover {
  color: var(--c-primary) !important;
}
.vsl-last-aired {
  font-size: 11px;
  color: var(--c-text-muted);
  margin-bottom: 4px;
}
.vsl-item .contents .description {
  font-size: 12px !important;
  color: var(--c-text-muted) !important;
  line-height: 1.5 !important;
  margin: 4px 0 8px !important;
}
.vsl-item .contents .actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0px 18px !important;
  align-items: center !important;
}
.vsl-item .contents .actions .country_dtl {
  font-size: 12px !important;
  color: var(--c-text-muted) !important;
  float: none !important;
}
.vsl-item .contents .actions .genre {
  font-size: 12px !important;
  color: var(--c-text-muted) !important;
  float: none !important;
  width: 100% !important;
  order: -1;
  margin-bottom: 2px;
}
.vsl-item .contents .actions .country_dtl b,
.vsl-item .contents .actions .genre b {
  color: var(--c-text) !important;
  font-weight: 600 !important;
}
.vsl-item .contents .actions .genre font {
  color: #14b8a6 !important;
}
.vsl-item .contents .actions .country_dtl a {
  color: #a855f7 !important;
  text-decoration: none !important;
}
.vsl-item .contents .watch_list {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11px !important;
  float: none !important;
}
.vsl-item .contents .watch_list b {
  color: var(--c-text) !important;
  font-weight: 600 !important;
}
.vsl-item .contents .watch_list a.myshows[rel="edit"] {
  color: var(--c-primary) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.vsl-item .contents .watch_list a.myshows[rel="add"] {
  color: #22c55e !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.vsl-item .contents .watch_list a.myshows[rel="remove"] {
  color: #ef4444 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.vsl-item .contents .buttons {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  float: none !important;
}
.vsl-item .contents .buttons img {
  height: 16px !important;
  vertical-align: middle !important;
}

/* ═══════════════════════════════════════
   My Movies Search Results (mymovielist.tpl)
═══════════════════════════════════════ */
.mml-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 14px;
}
.mml-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--c-surface);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s;
}
.mml-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.13);
  border-color: rgba(37, 99, 235, 0.38);
}
.mml-cover {
  width: 100%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--c-border);
  position: relative;
  flex-shrink: 0;
}
.mml-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.22s ease;
}
.mml-card:hover .mml-cover-img {
  transform: scale(1.05);
}
.mml-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.76);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.mml-card:hover .mml-overlay {
  opacity: 1;
  pointer-events: auto;
}
.mml-overlay-btn {
  display: inline-block;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 5px;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: background 0.15s;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
}
.mml-overlay-btn:hover {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
}
.mml-overlay-imdb:hover {
  background: #f5c518;
  border-color: #f5c518;
  color: #000;
}
.mml-body {
  flex: 1;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mml-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--c-text);
  text-decoration: none;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mml-title:hover {
  color: var(--c-primary);
}
.mml-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.mml-year {
  font-size: 10px;
  color: var(--c-text-muted);
}
.mml-rating {
  font-size: 10px;
  color: #f59e0b;
  font-weight: 600;
}
.mml-plot {
  font-size: 10px;
  color: var(--c-text-muted);
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mml-actions {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 6px;
}
.mml-btn {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 4px;
  text-decoration: none;
  background: var(--c-border);
  color: var(--c-text);
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}
.mml-btn:hover {
  background: var(--c-primary);
  color: #fff;
}
.mml-btn-add {
  background: rgba(34, 197, 94, 0.15);
  color: #16a34a;
}
.mml-btn-add:hover {
  background: #22c55e;
  color: #fff;
}
.mml-btn-remove {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
}
.mml-btn-remove:hover {
  background: #ef4444;
  color: #fff;
}

/* My Movies list results (mymovielist.tpl) */
.mml-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.mml-list-item {
  display: flex !important;
  gap: 14px !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid var(--c-border) !important;
  align-items: flex-start !important;
}
.mml-list-item:last-child {
  border-bottom: none !important;
}
.mml-list-cover {
  flex: 0 0 72px !important;
}
.mml-list-cover-img {
  width: 72px !important;
  height: 100px !important;
  object-fit: cover;
  border-radius: 6px;
  display: block !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.mml-list-body {
  flex: 1 !important;
  min-width: 0 !important;
}
.mml-list-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--c-text) !important;
  text-decoration: none !important;
  display: block !important;
  margin-bottom: 3px !important;
  line-height: 1.3 !important;
}
.mml-list-title:hover {
  color: var(--c-primary) !important;
}
.mml-list-year {
  font-size: 12px;
  font-weight: 400;
  color: var(--c-text-muted);
}
.mml-list-rating {
  font-size: 11px;
  color: #f59e0b;
  font-weight: 600;
  margin-bottom: 4px;
}
.mml-list-plot {
  font-size: 12px;
  color: var(--c-text-muted);
  line-height: 1.5;
  margin-bottom: 8px;
}
.mml-list-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.mml-list-btn {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 5px;
  text-decoration: none;
  background: var(--c-border);
  color: var(--c-text);
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
  border: none;
}
.mml-list-btn:hover {
  background: var(--c-primary);
  color: #fff;
}
.mml-list-btn-primary {
  background: var(--c-primary);
  color: #fff;
}
.mml-list-btn-primary:hover {
  background: #1d4ed8;
  color: #fff;
}
.mml-list-btn-imdb {
  background: rgba(245, 197, 24, 0.15);
  color: #92730a;
}
.mml-list-btn-imdb:hover {
  background: #f5c518;
  color: #000;
}
.mml-list-btn-add {
  background: rgba(34, 197, 94, 0.15);
  color: #16a34a;
}
.mml-list-btn-add:hover {
  background: #22c55e;
  color: #fff;
}
.mml-list-btn-remove {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
}
.mml-list-btn-remove:hover {
  background: #ef4444;
  color: #fff;
}

/* My Movies search form */
.mml-search-form {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 24px auto;
  width: fit-content;
}
.mml-search-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--c-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.mml-search-input {
  width: 280px;
  font-size: 12px;
  padding: 6px 10px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background: var(--c-surface);
  color: var(--c-text);
  outline: none;
}
.mml-search-input:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.mml-search-btn {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  background: var(--c-primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.mml-search-btn:hover {
  background: #1d4ed8;
}

.mml-loading {
  text-align: center;
  padding: 40px 0;
  font-size: 14px;
  color: var(--c-text-muted);
}
.mml-loading .fa-circle-notch {
  font-size: 28px;
  color: var(--c-primary);
  display: block;
  margin-bottom: 8px;
}

/* ═══════════════════════════════════════
   My Movies Manage page (mymoviesedit.tpl) — mme-*
═══════════════════════════════════════ */
.mme-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.mme-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--c-surface);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s;
}
.mme-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.13);
  border-color: rgba(37, 99, 235, 0.38);
}
.mme-cover {
  width: 100%;
  aspect-ratio: 2/3;
  overflow: hidden;
  background: var(--c-subnav, #f3f4f6);
  flex-shrink: 0;
  position: relative;
}
.mme-cover-link {
  display: block;
  width: 100%;
  height: 100%;
}
.mme-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.22s ease;
}
.mme-card:hover .mme-cover-img {
  transform: scale(1.05);
}
.mme-cover-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.76);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.mme-card:hover .mme-cover-overlay {
  opacity: 1;
}
.mme-badge-cat {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(37, 99, 235, 0.35);
  color: #93c5fd;
  border: 1px solid rgba(37, 99, 235, 0.5);
  border-radius: 3px;
  padding: 2px 6px;
  white-space: normal;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}
.mme-badge-qual {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(20, 184, 166, 0.35);
  color: #5eead4;
  border: 1px solid rgba(20, 184, 166, 0.5);
  border-radius: 3px;
  padding: 2px 6px;
  white-space: normal;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}
.mme-body {
  flex: 1;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.mme-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--c-heading);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
  text-align: center;
}
.mme-title:hover {
  color: var(--c-primary);
}
.mme-rating {
  font-size: 12px;
  font-weight: 600;
  color: #f59e0b;
}
.mme-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  margin-top: auto;
  padding-top: 5px;
  border-top: 1px solid var(--c-border);
}
.mme-movie-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  margin-top: auto;
  padding-top: 5px;
}
.mme-act-link {
  color: var(--c-primary);
  text-decoration: none;
  font-weight: 600;
}
.mme-act-link:hover {
  text-decoration: underline;
}
.mme-act-imdb {
  color: #92730a;
}
.mme-act-imdb:hover {
  color: #000;
}
.mme-act-remove {
  color: #ef4444;
}

/* ═══════════════════════════════════════
   My Movies Add/Edit Filters (mymovies-add.tpl) — mma-*
═══════════════════════════════════════ */
.mma-title-stack {
  display: flex;
  flex-direction: column;
}
.mma-show-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--c-text);
  margin: 0 0 16px;
}
.mma-show-year {
  font-weight: 400;
  color: var(--c-text-muted);
  font-size: 15px;
  margin-left: 4px;
}
.mma-layout {
  display: flex;
  gap: 28px;
  align-items: stretch;
  margin-top: 12px;
}
.mma-cover {
  flex: 0 0 200px;
  display: flex;
  align-items: center;
}
.mma-cover-img {
  width: 100%;
  border-radius: 6px;
  display: block;
}
.mma-form {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  padding: 20px 0;
}
.mma-section {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}
.mma-section-label {
  flex: 0 0 90px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-primary);
  display: flex;
  align-items: center;
  gap: 4px;
}
.mma-section-label-qual {
  color: #14b8a6;
}
.mma-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 16px;
}
.mma-check-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  cursor: pointer;
  color: var(--c-text);
  user-select: none;
}
.mma-check-label input[type="checkbox"] {
  accent-color: var(--c-primary);
  width: 13px;
  height: 13px;
  cursor: pointer;
}
.mma-footer {
  margin-top: 20px;
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ═══════════════════════════════════════
   Forum Category Page (forum_cat.tpl) — frc-*
═══════════════════════════════════════ */
tr.hidelatestpost {
  display: none;
}
.frc-header-right {
  display: flex;
  align-items: center;
}
.frc-search-form {
  display: flex;
  gap: 6px;
  align-items: center;
}
.frc-search-input {
  font-size: 12px;
  padding: 6px 10px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background: var(--c-surface);
  color: var(--c-text);
  width: 200px;
  outline: none;
}
.frc-search-input:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.frc-search-btn {
  padding: 6px 12px;
  background: var(--c-primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
}
.frc-search-btn:hover {
  background: #1d4ed8;
}

/* Card wrapper */
.frc-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
}

/* Mobile-only card views — hidden by default, shown only ≤767px */
.frc-post-cards,
.frc-forum-cards {
  display: none;
}

/* Table base */
.frc-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.frc-table thead th {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--c-text-muted);
  padding: 6px 10px;
  border: 1px solid var(--c-border);
  background: rgba(0, 0, 0, 0.025);
}
[data-theme="dark"] .frc-table thead th {
  background: rgba(255, 255, 255, 0.03);
}
.frc-table tbody tr {
  transition: background 0.12s;
}
.frc-table tbody tr:hover {
  background: rgba(37, 99, 235, 0.04);
}
.frc-table tbody td {
  padding: 6px 10px;
  vertical-align: middle;
  border: 1px solid var(--c-border);
}

/* Section title row (colspan spanning full width) */
.frc-table-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--c-primary) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  padding: 7px 10px !important;
  border-bottom: 1px solid var(--c-border) !important;
  background: rgba(37, 99, 235, 0.04) !important;
}
.frc-table-title i {
  margin-right: 6px;
}
.frc-title-left {
  text-align: left !important;
}

/* Subheader row for recent posts */
.frc-table-subhead th {
  background: rgba(0, 0, 0, 0.015) !important;
  color: var(--c-text-muted) !important;
  text-align: center;
}
.frc-table-subhead th:first-child {
  text-align: left;
}
[data-theme="dark"] .frc-table-subhead th {
  background: rgba(255, 255, 255, 0.02) !important;
}

/* Column alignments */
.frc-th-center {
  text-align: center;
}
.frc-th-stat {
  text-align: center;
}
.frc-th-last {
  text-align: left;
}
.frc-td-center {
  text-align: center;
}
.frc-td-stat {
  font-size: 12px;
  font-weight: 500;
  color: var(--c-text);
  text-align: center;
}
.frc-td-time {
  font-size: 11px;
  color: var(--c-text-muted);
  white-space: nowrap;
}
.frc-td-cat {
  font-size: 12px;
  color: var(--c-text-muted);
}

/* Recent posts cells */
.frc-post-cell {
  min-width: 0;
}
.frc-post-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.frc-post-title:hover {
  color: var(--c-primary);
}
.frc-post-preview {
  display: block;
  font-size: 12px;
  color: var(--c-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Recent posts footer */
.frc-recent-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  border-top: 1px solid var(--c-border);
}
.frc-load-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--c-text-muted);
  text-decoration: none;
}
.frc-load-more:hover {
  color: var(--c-primary);
}
.frc-board-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--c-text-muted);
  text-decoration: none;
}
.frc-board-link:hover {
  color: var(--c-primary);
}

/* Forum rows */
.frc-icon-cell {
  width: 52px;
}
.frc-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(37, 99, 235, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-primary);
  font-size: 14px;
}
.frc-forum-cell {
  min-width: 0;
}
.frc-forum-name {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.frc-forum-row:hover .frc-forum-name {
  color: var(--c-primary);
}
.frc-forum-tag {
  display: block;
  font-size: 11px;
  color: var(--c-text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.frc-last-cell {
  width: 180px;
}
.frc-last-date {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--c-text);
  text-align: center;
}
.frc-last-by {
  display: block;
  font-size: 10px;
  color: var(--c-text-muted);
  margin-top: 2px;
  text-align: center;
}
.frc-last-empty {
  color: var(--c-text-muted);
  opacity: 0.4;
}

/* Role colours */
.frc-role-admin {
  color: #ef4444;
  font-weight: 700;
}
.frc-role-moderator {
  color: var(--c-primary);
  font-weight: 700;
}
.frc-role-editor {
  color: #a855f7;
  font-weight: 700;
}
.frc-role-lult {
  color: #f97316;
  font-weight: 700;
}
.frc-role-platinum {
  color: #94a3b8;
  font-weight: 700;
}
.frc-role-vip {
  color: #22c55e;
  font-weight: 700;
}

/* ═══════════════════════════════════════
   Search Forum Page (searchforum.tpl) — srf-*
═══════════════════════════════════════ */
.srf-bc-link {
  color: var(--c-text-muted);
  text-decoration: none;
}
.srf-bc-link:hover {
  color: var(--c-primary);
}
.srf-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--c-text-muted);
  margin-top: 2px;
}
.srf-breadcrumb-link {
  color: var(--c-text-muted);
  text-decoration: none;
}
.srf-breadcrumb-link:hover {
  color: var(--c-primary);
}
.srf-breadcrumb-sep {
  opacity: 0.4;
}
.srf-header-right {
  display: flex;
  align-items: center;
}
.srf-search-form {
  display: flex;
  gap: 6px;
  align-items: center;
}
.srf-search-input {
  font-size: 12px;
  padding: 6px 10px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background: var(--c-surface);
  color: var(--c-text);
  width: 220px;
  outline: none;
}
.srf-search-input:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.srf-search-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  background: var(--c-primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}
.srf-search-btn:hover {
  background: #1d4ed8;
}

/* Results card */
.srf-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
}

/* Mobile-only card view — hidden by default, shown only ≤767px */
.srf-cards {
  display: none;
}
.srf-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.srf-table-head th {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--c-text-muted);
  padding: 5px 8px;
  border: 1px solid var(--c-border);
  background: rgba(0, 0, 0, 0.025);
  text-align: left;
}
[data-theme="dark"] .srf-table-head th {
  background: rgba(255, 255, 255, 0.03);
}
.srf-th-center {
  text-align: center !important;
}
.srf-table tbody tr {
  transition: background 0.12s;
}
.srf-table tbody tr:hover {
  background: rgba(37, 99, 235, 0.04);
}
.srf-table tbody td {
  padding: 4px 8px;
  vertical-align: middle;
  border: 1px solid var(--c-border);
  line-height: 1.3;
}
.srf-topic-cell {
  min-width: 0;
}
.srf-sticky {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  color: #f97316;
  margin-right: 6px;
}
.srf-topic-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--c-text);
  text-decoration: none;
}
.srf-row:hover .srf-topic-title {
  color: var(--c-primary);
}
.srf-td-center {
  text-align: center;
}
.srf-td-cat {
  font-size: 11px;
  color: var(--c-text-muted);
  text-align: center;
}
.srf-td-stat {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-text);
}
.srf-last-cell {
  min-width: 0;
}
.srf-last-date {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--c-text);
  text-decoration: none;
  text-align: center;
}
.srf-last-date:hover {
  color: var(--c-primary);
}
.srf-last-by {
  display: block;
  font-size: 10px;
  color: var(--c-text-muted);
  text-align: center;
}
.srf-last-empty {
  color: var(--c-text-muted);
  opacity: 0.4;
}

/* Empty / no results */
.srf-no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  color: var(--c-text-muted);
  font-size: 14px;
}
.srf-no-results-icon {
  font-size: 32px;
  margin-bottom: 12px;
  opacity: 0.4;
}

/* ═══════════════════════════════════════
   Forum Post / Thread Page (forum_post.tpl) — frp-*
═══════════════════════════════════════ */
.frp-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.frp-reply-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--c-primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.frp-reply-btn:hover {
  background: #1d4ed8;
  color: #fff;
}

/* Thread container */
.frp-thread {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 10px;
  margin-top: 10px;
}

/* Single post */
.frp-post {
  display: flex;
  gap: 0;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  overflow: hidden;
}

/* User sidebar */
.frp-user {
  width: 130px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 14px 10px;
  border-right: 1px solid var(--c-border);
  background: rgba(0, 0, 0, 0.02);
  text-align: center;
}
[data-theme="dark"] .frp-user {
  background: rgba(255, 255, 255, 0.02);
}
.frp-avatar-img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--c-border);
}
.frp-avatar-placeholder {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(37, 99, 235, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--c-primary);
}
.frp-username {
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.frp-username:hover {
  text-decoration: underline;
}
.frp-role-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.frp-badge-admin,
.frp-badge-moderator {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}
.frp-badge-editor {
  background: rgba(168, 85, 247, 0.12);
  color: #a855f7;
}
.frp-badge-lult {
  background: rgba(249, 115, 22, 0.12);
  color: #f97316;
}
.frp-badge-platinum {
  background: rgba(148, 163, 184, 0.12);
  color: #94a3b8;
}
.frp-badge-vip {
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
}
.frp-badge-member {
  background: rgba(37, 99, 235, 0.08);
  color: var(--c-primary);
}
.frp-provider {
  font-size: 10px;
  color: #22c55e;
  font-weight: 600;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.frp-warned {
  font-size: 10px;
  color: #ef4444;
  font-weight: 600;
}
.frp-post-date {
  font-size: 10px;
  color: var(--c-text-muted);
}
.frp-post-actions {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: center;
}
.frp-act-btn {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  text-decoration: none;
  background: rgba(37, 99, 235, 0.08);
  color: var(--c-primary);
}
.frp-act-btn:hover {
  background: rgba(37, 99, 235, 0.18);
}
.frp-act-delete {
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
}
.frp-act-delete:hover {
  background: rgba(239, 68, 68, 0.18);
}

/* Post content */
.frp-content {
  flex: 1;
  min-width: 0;
  padding: 14px 16px;
}
.frp-message {
  font-size: 13px;
  line-height: 1.6;
  color: var(--c-text);
  word-break: break-word;
}
.frp-message-empty {
  color: var(--c-text-muted);
  opacity: 0.4;
}

/* Role colours for username */
.frp-role-admin,
.frp-role-moderator {
  color: #ef4444;
}
.frp-role-editor {
  color: #a855f7;
}
.frp-role-lult {
  color: #f97316;
}
.frp-role-platinum {
  color: #94a3b8;
}
.frp-role-vip {
  color: #22c55e;
}
.frp-role-member {
  color: var(--c-primary);
}

/* Quick reply card */
.frp-reply-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  overflow: hidden;
  /*margin-bottom: 20px;*/
  margin-top: 10px;
}
.frp-reply-head {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--c-primary);
  padding: 8px 14px;
  border-bottom: 1px solid var(--c-border);
  background: rgba(37, 99, 235, 0.04);
}
.frp-reply-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  font-size: 13px;
  border: none;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-text);
  resize: vertical;
  outline: none;
  display: block;
}
.frp-reply-foot {
  padding: 8px 14px;
  display: flex;
  justify-content: flex-end;
}
.frp-error {
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
  font-size: 12px;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(239, 68, 68, 0.2);
}

/* Locked notice */
.frp-locked-notice {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-text-muted);
  padding: 6px 12px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  margin-bottom: 16px;
}
.frp-empty {
  text-align: center;
  padding: 40px;
  color: var(--c-text-muted);
  font-size: 13px;
}

/* ═══════════════════════════════════════
   Forum Topic List (forum_topic.tpl) — frt-*
═══════════════════════════════════════ */
.frt-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.frt-pager {
  margin-bottom: 10px;
}

.frt-notice {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-primary);
  background: rgba(37, 99, 235, 0.06);
  border: 1px solid rgba(37, 99, 235, 0.15);
  border-radius: 6px;
  padding: 7px 12px;
  margin-bottom: 12px;
}
.frt-notice-warn {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.06);
  border-color: rgba(239, 68, 68, 0.15);
}

.frt-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 12px;
}

/* Mobile-only card view — hidden by default, shown only ≤767px */
.frt-cards {
  display: none;
}
.frt-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.frt-table-head th {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--c-text-muted);
  padding: 6px 10px;
  border: 1px solid var(--c-border);
  background: rgba(0, 0, 0, 0.025);
  text-align: left;
}
[data-theme="dark"] .frt-table-head th {
  background: rgba(255, 255, 255, 0.03);
}
.frt-th-center {
  text-align: center !important;
}
.frt-table tbody tr {
  transition: background 0.12s;
}
.frt-table tbody tr:hover {
  background: rgba(37, 99, 235, 0.04);
}
.frt-table tbody td {
  padding: 6px 10px;
  vertical-align: middle;
  border: 1px solid var(--c-border);
  line-height: 1.3;
}

.frt-topic-cell {
  min-width: 0;
}
.frt-sticky {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  color: #f97316;
  margin-right: 5px;
}
.frt-locked {
  color: var(--c-text-muted);
  font-size: 11px;
  margin-right: 4px;
float: right;
}
.frt-topic-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text);
  text-decoration: none;
}
.frt-row:hover .frt-topic-title {
  color: var(--c-primary);
}
.frt-admin-links {
  display: inline-flex;
  gap: 5px;
  margin-left: 8px;
}
.frt-act-btn {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 4px;
  text-decoration: none;
  background: rgba(37, 99, 235, 0.08);
  color: var(--c-primary);
}
.frt-act-btn:hover {
  background: rgba(37, 99, 235, 0.18);
}
.frt-act-delete {
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
}
.frt-act-delete:hover {
  background: rgba(239, 68, 68, 0.18);
}

.frt-td-center {
  text-align: center;
}
.frt-td-stat {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-text);
}
.frt-last-cell {
  min-width: 0;
}
.frt-last-date {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--c-text);
  text-align: center;
}
.frt-last-by {
  display: block;
  font-size: 11px;
  color: var(--c-text-muted);
  text-align: center;
}
.frt-last-empty {
  color: var(--c-text-muted);
  opacity: 0.4;
}

.frt-sub-btn {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  text-decoration: none;
  background: rgba(37, 99, 235, 0.08);
  color: var(--c-primary);
  white-space: nowrap;
}
.frt-sub-btn:hover {
  background: rgba(37, 99, 235, 0.18);
}
.frt-sub-active {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
}
.frt-sub-active:hover {
  background: rgba(34, 197, 94, 0.2);
}

.frt-empty {
  text-align: center;
  padding: 40px;
  color: var(--c-text-muted);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* ═══════════════════════════════════════
   Forum Topic Edit / New (forum_topic_edit.tpl) — fte-*
═══════════════════════════════════════ */
.fte-fields {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.fte-field-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.fte-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-text-muted);
}
.fte-input {
  width: 100%;
  box-sizing: border-box;
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background: var(--c-surface);
  color: var(--c-text);
  outline: none;
}
.fte-input:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.fte-checks {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.fte-checks-row {
  flex-direction: row;
  align-items: center;
  gap: 16px;
}

/* ═══════════════════════════════════════
   Forum Post Edit / Reply (forum_post_edit.tpl) — fpe-*
═══════════════════════════════════════ */
.fpe-error {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
  font-size: 12px;
  font-weight: 600;
  padding: 10px 14px;
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 8px;
  margin-bottom: 14px;
}
.fpe-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
}
.fpe-card-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--c-primary);
  padding: 9px 14px;
  border-bottom: 1px solid var(--c-border);
  background: rgba(37, 99, 235, 0.04);
}
.fpe-form {
  display: flex;
  flex-direction: column;
}
.fpe-editor-wrap {
  padding: 14px;
}
.fpe-textarea {
  width: 100%;
  box-sizing: border-box;
  font-size: 13px;
  padding: 10px 12px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background: var(--c-surface);
  color: var(--c-text);
  resize: vertical;
  outline: none;
  display: block;
  line-height: 1.6;
}
.fpe-textarea:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.fpe-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--c-border);
  background: rgba(0, 0, 0, 0.015);
}
[data-theme="dark"] .fpe-footer {
  background: rgba(255, 255, 255, 0.02);
}

/* ═══════════════════════════════════════
   Myshows Page (myshows.tpl)
═══════════════════════════════════════ */

/* ═══════════════════════════════════════
   Movies List Page (movies.tpl)
═══════════════════════════════════════ */
/* Search toggle */
.mvb-search-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  background: #f8fafc;
  color: #475569;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
}
.mvb-search-toggle:hover,
.mvb-search-active {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}
.mvb-chevron {
  transition: transform 0.2s;
  font-size: 11px;
}
.mvb-chevron-open {
  transform: rotate(180deg);
}
.mvb-filter-hidden {
  display: none;
}
/* Pager bar */
.mvb-pager-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 5px 0;
}
.mvb-pager-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.mvb-pager-right .br-view-label {
  white-space: nowrap;
}
.mvb-pager-bottom {
  padding: 5px 0;
}
/* Clear button */
.mvb-btn-clear {
  background: #64748b;
  color: #fff;
  border-color: #64748b;
  text-decoration: none;
}
.mvb-btn-clear:hover {
  background: #475569;
  color: #fff;
}
/* Grid */
.mvb-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 4px;
}
.mvb-card {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  display: flex;
  flex-direction: row;
  background: #fff;
  overflow: hidden;
}
/* Poster */
.mvb-thumb {
  position: relative;
  flex-shrink: 0;
}
.mvb-thumb-new {
  overflow: hidden;
}
.mvb-thumb-new::after {
  content: "NEW";
  position: absolute;
  top: 3px;
  left: -30px;
  width: 100px;
  padding: 2px 0;
  background: #16c784;
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
  transform: rotate(-45deg);
  z-index: 10;
  pointer-events: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.mvb-thumb-link {
  display: block;
  height: 100%;
}
.mvb-thumb img {
  width: 110px;
  object-fit: cover;
  display: block;
  height: 100%;
}
.mvb-no-cover {
  width: 110px;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 30px;
  min-height: 161px;
  height: 100%;
}
/* Card content */
.mvb-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
}
.mvb-spacer {
  flex: 1;
}
.mvb-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
.mvb-title a {
  color: #2563eb;
  text-decoration: none;
}
.mvb-title a:hover {
  text-decoration: underline;
}
.mvb-genre {
  font-size: 12px;
  color: #64748b;
}
.mvb-date-ago {
  display: none;
}
.mvb-date-full {
  display: inline;
}
.mvb-title-na {
  color: #94a3b8 !important;
}
.mvb-title-na a {
  color: #94a3b8 !important;
}
.mvb-genre-na {
  color: #cbd5e1 !important;
}
.mvb-meta {
  font-size: 12px;
  color: #475569;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 2px;
  overflow: visible;
  position: relative;
}
.mvb-meta-spacer {
  flex: 1;
}
.mvb-dot {
  color: #cbd5e1;
  margin: 0 3px;
  flex-shrink: 0;
}
.mvb-cat {
  background: #e2e8f0;
  color: #475569;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}
.mvb-grabs {
  font-size: 11px;
  color: #64748b;
  flex-shrink: 0;
}
.mvb-row2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.mvb-ratings {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.mvb-ri {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  color: #1e293b;
}
.mvb-ri small {
  font-weight: 400;
  color: #64748b;
}
.mvb-ri-img,
.tvb-ri-img {
  height: 14px;
  width: auto;
  object-fit: contain;
  display: block;
}
.mvb-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.mvb-btn {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 4px;
  background: #f1f5f9;
  color: #475569;
  text-decoration: none;
  border: 1px solid #e2e8f0;
  white-space: nowrap;
}
.mvb-btn:hover {
  background: #e2e8f0;
  color: #1e293b;
}
.mvb-btn-dl {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}
.mvb-btn-dl:hover {
  background: #1d4ed8;
  color: #fff;
}
.mvb-relname {
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
  margin-top: auto;
  padding-top: 8px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mvb-relname a {
  color: #1e293b;
  text-decoration: none;
}
.mvb-relname a:hover {
  color: #2563eb;
}
/* Dark mode */
[data-theme="dark"] .mvb-search-toggle {
  background: #1e293b;
  border-color: #334155;
  color: #94a3b8;
}
[data-theme="dark"] .mvb-search-toggle:hover,
[data-theme="dark"] .mvb-search-active {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}
[data-theme="dark"] .mvb-card {
  background: #0b0f19;
  border-color: #334155;
}
[data-theme="dark"] .mvb-cat {
  background: #334155;
  color: #94a3b8;
}
[data-theme="dark"] .mvb-no-cover {
  background: #0f172a;
  color: #475569;
}
[data-theme="dark"] .mvb-genre {
  color: #94a3b8;
}
[data-theme="dark"] .mvb-meta {
  color: #94a3b8;
}
[data-theme="dark"] .mvb-dot {
  color: #334155;
}
[data-theme="dark"] .mvb-ri {
  color: #e2e8f0;
}
[data-theme="dark"] .mvb-ri small {
  color: #94a3b8;
}
[data-theme="dark"] .mvb-grabs {
  color: #64748b;
}
[data-theme="dark"] .mvb-btn {
  background: #0f172a;
  color: #94a3b8;
  border-color: #334155;
}
[data-theme="dark"] .mvb-btn:hover {
  background: #334155;
  color: #e2e8f0;
}
[data-theme="dark"] .mvb-relname {
  color: #cbd5e1;
}
[data-theme="dark"] .mvb-relname a {
  color: #cbd5e1;
}
[data-theme="dark"] .mvb-relname a:hover {
  color: #60a5fa;
}

/* ═══════════════════════════════════════
   TV List Page (tv_new.tpl)
═══════════════════════════════════════ */
.tvb-search-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  background: #f8fafc;
  color: #475569;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
}
.tvb-search-toggle:hover,
.tvb-search-active {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}
.tvb-chevron {
  transition: transform 0.2s;
  font-size: 11px;
}
.tvb-chevron-open {
  transform: rotate(180deg);
}
.tvb-filter-hidden {
  display: none;
}
.tvb-pager-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 5px 0;
}
.tvb-pager-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.tvb-pager-right .br-view-label {
  white-space: nowrap;
}
.tvb-pager-bottom {
  padding: 5px 0;
}
.tvb-btn-clear {
  background: #64748b;
  color: #fff;
  border-color: #64748b;
  text-decoration: none;
}
.tvb-btn-clear:hover {
  background: #475569;
  color: #fff;
}
.tvb-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 4px;
}
.tvb-card {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  display: flex;
  flex-direction: row;
  background: #fff;
  overflow: hidden;
}
.tvb-thumb {
  position: relative;
  flex-shrink: 0;
}
.tvb-thumb-new {
  overflow: hidden;
}
.tvb-thumb-new::after {
  content: "NEW";
  position: absolute;
  top: 3px;
  left: -30px;
  width: 100px;
  padding: 2px 0;
  background: #16c784;
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
  transform: rotate(-45deg);
  z-index: 10;
  pointer-events: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.tvb-thumb-link {
  display: block;
  height: 100%;
}
.tvb-thumb img {
  width: 110px;
  object-fit: cover;
  display: block;
  height: 100%;
}
.tvb-no-cover {
  width: 110px;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 30px;
  min-height: 161px;
  height: 100%;
}
.tvb-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
}
.tvb-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
.tvb-title a {
  color: #2563eb;
  text-decoration: none;
}
.tvb-title a:hover {
  text-decoration: underline;
}
.tvb-genre {
  font-size: 12px;
  color: #64748b;
}
.tvb-date-ago {
  display: none;
}
.tvb-date-full {
  display: inline;
}
.tvb-title-na {
  color: #94a3b8 !important;
}
.tvb-title-na a {
  color: #94a3b8 !important;
}
.tvb-genre-na {
  color: #cbd5e1 !important;
}
.tvb-ep {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 1px;
}
.tvb-ep-tag {
  font-size: 11px;
  font-weight: 700;
  background: #e0f2fe;
  color: #0369a1;
  padding: 1px 5px;
  border-radius: 3px;
}
.tvb-network {
  font-size: 11px;
  color: #64748b;
}
.tvb-meta {
  font-size: 12px;
  color: #475569;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 2px;
  overflow: visible;
  position: relative;
}
.tvb-meta-spacer {
  flex: 1;
}
.tvb-dot {
  color: #cbd5e1;
  margin: 0 3px;
  flex-shrink: 0;
}
.tvb-cat {
  background: #e2e8f0;
  color: #475569;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}
.tvb-grabs {
  font-size: 11px;
  color: #64748b;
  flex-shrink: 0;
}
.tvb-row2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.tvb-ratings {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.tvb-ri {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  color: #1e293b;
}
.tvb-ri small {
  font-weight: 400;
  color: #64748b;
}
.tvb-ri-star {
  color: #f59e0b;
  font-size: 11px;
}
.tvb-status {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  background: #dcfce7;
  color: #166534;
}
.tvb-status-ended {
  background: #ef4444 !important;
  color: #fff !important;
}
.tvb-btn {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 4px;
  background: #f1f5f9;
  color: #475569;
  text-decoration: none;
  border: 1px solid #e2e8f0;
  white-space: nowrap;
}
.tvb-btn:hover {
  background: #e2e8f0;
  color: #1e293b;
}
.tvb-btn-dl {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}
.tvb-btn-dl:hover {
  background: #1d4ed8;
  color: #fff;
}
.tvb-relname {
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
  margin-top: auto;
  padding-top: 8px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tvb-relname a {
  color: #1e293b;
  text-decoration: none;
}
.tvb-relname a:hover {
  color: #2563eb;
}
.tvb-genre-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.tvb-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.tvb-title-row .tvb-title {
  flex: 1;
  min-width: 0;
}
.tvb-title-badges {
  display: flex;
  gap: 5px;
  align-items: center;
  flex-shrink: 0;
  flex-wrap: wrap;
  padding-top: 2px;
}
.tvb-airdate {
  font-size: 11px;
  color: #1a1a1a;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tvb-airdate i {
  color: #4db5ff;
}
[data-theme="dark"] .tvb-airdate i {
  color: var(--c-primary);
}
[data-theme="dark"] .tvb-airdate {
  color: #94a3b8;
}
.tvb-ri-img-dark {
  display: none;
}
[data-theme="dark"] .tvb-ri-img-light {
  display: none;
}
[data-theme="dark"] .tvb-ri-img-dark {
  display: block;
}
[data-theme="dark"] .tvb-search-toggle {
  background: #1e293b;
  border-color: #334155;
  color: #94a3b8;
}
[data-theme="dark"] .tvb-search-toggle:hover,
[data-theme="dark"] .tvb-search-active {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}
[data-theme="dark"] .tvb-card {
  background: #0b0f19;
  border-color: #334155;
}
[data-theme="dark"] .tvb-cat {
  background: #334155;
  color: #94a3b8;
}
[data-theme="dark"] .tvb-no-cover {
  background: #0f172a;
  color: #475569;
}
[data-theme="dark"] .tvb-genre {
  color: #94a3b8;
}
[data-theme="dark"] .tvb-meta {
  color: #94a3b8;
}
[data-theme="dark"] .tvb-dot {
  color: #334155;
}
[data-theme="dark"] .tvb-ep-tag {
  background: #0c2d48;
  color: #38bdf8;
}
[data-theme="dark"] .tvb-network {
  color: #64748b;
}
[data-theme="dark"] .tvb-ri {
  color: #94a3b8;
}
[data-theme="dark"] .tvb-ri small {
  color: #94a3b8;
}
[data-theme="dark"] .tvb-status {
  background: #14532d;
  color: #86efac;
}
[data-theme="dark"] .tvb-grabs {
  color: #64748b;
}
[data-theme="dark"] .tvb-btn {
  background: #0f172a;
  color: #94a3b8;
  border-color: #334155;
}
[data-theme="dark"] .tvb-btn:hover {
  background: #334155;
  color: #e2e8f0;
}
[data-theme="dark"] .tvb-relname {
  color: #cbd5e1;
}
[data-theme="dark"] .tvb-relname a {
  color: #cbd5e1;
}
[data-theme="dark"] .tvb-relname a:hover {
  color: #60a5fa;
}

/* ── Donate Page ── */
.donate-wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 0 64px;
  padding-top: 10px;
}
.donate-top-section {
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  background: #f0f7ff;
  padding: 20px 32px;
  margin-bottom: 32px;
}
.donate-header {
  text-align: center;
  padding: 0 0 0;
}
.donate-tagline {
  font-size: 24px;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 12px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.donate-title {
  font-size: 58px;
  font-weight: 900;
  color: #1e293b;
  margin: 0 0 14px;
  letter-spacing: -0.03em;
  line-height: 1;
}
.donate-title span {
  color: #2563eb;
}
.donate-subtitle {
  font-size: 15px;
  color: #64748b;
  margin: 0 auto;
  max-width: 560px;
  line-height: 1.6;
}
.donate-perks {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-bottom: 0;
  flex-wrap: wrap;
}
.donate-perk {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0px;
  text-align: center;
  width: 110px;
}
.donate-perk-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2563eb;
  font-size: 20px;
  flex-shrink: 0;
}
.donate-perk-label {
  font-size: 12px;
  font-weight: 500;
  color: #374151;
  line-height: 1.4;
}
.donate-tiers {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.donate-tier {
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  padding: 42px 26px 28px;
  text-align: center;
  background: #fff;
  position: relative;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s,
    box-shadow 0.15s;
  width: 280px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.donate-tier:hover {
  border-color: #93c5fd;
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08);
}
.donate-tier-active {
  border-color: #2563eb !important;
  background: #eff6ff !important;
  box-shadow: 0 8px 30px rgba(37, 99, 235, 0.15) !important;
}
.donate-tier-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: #2563eb;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 16px;
  border-radius: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.donate-tier-name {
  font-size: 20px;
  font-weight: 600;
  color: #1e293b;
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 10px;
}
.donate-tier-price-row {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  justify-content: center;
  margin-bottom: 4px;
}
.donate-tier-price {
  font-size: 30px;
  font-weight: 700;
  color: #1e293b;
  letter-spacing: -0.03em;
  line-height: 1;
}
.donate-tier-period {
  font-size: 16px;
  color: #94a3b8;
  font-weight: 500;
  padding-bottom: 8px;
  margin: 0;
}
.donate-tier-monthly {
  font-size: 13px;
  color: #94a3b8;
  margin-top: 4px;
  margin-bottom: 22px;
}
.donate-tier-feature-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  text-align: left;
}
.donate-tier-feature-list li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: #475569;
  line-height: 1.3;
}
.donate-tier-feature-list li::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 12px;
  flex-shrink: 0;
  min-width: 14px;
}
.donate-tier-feature-list .dtf-yes::before {
  content: "\f00c";
  color: #16a34a;
}
.donate-tier-feature-list .dtf-no::before {
  content: "\f00d";
  color: #dc2626;
}
.donate-tier-feature-list .dtf-no {
  color: #94a3b8;
}
.donate-tier-btn {
  display: block;
  width: 100%;
  padding: 13px 0;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  border: 2px solid #cbd5e1;
  color: #334155;
  background: transparent;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
  margin-top: auto;
}
.donate-tier-btn:hover {
  border-color: #94a3b8;
  color: #1e293b;
}
.donate-tier-active .donate-tier-btn {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}
.donate-tier-active .donate-tier-btn:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: #fff;
}
.donate-mid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 20px;
  margin-bottom: 20px;
}
.donate-payments,
.donate-why {
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 28px;
  background: #fff;
  text-align: center;
}
.donate-payments h3,
.donate-why h3 {
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  margin: 0 0 22px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.donate-pay-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.donate-pay-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 12px 18px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #f8fafc;
  gap: 14px;
  text-align: center;
}
.donate-pay-icon {
  width: 100%;
  height: 68px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 48px;
}
.dpi-amazon {
  background-image: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDM1LjQxOCAzNS40MTgiPjxwYXRoIGZpbGw9IiMxMTExMTEiIGQ9Ik0yMC45NDgsOS44OTFjLTAuODU3LDAuMDY4LTEuODQ3LDAuMTM2LTIuODM3LDAuMjY5Yy0xLjUxNiwwLjE5NS0zLjAzMiwwLjQ2MS00LjI4NCwxLjA1MwoJCWMtMi40MzksMC45OTQtNC4wODgsMy4xMDUtNC4wODgsNi4yMDljMCwzLjg5OCwyLjUwNiw1Ljg3NSw1LjY2OSw1Ljg3NWMxLjA1NywwLDEuOTEzLTAuMTI5LDIuNzAzLTAuMzI4CgkJYzEuMjU1LTAuMzk2LDIuMzEtMS4xMjMsMy41NjItMi40NDFjMC43MjcsMC45OSwwLjkyMywxLjQ1MywyLjE3NywyLjUwOWMwLjMyOSwwLjEzMywwLjY1OCwwLjEzMywwLjkyMi0wLjA2NgoJCWMwLjc5MS0wLjY1OSwyLjE3NC0xLjg0OCwyLjkwMS0yLjUwOGMwLjMyOC0wLjI2NywwLjI2My0wLjY2LDAuMDY2LTAuOTkyYy0wLjcyNy0wLjkyNC0xLjQ1LTEuNzE4LTEuNDUtMy40OTh2LTUuOTQzCgkJYzAtMi41MTMsMC4xOTUtNC44MjItMS42NDctNi41MzdjLTEuNTE4LTEuMzkxLTMuODkxLTEuOTE2LTUuNzM1LTEuOTE2Yy0wLjI2NCwwLTAuNTI3LDAtMC43OTIsMAoJCWMtMy4zNjIsMC4xOTctNi45MjEsMS42NDctNy43MTQsNS44MTFjLTAuMTMsMC41MjUsMC4yNjcsMC43MjYsMC41MywwLjc5M2wzLjY5MSwwLjQ2NGMwLjM5Ni0wLjA3LDAuNTkzLTAuMzk4LDAuNjU4LTAuNzMKCQljMC4zMzMtMS40NDksMS41MTgtMi4xNzYsMi44MzYtMi4zMDljMC4wNjcsMCwwLjEzMywwLDAuMjY1LDBjMC43OSwwLDEuNjQ2LDAuMzMyLDIuMTA5LDAuOTg3CgkJYzAuNTIzLDAuNzk1LDAuNDYxLDEuODUzLDAuNDYxLDIuNzc1TDIwLjk0OCw5Ljg5MUwyMC45NDgsOS44OTF6IE0yMC4yMjMsMTcuNzQ5CgkJYy0wLjQ2MSwwLjkyNS0xLjI1MywxLjUxOS0yLjExLDEuNzE4Yy0wLjEzMSwwLTAuMzI3LDAuMDY4LTAuNTI2LDAuMDY4Yy0xLjQ1LDAtMi4zMS0xLjEyMy0yLjMxLTIuNzc1CgkJYzAtMi4xMSwxLjI1NC0zLjEwNCwyLjgzNi0zLjU2NWMwLjg1Ny0wLjE5NywxLjg0Ny0wLjI2NSwyLjgzNi0wLjI2NXYwLjc5M0MyMC45NDgsMTUuMjQzLDIxLjAxLDE2LjQzLDIwLjIyMywxNy43NDl6Ii8+PHBhdGggZmlsbD0iI0ZGOTkwMCIgZD0iTTM1LjQxOCwyNi45MTh2MC4yMTUKCQljLTAuMDM1LDEuMjkxLTAuNzE2LDMuNzY4LTIuMzI4LDUuMTMxYy0wLjMyMiwwLjI1LTAuNjQ1LDAuMTA3LTAuNTAzLTAuMjU0YzAuNDY5LTEuMTQ1LDEuNTQxLTMuODAzLDEuMDQtNC40MTIKCQljLTAuMzU1LTAuNDY1LTEuODI2LTAuNDMtMy4wNzktMC4zMjJjLTAuNTcyLDAuMDcyLTEuMDc1LDAuMTA1LTEuNDY5LDAuMTgzYy0wLjM1NywwLjAzMy0wLjQzMS0wLjI4Ny0wLjA3MS0wLjUzNwoJCWMwLjQ2Ni0wLjMyMywwLjk2OS0wLjU3MywxLjU0MS0wLjc1NmMyLjAzOS0wLjYwOCw0LjQwNi0wLjI1LDQuNzI5LDAuMTQ2QzM1LjM0OCwyNi40MTQsMzUuNDE4LDI2LjYyOSwzNS40MTgsMjYuOTE4eiBNMzIuMDE2LDI5LjQyOGMtMC40NjYsMC4zNTctMC45NjUsMC42ODItMS40NjgsMC45NzNjLTMuNzYxLDIuMjYxLTguNjMxLDMuNDQxLTEyLjg1NiwzLjQ0MWMtNi44MDcsMC0xMi44OTUtMi41MTItMTcuNTE0LTYuNzA5CgkJYy0wLjM5Ni0wLjMyNC0wLjA3My0wLjc4OSwwLjM5My0wLjUzOUM1LjU0OSwyOS41LDExLjcwOSwzMS4yNiwxOC4wODQsMzEuMjZjNC4wMTMsMCw4LjM0Mi0wLjc1NCwxMi40NjMtMi4zNzEKCQljMC4yODUtMC4xMDQsMC42MDgtMC4yNTIsMC44OTUtMC4zNTZDMzIuMDg3LDI4LjI0MiwzMi42NjEsMjguOTY1LDMyLjAxNiwyOS40Mjh6Ii8+PC9zdmc+");
  background-size: auto 54px;
}
.dpi-card {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA5MCA2MCI+CiAgPGRlZnM+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImNnIiB4MT0iMCIgeTE9IjAiIHgyPSI5MCIgeTI9IjYwIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgIDxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzViOTNmYiIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMxZDRlZDgiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImNoZyIgeDE9IjAiIHkxPSIwIiB4Mj0iMTYiIHkyPSIxMiIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNmNWRmYTAiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjZDFhOTRhIi8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogIDwvZGVmcz4KICA8cmVjdCB3aWR0aD0iOTAiIGhlaWdodD0iNjAiIHJ4PSI5IiBmaWxsPSJ1cmwoI2NnKSIvPgogIDxwYXRoIGQ9Ik0tNSAxMiBMOTUgLTQgTDk1IDI2IEwtNSA0MCBaIiBmaWxsPSIjZmZmZmZmIiBvcGFjaXR5PSIwLjA4Ii8+CiAgPHJlY3QgeD0iMTAiIHk9IjEyIiB3aWR0aD0iMTYiIGhlaWdodD0iMTIiIHJ4PSIyLjUiIGZpbGw9InVybCgjY2hnKSIvPgogIDxwYXRoIGQ9Ik0xMCAxNmgxNk0xMCAyMGgxNk0xOCAxMnYxMiIgc3Ryb2tlPSIjYjg5MTJlIiBzdHJva2Utd2lkdGg9IjAuNyIgb3BhY2l0eT0iMC42NSIvPgogIDxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIxLjYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgb3BhY2l0eT0iMC44NSI+CiAgICA8cGF0aCBkPSJNNjkgMjJhNiA2IDAgMDAwLTkiLz4KICAgIDxwYXRoIGQ9Ik03Mi40IDI0LjZhMTAuNiAxMC42IDAgMDAwLTE0LjIiLz4KICAgIDxwYXRoIGQ9Ik03NS44IDI3YTE1IDE1IDAgMDAwLTE5Ii8+CiAgPC9nPgogIDxnIGZpbGw9IiNmZmZmZmYiIG9wYWNpdHk9IjAuNzUiPgogICAgPGNpcmNsZSBjeD0iMTAuNSIgY3k9IjMyLjUiIHI9IjEuMyIvPjxjaXJjbGUgY3g9IjE1IiBjeT0iMzIuNSIgcj0iMS4zIi8+PGNpcmNsZSBjeD0iMTkuNSIgY3k9IjMyLjUiIHI9IjEuMyIvPjxjaXJjbGUgY3g9IjI0IiBjeT0iMzIuNSIgcj0iMS4zIi8+CiAgICA8Y2lyY2xlIGN4PSIzMS41IiBjeT0iMzIuNSIgcj0iMS4zIi8+PGNpcmNsZSBjeD0iMzYiIGN5PSIzMi41IiByPSIxLjMiLz48Y2lyY2xlIGN4PSI0MC41IiBjeT0iMzIuNSIgcj0iMS4zIi8+PGNpcmNsZSBjeD0iNDUiIGN5PSIzMi41IiByPSIxLjMiLz4KICAgIDxjaXJjbGUgY3g9IjUyLjUiIGN5PSIzMi41IiByPSIxLjMiLz48Y2lyY2xlIGN4PSI1NyIgY3k9IjMyLjUiIHI9IjEuMyIvPjxjaXJjbGUgY3g9IjYxLjUiIGN5PSIzMi41IiByPSIxLjMiLz48Y2lyY2xlIGN4PSI2NiIgY3k9IjMyLjUiIHI9IjEuMyIvPgogIDwvZz4KICA8cmVjdCB4PSIxMCIgeT0iNDIiIHdpZHRoPSIyMiIgaGVpZ2h0PSIyLjQiIHJ4PSIxLjIiIGZpbGw9IiNmZmZmZmYiIG9wYWNpdHk9IjAuNTUiLz4KICA8cmVjdCB4PSIxMCIgeT0iNDciIHdpZHRoPSIxNCIgaGVpZ2h0PSIyIiByeD0iMSIgZmlsbD0iI2ZmZmZmZiIgb3BhY2l0eT0iMC40Ii8+CiAgPGcgb3BhY2l0eT0iMC45Ij4KICAgIDxjaXJjbGUgY3g9IjcwIiBjeT0iNDYiIHI9IjkiIGZpbGw9IiNmZmZmZmYiIG9wYWNpdHk9IjAuMzUiLz4KICAgIDxjaXJjbGUgY3g9Ijc5IiBjeT0iNDYiIHI9IjkiIGZpbGw9IiNmZmZmZmYiIG9wYWNpdHk9IjAuNTUiLz4KICA8L2c+Cjwvc3ZnPgo=");
  background-size: auto 60px;
}
.dpi-crypto {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48Y2lyY2xlIGN4PSIyNTYiIGN5PSIyNTYiIHI9IjI0OCIgZmlsbD0id2hpdGUiLz48cGF0aCBmaWxsPSIjZjc5MzFhIiBkPSJNNTA0IDI1NmMwIDEzNi45NjctMTExLjAzMyAyNDgtMjQ4IDI0OFM4IDM5Mi45NjcgOCAyNTYgMTE5LjAzMyA4IDI1NiA4czI0OCAxMTEuMDMzIDI0OCAyNDh6bS0xNDEuNjUxLTM1LjMzYzQuOTM3LTMyLjk5OS0yMC4xOTEtNTAuNzM5LTU0LjU1LTYyLjU3M2wxMS4xNDYtNDQuNzAyLTI3LjIxMy02Ljc4MS0xMC44NTEgNDMuNTI0Yy03LjE1NC0xLjc4My0xNC41MDItMy40NjQtMjEuODAzLTUuMTNsMTAuOTI5LTQzLjgxLTI3LjE5OC02Ljc4MS0xMS4xNTMgNDQuNjg2Yy01LjkyMi0xLjM0OS0xMS43MzUtMi42ODItMTcuMzc3LTQuMDg0bC4wMzEtLjE0LTM3LjUzLTkuMzctNy4yMzkgMjkuMDYyczIwLjE5MSA0LjYyNyAxOS43NjUgNC45MTNjMTEuMDIyIDIuNzUxIDEzLjAxNCAxMC4wNDQgMTIuNjggMTUuODI1bC0xMi42OTYgNTAuOTI1Yy43Ni4xOTQgMS43NDQuNDczIDIuODI5LjkwNy0uOTA3LS4yMjUtMS44NzYtLjQ3My0yLjg3Ni0uNzEzbC0xNy43OTYgNzEuMzM4Yy0xLjM0OSAzLjM0OC00Ljc2NyA4LjM3LTEyLjQ3MSA2LjQ2NC4yNzEuMzk1LTE5Ljc4LTQuOTM3LTE5Ljc4LTQuOTM3bC0xMy41MSAzMS4xNDcgMzUuNDE0IDguODI3YzYuNTg4IDEuNjUxIDEzLjA0NSAzLjM3OSAxOS40IDUuMDA2bC0xMS4yNjIgNDUuMjEzIDI3LjE4MiA2Ljc4MSAxMS4xNTMtNDQuNzMzYTEwMzguMjA5IDEwMzguMjA5IDAgMCAwIDIxLjY4NyA1LjYyN2wtMTEuMTE1IDQ0LjUyMyAyNy4yMTMgNi43ODEgMTEuMjYyLTQ1LjEyOGM0Ni40MDQgOC43ODEgODEuMjk5IDUuMjM5IDk1Ljk4Ni0zNi43MjcgMTEuODM2LTMzLjc5LS41ODktNTMuMjgxLTI1LjAwNC02NS45OTEgMTcuNzgtNC4wOTggMzEuMTc0LTE1Ljc5MiAzNC43NDctMzkuOTQ5em0tNjIuMTc3IDg3LjE3OWMtOC40MSAzMy43OS02NS4zMDggMTUuNTIzLTgzLjc1NSAxMC45NDNsMTQuOTQ0LTU5Ljg5OWMxOC40NDYgNC42MDMgNzcuNiAxMy43MTcgNjguODExIDQ4Ljk1NnptOC40MTctODcuNjY3Yy03LjY3MyAzMC43MzYtNTUuMDMxIDE1LjEyLTcwLjM5MyAxMS4yOTJsMTMuNTQ4LTU0LjMyN2MxNS4zNjMgMy44MjggNjQuODM2IDEwLjk3MyA1Ni44NDUgNDMuMDM1eiIvPjwvc3ZnPg==");
}
.donate-pay-label {
  font-size: 13px;
  font-weight: 700;
  color: #334155;
}
.donate-pay-select {
  display: block;
  width: 100%;
  padding: 10px 0;
  background: #2563eb;
  color: #fff;
  text-align: center;
  border-radius: 8px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  transition: background 0.15s;
  box-sizing: border-box;
}
.donate-pay-select:hover {
  background: #1d4ed8;
  color: #fff;
  text-decoration: none;
}
.donate-why-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.donate-why-list li {
  font-size: 14px;
  color: #475569;
  display: flex;
  align-items: center;
  gap: 10px;
}
.donate-why-list li::before {
  content: "\2713";
  font-weight: 800;
  color: #2563eb;
  font-size: 14px;
  flex-shrink: 0;
}
.donate-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 20px;
  background: #fff;
}
.donate-feature {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 24px 20px;
  border-right: 1px solid #e2e8f0;
}
.donate-feature:last-child {
  border-right: none;
}
.donate-feature i {
  font-size: 26px;
  color: #2563eb;
  flex-shrink: 0;
}
.donate-feature strong {
  font-size: 14px;
  color: #1e293b;
  display: block;
  font-weight: 700;
}
.donate-feature p {
  font-size: 13px;
  color: #94a3b8;
  margin: 3px 0 0;
}
.donate-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
.donate-info {
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 28px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.donate-info h3 {
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 18px;
  text-transform: none;
  letter-spacing: 0;
}
.donate-info-list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.donate-info-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: #475569;
  line-height: 1.45;
}
.donate-info-list li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: #2563eb;
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 2px;
}
.donate-info-contact {
  font-size: 13.5px;
  color: #94a3b8;
  margin: 0;
}
.donate-info-contact a {
  color: #2563eb;
  text-decoration: none;
}
.donate-info-contact a:hover {
  text-decoration: underline;
}
.donate-appreciation {
  background: #eff6ff;
  border-radius: 16px;
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
}
.donate-appreciation i {
  font-size: 34px;
  color: #2563eb;
}
.donate-appreciation strong {
  font-size: 18px;
  font-weight: 700;
  color: #2563eb;
  line-height: 1.3;
  display: block;
}
.donate-appreciation p {
  font-size: 14px;
  color: #64748b;
  margin: 0;
  line-height: 1.55;
}
[data-theme="dark"] .donate-top-section {
  background: #0f1929;
  border-color: #334155;
}
[data-theme="dark"] .client-top-sectionfront {
  background: #0f1929;
  border-color: #334155;
}
[data-theme="dark"] .donate-title {
  color: #e2e8f0;
}
[data-theme="dark"] .donate-tagline {
  color: #e2e8f0;
}
[data-theme="dark"] .donate-tier-name {
  color: #e2e8f0;
}
[data-theme="dark"] .donate-tier-period {
  color: #64748b;
}
[data-theme="dark"] .donate-perk-icon {
  color: #60a5fa;
}
[data-theme="dark"] .donate-perk-label {
  color: #94a3b8;
}
[data-theme="dark"] .donate-tier {
  background: #0b0f19;
  border-color: #334155;
}
[data-theme="dark"] .donate-tier:hover {
  border-color: #475569;
}
[data-theme="dark"] .donate-tier-active {
  background: #1e3a5f !important;
  border-color: #2563eb !important;
}
[data-theme="dark"] .donate-tier-price {
  color: #e2e8f0;
}
[data-theme="dark"] .donate-tier-monthly {
  color: #64748b;
}
[data-theme="dark"] .donate-tier-feature-list li {
  color: #94a3b8;
}
[data-theme="dark"] .donate-tier-feature-list .dtf-no {
  color: #64748b;
}
[data-theme="dark"] .donate-tier-btn {
  border-color: #334155;
  color: #94a3b8;
}
[data-theme="dark"] .donate-tier-btn:hover {
  border-color: #475569;
  color: #e2e8f0;
}
[data-theme="dark"] .donate-tier-active .donate-tier-btn {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}
[data-theme="dark"] .donate-payments,
[data-theme="dark"] .donate-why,
[data-theme="dark"] .donate-info {
  background: #0b0f19;
  border-color: #334155;
}
[data-theme="dark"] .donate-info h3 {
  color: #e2e8f0;
}
[data-theme="dark"] .donate-info-list li {
  color: #94a3b8;
}
[data-theme="dark"] .donate-info-contact {
  color: #64748b;
}
[data-theme="dark"] .donate-appreciation {
  background: #0f1929;
}
[data-theme="dark"] .donate-appreciation p {
  color: #94a3b8;
}
[data-theme="dark"] .donate-features {
  background: #0b0f19;
  border-color: #334155;
}
[data-theme="dark"] .donate-feature {
  border-color: #334155;
}
[data-theme="dark"] .donate-feature strong {
  color: #e2e8f0;
}
[data-theme="dark"] .donate-payments h3,
[data-theme="dark"] .donate-why h3,
[data-theme="dark"] .donate-info h3 {
  color: #64748b;
}
[data-theme="dark"] .donate-pay-card {
  background: #0f172a;
  border-color: #334155;
}
[data-theme="dark"] .donate-pay-label {
  color: #94a3b8;
}
[data-theme="dark"] .donate-why-list li {
  color: #94a3b8;
}
[data-theme="dark"] .donate-info ul li,
[data-theme="dark"] .donate-info p {
  color: #94a3b8;
}
/* ── Payment hub page ────────────────────────────────────────── */
.pm-wrap {
  margin: 0 auto;
  padding: 0 0 40px;
  padding-top: 10px;
}

.pm-panel {
  display: none;
}

/* Card panel */
.pm-card-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
.pm-info-box {
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 22px;
  background: #fff;
}
.pm-info-box-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 16px;
}
.pm-info-box-header i {
  font-size: 18px;
  color: #2563eb;
}
.pm-info-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pm-info-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
  color: #475569;
  line-height: 1.4;
}
.pm-info-list li i {
  color: #16a34a;
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 3px;
}
.pm-info-list em {
  font-style: normal;
  font-weight: 700;
  color: #dc2626;
}

.pm-card-logos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 6px;
}
.pm-card-logo {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pm-card-logo svg {
  height: 34px;
  width: auto;
  display: block;
}

.pm-card-tiers h3,
.pm-crypto-tiers h3 {
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 14px;
}
.pm-tier-row {
  display: flex;
  gap: 12px;
}
.pm-tier-btn {
  flex: 1;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px 12px 16px;
  background: #fff;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.pm-tier-btn:hover {
  border-color: #2563eb;
  background: #eff6ff;
}
.pm-tier-badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: #2563eb;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.pm-tier-name {
  font-size: 16px;
  font-weight: 800;
  color: #1e293b;
}
.pm-tier-price {
  font-size: 22px;
  font-weight: 900;
  color: #2563eb;
  line-height: 1;
}
.pm-tier-price small {
  font-size: 13px;
  font-weight: 500;
  color: #94a3b8;
}
.pm-tier-popular {
  border-color: #2563eb;
  background: #eff6ff;
}

.pm-card-note {
  font-size: 13px;
  color: #94a3b8;
  margin-top: 20px;
  text-align: center;
}
.pm-card-note a {
  color: #2563eb;
  text-decoration: none;
}

/* Crypto panel */
.pm-crypto-intro {
  text-align: center;
  padding: 32px 20px 28px;
}
.pm-crypto-icon {
  width: 68px;
  height: 68px;
  border-radius: 16px;
  background: #fff7ed;
  color: #f7931a;
  font-size: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.pm-crypto-intro h2 {
  font-size: 24px;
  font-weight: 800;
  color: #1e293b;
  margin: 0 0 10px;
}
.pm-crypto-intro p {
  font-size: 14.5px;
  color: #64748b;
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.6;
}
.pm-crypto-tiers {
  margin-top: 24px;
}

/* Card modal */
.pm-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
.pm-modal {
  background: #fff;
  border-radius: 16px;
  width: 520px;
  max-width: 95vw;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
}
.pm-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e2e8f0;
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
}
.pm-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  color: #64748b;
  font-size: 18px;
  padding: 4px 8px;
}
.pm-modal-close:hover {
  color: #1e293b;
}
.pm-modal-iframe {
  width: 100%;
  height: 580px;
  display: block;
}

/* Dark mode – payment hub */
[data-theme="dark"] .pm-tabs {
  background: #1e293b;
}
[data-theme="dark"] .pm-tab {
  color: #64748b;
}
[data-theme="dark"] .pm-tab:hover {
  background: #334155;
  color: #cbd5e1;
}
[data-theme="dark"] .pm-tab.pm-tab-active {
  background: #0f172a;
  color: #60a5fa;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .pm-info-box {
  background: #0f172a;
  border-color: #334155;
}
[data-theme="dark"] .pm-info-box-header {
  color: #e2e8f0;
}
[data-theme="dark"] .pm-info-list li {
  color: #94a3b8;
}
[data-theme="dark"] .pm-card-logo {
  background: #1e293b;
  border-color: #334155;
}
[data-theme="dark"] .pm-card-tiers h3,
[data-theme="dark"] .pm-crypto-tiers h3 {
  color: #e2e8f0;
}
[data-theme="dark"] .pm-tier-btn {
  background: #0f172a;
  border-color: #334155;
}
[data-theme="dark"] .pm-tier-btn:hover {
  border-color: #2563eb;
  background: #1e2d4a;
}
[data-theme="dark"] .pm-tier-popular {
  background: #1e2d4a;
  border-color: #2563eb;
}
[data-theme="dark"] .pm-tier-name {
  color: #e2e8f0;
}
[data-theme="dark"] .pm-crypto-intro h2 {
  color: #e2e8f0;
}
[data-theme="dark"] .pm-crypto-icon {
  background: #2a1a00;
}
[data-theme="dark"] .pm-modal {
  background: #0f172a;
}
[data-theme="dark"] .pm-modal-header {
  color: #e2e8f0;
  border-color: #334155;
}
[data-theme="dark"] .profile-div .box-header h3 {
  background-color: #111827;
  border: 1px solid #006df7;
}
[data-theme="dark"] .prof-section-title {
  background-color: #111827;
  border: 1px solid #006df7;
}
[data-theme="dark"] .sec-feature-block {
  background: var(--c-surface);
}
[data-theme="dark"] .ui-widget-content a {
  color: var(--c-link);
}

/* ── Giftcard page ───────────────────────────────────────────── */
.gc-wrap {
  margin: 0 auto;
  padding: 0 0 40px;
}

.gc-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 4px;
  justify-content: center;
}
.gc-hero-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: #f9e5cd;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}
.gc-hero-text {
  text-align: left;
}
.gc-hero-amazon {
  background-image: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDM1LjQxOCAzNS40MTgiPjxwYXRoIGZpbGw9IiMxMTExMTEiIGQ9Ik0yMC45NDgsOS44OTFjLTAuODU3LDAuMDY4LTEuODQ3LDAuMTM2LTIuODM3LDAuMjY5Yy0xLjUxNiwwLjE5NS0zLjAzMiwwLjQ2MS00LjI4NCwxLjA1MwoJCWMtMi40MzksMC45OTQtNC4wODgsMy4xMDUtNC4wODgsNi4yMDljMCwzLjg5OCwyLjUwNiw1Ljg3NSw1LjY2OSw1Ljg3NWMxLjA1NywwLDEuOTEzLTAuMTI5LDIuNzAzLTAuMzI4CgkJYzEuMjU1LTAuMzk2LDIuMzEtMS4xMjMsMy41NjItMi40NDFjMC43MjcsMC45OSwwLjkyMywxLjQ1MywyLjE3NywyLjUwOWMwLjMyOSwwLjEzMywwLjY1OCwwLjEzMywwLjkyMi0wLjA2NgoJCWMwLjc5MS0wLjY1OSwyLjE3NC0xLjg0OCwyLjkwMS0yLjUwOGMwLjMyOC0wLjI2NywwLjI2My0wLjY2LDAuMDY2LTAuOTkyYy0wLjcyNy0wLjkyNC0xLjQ1LTEuNzE4LTEuNDUtMy40OTh2LTUuOTQzCgkJYzAtMi41MTMsMC4xOTUtNC44MjItMS42NDctNi41MzdjLTEuNTE4LTEuMzkxLTMuODkxLTEuOTE2LTUuNzM1LTEuOTE2Yy0wLjI2NCwwLTAuNTI3LDAtMC43OTIsMAoJCWMtMy4zNjIsMC4xOTctNi45MjEsMS42NDctNy43MTQsNS44MTFjLTAuMTMsMC41MjUsMC4yNjcsMC43MjYsMC41MywwLjc5M2wzLjY5MSwwLjQ2NGMwLjM5Ni0wLjA3LDAuNTkzLTAuMzk4LDAuNjU4LTAuNzMKCQljMC4zMzMtMS40NDksMS41MTgtMi4xNzYsMi44MzYtMi4zMDljMC4wNjcsMCwwLjEzMywwLDAuMjY1LDBjMC43OSwwLDEuNjQ2LDAuMzMyLDIuMTA5LDAuOTg3CgkJYzAuNTIzLDAuNzk1LDAuNDYxLDEuODUzLDAuNDYxLDIuNzc1TDIwLjk0OCw5Ljg5MUwyMC45NDgsOS44OTF6IE0yMC4yMjMsMTcuNzQ5CgkJYy0wLjQ2MSwwLjkyNS0xLjI1MywxLjUxOS0yLjExLDEuNzE4Yy0wLjEzMSwwLTAuMzI3LDAuMDY4LTAuNTI2LDAuMDY4Yy0xLjQ1LDAtMi4zMS0xLjEyMy0yLjMxLTIuNzc1CgkJYzAtMi4xMSwxLjI1NC0zLjEwNCwyLjgzNi0zLjU2NWMwLjg1Ny0wLjE5NywxLjg0Ny0wLjI2NSwyLjgzNi0wLjI2NXYwLjc5M0MyMC45NDgsMTUuMjQzLDIxLjAxLDE2LjQzLDIwLjIyMywxNy43NDl6Ii8+PHBhdGggZmlsbD0iI0ZGOTkwMCIgZD0iTTM1LjQxOCwyNi45MTh2MC4yMTUKCQljLTAuMDM1LDEuMjkxLTAuNzE2LDMuNzY4LTIuMzI4LDUuMTMxYy0wLjMyMiwwLjI1LTAuNjQ1LDAuMTA3LTAuNTAzLTAuMjU0YzAuNDY5LTEuMTQ1LDEuNTQxLTMuODAzLDEuMDQtNC40MTIKCQljLTAuMzU1LTAuNDY1LTEuODI2LTAuNDMtMy4wNzktMC4zMjJjLTAuNTcyLDAuMDcyLTEuMDc1LDAuMTA1LTEuNDY5LDAuMTgzYy0wLjM1NywwLjAzMy0wLjQzMS0wLjI4Ny0wLjA3MS0wLjUzNwoJCWMwLjQ2Ni0wLjMyMywwLjk2OS0wLjU3MywxLjU0MS0wLjc1NmMyLjAzOS0wLjYwOCw0LjQwNi0wLjI1LDQuNzI5LDAuMTQ2QzM1LjM0OCwyNi40MTQsMzUuNDE4LDI2LjYyOSwzNS40MTgsMjYuOTE4eiBNMzIuMDE2LDI5LjQyOGMtMC40NjYsMC4zNTctMC45NjUsMC42ODItMS40NjgsMC45NzNjLTMuNzYxLDIuMjYxLTguNjMxLDMuNDQxLTEyLjg1NiwzLjQ0MWMtNi44MDcsMC0xMi44OTUtMi41MTItMTcuNTE0LTYuNzA5CgkJYy0wLjM5Ni0wLjMyNC0wLjA3My0wLjc4OSwwLjM5My0wLjUzOUM1LjU0OSwyOS41LDExLjcwOSwzMS4yNiwxOC4wODQsMzEuMjZjNC4wMTMsMCw4LjM0Mi0wLjc1NCwxMi40NjMtMi4zNzEKCQljMC4yODUtMC4xMDQsMC42MDgtMC4yNTIsMC44OTUtMC4zNTZDMzIuMDg3LDI4LjI0MiwzMi42NjEsMjguOTY1LDMyLjAxNiwyOS40Mjh6Ii8+PC9zdmc+");
  background-size: auto 42px;
}
.gc-hero-title {
  font-size: 26px;
  font-weight: 800;
  color: #1e293b;
  margin: 0 0 4px;
}
.gc-hero-sub {
  font-size: 14px;
  color: #64748b;
  margin: 0;
  line-height: 1.5;
}

.gc-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.gc-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 22px 20px 20px;
}
.gc-step-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.gc-step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #2563eb;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.gc-step h3 {
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}
.gc-step p {
  font-size: 13.5px;
  color: #64748b;
  margin: 0 0 14px;
  line-height: 1.55;
  flex: 1;
}

.gc-link-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 9px;
  background: #ff9900;
  color: #111;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  width: 100%;
  box-sizing: border-box;
}
.gc-link-btn:hover {
  background: #e68900;
  color: #111;
}

.gc-email-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 16px;
}
.gc-email-addr {
  font-size: 15px;
  font-weight: 600;
  color: #16a34a;
  flex: 1;
}

.gc-ref-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff7ed;
  border: 2px solid #fed7aa;
  border-radius: 10px;
  padding: 14px 16px;
}
.gc-ref-label {
  font-size: 11px;
  font-weight: 700;
  color: #9a3412;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: none;
}
.gc-ref-code {
  font-size: 16px;
  font-weight: 800;
  color: #dc2626;
  flex: 1;
  letter-spacing: 0.02em;
  font-family: monospace;
}

.gc-copy-btn {
  flex-shrink: 0;
  min-width: 95px;
  padding: 7px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.gc-copy-btn:hover {
  background: #f1f5f9;
}

.gc-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.gc-amounts {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 20px 22px;
}
.gc-info-notes {
  background: #f0f7ff;
  border: 1px solid #dbeafe;
  border-radius: 14px;
  padding: 20px 22px;
}
.gc-amounts h3,
.gc-info-notes h3 {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 14px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.gc-amounts h3 i {
  color: #2563eb;
}
.gc-info-notes h3 i {
  color: #2563eb;
}
.gc-amount-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.gc-amount-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 8px;
}
.gc-amount-item.gc-amount-popular {
  background: #eff6ff;
  border-color: #bfdbfe;
}
.gc-amount-tier {
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.gc-amount-popular .gc-amount-tier {
  color: #2563eb;
}
.gc-amount-price {
  font-size: 22px;
  font-weight: 900;
  color: #1e293b;
  letter-spacing: -0.02em;
  line-height: 1;
}
.gc-amount-popular .gc-amount-price {
  color: #2563eb;
}
.gc-amount-period {
  font-size: 12px;
  font-weight: 500;
  color: #94a3b8;
}
.gc-amount-mo {
  font-size: 11.5px;
  color: #94a3b8;
}
.gc-info-ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.gc-info-ul li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: #475569;
  line-height: 1.45;
}
.gc-info-ul li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 11px;
  color: #2563eb;
  flex-shrink: 0;
  margin-top: 2px;
}

[data-theme="dark"] .gc-amounts {
  background: #0f172a;
  border-color: #334155;
}
[data-theme="dark"] .gc-info-notes {
  background: #0f1929;
  border-color: #1e3a8a;
}
[data-theme="dark"] .gc-amounts h3,
[data-theme="dark"] .gc-info-notes h3 {
  color: #e2e8f0;
}
[data-theme="dark"] .gc-amount-item {
  background: #1e293b;
  border-color: #334155;
}
[data-theme="dark"] .gc-amount-popular {
  background: #1e2d4a;
  border-color: #1e3a8a;
}
[data-theme="dark"] .gc-amount-price {
  color: #e2e8f0;
}
[data-theme="dark"] .gc-info-ul li {
  color: #94a3b8;
}

.gc-notices {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
}
.gc-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 12px;
}
.gc-notice i {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}
.gc-notice p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}
.gc-notice-warn {
  background: #fef9c3;
  border: 1px solid #fde047;
}
.gc-notice-warn i {
  color: #ca8a04;
}
.gc-notice-warn p {
  color: #713f12;
}
.gc-notice-info {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
}
.gc-notice-info i {
  color: #2563eb;
}
.gc-notice-info p {
  color: #1e3a8a;
}

.gc-back {
  text-align: center;
}
.gc-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
  text-decoration: none;
}
.gc-back-link:hover {
  color: #2563eb;
}

[data-theme="dark"] .gc-hero-icon {
  background-color: #2a1a00;
}
[data-theme="dark"] .gc-hero-amazon {
  background-color: #fff3e0 !important;
}
/* Card/Crypto are self-contained colorful graphics with no background box —
   Amazon's logo is black-on-transparent and needs one to stay visible on
   dark, but sizing a badge to visually match the other two never quite
   lines up. Recolor the logo itself to white instead, so all three sit
   the same way at the same base size (no box, just an icon). */
[data-theme="dark"] .dpi-amazon {
  filter: brightness(0) invert(1);
}
[data-theme="dark"] .gc-hero-title {
  color: #e2e8f0;
}
[data-theme="dark"] .gc-hero-sub {
  color: #94a3b8;
}
[data-theme="dark"] .gc-step {
  background: #0f172a;
  border-color: #334155;
}
[data-theme="dark"] .gc-step h3 {
  color: #e2e8f0;
}
[data-theme="dark"] .gc-step p {
  color: #94a3b8;
}
[data-theme="dark"] .gc-email-box {
  background: #1e293b;
  border-color: #334155;
}
[data-theme="dark"] .gc-ref-box {
  background: #2a1200;
  border-color: #7c2d12;
}
[data-theme="dark"] .gc-copy-btn {
  background: #1e293b;
  border-color: #475569;
  color: #cbd5e1;
}
[data-theme="dark"] .gc-copy-btn:hover {
  background: #334155;
}
[data-theme="dark"] .gc-notice-warn {
  background: #2a1f00;
  border-color: #78350f;
}
[data-theme="dark"] .gc-notice-warn p {
  color: #fef3c7;
}
[data-theme="dark"] .gc-notice-info {
  background: #0f1929;
  border-color: #1e3a8a;
}
[data-theme="dark"] .gc-notice-info p {
  color: #bfdbfe;
}
[data-theme="dark"] .gc-back-link {
  color: #64748b;
}

/* ── Card payment page ───────────────────────────────────────── */
.cp-wrap {
  margin: 0 auto;
  padding: 0 0 22px;
}

/* Outline (stroke) icon set for the card payment page */
.cpi-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.cpi {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  overflow: visible;
}

.cp-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px 16px;
  justify-content: center;
}
.cp-hero-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: #eff6ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  color: #2563eb;
  flex-shrink: 0;
}
.cp-hero-text {
  text-align: left;
}
.cp-hero-title {
  font-size: 20px;
  font-weight: 800;
  color: #1e293b;
  margin: 0 0 2px;
}
.cp-hero-sub {
  font-size: 14px;
  color: #64748b;
  margin: 0;
}

.cp-mid-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
[data-theme="dark"] .cp-sc-card {
  background: #0b0f19;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 13px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
}
.cp-box {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 22px;
}
.cp-box-secure {
  background: #f0f7ff;
  border-color: #dbeafe;
}
.cp-box-info {
  background: #f0f7ff;
  border-color: #dbeafe;
}
.cp-box-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 16px;
  text-align: center;
}
.cp-box-title i {
  color: #2563eb;
  font-size: 15px;
}

.cp-process-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  counter-reset: process-counter;
}
.cp-process-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: #475569;
  line-height: 1.45;
  counter-increment: process-counter;
}
.cp-process-list li::before {
  content: counter(process-counter);
  min-width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #2563eb;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.cp-secure-list {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cp-secure-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
  color: #334155;
  line-height: 1.4;
}
.cp-secure-list li i {
  color: #2563eb;
  font-size: 13px;
  flex-shrink: 0;
  margin-top: 2px;
}
.cp-encrypt-note {
  font-size: 12px;
  color: #64748b;
  line-height: 1.5;
  margin: 0;
  border-top: 1px solid #dbeafe;
  padding-top: 12px;
}

.cp-info-list2 {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.cp-info-list2 li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
  color: #475569;
  line-height: 1.4;
}
.cp-info-list2 li::before {
  content: "\f05a";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 12px;
  color: #2563eb;
  flex-shrink: 0;
  margin-top: 2px;
}
.cp-info-list2 a {
  color: #2563eb;
  text-decoration: none;
  display: inline;
}

/* Secure + Info redesigned cards */
.cp-mid-row-info {
  margin-bottom: 0;
}
.cp-sc-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 13px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
}
.cp-sc-header {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 9px;
}
.cp-sc-hdr-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
}
.cp-sc-hdr-icon.cp-sc-blue {
  background: #f5f8ff;
  color: #2563eb;
  border: 1px solid #e2e8f0;
}
[data-theme="dark"] .cp-sc-hdr-icon.cp-sc-blue {
  background: #1e3a5f;
  color: #2563eb;
  border: 1px solid #e2e8f0;
}
.cp-sc-hdr-icon.cp-sc-green {
  background: #f0fdf4;
  color: #059669;
  border: 1px solid #e2e8f0;
}
[data-theme="dark"] .cp-sc-hdr-icon.cp-sc-green {
  background: #1e3a5f;
  color: #059669;
  border: 1px solid #e2e8f0;
}
.cp-sc-hdr-title {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
}
[data-theme="dark"] .cp-sc-hdr-title {
  font-size: 16px;
  font-weight: 700;
  color: #e2e8f0;
  line-height: 1.2;
}
.cp-sc-hdr-sub {
  font-size: 12px;
  color: #64748b;
  margin-top: 2px;
}
.cp-sc-divider {
  height: 1px;
  background: #f1f5f9;
  margin-bottom: 10px;
}
.cp-sc-items {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.cp-sc-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
}
.cp-sc-item--accent {
  padding: 10px;
  background: #f5f8ff;
  border-radius: 10px;
  margin-top: 5px;
  border: 1px solid #e9e9e9;
}
.cp-sc-item--accent .cp-sc-item-icon.cp-sc-blue { background: #dce8fb; }
/* Important Information card — each item is a shaded block */
.cp-sc-card--info .cp-sc-items {
  gap: 6px;
}
.cp-sc-card--info .cp-sc-item {
  background: #f0fdf4;
  border: 1px solid #e9e9e9;
  border-radius: 8px;
  padding: 9px;
}
[data-theme="dark"] .cp-sc-card--info .cp-sc-item {
  background: #0f172a;
  border: 1px solid #1e3a5f;
  border-radius: 8px;
  padding: 9px;
}
.cp-sc-card--info .cp-sc-item:last-child {
  border-bottom: 1px solid #d1fae5;
}
.cp-sc-card--info .cp-sc-item-icon {
  background: #fff;
  border-radius: 10px;
}
.cp-sc-item-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
}
.cp-sc-item-icon.cp-sc-blue {
  background: #eff6ff;
  color: #2563eb;
}
.cp-sc-item-icon.cp-sc-green {
  background: white;
  color: #16a34a;
  border-radius: 50%;
  border: 1px solid #b7f1d3;
}
[data-theme="dark"] .cp-sc-item-icon.cp-sc-green {
  background: #1e3a5f;
  color: #16a34a;
  border-radius: 50%;
  border: 1px solid #b7f1d3;
}
.cp-sc-item-title {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.3;
}
[data-theme="dark"] .cp-sc-item-title {
  font-size: 13px;
  font-weight: 600;
  color: #e2e8f0;
  line-height: 1.3;
}
.cp-sc-blue-text {
  color: #2663eb;
}
.cp-sc-item-desc {
  font-size: 13.5px;
  color: #64748b;
  line-height: 1.45;
  margin-top: 2px;
}
.cp-sc-item-desc a {
  color: #2563eb;
  text-decoration: none;
}
.cp-sc-item-desc a:hover {
  text-decoration: underline;
}
.cp-sc-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 11px 14px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  font-size: 13px;
  color: #475569;
}
.cp-sc-footer-icon {
  font-size: 15px;
  color: #94a3b8;
  flex-shrink: 0;
}
.cp-sc-green-link {
  color: #16a34a;
  font-weight: 600;
  text-decoration: none;
}
.cp-sc-green-link:hover {
  text-decoration: underline;
}

/* Upgrade Process steps */
.cp-up-steps {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.cp-up-step {
  display: grid;
  grid-template-columns: 22px 30px 1fr;
  gap: 8px;
  align-items: flex-start;
  flex: 1 0 auto;
}
.cp-up-step:last-child {
  flex: 0 0 auto;
}
.cp-up-step-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
}
.cp-up-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #2563eb;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cp-up-conn {
  width: 2px;
  flex: 1;
  min-height: 8px;
  background: repeating-linear-gradient(to bottom, #93c5fd 0, #93c5fd 3px, transparent 3px, transparent 6px);
  margin: 3px 0;
}
.cp-up-icon {
  width: 30px;
  height: 30px;
  background: #eff6ff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #2563eb;
  flex-shrink: 0;
}
.cp-up-body {
  padding-bottom: 7px;
}
.cp-up-step:last-child .cp-up-body {
  padding-bottom: 2px;
}
.cp-up-title {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.3;
}
.cp-up-desc {
  font-size: 13.5px;
  color: #64748b;
  line-height: 1.4;
  margin-top: 1px;
}
.cp-up-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 12px;
  background: #f5f8ff;
  border-radius: 8px;
  border: 1px solid #bfdbfe;
}
.cp-up-footer-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #dce8fb;
  color: #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.cp-up-footer-title {
  font-size: 12px;
  font-weight: 700;
  color: #1d4ed8;
}
.cp-up-footer-desc {
  font-size: 12px;
  color: #64748b;
  line-height: 1.4;
  margin-top: 1px;
}

/* We Accept grid */
.cp-wa-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  flex: 1;
  margin-bottom: 2px;
}
.cp-wa-logo {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 7px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.cp-wa-logo > div {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 30px;
  margin: 0;
  background-position: center;
}
.cp-wa-logo span {
  font-size: 12px;
  color: #64748b;
  font-weight: 500;
  text-align: center;
}
.cp-wa-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 12px;
  border-top: 1px solid #e2e8f0;
}
.cp-wa-footer-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #a7f3d0;
  color: #059669;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.cp-wa-footer-title {
  font-size: 13px;
  font-weight: 700;
}
.cp-wa-footer-desc {
  font-size: 13px;
  color: #64748b;
  line-height: 1.4;
  margin-top: 1px;
}

.cp-card-logos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.cp-card-logo {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  display: grid;
  align-items: center;
  justify-content: center;
}
.cp-card-note-small {
  font-size: 12px;
  color: #94a3b8;
  margin: 14px 0 0;
  text-align: center;
}

.cp-tiers {
  margin-bottom: 28px;
}
.cp-tiers h3 {
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 14px;
  text-align: center;
}
.cp-tier-row {
  display: flex;
  gap: 12px;
  align-items: stretch;
  padding-top: 12px;
}
.cp-tier-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: 1;
  width: 100%;
  padding: 6px 0;
}
.cp-tier-btn {
  flex: 1;
  border: 2px solid #e2e8f0;
  border-radius: 14px;
  padding: 22px 14px 18px;
  background: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
  transition:
    border-color 0.15s,
    background 0.15s,
    box-shadow 0.15s;
}
.cp-tier-btn:hover {
  border-color: #2563eb;
  background: #eff6ff;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.12);
}
.cp-tier-badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: #2563eb;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 2px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.cp-tier-name {
  font-size: 15px;
  font-weight: 800;
  color: #1e293b;
}
.cp-tier-price {
  font-size: 32px;
  font-weight: 900;
  color: #2563eb;
  line-height: 1;
  letter-spacing: -0.02em;
}
.cp-tier-period {
  font-size: 13px;
  color: #94a3b8;
  font-weight: 500;
}
.cp-tier-monthly {
  font-size: 12px;
  color: #94a3b8;
  margin: 0 0 10px;
}
.cp-tier-popular {
  border-color: #2563eb;
  background: #eff6ff;
}

.cp-footer-note {
  font-size: 13px;
  color: #94a3b8;
  text-align: center;
  margin-bottom: 12px;
}
.cp-footer-note a {
  color: #2563eb;
  text-decoration: none;
}

.cp-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
.cp-modal {
  background: #fff;
  border-radius: 16px;
  width: 540px;
  max-width: 95vw;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
}
.cp-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e2e8f0;
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
}
.cp-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  color: #64748b;
  font-size: 18px;
  padding: 4px 8px;
}
.cp-modal-close:hover {
  color: #1e293b;
}
.cp-modal-iframe {
  width: 100%;
  height: 550px;
  display: block;
}

[data-theme="dark"] .cp-hero-title {
  color: #e2e8f0;
}
[data-theme="dark"] .cp-hero-icon {
  background: #1e2d4a;
  color: #60a5fa;
}
[data-theme="dark"] .cp-box {
  background: #0f172a;
  border-color: #334155;
}
[data-theme="dark"] .cp-box-secure {
  background: #0f1929;
  border-color: #1e3a8a;
}
[data-theme="dark"] .cp-box-info {
  background: #0f1929;
  border-color: #1e3a8a;
}
[data-theme="dark"] .cp-box-title {
  color: #e2e8f0;
}
[data-theme="dark"] .cp-process-list li {
  color: #94a3b8;
}
[data-theme="dark"] .cp-secure-list li {
  color: #cbd5e1;
}
[data-theme="dark"] .cp-encrypt-note {
  color: #64748b;
  border-color: #1e3a8a;
}
[data-theme="dark"] .cp-info-list2 li {
  color: #94a3b8;
}
[data-theme="dark"] .cp-card-logo {
  background: #1e293b;
  border-color: #334155;
}
[data-theme="dark"] .cp-tiers h3 {
  color: #e2e8f0;
}
[data-theme="dark"] .cp-tier-btn {
  background: #0f172a;
  border-color: #334155;
}
[data-theme="dark"] .cp-tier-btn:hover {
  background: #1e2d4a;
  border-color: #2563eb;
}
[data-theme="dark"] .cp-tier-popular {
  background: #1e2d4a;
  border-color: #2563eb;
}
[data-theme="dark"] .cp-tier-name {
  color: #e2e8f0;
}
[data-theme="dark"] .cp-modal {
  background: #0f172a;
}
[data-theme="dark"] .cp-modal-header {
  color: #e2e8f0;
  border-color: #334155;
}
[data-theme="dark"] .cp-up-num {
  background: #3b82f6;
}
[data-theme="dark"] .cp-up-icon {
  background: #1e3a5f;
  color: #60a5fa;
}
[data-theme="dark"] .cp-up-title {
  color: #e2e8f0;
}
[data-theme="dark"] .cp-up-footer {
  background: #1e3a5f;
  border-color: #1e40af;
}
[data-theme="dark"] .cp-up-footer-title {
  color: #93c5fd;
}
[data-theme="dark"] .cp-wa-logo {
background: #01301d;
  border-color: #166534;
}
[data-theme="dark"] .cp-wa-logo span {
  color: #94a3b8;
}
[data-theme="dark"] .cp-wa-footer {
background: #0e1f15;
  border-color: #056c2c;
}
[data-theme="dark"] .cp-wa-footer-title {
  color: #6ee7b7;
}

/* ── Crypto payment page ─────────────────────────────────────── */
.cry-wrap {
  margin: 0 auto;
  padding: 0 0 40px;
}

.cry-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 4px 28px;
  justify-content: center;
}
.cry-hero-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: #fff7ed;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #f7931a;
  flex-shrink: 0;
}
.cry-hero-text {
  text-align: left;
}
.cry-hero-title {
  font-size: 26px;
  font-weight: 800;
  color: #1e293b;
  margin: 0 0 4px;
}
.cry-hero-sub {
  font-size: 14px;
  color: #64748b;
  margin: 0;
}

.cry-tiers {
  margin-bottom: 20px;
}
.cry-tiers h3 {
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 14px;
  text-align: center;
}
.cry-tier-row {
  display: flex;
  gap: 12px;
}
.cry-tier-btn {
  flex: 1;
  border: 2px solid #e2e8f0;
  border-radius: 14px;
  padding: 22px 14px 18px;
  background: #fff;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
  transition:
    border-color 0.15s,
    background 0.15s,
    box-shadow 0.15s;
}
.cry-tier-btn:hover {
  border-color: #2563eb;
  background: #eff6ff;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.12);
}
.cry-tier-badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: #2563eb;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
  padding: 2px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.cry-tier-active {
  border-color: #2563eb !important;
  background: #eff6ff !important;
}
.cry-tier-name {
  font-size: 15px;
  font-weight: 800;
  color: #1e293b;
}
.cry-tier-price {
  font-size: 32px;
  font-weight: 900;
  color: #2563eb;
  line-height: 1;
  letter-spacing: -0.02em;
}
.cry-tier-period {
  font-size: 13px;
  color: #94a3b8;
  font-weight: 500;
}
.cry-tier-mo {
  font-size: 12px;
  color: #94a3b8;
}

.cry-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 8px;
  align-items: start;
}

.cry-form-box {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 22px;
}
.cry-info-box {
  background: #f0f7ff;
  border: 1px solid #dbeafe;
  border-radius: 14px;
  padding: 22px;
}

.cry-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cry-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cry-label {
  font-size: 13px;
  font-weight: 600;
  color: #475569;
}
.cry-select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  font-size: 14px;
  color: #1e293b;
  background: #fff;
  cursor: pointer;
}
.cry-select:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.cry-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px;
  border-radius: 10px;
  background: #2563eb;
  color: #fff;
  border: none;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 4px;
}
.cry-submit:hover {
  background: #1d4ed8;
}

.cry-accepted {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #dbeafe;
}
.cry-accepted-label {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 8px;
}
.cry-coins {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.cry-coins span {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  background: #fff;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  padding: 5px 10px;
}
.cry-coins i {
  color: #f7931a;
}

[data-theme="dark"] .cry-hero-title {
  color: #e2e8f0;
}
[data-theme="dark"] .cry-hero-icon {
  background: #2a1a00;
}
[data-theme="dark"] .cry-tiers h3 {
  color: #e2e8f0;
}
[data-theme="dark"] .cry-tier-btn {
  background: #0f172a;
  border-color: #334155;
}
[data-theme="dark"] .cry-tier-btn:hover {
  background: #1e2d4a;
  border-color: #2563eb;
}
[data-theme="dark"] .cry-tier-active {
  background: #1e2d4a !important;
}
[data-theme="dark"] .cry-tier-name {
  color: #e2e8f0;
}
[data-theme="dark"] .cry-form-box {
  background: #0f172a;
  border-color: #334155;
}
[data-theme="dark"] .cry-info-box {
  background: #0f1929;
  border-color: #1e3a8a;
}
[data-theme="dark"] .cry-label {
  color: #94a3b8;
}
[data-theme="dark"] .cry-select {
  background: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}
[data-theme="dark"] .cry-coins span {
  background: #1e293b;
  border-color: #334155;
  color: #cbd5e1;
}

/* ── End giftcard page ───────────────────────────────────────── */

/* client images ------------------- */

.client-top-section {
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  background: #f0f7ff;
  padding: 20px 32px;
  margin-bottom: 32px;
}
.client-top-sectionfront {
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  background: #f1f5f9;
  padding: 20px 32px;
  margin-bottom: 32px;
}
.client-header {
  text-align: center;
  padding: 0 0 0;
}
.client-perks {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 0;
  flex-wrap: wrap;
  padding-top: 20px;
}
.client-sabznbd {
  background-image: url(/imagesnew/clients/sabnzbd.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 150px;
  height: 52px;
  margin-top: 5px;
}
.client-nzbget {
  background-image: url(/imagesnew/clients/nzbget.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 130px;
  height: 52px;
}
.client-radarr {
  background-image: url(/imagesnew/clients/radarr.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 130px;
  height: 52px;
  margin-top: 3px;
}
.client-sonarr {
  background-image: url(/imagesnew/clients/sonarr.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 130px;
  height: 52px;
}
[data-theme="dark"] .client-sonarr {
  background-image: url(/imagesnew/clients/sonarrdark.png);
}
.client-nzbhydra {
  background-image: url(/imagesnew/clients/nzbhydra.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 150px;
  height: 52px;
  margin-top: 5px;
}
.client-potatoe {
  background-image: url(/imagesnew/clients/potatoe.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 130px;
  height: 52px;
}
.client-lidarr {
  background-image: url(/imagesnew/clients/lidarr.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 50px;
  height: 52px;
}
/* client images -------------------end */

.example-myshows {
  background-image: url(/imagesnew/examplemyshows.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 950px;
  height: 800px;
  margin-top: 20px;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
margin-left: 40px;
}

[data-theme="dark"] .example-myshows {
  background-image: url(/imagesnew/examplemyshowsdark.png);
 }

.example-mymovies {
  background-image: url(/imagesnew/examplemymovies.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 950px;
  height: 800px;
  margin-top: 20px;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
margin-left: 40px;
}

[data-theme="dark"] .example-mymovies {
  background-image: url(/imagesnew/examplemymoviesdark.png);
 }


/* card images ------------------- */

.card-visa {
  background-image: url(/imagesnew/cards/visa.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 70px;
  height: 62px;
  margin-top: 10px;
  margin-bottom: -10px;
}
.card-mastercard {
  background-image: url(/imagesnew/cards/mastercard.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 70px;
  height: 62px;
  margin-top: 10px;
  margin-bottom: -10px;
}
.card-express {
  background-image: url(/imagesnew/cards/express.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 70px;
  height: 62px;
  margin-left: 10px;
}
.card-discover {
  background-image: url(/imagesnew/cards/discover.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 70px;
  height: 62px;
  margin-left: 10px;
}
.card-jcb {
  background-image: url(/imagesnew/cards/jcb.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 70px;
  height: 62px;
  margin-left: 10px;
}
.card-cup {
  background-image: url(/imagesnew/cards/cup.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 70px;
  height: 62px;
  margin-left: 10px;
}

/* card images -------------------end */

/* Security tab (2FA + Passkeys) -------------------- */
.sec-feature-block {
  border: 1px solid var(--c-border);
  border-radius: 10px;
  padding: 20px 24px;
  margin-bottom: 20px;
  background-color: white;
}
.sec-feature-header {
  margin-bottom: 16px;
  text-align: center;
}
.sec-feature-icon {
  font-size: 16px;
  color: var(--c-primary);
  margin-right: 6px;
}
.sec-feature-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--c-heading);
  margin: 0 0 6px;
}
.sec-feature-desc {
  font-size: 13px;
  color: var(--c-muted);
  margin: 0;
}
.pk-list-card {
  margin-bottom: 16px;
}
.pk-list-table {
  width: 100%;
  border-collapse: collapse;
}
.pk-list-table thead tr {
  border-bottom: 1px solid var(--c-border);
}
.pk-list-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--c-muted);
  font-weight: 600;
}
.pk-list-table tbody tr {
  border-bottom: 1px solid var(--c-border);
}
.pk-list-table td {
  padding: 10px 12px;
}
.pk-list-table td.pk-date {
  color: var(--c-muted);
  font-size: 13px;
}
.pk-icon {
  color: var(--c-primary);
  margin-right: 8px;
}
.pk-btn-row {
  padding: 12px 16px 16px;
}
.pk-status {
  margin-left: 12px;
  font-size: 13px;
  display: inline-block;
}
.pk-action {
  text-align: right;
  padding: 6px 12px;
}
.pk-del-btn {
  font-size: 12px;
  padding: 4px 10px;
}
/* Security tab --------------------end */

.advert img {
  border-radius: 6px;
  display: block;
  margin: auto;
  width: 50%;
}

/* ── Console (Games) browse page — csl- prefix ─────────────── */
.csl-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.csl-page-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--c-heading);
  margin: 0;
}
.csl-header-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.csl-perpage-form {
  display: flex;
  align-items: center;
  gap: 8px;
}
.csl-perpage-label {
  font-size: 13px;
  color: var(--c-muted);
  white-space: nowrap;
}
.csl-perpage-select {
  height: 34px;
  padding: 0 10px;
  font-size: 13px;
  font-family: inherit;
  border: 1px solid var(--c-border);
  border-radius: 7px;
  background: var(--c-surface);
  color: var(--c-body);
  cursor: pointer;
}
.csl-perpage-select:focus {
  outline: none;
  border-color: var(--c-primary);
}

.csl-filter-form {
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.csl-filter-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.csl-filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.csl-filter-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.csl-filter-input {
  height: 34px;
  padding: 0 10px;
  font-size: 13px;
  font-family: inherit;
  border: 1px solid var(--c-border);
  border-radius: 7px;
  background: var(--c-surface);
  color: var(--c-body);
  min-width: 160px;
}
.csl-filter-input:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-muted);
}
.csl-filter-select {
  height: 34px;
  padding: 0 10px;
  font-size: 13px;
  font-family: inherit;
  border: 1px solid var(--c-border);
  border-radius: 7px;
  background: var(--c-surface);
  color: var(--c-body);
  cursor: pointer;
  min-width: 140px;
}
.csl-filter-select:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-muted);
}
.csl-filter-btn {
  height: 34px;
  padding: 0 18px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  background: var(--c-primary);
  color: #fff;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.csl-filter-btn:hover {
  background: #1d4ed8;
}

.csl-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.csl-game-wrap {
  border: 1px solid var(--c-border);
  border-radius: 10px;
  overflow: hidden;
}
.csl-game-card {
  display: flex;
  gap: 16px;
  padding: 16px;
  background: var(--c-surface);
}
.csl-game-cover {
  flex: 0 0 auto;
}
.csl-cover-img {
  width: 120px;
  display: block;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
.csl-game-body {
  flex: 1;
  min-width: 0;
}
.csl-game-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--c-heading);
  margin: 0 0 6px;
  line-height: 1.3;
}
.csl-game-title a {
  color: inherit;
  text-decoration: none;
}
.csl-game-title a:hover {
  color: var(--c-primary);
}
.csl-game-platform {
  font-size: 14px;
  font-weight: 400;
  color: var(--c-muted);
}
.csl-game-badges {
  margin-bottom: 8px;
}
.csl-rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--c-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 20px;
}
.csl-rating-badge small {
  font-weight: 400;
  color: #fff;
}
.csl-game-info-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.csl-game-meta {
  flex: 1;
  min-width: 0;
}
.csl-game-ss {
  flex: 0 0 auto;
}
.csl-ss-img {
  width: 220px;
  max-width: 100%;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  display: block;
}
.csl-game-tagline {
  font-size: 13px;
  font-style: italic;
  color: var(--c-muted);
  margin: 0 0 6px;
}
.csl-game-textblock {
  font-size: 13px;
  color: var(--c-body);
  margin: 0 0 6px;
  line-height: 1.5;
}
.csl-game-detail {
  font-size: 13px;
  color: var(--c-body);
  margin: 0 0 4px;
}
.csl-label {
  color: var(--c-body);
  font-weight: 700;
  margin-right: 4px;
  font-style: normal;
}
.csl-more {
}
.csl-moreellipses {
  color: var(--c-muted);
  font-size: 13px;
}
.csl-morecontent > span {
  display: none;
}
.csl-morelink {
  color: var(--c-primary);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}
.csl-morelink:hover {
  text-decoration: underline;
}
.csl-ext-links {
  display: flex;
  gap: 6px;
  margin-top: 5px;
  flex-wrap: wrap;
}
.csl-ext-btn {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  border: 1px solid var(--c-border);
  border-radius: 5px;
  color: var(--c-muted);
  text-decoration: none;
  transition: all 0.15s;
}
.csl-ext-btn:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
  background: transparent;
}

.csl-release-wrap {
  border-top: 1px solid var(--c-border);
  overflow-x: auto;
}
/* Mobile release card — hidden by default, shown via media query below */
.csl-mobile-cards {
  display: none;
}
.csl-release-table {
  border-collapse: collapse;
}
.csl-release-table td,
.csl-release-table th {
  border-right: 1px solid var(--c-border);
}
.csl-release-table td:last-child,
.csl-release-table th:last-child {
  border-right: none;
}
.csl-release-table a.title {
  color: var(--c-body);
  text-decoration: none;
  font-weight: 500;
  font-size: 12px;
}
.csl-release-table a.title:hover {
  color: var(--c-primary);
}
.csl-rel-date,
.csl-rel-size,
.csl-rel-hits {
  font-size: 12px;
  color: var(--c-muted);
  white-space: nowrap;
}
.csl-cmts-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--c-body);
  text-decoration: none;
  white-space: nowrap;
}
.csl-cmts-link:hover {
  color: var(--c-primary);
}
.csl-cmts-dim {
  opacity: 0.45;
}
.csl-cmts-popup {
  display: none;
  position: absolute;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  z-index: 999999;
  margin-right: 200px;
  width: 320px;
  padding: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  font-size: 13px;
}
.csl-search-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  background: #f8fafc;
  color: #475569;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
}
.csl-search-toggle:hover,
.csl-search-active {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}
.csl-chevron {
  transition: transform 0.2s;
  font-size: 11px;
}
.csl-chevron-open {
  transform: rotate(180deg);
}
.csl-filter-hidden {
  display: none;
}
[data-theme="dark"] .csl-search-toggle {
  background: #1e293b;
  border-color: #334155;
  color: #94a3b8;
}
[data-theme="dark"] .csl-search-toggle:hover,
[data-theme="dark"] .csl-search-active {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}
/* ── Console page end ─────────────────────────────────────── */

/* ── Acronyms page — acr- prefix ───────────────────────────── */
.acr-page {
  width: 100%;
}
.acr-heading {
  font-size: 22px;
  font-weight: 700;
  color: var(--c-heading);
  margin: 0 0 14px;
}
.acr-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.acr-item {
  border: 1px solid var(--c-border);
  border-radius: 7px;
  padding: 8px 12px;
  background: var(--c-surface);
}
.acr-term {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-heading);
  margin: 0 0 3px;
  display: block;
}
.acr-full {
  font-size: 12px;
  font-weight: 400;
  color: var(--c-muted);
  margin-left: 6px;
}
.acr-def {
  font-size: 12px;
  color: var(--c-body);
  margin: 0;
  line-height: 1.55;
}
.acr-def code {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  background: var(--c-subnav);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--c-body);
}
.acr-link {
  color: var(--c-primary);
  text-decoration: none;
}
.acr-link:hover {
  text-decoration: underline;
}
/* ── Acronyms page end ──────────────────────────────────────── */

/* ── RSS feeds page — rss- prefix ───────────────────────────── */
.rss-heading {
  font-size: 22px;
  font-weight: 500;
  color: var(--c-heading);
  margin: 0 0 16px;
}
.rss-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fef9c3;
  border: 1px solid #fde047;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: #92400e;
  margin-bottom: 16px;
  line-height: 1.5;
}
[data-theme="dark"] .rss-notice {
  background: #1c1007;
  border-color: #78350f;
  color: #fcd34d;
}
.rss-notice-icon {
  flex-shrink: 0;
  margin-top: 1px;
}
.rss-section {
  border: 1px solid var(--c-border);
  border-radius: 8px;
  padding: 14px 16px;
  background: var(--c-surface);
  margin-bottom: 12px;
}
.rss-section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-heading);
  margin: 0 0 10px;
}
.rss-intro {
  font-size: 13px;
  color: var(--c-body);
  margin: 0 0 10px;
  line-height: 1.55;
}
.rss-intro:last-child {
  margin-bottom: 0;
}
.rss-link {
  color: var(--c-primary);
  text-decoration: none;
}
.rss-link:hover {
  text-decoration: underline;
}
.rss-params {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.rss-param {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.rss-param-label {
  font-size: 12px;
  color: var(--c-muted);
  min-width: 260px;
}
.rss-param-code {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-primary);
  background: var(--c-subnav);
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}
.rss-feed-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rss-feed-item {
  display: flex;
  flex-direction: column;
}
.rss-feed-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.rss-feed-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-primary);
  text-decoration: none;
}
.rss-feed-name:hover {
  text-decoration: underline;
}
.rss-feed-name i {
  font-size: 12px;
  margin-right: 4px;
  opacity: 0.7;
}
.rss-feed-example {
  color: var(--c-muted);
  cursor: default;
}
.rss-feed-example:hover {
  text-decoration: none;
  color: var(--c-muted);
}
.rss-feed-hint {
  font-size: 11px;
  font-weight: 400;
  color: var(--c-muted);
  margin-left: 4px;
}
.rss-feed-url {
  display: block;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  color: var(--c-body);
  text-decoration: none;
  word-break: break-all;
  opacity: 0.8;
  margin-top: 5px;
}
.rss-feed-url:hover {
  color: var(--c-primary);
  opacity: 1;
}
.rss-feed-toggle {
  margin-top: 3px;
}
.rss-feed-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--c-muted);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.rss-feed-toggle-btn::-webkit-details-marker {
  display: none;
}
.rss-feed-toggle-btn::before {
  content: "\f105";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 10px;
  transition: transform 0.15s;
}
.rss-feed-toggle-btn:hover {
  color: var(--c-primary);
}
.rss-feed-toggle[open] .rss-feed-toggle-btn::before {
  transform: rotate(90deg);
}
.rss-cats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.rss-cat-col {
  margin-bottom: 0;
}
.prof-host-history > summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--c-muted);
}
.prof-host-history > summary:hover {
  color: var(--c-primary);
}
.prof-host-history-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 6px;
}
.prof-host-history-table th {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-muted);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  padding: 10px 12px;
  white-space: nowrap;
  text-align: left;
}
.prof-host-history-table td {
  font-size: 12px;
  color: var(--c-body);
  border: 1px solid var(--c-border);
  padding: 6px 10px;
  text-align: left;
}

/* ── API Help Page ───────────────────────────────── */
.api-intro-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--c-subnav);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 10px 16px;
  font-size: 13px;
  color: var(--c-secondary);
  margin-bottom: 16px;
  margin-top: 16px;
}
.api-intro-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.api-intro-item i {
  color: var(--c-primary);
  font-size: 12px;
}
.api-intro-sep {
  color: var(--c-border);
  font-size: 16px;
}
.api-intro-vip a {
  color: var(--c-danger);
  font-weight: 600;
  text-decoration: none;
}
.api-intro-vip a:hover {
  text-decoration: underline;
}
.api-key-callout {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--c-primary-muted);
  border: 1px solid rgba(0, 112, 255, 0.2);
  border-radius: var(--r-md);
  padding: 10px 16px;
  margin-bottom: 16px;
}
.api-key-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-primary);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.api-key-value {
  font-family: ui-monospace, monospace;
  font-size: 13px;
  color: var(--c-primary);
  background: rgba(0, 112, 255, 0.08);
  padding: 3px 10px;
  border-radius: 4px;
  user-select: all;
}
.api-key-hint {
  font-size: 12px;
  color: var(--c-muted);
  margin-left: auto;
}
.api-intro-text {
  font-size: 14px;
  color: var(--c-secondary);
  margin: 0 0 20px;
}
.api-section {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  margin-bottom: 16px;
  overflow: hidden;
}
.api-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--c-heading);
  padding: 12px 16px;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-subnav);
}
.api-section-title i {
  color: var(--c-primary);
  font-size: 13px;
}
.api-section-note {
  font-size: 13px;
  color: var(--c-muted);
  padding: 10px 16px 0;
  margin: 0;
}
.api-endpoints {
  padding: 0 16px 8px;
}
.api-endpoint {
  border-bottom: 1px solid var(--c-border);
  padding: 12px 0;
}
.api-endpoint:last-child {
  border-bottom: none;
}
.api-endpoint-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  cursor: pointer;
  list-style: none;
}
.api-endpoint-summary::-webkit-details-marker {
  display: none;
}
.api-endpoint-summary::before {
  content: "\f105";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 11px;
  color: var(--c-muted);
  transition: transform 0.15s;
  flex-shrink: 0;
}
details[open] > .api-endpoint-summary::before {
  transform: rotate(90deg);
}
.api-endpoint-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-heading);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.api-endpoint-badge {
  font-size: 10px;
  font-weight: 500;
  background: var(--c-success);
  color: #fff;
  padding: 2px 6px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.api-code {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  color: var(--c-primary);
  background: var(--c-primary-muted);
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-block;
  word-break: break-all;
  text-decoration: none;
}
a.api-code:hover {
  text-decoration: underline;
}
.api-endpoint-desc {
  font-size: 13px;
  color: var(--c-secondary);
  margin: 8px 0 0;
}
.api-endpoint-desc code {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  color: var(--c-primary);
  background: var(--c-primary-muted);
  padding: 1px 5px;
  border-radius: 3px;
}
.api-endpoint-params {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}
.api-param {
  font-size: 12px;
  color: var(--c-secondary);
}
.api-param code {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  color: var(--c-primary);
  background: var(--c-primary-muted);
  padding: 1px 5px;
  border-radius: 3px;
}
.api-attrs-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 16px;
}
.api-attr-tag {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--c-secondary);
  background: var(--c-subnav);
  border: 1px solid var(--c-border);
  padding: 3px 8px;
  border-radius: 20px;
}
.api-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.api-row-2col .api-section {
  margin-bottom: 0;
}
.api-spec-link {
  text-align: center;
  font-size: 13px;
  color: var(--c-muted);
  padding: 12px 0;
}
.api-spec-link i {
  margin-right: 6px;
  color: var(--c-primary);
}
.api-spec-link a {
  color: var(--c-primary);
  text-decoration: none;
}
.api-spec-link a:hover {
  text-decoration: underline;
}
/* ── RSS page end ───────────────────────────────────────────── */

/* ── CKEditor (classic, forum quick-reply / forum post edit / add-tutorial) — dark theme ──
   Third-party widget ships its own light-only skin; these are new selectors
   scoped to CKEditor's own class names, not any of this site's classes. The
   editable canvas itself lives inside an iframe with its own stylesheet and
   is intentionally left white — same convention most editors use so typed
   text stays high-contrast regardless of the surrounding UI theme. */
[data-theme="dark"] .cke_chrome {
  border-color: var(--c-border) !important;
  background: var(--c-bg) !important;
}
/* CKEditor's own reset.css paints every element under .cke_reset_all
   transparent via `.cke_reset_all, .cke_reset_all *, .cke_reset_all a`
   ( !important, same specificity shape reused here so ours wins on
   source order) — that's most of the toolbar/status-bar chrome, so a
   single .cke_top/.cke_bottom rule was just showing dark through empty
   space while every actual nested span/button wrapper stayed transparent
   over a white ancestor further up. Painting the whole reset scope dark
   directly is the only way to reliably cover it. */
[data-theme="dark"] .cke_reset_all,
[data-theme="dark"] .cke_reset_all *:not(.cke_button):not(.cke_combo_button),
[data-theme="dark"] .cke_reset_all a:not(.cke_button) {
  background-color: var(--c-bg) !important;
}
[data-theme="dark"] .cke_top {
  background: var(--c-bg) !important;
  border-bottom-color: var(--c-border) !important;
}
[data-theme="dark"] .cke_bottom {
  background: var(--c-bg) !important;
  border-top-color: var(--c-border) !important;
}
[data-theme="dark"] .cke_resizer {
  border-color: transparent transparent var(--c-muted) var(--c-muted) !important;
}
[data-theme="dark"] .cke_path_item,
[data-theme="dark"] .cke_path_empty {
  color: var(--c-muted) !important;
}
[data-theme="dark"] .cke_path_item:hover,
[data-theme="dark"] .cke_path_item:focus {
  color: var(--c-primary) !important;
  background: transparent !important;
}
[data-theme="dark"] .cke_toolbar_separator {
  background-color: var(--c-border) !important;
}
/* grayscale() removes hue first so invert() can't swap colors into the
   wrong hue; invert() alone (no brightness(0) flattening) then turns dark
   strokes light while keeping the icon's original internal shading levels
   intact, so line icons and filled/colorful icons both render as clean
   white-ish silhouettes with their detail still visible. */
[data-theme="dark"] .cke_button_icon {
  filter: invert(1);
}
/* .cke_toolgroup (the rounded box wrapping each cluster of buttons) isn't
   under .cke_reset_all's own class, only a plain descendant, and the
   skin's own white/bordered box for it was still beating the blanket
   repaint above — doubled class selector for a specificity margin so it
   wins outright rather than relying on !important tie-breaking. */
[data-theme="dark"] .cke_toolgroup.cke_toolgroup {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
/* Buttons were excluded from the blanket .cke_reset_all repaint above so
   their on/hover states (below) stay visible — but that means their
   default ("off", unhovered) state was still falling through to the
   skin's own opaque white background instead of transparent. Force that
   explicitly so only hovered/active buttons show a highlight. */
[data-theme="dark"] .cke_button {
  background: transparent !important;
  border-color: transparent !important;
}
[data-theme="dark"] a.cke_button_on {
  background: var(--c-sidebar-hov) !important;
  border-color: var(--c-border) !important;
}
[data-theme="dark"] a.cke_button_off:hover,
[data-theme="dark"] a.cke_button_off:focus,
[data-theme="dark"] a.cke_button_off:active {
  background: var(--c-sidebar-hov) !important;
  border-color: var(--c-border) !important;
}
[data-theme="dark"] .cke_combo_button {
  background: var(--c-surface) !important;
  border-color: var(--c-border) !important;
}
[data-theme="dark"] .cke_combo_off:hover .cke_combo_button,
[data-theme="dark"] .cke_combo_on .cke_combo_button {
  background: var(--c-sidebar-hov) !important;
}
[data-theme="dark"] .cke_combo_text {
  color: var(--c-body) !important;
}
[data-theme="dark"] .cke_combo_arrow {
  border-top-color: var(--c-muted) !important;
}
[data-theme="dark"] .cke_contents {
  border-color: var(--c-border) !important;
}

/* ── jquery.wysiwyg (private message reply, message_view.tpl) — dark theme ──
   A separate, older editor widget from CKEditor — its own class names,
   its own iframe (dark-themed via the `css` init option passed in the
   template itself, since a stylesheet can't reach into that iframe). */
[data-theme="dark"] div.wysiwyg {
  background: var(--c-bg) !important;
  border-color: var(--c-border) !important;
}
[data-theme="dark"] div.wysiwyg ul.panel {
  border-bottom-color: var(--c-border) !important;
}
[data-theme="dark"] div.wysiwyg ul.panel li {
  background: transparent !important;
}
[data-theme="dark"] div.wysiwyg ul.panel li.separator {
  border-left-color: var(--c-border) !important;
}
[data-theme="dark"] div.wysiwyg ul.panel li a {
  filter: invert(1) brightness(1.3);
}
[data-theme="dark"] div.wysiwyg ul.panel li a.active {
  background-color: var(--c-sidebar-hov) !important;
  border-color: var(--c-border) !important;
}

/* ── Search form mobile — MUST be last to override src-adv-active rules above ── */

/* ═══════════════════════════════════════
   RESPONSIVE — largest breakpoint first
   ═══════════════════════════════════════ */

@media (max-width: 1100px) {
  .br-scroll-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .br-scroll-wrap .br-table {
    min-width: 1050px;
  }
}

@media (max-width: 1024px) {
  #list-nav {
    display: none;
  }
}

@media (max-width: 1024px) {
  #list-nav {
    display: none;
  }

  #header {
    display: block;
    box-shadow: none;
    border-bottom: 1px solid var(--c-border);
  }

  /* Stack: categories row on top, search row below */
  #menucontainer {
    flex-direction: column;
    height: auto;
    padding: 0;
    max-width: 100%;
    gap: 0;
    align-items: stretch;
  }

  /* ── Scrollable category strip ── */
  /* NOTE: no mask-image on #menulink — it creates a stacking context that
     traps position:fixed children (the submenu panel). Use ::after on the
     container instead for the right-edge fade hint. */
  #menucontainer {
    position: relative;
  }
  #menucontainer::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 36px;
    height: 42px;
    background: linear-gradient(to right, transparent, var(--c-subnav));
    pointer-events: none;
  }
  #menulink {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #menulink::-webkit-scrollbar {
    display: none;
  }
  #menulink > ul {
    height: 42px;
    flex-wrap: nowrap;
    gap: 0;
    padding: 0 12px;
    min-width: max-content;
  }
  #menulink > ul > li > a {
    height: 42px;
    padding: 0 12px;
    font-size: 13px;
    border-bottom: none;
    white-space: nowrap;
    touch-action: manipulation;
  }

  /* Mobile: keep desktop submenu hidden — offcanvas handles subcategories */
  #menulink > ul > li > ul {
    display: none !important;
  }
  #menulink > ul > li:has(> ul) > a::after {
    display: none;
  }

  /* ── Full-width search row below strip ── */
  #menusearchlink {
    display: flex;
    padding: 7px 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
  }
  #headsearch_form {
    width: 100%;
    border-radius: var(--r-sm);
  }
  #headsearch {
    flex: 1;
    width: auto;
    min-width: 0;
  }
}

@media (max-width: 1024px) {
  /* Full-width content grid */
  .contentborder2 {
    grid-template-columns: 1fr;
  }
  #content {
    grid-column: 1;
    grid-row: 1;
  }

  /* Sidebar: fixed overlay, hidden off-screen by default */
  #sidebar {
    display: block !important;
    position: fixed;
    left: -250px;
    top: 0;
    width: 240px;
    height: 100vh;
    z-index: 1001;
    overflow-y: auto;
    transition: left 0.25s ease;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);
    padding: 16px 8px 24px;
  }
  #sidebar.sidebar-mobile-open {
    left: 0;
  }

  /* Backdrop */
  .sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1000;
  }
  .sidebar-backdrop.active {
    display: block;
  }

  /* Header: hide non-essential nav items */
  .nav-hide-mobile {
    display: none !important;
  }
  .nav-hide-desktop {
    display: flex !important;
  }

  /* Shrink logo a bit */
  .hdr-logo img {
    height: 40px;
  }
}

@media (max-width: 1024px) {
  .prof-settings-grid {
    grid-template-columns: 1fr;
  }
  .prof-avatar-card {
    flex-direction: row;
    justify-content: flex-start;
  }
  .prof-options-grid {
    grid-template-columns: 1fr;
  }
  .prof-field > label:first-child {
    width: 130px;
  }
  .prof-field > .hint {
    padding-left: 146px;
  }
  .prof-rss-options {
    grid-template-columns: 1fr;
  }
  .sf-inner {
    grid-template-columns: 1fr 1fr;
    gap: 24px 0;
  }
  .sf-brand {
    grid-column: 1 / -1;
    padding-right: 0;
  }
  .sf-col,
  .sf-trust {
    border-left: none;
    padding: 0;
    border-top: 1px solid var(--c-border);
    padding-top: 16px;
  }
  .sf-trust {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1024px) {
  .mml-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 1024px) {
  .mme-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 960px) {
  .login-form-col {
    flex: 1 1 320px;
    width: auto;
  }
  .login-deco-col {
    flex: 0 0 220px;
    min-width: 0;
  }
}

@media (max-width: 900px) {
  .mvb-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .tvb-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .ms-shows-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
}

@media (max-width: 768px) {
  .mml-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .frc-table {
    table-layout: auto;
  }
  .frc-th-stat,
  .frc-td-stat,
  .frc-last-cell,
  .frc-th-last {
    display: none;
  }
  .frc-icon-cell {
    width: 44px;
  }
}

@media (max-width: 768px) {
  .srf-table {
    table-layout: auto;
  }
  .srf-td-stat,
  .srf-last-cell,
  .srf-table-head th:nth-child(3),
  .srf-table-head th:nth-child(4),
  .srf-table-head th:nth-child(5) {
    display: none;
  }
  .srf-td-cat {
    display: none;
  }
}

@media (max-width: 768px) {
  .frt-table {
    table-layout: auto;
  }
  .frt-td-stat,
  .frt-last-cell,
  .frt-table-head th:nth-child(3),
  .frt-table-head th:nth-child(4),
  .frt-table-head th:nth-child(5) {
    display: none;
  }
}

@media (max-width: 768px) {
  .donate-perks {
    gap: 14px;
  }
  .donate-perk {
    width: 80px;
  }
  .donate-perk-icon {
    width: 44px;
    height: 44px;
    font-size: 17px;
  }
  .donate-perk-label {
    font-size: 11.5px;
  }
  /* Same desktop typography/colours — just tighter padding and gaps
     since cards are stacked full-width instead of side by side. */
  .donate-tiers {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
  }
  .donate-tiers .donate-tier:has(.donate-tier-badge) {
    margin-top: 12px;
  }
  .donate-tier {
    width: 100%;
    max-width: 340px;
    padding: 22px 18px 18px;
  }
  .donate-tier-name {
    margin-bottom: 6px;
  }
  .donate-tier-monthly {
    margin-bottom: 12px;
  }
  .donate-tier-feature-list {
    gap: 8px;
    margin: 0 0 14px;
  }
  .donate-tier-feature-list li {
    justify-content: center;
  }
  .donate-mid {
    grid-template-columns: 1fr;
  }
  .donate-features {
    grid-template-columns: repeat(2, 1fr);
  }
  .donate-pay-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .donate-title {
    font-size: 42px;
  }
  .donate-tier-price {
    font-size: 30px;
  }
  .donate-bottom {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .td-section {
    width: 100%;
  }
  .td-scroll-wrap {
    display: none;
  }
  .td-mobile-cards {
    display: block;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    overflow: hidden;
    margin-top: 8px;
    text-align: left;
  }
}

@media (max-width: 767px) {
  .sf-inner {
    grid-template-columns: 1fr;
  }
  .sf-bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .prof-cs-form {
    grid-template-columns: 1fr;
  }
  .prof-cs-action {
    margin-top: 2px;
  }
  .prof-field > label:first-child {
    width: 100%;
    flex-shrink: 1;
  }
  .prof-field > input,
  .prof-field > select {
    flex-basis: 100%;
  }
  .prof-field > .hint {
    padding-left: 0;
  }
  .browse-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  div.pager a,
  div.pager span {
    padding: 0 2px;
  }

  .browse-row.tvb-browse-row,
  .browse-row.mvb-browse-row,
  .browse-row.cmc-browse-row {
    padding-bottom: 0;
    gap: 0;
  }

  .browse-row.tvb-browse-row + .as-wrap,
  .browse-row.mvb-browse-row + .as-wrap,
  .browse-row.cmc-browse-row + .as-wrap {
    padding-top: 4px;
  }

  .browse-row.cmc-browse-row + .as-wrap .cmc-sort-bar {
    margin-top: 2px;
  }

  div.pager {
    gap: 2px;
  }

  .half-row.pull-right {
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
  }

  .nosearchresults {
    text-align: center;
  }

  /* Hide desktop table, show mobile cards */
  .br-scroll-wrap {
    display: none;
  }
  .br-mobile-cards {
    display: block;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    overflow: hidden;
    margin-bottom: 12px;
  }
  .br-card {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: start;
    column-gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--c-border);
  }
  .br-card:last-child {
    border-bottom: none;
  }
  .br-card-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--c-primary);
    text-decoration: none;
    line-height: 1.4;
    word-break: break-word;
  }
  .br-card-name:hover {
    text-decoration: underline;
  }
  .br-card-meta {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px;
    align-items: center;
  }
  .br-card-actions {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .br-card-actions .icon {
    float: none;
    margin: 0;
  }
  .br-card-chip {
    font-size: 10px;
    font-weight: 500;
    color: var(--c-secondary);
    background: var(--c-subnav);
    border: 1px solid var(--c-border);
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
  }
  .br-chip-nfo {
    color: var(--c-primary);
    border-color: rgba(0, 112, 255, 0.3);
    background: var(--c-primary-muted);
    text-decoration: none;
    cursor: pointer;
  }
  .br-card-meta .br-lock-icon {
    font-size: 11px;
    color: var(--c-muted);
    align-self: center;
    padding: 5px 7px;
    margin: -5px -7px;
    cursor: default;
  }
  .br-cmts-chip {
    color: var(--c-secondary);
    text-decoration: none;
  }
  .br-cmts-chip.br-cmts-dim {
    opacity: 0.45;
  }
  .br-card-chip.br-cmts-dim {
    opacity: 0.45;
  }
  .br-card-chip i.fa-comment,
  .br-card-chip i.fa-regular {
    margin-right: 1px;
  }
  .br-card-title-row {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: flex-start;
    gap: 3px;
  }
  .br-card-check {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    accent-color: var(--c-primary);
    cursor: pointer;
  }
  .br-card:has(.br-card-check:checked) {
    background: var(--c-primary-muted);
  }
  .br-card--noactions {
    grid-template-columns: 1fr;
  }
  .br-grp-desc {
    font-size: 11px;
    color: var(--c-muted);
    flex-basis: 100%;
    margin-top: 2px;
  }
  .br-chip-flagged {
    font-size: 11px;
    color: #c0392b;
    cursor: pointer;
    flex-shrink: 0;
  }
  .br-mob-dl {
    color: var(--c-primary);
    text-decoration: none;
    display: block;
  }
  .br-mob-dl:hover {
    color: var(--c-secondary);
  }
  .br-card.br-flagged {
    background-color: #fff0f0;
  }

  /* ── movies search: 2-column grid on mobile ── */
  .mvb-filter-fields .as-input,
  .mvb-filter-fields .as-select {
    flex: 1 1 calc(50% - 3px);
  }

  /* ── viewmoviefull: hide table, show mobile cards ── */
  #browsetable {
    display: none;
  }
  .vmf-mobile-cards {
    display: block;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    overflow: hidden;
    margin-bottom: 12px;
  }

  /* ── mvb-card: tighter poster + meta layout for narrow screens ── */
  .mvb-thumb img,
  .mvb-no-cover {
    width: 100px;
  }
  .mvb-no-cover {
    min-height: 120px;
    font-size: 24px;
  }
  .mvb-content {
    padding: 8px 10px;
    gap: 0;
  }
  .mvb-title {
    font-size: 13px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .mvb-genre {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .mvb-date-full {
    display: none;
  }
  .mvb-date-ago {
    display: inline;
  }
  /* Allow meta items to wrap; prevent text nodes (size, date) from breaking mid-value */
  .mvb-meta {
    flex-wrap: wrap;
    white-space: nowrap;
    row-gap: 3px;
  }
  /* Zero-height full-width row forces .br-icons onto its own line */
  .mvb-meta-spacer {
    flex-basis: 100%;
    height: 0;
  }
  /* Icons row: undo inherited nowrap and ensure no clipping */
  .mvb-meta .br-icons {
    white-space: normal;
    overflow: visible;
  }
  .mvb-relname {
    padding-top: 4px;
    font-size: 11px;
  }

  /* ── tv search: 2-column grid on mobile ── */
  .tvb-filter-fields .as-input,
  .tvb-filter-fields .as-select {
    flex: 1 1 calc(50% - 3px);
  }

  /* ── tvb-card: tighter poster + meta layout for narrow screens ── */
  .tvb-date-full {
    display: none;
  }
  .tvb-date-ago {
    display: inline;
  }
  .tvb-title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .tvb-genre {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .tvb-thumb img,
  .tvb-no-cover {
    width: 100px;
  }
  .tvb-no-cover {
    min-height: 120px;
    font-size: 24px;
  }
  .tvb-content {
    padding: 8px 10px;
    gap: 1px;
  }
  .tvb-row2 {
    margin-top: 0;
  }
  .tvb-title {
    font-size: 13px;
  }
  .tvb-meta {
    flex-wrap: wrap;
    white-space: nowrap;
    row-gap: 0px;
  }
  .tvb-meta-spacer {
    flex-basis: 100%;
    height: 0;
  }
  .tvb-meta .br-icons {
    white-space: normal;
    overflow: visible;
  }
  .tvb-relname {
    padding-top: 0px;
    font-size: 11px;
  }

  /* ── tv cinema: 2-column grid + search form on mobile ── */
  .cmc-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .cmc-info {
    padding: 4px 6px 6px;
  }
  .cmc-title {
    font-size: 11px;
  }
  .cmc-sort-bar {
    flex-direction: column;
    align-items: flex-start;
  }
  .cmc-filter-fields .as-input,
  .cmc-filter-fields .as-select {
    flex: 1 1 calc(50% - 3px);
  }
  /* Overlay: hidden on touch — info surfaced in .cmc-mob-actions below */
  .cmc-overlay {
    display: none;
  }
  .cmc-mob-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding-top: 3px;
    flex-wrap: wrap;
  }
  .cmc-mob-badges {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
  }
  .cmc-mob-icons {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .cmc-mob-icon-btn {
    font-size: 13px;
    color: var(--c-primary);
    text-decoration: none;
  }
  .cmc-mob-icons .icon {
    width: 20px;
    height: 20px;
    background-size: contain;
  }
  .cmc-mob-badge {
    background: #e2e8f0;
    color: #475569;
    border: 1px solid #cbd5e1;
  }
  .cmc-res.cmc-mob-badge {
    background: #dbeafe;
    color: #1d4ed8;
    border-color: #bfdbfe;
  }

  /* ── Badges pinned top-right inside tap overlay ── */
  .cmc-mob-poster-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    position: absolute;
    top: 6px;
    right: 6px;
    justify-content: flex-end;
  }
  .cmc-mob-poster-badges .cmc-badge {
    font-size: 9px;
    padding: 2px 5px;
  }

  /* ── Mobile poster tap overlay ── */
  .cmc-mob-poster-overlay {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 5px;
    padding: 10px 8px;
    z-index: 10;
    cursor: default;
  }
  .cmc-mob-poster-overlay.cmc-mob-active {
    display: flex;
  }
  .cmc-mob-act-btn {
    display: block;
    width: 100%;
    padding: 6px 8px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border: none;
    cursor: pointer;
    box-sizing: border-box;
    line-height: 1.3;
  }
  .cmc-mob-act-dl {
    background: #2563eb;
    color: #fff;
  }
  .cmc-mob-act-cart {
    background: #0d9488;
    color: #fff;
  }
  .cmc-mob-act-sab {
    background: #0f766e;
    color: #fff;
  }

  /* ── moviescinema mobile poster overlay ── */
  .mcc-mob-poster-overlay {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 5px;
    padding: 10px 8px;
    z-index: 10;
    cursor: default;
  }
  .mcc-mob-poster-overlay.mcc-mob-active {
    display: flex;
  }
  .mcc-mob-poster-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    position: absolute;
    top: 6px;
    right: 6px;
    justify-content: flex-end;
  }
  .mcc-mob-poster-badges .cmc-badge {
    font-size: 9px;
    padding: 2px 5px;
  }
  .mcc-mob-act-btn {
    display: block;
    width: 100%;
    padding: 6px 8px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border: none;
    cursor: pointer;
    box-sizing: border-box;
    line-height: 1.3;
  }
  .mcc-mob-act-dl {
    background: #2563eb;
    color: #fff;
  }
  .mcc-mob-act-cart {
    background: #0d9488;
    color: #fff;
  }
  .mcc-mob-act-sab {
    background: #0f766e;
    color: #fff;
  }

  /* ── Shared marquee for release names (all cinema/cover pages) ── */
  @keyframes mar-marquee {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-100%);
    }
  }
  /* containers that hold mar-inner spans become flex on mobile */
  .cmc-relname,
  .mcc-relname,
  .mvb-relname,
  .tvb-relname {
    display: flex;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
  }
  .mar-inner {
    display: inline-block;
    flex-shrink: 0;
    animation: mar-marquee 14s linear infinite;
    animation-play-state: paused;
    padding-right: 52px;
  }
  /* second clone: always visible (needed for seamless loop) */
  .mar-inner + .mar-inner {
    display: inline-block;
  }
  /* play when card is touched */
  .mar-card.mar-active .mar-inner {
    animation-play-state: running;
  }

  /* ── Colorbox: fit inside viewport on narrow screens ── */
  #colorbox {
    width: calc(100vw - 24px) !important;
    left: 12px !important;
  }
  #cboxWrapper,
  #cboxContent,
  #cboxLoadedContent {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .report-actions-wrapper {
    padding: 12px;
  }
  .report-btn {
    padding: 9px 8px;
    font-size: 12px;
  }
}

@media (max-width: 767px) {
  /* ── Category nav: replace scrolling strip with topbar (cat + search toggles) ── */
  #menulink {
    display: none !important;
  }
  #menucontainer::after {
    display: none !important;
  }
  .mob-topbar {
    display: flex;
  }
  /* Slide search bar: zero out padding+border so no gap leaks at max-height:0 */
  #menusearchlink {
    max-height: 0;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
    border-top: none;
    transition:
      max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1),
      padding 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  }
  #menusearchlink.mob-search-open {
    max-height: 80px;
    padding-top: 7px;
    padding-bottom: 7px;
  }

  /* Search header: title left, NZBs/page pill right */
  .sr-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    padding: 4px 0 10px;
  }
  .sr-perpage-wrap {
    position: static;
    transform: none;
    flex-shrink: 0;
  }

  /* ── Basic search (sphinx): keyword + category share row 1, button + icon auto on row 2 ── */
  .sphinxsearchdiv.sr-input-group .sr-flex-inputs {
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
  }
  /* keyword grows to fill ~2/3 of row 1 */
  .sphinxsearchdiv.sr-input-group .sr-kw-input {
    flex: 2 1 100px;
    min-width: 0;
  }
  /* category select takes ~1/3 of row 1, auto width */
  .sphinxsearchdiv.sr-input-group select.br-filter-box {
    flex: 1 1 80px;
    min-width: 0;
  }
  /* language (only visible in advanced) goes full row below */
  .sphinxsearchdiv.sr-input-group .ssearchcat_form_cls {
    flex: 1 1 100%;
    display: flex;
    min-width: 0;
  }
  .sphinxsearchdiv.sr-input-group .ssearchcat_form_cls select {
    flex: 1;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  /* Search button auto width so info icon sits next to it */
  .sphinxsearchdiv.sr-input-group .sr-submit-btn {
    flex: 0 0 auto;
  }

  /* ── Advanced search (SQL): 3 selects per row, Search button auto so icon sits next to it ── */
  .sqlsearchdiv.sr-input-group .sr-flex-inputs {
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
  }
  .sqlsearchdiv.sr-input-group .sr-flex-inputs select {
    flex: 1 1 calc(33.33% - 4px);
    min-width: 0;
    box-sizing: border-box;
  }
  /* button auto — sits next to icon on the last row */
  .sqlsearchdiv.sr-input-group .sr-submit-btn {
    flex: 0 0 auto;
  }

  /* ── Comment search: input + select share a row (global flex sizes already fit), button centered ── */
  .src-fields .src-btn {
    margin: 0 auto;
    display: block;
  }

  .mvb-ri small {
    display: none !important;
  }
}

@media (max-width: 700px) {
  #page {
    padding: 12px 12px 0;
  }
  .statusbar-nzb-div {
    padding: 0 12px;
    height: 56px;
  }

  .hdr-logo img {
    height: 40px;
  }

  #statusbar .nav-btn-login,
  #statusbar .nav-btn-register {
    padding: 8px 14px;
    font-size: 13px;
  }

  .login-panel {
    flex-direction: column;
    min-height: auto;
  }
  .login-form-col {
    flex: none;
    width: 100%;
    padding: 28px 20px;
  }
  .login-deco-col {
    display: none;
  }

  .contentborder {
    padding: 20px 16px;
    margin-bottom: 5px;
  }
  .footer {
    padding: 16px;
  }

  .sf-inner {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 16px 14px 14px;
  }
  .sf-brand {
    padding: 0;
    border-left: none;
  }
  .sf-col,
  .sf-trust {
    padding: 10px 0 0 0;
    border-left: none;
    border-top: 1px solid var(--c-border);
  }
  .site-footer {
    margin-top: 10px;
  }
  .br-cmts-popup {
    display: none !important;
  }
  .sf-col .sf-links {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-bottom: 10px;
  }
  .sf-col .sf-links li {
    white-space: nowrap;
  }
  .sf-col--mobile-hide {
    display: none;
  }
  .sf-col--mobile-hide + .sf-col {
    border: 0 !important;
    padding-top: 0 !important;
  }
}

@media (max-width: 700px) {
  .api-row-2col {
    grid-template-columns: 1fr;
  }
  .api-key-hint {
    display: none;
  }
}

@media (max-width: 700px) {
  .rss-cats {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .vsl-toolbar {
    padding: 10px;
  }
  .vsl-controls {
    flex-direction: column;
    align-items: flex-start;
  }
  .vsl-search-input {
    width: 130px;
  }
  .vsl-item {
    gap: 10px !important;
  }
  .vsl-item .image_details {
    flex: 0 0 56px !important;
  }
  .vsl-item .image_details img.shadow {
    width: 56px !important;
    height: 78px !important;
  }
}

@media (max-width: 767px) {
  .contact-bottom {
    flex-direction: column;
    align-items: stretch;
  }
  .reg-grid {
    grid-template-columns: 1fr;
  }
  .reg-bottom {
    grid-template-columns: 1fr;
  }
  .reg-bottom .btn-login {
    width: 100%;
    margin-bottom: 14px;
  }
  .ann-card {
    padding: 13px 15px;
    gap: 11px;
  }
  .ann-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
  }
  .ann-card-icon i {
    font-size: 15px;
  }
  .msa-layout {
    flex-direction: column;
  }
  .msa-cover {
    width: 140px;
  }
  .msa-section {
    flex-direction: column;
    align-items: flex-start;
  }
  .msa-section-label {
    flex: none;
  }
  .mme-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .mma-layout {
    flex-direction: column;
  }
  .mma-cover {
    width: 140px;
  }
  .mma-section {
    flex-direction: column;
    align-items: flex-start;
  }
  .mma-section-label {
    flex: none;
  }
  .frp-post {
    flex-direction: column;
  }
  .frp-user {
    width: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    border-right: none;
    border-bottom: 1px solid var(--c-border);
    justify-content: flex-start;
    text-align: left;
    padding: 8px 12px;
    gap: 8px;
  }
  .frp-avatar-img,
  .frp-avatar-placeholder {
    width: 34px;
    height: 34px;
    margin-bottom: 0;
  }
  .frp-avatar-placeholder {
    font-size: 14px;
  }
  .frp-username {
    font-size: 11.5px;
    max-width: 120px;
  }
  .frp-role-badge {
    font-size: 9px;
    padding: 1px 6px;
  }
  .frp-post-date {
    font-size: 9.5px;
  }
  .frp-post-actions {
    gap: 4px;
  }
  .mvb-pager-bar {
    flex-direction: column;
    align-items: flex-start;
  }
  .mvb-pager-right {
    margin-left: 0;
  }
  .tvb-pager-right,
  .mvb-pager-right {
    display: none;
  }
  .cmc-lbl-full {
    display: none;
  }
  .cmc-lbl-short {
    display: inline;
  }
  #comment_search_frm .as-fields {
    justify-content: center;
  }
  .nav-cart-mob {
    position: relative;
  }
  .nav-cart-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 14px;
    height: 14px;
    font-size: 9px;
    padding: 0 3px;
    pointer-events: none;
  }
  .br-browse-controls .br-view-toggles .br-view-label {
    display: none;
  }
  .br-topd-rest {
    display: none;
  }
  .half-row.br-browse-controls {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-start;
  }

  .br-filter-box,
  .br-view-btn {
    padding: 2px 4px;
  }
  .cp-mid-row { grid-template-columns: 1fr; gap: 12px; }
  .cp-sc-card { padding: 14px; }
  .cp-wa-grid { grid-template-columns: 1fr 1fr; }
  .cp-wrap { padding-left: 8px; padding-right: 8px; }
  .cp-hero { flex-direction: column; align-items: flex-start; padding: 16px 4px 20px; gap: 10px; }
  .cp-hero-icon { width: 48px; height: 48px; font-size: 22px; }
  .cp-hero-title { font-size: 20px; }
  /* Same desktop typography/colours — just tighter padding and gaps
     since cards are stacked full-width instead of side by side. */
  .cp-tiers { margin-bottom: 16px; }
  .cp-tiers h3 { margin-bottom: 8px; }
  .cp-tier-row { flex-direction: column; align-items: center; gap: 10px; padding-top: 0; }
  .cp-tier-row .cp-tier-btn:has(.cp-tier-badge) { margin-top: 10px; }
  .cp-tier-btn { width: 100%; max-width: 340px; }
  .cp-tier-btn { padding: 16px 16px 14px; }
  .cp-tier-meta { padding: 4px 0; }
  .cp-tier-monthly { margin: 0 0 6px; }
  .donate-tier-btn { padding: 10px 0; }
  .cp-box { padding: 14px; }

  /* ═══════════════════════════════════════════════════════════
     Gift card page — mobile.
     ═══════════════════════════════════════════════════════════ */
  .gc-wrap { padding-left: 8px; padding-right: 8px; }
  .gc-hero { flex-direction: column; align-items: flex-start; padding: 16px 4px; gap: 10px; }
  .gc-hero-icon { width: 48px; height: 48px; }
  .gc-hero-amazon { background-size: auto 30px; }
  .gc-hero-title { font-size: 20px; }
  .gc-hero-sub { font-size: 13px; }
  .gc-steps { grid-template-columns: 1fr; gap: 8px; margin-bottom: 12px; }
  .gc-step { padding: 13px 12px; }
  .gc-step-title { margin-bottom: 5px; }
  .gc-step p { margin-bottom: 10px; }
  .gc-email-box,
  .gc-ref-box {
    flex-wrap: wrap;
  }
  .gc-email-addr,
  .gc-ref-code {
    flex: 1 1 100%;
    min-width: 0;
    word-break: break-all;
  }
  .gc-copy-btn { width: 100%; }
  .gc-details { grid-template-columns: 1fr; gap: 12px; margin-bottom: 12px; }
  .gc-amounts,
  .gc-info-notes {
    padding: 14px 16px;
  }
  .gc-amount-grid { gap: 6px; }
  .gc-amount-item { padding: 8px 4px; }
  .gc-amount-tier { font-size: 10px; }
  .gc-amount-price { font-size: 17px; }
  .gc-amount-period,
  .gc-amount-mo {
    font-size: 10px;
  }
  .gc-notices { margin-bottom: 18px; }
  .gc-notice { padding: 12px 14px; gap: 10px; }
  .gc-notice p { font-size: 12.5px; }

  /* ═══════════════════════════════════════════════════════════
     Crypto payment page — mobile. Same package-card pattern
     already fixed on cardpayment: stack, centre, cap width.
     ═══════════════════════════════════════════════════════════ */
  .cry-wrap { padding-left: 8px; padding-right: 8px; }
  .cry-hero { flex-direction: column; align-items: flex-start; padding: 16px 4px 20px; gap: 10px; }
  .cry-hero-icon { width: 48px; height: 48px; font-size: 22px; }
  .cry-hero-title { font-size: 20px; }
  .cry-tiers { margin-bottom: 14px; }
  .cry-tiers h3 { margin-bottom: 8px; }
  .cry-tier-row {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .cry-tier-btn {
    width: 100%;
    max-width: 340px;
    margin-top: 0 !important;
  }
  .cry-tier-row .cry-tier-btn:has(.cry-tier-badge) {
    margin-top: 10px !important;
  }
  .cry-layout { grid-template-columns: 1fr; gap: 12px; margin-bottom: 4px; }
  .cry-form-box,
  .cry-info-box {
    padding: 14px;
  }
  .cry-form { gap: 12px; }
  .cry-accepted { margin-top: 12px; padding-top: 10px; }
  .cry-coins { gap: 6px; }
  .cry-coins span { font-size: 11.5px; padding: 4px 8px; }

  /* ═══════════════════════════════════════════════════════════
     Forum category page (forum_cat.tpl) — mobile.
     Tables are fixed-width (table-layout:fixed + colgroup px widths)
     so they'd force horizontal scroll — replaced with stacked cards.
     ═══════════════════════════════════════════════════════════ */
  .frc-page-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .frc-header-right {
    justify-content: stretch;
  }
  .frc-search-form {
    width: 100%;
  }
  .frc-search-input {
    width: 100%;
    flex: 1;
    min-width: 0;
  }
  .frc-table {
    display: none;
  }
  .frc-post-cards,
  .frc-forum-cards {
    display: block;
  }
  .frc-card {
    margin-bottom: 14px;
  }
  .frc-forum-cards-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--c-primary);
    padding: 9px 12px;
    border-bottom: 1px solid var(--c-border);
    background: rgba(37, 99, 235, 0.04);
  }
  .frc-forum-cards-title i {
    margin-right: 6px;
  }

  /* Recent posts cards */
  .frc-post-card {
    display: block;
    padding: 8px 12px;
    border-bottom: 1px solid var(--c-border);
  }
  .frc-post-card:last-child {
    border-bottom: none;
  }
  .frc-post-card-title {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--c-text);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .frc-post-card-preview {
    display: block;
    font-size: 11.5px;
    color: var(--c-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
  }
  .frc-post-card-meta {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 10.5px;
  }
  .frc-post-card-meta [class*="frc-role-"] {
    flex-shrink: 0;
  }
  .frc-post-card-chip {
    font-size: 10px;
    color: var(--c-text-muted);
    background: var(--c-subnav);
    border: 1px solid var(--c-border);
    padding: 1px 6px;
    border-radius: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  div.frc-post-card.hidelatestpost {
    display: none;
  }

  /* Forum/category rows as cards */
  .frc-forum-card {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 7px 12px;
    border-bottom: 1px solid var(--c-border);
  }
  .frc-forum-card:last-child {
    border-bottom: none;
  }
  .frc-forum-card-icon {
    flex-shrink: 0;
    margin-top: 1px;
    width: 28px !important;
    height: 28px !important;
    font-size: 12px !important;
  }
  .frc-forum-card-body {
    min-width: 0;
    flex: 1;
  }
  .frc-forum-card-name {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--c-text);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .frc-forum-card-tag {
    display: block;
    font-size: 10.5px;
    color: var(--c-text-muted);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .frc-forum-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 3px;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--c-text);
  }
  .frc-forum-card-last {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-top: 3px;
    font-size: 10px;
    color: var(--c-text-muted);
  }
  .frc-forum-card-last .frc-last-date {
    font-weight: 500;
    color: var(--c-text);
  }
  .frc-last-label {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--c-text-muted);
    font-size: 9.5px;
  }

  /* ═══════════════════════════════════════════════════════════
     Forum search page (searchforum.tpl) — mobile.
     Same fixed-width table problem, same stacked-card fix.
     ═══════════════════════════════════════════════════════════ */
  .srf-page-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .srf-header-right {
    justify-content: stretch;
  }
  .srf-search-form {
    width: 100%;
  }
  .srf-search-input {
    width: 100%;
    flex: 1;
    min-width: 0;
  }
  .srf-table {
    display: none;
  }
  .srf-cards {
    display: block;
  }
  .srf-card-row {
    padding: 8px 12px;
    border-bottom: 1px solid var(--c-border);
  }
  .srf-card-row:last-child {
    border-bottom: none;
  }
  .srf-card-title {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--c-text);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .srf-card-meta {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    margin-top: 4px;
  }
  .srf-card-chip {
    font-size: 10px;
    color: var(--c-text-muted);
    background: var(--c-subnav);
    border: 1px solid var(--c-border);
    padding: 1px 6px;
    border-radius: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .srf-card-last {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 10px;
  }
  .srf-card-last .srf-last-date {
    font-size: 10.5px;
    font-weight: 500;
    color: var(--c-text);
    text-decoration: none;
  }
  .srf-card-last .srf-last-by {
    color: var(--c-text-muted);
  }

  /* ═══════════════════════════════════════════════════════════
     Forum topic page (forum_topic.tpl) — mobile.
     Same fixed-width table problem, same stacked-card fix.
     ═══════════════════════════════════════════════════════════ */
  .frt-page-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .frt-header-right {
    flex-wrap: wrap;
  }
  .frp-reply-btn {
    flex-shrink: 0;
  }
  .frt-table {
    display: none;
  }
  .frt-cards {
    display: block;
  }
  .frt-card-row {
    padding: 9px 12px;
    border-bottom: 1px solid var(--c-border);
  }
  .frt-card-row:last-child {
    border-bottom: none;
  }
  .frt-card-title {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--c-text);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .frt-card-row .frt-admin-links {
    display: flex;
    gap: 8px;
    margin-top: 4px;
  }
  .frt-card-meta {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    margin-top: 5px;
  }
  .frt-card-chip {
    font-size: 10px;
    color: var(--c-text-muted);
    background: var(--c-subnav);
    border: 1px solid var(--c-border);
    padding: 1px 6px;
    border-radius: 20px;
    white-space: nowrap;
  }
  .frt-card-last {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-top: 5px;
    font-size: 10px;
  }
  .frt-card-last .frt-last-date {
    font-size: 10.5px;
    font-weight: 500;
    color: var(--c-text);
  }
  .frt-card-last .frt-last-by {
    color: var(--c-text-muted);
  }
  .frt-card-sub {
    margin-top: 6px;
  }
  .frt-card-sub .frt-sub-btn {
    font-size: 10.5px;
    padding: 4px 10px;
  }

  /* Payment thank-you pages — mobile */
  .ty-card {
    padding: 30px 18px;
    border-radius: 16px;
  }
  .ty-txn {
    padding: 8px 16px;
  }
  .ty-head {
    gap: 10px;
    margin-bottom: 8px;
  }
  .ty-icon {
    width: 36px;
    height: 36px;
    font-size: 17px;
  }
  .ty-title {
    font-size: 19px;
  }
  .ty-sub {
    font-size: 13px;
    margin-bottom: 18px;
  }
  .ty-txn,
  .ty-notice {
    padding: 10px 12px;
    margin-bottom: 16px;
  }
  .ty-txn-value {
    font-size: 12.5px;
  }
  .ty-steps {
    margin-bottom: 16px;
  }
  .ty-help {
    margin-bottom: 20px;
  }
  .ty-btn {
    width: 100%;
    justify-content: center;
    padding: 11px 20px;
  }

  /* ═══════════════════════════════════════════════════════════
     viewmoviefull: hero — hide backdrop, poster full-width, title below
     ═══════════════════════════════════════════════════════════ */
  .vmf-backdrop {
    display: none;
  }
  .vmf-hero-has-backdrop .vmf-hero-bottom {
    margin-top: 0;
  }
  .vmf-hero-bottom {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0;
  }
  .vmf-poster,
  .vmf-poster-tv {
    width: 100%;
    max-width: 260px;
    margin-left: 0;
  }
  .vmf-poster img,
  .vmf-poster-tv img {
    width: 100%;
    max-height: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    margin-bottom: 8px;
  }
  .vmf-hero-title {
    width: 100%;
    margin-bottom: 0;
    text-align: center;
  }
  .vmf-hero-title h1 {
    font-size: 18px;
  }
  .vmf-tagline {
    text-align: center;
  }
  .vmf-imdb-votes {
    display: none;
  }

  /* ── viewseries: info grid stacks, external-link row is more compact ── */
  .vmf-info-grid-series {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .vmf-info-col-box {
    margin-top: 0;
    padding: 20px 12px 12px;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 8px;
  }
  .vmf-info-col-box .vmf-info-row {
    font-size: 11.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .vmf-info-col-title {
    display: inline-block;
    width: auto;
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 16px;
    margin: 0;
    white-space: nowrap;
  }
  .vmf-info-rating {
    margin-right: 0;
  }
  .vmf-tv-meta-row {
    gap: 8px;
  }
  .tv-links {
    gap: 6px;
  }
  .tv-links .movie-link-btn {
    padding: 4px 9px;
    font-size: 11.5px;
  }
  .vmf-filter-bar {
    gap: 5px;
    padding: 6px 0 8px;
  }
  .vmf-filter-link {
    font-size: 11.5px;
    padding: 3px 7px;
  }
  .vs-season-tabs {
    gap: 4px;
    margin: 8px 0 10px;
  }
  .vs-season-tab {
    padding: 3px 10px;
    font-size: 11px;
  }

  /* ── viewseries: mobile release cards (season + episode headers) ──
     .vs-mobile-cards combines with .br-mobile-cards, which already
     provides display/background/border/radius on mobile. ── */
  .vs-season-hdr-m {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 12px;
    background: linear-gradient(to right, rgba(37, 99, 235, 0.07), transparent);
    border-bottom: 1px solid var(--c-border);
    border-left: 3px solid var(--c-primary);
  }
  .vs-season-hdr-m .vs-season-ops {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex: 1 1 100%;
    min-width: 0;
    gap: 5px;
  }
  .vs-season-hdr-m .vs-season-ops small {
    font-size: 10px;
    color: var(--c-secondary);
  }
  .vs-season-hdr-m .vs-season-ops input[type="button"] {
    padding: 4px 8px;
    font-size: 10.5px;
  }
  .vs-episode-info-m {
    padding: 6px 12px;
    background: var(--c-subnav);
    border-bottom: 1px solid var(--c-border);
    line-height: 1.5;
  }
  .vs-episode-info-m .vs-ep-summary {
    display: block;
    margin-top: 2px;
  }

  /* ═══════════════════════════════════════════════════════════
     Series List page (viewserieslist.tpl) — mobile.
     Scoped through .viewseriespage (an existing, previously-unused
     wrapper class already in the template) so the shared .ms-header/
     .ms-nav classes used on other pages are never touched.
     ═══════════════════════════════════════════════════════════ */
  /* This page's list wrapper coincidentally reuses id="browsetable"
     (unrelated to the release tables that id is hidden for elsewhere) —
     re-show it here specifically, since there's no card view to swap in.
     .viewseriespage is on a sibling div (.page_head), not an ancestor of
     #browsetable, so it can't be used as a descendant-selector scope here —
     use :has() to scope through #content containing this page's unique
     .vsl-pager-row instead. */
  #content:has(.vsl-pager-row) #browsetable {
    display: block !important;
  }
  .viewseriespage .ms-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .viewseriespage .ms-nav {
    width: 100%;
  }
  .viewseriespage .ms-nav-link {
    flex: 1;
    text-align: center;
    padding: 6px 6px;
    font-size: 11.5px;
  }

  /* My Shows page (myshows.tpl) — mobile.
     Same nav-stretch treatment as the Series List page above, scoped
     through a new .myshowspage wrapper so other pages sharing the
     .ms-header/.ms-nav classes (browse, forum, mymovies, etc.) are
     never touched. */
  .myshowspage .ms-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .myshowspage .ms-nav {
    width: 100%;
  }
  .myshowspage .ms-nav-link {
    flex: 1;
    text-align: center;
    padding: 6px 6px;
    font-size: 11.5px;
  }

  /* My Shows: Manage / Latest / Calendar sub-pages — mobile.
     Same nav-stretch treatment, scoped through each page's own
     .ms-header-manage / .ms-header-browse / .ms-header-cal marker
     class (the latter already existed in browse.tpl; added the other
     two directly on this page's own header — no other template shares
     these classes, so nothing else is affected). */
  .ms-header-manage,
  .ms-header-browse,
  .ms-header-cal,
  .ms-header-mymovies {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .ms-header-manage .ms-nav,
  .ms-header-browse .ms-nav,
  .ms-header-cal .ms-nav,
  .ms-header-mymovies .ms-nav {
    width: 100%;
  }
  .ms-header-manage .ms-nav-link,
  .ms-header-browse .ms-nav-link,
  .ms-header-cal .ms-nav-link,
  .ms-header-mymovies .ms-nav-link {
    flex: 1;
    text-align: center;
    padding: 6px 6px;
    font-size: 11.5px;
  }

  /* My Movies search page (mymovies.tpl) — mobile: search form.
     Fixed width:280px input + width:fit-content form doesn't shrink for
     a narrow viewport and overflows. */
  .mml-search-form {
    width: 100%;
    margin: 16px 0;
    flex-wrap: wrap;
  }
  .mml-search-input {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
  }

  /* My Shows Manage page (myshows-manage.tpl) — mobile: the categories/
     quality grid has too many columns to ever fit a phone width legibly —
     scroll it horizontally instead of squeezing table-layout:fixed columns
     down to unreadable slivers. */
  .mea-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .mea-table {
    table-layout: auto;
    min-width: 640px;
  }
  .mea-th-show,
  .mea-td-show {
    position: sticky;
    left: 0;
    z-index: 2;
    width: 150px;
    min-width: 150px;
    max-width: 150px;
    background: var(--c-surface);
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.08);
  }
  .mea-row.mea-alt .mea-td-show {
    background: var(--c-subnav);
  }
  .mea-show-link {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  /* .browse-row-myshows has padding:0 for the desktop single-row layout —
     once the header above it stacks to multiple rows on mobile, that
     leaves no breathing room before the filter row. */
  .ms-header-browse ~ .browse-row-myshows {
    margin-top: 12px;
  }

  .vsl-toolbar {
    padding: 8px 10px;
    gap: 8px;
    margin: 10px 0 6px;
  }
  .vsl-jump-label {
    font-size: 9.5px;
    margin-right: 4px;
  }
  .vsl-pill {
    padding: 2px 6px;
    font-size: 11px;
  }
  .vsl-country,
  .vsl-country form {
    width: 100% !important;
  }
  .vsl-select {
    width: 100%;
  }

  .vsl-pager-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .vsl-search-form {
    margin: 0 !important;
    width: 100% !important;
    flex-wrap: wrap;
  }
  .vsl-search-input {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
  }

  .vsl-item {
    gap: 10px !important;
    padding: 10px 0 !important;
  }
  .vsl-item .image_details {
    flex-basis: 56px !important;
  }
  .vsl-item .image_details img.shadow {
    width: 56px !important;
    height: 78px !important;
  }
  .vsl-item .contents > a.title {
    font-size: 13px !important;
  }
  .vsl-item .contents .description {
    font-size: 11.5px !important;
    margin: 3px 0 6px !important;
  }
  .vsl-item .contents .actions {
    gap: 0px 12px !important;
  }
  .vsl-item .contents .actions .country_dtl,
  .vsl-item .contents .actions .genre {
    font-size: 11px !important;
  }
  .vsl-item .contents .watch_list {
    font-size: 10.5px !important;
  }

  /* Profile page (profile.tpl) — mobile: Account Info table.
     .profile-div table.input th uses white-space:nowrap with only
     width:38% — long labels ("Api Key Changed", "Password Changed") can't
     wrap, so the browser expands the whole table (and the page) wider
     than the viewport to fit them. Just let the label wrap — layout
     stays the same two-column row, nothing else changes. */
  .profile-div table.input th {
    white-space: normal;
  }

  /* Profile page — avatar card. A 1024px rule switches this to a row
     (avatar + button + hint side by side) for tablets, but on a phone the
     fixed 100px avatar plus the button and hint text no longer fit in one
     row and overflow — go back to the original stacked/centered layout. */
  .prof-avatar-card {
    flex-direction: column;
    justify-content: center;
  }

  /* Upcoming Movies page (upcoming.tpl) — mobile. */
  .up-nav {
    padding: 6px 10px;
  }
  .up-source-label {
    font-size: 9.5px;
    width: 68px;
    padding-right: 6px;
  }
  .up-list-link {
    font-size: 10.5px;
    padding: 2px 6px;
  }
  .up-card {
    gap: 10px;
    padding: 8px 10px;
  }
  .up-poster,
  .up-poster img {
    width: 50px;
  }
  .up-title-link {
    font-size: 13px;
  }
  .up-synopsis {
    font-size: 11px;
    margin-bottom: 4px;
  }
  .up-meta {
    gap: 3px 12px;
    margin-bottom: 6px;
  }
  .up-actions {
    gap: 4px;
  }
  .up-btn {
    font-size: 10.5px;
    padding: 3px 8px;
  }

  /* Trending page (trending.tpl) — mobile.
     Grid view was fixed at 8 columns (calc(12.5% - 7px)) — far too cramped
     on a phone; list view was a fixed 2-column grid with nowrap+ellipsis
     text, which truncated most titles down to a handful of characters. */
  .tr-cover-item {
    flex: 0 0 calc(50% - 4px);
  }
  .tr-list-grid {
    grid-template-columns: 1fr;
  }
  .tr-list-item:nth-child(odd) {
    border-right: none;
  }
  .tr-list-item:nth-last-child(-n + 2):not(:nth-child(odd) ~ *) {
    border-bottom: 1px solid var(--c-border);
  }
  .tr-list-item:last-child {
    border-bottom: none;
  }
  .tr-list-item a {
    font-size: 13.5px;
    white-space: normal;
  }

  /* Release Edit page (release-edit.tpl) — mobile: label stacks above field */
  .rle-field > label:first-child {
    width: 100%;
    flex-shrink: 1;
  }
  .rle-field > input,
  .rle-field > select {
    flex-basis: 100%;
  }

  /* TV Calendar page (viewcalendar.tpl) — mobile: show only today, as a
     stacked list of cards, with the existing prev/next day arrows (the
     links already step by single day via ?date=, no JS change needed).
     Scoped through a new .viewcalendarpage wrapper since .cal-week/.cal-day
     are shared class names duplicated across other calendar templates
     (calendar2.tpl, viewcalendarcov.tpl, viewmonthlycalendar.tpl) that
     must stay untouched. */
  .viewcalendarpage .cal-popular {
    display: none;
  }
  .viewcalendarpage .cal-week {
    display: block;
  }
  .viewcalendarpage .cal-day {
    display: none;
  }
  .viewcalendarpage .cal-day-center {
    display: block;
    border: none;
    min-height: 0;
  }
  .viewcalendarpage .cal-day-center .cal-day-head {
    border-radius: 8px 8px 0 0;
    padding: 12px 14px;
  }
  .viewcalendarpage .cal-day-center .cal-day-name {
    font-size: 12.5px;
  }
  .viewcalendarpage .cal-day-center .cal-day-date {
    font-size: 20px;
  }
  .viewcalendarpage .cal-day-center .cal-entry {
    text-align: left;
    padding: 12px 14px;
    margin: 0 0 8px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 8px;
  }
  .viewcalendarpage .cal-day-center .cal-entry:last-child {
    margin-bottom: 0;
  }
  .viewcalendarpage .cal-day-center .cal-entry-time {
    display: inline-block;
    background: var(--c-primary-muted);
    padding: 2px 8px;
    border-radius: 20px;
    margin-bottom: 6px;
  }
  .viewcalendarpage .cal-day-center .cal-entry-show {
    font-size: 14px;
    white-space: normal;
  }
  .viewcalendarpage .cal-day-center .cal-entry-ep {
    white-space: normal;
    margin: 2px 0 4px;
  }
  .viewcalendarpage .cal-month-nav {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .viewcalendarpage .cal-jump-form {
    position: static;
    transform: none;
    flex-basis: 100%;
    justify-content: center;
  }
  .viewcalendarpage .cal-jump-input {
    flex: 1;
    max-width: 160px;
  }

  /* My Shows Calendar page (calendar2.tpl) — mobile: same treatment as
     viewcalendar.tpl above, copied and rescoped under .calendar2page
     since it's a separate template with its own duplicated markup (no
     "Popular Today" section here, so nothing to hide for that). */
  .calendar2page .cal-week {
    display: block;
  }
  .calendar2page .cal-day {
    display: none;
  }
  .calendar2page .cal-day-center {
    display: block;
    border: none;
    min-height: 0;
  }
  .calendar2page .cal-day-center .cal-day-head {
    border-radius: 8px 8px 0 0;
    padding: 12px 14px;
  }
  .calendar2page .cal-day-center .cal-day-name {
    font-size: 12.5px;
  }
  .calendar2page .cal-day-center .cal-day-date {
    font-size: 20px;
  }
  .calendar2page .cal-day-center .cal-entry {
    text-align: left;
    padding: 12px 14px;
    margin: 0 0 8px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 8px;
  }
  .calendar2page .cal-day-center .cal-entry:last-child {
    margin-bottom: 0;
  }
  .calendar2page .cal-day-center .cal-entry-time {
    display: inline-block;
    background: var(--c-primary-muted);
    padding: 2px 8px;
    border-radius: 20px;
    margin-bottom: 6px;
  }
  .calendar2page .cal-day-center .cal-entry-show {
    font-size: 14px;
    white-space: normal;
  }
  .calendar2page .cal-day-center .cal-entry-ep {
    white-space: normal;
    margin: 2px 0 4px;
  }
  .calendar2page .cal-month-nav {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .calendar2page .cal-jump-form {
    position: static;
    transform: none;
    flex-basis: 100%;
    justify-content: center;
  }
  .calendar2page .cal-jump-input {
    flex: 1;
    max-width: 160px;
  }

  /* TV Calendar Cover View page (viewcalendarcov.tpl) — mobile: same "only
     today matters" treatment as viewcalendar.tpl/calendar2.tpl above —
     hide the yesterday/tomorrow columns, show today full-width as a
     stacked list of cards. Scoped through a new .calendarcovpage wrapper
     since .cal-cov-* are this template's own class names, not shared with
     the other calendar pages. */
  .calendarcovpage .cal-cov-grid {
    display: block;
  }
  .calendarcovpage .cal-cov-col {
    display: none;
  }
  .calendarcovpage .cal-cov-today {
    display: block;
    border: none;
    overflow: visible;
  }
  .calendarcovpage .cal-cov-today .cal-day-head {
    border-radius: 8px 8px 0 0;
    padding: 12px 14px;
  }
  .calendarcovpage .cal-cov-today .cal-day-date {
    font-size: 20px;
  }
  .calendarcovpage .cal-cov-entry {
    padding: 12px 14px;
    margin: 0 0 8px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 8px;
  }
  .calendarcovpage .cal-cov-entry:last-child {
    margin-bottom: 0;
  }
  .calendarcovpage .cal-cov-entry img {
    width: 60px;
  }
  .calendarcovpage .cal-entry-show {
    font-size: 14px;
    white-space: normal;
  }
  .calendarcovpage .cal-entry-ep {
    white-space: normal;
    margin-top: 2px;
  }
  .calendarcovpage .cal-date-nav {
    padding-bottom: 4px;
    margin-bottom: 12px;
  }
  .calendarcovpage .cal-date-pill {
    padding: 4px 8px;
    font-size: 11px;
  }

  /* "Monthly" nav button (viewcalendar.tpl / viewcalendarcov.tpl) — hidden
     on mobile, the monthly grid view it links to isn't a good fit there. */
  .cal-nav-btn-monthly {
    display: none;
  }

  /* TV Calendar Monthly page (viewmonthlycalendar.tpl) — mobile: same
     "only today matters" treatment as the other calendar pages above — a
     7x4 month grid can't work on a phone at all, so hide everything except
     today's cell, shown full-width as a stacked list of cards. :has() drops
     whole empty weeks, not just the individual cells inside them. Scoped
     through a new .viewmonthlycalendarpage wrapper since .cal-month-* are
     this template's own class names. */
  .viewmonthlycalendarpage .cal-popular {
    display: none;
  }
  .viewmonthlycalendarpage .cal-month-headers {
    display: none;
  }
  .viewmonthlycalendarpage .cal-month-row:not(:has(.cal-month-today)) {
    display: none;
  }
  .viewmonthlycalendarpage .cal-month-row {
    display: block;
    border-bottom: none;
  }
  .viewmonthlycalendarpage .cal-month-cell {
    display: none;
  }
  .cal-month-grid {
    border: 0;
  }
  .viewmonthlycalendarpage .cal-month-today {
    display: block;
    border: none;
    min-height: 0;
  }
  .viewmonthlycalendarpage .cal-month-cell-head {
    border-radius: 8px 8px 0 0;
    padding: 12px 14px;
    font-size: 15px;
  }
  .viewmonthlycalendarpage .cal-month-cell .cal-entry {
    text-align: left;
    padding: 12px 14px;
    margin: 0 0 8px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 8px;
  }
  .viewmonthlycalendarpage .cal-month-cell .cal-entry:last-of-type {
    margin-bottom: 0;
  }
  .viewmonthlycalendarpage .cal-entry-time {
    display: inline-block;
    background: var(--c-primary-muted);
    padding: 2px 8px;
    border-radius: 20px;
    margin-bottom: 6px;
  }
  .viewmonthlycalendarpage .cal-entry-show {
    font-size: 14px;
    white-space: normal;
  }
  .viewmonthlycalendarpage .cal-entry-ep {
    white-space: normal;
    margin: 2px 0 4px;
  }

  /* Details page (viewnzb.tpl) — mobile: hide the tab strip and every
     panel except Comments (#tabs-7) — its existing table + "Add Comment"
     form are shown as-is (just made responsive below) rather than
     duplicated, since the add-comment form is referenced by name
     (document.frmcomment) elsewhere on the page and a second copy with
     the same name would make that reference ambiguous. #tabs alone isn't
     unique (admin/poll-result.tpl also uses it) — the compound with
     .vn-tabs keeps this scoped to only this page. */
  #tabs.vn-tabs > ul {
    display: none;
  }
  /* jQuery UI Tabs hides every panel except the initially-active one
     (#tabs-1) via its own inline/class styling — plain (non-!important)
     rules here can't win against that, and #tabs-7 needs to be forced
     visible too since jQuery hides it by default as a non-active panel. */
  #tabs.vn-tabs #tabs-1,
  #tabs.vn-tabs #tabs-2,
  #tabs.vn-tabs #tabs-3,
  #tabs.vn-tabs #tabs-4,
  #tabs.vn-tabs #tabs-8 {
    display: none !important;
  }
  #tabs.vn-tabs {
    border: none;
    background: transparent;
    padding: 0;
  }
  #tabs-7 {
    display: block !important;
    padding: 12px 0 0 !important;
  }
  /* Raw comment table replaced by .vn-mobile-comments cards below. */
  #tabs-7 .innerdata-wrap {
    display: none;
  }
  #tabs-7 form[name="frmcomment"] textarea {
    width: 100%;
    box-sizing: border-box;
  }
  .vn-mobile-comments {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
  }
  .vn-comment-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    box-shadow: var(--sh-sm);
    padding: 10px 12px;
  }
  .vn-comment-head {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 6px;
  }
  .vn-comment-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--c-border);
  }
  .vn-comment-user {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 5px;
  }
  .vn-comment-username {
    font-weight: 600;
    font-size: 12.5px;
    color: var(--c-link);
    text-decoration: none;
  }
  .vn-comment-date {
    font-size: 10px;
    color: var(--c-muted);
    text-align: right;
    line-height: 1.3;
    flex-shrink: 0;
  }
  .vn-comment-text {
    font-size: 12.5px;
    color: var(--c-body);
    line-height: 1.45;
    word-break: break-word;
  }
  .vn-comment-actions {
    display: flex;
    gap: 12px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--c-border);
  }
  .vn-comment-actions .comment-action-btn {
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .vn-comment-actions .comment-action-delete {
    color: var(--c-danger) !important;
  }
  .vn-mobile-header {
    display: block;
    text-align: center;
    padding: 4px 0 16px;
  }
  .vn-mobile-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--c-heading);
    line-height: 1.4;
    margin: 0 0 14px;
    word-break: break-word;
  }
  .vn-mobile-poster img {
    max-width: 280px;
    border-radius: 10px;
    box-shadow: var(--sh-md);
    display: block;
    margin: 0 auto;
  }
  .vn-mobile-info {
    text-align: left;
    margin-top: 16px;
  }
  .vn-mobile-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    box-shadow: var(--sh-sm);
    padding: 14px 16px;
    margin-bottom: 12px;
    text-align: left;
  }
  .vn-mobile-card.btn-downloads {
    justify-content: center;
  }
  .vn-mobile-subtitle {
    font-size: 13px;
    font-weight: 600;
    color: var(--c-muted);
    margin-bottom: 8px;
  }
  .vn-mobile-card-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c-muted);
    margin-bottom: 10px;
  }
  .vn-mobile-desc {
    font-size: 13px;
    color: var(--c-body);
    line-height: 1.6;
    margin: 0 0 10px;
  }
  /* List-item style: label left, value right, divider between rows —
     works because a flex container auto-wraps the <strong> label and the
     trailing value text into two separate flex items. */
  .vn-mobile-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 13px;
    color: var(--c-body);
    padding: 8px 0;
    border-bottom: 1px solid var(--c-border);
    text-align: right;
  }
  .vn-mobile-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
  .vn-mobile-row:first-child {
    padding-top: 0;
  }
  .vn-mobile-row strong {
    color: var(--c-muted);
    font-weight: 600;
    text-align: left;
    flex-shrink: 0;
  }
  .vn-mobile-value {
    flex: 1;
    min-width: 0;
    color: var(--c-body);
  }
  .vn-mobile-value a {
    color: var(--c-link);
  }
  .vn-mobile-ratings {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
  }
  .vn-mobile-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
  }
  /* Shrunk from the global .rating-badge/.movie-link-btn sizing so more
     fit per row on a phone — scoped to this page's mobile cards only,
     the shared classes themselves (used across the whole site) are
     untouched. */
  .vn-mobile-ratings .rating-badge {
    padding: 2px 7px;
  }
  .vn-mobile-links .movie-link-btn {
    padding: 4px 8px;
    gap: 3px;
  }
  /* Same shrink for the Download card and Report Nzb form — both use
     !important globally, and both live inside #tabs (hidden on mobile),
     so scoping directly by these classes only ever reaches the visible
     mobile copies. */
  .btn-downloads {
    gap: 5px !important;
  }
  .btn-downloads .btn {
    padding: 4px 8px !important;
    font-size: 10.5px !important;
    gap: 3px !important;
  }
  .cnfvalidatenxb .report-btn {
    padding: 4px 8px !important;
    margin: 0 !important;
  }

  /* Trending / TV Calendar sidebar links, mobile only (top nav hides them at this width) */
  .mmenu-mobile-only {
    display: list-item;
  }

  /* ── Console (Games) browse page mobile ── */
  .csl-page-header {
    flex-direction: column;
    align-items: stretch;
  }
  .csl-header-right {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .csl-perpage-form {
    justify-content: space-between;
  }
  .csl-filter-row {
    flex-direction: column;
    align-items: stretch;
  }
  .csl-filter-group {
    width: 100%;
  }
  .csl-filter-input,
  .csl-filter-select {
    width: 100%;
  }
  .csl-filter-btn {
    width: 100%;
    justify-content: center;
  }
  .csl-game-card {
    gap: 10px;
    padding: 10px;
  }
  .csl-cover-img {
    width: 84px;
  }
  .csl-game-title {
    font-size: 14px;
  }
  .csl-game-info-row {
    flex-direction: column;
    gap: 8px;
  }
  .csl-game-ss {
    align-self: center;
  }
  .csl-ss-img {
    width: 100%;
    max-width: 220px;
  }
  .csl-game-textblock,
  .csl-game-detail {
    font-size: 12px;
  }

  /* Hide the desktop fixed-width release table, show mobile release cards instead */
  .csl-release-wrap {
    display: none;
  }
  .csl-mobile-cards {
    display: block;
  }
  .csl-mcard {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: start;
    column-gap: 10px;
    padding: 10px 14px 14px;
    border-top: 1px solid var(--c-border);
  }
  .csl-mcard-title-row {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: flex-start;
    gap: 3px;
  }
  .csl-mcard-check {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    accent-color: var(--c-primary);
    cursor: pointer;
    margin-top: 2px;
  }
  .csl-mcard-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--c-primary);
    text-decoration: none;
    line-height: 1.4;
    word-break: break-word;
  }
  .csl-mcard-name:hover {
    text-decoration: underline;
  }
  .csl-mcard-meta {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px;
    align-items: center;
  }
  .csl-mcard-chip {
    font-size: 10px;
    font-weight: 500;
    color: var(--c-secondary);
    background: var(--c-subnav);
    border: 1px solid var(--c-border);
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
    text-decoration: none;
  }
  .csl-mcard-chip-nfo {
    color: var(--c-primary);
    border-color: rgba(0, 112, 255, 0.3);
    background: var(--c-primary-muted);
    cursor: pointer;
  }
  .csl-mcard-dim {
    opacity: 0.45;
  }
  .csl-mcard-lock {
    font-size: 11px;
    color: var(--c-muted);
    align-self: center;
  }
  .csl-mcard-actions {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .csl-mcard-actions .icon {
    float: none;
    margin: 0;
  }
  .csl-mcard-dl {
    color: var(--c-primary);
    text-decoration: none;
    display: block;
  }
  .csl-mcard-dl:hover {
    color: var(--c-secondary);
  }
  .csl-mcard:has(.csl-mcard-check:checked) {
    background: var(--c-primary-muted);
  }
  .csl-mcard-flagged {
    background-color: #fff0f0;
  }
}

@media (max-width: 480px) {
  .nav-label {
    display: none;
  }
  .top-menu-loggedin .nav-link {
    padding: 8px 8px;
  }
  .top-menu-loggedin {
    gap: 0;
  }
  .nav-label-cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #4db5ff;
    color: #fff;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
  }

  /* Forum post body — user-embedded images sometimes carry an inline
     style="width:...;height:...px" (e.g. pasted tweet/oEmbed markup),
     which beats a plain stylesheet rule — needs !important to override. */
  .frp-message img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
  }
  .frp-content {
    padding: 10px 12px;
  }
  .frp-message p {
    margin: 0 0 8px;
  }
  .frp-message p:last-child {
    margin-bottom: 0;
  }
}

@media (max-width: 480px) {
  .ms-shows-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}

@media (max-width: 480px) {
  .mml-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 420px) {
  .hdr-logo img {
    height: 34px;
  }
  .statusbar-nzb-div {
    padding: 0 10px;
    height: 52px;
  }
  #page {
    padding: 8px 10px 0;
  }

  #statusbar .nav-btn-login,
  #statusbar .nav-btn-register {
    padding: 7px 10px;
    font-size: 12px;
    gap: 5px;
  }

  .login-actions {
    flex-direction: column;
    gap: 8px;
  }
  .btn-action {
    padding: 12px;
  }
}

@media (max-width: 380px) {
  .hdr-logo img {
    height: 30px;
  }
  .statusbar-nzb-div {
    padding: 0 8px;
    height: 48px;
  }
  #page {
    padding: 8px 8px 0;
  }
  .top-menu-loggedin .nav-link {
    padding: 7px 6px;
  }
  .nav-icon-btn {
    width: 30px;
    height: 30px;
    font-size: 14px;
  }
  .nav-theme-btn {
    width: 30px;
    height: 30px;
    font-size: 14px;
  }
}