/* ------------------------------------------------------------------
   Theme adapted from provided `styles.css` (Midnight Pounce look)
   Applied to Pass The Quill frontend components and classes
------------------------------------------------------------------- */
:root{
  --bg-color: #0f172a;
  --card-bg: #0f172a; /* fallback */
  --panel-bg: #0f172a;
  --panel-contrast: #111827;
  /* distinct background/border for interaction cards (picker + comments) */
  --interactions-bg: #1e293b; /* slightly lighter than panel-contrast */
  --interactions-border: #2c3342;
  --text-primary: #e6eef8;
  --text-secondary: #9aa7bb;
  --accent: #38bdf8;
  --accent-strong: #00d2ff;
  --card-border: #1f2937;
  --nav-text: #94a3b8;
  --nav-height: 72px;

  /* Toast themeable defaults (dark/default theme values) */
  --toast-bg: rgba(17,24,39,1);
  --toast-text: var(--text-primary);
  --toast-border: rgba(255,255,255,0.04);

  --toast-success-gradient: linear-gradient(180deg, rgba(16,185,129,0.08), rgba(16,185,129,0.03));
  --toast-error-gradient: linear-gradient(180deg, rgba(239,68,68,0.12), rgba(239,68,68,0.06));
  --toast-warn-gradient: linear-gradient(180deg, rgba(245,158,11,0.06), rgba(245,158,11,0.02));
  --toast-info-gradient: linear-gradient(180deg, rgba(56,189,248,0.10), rgba(56,189,248,0.04));

  --toast-success-border: rgba(16,185,129,0.12);
  --toast-error-border: rgba(239,68,68,0.22);
  --toast-warn-border: rgba(245,158,11,0.12);
  --toast-info-border: rgba(56,189,248,0.22);

    /* By default let success text follow the general toast text color so
      themes can decide whether it should be light or dark. */
    --toast-success-text: var(--toast-text);
  --toast-box-shadow-info: rgba(56,189,248,0.06);
  /* Favorite (star) color - theme-aware variable; defaults to gold/yellow */
  --favorite-color: #f5c542;
  /* Link colors: primary and muted (visited) to keep visited links toned down.
     These colors must never match --text-primary or --text-secondary so that
     links remain visually distinct under every theme.  The default is based on
     the dark theme accent, and individual themes override for their own
     palettes. */
  --link-color: var(--accent);
  --link-visited-color: rgba(56,189,248,0.6); /* semi‑transparent accent */

  /* helper colors that can vary per theme */
  --accent-text: #000;
  --danger-bg: #ff4d4f;
  --danger-text: #fff;
  --btn-primary-border: rgba(0,0,0,0.08);
  --btn-focus-shadow: 0 6px 18px rgba(2,6,23,0.12);
  --btn-shadow: 0 6px 18px rgba(2,6,23,0.10);
  --btn-hover-shadow: 0 10px 28px rgba(2,6,23,0.14);
  --btn-active-shadow: 0 6px 18px rgba(2,6,23,0.10);
  --shadow-color: rgba(2,6,23,0.6);
  --overlay-bg: rgba(2,6,23,0.85);
  --overlay-light-bg: rgba(255,255,255,0.02);
  --subtle-border: rgba(255,255,255,0.02);
  --subtle-border-strong: rgba(255,255,255,0.01);
  --subtle-border-extra: rgba(255,255,255,0.03);
  --slider-track-bg: #163148;
  --slider-thumb-bg: #ffffff;
  --slider-thumb-border: #1666c1;
  --slider-thumb-shadow: 0 1px 3px rgba(0,0,0,0.4);
  --slider-max-thumb-bg: #2f78d6;
  --slider-max-thumb-border: #ffffff;
  --editor-badge-text: #111;
  --editor-badge-chapter-bg: #fffa8d;
  --editor-badge-final-bg: #ffb3b3;
  --border-dashed: #444;
  --rule-hover-shadow: rgba(0,0,0,0.1);
  --quick-header-border: #444;
  --quick-shadow: rgba(0,0,0,0.5);
  --input-bg: rgba(255,255,255,0.01);
  --input-border: rgba(255,255,255,0.06);
  --spinner-border: rgba(255,255,255,0.04);
  --select-focus-shadow: 0 6px 20px rgba(2,6,23,0.35);

  /* admin hidden badge colors */
  --hidden-badge-bg: #f1c40f;
  --hidden-badge-text: #111;
  --hidden-badge-border: rgba(241,196,15,0.2);
  --validation-error-color: #ff6b6b;
  --input-focus-shadow: 0 8px 20px rgba(56,189,248,0.06);
  --highlight-border: rgba(56,189,248,0.18);
  --highlight-bg-gradient: linear-gradient(180deg, rgba(56,189,248,0.02), rgba(56,189,248,0.01));
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: var(--bg-color);
  color:var(--text-primary);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}

/* Container used across pages */
.container{max-width:1000px;margin:28px auto;padding:0 20px}

/* author filter banner shown on books page */
/* use theme variables so the banner blends with light/dark modes */
.filter-banner {
  padding: 0.5rem 1rem;
  background: var(--filter-banner-bg, var(--panel-contrast));
  color: var(--filter-banner-text, var(--text-secondary));
  border-left: 4px solid var(--accent);
  margin-bottom: 1rem;
  font-size: 0.95rem;
}
.filter-banner .btn.small {
  font-size: 0.8rem;
  margin-left: 0.5rem;
}

/* clickable author links used in story and editing modals */
.author-filter-link {
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}

/* About page layout: image on the left, text to the right.
   Keep the original spacing but increase the image size itself. */
.about-card .about-inner{display:flex;gap:24px;align-items:center}
.about-card .about-image img{max-width:420px;height:auto;border-radius:8px;flex-shrink:0}
.about-card .about-text{flex:1}
@media (max-width:700px){
  .about-card .about-inner{flex-direction:column}
  .about-card .about-image img{width:100%;max-width:100%}
}

/* About page large logo */
.about-logo{display:block;margin:0 auto 18px;max-width:760px;width:100%;height:auto}

/* ── Login page ── */
.login-page{text-align:center;padding:20px 0}
.card:has(.login-page){max-width:540px;margin-left:auto;margin-right:auto}
.login-logo{display:block;margin:0 auto 18px;max-width:400px;width:100%;height:auto}
.login-header h1{margin:0 0 8px;font-size:1.6rem;color:var(--text-primary)}
.login-subtitle{color:var(--text-secondary);margin:0 0 28px;font-size:1rem}
.login-options{display:flex;flex-direction:column;gap:12px;max-width:400px;margin:0 auto}
.login-option{
  display:flex;align-items:center;gap:14px;
  padding:14px 20px;border-radius:10px;
  border:1px solid var(--card-border);
  background:var(--panel-contrast);
  color:var(--text-primary);
  text-decoration:none;font-weight:600;font-size:1rem;
  transition:transform 160ms ease,box-shadow 160ms ease,border-color 160ms ease;
  cursor:pointer;
}
.login-option:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 20px var(--shadow-color);
  border-color:var(--accent);
}
.login-option:active{transform:translateY(0)}
.login-option-icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;flex-shrink:0}
.login-option-icon svg{display:block}
.login-option-label{flex:1;text-align:left}
.login-footer-note{margin-top:24px;font-size:0.85rem;color:var(--text-secondary)}
.login-error{background:var(--error-bg,#fef2f2);color:var(--error-text,#b91c1c);border:1px solid var(--error-border,#fecaca);border-radius:8px;padding:12px 16px;margin:12px 0 8px;font-size:0.9rem;text-align:center}

/* Redirect pages shown while Cloudflare/OpenID completes authentication */
.auth-redirect{display:flex;align-items:center;justify-content:center;height:100vh;flex-direction:column;text-align:center}
.auth-redirect p{margin:6px 0}


/* page header containing title and optional new-story card */
.page-header{
  display:flex;
  align-items:center;
  justify-content:flex-start; /* keep title and button together on left */
  gap:16px;
}

/* genre filter control shown on stories list when multiple genres exist */
.genre-filter{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto; /* push it to the right of the header row */
  font-size:0.9rem;
  color: var(--text-secondary);
}
.genre-filter summary{
  list-style: none;
  outline: none;
}
/* position anchor for absolute menu */
.genre-filter{
  position: relative;
}

/* toggle button */
.genre-toggle{
  background: var(--panel-contrast);
  border: 1px solid var(--card-border);
  color: var(--text-primary);
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
}
.genre-toggle:hover{
  background: var(--panel-bg);
}

.genre-menu{
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--panel-contrast);
  border: 1px solid var(--card-border);
  border-radius: 4px;
  box-shadow: 0 4px 16px var(--shadow-color);
  z-index: 100;
  min-width: 160px; /* wider to avoid wrapping long genres */
  padding: 8px 0;
  opacity: 0;
  transform-origin: top right;
  transform: scale(0.95);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.genre-menu.open{
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.genre-menu label{
  color: var(--text-primary);
  padding: 0 12px;
}

/* ensure inner inputs align nicely */
.genre-menu input[type="checkbox"]{ margin-right:6px; }
.genre-filter label{
  cursor:pointer;
}
.genre-filter input[type="checkbox"]{
  margin-right:4px;
}
.page-header .book-card.new-story{
  /* equal-width action cards in the header regardless of label length */
  flex:1 0 0;
  max-width:220px;
  margin-left:8px; /* small separation from header text */
}

.admin-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 12px;
  border-bottom: 1px solid var(--card-border);
}
.admin-item:last-child {
  border-bottom: none;
}
.content-preview {
  font-size: 0.9em;
  color: var(--text-secondary);
  border-left: 2px solid var(--card-border);
  padding-left: 8px;
  margin-top: 4px;
  white-space: pre-wrap;
}
.btn-group {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.badge-error {
  background: var(--error-red);
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.8em;
}

/* Header (keeps .app-header used by app) */
.app-header{
  display:flex;
  align-items:center;
  justify-content:center; /* center everything horizontally */
  gap: 24px;
  /* allow header to grow slightly to accommodate a larger logo */
  min-height:var(--nav-height);
  padding:18px 24px;
  background: var(--panel-contrast);
  position:sticky;top:0;z-index:1000;
  border-bottom:1px solid var(--card-border);
  backdrop-filter:blur(6px);
}

/* Logo image styling moved from inline HTML; larger by default */
.logo-img, .app-header .logo img { height:72px; display:inline-block; vertical-align:middle }
@media (max-width:900px) { .logo-img, .app-header .logo img { height:56px } }
@media (max-width:700px) { .logo-img, .app-header .logo img { height:40px } }

/* When logo is inline inside nav, add slight spacing and center alignment */
.nav-links .logo { display:flex; align-items:center; margin-right:10px }
.nav-links .logo img { display:block }
.app-header .logo{
  font-weight:800;font-size:1.05rem;letter-spacing:0.6px;
  color:var(--text-primary);display:inline-flex;align-items:center;gap:8px;
}
.app-header .logo:hover{color:var(--accent);text-decoration:none}

.app-header .nav-links{display:flex;align-items:center;gap:18px;justify-self:center}
.app-header .nav-links .nav-menu{display:flex;align-items:center;gap:18px}
.app-header .nav-links a{color:var(--nav-text);font-weight:600;font-size:.95rem}
.app-header .nav-links a:hover{color:var(--accent);text-decoration:none}

/* Hamburger button - hidden on desktop */
.hamburger{display:none;background:none;border:none;cursor:pointer;padding:6px;flex-direction:column;gap:5px;z-index:1001}
.hamburger span{display:block;width:24px;height:3px;background:var(--nav-text);border-radius:2px;transition:transform .25s ease,opacity .25s ease}
.hamburger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* Cards and panels */
.card{background:var(--panel-contrast);
  padding:16px;border-radius:8px;border:1px solid var(--card-border);margin:12px 0;color:var(--text-primary)}

/* Modal overlay & dialog used by admin full-story viewer */
.modal-overlay{
  position:fixed;
  inset:0;
  /* darker overlay */
  background: var(--overlay-bg);
  display:flex;
  align-items:center; /* center modal vertically when possible */
  justify-content:center;
  /* allow a small gap to the top on very short viewports */
  padding:3vh 16px;
  z-index:2000;
  overflow-y:auto;
}

.modal-dialog{
  /* size to content horizontally when possible, but cap at a sensible max */
  width: auto;
  max-width: 960px; /* default maximum for larger modals */
  box-sizing: border-box;
  height: auto; /* size to content, up to the max-height below */
  /* fully opaque background for modal */
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: 0 20px 60px var(--shadow-color);
  /* cap height to viewport but otherwise allow content to determine height */
  max-height:92vh;
  overflow-y:auto;
  position:relative;
  margin: 0 auto;
}

/* Modifier for compact modals (like quick-start) */
.modal-dialog.modal-compact{ max-width:450px }

/* Modifier for explicitly wide modals (like full story) */
.modal-dialog.modal-wide{ max-width:960px }

.modal-dialog .eula-box{
  width:100%;
  box-sizing:border-box;
  /* Let the modal itself control vertical scrolling; avoid an inner
     independently scrolling region which creates nested scrollbars. */
  max-height: none;
  overflow: visible;
  white-space:normal; /* avoid rendering literal newlines between entries */
  word-break:break-word;
  /* inner box should also be opaque inside the modal */
  background: var(--panel-contrast);
  border: 1px solid var(--card-border);
  padding:12px;
  border-radius:8px;
}

/* Constrain the New Story chooser so it doesn't span the full viewport width */
.new-story-chooser .new-story-chooser-box{
  max-width:520px;
  width:100%;
  margin:0 auto;
  padding:18px;
  box-shadow:0 12px 36px var(--shadow-color);
}

.new-story-chooser .flex-col{ display:flex; flex-direction:column; gap:10px }

/* reuseable entry content styling (applies inside editor and modal) */
.entry-content{background:transparent;padding:0;color:var(--text-primary)}

.modal-dialog h3{margin:0 8px 8px 0;display:inline-block}

.modal-dialog .btn{margin-left:12px}

/* small close icon used in modal header */
.modal-close{
  background:transparent;
  border:0;
  color:var(--text-secondary);
  font-size:20px;
  line-height:1;
  padding:6px 8px;
  border-radius:6px;
  cursor:pointer;
}
.modal-close:hover{color:var(--text-primary);background:var(--overlay-light-bg)}

.center{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px} 

/* Search row for stories page */
.search-row{margin:12px 0 4px /* add vertical space above header buttons */}
.search-input{
  width:100%;
  max-width:400px;
  padding:8px 12px;
  border:1px solid var(--card-border);
  border-radius:8px;
  background:var(--panel-contrast);
  color:var(--text-primary);
  font-size:0.95rem;
  outline:none;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.search-input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-glow);
}
.search-input::placeholder{color:var(--text-secondary);opacity:0.7}

/* Pagination controls */
.pagination-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:20px 0 8px;
}
.pagination-controls.hidden{display:none}
.pagination-btn{
  background:var(--panel-contrast);
  border:1px solid var(--card-border);
  color:var(--text-primary);
  padding:6px 14px;
  border-radius:8px;
  cursor:pointer;
  font-weight:600;
  font-size:0.9rem;
  transition:background .18s ease,border-color .18s ease,opacity .18s ease;
}
.pagination-btn:hover:not(:disabled){
  background:var(--panel-bg);
  border-color:var(--accent);
}
.pagination-btn:disabled{
  opacity:0.4;
  cursor:not-allowed;
}
.pagination-info{
  font-size:0.9rem;
  color:var(--text-secondary);
  font-weight:600;
  min-width:100px;
  text-align:center;
}

/* Book grid / cards */
.book-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-top:16px}
.book-card{position:relative;background:var(--panel-contrast);padding:10px;border-radius:8px;border:1px solid var(--card-border);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease;min-height:120px;display:flex;flex-direction:column}
.book-card:hover{transform:translateY(-6px);box-shadow:0 8px 30px var(--shadow-color)}
.book-card.disabled{opacity:0.45;cursor:pointer /* show hand instead of red circle */}

/* message shown when a user can't contribute to a story */
.cannot-edit-notice {
  margin: 1.5rem 0;
  padding: 1rem;
  background: #f8f8f8;
  border: 1px solid #ddd;
  color: #555;
  text-align: center;
  font-style: italic;
}
.book-card.new-story{display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:18px;color:var(--accent)}

/* Card header: title+genre inline with favorite star on the right */
.card-header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.card-header h3{flex:1 1 0;min-width:0}
.book-card h3{margin:0;font-size:0.95rem;line-height:1.35}
.genre-inline{font-weight:400;color:var(--text-secondary);font-size:0.85rem}
.book-card .genre{margin:0}
/* Card description - grows to fill available space when secondary row is empty */
.card-description{margin:6px 0 0;font-size:0.82rem;color:var(--text-secondary);line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto}
.card-description:empty{display:none}
/* Secondary info row for badges */
.card-secondary{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:8px;min-height:0}
.card-secondary:empty{display:none}

/* Slightly tighten the new-story card layout */
.book-card.new-story .new-icon{font-size:28px;margin-bottom:6px}
.book-card.new-story h3{margin:0}

/* subtle visual treatment for completed books (noticeable but not dramatic) */
.book-card.completed{filter:grayscale(14%);opacity:0.92;border-color:var(--subtle-border-strong);background:var(--panel-contrast);box-shadow:inset 0 1px 0 var(--subtle-border-strong);border-left:4px solid var(--subtle-border-extra)}
.book-card.completed:hover{transform:translateY(-4px);box-shadow:0 8px 28px var(--shadow-color)}
.book-card.completed .genre{color:var(--text-secondary)}

/* word-count badge */
.word-count-badge{font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;background:var(--accent);color:var(--accent-text);white-space:nowrap}

/* Chaos mode badge on book cards */
.chaos-badge{font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;background:linear-gradient(135deg,#ff6b6b,#feca57,#48dbfb,#ff9ff3);color:#111;cursor:help;user-select:none;animation:chaos-shimmer 3s ease-in-out infinite;border:1px solid rgba(255,255,255,0.3);white-space:nowrap;flex-shrink:0}
@keyframes chaos-shimmer{0%,100%{filter:hue-rotate(0deg) brightness(1)}50%{filter:hue-rotate(30deg) brightness(1.1)}}

/* Chaos mode toggle button on new story form */
.chaos-toggle-row{margin-bottom:16px;display:flex;align-items:center;gap:12px}
.chaos-btn{background:var(--panel-contrast);color:var(--text-primary);border:2px dashed var(--border-dashed);padding:10px 20px;border-radius:12px;font-size:1.05rem;font-weight:700;cursor:pointer;transition:all 200ms ease}
.chaos-btn:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,0.2)}
.chaos-btn[aria-pressed="true"]{background:linear-gradient(135deg,#ff6b6b,#feca57,#48dbfb,#ff9ff3);color:#111;border:2px solid rgba(255,255,255,0.4);box-shadow:0 0 20px rgba(255,107,107,0.3),0 0 40px rgba(72,219,251,0.15);animation:chaos-shimmer 3s ease-in-out infinite}
.chaos-btn[aria-pressed="true"]:hover{transform:translateY(-2px);box-shadow:0 0 28px rgba(255,107,107,0.4),0 0 48px rgba(72,219,251,0.2)}

/* Chaos instructions tooltip */
.chaos-tooltip{position:absolute;z-index:100;background:var(--card-bg);border:1px solid var(--card-border);border-radius:10px;padding:16px 20px;max-width:340px;box-shadow:0 12px 40px var(--shadow-color);font-size:0.88rem;line-height:1.5;color:var(--text-primary)}
.chaos-tooltip h4{margin:0 0 8px;font-size:1rem;color:var(--accent)}
.chaos-tooltip ul{margin:4px 0 0;padding-left:18px}
.chaos-tooltip li{margin-bottom:4px}
.chaos-tooltip .close-tooltip{position:absolute;top:6px;right:10px;background:transparent;border:none;color:var(--text-secondary);cursor:pointer;font-size:1.1rem;line-height:1}

/* Disabled state for chaos-locked controls */
.chaos-disabled{opacity:0.35;pointer-events:none;user-select:none}

/* Chaos mode overlay dialog */

/* Chaos mode overlay dialog */
.chaos-overlay-box{max-width:440px;text-align:left}
.chaos-overlay-box h2{margin:0 0 12px;font-size:1.3rem}
.chaos-overlay-box ul{margin:8px 0 0;padding-left:18px}
.chaos-overlay-box li{margin-bottom:6px}

.new-icon{font-size:28px}
.badge{background:var(--overlay-light-bg);padding:3px 8px;border-radius:6px;font-size:11px;color:var(--text-secondary);white-space:nowrap}
.badge.muted{background:transparent;color:var(--text-secondary)}

/* Favorite toggle (star) – sits inside .card-header via flexbox */
.favorite-toggle{
  color: var(--text-secondary);
  background: transparent;
  border: none;
  padding: 2px 0;
  font-size: 1.1rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: color 120ms ease, transform 120ms ease;
}
.favorite-toggle:hover{ color: var(--favorite-color); transform: scale(1.06); }
.favorite-toggle.favorited{ color: var(--favorite-color); }
.hide-toggle{
  /* Container to group small header action buttons (favorite + hide) */
  .card-header-actions{display:inline-flex;align-items:center;gap:6px;flex-shrink:0}
  color: var(--text-secondary);
  background: transparent;
  border: none;
  padding: 2px 0;
  font-size: 1.1rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: color 120ms ease, transform 120ms ease;
}
.hide-toggle:hover{ color: var(--danger); transform: scale(1.06); }

.book-edit-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.book-edit-header-title h1{margin:0;font-size:1.5rem}
.book-edit-meta{margin:4px 0 0;color:var(--text-secondary);font-size:0.9rem}
.book-edit-actions{display:flex;align-items:center;gap:8px}

.hidden-stories-list{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.hidden-story-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border:1px solid var(--card-border);border-radius:12px;background:var(--card-bg);box-shadow:0 4px 20px rgba(0,0,0,0.05)}
.hidden-story-info strong{display:block;font-size:1rem}
.hidden-story-meta{color:var(--text-secondary);font-size:0.82rem;margin-top:2px}
.hidden-story-actions .btn{padding:6px 12px;font-size:0.82rem}


/* Progress row: bar + percentage label side by side */
.progress-row{display:flex;align-items:center;gap:8px;margin-top:8px}
.progress-bar{flex:1;height:8px;background:var(--overlay-light-bg);border-radius:999px;position:relative;border:1px solid var(--overlay-light-bg)}
.progress-pct{font-size:11px;color:var(--text-secondary);font-weight:600;white-space:nowrap;min-width:2.2em;text-align:right}
.progress-fill{width:var(--fill-width,0%);height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-strong));border-radius:999px}

/* Buttons */
.btn{padding:8px 12px;border-radius:8px;border:0;cursor:pointer;font-weight:700;box-shadow:var(--btn-shadow);transition:transform 140ms ease,box-shadow 140ms ease}
.btn:hover{transform:translateY(-2px);box-shadow:var(--btn-hover-shadow)}
.btn:active{transform:translateY(0);box-shadow:var(--btn-active-shadow)}
.btn.primary{background:var(--accent);color:var(--accent-text)}
.btn.secondary{background:transparent;border:1px solid var(--subtle-border);color:var(--text-primary)}
.btn.danger{background:var(--danger-bg);color:var(--danger-text)}

/* Spinner */
.spinner{width:36px;height:36px;border:4px solid var(--spinner-border);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* EULA / large scroll areas */
.eula-box{
  width:100%;
  height:auto; /* allow box to size to its content */
  /* By default cap long EULA content to the viewport and allow internal
     scrolling when the box is used outside of a modal. Modal usage is
     specially handled by the rule above which disables inner scrolling. */
  max-height:calc(92vh - 160px); /* but cap to viewport for very long content */
  overflow-y:auto;
  border:1px solid var(--card-border);
  padding:12px;
  background:var(--panel-contrast);
  border-radius:8px;
  color:var(--text-secondary);
}
/* shared-story pages should flow with the rest of the document rather than
   confining content to an independently scrolling box.  override the generic
   eula-box behaviour when the modifier class is present. */
.eula-box.shared-story {
  max-height: none;
  overflow: visible;
}
.eula-box .eula-text{white-space:pre-wrap;word-break:break-word}

.important-caps { font-weight: bold; text-transform: uppercase; }

/* Provide modest, consistent spacing so entries read as a continuous
   narrative but aren't visually scrunched. */
.eula-box p,
.eula-box .eula-text p,
.eula-box .entry-content p {
  margin: 0 0 0.6em;
  padding: 0;
}

.eula-box h1,
.eula-box h2,
.eula-box h3 {
  margin: 0.6em 0 0.3em;
  padding: 0;
}

/* Slightly reduce spacing between directly adjacent paragraphs */
.eula-box p + p,
.eula-box .entry-content p + p {
  margin-top: 0.4em;
}

/* Comfortable line-height for readability */
.eula-box,
.eula-box .entry-content {
  line-height: 1.6;
}
/* Rich editor */
.rich-editor .ql-toolbar{background:transparent;border:1px solid var(--subtle-border);border-radius:6px}
.rich-editor .ql-container{min-height:140px;background:transparent;border:1px solid var(--subtle-border);border-radius:6px}
.character-count{font-size:12px;color:var(--text-secondary)}

/* Button styles (used on editing page) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 12px;border-radius:8px;border:1px solid transparent;cursor:pointer;font-weight:600;line-height:1;transition:all 160ms ease;min-height:36px}
.btn:focus{outline:none;box-shadow:var(--btn-focus-shadow)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:0.5;cursor:not-allowed;transform:none}
.btn-primary{background:var(--accent);color:var(--accent-text);border-color:var(--btn-primary-border);box-shadow:0 6px 20px var(--accent-glow)}
.btn-primary:hover{filter:saturate(1.08);transform:translateY(-1px)}
.btn-secondary{background:transparent;color:var(--text-primary);border:1px solid var(--input-border)}
.btn-secondary:hover{background:var(--overlay-light-bg);transform:translateY(-1px)}
.btn-sm{padding:4px 8px;font-size:0.85em;min-height:28px}


/* Misc form fields */
.field{margin-bottom:12px}
/* Inputs: make text inputs visually distinct while respecting theme variables */
input[type="text"],textarea,input[type="number"]{
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  padding:10px;border-radius:6px;color:var(--text-primary);width:100%;
  transition:box-shadow .14s ease, border-color .14s ease, transform .08s ease;
}

input[type="text"]::placeholder, textarea::placeholder{ color: var(--text-secondary); }

input[type="text"]:focus, textarea:focus, input[type="number"]:focus{
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--input-focus-shadow);
}

/* Slightly darker input when inside highlight-field to read as a stable control */
.highlight-field input[type="text"], .highlight-field textarea{
  background: var(--overlay-light-bg);
  border-color: var(--highlight-border);
}

/* Left-aligned label rows for the new-story form */
.label-row{display:flex;align-items:flex-start;gap:12px}
.label-row .left-label{width:120px;flex:0 0 120px;text-align:right;padding-right:12px;color:var(--text-secondary);margin-top:10px}
.label-row input[type="text"],.label-row textarea{flex:1;min-width:0}

label{color:var(--text-secondary);display:block;margin-bottom:6px}

/* Two-column form row: used on account creation to lay out paired fields */
.form-row.two-column{display:flex;gap:20px;align-items:flex-start}
.form-row.two-column .field{margin-bottom:0;flex:1;min-width:0}
.form-row.two-column .field input{width:100%}
.field-column label{display:block;margin-bottom:6px}

@media (max-width:700px){
  .form-row.two-column{flex-direction:column}
}

/* Visual cue for inputs that have a datalist (dropdown suggestions) */
.input-with-dropdown{position:relative}
.input-with-dropdown input[type="text"]{padding-right:44px}
.input-with-dropdown .dropdown-trigger{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  background:transparent;border:0;color:var(--text-secondary);font-size:18px;line-height:1;padding:6px;border-radius:6px;cursor:pointer
}
.input-with-dropdown .dropdown-trigger:hover{color:var(--text-primary);background:var(--overlay-light-bg)}
.input-with-dropdown .dropdown-trigger:focus{outline:none;box-shadow:var(--btn-focus-shadow)}
/* Custom datalist popup (non-native) */
.custom-datalist{position:absolute;right:0;left:0;top:100%;margin-top:8px;background:var(--panel-contrast);border:1px solid var(--card-border);border-radius:8px;box-shadow:0 10px 30px var(--shadow-color);z-index:1200;display:none;max-height:220px;overflow:auto}
.custom-datalist.open{display:block}
.custom-datalist-list{list-style:none;margin:0;padding:6px 0}
.custom-datalist-item{padding:8px 12px;cursor:pointer;color:var(--text-primary)}
.custom-datalist-item:hover,.custom-datalist-item:focus{background:var(--overlay-light-bg);outline:none;color:var(--text-primary)}
.custom-datalist-empty{padding:8px 12px;color:var(--text-secondary)}


/* Highlight important identifying fields on account creation */
.highlight-field{border:1px solid var(--highlight-border);background:var(--highlight-bg-gradient);padding:10px;border-radius:8px}
.highlight-field label{color:var(--accent);font-weight:700}

/* Ensure paired fields align: same min height and vertically centered content */
.form-row.two-column .field{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:64px;
}
.form-row.two-column .field .muted{margin-top:0;height:40px;display:flex;align-items:center}

/* Make text inputs match the muted text height so both columns appear equal */
.form-row.two-column .field input[type="text"],
.form-row.two-column .field textarea{
  height:40px;
  padding:8px 10px;
  box-sizing:border-box;
}

/* Unified Range Slider Styles */
input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  background: transparent;
  margin: 0;
  height: 24px;
}

/* utility helpers for layout and spacing */
.hidden{display:none!important;}
.mt-8{margin-top:8px;}
.mt-12{margin-top:12px;}
.mb-12{margin-bottom:12px;}
.mb-20{margin-bottom:20px;}
.ml-8{margin-left:8px;}
.ml-12{margin-left:12px;}
.flex{display:flex;}
.inline-flex{display:inline-flex;}
.items-center{align-items:center;}
.justify-between{justify-content:space-between;}
.justify-end{justify-content:flex-end;}
.gap-6{gap:6px;}
.gap-8{gap:8px;}
.gap-12{gap:12px;}
.wrap{flex-wrap:wrap;}
.clickable{cursor:pointer;}
.modal-header{display:flex;align-items:center;justify-content:space-between;position:relative}
.z2{z-index:2;}
.z3{z-index:3;}
.z4{z-index:4;}
.z50{z-index:50;}
.relative{position:relative;}
.flex-col{flex-direction:column;}
.id-btn{padding:4px 8px;font-size:0.85rem;}
.font-normal{font-weight:normal;}
.text-sm{font-size:0.9rem;}
.absolute{position:absolute;}
.left-8{left:8px;}
.top-28{top:28px;}
.w-220{width:220px;}
.va-middle{vertical-align:middle;}
.offscreen{position:fixed;left:-9999px;}

input[type=range]:focus { outline: none; }

/* Track: Common for all */
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  background: var(--slider-track-bg);
  border-radius: 2px;
  cursor: pointer;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 4px;
  background: var(--slider-track-bg);
  border-radius: 2px;
  cursor: pointer;
}

/* Editor badges: chapter start and final entry indicators */
.editor-badge{display:inline-block;padding:2px 6px;border-radius:4px;margin-left:8px;color:var(--editor-badge-text);font-size:0.9rem}
.editor-badge.chapter-start-notice{background:var(--editor-badge-chapter-bg);font-weight:700}
.editor-badge.final-entry-notice{background:var(--editor-badge-final-bg);font-weight:800}


/* Thumb: Common for all */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: var(--slider-thumb-bg);
  border: 2px solid var(--slider-thumb-border);
  box-shadow: var(--slider-thumb-shadow);
  cursor: pointer;
  margin-top: -6px; /* centers 16px thumb on 4px track */
}
input[type=range]::-moz-range-thumb {
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: var(--slider-thumb-bg);
  border: 2px solid var(--slider-thumb-border);
  box-shadow: var(--slider-thumb-shadow);
  cursor: pointer;
}

/* Specific styling for the Max handle in dual-range */
#slider_max::-webkit-slider-thumb {
  background: var(--slider-max-thumb-bg);
  border-color: var(--slider-max-thumb-border);
}
#slider_max::-moz-range-thumb {
  background: var(--slider-max-thumb-bg);
  border-color: var(--slider-max-thumb-border);
}

/* Position the report button inside latest-entry cards */
.latest-entry{position:relative; padding-top:36px; /* leave space for the report button */}
.latest-entry .report-entry{position:absolute;top:12px;right:12px}
.latest-entry .report-entry.reported{opacity:0.7;cursor:default}
/* collapse button inline with author name */
.latest-entry .entry-author .collapse-entry{margin-right:8px;vertical-align:middle;padding:0 6px;}
/* when collapsed hide the content area */
.latest-entry.collapsed .entry-content{display:none}

/* Container for Dual-Range Slider */
.size-slider.double-range {
  position: relative;
  height: 24px;
  display: flex;
  align-items: center;
}
/* Visual track background on the container instead of the inputs */
.size-slider.double-range::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  background: #163148;
  border-radius: 2px;
  z-index: 1;
}
.size-slider.double-range input[type=range] {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  background: transparent;
}
/* Make tracks on dual-range inputs transparent so they don't block each other's handles */
.size-slider.double-range input[type=range]::-webkit-slider-runnable-track { background: transparent; }
.size-slider.double-range input[type=range]::-moz-range-track { background: transparent; }

.size-slider.double-range input[type=range]::-webkit-slider-thumb { pointer-events: auto; position: relative; z-index: 5; }
.size-slider.double-range input[type=range]::-moz-range-thumb { pointer-events: auto; position: relative; z-index: 5; }

/* range-values under the slider */
.range-values{margin-top:4px;display:flex;justify-content:space-between;gap:8px;align-items:center;width:100%}
.range-values input[type=number]{width:45%;padding:6px 10px;text-align:center}
.range-values .range-sep{color:var(--text-secondary);flex-shrink:0}
.range-values input#max_entry_size{text-align:right}

/* Estimated-length Single Slider tweaks to match */
.est-row { display: flex; align-items: stretch; gap: 12px; margin-bottom: 10px; }
.est-label { width: 160px; display: flex; align-items: center; padding: 8px 0; }
.est-controls { flex: 1; display: flex; align-items: center; gap: 12px; }
.est-controls input[type=range] { flex: 1; }
.est-controls input[type=range]::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, #163148 0%, #1666c1 100%);
}
.est-controls #estimated_length_display { min-width: 3.5rem; width: 3.5rem; text-align: center; color: var(--text-secondary); }
/* ensure the editable estimate box is similar to other number fields */
.est-controls input#estimated_length_display { padding:6px 10px; }

/* Label alignment for dual-slider row */
.slider-row { display: flex; align-items: stretch; gap: 12px; }
.slider-label { width: 160px; margin: 0; display:flex; align-items:center; padding:8px 0; }
.slider-controls { flex:1; display:flex; align-items:center; gap:8px; margin-top:4px; }
/* when inputs sit beside the slider we want the handle region to stretch */
.slider-controls .size-slider { flex:1; }
/* shrink number inputs to fixed width */
.slider-controls input[type=number] { width:4rem; padding:6px 10px; text-align:center; }
/* allow a bit more space for the max field, since high values overflow */
.slider-controls input#max_entry_size { width:5rem; }

/* make the little up/down arrows inside number inputs smaller so they don’t dominate
   the compact controls used throughout editing forms */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  transform: scale(0.6);
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield; /* hide default Firefox arrows */
}

/* hide the old two-line range-values container if any lingering markup remains */
.range-values { display:none; }
.size-slider{width:100%;max-width:none}



/* Footer */
.app-footer{padding:18px 0;background:transparent;border-top:1px solid var(--overlay-light-bg);color:var(--text-secondary)}
.app-footer .container{text-align:center;font-size:14px}
.app-footer .footer-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.app-footer .footer-left{font-size:14px;color:var(--text-secondary);text-align:center}
.app-footer .footer-left a{color:var(--nav-text);text-decoration:none}
.app-footer .footer-left a:hover{color:var(--accent)}
.app-footer .footer-theme{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:6px}
.app-footer .footer-theme label{color:var(--text-secondary);margin-right:6px}
.app-footer .footer-theme select{
  background:var(--panel-contrast);
  color:var(--text-primary);
  border:1px solid var(--card-border);
  padding:6px 8px;border-radius:6px;min-width:120px;
  -webkit-appearance:none;appearance:none;cursor:pointer
}
.app-footer .footer-theme select:focus{outline:none;box-shadow:var(--select-focus-shadow)}
.app-footer .footer-theme select option{background:var(--panel-contrast);color:var(--text-primary)}
.app-footer .footer-theme select::-ms-expand{display:none}

/* Theme-transition helper - applied briefly while switching themes */
.theme-transition body,
.theme-transition .app-header,
.theme-transition .card,
.theme-transition .book-card,
.theme-transition .app-footer,
.theme-transition .app-header .nav-links a,
.theme-transition select {
  transition: background-color 320ms ease, color 320ms ease, border-color 320ms ease, box-shadow 320ms ease, transform 320ms ease;
}

/* Theme overrides (light) */
.theme-light{
  --bg-color: #ffffff;
  --card-bg: #ffffff;
  --panel-contrast: #ffffff;
  --interactions-bg: #f5f5f5; /* slightly darker than panel-contrast */
  --interactions-border: #dddddd;
  --text-primary: #0f172a;
  --text-secondary: #6b7280;
  --accent: #716eac;
  --accent-glow: rgba(79,70,229,0.12);
  --accent-strong: #716eac;
  --card-border: #e6e6e6;
  --nav-text: #475569;

  /* Toast overrides for light theme: light background, dark text */
  --toast-bg: #ffffff;
  --toast-text: #0f172a;
  --toast-border: rgba(15,23,42,0.06);
  --toast-success-text: #0f172a;
  /* Links for light theme */
  --link-color: var(--accent);
  --link-visited-color: rgba(113,110,172,0.65); /* lighten the light-theme accent */

  /* helper colors for light theme */
  --accent-text: #000;
  --danger-bg: #ff4d4f;
  --danger-text: #fff;
  --btn-primary-border: rgba(0,0,0,0.08);
  --btn-focus-shadow: 0 6px 18px rgba(0,0,0,0.08);
  --btn-shadow: 0 6px 18px rgba(0,0,0,0.08);
  --btn-hover-shadow: 0 10px 28px rgba(0,0,0,0.10);
  --btn-active-shadow: 0 6px 18px rgba(0,0,0,0.08);
  --shadow-color: rgba(0,0,0,0.15);
  --overlay-bg: rgba(0,0,0,0.1);
  --overlay-light-bg: rgba(0,0,0,0.02);
  --subtle-border: rgba(0,0,0,0.06);
  --subtle-border-strong: rgba(0,0,0,0.03);
  --subtle-border-extra: rgba(0,0,0,0.08);
  --slider-track-bg: #d1d5db;
  --slider-thumb-bg: #ffffff;
  --slider-thumb-border: #1666c1;
  --slider-thumb-shadow: 0 1px 3px rgba(0,0,0,0.4);
  --slider-max-thumb-bg: #2f78d6;
  --slider-max-thumb-border: #ffffff;
  --editor-badge-text: #000;
  --editor-badge-chapter-bg: #fffa8d;
  --editor-badge-final-bg: #ffb3b3;
  --border-dashed: #ccc;
  --rule-hover-shadow: rgba(0,0,0,0.1);
  --quick-header-border: #ccc;
  --quick-shadow: rgba(0,0,0,0.3);
  --input-bg: rgba(0,0,0,0.03);
  --input-border: rgba(0,0,0,0.1);
  --spinner-border: rgba(0,0,0,0.1);
  --select-focus-shadow: 0 6px 20px rgba(0,0,0,0.15);
  --validation-error-color: #ff6b6b;
  --input-focus-shadow: 0 8px 20px rgba(56,189,248,0.06);
  --highlight-border: rgba(56,189,248,0.18);
  --highlight-bg-gradient: linear-gradient(180deg, rgba(56,189,248,0.02), rgba(56,189,248,0.01));
}

/* Solarized theme – a light, mellow palette borrowed from the classic scheme */
.theme-solarized{
  --bg-color: #fdf6e3;
  --card-bg: #fdf6e3;
  --panel-contrast: #eee8d5;
  --interactions-bg: #f8f1e1;
  --interactions-border: #ccc;
  --text-primary: #657b83;
  --text-secondary: #93a1a1;
  --accent: #b58900;
  --accent-glow: rgba(181,137,0,0.15);
  --accent-strong: #cb4b16;
  --card-border: #93a1a1;
  --nav-text: #586e75;

  /* Toast overrides for solarized: light background, darker text */
  --toast-bg: #fdf6e3;
  --toast-text: #657b83;
  --toast-border: rgba(101,123,131,0.06);
  --toast-success-text: #657b83;
  --link-color: var(--accent);
  --link-visited-color: rgba(181,137,0,0.65); /* solarized accent-yellow, slightly transparent */
}

/* Neon theme – high‑contrast dark with bright accent colors */
.theme-neon{
  --bg-color: #000000;
  --card-bg: #000000;
  --panel-contrast: #111111;
  --interactions-bg: #222222;
  --interactions-border: #333333;
  --text-primary: #39ff14;
  --text-secondary: #66ff66;
  --accent: #ff00ff;
  --accent-glow: rgba(255,0,255,0.3);
  --accent-strong: #ff00ff;
  --card-border: #222222;
  --nav-text: #66ff66;

  /* Toast for neon: dark background with neon text */
  --toast-bg: #000000;
  --toast-text: #39ff14;
  --toast-border: rgba(57,255,20,0.1);
  --toast-success-text: #39ff14;
  --link-color: #ff00ff;
  --link-visited-color: rgba(255,0,255,0.6);
  /* reuse most helper values from midnight by default */
}

/* Gradient theme – soft pastel gradient background for a soothing look */
.theme-gradient{
  --bg-color: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
  --card-bg: rgba(255,255,255,0.8);
  --panel-contrast: rgba(255,255,255,0.9);
  --interactions-bg: rgba(255,255,255,0.95);
  --interactions-border: rgba(0,0,0,0.1);
  --text-primary: #222222;
  --text-secondary: #555555;
  --accent: #ff6f61;
  --accent-glow: rgba(255,111,97,0.2);
  --accent-strong: #ff6f61;
  --card-border: rgba(0,0,0,0.1);
  --nav-text: #333333;

  /* Toast overrides to keep readability on gradient */
  --toast-bg: rgba(255,255,255,0.95);
  --toast-text: #222222;
  --toast-border: rgba(0,0,0,0.05);
  --toast-success-text: #222222;
  --link-color: var(--accent);
  /* make visited a subdued version of the accent rather than a generic gray
     (which could be confused for body text). */
  --link-visited-color: rgba(255,111,97,0.6);
}

/* Psychedelic theme – wild multi‑color gradients and bold hues */
.theme-psychedelic{
  --bg-color: radial-gradient(circle at 50% 50%, #ff00ff, #00ffff, #ffff00);
  --card-bg: rgba(0,0,0,0.6);
  --panel-contrast: rgba(0,0,0,0.8);
  --interactions-bg: rgba(30,30,30,0.7); /* a bit lighter for readability */
  --interactions-border: rgba(255,255,255,0.2);
  --text-primary: #ffffff;
  --text-secondary: #ffee00;
  --accent: #00ff00;
  --accent-glow: rgba(0,255,0,0.3);
  --accent-strong: #00ff00;
  --card-border: rgba(255,255,255,0.2);
  --nav-text: #ff00ff;

  /* Toast overrides for bright background */
  --toast-bg: rgba(0,0,0,0.8);
  --toast-text: #ffffff;
  --toast-border: rgba(255,255,255,0.15);
  --toast-success-text: #00ff00;
  --link-color: var(--accent);
  --link-visited-color: rgba(0,255,0,0.6);
}

/* Midnight (default dark) */
.theme-midnight{
  --bg-color: #0f172a;
  --card-bg: #0f172a;
  --panel-contrast: #111827;
  /* keep dark toast defaults */
  --toast-bg: rgba(17,24,39,0.98);
  --toast-text: var(--text-primary);
  --toast-border: rgba(255,255,255,0.04);
  --text-primary: #e6eef8;
  --text-secondary: #9aa7bb;
  --accent: #38bdf8;
  --accent-glow: rgba(56,189,248,0.15);
  --accent-strong: #00d2ff;
  --card-border: #1f2937;
  --nav-text: #94a3b8;
  /* Links for dark theme */
  --link-color: var(--accent);
  --link-visited-color: rgba(56,189,248,0.6); /* use accent for better contrast with secondary text */

  /* helper colors for midnight theme */
  --accent-text: #000;
  --danger-bg: #ff4d4f;
  --danger-text: #fff;
  --btn-primary-border: rgba(0,0,0,0.08);
  --btn-focus-shadow: 0 6px 18px rgba(2,6,23,0.12);
  --btn-shadow: 0 6px 18px rgba(2,6,23,0.10);
  --btn-hover-shadow: 0 10px 28px rgba(2,6,23,0.14);
  --btn-active-shadow: 0 6px 18px rgba(2,6,23,0.10);
  --shadow-color: rgba(2,6,23,0.6);
  --overlay-bg: rgba(2,6,23,0.85);
  --overlay-light-bg: rgba(255,255,255,0.02);
  --subtle-border: rgba(255,255,255,0.02);
  --subtle-border-strong: rgba(255,255,255,0.01);
  --subtle-border-extra: rgba(255,255,255,0.03);
  --slider-track-bg: #163148;
  --slider-thumb-bg: #ffffff;
  --slider-thumb-border: #1666c1;
  --slider-thumb-shadow: 0 1px 3px rgba(0,0,0,0.4);
  --slider-max-thumb-bg: #2f78d6;
  --slider-max-thumb-border: #ffffff;
  --editor-badge-text: #111;
  --editor-badge-chapter-bg: #fffa8d;
  --editor-badge-final-bg: #ffb3b3;
  --border-dashed: #444;
  --rule-hover-shadow: rgba(0,0,0,0.1);
  --quick-header-border: #444;
  --quick-shadow: rgba(0,0,0,0.5);
  --input-bg: rgba(255,255,255,0.01);
  --input-border: rgba(255,255,255,0.06);
  --spinner-border: rgba(255,255,255,0.04);
  --select-focus-shadow: 0 6px 20px rgba(2,6,23,0.35);
  --validation-error-color: #ff6b6b;
  --input-focus-shadow: 0 8px 20px rgba(56,189,248,0.06);
  --highlight-border: rgba(56,189,248,0.18);
  --highlight-bg-gradient: linear-gradient(180deg, rgba(56,189,248,0.02), rgba(56,189,248,0.01));
}

/* Responsive tweaks */
@media (max-width:900px){
  .app-header{display:flex;flex-direction:column;gap:12px;height:auto;padding:18px}
  .container{padding:0 16px}
  .hero h1{font-size:2.4rem}
}

@media (max-width:700px){
  /* Hamburger nav */
  .hamburger{display:flex}
  .app-header{flex-direction:row;flex-wrap:wrap;justify-content:space-between;gap:8px;padding:10px 16px}
  .app-header .nav-links{width:100%;justify-content:space-between}
  .app-header .nav-links .nav-menu{
    display:none;flex-direction:column;gap:0;position:absolute;top:100%;right:0;left:0;
    background:var(--panel-contrast);border-bottom:1px solid var(--card-border);
    padding:8px 0;z-index:1000;box-shadow:0 4px 12px var(--shadow-color)
  }
  .app-header .nav-links .nav-menu.open{display:flex}
  .app-header .nav-links .nav-menu a{padding:10px 24px;width:100%;box-sizing:border-box}
  .app-header .nav-links .nav-menu a:hover{background:var(--card-border)}
  .app-header .nav-links{position:relative}

  /* Stack action buttons (New Story, Chaos, Random) */
  .page-header{flex-wrap:wrap}
  .page-header .book-card.new-story,
  .page-header .book-card{flex:1 1 100%;min-width:0}
}

@media (max-width:480px){
  .book-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
  /* slightly reduce card height on very small screens */
  .book-card{min-height:100px}
}

/* small utility */
.muted{color:var(--text-secondary);font-size:0.9rem}
.link-muted{color:var(--nav-text)}

/* Link styles: modern, no underline. Visited links are toned down but keep same style. */
a { color: var(--link-color); text-decoration: none; transition: color 160ms ease, opacity 160ms ease; }
a:hover, a:focus { color: var(--accent); text-decoration: none; }
a:visited { color: var(--link-visited-color); text-decoration: none; }

/* Ensure navigation/footer/muted links follow the same non-underlined style
  and show a toned visited state (uses theme-aware --text-secondary). */
.app-header .nav-links a, .app-footer .footer-left a, .link-muted { text-decoration: none; }
.app-header .nav-links a:visited,
.app-footer .footer-left a:visited,
.link-muted:visited {
  /* don't degrade a visited link back to ordinary text; keep the link
     palette so users can still tell it was clickable */
  color: var(--link-visited-color);
}

/* Tab bar for stories page */
.tab-bar{display:flex;gap:8px;margin:12px 0 18px}
.tab{background:transparent;border:1px solid var(--subtle-border);color:var(--text-primary);padding:8px 12px;border-radius:8px;cursor:pointer;font-weight:700}
.tab.active{background:linear-gradient(90deg,var(--accent),var(--accent-strong));color:var(--accent-text);border-color:transparent}
.tabs-container section{margin-bottom:12px}

@media (max-width:700px){
  .tab-bar{flex-wrap:wrap}
}

/* make labels in stats pages more prominent */
.stats-list li strong,
.account-settings .muted strong {
  font-weight: 600;
  color: var(--accent);
}

/* Admin permissions UI helpers */
.perm-form{display:inline-block;margin-left:12px}
.perm-option{margin-right:8px}
.perm-option input{margin-right:4px}
.save-perm-btn{margin-left:8px}
.perm-validation{color:var(--validation-error-color);margin-top:6px;font-size:0.95rem}
.user-banned{text-decoration:line-through}
.user-delete-btn{margin-left:12px}

/* Tabs for admin page */
.tab-bar{display:flex;gap:8px;margin:12px 0}
.tab{padding:6px 12px;border-radius:8px;border:1px solid var(--subtle-border);background:transparent;color:var(--text-secondary);cursor:pointer;font-weight:700}
.tab.active{background:var(--accent);color:var(--accent-text);box-shadow:0 6px 20px var(--accent-glow)}

/* Compact permission pills + edit popover */
.perm-pills{display:inline-flex;gap:6px;align-items:center}
.perm-pill{display:inline-block;padding:2px 8px;border-radius:999px;background:var(--overlay-light-bg);color:var(--text-secondary);font-size:0.82rem;border:1px solid var(--overlay-light-bg)}
.hidden-badge{display:inline-block;padding:2px 8px;border-radius:999px;background:var(--hidden-badge-bg);color:var(--hidden-badge-text);font-size:0.82rem;border:1px solid var(--hidden-badge-border)}
.perm-edit-btn{background:transparent;border:1px solid var(--subtle-border);color:var(--text-secondary);padding:4px 8px;border-radius:6px;cursor:pointer;font-size:0.85rem}
.perm-edit-btn:hover{color:var(--text-primary);border-color:var(--input-border)}
.perm-popover{min-width:220px;padding:10px;border-radius:8px;border:1px solid var(--card-border);background:var(--panel-contrast);box-shadow:0 12px 36px var(--shadow-color)}
.perm-popover .perm-option{margin-right:10px}

@media (max-width:640px){
  .perm-popover{position:static;min-width:100%;box-shadow:none}
  .tab-bar{flex-wrap:wrap}
}

/* Admin dashboard card layout */
.admin-shell{position:relative}
.admin-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:8px}
.admin-card{border:1px solid var(--card-border);background:var(--panel-contrast);border-radius:12px;padding:14px;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.admin-card:hover{transform:translateY(-4px);box-shadow:0 10px 28px var(--shadow-color);border-color:var(--highlight-border)}
.admin-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.admin-card-title{font-weight:700;font-size:1rem;line-height:1.4}
.card-badge{display:inline-flex;align-items:center;margin-top:10px}

/* Admin modal content */
.admin-detail-body{display:flex;flex-direction:column;gap:12px}
.detail-list{display:flex;flex-direction:column;gap:8px}
.detail-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--card-border)}
.detail-row:last-child{border-bottom:0}
.detail-label{font-size:0.9rem}
.detail-value{font-weight:700;text-align:left;word-break:break-word;line-height:1.5}
.detail-section{padding-top:6px;border-top:1px solid var(--subtle-border)}
.section-header{font-weight:700;margin:6px 0 4px}
.perm-checkbox-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px 12px;margin-top:8px}
.modal-actions{display:flex;align-items:center;gap:10px;justify-content:flex-end}
.modal-actions.space-between{justify-content:space-between}
.modal-actions.wrap{flex-wrap:wrap}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.stat-card{border:1px solid var(--card-border);border-radius:10px;padding:10px;background:var(--panel-bg)}
.stat-value{font-size:1.4rem;font-weight:800}
.stat-label{font-size:0.9rem}

/* Pills used in admin modals */
.pill{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;border:1px solid var(--subtle-border);background:var(--overlay-light-bg);font-weight:700;font-size:0.9rem;color:var(--text-primary)}
.pill-muted{color:var(--text-secondary)}
.pill-success{background:rgba(16,185,129,0.12);border-color:rgba(16,185,129,0.3);color:#34d399}
.pill-warn{background:rgba(241,196,15,0.15);border-color:var(--hidden-badge-border);color:var(--hidden-badge-text)}
.pill-chaos{background:linear-gradient(135deg,#ff6b6b,#feca57,#48dbfb,#ff9ff3);border-color:transparent;color:#111}

/* Modal sizing helpers */
.modal-dialog.modal-medium{max-width:680px}

@media (max-width:640px){
  .detail-row{flex-direction:column;align-items:flex-start}
  .detail-value{text-align:left;width:100%}
  .admin-card-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
}

/* Toast notifications (used by showToast) */
.toast-container {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  z-index: 99999;
  max-width: calc(100% - 40px);
  pointer-events: none;
}

/* Centered container used for prominent error toasts */
.toast-center {
  position: fixed;
  left: 50%;
  /* place error toasts in the upper third of the viewport */
  top: 30%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 99999;
  pointer-events: none;
  width: 100%;
  max-width: 640px;
  align-items: center;
  isolation: isolate;
}

/* Lower-center container for info / warn / success toasts */
.toast-lower {
  position: fixed;
  left: 50%;
  bottom: 48px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  z-index: 99999;
  pointer-events: none;
  width: 100%;
  max-width: 640px;
  align-items: center;
  isolation: isolate;
}

.toast {
  pointer-events: auto;
  min-width: 200px;
  max-width: 480px;
  background: var(--toast-bg);
  color: var(--toast-text);
  padding: 14px 18px;
  border-radius: 10px;
  box-shadow: 0 8px 30px var(--shadow-color);
  border: 1px solid var(--toast-border);
  transform: translateY(8px) scale(0.98);
  opacity: 0;
  transition: transform 220ms cubic-bezier(.2,.9,.2,1), opacity 220ms ease;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  mix-blend-mode: normal;
  isolation: isolate;
  /* allow long titles to wrap but break words if needed; avoid breaking mid-sentence whenever possible */
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
}

.toast-show { transform: translateY(0) scale(1); opacity: 1; }
.toast-hide { transform: translateY(6px) scale(0.98); opacity: 0; transition: opacity 200ms ease, transform 200ms ease; }

/* types */
.toast-success { background: var(--toast-success-gradient), var(--toast-bg); border-color: var(--toast-success-border); color: var(--toast-success-text, var(--toast-text)); }
.toast-error {
  background: var(--toast-error-gradient), var(--toast-bg);
  border-color: var(--toast-error-border);
  color: var(--toast-text);
}
.toast-warn { background: var(--toast-warn-gradient), var(--toast-bg); border-color: var(--toast-warn-border); color: var(--toast-text); }
.toast-info { background: var(--toast-info-gradient), var(--toast-bg); border-color: var(--toast-info-border); color: var(--toast-text); box-shadow: 0 10px 36px var(--toast-box-shadow-info); }

@media (max-width:640px) {
  .toast-container { left: 12px; right: 12px; bottom: 12px; align-items: flex-end; }
  .toast-center { left: 12px; right: 12px; top: 30%; transform: none; align-items: stretch; }
  .toast-lower { left: 12px; right: 12px; bottom: 12px; transform: none; align-items: stretch; }
  .toast { width: 100%; max-width: 100%; box-sizing: border-box; }
}

.rules-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 30px;
}
.rule-item {
    background: var(--bg-color);
    border: 1px  solid var(--card-border);
    border-radius: 12px;
    padding: 20px;
    transition: transform 0.2s;
}
.rule-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px var(--rule-hover-shadow);
}
.rule-icon { font-size: 2rem; margin-bottom: 10px; display: block; }
.rule-item h3 { margin: 0 0 10px 0; color: var(--accent); }

/* Example Stories section on About page */
.example-stories-section { margin-top: 40px; }
.example-stories-section h2 { margin-bottom: 6px; }
.example-stories-section > p { color: var(--text-secondary); margin-bottom: 24px; }

.example-stories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}
.example-story-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: inherit;
    background: var(--bg-color);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    padding: 28px 20px 22px;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    cursor: pointer;
}
.example-story-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 20px -4px var(--rule-hover-shadow);
    border-color: var(--accent);
}
.example-story-emoji { font-size: 2.6rem; margin-bottom: 12px; display: block; }
.example-story-card h3 { margin: 0 0 8px 0; color: var(--accent); font-size: 1.05rem; }
.example-story-hint { margin: 0; font-size: 0.9rem; color: var(--text-secondary); line-height: 1.4; font-style: italic; }

.howto-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.howto-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 30px;
    width: 100%;
}
/* allow each image container to flex and grow */
.howto-hero-image {
    flex: 1 1 0;
    display: flex;
    justify-content: center;
}
.howto-hero-image img {
    width: 100%;
    height: auto;
    /* no explicit max-width so it can grow with container */
}
.howto-hero-image .about-logo {
    /* optionally restrict logo size but let it grow slightly */
    max-width: none;
    width: 100%;
}

.howto-steps {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.howto-steps h2 { margin: 0 0 12px 0; }
.steps-grid {
    display: grid;
    /* exactly three columns; each column will flex to fill available space */
    grid-template-columns: repeat(3, minmax(200px, 1fr));
    gap: 28px 30px;
    /* allow grid to span full width of its parent container */
    width: 100%;
}
.step-item {
    background: var(--bg-color);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 18px 15px;
    margin: 0;
}

.howto-cta {
    text-align: center;
    margin-top: 12px;
}
.step-header {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--accent-strong);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.step-text {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.5;
}
.pro-tip {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-style: italic;
    margin-top: 5px;
    display: block;
}

.quick-start-card {
    color: var(--card-bg);
    border: 2px solid var(--accent-glow);
    border-radius: 15px;
    padding: 20px;
    max-width: 400px;
    color: var(--text-primary);
    box-shadow: 0 10px 30px var(--quick-shadow);
}
.quick-header {
    font-family: 'Georgia', serif;
    font-size: 1.4rem;
    color: var(--accent-strong);
    margin-bottom: 15px;
    text-align: center;
    border-bottom: 1px solid var(--quick-header-border);
    padding-bottom: 10px;
}
.quick-list {
    list-style: none;
    padding: 0;
}
.quick-list li {
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.95rem;
}
.quick-list b { color: var(--accent-strong); }
.mini-tip {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* make secondary buttons more visible in dark themes */
.theme-midnight .btn.secondary,
.theme-neon .btn.secondary,
.theme-psychedelic .btn.secondary {
  background: rgba(255,255,255,0.1);
  border: 1px solid var(--accent);
  color: var(--accent);
}

/* ── Badge Grid (Profile > Badges tab) ─────────────────────────────────── */
.badges-summary{margin:0 0 16px;font-size:0.95rem;color:var(--text-secondary)}
.badges-summary strong{color:var(--accent)}

.badges-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:16px;
}

.badge-card{
  position:relative;
  background:var(--panel-contrast);
  border:1px solid var(--card-border);
  border-radius:14px;
  padding:18px 16px 14px;
  display:flex;
  flex-direction:column;
  gap:6px;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.badge-card:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 28px var(--shadow-color);
}

.badge-earned{
  border-color:var(--badge-tier-color,var(--accent));
  border-width:2px;
  box-shadow:0 0 12px color-mix(in srgb, var(--badge-tier-color,var(--accent)) 25%, transparent);
}

.badge-locked{
  opacity:0.65;
}

.badge-card-icon{
  font-size:2.2rem;
  line-height:1;
  text-align:center;
}

.badge-card-name{
  font-weight:800;
  font-size:1rem;
  text-align:center;
  color:var(--text-primary);
}

.badge-card-tier{
  font-weight:700;
  font-size:0.82rem;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:0.5px;
}

.badge-card-desc{
  font-size:0.82rem;
  color:var(--text-secondary);
  text-align:center;
  line-height:1.4;
}

.badge-card-flavor{
  font-style:italic;
  font-size:0.8rem;
  color:var(--text-secondary);
  text-align:center;
  margin-top:2px;
}

.badge-card-progress-detail{
  font-size:0.75rem;
  color:var(--text-secondary);
  text-align:center;
  margin-top:2px;
}

/* ── Badge Popup (celebratory modal) ───────────────────────────────────── */
.badge-popup-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.7);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10000;
  opacity:0;
  transition:opacity 300ms ease;
  backdrop-filter:blur(4px);
}
.badge-popup-overlay.badge-popup-show{opacity:1}
.badge-popup-overlay.badge-popup-hide{opacity:0;transition:opacity 250ms ease}

.badge-popup-dialog{
  position:relative;
  background:var(--panel-contrast);
  border:2px solid var(--badge-tier-color,var(--accent));
  border-radius:20px;
  padding:36px 32px 28px;
  max-width:380px;
  width:90vw;
  text-align:center;
  box-shadow:
    0 0 40px color-mix(in srgb, var(--badge-tier-color,var(--accent)) 30%, transparent),
    0 20px 60px rgba(0,0,0,0.4);
  transform:scale(0.8) translateY(20px);
  transition:transform 400ms cubic-bezier(.34,1.56,.64,1), opacity 300ms ease;
  opacity:0;
  overflow:visible;
}
.badge-popup-show .badge-popup-dialog{
  transform:scale(1) translateY(0);
  opacity:1;
}
.badge-popup-hide .badge-popup-dialog{
  transform:scale(0.9) translateY(10px);
  opacity:0;
}

.badge-popup-header{
  font-size:1.2rem;
  font-weight:800;
  color:var(--accent);
  margin-bottom:12px;
  letter-spacing:0.3px;
}

.badge-popup-icon{
  font-size:3.5rem;
  line-height:1;
  margin-bottom:8px;
  animation:badge-bounce 600ms cubic-bezier(.34,1.56,.64,1) both;
  animation-delay:300ms;
}

@keyframes badge-bounce{
  0%{transform:scale(0) rotate(-20deg);opacity:0}
  60%{transform:scale(1.2) rotate(5deg);opacity:1}
  100%{transform:scale(1) rotate(0deg);opacity:1}
}

.badge-popup-name{
  font-size:1.25rem;
  font-weight:800;
  color:var(--text-primary);
  margin-bottom:2px;
}

.badge-popup-tier{
  font-size:0.9rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:8px;
}

.badge-popup-flavor{
  font-size:0.92rem;
  color:var(--text-secondary);
  font-style:italic;
  line-height:1.45;
  margin-bottom:18px;
}

.badge-popup-btn{
  font-size:1rem;
  padding:10px 28px;
  border-radius:12px;
}

/* Confetti burst */
.badge-confetti{
  position:absolute;
  top:50%;
  left:50%;
  width:0;
  height:0;
  pointer-events:none;
  z-index:1;
}

.confetti-piece{
  position:absolute;
  font-size:1.3rem;
  opacity:0;
  animation:confetti-burst 900ms cubic-bezier(.2,.6,.3,1) forwards;
  animation-delay:var(--delay,0s);
}

@keyframes confetti-burst{
  0%{
    transform:translate(0,0) rotate(0deg) scale(0);
    opacity:1;
  }
  70%{
    opacity:1;
  }
  100%{
    transform:translate(var(--x,0), var(--y,-100px)) rotate(var(--r,360deg)) scale(1);
    opacity:0;
  }
}

@media (max-width:480px){
  .badges-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
  .badge-popup-dialog{padding:28px 20px 22px}
  .badge-popup-icon{font-size:2.5rem}
}

/* ── Shared Badge Page ─────────────────────────────────────────────────── */
.shared-badge-card{
  text-align:center;
  padding:36px 28px 28px;
  max-width:480px;
  margin:32px auto;
}

.shared-badge-attribution{
  font-size:1.1rem;
  font-weight:700;
  color:var(--accent);
  margin-bottom:20px;
}

.shared-badge-visual{
  position:relative;
  display:inline-block;
  margin-bottom:16px;
}

.shared-badge-icon{
  font-size:4.5rem;
  line-height:1;
  animation:badge-bounce 600ms cubic-bezier(.34,1.56,.64,1) both;
  animation-delay:200ms;
}

.shared-badge-ring{
  position:absolute;
  inset:-16px;
  border:3px solid var(--badge-tier-color,var(--accent));
  border-radius:50%;
  opacity:0.35;
  animation:badge-ring-pulse 2s ease-in-out infinite;
}

@keyframes badge-ring-pulse{
  0%,100%{transform:scale(1);opacity:0.35}
  50%{transform:scale(1.08);opacity:0.55}
}

.shared-badge-name{
  font-size:1.5rem;
  font-weight:800;
  color:var(--text-primary);
  margin:0 0 4px;
}

.shared-badge-tier{
  font-size:1rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:12px;
}

.shared-badge-flavor{
  font-size:1rem;
  font-style:italic;
  color:var(--text-secondary);
  line-height:1.5;
  margin:0 0 8px;
}

.shared-badge-desc{
  font-size:0.9rem;
  color:var(--text-secondary);
  margin:0 0 24px;
}

.shared-badge-share-section{
  margin-top:24px;
  padding-top:20px;
  border-top:1px solid var(--card-border);
}

.shared-badge-share-label{
  font-size:0.85rem;
  color:var(--text-secondary);
  margin-bottom:12px;
}

/* ── Badge Share Bar (used in popup, profile cards, and shared page) ──── */
.badge-share-bar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  margin-top:8px;
}

.badge-share-btn{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:6px 12px;
  border-radius:8px;
  font-size:0.8rem;
  cursor:pointer;
  border:1px solid var(--card-border);
  background:var(--panel-contrast);
  color:var(--text-primary);
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}

.badge-share-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 12px var(--shadow-color);
  background:var(--overlay-light-bg);
}

.badge-share-icon{
  font-size:1rem;
  line-height:1;
}

.badge-share-label{
  font-size:0.8rem;
}

.badge-share-bluesky:hover{border-color:#0085ff}
.badge-share-twitter:hover{border-color:#1da1f2}
.badge-share-facebook:hover{border-color:#1877f2}
.badge-share-linkedin:hover{border-color:#0a66c2}
.badge-share-email:hover{border-color:var(--accent)}
.badge-share-copy:hover{border-color:var(--accent)}

/* Share button on profile badge cards */
.badge-card-share-btn{
  margin-top:8px;
  font-size:0.78rem;
  padding:4px 10px;
  border-radius:6px;
  border:1px solid var(--card-border);
  background:transparent;
  color:var(--text-secondary);
  cursor:pointer;
  transition:color .15s ease,border-color .15s ease;
}
.badge-card-share-btn:hover{
  color:var(--accent);
  border-color:var(--accent);
}

/* Share section in badge popup */
.badge-popup-share{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--card-border);
  margin-bottom:16px; /* extra gap before the dismiss button */
}
.badge-popup-share-label{
  font-size:0.82rem;
  color:var(--text-secondary);
  margin-bottom:8px;
}

@media (max-width:480px){
  .shared-badge-card{padding:28px 18px 22px}
  .shared-badge-icon{font-size:3.5rem}
  .badge-share-bar{gap:6px}
  .badge-share-label{display:none}
}

/* ── Preview banner (about page) ── */
.preview-banner{
  display:flex;gap:14px;align-items:flex-start;
  background:linear-gradient(135deg, var(--accent-muted, rgba(99,102,241,.12)) 0%, var(--panel-contrast) 100%);
  border:1px dashed var(--accent, #6366f1);
  border-radius:10px;padding:16px 20px;margin:18px 0;
}
.preview-banner-icon{font-size:1.8rem;flex-shrink:0;line-height:1}
.preview-banner-text{flex:1}
.preview-banner-text strong{display:block;margin-bottom:4px;color:var(--text-primary);font-size:1.05rem}
.preview-banner-text p{margin:0;color:var(--text-secondary);font-size:0.92rem;line-height:1.5}
.preview-banner-text a{color:var(--accent, #6366f1);text-decoration:underline}
.login-page .preview-banner{max-width:400px;margin:18px auto}

/* ── Waitlist page ── */
.waitlist-page{text-align:center;padding:24px 0}
.waitlist-hero{margin-bottom:28px}
.waitlist-icon{font-size:3.5rem;display:block;margin-bottom:12px;animation:quill-float 3s ease-in-out infinite}
@keyframes quill-float{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-10px) rotate(4deg)}
}
.waitlist-hero h1{margin:0 0 10px;font-size:1.7rem;color:var(--text-primary)}
.waitlist-subtitle{color:var(--text-secondary);font-size:1.05rem;max-width:520px;margin:0 auto;line-height:1.5}
.waitlist-cta{max-width:500px;margin:0 auto 28px}
.waitlist-cta > p{color:var(--text-secondary);font-size:0.95rem;line-height:1.6;margin-bottom:20px}
.waitlist-form{margin:0 auto}
.waitlist-input-row{display:flex;gap:10px;justify-content:center}
.waitlist-email-input{
  flex:1;max-width:320px;padding:10px 14px;border-radius:8px;
  border:1px solid var(--input-border, var(--card-border));
  background:var(--input-bg, var(--panel-contrast));
  color:var(--text-primary);font-size:1rem;
}
.waitlist-email-input:focus{outline:none;border-color:var(--accent, #6366f1);box-shadow:0 0 0 3px var(--accent-muted, rgba(99,102,241,.18))}
.waitlist-submit-btn{white-space:nowrap}
.waitlist-message{margin-top:14px;font-size:0.95rem;padding:10px 16px;border-radius:8px}
.waitlist-success{background:var(--success-bg, rgba(34,197,94,.12));color:var(--success, #22c55e)}
.waitlist-error{background:var(--error-bg, rgba(239,68,68,.12));color:var(--error, #ef4444)}
.waitlist-footer-note{margin-top:8px;color:var(--text-secondary);font-size:0.88rem}
.waitlist-footer-note a{color:var(--accent, #6366f1);text-decoration:underline}
@media (max-width:500px){
  .waitlist-input-row{flex-direction:column;align-items:stretch}
  .waitlist-email-input{max-width:100%}
}

/* ── Role choice (account creation) ── */
.role-choice{margin:18px 0}
.role-choice-label{font-size:1rem;color:var(--text-primary);margin-bottom:12px;font-weight:600;text-align:center}
.role-cards{display:flex;gap:14px;justify-content:center}
.role-card{flex:1;max-width:240px;display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 12px;border-radius:12px;border:2px solid var(--card-border);background:var(--panel-contrast);cursor:pointer;transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;text-align:center}
.role-card:hover{transform:translateY(-3px);box-shadow:0 6px 20px var(--shadow-color)}
.role-card.active{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-muted,rgba(99,102,241,.18))}
.role-card-icon{font-size:2rem}
.role-card-title{font-weight:700;font-size:1rem;color:var(--text-primary)}
.role-card-desc{font-size:0.85rem;color:var(--text-secondary);line-height:1.4}
@media (max-width:500px){.role-cards{flex-direction:column;align-items:center}}

/* ── Reaction bar on story cards ── */
.reaction-bar{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:4px}
.reaction-pill{font-size:11px;padding:2px 7px;border-radius:999px;background:var(--overlay-light-bg);color:var(--text-secondary);white-space:nowrap;display:inline-flex;align-items:center;gap:3px}

/* ── Comments & reactions in full story modal ── */
/* interactions-section is now a self‑contained card so it doesn't blend into the
   story content.  the styles use variables so they adapt across all themes. */
.interactions-section{
  margin:16px 0;
  padding:14px 16px;
  border:1px solid var(--interactions-border);
  border-radius:10px;
  background:var(--interactions-bg);
  box-shadow: 0 3px 10px rgba(0,0,0,0.12);
}

.interactions-section h4{margin:0 0 10px;font-size:0.95rem;color:var(--text-secondary);font-weight:600}
.comment-list{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.comment-item{
  background:color-mix(in srgb, var(--panel-contrast) 92%, black 8%);
  border:1px solid var(--card-border);
  border-radius:10px;
  padding:10px 14px;
  font-size:0.95rem;
  box-shadow: 0 4px 14px rgba(2,6,23,0.35);
}
.comment-item .comment-meta{font-size:0.78rem;color:var(--text-secondary);margin-bottom:6px;display:flex;align-items:center;gap:8px}
.comment-item .comment-content{color:var(--text-primary);line-height:1.5}
.comment-form{display:flex;gap:8px;align-items:flex-end;margin-top:10px}
.comment-input{
  flex:1;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.10);
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));
  color:var(--text-primary);
  font-size:0.95rem;
  resize:vertical;
  min-height:56px;
  max-height:220px;
  transition:box-shadow 120ms ease, border-color 120ms ease;
}
.comment-input::placeholder{color:var(--text-secondary)}
.comment-input:focus{outline:none;border-color:var(--accent);box-shadow:0 6px 20px rgba(56,189,248,0.06)}
.comment-char-count{font-size:0.78rem;color:var(--text-secondary);min-width:3em;text-align:right;align-self:center}
.reaction-picker{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:4px 0} /* smaller gap around picker for compact layout */
.reaction-pick-btn{background:var(--overlay-light-bg);border:2px solid transparent;border-radius:999px;padding:4px 10px;font-size:1.1rem;cursor:pointer;transition:border-color .14s ease,transform .14s ease;display:inline-flex;align-items:center;gap:4px}
.reaction-pick-btn:hover{transform:scale(1.1)}
.reaction-pick-btn.active{border-color:var(--accent,#6366f1);background:var(--accent-muted,rgba(99,102,241,.18))}
.reaction-pick-btn .reaction-count{font-size:0.78rem;color:var(--text-secondary)}
.story-keeper-notice{padding:10px 14px;background:var(--overlay-light-bg);border-radius:8px;font-size:0.88rem;color:var(--text-secondary);margin:8px 0;border-left:3px solid var(--accent,#6366f1)}

/* ── Profile role toggle ── */
.role-toggle-row{display:flex;gap:10px;align-items:center;margin:10px 0;flex-wrap:wrap}
.role-toggle-btn{flex:1;max-width:200px;padding:10px 14px;border-radius:10px;border:2px solid var(--card-border);background:var(--panel-contrast);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;transition:border-color .16s ease;font-size:0.88rem;color:var(--text-primary)}
.role-toggle-btn:hover{border-color:var(--accent)}
.role-toggle-btn.active{border-color:var(--accent);background:var(--accent-muted,rgba(99,102,241,.1))}
.role-toggle-btn .rtb-icon{font-size:1.4rem}
.role-toggle-btn .rtb-label{font-weight:600;font-size:0.9rem}
.role-toggle-btn .rtb-desc{font-size:0.78rem;color:var(--text-secondary);text-align:center;line-height:1.3}