/* ═══════════════════════════════════════════════════════════════════
   SPIDERSCANS THEME — main.css
   Dark manga theme with gold accents
   ═══════════════════════════════════════════════════════════════════ */

/* ─── GOOGLE FONTS ───────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700;900&family=Nunito:wght@400;600;700;800;900&family=JetBrains+Mono:wght@400;600&display=swap');

/* ─── DESIGN TOKENS ──────────────────────────────────────────────── */
:root {
  /* Colors */
  --ink:          #06090f;
  --ink-2:        #0d1320;
  --ink-3:        #111827;
  --ink-4:        #1a2332;
  --panel:        #1e2d3d;
  --border:       #243040;
  --muted:        #3d5166;
  --sub:          #6b8298;
  --text:         #c8daea;
  --bright:       #e8f4ff;
  --gold:         #f0a500;
  --gold-2:       #ffc847;
  --gold-dark:    #c47e00;
  --red:          #e8394a;
  --red-dark:     #c0192a;
  --green:        #22c55e;
  --green-dark:   #15803d;
  --blue:         #3b82f6;
  --glow:         rgba(240, 165, 0, 0.15);
  --glow-strong:  rgba(240, 165, 0, 0.30);
  --red-glow:     rgba(232,  57, 74, 0.15);

  /* Typography */
  --font-head: 'Cinzel',        serif;
  --font-body: 'Nunito',        sans-serif;
  --font-mono: 'JetBrains Mono',monospace;

  /* Spacing */
  --gap-xs:  4px;
  --gap-sm:  8px;
  --gap-md:  16px;
  --gap-lg:  24px;
  --gap-xl:  32px;
  --gap-2xl: 48px;

  /* Border radius */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 2px 8px  rgba(0,0,0,0.4);
  --shadow-md: 0 4px 24px rgba(0,0,0,0.5);
  --shadow-lg: 0 8px 48px rgba(0,0,0,0.7);
  --shadow-gold: 0 4px 24px rgba(240,165,0,0.3);

  /* Transitions */
  --ease: 0.2s ease;
  --ease-slow: 0.4s ease;

  /* Layout */
  --container: 1320px;
  --sidebar-w: 320px;
  --nav-h: 68px;
}

/* ─── RESET & BASE ────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 15px;
}

body {
  background:  var(--ink);
  color:       var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x:  hidden;
  min-height:  100vh;
}

/* Scrollbar */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--ink-2); }
::-webkit-scrollbar-thumb { background: var(--muted); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* Selection */
::selection {
  background: var(--gold);
  color: var(--ink);
}

a {
  color: var(--gold);
  text-decoration: none;
  transition: color var(--ease);
}
a:hover { color: var(--gold-2); }

img { max-width: 100%; height: auto; display: block; }

input, select, textarea, button {
  font-family: var(--font-body);
}

/* ─── LAYOUT ──────────────────────────────────────────────────────── */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gap-lg);
}

.grid-main {
  display: grid;
  grid-template-columns: 1fr var(--sidebar-w);
  gap: var(--gap-xl);
  align-items: start;
}

.section      { padding: var(--gap-2xl) 0; }
.section-sm   { padding: var(--gap-xl)  0; }
.section-xs   { padding: var(--gap-lg)  0; }

/* ═══════════════════════════════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════════════════════════════ */
.ss-nav {
  position:   sticky;
  top:        0;
  z-index:    1000;
  background: rgba(6, 9, 15, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  height: var(--nav-h);
}

.nav-inner {
  display:     flex;
  align-items: center;
  height:      100%;
  gap:         var(--gap-xl);
}

/* Logo */
.ss-logo {
  font-family:     var(--font-head);
  font-size:       22px;
  font-weight:     900;
  color:           var(--bright);
  letter-spacing:  3px;
  text-decoration: none;
  flex-shrink:     0;
  display:         flex;
  align-items:     center;
  gap:             8px;
  transition:      opacity var(--ease);
}
.ss-logo:hover     { opacity: 0.85; color: var(--bright); }
.ss-logo span      { color: var(--gold); }
.ss-logo .spider   { font-size: 20px; }

/* Nav Links */
.nav-links {
  display:     flex;
  gap:         var(--gap-xs);
  list-style:  none;
  flex:        1;
}

.nav-links a {
  font-size:      12px;
  font-weight:    800;
  color:          var(--sub);
  padding:        6px 14px;
  border-radius:  var(--r-sm);
  transition:     all var(--ease);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  white-space:    nowrap;
}
.nav-links a:hover       { color: var(--bright); background: var(--ink-4); }
.nav-links a.active      { color: var(--gold); }
.nav-links a.nav-upload  { 
  color:         var(--gold); 
  border:        1px solid rgba(240,165,0,0.3);
}
.nav-links a.nav-upload:hover {
  background: var(--glow);
  border-color: var(--gold);
}

/* Search Bar */
.nav-search {
  display:       flex;
  align-items:   center;
  gap:           var(--gap-sm);
  background:    var(--ink-3);
  border:        1px solid var(--border);
  border-radius: var(--r-md);
  padding:       8px 14px;
  min-width:     240px;
  transition:    all var(--ease);
}
.nav-search:focus-within {
  border-color: var(--gold);
  box-shadow:   0 0 0 3px var(--glow);
}
.nav-search input {
  background:  none;
  border:      none;
  color:       var(--bright);
  font-size:   13px;
  outline:     none;
  flex:        1;
  min-width:   0;
}
.nav-search input::placeholder { color: var(--muted); }
.nav-search-icon               { color: var(--muted); flex-shrink: 0; }

/* Nav Actions */
.nav-actions {
  display:     flex;
  gap:         var(--gap-sm);
  align-items: center;
  flex-shrink: 0;
}

.nav-icon-btn {
  width:           38px;
  height:          38px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      var(--ink-3);
  border:          1px solid var(--border);
  border-radius:   var(--r-md);
  cursor:          pointer;
  color:           var(--sub);
  transition:      all var(--ease);
  position:        relative;
  flex-shrink:     0;
}
.nav-icon-btn:hover {
  color:         var(--gold);
  border-color:  var(--gold);
  background:    var(--glow);
}

.nav-notif-badge {
  position:      absolute;
  top:           -5px;
  right:         -5px;
  background:    var(--red);
  color:         #fff;
  font-size:     9px;
  font-weight:   800;
  border-radius: var(--r-full);
  padding:       1px 5px;
  min-width:     16px;
  text-align:    center;
  border:        2px solid var(--ink);
  line-height:   1.4;
}

.nav-avatar {
  width:           38px;
  height:          38px;
  border-radius:   var(--r-full);
  background:      linear-gradient(135deg, var(--gold), var(--gold-dark));
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-weight:     900;
  font-size:       16px;
  color:           var(--ink);
  cursor:          pointer;
  border:          2px solid transparent;
  transition:      all var(--ease);
  flex-shrink:     0;
  text-transform:  uppercase;
}
.nav-avatar:hover {
  border-color: var(--gold);
  box-shadow:   var(--shadow-gold);
  transform:    scale(1.05);
}

/* User Dropdown */
.nav-user-dropdown {
  position:   relative;
}
.dropdown-menu {
  position:      absolute;
  top:           calc(100% + 8px);
  right:         0;
  width:         220px;
  background:    var(--ink-2);
  border:        1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow:    var(--shadow-lg);
  overflow:      hidden;
  opacity:       0;
  visibility:    hidden;
  transform:     translateY(-8px);
  transition:    all var(--ease);
  z-index:       100;
}
.nav-user-dropdown:hover .dropdown-menu,
.dropdown-menu.open {
  opacity:    1;
  visibility: visible;
  transform:  translateY(0);
}
.dropdown-user-info {
  padding:       14px 16px;
  border-bottom: 1px solid var(--border);
}
.dropdown-username {
  font-size:   13px;
  font-weight: 800;
  color:       var(--bright);
}
.dropdown-email {
  font-size: 11px;
  color:     var(--muted);
  margin-top: 2px;
}
.dropdown-item {
  display:     flex;
  align-items: center;
  gap:         10px;
  padding:     10px 16px;
  font-size:   13px;
  font-weight: 700;
  color:       var(--sub);
  transition:  all var(--ease);
  cursor:      pointer;
}
.dropdown-item:hover        { background: var(--ink-3); color: var(--bright); }
.dropdown-item.danger:hover { background: var(--red-glow); color: var(--red); }
.dropdown-divider           { height: 1px; background: var(--border); }

/* Mobile Menu */
.nav-mobile-toggle {
  display:    none;
  background: none;
  border:     none;
  cursor:     pointer;
  color:      var(--text);
  padding:    4px;
}

/* ═══════════════════════════════════════════════════════════════════
   TICKER / ANNOUNCEMENT BAR
   ═══════════════════════════════════════════════════════════════════ */
.ss-ticker {
  background: var(--gold);
  padding:    7px 0;
  overflow:   hidden;
  position:   relative;
}
.ss-ticker::before,
.ss-ticker::after {
  content:    '';
  position:   absolute;
  top:        0;
  bottom:     0;
  width:      60px;
  z-index:    2;
}
.ss-ticker::before {
  left:       0;
  background: linear-gradient(to right, var(--gold), transparent);
}
.ss-ticker::after {
  right:      0;
  background: linear-gradient(to left, var(--gold), transparent);
}
.ticker-track {
  display:    flex;
  gap:        60px;
  animation:  ticker-scroll 35s linear infinite;
  white-space: nowrap;
  width:       max-content;
}
.ticker-track span {
  font-size:      12px;
  font-weight:    800;
  color:          var(--ink);
  letter-spacing: 0.3px;
  display:        flex;
  align-items:    center;
  gap:            6px;
}
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ═══════════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════════ */
.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--gap-sm);
  padding:         10px 22px;
  border-radius:   var(--r-md);
  font-size:       13px;
  font-weight:     800;
  letter-spacing:  0.5px;
  cursor:          pointer;
  border:          none;
  transition:      all var(--ease);
  text-decoration: none;
  white-space:     nowrap;
  line-height:     1;
}
.btn:disabled {
  opacity: 0.5;
  cursor:  not-allowed;
}

.btn-gold {
  background: var(--gold);
  color:      var(--ink);
}
.btn-gold:hover {
  background: var(--gold-2);
  color:      var(--ink);
  box-shadow: var(--shadow-gold);
  transform:  translateY(-1px);
}

.btn-outline {
  background: transparent;
  color:      var(--text);
  border:     1.5px solid var(--border);
}
.btn-outline:hover {
  border-color: var(--gold);
  color:        var(--gold);
  background:   var(--glow);
}

.btn-ghost {
  background: var(--ink-3);
  color:      var(--text);
  border:     1px solid var(--border);
}
.btn-ghost:hover {
  background: var(--ink-4);
  border-color: var(--muted);
}

.btn-red {
  background: var(--red);
  color:      #fff;
}
.btn-red:hover {
  background: var(--red-dark);
  box-shadow: var(--red-glow);
}

.btn-sm  { padding: 6px 14px;  font-size: 12px; }
.btn-lg  { padding: 14px 32px; font-size: 15px; }
.btn-xl  { padding: 16px 40px; font-size: 16px; }
.btn-full { width: 100%; }

/* ═══════════════════════════════════════════════════════════════════
   HERO SLIDER
   ═══════════════════════════════════════════════════════════════════ */
.ss-hero {
  position:   relative;
  height:     540px;
  overflow:   hidden;
  background: var(--ink-2);
}

.hero-slide {
  position:   absolute;
  inset:      0;
  opacity:    0;
  transition: opacity 0.9s ease;
  will-change: opacity;
}
.hero-slide.active { opacity: 1; }

.hero-slide-bg {
  position:   absolute;
  inset:      0;
}
.hero-slide-bg img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  filter:     brightness(0.3) saturate(0.7);
  transform:  scale(1.05);
  transition: transform 6s ease;
}
.hero-slide.active .hero-slide-bg img { transform: scale(1); }

.hero-gradient {
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    110deg,
    rgba(6,9,15,0.98)   0%,
    rgba(6,9,15,0.85)   35%,
    rgba(6,9,15,0.15)   70%,
    rgba(6,9,15,0.6)    100%
  );
}

.hero-content {
  position:    absolute;
  bottom:      0;
  left:        0;
  right:       0;
  padding:     var(--gap-2xl);
  display:     flex;
  align-items: flex-end;
  gap:         var(--gap-xl);
}

.hero-cover {
  width:         160px;
  height:        225px;
  border-radius: var(--r-lg);
  object-fit:    cover;
  box-shadow:    var(--shadow-lg);
  border:        2px solid rgba(240,165,0,0.4);
  flex-shrink:   0;
  transform:     translateY(0);
  transition:    transform var(--ease-slow);
}
.hero-slide.active .hero-cover { transform: translateY(-8px); }

.hero-text { flex: 1; min-width: 0; }

.hero-eyebrow {
  display:        inline-flex;
  align-items:    center;
  gap:            6px;
  background:     var(--red);
  color:          #fff;
  font-size:      10px;
  font-weight:    800;
  letter-spacing: 2px;
  padding:        4px 12px;
  border-radius:  var(--r-sm);
  text-transform: uppercase;
  margin-bottom:  12px;
}

.hero-title {
  font-family:    var(--font-head);
  font-size:      44px;
  font-weight:    900;
  color:          var(--bright);
  line-height:    1.1;
  letter-spacing: 0.5px;
  margin-bottom:  10px;
  text-shadow:    0 2px 20px rgba(0,0,0,0.5);
}

.hero-meta {
  display:      flex;
  gap:          var(--gap-md);
  align-items:  center;
  margin-bottom: 12px;
  flex-wrap:    wrap;
}
.hero-meta-item {
  font-size:   13px;
  color:       var(--sub);
  display:     flex;
  align-items: center;
  gap:         5px;
}
.hero-meta-dot { color: var(--muted); }
.hero-meta-status-ongoing   { color: var(--green); }
.hero-meta-status-completed { color: var(--blue);  }

.hero-genres {
  display:       flex;
  gap:           var(--gap-sm);
  margin-bottom: var(--gap-md);
  flex-wrap:     wrap;
}
.hero-genre-tag {
  font-size:     11px;
  font-weight:   700;
  padding:       3px 12px;
  border-radius: var(--r-full);
  background:    rgba(240,165,0,0.12);
  color:         var(--gold);
  border:        1px solid rgba(240,165,0,0.25);
  cursor:        pointer;
  transition:    all var(--ease);
}
.hero-genre-tag:hover {
  background: var(--gold);
  color:      var(--ink);
}

.hero-synopsis {
  font-size:   13px;
  color:       var(--sub);
  line-height: 1.7;
  max-width:   520px;
  margin-bottom: var(--gap-lg);
  display:     -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:    hidden;
}

.hero-actions {
  display:  flex;
  gap:      var(--gap-sm);
  flex-wrap: wrap;
}

/* Hero Navigation Dots */
.hero-nav {
  position:        absolute;
  bottom:          var(--gap-lg);
  right:           var(--gap-2xl);
  display:         flex;
  gap:             var(--gap-sm);
  align-items:     center;
  z-index:         10;
}
.hero-nav-dot {
  width:         28px;
  height:        4px;
  border-radius: 2px;
  background:    var(--muted);
  cursor:        pointer;
  transition:    all var(--ease);
  border:        none;
}
.hero-nav-dot.active {
  background: var(--gold);
  width:      44px;
}

/* ═══════════════════════════════════════════════════════════════════
   SECTION HEADERS
   ═══════════════════════════════════════════════════════════════════ */
.section-header {
  display:       flex;
  align-items:   center;
  gap:           var(--gap-md);
  margin-bottom: var(--gap-lg);
}

.section-title {
  font-family:    var(--font-head);
  font-size:      20px;
  font-weight:    700;
  color:          var(--bright);
  letter-spacing: 0.5px;
  display:        flex;
  align-items:    center;
  gap:            10px;
  white-space:    nowrap;
  flex-shrink:    0;
}
.section-title::before {
  content:       '';
  display:       block;
  width:         4px;
  height:        22px;
  background:    var(--gold);
  border-radius: 2px;
  flex-shrink:   0;
}

.section-line {
  flex:       1;
  height:     1px;
  background: linear-gradient(to right, var(--border), transparent);
}

.section-see-all {
  font-size:      12px;
  font-weight:    800;
  color:          var(--gold);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space:    nowrap;
  display:        flex;
  align-items:    center;
  gap:            4px;
  transition:     color var(--ease);
}
.section-see-all:hover { color: var(--gold-2); }

/* ═══════════════════════════════════════════════════════════════════
   MANGA CARDS
   ═══════════════════════════════════════════════════════════════════ */
.manga-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap:                   var(--gap-lg);
}
.manga-grid-lg {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap:                   var(--gap-xl);
}
.manga-grid-xl {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap:                   var(--gap-xl);
}

.manga-card {
  position:        relative;
  border-radius:   var(--r-md);
  overflow:        hidden;
  cursor:          pointer;
  background:      var(--ink-2);
  transition:      transform var(--ease), box-shadow var(--ease);
  display:         block;
  text-decoration: none;
}
.manga-card:hover {
  transform:  translateY(-6px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.6);
}

.manga-card-img-wrap {
  position:     relative;
  aspect-ratio: 2/3;
  overflow:     hidden;
}
.manga-card-img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform var(--ease-slow);
}
.manga-card:hover .manga-card-img { transform: scale(1.06); }

.manga-card-overlay {
  position:   absolute;
  bottom:     0;
  left:       0;
  right:      0;
  background: linear-gradient(
    to top,
    rgba(6,9,15,0.99) 0%,
    rgba(6,9,15,0.7)  50%,
    transparent       100%
  );
  padding:    36px 12px 12px;
}

.manga-card-title {
  font-size:      13px;
  font-weight:    800;
  color:          var(--bright);
  line-height:    1.3;
  margin-bottom:  4px;
  display:        -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:       hidden;
}
.manga-card-meta {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  font-size:       11px;
  color:           var(--sub);
}

/* Card Badges */
.card-badge {
  position:       absolute;
  top:            8px;
  left:           8px;
  font-size:      9px;
  font-weight:    800;
  padding:        3px 8px;
  border-radius:  var(--r-sm);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  z-index:        2;
  line-height:    1.4;
}
.badge-new      { background: var(--red);   color: #fff; }
.badge-hot      { background: linear-gradient(135deg, #ff6b35, #f7931e); color: #fff; }
.badge-rank     { background: var(--ink); color: var(--gold); border: 1px solid rgba(240,165,0,0.4); }
.badge-completed{ background: rgba(59,130,246,0.9); color: #fff; }

.card-status {
  position:       absolute;
  top:            8px;
  right:          40px;
  font-size:      9px;
  font-weight:    800;
  padding:        3px 8px;
  border-radius:  var(--r-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index:        2;
}
.status-ongoing   { background: rgba(34,197,94,0.85);  color: #fff; }
.status-completed { background: rgba(59,130,246,0.85); color: #fff; }
.status-hiatus    { background: rgba(234,179,8,0.85);  color: #fff; }
.status-dropped   { background: rgba(107,114,128,0.85);color: #fff; }

/* Bookmark Button on card */
.card-bookmark-btn {
  position:        absolute;
  top:             8px;
  right:           8px;
  width:           30px;
  height:          30px;
  background:      rgba(6,9,15,0.75);
  border:          1px solid rgba(255,255,255,0.1);
  border-radius:   var(--r-sm);
  color:           var(--sub);
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      all var(--ease);
  backdrop-filter: blur(8px);
  z-index:         3;
}
.card-bookmark-btn:hover         { color: var(--gold); border-color: var(--gold); }
.card-bookmark-btn.bookmarked    { color: var(--gold); background: rgba(240,165,0,0.2); }

/* ═══════════════════════════════════════════════════════════════════
   LATEST UPDATES LIST
   ═══════════════════════════════════════════════════════════════════ */
.updates-list {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.update-item {
  display:       flex;
  gap:           var(--gap-md);
  padding:       12px;
  border-radius: var(--r-md);
  cursor:        pointer;
  transition:    background var(--ease);
  align-items:   center;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
}
.update-item:hover        { background: var(--ink-3); }
.update-item:last-child   { border-bottom: none; }

.update-cover {
  width:         56px;
  height:        76px;
  border-radius: var(--r-sm);
  object-fit:    cover;
  flex-shrink:   0;
  border:        1px solid var(--border);
}

.update-body   { flex: 1; min-width: 0; }
.update-title  {
  font-size:       14px;
  font-weight:     800;
  color:           var(--bright);
  margin-bottom:   5px;
  white-space:     nowrap;
  overflow:        hidden;
  text-overflow:   ellipsis;
}

.update-chapters {
  display:   flex;
  gap:       6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.update-ch-btn {
  font-size:     11px;
  font-weight:   700;
  background:    rgba(240,165,0,0.1);
  color:         var(--gold);
  border:        1px solid rgba(240,165,0,0.2);
  padding:       2px 10px;
  border-radius: var(--r-sm);
  cursor:        pointer;
  transition:    all var(--ease);
  text-decoration: none;
}
.update-ch-btn:hover {
  background: var(--gold);
  color:      var(--ink);
}

.update-genres { display: flex; gap: 4px; }
.update-genre  {
  font-size:     10px;
  color:         var(--sub);
  background:    var(--ink-4);
  padding:       1px 8px;
  border-radius: var(--r-sm);
}

.update-time {
  font-size:   11px;
  color:       var(--muted);
  flex-shrink: 0;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════
   BOOKMARKS SECTION (Homepage)
   ═══════════════════════════════════════════════════════════════════ */
.bookmarks-panel {
  background: linear-gradient(
    135deg,
    var(--ink-2) 0%,
    var(--ink-3) 100%
  );
  border:        1px solid var(--border);
  border-radius: var(--r-xl);
  padding:       var(--gap-xl);
  position:      relative;
  overflow:      hidden;
}
.bookmarks-panel::after {
  content:    '🔖';
  position:   absolute;
  right:       24px;
  top:         50%;
  transform:   translateY(-50%);
  font-size:   90px;
  opacity:     0.05;
  pointer-events: none;
}

.bookmark-scroll {
  display:        flex;
  gap:            var(--gap-md);
  overflow-x:     auto;
  padding-bottom: 8px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.bookmark-scroll::-webkit-scrollbar { display: none; }

.bookmark-card {
  flex-shrink:     0;
  width:           115px;
  cursor:          pointer;
  text-decoration: none;
  display:         block;
}
.bookmark-card-img-wrap {
  position:      relative;
  border-radius: var(--r-md);
  overflow:      hidden;
  border:        2px solid var(--border);
  transition:    border-color var(--ease), box-shadow var(--ease);
}
.bookmark-card:hover .bookmark-card-img-wrap {
  border-color: var(--gold);
  box-shadow:   var(--shadow-gold);
}
.bookmark-card img {
  width:        115px;
  height:       162px;
  object-fit:   cover;
  display:      block;
  transition:   transform var(--ease-slow);
}
.bookmark-card:hover img { transform: scale(1.04); }

.bookmark-progress-bar {
  position:      absolute;
  bottom:        0;
  left:          0;
  right:         0;
  height:        3px;
  background:    rgba(0,0,0,0.5);
}
.bookmark-progress-fill {
  height:        100%;
  background:    var(--gold);
  border-radius: 0 2px 2px 0;
}

.bookmark-card-title {
  font-size:     11px;
  font-weight:   700;
  color:         var(--text);
  margin-top:    7px;
  text-align:    center;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}
.bookmark-card-ch {
  font-size:   10px;
  color:       var(--muted);
  text-align:  center;
  margin-top:  2px;
}

.bookmark-add-card {
  flex-shrink:     0;
  width:           115px;
  height:          162px;
  border:          2px dashed var(--border);
  border-radius:   var(--r-md);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             6px;
  cursor:          pointer;
  color:           var(--muted);
  transition:      all var(--ease);
  text-decoration: none;
}
.bookmark-add-card:hover {
  border-color: var(--gold);
  color:        var(--gold);
  background:   var(--glow);
}
.bookmark-add-icon { font-size: 24px; }
.bookmark-add-text { font-size: 11px; font-weight: 700; }

/* Empty bookmarks state */
.bookmarks-empty {
  text-align: center;
  padding:    var(--gap-xl);
  color:      var(--muted);
}
.bookmarks-empty-icon  { font-size: 48px; margin-bottom: 10px; }
.bookmarks-empty-title { font-size: 15px; font-weight: 700; color: var(--sub); }
.bookmarks-empty-sub   { font-size: 13px; margin-top: 4px; }
/* ═══════════════════════════════════════════════════════════════════
   SIDEBAR WIDGETS
   ═══════════════════════════════════════════════════════════════════ */
.ss-sidebar {
  display:        flex;
  flex-direction: column;
  gap:            var(--gap-xl);
  position:       sticky;
  top:            calc(var(--nav-h) + var(--gap-lg));
}

.widget {
  background:    var(--ink-2);
  border:        1px solid var(--border);
  border-radius: var(--r-lg);
  overflow:      hidden;
}

.widget-head {
  padding:        14px 20px;
  border-bottom:  1px solid var(--border);
  font-family:    var(--font-head);
  font-size:      12px;
  font-weight:    700;
  color:          var(--bright);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  display:        flex;
  align-items:    center;
  gap:            8px;
}
.widget-head::before {
  content:       '';
  width:         3px;
  height:        14px;
  background:    var(--gold);
  border-radius: 2px;
  flex-shrink:   0;
}

.widget-body { padding: var(--gap-md); }

/* Top Rankings Widget */
.rank-item {
  display:     flex;
  gap:         var(--gap-sm);
  align-items: center;
  padding:     8px 0;
  border-bottom: 1px solid var(--border);
  cursor:      pointer;
  transition:  background var(--ease);
  border-radius: var(--r-sm);
}
.rank-item:last-child  { border-bottom: none; }
.rank-item:hover       { background: var(--ink-3); padding: 8px 6px; }

.rank-number {
  font-family: var(--font-head);
  font-size:   18px;
  font-weight: 900;
  width:       28px;
  text-align:  center;
  flex-shrink: 0;
}
.rank-1 { color: var(--gold); }
.rank-2 { color: #94a3b8; }
.rank-3 { color: #cd7c3d; }
.rank-number:not(.rank-1):not(.rank-2):not(.rank-3) { color: var(--muted); }

.rank-cover {
  width:         44px;
  height:        60px;
  border-radius: var(--r-sm);
  object-fit:    cover;
  flex-shrink:   0;
}
.rank-info       { flex: 1; min-width: 0; }
.rank-title      { font-size: 12px; font-weight: 700; color: var(--bright); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-views      { font-size: 10px; color: var(--sub); margin-top: 2px; }
.rank-rating     { font-size: 10px; color: var(--gold); }

/* Genre Cloud Widget */
.genre-cloud {
  display:   flex;
  flex-wrap: wrap;
  gap:       6px;
}
.genre-pill {
  padding:       5px 13px;
  background:    var(--ink-4);
  border:        1px solid var(--border);
  border-radius: var(--r-full);
  font-size:     12px;
  font-weight:   700;
  color:         var(--sub);
  cursor:        pointer;
  transition:    all var(--ease);
  text-decoration: none;
  display:       block;
}
.genre-pill:hover {
  background:   var(--glow);
  border-color: var(--gold);
  color:        var(--gold);
}

/* ═══════════════════════════════════════════════════════════════════
   MANGA DETAIL PAGE
   ═══════════════════════════════════════════════════════════════════ */
.detail-hero {
  position:   relative;
  background: var(--ink-2);
  padding:    var(--gap-2xl) 0 0;
  overflow:   hidden;
}

.detail-hero-bg {
  position: absolute;
  inset:    0;
}
.detail-hero-bg img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  filter:     blur(28px) brightness(0.12) saturate(0.4);
  transform:  scale(1.15);
}
.detail-hero-bg::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    to bottom,
    rgba(6,9,15,0.5) 0%,
    rgba(6,9,15,0.9) 70%,
    var(--ink)       100%
  );
}

.detail-hero-inner {
  position: relative;
  z-index:  1;
}

.detail-breadcrumb {
  font-size:   12px;
  color:       var(--muted);
  margin-bottom: var(--gap-md);
  display:     flex;
  align-items: center;
  gap:         6px;
}
.detail-breadcrumb a       { color: var(--sub); }
.detail-breadcrumb a:hover { color: var(--gold); }
.detail-breadcrumb .sep    { color: var(--muted); }

.detail-layout {
  display:     flex;
  gap:         var(--gap-xl);
  align-items: flex-start;
  padding-bottom: var(--gap-2xl);
}

.detail-cover-col { flex-shrink: 0; }
.detail-cover {
  width:         220px;
  border-radius: var(--r-lg);
  box-shadow:    var(--shadow-lg);
  border:        2px solid rgba(240,165,0,0.3);
  display:       block;
}

.detail-cover-actions {
  display:   flex;
  gap:       var(--gap-sm);
  margin-top: var(--gap-md);
  flex-wrap: wrap;
}

.detail-info { flex: 1; min-width: 0; }

.detail-title {
  font-family:    var(--font-head);
  font-size:      38px;
  font-weight:    900;
  color:          var(--bright);
  line-height:    1.1;
  letter-spacing: 0.3px;
  margin-bottom:  6px;
}

.detail-alt-title {
  font-size:     13px;
  color:         var(--sub);
  margin-bottom: var(--gap-md);
  font-style:    italic;
}

.detail-stats {
  display:       flex;
  gap:           var(--gap-xl);
  flex-wrap:     wrap;
  margin-bottom: var(--gap-md);
}
.detail-stat {
  display:     flex;
  align-items: center;
  gap:         6px;
  font-size:   13px;
  color:       var(--sub);
}
.detail-stat strong { color: var(--text); font-weight: 800; }

.detail-tags {
  display:       flex;
  gap:           6px;
  flex-wrap:     wrap;
  margin-bottom: var(--gap-md);
}
.detail-tag {
  font-size:     11px;
  font-weight:   700;
  padding:       4px 12px;
  border-radius: var(--r-full);
  background:    rgba(240,165,0,0.08);
  color:         var(--gold);
  border:        1px solid rgba(240,165,0,0.2);
  cursor:        pointer;
  transition:    all var(--ease);
  text-decoration: none;
}
.detail-tag:hover {
  background: var(--gold);
  color:      var(--ink);
}

.detail-synopsis {
  font-size:     14px;
  color:         var(--sub);
  line-height:   1.85;
  max-width:     700px;
  margin-bottom: var(--gap-lg);
}

.detail-actions {
  display:       flex;
  gap:           var(--gap-sm);
  flex-wrap:     wrap;
  margin-bottom: var(--gap-lg);
}

.detail-meta-grid {
  display:     grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap:         var(--gap-md);
  padding-top: var(--gap-md);
  border-top:  1px solid var(--border);
}
.detail-meta-item { display: flex; flex-direction: column; gap: 3px; }
.detail-meta-label {
  font-size:      10px;
  color:          var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight:    700;
}
.detail-meta-value { font-size: 13px; font-weight: 700; color: var(--text); }
.detail-meta-value a { color: var(--gold); }

/* Rating Stars */
.star-rating {
  display:     flex;
  align-items: center;
  gap:         4px;
}
.star {
  font-size: 18px;
  cursor:    pointer;
  color:     var(--muted);
  transition: color var(--ease), transform var(--ease);
  line-height: 1;
}
.star.filled        { color: var(--gold); }
.star:hover         { transform: scale(1.2); }
.star-rating-value  { font-size: 13px; color: var(--sub); margin-left: 4px; }

/* Tabs */
.detail-tabs {
  background:    var(--ink-2);
  border:        1px solid var(--border);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  display:       flex;
  overflow:      hidden;
}
.detail-tab-btn {
  flex:           1;
  padding:        14px 20px;
  font-size:      13px;
  font-weight:    800;
  color:          var(--sub);
  background:     transparent;
  border:         none;
  border-bottom:  3px solid transparent;
  cursor:         pointer;
  transition:     all var(--ease);
  letter-spacing: 0.3px;
  display:        flex;
  align-items:    center;
  justify-content: center;
  gap:            8px;
  text-transform: uppercase;
  font-size:      12px;
}
.detail-tab-btn:hover  { color: var(--text); background: var(--ink-3); }
.detail-tab-btn.active { color: var(--gold); border-bottom-color: var(--gold); background: var(--ink-3); }
.tab-count {
  font-size:     10px;
  font-weight:   700;
  background:    var(--ink-4);
  color:         var(--muted);
  padding:       1px 7px;
  border-radius: var(--r-full);
}

.tab-panel         { display: none; }
.tab-panel.active  { display: block; }
.tab-panel-body {
  background:    var(--ink-2);
  border:        1px solid var(--border);
  border-top:    none;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  padding:       var(--gap-xl);
}

/* Chapter List */
.chapter-controls {
  display:       flex;
  justify-content: space-between;
  align-items:   center;
  margin-bottom: var(--gap-md);
  gap:           var(--gap-md);
  flex-wrap:     wrap;
}
.chapter-search {
  display:       flex;
  align-items:   center;
  gap:           var(--gap-sm);
  background:    var(--ink-3);
  border:        1px solid var(--border);
  border-radius: var(--r-md);
  padding:       7px 14px;
  transition:    border-color var(--ease);
}
.chapter-search:focus-within { border-color: var(--gold); }
.chapter-search input {
  background:  none;
  border:      none;
  color:       var(--text);
  font-size:   13px;
  outline:     none;
  width:       160px;
}
.chapter-sort {
  background:    var(--ink-3);
  border:        1px solid var(--border);
  border-radius: var(--r-md);
  color:         var(--text);
  font-size:     12px;
  padding:       7px 12px;
  outline:       none;
  cursor:        pointer;
}

.chapter-list      { display: flex; flex-direction: column; gap: 2px; }
.chapter-item {
  display:       flex;
  align-items:   center;
  gap:           var(--gap-md);
  padding:       12px 16px;
  background:    var(--ink-3);
  border-radius: var(--r-md);
  cursor:        pointer;
  transition:    all var(--ease);
  border:        1px solid transparent;
  text-decoration: none;
}
.chapter-item:hover {
  background:   var(--ink-4);
  border-color: var(--border);
  transform:    translateX(4px);
}
.chapter-item.is-new    { border-left: 3px solid var(--gold); }
.chapter-num {
  font-family: var(--font-mono);
  font-size:   13px;
  font-weight: 600;
  color:       var(--gold);
  min-width:   85px;
  flex-shrink: 0;
}
.chapter-title-text { flex: 1; font-size: 13px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chapter-date   { font-size: 11px; color: var(--muted); flex-shrink: 0; }
.chapter-views  { font-size: 11px; color: var(--muted); flex-shrink: 0; }
.chapter-new-tag {
  font-size:     9px;
  font-weight:   800;
  background:    var(--red);
  color:         #fff;
  padding:       2px 7px;
  border-radius: var(--r-sm);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  flex-shrink:   0;
}

/* ═══════════════════════════════════════════════════════════════════
   CHAPTER READER
   ═══════════════════════════════════════════════════════════════════ */
.reader-page { background: #000; min-height: 100vh; }

.reader-topbar {
  position:        sticky;
  top:             0;
  z-index:         100;
  background:      rgba(6,9,15,0.97);
  backdrop-filter: blur(20px);
  border-bottom:   1px solid var(--border);
  padding:         10px var(--gap-xl);
  display:         flex;
  align-items:     center;
  gap:             var(--gap-md);
}

.reader-info           { flex: 1; min-width: 0; }
.reader-manga-title    { font-size: 13px; font-weight: 800; color: var(--bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reader-chapter-label  { font-size: 11px; color: var(--sub); }

.reader-controls {
  display:     flex;
  gap:         var(--gap-sm);
  align-items: center;
  flex-shrink: 0;
}

.reader-mode-toggle {
  display:       flex;
  gap:           3px;
  background:    var(--ink-3);
  border:        1px solid var(--border);
  border-radius: var(--r-md);
  padding:       3px;
}
.reader-mode-btn {
  padding:       5px 12px;
  border-radius: var(--r-sm);
  background:    transparent;
  border:        none;
  cursor:        pointer;
  color:         var(--sub);
  font-size:     11px;
  font-weight:   700;
  transition:    all var(--ease);
}
.reader-mode-btn.active {
  background: var(--ink-4);
  color:      var(--gold);
}

.reader-nav-btn {
  display:       flex;
  align-items:   center;
  gap:           6px;
  padding:       7px 14px;
  background:    var(--ink-3);
  border:        1px solid var(--border);
  border-radius: var(--r-md);
  color:         var(--text);
  font-size:     12px;
  font-weight:   700;
  cursor:        pointer;
  transition:    all var(--ease);
  white-space:   nowrap;
}
.reader-nav-btn:hover {
  background:   var(--ink-4);
  border-color: var(--gold);
  color:        var(--gold);
}
.reader-nav-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.reader-pages {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  padding:        var(--gap-md) 0;
}
.reader-page-img {
  width:      100%;
  max-width:  800px;
  display:    block;
  margin-bottom: 2px;
}

/* Wide mode */
.reader-mode-wide .reader-page-img { max-width: 1200px; }

/* Page mode */
.reader-mode-paged .reader-pages    { flex-direction: row; }
.reader-mode-paged .reader-page-img { max-height: calc(100vh - 80px); width: auto; max-width: 100%; }

.reader-progress {
  position:       fixed;
  bottom:         0;
  left:           0;
  right:          0;
  height:         3px;
  background:     var(--ink-3);
  z-index:        100;
}
.reader-progress-fill {
  height:        100%;
  background:    var(--gold);
  transition:    width 0.1s;
  border-radius: 0 2px 2px 0;
}

/* End of chapter */
.reader-end {
  background:   var(--ink-2);
  border-top:   1px solid var(--border);
  padding:      var(--gap-2xl) 0;
  text-align:   center;
}
.reader-end-icon  { font-size: 48px; margin-bottom: var(--gap-md); }
.reader-end-title {
  font-family: var(--font-head);
  font-size:   24px;
  color:       var(--bright);
  margin-bottom: var(--gap-sm);
}
.reader-end-sub  { font-size: 14px; color: var(--sub); margin-bottom: var(--gap-xl); }
.reader-end-nav  { display: flex; justify-content: center; gap: var(--gap-md); flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════════════════════
   COMMENTS SYSTEM
   ═══════════════════════════════════════════════════════════════════ */
.comments-wrap {
  background:    var(--ink-2);
  border:        1px solid var(--border);
  border-radius: var(--r-lg);
  padding:       var(--gap-xl);
  margin-top:    var(--gap-xl);
}

.comments-header {
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  padding-bottom: var(--gap-md);
  border-bottom:  1px solid var(--border);
  margin-bottom:  var(--gap-xl);
  flex-wrap:      wrap;
  gap:            var(--gap-md);
}
.comments-title {
  font-family: var(--font-head);
  font-size:   18px;
  font-weight: 700;
  color:       var(--bright);
  display:     flex;
  align-items: center;
  gap:         10px;
}
.comments-total {
  font-size:     12px;
  font-weight:   700;
  background:    var(--ink-4);
  color:         var(--sub);
  padding:       3px 10px;
  border-radius: var(--r-full);
}
.comments-sort-wrap { display: flex; align-items: center; gap: 8px; }
.comments-sort {
  background:    var(--ink-3);
  border:        1px solid var(--border);
  border-radius: var(--r-sm);
  color:         var(--text);
  font-size:     12px;
  padding:       6px 10px;
  cursor:        pointer;
  outline:       none;
}

/* Comment Compose */
.comment-compose {
  display:       flex;
  gap:           var(--gap-md);
  margin-bottom: var(--gap-xl);
  align-items:   flex-start;
}
.comment-user-avatar {
  width:           40px;
  height:          40px;
  border-radius:   var(--r-full);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-weight:     900;
  font-size:       16px;
  color:           var(--ink);
  flex-shrink:     0;
  border:          2px solid rgba(240,165,0,0.3);
  text-transform:  uppercase;
}

.comment-compose-body { flex: 1; }
.comment-textarea {
  width:         100%;
  background:    var(--ink-3);
  border:        1px solid var(--border);
  border-radius: var(--r-md);
  color:         var(--text);
  font-size:     14px;
  padding:       12px 16px;
  min-height:    90px;
  resize:        vertical;
  outline:       none;
  transition:    border-color var(--ease), box-shadow var(--ease);
  line-height:   1.6;
}
.comment-textarea:focus {
  border-color: var(--gold);
  box-shadow:   0 0 0 3px var(--glow);
}
.comment-textarea::placeholder { color: var(--muted); }
.comment-textarea:disabled     { opacity: 0.5; cursor: not-allowed; }

.comment-toolbar {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-top:      10px;
  flex-wrap:       wrap;
  gap:             var(--gap-sm);
}
.comment-tools {
  display: flex;
  gap:     4px;
}
.comment-tool-btn {
  width:           32px;
  height:          32px;
  background:      var(--ink-4);
  border:          1px solid var(--border);
  border-radius:   var(--r-sm);
  color:           var(--sub);
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       13px;
  font-weight:     700;
  transition:      all var(--ease);
}
.comment-tool-btn:hover {
  color:        var(--gold);
  border-color: var(--gold);
  background:   var(--glow);
}

.login-to-comment {
  text-align: center;
  padding:    var(--gap-lg);
  color:      var(--sub);
  font-size:  13px;
}
.login-to-comment a { color: var(--gold); font-weight: 700; }

/* Comment Items */
.comment-list { display: flex; flex-direction: column; }

.comment-item {
  display:    flex;
  gap:        var(--gap-md);
  padding:    var(--gap-md) 0;
  border-bottom: 1px solid rgba(36,48,64,0.5);
}
.comment-item:last-child { border-bottom: none; }

.comment-item-avatar {
  width:           36px;
  height:          36px;
  border-radius:   var(--r-full);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-weight:     900;
  font-size:       14px;
  color:           var(--ink);
  flex-shrink:     0;
  text-transform:  uppercase;
}

.comment-body       { flex: 1; min-width: 0; }
.comment-meta-row   { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.comment-username   { font-size: 13px; font-weight: 800; color: var(--bright); }
.comment-role-badge {
  font-size:     10px;
  font-weight:   700;
  padding:       1px 7px;
  border-radius: 3px;
}
.badge-author { background: rgba(240,165,0,0.2); color: var(--gold); }
.badge-mod    { background: rgba(59,130,246,0.2); color: var(--blue); }
.badge-vip    { background: rgba(168,85,247,0.2); color: #a855f7; }
.comment-timestamp { font-size: 11px; color: var(--muted); margin-left: auto; }

.comment-text {
  font-size:     14px;
  color:         var(--sub);
  line-height:   1.75;
  margin-bottom: 10px;
  word-break:    break-word;
}

.comment-reactions  { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.reaction-btn {
  display:       flex;
  align-items:   center;
  gap:           5px;
  padding:       4px 12px;
  background:    var(--ink-3);
  border:        1px solid var(--border);
  border-radius: var(--r-full);
  font-size:     12px;
  font-weight:   700;
  color:         var(--sub);
  cursor:        pointer;
  transition:    all var(--ease);
}
.reaction-btn:hover          { border-color: var(--gold); color: var(--gold); background: var(--glow); }
.reaction-btn.liked          { background: var(--red-glow); border-color: var(--red); color: var(--red); }
.reaction-btn.reacted        { background: var(--glow); border-color: var(--gold); color: var(--gold); }
.comment-reply-btn {
  font-size:   12px;
  font-weight: 700;
  color:       var(--sub);
  background:  none;
  border:      none;
  cursor:      pointer;
  padding:     4px 8px;
  border-radius: var(--r-sm);
  transition:  color var(--ease);
}
.comment-reply-btn:hover { color: var(--gold); }

/* Nested Replies */
.comment-replies {
  margin-left:  52px;
  margin-top:   var(--gap-md);
  border-left:  2px solid var(--border);
  padding-left: var(--gap-md);
}

/* Reply Box */
.reply-compose {
  margin-top:  var(--gap-md);
  display:     flex;
  gap:         var(--gap-sm);
  align-items: flex-start;
}
.reply-compose .comment-textarea {
  min-height: 64px;
  font-size:  13px;
}

/* Avatar color variants */
.av-gold   { background: linear-gradient(135deg, var(--gold), var(--gold-dark)); }
.av-purple { background: linear-gradient(135deg, #7c3aed, #4f46e5); }
.av-teal   { background: linear-gradient(135deg, #0d9488, #0891b2); }
.av-pink   { background: linear-gradient(135deg, #ec4899, #db2777); }
.av-green  { background: linear-gradient(135deg, #16a34a, #15803d); }
.av-red    { background: linear-gradient(135deg, var(--red), #c2185b); }
.av-blue   { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
.av-orange { background: linear-gradient(135deg, #f97316, #ea580c); }

/* ═══════════════════════════════════════════════════════════════════
   BROWSE / ALL MANGA PAGE
   ═══════════════════════════════════════════════════════════════════ */
.browse-header {
  padding:         var(--gap-2xl) 0 var(--gap-xl);
  border-bottom:   1px solid var(--border);
  background:      linear-gradient(to bottom, var(--ink-2), transparent);
  margin-bottom:   var(--gap-xl);
}
.browse-title {
  font-family:    var(--font-head);
  font-size:      32px;
  font-weight:    900;
  color:          var(--bright);
  letter-spacing: 1px;
}
.browse-sub {
  font-size:    14px;
  color:        var(--sub);
  margin-top:   4px;
}

.filter-bar {
  display:   flex;
  gap:       var(--gap-md);
  flex-wrap: wrap;
  align-items: center;
  padding:   var(--gap-md) 0;
}
.filter-group {
  display:     flex;
  align-items: center;
  gap:         8px;
}
.filter-label {
  font-size:      11px;
  font-weight:    800;
  color:          var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space:    nowrap;
}
.filter-select {
  background:    var(--ink-3);
  border:        1px solid var(--border);
  border-radius: var(--r-md);
  color:         var(--text);
  font-size:     13px;
  padding:       7px 12px;
  outline:       none;
  cursor:        pointer;
  transition:    border-color var(--ease);
}
.filter-select:focus { border-color: var(--gold); }

.genre-filter-row {
  display:   flex;
  gap:       6px;
  flex-wrap: wrap;
  margin-bottom: var(--gap-lg);
}
.genre-filter-chip {
  padding:       6px 15px;
  border-radius: var(--r-full);
  font-size:     12px;
  font-weight:   700;
  background:    var(--ink-3);
  border:        1px solid var(--border);
  color:         var(--sub);
  cursor:        pointer;
  transition:    all var(--ease);
  text-decoration: none;
}
.genre-filter-chip:hover  { border-color: var(--gold); color: var(--gold); background: var(--glow); }
.genre-filter-chip.active { background: var(--glow); border-color: var(--gold); color: var(--gold); }

.results-count { font-size: 13px; color: var(--sub); margin-bottom: var(--gap-lg); }
.results-count strong { color: var(--text); }

/* ═══════════════════════════════════════════════════════════════════
   AUTH PAGES (Login / Register)
   ═══════════════════════════════════════════════════════════════════ */
.auth-page {
  min-height:      calc(100vh - var(--nav-h));
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         var(--gap-2xl) var(--gap-lg);
  position:        relative;
  overflow:        hidden;
}
.auth-page::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: radial-gradient(ellipse at center top, rgba(240,165,0,0.06) 0%, transparent 60%);
  pointer-events: none;
}

.auth-card {
  width:         100%;
  max-width:     440px;
  background:    var(--ink-2);
  border:        1px solid var(--border);
  border-radius: var(--r-xl);
  padding:       var(--gap-2xl);
  box-shadow:    var(--shadow-lg);
  position:      relative;
  z-index:       1;
}

.auth-logo {
  text-align:    center;
  font-family:   var(--font-head);
  font-size:     24px;
  font-weight:   900;
  color:         var(--gold);
  letter-spacing: 3px;
  margin-bottom: var(--gap-xl);
}
.auth-logo .spider { font-size: 32px; display: block; margin-bottom: 6px; }

.auth-title {
  font-size:     22px;
  font-weight:   900;
  color:         var(--bright);
  text-align:    center;
  margin-bottom: 4px;
}
.auth-sub {
  font-size:     13px;
  color:         var(--sub);
  text-align:    center;
  margin-bottom: var(--gap-xl);
}

.form-group {
  display:       flex;
  flex-direction: column;
  gap:           6px;
  margin-bottom: var(--gap-md);
}
.form-label {
  font-size:      12px;
  font-weight:    800;
  color:          var(--sub);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.form-label .required { color: var(--red); }

.form-input {
  width:         100%;
  background:    var(--ink-3);
  border:        1px solid var(--border);
  border-radius: var(--r-md);
  color:         var(--text);
  font-size:     14px;
  padding:       11px 14px;
  outline:       none;
  transition:    border-color var(--ease), box-shadow var(--ease);
}
.form-input:focus {
  border-color: var(--gold);
  box-shadow:   0 0 0 3px var(--glow);
}
.form-input::placeholder { color: var(--muted); }

.password-wrap { position: relative; }
.password-wrap .form-input { padding-right: 44px; }
.password-toggle {
  position:        absolute;
  right:           12px;
  top:             50%;
  transform:       translateY(-50%);
  background:      none;
  border:          none;
  cursor:          pointer;
  color:           var(--muted);
  transition:      color var(--ease);
  display:         flex;
  align-items:     center;
  justify-content: center;
}
.password-toggle:hover { color: var(--gold); }

.form-error {
  font-size:   12px;
  color:       var(--red);
  margin-top:  4px;
}
.form-success {
  font-size:   12px;
  color:       var(--green);
  margin-top:  4px;
}

.auth-divider {
  display:     flex;
  align-items: center;
  gap:         var(--gap-md);
  margin:      var(--gap-lg) 0;
}
.auth-divider-line { flex: 1; height: 1px; background: var(--border); }
.auth-divider-text { font-size: 12px; color: var(--muted); white-space: nowrap; }

.btn-google {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             10px;
  width:           100%;
  padding:         12px;
  background:      #fff;
  border:          none;
  border-radius:   var(--r-md);
  font-size:       14px;
  font-weight:     700;
  color:           #333;
  cursor:          pointer;
  transition:      all var(--ease);
}
.btn-google:hover {
  background: #f8f8f8;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  transform:  translateY(-1px);
}

.auth-switch {
  text-align:  center;
  font-size:   13px;
  color:       var(--sub);
  margin-top:  var(--gap-lg);
}
.auth-switch a { color: var(--gold); font-weight: 700; }

.auth-terms {
  text-align:  center;
  font-size:   11px;
  color:       var(--muted);
  margin-top:  var(--gap-md);
  line-height: 1.6;
}
.auth-terms a { color: var(--gold); }

/* ═══════════════════════════════════════════════════════════════════
   NOTIFICATIONS PANEL
   ═══════════════════════════════════════════════════════════════════ */
.notif-overlay {
  position:   fixed;
  inset:      0;
  z-index:    998;
  display:    none;
}
.notif-overlay.open { display: block; }

.notif-panel {
  position:       fixed;
  top:            var(--nav-h);
  right:          0;
  width:          380px;
  max-height:     calc(100vh - var(--nav-h));
  background:     var(--ink-2);
  border:         1px solid var(--border);
  border-radius:  0 0 0 var(--r-lg);
  box-shadow:     var(--shadow-lg);
  z-index:        999;
  display:        flex;
  flex-direction: column;
  transform:      translateX(100%);
  transition:     transform 0.3s ease;
  overflow:       hidden;
}
.notif-panel.open { transform: translateX(0); }

.notif-panel-head {
  padding:       var(--gap-md) var(--gap-lg);
  border-bottom: 1px solid var(--border);
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  flex-shrink:   0;
}
.notif-panel-title {
  font-family: var(--font-head);
  font-size:   15px;
  font-weight: 700;
  color:       var(--bright);
}
.notif-mark-read-btn {
  font-size:   12px;
  color:       var(--gold);
  background:  none;
  border:      none;
  cursor:      pointer;
  font-weight: 700;
  transition:  color var(--ease);
}
.notif-mark-read-btn:hover { color: var(--gold-2); }

.notif-list    { overflow-y: auto; flex: 1; }
.notif-item {
  display:     flex;
  gap:         var(--gap-md);
  padding:     var(--gap-md) var(--gap-lg);
  border-bottom: 1px solid var(--border);
  cursor:      pointer;
  transition:  background var(--ease);
  align-items: flex-start;
  text-decoration: none;
}
.notif-item:hover { background: var(--ink-3); }
.notif-item.unread { background: rgba(240,165,0,0.03); }

.notif-unread-dot {
  width:        8px;
  height:       8px;
  border-radius: var(--r-full);
  background:   var(--gold);
  margin-top:   5px;
  flex-shrink:  0;
}
.notif-unread-dot.read { background: transparent; border: 1px solid var(--muted); }

.notif-cover {
  width:         42px;
  height:        58px;
  border-radius: var(--r-sm);
  object-fit:    cover;
  flex-shrink:   0;
}
.notif-content        { flex: 1; }
.notif-manga-title    { font-size: 13px; font-weight: 800; color: var(--bright); }
.notif-chapter        { font-size: 12px; color: var(--sub); margin-top: 2px; }
.notif-time           { font-size: 11px; color: var(--muted); margin-top: 3px; }

/* ═══════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════ */
.ss-footer {
  background:  var(--ink-2);
  border-top:  1px solid var(--border);
  padding:     var(--gap-2xl) 0 var(--gap-lg);
  margin-top:  var(--gap-2xl);
}

.footer-grid {
  display:               grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap:                   var(--gap-2xl);
  margin-bottom:         var(--gap-2xl);
}
.footer-brand-desc {
  font-size:   13px;
  color:       var(--muted);
  line-height: 1.7;
  max-width:   260px;
  margin-top:  var(--gap-md);
}
.footer-social {
  display:   flex;
  gap:       var(--gap-sm);
  margin-top: var(--gap-md);
}
.social-btn {
  width:           34px;
  height:          34px;
  background:      var(--ink-3);
  border:          1px solid var(--border);
  border-radius:   var(--r-sm);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       15px;
  cursor:          pointer;
  transition:      all var(--ease);
  text-decoration: none;
}
.social-btn:hover { background: var(--glow); border-color: var(--gold); }

.footer-col-title {
  font-family:    var(--font-head);
  font-size:      13px;
  font-weight:    700;
  color:          var(--bright);
  letter-spacing: 1px;
  margin-bottom:  var(--gap-md);
  text-transform: uppercase;
}
.footer-links {
  list-style: none;
  display:    flex;
  flex-direction: column;
  gap:        8px;
}
.footer-links a {
  font-size:   13px;
  color:       var(--muted);
  transition:  color var(--ease);
}
.footer-links a:hover { color: var(--gold); }

.footer-bottom {
  padding-top:     var(--gap-lg);
  border-top:      1px solid var(--border);
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  flex-wrap:       wrap;
  gap:             var(--gap-md);
}
.footer-bottom-text { font-size: 12px; color: var(--muted); }

/* ═══════════════════════════════════════════════════════════════════
   LOADING / SKELETON STATES
   ═══════════════════════════════════════════════════════════════════ */
.skeleton {
  background:      linear-gradient(90deg, var(--ink-3) 25%, var(--ink-4) 50%, var(--ink-3) 75%);
  background-size: 200% 100%;
  animation:       skeleton-shine 1.5s infinite;
  border-radius:   var(--r-sm);
}
@keyframes skeleton-shine {
  0%   { background-position:  200% 0; }
  100% { background-position: -200% 0; }
}

.loading-spinner {
  width:         32px;
  height:        32px;
  border:        3px solid var(--border);
  border-top:    3px solid var(--gold);
  border-radius: var(--r-full);
  animation:     spin 0.8s linear infinite;
  margin:        0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Toast Notifications */
.ss-toast {
  position:      fixed;
  bottom:        var(--gap-xl);
  right:         var(--gap-xl);
  background:    var(--ink-2);
  border:        1px solid var(--border);
  border-radius: var(--r-md);
  padding:       12px 20px;
  font-size:     13px;
  font-weight:   700;
  color:         var(--text);
  box-shadow:    var(--shadow-lg);
  z-index:       9999;
  display:       flex;
  align-items:   center;
  gap:           10px;
  transform:     translateY(100px);
  opacity:       0;
  transition:    all 0.3s ease;
  max-width:     320px;
}
.ss-toast.show      { transform: translateY(0); opacity: 1; }
.ss-toast.success   { border-color: var(--green); }
.ss-toast.error     { border-color: var(--red); }
.ss-toast.info      { border-color: var(--gold); }

/* ═══════════════════════════════════════════════════════════════════
   UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════════ */
.text-gold    { color: var(--gold);   }
.text-bright  { color: var(--bright); }
.text-muted   { color: var(--muted);  }
.text-sub     { color: var(--sub);    }
.text-red     { color: var(--red);    }
.text-green   { color: var(--green);  }

.mt-sm  { margin-top: var(--gap-sm);  }
.mt-md  { margin-top: var(--gap-md);  }
.mt-lg  { margin-top: var(--gap-lg);  }
.mt-xl  { margin-top: var(--gap-xl);  }
.mb-sm  { margin-bottom: var(--gap-sm);  }
.mb-md  { margin-bottom: var(--gap-md);  }
.mb-lg  { margin-bottom: var(--gap-lg);  }
.mb-xl  { margin-bottom: var(--gap-xl);  }

.hide   { display: none !important; }
.show   { display: block !important; }

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — TABLET
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .grid-main     { grid-template-columns: 1fr; }
  .ss-sidebar    { display: none; }
  .footer-grid   { grid-template-columns: 1fr 1fr; gap: var(--gap-xl); }
}

@media (max-width: 900px) {
  .hero-title     { font-size: 32px; }
  .hero-content   { padding: var(--gap-xl); gap: var(--gap-md); }
  .hero-cover     { width: 120px; height: 168px; }
  .detail-title   { font-size: 28px; }
  .detail-layout  { flex-direction: column; align-items: center; text-align: center; }
  .detail-actions { justify-content: center; }
  .detail-meta-grid { justify-items: center; }
  .detail-tags    { justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  :root { --nav-h: 56px; }

  .nav-links         { display: none; }
  .nav-search        { display: none; }
  .nav-mobile-toggle { display: flex; }

  .ss-hero           { height: 420px; }
  .hero-title        { font-size: 24px; }
  .hero-synopsis     { display: none; }
  .hero-cover        { width: 90px; height: 126px; }

  .manga-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap-sm);
  }

  .detail-cover { width: 160px; }

  .footer-grid { grid-template-columns: 1fr; }

  .notif-panel { width: 100%; border-radius: 0; }

  .reader-topbar { padding: 8px var(--gap-md); }
  .reader-mode-toggle { display: none; }

  .auth-card { padding: var(--gap-xl); }
}