/* =========================================================
   MangaChapters — Glassmorphism design system
   Pixel-matched to the reference build:
     deep #05070d · purpleGlow #7c3aed · cyanGlow #22d3ee
     font: Outfit · glass panels · neon gradients
   ========================================================= */

:root {
  --mc-deep: #05070d;
  --mc-deep-card: hsla(0, 0%, 100%, 0.04);
  --mc-purple: #7c3aed;
  --mc-cyan: #22d3ee;
  --mc-panel: rgba(255, 255, 255, 0.05);
  --mc-panel-border: rgba(255, 255, 255, 0.08);
  --mc-white-5: rgba(255, 255, 255, 0.05);
  --mc-white-10: rgba(255, 255, 255, 0.10);
  --mc-white-15: rgba(255, 255, 255, 0.15);
  --mc-white-20: rgba(255, 255, 255, 0.20);
  --mc-text: #ffffff;
  --mc-text-2: #d4d4d8;   /* zinc-300 */
  --mc-text-3: #a1a1aa;   /* zinc-400 */
  --mc-text-4: #71717a;   /* zinc-500 */
  --mc-text-5: #52525b;   /* zinc-600 */
  --mc-shadow-glass: 0 0 25px rgba(124, 58, 237, 0.15);
  --mc-shadow-neon: 0 0 15px rgba(124, 58, 237, 0.35);
  --mc-grad: linear-gradient(to right, var(--mc-purple), var(--mc-cyan));
  --mc-radius: 1rem;
  --mc-container: 80rem;
  --mc-gutter: 1.5rem;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; border: 0 solid rgba(255,255,255,0.1); }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  background-color: var(--mc-deep);
  color: var(--mc-text);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .3s, color .3s;
}
img { max-width: 100%; height: auto; -webkit-user-drag: none; }
a { color: inherit; text-decoration: none; }
p a { color: var(--mc-cyan); }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, h6 { margin: 0; }
p { margin: 0 0 1rem; }
ul, ol { margin: 0; padding: 0; }

::selection { background: rgba(124, 58, 237, 0.3); color: #fff; }
:focus-visible { outline: 2px solid rgba(124, 58, 237, 0.7); outline-offset: 2px; border-radius: 6px; }

/* Themed scrollbar */
* { scrollbar-width: thin; scrollbar-color: rgba(124, 58, 237, 0.45) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.55), rgba(34, 211, 238, 0.45));
  border-radius: 999px; border: 2px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(124,58,237,.85), rgba(34,211,238,.7)); background-clip: padding-box; }

/* Skip link */
.mc-skip {
  position: absolute; left: -9999px; top: 0; z-index: 9999;
}
.mc-skip:focus {
  position: fixed; left: .5rem; top: .5rem; padding: .5rem 1rem;
  background: var(--mc-purple); color: #fff; border-radius: .5rem;
}

/* ---------- Layout helpers ---------- */
.mc-container { max-width: var(--mc-container); margin-left: auto; margin-right: auto; padding-left: var(--mc-gutter); padding-right: var(--mc-gutter); }
.mc-section { padding-top: 2rem; padding-bottom: 2rem; }
@media (min-width: 1024px) { .mc-section { padding-top: 2.5rem; padding-bottom: 2.5rem; } }

/* ---------- Primitives ---------- */
.glass-panel {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: var(--mc-radius);
}
.mc-grad-text {
  background-image: var(--mc-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.text-glow { text-shadow: 0 0 10px rgba(124, 58, 237, 0.5); }
.mc-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .875rem 2rem; border-radius: 9999px;
  font-weight: 700; color: #fff;
  background-image: linear-gradient(to right, var(--mc-purple), var(--mc-cyan));
  box-shadow: var(--mc-shadow-neon);
  border: 0; cursor: pointer;
  transition: transform .3s, box-shadow .3s, background-color .3s, border-color .3s;
}
.mc-btn:hover { transform: translateY(-2px); box-shadow: 0 0 25px rgba(124, 58, 237, 0.7); }
.mc-btn-ghost {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .875rem 1.5rem; border-radius: 9999px;
  font-weight: 600; color: var(--mc-text-2);
  background: var(--mc-white-5); border: 1px solid var(--mc-white-10);
  transition: background-color .3s, color .3s;
}
.mc-btn-ghost:hover { background: var(--mc-white-10); color: #fff; }

/* ---------- Animations ---------- */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes ping { 0% { opacity: 1; } 75%, 100% { opacity: 0; transform: scale(2); } }
.animate-fade-in-up { animation: fadeInUp .6s cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; }
.animate-fade-in { animation: fadeIn .6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-float { animation: float 6s ease-in-out infinite; }
.animate-shimmer {
  background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
}
.delay-75 { animation-delay: 75ms; } .delay-100 { animation-delay: 100ms; }
.delay-150 { animation-delay: 150ms; } .delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; } .delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }
[x-cloak] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ---------- Header ---------- */
.mc-header { position: sticky; top: 0; z-index: 50; width: 100%; padding: 1rem var(--mc-gutter); transition: all .3s; }
.mc-nav {
  max-width: var(--mc-container); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 1.5rem; border-radius: var(--mc-radius);
  box-shadow: var(--mc-shadow-glass); border: 1px solid var(--mc-white-10);
}
.mc-logo { display: flex; align-items: center; gap: .5rem; font-size: 1.5rem; font-weight: 900; letter-spacing: .05em; transition: filter .3s; }
.mc-logo:hover { filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.5)); }
.mc-logo img { max-height: 44px; width: auto; }
.mc-nav-links { display: none; align-items: center; gap: 2rem; font-weight: 500; }
.mc-nav-links a { transition: color .15s; }
.mc-nav-links a:hover { color: var(--mc-cyan); }
.mc-nav-actions { display: flex; align-items: center; gap: .75rem; }
.mc-icon-btn {
  padding: .5rem; border-radius: .75rem; background: var(--mc-white-5);
  border: 1px solid var(--mc-white-10); cursor: pointer; line-height: 0;
  transition: background-color .15s;
}
.mc-icon-btn:hover { background: var(--mc-white-10); }
.mc-icon-btn svg { width: 1.25rem; height: 1.25rem; }
.mc-menu-toggle { display: block; }
.mc-mobile-drawer { display: none; }
@media (min-width: 768px) {
  .mc-nav-links { display: flex; }
  .mc-menu-toggle { display: none; }
}
.mc-mobile-drawer.open {
  display: block; margin-top: .5rem; max-width: var(--mc-container); margin-left: auto; margin-right: auto;
}
.mc-mobile-drawer nav {
  display: flex; flex-direction: column; gap: .5rem; padding: 1rem; font-weight: 500;
}
.mc-mobile-drawer a { padding: .75rem 1rem; border-radius: .75rem; transition: background-color .15s; }
.mc-mobile-drawer a:hover { background: var(--mc-white-5); }

/* ---------- Hero ---------- */
.mc-hero-wrap { padding: 1rem var(--mc-gutter) 0; }
.mc-hero {
  position: relative; overflow: hidden; border-radius: var(--mc-radius);
  border: 1px solid var(--mc-white-10);
  min-height: 56vh; display: flex; align-items: center; justify-content: flex-start;
  padding: 2.5rem 0;
  background-color: var(--mc-deep);
}
@media (min-width: 768px) { .mc-hero { min-height: 58vh; height: auto; padding: 0; align-items: flex-end; } }
.mc-hero-bg { position: absolute; inset: 0; z-index: 0; }
.mc-hero-bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); filter: blur(4px) brightness(0.3); transition: all .7s; }
.mc-hero-bg img:hover { transform: scale(1); }
.mc-hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, var(--mc-deep), rgba(5,7,13,0.4), transparent);
}
@media (min-width: 768px) {
  .mc-hero-bg::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to right, var(--mc-deep), transparent);
  }
}
.mc-hero-inner {
  position: relative; z-index: 10; max-width: 64rem; width: 100%; margin: 0 auto;
  padding: 0 1.5rem 2rem; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; text-align: center;
}
@media (min-width: 768px) {
  .mc-hero-inner { flex-direction: row; align-items: flex-end; text-align: left; padding: 0 3rem 4rem; gap: 2rem; }
}
.mc-hero-cover {
  width: 75vw; max-width: 280px; aspect-ratio: 2/3; flex: none;
  border-radius: var(--mc-radius); overflow: hidden;
  background: rgba(255,255,255,0.05); border: 1px solid var(--mc-white-15); padding: .5rem;
  transform: scale(1.05); box-shadow: 0 0 35px rgba(124, 58, 237, 0.35);
  transition: all .5s;
}
@media (min-width: 768px) { .mc-hero-cover { width: 16rem; height: 24rem; aspect-ratio: auto; transform: rotate(-2deg) scale(1); } }
.mc-hero-cover:hover { transform: rotate(0deg) scale(1.05); }
.mc-hero-cover img { width: 100%; height: 100%; object-fit: cover; border-radius: .75rem; }
.mc-hero-body { display: flex; flex-direction: column; gap: 1rem; max-width: 42rem; width: 100%; }
.mc-hero-title {
  font-size: 2.25rem; font-weight: 900; letter-spacing: -0.025em; line-height: 1.1;
  color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
@media (min-width: 640px) { .mc-hero-title { font-size: 3rem; } }
@media (min-width: 768px) { .mc-hero-title { font-size: 3.75rem; line-height: 1; } }
.mc-hero-kicker {
  font-size: .875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
  color: rgba(34, 211, 238, 0.9);
}
.mc-hero-desc {
  color: var(--mc-text-3); font-size: .875rem; line-height: 1.625;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
@media (min-width: 768px) { .mc-hero-desc { font-size: 1rem; } }
.mc-hero-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; margin-top: .5rem; }
@media (min-width: 768px) { .mc-hero-cta { justify-content: flex-start; } }

/* Resume widget */
.mc-resume {
  display: none; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 1rem; padding: 1rem; border-radius: .75rem;
  background: rgba(34, 211, 238, 0.05); border: 1px solid rgba(34, 211, 238, 0.2);
  max-width: 28rem; margin-left: auto; margin-right: auto; text-align: left;
}
@media (min-width: 768px) { .mc-resume { margin-left: 0; margin-right: 0; } }
.mc-resume.show { display: flex; }
.mc-resume-dot { width: .5rem; height: .5rem; border-radius: 9999px; background: var(--mc-cyan); animation: ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite; }
.mc-resume-label { font-size: .75rem; color: var(--mc-text-3); font-weight: 500; }
.mc-resume-label b { font-weight: 800; color: #fff; }
.mc-resume a {
  padding: .375rem .875rem; border-radius: 9999px; font-size: .75rem; font-weight: 700;
  background: var(--mc-cyan); color: #18181b; transition: transform .3s;
}
.mc-resume a:hover { transform: scale(1.05); }

/* ---------- Main grid (about + sidebar) ---------- */
.mc-main-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 1024px) {
  .mc-main-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
  .mc-main-grid > .mc-col-about { grid-column: span 2 / span 2; }
}

/* ---------- About section ---------- */
.mc-about { padding: 1.5rem; }
@media (min-width: 768px) { .mc-about { padding: 2rem; } }
.mc-about-head { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; margin-bottom: 1rem; }
@media (min-width: 640px) { .mc-about-head { flex-direction: row; align-items: center; justify-content: space-between; } }
.mc-about h2 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.025em; }
.mc-share { display: flex; align-items: center; gap: .375rem; }
.mc-share-label { display: none; font-size: .75rem; font-weight: 700; color: var(--mc-text-5); text-transform: uppercase; letter-spacing: .1em; margin-right: .25rem; }
@media (min-width: 640px) { .mc-share-label { display: inline; } }
.mc-share a, .mc-share button {
  padding: .625rem; border-radius: 9999px; color: var(--mc-text-3);
  border: 1px solid transparent; cursor: pointer; line-height: 0; transition: all .15s;
}
.mc-share a:hover, .mc-share button:hover { background: var(--mc-white-5); border-color: var(--mc-white-10); color: #fff; }
.mc-share svg { width: 1rem; height: 1rem; }
.mc-about-desc { color: var(--mc-text-2); line-height: 1.625; }
.mc-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.genre-tag {
  padding: .25rem .75rem; border-radius: 9999px; font-size: .75rem; font-weight: 600;
  background: rgba(124, 58, 237, 0.25); color: #c4b5fd; border: 1px solid rgba(124, 58, 237, 0.2);
}
.hash-tag {
  padding: .25rem .75rem; border-radius: 9999px; font-size: .75rem; font-weight: 600;
  background: var(--mc-white-5); color: var(--mc-text-3); border: 1px solid var(--mc-white-10);
}
.mc-meta-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem;
  margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--mc-white-10); font-size: .875rem;
}
@media (min-width: 640px) { .mc-meta-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mc-meta-grid dt { color: var(--mc-text-5); display: block; margin-bottom: .25rem; }
.mc-meta-grid dd { margin: 0; font-weight: 600; color: #fff; }
.mc-meta-grid dd.cyan { color: var(--mc-cyan); text-transform: uppercase; }
.mc-alt-names { margin-top: 1rem; font-size: .875rem; }
.mc-alt-names dt { color: var(--mc-text-5); display: inline; }
.mc-alt-names dd { margin: 0; display: inline; color: var(--mc-text-2); }

/* ---------- Sidebar: rating ---------- */
.mc-rating-card { padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.mc-rating-card h3 { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.025em; }
.mc-rating-row { display: flex; align-items: center; gap: 1rem; }
.mc-rating-score { font-size: 2.5rem; font-weight: 900; display: flex; align-items: baseline; gap: .25rem; line-height: 1; }
.mc-rating-score small { font-size: .875rem; font-weight: 400; color: var(--mc-text-5); }
.mc-stars { display: flex; align-items: center; gap: .125rem; }
.mc-stars button { background: none; border: 0; padding: 0; cursor: pointer; line-height: 0; transition: transform .15s; }
.mc-stars button:hover { transform: scale(1.25); }
.mc-stars button:disabled { cursor: default; }
.mc-stars svg { width: 1.5rem; height: 1.5rem; }
.mc-stars .on { color: #facc15; fill: currentColor; }
.mc-stars .off { color: var(--mc-text-5); fill: none; stroke: currentColor; stroke-width: 2; }
.mc-rating-note { font-size: .75rem; color: var(--mc-text-5); }
.mc-rating-note b { color: var(--mc-text-2); font-weight: 600; }
.mc-rating-msg { display: none; padding: .625rem; border-radius: .5rem; background: var(--mc-white-5); border: 1px solid var(--mc-white-10); font-size: .75rem; color: var(--mc-cyan); font-weight: 500; }
.mc-rating-msg.show { display: block; }

/* ---------- Sidebar: related ---------- */
.mc-related h3 { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.025em; padding: 0 .5rem; }
.mc-related-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .mc-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .mc-related-grid { grid-template-columns: 1fr; } }
.mc-related-empty { font-size: .75rem; color: var(--mc-text-5); padding: 0 .5rem; }
.mc-related-item { display: flex; gap: .75rem; align-items: center; padding: .5rem; border-radius: .75rem; background: var(--mc-deep-card); border: 1px solid var(--mc-white-10); transition: all .3s; }
.mc-related-item:hover { background: var(--mc-white-10); border-color: rgba(124,58,237,.4); transform: translateY(-2px); }
.mc-related-item img { width: 56px; height: 84px; object-fit: cover; border-radius: .5rem; flex: none; }
.mc-related-item .t { font-weight: 600; font-size: .875rem; }
.mc-related-item .s { font-size: .75rem; color: var(--mc-text-4); }

/* ---------- Reader (embed host) ---------- */
.mc-reader { margin-top: 2.5rem; max-width: 56rem; margin-left: auto; margin-right: auto; }
@media (min-width: 1024px) { .mc-reader { margin-top: 3rem; } }
.mc-reader-head { text-align: center; margin-bottom: 1.5rem; }
.mc-reader-head .k { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .25em; color: var(--mc-text-5); }
.mc-reader-head h2 { margin-top: .5rem; font-size: 1.875rem; font-weight: 700; letter-spacing: -0.025em; }
@media (min-width: 640px) { .mc-reader-head h2 { font-size: 1.875rem; } }
.mc-reader-head .sub { margin-top: .375rem; font-size: .875rem; color: var(--mc-text-3); }
.mc-reader-embed { position: relative; z-index: 1; }
/* The zanjeerein embed script renders pages inside #manga-reader — give it room */
#manga-reader { width: 100%; min-height: 50vh; }
#manga-reader img { width: 100%; height: auto; display: block; border-radius: .5rem; }

/* ---------- Chapter list ---------- */
.mc-chapters { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 1024px) { .mc-chapters { margin-top: 3rem; } }
.mc-chapters-head { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; padding: 0 .5rem; }
@media (min-width: 640px) { .mc-chapters-head { flex-direction: row; align-items: center; justify-content: space-between; } }
.mc-chapters-head h2 { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.025em; }
.mc-chapters-tools { display: flex; align-items: center; gap: 1rem; font-size: .75rem; font-weight: 600; }
.mc-chip {
  display: inline-flex; align-items: center; gap: .375rem; padding: .375rem .75rem; border-radius: .5rem;
  border: 1px solid var(--mc-white-15); background: var(--mc-white-5); cursor: pointer;
  color: var(--mc-text-3); transition: all .15s;
}
.mc-chip:hover { background: var(--mc-white-10); }
.mc-chip.on { color: var(--mc-cyan); border-color: rgba(34, 211, 238, 0.2); }
.mc-chip .dot { width: .375rem; height: .375rem; border-radius: 9999px; background: currentColor; }
.mc-chapters-list { display: flex; flex-direction: column; gap: .75rem; }
.mc-chapter-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem; border-radius: .75rem; position: relative; overflow: hidden;
  background: var(--mc-deep-card); border: 1px solid rgba(255,255,255,0.05);
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  transition: all .3s cubic-bezier(0.16, 1, 0.3, 1);
}
.mc-chapter-row:hover {
  border-color: rgba(124, 58, 237, 0.4); background: var(--mc-white-10);
  box-shadow: var(--mc-shadow-glass); transform: translateY(-2px);
}
.mc-chapter-row:active { transform: scale(0.99); }
.mc-chapter-num {
  width: 2.5rem; height: 2.5rem; border-radius: .5rem; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .875rem; color: var(--mc-purple);
  background: rgba(124, 58, 237, 0.1); border: 1px solid rgba(124, 58, 237, 0.2);
  transition: background-color .3s;
}
.mc-chapter-row:hover .mc-chapter-num { background: rgba(124, 58, 237, 0.2); }
.mc-chapter-body { display: flex; flex-direction: column; }
.mc-chapter-body h3 { font-weight: 700; font-size: .875rem; color: #fff; transition: color .3s; }
@media (min-width: 640px) { .mc-chapter-body h3 { font-size: 1rem; } }
.mc-chapter-row:hover .mc-chapter-body h3 { color: var(--mc-purple); }
.mc-chapter-date { font-size: .75rem; color: var(--mc-text-5); margin-top: .125rem; }
.mc-chapter-read {
  padding: .5rem 1rem; border-radius: .5rem; font-size: .75rem; font-weight: 700; color: #fff;
  background: var(--mc-white-5); border: 1px solid var(--mc-white-10); flex: none;
  transition: all .3s;
}
.mc-chapter-row:hover .mc-chapter-read {
  border-color: rgba(34, 211, 238, 0.5);
  background-image: linear-gradient(to right, rgba(124,58,237,.3), rgba(34,211,238,.3));
}
.mc-chapters-empty { padding: 1.5rem; text-align: center; color: var(--mc-text-4); font-size: .875rem; }

/* ---------- Comments (WordPress native, styled) ---------- */
.mc-discussion { max-width: var(--mc-container); margin: 0 auto; padding: 0 var(--mc-gutter) 3rem; }
.mc-discussion .glass-panel { padding: 1.5rem; }
@media (min-width: 768px) { .mc-discussion .glass-panel { padding: 2rem; } }
.mc-discussion h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: 1.5rem; }
.mc-discussion h2 span { color: var(--mc-text-5); font-weight: 500; }
.mc-comment-form { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 2rem; }
.mc-comment-form input[type="text"], .mc-comment-form input[type="email"], .mc-comment-form input[type="url"], .mc-comment-form textarea,
.mc-contact-form input, .mc-contact-form textarea {
  width: 100%; padding: .625rem 1rem; border-radius: .75rem;
  background: var(--mc-white-5); border: 1px solid var(--mc-white-10);
  color: #fff; transition: all .15s; outline: none;
}
.mc-comment-form textarea { resize: vertical; }
.mc-comment-form ::placeholder, .mc-contact-form ::placeholder { color: var(--mc-text-5); }
.mc-comment-form input:focus, .mc-comment-form textarea:focus, .mc-contact-form input:focus, .mc-contact-form textarea:focus { border-color: rgba(124,58,237,.5); box-shadow: 0 0 0 2px rgba(124,58,237,.5); }
.mc-comment-form .row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.mc-btn-post {
  margin-left: auto; padding: .625rem 1.25rem; border-radius: 9999px; color: #fff; font-weight: 500; cursor: pointer;
  background-image: linear-gradient(to right, #9333ea, #06b6d4);
  backdrop-filter: blur(8px); border: 1px solid var(--mc-white-10);
  transition: all .3s;
}
.mc-btn-post:hover { box-shadow: 0 0 15px rgba(124,58,237,.5); }
.mc-btn-post:disabled { opacity: .5; cursor: not-allowed; }
.mc-comment-list { display: flex; flex-direction: column; gap: 1rem; }
.mc-comment { padding: 1rem; border-radius: .75rem; background: var(--mc-white-5); border: 1px solid var(--mc-white-10); }
.mc-comment .meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: .375rem; }
.mc-comment .meta .author { font-weight: 700; font-size: .875rem; }
.mc-comment .meta .date { font-size: .75rem; color: var(--mc-text-5); }
.mc-comment .content { font-size: .875rem; color: var(--mc-text-2); line-height: 1.625; white-space: pre-line; }
.mc-comment-list .children { margin-top: .75rem; margin-left: 1.5rem; display: flex; flex-direction: column; gap: .75rem; border-left: 2px solid var(--mc-white-10); padding-left: 1rem; }
.mc-comments-empty { font-size: .875rem; color: var(--mc-text-5); }
.mc-discussion .logged-in-as, .mc-discussion .comment-notes { font-size: .875rem; color: var(--mc-text-4); }
.mc-discussion .comment-form-cookies-consent { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--mc-text-4); }
.mc-discussion .required { color: #f87171; }

/* ---------- Poster cards / Browse ---------- */
.mc-poster-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem 1rem; row-gap: 2rem; }
@media (min-width: 640px) { .mc-poster-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 768px) { .mc-poster-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (min-width: 1024px) { .mc-poster-grid { grid-template-columns: repeat(6, minmax(0,1fr)); } }
.mc-poster { display: flex; flex-direction: column; align-items: center; width: 100%; }
.mc-poster-frame {
  width: 100%; aspect-ratio: 2/3; background-color: #090b11;
  border: 1px solid hsla(0,0%,100%,.08); border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,.4); overflow: hidden; position: relative;
  transition: all .3s cubic-bezier(.16,1,.3,1);
}
.mc-poster:hover .mc-poster-frame {
  border-color: rgba(124,58,237,.5); box-shadow: 0 0 20px rgba(124,58,237,.35);
  transform: translateY(-6px) scale(1.05);
}
.mc-poster-frame img { width: 100%; height: 100%; object-fit: cover; }
.mc-poster-badge {
  position: absolute; top: 8px; right: 8px; border-radius: 9999px;
  backdrop-filter: blur(4px); color: #fff; font-size: .625rem; font-weight: 800;
  letter-spacing: .05em; padding: 2px 8px; text-transform: uppercase;
}
.mc-poster-badge.ongoing { background-color: rgba(34,211,238,.25); border: 1px solid rgba(34,211,238,.4); }
.mc-poster-badge.completed { background-color: rgba(124,58,237,.25); border: 1px solid rgba(124,58,237,.4); }
.mc-poster-title { margin-top: .5rem; font-size: .875rem; font-weight: 500; text-align: center; line-height: 1.4; }
.mc-poster:hover .mc-poster-title { color: var(--mc-cyan); }

/* Browse filter bar */
.mc-browse-head { text-align: center; margin-bottom: 1.5rem; }
.mc-browse-head h1 { font-size: 1.875rem; font-weight: 900; letter-spacing: -0.025em; }
@media (min-width: 768px) { .mc-browse-head h1 { font-size: 2.25rem; } }
.mc-browse-head p { color: var(--mc-text-5); font-size: .875rem; margin-top: .5rem; }
.mc-filters { padding: 1rem; margin-bottom: 2rem; display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 768px) { .mc-filters { flex-direction: row; align-items: flex-end; } }
.mc-filters .field { display: flex; flex-direction: column; gap: .375rem; flex: 1 1 0%; min-width: 140px; }
.mc-filters .field.grow2 { flex: 2 1 0%; min-width: 180px; }
.mc-filters label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--mc-text-5); }
.mc-filters input, .mc-filters select {
  background: var(--mc-white-5); border: 1px solid var(--mc-white-10); border-radius: .75rem;
  padding: .625rem .875rem; font-size: .875rem; color: #fff; outline: none; transition: border-color .15s;
}
.mc-filters input:focus, .mc-filters select:focus { border-color: rgba(124,58,237,.5); }
.mc-filters button {
  padding: .625rem 1.25rem; border-radius: .75rem; color: #fff; font-size: .875rem; font-weight: 700; cursor: pointer;
  background-image: var(--mc-grad); transition: box-shadow .3s;
}
.mc-filters button:hover { box-shadow: 0 0 15px rgba(124,58,237,.4); }

/* ---------- Homepage content block (SEO article) ---------- */
.mc-content-block { max-width: var(--mc-container); margin: 0 auto; padding: 0 var(--mc-gutter) 4rem; }
.mc-content-block .glass-panel { padding: 1.5rem; }
@media (min-width: 768px) { .mc-content-block .glass-panel { padding: 2.5rem; } }

/* Prose (page content + homepage article) */
.mc-prose { color: var(--mc-text-2); line-height: 1.625; font-size: 0.98rem; }
.mc-prose > *:first-child { margin-top: 0; }
.mc-prose > *:last-child { margin-bottom: 0; }
.mc-prose p { margin: 0 0 1.05rem; }
.mc-prose h2 {
  font-size: 1.4rem; font-weight: 800; color: #fff; margin: 2.1rem 0 0.9rem;
  padding-bottom: 0.55rem; border-bottom: 1px solid rgba(255,255,255,0.09); letter-spacing: -0.01em;
}
.mc-prose h3 {
  font-size: 1.12rem; font-weight: 700; color: #fff; margin: 1.7rem 0 0.7rem;
  display: flex; align-items: center; gap: 0.6rem; letter-spacing: -0.01em;
}
.mc-prose h3::before { content: ""; flex: none; width: 4px; height: 1.15em; border-radius: 9999px; background: var(--mc-cyan); opacity: 0.85; }
.mc-prose h4 { font-size: 1.02rem; font-weight: 700; color: #e4e4e7; margin: 1.35rem 0 0.5rem; }
.mc-prose ul { margin: 0 0 1.1rem; padding: 0; list-style: none; }
.mc-prose ul li { position: relative; padding-left: 1.35rem; margin-bottom: 0.5rem; }
.mc-prose ul li::before { content: ""; position: absolute; left: 0.15rem; top: 0.58em; width: 6px; height: 6px; border-radius: 9999px; background: var(--mc-cyan); opacity: 0.75; }
.mc-prose ol { margin: 0 0 1.1rem 1.25rem; }
.mc-prose ol li { margin-bottom: 0.5rem; padding-left: 0.25rem; }
.mc-prose ol li::marker { color: var(--mc-cyan); font-weight: 700; }
.mc-prose a { color: var(--mc-cyan); border-bottom: 1px dotted rgba(34,211,238,0.45); transition: all .2s; }
.mc-prose a:hover { color: #a5f3fc; border-bottom-style: solid; }
.mc-prose strong { color: #fff; font-weight: 700; }
.mc-prose em { color: #d4d4d8; }
.mc-prose hr { border: 0; border-top: 1px solid rgba(255,255,255,0.09); margin: 1.8rem 0; }
.mc-prose blockquote { margin: 0 0 1.1rem; padding: 0.9rem 1.1rem; border-left: 3px solid var(--mc-cyan); border-radius: 0 0.75rem 0.75rem 0; background: rgba(34,211,238,0.06); color: #d4d4d8; font-style: italic; }
.mc-prose img { border-radius: .75rem; }

/* ---------- Static pages ---------- */
.mc-page { padding: 2rem var(--mc-gutter); }
@media (min-width: 1024px) { .mc-page { padding: 3rem var(--mc-gutter); } }
.mc-page-inner { max-width: 48rem; margin: 0 auto; width: 100%; }
.mc-breadcrumb { display: flex; align-items: center; gap: .5rem; font-size: .75rem; color: var(--mc-text-5); margin-bottom: 1.25rem; }
.mc-breadcrumb a:hover { color: var(--mc-cyan); }
.mc-breadcrumb svg { width: .75rem; height: .75rem; color: var(--mc-text-5); }
.mc-breadcrumb .cur { color: var(--mc-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-page-card { padding: 1.5rem; position: relative; overflow: hidden; }
@media (min-width: 768px) { .mc-page-card { padding: 2.5rem; } }
.mc-page-accent { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(to right, #7c3aed, #22d3ee); opacity: 0.7; }
.mc-page-card h1 { font-size: 1.875rem; font-weight: 900; margin-bottom: .5rem; letter-spacing: -0.025em; }
@media (min-width: 768px) { .mc-page-card h1 { font-size: 2.25rem; } }
.mc-page-review { display: flex; align-items: center; gap: .5rem; margin-bottom: 2rem; font-size: .75rem; color: var(--mc-text-5); }
.mc-page-review svg { width: .875rem; height: .875rem; }

/* Contact form */
.mc-contact-form { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; }
.mc-contact-form label { font-size: .8125rem; font-weight: 600; color: var(--mc-text-3); }
.mc-contact-form button { align-self: flex-start; }

/* ---------- Footer ---------- */
.mc-foot { position: relative; margin-top: 3rem; padding: 4rem var(--mc-gutter) 2rem; border-top: 1px solid var(--mc-white-10); background: rgba(5,7,13,0.8); backdrop-filter: blur(8px); }
.mc-foot-hairline { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(to right, transparent, rgba(34,211,238,0.45), transparent); }
.mc-foot-grid { display: grid; gap: 2.5rem; }
.mc-foot-grid.cols-4 { grid-template-columns: 1fr; }
@media (min-width: 900px) { .mc-foot-grid.cols-4 { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.mc-foot-brand { font-size: 1.125rem; font-weight: 700; }
.mc-foot-brand p { margin-top: .75rem; color: var(--mc-text-5); line-height: 1.625; max-width: 22rem; }
.mc-foot-brand .small { margin-top: 1rem; font-size: .75rem; color: var(--mc-text-5); line-height: 1.625; max-width: 22rem; }
.mc-foot h4 { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; color: #d4d4d8; margin: 0 0 1rem; }
.mc-foot h4::after { content: ""; display: block; width: 1.75rem; height: 2px; border-radius: 2px; background: var(--mc-cyan); opacity: .7; margin-top: .5rem; }
.mc-foot ul { list-style: none; }
.mc-foot ul li { margin-bottom: .65rem; }
.mc-foot ul a { color: var(--mc-text-4); font-size: .875rem; display: inline-block; transition: color .2s, transform .2s; }
.mc-foot ul a:hover { color: var(--mc-cyan); transform: translateX(4px); }
.mc-foot-bottom {
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.05);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: .75rem;
  font-size: .875rem; color: var(--mc-text-5);
}
@media (min-width: 640px) { .mc-foot-bottom { flex-direction: row; } }
.mc-foot-bottom button { display: flex; align-items: center; gap: .375rem; font-size: .75rem; color: var(--mc-text-5); background: none; cursor: pointer; transition: color .15s; }
.mc-foot-bottom button:hover { color: var(--mc-cyan); }
.mc-foot-bottom svg { width: .875rem; height: .875rem; }

/* ---------- Sticky mobile CTA ---------- */
.mc-sticky-cta { display: block; position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 40; }
@media (min-width: 768px) { .mc-sticky-cta { display: none; } }
.mc-sticky-cta a {
  display: flex; align-items: center; gap: .5rem; padding: .75rem 1.25rem; border-radius: 9999px;
  background-image: var(--mc-grad); box-shadow: var(--mc-shadow-neon); border: 1px solid var(--mc-white-20);
  color: #fff; font-weight: 800; font-size: .875rem; transition: transform .15s;
}
.mc-sticky-cta a:hover { transform: scale(1.05); }
.mc-sticky-cta a:active { transform: scale(0.95); }
.mc-sticky-cta svg { width: 1rem; height: 1rem; fill: currentColor; }

/* ---------- Misc ---------- */
/* Theme toggle icons: sun shows in dark mode, moon shows in light mode. */
html.light .mc-icon-moon { display: inline !important; }
html.light .mc-icon-sun { display: none !important; }
html.dark .mc-icon-moon { display: none !important; }

.mc-no-results { max-width: var(--mc-container); margin: 0 auto; padding: 4rem var(--mc-gutter); text-align: center; }
.mc-no-results h1 { font-size: 2rem; font-weight: 900; margin-bottom: .75rem; }
.mc-404-code { font-size: 6rem; font-weight: 900; line-height: 1; }
.wp-caption { max-width: 100%; }
.sticky, .gallery-caption, .bypostauthor { display: block; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.mc-single article { max-width: 48rem; margin: 0 auto; }
.mc-single .post-thumbnail img { border-radius: var(--mc-radius); }

/* =========================================================
   LIGHT THEME — designed counterpart; hero & reader stay dark
   ========================================================= */
html.light body {
  background-color: #f4f5fb !important;
  color: #1b2030 !important;
  background-image:
    radial-gradient(circle at 0% 0%, rgba(124,58,237,0.05) 0%, transparent 40%),
    radial-gradient(circle at 100% 100%, rgba(34,211,238,0.05) 0%, transparent 40%);
}
html.light .glass-panel { background: transparent !important; border-color: transparent !important; box-shadow: none !important; backdrop-filter: none !important; }
html.light .mc-header .glass-panel, html.light .mc-header .mc-nav {
  background: rgba(244, 245, 251, 0.94) !important;
  border-color: rgba(24, 28, 48, 0.09) !important;
  box-shadow: 0 6px 24px rgba(24, 28, 48, 0.08) !important;
  backdrop-filter: blur(14px) !important;
}
html.light .mc-nav { border: 1px solid rgba(24,28,48,0.09) !important; }
html.light .mc-grad-text { filter: saturate(1.3) brightness(0.8); }
html.light .mc-foot { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
html.light input, html.light select, html.light textarea {
  background-color: rgba(24, 28, 48, 0.05) !important; color: #1b2030 !important; border-color: rgba(24, 28, 48, 0.10) !important;
}
html.light select option { background-color: #fff !important; color: #1b2030 !important; }
html.light input::placeholder, html.light textarea::placeholder { color: #7b818f !important; }
html.light .mc-nav-links a { color: #1b2030; }
html.light .mc-nav-links a:hover { color: #0891b2; }
html.light .mc-icon-btn { color: #1b2030; }
html.light .mc-hero-kicker { color: #0891b2 !important; }
html.light .mc-breadcrumb a, html.light .mc-breadcrumb .cur { color: #565d6d; }
html.light .mc-resume-label { color: #565d6d; }
html.light .text-glow { text-shadow: 0 1px 2px rgba(124,58,237,0.12) !important; }
html.light .genre-tag { background-color: rgba(124,58,237,0.10) !important; color: #6d28d9 !important; border-color: rgba(124,58,237,0.22) !important; }
html.light .hash-tag { background-color: rgba(107,114,128,0.06) !important; color: #4b5563 !important; border-color: rgba(107,114,128,0.15) !important; }
html.light .mc-about, html.light .mc-rating-card, html.light .mc-discussion .glass-panel,
html.light .mc-content-block .glass-panel, html.light .mc-page-card, html.light .mc-filters,
html.light .mc-related-item, html.light .mc-comment {
  border-color: rgba(24, 28, 48, 0.10) !important;
  background: rgba(24, 28, 48, 0.03) !important;
}
html.light .mc-about h2, html.light .mc-rating-card h3, html.light .mc-discussion h2,
html.light .mc-browse-head h1, html.light .mc-page-card h1, html.light .mc-meta-grid dd,
html.light .mc-chapter-body h3, html.light .mc-poster-title, html.light .mc-related-item .t {
  color: #1b2030 !important;
}
html.light .mc-meta-grid dd.cyan { color: #0891b2 !important; }
html.light .mc-hero-desc, html.light .mc-about-desc, html.light .mc-prose,
html.light .mc-alt-names dd, html.light .mc-comment .content { color: #4b5160 !important; }
html.light .mc-prose h2 { color: #1b2030 !important; border-bottom-color: rgba(24,28,48,0.10) !important; }
html.light .mc-prose h3 { color: #1b2030 !important; }
html.light .mc-prose h3::before { background: #0891b2 !important; opacity: 1 !important; }
html.light .mc-prose h4 { color: #3f4554 !important; }
html.light .mc-prose ul li::before { background: #0891b2 !important; opacity: 1 !important; }
html.light .mc-prose ol li::marker { color: #0891b2 !important; }
html.light .mc-prose a { color: #0e7490 !important; border-bottom-color: rgba(8,145,178,0.45) !important; }
html.light .mc-prose a:hover { color: #0891b2 !important; }
html.light .mc-prose strong { color: #1b2030 !important; }
html.light .mc-prose em { color: #4b5160 !important; }
html.light .mc-prose hr { border-top-color: rgba(24,28,48,0.10) !important; }
html.light .mc-prose blockquote { border-left-color: #0891b2 !important; background: rgba(8,145,178,0.06) !important; color: #4b5160 !important; }
html.light .mc-chapter-row { background: rgba(24,28,48,0.035) !important; }
html.light .mc-chapter-row:hover { border-color: rgba(124,58,237,.4) !important; }
html.light .mc-chapter-date { color: #6b7280 !important; }
html.light .mc-chapter-read { background: rgba(24,28,48,0.05) !important; border-color: rgba(24,28,48,0.10) !important; color: #1b2030 !important; }
html.light .mc-chapters-tools .mc-chip { color: #565d6d; }
html.light .mc-chapters-tools .mc-chip.on { color: #0891b2 !important; border-color: rgba(8,145,178,.3) !important; }
html.light .mc-page-review { color: #6b7280 !important; }
html.light .mc-foot h4 { color: #3f4554 !important; }
html.light .mc-foot h4::after { background: #0891b2 !important; opacity: .9 !important; }
html.light .mc-foot ul a { color: #4b5563 !important; }
html.light .mc-foot ul a:hover { color: #0891b2 !important; }
html.light .mc-foot-brand p, html.light .mc-foot-brand .small, html.light .mc-foot-bottom { color: #6b7280 !important; }
html.light .mc-poster-frame { background-color: #f3f4f6 !important; border-color: rgba(0,0,0,.08) !important; box-shadow: 0 4px 20px rgba(0,0,0,.1) !important; }
html.light .mc-btn-ghost { background: rgba(24,28,48,0.05) !important; border-color: rgba(24,28,48,0.12) !important; color: #1b2030 !important; }
html.light .mc-btn-ghost:hover { background: rgba(24,28,48,0.09) !important; }
html.light .mc-rating-note, html.light .mc-related-empty, html.light .mc-comments-empty { color: #6b7280 !important; }
html.light .mc-stars .off { color: #d4d4d8 !important; }
html.light .mc-share a, html.light .mc-share button { color: #565d6d !important; }
html.light .mc-share a:hover, html.light .mc-share button:hover { color: #1b2030 !important; background: rgba(24,28,48,0.06) !important; border-color: rgba(24,28,48,0.10) !important; }
html.light .mc-filters label { color: #565d6d !important; }
html.light .mc-discussion .logged-in-as, html.light .mc-discussion .comment-notes,
html.light .mc-discussion .comment-form-cookies-consent { color: #6b7280 !important; }
/* Regions that intentionally stay dark in light mode: hero + reader */
html.light .mc-hero, html.light .mc-hero-bg::after, html.light .mc-hero-bg::before {
  background-color: var(--mc-deep) !important;
}
html.light .mc-hero { border-color: rgba(24,28,48,0.10) !important; }
html.light .mc-hero-title, html.light .mc-reader-head h2 { color: #fff !important; }
html.light .mc-reader-head .k, html.light .mc-reader-head .sub { color: #8b8b94 !important; }
html.light .mc-hero .mc-hero-title { color: #fff !important; text-shadow: 0 2px 4px rgba(0,0,0,0.5) !important; }