/* ==========================================================================
   ORBIT NOVEL — A Library Among the Stars
   Design tokens
   ========================================================================== */
:root{
  --void:        #030308;
  --space-deep:  #0a0d24;
  --panel:       #10142e;
  --panel-alt:   #161b3d;
  --line:        rgba(255,255,255,0.08);

  --gold:        #e3b873;
  --gold-soft:   #f2ddad;
  --nebula:      #8f7fe8;
  --nebula-soft: #b9addf;

  --text:        #eef0f5;
  --text-dim:    #9296b4;
  --text-faint:  #5a5f7d;

  --font-display: 'Cormorant Garamond', serif;
  --font-body:    'Manrope', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  --radius: 6px;
  --ease: cubic-bezier(.22,.7,.28,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

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

a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input{ font-family:inherit; }

::selection{ background: var(--nebula); color:var(--void); }

/* ==========================================================================
   Starfield background
   ========================================================================== */
.starfield{
  position:fixed;
  inset:0;
  z-index:0;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(143,127,232,0.16), transparent 60%),
    radial-gradient(ellipse 60% 40% at 85% 15%, rgba(227,184,115,0.08), transparent 60%),
    linear-gradient(180deg, var(--void) 0%, var(--space-deep) 45%, var(--void) 100%);
  pointer-events:none;
}
.starfield .star{
  position:absolute;
  border-radius:50%;
  background: #fff;
}

.shooting-stars{ position:fixed; inset:0; z-index:1; overflow:hidden; pointer-events:none; }
.shoot{
  position:absolute;
  width:2px; height:2px;
  background: linear-gradient(90deg, #fff, transparent);
  border-radius:50%;
  box-shadow: 0 0 6px 1px rgba(255,255,255,0.6);
  opacity:0;
  animation: shoot 7s linear infinite;
}
.shoot::before{
  content:'';
  position:absolute;
  top:50%; right:0;
  width:90px; height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7));
  transform: translateY(-50%);
}
.s1{ top:12%; left:10%; animation-delay:0s; }
.s2{ top:28%; left:60%; animation-delay:3.2s; }
.s3{ top:6%;  left:40%; animation-delay:5.6s; }

@keyframes shoot{
  0%   { transform: translate(0,0) rotate(-32deg); opacity:0; }
  4%   { opacity:1; }
  16%  { transform: translate(340px, 210px) rotate(-32deg); opacity:0; }
  100% { opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .shoot{ animation:none; opacity:0; }
  *{ scroll-behavior:auto !important; }
}

/* ==========================================================================
   Nav
   ========================================================================== */
.nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:50;
  padding: 22px 5vw;
  transition: background .3s var(--ease), backdrop-filter .3s var(--ease), padding .3s var(--ease), border-color .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.scrolled{
  background: rgba(3,3,8,0.82);
  backdrop-filter: blur(14px);
  padding: 14px 5vw;
  border-bottom-color: var(--line);
}
.nav-inner{
  max-width:1400px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:48px;
}
.nav-write-label{ display:inline; }
.logo{
  font-family: var(--font-display);
  font-weight:600;
  font-size:1.6rem;
  letter-spacing:0.14em;
  color: var(--gold-soft);
  flex-shrink:0;
}
.nav-links{ display:flex; gap:28px; flex:1; }
.nav-links a{
  font-size:0.86rem;
  font-weight:600;
  letter-spacing:0.03em;
  color: var(--text-dim);
  padding:6px 0;
  border-bottom: 1px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.nav-links a:hover, .nav-links a:focus-visible{ color: var(--text); }
.nav-links a.active{ color: var(--gold-soft); border-color: var(--gold-soft); }

.nav-search{
  display:flex;
  align-items:center;
  gap:8px;
  background: rgba(255,255,255,0.04);
  border:1px solid var(--line);
  border-radius: 999px;
  padding:7px 14px;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.nav-search:focus-within{ border-color: var(--nebula-soft); background: rgba(255,255,255,0.06); }
.search-icon{ width:14px; height:14px; color: var(--text-faint); flex-shrink:0; }
.nav-search input{
  background:none; border:none; outline:none;
  color: var(--text);
  font-size:16px;
  width:150px;
}
.nav-search input::placeholder{ color: var(--text-faint); }

.search-clear{
  display:none;
  align-items:center;
  justify-content:center;
  width:16px; height:16px;
  flex-shrink:0;
  border:none;
  border-radius:50%;
  background: rgba(255,255,255,0.08);
  color: var(--text-faint);
  font-size:0.9rem;
  line-height:1;
  cursor:pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.search-clear:hover{ background: rgba(255,255,255,0.16); color: var(--text); }
.search-clear.visible{ display:flex; }

.nav-write-btn{
  padding: 9px 18px;
  font-size:0.8rem;
  flex-shrink:0;
}

.nav-auth{ flex-shrink:0; display:flex; align-items:center; }
.nav-signin-btn{ padding:9px 16px; font-size:0.8rem; }
.nav-user{
  display:flex;
  align-items:center;
  gap:10px;
  background: rgba(255,255,255,0.04);
  border:1px solid var(--line);
  border-radius: 999px;
  padding:6px 8px 6px 6px;
  min-width:0;
}
/* Without this, the unconditional `display:flex` above always wins over
   the browser's built-in `[hidden]{display:none}` rule (author CSS beats
   user-agent CSS regardless of specificity) — so JS setting
   navUser.hidden = true/false had no visible effect and the signed-in
   panel (avatar/name/Sign out) stayed on screen even after signing out. */
.nav-user[hidden]{ display:none; }
.nav-user-avatar{
  width:26px; height:26px;
  border-radius:50%;
  background: var(--gold-soft);
  color:#1a1306;
  font-family: var(--font-mono);
  font-weight:700;
  font-size:0.78rem;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.nav-user-name{
  font-size:0.82rem;
  font-weight:600;
  color: var(--text);
  max-width:120px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.nav-signout-btn{
  font-size:0.74rem;
  color: var(--text-faint);
  transition: color .2s var(--ease), background .2s var(--ease);
  flex-shrink:0;
  padding:8px 10px;
  margin:-8px -10px -8px 0;
  border-radius:999px;
  min-height:36px;
  display:flex;
  align-items:center;
}
.nav-signout-btn:hover, .nav-signout-btn:focus-visible{ color: var(--gold-soft); background: rgba(255,255,255,0.06); }

.nav-stats-btn{
  font-family: var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.03em;
  color: var(--nebula-soft);
  border:1px solid var(--line);
  border-radius:999px;
  padding:6px 12px;
  flex-shrink:0;
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
  white-space:nowrap;
}
.nav-stats-btn:hover, .nav-stats-btn:focus-visible{ color: var(--gold-soft); border-color: var(--nebula-soft); background: rgba(255,255,255,0.06); }

:focus-visible{ outline: 2px solid var(--nebula-soft); outline-offset: 3px; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;
  z-index:2;
  min-height:92vh;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  padding: 120px 5vw 60px;
  max-width:1400px;
  margin:0 auto;
}
.hero-content{ max-width:560px; }
.hero-eyebrow{
  font-family: var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color: var(--nebula-soft);
  margin-bottom:18px;
}
.hero-title{
  font-family: var(--font-display);
  font-weight:600;
  font-size: clamp(3.2rem, 7vw, 5.6rem);
  line-height:0.98;
  color: var(--text);
  margin-bottom:14px;
}
.hero-byline{
  font-size:0.94rem;
  color: var(--text-dim);
  margin-bottom:22px;
}
.hero-byline .dot{ color: var(--text-faint); margin:0 6px; }
.hero-desc{
  font-size:1.02rem;
  line-height:1.65;
  color: var(--text-dim);
  margin-bottom:34px;
  max-width:460px;
}
.hero-actions{ display:flex; gap:14px; }

.hero-content{ transition: opacity .4s var(--ease), transform .4s var(--ease); }
.hero-content.swap{ opacity:0; transform: translateY(10px); }
.hero-cover.swap{ opacity:0; transform: scale(.97); }
.hero-cover{ transition: opacity .4s var(--ease), transform .4s var(--ease), background .4s var(--ease); }

.hero-dots{
  display:flex;
  gap:8px;
  margin-top:32px;
}
.hero-dots button{
  width:22px; height:3px;
  border-radius:2px;
  background: var(--line);
  transition: background .25s var(--ease), width .25s var(--ease);
}
.hero-dots button.active{ background: var(--gold-soft); width:34px; }
.hero-dots button:hover{ background: var(--nebula-soft); }

.btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding: 13px 26px;
  border-radius: var(--radius);
  font-size:0.88rem;
  font-weight:700;
  letter-spacing:0.02em;
  transition: transform .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.btn-primary{
  background: var(--gold-soft);
  color: #1a1306;
}
.btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 8px 24px rgba(227,184,115,0.28); }
.btn-ghost{
  background: rgba(255,255,255,0.06);
  border:1px solid var(--line);
  color: var(--text);
}
.btn-ghost:hover{ background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); }
.btn-ghost.active-list{
  background: rgba(227,184,115,0.14);
  border-color: rgba(227,184,115,0.5);
  color: var(--gold-soft);
}

/* Hero orbit / signature element */
.hero-orbit{
  position:relative;
  width:380px;
  height:380px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.orbit-ring{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(185,173,223,0.22);
}
.ring-1{ width:100%; height:100%; animation: spin 40s linear infinite; }
.ring-2{ width:126%; height:126%; border-style:dashed; border-color:rgba(227,184,115,0.16); animation: spin 70s linear infinite reverse; }
@keyframes spin{ to{ transform: rotate(360deg); } }

.orbit-dot{
  position:absolute;
  width:6px; height:6px;
  border-radius:50%;
  background: var(--gold-soft);
  box-shadow: 0 0 10px 2px rgba(227,184,115,0.7);
}
.dot-a{ top:-3px; left:50%; animation: spin 40s linear infinite; transform-origin: 3px 193px; }
.dot-b{ width:4px; height:4px; background:var(--nebula-soft); box-shadow:0 0 8px 2px rgba(143,127,232,0.7); top:50%; right:-2px; animation: spin 70s linear infinite reverse; transform-origin: -237px 3px; }

.hero-cover{
  position:relative;
  width:230px;
  height:340px;
  border-radius: var(--radius);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:26px 22px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.06);
}
.cover-spine{
  position:absolute;
  left:0; top:0; bottom:0;
  width:8px;
  background: rgba(0,0,0,0.25);
}
.cover-title{
  font-family: var(--font-display);
  font-weight:600;
  font-size:1.6rem;
  line-height:1.1;
  color:#fff;
}
.cover-author{
  font-family: var(--font-mono);
  font-size:0.66rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color: rgba(255,255,255,0.75);
  margin-top:8px;
}

.hero-fade{
  position:absolute;
  left:0; right:0; bottom:0;
  height:160px;
  background: linear-gradient(180deg, transparent, var(--void));
  pointer-events:none;
}

/* Genre cover palettes — color encodes sector */
.cover-scifi      { background: linear-gradient(160deg, #1c2a5e 0%, #0b0f2b 70%); }
.cover-fantasy     { background: linear-gradient(160deg, #2e1f4f 0%, #140b2b 70%); }
.cover-classic     { background: linear-gradient(160deg, #4a2f1f 0%, #1c1109 70%); }
.cover-mystery     { background: linear-gradient(160deg, #1f2f2b 0%, #0a1210 70%); }
.cover-nonfiction  { background: linear-gradient(160deg, #33253f 0%, #150e1e 70%); }
.cover-user-a      { background: linear-gradient(160deg, #2f3f5e 0%, #10192b 70%); }
.cover-user-b      { background: linear-gradient(160deg, #3f2f4a 0%, #190f24 70%); }
.cover-user-c      { background: linear-gradient(160deg, #2f4a3f 0%, #0f1f19 70%); }
.cover-user-d      { background: linear-gradient(160deg, #4a3f2f 0%, #241a0f 70%); }
.cover-user-e      { background: linear-gradient(160deg, #4a2f3f 0%, #240f19 70%); }

.badge-mine{
  display:inline-block;
  margin-top:6px;
  margin-left:8px;
  font-family: var(--font-mono);
  font-size:0.62rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color: var(--void);
  background: var(--gold-soft);
  padding:2px 7px;
  border-radius: 999px;
  vertical-align:middle;
}
.card-cover-badge{
  position:absolute;
  top:12px; right:12px;
  font-family: var(--font-mono);
  font-size:0.58rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color: var(--void);
  background: var(--gold-soft);
  padding:3px 8px;
  border-radius: 999px;
}

/* ==========================================================================
   Rows
   ========================================================================== */
main{ position:relative; z-index:2; }

.row{ padding: 34px 5vw; max-width:1600px; margin:0 auto; }
.row-head{ display:flex; align-items:baseline; gap:14px; margin-bottom:18px; }
.row-coord{
  font-family: var(--font-mono);
  font-size:0.7rem;
  letter-spacing:0.14em;
  color: var(--text-faint);
}
.row-title{
  font-family: var(--font-display);
  font-weight:600;
  font-size:1.7rem;
  color: var(--text);
}

.row-track{ position:relative; }
.row-scroll{
  display:flex;
  gap:18px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding: 6px 2px 18px;
  scrollbar-width:none;
}
.row-scroll::-webkit-scrollbar{ display:none; }

.scroll-btn{
  position:absolute;
  top:0; bottom:18px;
  width:44px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem;
  color: var(--text);
  background: linear-gradient(90deg, var(--void) 20%, transparent);
  z-index:5;
  opacity:0;
  transition: opacity .2s var(--ease);
}
.scroll-btn.right{ right:0; background: linear-gradient(270deg, var(--void) 20%, transparent); }
.row-track:hover .scroll-btn{ opacity:1; }

/* :hover never fires on touch, so the arrows above would stay invisible
   (and effectively unusable) on phones/tablets forever. Show them as
   real, always-visible round buttons there instead. */
@media (hover: none), (pointer: coarse){
  .scroll-btn{
    opacity:1;
    top:50%; bottom:auto;
    transform: translateY(-50%);
    width:38px; height:38px;
    border-radius:50%;
    background: rgba(3,3,8,0.72);
    border:1px solid var(--line);
    backdrop-filter: blur(6px);
    margin: 0 4px;
  }
  .scroll-btn.left{ left:0; }
  .scroll-btn.right{ right:0; }
  .scroll-btn:active{ background: rgba(3,3,8,0.9); }
}

/* Card */
.card{
  flex: 0 0 auto;
  width:180px;
  cursor:pointer;
  transition: transform .28s var(--ease);
}
.card:hover, .card:focus-within{ transform: translateY(-6px); }

.card-cover{
  position:relative;
  width:100%;
  height:262px;
  border-radius: var(--radius);
  padding:20px 16px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
  box-shadow: 0 6px 18px -8px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.05);
  transition: box-shadow .28s var(--ease);
}
.card:hover .card-cover, .card:focus-within .card-cover{
  box-shadow: 0 18px 40px -12px rgba(0,0,0,0.75), 0 0 0 1px rgba(255,255,255,0.1), 0 0 0 3px rgba(185,173,223,0.18);
}
.card-cover::after{
  content:'';
  position:absolute; inset:0;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: border-color .3s var(--ease);
  pointer-events:none;
}
.card:hover .card-cover::after, .card:focus-within .card-cover::after{
  border-color: rgba(227,184,115,0.5);
  animation: pulse-ring 1.4s var(--ease) infinite;
}
@keyframes pulse-ring{
  0%   { box-shadow: 0 0 0 0 rgba(227,184,115,0.35); }
  100% { box-shadow: 0 0 0 8px rgba(227,184,115,0); }
}

.card-cover-title{
  font-family: var(--font-display);
  font-weight:600;
  font-size:1.18rem;
  line-height:1.15;
  color:#fff;
}
.card-cover-author{
  font-family: var(--font-mono);
  font-size:0.6rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color: rgba(255,255,255,0.7);
  margin-top:6px;
}

.card-info{ padding:12px 2px 0; }
.card-info h3{
  font-size:0.92rem;
  font-weight:700;
  color: var(--text);
  margin-bottom:3px;
}
.card-info p{
  font-size:0.78rem;
  color: var(--text-faint);
}
.rating{
  display:inline-block;
  margin-top:6px;
  font-family: var(--font-mono);
  font-size:0.72rem;
  color: var(--gold-soft);
}

.card.hidden{ display:none; }

/* Bookmark ("+ My List") toggle on each card */
.card-list-btn{
  position:absolute;
  top:10px; right:10px;
  z-index:2;
  width:30px; height:30px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background: rgba(3,3,8,0.55);
  backdrop-filter: blur(4px);
  color: rgba(255,255,255,0.85);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12);
  transition: background .2s var(--ease), color .2s var(--ease), transform .18s var(--ease), box-shadow .2s var(--ease);
}
.card-list-btn:hover, .card-list-btn:focus-visible{
  background: rgba(3,3,8,0.8);
  transform: scale(1.08);
}
.card-list-btn.active{
  color: #1a1306;
  background: var(--gold-soft);
  box-shadow: 0 0 0 1px rgba(227,184,115,0.6), 0 0 12px 1px rgba(227,184,115,0.45);
}
.card-list-btn.active svg{ fill: currentColor; }

/* ==========================================================================
   My List — saved-for-later shelf
   ========================================================================== */
.my-list-row{
  position:relative;
  border:1px solid rgba(227,184,115,0.18);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(227,184,115,0.06) 0%, rgba(227,184,115,0) 55%);
  margin-bottom:6px;
}
.my-list-row .row-coord{ color: var(--gold-soft); }
.my-list-empty{
  max-width:520px;
  padding: 4px 2px 22px;
  font-size:0.88rem;
  line-height:1.6;
  color: var(--text-faint);
}

/* ---------- search states ---------- */
body.is-searching #sectors{ padding-top: 130px; }

.no-results{
  display:none;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:8px;
  max-width:520px;
  margin:0 auto;
  padding: 20px 5vw 60px;
}
.no-results.visible{ display:flex; }
.no-results-eyebrow{
  font-family: var(--font-mono);
  font-size:0.7rem;
  letter-spacing:0.18em;
  color: var(--gold-soft);
}
.no-results-title{
  font-family: var(--font-display);
  font-weight:600;
  font-size:1.7rem;
  color: var(--text);
}
.no-results-text{
  font-size:0.92rem;
  line-height:1.6;
  color: var(--text-faint);
}
.no-results-text span{ color: var(--text); font-weight:600; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  position:relative; z-index:2;
  padding: 64px 5vw 0;
  border-top: 1px solid var(--line);
  margin-top:40px;
}
.footer-logo{
  font-family: var(--font-display);
  font-weight:600;
  letter-spacing:0.14em;
  font-size:1.2rem;
  color: var(--gold-soft);
  margin-bottom:14px;
}
.footer-text{
  color: var(--text-dim);
  font-size:0.9rem;
  max-width:320px;
  margin:0 0 10px;
  line-height:1.6;
}
.footer-meta{
  font-family: var(--font-mono);
  font-size:0.68rem;
  letter-spacing:0.06em;
  color: var(--text-faint);
}

.footer-grid{
  max-width:1400px;
  margin:0 auto;
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap:32px;
  padding-bottom:48px;
}
.footer-col h4{
  font-family: var(--font-body);
  font-weight:700;
  font-size:0.82rem;
  letter-spacing:0.06em;
  color: var(--text);
  margin-bottom:16px;
}
.footer-col ul{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:11px;
}
.footer-col a{
  color: var(--text-dim);
  font-size:0.85rem;
  text-decoration:none;
  transition: color .2s var(--ease);
}
.footer-col a:hover, .footer-col a:focus-visible{ color: var(--gold-soft); }

.footer-bottom{
  max-width:1400px;
  margin:0 auto;
  padding: 24px 0 32px;
  border-top: 1px solid var(--line);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.footer-bottom-links{ display:flex; gap:18px; }
.footer-bottom-links a{
  color: var(--text-faint);
  font-size:0.78rem;
  text-decoration:none;
  transition: color .2s var(--ease);
}
.footer-bottom-links a:hover, .footer-bottom-links a:focus-visible{ color: var(--gold-soft); }

@media (max-width: 860px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .footer-text{ max-width:100%; }
}
@media (max-width: 520px){
  .footer-grid{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   Static content pages (About, Guide, Contact, Terms, Privacy)
   ========================================================================== */
.static-page{
  position:relative; z-index:2;
  max-width:760px;
  margin:0 auto;
  padding: 160px 5vw 100px;
}
.static-page h1{
  font-family: var(--font-display);
  font-weight:600;
  font-size:2.4rem;
  color: var(--text);
  margin-bottom:10px;
}
.static-kicker{
  font-family: var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color: var(--gold-soft);
  margin-bottom:14px;
  display:block;
}
.static-lede{
  color: var(--text-dim);
  font-size:1.05rem;
  line-height:1.7;
  margin-bottom:40px;
  max-width:600px;
}
.static-page h2{
  font-family: var(--font-display);
  font-weight:600;
  font-size:1.5rem;
  color: var(--gold-soft);
  margin: 44px 0 14px;
}
.static-page h3{
  font-family: var(--font-body);
  font-weight:700;
  font-size:1rem;
  color: var(--text);
  margin: 26px 0 10px;
}
.static-page p{
  color: var(--text-dim);
  font-size:0.95rem;
  line-height:1.75;
  margin-bottom:14px;
}
.static-page ul{
  margin: 4px 0 16px 20px;
  color: var(--text-dim);
  font-size:0.95rem;
  line-height:1.75;
}
.static-page li{ margin-bottom:6px; }
.static-page a{ color: var(--gold-soft); }
.static-page strong{ color: var(--text); }
.static-back{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color: var(--text-dim);
  font-size:0.85rem;
  text-decoration:none;
  margin-bottom:28px;
  transition: color .2s var(--ease);
}
.static-back:hover{ color: var(--gold-soft); }
.static-contact-card{
  border:1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.03);
  padding:24px;
  margin-top:12px;
}
.static-contact-card a{ font-family: var(--font-mono); }

/* ==========================================================================
   Reader view
   ========================================================================== */
.reader{
  position:fixed;
  inset:0;
  height:100vh;
  height:100dvh;
  z-index:100;
  background: var(--void);
  opacity:0;
  visibility:hidden;
  transform: translateY(24px);
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s linear .35s;
  display:flex;
  flex-direction:column;
  overscroll-behavior:contain;
}
.reader.open{
  opacity:1;
  visibility:visible;
  transform: translateY(0);
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s;
}

.reader-bar{
  position:relative;
  flex-shrink:0;
  padding: calc(18px + env(safe-area-inset-top)) 5vw 14px;
  padding-left: max(5vw, env(safe-area-inset-left));
  padding-right: max(5vw, env(safe-area-inset-right));
  border-bottom: 1px solid var(--line);
  display:flex;
  align-items:center;
  gap:24px;
  background: rgba(3,3,8,0.9);
  backdrop-filter: blur(10px);
}
.reader-back{
  font-size:0.84rem;
  font-weight:600;
  color: var(--text-dim);
  transition: color .2s var(--ease);
  flex-shrink:0;
  padding:8px 4px;
  margin:-8px -4px;
}
.reader-back:hover, .reader-back:focus-visible{ color: var(--gold-soft); }

.reader-meta{
  font-family: var(--font-display);
  font-size:1.02rem;
  color: var(--text);
  display:flex;
  align-items:baseline;
  gap:8px;
  min-width:0;
  overflow:hidden;
}
.reader-title{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.reader-author{ color: var(--text-dim); font-size:0.92rem; flex-shrink:0; }
.reader-dot{ color: var(--text-faint); flex-shrink:0; }

.reader-chapters-nav{
  display:flex;
  align-items:center;
  gap:6px;
  margin-left:auto;
  flex-shrink:0;
}
.chapter-nav-btn{
  width:28px; height:28px;
  border-radius:50%;
  background: rgba(255,255,255,0.06);
  border:1px solid var(--line);
  color: var(--text);
  font-size:1rem;
  line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition: background .2s var(--ease), border-color .2s var(--ease), opacity .2s var(--ease);
}
.chapter-nav-btn:hover:not(:disabled){ background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.24); }
.chapter-nav-btn:active:not(:disabled){ background: rgba(255,255,255,0.2); }
.chapter-nav-btn:disabled{ opacity:0.35; cursor:default; }
#readerChapterSelect{
  background: rgba(255,255,255,0.05);
  border:1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size:0.74rem;
  letter-spacing:0.03em;
  padding:6px 12px;
  max-width:180px;
  appearance:none;
  cursor:pointer;
}
#readerChapterSelect option{ background: var(--panel); color: var(--text); }

.reader-progress-wrap{
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:2px;
  background: transparent;
}
.reader-progress{
  height:100%;
  width:0%;
  background: linear-gradient(90deg, var(--nebula-soft), var(--gold-soft));
  transition: width .1s linear;
}

.reader-page{
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  padding: 64px 5vw 140px;
  padding-left: max(5vw, env(safe-area-inset-left));
  padding-right: max(5vw, env(safe-area-inset-right));
  scroll-behavior:smooth;
}
.reader-chapter{
  max-width:640px;
  margin:0 auto;
  font-family: var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color: var(--nebula-soft);
  margin-bottom:10px;
}
.reader-heading{
  max-width:640px;
  margin:0 auto 36px;
  font-family: var(--font-display);
  font-weight:600;
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  color: var(--text);
}
.reader-text{
  max-width:640px;
  margin:0 auto;
}
.reader-text p{
  font-family: var(--font-display);
  font-size:1.28rem;
  line-height:1.85;
  color: var(--text);
  margin-bottom:1.4em;
}
.reader-note{
  max-width:640px;
  margin: 40px auto 0;
  padding-top:24px;
  border-top:1px solid var(--line);
  font-size:0.82rem;
  line-height:1.6;
  color: var(--text-faint);
}

@media (max-width: 700px){
  .reader-meta{ display:none; }
  .reader-bar{ gap:12px; }

  /* Make the exit button impossible to miss on phones: a solid,
     circular, fixed-position button pinned to the top-left of the
     screen (independent of the reader-bar's own layout), always at
     least a 44px touch target with real background/border contrast
     so it stands out from the reading text underneath it. */
  .reader-back{
    position:fixed;
    top: max(14px, env(safe-area-inset-top));
    left: max(14px, env(safe-area-inset-left));
    z-index:10;
    width:40px; height:40px;
    padding:0; margin:0;
    display:flex; align-items:center; justify-content:center;
    font-size:0; /* the "Back to Orbit Novel" label stays in the DOM for
                    screen readers, we just don't render it visually
                    at this size — the circle is too small for text */
    color: var(--text);
    background: rgba(3,3,8,0.85);
    border:1px solid var(--line);
    border-radius:50%;
    backdrop-filter: blur(10px);
  }
  .reader-back::before{
    content:"‹";
    font-size:1.5rem;
    line-height:1;
  }
  .reader-back:active{ background: rgba(255,255,255,0.12); }
  /* Leave room in the top bar so nothing sits under the fixed button */
  .reader-bar{ padding-left: calc(48px + max(5vw, env(safe-area-inset-left))); }

  .reader-page{
    padding: 40px 6vw 132px;
    padding-bottom: calc(132px + env(safe-area-inset-bottom));
  }
  .reader-text p{ font-size:1.12rem; }
  .reader-heading{ font-size: clamp(1.8rem, 7vw, 2.4rem); margin-bottom:24px; }

  /* Pull the chapter controls out of the cramped top bar and pin them to
     the bottom of the screen instead — a full-width, thumb-reachable
     strip, the way most mobile reading apps place page controls.
     .reader has its own transform, which makes it the containing block
     for this fixed element, so "bottom:0" lands at the true screen edge. */
  .reader-chapters-nav{
    position:fixed;
    left:0; right:0; bottom:0;
    margin-left:0;
    z-index:6;
    gap:0;
    padding: 10px max(16px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    background: rgba(3,3,8,0.92);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
  }
  .chapter-nav-btn{
    width:44px; height:44px;
    font-size:1.2rem;
    background: rgba(255,255,255,0.08);
  }
  #readerChapterSelect{
    flex:1;
    max-width:none;
    margin:0 10px;
    text-align:center;
    padding:12px 12px;
    font-size:16px;
  }
}

/* ==========================================================================
   Book detail overlay
   ========================================================================== */
.detail{
  position:fixed;
  inset:0;
  z-index:110;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 6vh 5vw;
  opacity:0;
  visibility:hidden;
  transition: opacity .3s var(--ease), visibility 0s linear .3s;
}
.detail.open{
  opacity:1;
  visibility:visible;
  transition: opacity .3s var(--ease), visibility 0s;
}
.detail-scrim{
  position:absolute;
  inset:0;
  background: rgba(3,3,8,0.86);
  backdrop-filter: blur(10px);
}
.detail-panel{
  position:relative;
  z-index:1;
  width:100%;
  max-width:880px;
  max-height:88vh;
  overflow-y:auto;
  background: linear-gradient(160deg, var(--panel) 0%, var(--space-deep) 100%);
  border:1px solid var(--line);
  border-radius: 14px;
  padding: 28px 5vw 44px;
  transform: translateY(18px) scale(.985);
  opacity:0;
  transition: transform .35s var(--ease), opacity .35s var(--ease);
}
.detail.open .detail-panel{ transform: translateY(0) scale(1); opacity:1; }

.detail-close{
  font-size:0.84rem;
  font-weight:600;
  color: var(--text-dim);
  transition: color .2s var(--ease);
  margin-bottom:26px;
}
.detail-close:hover, .detail-close:focus-visible{ color: var(--gold-soft); }

.detail-body{
  display:flex;
  gap:44px;
  align-items:flex-start;
}
.detail-cover{
  position:relative;
  flex-shrink:0;
  width:230px;
  height:340px;
  border-radius: var(--radius);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:26px 22px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.06);
}
.detail-info{ flex:1; min-width:0; padding-top:6px; }
.detail-coord{
  font-family: var(--font-mono);
  font-size:0.7rem;
  letter-spacing:0.14em;
  color: var(--nebula-soft);
  text-transform:uppercase;
  margin-bottom:14px;
}
.detail-title{
  font-family: var(--font-display);
  font-weight:600;
  font-size: clamp(2.2rem, 4vw, 3rem);
  line-height:1.02;
  color: var(--text);
  margin-bottom:12px;
}
.detail-byline{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:0.92rem;
  color: var(--text-dim);
  margin-bottom:24px;
}
.detail-byline .dot{ color: var(--text-faint); }
.detail-blurb{
  font-size:1.02rem;
  line-height:1.7;
  color: var(--text-dim);
  max-width:520px;
  margin-bottom:34px;
}

.detail-chapters{ margin-top:8px; }
.detail-chapters-label{
  font-family: var(--font-mono);
  font-size:0.7rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color: var(--text-faint);
  margin-bottom:12px;
}
.detail-chapters-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height:220px;
  overflow-y:auto;
  padding-right:4px;
}
.detail-chapter-btn{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  text-align:left;
  padding:10px 14px;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.03);
  border:1px solid var(--line);
  color: var(--text-dim);
  font-size:0.86rem;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.detail-chapter-btn:hover, .detail-chapter-btn:focus-visible{
  background: rgba(227,184,115,0.1);
  border-color: rgba(227,184,115,0.35);
  color: var(--text);
}
.detail-chapter-num{
  font-family: var(--font-mono);
  font-size:0.72rem;
  color: var(--nebula-soft);
  flex-shrink:0;
}
.detail-chapter-title{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---------- follow author ---------- */
.detail-author-row{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:-10px;
  margin-bottom:22px;
}
.follow-btn{
  padding:6px 16px;
  border-radius:999px;
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.02em;
  background: rgba(255,255,255,0.06);
  border:1px solid var(--line);
  color: var(--text);
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.follow-btn:hover{ background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); }
.follow-btn.following{
  background: rgba(227,184,115,0.14);
  border-color: rgba(227,184,115,0.5);
  color: var(--gold-soft);
}
.follower-count{
  font-family: var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.04em;
  color: var(--text-faint);
}

/* ---------- comments ---------- */
.detail-comments{
  margin-top:36px;
  padding-top:28px;
  border-top:1px solid var(--line);
}
.detail-comments-label{
  font-family: var(--font-mono);
  font-size:0.7rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color: var(--text-faint);
  margin-bottom:16px;
}
.detail-comments-label span{ color: var(--nebula-soft); }
.comment-form{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin-bottom:10px;
}
/* Same [hidden]-override issue as .nav-user above: without this, the
   comment box stays visible even for signed-out users instead of being
   replaced by the "sign in to comment" hint. */
.comment-form[hidden]{ display:none; }
.comment-form textarea{
  flex:1;
  background: rgba(255,255,255,0.04);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:11px 14px;
  color: var(--text);
  font-family: var(--font-body);
  font-size:16px;
  line-height:1.5;
  resize:vertical;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.comment-form textarea:focus{
  outline:none;
  border-color: var(--nebula-soft);
  background: rgba(255,255,255,0.06);
}
.comment-form .btn{ flex-shrink:0; padding:11px 20px; }
.comment-signin-hint{
  font-size:0.84rem;
  color: var(--text-faint);
  margin-bottom:10px;
}
.comment-signin-link{ color: var(--nebula-soft); font-weight:600; }
.comment-signin-link:hover{ color: var(--gold-soft); }
.comment-error{
  font-size:0.82rem;
  color:#ff8a8a;
  margin-bottom:10px;
  min-height:0;
  display:none;
}
.comment-error.visible{ display:block; }
.comment-empty{
  font-size:0.86rem;
  color: var(--text-faint);
  padding:18px 0;
}
.comment-list{
  display:flex;
  flex-direction:column;
  gap:18px;
  margin-top:18px;
}
.comment-item{
  display:flex;
  gap:12px;
}
.comment-avatar{
  width:32px; height:32px;
  border-radius:50%;
  background: rgba(185,173,223,0.16);
  color: var(--nebula-soft);
  font-family: var(--font-mono);
  font-weight:700;
  font-size:0.8rem;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.comment-body{ flex:1; min-width:0; }
.comment-head{
  display:flex;
  align-items:baseline;
  gap:8px;
  margin-bottom:4px;
  flex-wrap:wrap;
}
.comment-author{ font-size:0.86rem; font-weight:700; color: var(--text); }
.comment-time{ font-size:0.72rem; color: var(--text-faint); font-family: var(--font-mono); }
.comment-text{
  font-size:0.9rem;
  line-height:1.6;
  color: var(--text-dim);
  white-space:pre-wrap;
  overflow-wrap:break-word;
}
.comment-delete{
  font-size:0.72rem;
  color: var(--text-faint);
  margin-top:6px;
  transition: color .18s var(--ease);
}
.comment-delete:hover{ color:#ff8a8a; }

@media (max-width: 760px){
  /* On phones this becomes a true full-screen page instead of a floating
     card: no gap around the edges, no rounded corners. Comments make the
     amount of content open-ended, so — unlike the old fixed one-screen
     layout — the panel itself scrolls; the chapters list keeps its own
     small internal scroll on top of that since it's most useful capped. */
  .detail{ padding:0; }
  .detail-panel{
    width:100%;
    max-width:none;
    height:100vh;
    height:100dvh;
    max-height:none;
    border-radius:0;
    border:none;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding: max(20px, env(safe-area-inset-top)) max(6vw, env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) max(6vw, env(safe-area-inset-left));
  }
  .detail-panel .detail-close{ margin-bottom:18px; }
  .detail-body{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
  .detail-cover{
    width:120px;
    height:176px;
    margin-bottom:14px;
    flex-shrink:0;
    padding:16px 14px;
    overflow:hidden;
  }
  .detail-cover .cover-title{ font-size:1.05rem; }
  .detail-cover .cover-author{ font-size:0.58rem; }
  .detail-info{ display:flex; flex-direction:column; width:100%; }
  .detail-coord{ margin-bottom:8px; }
  .detail-title{ font-size: clamp(1.5rem, 6vw, 2rem); margin-bottom:8px; }
  .detail-byline{ justify-content:center; margin-bottom:14px; }
  .detail-author-row{ justify-content:center; margin-top:0; }
  .detail-blurb{
    margin:0 auto 18px;
    max-width:440px;
    font-size:0.92rem;
    line-height:1.55;
    /* Clamp to a fixed number of lines rather than showing the whole
       blurb — it's still available in full once you start reading. */
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .detail-panel .hero-actions{
    justify-content:center;
    flex-wrap:wrap;
  }
  /* The primary action (Start/Continue Reading) gets its own full-width
     row so it's never squeezed or clipped by the secondary buttons —
     matches the "big CTA under the book" pattern most reading apps use. */
  .detail-panel .hero-actions #detailReadBtn{
    flex: 1 1 100%;
    justify-content:center;
  }
  /* The rest (My List, Share, Edit, Delete) share the row(s) below,
     each taking roughly a quarter width so up to 4 fit per row before
     wrapping — grow so a lone leftover button doesn't look stranded. */
  .detail-panel .hero-actions > .btn-ghost{
    flex: 1 1 calc(25% - 11px);
    justify-content:center;
    padding-left:14px;
    padding-right:14px;
  }
  .detail-chapters{ margin-top:16px; width:100%; }
  .detail-chapters-list{ max-height:280px; }
  .detail-comments{ text-align:left; }
  .comment-form{ flex-direction:column; }
  .comment-form .btn{ align-self:flex-end; }
}

/* ==========================================================================
   Write-your-own-book compose overlay
   ========================================================================== */
.compose{
  position:fixed;
  inset:0;
  z-index:120;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding: 6vh 5vw;
  opacity:0;
  visibility:hidden;
  overflow-y:auto;
  transition: opacity .3s var(--ease), visibility 0s linear .3s;
}
.compose.open{
  opacity:1;
  visibility:visible;
  transition: opacity .3s var(--ease), visibility 0s;
}
.compose-scrim{
  position:fixed;
  inset:0;
  background: rgba(3,3,8,0.88);
  backdrop-filter: blur(10px);
}
.compose-panel{
  position:relative;
  z-index:1;
  width:100%;
  max-width:680px;
  background: linear-gradient(160deg, var(--panel) 0%, var(--space-deep) 100%);
  border:1px solid var(--line);
  border-radius: 14px;
  padding: 28px 5vw 40px;
  margin-bottom: 6vh;
  transform: translateY(18px) scale(.985);
  opacity:0;
  transition: transform .35s var(--ease), opacity .35s var(--ease);
}
.compose.open .compose-panel{ transform: translateY(0) scale(1); opacity:1; }

.compose-heading{
  font-family: var(--font-display);
  font-weight:600;
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
  color: var(--text);
  margin-bottom:10px;
}
.compose-sub{
  font-size:0.92rem;
  line-height:1.6;
  color: var(--text-dim);
  max-width:480px;
  margin-bottom:28px;
}

.compose-form{ display:flex; flex-direction:column; gap:18px; }
.field-row{ display:flex; gap:16px; flex-wrap:wrap; }
.field{
  display:flex;
  flex-direction:column;
  gap:7px;
  flex:1 1 200px;
}
/* Same [hidden]-override issue as above — without this, #newGenreField
   ("+ Add new genre" input) stays visible in the compose form even when
   the genre dropdown isn't set to "new". */
.field[hidden]{ display:none; }
.field-narrow{ flex:0 1 140px; }
.field span{
  font-family: var(--font-mono);
  font-size:0.68rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color: var(--text-faint);
}
.field input,
.field select,
.field textarea{
  background: rgba(255,255,255,0.04);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:11px 14px;
  color: var(--text);
  font-family: var(--font-body);
  font-size:16px;
  transition: border-color .2s var(--ease), background .2s var(--ease);
  resize: vertical;
}
.field textarea{ font-family: var(--font-display); font-size:1.02rem; line-height:1.6; }
.field input::placeholder,
.field textarea::placeholder{ color: var(--text-faint); }
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color: var(--nebula-soft);
  background: rgba(255,255,255,0.06);
}
.field select{ appearance:none; cursor:pointer; }
.field select option{ background: var(--panel); color: var(--text); }

.field-cover{ flex:1 1 100%; }
.cover-upload{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.cover-upload-btn{ padding:9px 16px; font-size:0.82rem; }
.cover-upload-hint{
  font-size:0.78rem;
  color: var(--text-faint);
}
.cover-preview{
  position:relative;
  width:64px;
  height:94px;
  border-radius:8px;
  overflow:hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.1);
  flex-shrink:0;
}
.cover-preview img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.cover-preview-remove{
  position:absolute;
  top:3px; right:3px;
  width:20px; height:20px;
  border-radius:50%;
  background: rgba(3,3,8,0.75);
  color:#fff;
  font-size:0.95rem;
  line-height:1;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,0.15);
}
.cover-preview-remove:hover{ background: rgba(3,3,8,0.95); }

.compose-error{
  font-size:0.82rem;
  color: #e88;
  min-height:1em;
}
.compose-error.visible{ color: #ff8a8a; }

/* Chapters editor */
.chapters-field{ flex:1 1 100%; gap:12px; }
.chapters-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.chapters-head-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.chapter-add-btn{ padding:7px 14px; font-size:0.76rem; flex-shrink:0; }
.chapter-import-btn{ padding:7px 14px; font-size:0.76rem; flex-shrink:0; }
.chapters-hint{
  font-family: var(--font-body);
  font-size:0.8rem;
  color: var(--text-faint);
  text-transform:none;
  letter-spacing:normal;
  margin-top:-4px;
}

/* ---- bulk import panel ---- */
.import-panel{
  border:1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(143,127,232,0.05);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.import-panel-label{
  font-family: var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color: var(--nebula-soft);
}
.import-textarea{
  width:100%;
  resize:vertical;
  font-family: var(--font-body);
  font-size:16px;
  line-height:1.55;
}
.import-controls{ display:flex; gap:16px; flex-wrap:wrap; }
.import-mode-field{ display:flex; flex-direction:column; gap:6px; flex:1 1 220px; }
.import-mode-field span{
  font-family: var(--font-mono);
  font-size:0.68rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color: var(--text-faint);
}
.import-note{
  font-size:0.8rem;
  line-height:1.5;
  color: var(--text-dim);
  min-height:1.2em;
}
.import-note.is-error{ color:#ff8a8a; }
.import-note.is-success{ color: var(--gold-soft); }
.import-preview{
  border-top:1px solid var(--line);
  padding-top:12px;
}
.import-preview-label{
  font-size:0.82rem;
  color: var(--text-dim);
  margin-bottom:8px;
}
.import-preview-list{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height:220px;
  overflow-y:auto;
  padding-right:4px;
}
.import-preview-list li{
  font-family: var(--font-mono);
  font-size:0.76rem;
  color: var(--text-dim);
  padding:8px 10px;
  background: rgba(255,255,255,0.03);
  border-radius:4px;
  display:flex;
  gap:8px;
}
.import-preview-list li .import-preview-num{ color: var(--nebula-soft); flex-shrink:0; }
.import-preview-list li .import-preview-title{
  color: var(--text);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.import-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.import-actions .btn{ padding:9px 16px; font-size:0.8rem; }

.chapters-list{ display:flex; flex-direction:column; gap:14px; }
.chapter-item{
  border:1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.02);
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.chapter-item-head{
  display:flex;
  align-items:center;
  gap:10px;
}
.chapter-item-num{
  font-family: var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color: var(--nebula-soft);
  flex-shrink:0;
  white-space:nowrap;
}
.chapter-title-input{ flex:1; min-width:0; }
.chapter-remove-btn{
  width:26px; height:26px;
  border-radius:50%;
  flex-shrink:0;
  background: rgba(255,255,255,0.06);
  color: var(--text-dim);
  font-size:1rem;
  line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.chapter-remove-btn:hover{ background: rgba(255,120,120,0.16); color:#ff8a8a; }
.chapter-remove-btn:disabled{ opacity:0.3; cursor:default; }
.chapter-content-input{ width:100%; }

/* Sign in / create account */
.auth-switch{
  font-size:0.82rem;
  color: var(--text-faint);
  margin-top:-4px;
}
.auth-switch-btn{
  color: var(--gold-soft);
  font-weight:700;
  text-decoration: underline;
  text-underline-offset:3px;
  margin-left:4px;
}
.auth-switch-btn:hover, .auth-switch-btn:focus-visible{ color: var(--gold); }

/* ---------- My Stories (author dashboard) ---------- */
.stats-summary{
  display:flex;
  gap:12px;
  margin-bottom:26px;
  flex-wrap:wrap;
}
.stats-summary-item{
  flex:1 1 120px;
  background: rgba(255,255,255,0.04);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:14px 16px;
  text-align:center;
}
.stats-summary-num{
  display:block;
  font-family: var(--font-display);
  font-weight:600;
  font-size:1.9rem;
  color: var(--gold-soft);
  line-height:1.2;
}
.stats-summary-label{
  font-family: var(--font-mono);
  font-size:0.66rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color: var(--text-faint);
}

.stats-list{ display:flex; flex-direction:column; gap:10px; }
.stats-item{
  display:flex;
  align-items:center;
  gap:14px;
  background: rgba(255,255,255,0.03);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:10px 14px;
}
.stats-item-cover{
  width:40px; height:56px;
  border-radius:3px;
  flex-shrink:0;
  background-size:cover;
  background-position:center;
}
.stats-item-info{ flex:1; min-width:0; }
.stats-item-title{
  font-family: var(--font-display);
  font-weight:600;
  font-size:1.05rem;
  color: var(--text);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.stats-item-sector{
  font-family: var(--font-mono);
  font-size:0.68rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color: var(--text-faint);
}
.stats-item-metrics{
  display:flex;
  gap:16px;
  flex-shrink:0;
}
.stats-metric{
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width:44px;
}
.stats-metric-num{ font-family: var(--font-mono); font-weight:600; font-size:0.95rem; color: var(--nebula-soft); }
.stats-metric-label{ font-family: var(--font-mono); font-size:0.6rem; letter-spacing:0.05em; text-transform:uppercase; color: var(--text-faint); }

.stats-empty{ font-size:0.9rem; color: var(--text-dim); padding:20px 0; text-align:center; }

@media (max-width: 520px){
  .stats-item-metrics{ gap:10px; }
  .stats-metric{ min-width:36px; }
}

@media (max-width: 700px){
  .compose-panel{ padding: 24px 6vw 34px; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px){
  .nav-links{ display:none; }

  /* Wrap + explicit order kicks in as soon as nav-links disappear, not at
     some smaller width further down — otherwise there's a dead zone
     (tablets, phones in landscape, big-screen phones) where the row can
     no longer fit logo + auth + write button but isn't yet allowed to
     wrap, so the write button (and, once signed in, the sign-out button
     riding along inside nav-auth) silently overflows past the edge of
     the screen and is never reachable. Wrapping to a second row keeps
     every control on screen at any width in this range. */
  .nav-inner{
    gap:10px;
    flex-wrap: wrap;
    row-gap: 12px;
  }
  .logo{ order:1; font-size:1.4rem; }
  .nav-auth{ order:2; margin-left:auto; }
  .nav-write-btn{ order:3; padding:9px 12px; }
  .nav-write-label{ display:none; }
  .nav-search{ order:4; flex:1 1 100%; }
  .nav-search input{ width:100%; flex:1; }
  .nav-user-name{ max-width:110px; }

  .hero{ flex-direction:column-reverse; text-align:center; padding-top:140px; }
  .hero-content{ max-width:100%; }
  .hero-desc{ margin-left:auto; margin-right:auto; }
  .hero-actions{ justify-content:center; }
  .hero-orbit{ width:260px; height:260px; }
  .hero-cover{ width:170px; height:250px; }

  /* Full-strength blur behind a fixed bar gets recomputed every scroll
     frame — a real GPU cost on mid/low-end phones. Trim it here rather
     than drop it, since these bars sit above scrolling content the
     whole time the nav/reader is on screen. */
  .nav.scrolled{ backdrop-filter: blur(8px); background: rgba(3,3,8,0.92); }
  .reader-bar{ backdrop-filter: blur(6px); }
  .reader-chapters-nav{ backdrop-filter: blur(8px); }
}

@media (max-width: 640px){
  .nav-user-name{ max-width:84px; }
  .nav-stats-btn{ padding:6px 9px; }
}

@media (max-width: 380px){
  /* Smallest phones: the signed-in pill (avatar + name + sign-out) plus
     the write button can still be tight next to the logo. Trim further
     instead of letting anything clip off the right edge. */
  .logo{ font-size:1.24rem; }
  .nav-user-name{ max-width:56px; }
  .nav-signout-btn{ padding:8px 8px; margin-right:-8px; }
  .nav-stats-btn{ font-size:0; padding:6px; width:26px; height:26px; }
  .nav-stats-btn::before{ content:"↗"; font-size:0.8rem; }
}

@media (max-width: 520px){
  .card{ width:140px; }
  .card-cover{ height:206px; }
}

/* ==========================================================================
   ORBIT NOVEL — added in this pass: notifications, real ratings, chapter likes,
   tags, trending row, profile modal, password reset.
   ========================================================================== */

/* ---- trending cover ---- */
.cover-trending { background: linear-gradient(160deg, #4f2f2f 0%, #240f0f 70%); }

/* ---- notification bell ---- */
.nav-notif{ position:relative; }
.nav-notif-btn{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%; border:1px solid var(--line);
  background: rgba(255,255,255,0.03); color: var(--text-dim); cursor:pointer;
  transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.nav-notif-btn:hover, .nav-notif-btn:focus-visible{ color: var(--gold-soft); border-color: var(--nebula-soft); background: rgba(255,255,255,0.06); }
.nav-notif-badge{
  position:absolute; top:-4px; right:-4px; min-width:15px; height:15px; padding:0 3px;
  border-radius:8px; background: var(--nebula); color:#0a0d24; font:700 0.62rem/15px var(--font-body);
  text-align:center;
}
.nav-notif-panel{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%);
  width:300px; max-height:360px; overflow-y:auto; background: var(--panel);
  border:1px solid var(--line); border-radius: var(--radius); box-shadow: 0 18px 40px rgba(0,0,0,0.5);
  padding:14px; z-index:60;
}
.nav-notif-title{ font:700 0.72rem/1 var(--font-mono); letter-spacing:0.08em; text-transform:uppercase; color: var(--text-dim); margin-bottom:10px; }
.nav-notif-list{ display:flex; flex-direction:column; gap:2px; }
.nav-notif-item{
  display:block; width:100%; text-align:left; background:none; border:none; cursor:pointer;
  color: var(--text); font:500 0.82rem/1.4 var(--font-body); padding:9px 8px; border-radius:5px;
}
.nav-notif-item:hover, .nav-notif-item:focus-visible{ background: rgba(255,255,255,0.06); }
.nav-notif-item.unread{ background: rgba(143,127,232,0.1); }
.nav-notif-item .notif-time{ display:block; margin-top:2px; color: var(--text-faint); font-size:0.68rem; }
.nav-notif-empty{ color: var(--text-faint); font-size:0.8rem; padding:6px 4px; }

/* ---- byline link (opens a profile) ---- */
.byline-link{
  background:none; border:none; padding:0; font: inherit; color: var(--gold-soft);
  cursor:pointer; text-decoration: underline; text-decoration-color: rgba(242,221,173,0.35);
  text-underline-offset:3px;
}
.byline-link:hover, .byline-link:focus-visible{ color: var(--gold); }

/* ---- star rating widget ---- */
.detail-rate{ display:flex; align-items:center; gap:10px; margin: 4px 0 10px; }
.detail-rate-label{ font-size:0.78rem; color: var(--text-dim); }
.star-picker{ display:flex; gap:2px; }
.star-btn{
  background:none; border:none; cursor:pointer; font-size:1.2rem; line-height:1;
  color: rgba(255,255,255,0.22); padding:2px; transition: color .12s var(--ease), transform .12s var(--ease);
}
.star-btn:hover, .star-btn.hovered{ transform: scale(1.12); }
.star-btn.filled, .star-btn:hover, .star-btn.hovered{ color: var(--gold); }

/* ---- tags ---- */
.detail-tags{ display:flex; flex-wrap:wrap; gap:6px; margin: 2px 0 14px; }
.tag-pill{
  font:600 0.68rem/1 var(--font-mono); letter-spacing:0.03em; color: var(--nebula-soft);
  background: rgba(143,127,232,0.12); border:1px solid rgba(143,127,232,0.25);
  padding:5px 9px; border-radius:20px;
}
.compose-rating-note{ font-size:0.76rem; color: var(--text-faint); margin: -4px 0 8px; }

/* ---- chapter like button ---- */
.chapter-like-btn{
  display:flex; align-items:center; gap:6px; background: rgba(255,255,255,0.04);
  border:1px solid var(--line); color: var(--text-dim); border-radius:20px;
  padding:6px 12px; font:600 0.76rem/1 var(--font-body); cursor:pointer;
  transition: color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease);
}
.chapter-like-btn svg{ opacity:0.8; }
.chapter-like-btn:hover{ border-color: var(--nebula-soft); color: var(--text); }
.chapter-like-btn[aria-pressed="true"]{ color: #ff9db0; border-color: rgba(255,157,176,0.4); background: rgba(255,157,176,0.08); }
.chapter-like-btn[aria-pressed="true"] svg{ opacity:1; }

/* ---- profile modal ---- */
.profile-follow-row{ display:flex; align-items:center; gap:10px; margin: 6px 0 14px; }
.profile-bio-edit{ display:flex; flex-direction:column; gap:8px; margin: -4px 0 18px; }
.profile-bio-edit textarea{
  width:100%; resize:vertical; background: rgba(255,255,255,0.03); border:1px solid var(--line);
  border-radius: var(--radius); color: var(--text); font: 500 0.86rem/1.5 var(--font-body); padding:10px 12px;
}
.profile-bio-edit .btn{ align-self:flex-start; }
.stats-list-label{ font:700 0.72rem/1 var(--font-mono); letter-spacing:0.08em; text-transform:uppercase; color: var(--text-dim); margin: 6px 0 10px; }

/* ---- forgot / reset password ---- */
.forgot-success{ color: var(--gold-soft); font-size:0.82rem; }
#authForgotRow{ margin-top:2px; }

@media (max-width: 640px){
  .nav-notif-panel{ position:fixed; top:64px; left:50%; right:auto; width:min(340px, 92vw); }
}