:root {
  --bg-primary: #121212;
  --bg-secondary: #0c1219;
  --bg-tertiary: #131b26;
  --text-main: #f5f5f5;
  --text-muted: #a0a0a0;
  --border-color: #1e293b;
  --input-bg: #06090f;
  /* ACN brand — static red→orange→amber "fire" gradient (2026-11-13). */
  --brand-fire: linear-gradient(135deg, #FF3B00 0%, #FF5E00 100%);
  --brand-fire-hover: linear-gradient(135deg, #ff4d00 0%, #ff7a1a 100%);
}

@keyframes trueRainbowBg {
  0%   { background-color: #06090f; }
  20%  { background-color: #120914; }
  40%  { background-color: #091218; }
  60%  { background-color: #141209; }
  80%  { background-color: #0d0914; }
  100% { background-color: #06090f; }
}

body {
  margin: 0;
  padding: 0;
  overscroll-behavior-y: contain;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  animation: trueRainbowBg 25s ease infinite;
  color: var(--text-main);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: color .3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

button, a, .comic-card, .chapter-card, .topup-card, .canvas-hero-banner {
  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.rainbow-text {
  background: var(--brand-fire);
  background-size: 100% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: none;
  font-weight: 800;
}

.rainbow-btn-glow {
  background: var(--brand-fire)!important;
  background-size: 100% 100%!important;
  animation: none!important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.45)!important;
}

.nav-brand-group { display: flex; align-items: center; gap: 8px; }

.header-cat-mascot { margin: 0 8px;
  position: relative;
  width: 60px; height: 60px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s;
}
.header-cat-mascot:active { transform: scale(.9); }
.mascot-cat-svg { width: 100%; height: 100%; }

.cat-cry-bubble {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) scale(0);
  background: #ff3366; color: #fff;
  font-size: 12px; font-weight: 900;
  padding: 4px 10px;
  border-radius: 10px;
  white-space: nowrap;
  pointer-events: none;
  transition: transform .2s cubic-bezier(.175,.885,.32,1.275);
  box-shadow: 0 4px 10px rgba(255,51,102,.4);
  transform-origin: top center;
  z-index: 30;
}
.cat-cry-bubble.active { transform: translateX(-50%) scale(1); }
.cat-cry-bubble::before {
  content: '';
  position: absolute; top: -5px; left: 50%; margin-left: -5px;
  border: 5px solid transparent;
  border-top: 0;
  border-bottom-color: #ff3366;
}

.main-nav {
  background-color: #0a0a0a;
  padding: 12px 20px;
  display: flex; justify-content: space-between; align-items: center; gap: 15px;
  border-bottom: none;
  box-sizing: border-box;
  width: 100%;
  min-height: 70px;
  height: auto;
  overflow: visible;
  position: sticky; top: 0; z-index: 10;
}
.nav-left { display: flex; align-items: center; gap: 10px; min-width: 0; }

.hamburger-btn {
  background: transparent; border: none; cursor: pointer;
  display: flex; flex-direction: column; gap: 5px; padding: 4px;
}
.hamburger-btn span { display: block; width: 22px; height: 2px; background-color: var(--text-main); border-radius: 2px; }

.logo {
  font-size: 18px; font-weight: 800; letter-spacing: .5px;
  flex-shrink: 0;
  color: var(--text-main);
  display: flex; align-items: center;
}
.logo span { color: #ff3366; }
.logo .acn-logo-text {
  color: var(--text-main);
  background: var(--brand-fire);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 21px;
  font-weight: 900;
  letter-spacing: 2px;
  line-height: 1;
  white-space: nowrap;
  text-shadow: none;
}

.auth-buttons { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
.btn-secondary,.btn-primary { text-decoration: none; display: inline-block; text-align: center; }
.btn-secondary {
  background: transparent; color: var(--text-muted);
  border: 1px solid var(--border-color);
  padding: 8px 12px; border-radius: 6px;
  font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.btn-primary {
  background: var(--brand-fire);
  color: #fff; border: none;
  padding: 8px 12px; border-radius: 6px;
  font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap;
}

.sidebar-overlay {
  position: fixed; inset: 0;
  background-color: rgba(0,0,0,.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 998;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .25s;
  will-change: opacity;
}
.sidebar-overlay.active {
  opacity: 1;
  visibility: visible;
  transition: opacity .25s ease, visibility 0s;
}

html.role-ui-pending #side-drawer { visibility: hidden; }

.side-drawer {
  position: fixed; top: 0; left: 0;
  width: 300px; height: 100vh;
  background: rgba(15, 15, 20, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 999;
  display: flex; flex-direction: column;
  box-sizing: border-box;
  transform: translateX(-100%);
  transition: transform 0.55s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.side-drawer.active {
  transform: translateX(0);
}
.drawer-header { padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); }
.close-drawer { background: transparent; border: none; color: var(--text-muted); font-size: 28px; cursor: pointer; }

.drawer-profile-box { padding: 16px 20px; background-color: var(--bg-primary); border-bottom: 1px solid var(--border-color); }
.profile-top-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.drawer-avatar-wrapper { position: relative; cursor: pointer; flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; }
.native-file-overlay { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; z-index: 5; }
.drawer-avatar {
  width: 100%; height: 100%;
  background: var(--brand-fire);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 900; font-size: 16px;
  border: 2px solid #ff3366; box-sizing: border-box;
}
.drawer-avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-camera-badge {
  position: absolute; bottom: 0; right: 0;
  background-color: var(--bg-secondary);
  border: 1px solid #ff3366; border-radius: 50%;
  width: 18px; height: 18px; font-size: 9px;
  display: flex; align-items: center; justify-content: center;
  z-index: 2; pointer-events: none;
}
.profile-identity { display: flex; flex-direction: column; overflow: hidden; }
.profile-username { font-size: 14px; font-weight: 800; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-handle { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.profile-stats-row {
  display: flex; justify-content: space-between;
  padding: 8px 0;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 12px;
}
.stat-item { text-align: center; flex: 1; }
.stat-num { display: block; font-size: 13px; font-weight: 800; color: var(--text-main); }
.stat-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; }
.profile-actions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.profile-action-btn {
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-main); font-size: 11px; font-weight: 700;
  padding: 8px; border-radius: 8px; text-align: center;
  text-decoration: none; cursor: pointer; transition: background .2s;
}
.profile-action-btn.highlight { background: var(--brand-fire); color: #fff; border-color: #ff3366; }

.drawer-quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
.drawer-quick-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 13px 10px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 12px;
  background: linear-gradient(160deg, #1b1f2a, #11141b);
  color: var(--text-main);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  transition: transform .2s, border-color .2s, background .2s, color .2s;
}
.drawer-quick-btn svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  flex-shrink: 0;
}
.drawer-quick-btn:hover {
  color: #fff;
  border-color: rgba(255, 51, 102, .55);
  background: linear-gradient(160deg, #242936, #171b24);
  transform: translateY(-1px);
}
.drawer-quick-btn:active { transform: translateY(0); }

body.light-mode .drawer-quick-btn {
  background: #f0f0f0;
  color: #333333;
  border: 1px solid #ddd;
  box-shadow: none;
}
body.light-mode .drawer-quick-btn svg {
  stroke: #333333;
}

.drawer-downloads {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-tertiary);
}
.drawer-downloads-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; font-size: 11px; font-weight: 800; color: var(--text-main);
  text-transform: uppercase; letter-spacing: 0.03em;
}
.drawer-downloads-size { color: #ffb703; white-space: nowrap; }
.drawer-downloads-summary { margin-top: 4px; font-size: 11px; color: var(--text-muted); }
.drawer-downloads-clear {
  margin-top: 8px; width: 100%; padding: 7px 10px;
  border: 1px solid var(--border-color); border-radius: 8px;
  background: transparent; color: var(--text-muted);
  font: inherit; font-size: 11px; font-weight: 700; cursor: pointer;
}
.drawer-downloads-clear:hover:not(:disabled) { color: #ff3366; border-color: #ff3366; }
.drawer-downloads-clear:disabled { opacity: 0.45; cursor: default; }

.drawer-theme-switcher {
  padding: 12px 20px; background-color: var(--bg-primary);
  border-bottom: 1px solid var(--border-color);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; font-weight: 700; color: var(--text-muted);
}
.theme-switch-pill {
  background: var(--bg-tertiary); border: 1px solid var(--border-color);
  color: var(--text-main); padding: 6px 12px; border-radius: 20px;
  font-size: 12px; font-weight: 700; cursor: pointer;
}

.drawer-links { list-style: none; padding: 10px 0; margin: 0; flex-grow: 1; overflow-y: auto; }
.drawer-links li a {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 20px; color: var(--text-muted);
  text-decoration: none; font-size: 13px; font-weight: 600;
  transition: background-color 0.2s ease, padding-left 0.2s ease, color 0.2s ease;
}
.drawer-links li a:hover,
.drawer-links li a:active { background-color: rgba(255,0,85,.08); color: #ff3366; padding-left: 24px; }
.drawer-links li a.active-pill { background-color: rgba(255,0,85,.12); color: #ff3366; padding-left: 24px; }
.link-icon { width: 18px; height: 18px; stroke: currentColor; flex-shrink: 0; }
.partner-cta-item,
.partner-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.star-icon {
  margin: 0;
  padding: 0;
  display: block;
}

.hero-container {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 30px 16px 50px;
  max-width: 480px; margin: 0 auto;
  box-sizing: border-box; flex-grow: 1;
  animation: fadeIn 0.4s ease-out;
}
.brand-title { margin-bottom: 4px; }
.brand-title h1 { margin: 0; font-size: 42px; font-weight: 900; letter-spacing: 2px; line-height: 1.1; }
.brand-title h1:first-child {
  background: var(--brand-fire);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}
.accent-title { font-size: 22px!important; margin-bottom: 10px!important; }
.sub-headline { color: var(--text-muted); font-size: 14px; line-height: 1.4; margin: 0 auto 20px; max-width: 320px; }
.search-wrapper { width: 100%; margin-bottom: 16px; }
.search-wrapper input {
  width: 100%; box-sizing: border-box;
  padding: 12px 18px;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 25px;
  color: var(--text-main); font-size: 13px; outline: none;
}
.new-comics-header {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; margin-bottom: 14px; padding: 0 4px; box-sizing: border-box;
}
.new-comics-header h3 { margin: 0; font-size: 18px; font-weight: 800; color: var(--text-main); text-align: left; }
.see-all-arrow { color: var(--text-muted); font-size: 22px; font-weight: 700; }

.canvas-hero-banner {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  box-sizing: border-box;
  margin: 2px 0 22px;
  padding: 16px;
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  text-align: left;
  border: 1.5px solid rgba(255, 82, 167, .82);
  background:
    radial-gradient(130% 160% at 0% 0%, rgba(255, 255, 255, .18), transparent 46%),
    linear-gradient(120deg, #2a073f 0%, #5a0a73 32%, #a30b6d 66%, #ff3366 100%);
  box-shadow:
    0 0 16px rgba(255, 51, 102, .42),
    0 0 36px rgba(168, 42, 255, .30),
    0 12px 32px rgba(0, 0, 0, .34),
    inset 0 1px 0 rgba(255, 255, 255, .20);
  transition: transform .22s ease, box-shadow .22s ease;
}
.canvas-hero-banner::before {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: -1;
  background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, .22) 46%, transparent 62%);
  transform: translateX(-120%);
  transition: transform .7s ease;
}
.canvas-hero-banner:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 22px rgba(255, 51, 102, .58),
    0 0 52px rgba(168, 42, 255, .42),
    0 16px 36px rgba(0, 0, 0, .38),
    inset 0 1px 0 rgba(255, 255, 255, .24);
}
.canvas-hero-banner:hover::before { transform: translateX(120%); }
.canvas-hero-logo {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, .11);
  border: 1px solid rgba(255, 255, 255, .30);
  box-shadow: 0 0 18px rgba(255, 255, 255, .18), inset 0 0 12px rgba(255, 255, 255, .07);
}
.canvas-hero-logo svg {
  width: 38px;
  height: 38px;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, .35));
}
.canvas-hero-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  color: #fff;
}
.canvas-hero-title {
  font-size: 26px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .5px;
  text-shadow: 0 0 14px rgba(255, 255, 255, .45);
}
.canvas-hero-dash {
  font-size: 22px;
  font-weight: 800;
  opacity: .7;
}
.canvas-hero-tagline {
  font-size: 15px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: 1.4px;
  color: #ffd9ee;
  text-shadow: 0 0 10px rgba(255, 120, 200, .5);
}
.canvas-hero-arrow {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .30);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.canvas-hero-arrow svg { width: 19px; height: 19px; }
.canvas-hero-banner:hover .canvas-hero-arrow {
  background: #fff;
  color: #c0105d;
  transform: translateX(2px);
}
@media (max-width: 380px) {
  .canvas-hero-banner { gap: 10px; padding: 13px; border-radius: 15px; }
  .canvas-hero-logo { width: 46px; height: 46px; }
  .canvas-hero-logo svg { width: 31px; height: 31px; }
  .canvas-hero-title { font-size: 21px; }
  .canvas-hero-dash { font-size: 18px; }
  .canvas-hero-tagline { font-size: 12px; letter-spacing: 1px; }
  .canvas-hero-arrow { width: 30px; height: 30px; }
}
.comics-grid-feed {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 12px; width: 100%; margin-bottom: 30px; box-sizing: border-box;
  overscroll-behavior-y: contain;
}
.home-comics-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 30px 18px;
  border: 1px dashed var(--border-color);
  border-radius: 14px;
  background: var(--bg-secondary);
  color: var(--text-muted);
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}
.comic-card {
  position: relative;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column;
  aspect-ratio: 3 / 4; box-sizing: border-box;
  transition: transform .2s,border-color .2s;
  cursor: pointer;
}
.comic-card:hover { border-color: #ff3366; transform: translateY(-3px); }
.time-badge {
  position: absolute; top: 8px; left: 8px;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(4px);
  color: #ffb703; font-size: 10px; font-weight: 800;
  padding: 3px 6px; border-radius: 6px; z-index: 3;
}
.cat-illustration-box {
  width: 100%; flex-grow: 1;
  background: linear-gradient(135deg,#111822,#1f2937);
  display: flex; align-items: center; justify-content: center;
}
.cat-outline-svg { width: 65%; height: 65%; color: #ff3366; opacity: .85; overflow: visible; }
.comic-card-title {
  padding: 10px 8px; font-size: 11px; font-weight: 700;
  color: var(--text-main); background-color: var(--bg-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-align: center;
}

.main-cta-btn {
  background: var(--brand-fire);
  color: #fff; border: none; text-decoration: none;
  font-weight: 900; font-size: 15px;
  padding: 15px 28px; border-radius: 30px;
  display: inline-block; text-align: center;
  width: 100%; max-width: 320px;
  box-sizing: border-box;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
  cursor: pointer; margin-top: auto;
}
.main-cta-btn:hover { background: var(--brand-fire-hover); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5); }

.modal-overlay {
  position: fixed; inset: 0;
  background-color: rgba(0,0,0,.8);
  backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center;
  padding: 15px; box-sizing: border-box;
  z-index: 1000; opacity: 0; transition: opacity .25s ease;
}
.modal-overlay.active { display: flex; opacity: 1; }
.acn-download-modal { z-index: 3000; }
.acn-download-box {
  width: 100%; max-width: 360px; box-sizing: border-box;
  padding: 22px; border-radius: 18px;
  background: var(--bg-secondary); border: 1px solid var(--border-color);
  color: var(--text-main); box-shadow: 0 18px 46px rgba(0,0,0,0.6);
}
.acn-download-head h2 {
  margin: 0; font-size: 18px; font-weight: 900;
  background: var(--brand-fire);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.acn-download-sub { margin: 6px 0 16px; font-size: 12px; color: var(--text-muted); }
.acn-download-track { height: 10px; border-radius: 999px; background: var(--bg-tertiary); overflow: hidden; }
.acn-download-bar { width: 0; height: 100%; border-radius: 999px; background: var(--brand-fire); transition: width 0.18s ease; }
.acn-download-status { margin: 12px 0 16px; min-height: 34px; font-size: 12px; color: var(--text-muted); line-height: 1.45; }
.acn-download-action {
  width: 100%; padding: 11px 16px; border: 0; border-radius: 10px;
  background: var(--bg-tertiary); color: var(--text-main);
  font: inherit; font-size: 13px; font-weight: 800; cursor: pointer;
}
.acn-download-action:hover { background: #ff3366; color: #fff; }
.acn-bulk-download-modal { z-index: 3000; }
.acn-bulk-box {
  width: 100%; max-width: 400px; max-height: 82vh; box-sizing: border-box;
  display: flex; flex-direction: column;
  padding: 20px; border-radius: 18px;
  background: var(--bg-secondary); border: 1px solid var(--border-color);
  color: var(--text-main); box-shadow: 0 18px 46px rgba(0,0,0,0.6);
}
.acn-bulk-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.acn-bulk-head h2 {
  margin: 0; font-size: 18px; font-weight: 900;
  background: var(--brand-fire);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.acn-bulk-close {
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: var(--bg-tertiary); color: var(--text-main);
  font-size: 22px; line-height: 1; cursor: pointer;
}
.acn-bulk-sub { margin: 6px 0 12px; font-size: 12px; color: var(--text-muted); }
.acn-bulk-selectall {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 2px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.acn-bulk-selectall input,
.acn-bulk-row input { accent-color: #ff3366; width: 17px; height: 17px; flex-shrink: 0; }
.acn-bulk-list {
  flex: 1; min-height: 80px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px;
  padding: 4px 2px; border-top: 1px solid var(--border-color);
}
.acn-bulk-row {
  display: flex; align-items: center; gap: 11px;
  padding: 10px; border-radius: 12px;
  background: var(--bg-tertiary); cursor: pointer;
}
.acn-bulk-row.is-disabled { opacity: 0.5; cursor: not-allowed; }
.acn-bulk-row-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.acn-bulk-row-text strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acn-bulk-row-text span { font-size: 11px; color: var(--text-muted); }
.acn-bulk-actions { display: flex; gap: 10px; margin-top: 14px; }
.acn-bulk-cancel,
.acn-bulk-start {
  flex: 1; padding: 11px 14px; border: 0; border-radius: 10px;
  font: inherit; font-size: 13px; font-weight: 800; cursor: pointer;
}
.acn-bulk-cancel { background: var(--bg-tertiary); color: var(--text-main); }
.acn-bulk-start { background: var(--brand-fire); color: #fff; }
.acn-bulk-start:disabled { opacity: 0.45; cursor: not-allowed; }
.content-box {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 20px; padding: 25px 20px;
  width: 100%; max-width: 420px;
  box-sizing: border-box;
  box-shadow: 0 15px 40px rgba(0,0,0,.7);
}

.upload-studio-box-large {
  background: var(--bg-secondary);
  border: 2px solid #ff3366;
  border-radius: 28px;
  padding: 40px 36px;
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  box-sizing: border-box;
  box-shadow: 0 20px 50px rgba(255,0,85,.25),0 0 20px rgba(0,0,0,.9);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.upload-studio-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.upload-studio-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.modal-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.modal-header-row h2 {
  margin: 0; font-size: 20px; font-weight: 900;
  background: var(--brand-fire);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.close-btn {
  background: transparent; border: none;
  color: var(--text-muted); font-size: 28px;
  cursor: pointer; padding: 0; line-height: 1; text-decoration: none;
}
.section-subtitle { margin: 0 0 16px; color: var(--text-muted); font-size: 13px; line-height: 1.4; }
.form-group { margin-bottom: 14px; text-align: left; }
.form-group label {
  display: block; font-size: 11px; font-weight: 700;
  color: var(--text-muted); margin-bottom: 6px; text-transform: uppercase;
}
.form-group select,.form-group input {
  width: 100%; box-sizing: border-box;
  padding: 12px 16px;
  background-color: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  color: var(--text-main); font-size: 13px; outline: none;
}
.form-group textarea {
  width: 100%; box-sizing: border-box;
  padding: 12px 16px;
  background-color: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  color: var(--text-main);
  font-family: inherit; font-size: 13px; outline: none;
  resize: vertical;
  min-height: 90px;
}
.char-count { text-align: right; font-size: 11px; color: var(--text-muted); margin-top: 4px; }

.upload-dropzone-large {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  border: 2px dashed #ff3366;
  background: rgba(255,51,102,.04);
  padding: 28px 20px;
  text-align: center;
  border-radius: 20px;
  cursor: pointer;
  margin-bottom: 16px;
  overflow: hidden;
  transition: background .2s;
}
.native-file-overlay-large {
  position: absolute; inset: 0;
  opacity: 0; width: 100%; height: 100%;
  cursor: pointer; z-index: 5;
}
.upload-icon-large { font-size: 44px; display: block; margin-bottom: 8px; pointer-events: none; }
.upload-text-large { display: block; font-size: 16px; font-weight: 800; color: var(--text-main); margin-bottom: 4px; pointer-events: none; }
.upload-subtext-large { font-size: 11px; color: var(--text-muted); pointer-events: none; }

.reorder-instructions-banner {
  background: rgba(255,123,0,.12);
  border-left: 3px solid #ff7b00;
  color: var(--text-main);
  font-size: 12px; font-weight: 600;
  padding: 10px 12px; border-radius: 8px;
  margin-bottom: 14px; line-height: 1.4;
}

.comic-pages-preview-grid {
  width: 100%;
  max-height: 300px; overflow-y: auto;
  display: grid; grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 10px; margin: 0 0 16px;
  padding-right: 4px; box-sizing: border-box;
}
.comic-pages-preview-grid.is-empty { display: none; }
.empty-pages-placeholder {
  grid-column: span 4;
  text-align: center;
  color: var(--text-muted); font-size: 12px;
  padding: 30px;
  background: var(--bg-primary);
  border-radius: 12px;
  border: 1px solid var(--border-color);
}
.comic-upload-status {
  margin: -4px 0 14px;
  color: #ff9a3c;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}
.comic-upload-status[hidden] { display: none; }
.comic-upload-retry {
  margin-left: 6px;
  padding: 4px 9px;
  border: 1px solid #ff7b00;
  border-radius: 999px;
  background: transparent;
  color: #ff9a3c;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.comic-upload-retry:hover { background: rgba(255, 123, 0, 0.12); }
.comic-page-thumb-card {
  position: relative;
  background: var(--bg-primary);
  border: 2px solid #ff3366;
  border-radius: 10px; overflow: hidden;
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: grab;
  transition: transform .2s,border-color .2s;
}
.comic-page-thumb-card:active { cursor: grabbing; }
.comic-page-thumb-card.sortable-ghost { opacity: .35; border-style: dashed; }
.comic-page-thumb-card.sortable-chosen { box-shadow: 0 0 18px rgba(255,123,0,.7); }
.comic-page-thumb-card.selected-for-swap {
  border: 3px solid #ff7b00;
  transform: scale(.93);
  box-shadow: 0 0 15px rgba(255,123,0,.7);
}
.comic-page-thumb-card img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.page-sequence-badge {
  position: absolute; top: 6px; left: 6px;
  background: rgba(0,0,0,.85); color: #fff;
  font-size: 11px; font-weight: 900;
  padding: 3px 7px; border-radius: 6px;
  border: 1px solid rgba(255,255,255,.2);
  z-index: 2; pointer-events: none;
}
.thumb-delete-btn {
  position: absolute; top: 6px; right: 6px;
  background: rgba(255,59,48,.95); color: #fff;
  border: none; border-radius: 50%;
  width: 24px; height: 24px; font-size: 13px; font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 3;
}
.workflow-next-btn { margin-top: auto; max-width: 100%; }

.modal-options { display: flex; flex-direction: column; gap: 12px; }
.auth-provider-btn {
  display: flex; align-items: center; justify-content: flex-start;
  gap: 16px;
  width: 100%; padding: 12px 16px;
  background-color: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  color: var(--text-main);
  font-size: 13px; font-weight: 600;
  cursor: pointer; box-sizing: border-box;
}
.auth-submit-btn {
  justify-content: center;
  background: var(--brand-fire);
  border-color: #ff3366;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 8px 22px rgba(255, 0, 85, 0.28);
}
.auth-submit-btn:hover { filter: brightness(1.06); }
.provider-brand-icon { width: 20px!important; height: 20px!important; flex-shrink: 0; }

.loading-content-box {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 35px 25px;
  width: 100%; max-width: 300px;
  text-align: center; box-sizing: border-box;
}
.spinner-container { margin: 0 auto 20px; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; }
.fat-spinner {
  width: 50px; height: 50px;
  border: 6px solid rgba(255,0,85,.2);
  border-top: 6px solid #ff0055;
  border-right: 6px solid #ff7b00;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
.success-check-mark { font-size: 44px; color: #2ecc71; font-weight: 900; }

.publish-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 51, 102, 0.26), transparent 36%),
    radial-gradient(circle at 50% 82%, rgba(123, 47, 247, 0.2), transparent 42%),
    rgba(6, 4, 12, 0.95);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.publish-loading-overlay.active { display: flex; animation: publishOverlayIn 0.28s ease both; }
.publish-loading-card {
  width: min(90vw, 360px);
  padding: 40px 26px 34px;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02));
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  text-align: center;
  box-sizing: border-box;
}
.publish-loader {
  position: relative;
  width: 138px;
  height: 138px;
  margin: 0 auto 28px;
  display: grid;
  place-items: center;
}
.publish-loader-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 90deg, transparent 0 16%, #ff3366 30%, #ff7b00 49%, #ff8c1f 62%, transparent 78%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  animation: publishOrbit 1.5s linear infinite;
}
.publish-loader-glow {
  position: absolute;
  inset: 13px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 51, 102, 0.56) 0%, rgba(255, 123, 0, 0.2) 46%, transparent 72%);
  animation: publishGlowPulse 1.6s ease-in-out infinite;
}
.publish-loader-logo {
  position: relative;
  font: 900 28px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: 2px;
  background: linear-gradient(135deg, #FF3B00, #FF5E00 55%, #ff9a3d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: publishLogoPulse 1.6s ease-in-out infinite;
}
.publish-loader-check {
  position: absolute;
  width: 78px;
  height: 78px;
  color: #2ecc71;
  opacity: 0;
  transform: scale(0.4);
}
.publish-loading-overlay.is-success .publish-loader-ring {
  animation: none;
  background: conic-gradient(#2ecc71, #7dffb0, #2ecc71);
}
.publish-loading-overlay.is-success .publish-loader-glow {
  animation: publishSuccessGlow 2.4s ease-out both;
  background: radial-gradient(circle, rgba(46, 204, 113, 0.5) 0%, rgba(46, 204, 113, 0.14) 46%, transparent 72%);
}
.publish-loading-overlay.is-success .publish-loader-logo { display: none; }
.publish-loading-overlay.is-success .publish-loader-check {
  opacity: 1;
  animation: publishCheckPop 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
.publish-check-path {
  stroke-dasharray: 44;
  stroke-dashoffset: 44;
}
.publish-loading-overlay.is-success .publish-check-path {
  animation: publishCheckDraw 0.55s 0.12s ease forwards;
}
.publish-loading-card h3 {
  margin: 0 0 10px;
  color: #ffffff;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.2px;
  line-height: 1.25;
}
.publish-loading-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
}
.publish-loading-overlay.is-success h3 { color: #7dffb0; }
@keyframes publishOverlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes publishOrbit { to { transform: rotate(360deg); } }
@keyframes publishGlowPulse {
  0%, 100% { transform: scale(0.9); opacity: 0.55; }
  50% { transform: scale(1.12); opacity: 1; }
}
@keyframes publishLogoPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.07); }
}
@keyframes publishCheckPop {
  0% { transform: scale(0.4); opacity: 0; }
  70% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes publishCheckDraw { to { stroke-dashoffset: 0; } }
@keyframes publishSuccessGlow {
  0% { transform: scale(0.9); opacity: 0.8; }
  100% { transform: scale(1.35); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .publish-loading-overlay.active,
  .publish-loader-ring,
  .publish-loader-glow,
  .publish-loader-logo,
  .publish-loading-overlay.is-success .publish-loader-check,
  .publish-loading-overlay.is-success .publish-check-path {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

.app-footer {
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  padding: 40px 20px 25px;
  text-align: center; margin-top: auto;
  box-sizing: border-box; width: 100%;
}
.footer-promo { margin-bottom: 30px; }
.footer-promo p { color: var(--text-main); font-size: 14px; font-weight: 700; margin-bottom: 15px; }
.footer-download-btn { max-width: 220px!important; padding: 12px 24px!important; font-size: 14px!important; }
.footer-socials { display: flex; justify-content: center; gap: 22px; margin-bottom: 25px; }
.social-link { color: var(--text-muted); text-decoration: none; font-size: 13px; font-weight: 600; }
.footer-brand-logo { margin-bottom: 15px; }
.footer-copyright { border-top: 1px solid var(--border-color); padding-top: 20px; }
.ahaotu-wordmark { display: flex; align-items: center; justify-content: center; gap: 12px; }
.ahaotu-line { width: 34px; height: 1px; background: linear-gradient(90deg, transparent, #ff3366); }
.ahaotu-line.flip { transform: scaleX(-1); }
.ahaotu-inc-title {
  margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-style: normal; font-weight: 900; font-size: 18px;
  letter-spacing: 4px; text-transform: uppercase;
  background: var(--brand-fire);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  display: inline-block;
}
.inc-tag { font-family: 'Georgia', serif; font-style: italic; font-weight: 700; font-size: 0.75em; letter-spacing: 1px; text-transform: none; }
.ahaotu-inc-sub { margin: 8px 0 0 0; font-size: 11px; color: var(--text-muted); }

.coin-pill {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
  background: var(--bg-tertiary);
  border: 1.5px solid #ff3366;
  border-radius: 999px;
  padding: 4px 12px 4px 6px;
  color: var(--text-main);
  font-family: inherit; font-size: 13px; font-weight: 900;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(255, 51, 102, 0.25);
  transition: transform 0.15s;
}
.coin-pill:active { transform: scale(0.95); }
.coin-ico { width: 20px; height: 20px; flex-shrink: 0; }
.coin-pill .coin-ico { width: 22px; height: 22px; }

.topup-box { border-radius: 22px; border: 1.5px solid rgba(255, 51, 102, 0.5); }
.topup-title { display: flex; align-items: center; gap: 10px; }
.topup-dot { width: 22px; height: 22px; border-radius: 50%; background: #ff3366; flex-shrink: 0; }
.topup-close { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-color); border-radius: 50%; font-size: 22px; }
.topup-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.topup-card {
  background: var(--bg-tertiary);
  border: 1.5px solid var(--border-color);
  border-radius: 14px;
  padding: 12px 10px;
  min-height: 82px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; cursor: pointer;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.topup-card.selected { border-color: #ff3366; box-shadow: 0 0 14px rgba(255, 51, 102, 0.3); }
.topup-card-label { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 800; color: var(--text-main); }
.topup-card-price { font-size: 12px; font-weight: 700; color: #ff7b00; }
.topup-input-row { display: flex; align-items: center; gap: 4px; width: 100%; }
.naira-sign { font-weight: 800; color: #ff7b00; }
.topup-input-row input {
  width: 100%; min-width: 0; box-sizing: border-box;
  padding: 8px 10px;
  background-color: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-main); font-size: 14px; font-weight: 700; outline: none;
  -moz-appearance: textfield;
}
.topup-input-row input::-webkit-outer-spin-button,
.topup-input-row input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.topup-summary { min-height: 20px; margin-bottom: 14px; font-size: 13px; font-weight: 700; text-align: center; color: var(--text-muted); }
.topup-summary.error { color: #ff5a5f; }
#topup-pay-btn.is-loading { opacity: 0.75; pointer-events: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn-spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff; border-radius: 50%; display: inline-block; animation: btn-spin 0.8s linear infinite; vertical-align: -3px; }
@keyframes btn-spin { to { transform: rotate(360deg); } }

.lang-switcher { position: relative; flex-shrink: 0; }
.lang-toggle {
  display: flex; align-items: center; gap: 4px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  padding: 6px 8px; border-radius: 16px;
  font-family: inherit; font-size: 11px; font-weight: 700;
  cursor: pointer;
}
.lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 160px;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 8px;
  display: none; flex-direction: column; gap: 4px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  z-index: 50;
}
.lang-menu.open { display: flex; }
.lang-menu-title { font-size: 11px; font-weight: 700; color: var(--text-muted); padding: 2px 6px 6px; }
.lang-menu .lang-pill { width: 100%; text-align: left; border-radius: 10px; padding: 9px 12px; font-size: 13px; }
.lang-pill {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  padding: 5px 12px; border-radius: 16px;
  font-size: 11px; font-weight: 600;
  cursor: pointer; transition: all .2s;
}
.lang-pill.active { background: var(--brand-fire); color: #fff; border-color: #ff3366; }

.provider-native { display: none; }
.provider-picker { position: relative; }
.provider-trigger {
  width: 100%; box-sizing: border-box;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background-color: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  color: var(--text-main);
  font-family: inherit; font-size: 13px;
  text-align: left; cursor: pointer;
}
.provider-trigger:disabled { opacity: 0.6; cursor: not-allowed; }
.provider-trigger #provider-trigger-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.provider-chevron { color: var(--text-muted); }
.provider-icon-slot { display: inline-flex; flex-shrink: 0; }
.provider-icon { width: 38px; height: 26px; display: block; flex-shrink: 0; }
.provider-logo { position: relative; display: inline-flex; width: 38px; height: 30px; flex-shrink: 0; align-items: center; justify-content: center; }
.provider-logo img { display: none; width: 30px; height: 30px; object-fit: contain; margin-right: 10px; }
.provider-logo.has-file img { display: block; }
.provider-logo.has-file svg { display: none; }
.provider-list {
  display: none;
  position: absolute; left: 0; right: 0;
  top: calc(100% - 10px);
  max-height: 50vh;
  overflow-y: auto;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 6px;
  padding-top: 15px;
  z-index: 20;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.provider-search {
  position: sticky;
  top: 0;
  background: #161925;
  z-index: 10;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  margin-bottom: 6px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-main);
  font-family: inherit;
  font-size: 12px;
}
.provider-list.open { display: block; }
.provider-options-wrap { max-height: calc(50vh - 60px); overflow-y: auto; }
.provider-option {
  width: 100%; display: block;
  background: transparent; border: 0;
  color: var(--text-main);
  font-family: inherit; font-size: 13px; font-weight: 600;
  padding: 0; border-radius: 8px;
  text-align: left; cursor: pointer;
}
.provider-option:hover, .provider-option.selected { background: rgba(255, 51, 102, 0.12); }
.account-hint { margin-top: 6px; font-size: 11px; font-weight: 600; color: var(--text-muted); }
.auth-switch-hint {
  margin-top: 14px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
}
.auth-switch-hint a {
  color: #ff7b00;
  font-weight: 700;
  text-decoration: none;
}
.auth-switch-hint a:hover { text-decoration: underline; }

.profile-name-input {
  width: 100%; box-sizing: border-box;
  background: transparent; border: 0;
  border-bottom: 1px dashed var(--border-color);
  color: var(--text-main);
  font-family: inherit; font-size: 14px; font-weight: 800;
  padding: 2px 0; outline: none;
}
.profile-name-input:focus { border-bottom-color: #ff3366; }
.profile-name-input::placeholder { color: var(--text-muted); font-weight: 600; }

body.light-mode {
  --bg-primary: #f4f1ea;
  --bg-secondary: #fffdf9;
  --bg-tertiary: #ece8df;
  --text-main: #111111;
  --text-muted: #555555;
  --border-color: #ddd6c8;
  --input-bg: #fffdf9;
  animation: none;
  background-color: var(--bg-primary);
}
body.light-mode .rainbow-text { background-image: linear-gradient(90deg, #e03131 0%, #e8590c 50%, #ff5e00 100%); }
body.light-mode .main-nav {
  background-color: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  color: #333333;
  box-shadow: 0 1px 6px rgba(31, 36, 48, 0.06);
}
body.light-mode .main-nav .hamburger-btn span { background-color: #333333; }
body.light-mode .main-nav .logo,
body.light-mode .main-nav .logo .acn-logo-text { color: #333333; }
body.light-mode .main-nav .btn-secondary,
body.light-mode .main-nav .notification-bell-btn { color: #333333; }
body.light-mode .comic-card {
  background-color: #ffffff;
  border-color: #e5e7eb;
  color: #333333;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
body.light-mode .comic-card .comic-card-title,
body.light-mode .comic-card .comic-title {
  background-color: #ffffff;
  color: #333333;
}
body.light-mode .cat-illustration-box { background: linear-gradient(135deg, #f1ece0, #e7e0d0); }
body.light-mode .thumbnail-container {
  background-color: #ffffff;
}
body.light-mode .thumbnail-container img {
  background-color: #ffffff;
}
body.light-mode .cat-outline-svg { opacity: 1; }
body.light-mode .modal-overlay { background-color: rgba(31, 36, 48, 0.45); }
body.light-mode .sidebar-overlay { background-color: rgba(31, 36, 48, 0.35); }
body.light-mode .content-box, body.light-mode .loading-content-box { box-shadow: 0 18px 40px rgba(31, 36, 48, 0.18); }
body.light-mode .upload-studio-box-large { box-shadow: 0 18px 40px rgba(255, 0, 85, 0.12); }
body.light-mode .main-cta-btn, body.light-mode .rainbow-btn-glow { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28) !important; }
body.light-mode .lang-menu, body.light-mode .provider-list { box-shadow: 0 12px 28px rgba(31, 36, 48, 0.16); }
body.light-mode .auth-provider-btn .provider-brand-icon[fill="#FFFFFF"] { fill: #111827; }
body.light-mode .topup-card-price, body.light-mode .naira-sign { color: #c2570a; }

.tail-sway, .wagging-tail { animation: none; transform: none; }

.review-box { text-align: center; }
.review-icon { font-size: 42px; margin-bottom: 6px; }
.review-comic { font-weight: 800; font-size: 14px; color: var(--text-main); margin: 4px 0 10px; }

.comic-detail-view {
  position: fixed; inset: 0; z-index: 900;
  display: flex; flex-direction: column;
  background: var(--bg-primary);
  color: var(--text-main);
  visibility: hidden;
  transform: translateX(100%);
  transition: transform 0.28s ease, visibility 0s linear 0.28s;
}
.comic-detail-view.open { visibility: visible; transform: none; transition: transform 0.28s ease; }
.detail-bar { display: flex; align-items: center; gap: 8px; padding: 10px 10px 4px; background: var(--bg-secondary); }
.detail-icon-btn {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; color: var(--text-main); cursor: pointer;
}
.detail-title { flex: 1; margin: 0; text-align: center; font-size: 18px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.detail-fav svg { fill: none; }
.detail-fav.is-fav { color: #ff0000; }
.detail-fav.is-fav svg { fill: #ff0000; stroke: #ff0000; }
.detail-flag.is-flagged { color: #ff0000; }
.detail-flag.is-flagged svg { fill: #ff0000; stroke: #ff0000; }
.detail-subscribe.is-subscribed { color: #ff7a33; }
.detail-subscribe.is-subscribed svg { fill: rgba(255, 215, 0, 0.2); }
.detail-tabs { display: flex; background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); }
.detail-tab {
  flex: 1; padding: 12px 4px;
  background: none; border: 0;
  border-bottom: 3px solid transparent;
  color: var(--text-muted);
  font-family: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer;
}
.detail-tab.active { color: #ff3366; border-bottom-color: #ff3366; }
.detail-body { flex: 1; overflow-y: auto; padding: 16px 16px 150px; -webkit-overflow-scrolling: touch; }
.d-top { display: flex; gap: 16px; margin-bottom: 18px; }
.d-cover { width: 46%; max-width: 210px; flex-shrink: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); }
.cover-svg { display: block; width: 100%; height: auto; }
.d-meta { flex: 1; min-width: 0; }
.d-label { font-size: 13px; font-weight: 800; margin: 12px 0 4px; }
.d-meta .d-label:first-child { margin-top: 4px; }
.d-value { font-size: 14px; line-height: 1.55; color: var(--text-main); }
.d-block { margin-bottom: 20px; }
.d-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.d-chip { background: var(--bg-tertiary); border: 1px solid var(--border-color); padding: 6px 12px; border-radius: 10px; font-size: 13px; color: var(--text-main); }
.d-rating { display: flex; align-items: center; gap: 8px; font-size: 15px; flex-wrap: wrap; }
.d-rating span { color: var(--text-muted); }
.d-stars { display: flex; gap: 2px; }
.d-star { width: 22px; height: 22px; fill: #ffb703; stroke: #ffb703; }
.d-star.off { fill: none; stroke: var(--text-muted); }
.d-review { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px; padding: 10px 12px; margin-top: 10px; font-size: 13px; color: var(--text-muted); line-height: 1.45; }
.d-review b { color: var(--text-main); }
.d-similar { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.d-sim { flex: 0 0 132px; padding: 0; background: none; border: 0; color: var(--text-main); text-align: left; font-family: inherit; cursor: pointer; }
.d-sim-cover { border-radius: 10px; overflow: hidden; }
.d-sim-title { margin-top: 6px; font-size: 13px; font-weight: 700; }
.d-sim-rate { font-size: 12px; color: #ffb703; font-weight: 700; }
.d-chapter {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; width: 100%; margin-bottom: 10px;
  padding: 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  color: var(--text-main);
  font-family: inherit; font-size: 14px; font-weight: 700;
  text-align: left; cursor: pointer;
}
.d-chapter small { flex-shrink: 0; color: var(--text-muted); font-weight: 500; }
.d-comment-form { display: flex; gap: 8px; margin-bottom: 14px; }
.d-comment-form input {
  flex: 1; min-width: 0;
  padding: 12px 14px;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  color: var(--text-main);
  font-family: inherit; font-size: 13px; outline: none;
}
.d-comment-form button {
  padding: 0 18px; border: 0; border-radius: 10px;
  background: var(--brand-fire);
  color: #ffffff;
  font-family: inherit; font-weight: 800;
  cursor: pointer;
}
.d-comment-summary { margin-bottom: 12px; }
.d-comment-wrap { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.d-comment-wrap .d-comment-form { margin-bottom: 0; }
.d-rating-picker { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.d-rating-star {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  background: none; border: 0; color: var(--text-muted);
  cursor: pointer;
}
.d-rating-star svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.d-rating-star.on { color: #ffb703; }
.d-rating-star.on svg { fill: #ffb703; }
.d-rating-picker span { margin-left: 6px; font-size: 12px; color: var(--text-muted); }
.detail-actions {
  display: flex; justify-content: space-around;
  padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
}
.detail-actions button { padding: 8px 14px; background: none; border: 0; color: var(--text-muted); cursor: pointer; }
#comic-detail-view svg,
#comic-detail-view i,
#comic-detail-view .fa,
#comic-detail-view [class^="fa-"],
#comic-detail-view [class*=" fa-"] { color: currentColor; }
.toast {
  position: fixed; left: 50%; bottom: 96px;
  transform: translateX(-50%) translateY(20px);
  width: max-content; max-width: calc(100vw - 32px);
  box-sizing: border-box; padding: 10px 16px;
  border-radius: 12px;
  background: var(--text-main);
  color: var(--bg-primary);
  font-size: 13px; font-weight: 700;
  line-height: 1.4; overflow-wrap: anywhere;
  text-align: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 10000;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.d-title-main { font-size: 16px; font-weight: 700; color: var(--text-main); }
.d-trans { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.d-tr { padding: 4px 8px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 8px; font-size: 12px; color: var(--text-muted); }
.d-tr b { margin-right: 4px; color: #ff3366; }
.d-tr.current { border-color: #ff3366; color: var(--text-main); }

@media (max-width: 480px) {
  .upload-studio-box-large { max-width: 100%; max-height: 97vh; padding: 22px 16px; border-radius: 20px; }
  .comic-pages-preview-grid { grid-template-columns: repeat(3, 1fr); max-height: 260px; }
  .upload-dropzone-large { padding: 26px 14px; }
  .upload-icon-large { font-size: 36px; }
  .upload-text-large { font-size: 14px; }
}

@media (max-width: 600px) {
  .main-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    gap: 15px;
    overflow: visible;
  }
  .nav-left { gap: 12px; min-width: 0; }
  .nav-brand-group { gap: 10px; min-width: 0; }
  .nav-brand-group .logo { width: auto; min-width: 0; flex-shrink: 0; }
  .hamburger-btn { padding: 4px; flex-shrink: 0; }
  .coin-pill {
    padding: 8px 14px 8px 10px;
    min-height: 42px;
    font-size: 15px;
    max-width: none;
    overflow: visible;
  }
  .coin-pill .coin-ico { width: 24px; height: 24px; }
  .auth-buttons { gap: 12px; }
  .lang-toggle {
    padding: 9px 11px;
    min-height: 42px;
    border-radius: 999px;
  }
  .globe-vector-icon { width: 22px; height: 22px; }
  #lang-current { display: none; }
  .notification-bell-btn { width: 42px; height: 42px; }
  .notification-bell-btn svg { width: 23px; height: 23px; }
  .btn-secondary, .btn-primary { padding: 8px 10px; font-size: 11px; }
}

@media (max-width: 410px) {
  .main-nav { padding: 15px 16px; gap: 12px; }
  .logo .acn-logo-text { font-size: 17px; letter-spacing: 1px; }
  .coin-pill { padding: 7px 11px 7px 8px; font-size: 13px; }
  .auth-buttons { gap: 10px; }
  .globe-vector-icon { width: 20px; height: 20px; }
}

@media (max-width: 340px) {
  .logo .acn-logo-text { font-size: 15px; letter-spacing: 0.5px; }
  .main-nav { padding: 12px; gap: 10px; }
}

/* ============ SUCCESS SCREEN (studio) ============ */
.studio-success {
  text-align: center;
  padding: 40px 20px;
}
.studio-success-icon {
  font-size: 72px;
  margin-bottom: 12px;
  animation: studioBounce .8s ease;
}
@keyframes studioBounce {
  0% { transform: scale(0); }
  60% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
.studio-success h2 {
  font-size: 24px;
  margin: 0 0 10px;
  color: #2ecc71;
}
.studio-success .studio-success-lead {
  color: var(--text-main);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 20px;
}

/* Translation card — the encouraging box */
.studio-trans-card {
  background: linear-gradient(135deg, rgba(255,59,0,.14), rgba(255,94,0,.09));
  border: 1.5px solid rgba(255,94,0,.35);
  border-radius: 18px;
  padding: 22px 18px;
  margin: 20px 0;
  position: relative;
  overflow: hidden;
}
.studio-trans-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(255,59,0,.16), transparent 60%);
  pointer-events: none;
}

.studio-trans-globe {
  width: 68px;
  height: 68px;
  margin: 0 auto 12px;
  display: block;
  color: #ff7a33;
  animation: globeSpin 8s linear infinite;
}
@keyframes globeSpin {
  from { transform: rotateY(0); }
  to { transform: rotateY(360deg); }
}

.studio-trans-title {
  font-size: 17px;
  font-weight: 900;
  color: #ff7a33;
  margin: 0 0 8px;
  letter-spacing: 0.3px;
}
.studio-trans-sub {
  font-size: 13px;
  color: var(--text-main);
  line-height: 1.55;
  margin: 0 0 16px;
  font-weight: 600;
}
.studio-trans-sub b { color: #ff7a33; }

/* Looping 3-dot loader */
.studio-loader {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 18px 0 12px;
}
.studio-loader span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff7a33;
  display: inline-block;
  animation: dotBounce 1.2s ease-in-out infinite;
}
.studio-loader span:nth-child(2) { animation-delay: .2s; }
.studio-loader span:nth-child(3) { animation-delay: .4s; }
@keyframes dotBounce {
  0%, 80%, 100% { transform: scale(.6); opacity: .4; }
  40% { transform: scale(1.1); opacity: 1; }
}

.studio-trans-status {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0 0 16px;
}

/* Action buttons row */
.studio-success-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 20px 0 14px;
}
.studio-success-btn {
  padding: 14px 12px;
  border-radius: 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  border: 1.5px solid var(--border-color);
  background: var(--bg-tertiary);
  color: var(--text-main);
  transition: transform .15s, border-color .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.studio-success-btn:hover { border-color: #ff7a33; }
.studio-success-btn:active { transform: scale(.97); }
.studio-success-btn.primary {
  background: linear-gradient(135deg, #FF3B00 0%, #FF5E00 100%);
  border-color: #ff7a33;
  color: #1a1a1a;
}
.studio-success-btn.saved {
  background: linear-gradient(135deg, #2ecc71, #1abc9c);
  border-color: #2ecc71;
  color: #fff;
}

.studio-notify-box {
  background: var(--bg-tertiary);
  border-radius: 12px;
  padding: 14px;
  margin-top: 14px;
  display: none;
}
.studio-notify-box.show { display: block; }
.studio-notify-box label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 6px;
  text-align: left;
}
.studio-notify-row {
  display: flex;
  gap: 8px;
}
.studio-notify-row input {
  flex: 1;
  padding: 12px 14px;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  color: var(--text-main);
  font-family: inherit;
  font-size: 14px;
  outline: none;
}
.studio-notify-row input:focus { border-color: #ff7a33; }
.studio-notify-row button {
  padding: 12px 18px;
  background: linear-gradient(135deg, #FF3B00 0%, #FF5E00 100%);
  color: #1a1a1a;
  border: 0;
  border-radius: 10px;
  font-family: inherit;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
}
.studio-notify-msg {
  font-size: 12px;
  color: #2ecc71;
  font-weight: 700;
  margin-top: 8px;
  text-align: left;
}

/* ============ STUDIO LAYOUT (missing from earlier) ============ */

/* Top bar */
.studio-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.studio-back {
  background: none;
  border: none;
  color: var(--text-main);
  font-size: 22px;
  padding: 6px 10px;
  cursor: pointer;
  border-radius: 8px;
}
.studio-logo {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 1px;
  background: var(--brand-fire);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.studio-logo-sub {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-left: 4px;
}

/* Progress bar */
.studio-progress {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  padding: 10px 16px 14px;
  position: sticky;
  top: 52px;
  z-index: 49;
}
.studio-steps {
  display: flex;
  justify-content: space-between;
  max-width: 500px;
  margin: 0 auto;
  position: relative;
}
.studio-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
  z-index: 2;
}
.studio-step-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--text-muted);
  transition: all .25s;
}
.studio-step.active .studio-step-dot {
  background: var(--brand-fire);
  border-color: #ff3366;
  color: #fff;
  box-shadow: 0 0 12px rgba(255,51,102,.5);
}
.studio-step.done .studio-step-dot {
  background: #2ecc71;
  border-color: #2ecc71;
  color: #fff;
}
.studio-step-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  margin-top: 6px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.studio-step.active .studio-step-label { color: var(--text-main); }

/* Step panels */
.studio-container {
  max-width: 520px;
  margin: 0 auto;
  padding: 24px 16px;
}
.studio-panel { display: none; animation: studioFadeIn .25s ease; }
.studio-panel.active { display: block; }
@keyframes studioFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.studio-panel h2 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 900;
  color: var(--text-main);
}
.studio-panel .studio-help {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 20px;
}

/* Fields */
.studio-field { margin-bottom: 18px; }
.studio-field label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.studio-field input[type="text"],
.studio-field textarea,
.studio-field select {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  color: var(--text-main);
  font-family: inherit;
  font-size: 15px;
  outline: none;
  transition: border-color .2s;
}
.studio-field input[type="text"]:focus,
.studio-field textarea:focus,
.studio-field select:focus {
  border-color: #ff3366;
}
.studio-field textarea {
  resize: vertical;
  min-height: 130px;
  line-height: 1.5;
}
.studio-field .studio-count {
  text-align: right;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}
.studio-field .studio-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
  line-height: 1.4;
}

/* Translations grid */
.studio-trans-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.studio-trans-grid label {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  color: var(--text-main);
}
.studio-trans-grid input {
  margin-top: 4px;
  padding: 10px 12px !important;
  font-size: 13px !important;
}

/* Upload dropzone — this is the broken one */
.studio-drop {
  display: block;
  border: 2px dashed #ff3366;
  background: rgba(255,51,102,.04);
  padding: 40px 20px;
  text-align: center;
  border-radius: 18px;
  cursor: pointer;
  position: relative;
  transition: background .2s, border-color .2s;
  margin-bottom: 12px;
  overflow: hidden;
  box-sizing: border-box;
}
.studio-drop:hover {
  background: rgba(255,51,102,.08);
  border-color: #ff7b00;
}
.studio-drop input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.studio-drop-icon {
  font-size: 44px;
  display: block;
  margin-bottom: 10px;
  pointer-events: none;
}
.studio-drop-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 4px;
  display: block;
  pointer-events: none;
}
.studio-drop-sub {
  font-size: 12px;
  color: var(--text-muted);
  display: block;
  pointer-events: none;
}

/* Pages grid */
.studio-pages-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 14px;
}
.studio-page {
  position: relative;
  aspect-ratio: 1;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .2s, transform .2s;
}
.studio-page.selected {
  border-color: #ff7b00;
  transform: scale(.94);
  box-shadow: 0 0 12px rgba(255,123,0,.6);
}
.studio-page img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.studio-page-num {
  position: absolute;
  top: 5px;
  left: 5px;
  background: rgba(0,0,0,.8);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  padding: 3px 7px;
  border-radius: 6px;
}
.studio-page-del {
  position: absolute;
  top: 5px;
  right: 5px;
  background: rgba(255,59,48,.95);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

/* Review card */
.studio-review {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 16px;
}
.studio-review-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color);
  font-size: 13px;
}
.studio-review-row:last-child { border-bottom: none; }
.studio-review-label {
  color: var(--text-muted);
  font-weight: 700;
}
.studio-review-value {
  color: var(--text-main);
  text-align: right;
  max-width: 60%;
}

/* Bottom actions */
.studio-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex;
  gap: 10px;
  z-index: 100;
  max-width: 520px;
  margin: 0 auto;
  box-sizing: border-box;
}
.studio-btn {
  flex: 1;
  padding: 14px 20px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  border: none;
  font-family: inherit;
  transition: transform .15s;
}
.studio-btn:active { transform: scale(.97); }
.studio-btn.primary {
  background: var(--brand-fire);
  color: #fff;
  box-shadow: 0 4px 16px rgba(255,0,85,.35);
}
.studio-btn.secondary {
  background: var(--bg-tertiary);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  flex: 0 0 auto;
  padding: 14px 22px;
}

/* Toast */
.studio-toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--text-main);
  color: var(--bg-primary);
  padding: 10px 18px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
  z-index: 200;
  max-width: 85%;
  text-align: center;
}
.studio-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Success screen */
.studio-success {
  text-align: center;
  padding: 40px 20px;
}
.studio-success-icon {
  font-size: 72px;
  margin-bottom: 12px;
  animation: studioBounce .8s ease;
}
@keyframes studioBounce {
  0% { transform: scale(0); }
  60% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
.studio-success h2 {
  font-size: 24px;
  margin: 0 0 10px;
  color: #2ecc71;
}
.studio-trans-card {
  background: linear-gradient(135deg, rgba(255,59,0,.14), rgba(255,94,0,.09));
  border: 1.5px solid rgba(255,94,0,.35);
  border-radius: 18px;
  padding: 22px 18px;
  margin: 20px 0;
  position: relative;
  overflow: hidden;
}
.studio-trans-globe {
  width: 68px;
  height: 68px;
  margin: 0 auto 12px;
  display: block;
  color: #ff7a33;
  animation: globeSpin 8s linear infinite;
}
@keyframes globeSpin {
  from { transform: rotateY(0); }
  to { transform: rotateY(360deg); }
}
.studio-trans-title {
  font-size: 17px;
  font-weight: 900;
  color: #ff7a33;
  margin: 0 0 8px;
}
.studio-loader {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 18px 0 12px;
}
.studio-loader span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff7a33;
  display: inline-block;
  animation: dotBounce 1.2s ease-in-out infinite;
}
.studio-loader span:nth-child(2) { animation-delay: .2s; }
.studio-loader span:nth-child(3) { animation-delay: .4s; }
@keyframes dotBounce {
  0%, 80%, 100% { transform: scale(.6); opacity: .4; }
  40% { transform: scale(1.1); opacity: 1; }
}
/* ACN mascot — tail-only snake wiggle */


.header-cat-mascot.wiggling 

/* ACN mascot — graceful tail sway (isolated from body clipPath) */

.header-cat-mascot.wiggling 




.header-cat-mascot.wiggling .tail-group {
  animation: cat-tail-sway 2s ease-in-out;
}
@keyframes cat-tail-sway {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(14deg); }
  50%  { transform: rotate(-4deg); }
  75%  { transform: rotate(8deg); }
  100% { transform: rotate(0deg); }
}

/* ACN topup: manual payment fallback link */
.topup-manual-link {
  display: block;
  text-align: center;
  color: #888;
  font-size: 12px;
  margin-top: 10px;
  text-decoration: underline;
  opacity: 0.75;
}
.topup-manual-link:hover { opacity: 1; color: #ff3366; }

.user-pill {
  display: flex;
  align-items: center;
  background-color: #1a1b26;
  border: 1px solid #333;
  border-radius: 50px;
  padding: 6px 12px;
  gap: 10px;
  width: max-content;
  flex-shrink: 0;
}

.user-avatar {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  border-radius: 50%;
  background: var(--brand-fire);
  color: white;
  font-weight: bold;
  font-size: 16px;
  font-family: monospace;
  overflow: hidden;
  flex-shrink: 0;
}

.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.user-name {
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
}

.user-pill button {
  background: none;
  border: none;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0;
}

/* Logged in user pill border */
.auth-buttons .btn-primary, #user-menu-btn, .account-btn {
  border: 2px solid #ff8c00 !important;
  border-radius: 20px;
  padding: 4px 12px;
}

/* Force orange border in light mode */
[data-theme="light"] .auth-buttons .btn-primary, 
[data-theme="light"] #user-menu-btn, 
[data-theme="light"] .account-btn,
body.light-mode .auth-buttons .btn-primary,
body.light-mode #user-menu-btn {
  border: 2px solid #ff8c00 !important;
  border-radius: 20px;
}

/* Force BLACK border in light mode */
[data-theme="light"] .auth-buttons .btn-primary, 
[data-theme="light"] #user-menu-btn, 
[data-theme="light"] .account-btn,
body.light-mode .auth-buttons .btn-primary,
body.light-mode #user-menu-btn,
body.light-mode .account-btn {
  border: 2px solid #000000 !important;
  border-radius: 20px;
}

/* ===== NEW COMIC DETAIL VIEW ===== */
.comic-detail-view {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: var(--bg-primary); color: var(--text-main); z-index: 1000; overflow-y: auto;
  display: none; flex-direction: column;
}
.comic-detail-view.open { display: flex; }
.detail-header {
  position: relative; padding: 20px; display: flex; align-items: center;
  justify-content: space-between; z-index: 10;
}
.detail-back, .detail-fav { background: none; border: none; color: var(--text-main); font-size: 24px; cursor: pointer; }
.detail-hero {
  position: relative; padding: 0 20px 20px; display: flex; gap: 16px;
}
.detail-cover {
  width: 140px; height: 200px; border-radius: 12px; object-fit: cover;
  box-shadow: 0 8px 24px var(--reader-shadow, rgba(0,0,0,0.35)); z-index: 2;
}
.detail-info-stats { flex: 1; display: flex; flex-direction: column; justify-content: center; z-index: 2; gap: 12px; }
.stat-item { display: flex; flex-direction: column; }
.stat-label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; font-weight: 700; }
.stat-value { font-size: 16px; font-weight: 600; color: var(--text-main); margin-top: 2px; }
.detail-tabs {
  display: flex; border-bottom: 1px solid var(--border-color); padding: 0 20px; margin-top: 10px; z-index: 2;
}
.detail-tab {
  padding: 12px 16px; color: var(--text-muted); font-weight: 600; cursor: pointer;
  border-bottom: 2px solid transparent;
}
.detail-tab.active { color: #ff3366; border-bottom-color: #ff3366; }
.detail-content { padding: 20px; z-index: 2; }
.detail-title { font-size: 24px; font-weight: 800; margin-bottom: 8px; color: var(--text-main); }
.detail-alt-title { font-size: 14px; color: var(--text-muted); margin-bottom: 16px; line-height: 1.4; }
.detail-cta-row { position: sticky; bottom: 0; padding: 16px 20px; background: linear-gradient(transparent, var(--bg-primary) 30%); z-index: 5; }
.btn-start-reading {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 16px; background: var(--brand-fire);
  color: #fff; font-weight: 800; font-size: 16px; border: none; border-radius: 12px; cursor: pointer;
}



/* ===== BLUEPRINT COMIC DETAIL UI ===== */
#comic-detail-view { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--bg-primary); color: var(--text-main); z-index: 1000; overflow-y: auto; padding-bottom: 80px; display: none; flex-direction: column; }
#comic-detail-view.open { display: flex; }
.hero-header {
    position: sticky; top: 0; z-index: 100;
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
  }
.top-bar { display: flex; justify-content: space-between; align-items: center; padding: 16px; }
.header-title { font-size: 17.6px; font-weight: 600; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; }
.icon-btn { background: none; border: none; color: var(--text-main); cursor: pointer; }
.nav-tabs { display: flex; justify-content: space-around; }
.tab-btn { background: none; border: none; color: var(--text-muted); font-size: 15.2px; font-weight: 600; padding: 12px 0; width: 33%; text-align: center; cursor: pointer; position: relative; }
.tab-btn.active { color: #ff3366; }
.tab-btn.active::after { content: ''; position: absolute; bottom: 0; left: 20%; width: 60%; height: 3px; background-color: #ff3366; border-radius: 3px; }
.content-container { padding: 16px; }
.meta-grid { display: flex; gap: 16px; margin-bottom: 16px; }
.cover-wrapper { flex: 0 0 40%; background: var(--bg-tertiary); border-radius: 10px; overflow: hidden; min-height: 200px; display: flex; align-items: center; justify-content: center; position: relative; border: 1px dashed var(--border-color); }
.cover-image { width: 100%; height: 100%; object-fit: cover; }
.mascot-fallback { display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-muted); }
.side-info { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.info-group label { font-size: 12.8px; color: var(--text-muted); display: block; margin-bottom: 2px; }
.info-group .value, .info-group .value-highlight { font-size: 14.4px; color: var(--text-main); }
.genres-row { display: flex; gap: 8px; margin-bottom: 20px; }
.genre-tag { background: var(--bg-tertiary); color: var(--text-main); border: 1px solid var(--border-color); padding: 4px 12px; border-radius: 12px; font-size: 12.8px; }
.details-list { display: flex; flex-direction: column; gap: 16px; }
.detail-item label { font-size: 13.6px; color: var(--text-muted); display: block; margin-bottom: 4px; }
.detail-item p { font-size: 14.4px; color: var(--text-muted); line-height: 1.4; }
/* Premium chapter cards */
.chapter-list-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.chapter-list-count { font-size: 13px; font-weight: 700; color: var(--text-muted); }
.chapter-download-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border: 1px solid var(--border-color); border-radius: 999px;
  background: var(--bg-secondary); color: var(--text-main);
  font: inherit; font-size: 12px; font-weight: 800; cursor: pointer;
}
.chapter-download-btn:hover { border-color: #ff3366; color: #ff3366; }
.chapter-list { display: flex; flex-direction: column; gap: 12px; padding: 2px 0 6px; }
.chapter-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px;
  overflow: hidden;
  text-align: left;
  font: inherit;
  color: var(--text-main);
  background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.chapter-card::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: var(--brand-fire);
  opacity: 0.9;
}
.chapter-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 51, 102, 0.55);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
}
.chapter-card:focus-visible { outline: 2px solid #ff3366; outline-offset: 2px; }
/* Locked/premium chapters: sleek gold treatment — slim accent line,
   hairline gold border, softer shadow; reads premium, not boxed-in. */
.chapter-card.is-locked {
  background: linear-gradient(135deg, rgba(255, 59, 0, 0.07), var(--bg-secondary) 45%);
  border-color: rgba(255, 94, 0, 0.22);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}
.chapter-card.is-locked::before {
  width: 2px;
  background: linear-gradient(180deg, #FF3B00 0%, #FF5E00 100%);
  opacity: 0.75;
}
.chapter-card.is-locked:hover {
  border-color: rgba(255, 94, 0, 0.45);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.2);
}
.chapter-card.is-locked .chapter-card-thumb {
  border-color: rgba(255, 94, 0, 0.16);
  background: linear-gradient(160deg, #17131f, #33101f);
}
.chapter-card.is-locked .chapter-card-fallback { color: #ff7a33; }
.chapter-card-thumb-lock {
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff7a33;
  background: rgba(10, 9, 14, 0.78);
  border: 1px solid rgba(255, 94, 0, 0.28);
  border-radius: 6px;
  backdrop-filter: blur(4px);
}
.chapter-card-thumb-lock svg { width: 11px; height: 11px; display: block; }
.chapter-card-thumb {
  position: relative;
  flex: 0 0 74px;
  width: 74px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, #25134f, #7b2ff7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
}
.chapter-card-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.chapter-card-fallback { font-size: 26px; font-weight: 900; color: #fff; }
.chapter-card-number {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 3px 7px;
  color: #fff;
  background: rgba(8, 8, 12, 0.78);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  backdrop-filter: blur(6px);
}
.chapter-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.chapter-card-kicker {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ff5b7f;
}
.chapter-card-title {
  display: -webkit-box;
  overflow: hidden;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.chapter-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
}
.chapter-card-dot { opacity: 0.5; }
.chapter-card-locked { color: #ff7a33; }
.chapter-card-arrow {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff5b7f;
  background: rgba(255, 51, 102, 0.12);
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
  transition: background 0.18s, color 0.18s;
}
.chapter-card:hover .chapter-card-arrow { color: #fff; background: #ff3366; }
/* Action pills: real vertical padding + flex gap so icon and label breathe
   inside a slim pill — never a fat, text-crammed blob. */
.chapter-card-action {
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
}
.chapter-card-action svg { flex: 0 0 auto; width: 13px; height: 13px; }
.chapter-card-action.is-locked {
  color: #ff7a33;
  background: rgba(255, 59, 0, 0.08);
  border: 1px solid rgba(255, 201, 60, 0.22);
}
.chapter-card:hover .chapter-card-action.is-locked {
  color: #17130a;
  background: linear-gradient(180deg, #FF3B00 0%, #FF5E00 100%);
  border-color: transparent;
}
.chapter-list-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 120px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
}
.chapter-list-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-color);
  border-top-color: #ff3366;
  border-radius: 50%;
  animation: chapterSpinner 0.8s linear infinite;
}
@keyframes chapterSpinner { to { transform: rotate(360deg); } }
body.light-mode .chapter-card {
  background: linear-gradient(135deg, #ffffff, #f4f6fb);
  box-shadow: 0 8px 22px rgba(31, 36, 48, 0.08);
}
body.light-mode .chapter-card:hover { box-shadow: 0 14px 30px rgba(31, 36, 48, 0.14); }
body.light-mode .chapter-card.is-locked {
  background: linear-gradient(135deg, rgba(255, 59, 0, 0.09), #ffffff 55%);
  border-color: rgba(190, 60, 0, 0.30);
}
body.light-mode .chapter-card.is-locked::before { opacity: 0.85; }
body.light-mode .chapter-card.is-locked .chapter-card-thumb {
  background: linear-gradient(160deg, #efe9dc, #e2d9c4);
}
body.light-mode .chapter-card-action.is-locked {
  color: #b13005;
  background: rgba(255, 59, 0, 0.14);
  border-color: rgba(190, 60, 0, 0.30);
}
body.light-mode .chapter-card:hover .chapter-card-action.is-locked {
  color: #17130a;
  background: linear-gradient(180deg, #FF3B00 0%, #FF5E00 100%);
}
@media (max-width: 480px) {
  .chapter-card { gap: 11px; padding: 10px; border-radius: 14px; }
  .chapter-card-thumb { flex-basis: 62px; width: 62px; height: 86px; }
  .chapter-card-title { font-size: 14px; }
  .chapter-card-arrow { width: 26px; height: 26px; font-size: 21px; }
  .chapter-card-action { width: auto; height: auto; min-width: 0; min-height: 26px; padding: 5px 10px; gap: 5px; font-size: 10.5px; }
  .chapter-card-action svg { width: 11px; height: 11px; }
}
.chap-date { color: var(--text-muted); font-size: 13.6px; }
.bottom-cta-wrapper { position: fixed; bottom: 16px; right: 16px; z-index: 90; }
.start-reading-btn { background-color: #0d5f75; color: #ffffff; border: none; padding: 12px 20px; border-radius: 28px; display: flex; align-items: center; gap: 8px; font-weight: 600; box-shadow: 0 4px 12px rgba(0,0,0,0.4); cursor: pointer; }
.tab-content.hidden { display: none; }
.tab-content { display: block; }
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 2000; }
.modal-box { background: var(--bg-secondary); width: 90%; max-width: 350px; padding: 20px; border-radius: 12px; border: 1px solid var(--border-color); color: var(--text-main); }


/* Force hidden overlays to never block clicks */
.modal-overlay:not(.active), 
#loading-overlay:not(.active), 
.loading-overlay:not(.active),
#comic-detail-view:not(.open),
#report-modal {
  pointer-events: none !important; 
  display: none !important; 
}

/* Bottom Navigation Bar Fixes */
.bottom-bar {
  position: fixed; bottom: 0; left: 0; width: 100%; height: 56px;
  background-color: #0a070e; display: flex; align-items: center; justify-content: space-around;
  border-top: 1px solid rgba(255, 255, 255, 0.05); z-index: 100;
}
.bottom-icon-btn {
  background: none; border: none; color: #8a8194; cursor: pointer;
  padding: 8px; display: flex; align-items: center; justify-content: center;
}
.bottom-icon-btn:active { color: #ffffff; }
.bottom-cta-wrapper { bottom: 70px !important; }

/* ---- Terms gate: disabled "Create ACN Account" button ---- */
.auth-provider-btn:disabled,
.auth-provider-btn[disabled] {
  background: #6b7280 !important;
  border-color: #4b5563 !important;
  color: #d1d5db !important;
  cursor: not-allowed;
  opacity: .9;
  box-shadow: none !important;
}

/* ---- Terms gate: blocks the Google signup button until checkbox is on ---- */
.google-signup-wrap { position: relative; margin-bottom: 12px; }
.google-terms-overlay {
  position: absolute; inset: 0;
  background: transparent;
  cursor: not-allowed;
  z-index: 5;
}
.google-terms-overlay.hidden { display: none; }

/* Creator Dashboard */
.creator-dashboard {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 20px 60px;
}
.creator-dashboard-inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Creator Studio: the creator's own books, as a cover grid. */
.creator-books-section { width:100%; min-width:0; }
.creator-books-section[hidden] { display:none; }

/* Withdraw Wallet dialog: the payout details saved for the creator. */
.acn-ww-modal { position:fixed; inset:0; z-index:10060; display:none; align-items:center; justify-content:center; padding:16px; background:rgba(3,6,12,.78); }
.acn-ww-modal.active { display:flex; }
.acn-ww-panel { width:min(100%,420px); max-height:92vh; overflow:auto; padding:20px; border:1px solid var(--border-color); border-radius:18px; background:var(--bg-secondary); color:var(--text-main); box-shadow:0 18px 46px rgba(0,0,0,.6); }
.acn-ww-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.acn-ww-head h2 { margin:0; font-size:18px; font-weight:900; }
.acn-ww-close { width:34px; height:34px; border:0; border-radius:50%; background:var(--bg-tertiary); color:var(--text-main); font-size:20px; line-height:1; cursor:pointer; }
.acn-ww-body { display:grid; gap:9px; }
.acn-ww-row { display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:10px 0; border-bottom:1px solid var(--border-color); }
.acn-ww-row:last-child { border-bottom:0; }
.acn-ww-label { color:var(--text-muted); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.acn-ww-value { font-size:14px; font-weight:700; text-align:right; overflow-wrap:anywhere; }
.acn-ww-value.strong { font-size:17px; color:#ffb703; }
.acn-ww-loading, .acn-ww-empty { margin:0; color:var(--text-muted); font-size:13px; line-height:1.5; }
.acn-ww-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:16px; }
.acn-ww-btn { display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:10px 18px; border:1px solid var(--border-color); border-radius:11px; background:var(--bg-tertiary); color:var(--text-main); font:inherit; font-size:13px; font-weight:800; text-decoration:none; cursor:pointer; }
.acn-ww-btn.primary { border:0; background:var(--brand-fire); color:#fff; }
.dashboard-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.back-to-home-btn {
  align-self: flex-start;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
}
.dashboard-role-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--bg-secondary);
  color: var(--text-main);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.dashboard-role-switch:hover {
  background: var(--bg-tertiary);
  border-color: var(--text-muted);
  transform: translateY(-1px);
}
.dashboard-role-switch:focus-visible {
  outline: 2px solid #ff7b00;
  outline-offset: 2px;
}
.creator-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.creator-title {
  margin: 0;
  font-size: clamp(28px, 6vw, 48px);
  font-weight: 900;
  background: var(--brand-fire);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.creator-subtitle {
  margin: 0;
  color: var(--text-muted);
  font-size: clamp(14px, 2vw, 16px);
}
.creator-wallet-card {
  background: rgba(25, 25, 30, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.32);
}
.creator-wallet-header {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 15px 20px 8px;
  background: radial-gradient(circle at top left, rgba(255,123,0,.18), transparent 72%);
}
.creator-wallet-title {
  margin: 0;
  font-size: clamp(16.8px, 3vw, 20px);
  font-weight: 800;
}
.creator-wallet-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.creator-wallet-sub {
  margin: 0;
  color: var(--text-muted);
  font-size: 12.8px;
  line-height: 1.35;
}
.creator-wallet-body {
  padding: 0 20px 15px;
}
.wallet-balance-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.wallet-balance-copy {
  min-width: 0;
}
.wallet-balance-label {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 9.28px;
  line-height: 1.2;
}
.wallet-balance-amount {
  margin-top: 2px;
  font-size: clamp(27.2px, 5vw, 34.4px);
  line-height: 1.15;
  font-weight: 800;
  color: #ffffff;
}
.wallet-manage-btn {
  flex: 0 0 auto;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12.8px;
  line-height: 1.2;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.wallet-manage-btn:hover {
  border-color: rgba(255,123,0,.45);
  transform: translateY(-1px);
}
@media (max-width: 640px) {
  .creator-dashboard {
    padding: 20px 16px 40px;
  }
  .creator-wallet-header {
    padding: 14px 16px 7px;
  }
  .creator-wallet-body {
    padding: 0 16px 14px;
  }
  .creator-wallet-meta-row {
    gap: 8px;
  }
  .creator-wallet-sub {
    font-size: 12px;
  }
  .wallet-balance-row {
    gap: 10px;
  }
  .wallet-manage-btn {
    padding: 7px 11px;
    font-size: 12px;
  }
}
@media (max-width: 360px) {
  .creator-wallet-meta-row {
    align-items: flex-start;
  }
  .creator-wallet-sub {
    max-width: 230px;
  }
  .wallet-balance-amount {
    font-size: 26.4px;
  }
}

.translator-dashboard {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 20px 60px;
}
.translator-dashboard-inner {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.translator-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.translator-title {
  margin: 0;
  font-size: clamp(28px, 6vw, 48px);
  font-weight: 900;
  background: linear-gradient(135deg, #00c2ff, #7b2ff7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.translator-subtitle {
  margin: 0;
  color: var(--text-muted);
  font-size: clamp(14px, 2vw, 16px);
}
.translator-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 16px;
}
.translator-label {
  font-weight: 800;
  color: var(--text-main);
}
.translator-lang-select {
  min-width: 210px;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--bg-tertiary);
  color: var(--text-main);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.translator-lang-hint {
  font-size: 13px;
  color: var(--text-muted);
}
.translator-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.translator-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.translator-section-title {
  margin: 0;
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 900;
  color: var(--text-main);
}
.translator-section-count {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--bg-tertiary);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .3px;
  white-space: nowrap;
}
.translator-section-count:empty {
  display: none;
}
.translator-comics-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 18px;
}
.translator-comic-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.translator-card-cover {
  aspect-ratio: 3 / 4;
  background: linear-gradient(135deg, #1d1250, #7b2ff7);
  overflow: hidden;
}
.translator-card-cover-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.translator-cover-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 2px;
}
.translator-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
}
.translator-card-title {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--text-main);
}
.translator-card-meta {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
}
.translator-claim-btn {
  margin-top: auto;
  padding: 11px 12px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #00c2ff, #7b2ff7);
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.translator-claim-btn:hover {
  filter: brightness(1.08);
}
.translator-claim-btn:disabled {
  opacity: .65;
  cursor: wait;
}
.translator-card-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.translator-status-pill,
.translator-lang-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .25px;
}
.translator-status-pill {
  color: #ff9a3c;
  background: rgba(255, 123, 0, 0.12);
  border: 1px solid rgba(255, 123, 0, 0.28);
}
.translator-lang-pill {
  color: #c7a7ff;
  background: rgba(123, 47, 247, 0.14);
  border: 1px solid rgba(123, 47, 247, 0.3);
}
.translator-continue-btn {
  background: linear-gradient(135deg, #00c2ff, #7b2ff7);
  box-shadow: 0 6px 18px rgba(0, 194, 255, 0.22);
}
.translator-continue-btn:hover {
  filter: brightness(1.06);
}
.translator-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 28px;
  border: 1px dashed var(--border-color);
  border-radius: 14px;
  color: var(--text-muted);
  text-align: center;
}
@media (max-width: 640px) {
  .translator-dashboard {
    padding: 20px 16px 40px;
  }
  .translator-comics-list {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
  .translator-lang-select {
    flex: 1;
    min-width: 0;
  }
}

/* ============================================================
   TRANSLATION EDITOR (public/translate-editor.html)
   Scoped with .te-page / .te-* to avoid leaking into other pages.
   ============================================================ */
body.te-page {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  min-height: 0;
  overflow: hidden;
  display: block;
  color: #f1ebf7;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: #120c18;
  background-image:
    radial-gradient(circle at 12% -8%, rgba(123, 47, 247, 0.22), transparent 42%),
    radial-gradient(circle at 92% 108%, rgba(255, 123, 0, 0.14), transparent 40%),
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: auto, auto, 34px 34px, 34px 34px;
  animation: none;
  -webkit-tap-highlight-color: transparent;
}
body.te-page * { box-sizing: border-box; }
body.te-page #editor-canvas { display: block; }

body.te-page .te-back {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 15px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 13px;
  color: #f1ebf7;
  background: linear-gradient(180deg, rgba(36, 25, 50, 0.96), rgba(20, 13, 28, 0.96));
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.15px;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.18s ease, transform 0.12s ease, background 0.18s ease;
}
body.te-page .te-back svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: #ffb26b;
}
body.te-page .te-back:hover {
  border-color: rgba(255, 123, 0, 0.38);
  background: linear-gradient(180deg, rgba(44, 31, 61, 0.98), rgba(24, 16, 34, 0.98));
  transform: translateY(-1px);
}
body.te-page .te-back:active { transform: translateY(0) scale(0.98); }
body.te-page .te-back:focus-visible,
body.te-page .te-tool-btn:focus-visible,
body.te-page .te-dock-btn:focus-visible,
body.te-page .te-delete-btn:focus-visible {
  outline: 2px solid rgba(255, 123, 0, 0.75);
  outline-offset: 2px;
}

body.te-page .te-toolbar {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100vw - 20px);
  padding: 8px;
  background: linear-gradient(180deg, rgba(36, 25, 50, 0.96), rgba(20, 13, 28, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  box-shadow:
    0 22px 55px rgba(0, 0, 0, 0.58),
    0 0 0 1px rgba(255, 123, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
body.te-page .te-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px 0 6px;
  color: #a99bb8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  white-space: nowrap;
}
body.te-page .te-brand strong { color: #f1ebf7; }
body.te-page .te-brand-mark {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: linear-gradient(135deg, #ff7b00, #ff3366 48%, #7b2ff7);
  box-shadow: 0 4px 12px rgba(255, 123, 0, 0.35);
}
body.te-page .te-brand-mark::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  border-radius: 3px;
}
body.te-page .te-divider {
  flex: none;
  width: 1px;
  height: 26px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.16), transparent);
}
body.te-page .te-tool-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 15px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  color: #f1ebf7;
  background: rgba(255, 255, 255, 0.055);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.15px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}
body.te-page .te-tool-btn svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: #ffb26b;
  transition: color 0.18s ease;
}
body.te-page .te-tool-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 123, 0, 0.28);
  transform: translateY(-1px);
}
body.te-page .te-tool-btn:hover svg { color: #ff8a2a; }
body.te-page .te-tool-btn:active { transform: translateY(0) scale(0.97); }
body.te-page .te-tool-btn.primary {
  border-color: transparent;
  background: linear-gradient(135deg, #ff9a2e, #ff7b00 58%, #ff5e00);
  color: #fff;
  box-shadow: 0 8px 24px rgba(255, 123, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.26);
}
body.te-page .te-tool-btn.primary svg { color: #fff; }
body.te-page .te-tool-btn.primary:hover {
  background: linear-gradient(135deg, #ffa53f, #ff8a1a 58%, #ff6a0a);
  box-shadow: 0 10px 30px rgba(255, 123, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

body.te-page .te-text-menu {
  position: fixed;
  z-index: 40;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(40, 28, 56, 0.98), rgba(22, 14, 31, 0.98));
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
body.te-page .te-text-menu.show { display: flex; }
body.te-page .te-menu-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
body.te-page .te-menu-label {
  color: #a99bb8;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
}
body.te-page .te-color-wrap {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  background: #fff;
  box-shadow: inset 0 0 0 3px rgba(18, 12, 24, 0.85);
}
body.te-page .te-color-wrap input[type="color"] {
  position: absolute;
  inset: -7px;
  width: 46px;
  height: 46px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
body.te-page .te-size-range,
body.te-page .te-zoom-range {
  appearance: none;
  -webkit-appearance: none;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, #ff7b00, #ff3366 55%, #7b2ff7);
  outline: none;
  cursor: pointer;
}
body.te-page .te-size-range { width: 88px; }
body.te-page .te-zoom-range { width: 140px; }
body.te-page .te-size-range::-webkit-slider-thumb,
body.te-page .te-zoom-range::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border: 2px solid #ff7b00;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
body.te-page .te-size-range::-moz-range-thumb,
body.te-page .te-zoom-range::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 2px solid #ff7b00;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
body.te-page .te-size-value {
  min-width: 22px;
  color: #f1ebf7;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}
body.te-page .te-delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255, 51, 102, 0.24);
  border-radius: 10px;
  color: #ff8298;
  background: rgba(255, 51, 102, 0.1);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}
body.te-page .te-delete-btn:hover {
  background: rgba(255, 51, 102, 0.2);
  border-color: rgba(255, 51, 102, 0.45);
}
body.te-page .te-delete-btn svg { width: 16px; height: 16px; }

body.te-page .te-dock {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(35, 24, 48, 0.96), rgba(20, 13, 28, 0.96));
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
body.te-page .te-history { display: flex; gap: 4px; }
body.te-page .te-dock-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #f1ebf7;
  background: transparent;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
body.te-page .te-dock-btn svg { width: 17px; height: 17px; }
body.te-page .te-dock-btn:hover:not(:disabled) {
  color: #ffb26b;
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.07);
}
body.te-page .te-dock-btn:disabled { opacity: 0.32; cursor: not-allowed; }
body.te-page .te-dock-divider {
  flex: none;
  width: 1px;
  height: 22px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.16), transparent);
}
body.te-page .te-zoom {
  display: flex;
  align-items: center;
  gap: 8px;
}
body.te-page .te-zoom svg { flex: none; width: 14px; height: 14px; color: #8f7ba3; }
body.te-page #zoom-label {
  min-width: 38px;
  color: #a99bb8;
  font-size: 11px;
  font-weight: 800;
  text-align: right;
}
body.te-page .te-dock-hint {
  color: #8f7ba3;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15px;
  white-space: nowrap;
}

body.te-page .te-toast {
  position: fixed;
  left: 50%;
  bottom: 72px;
  z-index: 45;
  padding: 10px 16px;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, rgba(255, 123, 0, 0.96), rgba(123, 47, 247, 0.96));
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.2px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 10px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
body.te-page .te-toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 640px) {
  body.te-page .te-back {
    top: 10px;
    left: 10px;
    padding: 10px 12px;
    font-size: 12px;
  }
  body.te-page .te-toolbar {
    top: 68px;
    gap: 4px;
    padding: 6px;
    border-radius: 16px;
  }
  body.te-page .te-brand,
  body.te-page .te-divider { display: none; }
  body.te-page .te-tool-btn {
    gap: 5px;
    padding: 9px 10px;
    border-radius: 11px;
    font-size: 11.5px;
  }
  body.te-page .te-tool-btn svg { width: 15px; height: 15px; }
  body.te-page .te-dock {
    bottom: 10px;
    gap: 8px;
    padding: 6px 8px;
  }
  body.te-page .te-zoom-range { width: 96px; }
  body.te-page .te-dock-hint,
  body.te-page .te-hint-divider { display: none; }
  body.te-page .te-text-menu { gap: 8px; padding: 7px; }
  body.te-page .te-size-range { width: 70px; }
  body.te-page .te-toast { bottom: 60px; }
}

@media (max-width: 360px) {
  body.te-page .te-tool-btn span { display: none; }
  body.te-page .te-tool-btn { padding: 10px 12px; }
  body.te-page .te-tool-btn svg { width: 17px; height: 17px; }
  body.te-page .te-back span { display: none; }
  body.te-page .te-back { padding: 11px; }
  body.te-page .te-zoom-range { width: 80px; }
}

/* ---------- READING DIRECTION SELECTOR ---------- */
.reading-direction-modal { z-index: 3500; }
.reading-direction-box {
  width: 100%;
  max-width: 520px;
  padding: 24px;
  border: 1px solid var(--reader-border);
  border-radius: 22px;
  background: var(--reader-surface);
  color: var(--reader-text);
  box-shadow: 0 30px 90px var(--reader-shadow);
}
.reading-direction-head { display: flex; align-items: flex-start; gap: 16px; }
.reading-direction-head h2 { margin: 0; font-size: 20px; font-weight: 900; color: var(--reader-text); letter-spacing: -0.01em; }
.reading-direction-head p { margin: 7px 0 0; font-size: 13px; line-height: 1.5; color: var(--reader-muted); }
.reading-direction-close {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--reader-border);
  border-radius: 50%;
  background: var(--reader-control);
  color: var(--reader-text); font-size: 20px; line-height: 1;
  cursor: pointer;
}
.reading-direction-close:hover { background: var(--reader-control-hover); }
.reading-direction-options { display: grid; gap: 10px; margin-top: 18px; }
.reading-direction-option {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 14px 16px;
  border: 1px solid var(--reader-border);
  border-radius: 16px;
  background: var(--reader-surface-raised);
  color: var(--reader-text);
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, transform 0.18s;
}
.reading-direction-option:hover { border-color: var(--reader-accent); background: var(--reader-accent-soft); transform: translateY(-1px); }
.reading-direction-option.selected { border-color: var(--reader-accent); background: var(--reader-accent-soft); box-shadow: 0 0 0 3px var(--reader-accent-soft); }
.reading-direction-icon {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: var(--reader-accent-soft);
  color: var(--reader-accent);
  font-size: 24px; font-weight: 900;
}
.reading-direction-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.reading-direction-copy strong { font-size: 15px; font-weight: 800; color: var(--reader-text); }
.reading-direction-copy small { font-size: 12px; color: var(--reader-muted); }
.reading-direction-check { flex: 0 0 auto; color: var(--reader-accent); font-size: 18px; font-weight: 900; opacity: 0; }
.reading-direction-option.selected .reading-direction-check { opacity: 1; }
@media (max-width: 480px) {
  .reading-direction-box { padding: 20px; }
  .reading-direction-head h2 { font-size: 18px; }
}

/* ---------- TRANSLATED COMIC READER ---------- */
.reader-overlay,
.reading-direction-modal,
body.dark-mode .reader-overlay,
body.dark-mode .reading-direction-modal {
  color-scheme: dark;
  --reader-bg: #121212;
  --reader-surface: #1f1f1f;
  --reader-surface-raised: #1f1f1f;
  --reader-text: #f5f5f5;
  --reader-muted: #b3b3b3;
  --reader-border: rgba(255, 255, 255, 0.12);
  --reader-control: rgba(255, 255, 255, 0.06);
  --reader-control-hover: rgba(255, 255, 255, 0.12);
  --reader-shadow: rgba(0, 0, 0, 0.65);
  --reader-scrim: rgba(8, 8, 8, 0.78);
  --reader-accent: #ff7b00;
  --reader-accent-soft: rgba(255, 123, 0, 0.16);
}
body.light-mode .reader-overlay,
body.light-mode .reading-direction-modal {
  color-scheme: light;
  --reader-bg: #f3f4f6;
  --reader-surface: #ffffff;
  --reader-surface-raised: #f3f4f6;
  --reader-text: #111827;
  --reader-muted: #4b5563;
  --reader-border: #d1d5db;
  --reader-control: #ffffff;
  --reader-control-hover: #f3f4f6;
  --reader-shadow: rgba(31, 36, 48, 0.16);
  --reader-scrim: rgba(255, 255, 255, 0.82);
  --reader-accent: #c2570a;
  --reader-accent-soft: rgba(194, 87, 10, 0.1);
}
body.acn-reader-open { overflow: hidden !important; }
body.acn-reader-open .toast { z-index: 4000; bottom: 104px; }
.reader-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: none;
  flex-direction: column;
  color: var(--reader-text);
  background: var(--reader-bg);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.reader-overlay.open { display: flex; }
.reader-overlay button,
.reader-overlay select { color: var(--reader-text); }
.reader-overlay svg,
.reader-overlay i,
.reader-overlay .fa,
.reader-overlay [class^="fa-"],
.reader-overlay [class*=" fa-"] { color: currentColor; }
.reader-header {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  background: var(--reader-surface);
  border-bottom: 1px solid var(--reader-border);
  box-shadow: 0 12px 34px var(--reader-shadow);
  backdrop-filter: blur(18px);
}
.reader-close {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--reader-border);
  border-radius: 50%;
  background: var(--reader-control);
  color: var(--reader-text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s, transform 0.18s;
}
.reader-close:hover { background: var(--reader-control-hover); transform: scale(1.06); }
.reader-download {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--reader-border);
  border-radius: 50%;
  background: var(--reader-control);
  color: var(--reader-text);
  cursor: pointer;
  transition: background 0.18s, transform 0.18s;
}
.reader-download:hover { background: var(--reader-control-hover); transform: scale(1.06); }
.reader-heading { flex: 1; min-width: 0; line-height: 1.25; }
.reader-heading strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--reader-text);
}
.reader-heading span {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
  color: var(--reader-muted);
}
.reader-lang { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.reader-lang label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--reader-muted);
}
.reader-lang select {
  max-width: 190px;
  padding: 9px 10px;
  border: 1px solid var(--reader-border);
  border-radius: 10px;
  background: var(--reader-surface-raised);
  color: var(--reader-text);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  outline: none;
}
.reader-lang select:focus { border-color: var(--reader-accent); box-shadow: 0 0 0 3px var(--reader-accent-soft); }
.reader-viewport {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 28px 18px 104px;
  -webkit-overflow-scrolling: touch;
  background: var(--reader-bg);
}
.reader-page-stage {
  position: relative;
  display: inline-block;
  max-width: min(920px, 100%);
  overflow: hidden;
  border-radius: 14px;
  background: var(--reader-surface-raised);
  box-shadow: 0 26px 80px var(--reader-shadow), 0 0 0 1px var(--reader-border);
  line-height: 0;
}
.reader-page-stage img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 190px);
  margin: 0 auto;
  background: var(--reader-surface-raised);
}
.reader-pan-grab {
  cursor: grab;
  cursor: -webkit-grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}
.reader-pan-grabbing,
.reader-pan-grabbing:active {
  cursor: grabbing;
  cursor: -webkit-grabbing;
}
.reader-canvas-layer { position: absolute; inset: 0; pointer-events: none; }
.reader-nav.reader-nav-rtl { flex-direction: row-reverse; }
.reader-vertical-pages { display: none; width: min(920px, 100%); margin: 0 auto; }
.reader-mode-vertical .reader-viewport { display: block; padding: 18px 14px 36px; }
.reader-mode-vertical .reader-vertical-pages { display: block; }
.reader-vertical-page { max-width: 920px; margin: 0 auto 14px; line-height: 0; }
.reader-vertical-page:last-child { margin-bottom: 0; }
.reader-vertical-page img { display: block; width: 100%; height: auto; border-radius: 10px; background: var(--reader-surface-raised); box-shadow: 0 14px 44px var(--reader-shadow); }
.reader-loading {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--reader-scrim);
  color: var(--reader-text);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
}
.reader-loading.show { display: flex; }
.reader-nav {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(560px, calc(100% - 28px));
  padding: 8px;
  border: 1px solid var(--reader-border);
  border-radius: 16px;
  background: var(--reader-surface);
  box-shadow: 0 18px 50px var(--reader-shadow);
  backdrop-filter: blur(18px);
  transform: translateX(-50%);
}
.reader-nav-btn {
  flex: 0 0 auto;
  padding: 9px 14px;
  border: 1px solid var(--reader-border);
  border-radius: 10px;
  background: var(--reader-control);
  color: var(--reader-text);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.18s, opacity 0.18s;
}
.reader-nav-btn:hover:not(:disabled) { background: var(--reader-accent-soft); border-color: var(--reader-accent); }
.reader-nav-btn:disabled { opacity: 0.32; cursor: not-allowed; }
.reader-page-slider-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.reader-page-slider {
  --reader-progress: 0%;
  flex: 1;
  min-width: 0;
  width: 100%;
  height: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.reader-page-slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--reader-accent) 0 var(--reader-progress),
    var(--reader-control-hover) var(--reader-progress) 100%
  );
}
.reader-page-slider::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  margin-top: -5px;
  border: 2px solid var(--reader-surface);
  border-radius: 50%;
  background: var(--reader-accent);
  box-shadow: 0 0 0 3px var(--reader-accent-soft);
  cursor: grab;
  -webkit-appearance: none;
  appearance: none;
}
.reader-page-slider:active::-webkit-slider-thumb { cursor: grabbing; }
.reader-page-slider::-moz-range-track {
  height: 6px;
  border: 0;
  border-radius: 999px;
  background: var(--reader-control-hover);
}
.reader-page-slider::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--reader-accent);
}
.reader-page-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 2px solid var(--reader-surface);
  border-radius: 50%;
  background: var(--reader-accent);
  box-shadow: 0 0 0 3px var(--reader-accent-soft);
  cursor: grab;
}
.reader-page-slider:active::-moz-range-thumb { cursor: grabbing; }
.reader-page-slider:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px var(--reader-accent-soft), 0 0 0 2px var(--reader-accent);
}
.reader-page-slider:disabled { opacity: 0.45; cursor: not-allowed; }
.reader-page-count {
  flex: 0 0 auto;
  min-width: 74px;
  text-align: right;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
  color: var(--reader-muted);
}
@media (max-width: 640px) {
  .reader-header { gap: 8px; padding: 9px 12px; padding-top: calc(9px + env(safe-area-inset-top, 0px)); flex-wrap: wrap; }
  .reader-close { width: 38px; height: 38px; font-size: 20px; }
  .reader-download { width: 38px; height: 38px; }
  .reader-heading { order: 3; flex: 1 1 100%; padding-top: 2px; }
  .reader-heading strong { font-size: 13px; }
  .reader-heading span { font-size: 10px; }
  .reader-lang { flex: 1 1 0; min-width: 0; }
  .reader-lang label { display: none; }
  .reader-lang select { max-width: none; width: 100%; padding: 8px 7px; font-size: 11px; }
  .reader-viewport { padding: 14px 8px 84px; }
  .reader-page-stage img { max-height: calc(100vh - 168px); }
  .reader-nav { bottom: 10px; padding: 6px; gap: 6px; }
  .reader-nav-btn { padding: 8px 10px; font-size: 11px; }
  .reader-page-slider-wrap { gap: 6px; }
  .reader-page-count { min-width: 62px; font-size: 10px; }
}

/* ---------- Upload studio: chapter metadata, premium lock, progress ---------- */
.comic-meta-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 12px;
  margin-bottom: 14px;
}
.comic-meta-grid .form-group { margin-bottom: 0; }
.comic-premium-box {
  margin: 2px 0 16px;
  padding: 14px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: rgba(255, 51, 102, 0.05);
}
.comic-premium-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  cursor: pointer;
}
.comic-premium-copy { display: block; min-width: 0; text-align: left; }
.comic-premium-copy strong {
  display: block;
  margin-bottom: 3px;
  color: var(--text-main);
  font-size: 13px;
  font-weight: 800;
}
.comic-premium-copy small {
  display: block;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.4;
}
.comic-switch {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 48px;
  height: 27px;
}
.comic-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.comic-switch-track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #433b49;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: background 0.2s ease;
}
.comic-switch-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease;
}
.comic-switch input:checked + .comic-switch-track {
  background: var(--brand-fire);
}
.comic-switch input:checked + .comic-switch-track::after { transform: translateX(21px); }
.comic-switch input:focus-visible + .comic-switch-track {
  outline: 2px solid #ff7b00;
  outline-offset: 2px;
}
.comic-lock-price-wrap {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-color);
  text-align: left;
}
.comic-lock-price-wrap[hidden] { display: none; }
.comic-lock-price-wrap label {
  display: block;
  margin-bottom: 6px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.comic-lock-price-wrap input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--input-bg);
  color: var(--text-main);
  font-size: 13px;
  outline: none;
}
.comic-lock-price-wrap input:focus { border-color: #ff7b00; }
.comic-lock-hint {
  margin-top: 7px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.4;
}
.comic-upload-progress {
  margin: 2px 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: rgba(255, 123, 0, 0.07);
}
.comic-upload-progress[hidden] { display: none; }
.comic-upload-progress-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
}
.comic-upload-progress-top strong {
  margin-left: auto;
  color: #ff9a3c;
  font-size: 12px;
}
.comic-upload-spinner {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 123, 0, 0.25);
  border-top-color: #ff7b00;
  border-radius: 50%;
  animation: comicUploadSpin 0.8s linear infinite;
}
.comic-upload-progress-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
}
.comic-upload-progress-bar {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff0055, #ff7b00);
  box-shadow: 0 0 12px rgba(255, 123, 0, 0.55);
  transition: width 0.25s ease;
}
#comic-publish-btn:disabled {
  opacity: 0.62;
  cursor: wait;
  box-shadow: none;
}
@keyframes comicUploadSpin { to { transform: rotate(360deg); } }
body.light-mode .comic-premium-box { background: #fff5f8; }
body.light-mode .comic-upload-progress { background: #fff6ed; }
body.light-mode .comic-upload-progress-track { background: rgba(31, 36, 48, 0.14); }
@media (max-width: 560px) {
  .comic-meta-grid { grid-template-columns: 1fr; gap: 10px; }
  .comic-meta-grid .form-group { margin-bottom: 4px; }
  .comic-premium-toggle { gap: 10px; }
}

/* ---------- Upload studio responsive layout ---------- */
@media (max-width: 700px) {
  #comic-upload-modal { padding: 0; }
  .upload-studio-box-large {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    padding: 24px 18px 32px;
  }
  .upload-studio-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
}

/* ---------- In-app notifications ---------- */
.notification-bell-wrap {
  position: relative;
  display: none;
  align-items: center;
}
.notification-bell-btn {
  position: relative;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  color: var(--text-main);
  cursor: pointer;
  padding: 0;
  transition: border-color .2s, color .2s;
}
.notification-bell-btn:hover,
.notification-bell-btn:active,
.notification-bell-btn.has-unread,
.notification-bell-wrap:has(.notification-dropdown.open) .notification-bell-btn {
  color: #ff0000;
  border-color: #ff0000;
}
.notification-bell-btn svg { fill: none; stroke: currentColor; }
.notification-bell-btn:hover svg,
.notification-bell-btn:active svg,
.notification-bell-btn.has-unread svg,
.notification-bell-wrap:has(.notification-dropdown.open) .notification-bell-btn svg {
  fill: #ff0000;
  stroke: #ff0000;
}
.notification-dot {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--brand-fire);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
  display: none;
  box-shadow: 0 0 0 2px var(--bg-secondary);
}
.notification-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 330px;
  max-width: calc(100vw - 24px);
  max-height: 420px;
  overflow-y: auto;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
  display: none;
  z-index: 60;
}
.notification-dropdown.open { display: block; }
.notification-head {
  padding: 12px 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  background: var(--bg-secondary);
  z-index: 1;
}
.notification-list { display: flex; flex-direction: column; }
.notification-item {
  display: block;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-color);
  text-decoration: none;
  color: var(--text-main);
  transition: background .2s;
}
.notification-item:last-child { border-bottom: 0; }
.notification-item:hover { background: var(--bg-tertiary); }
.notification-item.unread { background: rgba(255, 51, 102, .08); }
.notification-msg {
  display: block;
  font-size: 13px;
  line-height: 1.4;
  word-break: break-word;
}
.notification-time {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted);
}
.notification-empty {
  padding: 24px 14px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}
@media (max-width: 560px) {
  .notification-dropdown { width: calc(100vw - 24px); right: -46px; }
}

/* ---------- Notification permission banner ---------- */
.acn-notification-banner {
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%);
  width: min(440px, calc(100vw - 24px));
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-left: 3px solid #ff3366;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
  z-index: 1300;
}
.acn-notification-banner-copy {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-main);
}
.acn-notification-banner-copy svg { flex-shrink: 0; color: #ff3366; }
.acn-notification-banner-enable {
  flex-shrink: 0;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  background: var(--brand-fire);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}
.acn-notification-banner-close {
  flex-shrink: 0;
  padding: 2px 6px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.notification-bell-btn.is-denied { opacity: .6; }
@media (max-width: 560px) {
  .acn-notification-banner { bottom: 82px; align-items: flex-start; }
  .acn-notification-banner-copy { font-size: 12px; }
}

/* ---------- Offline storage opt-in card ---------- */
.offline-storage-card {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid #2a2f3a;
  border-radius: 12px;
  background: linear-gradient(160deg, #171a23, #0f1116);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.offline-storage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.offline-storage-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #f4f6fb;
}
.offline-storage-head svg { color: #7b8496; }
.offline-storage-status {
  margin: 8px 0 0;
  font-size: 12px;
  font-weight: 700;
  color: #a9b1c3;
}
.offline-storage-state.is-off { color: #ff5a5f; }
.offline-storage-state.is-on { color: #2ecc71; }
.offline-storage-free {
  margin: 4px 0 0;
  font-size: 11px;
  font-weight: 600;
  color: #8e98ad;
}
.offline-storage-enable {
  margin-top: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid rgba(255, 51, 102, .35);
  border-radius: 9px;
  background: var(--brand-fire);
  color: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: filter .2s, opacity .2s;
}
.offline-storage-enable:hover:not(:disabled) { filter: brightness(1.06); }
.offline-storage-enable:disabled {
  cursor: default;
  opacity: .8;
  background: rgba(46, 204, 113, .16);
  border-color: rgba(46, 204, 113, .4);
  color: #2ecc71;
}

:root {
  --neon-bg: #0d0f17;
  --card-bg: #161925;
  --accent-neon: #00ffcc;
  --accent-pink: #ff007f;
  --accent-gold: #ff7a33;
  --nav-height: 70px;
}

body.home-neon {
  padding-top: calc(var(--nav-height) + 12px);
}

.main-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--nav-height);
  background: #0a0a0a;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: none;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 10px;
  padding: 0 max(16px, 5%);
  box-sizing: border-box;
  z-index: 900;
}

.main-nav .nav-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.main-nav .nav-brand-group {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.main-nav .logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.main-nav .logo .acn-logo-text {
  color: var(--text-main);
  background: var(--brand-fire);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 21px;
  font-weight: 900;
  letter-spacing: 2px;
  line-height: 1;
  white-space: nowrap;
  text-shadow: none;
}

.main-nav .auth-buttons {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.main-nav .btn-secondary {
  background: rgba(0, 255, 204, 0.06);
  border: 1px solid rgba(0, 255, 204, 0.45);
  color: #eafffb;
  border-radius: 999px;
  padding: 8px 14px;
  transition: box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.main-nav .btn-secondary:hover {
  background: rgba(0, 255, 204, 0.14);
  border-color: var(--accent-neon);
  box-shadow: 0 0 12px rgba(0, 255, 204, 0.35);
}

.main-nav .btn-primary {
  background: var(--brand-fire);
  border-radius: 999px;
  padding: 8px 14px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
}

.main-nav .btn-primary:hover {
  background: var(--brand-fire-hover);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.5);
}

.coin-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  min-height: 34px;
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
  padding: 4px 10px;
  background: #161925;
  border: 2px solid #ff3366;
  border-radius: 50px;
  box-shadow: none;
  color: #ffffff;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
  transition: background 0.2s ease;
}

.coin-badge:hover {
  background: #1c2030;
  box-shadow: none;
}

.coin-badge #coin-balance {
  color: #ffffff;
  font-weight: 700;
}

.coin-badge .coin-ico {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  filter: none;
}

.main-nav .header-cat-mascot {
  display: flex;
  width: 60px;
  height: 60px;
  margin: 0 2px;
  flex-shrink: 0;
}

.mascot-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  margin: 0 10px;
  cursor: pointer;
}

.cat-mascot {
  width: 60px;
  height: 60px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: neonCatBounce 2s infinite ease-in-out;
}

.cat-face {
  position: relative;
  z-index: 1;
  font-size: 12.8px;
  font-weight: bold;
  color: #fff;
}

.speech-bubble {
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent-neon);
  color: #000;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  opacity: 0;
  animation: none;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 30;
}

.speech-bubble::after {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid var(--accent-neon);
}


.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 0 5%;
  max-width: 1200px;
  margin: 0 auto;
}

.hero-container .gallery-grid {
  width: 100%;
  max-width: 100%;
  margin: 0 0 26px;
  padding: 0;
  gap: 10px;
  grid-template-columns: repeat(2, 1fr);
}

.gallery-grid .thumbnail-container,
.hero-container .gallery-grid .thumbnail-container {
  aspect-ratio: 3 / 4;
  height: auto;
}

.gallery-grid .thumbnail-container img,
.hero-container .gallery-grid .thumbnail-container img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.gallery-grid .comic-card,
.hero-container .comic-card {
  width: 100%;
  min-width: 0;
  margin: 0;
  background: var(--card-bg);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  aspect-ratio: auto;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.gallery-grid .comic-card:hover,
.hero-container .comic-card:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 255, 204, 0.28);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(0, 255, 204, 0.2);
}

.thumbnail-container {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  background-color: #232738;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.thumbnail-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.comic-card:hover .thumbnail-container img {
  transform: scale(1.04);
}

.comic-info {
  padding: 14px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.comic-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--text-main);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}

.comic-genre {
  font-size: 12.8px;
  color: var(--text-muted);
  margin: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.read-btn {
  width: 100%;
  padding: 9px 0;
  background: transparent;
  border: 1.5px solid var(--accent-pink);
  color: var(--accent-pink);
  border-radius: 6px;
  font-weight: 700;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.read-btn:hover {
  background: var(--accent-pink);
  color: #fff;
  box-shadow: 0 0 12px rgba(255, 0, 127, 0.5);
}

@keyframes neonCatBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes neonBubbleFloat {
  0% { transform: translate(-50%, 0); }
  100% { transform: translate(-50%, -4px); }
}

@media (max-width: 600px) {
  .main-nav {
    height: var(--nav-height);
    padding: 0 12px;
    gap: 8px;
  }
  .main-nav .nav-left { gap: 8px; }
  .main-nav .nav-brand-group { gap: 10px; }
  .main-nav .auth-buttons { gap: 10px; }
  .main-nav .header-cat-mascot { width: 52px; height: 52px; margin: 0; }
  .main-nav .cat-mascot { width: 52px; height: 52px; }
  .main-nav .cat-face { font-size: 11.2px; }
  .main-nav .speech-bubble { bottom: -26px; font-size: 10.88px; padding: 2px 7px; }
  .main-nav .coin-badge { padding: 6px 10px; font-size: 13px; }
  .main-nav .coin-badge .coin-ico { width: 17px; height: 17px; }
  .gallery-grid,
  .hero-container .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .comic-info { padding: 10px; gap: 8px; }
  .comic-title { font-size: 14.72px; }
  .comic-genre { font-size: 11.84px; }
  .read-btn { padding: 8px 0; font-size: 12px; }
}

@media (max-width: 410px) {
  .main-nav { padding: 0 8px; gap: 6px; }
  .main-nav .nav-left { gap: 6px; }
  .main-nav .nav-brand-group { gap: 7px; }
  .main-nav .logo .acn-logo-text { font-size: 17px; letter-spacing: 1px; }
  .main-nav .header-cat-mascot { width: 46px; height: 46px; }
  .main-nav .cat-mascot { width: 46px; height: 46px; }
  .main-nav .coin-badge { padding: 5px 8px; font-size: 12px; }
  .main-nav .auth-buttons { gap: 7px; }
  .main-nav .btn-secondary,
  .main-nav .btn-primary { padding: 7px 9px; font-size: 10px; }
}

@media (max-width: 340px) {
  .main-nav .speech-bubble { display: none; }
  .main-nav .header-cat-mascot { width: 42px; height: 42px; }
  .main-nav .cat-mascot { width: 42px; height: 42px; }
  .main-nav .cat-face { font-size: 9.6px; }
}

/* ---------- Light mode: flat, clean surfaces (no neon glow) ---------- */
body.light-mode .hamburger-btn span {
  background-color: #333333;
}

/* Header: no glow, only a soft edge shadow */
body.light-mode .main-nav,
body.light-mode .neon-header,
body.light-mode .studio-bar,
body.light-mode .detail-bar,
body.light-mode .hero-header {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  text-shadow: none;
  filter: none;
}
body.light-mode .main-nav .logo .acn-logo-text,
body.light-mode .logo .acn-logo-text {
  text-shadow: none;
  filter: none;
}
body.light-mode .main-nav .btn-secondary,
body.light-mode .main-nav .btn-secondary:hover,
body.light-mode .main-nav .btn-primary,
body.light-mode .main-nav .btn-primary:hover,
body.light-mode .notification-bell-btn {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
body.light-mode .coin-badge .coin-ico {
  filter: none;
}

/* Buttons: flat with a subtle light-gray shadow */
body.light-mode .btn-primary,
body.light-mode .btn-secondary,
body.light-mode .main-cta-btn,
body.light-mode .rainbow-btn-glow,
body.light-mode .manage-btn,
body.light-mode .studio-btn,
body.light-mode .profile-action-btn,
body.light-mode .start-reading-btn,
body.light-mode .studio-success-btn,
body.light-mode .wallet-manage-btn,
body.light-mode .footer-download-btn,
body.light-mode .auth-submit-btn,
body.light-mode .auth-provider-btn,
body.light-mode .read-btn,
body.light-mode .read-btn:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
  text-shadow: none;
  filter: none;
}

/* Cards: remove heavy dark/blurred shadows */
body.light-mode .comic-card,
body.light-mode .comic-card:hover,
body.light-mode .gallery-grid .comic-card,
body.light-mode .gallery-grid .comic-card:hover,
body.light-mode .hero-container .comic-card,
body.light-mode .hero-container .comic-card:hover,
body.light-mode .chapter-card,
body.light-mode .chapter-card:hover,
body.light-mode .translator-comic-card,
body.light-mode .manage-comic-card,
body.light-mode .creator-wallet-card,
body.light-mode .content-box,
body.light-mode .loading-content-box,
body.light-mode .acn-download-box,
body.light-mode .upload-studio-box-large,
body.light-mode .topup-card,
body.light-mode .topup-card.selected,
body.light-mode .publish-loading-card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  text-shadow: none;
  filter: none;
}

/* ---------- Mobile header: globe beside coins, tight spacing ---------- */
@media (max-width: 600px) {
  .main-nav { gap: 8px; padding: 12px; }
  .main-nav .nav-left { gap: 8px; min-width: 0; }
  .main-nav .nav-brand-group { gap: 6px; min-width: 0; }
  .main-nav .header-cat-mascot {
    display: flex;
    width: 38px;
    height: 38px;
    margin: 0;
    flex-shrink: 0;
  }
  .main-nav .cat-mascot { width: 38px; height: 38px; }
  .main-nav .hamburger-btn { padding: 2px; }
  .main-nav .logo .acn-logo-text { font-size: 17px; letter-spacing: 1px; }
  .main-nav .coin-badge { padding: 6px 8px; gap: 4px; font-size: 12px; }
  .main-nav .coin-badge .coin-ico { width: 16px; height: 16px; }
  .main-nav .lang-toggle { padding: 8px; min-height: 36px; }
  .main-nav .globe-vector-icon { width: 18px; height: 18px; }
  .main-nav .lang-menu { right: 0; left: auto; min-width: 150px; }
  .main-nav .notification-bell-btn { width: 36px; height: 36px; }
  .main-nav .notification-bell-btn svg { width: 20px; height: 20px; }
  .main-nav .auth-buttons { gap: 8px; }
  .main-nav .btn-secondary,
  .main-nav .btn-primary { padding: 6px 9px; font-size: 10px; }
  body.user-logged-in .main-nav .lang-switcher { display: block; }
}

@media (max-width: 410px) {
  .main-nav { padding: 10px 12px; gap: 6px; }
  .main-nav .nav-left { gap: 6px; }
  .main-nav .nav-brand-group { gap: 5px; }
  .main-nav .header-cat-mascot { width: 34px; height: 34px; }
  .main-nav .cat-mascot { width: 34px; height: 34px; }
  .main-nav .logo .acn-logo-text { font-size: 16px; letter-spacing: .5px; }
  .main-nav .coin-badge { padding: 5px 7px; font-size: 11px; }
  .main-nav .coin-badge .coin-ico { width: 15px; height: 15px; }
  .main-nav .lang-toggle { padding: 7px; min-height: 34px; }
  .main-nav .globe-vector-icon { width: 17px; height: 17px; }
  .main-nav .notification-bell-btn { width: 34px; height: 34px; }
  .main-nav .notification-bell-btn svg { width: 19px; height: 19px; }
  .main-nav .auth-buttons { gap: 6px; }
  .main-nav .btn-secondary,
  .main-nav .btn-primary { padding: 5px 7px; font-size: 9px; }
}

@media (max-width: 340px) {
  .main-nav { padding: 8px 10px; gap: 4px; }
  .main-nav .nav-left { gap: 4px; }
  .main-nav .nav-brand-group { gap: 4px; }
  .main-nav .header-cat-mascot { width: 30px; height: 30px; }
  .main-nav .cat-mascot { width: 30px; height: 30px; }
  .main-nav .logo .acn-logo-text { font-size: 14px; letter-spacing: 0; }
  .main-nav .coin-badge { padding: 4px 6px; font-size: 10px; gap: 3px; }
  .main-nav .coin-badge .coin-ico { width: 14px; height: 14px; }
  .main-nav .lang-toggle { padding: 6px; min-height: 32px; }
  .main-nav .globe-vector-icon { width: 16px; height: 16px; }
  .main-nav .notification-bell-btn { width: 32px; height: 32px; }
  .main-nav .notification-bell-btn svg { width: 18px; height: 18px; }
  .main-nav .auth-buttons { gap: 4px; }
  .main-nav .btn-secondary,
  .main-nav .btn-primary { padding: 4px 6px; font-size: 8px; }
}

/* ---------- MANGADEX-STYLE IMMERSIVE MOBILE READER ---------- */
#manga-reader {
  --reader-accent: #ff6740;
  --reader-brightness: 1;
  --reader-header-space: calc(56px + env(safe-area-inset-top, 0px));
  --reader-footer-space: calc(40px + env(safe-area-inset-bottom, 0px));
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 100dvh;
  z-index: 2147483000;
  display: none;
  overflow: hidden;
  background: #000000;
  color: #ffffff;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
#manga-reader.open { display: block; }

#manga-reader .manga-reader-header,
#manga-reader .manga-reader-footer {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(20, 20, 20, 0.9);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: #ffffff;
  transition: transform 0.3s ease;
  will-change: transform;
}
#manga-reader .manga-reader-header {
  top: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
#manga-reader .manga-reader-footer {
  bottom: 0;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
#manga-reader .manga-reader-back { justify-self: start; }
#manga-reader .manga-reader-title {
  justify-self: center;
  max-width: 54vw;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #ffffff;
}
#manga-reader .manga-reader-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 2px;
}
#manga-reader .manga-reader-icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #ffffff;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
#manga-reader .manga-reader-icon:hover,
#manga-reader .manga-reader-icon:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  outline: none;
}
#manga-reader .manga-reader-icon:active { transform: scale(0.94); }
#manga-reader #reader-fav-btn.is-fav { color: #ff4d7e; }
#manga-reader #reader-fav-btn.is-fav svg { fill: currentColor; }
#manga-reader .manga-reader-counter {
  flex: 0 0 auto;
  min-width: 52px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
#manga-reader .manga-reader-slider {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 4px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
#manga-reader .manga-reader-slider::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.26);
}
#manga-reader .manga-reader-slider::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border: 2px solid #141414;
  border-radius: 50%;
  background: var(--reader-accent);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
#manga-reader .manga-reader-slider::-moz-range-track {
  height: 4px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.26);
}
#manga-reader .manga-reader-slider::-moz-range-progress {
  height: 4px;
  border-radius: 999px;
  background: var(--reader-accent);
}
#manga-reader .manga-reader-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 2px solid #141414;
  border-radius: 50%;
  background: var(--reader-accent);
  cursor: pointer;
}
#manga-reader .manga-reader-viewport {
  position: absolute;
  top: var(--reader-header-space);
  right: 0;
  bottom: var(--reader-footer-space);
  left: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background: #000000;
  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-width: none;
}
#manga-reader .manga-reader-viewport::-webkit-scrollbar { width: 0; height: 0; display: none; }
#manga-reader.reader-mode-vertical .manga-reader-viewport {
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
  overscroll-behavior-y: contain;
}
#manga-reader .manga-reader-pages {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  background: #000000;
}
#manga-reader .manga-reader-page {
  display: block;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  line-height: 0;
  font-size: 0;
}
#manga-reader .manga-reader-page img {
  display: block;
  width: 100%;
  max-width: 100%;
  /* Full-width pages at natural height (GlobalComix-style): no letterboxing
     and no contain-shrinking — the page fills the reader width. The
     portrait aspect-ratio fallback reserves space while an image decodes,
     so snap positions and scroll offset stay stable pre-decode. */
  height: auto;
  aspect-ratio: auto 3 / 4;
  margin: 0;
  padding: 0;
  border: 0;
  background: #000000;
  filter: brightness(var(--reader-brightness, 1));
  transition: filter 0.18s ease;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}
/* vertical_snap / vertical_scroll: smooth, free glide (Webtoon style).
   There is no page locking of any kind — no mandatory snap, no
   scroll-snap-stop, pages are plain full-width natural-height strips and
   the reader scrolls natively with smooth behavior. */
#manga-reader.reader-snap-y .manga-reader-viewport,
#manga-reader.reader-mode-vertical .manga-reader-viewport {
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
/* Horizontal modes (horizontal_ltr / horizontal_rtl): tap-zone reading.
   Exactly one full-viewport frame is visible at a time and turning a
   page is an instant display swap — no strip, no translate, no
   transition. Tap the left 25% for the previous page and the right 75%
   for the next (mirrored for RTL). */
#manga-reader .manga-reader-viewport.reader-horizontal {
  overflow: hidden !important;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: auto;
  scroll-snap-type: none;
  scroll-behavior: auto;
  touch-action: none !important;
}
#manga-reader .manga-reader-pages.reader-horizontal {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
}
#manga-reader .manga-reader-pages.reader-horizontal .manga-reader-page {
  display: none;
  width: 100%;
  height: 100%;
}
#manga-reader .manga-reader-pages.reader-horizontal .manga-reader-page.is-active {
  display: block;
}
/* The "Next Chapter" prompt is the slot right after the last page.
   Revealed by tapping the right zone on the final page (or loading the
   last page). Never shows while hidden. */
#manga-reader .manga-reader-pages.reader-horizontal .manga-reader-end-card {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  box-sizing: border-box;
  text-align: center;
}
#manga-reader .manga-reader-pages.reader-horizontal .manga-reader-end-card[hidden] {
  display: none !important;
}
#manga-reader .manga-reader-pages.reader-horizontal .manga-reader-page img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  pointer-events: none;
}
body.immersive #manga-reader .manga-reader-header { transform: translateY(-100%); }
body.immersive #manga-reader .manga-reader-footer { transform: translateY(100%); }

#manga-reader .manga-reader-settings {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
#manga-reader .manga-reader-settings[hidden] { display: none; }
#manga-reader .manga-reader-settings-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
#manga-reader .manga-reader-settings-sheet {
  position: relative;
  width: min(480px, 100%);
  max-height: 85vh;
  overflow-y: auto;
  padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  background: rgba(20, 20, 20, 0.98);
  box-shadow: 0 -18px 60px rgba(0, 0, 0, 0.6);
  color: #ffffff;
  animation: mangaReaderSheetUp 0.26s ease;
}
@keyframes mangaReaderSheetUp {
  from { opacity: 0.4; transform: translateY(100%); }
  to { opacity: 1; transform: translateY(0); }
}
#manga-reader .manga-reader-settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
#manga-reader .manga-reader-settings-head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
}
#manga-reader .manga-reader-settings-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
#manga-reader .manga-reader-setting-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#manga-reader .manga-reader-setting-row-column { gap: 12px; }
#manga-reader .manga-reader-setting-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
}
#manga-reader .manga-reader-setting-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--reader-accent);
}
#manga-reader #reader-brightness-range {
  width: 100%;
  margin: 0;
  accent-color: var(--reader-accent);
}
#manga-reader .manga-reader-direction-toggle {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
#manga-reader .manga-reader-direction-btn {
  min-height: 40px;
  padding: 8px 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.78);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
#manga-reader .manga-reader-direction-btn:hover { background: rgba(255, 255, 255, 0.1); }
#manga-reader .manga-reader-direction-btn.is-active,
#manga-reader .manga-reader-page-turn-btn[aria-pressed="true"],
#manga-reader .manga-reader-page-turn-btn[data-selected="true"] {
  border: 2px solid #ff6740 !important;
  background: rgba(255, 103, 64, 0.28) !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 2px rgba(255, 103, 64, 0.2), inset 0 0 0 1px rgba(255,255,255,.08);
}
#manga-reader .manga-reader-setting-btn {
  width: 100%;
  min-height: 46px;
  margin-top: 4px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.18s ease;
}
#manga-reader .manga-reader-setting-btn:hover { background: rgba(255, 255, 255, 0.14); }
body.immersive #manga-reader .manga-reader-settings {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
}

@media (max-width: 380px) {
  #manga-reader .manga-reader-title { font-size: 13px; max-width: 46vw; }
  #manga-reader .manga-reader-icon { width: 36px; height: 36px; }
  #manga-reader .manga-reader-counter { min-width: 44px; font-size: 11px; }
  #manga-reader .manga-reader-footer { gap: 8px; padding-left: 10px; padding-right: 10px; }
}

/* Header: keep all actions on one row with consistent spacing */
.main-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 10px;
  flex-wrap: nowrap;
}

/* Header actions: contain the coin and profile pills */
.nav-actions {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  max-width: 100%;
  overflow: hidden;
  flex-wrap: nowrap;
}
.auth-buttons.nav-actions {
  flex-shrink: 1;
  min-width: 0;
}
.nav-actions:has(.lang-menu.open) {
  overflow: visible;
}



/* Spring-loaded press feedback */
button:active,
[role="button"]:active,
.btn-primary:active,
.btn-secondary:active,
.main-cta-btn:active,
.profile-action-btn:active,
.drawer-quick-btn:active,
.comic-card:active,
.chapter-card:active,
.topup-card:active,
.canvas-hero-banner:active {
  transform: scale(0.96);
  transition: transform 0.28s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@media (prefers-reduced-motion: reduce) {
  .side-drawer,
  button,
  [role="button"],
  .btn-primary,
  .btn-secondary,
  .main-cta-btn,
  .profile-action-btn,
  .drawer-quick-btn {
    transition-duration: 0.01ms !important;
  }
}

/* ===== Premium comic detail typography ===== */
.comic-detail-view {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.comic-detail-view button,
.comic-detail-view input,
.comic-detail-view select,
.comic-detail-view textarea {
  font-family: inherit;
}
.comic-detail-view .detail-title {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.3px;
}
.comic-detail-view .d-title {
  margin: 0 0 14px;
  color: var(--text-main);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.4px;
  overflow-wrap: anywhere;
}
.comic-detail-view .d-label {
  margin: 14px 0 6px;
  color: #8e95b0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.comic-detail-view .d-meta .d-title + .d-label {
  margin-top: 0;
}
.comic-detail-view .d-value {
  color: var(--text-main);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
}
#full-reader {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 5000;
  display: none;
  align-items: stretch;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;
  overscroll-behavior: contain;
  background: #000;
  color: #fff;
}
#full-reader.open { display: flex; }
#full-reader[hidden] { display: none; }
body.full-reader-open { overflow: hidden !important; }
#full-reader-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: calc(68px + env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) calc(96px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
  touch-action: pan-y;
}
#full-reader-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
  background: #0a0a0a;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.65);
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}
#full-reader-close {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top, 0px));
  right: calc(14px + env(safe-area-inset-right, 0px));
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  background: rgba(18, 18, 18, 0.78);
  color: #fff;
  font-size: 30px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: background 0.18s ease, transform 0.18s ease;
}
#full-reader-close:hover { background: rgba(255, 255, 255, 0.16); transform: scale(1.05); }
#full-reader-close:focus-visible { outline: 2px solid #ff3366; outline-offset: 3px; }
#full-reader-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  box-sizing: border-box;
  padding: 34px max(18px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px));
  background: linear-gradient(to top, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.72) 55%, rgba(0, 0, 0, 0) 100%);
}
#full-reader-count {
  flex: 0 0 auto;
  min-width: 58px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}
#full-reader-slider {
  --full-reader-progress: 0%;
  flex: 1;
  min-width: 0;
  height: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
#full-reader-slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff3366 0 var(--full-reader-progress), rgba(255, 255, 255, 0.22) var(--full-reader-progress) 100%);
}
#full-reader-slider::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  margin-top: -6px;
  border: 2px solid #000;
  border-radius: 50%;
  background: #ff3366;
  box-shadow: 0 0 0 3px rgba(255, 51, 102, 0.22);
  -webkit-appearance: none;
  appearance: none;
}
#full-reader-slider::-moz-range-track {
  height: 6px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
}
#full-reader-slider::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: #ff3366;
}
#full-reader-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 2px solid #000;
  border-radius: 50%;
  background: #ff3366;
  box-shadow: 0 0 0 3px rgba(255, 51, 102, 0.22);
}
#full-reader-slider:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(255, 51, 102, 0.35), 0 0 0 2px #ff3366;
}
@media (max-width: 640px) {
  #full-reader-stage { padding: calc(62px + env(safe-area-inset-top, 0px)) 8px calc(80px + env(safe-area-inset-bottom, 0px)); }
  #full-reader-close { width: 42px; height: 42px; font-size: 26px; }
  #full-reader-controls { gap: 10px; padding: 28px 14px calc(12px + env(safe-area-inset-bottom, 0px)); }
  #full-reader-count { min-width: 52px; font-size: 11px; }
}

/* Reader horizontal mode */
.image-container.horizontal-ltr {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  height: 100vh;
}
.image-container.horizontal-ltr img {
  width: 100vw;
  height: 100vh;
  object-fit: contain;
  scroll-snap-align: center;
}
.image-container.horizontal-rtl {
  display: flex;
  flex-direction: row-reverse;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  height: 100vh;
}
.image-container.horizontal-rtl img {
  width: 100vw;
  height: 100vh;
  object-fit: contain;
  scroll-snap-align: center;
}
.image-container.vertical {
  flex-direction: column;
  overflow-y: auto;
  height: auto;
}

#continue-reading-btn {
  background: var(--brand-fire) !important;
  border: none !important;
  color: #fff;
}

.app-hidden { display: none !important; }

#home-view { display: none; }


/* --- EXACT FIX FOR CREATOR DASHBOARD LIGHT MODE --- */
body.light-mode .creator-dashboard-inner {
    background-color: #f8f9fa;
}

body.light-mode .creator-dashboard-inner > div {
    background-color: #ffffff;
    border: 1px solid #e5e5e5;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

body.light-mode .creator-dashboard-inner h2,
body.light-mode .creator-dashboard-inner h3,
body.light-mode .creator-dashboard-inner p,
body.light-mode .creator-dashboard-inner span {
    color: #111111;
}

body.light-mode .creator-dashboard-inner .subtitle,
body.light-mode .creator-dashboard-inner small {
    color: #666666;
}


/* --- EXACT FIX FOR CREATOR WALLET & EARNINGS LIGHT MODE --- */
body.light-mode .creator-wallet-card {
    background: #ffffff;
    border: 1px solid #e5e5e5;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.light-mode .creator-wallet-header {
    background: radial-gradient(circle at top left, rgba(255, 123, 0, 0.12), transparent);
}

body.light-mode .creator-wallet-title {
    color: #111111;
}

body.light-mode .creator-wallet-sub {
    color: #666666;
}

body.light-mode .wallet-balance-label {
    color: #666666;
}

body.light-mode .wallet-balance-amount {
    color: #111111;
}

body.light-mode .wallet-manage-btn {
    background: #f8f9fa;
    color: #111111;
    border: 1px solid #e5e5e5;
}

body.light-mode .creator-header .creator-title {
    -webkit-text-fill-color: transparent;
}

body.light-mode .creator-header .creator-subtitle {
    color: #666666;
}



body.light-mode .back-to-home-btn {
    background: #f8f9fa;
    color: #111111;
    border: 1px solid #e5e5e5;
}

body.light-mode .dashboard-role-switch {
    background: #ffffff;
    color: #111111;
    border: 1px solid #e5e5e5;
}


/* --- AGGRESSIVE FIX FOR CREATOR EARNINGS + ALL CARDS LIGHT MODE --- */
body.light-mode .creator-dashboard [class*="card"],
body.light-mode .creator-dashboard [class*="panel"],
body.light-mode .creator-dashboard [class*="box"]:not(.modal-overlay):not(.side-drawer):not(.acn-download-box):not(.upload-studio-box-large),
body.light-mode .creator-dashboard .earnings,
body.light-mode .creator-dashboard .earning-card,
body.light-mode .creator-dashboard .earnings-card,
body.light-mode .creator-dashboard .stats-card,
body.light-mode .creator-dashboard .stat-card,
body.light-mode .creator-dashboard .overview-card,
body.light-mode .creator-dashboard .metric-card {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid #e5e5e5 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.light-mode .creator-dashboard [class*="card"] h1,
body.light-mode .creator-dashboard [class*="card"] h2,
body.light-mode .creator-dashboard [class*="card"] h3,
body.light-mode .creator-dashboard [class*="card"] h4,
body.light-mode .creator-dashboard [class*="card"] p,
body.light-mode .creator-dashboard [class*="card"] span,
body.light-mode .creator-dashboard [class*="card"] div,
body.light-mode .creator-dashboard [class*="card"] label {
    color: #111111 !important;
}

body.light-mode .creator-dashboard [class*="card"] .subtitle,
body.light-mode .creator-dashboard [class*="card"] .subtext,
body.light-mode .creator-dashboard [class*="card"] small,
body.light-mode .creator-dashboard [class*="card"] .muted,
body.light-mode .creator-dashboard [class*="card"] .text-muted,
body.light-mode .creator-dashboard [class*="card"] [class*="sub"] {
    color: #666666 !important;
}


/* --- FIX FOR COIN PILL, AVATAR, HAMBURGER, SIDEBAR IN LIGHT MODE --- */
body.light-mode .coin-pill {
    background: #f8f9fa !important;
    color: #111111 !important;
    border: 1.5px solid #ff3366 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

body.light-mode .coin-pill * {
    color: #111111 !important;
}

body.light-mode .profile-username {
    color: #111111 !important;
}

body.light-mode .profile-handle {
    color: #666666 !important;
}

body.light-mode .drawer-avatar {
    color: #ffffff !important;
}

body.light-mode .avatar-camera-badge {
    background-color: #ffffff !important;
    color: #111111 !important;
}

body.light-mode .side-drawer {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-right: 1px solid #e5e7eb !important;
    box-shadow: 0 10px 30px rgba(31, 36, 48, 0.18) !important;
}

body.light-mode .drawer-header {
    border-bottom: 1px solid #e5e7eb !important;
}

body.light-mode .drawer-profile-box {
    background-color: #f8f9fa !important;
    border-bottom: 1px solid #e5e7eb !important;
}

body.light-mode .profile-stats-row {
    border-top: 1px solid #e5e7eb !important;
    border-bottom: 1px solid #e5e7eb !important;
}

body.light-mode .stat-num {
    color: #111111 !important;
}

body.light-mode .stat-label {
    color: #666666 !important;
}

body.light-mode .profile-action-btn {
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    color: #111111 !important;
}

body.light-mode .profile-action-btn.highlight {
    color: #ffffff !important;
}

body.light-mode .drawer-theme-switcher {
    background-color: #f8f9fa !important;
    border-bottom: 1px solid #e5e7eb !important;
    color: #666666 !important;
}

body.light-mode .theme-switch-pill {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    color: #111111 !important;
}

body.light-mode .drawer-links li a {
    color: #666666 !important;
}

body.light-mode .drawer-links li a:hover,
body.light-mode .drawer-links li a:active,
body.light-mode .drawer-links li a.active-pill {
    color: #ff3366 !important;
    background-color: rgba(255, 0, 85, 0.08) !important;
}

body.light-mode .close-drawer {
    color: #666666 !important;
}

.drawer-bottom-section {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: auto;
  padding: 12px 0 16px;
  border-top: 1px solid #1f213a;
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: inherit;
}

.drawer-header,
.drawer-profile-box,
.drawer-theme-switcher {
  flex-shrink: 0;
}

.drawer-links {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.drawer-transactions-btn {
  text-decoration: none;
}

.drawer-settings-btn {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--text-muted);
  text-align: left;
  text-decoration: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  transition: background-color 0.2s ease, padding-left 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.drawer-settings-btn .link-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.drawer-settings-btn:hover,
.drawer-settings-btn:focus-visible,
.drawer-settings-btn:active {
  padding-left: 24px;
  background: rgba(255, 0, 85, 0.08);
  border-color: rgba(255, 51, 102, 0.14);
  color: #ff3366;
}

.drawer-settings-btn:focus-visible {
  outline: 2px solid #ff6688;
  outline-offset: -2px;
}

body.light-mode .drawer-bottom-section {
  border-top: 1px solid #e5e7eb;
}

body.light-mode .drawer-settings-btn {
  background: rgba(0, 0, 0, 0.025);
  color: #666666;
}

body.light-mode .drawer-settings-btn:hover,
body.light-mode .drawer-settings-btn:focus-visible,
body.light-mode .drawer-settings-btn:active {
  background: rgba(255, 0, 85, 0.07);
  color: #e52e61;
}

/* ==========================================================================
   LUMINA UI SYSTEM — Settings surface
   Semantic tokens + an 8px spacing scale. Every gap / padding / control
   size below is a multiple of 8px (8 / 16 / 24 / 32 / 48).
   Contrast (dark theme):  primary text 15.1:1, secondary text 7.2:1,
                           accent control 4.8:1  → WCAG AA + 1.4.11 pass.
   ========================================================================== */
:root {
  --lumina-space-1: 8px;
  --lumina-space-2: 16px;
  --lumina-space-3: 24px;
  --lumina-space-4: 32px;
  --lumina-control-size: 48px;

  --settings-bg: #0f1026;
  --settings-surface: #161925;
  --settings-border: #333333;
  --settings-border-soft: #1f213a;
  --settings-text-primary: #ffffff;
  --settings-text-secondary: #9ca3af;
  --settings-accent: #ff5a24;
  --settings-accent-gradient: linear-gradient(135deg, #f04424, #ff7b00);
  --settings-track: #6b7280;
  --settings-focus-ring: #ff9a3c;
  --settings-danger: #dc2626;
}

body.light-mode {
  --settings-bg: #ffffff;
  --settings-surface: #f9fafb;
  --settings-border: #e5e7eb;
  --settings-border-soft: #e5e7eb;
  --settings-text-primary: #111111;
  --settings-text-secondary: #6b7280;
  --settings-track: #6b7280;
  --settings-focus-ring: #0b4f9c;
}

/* App Settings Overlay */
.app-settings-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  display: none;
  align-items: stretch;
  justify-content: flex-end;
}

.app-settings-overlay.active {
  display: flex;
}

.app-settings-panel {
  width: 100%;
  max-width: 420px;
  /* 100% of the fixed overlay, not 100vh: under the larger-text setting the
     page is zoomed, and a viewport-unit height would overflow there. */
  height: 100%;
  max-height: 100%;
  background: var(--settings-bg);
  color: var(--settings-text-primary);
  display: flex;
  flex-direction: column;
  animation: slideInRight 0.3s ease;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

.app-settings-header {
  display: flex;
  align-items: center;
  gap: var(--lumina-space-1);
  padding: var(--lumina-space-2);
  border-bottom: 1px solid var(--settings-border-soft);
  background: var(--settings-bg);
}

.app-settings-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--lumina-control-size);
  height: var(--lumina-control-size);
  margin-left: calc(var(--lumina-space-1) * -1);
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--settings-text-primary);
  cursor: pointer;
}

.app-settings-back:hover {
  background: rgba(148, 163, 184, 0.16);
}

.app-settings-title {
  color: var(--settings-text-primary);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
}

.app-settings-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--lumina-space-2);
  display: flex;
  flex-direction: column;
  gap: var(--lumina-space-3);
}

/* Screen-reader-only live status (announced by aria-live, never painted) */
.settings-sr-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}


.settings-section {
  display: flex;
  flex-direction: column;
  gap: var(--lumina-space-1);
}

.settings-section-title {
  color: var(--settings-text-secondary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.5;
  margin: 0;
  text-transform: uppercase;
}

.settings-account-card {
  background: var(--settings-surface);
  border: 1px solid var(--settings-border);
  border-radius: 12px;
  padding: var(--lumina-space-2);
  display: flex;
  flex-direction: column;
  gap: var(--lumina-space-2);
}

.settings-account-row {
  display: flex;
  align-items: center;
  gap: var(--lumina-space-2);
}

.settings-avatar-wrap {
  position: relative;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}

.settings-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--settings-accent-gradient);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.settings-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Decorative marks inside the avatar: an SVG glyph or the user's initial.
   Painted only — the accessible name comes from the profile row. */
.settings-avatar-icon {
  display: block;
  color: #ffffff;
}

.settings-avatar-initial {
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
}

.settings-avatar-edit {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: var(--lumina-space-4);
  height: var(--lumina-space-4);
  padding: 0;
  border-radius: 50%;
  background: var(--settings-surface);
  border: 2px solid var(--settings-bg);
  color: var(--settings-text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.settings-avatar-edit svg,
.settings-edit-btn svg {
  display: block;
  pointer-events: none;
}

/* Visible focus ring for every interactive control (WCAG 2.4.7 / 2.4.11) */
.app-settings-back:focus-visible,
.settings-avatar-edit:focus-visible,
.settings-edit-btn:focus-visible,
.settings-logout-btn:focus-visible,
.settings-delete-btn:focus-visible,
.settings-toggle input:focus-visible + .settings-toggle-slider {
  outline: 2px solid var(--settings-focus-ring);
  outline-offset: 2px;
}

.settings-account-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--lumina-space-1);
}

.settings-username-row {
  display: flex;
  align-items: center;
  gap: var(--lumina-space-1);
}

.settings-username {
  color: var(--settings-text-primary);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.settings-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--lumina-space-4);
  height: var(--lumina-space-4);
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--settings-text-secondary);
  cursor: pointer;
}

.settings-edit-btn:hover {
  background: rgba(148, 163, 184, 0.16);
  color: var(--settings-text-primary);
}

.settings-comics-read {
  color: var(--settings-text-secondary);
  font-size: 14px;
  line-height: 1.5;
}

.settings-delete-btn {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--lumina-control-size);
  background: var(--settings-danger);
  color: #ffffff;
  border: none;
  padding: var(--lumina-space-2);
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  margin-top: var(--lumina-space-1);
  text-align: center;
}

.settings-accessibility-card {
  background: var(--settings-surface);
  border: 1px solid var(--settings-border);
  border-radius: 12px;
  overflow: hidden;
}

.settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lumina-space-2);
  min-height: 56px;
  padding: var(--lumina-space-1) var(--lumina-space-2);
  color: var(--settings-text-primary);
  font-size: 16px;
  line-height: 1.5;
  border-bottom: 1px solid var(--settings-border);
}

.settings-toggle-row:last-child {
  border-bottom: none;
}

.settings-toggle-label {
  flex: 1;
  min-width: 0;
}

.settings-toggle {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: 56px;
  height: var(--lumina-space-4);
}

.settings-toggle input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  z-index: 1;
}


.settings-toggle-slider {
  position: absolute;
  inset: 0;
  background-color: var(--settings-track);
  transition: background-color 0.2s ease;
  border-radius: 32px;
  pointer-events: none;
}

.settings-toggle-slider:before {
  position: absolute;
  content: "";
  height: 24px;
  width: 24px;
  left: 4px;
  bottom: 4px;
  background-color: #ffffff;
  transition: transform 0.2s ease;
  border-radius: 50%;
}

.settings-toggle input:checked + .settings-toggle-slider {
  background-color: var(--settings-accent);
}

.settings-toggle input:checked + .settings-toggle-slider:before {
  transform: translateX(24px);
}

.settings-logout-btn {
  width: 100%;
  min-height: var(--lumina-control-size);
  background: var(--settings-accent-gradient);
  color: #ffffff;
  border: none;
  padding: var(--lumina-space-2);
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(255, 65, 108, 0.3);
  margin-bottom: var(--lumina-space-1);
}

/* Light theme — same semantic tokens, only the values change */
body.light-mode .app-settings-panel,
body.light-mode .app-settings-header {
  background: var(--settings-bg);
}

body.light-mode .app-settings-back,
body.light-mode .app-settings-title,
body.light-mode .settings-username,
body.light-mode .settings-toggle-row {
  color: var(--settings-text-primary);
}

body.light-mode .settings-section-title,
body.light-mode .settings-comics-read,
body.light-mode .settings-edit-btn {
  color: var(--settings-text-secondary);
}

body.light-mode .settings-account-card,
body.light-mode .settings-accessibility-card {
  background: var(--settings-surface);
  border-color: var(--settings-border);
}

body.light-mode .settings-avatar-edit {
  background: var(--settings-surface);
  border-color: var(--settings-bg);
  color: var(--settings-text-primary);
}

body.light-mode .settings-logout-btn {
  background: var(--settings-accent-gradient);
  color: #ffffff;
  border: none;
}

/* Accessibility Classes */
.high-contrast {
  filter: contrast(1.25);
}

/* Screen-reader mode is markup-only (aria-label + aria-live added by JS).
   It deliberately has NO visual styles — a screen reader must never
   change the design. */

.reduce-motion *,
.reduce-motion *::before,
.reduce-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

.delete-account-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
}

.delete-account-modal.active {
  display: flex;
}

.delete-account-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
}

.delete-account-sheet {
  position: relative;
  background: #161925;
  border: 1px solid #333;
  border-radius: 12px;
  padding: 20px;
  max-width: 320px;
  width: 90%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 1;
}

.delete-account-title {
  color: #dc2626;
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  text-align: center;
}

.delete-account-warning {
  color: #ffffff;
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
  text-align: center;
}

.delete-send-code-btn {
  width: 100%;
  background: var(--brand-fire);
  color: #ffffff;
  border: none;
  padding: 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.delete-code-input {
  width: 100%;
  background: #0f1026;
  border: 1px solid #333;
  color: #ffffff;
  padding: 10px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 10px;
  box-sizing: border-box;
}

.delete-permanently-btn {
  width: 100%;
  background: #dc2626;
  color: #ffffff;
  border: none;
  padding: 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.delete-permanently-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.delete-cancel-btn {
  width: 100%;
  background: transparent;
  color: #9ca3af;
  border: 1px solid #333;
  padding: 10px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
}

body.light-mode .delete-account-sheet {
  background: #ffffff;
  border: 1px solid #e5e7eb;
}

body.light-mode .delete-account-warning {
  color: #111111;
}

body.light-mode .delete-code-input {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  color: #111111;
}

body.light-mode .delete-cancel-btn {
  color: #6b7280;
  border: 1px solid #e5e7eb;
}

/* ==========================================================================
   ACCESSIBILITY — Larger Text
   global.js adds `large-text` to <html> and <body> whenever the
   "Larger text" toggle is on. Two mechanisms work together:
     1. root font-size 125% — the root `html` rule (kept for rem-based
        rules added in the future);
     2. `zoom: 1.25` — scales the px-based CSS so the whole page
        enlarges like a 125% browser zoom.
   125% is deliberate: the earlier 200% test broke the Settings layout
   on phones (panels and toggle rows overflowed). 125% keeps every
   layout intact while still clearly enlarging text.
   All font sizes/spacing in this stylesheet are in px (rem units were
   converted) so nothing double-scales under root 125% × zoom.
   New rules must use px — never rem — or text will scale 1.56x here.
   Fixed overlays must size against 100% of the overlay (see
   .app-settings-panel), because viewport units (100vh) do not zoom.
   ========================================================================== */
html {
  font-size: 100%;
}

html.large-text {
    font-size: 125% !important;
    zoom: 1.25;
}



/* --- FIX MANAGE WALLET BUTTON TO USE THEME GRADIENT IN LIGHT MODE --- */
body.light-mode .wallet-manage-btn {
    background: var(--brand-fire) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 6px 18px rgba(255, 106, 0, 0.22) !important;
}

.user-pill {
    display: flex;
    align-items: center;
    background-color: #1a1b26;
    border: 1px solid #333;
    border-radius: 50px;
    padding: 6px 12px;
    gap: 10px;
    width: max-content;
}
.user-avatar {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--brand-fire);
    color: white;
    font-weight: bold;
    font-size: 16px;
    font-family: monospace;
    overflow: hidden;
}
.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.user-name {
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
}
.user-pill button {
    background: none;
    border: none;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0;
}


/* Visual Translation Editor Styles */
.translator-editor-box {
  max-width: 900px;
  width: 95%;
  background: #121216;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 20px;
}
.translator-editor-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
  margin-top: 15px;
}
@media (max-width: 768px) {
  .translator-editor-grid {
    grid-template-columns: 1fr;
  }
}
.editor-preview-stage {
  min-height: 380px;
  background: #09090c;
  border: 2px dashed rgba(255, 51, 102, 0.4);
  border-radius: 12px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.stage-placeholder {
  color: #64748b;
  font-size: 13px;
  text-align: center;
  padding: 20px;
}

/* ibisPaint Style Bottom Toolbar & Layer Stacking */
.translator-editor-box {
  max-width: 950px;
  width: 96%;
  background: #18181f;
  border-radius: 16px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.1);
}
.translator-editor-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 15px;
}
@media (max-width: 768px) {
  .translator-editor-grid { grid-template-columns: 1fr; }
}
.editor-preview-stage {
  min-height: 380px;
  background: #2b2b36;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.drawing-layer {
  position: absolute;
  max-width: 100%;
  height: auto;
  pointer-events: auto;
}
#layer-1 { z-index: 1; }
#layer-2 { z-index: 2; }
.stage-placeholder {
  position: absolute;
  bottom: 8px;
  left: 10px;
  font-size: 11px;
  color: #94a3b8;
  background: rgba(0,0,0,0.6);
  padding: 2px 8px;
  border-radius: 4px;
  z-index: 10;
  pointer-events: none;
}
.ibis-bottom-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #121216;
  padding: 10px;
  border-radius: 12px;
  margin-top: 15px;
  border: 1px solid rgba(255,255,255,0.08);
}
.ibis-tool-btn {
  background: #262633;
  border: none;
  color: #fff;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 11px;
}
.ibis-tool-btn:hover { background: #ff3366; }
.ibis-color-preview {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}


.settings-transactions-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.settings-transactions-link { color:var(--settings-accent, #ff3366); font-size:12.48px; font-weight:700; text-decoration:none; }
.settings-transactions-card { overflow:hidden; border:1px solid var(--settings-border); border-radius:12px; background:var(--settings-surface); }
.settings-transactions-empty { padding:14px; color:var(--settings-text-secondary); font-size:13.12px; }
.settings-transaction-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-bottom:1px solid var(--settings-border); }
.settings-transaction-row:last-child { border-bottom:0; }
.settings-transaction-info { display:flex; flex-direction:column; gap:4px; min-width:0; }
.settings-transaction-type { color:var(--settings-text-primary); font-size:13.44px; font-weight:650; text-transform:capitalize; }
.settings-transaction-date { color:var(--settings-text-secondary); font-size:11.52px; }
.settings-transaction-amount { flex-shrink:0; font-size:13.44px; font-weight:750; }
.settings-transaction-amount.positive { color:#16a34a; }
.settings-transaction-amount.negative { color:#dc2626; }


/* Premium upload and wallet modal system */
.acn-modal-overlay { background: rgba(0,0,0,.58); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.acn-modal-panel {
  width: 100%; box-sizing: border-box; background: rgba(25,25,30,.85); color: #f8fafc;
  border: 1px solid rgba(255,255,255,.12); border-radius: 20px;
  box-shadow: 0 24px 70px rgba(0,0,0,.38); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.acn-modal-panel input:not([type=checkbox]):not([type=radio]):not([type=file]), .acn-modal-panel select, .acn-modal-panel textarea {
  width: 100%; box-sizing: border-box; background: #1a1b26; color: #f8fafc;
  border: 1px solid transparent; border-radius: 10px; outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.acn-modal-panel input:not([type=checkbox]):not([type=radio]):not([type=file]):focus, .acn-modal-panel select:focus, .acn-modal-panel textarea:focus {
  border-color: #ff416c; box-shadow: 0 0 0 3px rgba(255,65,108,.2);
}
.acn-modal-panel input::placeholder, .acn-modal-panel textarea::placeholder { color: #8991a5; }
.acn-modal-panel .acn-modal-primary { border: 0; color: #fff; background: var(--brand-fire); box-shadow: 0 8px 22px rgba(255,65,108,.22); }
.acn-modal-panel .acn-modal-cancel { color: var(--text-main,#e5e7eb); background: transparent; border: 1px solid #737987; }
.file-upload-box {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
  min-height:112px; padding:20px 16px; border:1.5px dashed #ff416c; border-radius:14px;
  background:rgba(255,65,108,.055); color:var(--text-main,#f8fafc); text-align:center;
  cursor:pointer; transition:border-color .2s ease,background .2s ease,transform .2s ease;
}
.file-upload-box:hover,.file-upload-box:focus-within { border-color:#ff7b00; background:rgba(255,65,108,.1); }
.file-upload-box input[type=file] { display:none !important; }
.file-upload-box svg { width:30px; height:30px; color:#ff416c; flex:0 0 auto; }
.file-upload-box strong { font-size:13px; font-weight:800; }
.file-upload-box small { color:var(--text-muted,#a1a1aa); font-size:11px; }
.file-upload-box.compact { min-height:76px; padding:12px; }
body.light-mode .acn-modal-overlay { background:rgba(30,35,48,.28); }
body.light-mode .acn-modal-panel { background:rgba(255,255,255,.94); color:#1f2430; border-color:rgba(15,23,42,.12); box-shadow:0 24px 70px rgba(31,36,48,.18); }
body.light-mode .acn-modal-panel input:not([type=checkbox]):not([type=radio]):not([type=file]), body.light-mode .acn-modal-panel select, body.light-mode .acn-modal-panel textarea { background:#f1f3f8; color:#1f2430; }
body.light-mode .acn-modal-panel input::placeholder, body.light-mode .acn-modal-panel textarea::placeholder { color:#737b8b; }
body.light-mode .acn-modal-panel .acn-modal-cancel { color:#303746; border-color:#a8afbc; }
body.light-mode .file-upload-box { color:#1f2430; background:rgba(255,65,108,.035); }
.genre-limit-message { display:none; margin:8px 0 0; padding:10px 12px; border:1px solid rgba(255,65,108,.32); border-radius:10px; background:rgba(255,65,108,.1); color:#ff6688; font-size:12px; font-weight:700; line-height:1.45; }
.genre-limit-message.visible { display:block; animation:fadeIn .18s ease; }
body.light-mode .genre-limit-message { color:#bd214d; background:rgba(255,65,108,.07); }
@media (prefers-reduced-motion:reduce) { .acn-modal-panel,.file-upload-box { transition:none; } }


/* Premium upload modal styles */
.acn-upload-modal {
  background: rgba(25,25,30,.85);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.12);
  color: var(--text-main);
  box-shadow: 0 20px 55px rgba(0,0,0,.34);
}
.acn-upload-modal .book-form-row input:not([type="file"]),
.acn-upload-modal .book-form-row textarea,
.acn-upload-modal .book-form-row select,
.studio-field input:not([type="file"]),
.studio-field select,
.studio-field textarea {
  background: #1a1b26;
  color: #f8fafc;
  border: 1px solid transparent;
  border-radius: 10px;
}
.acn-upload-modal .book-form-row input:focus,
.acn-upload-modal .book-form-row textarea:focus,
.acn-upload-modal .book-form-row select:focus,
.studio-field input:focus,
.studio-field select:focus,
.studio-field textarea:focus {
  border-color: #ff416c;
  box-shadow: 0 0 0 3px rgba(255,65,108,.2);
  outline: none;
}
.file-upload-box {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 7px;
  min-height: 116px; width: 100%; padding: 20px 16px;
  box-sizing: border-box; border: 1.5px dashed rgba(255,65,108,.7);
  border-radius: 14px; background: rgba(255,65,108,.055);
  color: var(--text-main); text-align: center; cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.file-upload-box:hover { border-color:#ff416c; background:rgba(255,65,108,.11); }
.file-upload-box .file-upload-icon { width:30px; height:30px; color:#ff416c; }
.file-upload-box strong { font-size:14px; font-weight:800; }
.file-upload-box span { color:var(--text-muted); font-size:12px; }
.file-upload-box input[type="file"] {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%);
  white-space:nowrap; border:0;
}
.file-upload-box:focus-within { outline:2px solid #ff416c; outline-offset:3px; }
.acn-upload-modal .manage-btn.primary, .studio-submit {
  background:var(--brand-fire);
  color:#fff; border:0; box-shadow:0 8px 22px rgba(255,51,102,.25);
}
.acn-upload-modal .manage-btn.ghost {
  background:transparent; color:var(--text-muted); border:1px solid #8490a3;
}
.acn-upload-modal .genre-limit-message {
  margin:8px 0 0; padding:10px 12px; border:1px solid rgba(255,65,108,.35);
  border-radius:10px; background:rgba(255,65,108,.1); color:#ff6b8a;
  font-size:12px; font-weight:700;
}
.acn-upload-modal .genre-limit-message[hidden] { display:none; }
body.light-mode .acn-upload-modal {
  background:rgba(255,255,255,.94); border-color:rgba(148,163,184,.35);
  color:#172033; box-shadow:0 20px 55px rgba(15,23,42,.16);
}
body.light-mode .acn-upload-modal .book-form-row input:not([type="file"]),
body.light-mode .acn-upload-modal .book-form-row textarea,
body.light-mode .acn-upload-modal .book-form-row select,
body.light-mode .studio-field input:not([type="file"]),
body.light-mode .studio-field select,
body.light-mode .studio-field textarea {
  background:#f1f3f8; color:#172033; border-color:#dbe1ea;
}
body.light-mode .file-upload-box { background:rgba(255,65,108,.045); color:#172033; }
body.light-mode .acn-upload-modal .manage-btn.ghost { color:#475569; border-color:#94a3b8; }


/* ACN dashboard and header polish */
.main-nav .nav-actions > .btn-secondary { order: 1; }
.main-nav .nav-actions > .btn-primary { order: 2; }
.main-nav .nav-actions > .coin-badge { order: 3; }
.main-nav .header-cat-mascot,
.main-nav .mascot-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin: 0 2px;
  flex: 0 0 58px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform-origin: 50% 65%;
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
}
.main-nav .header-cat-mascot:active {
  transform: scale(.9);
}
.main-nav .header-cat-mascot.is-awake {
  animation: acnCatWake .42s cubic-bezier(.2,1.35,.4,1) both;
}
.main-nav .mascot-cat-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
#cat-tail-path {
  transform-box: fill-box;
  transform-origin: 5% 96%;
  will-change: transform;
  animation: acnCatTailIdle 4.8s cubic-bezier(0.42, 0.06, 0.25, 1) infinite;
}
#cat-tail-path.tail-sway {
  animation: acnCatTailSway 1.35s cubic-bezier(0.36, 0.07, 0.19, 1) infinite;
}
#cat-tail-path.wagging-tail {
  animation: acnCatTailWag .34s cubic-bezier(0.36, 0, 0.15, 1) infinite;
}
@keyframes acnCatTailIdle {
  0% { transform: rotate(-2.6deg); }
  26% { transform: rotate(1.4deg); }
  43% { transform: rotate(3.4deg); }
  68% { transform: rotate(0.6deg); }
  84% { transform: rotate(-1.6deg); }
  100% { transform: rotate(-2.6deg); }
}
@keyframes acnCatTailSway {
  0% { transform: rotate(-7deg); }
  22% { transform: rotate(2deg); }
  47% { transform: rotate(9deg); }
  74% { transform: rotate(-2deg); }
  100% { transform: rotate(-7deg); }
}
@keyframes acnCatTailWag {
  0%, 100% { transform: rotate(-11deg); }
  30% { transform: rotate(9deg); }
  55% { transform: rotate(13.5deg); }
  78% { transform: rotate(-8deg); }
}
.cat-cry-bubble {
  position: absolute;
  top: calc(100% + 5px);
  left: 50%;
  z-index: 40;
  padding: 5px 11px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  background: var(--brand-fire);
  color: #fff;
  font-size: 11.52px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%,-5px) scale(.82);
  transform-origin: top center;
  box-shadow: 0 8px 22px rgba(255,51,102,.28);
  transition: opacity .18s ease, transform .32s cubic-bezier(.2,1.35,.4,1);
}
.cat-cry-bubble.active {
  opacity: 1;
  transform: translate(-50%,0) scale(1);
}
.cat-cry-bubble::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 8px;
  height: 8px;
  background: #ff3366;
  border-top: 1px solid rgba(255,255,255,.2);
  border-left: 1px solid rgba(255,255,255,.2);
  transform: translateX(-50%) rotate(45deg);
}
@keyframes acnCatWake {
  0% { transform: translateY(0) scale(1); }
  48% { transform: translateY(-5px) scale(1.08); }
  100% { transform: translateY(0) scale(1); }
}

.creator-dashboard,
.translator-dashboard {
  width: min(1120px,100%);
  margin: 0 auto;
  padding: clamp(20px,4vw,42px) clamp(16px,3vw,28px) 64px;
  box-sizing: border-box;
}
.creator-dashboard-inner,
.translator-dashboard-inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.dashboard-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.back-to-home-btn,
.dashboard-role-switch {
  min-height: 42px;
  padding: 10px 16px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--bg-secondary);
  color: var(--text-main);
  font: inherit;
  font-size: 13.12px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .28s cubic-bezier(.2,1.2,.35,1), border-color .2s ease, background .2s ease;
}
.back-to-home-btn:hover,
.dashboard-role-switch:hover {
  transform: translateY(-2px);
  border-color: rgba(255,123,0,.55);
}
.back-to-home-btn:active,
.dashboard-role-switch:active {
  transform: scale(.96);
}
.creator-header,
.translator-header {
  padding: clamp(22px,4vw,34px);
  border: 1px solid var(--border-color);
  border-radius: 22px;
  background:
    radial-gradient(ellipse at 90% 0%,rgba(255,123,0,.13),transparent 48%),
    linear-gradient(145deg,var(--bg-secondary),var(--bg-primary));
  box-shadow: 0 18px 45px rgba(0,0,0,.14);
}
.creator-title,
.translator-title {
  font-size: clamp(32px,6vw,50.4px);
  line-height: 1.04;
  letter-spacing: -.045em;
}
.creator-subtitle,
.translator-subtitle {
  max-width: 620px;
  line-height: 1.65;
}
.creator-wallet-card {
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 22px;
  background:
    radial-gradient(ellipse at 100% 0%,rgba(255,123,0,.2),transparent 42%),
    linear-gradient(145deg,#171b27,#0d111a);
  box-shadow: 0 20px 48px rgba(0,0,0,.22);
}
.creator-wallet-header {
  padding: clamp(20px,4vw,30px);
}
.creator-wallet-body {
  padding: 0 clamp(20px,4vw,30px) clamp(22px,4vw,30px);
}
.wallet-balance-amount {
  font-size: clamp(37.6px,9vw,67.2px);
  letter-spacing: -.05em;
}
.wallet-manage-btn {
  min-height: 44px;
  border-radius: 12px;
  font: inherit;
  font-weight: 800;
  transition: transform .25s cubic-bezier(.2,1.2,.35,1),border-color .2s ease;
}
.wallet-manage-btn:hover {
  transform: translateY(-2px);
  border-color: #ff7b00;
}
.wallet-manage-btn:active { transform: scale(.96); }

.translator-controls {
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 12px 32px rgba(0,0,0,.1);
}
.translator-lang-select {
  min-height: 44px;
  border-radius: 12px;
}
.translator-section {
  gap: 14px;
}
.translator-section-title {
  letter-spacing: -.025em;
}
.translator-comics-list {
  grid-template-columns: repeat(auto-fill,minmax(min(100%,220px),1fr));
  gap: 16px;
}
.translator-comic-card {
  border-radius: 18px;
  transition: transform .25s cubic-bezier(.2,1.2,.35,1),border-color .2s ease,box-shadow .2s ease;
}
.translator-comic-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,123,0,.45);
  box-shadow: 0 16px 36px rgba(0,0,0,.18);
}
.translator-claim-btn {
  border-radius: 12px;
  transition: transform .25s cubic-bezier(.2,1.2,.35,1),filter .2s ease;
}
.translator-claim-btn:active { transform: scale(.97); }

body.light-mode .creator-header,
body.light-mode .translator-header {
  background: radial-gradient(ellipse at 90% 0%,rgba(255,123,0,.09),transparent 48%),#fff;
  border-color: #e5e7eb;
  box-shadow: 0 12px 32px rgba(31,36,48,.06);
}
body.light-mode .creator-wallet-card {
  background: radial-gradient(ellipse at 100% 0%,rgba(255,123,0,.12),transparent 42%),linear-gradient(145deg,#fff,#f8fafc);
  border-color: #e5e7eb;
  box-shadow: 0 12px 32px rgba(31,36,48,.07);
}
body.light-mode .creator-wallet-title,
body.light-mode .creator-wallet-sub,
body.light-mode .wallet-balance-label,
body.light-mode .wallet-balance-amount {
  color: #172033;
}
body.light-mode .translator-controls,
body.light-mode .translator-comic-card {
  background: #fff;
  border-color: #e5e7eb;
  box-shadow: 0 10px 26px rgba(31,36,48,.06);
}

@media (max-width: 640px) {
  .main-nav .header-cat-mascot,
  .main-nav .mascot-container {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
  }
  .main-nav .nav-brand-group { gap: 8px; }
  .wallet-balance-row { align-items: flex-start; }
  .wallet-manage-btn { width: 100%; }
  .dashboard-topbar { align-items: stretch; }
  .dashboard-topbar > button { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #cat-tail-path,
  #cat-tail-path.tail-sway,
  #cat-tail-path.wagging-tail,
  .main-nav .header-cat-mascot,
  .main-nav .header-cat-mascot.is-awake,
  .back-to-home-btn,
  .dashboard-role-switch,
  .wallet-manage-btn,
  .translator-comic-card,
  .translator-claim-btn,
  .cat-cry-bubble {
    animation: none !important;
    transition: none !important;
  }
}


/* Role switch buttons keep the destination dashboard's identity colors. */
.dashboard-role-switch.dashboard-switch-to-translator {
  background: linear-gradient(120deg, #00c2ff, #7b2ff7);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 22px rgba(0, 194, 255, 0.22);
}
.dashboard-role-switch.dashboard-switch-to-translator:hover {
  background: linear-gradient(120deg, #00c2ff, #7b2ff7);
  border-color: transparent;
  filter: brightness(1.08);
}
.dashboard-role-switch.dashboard-switch-to-creator {
  background: linear-gradient(120deg, #ff0055, #ff4500, #ff7b00);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 22px rgba(255, 69, 0, 0.24);
}
.dashboard-role-switch.dashboard-switch-to-creator:hover {
  background: linear-gradient(120deg, #ff0055, #ff4500, #ff7b00);
  border-color: transparent;
  filter: brightness(1.08);
}
.dashboard-role-switch.dashboard-switch-to-translator:focus-visible {
  outline: 2px solid #00c2ff;
  outline-offset: 3px;
}
.dashboard-role-switch.dashboard-switch-to-creator:focus-visible {
  outline: 2px solid #ff7b00;
  outline-offset: 3px;
}


/* Keep authentication controls out of the first paint until the cookie session is resolved. */
html.acn-auth-pending .auth-buttons.nav-actions > a,
html.acn-auth-pending .auth-buttons.nav-actions > .coin-badge {
  visibility: hidden !important;
}

/* Clean speech-bubble pointer: no rotated square or light border artifact. */
.cat-cry-bubble {
  border: 0 !important;
  border-radius: 12px;
  background: #ff3366 !important;
  color: #fff;
  box-shadow: 0 6px 16px rgba(255, 51, 102, .3);
  outline: 0;
}
.cat-cry-bubble::before {
  top: -6px;
  left: 50%;
  width: 0;
  height: 0;
  margin: 0;
  background: transparent;
  border: 6px solid transparent;
  border-top: 0;
  border-bottom-color: #ff3366;
  transform: translateX(-50%);
}

.topup-minimum-note { display:block; width:100%; margin-top:2px; color:var(--text-muted); font-size:10.88px; line-height:1.25; font-weight:700; text-align:center; }


/* Scoped responsive homepage reference styling */
body.home-neon #home-view { width:100%; max-width:100%; padding:5.5% 5% 7%; }
body.home-neon #home-view .brand-title { margin-bottom:3.5%; }
body.home-neon #home-view .brand-title h1:first-child { font-size:clamp(44.8px,9vw,80px); letter-spacing:.035em; }
body.home-neon #home-view .brand-title .accent-title { font-size:clamp(20px,4.8vw,37.6px)!important; margin:.3em 0 .25em!important; white-space:nowrap; }
body.home-neon #home-view .sub-headline { width:92%; max-width:672px; margin:0 auto 4.5%; font-size:clamp(14.4px,2.4vw,19.2px); line-height:1.5; }
body.home-neon #home-view .home-earn-accent { color:#00d52a; font-weight:800; }
body.home-neon #home-view .search-wrapper { width:100%; margin-bottom:3.5%; }
body.home-neon #home-view .search-wrapper input { width:100%; min-height:3.35em; padding:.8em 5%; border:1px solid var(--border-color); border-radius:3em; background:var(--bg-secondary); font-size:clamp(13.6px,2vw,16px); }
body.home-neon #home-view .home-category-pills { display:flex; flex-wrap:wrap; justify-content:center; gap:.65em; width:100%; margin:0 0 7%; }
body.home-neon #home-view .home-category-pills .pill-item { min-height:2.8em; padding:.55em 1.35em; border:1px solid var(--border-color); border-radius:2em; background:var(--bg-secondary); color:var(--text-muted); font:inherit; font-size:clamp(12px,1.9vw,15.2px); font-weight:700; cursor:pointer; }
body.home-neon #home-view .home-category-pills .pill-item.active-pill { background:linear-gradient(120deg,#00cfff,#287fe0); border-color:#00cfff; color:#fff; box-shadow:0 0 1em rgba(0,207,255,.22); }
body.home-neon #home-view .new-comics-header { width:100%; margin-bottom:3%; padding:0 1%; }
body.home-neon #home-view .new-comics-header h3 { font-size:clamp(16.8px,3vw,22.4px); }
body.home-neon #home-view #home-comics-feed { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2.5%; width:100%; margin-bottom:6%; }
body.home-neon #home-view #home-comics-feed .comic-card { min-width:0; aspect-ratio:.72; overflow:hidden; border-radius:8%; background:var(--bg-secondary); border:1px solid var(--border-color); }
body.home-neon #home-view #home-comics-feed .thumbnail-container { flex:1 1 auto; min-height:0; overflow:hidden; background:var(--bg-tertiary); }
body.home-neon #home-view #home-comics-feed .thumbnail-container img { display:block; width:100%; height:100%; object-fit:cover; }
body.home-neon #home-view #home-comics-feed .comic-info { flex:0 0 auto; padding:6% 5%; gap:.3em; background:var(--bg-secondary); }
body.home-neon #home-view #home-comics-feed .comic-title { font-size:clamp(10.88px,1.8vw,15.2px); line-height:1.25; text-align:center; }
body.home-neon #home-view #home-comics-feed .comic-genre, body.home-neon #home-view #home-comics-feed .read-btn { display:none; }
body.home-neon #home-view .main-cta-btn { width:92%; max-width:384px; margin-top:2%; }
@media (max-width:600px) {
 body.home-neon #home-view { padding:8% 5% 9%; }
 body.home-neon #home-view .home-category-pills { gap:.55em; margin-bottom:8%; }
 body.home-neon #home-view .home-category-pills .pill-item { padding:.55em 1.1em; }
 body.home-neon #home-view #home-comics-feed { gap:2.5%; }
}
@media (max-width:360px) {
 body.home-neon #home-view { padding-left:4%; padding-right:4%; }
 body.home-neon #home-view .brand-title .accent-title { font-size:17.92px!important; }
 body.home-neon #home-view .home-category-pills { gap:.4em; }
 body.home-neon #home-view .home-category-pills .pill-item { padding-left:.85em; padding-right:.85em; }
}

/* Sidebar footer links — match the genre navigation */
.drawer-bottom-section > .drawer-settings-btn,
.drawer-bottom-section > .drawer-transactions-btn {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 40px;
  margin: 0;
  padding: 12px 20px;
  gap: 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, padding-left 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.drawer-bottom-section > .drawer-settings-btn .link-icon,
.drawer-bottom-section > .drawer-transactions-btn .link-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.drawer-bottom-section > .drawer-settings-btn:hover,
.drawer-bottom-section > .drawer-settings-btn:focus-visible,
.drawer-bottom-section > .drawer-settings-btn:active,
.drawer-bottom-section > .drawer-transactions-btn:hover,
.drawer-bottom-section > .drawer-transactions-btn:focus-visible,
.drawer-bottom-section > .drawer-transactions-btn:active {
  padding-left: 24px;
  border-color: rgba(255, 51, 102, 0.14);
  background: rgba(255, 0, 85, 0.08);
  color: #ff3366;
}

.drawer-bottom-section > .drawer-settings-btn:focus-visible,
.drawer-bottom-section > .drawer-transactions-btn:focus-visible {
  outline: 2px solid #ff6688;
  outline-offset: -2px;
}

body.light-mode .drawer-bottom-section > .drawer-settings-btn,
body.light-mode .drawer-bottom-section > .drawer-transactions-btn {
  background: rgba(0, 0, 0, 0.025);
  color: #666666;
}

body.light-mode .drawer-bottom-section > .drawer-settings-btn:hover,
body.light-mode .drawer-bottom-section > .drawer-settings-btn:focus-visible,
body.light-mode .drawer-bottom-section > .drawer-settings-btn:active,
body.light-mode .drawer-bottom-section > .drawer-transactions-btn:hover,
body.light-mode .drawer-bottom-section > .drawer-transactions-btn:focus-visible,
body.light-mode .drawer-bottom-section > .drawer-transactions-btn:active {
  background: rgba(255, 0, 85, 0.07);
  color: #e52e61;
}


/* New Comics browse link */
.new-comics-header { gap: 14px; }
.see-all-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid rgba(255, 51, 102, .42);
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, #ff3366 0%, #ff7b00 100%);
  box-shadow: 0 5px 16px rgba(255, 51, 102, .22), inset 0 1px 0 rgba(255,255,255,.2);
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.see-all-arrow svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.see-all-arrow:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 8px 22px rgba(255, 51, 102, .32); }
.see-all-arrow:hover svg { transform: translateX(3px); }
.see-all-arrow:focus-visible { outline: 3px solid rgba(255, 123, 0, .45); outline-offset: 3px; }

.all-comics-page { min-height: 100vh; padding: 28px 16px 60px; background: var(--bg-primary); color: var(--text-main); }
.all-comics-shell { width: min(1100px, 100%); margin: 0 auto; }
.all-comics-topbar { display:flex; align-items:center; gap:14px; margin-bottom:26px; }
.all-comics-back { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border:1px solid var(--border-color); border-radius:13px; color:var(--text-main); text-decoration:none; background:var(--bg-secondary); font-size:20px; }
.all-comics-heading { margin:0; font-size:clamp(25.6px,4vw,36px); font-weight:900; letter-spacing:-.04em; }
.all-comics-subtitle { margin:5px 0 0; color:var(--text-muted); font-size:14.4px; }
.all-comics-controls { display:grid; grid-template-columns:minmax(0,1fr) minmax(160px,220px); gap:12px; margin-bottom:22px; }
.all-comics-controls input,.all-comics-controls select { width:100%; min-height:46px; box-sizing:border-box; padding:0 14px; border:1px solid var(--border-color); border-radius:13px; background:var(--bg-secondary); color:var(--text-main); font:inherit; outline:none; }
.all-comics-controls input:focus,.all-comics-controls select:focus { border-color:#ff3366; box-shadow:0 0 0 3px rgba(255,51,102,.12); }
.all-comics-results { display:grid; grid-template-columns:repeat(auto-fill,minmax(145px,1fr)); gap:16px; }
.all-comic-card { min-width:0; overflow:hidden; border:1px solid var(--border-color); border-radius:15px; background:var(--bg-secondary); color:var(--text-main); text-decoration:none; transition:transform .2s ease,border-color .2s ease; }
.all-comic-card:hover { transform:translateY(-4px); border-color:#ff3366; }
.all-comic-cover { display:block; width:100%; aspect-ratio:3/4; object-fit:cover; background:linear-gradient(135deg,#24133d,#54204f); }
.all-comic-card-info { padding:11px; }
.all-comic-card-title { margin:0 0 5px; font-size:14.4px; line-height:1.3; font-weight:800; overflow-wrap:anywhere; }
.all-comic-card-genre { margin:0; color:var(--text-muted); font-size:12px; }
.all-comics-status { grid-column:1/-1; padding:32px 18px; border:1px dashed var(--border-color); border-radius:15px; color:var(--text-muted); text-align:center; background:var(--bg-secondary); }
@media(max-width:560px) {
 .all-comics-page { padding:20px 13px 45px; }
 .all-comics-controls { grid-template-columns:1fr; }
 .all-comics-results { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
 .see-all-arrow { min-height:36px; padding:0 10px; }
}


/* Creator Studio layout refinements */
.dashboard-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 34px;
  margin-bottom: 18px;
}
.back-to-home-btn {
  display: inline-flex !important;
  align-items: center;
  width: auto !important;
  min-height: 0 !important;
  padding: 3px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text-muted) !important;
  font: inherit;
  font-size: 13.76px !important;
  font-weight: 650 !important;
  text-decoration: none;
  cursor: pointer;
}
.back-to-home-btn:hover { color: var(--text-main) !important; transform: none !important; }
.creator-track-btn {
  flex: 1 1 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 22px;
  border: 1px solid rgba(111, 141, 255, .35);
  border-radius: 999px;
  background: linear-gradient(135deg, #263b70, #394b8a);
  color: #fff;
  font-size: 16px;
  font-weight: 850;
  text-decoration: none;
  box-shadow: 0 9px 26px rgba(40, 58, 115, .25);
  transition: transform .18s ease, filter .18s ease;
}
.creator-track-btn:hover { transform: translateY(-2px); filter: brightness(1.1); }
.wallet-balance-row {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 14px;
}
.wallet-balance-copy { display: grid; gap: 5px; }
.wallet-balance-label { font-size: 10.88px; letter-spacing: .08em; }
.wallet-manage-btn { align-self: flex-start; min-width: 150px; }
.creator-notification-wrap { position: relative; margin-left: auto; }
.creator-notification-bell {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  background: var(--bg-secondary);
  color: var(--text-main);
  cursor: pointer;
}
.creator-notification-bell:hover { border-color: #ff3366; color: #ff6688; }
.creator-notification-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border-radius: 99px;
  background: #ff3366;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
}
.creator-notification-count[hidden] { display: none !important; }
.creator-notification-panel {
  position: absolute;
  z-index: 80;
  top: calc(100% + 10px);
  right: 0;
  width: min(360px, calc(100vw - 36px));
  max-height: 420px;
  overflow: auto;
  padding: 14px;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  background: var(--bg-secondary);
  color: var(--text-main);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
.creator-notification-panel[hidden] { display: none !important; }
.creator-notification-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px; }
.creator-notification-heading a { color:#ff6688; font-size:12px; font-weight:800; text-decoration:none; }
.creator-notification-list { display:grid; gap:8px; }
.creator-notification-item { display:block; padding:11px 12px; border:1px solid var(--border-color); border-radius:11px; color:var(--text-main); text-decoration:none; font-size:12px; line-height:1.5; }
.creator-notification-item:hover { border-color:rgba(255,51,102,.45); }
.creator-notification-time { display:block; margin-top:5px; color:var(--text-muted); font-size:10px; }
.creator-notification-empty { margin:0; padding:18px 8px; color:var(--text-muted); text-align:center; font-size:12px; }
@media(max-width:640px) {
  .creator-track-btn { flex-basis:auto; }
}


/* Fluid Creator Studio home dashboard: thumb-friendly from phones to TVs. */
#creator-dashboard, #creator-dashboard * { box-sizing:border-box; }
.creator-dashboard-inner { width:94%; max-width:1440px; min-width:0; margin-inline:auto; }
.dashboard-topbar { width:100%; }
.creator-wallet-card { width:100%; max-width:100%; }
.wallet-balance-row { display:flex; flex-wrap:wrap; align-items:flex-start; gap:14px; width:100%; }
.wallet-balance-copy { min-width:0; max-width:100%; }
.wallet-balance-amount { overflow-wrap:anywhere; }
.wallet-manage-btn { min-height:48px; padding:12px 20px; }
.creator-notification-bell { min-width:44px; min-height:44px; }
.creator-notification-panel { max-width:88vw; overflow-wrap:anywhere; }
@media (max-width: 600px) {
  .creator-dashboard-inner { width:94%; }
  .wallet-balance-row { flex-direction:column; align-items:stretch; gap:12px; }
  .wallet-manage-btn { width:100%; }
  .creator-notification-panel { position:fixed; top:14%; right:3%; width:94%; max-width:94%; }
}
@media (min-width: 1200px) {
  .creator-dashboard-inner { width:88%; }
}
@media (min-width: 1920px) {
  .creator-dashboard-inner { width:82%; max-width:1720px; }
}


/* Creator Studio layout normalization: final overrides for all viewport sizes. */
#creator-dashboard {
  width: 100%; max-width: none; margin: 0 auto;
  padding: clamp(20px, 4vw, 48px) clamp(14px, 3vw, 28px) 56px;
  box-sizing: border-box;
}
#creator-dashboard, #creator-dashboard * { box-sizing: border-box; }
#creator-dashboard .creator-dashboard-inner {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: clamp(18px, 3vw, 28px); width: 100%; max-width: 760px; min-width: 0; margin: 0 auto;
}
#creator-dashboard .dashboard-topbar { width: 100%; min-width: 0; }
#creator-dashboard .creator-header {
  position: relative; isolation: isolate; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; width: 100%; max-width: 100%;
  min-width: 0; margin: 0 auto; padding: clamp(22px, 4vw, 36px);
  text-align: center; overflow: hidden;
}
#creator-dashboard .creator-header img,
#creator-dashboard .creator-header > picture,
#creator-dashboard .creator-header > picture img {
  position: static !important; inset: auto !important; display: block; flex: 0 0 auto;
  width: auto; max-width: min(100%, 240px); height: auto; max-height: 220px;
  margin: 0 auto 8px; object-fit: contain; object-position: center; transform: none;
}
#creator-dashboard .creator-header-copy {
  position: relative; z-index: 1; display: flex; flex-direction: column;
  align-items: center; gap: 10px; width: 100%; max-width: 620px; min-width: 0; margin: 0 auto;
}
#creator-dashboard .creator-title {
  max-width: 100%; margin: 0; line-height: 1.12; overflow-wrap: anywhere; text-align: center;
}
#creator-dashboard .creator-subtitle {
  max-width: 100%; margin: 0; line-height: 1.6; text-align: center;
}
#creator-dashboard .creator-wallet-card {
  width: 100%; max-width: 100%; min-width: 0; margin: 0 auto;
}
#creator-dashboard .creator-wallet-header,
#creator-dashboard .creator-wallet-body { min-width: 0; }
#creator-dashboard .wallet-balance-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 16px; width: 100%; min-width: 0;
}
#creator-dashboard .wallet-balance-copy {
  flex: 1 1 220px; min-width: 0; text-align: center;
}
#creator-dashboard .wallet-manage-btn {
  flex: 0 1 220px; min-width: min(100%, 180px); min-height: 50px; margin: 0 auto;
}
@media (max-width: 600px) {
  #creator-dashboard { padding: 18px 14px 36px; }
  #creator-dashboard .creator-dashboard-inner { width: 100%; max-width: 600px; gap: 18px; }
  #creator-dashboard .creator-header { padding: 22px 18px; }
  #creator-dashboard .creator-header img,
  #creator-dashboard .creator-header > picture img {
    max-width: min(100%, 190px); max-height: 180px;
  }
  #creator-dashboard .wallet-balance-row {
    flex-direction: column; align-items: center; gap: 14px;
  }
  #creator-dashboard .wallet-balance-copy,
  #creator-dashboard .wallet-manage-btn { width: 100%; max-width: 100%; }
}
@media (min-width: 900px) {
  #creator-dashboard .creator-dashboard-inner { max-width: 760px; }
}


/* Creator Earnings card: restore compact sizing and give the balance label breathing room. */
#creator-dashboard .creator-wallet-card {
  height: auto !important;
  min-height: 0 !important;
  max-height: none;
}
#creator-dashboard .creator-wallet-header {
  padding: 18px 22px 12px !important;
}
#creator-dashboard .creator-wallet-body {
  display: block;
  height: auto !important;
  min-height: 0 !important;
  padding: 20px 22px 22px !important;
}
#creator-dashboard .wallet-balance-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 22px;
  height: auto !important;
  min-height: 0 !important;
}
#creator-dashboard .wallet-balance-copy {
  display: block;
  width: 100%;
  flex: 0 0 auto;
  min-height: 0 !important;
  margin: 0;
  padding: 16px 0 0;
  text-align: center;
}
#creator-dashboard .wallet-balance-label {
  display: block;
  margin: 0 0 8px;
  line-height: 1.4;
}
#creator-dashboard .wallet-balance-amount {
  margin-top: 8px;
  line-height: 1.15;
}
#creator-dashboard .wallet-manage-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 54px !important;
  width: 100%;
  max-width: 100%;
  height: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;
  margin: 0 auto !important;
  padding: 12px 20px !important;
  line-height: 1.2;
}
@media (max-width: 600px) {
  #creator-dashboard .creator-wallet-header { padding: 17px 18px 10px !important; }
  #creator-dashboard .creator-wallet-body { padding: 16px 18px 18px !important; }
  #creator-dashboard .wallet-balance-copy { padding-top: 18px; }
  #creator-dashboard .wallet-balance-row { gap: 18px; }
  #creator-dashboard .wallet-manage-btn {
    width: 100%;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
  }
}


/* ACN Novels / Light Novels experience */
.acn-library-switch{display:flex;gap:6px;width:100%;max-width:360px;margin:2px auto 20px;padding:5px;border:1px solid var(--border-color);background:var(--bg-secondary);border-radius:14px;box-sizing:border-box}
.acn-library-tab{flex:1;border:0;border-radius:10px;padding:11px 16px;background:transparent;color:var(--text-muted);font-family:inherit;font-size:14px;font-weight:700;cursor:pointer}
.acn-library-tab.is-active{background:var(--brand-fire);color:#fff;box-shadow:0 5px 16px #ff336633}
.acn-novels-panel{width:100%;max-width:1000px;margin:0 auto 24px;text-align:left;animation:fadeIn .25s ease-out}
.acn-novels-panel[hidden]{display:none!important}
.acn-novels-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 18px}
.acn-novels-heading h2{margin:2px 0 5px;font-size:clamp(21.6px,4vw,28.8px);font-weight:850}
.acn-novels-heading p{margin:0;color:var(--text-muted);font-size:13px}
.acn-eyebrow{color:#ff7895!important;font-size:10px!important;font-weight:900;letter-spacing:1.8px}
.acn-write-link{flex-shrink:0;text-decoration:none;color:#fff;background:var(--brand-fire);padding:10px 14px;border-radius:11px;font-size:12px;font-weight:800}
/* Writer's Guild is temporarily hidden; keep its page and code for later implementation. */
.acn-guild-link{display:none!important}
.acn-novel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:16px}
.acn-novel-card{min-width:0;overflow:hidden;border:1px solid var(--border-color);border-radius:14px;background:var(--bg-secondary);color:var(--text-main);text-align:left;cursor:pointer;padding:0}
.acn-novel-card:hover{transform:translateY(-3px);border-color:#ff6688}
.acn-novel-cover{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;background:linear-gradient(135deg,#26153d,#5b2349)}
.acn-novel-cover-placeholder{display:flex;align-items:center;justify-content:center;color:#fff;font-size:38px}
.acn-novel-card-copy{padding:11px}
.acn-novel-card-title{display:block;font-size:13px;font-weight:800;line-height:1.35;overflow-wrap:anywhere}
.acn-novel-card-author{display:block;margin-top:5px;color:var(--text-muted);font-size:11px}
.acn-novel-card-tag{display:inline-block;margin-top:8px;padding:4px 7px;border-radius:20px;background:#ff33661c;color:#ff7895;font-size:9px;font-weight:800}
.acn-novel-state{grid-column:1/-1;padding:28px 18px;text-align:center;border:1px dashed var(--border-color);border-radius:14px;color:var(--text-muted);font-size:13px}
@media(max-width:560px){.acn-novels-heading{align-items:flex-start;flex-direction:column}.acn-write-link{align-self:flex-start}.acn-novel-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}

/* Give the novel catalogue room to breathe while keeping the comics layout unchanged. */
#home-view.novels-mode{width:100%;max-width:1100px;padding-left:clamp(16px,4vw,32px);padding-right:clamp(16px,4vw,32px)}
.acn-novel-page,.acn-reader-page{animation:none;display:block}


/* Unified sign-in and registration styling: match ACN's dark, pink-orange brand palette. */
#join-modal .content-box {
  /* Frame styling intentionally falls back to the base .content-box rules.
     Only cap the height and allow internal scroll so the modal stays
     centered and fully usable on short screens. */
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
#join-modal .modal-header-row h2 {
  margin: 0;
  color: var(--text-main, #fff);
  background: var(--brand-fire);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
#join-modal .section-subtitle,
#join-modal .form-group label {
  color: var(--text-muted, #94a3b8);
}
#join-modal .form-group input {
  width: 100%;
  min-height: 46px;
  box-sizing: border-box;
  color: var(--text-main, #fff);
  background: var(--input-bg, #06090f);
  border: 1px solid var(--border-color, #1e293b);
  border-radius: 10px;
  outline: none;
}
#join-modal .form-group input:focus {
  border-color: #ff3366;
  box-shadow: 0 0 0 3px rgba(255, 51, 102, .12);
}
#join-modal .auth-submit-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
}
#join-modal .auth-switch-hint,
#join-modal .auth-switch-hint a {
  color: var(--text-muted, #94a3b8);
}
#join-modal .auth-switch-hint a,
#join-modal .form-group a,
#join-modal .signup-legal-link {
  color: #ff6685 !important;
}
#join-modal .google-signup-wrap,
#join-modal .g_id_signin {
  max-width: 100%;
}
#join-modal .google-signup-wrap {
  margin: 0 0 16px;
  overflow: hidden;
  border-radius: 10px;
}
#join-modal .form-group {
  margin-bottom: 14px;
}
/* Mobile: compress the auth modal so the whole form — including the
   submit button — fits inside the viewport without scrolling. */
@media (max-width: 480px) {
  #join-modal .content-box {
    padding: 14px 14px;
    max-height: calc(100dvh - 20px);
  }
  #join-modal .modal-header-row { min-height: 36px; margin-bottom: 4px; }
  #join-modal .modal-header-row h2 { font-size: 19px; }
  #join-modal .close-btn { font-size: 26px; width: 40px; height: 40px; }
  #join-modal .section-subtitle {
    font-size: 12px; line-height: 1.3; margin: 0 0 8px;
  }
  #join-modal .form-group { margin-bottom: 8px; }
  #join-modal .form-group label { font-size: 10px; margin-bottom: 4px; }
  #join-modal .form-group input,
  #join-modal .form-group select {
    padding: 10px 12px; min-height: 42px; font-size: 13px;
  }
  #join-modal .signup-country-group select {
    min-height: 42px; padding: 9px 12px; font-size: 13px;
  }
  #join-modal .signup-country-group .account-hint {
    font-size: 10px; line-height: 1.3; margin-top: 4px;
  }
  #join-modal .account-hint { font-size: 11px; }
  #join-modal .google-signup-wrap { margin: 0 0 8px; }
  #join-modal .auth-submit-btn { min-height: 44px; }
  #join-modal .auth-switch-hint { font-size: 12px; margin-top: 6px; }
  #join-modal .auth-consent-row { font-size: 10.5px; line-height: 1.3; margin: 6px 0; }
}

/* Very small screens (phones in portrait, e.g. 320x568): compress harder
   so the Create ACN Account button still needs no scrolling. */
@media (max-width: 480px) and (max-height: 620px) {
  #join-modal .content-box {
    padding: 12px;
    max-height: calc(100dvh - 16px);
  }
  #join-modal .modal-header-row { min-height: 30px; margin-bottom: 2px; }
  #join-modal .modal-header-row h2 { font-size: 17px; }
  #join-modal .close-btn { width: 36px; height: 36px; font-size: 24px; }
  #join-modal .section-subtitle { font-size: 10.5px; line-height: 1.2; margin: 0 0 6px; }
  #join-modal .form-group { margin-bottom: 5px; }
  #join-modal .form-group label { font-size: 9px; margin-bottom: 3px; }
  #join-modal .form-group input,
  #join-modal .form-group select,
  #join-modal .signup-country-group select {
    min-height: 36px; padding: 8px 10px; font-size: 12.5px;
  }
  #join-modal .signup-country-group .account-hint { display: none; }
  #join-modal .google-signup-wrap { margin: 0 0 6px; }
  #join-modal .auth-submit-btn { min-height: 40px; }
  #join-modal .auth-consent-row { font-size: 10px; line-height: 1.25; margin: 5px 0; }
  #join-modal .auth-switch-hint { margin-top: 4px; font-size: 11px; }
  #join-modal .account-hint { margin-top: 4px !important; font-size: 10.5px; }
}

.auth-consent-row { margin: 8px 0; font-size: 11px; line-height: 1.4; }


/* Translation feature temporarily hidden.
   Keep its frontend code and backend functionality intact. */
.translator-dashboard,
.dashboard-switch-to-translator,
.studio-trans-card,
.studio-trans-grid,
.translator-editor-box,
.translator-editor-grid,
#acn-translator-editor-modal,
#reader-language {
  display: none !important;
}

/* Copyright report link: keep it in normal flow so it cannot cover Creator Studio UI. */
.copyright-report-inline {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  transform: none !important;
  width: 100%;
  margin: 24px auto 0;
  padding: 0 16px max(20px, env(safe-area-inset-bottom));
  box-sizing: border-box;
  text-align: center;
}

.copyright-report-inline .copyright-report-link {
  position: static !important;
  inset: auto !important;
  transform: none !important;
}

#creator-dashboard {
  padding-bottom: max(56px, calc(24px + env(safe-area-inset-bottom)));
}


/* Header visibility repair: logged-out users have no coin-pill layout space,
   and the language globe remains a visible, independent control. */
.main-nav .auth-buttons,
.main-nav .auth-buttons.nav-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  min-width: 0;
  margin-left: auto;
  overflow: visible !important;
}

.main-nav .coin-badge[aria-hidden="true"] {
  display: none !important;
}

.main-nav #lang-toggle.lang-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 36px !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: relative;
  z-index: 2;
}

.main-nav #lang-toggle .globe-vector-icon {
  display: block !important;
  flex: 0 0 22px !important;
  width: 22px !important;
  height: 22px !important;
  color: #ffffff !important;
  stroke: currentColor !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.main-nav .btn-secondary,
.main-nav .btn-primary {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  padding: 4px 8px !important;
  font-size: 11px !important;
  line-height: 1.2;
}

@media (max-width: 410px) {
  .main-nav .auth-buttons,
  .main-nav .auth-buttons.nav-actions { gap: 6px !important; }
  .main-nav #lang-toggle .globe-vector-icon {
    width: 21px !important;
    height: 21px !important;
    flex-basis: 21px !important;
  }
}


/* Strict separation: the Novels tab is a text-story catalogue, never a comic feed. */
#home-view.novels-mode .search-wrapper,
#home-view.novels-mode .home-category-pills,
#home-view.novels-mode .new-comics-header,
#home-view.novels-mode #home-comics-feed,
#home-view.novels-mode .main-cta-btn {
  display: none !important;
}

#home-view.novels-mode #home-novels-panel {
  display: block !important;
  width: 100%;
}

#home-view.novels-mode #home-novels-grid {
  display: grid;
}

#home-view.novels-mode #home-comics-feed,
#home-view.novels-mode .new-comics-header,
#home-view.novels-mode .home-category-pills,
#home-view.novels-mode .search-wrapper {
  visibility: hidden !important;
  pointer-events: none !important;
}


/* Become-a-Partner chooser: shared ACN pink/orange creator styling. */
.acn-partner-choice-box{width:min(680px,calc(100vw - 28px));max-height:90vh;overflow:auto}
.acn-creator-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}
.acn-creator-choice{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0;min-height:170px;padding:20px;border:1px solid var(--border-color,#303b4e);border-radius:16px;background:var(--bg-tertiary,#111722);color:var(--text-main,#f5f6fa);text-align:left;cursor:pointer;transition:border-color .18s,transform .18s,box-shadow .18s}
.acn-creator-choice:hover,.acn-creator-choice:focus-visible{border-color:#ff6688;transform:translateY(-2px);box-shadow:0 10px 26px rgba(255,51,102,.14);outline:none}
.acn-creator-choice-icon{font-size:28px}
.acn-creator-choice strong{font-size:15px;font-weight:900}
.acn-creator-choice small{color:var(--text-muted,#aab4c5);font-size:11px;line-height:1.5}
@media(max-width:600px){.acn-creator-choice-grid{grid-template-columns:1fr}.acn-creator-choice{min-height:0;padding:17px}}


/* Lightweight comic downloads */
.chapter-list-toolbar{display:flex;align-items:center;justify-content:space-between;gap:9px;flex-wrap:wrap}
.chapter-card-wrap{display:flex;flex-direction:column;gap:7px;min-width:0}
.chapter-card-wrap .chapter-card{width:100%;min-width:0}
.chapter-download-link,.chapter-download-series{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:34px;padding:7px 12px;border:1px solid rgba(148,163,184,.28);border-radius:9px;background:rgba(255,255,255,.025);color:#d5dbe6;text-decoration:none;font-size:11px;font-weight:800;line-height:1.2;box-sizing:border-box}
.chapter-download-link{align-self:flex-start;margin-left:8px}
.chapter-download-link:hover,.chapter-download-series:hover{border-color:rgba(255,102,136,.65);background:rgba(255,51,102,.08);color:#ff9ab0}
.chapter-download-series{border-color:rgba(255,102,136,.35);color:#ff9ab0}
.chapter-download-link:focus-visible,.chapter-download-series:focus-visible{outline:2px solid #ff7895;outline-offset:2px}


/* Offline library save actions */
.chapter-download-link,.chapter-download-series{font-family:inherit;cursor:pointer}
.chapter-download-link{border:1px solid rgba(148,163,184,.28);background:transparent;color:#ff9ab0}
.chapter-download-link:hover{border-color:rgba(255,102,136,.65);background:rgba(255,51,102,.08);color:#ffc0ce}
.chapter-download-series{border:1px solid rgba(255,102,136,.35);background:transparent;color:#ff9ab0}
.chapter-download-series:hover{border-color:#ff6688;background:rgba(255,51,102,.08);color:#ffc0ce}


/* =========================================================
   ACN MOBILE BOTTOM NAV + FULL-SCREEN ME PAGE
   ========================================================= */
body { padding-bottom: 72px !important; box-sizing: border-box; }
.acn-bottom-nav {
  /* Keep this viewport-fixed without a forced GPU transform layer. */
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
  height: 72px; padding: 7px max(14px, env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  display: grid; grid-template-columns: repeat(3, 1fr); align-items: center;
  background: #30343b; border-top: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 -8px 28px rgba(0,0,0,.28); box-sizing: border-box;
}
.acn-bottom-nav-item {
  min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border: 0; background: transparent; color: #9aa6b5; font-family: inherit; font-size: 11px; font-weight: 600; line-height: 1.2; cursor: pointer;
}
.acn-bottom-nav-item svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.acn-bottom-nav-item.is-active, .acn-bottom-nav-item:focus-visible { color: #ff6b55; }
.acn-bottom-nav-item:focus-visible, .acn-me-close:focus-visible, .acn-create-close:focus-visible { outline: 2px solid #ff8b62; outline-offset: 3px; }
.acn-me-overlay {
  position: fixed; inset: 0; z-index: 9998; display: flex; flex-direction: column;
  background: #0c1219; color: #f7f8fa; overflow-y: auto; overscroll-behavior: contain;
  padding: max(18px, env(safe-area-inset-top)) 22px calc(92px + env(safe-area-inset-bottom));
  box-sizing: border-box; opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(8px); transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.acn-me-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.acn-me-header { width: 100%; display: flex; align-items: center; justify-content: space-between; min-height: 48px; margin-bottom: 28px; }
.acn-me-header h1 { margin: 0; font-size: 27px; line-height: 1.15; font-weight: 800; letter-spacing: -.5px; }
.acn-me-close { width: 48px; height: 48px; border: 0; border-radius: 50%; color: #fff; background: #1b2632; font: 300 38px/1 Arial,sans-serif; cursor: pointer; }
.acn-me-content { width: 100%; max-width: 620px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.acn-me-profile { display: flex; align-items: center; gap: 16px; min-height: 76px; }
.acn-me-avatar { width: 68px; height: 68px; flex: 0 0 68px; overflow: hidden; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg,#f04424,#ff7b00); border: 2px solid rgba(255,255,255,.16); color: white; font-size: 25px; font-weight: 800; box-sizing: border-box; }
.acn-me-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
/* Avatar + its pencil. The pencil opens the photo picker. */
.acn-me-avatar-wrap { position: relative; width: 68px; height: 68px; flex: 0 0 68px; }
.acn-me-avatar-wrap .acn-me-avatar { flex: none; }
.acn-me-avatar-edit { position: absolute; right: -3px; bottom: -3px; width: 27px; height: 27px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #16202c; border: 2px solid rgba(255,255,255,.18); color: #ffb703; cursor: pointer; box-sizing: border-box; }
.acn-me-avatar-edit:hover { background: #1f2c3a; color: #ff7a33; }
.acn-me-avatar-edit svg { display: block; pointer-events: none; }
.acn-me-avatar-edit[hidden], .acn-me-name-edit[hidden] { display: none !important; }
/* Display name + its pencil. The pencil opens the name prompt. */
.acn-me-name-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.acn-me-name-edit { width: 26px; height: 26px; padding: 0; flex: 0 0 26px; border: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: #94a3b8; cursor: pointer; }
.acn-me-name-edit:hover { background: rgba(148,163,184,.16); color: #f3f5f8; }
.acn-me-name-edit svg { display: block; pointer-events: none; }
.acn-me-avatar-edit:focus-visible, .acn-me-name-edit:focus-visible { outline: 2px solid #ffb703; outline-offset: 2px; }
.acn-me-identity { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.acn-me-identity strong { font-size: 19px; font-weight: 750; overflow-wrap: anywhere; }
.acn-me-identity span { color: #94a3b8; font-size: 14px; }
.acn-me-dashboard { width: 100%; min-height: 58px; display: flex; align-items: center; justify-content: center; gap: 12px; border: 0; border-radius: 15px; background: linear-gradient(135deg, #ff0055 0%, #ff7b00 100%); color: #fff; font-size: 16px; font-weight: 800; cursor: pointer; box-shadow: 0 9px 24px rgba(240,68,36,.18); }
/* The Creator Dashboard only appears for creators who already have a book. */
.acn-me-dashboard[hidden] { display: none !important; }
.acn-me-dashboard svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.acn-me-shortcuts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
.acn-me-shortcut { min-height: 118px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border: 1px solid #273342; border-radius: 15px; background: #141e29; color: #f3f5f8; text-decoration: none; font-family: inherit; font-size: 14px; font-weight: 650; line-height: 1.2; cursor: pointer; }
.acn-me-shortcut svg { width: 27px; height: 27px; fill: none; stroke: #ff9a3c; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.acn-me-shortcut svg.acn-me-filled-icon { fill: #ff0000; stroke: #ff0000; stroke-width: 1.5; }
.acn-me-links { display: flex; flex-direction: column; border: 1px solid #273342; border-radius: 15px; overflow: hidden; background: #141e29; }
.acn-me-link { min-height: 59px; padding: 0 17px; display: flex; align-items: center; gap: 14px; border: 0; border-bottom: 1px solid #273342; background: transparent; color: #f3f5f8; text-align: left; text-decoration: none; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; cursor: pointer; }
.acn-me-link:last-child { border-bottom: 0; }
.acn-me-link > svg:first-child { width: 21px; height: 21px; flex: 0 0 21px; fill: none; stroke: #aab6c5; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.acn-me-link span { flex: 1; }
.acn-me-link .acn-me-link-arrow { width: 18px; height: 18px; fill: none; stroke: #64748b; stroke-width: 2; }
/* Logged-out call to action on the Me screen: left-aligned fire gradient row,
   sitting directly above the Settings row. */
.acn-me-signin-btn { width: 100%; min-height: 59px; padding: 0 17px; display: flex; align-items: center; justify-content: flex-start; border: 0; border-bottom: 1px solid #273342; background: linear-gradient(135deg, #ff0055 0%, #ff7b00 100%); color: #fff; font-family: inherit; font-size: 15px; font-weight: 800; letter-spacing: .02em; text-align: left; cursor: pointer; }
.acn-me-signin-btn:hover { background: linear-gradient(135deg, #ff2a66 0%, #ff8a1e 100%); }
.acn-me-signin-btn[hidden] { display: none !important; }
.acn-me-logout { width: 100%; min-height: 54px; margin-top: 5px; border: 1px solid rgba(248,80,90,.28); border-radius: 13px; background: rgba(239,68,68,.12); color: #ff646b; font-size: 15px; font-weight: 750; cursor: pointer; }
.acn-create-modal { z-index: 10000; padding: 20px; }
.acn-create-modal-card { width: min(100%, 460px); padding: 24px; border: 1px solid rgba(255,255,255,.1); border-radius: 20px; background: #111a25; color: #f8fafc; box-sizing: border-box; }
.acn-create-modal-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 22px; }
.acn-create-eyebrow { color: #ff8966; font-size: 10px; font-weight: 800; letter-spacing: 1.7px; }
.acn-create-modal-heading h2 { margin: 6px 0; font-size: 24px; }
.acn-create-modal-heading p { margin: 0; color: #9aa8b8; font-size: 13px; }
.acn-create-close { width: 38px; height: 38px; flex: 0 0 38px; border: 0; border-radius: 50%; background: #243140; color: #fff; font-size: 27px; cursor: pointer; }
.acn-create-options { display: flex; flex-direction: column; gap: 12px; }
.acn-create-option { width: 100%; min-height: 82px; padding: 14px; display: flex; align-items: center; gap: 13px; border: 1px solid #2b3949; border-radius: 14px; background: #182432; color: #f8fafc; text-align: left; cursor: pointer; }
.acn-create-option > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.acn-create-option strong { font-size: 15px; }
.acn-create-option small { color: #9aa8b8; font-size: 12px; line-height: 1.4; }
.acn-create-option-icon { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border-radius: 12px; background: rgba(255,112,91,.13); color: #ff8966; }
.acn-create-option-icon svg, .acn-create-chevron { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.acn-create-chevron { width: 18px; height: 18px; color: #718096; }
@media (min-width: 700px) {
  .acn-me-overlay { padding-left: max(32px,calc((100vw - 620px)/2)); padding-right: max(32px,calc((100vw - 620px)/2)); }
}
@media (prefers-reduced-motion: reduce) {
  .acn-me-overlay { transition: none; }
}


/* Header theme switch and exact theme-matched page/navigation surfaces */
.header-theme-toggle {
  width: 36px; height: 36px; min-width: 36px; flex: 0 0 36px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; margin: 0 3px; border: 1px solid var(--border-color);
  border-radius: 50%; background: var(--bg-secondary); color: var(--text-main);
  cursor: pointer; line-height: 1;
}
.header-theme-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.header-theme-toggle .theme-moon-icon { display: none; }
body.light-mode .header-theme-toggle .theme-sun-icon { display: none; }
body.light-mode .header-theme-toggle .theme-moon-icon { display: block; }
body.dark-mode .header-theme-toggle .theme-sun-icon { display: block; }
body.dark-mode .header-theme-toggle .theme-moon-icon { display: none; }
.auth-buttons.nav-actions { gap: 12px !important; }
body.light-mode #lang-toggle .globe-vector-icon,
body.light-mode .main-nav #lang-toggle .globe-vector-icon { stroke: #000 !important; }
body.dark-mode #lang-toggle .globe-vector-icon,
body.dark-mode .main-nav #lang-toggle .globe-vector-icon { stroke: #fff !important; }
body.light-mode {
  background: #fff !important;
  background-color: #fff !important;
  animation: none !important;
  --bg-primary: #fff;
  --bg-secondary: #fff;
  --bg-tertiary: #fff;
}
body.light-mode .acn-bottom-nav {
  background: #fff !important;
  border-top: 1px solid #e5e7eb !important;
  box-shadow: 0 -2px 10px rgba(0,0,0,.06);
}
body.light-mode .acn-bottom-nav-item { color: #555 !important; }
body.light-mode .acn-bottom-nav-item.is-active { color: #ff6b55 !important; }
body.dark-mode .acn-bottom-nav {
  background: #30343b !important;
  border-top: 1px solid rgba(255,255,255,.09) !important;
}
@media (max-width: 700px) {
  .auth-buttons.nav-actions { gap: 8px !important; }
  .header-theme-toggle { margin: 0; width: 34px; height: 34px; min-width: 34px; flex-basis: 34px; }
}

/* =========================================================
   PREMIUM COMIC DETAIL — DESKTOP LAYOUT
   Mobile styles above remain unchanged.
   ========================================================= */
@media (min-width: 768px) {
  #comic-detail-view {
    background: #0b0f15;
    color: #f5f7fb;
  }

  #comic-detail-view .detail-bar,
  #comic-detail-view .detail-tabs,
  #comic-detail-view .detail-actions {
    background: #101720;
    border-color: rgba(255,255,255,.09);
  }

  #comic-detail-view .detail-bar {
    min-height: 64px;
    padding: 10px max(32px, calc((100vw - 1000px) / 2));
    box-sizing: border-box;
  }

  #comic-detail-view .detail-title {
    text-align: left;
    font-size: 20px;
  }

  #comic-detail-view .detail-tabs {
    justify-content: center;
    padding: 0 max(32px, calc((100vw - 1000px) / 2));
  }

  #comic-detail-view .detail-tab {
    flex: 0 0 auto;
    min-width: 140px;
    padding: 16px 22px;
    font-size: 14px;
  }

  #comic-detail-view .detail-body {
    display: grid;
    grid-template-columns: minmax(260px, 350px) minmax(0, 1fr);
    align-content: start;
    align-items: start;
    column-gap: 48px;
    row-gap: 20px;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  /* Flatten the existing cover/details wrapper so the current content can
     occupy a true two-column desktop composition without changing markup. */
  #comic-detail-view .d-top {
    display: contents;
  }

  #comic-detail-view .d-cover {
    grid-column: 1;
    grid-row: 1 / span 5;
    width: 100%;
    max-width: 350px;
    margin: 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,.5);
    background: #151d28;
  }

  #comic-detail-view .d-cover .cover-svg,
  #comic-detail-view .d-cover img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  #comic-detail-view .d-meta {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    padding-top: 2px;
  }

  #comic-detail-view .d-title {
    margin: 0 0 18px;
    color: #fff;
    font-size: 42px;
    line-height: 1.12;
    font-weight: 900;
    letter-spacing: -.8px;
    overflow-wrap: anywhere;
  }

  #comic-detail-view .d-meta .d-label,
  #comic-detail-view .d-block .d-label {
    margin: 0 0 9px;
    color: #aeb9c8;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
  }

  #comic-detail-view .d-meta .d-value,
  #comic-detail-view .d-block .d-value {
    color: #e8edf5;
    font-size: 15px;
    line-height: 1.6;
  }

  /* The author and description blocks are emitted immediately after .d-top. */
  #comic-detail-view .detail-body > .d-block:nth-of-type(3) {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
  }

  #comic-detail-view .detail-body > .d-block:nth-of-type(4) {
    grid-column: 2;
    grid-row: 3;
    margin: 0;
    padding: 20px 22px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    background: #141d28;
    box-shadow: 0 10px 28px rgba(0,0,0,.16);
  }

  #comic-detail-view .detail-body > .d-block:nth-of-type(4) .d-value {
    color: #d7dfeb;
    font-size: 16px;
    line-height: 1.6;
    white-space: pre-line;
  }

  #comic-detail-view .d-chips {
    gap: 9px;
  }

  #comic-detail-view .d-chip {
    padding: 7px 13px;
    border: 1px solid rgba(255,123,0,.28);
    border-radius: 999px;
    background: rgba(255,123,0,.09);
    color: #ffc18a;
    font-size: 13px;
    font-weight: 700;
  }

  #comic-detail-view .detail-body > .d-block:nth-of-type(5) {
    grid-column: 2;
    grid-row: 4;
    margin: 0;
  }

  #comic-detail-view .detail-body > .d-block:nth-of-type(6) {
    grid-column: 2;
    grid-row: 5;
    margin: 0;
  }

  #comic-detail-view .detail-body > .d-block:nth-of-type(7) {
    grid-column: 1 / -1;
    grid-row: 6;
    margin-top: 12px;
  }

  #comic-detail-view .d-review,
  #comic-detail-view .d-chapter {
    background: #141d28;
    border-color: rgba(255,255,255,.09);
  }

  #comic-detail-view .detail-actions {
    justify-content: center;
    gap: 28px;
    padding: 12px 24px;
  }

  #comic-detail-view .continue-reading-btn {
    bottom: 28px !important;
  }

}

@media (min-width: 768px) and (max-width: 900px) {
  #comic-detail-view .detail-body {
    grid-template-columns: minmax(220px, 290px) minmax(0, 1fr);
    column-gap: 30px;
    padding: 32px;
  }

  #comic-detail-view .d-title {
    font-size: 34px;
  }
}


/* Comic detail metadata: status, age rating, genres and live stats. */
#comic-detail-view .d-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
}
#comic-detail-view .d-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .02em;
}
#comic-detail-view .d-badge-status {
  color: #bbf7d0;
  background: rgba(22,163,74,.2);
  border: 1px solid rgba(74,222,128,.38);
}
#comic-detail-view .d-badge-age {
  color: #e2e8f0;
  background: rgba(148,163,184,.14);
  border: 1px solid rgba(148,163,184,.28);
}
#comic-detail-view .d-author-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 17px;
}
#comic-detail-view .d-author-label {
  color: #94a3b8;
  font-size: 12px;
  font-weight: 700;
}
#comic-detail-view .d-author-value {
  color: #f8fafc;
  font-size: 15px;
  font-weight: 700;
}
#comic-detail-view .d-genre-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
#comic-detail-view .d-genre-tags .d-chip {
  border-radius: 999px;
}
#comic-detail-view .d-stats-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0 4px;
}
#comic-detail-view .d-stat {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 13px 12px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-secondary);
}
#comic-detail-view .d-stat-icon {
  display: inline-flex;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  color: #ff9a45;
}
#comic-detail-view .d-stat-icon svg {
  display: block;
  width: 22px;
  height: 22px;
}
#comic-detail-view .d-stat-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}
#comic-detail-view .d-stat-copy strong {
  color: var(--text-main);
  font-size: 15px;
  line-height: 1.2;
  font-weight: 900;
}
#comic-detail-view .d-stat-copy small {
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
}
@media (max-width: 480px) {
  #comic-detail-view .d-stats-row { gap: 6px; }
  #comic-detail-view .d-stat { flex-direction: column; align-items: flex-start; gap: 7px; padding: 10px 8px; }
  #comic-detail-view .d-stat-copy strong { font-size: 14px; }
}
@media (min-width: 768px) {
  #comic-detail-view .detail-body > .d-block { grid-column: 2; grid-row: auto; margin: 0; }
  #comic-detail-view .d-description-block {
    grid-column: 2 !important;
    grid-row: 2 !important;
    padding: 20px 22px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    background: #141d28;
  }
  #comic-detail-view .d-description-block .d-value {
    color: #d7dfeb;
    font-size: 16px;
    line-height: 1.6;
    white-space: pre-line;
  }
  #comic-detail-view .d-stats-row {
    grid-column: 2;
    grid-row: 3;
    margin: 0;
  }
  #comic-detail-view .detail-body > .d-block.d-rating-block {
    grid-column: 2 !important;
    grid-row: 4 !important;
  }
  #comic-detail-view .detail-body > .d-block.d-similar-block {
    grid-column: 1 / -1 !important;
    grid-row: 5 !important;
    margin-top: 12px;
  }
}


/* Comic detail preview layout corrections */
.comic-detail-view .detail-bar{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:8px 12px 0;background:var(--bg-secondary);border-bottom:1px solid var(--border-color)}
.comic-detail-view .detail-bar-icons{display:flex;align-items:center;justify-content:space-between;min-height:44px}
.comic-detail-view .detail-tabs{display:flex;width:100%;margin:0;padding:0;border:0;background:transparent}
.comic-detail-view .detail-tab{min-width:0;padding:11px 4px 12px;font-size:13px}
.comic-detail-view .detail-body{width:100%;min-width:0;box-sizing:border-box;padding:14px 12px 150px}
.comic-detail-view .chapter-list,.comic-detail-view .chapter-card-wrap,.comic-detail-view .chapter-card{width:100%;min-width:0;max-width:100%;margin-left:0;margin-right:0;box-sizing:border-box}
.comic-detail-view .chapter-card-wrap{display:block}
.comic-detail-view .chapter-card{gap:13px;padding:12px}
.comic-detail-view .chapter-card-thumb{flex:0 0 96px;width:96px;height:124px}
.comic-detail-view .chapter-card-action.is-locked{width:auto;min-width:0;height:auto;min-height:38px;gap:6px;padding:8px 11px;border:0;border-radius:10px;color:#332500;background:#ff7a33;font-size:11.52px;line-height:1.15;white-space:nowrap}
.comic-detail-view .chapter-card:hover .chapter-card-action.is-locked,.comic-detail-view .chapter-card:focus-visible .chapter-card-action.is-locked{color:#ffffff;background:linear-gradient(135deg,#FF3B00 0%,#FF5E00 100%)}
.comic-detail-view .chapter-card.is-locked:hover{border-color:#ff5e00}


/* Premium comic-store homepage feed */
body.home-neon #home-view #home-comics-feed.comics-grid-feed {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: 18px;
  width: 100%;
  margin: 0 0 6%;
  padding: 0;
  box-sizing: border-box;
}
body.home-neon #home-view #home-comics-feed .comic-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100%;
  aspect-ratio: auto;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  background: #151923;
  box-shadow: 0 8px 24px rgba(0,0,0,.24);
  cursor: default;
}
body.home-neon #home-view #home-comics-feed .comic-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,91,125,.65);
  box-shadow: 0 14px 30px rgba(0,0,0,.34), 0 0 18px rgba(255,51,102,.10);
}
body.home-neon #home-view #home-comics-feed .thumbnail-container {
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 0;
  background: #202431;
}
body.home-neon #home-view #home-comics-feed .thumbnail-container img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}
body.home-neon #home-view #home-comics-feed .comic-info {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  gap: 12px;
  min-width: 0;
  padding: 13px;
  background: #151923;
  text-align: left;
}
body.home-neon #home-view #home-comics-feed .comic-card-copy {
  min-width: 0;
}
body.home-neon #home-view #home-comics-feed .comic-title {
  display: -webkit-box;
  margin: 0 0 5px;
  overflow: hidden;
  color: #fff;
  font-size: clamp(13.12px, 1.5vw, 16px);
  font-weight: 800;
  line-height: 1.3;
  text-align: left;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
body.home-neon #home-view #home-comics-feed .comic-author {
  display: block;
  margin: 0;
  overflow: hidden;
  color: #9ba3b4;
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.home-neon #home-view #home-comics-feed .read-btn {
  display: block;
  width: 100%;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid rgba(255,91,125,.75);
  border-radius: 9px;
  background: linear-gradient(110deg, rgba(255,91,125,.13), rgba(255,123,0,.12));
  color: #ff7896;
  font-size: 12.8px;
  font-weight: 800;
  letter-spacing: .02em;
}
body.home-neon #home-view #home-comics-feed .read-btn:hover {
  border-color: transparent;
  background: linear-gradient(110deg, #ff5b7d, #ff7b00);
  color: #fff;
  box-shadow: 0 5px 16px rgba(255,91,125,.2);
}
body.home-neon #home-view .new-comics-header h3 {
  color: #fff;
  font-weight: 850;
  letter-spacing: -.02em;
}
body.home-neon #home-view .see-all-arrow {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(255,91,125,.35);
  border-radius: 9px;
  background: rgba(255,91,125,.08);
  box-shadow: none;
  color: #ff7896;
  font-size: 12.16px;
}
@media (max-width: 600px) {
  body.home-neon #home-view #home-comics-feed.comics-grid-feed {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  body.home-neon #home-view #home-comics-feed .comic-info { padding: 10px; gap: 10px; }
  body.home-neon #home-view #home-comics-feed .comic-title { font-size: 13.44px; }
  body.home-neon #home-view #home-comics-feed .comic-author { font-size: 11.2px; }
  body.home-neon #home-view #home-comics-feed .read-btn { min-height: 35px; }
}
@media (min-width: 900px) {
  body.home-neon #home-view #home-comics-feed.comics-grid-feed {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }
}


/* =========================================================
   PREVIEW FIXES — GLOBAL BOTTOM NAV + DESKTOP DETAIL CONTENT
   ========================================================= */

/* The navigation is shared by the homepage and the comic-detail overlay.
   Keep it above the overlay on every viewport, including desktop. */
.acn-bottom-nav {
  position: fixed !important;
  inset: auto 0 0 !important;
  transform: none !important;
  will-change: auto !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: 10001 !important;
  display: grid !important;
}
body {
  padding-bottom: 72px !important;
}
#comic-detail-view.open {
  z-index: 900;
}

/* The homepage search and category row now sit together without the
   removed content-type switch leaving an oversized gap. */
body.home-neon #home-view .search-wrapper {
  width: 100%;
  max-width: 720px;
  margin: 8px auto 18px;
  box-sizing: border-box;
}
body.home-neon #home-view .home-category-pills {
  width: 100%;
  max-width: 900px;
  margin: 0 auto 30px;
  justify-content: center;
}

/* Detail tabs stay evenly distributed and centered. */
@media (min-width: 768px) {
  #comic-detail-view .detail-tabs {
    width: min(800px, 100%);
    margin: 0 auto;
    justify-content: center;
    gap: 12px;
  }
  #comic-detail-view .detail-tab {
    flex: 1 1 0;
    min-width: 0;
    max-width: 240px;
    text-align: center;
  }

  /* Chapters and comments are single-column reading surfaces, not part
     of the description page's cover/details two-column grid. */
  #comic-detail-view .detail-body:has(.chapter-list) {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 36px 32px 112px;
  }
  #comic-detail-view .detail-body:has(.chapter-list) .chapter-list-toolbar,
  #comic-detail-view .detail-body:has(.chapter-list) .chapter-list {
    width: 100%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }
  #comic-detail-view .detail-body:has(.chapter-list) .chapter-card-wrap,
  #comic-detail-view .detail-body:has(.chapter-list) .chapter-card {
    width: 100%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }
  #comic-detail-view .detail-body:has(.chapter-list) .chapter-card {
    gap: 20px;
    padding: 18px 22px;
  }

  #comic-detail-view .detail-body:has(.d-comment-wrap) {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 36px 32px 112px;
  }
  #comic-detail-view .detail-body:has(.d-comment-wrap) .d-comment-summary,
  #comic-detail-view .detail-body:has(.d-comment-wrap) .d-comment-wrap,
  #comic-detail-view .detail-body:has(.d-comment-wrap) .d-review,
  #comic-detail-view .detail-body:has(.d-comment-wrap) > .d-value {
    width: 100%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }
  #comic-detail-view .detail-body:has(.d-comment-wrap) .d-comment-form {
    width: 100%;
    align-items: stretch;
  }
  #comic-detail-view .detail-body:has(.d-comment-wrap) .d-comment-form input {
    min-height: 50px;
    box-sizing: border-box;
  }
  #comic-detail-view .detail-body:has(.d-comment-wrap) .d-comment-form button {
    min-width: 112px;
    min-height: 50px;
    padding: 0 26px;
    align-self: stretch;
    font-size: 15px;
  }

  /* Keep the bottom navigation visible on desktop as well. */
  .acn-bottom-nav {
    display: grid !important;
    z-index: 10001 !important;
  }
  body {
    padding-bottom: 72px !important;
  }
}


/* ACN navigation belongs to the homepage only. Hide it while comic detail
   controls or the full chapter reader are occupying the screen. */
body.acn-comic-detail-open .acn-bottom-nav,
body.acn-reader-open .acn-bottom-nav,
body.full-reader-open .acn-bottom-nav {
  display: none !important;
}

/* Review composer and review list: clear separation and consistent alignment. */
#comic-detail-view .d-comment-wrap {
  width: 100%;
  box-sizing: border-box;
}
#comic-detail-view .d-comment-hint {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}
#comic-detail-view .d-comment-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 800px;
  margin: 16px auto 0;
  box-sizing: border-box;
}
#comic-detail-view .d-review {
  width: 100%;
  margin: 0;
  padding: 15px 17px;
  box-sizing: border-box;
}
#comic-detail-view .d-review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
#comic-detail-view .d-review-head .d-stars {
  flex: 0 0 auto;
}
#comic-detail-view .d-review-text {
  margin: 9px 0 0;
  color: var(--text-main);
  font-size: 14px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
#comic-detail-view .d-review-text.d-rating-only {
  color: var(--text-muted);
  font-size: 12px;
  font-style: italic;
}
#comic-detail-view .d-comment-empty {
  width: 100%;
  max-width: 800px;
  margin: 16px auto 0;
  box-sizing: border-box;
}

/* Keep wallet and payment accents in the ACN red-orange palette. */
:root {
  --acn-brand-orange: #f04424;
  --acn-brand-red-orange: #ff5a24;
}

.signup-country-group select {
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  border: 1px solid var(--border-color, #344054);
  border-radius: 10px;
  background: var(--bg-secondary, #151d28);
  color: var(--text-main, #f8fafc);
  font: inherit;
}
.signup-country-group small,
.signup-country-group .account-hint {
  display: block;
  margin-top: 7px;
  line-height: 1.45;
}


/* ACN preview: genre chips, chapter controls and detail toolbar spacing */
.home-category-pills { justify-content:center; gap:10px; flex-wrap:wrap; }
.chapter-list-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.chapter-order-toggle { display:inline-grid; place-items:center; width:40px; height:40px; border:1px solid var(--border-color); border-radius:10px; background:var(--bg-secondary); color:var(--text-main); cursor:pointer; }
.chapter-order-toggle:hover { border-color:#ff5a24; color:#ff5a24; }
.chapter-card.is-locked .chapter-card-action.is-locked { background:#ff7a33; color:#332500; border-color:#ff7a33; }
.chapter-card.is-locked .chapter-card-locked { color:#ff7a33; font-weight:800; }
.chapter-card-number, .chapter-card-kicker { display:none; }
.detail-bar-icons { gap:clamp(12px,2vw,28px); justify-content:flex-start; }
.detail-bar-icons .detail-icon-btn { flex:0 0 44px; }

/* Reader action row spacing: keep controls easy to target on desktop */
.comic-detail-view .detail-actions {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(24px,4vw,52px);
  padding:14px 24px calc(14px + env(safe-area-inset-bottom));
}
.comic-detail-view .detail-actions button {
  flex:0 0 48px;
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
}
@media (min-width:768px) {
  .comic-detail-view .detail-bar { padding:12px 28px 0; }
  .comic-detail-view .detail-bar-icons { gap:24px; min-height:52px; }
  .comic-detail-view .detail-tabs { max-width:760px; margin:0 auto; gap:24px; }
  .comic-detail-view .detail-tab { padding:14px 18px; }
}

/* Me screen: use the active site theme instead of fixed dark-only colors. */
body .acn-me-overlay {
  background: var(--bg-primary);
  color: var(--text-main);
}
body .acn-me-header h1,
body .acn-me-identity strong {
  color: var(--text-main);
}
body .acn-me-identity span {
  color: var(--text-muted);
}
body .acn-me-close {
  color: var(--text-main);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
}
body .acn-me-shortcut,
body .acn-me-links {
  background: var(--bg-secondary);
  border-color: var(--border-color);
}
body .acn-me-shortcut {
  color: var(--text-main);
}
body .acn-me-link {
  color: var(--text-main);
  border-bottom-color: var(--border-color);
}
body .acn-me-link > svg:first-child {
  stroke: var(--text-muted);
}
body .acn-me-link .acn-me-link-arrow {
  stroke: var(--text-muted);
}


/* Homepage genre carousel: swipe on touch screens, arrow controls on wider screens. */
body.home-neon #home-view .home-genre-carousel {
  display:grid;
  grid-template-columns:40px minmax(0,1fr) 40px;
  align-items:center;
  gap:7.2px;
  width:100%;
  margin:0 0 7%;
}
body.home-neon #home-view .home-category-pills {
  display:flex;
  flex-wrap:nowrap;
  justify-content:flex-start;
  gap:10.4px;
  width:100%;
  min-width:0;
  margin:0;
  padding:4px 1.6px 10.4px;
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-x:contain;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x;
}
body.home-neon #home-view .home-category-pills::-webkit-scrollbar { display:none; }
body.home-neon #home-view .home-category-pills .pill-item { flex:0 0 auto; white-space:nowrap; }
body.home-neon #home-view .genre-scroll-arrow {
  display:flex;
  align-items:center;
  justify-content:center;
  width:37.6px;
  height:37.6px;
  padding:0;
  border:1px solid var(--border-color);
  border-radius:50%;
  background:var(--bg-secondary);
  color:var(--text-main);
  font-size:26.4px;
  line-height:1;
  font-weight:700;
  cursor:pointer;
}
body.home-neon #home-view .genre-scroll-arrow:focus-visible,
body.home-neon #home-view .home-category-pills .pill-item:focus-visible {
  outline:2px solid #00cfff;
  outline-offset:3px;
}
@media (max-width:600px) {
  body.home-neon #home-view .home-genre-carousel { grid-template-columns:minmax(0,1fr); }
  body.home-neon #home-view .genre-scroll-arrow { display:none; }
  body.home-neon #home-view .home-category-pills { padding-left:0; padding-right:0; }
}


/* Reader layout: reserve clear space for the toolbar so it never crops a page. */
#manga-reader .manga-reader-viewport {
  position: absolute;
  top: 58px;
  bottom: 64px;
  left: 0;
  right: 0;
  height: auto;
}
#manga-reader .manga-reader-pages.reader-horizontal {
  height: 100%;
  min-height: 100%;
}
#manga-reader .manga-reader-pages.reader-horizontal .manga-reader-page {
  height: 100%;
}
#manga-reader .manga-reader-pages.reader-horizontal .manga-reader-page img {
  height: 100%;
  max-height: 100%;
}
#manga-reader .manga-reader-pages.reader-horizontal .manga-reader-end-card {
  box-sizing: border-box;
  display: flex;
  flex: none;
  width: 100%;
  min-height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 28px;
  background: #101010;
  color: #fff;
  text-align: center;
}
#manga-reader .manga-reader-end-card {
  box-sizing: border-box;
  display: flex;
  flex: 0 0 100vw;
  width: 100vw;
  min-height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 28px;
  background: #101010;
  color: #fff;
  text-align: center;
  scroll-snap-align: start;
}
#manga-reader .manga-reader-end-card[hidden] { display: none !important; }
#manga-reader .manga-reader-end-card p { margin: 0; color: #aaa; }
#manga-reader .manga-reader-end-card h2 { margin: 0; color: #fff; }
#manga-reader .manga-reader-next-chapter-btn {
  min-height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: 12px;
  background: #ff6740;
  color: #fff;
  font-weight: 800;
}
#manga-reader #reader-flag-btn.is-flagged { color: #ff3434; }




/* Light theme: keep comic detail content readable while preserving accent titles. */
body.light-mode #comic-detail-view {
  background: #f8fafc !important;
  color: #1f2937 !important;
}
body.light-mode #comic-detail-view :is(p, span, strong, small, label, li, .d-label, .d-value, .d-author-label, .d-author-value, .d-stat-copy, .d-stat-copy strong, .d-stat-copy small) {
  color: #1f2937 !important;
  -webkit-text-fill-color: #1f2937;
}
body.light-mode #comic-detail-view .detail-title,
body.light-mode #comic-detail-view .d-title {
  color: #e11d48 !important;
  -webkit-text-fill-color: #e11d48 !important;
}
body.light-mode #comic-detail-view .d-badge-status {
  color: #166534 !important;
  -webkit-text-fill-color: #166534 !important;
  background: #dcfce7 !important;
  border-color: #86efac !important;
}
body.light-mode #comic-detail-view .d-badge-age {
  color: #1f2937 !important;
  -webkit-text-fill-color: #1f2937 !important;
  background: #e5e7eb !important;
  border-color: #cbd5e1 !important;
}
body.light-mode #comic-detail-view .d-author-label,
body.light-mode #comic-detail-view .d-author-value {
  color: #1f2937 !important;
  -webkit-text-fill-color: #1f2937 !important;
}
body.light-mode #comic-detail-view .detail-bar,
body.light-mode #comic-detail-view .detail-tabs,
body.light-mode #comic-detail-view .detail-actions,
body.light-mode #comic-detail-view .d-review,
body.light-mode #comic-detail-view .d-chapter,
body.light-mode #comic-detail-view .d-description-block {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, .06);
}
body.light-mode #comic-detail-view .detail-tab {
  color: #374151 !important;
}
body.light-mode #comic-detail-view .detail-tab.active,
body.light-mode #comic-detail-view .detail-tab[aria-selected="true"] {
  color: #e11d48 !important;
}
body.light-mode #comic-detail-view .d-description-block .d-value,
body.light-mode #comic-detail-view .d-meta .d-value,
body.light-mode #comic-detail-view .d-block .d-value {
  color: #1f2937 !important;
}
body.light-mode #comic-detail-view .continue-reading-btn,
body.light-mode #comic-detail-view .detail-actions .is-primary,
body.light-mode #comic-detail-view .detail-actions .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Light-mode comic cards: remove dark card surfaces and prevent title text clipping/overpaint. */
body.light-mode #home-view #home-comics-feed .comic-card,
body.light-mode.home-neon #home-view #home-comics-feed .comic-card {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .06) !important;
}
body.light-mode #home-view #home-comics-feed .comic-info,
body.light-mode.home-neon #home-view #home-comics-feed .comic-info {
  background: #ffffff !important;
}
body.light-mode #home-view #home-comics-feed .comic-title,
body.light-mode.home-neon #home-view #home-comics-feed .comic-title {
  color: #1f2937 !important;
  -webkit-text-fill-color: #1f2937 !important;
  background: transparent !important;
  text-shadow: none !important;
  text-decoration: none !important;
  border: 0 !important;
  box-shadow: none !important;
  line-height: 1.35;
}
body.light-mode #home-view #home-comics-feed .comic-author,
body.light-mode.home-neon #home-view #home-comics-feed .comic-author {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
}

/* A direct #settings entry opens the settings surface before the home feed paints. */
html.settings-route-pending #home-view,
html.settings-route-pending .hero-container {
  visibility: hidden !important;
}
html.settings-route-pending #app-settings-overlay {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}


/* Light theme: comic detail text, status badges, cards and separators. */
body.light-mode #comic-detail-view,
body.light-mode #comic-detail-view .detail-body {
  color: #252525 !important;
  background-color: #ffffff !important;
}
body.light-mode #comic-detail-view .detail-body :not(svg):not(path):not(button):not(.d-title):not(.d-title-main):not(.d-badge-status):not(.d-badge-age) {
  color: #252525 !important;
  -webkit-text-fill-color: currentColor;
}
body.light-mode #comic-detail-view .d-badge-status *,
body.light-mode #comic-detail-view .d-badge-age * {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}
body.light-mode #comic-detail-view .d-title,
body.light-mode #comic-detail-view .detail-body .d-title,
body.light-mode #comic-detail-view .d-title-main {
  color: #e11d48 !important;
  -webkit-text-fill-color: #e11d48 !important;
  background: transparent !important;
  background-image: none !important;
  text-decoration: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.light-mode #comic-detail-view .d-badge-status,
body.light-mode #comic-detail-view .d-badge-status * {
  color: #166534 !important;
  -webkit-text-fill-color: #166534 !important;
  background-color: #dcfce7 !important;
  border-color: #bbf7d0 !important;
}
body.light-mode #comic-detail-view .d-badge-age,
body.light-mode #comic-detail-view .d-badge-age * {
  color: #252525 !important;
  -webkit-text-fill-color: #252525 !important;
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
}
body.light-mode #comic-detail-view .d-author-label,
body.light-mode #comic-detail-view .d-author-value {
  color: #252525 !important;
  -webkit-text-fill-color: #252525 !important;
}
body.light-mode #comic-detail-view .detail-body,
body.light-mode #comic-detail-view .detail-body :where(.d-stat, .d-review, .d-chapter, .d-block, .d-comment-wrap, .d-comment-form, .d-rating-picker) {
  border-color: #e5e7eb !important;
}
body.light-mode #comic-detail-view .detail-body :where(.d-stat, .d-review, .d-chapter, .d-description-block, .d-rating-block) {
  background-color: #ffffff !important;
  box-shadow: none !important;
}
body.light-mode #comic-detail-view .d-chip,
body.light-mode #comic-detail-view .d-genre-tags .d-chip {
  color: #333333 !important;
  -webkit-text-fill-color: #333333 !important;
  background: #f8fafc !important;
  border: 1px solid #e5e7eb !important;
}
body.light-mode #comic-detail-view .d-title::before,
body.light-mode #comic-detail-view .d-title::after,
body.light-mode .comic-card-title::before,
body.light-mode .comic-card-title::after {
  display: none !important;
  content: none !important;
}
body.light-mode .comic-card-title,
body.light-mode .comic-card .comic-title {
  color: #252525 !important;
  -webkit-text-fill-color: #252525 !important;
  background: #ffffff !important;
  text-decoration: none !important;
  border: 0 !important;
  box-shadow: none !important;
}


/* Delete-account confirmation challenge */
.delete-account-code-instructions {
  margin: 12px 0 7px;
  color: var(--settings-text-secondary, #9ca3af);
  font-size: 14px;
  line-height: 1.45;
}
.delete-account-challenge {
  display: block;
  width: fit-content;
  min-width: 150px;
  margin: 0 0 12px;
  padding: 12px 18px;
  border: 1px dashed #f97316;
  border-radius: 10px;
  background: #fff7ed;
  color: #9a3412;
  font: 900 21.6px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .28em;
  text-align: center;
  user-select: all;
}
body:not(.light-mode) .delete-account-challenge {
  background: #2a1b12;
  color: #fed7aa;
}

/* ACN authoritative Light Mode overrides: comic detail and comic-card titles. */
body.light-mode #comic-detail-view,
body.light-mode #comic-detail-view .detail-body,
body.light-mode #comic-detail-view .d-top,
body.light-mode #comic-detail-view .d-meta,
body.light-mode #comic-detail-view .d-block,
body.light-mode #comic-detail-view .d-description-block,
body.light-mode #comic-detail-view .d-rating-block {
  color: #252525 !important;
  background-color: #fff !important;
}
body.light-mode #comic-detail-view :where(*):not(button):not(.detail-title):not(.d-title):not(.d-title-main):not(.detail-tab.active):not(.detail-tab[aria-selected="true"]) {
  color: #252525 !important;
  -webkit-text-fill-color: #252525 !important;
}
body.light-mode #comic-detail-view :where(.detail-title, .d-title, .d-title-main, h1.comic-title, h2.comic-title) {
  color: #e11d48 !important;
  -webkit-text-fill-color: #e11d48 !important;
  background: transparent !important;
  background-image: none !important;
  text-decoration: none !important;
  text-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
body.light-mode #comic-detail-view .d-badge-status,
body.light-mode #comic-detail-view .d-badge-status * {
  color: #166534 !important;
  -webkit-text-fill-color: #166534 !important;
  background: #dcfce7 !important;
  border-color: #bbf7d0 !important;
}
body.light-mode #comic-detail-view .d-badge-age,
body.light-mode #comic-detail-view .d-badge-age * {
  color: #252525 !important;
  -webkit-text-fill-color: #252525 !important;
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
}
body.light-mode #comic-detail-view .d-author-line,
body.light-mode #comic-detail-view .d-author-label,
body.light-mode #comic-detail-view .d-author-value {
  color: #252525 !important;
  -webkit-text-fill-color: #252525 !important;
}
body.light-mode #comic-detail-view :where(.detail-bar, .detail-tabs, .detail-actions, .d-stat, .d-review, .d-chapter, .d-description-block, .d-rating-block, .d-block, .d-comment-wrap, .d-comment-form, .d-rating-picker) {
  background-color: #fff !important;
  border-color: #e5e7eb !important;
  box-shadow: none !important;
}
body.light-mode #comic-detail-view :where(.detail-tab, .detail-tab:not(.active)) {
  color: #252525 !important;
  -webkit-text-fill-color: #252525 !important;
}
body.light-mode #comic-detail-view :where(.detail-tab.active, .detail-tab[aria-selected="true"]) {
  color: #e11d48 !important;
  -webkit-text-fill-color: #e11d48 !important;
}
body.light-mode #comic-detail-view :where(.continue-reading-btn, .detail-actions .is-primary, .detail-actions .btn-primary) {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
body.light-mode #home-view :where(.comic-card, .comic-info) {
  background-color: #fff !important;
  border-color: #e5e7eb !important;
}
body.light-mode #home-view :where(.comic-title, .comic-card-title, .comic-card .comic-title) {
  color: #252525 !important;
  -webkit-text-fill-color: #252525 !important;
  background: transparent !important;
  background-image: none !important;
  text-decoration: none !important;
  text-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  line-height: 1.35 !important;
}
body.light-mode #home-view :where(.comic-title, .comic-card-title)::before,
body.light-mode #home-view :where(.comic-title, .comic-card-title)::after {
  content: none !important;
  display: none !important;
}

/* Settings route: no homepage flash while the shared settings surface opens. */
html.settings-route-pending #home-view,
html.settings-route-pending #creator-dashboard,
html.settings-route-pending .hero-container {
  visibility: hidden !important;
}
html.settings-route-pending #app-settings-overlay {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Final light-mode contrast pass: every comic-detail text node is charcoal,
   with only the comic title and selected tab retaining the pink accent. */
body.light-mode #comic-detail-view :is(h1, h2, h3, h4, p, span, strong, small, label, li, a, button, div) {
  color: #1f2937 !important;
  -webkit-text-fill-color: #1f2937 !important;
}
body.light-mode #comic-detail-view .detail-title,
body.light-mode #comic-detail-view .d-title {
  color: #e11d48 !important;
  -webkit-text-fill-color: #e11d48 !important;
}
body.light-mode #comic-detail-view .d-badge-status {
  color: #166534 !important;
  -webkit-text-fill-color: #166534 !important;
  background: #dcfce7 !important;
  border-color: #86efac !important;
}
body.light-mode #comic-detail-view .d-badge-age {
  color: #1f2937 !important;
  -webkit-text-fill-color: #1f2937 !important;
  background: #e5e7eb !important;
  border-color: #cbd5e1 !important;
}
body.light-mode #comic-detail-view .detail-tab.active,
body.light-mode #comic-detail-view .detail-tab[aria-selected="true"] {
  color: #e11d48 !important;
  -webkit-text-fill-color: #e11d48 !important;
}
body.light-mode #comic-detail-view :is(.detail-bar, .detail-tabs, .detail-actions, .d-review, .d-chapter, .d-description-block, .d-stat) {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 3px 12px rgba(15, 23, 42, .045);
}
body.light-mode #comic-detail-view :is(.d-block, .d-review, .d-chapter, .d-stat, .d-description-block) {
  border-color: #e5e7eb !important;
}
body.light-mode #home-view #home-comics-feed .comic-title,
body.light-mode.home-neon #home-view #home-comics-feed .comic-title {
  display: block !important;
  overflow: visible !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: initial !important;
  max-height: none !important;
  border: 0 !important;
  background-image: none !important;
}


/* Language selection is temporarily unavailable while comic-content translations are reviewed. */
.lang-switcher {
  display: none !important;
}


/* ===== Header order: language/profile, then coin pill, then theme switch at the far right ===== */
.main-nav .auth-buttons.nav-actions > .btn-secondary { order: 1 !important; }
.main-nav .auth-buttons.nav-actions > .btn-primary { order: 2 !important; }
.main-nav .auth-buttons.nav-actions > .coin-badge { order: 4 !important; margin: 0 -3px 0 0 !important; }
.main-nav .auth-buttons.nav-actions > .header-theme-toggle { order: 5 !important; margin: 0 !important; }

/* ==========================================================
   ACN Professional Comic Card Layout (GlobalComix Style)
   Overriding & Refining Homepage Feed Cards
   ========================================================== */

body.home-neon #home-view #home-comics-feed .comic-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #151923;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

body.home-neon #home-view #home-comics-feed .comic-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 91, 125, 0.6);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

body.home-neon #home-view #home-comics-feed .thumbnail-container {
  width: 100%;
  aspect-ratio: 3 / 4;
  background-color: #1a1f2c;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body.home-neon #home-view #home-comics-feed .thumbnail-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body.home-neon #home-view #home-comics-feed .comic-info {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px 14px;
  gap: 10px;
  background: #151923;
  text-align: left;
}

body.home-neon #home-view #home-comics-feed .comic-card-copy {
  min-width: 0;
}

body.home-neon #home-view #home-comics-feed .comic-title {
  margin: 0 0 3px;
  color: #ffffff;
  font-size: 14.4px;
  font-weight: 700;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.home-neon #home-view #home-comics-feed .comic-author {
  margin: 0;
  color: #9ba3b4;
  font-size: 12px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.home-neon #home-view #home-comics-feed .read-btn {
  display: block;
  width: 100%;
  padding: 8px 12px;
  margin-top: 2px;
  border: 1px solid rgba(255, 91, 125, 0.65);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255, 91, 125, 0.15), rgba(255, 123, 0, 0.15));
  color: #ff7896;
  font-size: 12.8px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

body.home-neon #home-view #home-comics-feed .read-btn:hover {
  background: linear-gradient(135deg, #ff5b7d, #ff7b00);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(255, 91, 125, 0.35);
}

/* Light Mode Preservation Overrides */
body.light-mode #home-view #home-comics-feed .comic-card,
body.light-mode.home-neon #home-view #home-comics-feed .comic-card {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .06) !important;
}

body.light-mode #home-view #home-comics-feed .comic-info,
body.light-mode.home-neon #home-view #home-comics-feed .comic-info {
  background: #ffffff !important;
}

body.light-mode #home-view #home-comics-feed .comic-title,
body.light-mode.home-neon #home-view #home-comics-feed .comic-title {
  color: #1f2937 !important;
  -webkit-text-fill-color: #1f2937 !important;
}

body.light-mode #home-view #home-comics-feed .comic-author,
body.light-mode.home-neon #home-view #home-comics-feed .comic-author {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
}

/* Keep compact card spacing on small screens. */
@media (max-width: 600px) {
  body.home-neon #home-view #home-comics-feed .comic-info {
    padding: 10px;
    gap: 10px;
  }

  body.home-neon #home-view #home-comics-feed .comic-title {
    font-size: 13.44px;
  }

  body.home-neon #home-view #home-comics-feed .read-btn {
    min-height: 35px;
  }
}



/* Delete-account confirmation: keep the full form scrollable above fixed navigation. */
.delete-account-modal {
  overflow-y: auto;
  overscroll-behavior: contain;
  align-items: flex-start;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 0 calc(24px + env(safe-area-inset-bottom));
  box-sizing: border-box;
}
.delete-account-backdrop {
  position: fixed;
  inset: 0;
}
.delete-account-sheet {
  width: min(420px, calc(100% - 32px));
  max-width: 420px;
  max-height: calc(100vh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  max-height: calc(100dvh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  margin: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}


/* Consistent bright-red active states for favorite, notification and report icons. */
.acn-me-shortcut .acn-me-filled-icon,
.acn-me-shortcut .acn-me-action-icon {
  fill: #ff0000;
  stroke: #ff0000;
}
.detail-fav.is-fav,
#manga-reader .manga-reader-icon.is-fav {
  color: #ff0000;
}
.detail-fav.is-fav svg,
#manga-reader .manga-reader-icon.is-fav svg {
  fill: #ff0000;
  stroke: #ff0000;
}
#manga-reader #reader-flag-btn.is-flagged { color: #ff0000; }
#manga-reader #reader-flag-btn.is-flagged svg {
  fill: #ff0000;
  stroke: #ff0000;
}


/* Bright icon states: favorites stay pure red; notifications use luminous yellow. */
.acn-me-shortcut .acn-me-filled-icon,
.acn-me-shortcut .acn-me-action-icon,
.detail-fav.is-fav,
.detail-fav.is-fav svg,
#manga-reader .manga-reader-icon.is-fav,
#manga-reader .manga-reader-icon.is-fav svg {
  color: #ff0000 !important;
  fill: #ff0000 !important;
  stroke: #ff0000 !important;
}
.notification-bell-btn:hover,
.notification-bell-btn:active,
.notification-bell-btn.has-unread,
.notification-bell-wrap:has(.notification-dropdown.open) .notification-bell-btn {
  color: #ff5e00 !important;
  border-color: #ff5e00 !important;
  box-shadow: 0 0 7px rgba(255, 204, 0, .72), 0 0 16px rgba(255, 204, 0, .42) !important;
}
.notification-bell-btn:hover svg,
.notification-bell-btn:active svg,
.notification-bell-btn.has-unread svg,
.notification-bell-wrap:has(.notification-dropdown.open) .notification-bell-btn svg {
  fill: #ff5e00 !important;
  stroke: #ff5e00 !important;
  filter: drop-shadow(0 0 8px rgba(255, 204, 0, .8));
}
.notification-dot {
  background: #ff5e00 !important;
  color: #171717 !important;
  box-shadow: 0 0 0 2px var(--bg-secondary), 0 0 9px rgba(255, 204, 0, .9) !important;
}



/* Keep the notification bell visibly yellow even before unread/hover states. */
.notification-bell-btn {
  color: #ff5e00 !important;
  border-color: rgba(255, 204, 0, .8) !important;
  box-shadow: 0 0 7px rgba(255, 204, 0, .55), 0 0 13px rgba(255, 204, 0, .28) !important;
}
.notification-bell-btn svg {
  stroke: #ff5e00 !important;
  filter: drop-shadow(0 0 6px rgba(255, 204, 0, .72));
}

/* Compact, centered report-reason dialog. */
#report-reason-modal.modal-overlay{align-items:center;justify-content:center;padding:18px 12px calc(18px + env(safe-area-inset-bottom));box-sizing:border-box}
#report-reason-modal .report-reason-panel{position:relative;width:min(440px,calc(100vw - 28px));max-width:440px;max-height:min(82vh,680px);max-height:min(82dvh,680px);margin:auto;padding:20px;display:flex;flex-direction:column;gap:14px;overflow:hidden;box-sizing:border-box;border-radius:18px}
.report-reason-header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex:0 0 auto}
.report-reason-header h2{margin:0;font-size:17.92px;line-height:1.3}
.report-reason-header p{margin:5px 0 0;color:var(--text-muted);font-size:13.12px}
.report-reason-close{flex:0 0 36px;width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--border-color);border-radius:50%;background:var(--bg-tertiary);color:var(--text-main);font-size:24px;line-height:1;cursor:pointer}
.report-reason-options{display:grid;grid-template-columns:1fr;gap:8px;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:2px 4px 2px 0}
.report-reason-options button{width:100%;min-height:42px;padding:10px 12px;border:1px solid var(--border-color);border-radius:10px;background:var(--bg-tertiary);color:var(--text-main);text-align:left;font:inherit;font-size:14.08px;cursor:pointer}
.report-reason-options button.selected,.report-reason-options button[aria-pressed="true"]{border-color:#ff3366;background:rgba(255,51,102,.12);box-shadow:inset 0 0 0 1px #ff3366}
.report-reason-options button:disabled{opacity:.65;cursor:default}
#report-reason-confirmation{margin:0;color:var(--text-main);font-size:13.44px;line-height:1.45}
.report-reason-actions{flex:0 0 auto;display:flex;justify-content:flex-end}
.report-reason-send{min-width:112px;min-height:42px;padding:10px 20px;border:0;border-radius:11px;background:linear-gradient(135deg,#ff3366,#ff2a7a);color:#fff;font-weight:800;cursor:pointer}
.report-reason-send:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:480px){#report-reason-modal .report-reason-panel{padding:16px;max-height:calc(84dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom))}.report-reason-options button{min-height:40px;padding:9px 11px}}

/* The sign-in dialog is reachable from the Settings surface (the avatar and
   display-name pencils), so it has to sit above that panel (z-index 9999). */
#join-modal { z-index: 10040; }

/* Display name editor dialog (Me screen + Settings pencil). */
#display-name-modal.modal-overlay{align-items:center;justify-content:center;padding:18px 12px calc(18px + env(safe-area-inset-bottom));box-sizing:border-box;z-index:10050}
#display-name-modal .display-name-panel{width:min(440px,calc(100vw - 28px));max-width:440px;margin:auto;padding:20px;display:flex;flex-direction:column;gap:12px;box-sizing:border-box;border-radius:18px}
#display-name-modal .display-name-panel h2{margin:0;font-size:17.92px;line-height:1.3}
#display-name-modal .section-subtitle{margin:0;color:var(--text-muted);font-size:13.12px;line-height:1.45}
.display-name-label{display:block;font-size:12px;font-weight:700;color:var(--text-muted);margin-bottom:-4px}
.display-name-input{width:100%;box-sizing:border-box;margin:0;padding:12px;border:1px solid var(--border-color,#333);border-radius:10px;background:var(--bg-tertiary,#171923);color:var(--text-main,#fff);font:inherit;font-size:15px}
.display-name-input:focus-visible{outline:2px solid #ff3366;outline-offset:2px}
.display-name-input.display-name-input-invalid{border-color:#ff3366;box-shadow:inset 0 0 0 1px #ff3366}
.display-name-hint{margin:0;font-size:12px;color:var(--text-muted);line-height:1.4}
.display-name-status{margin:0;min-height:18px;font-size:12px;line-height:1.4;color:#ff8c9f}
.display-name-actions{display:flex;justify-content:flex-end;gap:10px}
.display-name-actions .btn-secondary,.display-name-actions .auth-provider-btn{min-height:42px;padding:10px 20px;border-radius:11px;font-weight:700;cursor:pointer}
.display-name-actions .auth-provider-btn{border:0;background:linear-gradient(135deg,#ff3366,#ff2a7a);color:#fff}
.display-name-actions .auth-provider-btn:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:480px){#display-name-modal .display-name-panel{padding:16px}.display-name-actions{flex-direction:column-reverse}.display-name-actions .btn-secondary,.display-name-actions .auth-provider-btn{width:100%}}
/* Final icon palette: pink favorites, fire notification bell, red report flags. */
.acn-me-shortcut .acn-me-filled-icon,.acn-me-shortcut .acn-me-action-icon,.detail-fav.is-fav,.detail-fav.is-fav svg,#manga-reader .manga-reader-icon.is-fav,#manga-reader .manga-reader-icon.is-fav svg{color:#ff3366!important;fill:#ff3366!important;stroke:#ff3366!important}
.notification-bell-btn,.notification-bell-btn:hover,.notification-bell-btn:active,.notification-bell-btn.has-unread,.notification-bell-wrap:has(.notification-dropdown.open) .notification-bell-btn{color:#ff5e00!important;border-color:#ff5e00!important;box-shadow:0 0 7px rgba(255,94,0,.62),0 0 15px rgba(255,94,0,.36)!important}
.notification-bell-btn svg{stroke:#ff5e00!important;filter:drop-shadow(0 0 7px rgba(255,94,0,.78))}
.notification-bell-btn:hover svg,.notification-bell-btn:active svg,.notification-bell-btn.has-unread svg,.notification-bell-wrap:has(.notification-dropdown.open) .notification-bell-btn svg{fill:#ff5e00!important;stroke:#ff5e00!important}
.notification-dot{background:#ff5e00!important;color:#171717!important;box-shadow:0 0 0 2px var(--bg-secondary),0 0 9px rgba(255,94,0,.9)!important}
.detail-flag.is-flagged,#manga-reader #reader-flag-btn.is-flagged{color:#ff0000!important}
.detail-flag.is-flagged svg,#manga-reader #reader-flag-btn.is-flagged svg{fill:#ff0000!important;stroke:#ff0000!important}




/* The sign-in / sign-up modal is z-index 2000 — below the bottom nav
   (10001 !important) and the cookie banner (10002). While it is open,
   hide both so they cannot sit on top of the modal and steal taps
   (e.g. tapping "Create Account" used to dismiss the cookie banner). */
body.acn-auth-open .acn-bottom-nav,
body.acn-auth-open .acn-cookie-banner {
  display: none !important;
}

/* The full-screen reader is also under the cookie banner (z-index 10002)
   for first-time visitors — hide it while reading, like the bottom nav. */
body.acn-reader-open .acn-cookie-banner {
  display: none !important;
}

/* =========================================================
   PROFILE COMPLETION + ONBOARDING GENRES (The IKEA effect)
   ========================================================= */
.acn-me-progress { margin-top: 18px; padding: 16px 16px 18px; border-radius: 16px; border: 1px solid var(--border-color, #1e293b); background: var(--bg-secondary, #0c1219); }
.acn-me-progress-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.acn-me-progress-head strong { font-size: 14px; letter-spacing: .02em; color: var(--text-main, #fff); }
.acn-me-progress-value { font-weight: 800; color: #ffb703; font-variant-numeric: tabular-nums; }
.acn-me-progress-track { margin: 10px 0 14px; height: 10px; border-radius: 999px; background: var(--bg-tertiary, #141c28); overflow: hidden; }
.acn-me-progress-fill { height: 100%; width: 20%; border-radius: inherit; background: linear-gradient(90deg, #ff3366, #ff7b00); transition: width .35s ease; }
.acn-me-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.acn-me-check { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-muted, #94a3b8); }
.acn-me-check-done { color: var(--text-main, #fff); }
.acn-me-check-icon { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; border: 1px solid var(--border-color, #1e293b); color: var(--text-muted, #94a3b8); flex: 0 0 auto; }
.acn-me-check-done .acn-me-check-icon { background: var(--brand-fire); border-color: transparent; color: #fff; }
.acn-me-check-label { flex: 1 1 auto; }
.acn-me-check-reward { font-size: 11px; color: #ffb703; font-weight: 700; }
.acn-me-progress-reward { margin-top: 12px; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #ffb703; }
/* The reward row is always shown, so [hidden] must win over display:flex. */
.acn-me-progress-reward[hidden] { display: none; }
.acn-me-progress-reward-text { display: inline; }



/* Settings opens on top of the entire page; keep it (and its body class)
   from exposing the mobile bottom nav for in-overlay scrolling paths. */
body.acn-settings-open .acn-bottom-nav,
html.settings-route-pending .acn-bottom-nav {
  display: none !important;
}


/* Me screen: creator books displayed as a two-column cover grid. */
/* Install ACN App banner (bottom of the homepage). */
.acn-install-banner { display:flex; align-items:center; gap:14px; flex-wrap:wrap; width:100%; margin:26px auto 6px; padding:15px 18px; border:1px solid var(--border-color); border-radius:18px; background:var(--bg-secondary); box-shadow:0 10px 28px rgba(0,0,0,.26); }
.acn-install-banner[hidden] { display:none; }
.acn-install-icon { display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; border-radius:13px; background:var(--brand-fire); color:#fff; }
.acn-install-icon svg { display:block; width:24px; height:24px; }
.acn-install-copy { flex:1 1 240px; min-width:0; text-align:left; }
.acn-install-copy h2 { margin:0 0 4px; color:var(--text-main); font-size:15px; font-weight:900; letter-spacing:-.2px; }
.acn-install-copy p { margin:0; color:var(--text-muted); font-size:12.5px; line-height:1.45; }
.acn-install-actions { display:flex; align-items:center; gap:9px; flex:0 0 auto; }
.acn-install-btn { border:0; border-radius:999px; padding:10px 18px; background:var(--brand-fire); color:#fff; font:inherit; font-size:13px; font-weight:800; cursor:pointer; white-space:nowrap; }
.acn-install-btn:hover { filter:brightness(1.06); }
.acn-install-dismiss { width:32px; height:32px; border:0; border-radius:50%; background:transparent; color:var(--text-muted); font:inherit; font-size:20px; line-height:1; cursor:pointer; }
.acn-install-dismiss:hover { background:rgba(148,163,184,.16); color:var(--text-main); }
@media (max-width:520px) { .acn-install-banner { gap:11px; padding:13px 14px; } .acn-install-icon { flex-basis:38px; width:38px; height:38px; } .acn-install-copy h2 { font-size:14px; } .acn-install-btn { padding:9px 15px; } }
body.light-mode .acn-install-banner { background:#fff; border-color:#e2e8f0; box-shadow:0 10px 28px rgba(15,23,42,.12); }
body.light-mode .acn-install-copy h2 { color:#172033; }
.acn-me-books-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 14px; }
.acn-me-books-heading h2 { margin:0; color:#f7f8fa; font-size:19px; font-weight:800; letter-spacing:-.25px; }
.acn-me-books-heading > span { color:#94a3b8; font-size:12px; font-weight:650; white-space:nowrap; }
.acn-me-books-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 13px; width:100%; }
.acn-me-book-card { display:flex; min-width:0; flex-direction:column; overflow:hidden; padding:0; border:1px solid #273342; border-radius:14px; background:#141e29; color:#f3f5f8; text-align:left; font:inherit; cursor:pointer; transition:transform .18s ease,border-color .18s ease; }
.acn-me-book-card:active { transform:scale(.98); }
.acn-me-book-card:focus-visible { outline:2px solid #ff8b62; outline-offset:3px; }
.acn-me-book-cover { display:block; width:100%; aspect-ratio:3/4; overflow:hidden; background:linear-gradient(145deg,#263548,#111a25); }
.acn-me-book-cover img { display:block; width:100%; height:100%; object-fit:cover; }
.acn-me-book-cover-placeholder { display:flex; width:100%; height:100%; align-items:center; justify-content:center; color:#ff9a3c; font-size:42px; font-weight:900; }
.acn-me-book-copy { display:flex; min-width:0; flex-direction:column; gap:8px; padding:12px 11px 13px; }
.acn-me-book-title { display:-webkit-box; overflow:hidden; color:#f8fafc; font-size:14px; font-weight:800; line-height:1.35; overflow-wrap:anywhere; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.acn-me-book-stats { display:flex; flex-wrap:wrap; gap:5px 10px; color:#aab6c5; font-size:11px; line-height:1.4; }
.acn-me-book-stats span { white-space:nowrap; }
.acn-me-books-state { grid-column:1/-1; margin:0; padding:18px 14px; border:1px dashed #344256; border-radius:12px; color:#aab6c5; font-size:13px; text-align:center; }
@media (max-width:360px) {
  .acn-me-books-grid { gap:12px 9px; }
  .acn-me-book-copy { padding:10px 9px 11px; }
  .acn-me-book-title { font-size:13px; }
}
body.light-mode .acn-me-books-heading h2 { color:#172033; }
body.light-mode .acn-me-books-heading > span,
body.light-mode .acn-me-book-stats { color:#64748b; }
body.light-mode .acn-me-book-card { border-color:#e2e8f0; background:#fff; color:#172033; }
body.light-mode .acn-me-book-title { color:#172033; }
body.light-mode .acn-me-books-state { border-color:#cbd5e1; color:#64748b; }

/* ACN comics-only launch (2026-11): unfinished surfaces are hidden from the UI. */
#home-novels-panel, .acn-novels-panel, .acn-library-tab { display: none !important; }
#partner-cta-item, .partner-cta-item, #writer-dashboard-btn { display: none !important; }

/* ================================================================
   ACN brand title + earn cash — static fire colors (2026-11-13)
   User-provided screenshot reference: "ACN" plain white, "CREATOR
   NETWORK" red→orange→amber left-to-right gradient, and "earn cash"
   red→orange text gradient (replaces the green). All static — no
   animation, no glow. Light mode uses darker tones of the same hues
   so they stay readable on white. Scoped to the home brand title and
   .home-earn-accent only; nothing else is restyled.
   ================================================================ */
.brand-title h1:first-child {
  background: none;
  -webkit-text-fill-color: #ffffff;
  color: #ffffff;
  text-shadow: none;
  filter: none;
}
.brand-title .accent-title.rainbow-text {
  background: linear-gradient(135deg, #FF3B00 0%, #FF5E00 100%);
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #ff6a00;
  animation: none;
  text-shadow: none;
  filter: none;
}
body.home-neon #home-view .home-earn-accent {
  background: linear-gradient(135deg, #FF3B00 0%, #FF5E00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 800;
  animation: none;
}
/* Light mode: same hues, dark enough to read on white */
body.light-mode .brand-title h1:first-child {
  background: none;
  -webkit-text-fill-color: #111111;
  color: #111111;
}
body.light-mode .brand-title .accent-title.rainbow-text {
  background-image: linear-gradient(90deg, #e03131 0%, #e8590c 50%, #ff5e00 100%);
  -webkit-text-fill-color: transparent;
  color: #e8590c;
}
body.light-mode.home-neon #home-view .home-earn-accent {
  background: linear-gradient(135deg, #FF3B00 0%, #FF5E00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 800;
}

/* ================================================================
   Withdraw button — static red→orange fire treatment (2026-11-13,
   user screenshot of Creator Earnings card). Same two hues as the
   brand gradient. Filled button, white text, valid on dark and
   light themes alike. Scoped to .wallet-manage-btn; hover only
   brightens (no color change beyond the brand pair).
   ================================================================ */
.wallet-manage-btn {
  background: linear-gradient(135deg, #FF3B00 0%, #FF5E00 100%);
  border-color: transparent;
  color: #ffffff;
  transition: transform .2s ease, filter .2s ease, border-color .2s ease, background .2s ease;
}
.wallet-manage-btn:hover {
  border-color: transparent;
  filter: brightness(1.08);
}

/* ================================================================
   Home feed: seamless comic cards (2026-11-13)
   The cover flows straight into the title + creator-name strip — one
   continuous surface, no dividing line anywhere. Same gallery language
   as the Creator Dashboard: cover on top, title and creator name
   underneath, blended into the card.
   ================================================================ */
body.home-neon #home-view #home-comics-feed .comic-card {
  background: var(--bg-secondary) !important;
}
body.home-neon #home-view #home-comics-feed .comic-info,
body.home-neon #home-view #home-comics-feed .comic-card-copy {
  background: var(--bg-secondary) !important;
  border-top: 0 !important;
  box-shadow: none !important;
}
body.home-neon #home-view #home-comics-feed .comic-title { color: #ffffff !important; }

body.light-mode #home-view #home-comics-feed .comic-card,
body.light-mode.home-neon #home-view #home-comics-feed .comic-card {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
}
body.light-mode #home-view #home-comics-feed .comic-info,
body.light-mode.home-neon #home-view #home-comics-feed .comic-info {
  background: #ffffff !important;
  border-top: 0 !important;
  box-shadow: none !important;
}
body.light-mode .comic-info,
body.light-mode .comic-card-title,
body.light-mode .comic-card .comic-title {
  background: #ffffff !important;
  border-top: 0 !important;
  box-shadow: none !important;
}
body.light-mode #home-view #home-comics-feed .comic-title { color: #111111 !important; }
body.light-mode #home-view #home-comics-feed .comic-author { color: #64748b !important; }

/* ================================================================
   Withdraw modal — same visual language as the Top Up modal
   (2026-11-13): overlay + modal-header-row + topup-title/dot,
   currency input row, minimum note, fire-gradient CTA.
   ================================================================ */
.withdraw-box { border-radius: 22px; border: 1.5px solid rgba(255, 51, 102, 0.5); }
#withdraw-modal .content-box { max-width: 460px; }
.withdraw-field-label { display: block; margin: 14px 0 6px; font-size: 12px; font-weight: 700; color: var(--text-muted); }
.withdraw-country-line { display: flex; align-items: center; gap: 10px; padding: 11px 13px; margin: 2px 0 0; border: 1px solid var(--border-color); border-radius: 10px; background: var(--input-bg); color: var(--text-main); font-size: 13px; font-weight: 800; }
.withdraw-country-note { margin-left: auto; color: var(--text-muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.withdraw-account-input { width: 100%; box-sizing: border-box; padding: 11px 12px; background: var(--input-bg); border: 1px solid var(--border-color); border-radius: 9px; color: var(--text-main); font-family: inherit; font-size: 14px; font-weight: 700; outline: none; }
.withdraw-account-input:focus { border-color: #ff3366; box-shadow: 0 0 0 1px #ff3366; }
.withdraw-account-input::placeholder { color: var(--text-muted); font-weight: 600; }
#withdraw-status { min-height: 20px; margin: 12px 0 10px; font-size: 13px; line-height: 1.45; }
#withdraw-submit { width: 100%; max-width: none; margin: 0; }
#withdraw-submit.is-disabled { opacity: .6; pointer-events: none; }
#withdraw-submit.is-loading { opacity: .75; pointer-events: none; }

/* Currency input mirrors the Top Up input row */
#withdraw-modal .topup-input-row { margin: 2px 0 0; }
.withdraw-unsupported { margin: 12px 0 4px; padding: 12px 14px; border: 1px solid rgba(251, 191, 36, .4); border-radius: 10px; background: rgba(251, 191, 36, .1); color: #fbbf24; font-size: 13px; line-height: 1.5; }

/* Bank / provider dropdown */
.withdraw-bank { position: relative; }
.withdraw-bank-toggle { display: flex; align-items: center; gap: 11px; width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--input-bg); color: var(--text-main); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; text-align: left; transition: border-color .2s ease, box-shadow .2s ease; }
.withdraw-bank-toggle:hover { border-color: #ff3366; }
.withdraw-bank-toggle[aria-expanded="true"] { border-color: #ff3366; box-shadow: 0 0 0 1px #ff3366; }
.withdraw-bank-selected { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.withdraw-bank-selected-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.withdraw-bank-selected-placeholder { color: var(--text-muted); font-weight: 600; }
.withdraw-bank-chevron { flex: 0 0 auto; color: var(--text-muted); font-size: 12px; transition: transform .2s ease; }
.withdraw-bank-toggle[aria-expanded="true"] .withdraw-bank-chevron { transform: rotate(180deg); }
.withdraw-bank-panel { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60; overflow: hidden; background: var(--bg-secondary); border: 1.5px solid #ff3366; border-radius: 14px; box-shadow: 0 18px 40px rgba(0, 0, 0, .5); }
.withdraw-bank-panel[hidden] { display: none; }
.withdraw-bank-search { width: 100%; box-sizing: border-box; padding: 11px 12px; border: 0; border-bottom: 1px solid var(--border-color); background: var(--input-bg); color: var(--text-main); font: inherit; font-size: 13px; outline: none; }
.withdraw-bank-search::placeholder { color: var(--text-muted); }
.withdraw-bank-options { max-height: 260px; overflow-y: auto; }
.withdraw-bank-option { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 8px 10px; border: 0; background: transparent; color: var(--text-main); font: inherit; font-size: 12px; font-weight: 700; text-align: left; cursor: pointer; }
.withdraw-bank-option:hover, .withdraw-bank-option.selected { background: rgba(255, 51, 102, .14); }
.withdraw-bank-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.withdraw-bank-empty, .withdraw-bank-loading { padding: 14px 12px; color: var(--text-muted); font-size: 12px; font-weight: 700; }

/* Initials / local logo chip — used in both the toggle and the options list */
.withdraw-bank-logo { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 9px; overflow: hidden; background: var(--bg-tertiary); color: #fff; font-size: 11px; font-weight: 900; letter-spacing: .03em; }
.withdraw-bank-logo.small { flex-basis: 30px; width: 30px; height: 30px; font-size: 10px; }
.withdraw-bank-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }


/* Universal press feedback: every tappable control shrinks slightly when pressed,
   so button presses feel physical. Respects disabled controls and reduced-motion. */
button:not(:disabled):not([disabled]):active,
input[type="button"]:not(:disabled):active,
input[type="submit"]:not(:disabled):active,
[role="button"]:not([aria-disabled="true"]):active,
.btn:active,
.manage-btn:not(:disabled):active {
  transform: scale(0.95);
}
button,
input[type="button"],
input[type="submit"],
[role="button"],
.btn,
.manage-btn {
  transition: transform 0.08s ease, background-color 0.15s ease, color 0.15s ease;
}
@media (prefers-reduced-motion: reduce) {
  button:active,
  input[type="button"]:active,
  input[type="submit"]:active,
  [role="button"]:active,
  .btn:active,
  .manage-btn:active { transform: none; }
}


/* Android/mobile browser stability: keep the home nav anchored to the
   layout viewport; avoid transform and backdrop-filter compositing layers. */
.acn-bottom-nav {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  transform: none !important;
  will-change: auto !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


/* Compact locked chapter rows */
.chapter-card.is-locked {
  min-height: 76px;
  height: 76px;
  padding: 8px 12px;
  gap: 12px;
  background: #151217;
  border: 1px solid rgba(255, 65, 65, 0.48);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}
.chapter-card.is-locked::before { display: none; }
.chapter-card.is-locked:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 75, 75, 0.78);
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.25);
}
.chapter-card.is-locked .chapter-card-thumb {
  flex: 0 0 54px;
  width: 54px;
  height: 58px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: #211a20;
}
.chapter-card.is-locked .chapter-card-body {
  flex: 1 1 auto;
  min-width: 0;
  gap: 4px;
}
.chapter-card.is-locked .chapter-card-title {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
  line-height: 1.25;
}
.chapter-card-creator {
  overflow: hidden;
  color: #a9a1a7;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chapter-card-lock-price {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  color: #ff6a1a;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.chapter-card-lock-icon { font-size: 15px; line-height: 1; }
@media (max-width: 380px) {
  .chapter-card.is-locked { gap: 8px; padding-inline: 8px; }
  .chapter-card.is-locked .chapter-card-thumb { flex-basis: 46px; width: 46px; height: 52px; }
  .chapter-card-lock-price { gap: 3px; font-size: 10.5px; }
}


/* Header cat interaction states — scoped only to the mascot. */
#header-cat-mascot #cat-tail-path,
#header-cat-mascot #cat-tail-path.tail-sway,
#header-cat-mascot #cat-tail-path.wagging-tail {
  animation: none !important;
}
#header-cat-mascot #cat-face-awake.is-narrow {
  transform-box: fill-box;
  transform-origin: center;
  transform: scaleY(.48);
}
#header-cat-mascot.is-shaking {
  animation: acnHeaderCatAngryShake .18s ease-in-out infinite;
}
#header-cat-mascot.is-angry .cat-cry-bubble,
.header-cat-mascot.is-angry .cat-cry-bubble {
  background: #160708 !important;
  color: #ffffff !important;
  border: 2px solid #000000 !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .48), 0 0 10px rgba(127, 29, 29, .28);
}
#header-cat-mascot.is-angry .cat-cry-bubble::before,
.header-cat-mascot.is-angry .cat-cry-bubble::before {
  border-bottom-color: #160708 !important;
}
@keyframes acnHeaderCatAngryShake {
  0%, 100% { transform: translateX(0) rotate(0); }
  25% { transform: translateX(-1.2px) rotate(-1deg); }
  75% { transform: translateX(1.2px) rotate(1deg); }
}


/* The locked chapter's right-side price is the only unlock control. */
.chapter-card.is-locked { cursor: default; }
.chapter-card-lock-price {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 11px;
  border: 1px solid #ffd84d;
  border-radius: 999px;
  background: rgba(255, 216, 77, 0.09);
  color: #ffdf70;
  box-shadow: 0 0 8px rgba(255, 216, 77, 0.18), inset 0 0 5px rgba(255, 216, 77, 0.06);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.chapter-card-lock-price:hover:not(:disabled) {
  background: rgba(255, 216, 77, 0.17);
  box-shadow: 0 0 12px rgba(255, 216, 77, 0.38), 0 0 22px rgba(255, 216, 77, 0.14);
  transform: translateY(-1px);
}
.chapter-card-lock-price:focus-visible {
  outline: 2px solid #ffe58a;
  outline-offset: 3px;
}
.chapter-card-lock-price:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.chapter-card-lock-icon { flex: 0 0 auto; }
@media (max-width: 480px) {
  .chapter-card-lock-price { gap: 4px; padding: 7px 8px; font-size: 10.5px; }
}