/* Digital Storybook PWA - Global Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  color-scheme: dark;
  --bg-page: #0f172a;
  --bg-card: #1e293b;
  --bg-input: #283548;
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --accent: #6366f1;
  --accent-hover: #818cf8;
  --accent-secondary: #06b6d4;
  --on-accent: #ffffff;
  --border: #2d3a4f;
  --success: #22c55e;
  --error: #ef4444;
  --warning: #f59e0b;

  /* Legacy aliases */
  --bg-primary: var(--bg-page);
  --bg-secondary: var(--bg-card);
  --bg-tertiary: var(--bg-input);
  --accent-dark: var(--accent);
  
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-primary);
  background-color: var(--bg-page);
  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--bg-page);
}

#root {
  min-height: 100vh;
}

/* Remove default button styles */
button {
  font-family: inherit;
  cursor: pointer;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Selection color */
::selection {
  background: var(--accent);
  color: var(--text-primary);
}


/* Shared: Translation & generation progress */
.translating-overlay, .generating-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 36px 24px;
}
.translating-icon-spin {
  color: var(--accent);
  animation: pulse-translate 1.5s ease-in-out infinite;
}
@keyframes pulse-translate {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
.translating-text, .generating-text {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 500;
  text-align: center;
}
.translating-bar, .generating-bar {
  width: 180px;
  height: 4px;
  border-radius: 2px;
  background: var(--border, #333);
  overflow: hidden;
}
.translating-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--accent);
  animation: translate-progress 6s ease-out forwards;
}
.generating-fill {
  height: 100%;
  border-radius: 2px;
  background: #e94560;
  animation: translate-progress 20s ease-out forwards;
}
@keyframes translate-progress {
  0% { width: 5%; }
  20% { width: 30%; }
  50% { width: 60%; }
  80% { width: 85%; }
  100% { width: 95%; }
/* Hero Slideshow */
.hero-slideshow {
  width: 100%;
  max-width: 440px;
  aspect-ratio: 4/3;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  position: relative;
}

.slideshow-viewport {
  width: 100%;
  height: 100%;
  position: relative;
}

.slideshow-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.slideshow-slide.active {
  opacity: 1;
  z-index: 1;
}

.slideshow-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Caption positioning — 9 positions */
.slide-caption {
  position: absolute;
  z-index: 2;
  padding: 6px 14px;
  max-width: 85%;
  font-family: inherit;
  line-height: 1.4;
  pointer-events: none;
}

.slide-caption.with-bg > span {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  padding: 4px 12px;
  border-radius: 6px;
  display: inline-block;
}

/* Vertical: top / middle / bottom */
.slide-caption.pos-top-left,
.slide-caption.pos-top-center,
.slide-caption.pos-top-right {
  top: 12px;
}

.slide-caption.pos-middle-left,
.slide-caption.pos-middle-center,
.slide-caption.pos-middle-right {
  top: 50%;
  transform: translateY(-50%);
}

.slide-caption.pos-bottom-left,
.slide-caption.pos-bottom-center,
.slide-caption.pos-bottom-right {
  bottom: 12px;
}

/* Horizontal: left / center / right */
.slide-caption.pos-top-left,
.slide-caption.pos-middle-left,
.slide-caption.pos-bottom-left {
  left: 12px;
}

.slide-caption.pos-top-center,
.slide-caption.pos-middle-center,
.slide-caption.pos-bottom-center {
  left: 50%;
  transform: translateX(-50%);
}

.slide-caption.pos-middle-center {
  transform: translate(-50%, -50%);
}

.slide-caption.pos-top-right,
.slide-caption.pos-middle-right,
.slide-caption.pos-bottom-right {
  right: 12px;
}

/* Text alignment */
.slide-caption.align-left { text-align: left; }
.slide-caption.align-center { text-align: center; }
.slide-caption.align-right { text-align: right; }

/* Text sizes */
.slide-caption.size-small { font-size: 12px; }
.slide-caption.size-medium { font-size: 16px; }
.slide-caption.size-large { font-size: 22px; }

/* Styles */
.slide-caption.bold { font-weight: 700; }
.slide-caption.italic { font-style: italic; }

/* Dots */
.slideshow-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 3;
}

.slideshow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.25s, transform 0.2s;
}

.slideshow-dot.active {
  background: #fff;
  transform: scale(1.3);
}

.slideshow-dot:hover {
  background: rgba(255, 255, 255, 0.8);
}

/* Responsive */
@media (min-width: 768px) {
  .hero-slideshow {
    max-width: 520px;
  }

  .slide-caption.size-small { font-size: 14px; }
  .slide-caption.size-medium { font-size: 18px; }
  .slide-caption.size-large { font-size: 26px; }
}
.lang-switcher {
  position: relative;
  display: inline-flex;
}

.lang-current {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 4px 8px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  display: flex;
  align-items: center;
  line-height: 1;
}

.lang-current:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.3);
}

.lang-current .lang-flag {
  font-size: 20px;
}

/* Dropdown */
.lang-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 1000;
  background: #1e2438;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 6px;
  width: 200px;
  max-height: 320px;
  overflow-y: auto;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  animation: langDropIn 0.15s ease-out;
}

@keyframes langDropIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

.lang-dropdown::-webkit-scrollbar {
  width: 4px;
}

.lang-dropdown::-webkit-scrollbar-track {
  background: transparent;
}

.lang-dropdown::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
  text-align: left;
}

.lang-option:hover {
  background: rgba(255, 255, 255, 0.1);
}

.lang-option.active {
  background: rgba(96, 165, 250, 0.2);
  color: #93c5fd;
}

.lang-option .lang-flag {
  font-size: 20px;
  line-height: 1;
}

.lang-option .lang-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* ========= HOME PAGE ========= */
.home-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--bg-page);
  color: var(--text-primary);
  overflow-y: auto;
  max-width: 448px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Top Bar */
.home-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
}

.topbar-left {
  flex: 1;
  min-width: 0;
}

.header-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.header-inline h1,
.header-inline span {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.topbar-login {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  background: rgba(99, 102, 241, 0.85);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.topbar-login:hover {
  background: rgba(99, 102, 241, 1);
}

.topbar-island {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Theme-aware, warm island: tints to espresso on brown theme, rich indigo on dark theme.
     color-mix creates a subtle gradient for depth without using a hardcoded colour. */
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--accent) 88%, #ffffff 8%),
      color-mix(in srgb, var(--accent) 92%, #000000 12%)
    );
  /* Fallback for browsers without color-mix (very old Safari) */
  background-color: var(--accent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  padding: 8px 14px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--on-accent) 22%, transparent);
  box-shadow:
    0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--on-accent) 18%, transparent);
}

.topbar-user {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  cursor: pointer;
}

.topbar-username {
  font-size: 13px;
  font-weight: 600;
  color: var(--on-accent);
}

.topbar-tier {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: color-mix(in srgb, var(--on-accent) 88%, transparent);
}

.topbar-valid {
  font-size: 9px;
  color: color-mix(in srgb, var(--on-accent) 78%, transparent);
}

.topbar-credits {
  font-size: 10px;
  font-weight: 700;
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.15);
  padding: 1px 6px;
  border-radius: 8px;
}

.topbar-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: color-mix(in srgb, var(--on-accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--on-accent) 25%, transparent);
  border-radius: 8px;
  color: var(--on-accent);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}

.topbar-logout:hover {
  background: rgba(248, 113, 113, 0.35);
  border-color: rgba(248, 113, 113, 0.55);
  color: #fff5f5;
}

.topbar-logout:active {
  transform: scale(0.94);
}

/* Center Content */
.home-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
  gap: 24px;
  overflow-y: auto;
  width: 100%;
}

.home-logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.home-logo {
  width: 280px;
  height: auto;
  object-fit: contain;
}

.home-version {
  font-size: 11px;
  color: var(--text-primary);
  opacity: 0.5;
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* Update Banner */
.update-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 380px;
  margin: 8px auto 0;
  padding: 10px 14px;
  /* Solid deep-indigo fill so contrast is guaranteed on any page background (dark, light, or iOS PWA auto) */
  background: #4338ca;
  border: 1px solid #6366f1;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
  animation: update-slide-in 0.4s ease-out;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(67, 56, 202, 0.25);
}

.update-banner:hover {
  background: #4f46e5;
  border-color: #818cf8;
}

.update-banner:active {
  transform: scale(0.98);
}

.update-icon {
  color: #ffffff;
  flex-shrink: 0;
  animation: update-spin 2s ease-in-out infinite;
}

.update-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.update-text strong {
  font-size: 13px;
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.update-text span {
  font-size: 11px;
  color: #e0e7ff;
  opacity: 1;
  word-break: break-word;
}

@keyframes update-slide-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }

@keyframes update-spin {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(180deg); }

.home-hero-wrap {
  width: 100%;
  max-width: 100%;
}

.home-hero {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-slogan {
  font-size: clamp(11px, 3.2vw, 13px);
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
  margin: 0;
  opacity: 0.85;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  padding: 0 12px;
}

/* Navigation */
.home-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 20px 32px;
  max-width: 380px;
  margin: 0 auto;
  width: 100%;
}

.nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}

.nav-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.nav-btn:active {
  transform: translateY(0);
}

.nav-btn.primary {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
}

.nav-btn.secondary {
  background: linear-gradient(135deg, #0ea5e9, #06b6d4);
  border: none;
  color: #fff;
}

.nav-btn.admin-link {
  background: transparent;
  color: var(--text-primary);
  opacity: 0.85;
  font-size: 12px;
  font-weight: 500;
  padding: 8px;
  gap: 5px;
}

.nav-btn.admin-link:hover {
  opacity: 1;
}

/* Spinner */
.home-loading {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(99, 102, 241, 0.15);
  border-top-color: var(--accent, #6366f1);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* Responsive */
@media (min-width: 768px) {
  .home-hero-wrap {
    max-width: 520px;
  }
  .home-slogan {
    font-size: 15px;
    letter-spacing: 2px;
  }

/* ===== Changelog Popup ===== */
.changelog-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: cl-fade-in 0.25s ease-out;
  padding: 20px;
}

.changelog-popup {
  background: #1e293b;
  border: 1px solid rgba(192, 132, 252, 0.25);
  border-radius: 16px;
  padding: 24px 20px 20px;
  max-width: 360px;
  width: 100%;
  animation: cl-slide-up 0.3s ease-out;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

.changelog-ver-bar {
  text-align: center;
  margin-bottom: 12px;
}

.changelog-ver {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  font-family: monospace;
  color: #c084fc;
  background: rgba(192, 132, 252, 0.12);
  padding: 3px 14px;
  border-radius: 6px;
}

.changelog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.changelog-title {
  font-size: 17px;
  font-weight: 700;
  color: #f1f5f9;
  margin: 0;
}

.changelog-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: #94a3b8;
  cursor: pointer;
  flex-shrink: 0;
}
.changelog-close:hover { color: #f1f5f9; }

.changelog-list {
  margin: 0 0 18px;
  padding-left: 18px;
  font-size: 13px;
  color: #cbd5e1;
  line-height: 1.8;
}

.changelog-list li::marker {
  color: #c084fc;
}

.changelog-ok {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}
.changelog-ok:hover { opacity: 0.9; }

@keyframes cl-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }

@keyframes cl-slide-up {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
@keyframes spin {
  to { transform: rotate(360deg); }
/* Shared compact book-breadcrumb card (Reader, Search) */
.book-breadcrumb {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
  margin-bottom: 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

/* Main clickable area (cover + text) */
.book-breadcrumb-main {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font-family: inherit;
  min-width: 0;
  transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
  position: relative;
}

.book-breadcrumb-main:hover:not(:disabled) {
  background: rgba(99, 102, 241, 0.06);
}

.book-breadcrumb-main:active:not(:disabled) {
  transform: scale(0.97);
  background: rgba(99, 102, 241, 0.14);
  box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.25);
}

@keyframes tt-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.35); }
  70%  { box-shadow: 0 0 0 10px rgba(99, 102, 241, 0); }
  100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }

.book-breadcrumb-main:active:not(:disabled) {
  animation: tt-pulse 0.45s ease-out;
}

.book-breadcrumb-main:disabled {
  cursor: default;
}

.book-breadcrumb-cover {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-input, rgba(255,255,255,0.04));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

.book-breadcrumb-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.book-breadcrumb-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
}

.book-breadcrumb-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--accent-hover);
}

.book-breadcrumb-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.book-breadcrumb-author {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-secondary);
}

/* Search icon button on the right edge */
.book-breadcrumb-search {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  background: transparent;
  border: none;
  border-left: 1px solid var(--border, rgba(255,255,255,0.08));
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}

.book-breadcrumb-search:hover {
  background: rgba(99, 102, 241, 0.1);
  color: var(--accent-hover);
}

@keyframes tt-pulse-accent {
  0%   { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.45); }
  70%  { box-shadow: 0 0 0 12px rgba(99, 102, 241, 0); }
  100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }

.book-breadcrumb-search:active {
  transform: scale(0.92);
  background: rgba(99, 102, 241, 0.22);
  color: var(--accent-hover);
  animation: tt-pulse-accent 0.5s ease-out;
}
/* Text & Thumbnail section */
.text-thumbnail-section {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin: 16px 0;
  padding: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.text-thumbnail-section.tt-left { flex-direction: row; }
.text-thumbnail-section.tt-right { flex-direction: row-reverse; }

.text-thumbnail-image {
  flex: 0 0 auto;
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 10px;
  background: var(--bg-input, rgba(255,255,255,0.04));
}

.text-thumbnail-text {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.55;
}

.text-thumbnail-text b,
.text-thumbnail-text strong { font-weight: 700; }

.text-thumbnail-text u { text-decoration: underline; }

/* Mobile: keep side-by-side (row) layout — just shrink image so it fits a phone portrait viewport. */
@media (max-width: 480px) {
  .text-thumbnail-section {
    gap: 12px;
    padding: 10px;
  }
  .text-thumbnail-image {
    width: 110px;
    height: 110px;
  }
  .text-thumbnail-text {
    font-size: 13.5px;
  }
}

/* Very narrow phones (iPhone SE / under ~340px): stack to avoid cramping. */
@media (max-width: 340px) {
  .text-thumbnail-section.tt-left,
  .text-thumbnail-section.tt-right {
    flex-direction: column;
  }
  .text-thumbnail-image {
    width: 100%;
    height: 180px;
  }
}



.reader-content {
  padding-top: 16px;
  padding-bottom: 180px;
}

.chapter-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 24px;
  color: var(--accent);
}

/* Book-breadcrumb styles moved to /components/BookBreadcrumb.css (shared across Reader, Search, Chapters) */


.section-text {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-primary);
  margin-bottom: 20px;
  white-space: pre-wrap;
}

/* Search highlight */
.search-highlight {
  background-color: var(--accent);
  color: var(--on-accent);
  padding: 2px 4px;
  border-radius: 3px;
  font-weight: 600;
}

.image-section {
  margin: 24px 0;
}

.section-image {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}

.image-caption {
  font-size: 14px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 8px;
  font-style: italic;
}

.video-section {
  margin: 24px 0;
  position: relative;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
}

.section-video {
  width: 100%;
  height: auto;
  display: block;
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  gap: 12px;
}

.audio-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(233, 69, 96, 0.9);
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 12px;
}

.stop-video-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  margin: 8px auto;
}

/* YouTube Embed */
.youtube-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.youtube-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 12px;
}

/* Audio Player */
.audio-player {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 468px;
  background: var(--bg-card);
  border-radius: 16px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  z-index: 110;
}

.player-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-muted);
}

.player-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.play-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  color: var(--on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s;
}

.play-btn:hover {
  transform: scale(1.05);
}

.stop-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-input);
  border: none;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.generating {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-size: 14px;
}

.generating-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
}

.spinner-small {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Chapter Navigation */
.chapter-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 468px;
  background: var(--bg-page);
  border-top: 1px solid var(--border);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 100;
}

.nav-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 8px;
}

.nav-btn:disabled {
  color: var(--text-muted);
  opacity: 0.4;
  cursor: not-allowed;
}

.nav-indicator {
  color: var(--text-muted);
  font-size: 14px;
  white-space: nowrap;
}
.search-scope-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: rgba(99, 102, 241, 0.12);
  color: var(--accent-hover, #818cf8);
  border: 1px solid rgba(99, 102, 241, 0.25);
  border-radius: 999px;
  width: fit-content;
}


.search-container {
  padding: 16px;
  display: flex;
  gap: 12px;
}

.search-input-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  background: var(--bg-input);
  border-radius: 12px;
  padding: 0 16px;
  gap: 12px;
}

.search-input {
  flex: 1;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 16px;
  padding: 14px 0;
  outline: none;
}

.search-input::placeholder {
  color: var(--text-muted);
}

.search-btn {
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  padding: 14px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.search-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.results-container {
  padding: 0 16px;
}

.results-count {
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: 16px;
}

.result-item {
  background: var(--bg-input);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.result-item:hover {
  background: var(--bg-card);
}

.result-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.result-chapter {
  background: var(--accent);
  color: var(--on-accent);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}

.result-title {
  font-weight: 600;
  font-size: 14px;
}

.result-snippet {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.highlight {
  background: rgba(233, 69, 96, 0.3);
  color: var(--accent);
  padding: 2px 4px;
  border-radius: 4px;
}

.no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 16px;
  color: var(--text-muted);
  text-align: center;
  gap: 12px;
}

.hint {
  font-size: 14px;
  color: var(--text-muted);
}

.expand-scope-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 10px 18px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(168, 85, 247, 0.15));
  color: var(--accent-hover);
  border: 1px solid rgba(99, 102, 241, 0.4);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}

.expand-scope-btn:hover {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(168, 85, 247, 0.3));
}

.expand-scope-btn:active {
  transform: scale(0.96);
}
.confirm-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.confirm-modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px;
  max-width: 380px;
  width: 90%;
  text-align: center;
}

.confirm-modal h3 {
  color: var(--text-primary);
  font-size: 18px;
  margin: 0 0 8px 0;
}

.confirm-desc {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0 0 20px 0;
}

.confirm-error {
  background: color-mix(in srgb, var(--error) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--error) 25%, transparent);
  color: var(--error);
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 12px;
  font-size: 13px;
}

.confirm-code-sent {
  color: var(--accent);
  font-size: 13px;
  margin: 0 0 16px 0;
}

.confirm-code-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--text-muted);
}

.confirm-code-input {
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 6px;
  font-family: monospace;
  padding: 10px 16px;
  width: 180px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
}

.confirm-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 8px;
}

.confirm-btn {
  padding: 10px 20px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: opacity 0.2s;
}

.confirm-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.confirm-btn.primary {
  background: var(--accent);
  color: var(--on-accent);
}

.confirm-btn.secondary {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--border);
}

.confirm-btn.cancel {
  background: transparent;
  color: var(--text-muted);
  margin-top: 8px;
  font-size: 13px;
}

.confirm-btn:hover:not(:disabled) {
  opacity: 0.85;
}
/* QR Manager Section */
.qrm-section {
  margin-top: 20px;
  padding: 16px;
  background: var(--bg-card, rgba(255,255,255,0.04));
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 14px;
}

.qrm-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary, #fff);
  margin: 0 0 12px;
}

.qrm-loading { display: flex; justify-content: center; padding: 20px; color: var(--text-secondary); }

.qrm-error {
  padding: 8px 12px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
  color: #fca5a5;
  font-size: 12px;
  margin-bottom: 10px;
}

.qrm-empty {
  text-align: center;
  padding: 16px;
}

.qrm-empty p {
  color: var(--text-muted, rgba(255,255,255,0.4));
  font-size: 13px;
  margin: 0 0 12px;
}

.qrm-generate-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #6366f1, #7c3aed);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.qrm-generate-btn:hover { opacity: 0.9; }
.qrm-generate-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.qrm-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.qrm-image-wrap {
  background: #fff;
  padding: 10px;
  border-radius: 12px;
}

.qrm-image,
canvas.qrm-image {
  width: 160px !important;
  height: 160px !important;
  max-width: 160px;
  max-height: 160px;
  display: block;
  box-sizing: border-box;
}

.qrm-stats {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.qrm-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary, rgba(255,255,255,0.7));
}

.qrm-stat strong { color: var(--text-primary, #fff); }
.qrm-status-active { color: #4ade80 !important; }
.qrm-status-revoked { color: #f87171 !important; }
.qrm-status-expired { color: #fbbf24 !important; }

.qrm-actions {
  display: flex;
  gap: 8px;
  width: 100%;
}

.qrm-download-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  background: rgba(96, 165, 250, 0.12);
  border: 1px solid rgba(96, 165, 250, 0.3);
  border-radius: 8px;
  color: #93c5fd;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.qrm-download-btn:hover { background: rgba(96, 165, 250, 0.2); }

.qrm-regenerate-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--accent, #4CAF50);
  border: 1px solid var(--accent, #4CAF50);
  border-radius: 8px;
  color: var(--on-accent, #fff);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s, transform 0.1s;
}
.qrm-regenerate-btn:hover { filter: brightness(1.08); }
.qrm-regenerate-btn:active { transform: translateY(1px); }
.qrm-regenerate-btn:disabled { opacity: 0.6; cursor: wait; }

.qrm-revoke-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 8px;
  color: #fca5a5;
  font-size: 13px;
  cursor: pointer;
}
.qrm-revoke-btn:hover { background: rgba(239, 68, 68, 0.2); }

.qrm-url {
  width: 100%;
  padding: 6px 10px;
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
}

.qrm-url small {
  font-size: 10px;
  color: var(--text-muted, rgba(255,255,255,0.35));
  word-break: break-all;
}
/* Text & Thumbnail section editor */
.tt-editor {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  background: var(--bg-input, rgba(255,255,255,0.02));
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 10px;
}

.tt-image-row {
  display: flex;
  gap: 14px;
  align-items: center;
}

.tt-image-preview {
  width: 96px;
  height: 96px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-card);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border, rgba(255,255,255,0.08));
}

.tt-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tt-image-placeholder {
  color: var(--text-muted);
  opacity: 0.6;
}

.tt-image-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.tt-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 500;
  background: var(--accent, #6366f1);
  color: var(--on-accent, #fff);
  border-radius: 8px;
  cursor: pointer;
  border: none;
}

.tt-upload-btn:hover { background: var(--accent-hover, #4f46e5); }

.tt-remove-btn {
  background: transparent;
  color: #f44336;
  border: 1px solid rgba(244, 67, 54, 0.3);
  border-radius: 6px;
  width: 28px;
  height: 28px;
  cursor: pointer;
}

.tt-position-toggle {
  display: flex;
  gap: 0;
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 8px;
  overflow: hidden;
}

.tt-position-toggle button {
  background: transparent;
  border: none;
  padding: 6px 10px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: background 0.15s, color 0.15s;
}

.tt-position-toggle button.active {
  background: rgba(99, 102, 241, 0.15);
  color: var(--accent-hover);
}

.tt-pos-icon {
  display: inline-flex;
  gap: 2px;
  align-items: center;
}

.tt-pos-img {
  width: 8px;
  height: 8px;
  background: currentColor;
  border-radius: 2px;
}

.tt-pos-txt {
  width: 10px;
  height: 2px;
  background: currentColor;
  display: block;
  box-shadow: 0 3px 0 currentColor, 0 -3px 0 currentColor;
}

/* Toolbar */
.tt-toolbar {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 4px;
  background: var(--bg-card);
  border-radius: 8px;
  border: 1px solid var(--border, rgba(255,255,255,0.06));
  position: relative;
}

.tt-toolbar > button,
.tt-toolbar .tt-color-wrapper > button {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tt-toolbar > button:hover,
.tt-toolbar .tt-color-wrapper > button:hover {
  background: rgba(99, 102, 241, 0.12);
  color: var(--accent-hover);
}

.tt-swap-btn {
  margin-left: auto !important;
}

.tt-color-wrapper {
  position: relative;
}

.tt-color-picker {
  position: absolute;
  top: 34px;
  left: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

.tt-color-swatch {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  cursor: pointer;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.1);
}

.tt-color-swatch:hover {
  transform: scale(1.1);
}

/* ContentEditable area */
.tt-editor-area {
  min-height: 100px;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 8px;
  outline: none;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-primary);
}

.tt-editor-area:focus {
  border-color: rgba(99, 102, 241, 0.45);
}

.tt-editor-area:empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted);
  opacity: 0.6;
}
/* Admin page wrapper */
.container {
  min-height: 100vh;
  background: var(--bg-page);
  color: var(--text-primary);
  max-width: 600px;
  margin: 0 auto;
  padding: 0 16px;
}


/* ========= ADMIN STORY LIST ========= */
.admin-stories-list {
  padding-top: 16px;
  padding-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-story-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

/* Inline QR code on story card */
.story-qr-inline {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 48px;
  height: 48px;
}

.story-qr-img,
canvas.story-qr-img {
  width: 48px !important;
  height: 48px !important;
  max-width: 48px;
  max-height: 48px;
  border-radius: 6px;
  border: 2px solid var(--border);
  background: #fff;
  object-fit: contain;
  display: block;
  cursor: pointer;
  box-sizing: border-box;
}

.story-qr-dl {
  position: absolute;
  bottom: -4px;
  right: -4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--bg-card, #1e293b);
  background: var(--accent, #6366f1);
  color: var(--on-accent);
  cursor: pointer;
  transition: transform 0.15s;
}

.story-qr-dl:hover {
  transform: scale(1.15);
}

.admin-story-main {
  padding: 14px 70px 14px 16px;
  cursor: pointer;
}

.admin-story-main:hover {
  background: rgba(99, 102, 241, 0.04);
}

.admin-story-main h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 4px;
}

.admin-story-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0;
}

.admin-story-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 12px;
  flex-wrap: wrap;
}

.control-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.control-group label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.control-group select {
  padding: 4px 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 12px;
  cursor: pointer;
}

.status-select.draft { color: #fbbf24; }
.status-select.approved { color: #22c55e; }
.status-select.published { color: #60a5fa; }

.edit-chapters-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.25);
  border-radius: 6px;
  color: var(--accent-hover);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  margin-left: auto;
}

.edit-chapters-btn:hover {
  background: rgba(99, 102, 241, 0.2);
}

.delete-story-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 6px;
  color: #ef4444;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.delete-story-btn:hover {
  background: rgba(239, 68, 68, 0.2);
}


.admin-list {
  padding: 16px 0;
}

.book-info-card {
  display: flex;
  align-items: center;
  background: var(--bg-input);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  cursor: pointer;
  gap: 12px;
}

.book-info-card:hover {
  background: var(--bg-input);
}

.book-thumb {
  width: 96px;
  height: 96px;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 12px;
  background: var(--bg-input, rgba(255,255,255,0.04));
}

.book-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  opacity: 0.6;
  border: 1px solid var(--border, rgba(255,255,255,0.08));
}

.book-info-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.book-info-label {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 600;
  text-transform: uppercase;
}

.book-info-title {
  font-size: 16px;
  font-weight: 600;
}

.book-info-author {
  font-size: 13px;
  color: var(--text-muted, #888);
}

/* Language Selector */
.language-section {
  background: var(--bg-input);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

.language-label {
  display: block;
  font-size: 11px;
  color: var(--text-muted, #888);
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* Voice Selection */
.voice-section {
  background: var(--bg-input);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}
.voice-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  color: var(--text-primary, #fff);
}
/* Toggle switch pushed to the far right */
.voice-header .voice-toggle-switch {
  margin-left: auto;
}
.voice-toggle-switch {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  border: 1.5px solid var(--border, #444);
  background: var(--bg-card, #1a1a2e);
  cursor: pointer;
  padding: 0;
  transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.voice-toggle-switch:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.voice-toggle-switch.on {
  background: var(--accent, #4CAF50);
  border-color: var(--accent, #4CAF50);
}
.voice-toggle-switch.saving {
  opacity: 0.75;
}
.voice-toggle-thumb {
  position: absolute;
  top: 50%;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transform: translate(0, -50%);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.voice-toggle-switch.on .voice-toggle-thumb {
  transform: translate(20px, -50%);
  background: var(--on-accent, #fff);
}
.voice-section-disabled .voice-grid {
  opacity: 0.45;
  pointer-events: none;
  filter: grayscale(0.3);
  transition: opacity 0.2s ease, filter 0.2s ease;
}
.voice-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted, #888);
}
.voice-hint {
  font-size: 12px;
  color: var(--text-muted, #888);
  margin: 0 0 12px;
}
.voice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.voice-chip {
  display: flex;
  align-items: center;
  padding: 8px 6px 8px 10px;
  border-radius: 10px;
  border: 1.5px solid var(--border, #333);
  background: var(--bg-card, #1a1a2e);
  cursor: pointer;
  transition: all 0.2s;
  gap: 4px;
}
.voice-chip:hover {
  border-color: var(--accent, #4CAF50);
  background: rgba(76, 175, 80, 0.06);
}
.voice-chip.active {
  border-color: var(--accent, #4CAF50);
  background: rgba(76, 175, 80, 0.12);
  box-shadow: 0 0 0 1px var(--accent, #4CAF50);
}
.voice-chip-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  cursor: pointer;
}
.voice-chip-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #fff);
}
.voice-chip-desc {
  font-size: 10px;
  color: var(--text-muted, #888);
  text-align: center;
  line-height: 1.2;
  margin-top: 2px;
}
.voice-preview-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border, #444);
  background: transparent;
  color: var(--text-muted, #888);
  cursor: pointer;
  transition: all 0.2s;
}
.voice-preview-btn:hover {
  border-color: var(--accent, #4CAF50);
  color: var(--accent, #4CAF50);
  background: rgba(76, 175, 80, 0.1);
}
.voice-preview-btn.playing {
  border-color: #e94560;
  color: #e94560;
  background: rgba(233, 69, 96, 0.1);
  animation: preview-pulse 1s ease-in-out infinite;
}
.voice-preview-btn:disabled {
  opacity: 0.7;
  cursor: wait;
}
.voice-preview-btn .spin {
  animation: spin 1s linear infinite;
}

  to { transform: rotate(360deg); }
@keyframes preview-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(233, 69, 96, 0.3); }
  50% { box-shadow: 0 0 0 4px rgba(233, 69, 96, 0); }

.language-buttons {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.language-buttons::-webkit-scrollbar { display: none; }

.language-scroll-wrapper {
  position: relative;
}

.lang-scroll-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--accent, #4CAF50);
  background: var(--bg-card, #fff);
  color: var(--accent, #4CAF50);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: background 0.15s;
  animation: lang-arrow-pulse 1.2s ease-in-out 2;
}

.lang-scroll-arrow:hover {
  background: var(--accent, #4CAF50);
  color: var(--on-accent);
}

.lang-scroll-left { left: -6px; }
.lang-scroll-right { right: -6px; }

@keyframes lang-arrow-pulse {
  0%, 100% { transform: translateY(-50%) scale(1); }
  50% { transform: translateY(-50%) scale(1.2); }

.language-btn {
  flex-shrink: 0;
  background: var(--bg-input);
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 10px 16px;
  color: var(--text-muted, #888);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.language-btn:hover {
  background: var(--bg-input);
}

.language-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.list-header h2 {
  font-size: 18px;
}

.add-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  padding: 10px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.chapter-card {
  display: flex;
  background: var(--bg-input);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
}

.chapter-card-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chapter-card-number {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 600;
}

.chapter-card-title {
  font-size: 16px;
  font-weight: 600;
}

.chapter-card-meta {
  font-size: 12px;
  color: var(--text-muted, #888);
}

.chapter-card-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.action-btn {
  background: var(--bg-input);
  border: none;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-btn:disabled {
  opacity: 0.6;
}

.empty-state {
  text-align: center;
  padding: 48px 16px;
  color: var(--text-muted, #888);
}

.hint {
  font-size: 14px;
  color: var(--text-muted, #666);
  margin-top: 8px;
}

/* Editor */
.editor {
  padding: 16px;
  padding-bottom: 100px;
}

.editor-section {
  margin-bottom: 20px;
}

/* Section label: only direct-child labels (not nested Upload/ActionButton labels). Theme-neutral grey. */
.editor-section > label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
  letter-spacing: 0.2px;
}

.editor-section input,
.editor-section textarea {
  width: 100%;
  background: var(--bg-input);
  border: none;
  border-radius: 8px;
  padding: 12px;
  color: var(--text-primary);
  font-size: 16px;
  margin-bottom: 8px;
}

.editor-section textarea {
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
}

.helper-text {
  font-size: 12px;
  color: var(--text-muted, #888);
  font-style: italic;
}

.section-editor {
  background: var(--bg-input);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.section-type {
  font-size: 14px;
  font-weight: 600;
}

.section-controls {
  display: flex;
  gap: 8px;
}

.section-controls button {
  background: var(--bg-input);
  border: none;
  padding: 6px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-muted, #888);
}

.section-controls button:hover {
  color: var(--text-primary);
}

.preview-image {
  width: 100%;
  max-height: 200px;
  object-fit: contain;
  border-radius: 8px;
  margin-bottom: 8px;
  background: var(--bg-input);
}

.paste-area {
  background: var(--bg-input);
  border: 2px dashed var(--accent);
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 8px;
  cursor: pointer;
  outline: none;
}

.file-input {
  margin-bottom: 8px;
}

/* Chapter thumbnail upload */
.thumbnail-upload-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0 6px;
}

.thumbnail-preview {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-input);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  display: flex;
  align-items: center;
  justify-content: center;
}

.thumbnail-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.thumbnail-placeholder {
  color: var(--text-muted, #888);
  opacity: 0.7;
}

.thumbnail-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.thumbnail-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  background: var(--accent, #6366f1);
  color: var(--on-accent, #fff);
  cursor: pointer;
  border: none;
  transition: background 0.15s, opacity 0.15s;
}

.thumbnail-upload-btn:hover {
  background: var(--accent-hover, #4f46e5);
}

.thumbnail-remove-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  font-size: 12px;
  background: transparent;
  color: #f44336;
  border: 1px solid rgba(244, 67, 54, 0.3);
  border-radius: 6px;
  cursor: pointer;
}

.thumbnail-remove-btn:hover {
  background: rgba(244, 67, 54, 0.08);
}

.thumbnail-ai-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  font-size: 12px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(168, 85, 247, 0.15));
  color: var(--accent-hover);
  border: 1px solid rgba(99, 102, 241, 0.35);
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.2s, transform 0.15s;
}

.thumbnail-ai-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(168, 85, 247, 0.25));
}

.thumbnail-ai-btn:active:not(:disabled) {
  transform: scale(0.95);
}

.thumbnail-ai-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.thumbnail-fallback-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}

.thumbnail-fallback-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent, #6366f1);
  cursor: pointer;
  margin: 0;
}


.toggle-audio-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-input);
  border: none;
  padding: 12px;
  border-radius: 8px;
  color: var(--text-primary);
  cursor: pointer;
  width: 100%;
}

.add-section-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.add-section-row button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--bg-input);
  border: none;
  padding: 12px;
  border-radius: 8px;
  color: var(--text-primary);
  cursor: pointer;
  font-size: 14px;
}

.add-section-row button:hover {
  background: var(--bg-input);
}

.save-bar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 468px;
  display: flex;
  gap: 12px;
  padding: 16px;
  background: var(--bg-input);
  border-top: 1px solid var(--border);
  z-index: 100;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
}

.cancel-btn {
  flex: 1;
  background: var(--bg-input);
  border: none;
  padding: 14px;
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.save-btn {
  flex: 2;
  background: var(--accent);
  border: none;
  padding: 14px;
  border-radius: 8px;
  color: var(--on-accent);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.save-btn:disabled {
  opacity: 0.6;
}

.spinner-small {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}


/* ===== BACKUP & RECOVERY MODALS ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.modal-card {
  background: var(--bg-card, #16213e);
  border: 1px solid var(--border, #2a2a4a);
  border-radius: 16px;
  padding: 32px 24px;
  max-width: 440px;
  width: 100%;
  text-align: center;
}

.backup-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: rgba(34, 197, 94, 0.15);
  border-radius: 50%;
  color: #22c55e;
  margin-bottom: 16px;
}

.modal-card h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px;
}

.backup-warning {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 20px;
}

.mnemonic-box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}

.mnemonic-word {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-input, #0f3460);
  border: 1px solid var(--border, #2a2a4a);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  font-family: monospace;
}

.mnemonic-num {
  font-size: 10px;
  font-weight: 400;
  color: var(--text-muted);
  min-width: 16px;
}

.copy-btn {
  width: 100%;
  padding: 10px;
  background: var(--bg-input, #0f3460);
  border: 1px solid var(--border, #2a2a4a);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 10px;
  transition: background 0.15s, border-color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.copy-btn:hover {
  background: var(--border, #2a2a4a);
}

.copy-btn.copied {
  border-color: #22c55e;
  color: #22c55e;
  background: rgba(34, 197, 94, 0.1);
}

.mnemonic-confirm-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 14px;
  cursor: pointer;
  text-align: left;
}

.mnemonic-confirm-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #22c55e;
  flex-shrink: 0;
  cursor: pointer;
}

.confirm-backup-btn {
  width: 100%;
  padding: 14px;
  background: #22c55e;
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}

.confirm-backup-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.confirm-backup-btn:hover:not(:disabled) {
  opacity: 0.9;
}

/* Show Phrase Again Button */
.show-phrase-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 10px;
  color: #22c55e;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.show-phrase-btn:hover {
  background: rgba(34, 197, 94, 0.22);
  border-color: #22c55e;
}

/* Recovery Modal */
.recovery-input {
  width: 100%;
  padding: 12px;
  background: var(--bg-input, #0f3460);
  border: 1px solid var(--border, #2a2a4a);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 14px;
  font-family: monospace;
  resize: none;
  margin: 12px 0;
  box-sizing: border-box;
}

.recovery-error {
  color: #ef4444;
  font-size: 13px;
  margin: 0 0 8px;
}

.recovery-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.recovery-actions .cancel-btn,
.recovery-actions .save-btn {
  flex: 1;
}

/* Recover Key Button */
.recover-key-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--bg-input, #0f3460);
  border: 1px solid var(--border, #2a2a4a);
  border-radius: 10px;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.recover-key-btn:hover {
  color: var(--text-primary);
  border-color: var(--accent);
}

.list-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ======== Backup Section ======== */
.backup-section {
  margin-top: 28px;
  padding: 20px;
  background: var(--bg-card, #16213e);
  border: 1px solid var(--border, #2a2a4a);
  border-radius: 14px;
}

.backup-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px;
}

.backup-desc {
  font-size: 13px;
  color: var(--text-muted, #888);
  margin: 0 0 16px;
  line-height: 1.5;
}

.backup-auto-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.backup-toggle-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-secondary, #ccc);
  cursor: pointer;
}

.backup-toggle-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #22c55e;
  cursor: pointer;
}

.backup-dir-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--border, #2a2a4a);
  border-radius: 8px;
  color: var(--text-secondary, #ccc);
  font-size: 12px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.backup-dir-btn:hover {
  border-color: var(--accent, #4fc3f7);
  color: var(--accent, #4fc3f7);
}

.backup-hint {
  font-size: 12px;
  color: var(--text-muted, #666);
  font-style: italic;
  margin: 0 0 12px;
}

.backup-export-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  background: var(--bg-input, #0f3460);
  border: 1px solid var(--border, #2a2a4a);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.backup-export-btn:hover:not(:disabled) {
  border-color: var(--accent, #4fc3f7);
  background: var(--border, #2a2a4a);
}

.backup-export-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.backup-import-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 8px;
  padding: 12px;
  background: transparent;
  border: 1px dashed var(--border, #2a2a4a);
  border-radius: 10px;
  color: var(--text-secondary, #ccc);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.backup-import-btn:hover:not(:disabled) {
  border-color: #22c55e;
  color: #22c55e;
  background: rgba(34, 197, 94, 0.06);
}

.backup-import-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.backup-status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.25);
  border-radius: 8px;
  color: #22c55e;
  font-size: 13px;
  font-weight: 500;
  animation: fadeIn 0.2s ease;
}

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

@keyframes spin {
  from { transform: rotate(0deg); }
/* Payment Checkout Modal */
.payment-checkout-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  padding: 20px;
}

.payment-checkout-modal {
  background: var(--bg-card, #1e1e2e);
  border: 1px solid var(--border, #2a2a4a);
  border-radius: 20px;
  padding: 28px;
  width: 100%;
  max-width: 420px;
  animation: paymentSlideUp 0.25s ease-out;
}

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

.payment-checkout-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  color: var(--text-primary, #fff);
}

.payment-checkout-header h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}

.payment-checkout-header svg {
  color: var(--accent, #60a5fa);
}

/* Summary */
.payment-checkout-summary {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border, #2a2a4a);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 20px;
}

.payment-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: var(--text-secondary, rgba(255,255,255,0.7));
}

.payment-summary-row.total {
  font-weight: 700;
  color: var(--text-primary, #fff);
  font-size: 15px;
}

.payment-summary-arrow {
  text-align: center;
  font-size: 18px;
  color: var(--accent, #60a5fa);
  padding: 6px 0;
}

.payment-summary-divider {
  height: 1px;
  background: var(--border, #2a2a4a);
  margin: 12px 0;
}

.payment-tier-badge {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  text-transform: capitalize;
}

.payment-tier-badge.current {
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8;
}

.payment-tier-badge.target {
  background: rgba(96, 165, 250, 0.15);
  color: #60a5fa;
}

.payment-amount {
  color: #4ade80;
  font-size: 18px;
  font-weight: 800;
}

/* Error */
.payment-error {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #fca5a5;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  margin-bottom: 16px;
}

/* Payment Methods */
.payment-methods {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.stripe-checkout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 20px;
  background: linear-gradient(135deg, #635bff, #7c3aed);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
}

.stripe-checkout-btn:hover:not(:disabled) {
  opacity: 0.92;
  transform: translateY(-1px);
}

.stripe-checkout-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.paypal-checkout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 20px;
  background: rgba(255, 196, 57, 0.08);
  border: 1px solid rgba(255, 196, 57, 0.25);
  border-radius: 12px;
  color: #ffc439;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}

.paypal-checkout-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.payment-cancel-btn {
  width: 100%;
  padding: 12px;
  background: transparent;
  border: 1px solid var(--border, #2a2a4a);
  border-radius: 10px;
  color: var(--text-secondary, rgba(255,255,255,0.6));
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.payment-cancel-btn:hover {
  border-color: var(--text-secondary);
  color: var(--text-primary);
}

.payment-cancel-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* PayPal Buttons Wrapper */
.paypal-buttons-wrapper {
  position: relative;
  min-height: 48px;
  border-radius: 12px;
  overflow: hidden;
}

.paypal-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  color: var(--text-secondary, rgba(255,255,255,0.6));
  font-size: 13px;
}

/* Spinner */
.spin {
  animation: spin 1s linear infinite;
}


  to { transform: rotate(360deg); }

/* Payment Status Banner */
.payment-status-banner {
  margin-bottom: 16px;
}

.payment-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
}

.payment-status.polling {
  background: rgba(96, 165, 250, 0.12);
  border: 1px solid rgba(96, 165, 250, 0.3);
  color: #93c5fd;
}

.payment-status.success {
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #86efac;
}

.payment-status.failed,
.payment-status.expired {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}

.payment-status button {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 8px;
  padding: 6px 14px;
  color: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.payment-status button:hover {
  background: rgba(255, 255, 255, 0.2);
}

@keyframes spin {
  from { transform: rotate(0deg); }
/* Payment History Section */
.payment-history-section {
  margin-top: 24px;
  margin-bottom: 24px;
}

.payment-history-section .section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #fff);
  margin: 0 0 14px;
}

.ph-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary, rgba(255,255,255,0.6));
  font-size: 13px;
  padding: 16px;
}

.ph-empty {
  color: var(--text-muted, rgba(255,255,255,0.4));
  font-size: 13px;
  padding: 16px;
  text-align: center;
  background: var(--bg-card, rgba(255,255,255,0.05));
  border-radius: 12px;
  border: 1px dashed var(--border, #2a2a4a);
}

.ph-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ph-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-card, rgba(255,255,255,0.05));
  border: 1px solid var(--border, #2a2a4a);
  border-radius: 12px;
  transition: border-color 0.15s;
}

.ph-item:hover {
  border-color: var(--accent, #60a5fa);
}

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

.ph-provider {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  flex-shrink: 0;
  color: var(--text-secondary, rgba(255,255,255,0.6));
}

.ph-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ph-tier {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #fff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: capitalize;
}

.ph-date {
  font-size: 11px;
  color: var(--text-muted, rgba(255,255,255,0.4));
}

.ph-item-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.ph-amount {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary, #fff);
}

.ph-status {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ph-status.success {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

.ph-status.pending {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}

.ph-status.failed {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

.ph-download-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: rgba(96, 165, 250, 0.1);
  border: 1px solid rgba(96, 165, 250, 0.25);
  border-radius: 8px;
  color: #60a5fa;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.ph-download-btn:hover:not(:disabled) {
  background: rgba(96, 165, 250, 0.2);
  border-color: #60a5fa;
}

.ph-download-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Responsive */
@media (max-width: 480px) {
  .ph-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .ph-item-right {
    width: 100%;
    justify-content: flex-end;
  }
}
/* Credit Wallet Section */
.cw-section { margin-top: 24px; }

.cw-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #fff);
  margin: 0 0 14px;
}

.cw-balance-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(234, 179, 8, 0.06) 100%);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 14px;
  margin-bottom: 14px;
}

.cw-balance-label {
  font-size: 13px;
  color: var(--text-secondary, rgba(255,255,255,0.7));
}

.cw-balance-value {
  font-size: 26px;
  font-weight: 800;
  color: #fbbf24;
}

.cw-balance-value small {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary, rgba(255,255,255,0.5));
}

.cw-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 13px;
  padding: 16px;
}

.cw-empty {
  color: var(--text-muted, rgba(255,255,255,0.4));
  font-size: 13px;
  padding: 16px;
  text-align: center;
  background: var(--bg-card, rgba(255,255,255,0.05));
  border-radius: 12px;
  border: 1px dashed var(--border, #2a2a4a);
}

.cw-txn-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cw-txn-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-card, rgba(255,255,255,0.04));
  border: 1px solid var(--border, rgba(255,255,255,0.06));
  border-radius: 10px;
}

.cw-txn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  flex-shrink: 0;
}

.cw-txn-icon.pos { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
.cw-txn-icon.neg { background: rgba(239, 68, 68, 0.15); color: #f87171; }

.cw-txn-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.cw-txn-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary, rgba(255,255,255,0.6));
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.cw-txn-desc {
  font-size: 12px;
  color: var(--text-primary, #fff);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cw-txn-date {
  font-size: 10px;
  color: var(--text-muted, rgba(255,255,255,0.35));
}

.cw-txn-amount {
  font-size: 15px;
  font-weight: 800;
  flex-shrink: 0;
}

.cw-txn-amount.pos { color: #4ade80; }
.cw-txn-amount.neg { color: #f87171; }

.cw-more {
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
  padding: 8px;
}
.account-container {
  min-height: 100vh;
  background: var(--bg-page);
  color: var(--text-primary);
  max-width: 600px;
  margin: 0 auto;
  padding: 0 16px;
}

.account-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.account-header .lang-switcher {
  margin-left: auto;
}

.back-btn {
  background: var(--bg-input);
  border: none;
  border-radius: 10px;
  padding: 10px;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.2s;
}

.back-btn:hover {
  background: var(--border);
}

.account-header h1 {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
}

/* Re-login Notice */
.relogin-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
  color: #fcd34d;
  font-size: 13px;
}

.relogin-notice button {
  margin-left: auto;
  background: #f59e0b;
  color: #000;
  border: none;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.relogin-notice button:hover {
  background: #fbbf24;
}

/* Current Plan */
.current-plan {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg-input);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 24px;
}

.plan-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.plan-info h2 {
  font-size: 18px;
  margin: 0 0 4px 0;
}

.plan-type {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.plan-tier {
  font-size: 14px;
  color: #60a5fa;
  font-weight: 600;
  margin: 4px 0;
  text-transform: capitalize;
}

.plan-valid {
  font-size: 12px;
  color: #4ade80;
  margin: 0;
}

/* Messages */
.account-error {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #fca5a5;
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: 16px;
  font-size: 14px;
}

.account-success {
  background: rgba(34, 197, 94, 0.2);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #86efac;
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: 16px;
  font-size: 14px;
}

/* Tier Section */
.tier-section h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 16px 0;
  color: rgba(255, 255, 255, 0.9);
}

.tier-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.tier-card {
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  transition: all 0.2s;
}

.tier-card.current {
  border-color: #60a5fa;
  background: rgba(96, 165, 250, 0.1);
}

.tier-card.confirming {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.1);
}

.tier-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.tier-header h4 {
  font-size: 13px;
  font-weight: 600;
  margin: 0;
}

.tier-price {
  font-size: 10px;
  font-weight: 700;
  color: #4ade80;
  background: rgba(74, 222, 128, 0.15);
  padding: 2px 6px;
  border-radius: 4px;
}

.tier-features {
  list-style: none;
  padding: 0;
  margin: 0 0 10px 0;
  max-height: 50px;
  overflow: hidden;
}

.tier-features li {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 2px;
}

.tier-features li svg {
  color: #4ade80;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
}

/* Tier Buttons */
.tier-btn {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.tier-btn.current {
  background: rgba(96, 165, 250, 0.3);
  color: #93c5fd;
  cursor: default;
}

.tier-btn.upgrade {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
}

.tier-btn.upgrade:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.tier-btn.downgrade {
  background: var(--bg-input);
  color: rgba(255, 255, 255, 0.7);
}

.tier-btn.downgrade:hover {
  background: rgba(255, 255, 255, 0.15);
}

.tier-btn.confirm {
  background: #f59e0b;
  color: #000;
}

.tier-btn.cancel {
  background: var(--bg-input);
  color: rgba(255, 255, 255, 0.7);
  margin-top: 6px;
}

.confirm-buttons {
  display: flex;
  flex-direction: column;
}

.downgrade-warning {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 8px;
  padding: 8px;
  background: rgba(245, 158, 11, 0.15);
  border-radius: 6px;
  font-size: 10px;
  color: #fcd34d;
}

.downgrade-warning svg {
  flex-shrink: 0;
  margin-top: 1px;
}

/* Logout Button */
.logout-btn {
  width: 100%;
  margin-top: 32px;
  padding: 14px;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 12px;
  color: #ef4444;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.logout-btn:hover {
  background: rgba(239, 68, 68, 0.3);
  color: #f87171;
}

/* Pending Downgrade Banner */
.pending-downgrade-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
}

.pending-info {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fcd34d;
  font-size: 13px;
  line-height: 1.4;
}

.pending-info svg {
  flex-shrink: 0;
  color: #fbbf24;
}

.cancel-downgrade-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  background: rgba(239, 68, 68, 0.25);
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: 8px;
  padding: 6px 12px;
  color: #fca5a5;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.cancel-downgrade-btn:hover {
  background: rgba(239, 68, 68, 0.4);
}

.cancel-downgrade-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Pending Target Card */
.tier-card.pending-target {
  border-color: #fbbf24;
  background: rgba(251, 191, 36, 0.08);
}

.tier-btn.pending {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(251, 191, 36, 0.2);
  color: #fcd34d;
  cursor: default;
}

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

/* Responsive */
@media (max-width: 400px) {
  .tier-grid {
    grid-template-columns: 1fr;
  }
  
  .tier-header {
    flex-direction: column;
    gap: 4px;
  }
}


/* Email in profile */
.plan-email {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 2px 0 6px;
  letter-spacing: 0.3px;
}

/* Change Password Link */
.change-password-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 18px;
  color: var(--text-primary);
  font-size: 14px;
  cursor: pointer;
  margin-bottom: 20px;
  transition: background 0.15s, border-color 0.15s;
}

.change-password-link:hover {
  background: var(--bg-input);
  border-color: var(--accent);
  color: var(--accent);
}

/* Change Password Modal */
.pw-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.pw-modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px;
  width: 100%;
  max-width: 400px;
}

.pw-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.pw-modal-header h3 {
  font-size: 18px;
  color: var(--text-primary);
  margin: 0;
}

.pw-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px;
}

.pw-close:hover {
  color: var(--text-primary);
}

.pw-field {
  margin-bottom: 14px;
}

.pw-field label {
  display: block;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.pw-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.pw-input-wrap input {
  width: 100%;
  padding: 10px 40px 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 14px;
  outline: none;
}

.pw-input-wrap input:focus {
  border-color: var(--accent);
}

.pw-eye {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
}

.pw-eye:hover {
  color: var(--text-secondary);
}

.pw-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 16px;
}

.pw-error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #fca5a5;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 14px;
}

.pw-success {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #86efac;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 14px;
}

.pw-submit {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, #6366f1, #818cf8);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}

.pw-submit:hover {
  opacity: 0.9;
}

.pw-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.password-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.password-modal {
  background: var(--bg-input, #1a1a2e);
  border-radius: 16px;
  width: 100%;
  max-width: 400px;
  padding: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.password-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.password-modal-header h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: 18px;
}

/* Theme Section */
.theme-section {
  margin-bottom: 24px;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 14px;
}

.theme-presets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}

.theme-preset-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px;
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s;
  position: relative;
  color: var(--text-secondary);
}

.theme-preset-btn:hover {
  border-color: var(--accent);
}

.theme-preset-btn.active {
  border-color: var(--accent);
}

.theme-preview {
  width: 80px;
  height: 50px;
  border-radius: 6px;
  overflow: hidden;
}

.tp-bg {
  width: 100%;
  height: 100%;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tp-card {
  width: 60%;
  height: 70%;
  border-radius: 4px;
  border: 1px solid;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tp-text {
  width: 80%;
  height: 3px;
  border-radius: 1px;
  opacity: 0.8;
}

.tp-accent {
  width: 50%;
  height: 3px;
  border-radius: 1px;
}

.custom-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-input);
  color: var(--accent);
}

.theme-name {
  font-size: 11px;
  font-weight: 600;
}

.theme-check {
  position: absolute;
  top: 6px;
  right: 6px;
  color: var(--accent);
}

/* Custom Color Editor */
.custom-editor {
  margin-top: 16px;
  padding: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.custom-editor h4 {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--text-primary);
}

.color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.color-field label {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.color-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.color-input-row input[type="color"] {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px;
  cursor: pointer;
  background: none;
}

.color-hex {
  flex: 1;
  padding: 6px 10px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 12px;
  font-family: monospace;
  outline: none;
}

.color-hex:focus {
  border-color: var(--accent);
}

.auto-contrast-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 600;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 6px;
  color: var(--accent);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, transform 0.1s;
}

.auto-contrast-btn:hover {
  background: color-mix(in srgb, var(--accent) 25%, transparent);
}

.auto-contrast-btn:active {
  transform: scale(0.96);
}

.contrast-badge {
  display: inline-block;
  margin-top: 5px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  border-radius: 4px;
  font-family: monospace;
}

.contrast-badge.aaa {
  background: rgba(34, 197, 94, 0.18);
  color: #22c55e;
}

.contrast-badge.aa {
  background: rgba(251, 191, 36, 0.18);
  color: #f59e0b;
}

.contrast-badge.fail {
  background: rgba(239, 68, 68, 0.18);
  color: #ef4444;
}

.save-colors-btn {
  width: 100%;
  padding: 10px;
  background: var(--accent);
  border: none;
  border-radius: 10px;
  color: var(--on-accent);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.save-colors-btn:hover {
  opacity: 0.9;
}


/* Security Section */
.security-section {
  margin-top: 20px;
  padding: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.security-section .section-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 12px 0;
}

.security-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
  gap: 6px;
}

.security-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.security-label span {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
}

.security-label small {
  color: var(--text-muted);
  font-size: 12px;
}

.security-badge {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
}

.security-badge.verified {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.security-badge.unverified {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.security-value {
  display: flex;
  align-items: center;
  gap: 8px;
}

.resend-verify-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 8px;
  color: #a5b4fc;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.resend-verify-btn:hover:not(:disabled) {
  background: rgba(99, 102, 241, 0.25);
}

.resend-verify-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.resend-msg {
  font-size: 12px;
  color: #86efac;
  margin: 4px 0 0;
  padding: 0 0 0 4px;
}

/* Verify code input row */
.verify-code-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 8px 12px;
  background: rgba(99, 102, 241, 0.06);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 10px;
}

.verify-code-input {
  flex: 1;
  padding: 8px 10px;
  background: var(--bg-input, #1e293b);
  border: 1px solid var(--border, #334155);
  border-radius: 6px;
  color: var(--text-primary, #e2e8f0);
  font-size: 18px;
  font-weight: 700;
  font-family: monospace;
  letter-spacing: 6px;
  text-align: center;
  outline: none;
}

.verify-code-input:focus {
  border-color: #6366f1;
}

.verify-code-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: none;
  background: #22c55e;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
}

.verify-code-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.verify-cancel-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid var(--border, #334155);
  background: none;
  color: #94a3b8;
  cursor: pointer;
  flex-shrink: 0;
}

.verify-cancel-btn:hover {
  color: #f87171;
}

/* 2FA Toggle */
.twofa-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 13px;
  padding: 4px;
}

.twofa-toggle:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.twofa-toggle-track {
  width: 40px;
  height: 22px;
  background: var(--border);
  border-radius: 11px;
  position: relative;
  transition: background 0.2s;
}

.twofa-toggle.active .twofa-toggle-track {
  background: #22c55e;
}

.twofa-toggle-thumb {
  width: 18px;
  height: 18px;
  background: white;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 0.2s;
}

.twofa-toggle.active .twofa-toggle-thumb {
  transform: translateX(18px);
}

.twofa-hint {
  width: 100%;
  color: #f59e0b;
  font-size: 11px;
}


/* Danger Zone */
.danger-zone {
  margin-top: 32px;
  padding: 20px;
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 14px;
}

.danger-title {
  color: #ef4444 !important;
}

.danger-desc {
  color: var(--text-muted);
  font-size: 13px;
  margin: 8px 0 16px;
  line-height: 1.5;
}

.delete-account-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: transparent;
  border: 1px solid #ef4444;
  border-radius: 10px;
  color: #ef4444;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.delete-account-btn:hover {
  background: #ef4444;
  color: #fff;
}

.delete-account-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Email Change Inline */
.email-change-inline {
  margin: 4px 0 12px;
}

.email-change-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.email-change-input {
  flex: 1;
  padding: 10px 14px;
  background: var(--bg-input, #0f3460);
  border: 1px solid var(--border, #2a2a4a);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 14px;
  outline: none;
}

.email-change-input:focus {
  border-color: var(--accent, #4fc3f7);
}

.email-change-submit {
  padding: 10px 18px;
  background: #22c55e;
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
}

.email-change-submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.email-change-submit:hover:not(:disabled) {
  opacity: 0.9;
}

.email-change-cancel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid var(--border, #2a2a4a);
  border-radius: 10px;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
}

.email-change-cancel:hover {
  border-color: #ef4444;
  color: #ef4444;
}

/* ========= MY STORIES ========= */
.mystories-page {
  min-height: 100vh;
  background: var(--bg-page);
  color: var(--text-primary);
  max-width: 600px;
  margin: 0 auto;
  padding: 0 16px;
}

.ms-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}

.ms-header .lang-switcher {
  margin-left: auto;
}

.ms-header h1 {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}

.ms-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-primary);
  cursor: pointer;
}

.ms-back:hover {
  background: var(--bg-input);
}

/* Story List */
.ms-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Story Card */
.ms-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.ms-card-content {
  flex: 1;
  min-width: 0;
}

.ms-card-cover {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-input, rgba(255,255,255,0.04));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

.ms-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ms-card-cover.ms-card-cover-placeholder {
  opacity: 0.55;
  border: 1px solid var(--border, rgba(255,255,255,0.06));
}

.ms-card:hover {
  border-color: rgba(99, 102, 241, 0.3);
  background: rgba(99, 102, 241, 0.04);
}

.ms-card.tulibra-default {
  border-color: rgba(99, 102, 241, 0.2);
  background: rgba(99, 102, 241, 0.05);
}

.ms-card-badges {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.ms-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border: 1px solid;
  border-radius: 4px;
  padding: 2px 6px;
}

.ms-readonly-badge {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(107, 114, 128, 0.2);
  color: var(--text-secondary);
}

.ms-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-radius: 4px;
  padding: 2px 6px;
}

.ms-status-badge.draft {
  background: rgba(217, 119, 6, 0.15);
  color: #b45309;
}

.ms-status-badge.approved {
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
}

.ms-status-badge.published {
  background: rgba(96, 165, 250, 0.12);
  color: #60a5fa;
}

.ms-card-title {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--text-primary);
}

.ms-card-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Empty */
.ms-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-muted);
}

.ms-empty p {
  margin-top: 12px;
}

/* Loading */
.ms-loading {
  display: flex;
  justify-content: center;
  padding: 48px;
}

.spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(99, 102, 241, 0.15);
  border-top-color: var(--accent, #6366f1);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
/* ========= BROWSE / DISCOVER STORIES ========= */
.browse-page {
  min-height: 100vh;
  background: var(--bg-page);
  color: var(--text-primary);
  max-width: 600px;
  margin: 0 auto;
  padding: 0 16px;
}

.br-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}

.br-header .lang-switcher {
  margin-left: auto;
}

.br-header h1 {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}

.br-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-primary);
  cursor: pointer;
}

.br-back:hover {
  background: var(--bg-input);
}

/* Story List */
.br-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Story Card */
.br-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.br-card:hover {
  border-color: rgba(99, 102, 241, 0.3);
  background: rgba(99, 102, 241, 0.04);
}

.br-card.tulibra-default {
  border-color: rgba(99, 102, 241, 0.2);
  background: rgba(99, 102, 241, 0.05);
}

.br-card-left {
  flex: 1;
  min-width: 0;
}

.br-card-cover {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-input, rgba(255,255,255,0.04));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

.br-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.br-card-cover.br-card-cover-placeholder {
  opacity: 0.55;
  border: 1px solid var(--border, rgba(255,255,255,0.06));
}

.br-card-badges {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}

.br-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border: 1px solid;
  border-radius: 4px;
  padding: 2px 6px;
}

.br-default-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.4px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(99, 102, 241, 0.15);
  color: var(--accent-hover);
}

.br-card-title {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--text-primary);
}

.br-card-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.br-card-arrow {
  color: rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}

.br-card:hover .br-card-arrow {
  color: var(--accent-hover);
}

/* Empty & Loading */
.br-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-muted);
}

.br-empty p {
  margin-top: 12px;
}

.br-loading {
  display: flex;
  justify-content: center;
  padding: 48px;
}

.spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(99, 102, 241, 0.15);
  border-top-color: var(--accent, #6366f1);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
/* ========= BOOK VIEW ========= */
.bookview-page {
  min-height: 100vh;
  background: var(--bg-page);
  color: var(--text-primary);
  max-width: 600px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Header */
.bv-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}

.bv-header .lang-switcher {
  margin-left: auto;
}

.bv-header-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bv-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-primary);
  cursor: pointer;
}

.bv-back:hover {
  background: var(--bg-input);
}

/* Search icon at the right edge of the Book Summary Card */
.bv-summary-search {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 10px;
  color: var(--text-secondary);
  cursor: pointer;
  margin-left: 8px;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}

.bv-summary-search:hover {
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.4);
  color: var(--accent-hover);
}

.bv-summary-search:active {
  transform: scale(0.94);
}

/* Compact Book Summary Card (cover 96x96 left + text right) */
.bv-summary-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 20px;
}

.bv-summary-cover {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-input, rgba(255,255,255,0.04));
  display: flex;
  align-items: center;
  justify-content: center;
}

.bv-summary-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bv-summary-cover-placeholder {
  color: var(--text-muted);
  opacity: 0.6;
}

.bv-summary-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}

.bv-summary-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--accent-hover);
}

/* Legacy cover-section kept for back-compat (not rendered anymore) */
.bv-cover-section {
  display: none;
}

.bv-cover-image {
  max-width: 280px;
  width: 100%;
  max-height: 360px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.bv-cover-placeholder {
  width: 220px;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text-muted);
}

/* Book Info (description + meta below summary card) */
.bv-info {
  margin: 0 auto 22px;
  text-align: left;
}

.bv-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.25;
  word-break: break-word;
}

.bv-author {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}

.bv-description {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0 0 8px;
  line-height: 1.55;
  white-space: pre-wrap;
}

/* Chapters */
.bv-chapters {
  margin: 0 auto;
}

.bv-chapters-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.bv-chapter-count {
  font-size: 11px;
  font-weight: 700;
  background: rgba(99, 102, 241, 0.15);
  color: var(--accent-hover);
  padding: 2px 7px;
  border-radius: 8px;
  margin-left: auto;
}

.bv-chapter-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bv-chapter-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  width: 100%;
  text-align: left;
  color: inherit;
}

.bv-chapter-item:hover {
  border-color: rgba(99, 102, 241, 0.35);
  background: rgba(99, 102, 241, 0.06);
}

.bv-ch-number {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent-hover);
}

.bv-ch-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
}

.bv-ch-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

.bv-ch-date {
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0.7;
  margin-top: 4px;
}

.bv-ch-thumb {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--bg-input, rgba(255,255,255,0.04));
  border: 1px solid var(--border, rgba(255,255,255,0.06));
}

.bv-ch-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  opacity: 0.45;
}

.bv-last-updated {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 6px;
}

/* No chapters */
.bv-no-chapters {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-muted);
}

.bv-edit-section {
  display: flex;
  justify-content: center;
  width: 100%;
}

.bv-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 10px 20px;
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

.bv-edit-btn:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}

.bv-status-badge {
  display: inline-block;
  margin-top: 10px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 6px;
}

.bv-status-badge.draft {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
}

/* Error / Loading */
.bv-error {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-muted);
}

.bv-error p {
  margin-top: 12px;
}

.bv-loading {
  display: flex;
  justify-content: center;
  padding: 48px;
}
.mon-tab {
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.mon-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.mon-header h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
}

.mon-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.mon-controls select {
  background: rgba(255, 255, 255, 0.05);
  color: inherit;
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 4px 8px;
  border-radius: 6px;
}

.mon-pause-btn {
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.3);
  color: #a5b4fc;
  padding: 4px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}

.mon-pause-btn.paused {
  background: rgba(234, 179, 8, 0.15);
  border-color: rgba(234, 179, 8, 0.35);
  color: #fde68a;
}

.mon-updated {
  opacity: 0.55;
  font-size: 11px;
}

/* --- Gauge panel --- */
.mon-gauges {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

.mon-gauge {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mon-gauge__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.7;
  font-weight: 600;
}

.mon-gauge__value {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.mon-gauge__sub {
  font-size: 11px;
  opacity: 0.55;
}

.mon-gauge--ok { border-color: rgba(34, 197, 94, 0.3); }
.mon-gauge--ok .mon-gauge__value { color: #4ade80; }

.mon-gauge--warn { border-color: rgba(245, 158, 11, 0.35); }
.mon-gauge--warn .mon-gauge__value { color: #fbbf24; }

.mon-gauge--danger { border-color: rgba(239, 68, 68, 0.4); background: rgba(239, 68, 68, 0.06); }
.mon-gauge--danger .mon-gauge__value { color: #f87171; }

/* --- Tables --- */
.mon-table-wrap h3 {
  margin: 0 0 10px 0;
  font-size: 14px;
  font-weight: 600;
  opacity: 0.85;
}

.mon-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.mon-table th {
  text-align: left;
  padding: 8px 10px;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.7;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mon-table td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.mon-path {
  font-family: ui-monospace, monospace;
  font-size: 12px;
}

.mon-err { color: #f87171; font-weight: 600; }
.mon-slow { color: #fbbf24; font-weight: 600; }

.mon-empty {
  text-align: center;
  opacity: 0.5;
  padding: 24px !important;
}

.mon-loading {
  padding: 24px;
  opacity: 0.6;
  text-align: center;
}
.adm-dash {
  min-height: 100vh;
  background: #0f172a;
  color: #e2e8f0;
  padding: 20px;
}

.adm-dash-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.adm-dash-header h1 {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  flex: 1;
}

.adm-dash-security {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  color: #22c55e;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.2);
  padding: 4px 10px;
  border-radius: 8px;
}

/* PIN session countdown ring: fills up as time elapses; at full ring
   the client-side timer expires and the PIN gate re-appears once. */
.adm-session-ring {
  width: 18px;
  height: 18px;
  display: inline-block;
  flex-shrink: 0;
  color: #22c55e;
}
.adm-session-ring--warn { color: #f59e0b; }
.adm-session-ring--danger { color: #ef4444; }
.adm-session-ring svg { width: 100%; height: 100%; display: block; }
.adm-session-ring__track {
  stroke: rgba(255, 255, 255, 0.15);
}
.adm-session-ring__progress {
  stroke: currentColor;
  transition: stroke-dashoffset 1s linear, stroke 0.3s ease;
}

.adm-dash-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  color: #e5e7eb;
  cursor: pointer;
}

/* Tabs */
.adm-tabs-wrapper {
  position: relative;
  margin-bottom: 20px;
}

.adm-tabs {
  display: flex;
  gap: 4px;
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  padding: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.adm-tabs::-webkit-scrollbar { display: none; }

.adm-tabs-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(99, 102, 241, 0.4);
  background: rgba(15, 23, 42, 0.92);
  color: #a5b4fc;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  transition: background 0.15s, border-color 0.15s;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.adm-tabs-arrow:hover {
  border-color: #6366f1;
  color: #e0e7ff;
}

.adm-tabs-arrow-left {
  left: -4px;
}

.adm-tabs-arrow-right {
  right: -4px;
}

/* Pulse animation on first appearance */
@keyframes arrow-pulse {
  0%, 100% { transform: translateY(-50%) scale(1); box-shadow: 0 2px 8px rgba(0,0,0,0.4); }
  50% { transform: translateY(-50%) scale(1.2); box-shadow: 0 2px 14px rgba(99,102,241,0.5); }

.adm-tabs-arrow {
  animation: arrow-pulse 1.2s ease-in-out 2;
}

.adm-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: #94a3b8;
  font-size: 13px;
  white-space: nowrap;
  flex-shrink: 0;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.adm-tab.active {
  background: rgba(99,102,241,0.15);
  color: #a5b4fc;
}

.adm-tab:hover:not(.active) { background: rgba(255,255,255,0.04); }

/* Overview */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 24px;
}

.stat-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}

.stat-num {
  font-size: 28px;
  font-weight: 800;
  color: #f1f5f9;
}

.stat-label {
  font-size: 12px;
  color: #64748b;
  margin-top: 4px;
}

.tier-section h3 {
  font-size: 15px;
  color: #cbd5e1;
  margin: 0 0 12px;
}

.tier-table { display: flex; flex-direction: column; gap: 4px; }

.tier-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  font-size: 13px;
}

.tier-type {
  width: 60px;
  font-weight: 600;
  color: #94a3b8;
}

.tier-name { flex: 1; color: #cbd5e1; }

.tier-count {
  font-weight: 700;
  color: #818cf8;
  min-width: 30px;
  text-align: right;
}

/* Filter Bar */
.filter-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.search-wrap {
  flex: 1;
  min-width: 200px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 0 12px;
  color: #94a3b8;
}

.search-wrap input {
  flex: 1;
  background: none;
  border: none;
  color: #e2e8f0;
  font-size: 13px;
  padding: 10px 0;
  outline: none;
}

.filter-bar select {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 8px 12px;
  color: #e2e8f0;
  font-size: 13px;
  outline: none;
  cursor: pointer;
}

.filter-apply {
  padding: 8px 16px;
  background: rgba(99,102,241,0.2);
  border: 1px solid rgba(99,102,241,0.3);
  border-radius: 10px;
  color: #a5b4fc;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.filter-apply:hover { background: rgba(99,102,241,0.3); }

/* Users Table */
.users-table { font-size: 13px; }

.table-header, .table-row {
  display: grid;
  grid-template-columns: 28px 1fr 1.2fr 1fr 60px 140px;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
}

.table-header {
  color: #64748b;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.table-row {
  border-bottom: 1px solid rgba(255,255,255,0.03);
  cursor: pointer;
  transition: background 0.1s;
}

.table-row:hover { background: rgba(99,102,241,0.06); }

.col-email { color: #94a3b8; overflow: hidden; text-overflow: ellipsis; }
.col-type { display: flex; align-items: center; gap: 6px; }
.col-stories { text-align: center; color: #94a3b8; }
.col-login { color: #64748b; font-size: 12px; }

.online-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
}

.online-dot.on { background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,0.5); }
.online-dot.off { background: #475569; }

.admin-icon { color: #f59e0b; vertical-align: middle; margin-left: 4px; }

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  margin-right: 4px;
}

.badge.creator { background: rgba(99,102,241,0.15); color: #818cf8; }
.badge.reader { background: rgba(6,182,212,0.15); color: #22d3ee; }
.badge.tier { background: rgba(245,158,11,0.15); color: #fbbf24; }
.badge.admin { background: rgba(239,68,68,0.15); color: #f87171; }
.badge.sm { padding: 1px 5px; font-size: 10px; }

/* User Detail */
.detail-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: #818cf8;
  font-size: 13px;
  cursor: pointer;
  margin-bottom: 16px;
  padding: 0;
}

.detail-header {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 16px;
}

.detail-avatar {
  width: 48px; height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(99,102,241,0.15);
  border-radius: 50%;
  color: #818cf8;
}

.detail-header h3 { margin: 0; font-size: 18px; }
.detail-header p { margin: 2px 0 6px; color: #94a3b8; font-size: 13px; }

.detail-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 20px;
  font-size: 13px;
  color: #94a3b8;
  padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 16px;
}

.detail-meta p { margin: 0; }

/* Log List */
.log-list { display: flex; flex-direction: column; gap: 2px; }

.log-row {
  display: grid;
  grid-template-columns: 10px 160px 180px 1fr 100px 140px;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}

.log-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
}

.log-type { font-weight: 600; color: #cbd5e1; }
.log-email { color: #94a3b8; overflow: hidden; text-overflow: ellipsis; }
.log-details { color: #64748b; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-ip { color: #475569; font-size: 11px; }
.log-time { color: #64748b; font-size: 11px; text-align: right; }

/* Pager */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 0;
  font-size: 13px;
  color: #94a3b8;
}

.pager button {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 6px 10px;
  color: #e2e8f0;
  cursor: pointer;
}

.pager button:disabled { opacity: 0.3; cursor: not-allowed; }

.empty {
  text-align: center;
  color: #475569;
  padding: 32px;
}

/* Responsive */
@media (max-width: 768px) {
  .table-header, .table-row {
    grid-template-columns: 24px 1fr 100px 100px;
  }
  .col-email, .col-stories { display: none; }
  .log-row {
    grid-template-columns: 8px 120px 1fr 100px;
  }
  .log-email, .log-ip { display: none; }

/* ===== PIN GATE ===== */
.pin-gate {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 120px);
}

.pin-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 40px 32px;
  text-align: center;
  max-width: 360px;
  width: 100%;
}

.pin-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: rgba(99,102,241,0.15);
  border-radius: 50%;
  color: #818cf8;
  margin-bottom: 16px;
}

.pin-card h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 8px;
  color: #f1f5f9;
}

.pin-card p {
  font-size: 13px;
  color: #94a3b8;
  margin: 0 0 24px;
  line-height: 1.5;
}

.pin-input {
  width: 100%;
  text-align: center;
  font-size: 28px;
  letter-spacing: 12px;
  padding: 14px;
  background: rgba(255,255,255,0.06);
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  color: #f1f5f9;
  outline: none;
  transition: border-color 0.15s;
  font-family: monospace;
}

.pin-input:focus {
  border-color: #6366f1;
}

.pin-error {
  color: #ef4444;
  font-size: 13px;
  margin: 8px 0 0;
}

.pin-submit {
  width: 100%;
  margin-top: 20px;
  padding: 14px;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}

.pin-submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pin-submit:hover:not(:disabled) {
  opacity: 0.9;
}

/* ===== REVEAL BUTTON ===== */
.detail-email-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 6px;
}

.masked-email {
  color: #94a3b8;
  font-size: 13px;
  font-family: monospace;
}

.reveal-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: rgba(245,158,11,0.12);
  border: 1px solid rgba(245,158,11,0.25);
  border-radius: 6px;
  color: #fbbf24;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.reveal-btn:hover {
  background: rgba(245,158,11,0.2);
}

.reveal-btn-sm {
  display: inline-flex;
  align-items: center;
  padding: 2px 4px;
  background: none;
  border: none;
  color: #64748b;
  cursor: pointer;
  margin-left: 4px;
  opacity: 0.5;
  transition: opacity 0.15s;
}

.reveal-btn-sm:hover {
  opacity: 1;
  color: #fbbf24;
}

/* ===== Health Check Banner ===== */
.health-banner {
  margin: 12px 0 16px;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid;
  font-size: 13px;
}

.health-ok {
  background: #0f291a;
  border-color: #22c55e44;
  color: #22c55e;
  display: flex;
  align-items: center;
  gap: 8px;
}

.health-issues {
  background: #1a1510;
}

.health-header {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #f59e0b;
  margin-bottom: 8px;
}

.health-refresh {
  margin-left: auto;
  background: transparent;
  border: 1px solid #334155;
  color: #94a3b8;
  border-radius: 4px;
  padding: 4px;
  cursor: pointer;
  display: flex;
}

.health-refresh:hover {
  border-color: #64748b;
  color: #f1f5f9;
}

.health-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.health-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 2px 0;
}

/* ===== Analytics Tab ===== */
.analytics-tab {
  margin-top: 16px;
}

.analytics-summary {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.analytics-card {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 10px;
  padding: 16px 20px;
  text-align: center;
  min-width: 100px;
  flex: 1;
  color: #64748b;
}

.analytics-card-num {
  font-size: 28px;
  font-weight: 700;
  color: #f8fafc;
  margin: 4px 0;
}

.analytics-card-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Timeline chart */
.analytics-timeline {
  margin-bottom: 24px;
}

.analytics-timeline h3 {
  font-size: 14px;
  color: #94a3b8;
  margin: 0 0 12px;
}

.timeline-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 80px;
  padding: 0 4px;
  background: #0f172a;
  border-radius: 8px;
  border: 1px solid #1e293b;
  overflow: hidden;
}

.timeline-bar-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
}

.timeline-bar {
  width: 100%;
  min-height: 2px;
  background: #3b82f6;
  border-radius: 2px 2px 0 0;
  transition: height 0.3s;
}

.timeline-date {
  font-size: 8px;
  color: #475569;
  margin-top: 2px;
}

/* Per-story analytics */
.analytics-stories h3 {
  font-size: 14px;
  color: #94a3b8;
  margin: 0 0 12px;
}

.analytics-story-card {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 8px;
}

.analytics-story-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.analytics-story-title {
  font-weight: 600;
  font-size: 14px;
  color: #f1f5f9;
}

.analytics-story-views {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #94a3b8;
}

.analytics-trend {
  color: #22c55e;
  font-size: 12px;
}

.analytics-story-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: #64748b;
  margin-bottom: 10px;
}

.analytics-chapter-bars {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.analytics-ch-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.analytics-ch-label {
  font-size: 11px;
  color: #64748b;
  min-width: 35px;
  text-align: right;
}

.analytics-ch-bar-bg {
  flex: 1;
  height: 8px;
  background: #0f172a;
  border-radius: 4px;
  overflow: hidden;
}

.analytics-ch-bar {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
  border-radius: 4px;
  min-width: 4px;
  transition: width 0.3s;
}

.analytics-ch-count {
  font-size: 11px;
  color: #94a3b8;
  min-width: 20px;
}


/* ===== TOC Tab ===== */
.adm-toc {
  margin-top: 16px;
}

.toc-summary {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.toc-stat {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 12px 18px;
  text-align: center;
  min-width: 80px;
}

.toc-stat.orphan {
  border-color: #f59e0b;
  background: #1e1a0e;
}

.toc-stat-num {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: #f8fafc;
}

.toc-stat.orphan .toc-stat-num {
  color: #f59e0b;
}

.toc-stat-label {
  display: block;
  font-size: 11px;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

.toc-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.toc-entry {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 6px;
  overflow: hidden;
}

.toc-entry-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.15s;
}

.toc-entry-header:hover {
  background: #253346;
}

.toc-expand {
  flex-shrink: 0;
  color: #64748b;
}

.toc-thumb {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

.toc-thumb-placeholder {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #334155;
  border-radius: 4px;
  flex-shrink: 0;
  color: #64748b;
}

.toc-title {
  flex: 1;
  font-weight: 600;
  font-size: 14px;
  color: #f1f5f9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toc-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.toc-type {
  font-size: 11px;
  color: #94a3b8;
  flex-shrink: 0;
}

.toc-chapters {
  font-size: 12px;
  color: #64748b;
  flex-shrink: 0;
  min-width: 40px;
  text-align: right;
}

.toc-creator {
  font-size: 12px;
  color: #64748b;
  flex-shrink: 0;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.toc-chapters-list {
  border-top: 1px solid #334155;
  padding: 4px 0;
  margin-left: 58px;
}

.toc-chapter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  font-size: 13px;
}

.toc-ch-num {
  color: #64748b;
  font-weight: 600;
  min-width: 45px;
  flex-shrink: 0;
}

.toc-ch-title {
  color: #cbd5e1;
}

/* Orphans */
.toc-orphans {
  margin-top: 24px;
  background: #1e1a0e;
  border: 1px solid #f59e0b44;
  border-radius: 8px;
  padding: 16px;
}

.orphan-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #f59e0b;
  font-size: 15px;
  margin: 0 0 12px;
}

.orphan-section h4 {
  font-size: 12px;
  color: #94a3b8;
  margin: 8px 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.orphan-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 13px;
  color: #e2e8f0;
}

.orphan-id {
  color: #64748b;
  font-family: monospace;
  font-size: 11px;
}

.orphan-clean-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 8px 16px;
  background: #ef4444;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.orphan-clean-btn:hover:not(:disabled) {
  background: #dc2626;
}

.orphan-clean-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.toc-clean {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 12px 16px;
  background: #0f291a;
  border: 1px solid #22c55e44;
  border-radius: 8px;
  color: #22c55e;
  font-size: 14px;
}

.toc-filter {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  font-size: 13px;
  color: #94a3b8;
  cursor: pointer;
  user-select: none;
}

.toc-filter input[type="checkbox"] {
  accent-color: #64748b;
}

.toc-entry.toc-deleted {
  opacity: 0.45;
}

.toc-entry.toc-deleted .toc-title {
  text-decoration: line-through;
  color: #94a3b8;
}


/* ============================================
   PAYMENTS TAB
   ============================================ */

.adm-payments {
  margin-top: 16px;
}

/* Summary Grid */
.pay-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.pay-summary-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}

.pay-summary-card.revenue { border-left: 3px solid #22c55e; }
.pay-summary-card.revenue svg { color: #22c55e; }
.pay-summary-card.total { border-left: 3px solid #60a5fa; }
.pay-summary-card.total svg { color: #60a5fa; }
.pay-summary-card.success { border-left: 3px solid #4ade80; }
.pay-summary-card.pending { border-left: 3px solid #fbbf24; }

.pay-summary-card > div {
  display: flex;
  flex-direction: column;
}

.pay-sum-value {
  font-size: 20px;
  font-weight: 800;
  color: #f1f5f9;
}

.pay-sum-label {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 2px;
}

.pay-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.pay-dot.paid { background: #4ade80; }
.pay-dot.pending { background: #fbbf24; }

/* Filters */
.pay-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
  color: #94a3b8;
}

.pay-filters select,
.pay-filters input[type="date"] {
  padding: 6px 10px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 8px;
  color: #e2e8f0;
  font-size: 12px;
  outline: none;
}

.pay-filters select:focus,
.pay-filters input[type="date"]:focus {
  border-color: #60a5fa;
}

.pay-filter-reset {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid #334155;
  border-radius: 8px;
  color: #94a3b8;
  cursor: pointer;
  margin-left: auto;
}

.pay-filter-reset:hover {
  color: #60a5fa;
  border-color: #60a5fa;
}

/* Table */
.pay-table-wrap {
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.pay-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.pay-table thead {
  background: rgba(255, 255, 255, 0.04);
}

.pay-table th {
  padding: 10px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.pay-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: #cbd5e1;
}

.pay-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

.pay-cell-date {
  white-space: nowrap;
  font-size: 12px;
  color: #94a3b8;
}

.pay-cell-email {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.pay-cell-tier {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  text-transform: capitalize;
}

.pay-tier-from { color: #94a3b8; }
.pay-arrow { color: #475569; font-size: 11px; }
.pay-tier-to { color: #60a5fa; font-weight: 600; }

.pay-cell-amount {
  font-weight: 700;
  color: #f1f5f9;
}

.pay-provider-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}

.pay-provider-badge.stripe {
  background: rgba(99, 91, 255, 0.15);
  color: #a5b4fc;
}

.pay-provider-badge.paypal {
  background: rgba(255, 196, 57, 0.15);
  color: #fcd34d;
}

.pay-status-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  text-transform: uppercase;
}

.pay-status-badge.paid {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

.pay-status-badge.pending {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}

.pay-status-badge.other {
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8;
}

.pay-cell-invoice {
  font-family: monospace;
  font-size: 11px;
  color: #64748b;
}

.pay-loading {
  display: flex;
  justify-content: center;
  padding: 40px;
}

.pay-empty {
  text-align: center;
  padding: 40px;
  color: #64748b;
  font-size: 14px;
}

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

  .pay-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .pay-filter-reset {
    margin-left: 0;
    width: 100%;
  }

/* ============================================
   SLIDESHOW ADMIN TAB
   ============================================ */

.ss-admin { margin-top: 16px; }
.ss-loading { display: flex; justify-content: center; padding: 40px; }

.ss-settings {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  margin-bottom: 12px;
}

.ss-settings-label { font-size: 13px; color: #94a3b8; }
.ss-settings select {
  padding: 5px 10px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 6px;
  color: #e2e8f0;
  font-size: 13px;
}
.ss-settings-count {
  margin-left: auto;
  font-size: 12px;
  color: #64748b;
}

.ss-upload-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  border: 2px dashed rgba(99, 102, 241, 0.3);
  border-radius: 10px;
  color: #a5b4fc;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  margin-bottom: 14px;
}
.ss-upload-btn:hover:not(.disabled) {
}
/* Shuffle button */
.ss-shuffle-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 6px;
  color: #94a3b8;
  font-size: 12px;
  cursor: pointer;
}
.ss-shuffle-btn.on {
  border-color: #6366f1;
  color: #a5b4fc;
}

.ss-upload-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  border-color: rgba(100,100,100,0.3);
}

.ss-item.inactive {
  opacity: 0.5;
}

.ss-item-inactive {
  font-size: 10px;
  color: #f59e0b;
  font-weight: 700;
  text-transform: uppercase;
}

.ss-item-size {
  font-size: 10px;
  color: #475569;
}

/* Media type badges */
.ss-media-badge {
  position: absolute;
  bottom: 3px;
  left: 3px;
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 8px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 3px;
  text-transform: uppercase;
}
.ss-media-badge.video { background: #7c3aed; color: #fff; }
.ss-media-badge.gif { background: #f59e0b; color: #000; }

.ss-thumb {
  position: relative;
}
.ss-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Eye toggle */
.ss-eye { color: #4ade80 !important; }
.ss-eye.off { color: #64748b !important; }

.ss-list { display: flex; flex-direction: column; gap: 8px; }

.ss-item {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.15s;
.ss-item.editing { border-color: #6366f1; }

.ss-item-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
}

.ss-thumb {
  width: 80px;
  height: 60px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}
.ss-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ss-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ss-item-num { font-size: 11px; color: #64748b; font-weight: 700; }
.ss-item-caption-preview {
  font-size: 12px;
  color: #cbd5e1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ss-item-default {
  font-size: 10px;
  color: #f59e0b;
  font-weight: 700;
  text-transform: uppercase;
}

.ss-item-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.ss-item-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  background: rgba(255,255,255,0.06);
  border: 1px solid #334155;
  border-radius: 6px;
  color: #94a3b8;
  cursor: pointer;
}
.ss-item-actions button:hover { color: #e2e8f0; border-color: #60a5fa; }
.ss-item-actions button:disabled { opacity: 0.3; cursor: not-allowed; }
.ss-item-actions .ss-delete:hover { color: #f87171; border-color: #ef4444; }

/* Caption Editor */
.ss-caption-editor {
  padding: 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.ss-cap-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.ss-cap-row label {
  font-size: 12px;
  color: #94a3b8;
  flex-shrink: 0;
  width: 60px;
}
.ss-cap-row input[type="text"] {
  flex: 1;
  padding: 7px 10px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 6px;
  color: #e2e8f0;
  font-size: 13px;
  outline: none;
}
.ss-cap-row input:focus { border-color: #6366f1; }

.ss-cap-row-grid {
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.ss-cap-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ss-cap-field label {
  font-size: 11px;
  color: #64748b;
}
.ss-cap-field input[type="color"] {
  width: 32px; height: 28px;
  border: 1px solid #334155;
  border-radius: 6px;
  padding: 2px;
  cursor: pointer;
  background: none;
}

.ss-btn-group {
  display: flex;
  gap: 2px;
}
.ss-btn-group button {
  padding: 4px 8px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 4px;
  color: #94a3b8;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.1s;
}
.ss-btn-group button.active {
  background: #6366f1;
  border-color: #6366f1;
  color: #fff;
}

/* 3x3 Position Grid */
.ss-pos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  width: 90px;
}
.ss-pos-grid button {
  padding: 3px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 3px;
  color: #64748b;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
}
.ss-pos-grid button.active {
  background: #6366f1;
  border-color: #6366f1;
  color: #fff;
}

.ss-toggle {
  padding: 4px 12px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 4px;
  color: #94a3b8;
  font-size: 11px;
  cursor: pointer;
}
.ss-toggle.on {
  background: #22c55e;
  border-color: #22c55e;
  color: #fff;
}

.ss-save-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px;
  background: #6366f1;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 4px;
}
.ss-save-btn:hover { opacity: 0.9; }
.ss-save-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Delete Confirmation */
.ss-delete-confirm {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid rgba(239, 68, 68, 0.2);
  background: rgba(239, 68, 68, 0.06);
  font-size: 12px;
  color: #fca5a5;
}
.ss-delete-confirm span { flex: 1; }
.ss-delete-yes {
  padding: 5px 12px;
  background: #ef4444;
  border: none;
  border-radius: 6px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.ss-delete-yes:hover { background: #dc2626; }
.ss-delete-no {
  padding: 5px 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid #334155;
  border-radius: 6px;
  color: #94a3b8;
  font-size: 11px;
  cursor: pointer;
}
.ss-delete-no:hover { color: #e2e8f0; }

/* ============================================
   PRICING CONFIG EDITOR TAB
   ============================================ */

.pc-admin { margin-top: 16px; }
.pc-loading { display: flex; justify-content: center; padding: 40px; }

.pc-section {
  margin-bottom: 20px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 16px;
}

.pc-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: #e2e8f0;
  margin: 0 0 14px;
}

.pc-section-title svg { color: #60a5fa; }

.pc-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}

.pc-grid-4 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}

.pc-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pc-field label {
  font-size: 11px;
  color: #64748b;
  font-weight: 600;
}

.pc-field input[type="text"],
.pc-field input[type="number"],
.pc-field select {
  padding: 7px 10px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 6px;
  color: #e2e8f0;
  font-size: 13px;
  outline: none;
  width: 100%;
}

.pc-field input:focus,
.pc-field select:focus {
  border-color: #6366f1;
}

.pc-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pc-cb {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #cbd5e1;
  cursor: pointer;
}

.pc-cb input[type="checkbox"] {
  accent-color: #6366f1;
}

.pc-toggle {
  padding: 5px 14px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 6px;
  color: #94a3b8;
  font-size: 12px;
  cursor: pointer;
}
.pc-toggle.on {
  background: rgba(34, 197, 94, 0.2);
  border-color: #22c55e;
  color: #4ade80;
}

/* Tier Card */
.pc-tier-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 10px;
}

.pc-tier-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.pc-tier-id {
  font-size: 10px;
  font-family: monospace;
  color: #475569;
  background: rgba(255,255,255,0.04);
  padding: 2px 8px;
  border-radius: 4px;
}

.pc-tier-name {
  font-size: 14px;
  font-weight: 700;
  color: #f1f5f9;
  flex: 1;
}

.pc-tier-price {
  font-size: 14px;
  font-weight: 800;
  color: #4ade80;
}

/* Credit split info */
.pc-split-info {
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 8px;
  font-size: 12px;
  color: #86efac;
}
.pc-split-info.error {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}

/* Save */
.pc-save-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  background: #6366f1;
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 16px;
}
.pc-save-btn:hover { opacity: 0.9; }
.pc-save-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.pc-error {
  padding: 10px 14px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
  color: #fca5a5;
  font-size: 13px;
  margin-top: 12px;
}

.pc-saved {
  padding: 10px 14px;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 8px;
  color: #86efac;
  font-size: 13px;
  margin-top: 12px;
}

.pc-updated {
  text-align: center;
  font-size: 11px;
  color: #475569;
  margin-top: 8px;
}

/* Wallet Admin Section in User Detail */
.wallet-admin-section {
  background: rgba(245, 158, 11, 0.06);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 10px;
  padding: 12px;
  margin-top: 8px;
}

.wallet-balance-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 13px;
  color: #94a3b8;
}
.wallet-balance-row strong { color: #fbbf24; font-size: 16px; }

.wallet-adjust-row {
  display: flex;
  gap: 6px;
}

.wallet-adjust-row input {
  padding: 6px 10px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 6px;
  color: #e2e8f0;
  font-size: 12px;
  outline: none;
}

.wallet-adjust-row input[type="number"] { width: 80px; }
.wallet-adjust-row input[type="text"] { flex: 1; }

.wallet-adjust-row button {
  padding: 6px 14px;
  background: #6366f1;
  border: none;
  border-radius: 6px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.wallet-adjust-row button:disabled { opacity: 0.4; cursor: not-allowed; }

.wallet-msg {
  margin-top: 8px;
  font-size: 12px;
  color: #86efac;
}

/* ============================================
   SETTINGS / CONFIG TAB
   ============================================ */

.set-admin { margin-top: 16px; }
.set-loading { display: flex; justify-content: center; padding: 40px; }
.set-loading .spin, .set-save-btn .spin {
  animation: spin 1s linear infinite;
}

.set-section {
  margin-bottom: 20px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 16px;
}

.set-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 14px;
}

.set-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.set-field {
  padding: 10px 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  transition: border-color 0.15s;
}

.set-field.changed {
}

.set-field-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.set-field-header label {
  font-size: 12px;
  font-weight: 600;
  color: #cbd5e1;
}

.set-field-meta {
  display: flex;
  gap: 4px;
}

.set-src-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}

.set-src-badge.db {
  color: #a5b4fc;
}

.set-src-badge.env {
  background: rgba(34, 197, 94, 0.15);
  color: #86efac;
}

.set-src-badge.empty {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
}

.set-src-badge.default {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  text-transform: none;
  letter-spacing: 0.02em;
}

.set-field-input-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.set-field-input {
  flex: 1;
  padding: 8px 10px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 6px;
  color: #e2e8f0;
  font-size: 13px;
  font-family: monospace;
  outline: none;
  transition: border-color 0.15s;
}

.set-field-input:focus {
  border-color: #6366f1;
}

.set-eye-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: rgba(255,255,255,0.06);
  border: 1px solid #334155;
  border-radius: 6px;
  color: #94a3b8;
  cursor: pointer;
  flex-shrink: 0;
}

.set-eye-btn:hover {
  color: #e2e8f0;
  border-color: #6366f1;
}

.set-hint {
  font-size: 11px;
  color: #64748b;
  margin-top: 4px;
  display: block;
}

.set-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.set-save-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  background: #6366f1;
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.set-save-btn:hover:not(:disabled) { opacity: 0.9; }
.set-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.set-reload-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid #334155;
  border-radius: 10px;
  color: #94a3b8;
  font-size: 13px;
  cursor: pointer;
}

.set-reload-btn:hover {
  color: #e2e8f0;
  border-color: #64748b;
}

.set-msg {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
}

.set-msg.ok {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #86efac;
}

.set-msg.err {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}

/* Backup / Export / Import */
.set-backup-section { margin-top: 20px; }

.set-backup-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.set-export-btn, .set-import-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.set-export-btn {
  background: rgba(96, 165, 250, 0.12);
  border: 1px solid rgba(96, 165, 250, 0.3);
  color: #93c5fd;
}
.set-export-btn:hover { background: rgba(96, 165, 250, 0.2); }

.set-import-btn {
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.25);
  color: #fcd34d;
}
.set-import-btn:hover:not(:disabled) { background: rgba(251, 191, 36, 0.18); }
.set-import-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.set-backup-hint {
  font-size: 11px;
  color: #64748b;
  margin: 0;
}

/* Changelog Section */
.set-cl-add-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(192, 132, 252, 0.12);
  border: 1px dashed rgba(192, 132, 252, 0.3);
  border-radius: 8px;
  color: #c084fc;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.set-cl-add-btn:hover { background: rgba(192, 132, 252, 0.2); }

.set-cl-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: rgba(192, 132, 252, 0.05);
  border: 1px solid rgba(192, 132, 252, 0.2);
  border-radius: 8px;
}

.set-cl-form-row {
  display: flex;
  gap: 8px;
}

.set-cl-textarea {
  padding: 8px 10px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 6px;
  color: #e2e8f0;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  resize: vertical;
  min-height: 60px;
}
.set-cl-textarea:focus { border-color: #c084fc; }

.set-cl-form-actions {
  display: flex;
  gap: 8px;
}

.set-cl-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.set-cl-entry {
  padding: 10px 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
}

.set-cl-entry-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.set-cl-ver {
  font-size: 12px;
  font-weight: 700;
  font-family: monospace;
  color: #c084fc;
  background: rgba(192, 132, 252, 0.12);
  padding: 2px 8px;
  border-radius: 4px;
}

.set-cl-title {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: #e2e8f0;
}

.set-cl-date {
  font-size: 11px;
  color: #64748b;
}

.set-cl-del {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #64748b;
  cursor: pointer;
}
.set-cl-del:hover { color: #f87171; border-color: rgba(239,68,68,0.3); }

.set-cl-changes {
  margin: 0;
  padding-left: 18px;
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.6;
}

.set-cl-empty {
  font-size: 12px;
  color: #64748b;
  margin: 8px 0 0;
}



@keyframes spin { to { transform: rotate(360deg); }
/* QR Access Page */
.qra-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-main, #0f0f1a);
  padding: 20px;
}

.qra-card {
  background: var(--bg-card, #1e1e2e);
  border: 1px solid var(--border, #2a2a4a);
  border-radius: 20px;
  padding: 32px 28px;
  max-width: 420px;
  width: 100%;
  text-align: center;
}

.qra-card.error { border-color: rgba(239, 68, 68, 0.3); }
.qra-card.error svg { color: #f87171; }
.qra-card.error p { color: #fca5a5; }

.qra-card.success { border-color: rgba(34, 197, 94, 0.3); }
.qra-card.success svg { color: #4ade80; }
.qra-card.success h2 { color: #4ade80; }
.qra-card.success p { color: #86efac; }

.qra-icon { color: var(--accent, #60a5fa); margin-bottom: 12px; }

.qra-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary, #fff);
  margin: 0 0 4px;
}

.qra-type {
  font-size: 12px;
  color: var(--text-secondary, rgba(255,255,255,0.6));
  text-transform: capitalize;
  margin: 0 0 20px;
}

/* Consent */
.qra-consent {
  text-align: left;
  padding: 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border, #2a2a4a);
  border-radius: 12px;
  margin-bottom: 20px;
}

.qra-consent svg { color: #60a5fa; margin-bottom: 8px; }

.qra-consent h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #fff);
  margin: 0 0 12px;
}

.qra-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px;
  cursor: pointer;
}

.qra-checkbox input[type="checkbox"] {
  accent-color: #6366f1;
  margin-top: 2px;
  flex-shrink: 0;
}

.qra-checkbox span {
  font-size: 13px;
  color: var(--text-primary, #fff);
  line-height: 1.4;
}

.qra-checkbox.optional span { color: var(--text-secondary, rgba(255,255,255,0.7)); }
.qra-checkbox small {
  font-size: 11px;
  color: var(--text-muted, rgba(255,255,255,0.4));
  margin-left: 4px;
}

/* Actions */
.qra-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.qra-accept-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.qra-accept-btn:hover:not(:disabled) { opacity: 0.9; }
.qra-accept-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.qra-decline-btn {
  width: 100%;
  padding: 12px;
  background: transparent;
  border: 1px solid var(--border, #2a2a4a);
  border-radius: 10px;
  color: var(--text-secondary, rgba(255,255,255,0.6));
  font-size: 14px;
  cursor: pointer;
}
.qra-decline-btn:hover { border-color: var(--text-secondary); color: var(--text-primary); }

.qra-home-btn {
  margin-top: 16px;
  padding: 10px 24px;
  background: var(--accent, #60a5fa);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.auth-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--bg-page);
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  padding: 40px;
  border: 1px solid var(--border);
  position: relative;
}

.auth-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.auth-top-bar .auth-back {
  position: static;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
}

.auth-top-bar .auth-back:hover {
  color: var(--text-primary);
}

.auth-back {
  position: absolute;
  top: 20px;
  left: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s;
}

.auth-back:hover {
  color: var(--text-primary);
}

.auth-header {
  text-align: center;
  margin-bottom: 32px;
}

.auth-logo {
  color: var(--accent);
  margin-bottom: 16px;
}

.auth-logo.success {
  color: #4ade80;
}

.auth-header h1 {
  color: var(--text-primary);
  font-size: 28px;
  margin: 0 0 8px 0;
  font-weight: 600;
}

.auth-header p {
  color: var(--text-muted);
  margin: 0;
  font-size: 14px;
}

.auth-error {
  background: color-mix(in srgb, var(--error) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--error) 25%, transparent);
  color: var(--error);
  padding: 12px 16px;
  border-radius: 12px;
  margin-bottom: 24px;
  font-size: 14px;
  text-align: center;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
}

.form-group input {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text-primary);
  font-size: 16px;
  transition: all 0.2s;
}

.form-group input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-input);
}

.form-group input::placeholder {
  color: var(--text-muted);
}

.password-input {
  position: relative;
}

.password-input input {
  padding-right: 50px;
}

.password-toggle {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.password-toggle:hover {
  color: var(--text-primary);
}

.forgot-link {
  color: var(--accent);
  text-decoration: none;
  font-size: 14px;
  text-align: right;
  margin-top: -12px;
}

.forgot-link:hover {
  text-decoration: underline;
}

.user-type-select {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.type-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 16px;
  background: var(--bg-input);
  border: 2px solid var(--border);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--text-secondary);
}

.type-option:hover {
  background: var(--bg-input);
  border-color: var(--text-muted);
}

.type-option.active {
  background: var(--bg-input);
  border-color: var(--accent);
  color: var(--text-primary);
}

.type-option span {
  font-size: 16px;
  font-weight: 600;
}

.type-option small {
  font-size: 11px;
  text-align: center;
  opacity: 0.7;
}

/* Tier Selection */
.tier-select {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.tier-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  background: var(--bg-input);
  border: 2px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--text-secondary);
  text-align: center;
}

.tier-option:hover {
  background: var(--bg-input);
  border-color: var(--text-muted);
}

.tier-option.active {
  background: var(--bg-input);
  border-color: var(--accent);
  color: var(--text-primary);
}

.tier-name {
  font-size: 13px;
  font-weight: 600;
}

.tier-price {
  font-size: 14px;
  font-weight: 700;
  color: #4ade80;
}

.tier-option.active .tier-price {
  color: #86efac;
}

.tier-desc {
  font-size: 10px;
  opacity: 0.7;
  line-height: 1.3;
}

.tier-note {
  display: block;
  text-align: center;
  color: var(--text-muted);
  font-size: 11px;
  margin-top: 8px;
}

.auth-button {
  width: 100%;
  padding: 16px;
  background: var(--accent);
  border: none;
  border-radius: 12px;
  color: var(--on-accent);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 8px;
  text-decoration: none;
  text-align: center;
  display: block;
}

.auth-button:hover:not(:disabled) {
  transform: translateY(-2px);
  opacity: 0.9;
}

.auth-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.auth-footer {
  margin-top: 24px;
  text-align: center;
}

.auth-footer p {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0;
}

.auth-footer a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}

.auth-footer a:hover {
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 480px) {
  .auth-card {
    padding: 30px 24px;
  }
  
  .user-type-select {
    grid-template-columns: 1fr;
  }
}

/* Code input for verification / 2FA */
.code-input {
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 8px;
  font-family: monospace;
  padding: 16px;
}

.twofa-email {
  color: var(--accent);
  font-weight: 600;
  font-size: 15px;
  margin-top: 4px;
}

.resend-link {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 14px;
  padding: 0;
  text-decoration: underline;
}

.resend-link:hover {
  opacity: 0.8;
}
.rp-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 16px 24px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(3px);
  animation: rp-fade 180ms ease-out;
}

@media (min-width: 640px) {
  .rp-backdrop {
    align-items: center;
    padding: 24px;
  }

.rp-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--bg-card, #1a1a2e);
  color: var(--text-primary, #fff);
  border: 1px solid var(--border, #333);
  border-radius: 16px;
  padding: 20px 20px 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  animation: rp-pop 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.rp-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--text-muted, #888);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.rp-close:hover { background: rgba(255, 255, 255, 0.06); color: var(--text-primary, #fff); }

.rp-body { display: flex; flex-direction: column; gap: 10px; }

.rp-title {
  margin: 4px 0 2px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
}

.rp-desc {
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-muted, #cbd5e1);
}

.rp-input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1.5px solid var(--border, #333);
  background: var(--bg-input, rgba(255,255,255,0.04));
  color: var(--text-primary, #fff);
  font-size: 15px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.rp-input:focus {
  border-color: var(--accent, #4CAF50);
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.18);
}

.rp-code-input {
  text-align: center;
  letter-spacing: 8px;
  font-size: 22px;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.rp-error {
  color: #f87171;
  font-size: 13px;
  margin-top: -2px;
}

.rp-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.rp-cta {
  width: 100%;
  padding: 12px 16px;
  border-radius: 10px;
  border: 0;
  background: var(--accent, #4CAF50);
  color: var(--on-accent, #fff);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 0.1s, filter 0.15s, opacity 0.15s;
}
.rp-cta:hover { filter: brightness(1.05); }
.rp-cta:active { transform: translateY(1px); }
.rp-cta:disabled { opacity: 0.7; cursor: wait; }

.rp-later {
  width: 100%;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted, #94a3b8);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.rp-later:hover { background: rgba(255, 255, 255, 0.04); color: var(--text-primary, #fff); }

.rp-done {
  align-items: center;
  text-align: center;
}
.rp-done .rp-title { margin-top: 6px; }
.rp-done > svg { color: var(--accent, #4CAF50); }

.rp-spin { animation: rp-rotate 0.9s linear infinite; }

@keyframes rp-fade {
  from { opacity: 0; }
  to { opacity: 1; }

@keyframes rp-pop {
  from { transform: translateY(18px) scale(0.98); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }

@keyframes rp-rotate {
  to { transform: rotate(360deg); }
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  background-color: var(--bg-page, #1a1a2e);
  color: var(--text-primary, #fff);
  min-height: 100vh;
}

.container {
  max-width: 600px;
  margin: 0 auto;
  min-height: 100vh;
  padding: 0 16px;
  background-color: var(--bg-page, #1a1a2e);
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--border, #2a2a4a);
  position: sticky;
  top: 0;
  background-color: var(--bg-page, #1a1a2e);
  z-index: 100;
}

.header-title {
  font-size: 18px;
  font-weight: 600;
}

.header-btn {
  background: none;
  border: none;
  color: var(--text-primary, #fff);
  cursor: pointer;
  padding: 8px;
}

.header-right {
  display: flex;
  gap: 12px;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 80vh;
  gap: 16px;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border, #2a2a4a);
  border-top-color: var(--accent, #e94560);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  padding: 16px 24px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  transition: transform 0.2s, opacity 0.2s;
}

.btn-primary:hover {
  transform: scale(1.02);
}

.btn-primary:active {
  transform: scale(0.98);
}

.btn-secondary {
  background-color: var(--bg-input);
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 16px 24px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  transition: background-color 0.2s;
}

.btn-secondary:hover {
  background-color: var(--border);
}

.btn-small {
  padding: 8px 16px;
  font-size: 14px;
  border-radius: 8px;
}

.btn-icon {
  background: none;
  border: none;
  color: var(--text-primary, #fff);
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: background-color 0.2s;
}

.btn-icon:hover {
  background-color: var(--bg-input, #2a2a4a);
}

@keyframes spin {
  to { transform: rotate(360deg); }