@font-face {
  font-family: "Comic Helvetic";
  src: url("fonts/ComicHelvetic_Medium.woff2") format("woff2"),
       url("fonts/ComicHelvetic_Medium.woff") format("woff"),
       url("fonts/ComicHelvetic_Medium.otf") format("opentype");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Comic Helvetic";
  src: url("fonts/ComicHelvetic_Light.woff2") format("woff2"),
       url("fonts/ComicHelvetic_Light.woff") format("woff"),
       url("fonts/ComicHelvetic_Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Comic Helvetic";
  src: url("fonts/ComicHelvetic_Heavy.woff2") format("woff2"),
       url("fonts/ComicHelvetic_Heavy.woff") format("woff"),
       url("fonts/ComicHelvetic_Heavy.otf") format("opentype");
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ComicHelvetic";
  src: url("fonts/ComicHelvetic_Medium.woff2") format("woff2"),
       url("fonts/ComicHelvetic_Medium.woff") format("woff"),
       url("fonts/ComicHelvetic_Medium.otf") format("opentype");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "ComicHelvetic";
  src: url("fonts/ComicHelvetic_Heavy.woff2") format("woff2"),
       url("fonts/ComicHelvetic_Heavy.woff") format("woff"),
       url("fonts/ComicHelvetic_Heavy.otf") format("opentype");
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}

/* Unified typography: one font family everywhere (header, footer, menus, forms, buttons) */
:root{--bn-font:"Comic Helvetic","ComicHelvetic",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
html,body,button,input,select,textarea,optgroup,
header,footer,nav,main,section,article,aside,
h1,h2,h3,h4,h5,h6,p,a,span,li,ul,ol,label,small,strong,em,th,td,figcaption,
.elementor,.elementor-widget,.elementor-widget-container,.elementor-shortcode{font-family:var(--bn-font)}

/* ===================================================
   COLOR THEMES: DARK (DEFAULT), LIGHT, & SUNSET
   =================================================== */
:root, [data-theme="dark"], body.bn-theme-dark, body.bn-reader-dark {
  color-scheme: dark;
  --bn-bg: #0B0F19;
  --bn-surface: #131B2E;
  --bn-surface-subtle: #19233A;
  --bn-surface-hover: #222F4C;
  --bn-ink: #F8FAFC;
  --bn-ink-soft: #E2E8F0;
  --bn-muted: #94A3B8;
  --bn-subtle: #64748B;
  --bn-line: #1E293B;
  --bn-line-subtle: #172033;
  --bn-accent: #6366F1;
  --bn-accent-hover: #818CF8;
  --bn-accent-soft: rgba(99, 102, 241, 0.15);
  --bn-accent-border: rgba(99, 102, 241, 0.35);
  --bn-gold: #F59E0B;
  --bn-gold-badge: rgba(245, 158, 11, 0.15);
  --bn-gold-text: #FBBF24;
  --bn-green: #10B981;
  --bn-green-soft: rgba(16, 185, 129, 0.15);
  --bn-purple: #A78BFA;
  --bn-purple-soft: rgba(167, 139, 250, 0.15);
  --bn-soft: rgba(99, 102, 241, 0.15);
  --bn-header-bg: rgba(11, 15, 25, 0.96);
  --bn-footer-bg: #0C111C;
  --bn-brand-bg: #1A2338;
  --bn-brand-border: rgba(255, 255, 255, 0.15);
  --bn-drawer-bg: #131B2E;
  --bn-shadow-xs: 0 1px 2px rgba(0,0,0,0.3);
  --bn-shadow-sm: 0 2px 8px -2px rgba(0,0,0,0.4),0 1px 4px -1px rgba(0,0,0,0.25);
  --bn-shadow-md: 0 12px 24px -6px rgba(0,0,0,0.5),0 4px 8px -2px rgba(0,0,0,0.35);
  --bn-shadow-cover: 0 10px 20px -5px rgba(0,0,0,0.6),0 4px 6px -3px rgba(0,0,0,0.4);
}

/* Light Theme */
[data-theme="light"], body.bn-theme-light {
  color-scheme: light;
  --bn-bg: #FFFFFF;
  --bn-surface: #FFFFFF;
  --bn-surface-subtle: #F8F9FA;
  --bn-surface-hover: #F1F5F9;
  --bn-ink: #111827;
  --bn-ink-soft: #1F2937;
  --bn-muted: #4B5563;
  --bn-subtle: #6B7280;
  --bn-line: #E5E7EB;
  --bn-line-subtle: #F3F4F6;
  --bn-accent: #2B4CDE;
  --bn-accent-hover: #1E40AF;
  --bn-accent-soft: #EEF2FF;
  --bn-accent-border: #C7D2FE;
  --bn-gold: #D97706;
  --bn-gold-badge: #FEF3C7;
  --bn-gold-text: #92400E;
  --bn-green: #059669;
  --bn-green-soft: #ECFDF5;
  --bn-purple: #7C3AED;
  --bn-purple-soft: #F5F3FF;
  --bn-soft: #EEF2FF;
  --bn-header-bg: rgba(255, 255, 255, 0.98);
  --bn-footer-bg: #F9FAFB;
  --bn-brand-bg: #111827;
  --bn-brand-border: rgba(0, 0, 0, 0.12);
  --bn-drawer-bg: #FFFFFF;
  --bn-shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --bn-shadow-sm: 0 2px 8px -2px rgba(17,24,39,0.06),0 1px 4px -1px rgba(17,24,39,0.04);
  --bn-shadow-md: 0 12px 24px -6px rgba(17,24,39,0.08),0 4px 8px -2px rgba(17,24,39,0.04);
  --bn-shadow-cover: 0 10px 20px -5px rgba(0,0,0,0.12),0 4px 6px -3px rgba(0,0,0,0.05);
}

/* Sunset (Warm Sepia) Theme */
[data-theme="sunset"], body.bn-theme-sunset, body.bn-reader-sepia {
  color-scheme: light;
  --bn-bg: #FBF0D9;
  --bn-surface: #FFF9EE;
  --bn-surface-subtle: #F5E8D0;
  --bn-surface-hover: #ECE0BE;
  --bn-ink: #2E1F11;
  --bn-ink-soft: #443120;
  --bn-muted: #6E5339;
  --bn-subtle: #8C6F50;
  --bn-line: #E5D5B8;
  --bn-line-subtle: #EFE4CC;
  --bn-accent: #B45309;
  --bn-accent-hover: #92400E;
  --bn-accent-soft: #FEF3C7;
  --bn-accent-border: #FDE68A;
  --bn-gold: #D97706;
  --bn-gold-badge: #FEF3C7;
  --bn-gold-text: #92400E;
  --bn-green: #059669;
  --bn-green-soft: #ECFDF5;
  --bn-purple: #B45309;
  --bn-purple-soft: #FEF3C7;
  --bn-soft: #FEF3C7;
  --bn-header-bg: rgba(251, 240, 217, 0.98);
  --bn-footer-bg: #F3E3C6;
  --bn-brand-bg: #2E1F11;
  --bn-brand-border: #4A3520;
  --bn-drawer-bg: #FBF0D9;
  --bn-shadow-xs: 0 1px 2px rgba(67,52,34,0.06);
  --bn-shadow-sm: 0 2px 8px -2px rgba(67,52,34,0.08),0 1px 4px -1px rgba(67,52,34,0.05);
  --bn-shadow-md: 0 12px 24px -6px rgba(67,52,34,0.1),0 4px 8px -2px rgba(67,52,34,0.06);
  --bn-shadow-cover: 0 10px 20px -5px rgba(67,52,34,0.16),0 4px 6px -3px rgba(67,52,34,0.08);
}

/* Strict Viewport & Mobile-First Reset */
html, body {
  overflow-x: clip !important;
  overflow-y: visible !important;
  max-width: 100vw !important;
  width: 100% !important;
  margin: 0;
  padding: 0;
  background-color: var(--bn-bg) !important;
  color: var(--bn-ink) !important;
  transition: background-color .2s ease, color .2s ease;
  -webkit-text-size-adjust: 100%;
}
*, *::before, *::after {
  box-sizing: border-box;
}

.bn {
  max-width: 1000px;
  font-size: 16px;
  margin: 0 auto;
  padding: 28px 24px 56px;
  color: var(--bn-ink);
  font-family: var(--bn-font);
  -webkit-font-smoothing: antialiased;
  background: var(--bn-bg);
  box-sizing: border-box;
  width: 100%;
  transition: background-color .2s ease, color .2s ease;
}
.bn a {
  text-decoration: none;
  color: inherit;
  transition: color .15s ease;
}

/* ===================================================
   GLOBAL HEADER (DESKTOP & MOBILE RESPONSIVE)
   =================================================== */
header.elementor-location-header,
.elementor-209,
.elementor-element-tpl209a,
.bn-header {
  background-color: var(--bn-header-bg) !important;
  color: var(--bn-ink) !important;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease !important;
}

header.elementor-location-header,
.bn-header:not(header.elementor-location-header *) {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background-color: var(--bn-header-bg) !important;
  border-bottom: 1px solid var(--bn-line) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: var(--bn-shadow-xs) !important;
  width: 100% !important;
}

header.elementor-location-header .bn-header {
  position: relative !important;
  top: auto !important;
  z-index: auto !important;
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  width: 100%;
  box-sizing: border-box;
}

.bn-headerin {
  max-width: 1000px;
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}

.bn-brand {
  display: inline-flex;
  align-items: center;
  background: var(--bn-brand-bg) !important;
  padding: 5px 12px;
  border-radius:0;
  border: 1px solid var(--bn-brand-border) !important;
  transition: opacity .15s ease, background-color .2s ease, border-color .2s ease;
  flex-shrink: 0;
  text-decoration: none;
}
.bn-brand:hover {
  opacity: .92;
}
.bn-brandimg {
  display: block;
  width: 115px;
  height: auto;
}
.bn-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.bn-nav a {
  font-size:15.5px;
  font-weight: 600;
  color: var(--bn-muted) !important;
  padding: 4px 0;
  transition: color .15s ease;
  text-decoration: none;
}
.bn-nav a:hover,
.bn-nav a.active {
  color: var(--bn-accent) !important;
}
.bn-header-actions-desk {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
/* Header Search Form */
.bn-header-search {
  display: flex;
  align-items: center;
  position: relative;
  flex-shrink: 0;
}
.bn-header-search-wrap {
  display: flex;
  align-items: center;
  position: relative;
}
.bn-header-search-input {
  height: 36px;
  width: 200px;
  padding: 0 40px 0 12px;
  border: 1px solid var(--bn-line);
  border-radius:0;
  font-size:15px;
  background: var(--bn-surface-subtle);
  color: var(--bn-ink);
  outline: none;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.bn-header-search-input:focus {
  border-color: var(--bn-accent);
  background: var(--bn-surface);
  box-shadow: 0 0 0 3px var(--bn-accent-soft);
  width: 240px;
}
.bn-header-search-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border: none;
  border-radius:0;
  background: transparent;
  color: var(--bn-subtle);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color .15s ease, background .15s ease;
}
.bn-header-search-btn:hover {
  color: var(--bn-accent);
  background: var(--bn-accent-soft);
}

.bn-header-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius:0;
  background: var(--bn-accent-soft) !important;
  color: var(--bn-accent) !important;
  font-size:15px;
  font-weight: 700;
  border: 1px solid var(--bn-accent-border) !important;
  transition: all .15s ease;
  flex-shrink: 0;
  text-decoration: none;
}
.bn-header-cta:hover {
  background: var(--bn-accent) !important;
  color: #fff !important;
}

/* Theme Switcher Button (Shared Icon Toggle) */
.bn-theme-btn {
  width: 36px;
  height: 36px;
  border-radius:0;
  border: 1px solid var(--bn-line);
  background: var(--bn-surface-subtle);
  color: var(--bn-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .15s ease;
  flex-shrink: 0;
  padding: 0;
}
.bn-theme-btn:hover {
  background: var(--bn-surface-hover);
  border-color: var(--bn-accent-border);
  color: var(--bn-accent);
}
.bn-theme-icon {
  display: none;
  vertical-align: middle;
}
[data-theme="light"] .bn-theme-icon-sun,
body.bn-theme-light .bn-theme-icon-sun {
  display: inline-block;
  color: #D97706;
}
[data-theme="sunset"] .bn-theme-icon-sunset,
body.bn-theme-sunset .bn-theme-icon-sunset {
  display: inline-block;
  color: #B45309;
}
[data-theme="dark"] .bn-theme-icon-moon,
:root:not([data-theme]) .bn-theme-icon-moon,
body.bn-theme-dark .bn-theme-icon-moon {
  display: inline-block;
  color: #818CF8;
}

/* Mobile Header Elements (Default hidden on desktop) */
.bn-header-mob-actions {
  display: none;
}
.bn-mobile-drawer {
  display: none;
}

/* ===================================================
   HOMEPAGE, HERO, & DISCOVERY BAR STYLES
   =================================================== */
/* ===================================================
   HOMEPAGE HERO SLIDER & CAROUSEL
   =================================================== */
.bn-hero-slider {
  position: relative;
  width: 100%;
  margin-bottom: 28px;
  overflow: hidden;
  border-radius: 0;
  box-shadow: var(--bn-shadow-sm);
  background: var(--bn-surface);
  border: 1px solid var(--bn-line);
}

.bn-hero-track {
  display: flex;
  width: 100%;
  transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

.bn-hero-slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.bn-hero-slide .bn-hero {
  margin-bottom: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding-bottom: 50px !important;
}

.bn-hero-kickers {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  width: 100%;
}

.bn-hero-pills {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.bn-hero-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  z-index: 5;
}

.bn-hero-btn {
  width: 32px;
  height: 32px;
  border-radius: 0;
  background: var(--bn-surface);
  border: 1px solid var(--bn-line);
  color: var(--bn-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.bn-hero-btn:hover {
  background: var(--bn-accent);
  color: #FFFFFF !important;
  border-color: var(--bn-accent);
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(43, 76, 222, 0.3);
}

.bn-hero-counter {
  font-size: 13px;
  font-weight: 700;
  color: var(--bn-subtle);
  min-width: 34px;
  text-align: center;
  user-select: none;
}

.bn-hero-dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 10;
  padding: 5px 12px;
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(6px);
  border-radius: 0;
}

.bn-hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.55);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.bn-hero-dot.is-active {
  width: 22px;
  border-radius: 0;
  background: #FFFFFF;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}

.bn-hero-dot:hover {
  background: #FFFFFF;
}

.bn-hero h1 a {
  color: var(--bn-ink);
  text-decoration: none !important;
  transition: color 0.15s ease;
}

.bn-hero h1 a:hover {
  color: var(--bn-accent);
}

[data-theme="dark"] .bn-hero-btn,
:root:not([data-theme]) .bn-hero-btn,
body.bn-theme-dark .bn-hero-btn {
  background: rgba(30, 41, 59, 0.9);
  border-color: rgba(255, 255, 255, 0.15);
  color: #F1F5F9;
}

[data-theme="dark"] .bn-hero-btn:hover,
:root:not([data-theme]) .bn-hero-btn:hover,
body.bn-theme-dark .bn-hero-btn:hover {
  background: var(--bn-accent);
  color: #FFFFFF !important;
}

.bn-hero{display:grid;grid-template-columns:210px 1fr;gap:32px;padding:30px;background:var(--bn-surface);border:1px solid var(--bn-line);border-radius: 0;box-shadow:var(--bn-shadow-sm);position:relative;overflow:hidden;align-items:center;margin-bottom:28px}
.bn-hero::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--bn-accent) 0%,#4F46E5 50%,#3B82F6 100%)}
.bn-hero-media{position:relative;width:100%}
.bn-hero-cover{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:0;border:1px solid rgba(0,0,0,0.06);box-shadow:var(--bn-shadow-cover);display:block;background:var(--bn-surface-subtle);transition:transform .22s ease}
.bn-hero-media:hover .bn-hero-cover{transform:translateY(-2px)}
.bn-hero-badge-type{position:absolute;top:8px;left:8px;background:rgba(17,24,39,0.85);backdrop-filter:blur(4px);color:#FFF;font-size:12px;font-weight:800;letter-spacing:.04em;padding:3px 7px;border-radius:0;text-transform:uppercase}
.bn-hero-badge-rating{position:absolute;top:8px;right:8px;background:var(--bn-surface);backdrop-filter:blur(4px);color:var(--bn-gold-text);border:1px solid var(--bn-line-subtle);font-size:12.5px;font-weight:800;padding:2px 6px;border-radius:0;box-shadow:0 1px 4px rgba(0,0,0,0.1);display:inline-flex;align-items:center;gap:3px}
.bn-hero-content{display:flex;flex-direction:column;justify-content:center}
.bn-hero-kickers{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.bn-pill{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:700;letter-spacing:.04em;padding:3px 8px;border-radius:0;text-transform:uppercase}
.bn-pill-featured{background:var(--bn-accent-soft);color:var(--bn-accent);border:1px solid var(--bn-accent-border)}
.bn-pill-status{background:var(--bn-green-soft);color:var(--bn-green)}
.bn-hero h1{font-size:clamp(26px,3.2vw,34px);font-weight:800;line-height:1.2;letter-spacing:-.035em;color:var(--bn-ink);margin:0 0 10px}
.bn-hero-meta-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:15px;color:var(--bn-subtle);margin-bottom:12px}
.bn-hero-meta-item{display:inline-flex;align-items:center;gap:4px;font-weight:600}
.bn-hero-meta-item strong{color:var(--bn-ink)}
.bn-hero-genres{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.bn-genre-tag{font-size:13.5px;font-weight:600;color:var(--bn-muted);background:var(--bn-surface-subtle);padding:3px 9px;border-radius:0;transition:all .15s ease}
.bn-genre-tag:hover{background:var(--bn-accent-soft);color:var(--bn-accent)}
.bn-hero-synopsis{font-size:16px;line-height:1.65;color:var(--bn-muted);margin:0 0 20px;max-width:60ch;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bn-hero-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.bn-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 18px;border-radius: 0;font-size:15.5px;font-weight:700;letter-spacing:-.01em;transition:all .18s ease;cursor:pointer;border:1px solid transparent}
.bn-btn-primary{background:var(--bn-accent);color:#FFF!important;box-shadow:0 2px 8px rgba(43,76,222,0.25)}
.bn-btn-primary:hover{background:var(--bn-accent-hover);box-shadow:0 4px 12px rgba(43,76,222,0.35);transform:translateY(-1px)}
.bn-btn-ghost{background:var(--bn-surface);color:var(--bn-ink)!important;border-color:var(--bn-line)}
.bn-btn-ghost:hover{background:var(--bn-surface-hover);border-color:#D1D5DB;transform:translateY(-1px)}
.bn-categories-strip{display:flex;align-items:center;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:4px 0 20px;scrollbar-width:none;white-space:nowrap;margin-bottom:6px;max-width:100%}
.bn-categories-strip::-webkit-scrollbar{display:none}
.bn-cat-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:0;background:var(--bn-surface);border:1px solid var(--bn-line);color:var(--bn-ink);font-size:14.5px;font-weight:700;transition:all .15s ease}
.bn-cat-pill:hover{background:var(--bn-surface-hover);border-color:#D1D5DB;color:var(--bn-accent)}
.bn-cat-pill.active{background:var(--bn-ink);color:var(--bn-bg);border-color:var(--bn-ink)}
.bn-section{padding:20px 0 32px;border-bottom:1px solid var(--bn-line-subtle)}
.bn-section:last-of-type{border-bottom:none}
.bn-sectionhead{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:18px;gap:16px}
.bn-sectionhead-left{display:flex;flex-direction:column}
.bn-sectionhead h2{font-size:21px;font-weight:800;letter-spacing:-.03em;color:var(--bn-ink);margin:0;display:flex;align-items:center;gap:8px}
.bn-sectionhead-sub{font-size:14.5px;color:var(--bn-subtle);margin-top:2px;font-weight:500}
.bn-sectionhead a.bn-view-all{color:var(--bn-accent);font-size:15px;font-weight:700;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;padding:4px 8px;border-radius:0;transition:background .15s,transform .15s}
.bn-sectionhead a.bn-view-all:hover{background:var(--bn-accent-soft);transform:translateX(2px)}
.bn-live-dot{width:8px;height:8px;background:#10B981;border-radius: 0;display:inline-block;box-shadow:0 0 0 3px rgba(16,185,129,0.2)}
.bn-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;min-width:0;max-width:100%}
.bn-card{min-width:0;display:flex;flex-direction:column;max-width:100%}
.bn-card-media{position:relative;width:100%;aspect-ratio:2/3;border-radius: 0;overflow:hidden;background:var(--bn-surface-subtle);border:1px solid var(--bn-line);box-shadow:var(--bn-shadow-xs);transition:transform .22s ease,box-shadow .22s ease}
.bn-card:hover .bn-card-media{transform:translateY(-4px);box-shadow:var(--bn-shadow-cover);border-color:#D1D5DB}
.bn-cover{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.bn-card:hover .bn-cover{transform:scale(1.04)}
.bn-card-scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(17,24,39,0.7) 0%,rgba(17,24,39,0) 45%);pointer-events:none}
.bn-badge-rank{position:absolute;top:7px;left:7px;z-index:2;font-size:13px;font-weight:800;padding:2px 6px;border-radius: 0;color:#FFF}
.bn-rank-1{background:linear-gradient(135deg,#F59E0B,#D97706);box-shadow:0 2px 6px rgba(245,158,11,0.4)}
.bn-rank-2{background:linear-gradient(135deg,#94A3B8,#64748B);box-shadow:0 2px 6px rgba(148,163,184,0.4)}
.bn-rank-3{background:linear-gradient(135deg,#B45309,#78350F);box-shadow:0 2px 6px rgba(180,83,9,0.4)}
.bn-rank-default{background:rgba(17,24,39,0.85)}
.bn-badge-type{position:absolute;top:7px;left:7px;z-index:2;background:rgba(17,24,39,0.85);backdrop-filter:blur(4px);color:#FFF;font-size:11.5px;font-weight:800;letter-spacing:.04em;padding:2px 6px;border-radius: 0;text-transform:uppercase}
.bn-badge-featured{position:absolute;top:7px;left:7px;z-index:2;background:linear-gradient(135deg,#4F46E5,#4338CA);color:#FFF;font-size:11.5px;font-weight:800;letter-spacing:.03em;padding:2px 6px;border-radius:0;box-shadow:0 1px 4px rgba(79,70,229,0.35);display:inline-flex;align-items:center;gap:3px}
.bn-spotlight{background:var(--bn-surface);border:1px solid var(--bn-line);border-radius:0;padding:20px;margin-bottom:24px;display:grid;grid-template-columns:140px 1fr;gap:22px;box-shadow:var(--bn-shadow-xs);transition:border-color .2s ease,box-shadow .2s ease}
.bn-spotlight:hover{border-color:#D1D5DB;box-shadow:var(--bn-shadow-cover)}
.bn-spotlight-media{position:relative;aspect-ratio:2/3;border-radius: 0;overflow:hidden;background:var(--bn-surface-subtle);border:1px solid var(--bn-line)}
.bn-spotlight-cover{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.bn-spotlight:hover .bn-spotlight-cover{transform:scale(1.03)}
.bn-spotlight-content{display:flex;flex-direction:column;justify-content:center;min-width:0}
.bn-spotlight-badge{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:800;letter-spacing:.04em;color:var(--bn-accent);background:var(--bn-accent-soft);border:1px solid var(--bn-accent-border);padding:3px 8px;border-radius:0;margin-bottom:8px;align-self:flex-start}
.bn-spotlight-title{font-size:21px;font-weight:800;letter-spacing:-.02em;margin:0 0 6px;line-height:1.3}
.bn-spotlight-title a{color:var(--bn-ink);text-decoration:none}
.bn-spotlight-title a:hover{color:var(--bn-accent)}
.bn-spotlight-meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:14px;color:var(--bn-muted);margin-bottom:8px;font-weight:500}
.bn-spotlight-synopsis{font-size:14.5px;line-height:1.5;color:var(--bn-subtle);margin:0 0 14px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bn-spotlight-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bn-badge-rating{position:absolute;top:7px;right:7px;z-index:2;background:var(--bn-surface);backdrop-filter:blur(4px);color:var(--bn-gold-text);border:1px solid var(--bn-line-subtle);font-size:12.5px;font-weight:800;padding:2px 6px;border-radius: 0;display:inline-flex;align-items:center;gap:2px;box-shadow:0 1px 4px rgba(0,0,0,0.1)}
.bn-badge-ch{position:absolute;bottom:7px;left:7px;z-index:2;background:var(--bn-accent);color:#FFF;font-size:12.5px;font-weight:700;padding:2px 6px;border-radius: 0;box-shadow:0 1px 3px rgba(0,0,0,0.2)}
.bn-badge-status{position:absolute;bottom:7px;right:7px;z-index:2;font-size:11.5px;font-weight:700;padding:2px 5px;border-radius: 0;background:rgba(16,185,129,0.9);color:#FFF}
.bn-card-body{padding:8px 2px 2px;display:flex;flex-direction:column;flex:1}
.bn-card-title{font-size:15.5px;font-weight:700;line-height:1.4;margin:0 0 4px;letter-spacing:-.015em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--bn-ink)}
.bn-card:hover .bn-card-title a{color:var(--bn-accent)}
.bn-card-synopsis{font-size:13.5px;color:var(--bn-muted);line-height:1.45;margin:0 0 8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bn-card-meta{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:14px;color:var(--bn-subtle);font-weight:500;margin-top:auto;padding-top:4px}
.bn-card-genre{color:var(--bn-muted);font-size:13.5px;font-weight:600}
.bn-card-views{font-size:13px;color:var(--bn-subtle)}

/* ===================================================
   HOME & ARCHIVE CARD LIST LAYOUT (2 Kolom Desktop, 1 Kolom Mobile)
   =================================================== */
.bn-grid.bn-grid-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Comic Detail - Rekomendasi Komik Serupa List (1 Kolom ke bawah) */
.bn-related-box .bn-grid.bn-grid-list,
.bn-comic-main-col .bn-grid.bn-grid-list {
  grid-template-columns: 1fr !important;
  gap: 12px;
}

.bn-grid.bn-grid-list .bn-card,
.bn-card.bn-card-list {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch;
  background: var(--bn-surface);
  border: 1px solid var(--bn-line);
  border-radius: 0 !important;
  padding: 12px 14px;
  gap: 14px;
  box-shadow: none !important;
  transition: border-color .15s ease, background-color .15s ease;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.bn-grid.bn-grid-list .bn-card:hover,
.bn-card.bn-card-list:hover {
  border-color: var(--bn-accent);
  transform: none !important;
  box-shadow: none !important;
}

.bn-grid.bn-grid-list .bn-card-media,
.bn-card.bn-card-list .bn-card-media {
  width: 104px;
  min-width: 104px;
  max-width: 104px;
  aspect-ratio: 2/3;
  border-radius: 0 !important;
  flex-shrink: 0;
  box-shadow: none !important;
  overflow: hidden;
}

.bn-grid.bn-grid-list .bn-card-media img,
.bn-card.bn-card-list .bn-card-media img,
.bn-grid.bn-grid-list .bn-cover,
.bn-card.bn-card-list .bn-cover {
  border-radius: 0 !important;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bn-grid.bn-grid-list .bn-card-body,
.bn-card.bn-card-list .bn-card-body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 2px 0;
  min-width: 0;
  flex: 1;
}

.bn-grid.bn-grid-list .bn-card-title,
.bn-card.bn-card-list .bn-card-title {
  font-size: 17.5px;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 6px;
  color: var(--bn-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bn-grid.bn-grid-list .bn-card:hover .bn-card-title a,
.bn-card.bn-card-list:hover .bn-card-title a {
  color: var(--bn-accent);
}

.bn-grid.bn-grid-list .bn-card-synopsis,
.bn-card.bn-card-list .bn-card-synopsis {
  font-size: 14.5px;
  color: var(--bn-muted);
  line-height: 1.45;
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bn-grid.bn-grid-list .bn-card-meta,
.bn-card.bn-card-list .bn-card-meta {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  font-size: 13.5px;
  margin-top: auto;
  padding-top: 4px;
}

/* Rating display inside card meta */
.bn-card-rating {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #D97706;
  font-weight: 700;
  font-size: 13.5px;
}
[data-theme="dark"] .bn-card-rating,
body.bn-theme-dark .bn-card-rating {
  color: #FBBF24;
}

/* Clean Poster: Remove badge clutter & dark scrim from list card cover */
.bn-grid.bn-grid-list .bn-card-scrim,
.bn-card.bn-card-list .bn-card-scrim,
.bn-grid.bn-grid-list .bn-badge-ch,
.bn-card.bn-card-list .bn-badge-ch,
.bn-grid.bn-grid-list .bn-badge-type,
.bn-card.bn-card-list .bn-badge-type,
.bn-grid.bn-grid-list .bn-badge-rating,
.bn-card.bn-card-list .bn-badge-rating {
  display: none !important;
}

/* Card Chapter Quick-Access Buttons */
.bn-card-chapters {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--bn-line-subtle);
  width: 100%;
}

.bn-card-ch-btn {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 0;
  text-decoration: none !important;
  line-height: 1.25;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.bn-card-ch-btn i {
  font-size: 11px;
  line-height: 1;
  flex-shrink: 0;
}

.bn-card-ch-btn .bn-ch-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bn-card-ch-btn .bn-ch-num {
  font-size: 11.5px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 0;
  flex-shrink: 0;
  line-height: 1.2;
}

/* First Chapter Button */
.bn-card-ch-btn.bn-card-ch-first {
  background: var(--bn-accent-soft);
  color: var(--bn-accent) !important;
  border: 1px solid var(--bn-accent-border);
}

.bn-card-ch-btn.bn-card-ch-first .bn-ch-num {
  background: rgba(43, 76, 222, 0.12);
  color: var(--bn-accent);
}

.bn-card-ch-btn.bn-card-ch-first:hover {
  background: var(--bn-accent);
  color: #FFFFFF !important;
  border-color: var(--bn-accent);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(43, 76, 222, 0.25);
}

.bn-card-ch-btn.bn-card-ch-first:hover .bn-ch-num {
  background: rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
}

/* Latest Chapter Button */
.bn-card-ch-btn.bn-card-ch-latest {
  background: var(--bn-surface-subtle);
  color: var(--bn-ink) !important;
  border: 1px solid var(--bn-line);
}

.bn-card-ch-btn.bn-card-ch-latest .bn-ch-num {
  background: rgba(0, 0, 0, 0.06);
  color: var(--bn-ink);
}

.bn-card-ch-btn.bn-card-ch-latest:hover {
  background: var(--bn-surface-hover);
  border-color: var(--bn-accent);
  color: var(--bn-accent) !important;
  transform: translateY(-1px);
  box-shadow: var(--bn-shadow-xs);
}

.bn-card-ch-btn.bn-card-ch-latest:hover .bn-ch-num {
  background: var(--bn-accent-soft);
  color: var(--bn-accent);
}

/* Single Chapter Button */
.bn-card-ch-btn.bn-card-ch-single {
  background: var(--bn-accent-soft);
  color: var(--bn-accent) !important;
  border: 1px solid var(--bn-accent-border);
  width: 100%;
}

.bn-card-ch-btn.bn-card-ch-single:hover {
  background: var(--bn-accent);
  color: #FFFFFF !important;
  border-color: var(--bn-accent);
  transform: translateY(-1px);
}

/* Dark Mode Quick-Access Buttons */
[data-theme="dark"] .bn-card-ch-btn.bn-card-ch-first,
:root:not([data-theme]) .bn-card-ch-btn.bn-card-ch-first,
body.bn-theme-dark .bn-card-ch-btn.bn-card-ch-first {
  background: rgba(99, 102, 241, 0.15);
  color: #A5B4FC !important;
  border-color: rgba(99, 102, 241, 0.35);
}
[data-theme="dark"] .bn-card-ch-btn.bn-card-ch-first .bn-ch-num,
:root:not([data-theme]) .bn-card-ch-btn.bn-card-ch-first .bn-ch-num,
body.bn-theme-dark .bn-card-ch-btn.bn-card-ch-first .bn-ch-num {
  background: rgba(99, 102, 241, 0.25);
  color: #C7D2FE;
}
[data-theme="dark"] .bn-card-ch-btn.bn-card-ch-first:hover,
:root:not([data-theme]) .bn-card-ch-btn.bn-card-ch-first:hover,
body.bn-theme-dark .bn-card-ch-btn.bn-card-ch-first:hover {
  background: var(--bn-accent);
  color: #FFFFFF !important;
  border-color: var(--bn-accent);
}
[data-theme="dark"] .bn-card-ch-btn.bn-card-ch-first:hover .bn-ch-num,
:root:not([data-theme]) .bn-card-ch-btn.bn-card-ch-first:hover .bn-ch-num,
body.bn-theme-dark .bn-card-ch-btn.bn-card-ch-first:hover .bn-ch-num {
  background: rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
}

[data-theme="dark"] .bn-card-ch-btn.bn-card-ch-latest,
:root:not([data-theme]) .bn-card-ch-btn.bn-card-ch-latest,
body.bn-theme-dark .bn-card-ch-btn.bn-card-ch-latest {
  background: var(--bn-surface-subtle);
  color: var(--bn-ink) !important;
  border-color: var(--bn-line);
}
[data-theme="dark"] .bn-card-ch-btn.bn-card-ch-latest .bn-ch-num,
:root:not([data-theme]) .bn-card-ch-btn.bn-card-ch-latest .bn-ch-num,
body.bn-theme-dark .bn-card-ch-btn.bn-card-ch-latest .bn-ch-num {
  background: rgba(255, 255, 255, 0.08);
  color: var(--bn-ink-soft);
}
[data-theme="dark"] .bn-card-ch-btn.bn-card-ch-latest:hover,
:root:not([data-theme]) .bn-card-ch-btn.bn-card-ch-latest:hover,
body.bn-theme-dark .bn-card-ch-btn.bn-card-ch-latest:hover {
  background: var(--bn-surface-hover);
  border-color: var(--bn-accent);
  color: #A5B4FC !important;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .bn-card-chapters {
    gap: 6px;
    margin-top: 6px;
    padding-top: 6px;
  }
  .bn-card-ch-btn {
    padding: 4px 6px;
    font-size: 12px;
    gap: 4px;
    min-height: 28px;
  }
  .bn-card-ch-first .bn-ch-num {
    display: none;
  }
  .bn-card-ch-latest .bn-ch-num {
    font-size: 11px;
    padding: 0 4px;
  }
}

@media (max-width: 860px) {
  .bn-grid.bn-grid-list {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
}
.bn-empty-card{padding:36px 24px;background:var(--bn-surface);border:1px dashed var(--bn-line);border-radius: 0;text-align:center;color:var(--bn-muted);display:flex;flex-direction:column;align-items:center;justify-content:center}
.bn-empty-icon{width:44px;height:44px;border-radius: 0;background:var(--bn-surface-subtle);display:flex;align-items:center;justify-content:center;color:var(--bn-subtle);margin-bottom:12px}
.bn-empty-card h4{font-size:17px;font-weight:700;color:var(--bn-ink);margin:0 0 6px}
.bn-empty-card p{font-size:15px;color:var(--bn-subtle);margin:0 0 16px;max-width:45ch;line-height:1.5}
.bn-features-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:32px;padding:22px;background:var(--bn-surface);border:1px solid var(--bn-line);border-radius:0;box-shadow:var(--bn-shadow-xs)}
.bn-feature-item{display:flex;align-items:flex-start;gap:12px}
.bn-feature-icon{width:36px;height:36px;border-radius:0;background:var(--bn-accent-soft);color:var(--bn-accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.bn-feature-text h5{font-size:15px;font-weight:700;color:var(--bn-ink);margin:0 0 3px}
.bn-feature-text p{font-size:13.5px;color:var(--bn-subtle);margin:0;line-height:1.45}
/* ===================================================
   GLOBAL FOOTER (SEAMLESS MULTI-THEME SUPPORT)
   =================================================== */
footer.elementor-location-footer,
.elementor-210,
.elementor-element-tpl210a,
.bn-footer {
  background-color: var(--bn-footer-bg) !important;
  color: var(--bn-ink) !important;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease !important;
}

footer.elementor-location-footer {
  border-top: 1px solid var(--bn-line) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-top: 48px !important;
}

.bn-footer {
  background: transparent !important;
  border-top: none !important;
  margin-top: 0 !important;
  width: 100%;
  box-sizing: border-box;
}

.bn-footerin {
  max-width: 1000px;
  margin: auto;
  padding: 36px 24px 28px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
  box-sizing: border-box;
}

.bn-footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  flex-wrap: wrap;
}

.bn-footer-brand {
  max-width: 320px;
}

.bn-footer-brand p {
  font-size:14.5px;
  color: var(--bn-subtle) !important;
  margin: 10px 0 0;
  line-height: 1.6;
}

.bn-footer-links {
  display: flex;
  gap: 36px;
  flex-wrap: wrap;
}

.bn-footer-col h6 {
  font-size:13.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--bn-ink) !important;
  margin: 0 0 12px;
}

.bn-footer-col a {
  display: block;
  font-size:14.5px;
  color: var(--bn-muted) !important;
  margin-bottom: 7px;
  font-weight: 500;
  transition: color .15s ease;
  text-decoration: none;
}

.bn-footer-col a:hover {
  color: var(--bn-accent) !important;
}

.bn-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 18px;
  border-top: 1px solid var(--bn-line) !important;
  font-size:13.5px;
  color: var(--bn-subtle) !important;
  flex-wrap: wrap;
  gap: 10px;
}

/* Filters */
.bn-filters{border:1px solid var(--bn-line);padding:16px;border-radius:0;background:var(--bn-surface);margin:18px 0 24px;display:grid;grid-template-columns:2fr repeat(3,1fr);gap:10px;min-width:0;max-width:100%}
.bn-filters input,.bn-filters select,.bn-chaptersearch input{border:1px solid var(--bn-line);border-radius:0;padding:10px;background:var(--bn-surface);color:var(--bn-ink);width:100%;font:inherit;font-size:15px;box-sizing:border-box}
.bn-empty{padding:42px;border:1px dashed var(--bn-line);border-radius:0;text-align:center;color:var(--bn-muted)}

/* ===================================================
   UNIFIED BREADCRUMB SYSTEM
   =================================================== */
.bn-breadcrumb{display:flex;align-items:center;gap:8px;font-size:14.5px;line-height:1.4;color:var(--bn-subtle);margin:0 0 20px 0;padding:0;flex-wrap:wrap;min-width:0;max-width:100%;list-style:none}
.bn-breadcrumb a{color:var(--bn-muted);text-decoration:none!important;transition:color .15s ease}
.bn-breadcrumb a:hover{color:var(--bn-accent);text-decoration:none!important}
.bn-breadcrumb-sep,.bn-breadcrumb .bn-sep{color:var(--bn-line);font-size:13px;font-weight:400;user-select:none}
.bn-breadcrumb-current,.bn-breadcrumb .current,.bn-breadcrumb .bn-current{color:var(--bn-ink);font-weight:700;word-break:break-word;overflow-wrap:anywhere}
.bn-reader-bc-wrap > .bn-breadcrumb{margin-top:0;margin-bottom:20px}

/* Elementor Location Overrides for Banamik Layout Consistency */
.elementor-location-archive .elementor-widget,
.elementor-location-archive .elementor-widget-container,
.elementor-location-archive .elementor-element {
  padding: 0 !important;
  margin: 0 !important;
}
.elementor-200 .e-con-inner,
.elementor-202 .e-con-inner,
.elementor-203 .e-con-inner,
.e-con-inner:has(> .elementor-widget-shortcode) {
  padding-top: 0 !important;
}

.bn-comic-hero{position:relative;background:var(--bn-surface);border:1px solid var(--bn-line);border-radius:0;overflow:hidden;margin-bottom:28px;box-shadow:var(--bn-shadow-xs);isolation:isolate;max-width:100%;box-sizing:border-box}
.bn-comic-hero-backdrop{position:absolute;inset:0;height:240px;overflow:hidden;pointer-events:none;max-width:100%}
.bn-comic-hero-bg{width:100%;height:100%;background-size:cover;background-position:center;filter:blur(30px) saturate(1.4);opacity:.18;transform:scale(1.1);pointer-events:none}
.bn-comic-hero-gradient{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 0%,var(--bn-surface-subtle) 60%,var(--bn-surface) 100%)}
.bn-comic-hero-content{position:relative;z-index:2;display:grid;grid-template-columns:220px 1fr;gap:32px;padding:32px 28px;min-width:0;max-width:100%;box-sizing:border-box}

.bn-comic-poster-col{min-width:0;max-width:100%}
.bn-comic-poster-wrap{position:relative;width:100%;aspect-ratio:2/3;border-radius:0;overflow:hidden;background:var(--bn-surface-subtle);border:1px solid var(--bn-line);box-shadow:var(--bn-shadow-cover);box-sizing:border-box}
.bn-comic-poster{width:100%;height:100%;object-fit:cover;display:block}
.bn-comic-poster-badge-dir{position:absolute;bottom:8px;left:8px;right:8px;z-index:2;background:rgba(17,24,39,0.85);backdrop-filter:blur(4px);color:#FFF;font-size:12px;font-weight:700;padding:3px 6px;border-radius:0;text-align:center;letter-spacing:.02em}

.bn-comic-info{display:flex;flex-direction:column;min-width:0;max-width:100%}
.bn-comic-kickers{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.bn-pill-status-ongoing{background:rgba(16,185,129,0.1);color:#059669;border:1px solid rgba(16,185,129,0.25)}
.bn-pill-status-completed{background:rgba(59,130,246,0.1);color:#2563EB;border:1px solid rgba(59,130,246,0.25)}
.bn-comic-title{font-size:30px;font-weight:800;line-height:1.25;letter-spacing:-.025em;color:var(--bn-ink);margin:0 0 6px;word-break:break-word;overflow-wrap:anywhere}
.bn-comic-alt-titles{font-size:15px;color:var(--bn-muted);margin:0 0 14px;font-style:italic;word-break:break-word;overflow-wrap:anywhere}
.bn-comic-stats-bar{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:14px;padding:8px 0;border-top:1px solid var(--bn-line-subtle);border-bottom:1px solid var(--bn-line-subtle);min-width:0;max-width:100%}
.bn-comic-stat-chip{display:inline-flex;align-items:center;gap:5px;font-size:14.5px;color:var(--bn-muted);font-weight:500}
.bn-comic-stat-chip strong{color:var(--bn-ink);font-weight:700}
.bn-comic-genres{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.bn-genre-pill{display:inline-flex;align-items:center;padding:3px 9px;border-radius:0;font-size:13.5px;font-weight:600;background:var(--bn-surface-subtle);color:var(--bn-muted);border:1px solid var(--bn-line);transition:all .18s ease}
.bn-genre-pill:hover{background:var(--bn-accent);color:#FFF;border-color:var(--bn-accent)}

.bn-comic-short-quote{background:var(--bn-surface-subtle);border-left:3px solid var(--bn-accent);padding:12px 16px;border-radius:0;margin-bottom:20px}
.bn-comic-short-quote p{margin:0;font-size:15.5px;line-height:1.55;color:var(--bn-ink-soft)}

.bn-comic-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:auto;min-width:0;max-width:100%}
.bn-comic-actions form{display:inline-flex;margin:0}
.bn-btn-read-first{display:inline-flex;align-items:center;gap:6px;background:var(--bn-accent);color:#FFF!important;font-weight:700;font-size:15.5px;padding:10px 18px;border-radius: 0;border:none;box-shadow:0 2px 8px rgba(43,76,222,0.25);transition:all .2s ease;text-decoration:none}
.bn-btn-read-first:hover{background:var(--bn-accent-hover);color:#FFF!important;transform:translateY(-1px);box-shadow:0 4px 12px rgba(43,76,222,0.35)}
.bn-btn-read-latest{display:inline-flex;align-items:center;gap:6px;background:var(--bn-surface);color:var(--bn-ink)!important;font-weight:600;font-size:15px;padding:10px 16px;border-radius: 0;border:1px solid var(--bn-line);transition:all .2s ease;text-decoration:none}
.bn-btn-read-latest:hover{background:var(--bn-surface-hover);border-color:#D1D5DB;color:var(--bn-accent)!important}
.bn-btn-bookmark{display:inline-flex;align-items:center;gap:6px;background:var(--bn-surface);color:var(--bn-ink)!important;font-weight:600;font-size:15px;padding:10px 16px;border-radius: 0;border:1px solid var(--bn-line);cursor:pointer;transition:all .2s ease}
.bn-btn-bookmark:hover{background:var(--bn-surface-hover);border-color:#D1D5DB}
.bn-btn-bookmarked{background:var(--bn-accent-soft)!important;border-color:var(--bn-accent-border)!important;color:var(--bn-accent)!important}
.bn-btn-share{display:inline-flex;align-items:center;gap:6px;background:var(--bn-surface);color:var(--bn-muted)!important;font-weight:600;font-size:15px;padding:10px 14px;border-radius: 0;border:1px solid var(--bn-line);cursor:pointer;transition:all .2s ease}
.bn-btn-share:hover{background:var(--bn-surface-hover);color:var(--bn-ink)!important;border-color:#D1D5DB}
.bn-bm-text-desk{display:inline}
.bn-bm-text-mob{display:none}

.bn-comic-main-layout{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:28px;align-items:start;min-width:0;max-width:100%}
.bn-comic-main-col,.bn-comic-sidebar-col{min-width:0;max-width:100%}
.bn-card-box{background:var(--bn-surface);border:1px solid var(--bn-line);border-radius: 0;padding:22px;margin-bottom:24px;box-shadow:var(--bn-shadow-xs);min-width:0;max-width:100%;box-sizing:border-box}
.bn-card-box-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--bn-line-subtle)}
.bn-card-box-title{font-size:19px;font-weight:800;color:var(--bn-ink);display:flex;align-items:center;gap:8px;margin:0}
.bn-synopsis-content{font-size:16.5px;line-height:1.7;color:var(--bn-ink-soft);word-break:break-word}
.bn-synopsis-content p{margin:0 0 14px}
.bn-synopsis-content p:last-child{margin-bottom:0}

/* Chapter Explorer */
.bn-ch-explorer{display:flex;flex-direction:column;gap:12px;min-width:0;max-width:100%}
.bn-ch-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:4px;min-width:0}
.bn-ch-search-box{position:relative;flex:1;min-width:0}
.bn-ch-search-box svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--bn-subtle);pointer-events:none}
.bn-ch-search-box input{width:100%;height:38px;padding:0 12px 0 34px;border:1px solid var(--bn-line);border-radius:0;font-size:15px;color:var(--bn-ink);background:var(--bn-surface);box-sizing:border-box}
.bn-ch-search-box input:focus{border-color:var(--bn-accent);outline:none;box-shadow:0 0 0 3px var(--bn-accent-soft)}
.bn-btn-sort{height:38px;padding:0 12px;border:1px solid var(--bn-line);border-radius: 0;background:var(--bn-surface);color:var(--bn-muted);font-size:14.5px;font-weight:600;display:inline-flex;align-items:center;gap:5px;cursor:pointer;white-space:nowrap;transition:all .18s ease;flex-shrink:0}
.bn-btn-sort:hover{background:var(--bn-surface-hover);color:var(--bn-ink);border-color:#D1D5DB}
.bn-ch-list{display:flex;flex-direction:column;gap:8px;max-height:480px;overflow-y:auto;padding-right:4px;min-width:0;max-width:100%}
.bn-ch-list::-webkit-scrollbar{width:5px}
.bn-ch-list::-webkit-scrollbar-track{background:var(--bn-surface-subtle);border-radius:0}
.bn-ch-list::-webkit-scrollbar-thumb{background:var(--bn-line);border-radius:0}
.bn-ch-item{border:1px solid var(--bn-line-subtle);border-radius:0;background:var(--bn-surface);transition:all .18s ease;min-width:0;max-width:100%;box-sizing:border-box}
.bn-ch-item:hover{background:var(--bn-surface-hover);border-color:#D1D5DB;box-shadow:0 2px 6px rgba(0,0,0,0.03);transform:translateY(-1px)}
.bn-ch-item-link{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;text-decoration:none;color:inherit;min-width:0;box-sizing:border-box}
.bn-ch-item-left{display:flex;align-items:center;gap:12px;min-width:0;flex:1 1 0}
.bn-ch-badge{font-size:14px;font-weight:700;background:var(--bn-surface-subtle);border:1px solid var(--bn-line);padding:3px 8px;border-radius:0;color:var(--bn-ink);white-space:nowrap;flex-shrink:0}
.bn-ch-item:hover .bn-ch-badge{background:var(--bn-accent);color:#FFF;border-color:var(--bn-accent)}
.bn-ch-item-info{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 0}
.bn-ch-item-title{font-size:15.5px;font-weight:600;color:var(--bn-ink);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.bn-ch-item:hover .bn-ch-item-title{color:var(--bn-accent)}
.bn-ch-item-meta{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--bn-subtle);flex-wrap:wrap}
.bn-ch-item-date{font-size:13.5px;color:var(--bn-subtle);display:inline-flex;align-items:center;gap:4px}
.bn-ch-item-views-inline{display:none;font-size:13px;color:var(--bn-subtle)}
.bn-ch-item-right{display:flex;align-items:center;gap:12px;white-space:nowrap;flex-shrink:0}
.bn-ch-item-views{font-size:13.5px;color:var(--bn-subtle);display:inline-flex;align-items:center;gap:4px}
.bn-ch-cta{font-size:14px;font-weight:700;color:var(--bn-accent);display:inline-flex;align-items:center;gap:4px;padding:4px 9px;border-radius:0;background:var(--bn-accent-soft);flex-shrink:0;white-space:nowrap}

.bn-sidebar-title{font-size:17px;font-weight:800;color:var(--bn-ink);margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--bn-line-subtle)}
.bn-spec-list{display:flex;flex-direction:column;min-width:0}
.bn-spec-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--bn-line-subtle);font-size:14.5px;min-width:0}
.bn-spec-row:last-child{border-bottom:none}
.bn-spec-key{color:var(--bn-muted);font-weight:500;display:inline-flex;align-items:center;gap:6px;flex-shrink:0;white-space:nowrap}
.bn-spec-val{font-weight:600;color:var(--bn-ink);text-align:right;min-width:0;word-break:break-word;overflow-wrap:anywhere}
.bn-spec-val a{color:var(--bn-ink);text-decoration:none}
.bn-spec-val a:hover{color:var(--bn-accent)}
.bn-tags-cloud{display:flex;flex-wrap:wrap;gap:6px}
.bn-tag-chip{font-size:13.5px;color:var(--bn-muted);background:var(--bn-surface-subtle);border:1px solid var(--bn-line);padding:3px 8px;border-radius:0;text-decoration:none;transition:all .18s ease}
.bn-tag-chip:hover{background:var(--bn-accent);color:#FFF;border-color:var(--bn-accent)}
.bn-trust-box{background:var(--bn-surface-subtle);border:1px solid var(--bn-line);border-radius:0;padding:16px;box-sizing:border-box}
.bn-trust-item{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--bn-muted);margin-bottom:10px;min-width:0}
.bn-trust-item:last-child{margin-bottom:0}
.bn-trust-item svg{color:var(--bn-accent);flex-shrink:0;margin-top:2px}
.bn-trust-item span{min-width:0;word-break:break-word}

/* ===================================================
   CHAPTER READER STYLES
   =================================================== */
.bn-reader-wrap{min-height:100vh;display:flex;flex-direction:column;width:100%;max-width:100%;overflow-x:clip;padding-bottom:70px}
.bn-reader-progress{position:fixed;top:0;left:0;height:3px;background:var(--bn-accent);width:0%;z-index:1001;transition:width .1s ease}
.bn-reader-bc-wrap{max-width:1000px;width:100%;margin:0 auto;padding:28px 24px 0;box-sizing:border-box}
.bn-reader-bc-wrap .bn-breadcrumb{margin-bottom:20px}
.bn-reader-topbar{position:relative;z-index:40;background:var(--bn-header-bg);backdrop-filter:blur(12px);border-top:1px solid var(--bn-line);border-bottom:1px solid var(--bn-line);box-shadow:0 1px 8px rgba(0,0,0,0.03);width:100%}
.bn-reader-topbar-inner{max-width:1000px;margin:0 auto;padding:10px 24px;display:flex;align-items:center;justify-content:space-between;gap:12px;box-sizing:border-box;width:100%}
.bn-reader-back{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:700;color:var(--bn-ink);text-decoration:none;white-space:nowrap;transition:color .18s ease;flex-shrink:0}
.bn-reader-back:hover{color:var(--bn-accent)}
.bn-reader-comic-label{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bn-reader-center{display:flex;align-items:center;gap:8px;flex:1;justify-content:center;max-width:380px;min-width:0}
.bn-reader-select{height:34px;padding:0 10px;border:1px solid var(--bn-line);border-radius:0;background:var(--bn-surface);font-size:14.5px;font-weight:600;color:var(--bn-ink);width:100%;cursor:pointer;min-width:0}
.bn-reader-select:focus{border-color:var(--bn-accent);outline:none}
.bn-reader-nav-btns{display:flex;align-items:center;gap:6px;flex-shrink:0}
.bn-reader-nav-btn{display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 12px;border-radius:0;font-size:14px;font-weight:700;text-decoration:none;border:1px solid var(--bn-line);background:var(--bn-surface);color:var(--bn-ink);transition:all .18s ease;flex-shrink:0}
.bn-reader-nav-btn:hover:not(.disabled){background:var(--bn-surface-hover);border-color:#D1D5DB;color:var(--bn-accent)}
.bn-reader-nav-btn.bn-btn-next{background:var(--bn-accent);color:#FFF;border-color:var(--bn-accent)}
.bn-reader-nav-btn.bn-btn-next:hover:not(.disabled){background:var(--bn-accent-hover)}
.bn-reader-nav-btn.disabled{opacity:.4;pointer-events:none}
.bn-reader-theme-btn{height:34px;width:34px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:0;border:1px solid var(--bn-line);background:var(--bn-surface);color:var(--bn-muted);cursor:pointer;transition:all .18s ease;flex-shrink:0}
.bn-reader-theme-btn:hover{color:var(--bn-ink);border-color:#D1D5DB}
.bn-reader-container{max-width:1000px;margin:0 auto;padding:0 24px;width:100%;box-sizing:border-box}
.bn-reader-meta-header{text-align:center;padding:28px 16px 20px;border-bottom:1px solid var(--bn-line-subtle);margin-bottom:20px}
.bn-reader-meta-kicker{font-size:14px;font-weight:700;color:var(--bn-accent);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.bn-reader-meta-title{font-size:24px;font-weight:800;color:var(--bn-ink);margin:0 0 6px;line-height:1.3;word-break:break-word}
.bn-reader-meta-sub{font-size:15.5px;color:var(--bn-muted);margin:0 0 10px}
.bn-reader-meta-chips{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;font-size:14px;color:var(--bn-subtle)}
.bn-reader-pages{display:flex;flex-direction:column;align-items:center;width:100%;background:var(--bn-surface);max-width:100%;border-radius:0;overflow:hidden;box-shadow:0 1px 6px rgba(0,0,0,0.04);border:1px solid var(--bn-line-subtle)}
.bn-reader-page-item{position:relative;width:100%;margin:0;padding:0;display:block;background:var(--bn-surface-subtle);max-width:100%}
.bn-reader-img{display:block;width:100%;height:auto;margin:0 auto;border:none;max-width:100%}
.bn-reader-page-num{position:absolute;bottom:6px;right:8px;background:rgba(17,24,39,0.7);color:#FFF;font-size:12px;font-weight:700;padding:2px 6px;border-radius:0;opacity:0;transition:opacity .2s ease;pointer-events:none}
.bn-reader-page-item:hover .bn-reader-page-num{opacity:1}
.bn-reader-completion{background:var(--bn-surface);border:1px solid var(--bn-line);border-radius:0;padding:32px 24px;text-align:center;margin:32px 0 40px;box-shadow:var(--bn-shadow-xs)}
.bn-reader-completion-icon{width:56px;height:56px;border-radius: 0;background:var(--bn-green-soft);color:var(--bn-green);display:inline-flex;align-items:center;justify-content:center;margin-bottom:14px}
.bn-reader-completion-title{font-size:22px;font-weight:800;color:var(--bn-ink);margin:0 0 6px}
.bn-reader-completion-sub{font-size:15.5px;color:var(--bn-muted);margin:0 0 22px}
.bn-reader-completion-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;margin-bottom:20px}
.bn-reader-bottom-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:20px;border-top:1px solid var(--bn-line-subtle);max-width:480px;margin:0 auto}

/* ===================================================
   BOTTOM FLOATING READER TOOLBAR (ALWAYS ON TOP)
   =================================================== */
.bn-reader-bbar {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  background: var(--bn-header-bg) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-top: 1px solid var(--bn-line) !important;
  box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.12) !important;
  padding: 8px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1), opacity .25s ease !important;
  transform: translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.bn-reader-bbar.bn-bbar-hidden {
  transform: translateY(100%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.bn-reader-bbar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
}

.bn-bbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 42px;
  background: var(--bn-surface);
  border: 1px solid var(--bn-line);
  border-radius: 0 !important;
  color: var(--bn-ink);
  text-decoration: none;
  cursor: pointer;
  transition: all .18s ease;
  flex: 1;
  max-width: 90px;
  padding: 0;
  box-shadow: var(--bn-shadow-xs);
  outline: none;
}

.bn-bbar-btn:hover:not(.disabled) {
  background: var(--bn-surface-hover);
  border-color: var(--bn-accent);
  color: var(--bn-accent);
}

.bn-bbar-btn.bn-bbar-next {
  background: var(--bn-accent);
  color: #FFF;
  border-color: var(--bn-accent);
}

.bn-bbar-btn.bn-bbar-next:hover:not(.disabled) {
  background: var(--bn-accent-hover);
  color: #FFF;
  border-color: var(--bn-accent-hover);
}

.bn-bbar-btn.disabled {
  opacity: 0.35;
  pointer-events: none;
  cursor: not-allowed;
  background: var(--bn-surface-subtle);
  color: var(--bn-subtle);
}

/* Taxonomy Archive Styles */
.bn-button{display:inline-flex;align-items:center;justify-content:center;padding:11px 16px;border-radius:0;background:var(--bn-accent);border:1px solid var(--bn-accent);color:#fff;font-size:16px;font-weight:700}
.bn-button:hover{background:var(--bn-accent-hover);color:#fff}
.bn-button.ghost{background:var(--bn-surface);color:var(--bn-ink);border-color:var(--bn-line)}
.bn-badges{display:flex;gap:7px;flex-wrap:wrap}
.bn-badge{font-size:13px;color:var(--bn-accent);background:var(--bn-accent-soft);border-radius: 0;padding:5px 8px;font-weight:700}
.bn-arch-hero{background:var(--bn-surface);border:1px solid var(--bn-line);border-radius:0;padding:28px 30px;margin-bottom:24px;box-shadow:var(--bn-shadow-sm);position:relative;overflow:hidden;max-width:100%}
.bn-arch-hero::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--bn-accent) 0%,#4F46E5 50%,#3B82F6 100%)}
.bn-arch-kicker-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.bn-arch-kicker{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--bn-accent);background:var(--bn-accent-soft);padding:3px 9px;border-radius:0;border:1px solid var(--bn-accent-border)}
.bn-arch-hero h1{font-size:clamp(24px,3vw,32px);font-weight:800;letter-spacing:-.03em;color:var(--bn-ink);margin:0 0 10px;line-height:1.25;word-break:break-word}
.bn-arch-desc{font-size:16px;line-height:1.65;color:var(--bn-muted);margin:0 0 18px;max-width:75ch}
.bn-arch-stats{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.bn-stat-chip{display:inline-flex;align-items:center;gap:6px;background:var(--bn-surface-subtle);border:1px solid var(--bn-line);padding:5px 12px;border-radius:0;font-size:14.5px;color:var(--bn-muted);font-weight:500}
.bn-stat-chip strong{color:var(--bn-ink);font-weight:700}
.bn-person-profile{display:flex;align-items:center;gap:20px;margin-bottom:16px}
.bn-person-avatar{width:72px;height:72px;border-radius: 0;object-fit:cover;border:2px solid var(--bn-line);box-shadow:var(--bn-shadow-xs)}
.bn-person-avatar-fallback{width:72px;height:72px;border-radius: 0;background:var(--bn-accent-soft);color:var(--bn-accent);display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:800;border:2px solid var(--bn-accent-border);flex-shrink:0}
.bn-term-switcher{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:4px 0 16px;margin-bottom:12px;max-width:100%}
.bn-term-switcher::-webkit-scrollbar{display:none}
.bn-term-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:0;background:var(--bn-surface);border:1px solid var(--bn-line);color:var(--bn-ink);font-size:14.5px;font-weight:700;white-space:nowrap;transition:all .15s ease}
@media (max-width:640px){.bn-term-switcher{gap:6px;padding:2px 0 12px;margin-bottom:10px}.bn-term-pill{padding:6px 11px;font-size:13.5px}}
.bn-term-pill:hover{background:var(--bn-surface-hover);border-color:#D1D5DB;color:var(--bn-accent)}
.bn-term-pill.active{background:var(--bn-ink);color:var(--bn-bg);border-color:var(--bn-ink)}
.bn-term-pill .bn-pill-count{font-size:13px;font-weight:600;opacity:.75}
.bn-term-pill.active .bn-pill-count{color:var(--bn-bg);opacity:1}
.bn-arch-controls{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 18px;background:var(--bn-surface-subtle);border:1px solid var(--bn-line);border-radius:0;margin-bottom:22px;flex-wrap:wrap}
.bn-arch-count{font-size:15px;color:var(--bn-muted);font-weight:500}
.bn-arch-count strong{color:var(--bn-ink);font-weight:700}
.bn-arch-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bn-arch-search-form{display:inline-flex;align-items:center;position:relative}
.bn-arch-search-input{padding:7px 32px 7px 12px;border:1px solid var(--bn-line);border-radius:0;font-size:14.5px;background:var(--bn-surface);color:var(--bn-ink);width:190px;font-family:inherit;transition:border-color .15s,width .2s ease;box-sizing:border-box}
.bn-arch-search-input:focus{outline:none;border-color:var(--bn-accent);width:230px}
.bn-arch-search-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--bn-subtle);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.bn-arch-search-btn:hover{color:var(--bn-accent)}
.bn-arch-sort-select{padding:7px 12px;border:1px solid var(--bn-line);border-radius:0;font-size:14.5px;background:var(--bn-surface);color:var(--bn-ink);font-family:inherit;cursor:pointer;font-weight:600;box-sizing:border-box}
.bn-arch-sort-select:focus{outline:none;border-color:var(--bn-accent)}
.bn-arch-discovery{margin-top:44px;padding:26px;background:var(--bn-surface-subtle);border:1px solid var(--bn-line);border-radius:0}
.bn-arch-discovery h4{font-size:16px;font-weight:800;letter-spacing:-.02em;color:var(--bn-ink);margin:0 0 14px;text-transform:uppercase}
.bn-arch-discovery-chips{display:flex;gap:8px;flex-wrap:wrap}
.bn-arch-discovery-chips .bn-genre-tag{padding:6px 14px;font-size:14px;background:var(--bn-surface);border:1px solid var(--bn-line)}
.bn-arch-discovery-chips .bn-genre-tag:hover{background:var(--bn-accent-soft);border-color:var(--bn-accent-border);color:var(--bn-accent)}

/* Drawer Theme Selector Pills */
.bn-drawer-theme-pills{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.bn-theme-choice-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 6px;border-radius:0;font-size:14px;font-weight:700;background:var(--bn-surface-subtle);border:1px solid var(--bn-line);color:var(--bn-muted);cursor:pointer;transition:all .15s ease}
.bn-theme-choice-btn:hover{background:var(--bn-surface-hover);color:var(--bn-ink);border-color:#D1D5DB}
.bn-theme-choice-btn.active{background:var(--bn-accent)!important;color:#FFF!important;border-color:var(--bn-accent)!important;box-shadow:0 1px 4px rgba(43,76,222,0.25)}

/* ===================================================
   RESPONSIVE BREAKPOINTS (860px, 768px, 640px, 480px)
   =================================================== */
@media(max-width:860px){
  .bn-grid{grid-template-columns:repeat(3,1fr);gap:16px}
  .bn-features-bar{grid-template-columns:repeat(2,1fr)}
  .bn-comic-hero-content{grid-template-columns:180px 1fr;gap:22px;padding:24px 20px}
  .bn-comic-title{font-size:26px}
  .bn-comic-main-layout{grid-template-columns:1fr;gap:24px}
}

@media(max-width:768px){
  .bn-nav{display:none!important}
  .bn-header-actions-desk{display:none!important}
  .bn-headerin{padding:8px 16px;height:56px;gap:10px}
  .bn-brand{padding:4px 8px;border-radius:0}
  .bn-brandimg{width:95px}
  .bn-header-mob-actions{display:flex!important;align-items:center;gap:8px;flex-shrink:0}
  .bn-mob-btn{width:36px;height:36px;border-radius:0;border:1px solid var(--bn-line);background:var(--bn-surface-subtle);color:var(--bn-ink);display:inline-flex;align-items:center;justify-content:center;transition:all .15s ease;text-decoration:none}
  .bn-mob-btn:hover,.bn-mob-btn:active{background:var(--bn-surface-hover);border-color:#D1D5DB;color:var(--bn-accent)}
  .bn-menu-toggle{width:36px;height:36px;border-radius:0;border:1px solid var(--bn-line);background:var(--bn-surface-subtle);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;transition:all .15s ease}
  .bn-menu-toggle:hover,.bn-menu-toggle:active{background:var(--bn-surface-hover);border-color:#D1D5DB}
  .bn-menu-icon{width:17px;height:13px;position:relative;display:flex;flex-direction:column;justify-content:space-between}
  .bn-bar{display:block;width:100%;height:2px;background:var(--bn-ink);border-radius:0;transition:transform .2s ease,opacity .18s ease}
  .bn-header.is-menu-open .bn-bar-1{transform:translateY(5.5px) rotate(45deg)}
  .bn-header.is-menu-open .bn-bar-2{opacity:0}
  .bn-header.is-menu-open .bn-bar-3{transform:translateY(-5.5px) rotate(-45deg)}
  .bn-mobile-drawer{display:block!important;max-height:0;opacity:0;pointer-events:none;overflow:hidden;background:var(--bn-surface);border-top:1px solid var(--bn-line-subtle);border-bottom:1px solid var(--bn-line);box-shadow:0 12px 24px -4px rgba(17,24,39,0.08);transition:max-height .28s cubic-bezier(0.4,0,0.2,1),opacity .22s ease;width:100%;box-sizing:border-box}
  .bn-header.is-menu-open .bn-mobile-drawer{max-height:85vh;opacity:1;pointer-events:auto;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .bn-drawer-inner{padding:16px;display:flex;flex-direction:column;gap:14px;max-width:1000px;margin:0 auto}
  .bn-drawer-search-wrap{display:flex;align-items:center;position:relative;width:100%}
  .bn-drawer-search-wrap input{width:100%;height:40px;padding:0 70px 0 36px;border:1px solid var(--bn-line);border-radius:0;font-size:15px;background:var(--bn-surface-subtle);color:var(--bn-ink);outline:none;font-family:inherit;box-sizing:border-box}
  .bn-drawer-search-wrap input:focus{border-color:var(--bn-accent);background:var(--bn-surface);box-shadow:0 0 0 3px var(--bn-accent-soft)}
  .bn-drawer-search-wrap svg{position:absolute;left:11px;color:var(--bn-subtle);pointer-events:none}
  .bn-drawer-search-wrap button{position:absolute;right:4px;height:32px;padding:0 12px;background:var(--bn-accent);color:#FFF;border:none;border-radius:0;font-size:14px;font-weight:700;cursor:pointer}
  .bn-drawer-heading{font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--bn-subtle);margin-bottom:8px;display:block}
  .bn-drawer-grid{display:grid;grid-template-columns:1fr;gap:6px}
  .bn-drawer-link{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:0;font-size:15px;font-weight:600;color:var(--bn-ink);background:var(--bn-surface-subtle);text-decoration:none;transition:all .15s ease}
  .bn-drawer-link:hover,.bn-drawer-link:active{background:var(--bn-accent-soft);color:var(--bn-accent)}
  .bn-drawer-link-icon{width:28px;height:28px;border-radius:0;background:var(--bn-surface);border:1px solid var(--bn-line-subtle);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--bn-ink)}
  .bn-drawer-icon-home{color:var(--bn-ink)!important;background:var(--bn-surface)!important}
  .bn-drawer-icon-update{color:var(--bn-green)!important;background:var(--bn-green-soft)!important}
  .bn-drawer-icon-popular{color:var(--bn-gold)!important;background:var(--bn-gold-badge)!important}
  .bn-drawer-icon-browse{color:var(--bn-accent)!important;background:var(--bn-accent-soft)!important}
  .bn-drawer-icon-lib{color:var(--bn-purple)!important;background:var(--bn-purple-soft)!important}
  .bn-drawer-pills{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .bn-drawer-pill{display:inline-flex;align-items:center;justify-content:center;padding:8px 10px;border-radius:0;font-size:14px;font-weight:700;background:var(--bn-surface);border:1px solid var(--bn-line);color:var(--bn-ink);text-decoration:none;transition:all .15s ease;text-align:center}
  .bn-drawer-pill:hover,.bn-drawer-pill:active{border-color:var(--bn-accent);color:var(--bn-accent);background:var(--bn-accent-soft)}
  .bn-drawer-foot{padding-top:10px;border-top:1px solid var(--bn-line-subtle);font-size:13px;color:var(--bn-subtle);text-align:center}
}

@media(max-width:720px){
  .bn{padding:18px 16px 40px}
  .bn-headerin,.bn-footerin{padding-left:16px;padding-right:16px}
  .bn-hero-slider{margin-bottom:20px;border-radius: 0}
  .bn-hero-btn{width:30px;height:30px}
  .bn-hero-dots{bottom:14px;padding:4px 10px}
  .bn-hero-dot{width:7px;height:7px}
  .bn-hero-dot.is-active{width:18px}
  .bn-hero-slide .bn-hero{padding:22px 16px 48px 16px}
  .bn-hero{grid-template-columns:1fr;gap:20px;padding:22px 18px}
  .bn-hero-media{max-width:170px;margin:0 auto}
  .bn-hero h1{font-size:24px;text-align:center}
  .bn-hero-kickers{justify-content:space-between}
  .bn-hero-meta-bar,.bn-hero-genres,.bn-hero-actions{justify-content:center}
  .bn-hero-synopsis{text-align:center}
  .bn-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .bn-features-bar{grid-template-columns:1fr;gap:12px;padding:16px}
  .bn-spotlight{grid-template-columns:1fr;gap:16px;padding:16px}
  .bn-spotlight-media{max-width:140px;margin:0 auto}
  .bn-spotlight-content{text-align:center}
  .bn-spotlight-badge{align-self:center}
  .bn-spotlight-meta,.bn-spotlight-actions{justify-content:center}
  .bn-footer-top{flex-direction:column;gap:20px}
  .bn-footer-links{gap:24px}
  .bn-footer-bottom{flex-direction:column;text-align:center}
  .bn-filters{grid-template-columns:1fr}
  .bn-arch-hero{padding:20px 16px}
  .bn-arch-hero h1{font-size:24px}
  .bn-person-profile{flex-direction:column;text-align:center;gap:12px}
  .bn-arch-controls{flex-direction:column;align-items:stretch;gap:12px;padding:12px}
  .bn-arch-actions{flex-direction:column;align-items:stretch}
  .bn-arch-search-input{width:100%!important}
  .bn-arch-sort-select{width:100%}
}

@media(max-width:640px){
  .bn{padding:14px 12px 36px!important}
  .bn-grid.bn-grid-list{gap:12px}
  .bn-grid.bn-grid-list .bn-card,.bn-card.bn-card-list{padding:10px;gap:12px;border-radius: 0}
  .bn-grid.bn-grid-list .bn-card-media,.bn-card.bn-card-list .bn-card-media{width:98px;min-width:98px;max-width:98px;border-radius: 0 !important}
  .bn-grid.bn-grid-list .bn-badge-rank{font-size:11px;padding:1px 5px}
  .bn-card-media .bn-card-scrim,
  .bn-card-media .bn-badge-ch,
  .bn-card-media .bn-badge-type,
  .bn-card-media .bn-badge-rating{display:none!important}
  .bn-grid.bn-grid-list .bn-card-title,.bn-card.bn-card-list .bn-card-title{font-size:16px;margin-bottom:4px}
  .bn-grid.bn-grid-list .bn-card-synopsis,.bn-card.bn-card-list .bn-card-synopsis{font-size:13.5px;line-height:1.4;margin-bottom:6px;-webkit-line-clamp:2}
  .bn-grid.bn-grid-list .bn-card-meta,.bn-card.bn-card-list .bn-card-meta{font-size:13px;gap:8px}
  .bn-breadcrumb{font-size:13.5px;margin-bottom:12px;gap:4px}
  .bn-comic-hero{border-radius: 0;margin-bottom:16px}
  .bn-comic-hero-backdrop{height:220px}
  .bn-comic-hero-content{grid-template-columns:1fr;text-align:center;gap:16px;padding:20px 14px}
  .bn-comic-poster-wrap{max-width:215px;width:62%;min-width:180px;margin:0 auto;border-radius: 0;box-shadow:var(--bn-shadow-cover)}
  .bn-comic-kickers{justify-content:center;gap:6px;margin-bottom:6px}
  .bn-comic-title{font-size:22px;text-align:center;margin:0 0 6px}
  .bn-comic-alt-titles{font-size:13.5px;text-align:center;margin:0 0 10px}
  .bn-comic-stats-bar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:8px 0;margin:8px 0 12px;width:100%}
  .bn-comic-stat-chip{display:flex;align-items:center;justify-content:center;gap:4px;font-size:13px;padding:5px 6px;background:var(--bn-surface-subtle);border-radius:0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bn-comic-genres{justify-content:center;gap:4px;margin-bottom:10px}
  .bn-genre-pill{font-size:13px;padding:2px 7px}
  .bn-comic-short-quote{text-align:left;margin:10px 0 14px;padding:9px 12px}
  .bn-comic-short-quote p{font-size:14px;line-height:1.5}
  .bn-comic-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;margin-top:12px}
  .bn-comic-actions form{display:flex!important;width:100%;margin:0!important}
  .bn-btn-read-first{grid-column:1 / -1;width:100%;justify-content:center;padding:11px 14px;font-size:15.5px}
  .bn-btn-read-latest{width:100%;justify-content:center;padding:9px 6px;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bn-btn-bookmark{width:100%;justify-content:center;padding:9px 6px;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bn-bm-text-desk{display:none!important}
  .bn-bm-text-mob{display:inline!important}
  .bn-btn-share{grid-column:1 / -1;width:100%;justify-content:center;padding:8px 10px;font-size:13.5px}
  .bn-card-box{padding:14px 12px;border-radius: 0;margin-bottom:16px}
  .bn-card-box-header{margin-bottom:10px;padding-bottom:8px}
  .bn-card-box-title{font-size:17px}
  .bn-synopsis-content{font-size:15px;line-height:1.6}
  .bn-ch-toolbar{gap:6px}
  .bn-ch-search-box input{height:35px;font-size:14px;padding:0 8px 0 30px}
  .bn-ch-search-box svg{left:9px}
  .bn-btn-sort{height:35px;padding:0 9px;font-size:13px}
  .bn-ch-list{max-height:420px}
  .bn-ch-item-link{padding:8px 10px;gap:8px}
  .bn-ch-item-left{gap:8px}
  .bn-ch-badge{font-size:12.5px;padding:2px 5px}
  .bn-ch-item-title{font-size:14px}
  .bn-ch-item-date{font-size:12.5px}
  .bn-ch-item-views-inline{display:inline}
  .bn-ch-item-views{display:none!important}
  .bn-ch-cta{font-size:13px;padding:3px 6px}
  .bn-spec-row{font-size:13.5px;padding:7px 0}
  .bn-trust-box{padding:12px}
  .bn-trust-item{font-size:13px;margin-bottom:7px}
  .bn-reader-bc-wrap{padding:16px 12px 0}
  .bn-reader-topbar-inner{padding:10px 12px}
  .bn-reader-container{padding:0 12px}
  .bn-reader-meta-header{padding:20px 4px 16px;margin-bottom:16px}
  .bn-reader-pages{border-radius:0}
  .bn-reader-completion{margin:24px 0 32px;padding:24px 14px}
  .bn-reader-comic-label{display:none}
  .bn-reader-center{max-width:190px}
  .bn-reader-nav-btn span{display:none}
}

/* ===================================================
   SHARE MODAL (FACEBOOK, X, WHATSAPP, TELEGRAM, COPY)
   =================================================== */
.bn-share-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s cubic-bezier(0.4, 0, 0.2, 1);
}
.bn-share-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}
.bn-share-dialog {
  background: var(--bn-surface);
  border: 1px solid var(--bn-line);
  border-radius:0;
  width: 100%;
  max-width: 440px;
  box-shadow: var(--bn-shadow-md), 0 20px 40px rgba(0,0,0,0.22);
  box-sizing: border-box;
  overflow: hidden;
  transform: scale(0.95) translateY(10px);
  transition: transform .22s cubic-bezier(0.4, 0, 0.2, 1);
}
.bn-share-backdrop.is-open .bn-share-dialog {
  transform: scale(1) translateY(0);
}
.bn-share-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--bn-line-subtle);
  gap: 12px;
}
.bn-share-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.bn-share-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius:0;
  background: var(--bn-accent-soft);
  color: var(--bn-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bn-share-dialog-title {
  margin: 0;
  font-size:17px;
  font-weight: 800;
  color: var(--bn-ink);
  letter-spacing: -0.01em;
}
.bn-share-dialog-sub {
  margin: 2px 0 0;
  font-size:14px;
  color: var(--bn-subtle);
}
.bn-share-close {
  width: 32px;
  height: 32px;
  border-radius:0;
  border: 1px solid var(--bn-line);
  background: var(--bn-surface-subtle);
  color: var(--bn-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .15s ease;
  padding: 0;
  flex-shrink: 0;
}
.bn-share-close:hover {
  background: var(--bn-surface-hover);
  color: var(--bn-ink);
  border-color: var(--bn-accent);
}
.bn-share-dialog-body {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.bn-share-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius:0;
  background: var(--bn-surface-subtle);
  border: 1px solid var(--bn-line-subtle);
}
.bn-share-preview-badge {
  font-size:12px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius:0;
  background: var(--bn-accent);
  color: #fff;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.bn-share-preview-title {
  font-size:14.5px;
  font-weight: 700;
  color: var(--bn-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bn-share-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.bn-share-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius:0;
  border: 1px solid var(--bn-line);
  background: var(--bn-surface);
  text-decoration: none;
  font-size:15px;
  font-weight: 700;
  color: var(--bn-ink);
  transition: all .18s ease;
  box-sizing: border-box;
}
.bn-share-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--bn-shadow-sm);
}
.bn-share-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bn-share-wa .bn-share-btn-icon { color: #25D366; }
.bn-share-wa:hover { border-color: #25D366; background: rgba(37, 211, 102, 0.08); color: #128C7E; }
.bn-share-fb .bn-share-btn-icon { color: #1877F2; }
.bn-share-fb:hover { border-color: #1877F2; background: rgba(24, 119, 242, 0.08); color: #1877F2; }
.bn-share-x .bn-share-btn-icon { color: var(--bn-ink); }
.bn-share-x:hover { border-color: var(--bn-ink); background: var(--bn-surface-hover); color: var(--bn-ink); }
.bn-share-tg .bn-share-btn-icon { color: #229ED9; }
.bn-share-tg:hover { border-color: #229ED9; background: rgba(34, 158, 217, 0.08); color: #229ED9; }

.bn-share-copy-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bn-share-copy-label {
  font-size:13px;
  font-weight: 700;
  color: var(--bn-subtle);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.bn-share-copy-box {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
}
.bn-share-url-input {
  width: 100%;
  height: 40px;
  padding: 0 92px 0 12px;
  border-radius:0;
  border: 1px solid var(--bn-line);
  background: var(--bn-surface-subtle);
  color: var(--bn-muted);
  font-size:14.5px;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.bn-share-copy-btn {
  position: absolute;
  right: 4px;
  height: 32px;
  padding: 0 12px;
  border-radius:0;
  border: none;
  background: var(--bn-accent);
  color: #fff;
  font-size:14px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all .15s ease;
}
.bn-share-copy-btn:hover {
  background: var(--bn-accent-hover);
}
.bn-share-copy-btn.is-copied {
  background: var(--bn-green) !important;
}

.bn-share-native-wrap {
  padding-top: 4px;
  border-top: 1px solid var(--bn-line-subtle);
}
.bn-share-native-btn {
  width: 100%;
  height: 38px;
  border-radius:0;
  border: 1px dashed var(--bn-line);
  background: var(--bn-surface-subtle);
  color: var(--bn-ink);
  font-size:14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all .15s ease;
}
.bn-share-native-btn:hover {
  background: var(--bn-surface-hover);
  border-color: var(--bn-accent);
  color: var(--bn-accent);
}

/* ===================================================
   BLOG ARCHIVE & SINGLE ARTICLE STYLES
   =================================================== */
.bn-blog-page, .bn-blog-single-page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 28px 24px 48px;
  box-sizing: border-box;
}

/* Blog Hero Header */
.bn-blog-hero {
  background: var(--bn-surface);
  border: 1px solid var(--bn-line);
  border-radius: 0;
  padding: 36px 24px;
  margin-bottom: 30px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--bn-shadow-sm);
}
.bn-blog-hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--bn-accent) 0%, #6366F1 50%, #3B82F6 100%);
}
.bn-blog-hero-inner {
  max-width: 760px;
  margin: 0 auto;
}
.bn-blog-hero-badge {
  margin-bottom: 12px;
}
.bn-blog-hero-title {
  font-size: 32px;
  font-weight: 800;
  color: var(--bn-ink);
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}
.bn-blog-hero-desc {
  font-size: 16px;
  color: var(--bn-muted);
  line-height: 1.6;
  margin: 0 0 20px;
}

/* Category Filter Pills */
.bn-blog-cat-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}
.bn-blog-cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 0;
  border: 1px solid var(--bn-line);
  background: var(--bn-surface-subtle);
  color: var(--bn-ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all .18s ease;
}
.bn-blog-cat-pill:hover,
.bn-blog-cat-pill.is-active {
  background: var(--bn-accent);
  color: #FFF;
  border-color: var(--bn-accent);
}
.bn-blog-cat-count {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.08);
}
.bn-blog-cat-pill.is-active .bn-blog-cat-count {
  background: rgba(255, 255, 255, 0.25);
}

/* Blog Layout Grid: Main + Sidebar */
.bn-blog-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 30px;
  align-items: start;
}
@media (max-width: 960px) {
  .bn-blog-layout {
    grid-template-columns: 1fr;
  }
}
.bn-blog-main-col {
  min-width: 0;
}

/* Blog Cards Grid */
.bn-blog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
@media (max-width: 680px) {
  .bn-blog-grid {
    grid-template-columns: 1fr;
  }
}

/* Blog Card */
.bn-blog-card {
  background: var(--bn-surface);
  border: 1px solid var(--bn-line);
  border-radius: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow: var(--bn-shadow-xs);
}
.bn-blog-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--bn-shadow-md);
  border-color: var(--bn-accent);
}
.bn-blog-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--bn-surface-subtle);
  overflow: hidden;
}
.bn-blog-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.bn-blog-card:hover .bn-blog-card-img {
  transform: scale(1.04);
}
.bn-blog-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1E293B 0%, #334155 100%);
  color: rgba(255, 255, 255, 0.4);
  font-size: 32px;
}
.bn-blog-card-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--bn-accent);
  color: #FFF;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 0;
  text-decoration: none;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.bn-blog-card-body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.bn-blog-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--bn-muted);
  margin-bottom: 8px;
}
.bn-blog-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.bn-blog-meta-dot {
  opacity: 0.5;
}
.bn-blog-card-title {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.4;
  margin: 0 0 10px;
  color: var(--bn-ink);
}
.bn-blog-card-title a {
  color: inherit;
  text-decoration: none;
  transition: color .18s ease;
}
.bn-blog-card-title a:hover {
  color: var(--bn-accent);
}
.bn-blog-card-excerpt {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--bn-muted);
  margin: 0 0 16px;
  flex-grow: 1;
}
.bn-blog-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--bn-line-subtle);
  font-size: 13.5px;
  margin-top: auto;
}
.bn-blog-card-author {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  color: var(--bn-ink);
}
.bn-blog-author-avatar {
  width: 24px;
  height: 24px;
  border-radius: 0;
  background: var(--bn-accent);
  color: #FFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
}
.bn-blog-card-readmore {
  color: var(--bn-accent);
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: transform .18s ease;
}
.bn-blog-card-readmore:hover {
  transform: translateX(3px);
}

/* Pagination */
.bn-blog-pagination {
  margin-top: 36px;
  display: flex;
  justify-content: center;
}
.bn-blog-pagination ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 6px;
  flex-wrap: wrap;
}
.bn-blog-pagination a,
.bn-blog-pagination span.current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--bn-line);
  border-radius: 0;
  background: var(--bn-surface);
  color: var(--bn-ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  transition: all .18s ease;
}
.bn-blog-pagination a:hover,
.bn-blog-pagination span.current {
  background: var(--bn-accent);
  color: #FFF;
  border-color: var(--bn-accent);
}

/* Empty State */
.bn-blog-empty {
  text-align: center;
  padding: 48px 24px;
  background: var(--bn-surface);
  border: 1px solid var(--bn-line);
  border-radius: 0;
}
.bn-blog-empty-icon {
  font-size: 40px;
  color: var(--bn-muted);
  margin-bottom: 12px;
}

/* Sidebar Widgets */
.bn-blog-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.bn-blog-widget {
  padding: 22px;
  background: var(--bn-surface);
  border: 1px solid var(--bn-line);
  border-radius: 0;
  box-shadow: var(--bn-shadow-xs);
}
.bn-blog-widget .bn-widget-title {
  font-size: 16px;
  font-weight: 800;
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--bn-ink);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--bn-accent);
}

/* Widget Search Form */
.bn-blog-search-form {
  display: flex;
  gap: 8px;
}
.bn-blog-search-form input {
  flex-grow: 1;
  padding: 9px 12px;
  border: 1px solid var(--bn-line);
  border-radius: 0;
  background: var(--bn-surface-subtle);
  color: var(--bn-ink);
  font-size: 14px;
  outline: none;
}
.bn-blog-search-form input:focus {
  border-color: var(--bn-accent);
}
.bn-blog-search-form button {
  padding: 9px 14px;
  background: var(--bn-accent);
  color: #FFF;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background .18s ease;
}
.bn-blog-search-form button:hover {
  background: var(--bn-accent-hover);
}

/* Widget Categories List */
.bn-blog-widget-cats {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bn-blog-widget-cats a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-radius: 0;
  text-decoration: none;
  color: var(--bn-ink);
  font-size: 14px;
  background: var(--bn-surface-subtle);
  transition: all .18s ease;
}
.bn-blog-widget-cats a:hover {
  background: var(--bn-accent);
  color: #FFF;
}
.bn-blog-widget-cats a:hover .bn-cat-badge {
  background: rgba(255, 255, 255, 0.25);
  color: #FFF;
}
.bn-cat-badge {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.08);
  font-weight: 700;
}

/* Widget Comics List */
.bn-blog-widget-comics {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bn-widget-comic-item {
  display: flex;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  align-items: center;
  padding: 6px 8px;
  border-radius: 0;
  transition: background .18s ease;
}
.bn-widget-comic-item:hover {
  background: var(--bn-surface-subtle);
}
.bn-widget-comic-img {
  width: 48px;
  height: 64px;
  object-fit: cover;
  border-radius: 0;
  flex-shrink: 0;
}
.bn-widget-comic-info {
  min-width: 0;
  flex-grow: 1;
}
.bn-widget-comic-title {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--bn-ink);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bn-widget-comic-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--bn-muted);
}
.bn-widget-rating {
  color: #F59E0B;
  font-weight: 700;
}

/* ===================================================
   SINGLE BLOG POST (DETAIL)
   =================================================== */
.bn-article-main {
  background: var(--bn-surface);
  border: 1px solid var(--bn-line);
  border-radius: 0;
  padding: 32px 28px;
  box-shadow: var(--bn-shadow-sm);
}
@media (max-width: 680px) {
  .bn-article-main {
    padding: 22px 16px;
  }
}
.bn-article-header {
  margin-bottom: 24px;
}
.bn-article-cat {
  margin-bottom: 12px;
}
.bn-article-title {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--bn-ink);
  margin: 0 0 16px;
  letter-spacing: -0.02em;
}
@media (max-width: 680px) {
  .bn-article-title {
    font-size: 24px;
  }
}
.bn-article-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--bn-line-subtle);
}
.bn-article-author-info {
  display: flex;
  align-items: center;
  gap: 12px;
}
.bn-article-author-avatar {
  width: 40px;
  height: 40px;
  border-radius: 0;
  background: var(--bn-accent);
  color: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 800;
  flex-shrink: 0;
}
.bn-article-author-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--bn-ink);
  display: block;
}
.bn-article-meta-sub {
  font-size: 13px;
  color: var(--bn-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.bn-share-btn-compact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--bn-line);
  border-radius: 0;
  background: var(--bn-surface-subtle);
  color: var(--bn-ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .18s ease;
}
.bn-share-btn-compact:hover {
  border-color: var(--bn-accent);
  color: var(--bn-accent);
}

/* Featured Media */
.bn-article-featured-image {
  margin-bottom: 28px;
  border-radius: 0;
  overflow: hidden;
  border: 1px solid var(--bn-line-subtle);
}
.bn-article-featured-image img {
  width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: cover;
  display: block;
}

/* Article Typography (Prose) */
.bn-article-content {
  font-size: 17px;
  line-height: 1.85;
  color: var(--bn-ink);
  word-break: break-word;
}
.bn-article-content h2 {
  font-size: 23px;
  font-weight: 800;
  margin: 34px 0 16px;
  padding-left: 12px;
  border-left: 4px solid var(--bn-accent);
  color: var(--bn-ink);
  line-height: 1.4;
}
.bn-article-content h3 {
  font-size: 19px;
  font-weight: 700;
  margin: 26px 0 12px;
  color: var(--bn-ink);
  line-height: 1.4;
}
.bn-article-content p {
  margin: 0 0 20px;
}
.bn-article-content blockquote {
  border-left: 4px solid var(--bn-accent);
  background: var(--bn-surface-subtle);
  padding: 18px 22px;
  border-radius: 0;
  margin: 24px 0;
  font-style: italic;
  color: var(--bn-ink);
}
.bn-article-content ul,
.bn-article-content ol {
  margin: 0 0 20px 22px;
  padding: 0;
}
.bn-article-content li {
  margin-bottom: 8px;
}
.bn-article-content img {
  max-width: 100%;
  height: auto;
  border-radius: 0;
  margin: 20px 0;
}

/* Footer Section */
.bn-article-footer {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--bn-line-subtle);
}
.bn-article-tags {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.bn-tags-label {
  font-weight: 700;
  font-size: 14px;
  color: var(--bn-muted);
}
.bn-tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bn-tag-pill {
  font-size: 13px;
  padding: 4px 12px;
  background: var(--bn-surface-subtle);
  border: 1px solid var(--bn-line);
  border-radius: 0;
  text-decoration: none;
  color: var(--bn-ink);
  transition: all .18s ease;
}
.bn-tag-pill:hover {
  background: var(--bn-accent);
  color: #FFF;
  border-color: var(--bn-accent);
}

/* Share Bar */
.bn-article-share-bar {
  margin-bottom: 26px;
  padding: 16px 20px;
  background: var(--bn-surface-subtle);
  border: 1px solid var(--bn-line);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.bn-share-bar-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--bn-ink);
}
.bn-share-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.bn-share-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 0;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  color: #FFF;
  cursor: pointer;
  border: none;
  transition: opacity .18s ease;
}
.bn-share-link:hover {
  opacity: 0.9;
}
.bn-share-wa { background: #25D366; }
.bn-share-tg { background: #229ED9; }
.bn-share-fb { background: #1877F2; }
.bn-share-copy {
  background: var(--bn-surface);
  color: var(--bn-ink);
  border: 1px solid var(--bn-line);
}
.bn-share-copy:hover {
  border-color: var(--bn-accent);
  color: var(--bn-accent);
}

/* Author Box */
.bn-author-box {
  display: flex;
  gap: 16px;
  padding: 20px;
  background: var(--bn-surface-subtle);
  border: 1px solid var(--bn-line);
  border-radius: 0;
  margin-bottom: 26px;
  align-items: center;
}
.bn-author-avatar-big {
  width: 52px;
  height: 52px;
  border-radius: 0;
  background: var(--bn-accent);
  color: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  flex-shrink: 0;
}
.bn-author-details {
  min-width: 0;
}
.bn-author-badge {
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--bn-accent);
  letter-spacing: 0.04em;
  display: block;
}
.bn-author-title {
  font-size: 16px;
  font-weight: 800;
  margin: 2px 0 4px;
  color: var(--bn-ink);
}
.bn-author-bio {
  font-size: 14px;
  line-height: 1.5;
  color: var(--bn-muted);
  margin: 0;
}

/* Post Navigation */
.bn-post-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  margin-top: 24px;
  width: 100%;
  box-sizing: border-box;
}
.bn-post-nav-card {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  padding: 14px 18px;
  background: var(--bn-surface-subtle);
  border: 1px solid var(--bn-line);
  border-radius: 0;
  text-decoration: none;
  color: inherit;
  transition: all .18s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.bn-post-nav-card:hover {
  border-color: var(--bn-accent);
  transform: translateY(-2px);
}
.bn-post-nav-empty {
  visibility: hidden;
  border: none !important;
  background: transparent !important;
  pointer-events: none;
}
.bn-post-nav-next {
  text-align: right;
  align-items: flex-end;
}
.bn-post-nav-label {
  font-size: 12px;
  font-weight: 800;
  color: var(--bn-accent);
  margin-bottom: 4px;
}
.bn-post-nav-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  white-space: normal;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--bn-ink);
  line-height: 1.4;
  margin: 0;
}
@media (max-width: 600px) {
  .bn-post-nav {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .bn-post-nav-empty {
    display: none;
  }
  .bn-post-nav-next {
    text-align: left;
    align-items: flex-start;
  }
}

/* Related Articles Widget */
.bn-widget-articles {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bn-widget-article-item {
  display: flex;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  align-items: center;
  padding: 6px 8px;
  border-radius: 0;
  transition: background .18s ease;
}
.bn-widget-article-item:hover {
  background: var(--bn-surface-subtle);
}
.bn-widget-article-thumb {
  width: 64px;
  height: 48px;
  object-fit: cover;
  border-radius: 0;
  flex-shrink: 0;
}
.bn-widget-article-nothumb {
  width: 64px;
  height: 48px;
  background: var(--bn-surface-subtle);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bn-muted);
  flex-shrink: 0;
  font-size: 20px;
}
.bn-widget-article-info {
  min-width: 0;
  flex-grow: 1;
}
.bn-widget-article-title {
  font-size: 13.5px;
  font-weight: 700;
  margin: 0 0 3px;
  color: var(--bn-ink);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bn-widget-article-date {
  font-size: 12px;
  color: var(--bn-muted);
}

/* Single Page Template Styling */
.bn-single-page-wrapper {
  max-width: 1000px;
  margin: 0 auto;
  padding: 28px 24px 56px;
  box-sizing: border-box;
}
.bn-page-card {
  padding: 36px 40px;
  margin-top: 16px;
  background: var(--bn-surface);
  border: 1px solid var(--bn-line);
  border-radius: 0;
  box-shadow: var(--bn-shadow-xs);
}
@media (max-width: 768px) {
  .bn-single-page-wrapper {
    padding: 16px 12px 40px;
  }
  .bn-page-card {
    padding: 22px 18px;
  }
}
.bn-page-header {
  border-bottom: 1px solid var(--bn-line-subtle);
  padding-bottom: 20px;
  margin-bottom: 28px;
}
.bn-page-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--bn-ink);
  line-height: 1.3;
  margin: 0 0 10px 0;
  letter-spacing: -0.02em;
}
@media (max-width: 768px) {
  .bn-page-title {
    font-size: 22px;
  }
}
.bn-page-meta {
  font-size: 13px;
  color: var(--bn-muted);
  display: flex;
  align-items: center;
  gap: 16px;
}
.bn-page-body {
  color: var(--bn-ink);
  font-size: 16px;
  line-height: 1.8;
}
.bn-page-body h2 {
  font-size: 21px;
  font-weight: 800;
  color: var(--bn-ink);
  margin: 34px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--bn-line-subtle);
  letter-spacing: -0.01em;
}
.bn-page-body h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--bn-ink);
  margin: 26px 0 10px;
}
.bn-page-body p {
  margin: 0 0 16px;
}
.bn-page-body ul, .bn-page-body ol {
  margin: 0 0 20px 22px;
  padding: 0;
}
.bn-page-body li {
  margin-bottom: 8px;
}
.bn-page-body a {
  color: var(--bn-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bn-page-body a:hover {
  color: var(--bn-accent-hover, var(--bn-ink));
}
.bn-page-body blockquote {
  margin: 22px 0;
  padding: 16px 20px;
  border-left: 4px solid var(--bn-accent);
  background: var(--bn-surface-subtle);
  border-radius: 0;
  font-style: italic;
  color: var(--bn-ink-subtle);
}




.bn-browse-header {
  margin-bottom: 20px;
}
.bn-browse-title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--bn-ink);
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.bn-browse-desc {
  font-size: 14.5px;
  color: var(--bn-subtle);
  margin: 0;
  line-height: 1.5;
}
.bn-badge-count {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  background: var(--bn-accent-soft);
  color: var(--bn-accent);
  border: 1px solid var(--bn-accent);
  border-radius: 0 !important;
  vertical-align: middle;
}

/* ===================================================
   SHARP SQUARE DESIGN SYSTEM (ZERO BORDER-RADIUS)
   =================================================== */
.bn,
.bn *,
.bn *::before,
.bn *::after,
.bn-hero,
.bn-hero-slider,
.bn-hero-slide,
.bn-hero-btn,
.bn-hero-dot,
.bn-hero-dots,
.bn-card,
.bn-card-box,
.bn-card-media,
.bn-cover,
.bn-btn,
.bn-pill,
.bn-badge,
.bn-badge-rank,
.bn-badge-type,
.bn-badge-rating,
.bn-badge-ch,
.bn-badge-status,
.bn-spotlight,
.bn-spotlight-media,
.bn-genre-tag,
.bn-genre-pill,
.bn-cat-pill,
.bn-cat-badge,
.bn-empty-card,
.bn-empty-icon,
.bn-comic-hero,
.bn-comic-poster-wrap,
.bn-comic-poster,
.bn-btn-read-first,
.bn-btn-read-latest,
.bn-btn-bookmark,
.bn-btn-share,
.bn-btn-sort,
.bn-ch-item,
.bn-ch-badge,
.bn-ch-search-box input,
.bn-reader-topbar,
.bn-reader-completion-icon,
.bn-person-avatar,
.bn-person-avatar-fallback,
.bn-page-card,
.bn-blog-hero,
.bn-blog-card,
.bn-blog-author-avatar,
.bn-article-main,
.bn-article-featured-image,
.bn-article-content img,
.bn-author-box,
.bn-author-avatar-big,
.bn-widget-card,
.bn-widget-comic-img,
.bn-widget-article-thumb,
.bn-widget-article-nothumb,
.bn-share-modal-box,
.bn-share-btn,
.btt-btn,
#bttBtn {
  border-radius: 0 !important;
}

/* ===================================================
   FLOATING BACK TO TOP BUTTON (SHARP SQUARE & PORTABLE)
   =================================================== */
.btt-btn, #bttBtn {
  position: fixed !important;
  right: 24px !important;
  bottom: 24px !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 0 !important;
  background: var(--bn-accent) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(12px) !important;
  transition: bottom 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease, visibility 0.22s ease, transform 0.22s ease, background-color 0.15s ease !important;
  z-index: 99999 !important;
  line-height: 0 !important;
  padding: 0 !important;
}
.btt-btn.is-visible, #bttBtn.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}
.btt-btn:hover, #bttBtn:hover {
  background: var(--bn-accent-hover) !important;
  transform: translateY(-2px) !important;
}
.btt-btn:focus-visible, #bttBtn:focus-visible {
  outline: 2px solid var(--bn-accent) !important;
  outline-offset: 2px !important;
}
.btt-btn svg, #bttBtn svg {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  stroke: currentColor !important;
}

/* Chapter Reader Placement: Float cleanly above 59px bottom toolbar */
body.single-chapter .btt-btn,
body.single-chapter #bttBtn,
body.bn-reader-active .btt-btn,
body.bn-reader-active #bttBtn {
  bottom: 80px !important;
}

/* When bottom bar auto-hides at completion card, drop back to standard bottom */
body.single-chapter:has(.bn-reader-bbar.bn-bbar-hidden) .btt-btn,
body.single-chapter:has(.bn-reader-bbar.bn-bbar-hidden) #bttBtn,
body.single-chapter.bn-bbar-is-hidden .btt-btn,
body.single-chapter.bn-bbar-is-hidden #bttBtn {
  bottom: 24px !important;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .btt-btn, #bttBtn {
    right: 16px !important;
    bottom: 16px !important;
  }
  body.single-chapter .btt-btn,
  body.single-chapter #bttBtn,
  body.bn-reader-active .btt-btn,
  body.bn-reader-active #bttBtn {
    bottom: 74px !important;
    right: 16px !important;
  }
  body.single-chapter:has(.bn-reader-bbar.bn-bbar-hidden) .btt-btn,
  body.single-chapter:has(.bn-reader-bbar.bn-bbar-hidden) #bttBtn,
  body.single-chapter.bn-bbar-is-hidden .btt-btn,
  body.single-chapter.bn-bbar-is-hidden #bttBtn {
    bottom: 16px !important;
    right: 16px !important;
  }
}

/* ===================================================
   CONTACT PAGE STYLING (SHARP SQUARE & CLEAN GRID)
   =================================================== */
.bn-contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 28px;
  margin-top: 24px;
}
@media (max-width: 860px) {
  .bn-contact-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
.bn-contact-info-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.bn-contact-info-card {
  padding: 20px 22px;
  background: var(--bn-surface-alt);
  border: 1px solid var(--bn-line);
  border-radius: 0 !important;
}
.bn-contact-info-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--bn-ink);
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.bn-contact-info-card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--bn-muted);
  margin: 0;
}
.bn-contact-email-link {
  display: inline-block;
  margin-top: 8px;
  font-weight: 700;
  color: var(--bn-accent);
  text-decoration: none;
}
.bn-contact-email-link:hover {
  text-decoration: underline;
}

/* Contact Form Wrap */
.bn-contact-form-wrap {
  background: var(--bn-surface);
  border: 1px solid var(--bn-line);
  padding: 26px 28px;
  border-radius: 0 !important;
}
.bn-contact-form-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--bn-ink);
  margin: 0 0 18px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bn-line);
}
.bn-contact-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.bn-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 600px) {
  .bn-form-row {
    grid-template-columns: 1fr;
  }
}
.bn-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bn-form-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--bn-ink);
}
.bn-form-label span.req {
  color: #EF4444;
}
.bn-form-input,
.bn-form-select,
.bn-form-textarea {
  width: 100%;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 14px;
  color: var(--bn-ink);
  background: var(--bn-bg);
  border: 1px solid var(--bn-line);
  border-radius: 0 !important;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.bn-form-input:focus,
.bn-form-select:focus,
.bn-form-textarea:focus {
  outline: none;
  border-color: var(--bn-accent);
  box-shadow: 0 0 0 2px var(--bn-accent-subtle);
}
.bn-form-textarea {
  min-height: 130px;
  resize: vertical;
}
.bn-form-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: #FFFFFF !important;
  background: var(--bn-accent);
  border: 1px solid transparent;
  border-radius: 0 !important;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
  margin-top: 4px;
}
.bn-form-btn:hover {
  background: var(--bn-accent-hover);
  transform: translateY(-1px);
}
.bn-form-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}
.bn-form-feedback {
  padding: 12px 16px;
  font-size: 14px;
  border-radius: 0 !important;
  display: none;
  line-height: 1.5;
}
.bn-form-feedback.is-success {
  display: block;
  background: rgba(16, 185, 129, 0.12);
  color: #10B981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.bn-form-feedback.is-error {
  display: block;
  background: rgba(239, 68, 68, 0.12);
  color: #EF4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}