/* ============================================================
   NovelRead — Wattpad-Inspired Design System
   ============================================================ */

/* ---------- CSS Custom Properties ---------- */
:root{
  /* Wattpad-style orange */
  --orange:#ff6122;
  --orange-hover:#e8551a;
  --orange-light:#fff3ed;
  --orange-dark:#c44010;

  /* Neutrals */
  --white:#ffffff;
  --gray-50:#fafafa;
  --gray-100:#f5f5f5;
  --gray-200:#eeeeee;
  --gray-300:#e0e0e0;
  --gray-400:#bdbdbd;
  --gray-500:#9e9e9e;
  --gray-600:#757575;
  --gray-700:#616161;
  --gray-800:#424242;
  --gray-900:#212121;
  --black:#121212;

  /* Semantic */
  --success:#00b894;
  --warning:#fdcb6e;
  --danger:#e74c3c;
  --info:#0984e3;

  /* Theme tokens (light default) */
  --bg:#ffffff;
  --bg-alt:#f5f5f5;
  --bg-card:#ffffff;
  --bg-nav:#ffffff;
  --text:#212121;
  --text-secondary:#757575;
  --text-muted:#9e9e9e;
  --border:#e0e0e0;
  --border-light:#eeeeee;
  --shadow-sm:0 1px 3px rgba(0,0,0,.08);
  --shadow-md:0 4px 12px rgba(0,0,0,.1);
  --shadow-lg:0 8px 30px rgba(0,0,0,.12);
  --shadow-card:0 1px 4px rgba(0,0,0,.06);

  /* Radius */
  --r-sm:4px;
  --r-md:8px;
  --r-lg:12px;
  --r-xl:16px;
  --r-full:9999px;

  /* Fonts */
  --font:'Inter',system-ui,-apple-system,sans-serif;
  --font-serif:'Merriweather',Georgia,serif;
  --font-display:'Playfair Display',Georgia,serif;

  /* Transitions */
  --ease:cubic-bezier(.4,0,.2,1);

  /* Cover gradients */
  --cover-1:linear-gradient(135deg,#667eea,#764ba2);
  --cover-2:linear-gradient(135deg,#f093fb,#f5576c);
  --cover-3:linear-gradient(135deg,#4facfe,#00f2fe);
  --cover-4:linear-gradient(135deg,#43e97b,#38f9d7);
  --cover-5:linear-gradient(135deg,#fa709a,#fee140);
  --cover-6:linear-gradient(135deg,#a18cd1,#fbc2eb);
}

/* ---------- Dark Theme ---------- */
[data-theme="dark"]{
  --bg:#121212;
  --bg-alt:#1e1e1e;
  --bg-card:#1e1e1e;
  --bg-nav:#1a1a1a;
  --text:#e0e0e0;
  --text-secondary:#9e9e9e;
  --text-muted:#757575;
  --border:#333333;
  --border-light:#2a2a2a;
  --shadow-sm:0 1px 3px rgba(0,0,0,.3);
  --shadow-md:0 4px 12px rgba(0,0,0,.4);
  --shadow-lg:0 8px 30px rgba(0,0,0,.5);
  --shadow-card:0 1px 4px rgba(0,0,0,.3);
  --orange-light:rgba(255,97,34,.12);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  color:var(--text);
  background:var(--bg-alt);
  line-height:1.5;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  -webkit-font-smoothing:antialiased;
  transition:background .3s var(--ease),color .3s var(--ease);
}
a{color:var(--orange);text-decoration:none;transition:color .15s var(--ease)}
a:hover{color:var(--orange-hover)}
img{max-width:100%;height:auto;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,textarea,select{font-family:inherit;font-size:inherit}
ul,ol{list-style:none}

.skip-link{position:absolute;top:-40px;left:0;background:var(--orange);color:#fff;padding:8px 16px;z-index:9999}
.skip-link:focus{top:0;color:#fff}

/* ---------- Typography ---------- */
h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.25;color:var(--text)}
h1{font-size:clamp(1.75rem,4vw,2.5rem)}
h2{font-size:clamp(1.375rem,3vw,1.75rem)}
h3{font-size:1.25rem}
h4{font-size:1.125rem}

.text-sm{font-size:.875rem}
.text-xs{font-size:.75rem}
.text-center{text-align:center}
.text-secondary{color:var(--text-secondary)!important}
.text-muted{color:var(--text-muted)!important}

/* ---------- Layout ---------- */
.main-content{flex:1;padding-top:60px}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 16px}

@media(min-width:768px){.container{padding:0 24px}}

.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-5{grid-template-columns:repeat(5,1fr)}
.grid-6{grid-template-columns:repeat(6,1fr)}

@media(max-width:1024px){.grid-5,.grid-6{grid-template-columns:repeat(4,1fr)}}
@media(max-width:768px){.grid-3,.grid-4,.grid-5,.grid-6{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.grid-2,.grid-3,.grid-4,.grid-5,.grid-6{grid-template-columns:repeat(2,1fr)}}

.flex{display:flex}.flex-col{flex-direction:column}
.items-center{align-items:center}.justify-between{justify-content:space-between}
.justify-center{justify-content:center}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}
.gap-xs{gap:4px}.gap-sm{gap:8px}.gap-md{gap:16px}.gap-lg{gap:24px}.gap-xl{gap:32px}

/* ---------- Navigation (Wattpad-style) ---------- */
.main-header{
  position:fixed;top:0;left:0;right:0;z-index:200;
  background:var(--bg-nav);
  border-bottom:1px solid var(--border);
  height:60px;
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.navbar{height:100%}
.nav-container{
  display:flex;align-items:center;gap:12px;
  max-width:1200px;margin:0 auto;padding:0 16px;height:100%;
}
.logo{
  display:flex;align-items:center;gap:8px;
  font-size:1.375rem;font-weight:800;color:var(--orange);
  letter-spacing:-.5px;white-space:nowrap;
}
.logo i{font-size:1.25rem}
.logo:hover{color:var(--orange-hover)}

/* Search */
.search-form{flex:1;max-width:460px}
.search-wrapper{position:relative;display:flex;align-items:center}
.search-icon{position:absolute;left:12px;color:var(--text-muted);font-size:.875rem;pointer-events:none}
.search-input{
  width:100%;padding:8px 40px 8px 36px;
  border:2px solid var(--border);border-radius:var(--r-full);
  background:var(--bg-alt);color:var(--text);font-size:.875rem;
  transition:all .2s var(--ease);
}
.search-input:focus{outline:none;border-color:var(--orange);background:var(--bg)}
.search-input::placeholder{color:var(--text-muted)}
.search-btn{
  position:absolute;right:3px;padding:6px 10px;
  background:var(--orange);color:#fff;border-radius:var(--r-full);
  font-size:.75rem;transition:background .15s var(--ease);
}
.search-btn:hover{background:var(--orange-hover)}

/* Nav links */
.nav-links{display:flex;align-items:center;gap:4px}
.nav-link{
  display:flex;align-items:center;gap:5px;
  padding:6px 12px;color:var(--text-secondary);
  font-weight:600;font-size:.8125rem;border-radius:var(--r-full);
  transition:all .15s var(--ease);white-space:nowrap;
}
.nav-link:hover{color:var(--text);background:var(--bg-alt)}
.nav-link.active{color:var(--orange);background:var(--orange-light)}
.nav-link i{font-size:.9375rem}

.continue-reading{color:var(--orange)!important}

/* Streak badge */
.streak-badge{
  display:flex;align-items:center;gap:3px;
  padding:4px 10px;background:linear-gradient(135deg,#ff6122,#e74c3c);
  color:#fff;border-radius:var(--r-full);font-weight:700;font-size:.75rem;
}

/* Notification */
.notifications{position:relative}
.notification-badge{
  position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;
  padding:0 4px;background:var(--danger);color:#fff;font-size:.6rem;
  font-weight:700;border-radius:var(--r-full);display:flex;
  align-items:center;justify-content:center;border:2px solid var(--bg-nav);
}

/* User menu */
.user-menu{position:relative}
.user-menu-btn{
  display:flex;align-items:center;gap:6px;padding:2px;
  border-radius:var(--r-full);transition:opacity .15s;
}
.user-menu-btn:hover{opacity:.8}
.user-avatar{
  width:32px;height:32px;border-radius:var(--r-full);
  background:linear-gradient(135deg,var(--orange),#e74c3c);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:.8125rem;
  object-fit:cover;
}
.user-menu-btn i.fa-chevron-down{color:var(--text-muted);font-size:.6rem}

.user-dropdown{
  position:absolute;top:calc(100% + 6px);right:0;min-width:220px;
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:all .2s var(--ease);z-index:100;overflow:hidden;
}
.user-menu:hover .user-dropdown,.user-dropdown.show{
  opacity:1;visibility:visible;transform:translateY(0);
}
.user-info{padding:12px 16px;background:var(--bg-alt);border-bottom:1px solid var(--border)}
.user-name{display:block;font-weight:700;font-size:.875rem;color:var(--text)}
.user-email{display:block;font-size:.75rem;color:var(--text-muted);margin-top:2px}
.dropdown-divider{height:1px;background:var(--border);margin:4px 0}
.dropdown-item{
  display:flex;align-items:center;gap:10px;padding:10px 16px;
  color:var(--text-secondary);font-size:.8125rem;font-weight:500;
  transition:background .1s;
}
.dropdown-item:hover{background:var(--bg-alt);color:var(--text)}
.dropdown-item.author-link{color:var(--orange)}
.dropdown-item.logout{color:var(--danger)}
.dropdown-item i{width:16px;text-align:center}

/* Mobile */
.mobile-menu-toggle{display:none;padding:8px;color:var(--text);font-size:1.25rem}
.mobile-nav{
  display:none;position:fixed;top:60px;left:0;right:0;bottom:0;
  background:var(--bg);padding:16px;z-index:200;overflow-y:auto;
}
.mobile-nav.show{display:block;animation:fadeDown .25s var(--ease)}
@keyframes fadeDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

.mobile-search-form{display:flex;gap:8px;margin-bottom:16px}
.mobile-search-form input{
  flex:1;padding:10px 14px;border:2px solid var(--border);
  border-radius:var(--r-lg);background:var(--bg-alt);color:var(--text);
}
.mobile-search-form button{padding:10px 16px;background:var(--orange);color:#fff;border-radius:var(--r-lg)}
.mobile-nav-links{display:flex;flex-direction:column;gap:2px}
.mobile-nav-links a{
  display:flex;align-items:center;gap:12px;padding:12px 14px;
  color:var(--text-secondary);border-radius:var(--r-lg);font-weight:600;font-size:.9375rem;
}
.mobile-nav-links a:hover,.mobile-nav-links a.active{background:var(--orange-light);color:var(--orange)}
.mobile-nav-links .badge{margin-left:auto;padding:2px 8px;background:var(--danger);color:#fff;font-size:.75rem;border-radius:var(--r-full)}

@media(max-width:768px){
  .search-form,.nav-links{display:none}
  .mobile-menu-toggle{display:block;margin-left:auto}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 20px;font-weight:600;font-size:.875rem;
  border-radius:var(--r-full);transition:all .2s var(--ease);border:none;
}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn i{font-size:.8125rem}

.btn-primary{background:var(--orange);color:#fff;box-shadow:0 2px 8px rgba(255,97,34,.25)}
.btn-primary:hover:not(:disabled){background:var(--orange-hover);transform:translateY(-1px);box-shadow:0 4px 16px rgba(255,97,34,.35);color:#fff}

.btn-secondary{background:var(--bg-alt);color:var(--text);border:1px solid var(--border)}
.btn-secondary:hover:not(:disabled){background:var(--border-light);color:var(--text)}

.btn-outline{background:transparent;border:2px solid var(--border);color:var(--text)}
.btn-outline:hover:not(:disabled){border-color:var(--orange);color:var(--orange);background:var(--orange-light)}
.btn-outline.active{border-color:var(--orange);color:var(--orange);background:var(--orange-light)}

.btn-ghost{background:transparent;color:var(--text-secondary)}
.btn-ghost:hover:not(:disabled){background:var(--bg-alt);color:var(--text)}

.btn-danger{background:var(--danger);color:#fff}
.btn-success{background:var(--success);color:#fff}

.btn-sm{padding:6px 14px;font-size:.75rem}
.btn-lg{padding:12px 28px;font-size:.9375rem}
.btn-block{width:100%}

/* ---------- Forms ---------- */
.form-group{margin-bottom:20px}
.form-label{display:block;margin-bottom:6px;font-weight:600;font-size:.8125rem;color:var(--text)}
.form-label.required::after{content:'*';color:var(--danger);margin-left:3px}

.form-input,.form-select,.form-textarea{
  width:100%;padding:10px 14px;border:2px solid var(--border);
  border-radius:var(--r-lg);background:var(--bg);color:var(--text);
  font-size:.9375rem;transition:border-color .2s var(--ease);
}
.form-input:focus,.form-select:focus,.form-textarea:focus{
  outline:none;border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-light);
}
.form-input::placeholder,.form-textarea::placeholder{color:var(--text-muted)}
.form-input.error{border-color:var(--danger)}
.form-textarea{min-height:120px;resize:vertical}
.form-hint{display:block;margin-top:4px;font-size:.75rem;color:var(--text-muted)}
.form-error{display:block;margin-top:4px;font-size:.75rem;color:var(--danger)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:480px){.form-row{grid-template-columns:1fr}}

.form-check{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:.875rem}
.form-check input{width:18px;height:18px;accent-color:var(--orange)}

/* ---------- Cards (Wattpad-style book cards) ---------- */
.card{
  background:var(--bg-card);border-radius:var(--r-lg);
  overflow:hidden;transition:all .25s var(--ease);
  border:1px solid var(--border-light);
}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}

.card-image{position:relative;aspect-ratio:2/3;overflow:hidden;background:var(--gray-200)}
.card-image img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.card:hover .card-image img{transform:scale(1.05)}

.card-body{padding:10px 12px}
.card-title{
  font-size:.8125rem;font-weight:700;margin-bottom:2px;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  line-height:1.35;
}
.card-title a{color:inherit}.card-title a:hover{color:var(--orange)}
.card-author{font-size:.6875rem;color:var(--text-muted);margin-bottom:6px}
.card-author a{color:inherit}.card-author a:hover{color:var(--orange)}

.card-meta{display:flex;align-items:center;gap:10px;font-size:.6875rem;color:var(--text-muted)}
.card-meta span{display:flex;align-items:center;gap:3px}

.card-footer{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 12px;border-top:1px solid var(--border-light);
}

.card-badge{
  position:absolute;top:8px;left:8px;padding:3px 8px;
  color:#fff;font-size:.6rem;font-weight:700;border-radius:var(--r-sm);
  text-transform:uppercase;letter-spacing:.5px;
}
.card-badge.ongoing{background:var(--info)}
.card-badge.completed{background:var(--success)}

/* Book card specifics */
.book-card{display:flex;flex-direction:column}
.book-card .card-body{flex:1;display:flex;flex-direction:column}
.book-card .card-genre{
  font-size:.625rem;color:var(--orange);font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px;
}
.book-card .card-rating{
  display:flex;align-items:center;gap:2px;margin-top:auto;padding-top:6px;
}
.book-card .card-rating i{color:#f59e0b;font-size:.625rem}
.book-card .card-rating span{font-size:.75rem;font-weight:600;color:var(--text-secondary);margin-left:3px}

/* Cover placeholder */
.book-cover-placeholder{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-size:2.5rem;color:rgba(255,255,255,.6);position:relative;overflow:hidden;
}
.book-cover-placeholder::before{content:'';position:absolute;inset:0;background:var(--cover-1)}
.book-card:nth-child(2) .book-cover-placeholder::before{background:var(--cover-2)}
.book-card:nth-child(3) .book-cover-placeholder::before{background:var(--cover-3)}
.book-card:nth-child(4) .book-cover-placeholder::before{background:var(--cover-4)}
.book-card:nth-child(5) .book-cover-placeholder::before{background:var(--cover-5)}
.book-card:nth-child(6) .book-cover-placeholder::before{background:var(--cover-6)}
.book-cover-placeholder i{position:relative;z-index:1}

/* ---------- Hero (Wattpad-style) ---------- */
.hero{
  position:relative;padding:48px 0 40px;
  background:var(--bg);overflow:hidden;
}
.hero::before{
  content:'';position:absolute;top:0;right:0;bottom:0;width:50%;
  background:linear-gradient(135deg,var(--orange-light),rgba(255,97,34,.05));
  pointer-events:none;
}
.hero-container{
  position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:0 16px;
  display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;
}
.hero-content{max-width:520px}
.hero-title{
  font-family:var(--font);font-size:clamp(2rem,5vw,3rem);
  font-weight:800;line-height:1.1;margin-bottom:16px;letter-spacing:-.02em;
}
.hero-title span{color:var(--orange)}
.hero-description{font-size:1.0625rem;color:var(--text-secondary);margin-bottom:24px;line-height:1.65}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-stats{display:flex;gap:40px;margin-top:32px}
.hero-stat{text-align:center}
.hero-stat-value{font-size:1.75rem;font-weight:800;color:var(--orange)}
.hero-stat-label{font-size:.75rem;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px}

.hero-visual{position:relative;display:flex;justify-content:center}
.hero-books{position:relative;width:100%;max-width:380px;height:360px}
.hero-book{
  position:absolute;border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  overflow:hidden;transition:transform .3s var(--ease);
}
.hero-book:nth-child(1){width:160px;height:240px;top:20%;left:5%;transform:rotate(-8deg);z-index:3}
.hero-book:nth-child(2){width:180px;height:270px;top:8%;left:28%;transform:rotate(3deg);z-index:4}
.hero-book:nth-child(3){width:150px;height:225px;top:25%;right:2%;transform:rotate(8deg);z-index:2}
.hero-book img{width:100%;height:100%;object-fit:cover}
.hero-book:hover{transform:scale(1.06) rotate(0deg)!important;z-index:5}

@media(max-width:768px){
  .hero-container{grid-template-columns:1fr;text-align:center}
  .hero-content{max-width:100%}
  .hero-actions{justify-content:center}
  .hero-stats{justify-content:center}
  .hero-visual{display:none}
  .hero::before{width:100%;opacity:.5}
}

/* ---------- Sections ---------- */
.section{padding:32px 0}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.section-title{font-size:1.25rem;font-weight:800;display:flex;align-items:center;gap:8px}
.section-subtitle{color:var(--text-muted);margin-top:2px;font-size:.8125rem}

/* ---------- Filters ---------- */
.filters{
  display:flex;flex-wrap:wrap;gap:12px;padding:16px;
  background:var(--bg-card);border:1px solid var(--border-light);
  border-radius:var(--r-lg);margin-bottom:24px;
}
.filter-group{display:flex;flex-direction:column;gap:4px;min-width:130px}
.filter-label{font-size:.625rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}
.filter-select{
  padding:7px 10px;border:1px solid var(--border);border-radius:var(--r-md);
  background:var(--bg);color:var(--text);font-size:.8125rem;cursor:pointer;
}
.filter-tags{display:flex;flex-wrap:wrap;gap:6px}
.filter-tag{
  padding:6px 14px;background:var(--bg-alt);border:1px solid var(--border);
  border-radius:var(--r-full);font-size:.8125rem;color:var(--text-secondary);
  cursor:pointer;transition:all .15s var(--ease);font-weight:500;
}
.filter-tag:hover{border-color:var(--orange);color:var(--orange);background:var(--orange-light)}
.filter-tag.active{background:var(--orange);border-color:var(--orange);color:#fff}

/* ---------- Modals ---------- */
.modal{
  position:fixed;inset:0;background:rgba(0,0,0,.5);
  display:flex;align-items:center;justify-content:center;
  z-index:300;opacity:0;visibility:hidden;transition:all .25s var(--ease);
  padding:16px;backdrop-filter:blur(4px);
}
.modal.show{opacity:1;visibility:visible}
.modal-content{
  background:var(--bg);border-radius:var(--r-xl);max-width:440px;width:100%;
  max-height:90vh;overflow-y:auto;transform:translateY(16px) scale(.97);
  transition:transform .25s var(--ease);box-shadow:var(--shadow-lg);
}
.modal.show .modal-content{transform:translateY(0) scale(1)}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}
.modal-header h3{font-size:1rem;display:flex;align-items:center;gap:8px}
.modal-close{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-full);color:var(--text-muted);font-size:1.25rem;transition:all .15s}
.modal-close:hover{background:var(--bg-alt);color:var(--text)}
.modal-body{padding:20px}

/* Settings */
.settings-modal{max-width:420px}
.setting-group{margin-bottom:20px}
.setting-group:last-child{margin-bottom:0}
.setting-group label{display:block;font-weight:600;font-size:.8125rem;margin-bottom:8px}
.theme-toggle{display:flex;gap:8px}
.theme-btn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:10px;border:2px solid var(--border);border-radius:var(--r-lg);
  background:var(--bg-alt);font-weight:500;transition:all .15s;cursor:pointer;
}
.theme-btn:hover{border-color:var(--orange)}
.theme-btn.active{border-color:var(--orange);background:var(--orange-light);color:var(--orange)}
.font-size-control{display:flex;align-items:center;gap:12px}
.font-btn{
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--border);border-radius:var(--r-md);background:var(--bg-alt);
  transition:all .15s;cursor:pointer;
}
.font-btn:hover{border-color:var(--orange);color:var(--orange)}
.font-size-control span{min-width:50px;text-align:center;font-weight:600}
.line-spacing-control{display:flex;align-items:center;gap:12px}
.line-spacing-control input[type="range"]{flex:1;accent-color:var(--orange)}
.line-spacing-control span{min-width:30px;text-align:right;font-weight:600}
.font-preview{padding:12px;background:var(--bg-alt);border-radius:var(--r-md);font-family:var(--font-serif);border:1px solid var(--border)}

/* ---------- Footer ---------- */
.main-footer{
  background:var(--bg);border-top:1px solid var(--border);
  margin-top:auto;padding:40px 0 20px;
}
.footer-container{max-width:1200px;margin:0 auto;padding:0 16px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1.5fr;gap:32px;margin-bottom:32px}
.footer-logo{display:flex;align-items:center;gap:8px;font-size:1.375rem;font-weight:800;color:var(--orange);margin-bottom:12px}
.footer-tagline{color:var(--text-secondary);margin-bottom:16px;font-size:.875rem;line-height:1.6}
.social-links{display:flex;gap:8px}
.social-links a{
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  background:var(--bg-alt);border-radius:var(--r-full);color:var(--text-secondary);
  transition:all .15s;font-size:.8125rem;
}
.social-links a:hover{background:var(--orange);color:#fff;transform:translateY(-2px)}
.footer-links h4{font-size:.75rem;font-weight:700;margin-bottom:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted)}
.footer-links ul{display:flex;flex-direction:column;gap:8px}
.footer-links a{color:var(--text-secondary);font-size:.8125rem}
.footer-links a:hover{color:var(--orange)}
.footer-newsletter h4{font-size:.75rem;font-weight:700;margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted)}
.footer-newsletter p{color:var(--text-secondary);font-size:.8125rem;margin-bottom:12px}
.newsletter-form{display:flex;gap:6px}
.newsletter-form input{flex:1;padding:8px 12px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--bg-alt);color:var(--text);font-size:.8125rem}
.newsletter-form button{padding:8px 14px;background:var(--orange);color:#fff;border-radius:var(--r-lg)}
.newsletter-form button:hover{background:var(--orange-hover)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:16px;border-top:1px solid var(--border)}
.footer-bottom p{color:var(--text-muted);font-size:.75rem}
.footer-bottom-links{display:flex;gap:16px}
.footer-bottom-links a{color:var(--text-muted);font-size:.75rem}

@media(max-width:1024px){.footer-grid{grid-template-columns:repeat(3,1fr)}.footer-brand{grid-column:1/-1}}
@media(max-width:768px){.footer-grid{grid-template-columns:repeat(2,1fr)}.footer-bottom{flex-direction:column;gap:8px;text-align:center}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr}}

/* ---------- Book Detail ---------- */
.book-detail{padding:24px 0}
.book-header{display:grid;grid-template-columns:240px 1fr;gap:32px;margin-bottom:32px}
.book-cover-wrapper{position:relative}
.book-cover-large{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:var(--r-lg);box-shadow:var(--shadow-lg)}
.book-cover-placeholder{
  width:100%;aspect-ratio:2/3;background:var(--cover-1);border-radius:var(--r-lg);
  display:flex;align-items:center;justify-content:center;font-size:3.5rem;
  color:rgba(255,255,255,.5);box-shadow:var(--shadow-lg);
}
.book-actions{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.book-actions .btn{width:100%}
.book-info h1{font-size:clamp(1.5rem,3vw,2rem);margin-bottom:6px}
.book-author{font-size:1rem;color:var(--text-secondary);margin-bottom:12px}
.book-author a{color:inherit}.book-author a:hover{color:var(--orange)}
.book-badges{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.book-badge{
  display:inline-flex;align-items:center;gap:4px;padding:4px 12px;
  background:var(--bg-alt);border-radius:var(--r-full);font-size:.75rem;font-weight:600;
}
.book-badge.genre{background:var(--orange-light);color:var(--orange)}
.book-badge.rating{color:#f59e0b}
.book-badge.ongoing{background:rgba(9,132,227,.1);color:var(--info)}
.book-badge.completed{background:rgba(0,184,148,.1);color:var(--success)}
.book-description{color:var(--text-secondary);line-height:1.75;margin-bottom:20px;font-size:.9375rem}
.book-stats{display:flex;gap:24px;padding:16px;background:var(--bg-alt);border-radius:var(--r-lg)}
.book-stat{text-align:center;flex:1}
.book-stat-value{font-size:1.125rem;font-weight:800;color:var(--text)}
.book-stat-label{font-size:.625rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;font-weight:600}

@media(max-width:768px){
  .book-header{grid-template-columns:1fr}
  .book-cover-wrapper{max-width:200px;margin:0 auto}
}

/* ---------- Chapter List ---------- */
.chapter-list{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--r-lg);overflow:hidden}
.chapter-list-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border)}
.chapter-list-header h3{font-size:1rem}
.chapter-list-body{max-height:500px;overflow-y:auto}
.chapter-item{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px;border-bottom:1px solid var(--border-light);
  transition:background .1s;color:var(--text);
}
.chapter-item:hover{background:var(--orange-light)}
.chapter-item:last-child{border-bottom:none}
.chapter-info{display:flex;align-items:center;gap:12px}
.chapter-number{
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  background:var(--bg-alt);border-radius:var(--r-full);font-weight:700;font-size:.75rem;
  transition:all .15s;
}
.chapter-item:hover .chapter-number{background:var(--orange);color:#fff}
.chapter-title{font-weight:600;font-size:.875rem}
.chapter-meta{display:flex;align-items:center;gap:12px;font-size:.75rem;color:var(--text-muted)}
.chapter-actions{display:flex;gap:6px}

/* ---------- Library ---------- */
.library-tabs{display:flex;gap:4px;margin-bottom:24px;background:var(--bg-alt);padding:4px;border-radius:var(--r-full);width:fit-content}
.library-tab{
  display:flex;align-items:center;gap:6px;padding:8px 16px;
  color:var(--text-secondary);font-weight:600;font-size:.8125rem;
  border-radius:var(--r-full);transition:all .15s;
}
.library-tab:hover{color:var(--text)}
.library-tab.active{color:#fff;background:var(--orange);box-shadow:0 2px 8px rgba(255,97,34,.25)}
.library-tab .count{padding:1px 6px;background:var(--bg-alt);border-radius:var(--r-full);font-size:.6875rem}
.library-tab.active .count{background:rgba(255,255,255,.25);color:#fff}
.library-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}

/* ---------- Profile ---------- */
.profile-header{
  display:flex;align-items:center;gap:24px;padding:24px;
  background:var(--bg-card);border:1px solid var(--border-light);
  border-radius:var(--r-lg);margin-bottom:24px;
}
.profile-avatar-placeholder{
  width:80px;height:80px;border-radius:var(--r-full);
  background:linear-gradient(135deg,var(--orange),#e74c3c);
  display:flex;align-items:center;justify-content:center;
  font-size:2rem;color:#fff;font-weight:700;flex-shrink:0;
}
.profile-info{flex:1}
.profile-name{font-size:1.375rem;font-weight:800;margin-bottom:2px}
.profile-username{color:var(--text-muted);margin-bottom:8px;font-size:.875rem}
.profile-bio{color:var(--text-secondary);margin-bottom:12px;font-size:.875rem}
.profile-stats{display:flex;gap:24px}
.profile-stat{text-align:center}
.profile-stat-value{font-size:1.125rem;font-weight:800;color:var(--text)}
.profile-stat-label{font-size:.625rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.profile-actions{display:flex;gap:8px}

@media(max-width:480px){
  .profile-header{flex-direction:column;text-align:center}
  .profile-stats{justify-content:center}
  .profile-actions{justify-content:center}
}

/* Goal & Streak */
.goal-progress{padding:20px;background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--r-lg)}
.goal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.goal-title{font-size:1rem;font-weight:700}
.goal-year{color:var(--text-muted);font-size:.8125rem}
.progress-bar{height:8px;background:var(--bg-alt);border-radius:var(--r-full);overflow:hidden;margin-bottom:6px}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--orange),#e74c3c);border-radius:var(--r-full);transition:width 1s var(--ease)}
.goal-stats{display:flex;justify-content:space-between;font-size:.8125rem}
.goal-completed{color:var(--text);font-weight:600}
.goal-target{color:var(--text-muted)}

.streak-card{
  padding:24px;background:linear-gradient(135deg,var(--orange),#e74c3c);
  border-radius:var(--r-lg);color:#fff;text-align:center;position:relative;overflow:hidden;
}
.streak-card::before{content:'';position:absolute;top:-50%;right:-30%;width:60%;height:200%;background:rgba(255,255,255,.05);border-radius:50%}
.streak-icon{font-size:2rem;margin-bottom:6px}
.streak-value{font-size:3rem;font-weight:800;line-height:1}
.streak-label{font-size:.9375rem;opacity:.9;margin-bottom:12px}
.streak-info{display:flex;justify-content:center;gap:24px;font-size:.8125rem;opacity:.85}

/* ---------- Notifications ---------- */
.notification-list{display:flex;flex-direction:column;gap:6px}
.notification-item{
  display:flex;align-items:flex-start;gap:12px;padding:12px 16px;
  background:var(--bg-card);border:1px solid var(--border-light);
  border-radius:var(--r-lg);transition:all .15s;
}
.notification-item:hover{box-shadow:var(--shadow-sm);transform:translateX(3px)}
.notification-item.unread{border-left:3px solid var(--orange);background:var(--orange-light)}
.notification-icon{
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  background:var(--orange-light);border-radius:var(--r-full);color:var(--orange);flex-shrink:0;
}
.notification-content{flex:1}
.notification-title{font-weight:600;font-size:.875rem;margin-bottom:2px}
.notification-message{color:var(--text-secondary);font-size:.8125rem}
.notification-time{font-size:.6875rem;color:var(--text-muted);margin-top:4px;display:block}
.notification-actions{display:flex;gap:6px;flex-shrink:0}

/* ---------- Pagination ---------- */
.pagination{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:24px}
.pagination-btn{
  display:flex;align-items:center;justify-content:center;
  min-width:36px;height:36px;padding:0 10px;
  border:1px solid var(--border);border-radius:var(--r-md);
  background:var(--bg);color:var(--text-secondary);font-weight:600;font-size:.8125rem;
  transition:all .15s;
}
.pagination-btn:hover:not(:disabled){border-color:var(--orange);color:var(--orange);background:var(--orange-light)}
.pagination-btn.active{background:var(--orange);border-color:var(--orange);color:#fff}
.pagination-btn:disabled{opacity:.4;cursor:not-allowed}
.pagination-ellipsis{color:var(--text-muted)}

/* ---------- Toast ---------- */
.toast-container{position:fixed;bottom:16px;right:16px;left:auto;display:flex;flex-direction:column;gap:8px;z-index:400;max-width:calc(100vw - 32px)}
.toast{
  display:flex;align-items:center;gap:10px;padding:12px 16px;
  background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);animation:toastIn .3s var(--ease);max-width:360px;
}
@keyframes toastIn{from{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}
.toast.success{border-left:3px solid var(--success)}
.toast.error{border-left:3px solid var(--danger)}
.toast.warning{border-left:3px solid var(--warning)}
.toast.info{border-left:3px solid var(--info)}
.toast-icon{font-size:1rem}
.toast.success .toast-icon{color:var(--success)}
.toast.error .toast-icon{color:var(--danger)}
.toast.warning .toast-icon{color:var(--warning)}
.toast.info .toast-icon{color:var(--info)}
.toast-content{flex:1}
.toast-title{font-weight:600;font-size:.8125rem}
.toast-message{font-size:.75rem;color:var(--text-secondary)}
.toast-close{color:var(--text-muted);padding:4px}
.toast-close:hover{color:var(--text)}

/* ---------- Back to Top ---------- */
.back-to-top{
  position:fixed;bottom:16px;right:16px;width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  background:var(--orange);color:#fff;border-radius:var(--r-full);
  box-shadow:0 4px 12px rgba(255,97,34,.35);opacity:0;visibility:hidden;
  transform:translateY(16px);transition:all .25s var(--ease);z-index:200;
}
.back-to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.back-to-top:hover{background:var(--orange-hover);transform:translateY(-2px)}

/* ---------- Empty States ---------- */
.empty-state{text-align:center;padding:48px 16px}
.empty-icon{font-size:3rem;color:var(--text-muted);margin-bottom:16px;opacity:.4}
.empty-title{font-size:1.125rem;font-weight:700;margin-bottom:6px}
.empty-description{color:var(--text-secondary);margin-bottom:20px;max-width:360px;margin-left:auto;margin-right:auto;font-size:.875rem}

/* ---------- Loading ---------- */
.spinner{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--orange);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Auth Pages ---------- */
.auth-page{min-height:calc(100vh - 60px);display:flex;align-items:center;justify-content:center;padding:24px 16px}
.auth-container{width:100%;max-width:400px}
.auth-card{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--r-xl);padding:32px;box-shadow:var(--shadow-md)}
.auth-header{text-align:center;margin-bottom:24px}
.auth-logo{display:inline-flex;align-items:center;gap:8px;font-size:1.5rem;font-weight:800;color:var(--orange);margin-bottom:12px}
.auth-title{font-size:1.375rem;font-weight:800;margin-bottom:4px}
.auth-subtitle{color:var(--text-secondary);font-size:.875rem}
.auth-form .btn{width:100%;margin-top:12px}
.auth-divider{display:flex;align-items:center;gap:12px;margin:20px 0;color:var(--text-muted);font-size:.75rem}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border)}
.auth-footer{text-align:center;margin-top:20px;color:var(--text-secondary);font-size:.875rem}
.auth-footer a{font-weight:600;color:var(--orange)}
.auth-alert{padding:10px 14px;border-radius:var(--r-md);margin-bottom:16px;font-size:.8125rem;display:flex;align-items:center;gap:8px}
.auth-alert.error{background:rgba(231,76,60,.08);color:var(--danger);border:1px solid rgba(231,76,60,.15)}
.auth-alert.success{background:rgba(0,184,148,.08);color:var(--success);border:1px solid rgba(0,184,148,.15)}

/* ---------- Author Dashboard ---------- */
.dashboard-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.dashboard-title{font-size:1.375rem;font-weight:800}
.dashboard-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px}
.dashboard-stat-card{padding:16px;background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--r-lg);transition:all .15s}
.dashboard-stat-card:hover{box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.dashboard-stat-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--orange-light);color:var(--orange);border-radius:var(--r-lg);margin-bottom:10px}
.dashboard-stat-value{font-size:1.5rem;font-weight:800;margin-bottom:2px}
.dashboard-stat-label{color:var(--text-muted);font-size:.75rem;font-weight:500}

@media(max-width:768px){.dashboard-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.dashboard-stats{grid-template-columns:1fr}}

/* ---------- Editor ---------- */
.editor-container{display:grid;grid-template-columns:1fr 280px;gap:20px}
.editor-main{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--r-lg);padding:24px}
.editor-sidebar{display:flex;flex-direction:column;gap:16px}
.editor-sidebar .card{padding:16px}
.editor-title{font-size:1rem;font-weight:700;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.chapter-editor textarea{
  width:100%;min-height:500px;padding:16px;border:1px solid var(--border);
  border-radius:var(--r-md);background:var(--bg-alt);font-family:var(--font-serif);
  font-size:1rem;line-height:1.8;resize:vertical;color:var(--text);
}
.chapter-editor textarea:focus{outline:none;border-color:var(--orange)}
@media(max-width:1024px){.editor-container{grid-template-columns:1fr}}

/* ---------- Search Results ---------- */
.search-query{font-size:1.25rem;margin-bottom:4px}
.search-query span{font-weight:700;color:var(--orange)}
.search-count{color:var(--text-secondary);font-size:.875rem}
.search-results-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;padding-bottom:32px}

/* ---------- Utilities ---------- */
.hidden{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

.mt-sm{margin-top:8px}.mt-md{margin-top:16px}.mt-lg{margin-top:24px}.mt-xl{margin-top:32px}
.mb-sm{margin-bottom:8px}.mb-md{margin-bottom:16px}.mb-lg{margin-bottom:24px}.mb-xl{margin-bottom:32px}
.p-sm{padding:8px}.p-md{padding:16px}.p-lg{padding:24px}.p-xl{padding:32px}

.rounded{border-radius:var(--r-md)}.rounded-lg{border-radius:var(--r-lg)}.rounded-full{border-radius:var(--r-full)}
.shadow{box-shadow:var(--shadow-md)}.shadow-lg{box-shadow:var(--shadow-lg)}
.bg-primary{background:var(--bg)}.bg-secondary{background:var(--bg-alt)}

/* Page fade-in */
.main-content{animation:fadeIn .3s var(--ease)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

@media(max-width:768px){.hide-mobile{display:none!important}}
@media(min-width:769px){.show-mobile{display:none!important}}

/* ============================================================
   Emotion Picker & Heatmap
   ============================================================ */

/* ── Picker (read.php) ── */
.emotion-picker-wrap {
  margin: 48px 0 36px;
}
.emotion-picker-inner {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 32px 28px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.emotion-picker-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,97,34,.06) 0%, transparent 70%);
  pointer-events: none;
}
.emotion-picker-label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 24px;
  position: relative;
}
.emotion-picker-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 20px;
  position: relative;
}
.emotion-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 18px;
  border-radius: var(--r-lg);
  background: var(--bg-alt);
  border: 2px solid var(--border);
  cursor: pointer;
  transition: transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
  min-width: 78px;
  font-family: inherit;
  position: relative;
}
.emotion-btn:hover {
  border-color: var(--em-color, var(--orange));
  background: color-mix(in srgb, var(--em-color, var(--orange)) 8%, var(--bg-alt));
  transform: translateY(-3px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--em-color, var(--orange)) 25%, transparent);
}
.emotion-btn.active {
  border-color: var(--em-color, var(--orange));
  background: color-mix(in srgb, var(--em-color, var(--orange)) 14%, var(--bg-alt));
  transform: translateY(-2px);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--em-color, var(--orange)) 18%, transparent);
}
.emotion-btn.active::after {
  content: '✓';
  position: absolute;
  top: 5px; right: 7px;
  font-size: .6rem;
  font-weight: 800;
  color: var(--em-color, var(--orange));
}
.emotion-emoji { font-size: 1.875rem; line-height: 1; }
.emotion-label {
  font-size: .6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  transition: color .15s;
}
.emotion-btn:hover  .emotion-label,
.emotion-btn.active .emotion-label { color: var(--em-color, var(--orange)); }

.emotion-save-wrap {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 8px;
  margin-bottom: 6px;
  animation: fadeUp .2s var(--ease);
}
@keyframes fadeUp { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

.emotion-save-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 26px;
  background: var(--orange);
  color: #fff;
  border-radius: var(--r-full);
  font-size: .875rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: none;
  transition: background .15s, transform .15s;
}
.emotion-save-btn:hover { background: var(--orange-hover); transform: translateY(-1px); }
.emotion-save-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.emotion-clear-btn {
  padding: 9px 18px;
  border-radius: var(--r-full);
  font-size: .875rem;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border);
  font-family: inherit;
  cursor: pointer;
  transition: all .15s;
}
.emotion-clear-btn:hover { color: var(--danger); border-color: var(--danger); }

.emotion-saved-msg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: .8125rem;
  color: var(--success);
  margin-top: 12px;
  font-weight: 500;
}

/* ── Heatmap Card ── */
.emotion-heatmap-card { padding: 28px; }

.heatmap-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 12px;
}
.heatmap-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 3px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.heatmap-title i { color: var(--orange); font-size: .875rem; }
.heatmap-subtitle { font-size: .8125rem; color: var(--text-muted); margin: 0; }
.heatmap-header-right { flex-shrink: 0; }

.heatmap-total-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--orange-light);
  color: var(--orange);
  border-radius: var(--r-full);
  font-size: .75rem;
  font-weight: 700;
}

/* Legend */
.heatmap-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 12px 16px;
  background: var(--bg-alt);
  border-radius: var(--r-md);
  margin-bottom: 20px;
}
.heatmap-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .75rem;
  color: var(--text-secondary);
  font-weight: 500;
}
.heatmap-legend-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Chart area */
.heatmap-chart {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.heatmap-loading {
  text-align: center;
  padding: 32px;
  color: var(--text-muted);
  font-size: .875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Row */
.hm-row {
  display: grid;
  grid-template-columns: 140px 1fr 80px;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
}
.hm-label {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.hm-ch {
  font-size: .6875rem;
  font-weight: 700;
  color: var(--orange);
  background: var(--orange-light);
  padding: 2px 7px;
  border-radius: var(--r-sm);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.hm-title {
  font-size: .8rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hm-track {
  position: relative;
  height: 20px;
  background: var(--bg-alt);
  border-radius: var(--r-full);
  overflow: hidden;
}
.hm-bar {
  display: flex;
  height: 100%;
  border-radius: var(--r-full);
  overflow: hidden;
  width: 0;
  transition: width .5s var(--ease);
}
.hm-bar.animate { width: var(--target-w, 100%); }
.hs {
  height: 100%;
  min-width: 3px;
  transition: width .3s;
}
.hm-no-votes {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding-left: 10px;
  font-size: .7rem;
  color: var(--text-muted);
  pointer-events: none;
  opacity: 0;
}
.hm-track:not(:has(.hm-bar)) .hm-no-votes,
.hm-bar[style*="width:0"] ~ .hm-no-votes { opacity: 1; }

.hm-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}
.hm-pill {
  font-size: .875rem;
  width: 24px; height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--pc, #888) 15%, var(--bg-alt));
  border: 1px solid color-mix(in srgb, var(--pc, #888) 30%, transparent);
  line-height: 1;
}
.hm-count {
  font-size: .6875rem;
  font-weight: 700;
  color: var(--text-muted);
  min-width: 18px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Empty state */
.heatmap-empty {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  text-align: center;
  color: var(--text-muted);
  gap: 8px;
}
.heatmap-empty i { font-size: 2rem; margin-bottom: 4px; color: var(--orange); opacity: .5; }
.heatmap-empty p { font-size: .875rem; }

@media (max-width: 640px) {
  .hm-row { grid-template-columns: 56px 1fr 56px; gap: 8px; }
  .hm-title { display: none; }
  .heatmap-legend { gap: 6px 10px; }
  .emotion-btn { min-width: 64px; padding: 11px 12px; }
  .emotion-emoji { font-size: 1.625rem; }
}


/* ============================================================
   Author's Commentary
   ============================================================ */

/* ── Read page: marker & popover ── */
#reader-content p[data-p] { position: relative; overflow: visible; }

.commentary-marker {
  /* Sits after the paragraph as a block-level sibling,
     floated right so it appears as a margin annotation */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange), #e8551a);
  border: none;
  cursor: pointer;
  color: #fff;
  font-size: .65rem;
  box-shadow: 0 2px 8px rgba(255,97,34,.4);
  transition: transform .2s var(--ease), box-shadow .2s;
  z-index: 10;
  /* Pull it up to visually hug the end of its paragraph */
  margin-top: -2.2em;
  margin-bottom: 0.6em;
  margin-inline-start: auto;  /* push to the right */
  flex-shrink: 0;
  animation: markerPop .25s var(--ease);
}
@keyframes markerPop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.commentary-marker:hover {
  transform: scale(1.2);
  box-shadow: 0 4px 14px rgba(255,97,34,.55);
}

/* Popover — fixed so it never clips inside reader container */
.commentary-popover {
  position: fixed;
  width: 300px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--orange);
  border-radius: var(--r-lg);
  box-shadow: 0 16px 48px rgba(0,0,0,.55);
  z-index: 9990;
  animation: popoverIn .18s var(--ease);
}
@keyframes popoverIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
.cp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--border);
}
.cp-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--orange);
}
.cp-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: .75rem;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.cp-close:hover { background: var(--bg-alt); color: var(--text); }
.cp-body {
  padding: 12px 14px;
  font-size: .875rem;
  line-height: 1.65;
  color: var(--text);
  white-space: pre-wrap;
}

/* Commentary mode button active state */
.reader-control-btn.active {
  background: var(--orange-light);
  color: var(--orange);
  border-color: var(--orange);
}

/* Toast */
.commentary-toast {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  padding: 10px 20px;
  font-size: .875rem;
  display: flex; align-items: center; gap: 8px;
  box-shadow: 0 8px 30px rgba(0,0,0,.4);
  opacity: 0;
  transition: all .3s var(--ease);
  z-index: 9999;
  white-space: nowrap;
}
.commentary-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.commentary-toast-info    { border-color: var(--warning); }
.commentary-toast-info    i { color: var(--warning); }
.commentary-toast-success { border-color: var(--orange); }
.commentary-toast-success i { color: var(--orange); }

/* ── Edit page: Commentary Editor ── */
.commentary-editor-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 4px;
}
.commentary-count-badge {
  flex-shrink: 0;
  padding: 5px 12px;
  background: var(--orange-light);
  color: var(--orange);
  border-radius: var(--r-full);
  font-size: .8125rem;
  font-weight: 700;
}

.commentary-para-list { display: flex; flex-direction: column; gap: 12px; }

.ce-row {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color .15s;
}
.ce-row:has(.ce-note-wrap[style*="block"]) { border-color: var(--orange); }

.ce-para-preview {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  cursor: default;
}
.ce-para-num {
  flex-shrink: 0;
  font-size: .6875rem;
  font-weight: 800;
  color: var(--orange);
  background: var(--orange-light);
  padding: 2px 7px;
  border-radius: var(--r-sm);
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
}
.ce-para-text {
  flex: 1;
  font-size: .8125rem;
  color: var(--text-secondary);
  line-height: 1.55;
}
.ce-has-note {
  flex-shrink: 0;
  color: var(--orange);
  font-size: .75rem;
  margin-top: 2px;
}

.ce-note-wrap {
  border-top: 1px solid var(--border);
  padding: 12px 14px;
  background: var(--bg);
}
.ce-textarea {
  width: 100%;
  min-height: 90px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 12px;
  color: var(--text);
  font-size: .875rem;
  font-family: inherit;
  line-height: 1.6;
  resize: vertical;
  transition: border-color .15s;
}
.ce-textarea:focus { outline: none; border-color: var(--orange); }

.ce-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.ce-char-count {
  font-size: .75rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.ce-delete-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  border-radius: var(--r-md);
  font-size: .75rem;
  font-weight: 600;
  color: var(--danger);
  background: rgba(231,76,60,.08);
  border: 1px solid rgba(231,76,60,.2);
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
}
.ce-delete-btn:hover { background: var(--danger); color: #fff; }
.ce-status { margin-left: auto; font-size: .75rem; }
.ce-status-saved  { color: var(--success); }
.ce-status-saving { color: var(--text-muted); }
.ce-status-error  { color: var(--danger); }

.ce-add-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 9px 14px;
  background: none;
  border: none;
  border-top: 1px dashed var(--border);
  color: var(--text-muted);
  font-size: .8125rem;
  font-family: inherit;
  cursor: pointer;
  transition: color .15s, background .15s;
}
.ce-add-btn:hover { color: var(--orange); background: var(--orange-light); }
.ce-add-btn i { font-size: .75rem; }

@media (max-width: 700px) {
  .commentary-popover { width: 260px; }
}

/* ── Character Glossary ─────────────────────────────────────────────────── */
.glossary-section{margin-bottom:48px}
.glossary-toggle-btn{display:flex;align-items:center;gap:8px;width:100%;padding:16px 20px;background:var(--bg-alt);border:1px solid var(--border-light);border-radius:var(--r-lg);font-size:.9375rem;font-weight:600;color:var(--text);cursor:pointer;transition:all .15s var(--ease)}
.glossary-toggle-btn:hover{border-color:var(--orange);color:var(--orange)}
.glossary-toggle-btn .gt-icon{font-size:1rem;color:var(--orange)}
.glossary-toggle-btn .gt-count{margin-left:auto;font-size:.75rem;font-weight:500;background:var(--orange);color:#fff;padding:2px 9px;border-radius:var(--r-full)}
.glossary-toggle-btn .gt-arrow{font-size:.75rem;color:var(--text-muted);transition:transform .2s}
.glossary-toggle-btn.open .gt-arrow{transform:rotate(180deg)}
.glossary-panel{display:none;margin-top:12px;border:1px solid var(--border-light);border-radius:var(--r-lg);overflow:hidden}
.glossary-panel.open{display:block}
.glossary-search-wrap{padding:12px 16px;border-bottom:1px solid var(--border-light);background:var(--bg-alt)}
.glossary-search{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg);color:var(--text);font-size:.875rem}
.glossary-search:focus{outline:none;border-color:var(--orange)}
.glossary-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1px;background:var(--border-light)}
.glossary-card{background:var(--bg);padding:16px 18px;cursor:pointer;transition:background .12s}
.glossary-card:hover{background:var(--bg-alt)}
.glossary-card-top{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.glossary-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:700;color:#fff;flex-shrink:0;background:var(--orange)}
.glossary-name{font-weight:700;font-size:.9375rem;color:var(--text)}
.glossary-role{font-size:.75rem;color:var(--orange);font-weight:600;margin-top:1px}
.glossary-desc{font-size:.8125rem;color:var(--text-secondary);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.glossary-tag{display:inline-block;font-size:.6875rem;padding:2px 7px;border-radius:var(--r-full);margin-top:6px;font-weight:500}
.glossary-tag.main{background:var(--orange-light);color:var(--orange)}
.glossary-tag.side{background:var(--bg-alt);color:var(--text-muted)}
.glossary-empty{padding:40px;text-align:center;color:var(--text-muted);font-size:.875rem}
/* Glossary modal */
.glossary-modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:900;display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;transition:opacity .2s}
.glossary-modal-bg.open{opacity:1}
.glossary-modal{background:var(--bg);border-radius:var(--r-xl);max-width:500px;width:100%;max-height:80vh;overflow-y:auto;box-shadow:var(--shadow-lg);transform:scale(.95);transition:transform .2s}
.glossary-modal-bg.open .glossary-modal{transform:scale(1)}
.glossary-modal-header{display:flex;align-items:center;gap:14px;padding:20px 20px 0}
.glossary-modal-avatar{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.375rem;font-weight:700;color:#fff;flex-shrink:0}
.glossary-modal-name{font-size:1.25rem;font-weight:700}
.glossary-modal-role{font-size:.8125rem;color:var(--orange);font-weight:600;margin-top:2px}
.glossary-modal-body{padding:16px 20px 24px}
.glossary-modal-desc{font-size:.9375rem;line-height:1.7;color:var(--text-secondary);margin-bottom:16px}
.glossary-modal-close{margin-left:auto;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--text-muted);flex-shrink:0}
.glossary-modal-close:hover{background:var(--bg-alt);color:var(--text)}
.glossary-first-appears{font-size:.8125rem;color:var(--text-muted);border-top:1px solid var(--border-light);padding-top:14px;margin-top:4px}
.glossary-first-appears a{color:var(--orange)}
/* Reader sidebar glossary */
.glossary-sidebar-btn{display:flex;align-items:center;gap:8px;width:100%;padding:14px 16px;border-top:1px solid var(--border);background:none;color:var(--text-secondary);font-size:.875rem;cursor:pointer;transition:color .12s}
.glossary-sidebar-btn:hover{color:var(--orange)}
.glossary-sidebar-panel{display:none;padding:10px 8px;border-top:1px solid var(--border);overflow-y:auto;flex:1}
.glossary-sidebar-panel.open{display:block}
.gsb-card{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-md);cursor:pointer;transition:background .1s}
.gsb-card:hover{background:var(--bg-alt)}
.gsb-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;color:#fff;flex-shrink:0}
.gsb-info{flex:1;min-width:0}
.gsb-name{font-size:.8125rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gsb-role{font-size:.6875rem;color:var(--text-muted)}


/* ============================================================
   Arabic / RTL Support
   ============================================================ */

/* ---------- Arabic Font Variable ---------- */
:root {
  --font-arabic: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
}

/* ---------- Base RTL / Arabic overrides ---------- */
[lang="ar"],
[dir="rtl"] {
  font-family: var(--font-arabic);
  direction: rtl;
  text-align: right;
}

/* Body-level font swap */
[dir="rtl"] body {
  font-family: var(--font-arabic);
}

/* All inherited elements pick up Arabic font in RTL */
[dir="rtl"] button,
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select,
[dir="rtl"] .btn,
[dir="rtl"] .nav-link,
[dir="rtl"] .dropdown-item,
[dir="rtl"] p,
[dir="rtl"] span,
[dir="rtl"] li,
[dir="rtl"] a,
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6 {
  font-family: var(--font-arabic);
}

/* ---------- Navbar RTL ---------- */
[dir="rtl"] .nav-container {
  flex-direction: row-reverse;
}
[dir="rtl"] .nav-links {
  flex-direction: row-reverse;
}
[dir="rtl"] .logo {
  flex-direction: row-reverse;
}
[dir="rtl"] .search-wrapper {
  flex-direction: row-reverse;
}
[dir="rtl"] .search-icon {
  left: auto;
  right: 14px;
}
[dir="rtl"] .search-input {
  padding-left: 12px;
  padding-right: 42px;
}
[dir="rtl"] .search-btn {
  left: 4px;
  right: auto;
  transform: scaleX(-1); /* flip the arrow icon */
}
[dir="rtl"] .user-dropdown {
  left: 0;
  right: auto;
}
[dir="rtl"] .user-info,
[dir="rtl"] .dropdown-item {
  text-align: right;
  flex-direction: row-reverse;
}
[dir="rtl"] .dropdown-item i {
  margin-right: 0;
  margin-left: 10px;
}

/* ---------- Mobile Nav RTL ---------- */
[dir="rtl"] .mobile-nav-links a {
  flex-direction: row-reverse;
  text-align: right;
}
[dir="rtl"] .mobile-nav-links a i {
  margin-right: 0;
  margin-left: 10px;
}
[dir="rtl"] .mobile-search-form {
  flex-direction: row-reverse;
}

/* ---------- Cards & Layouts ---------- */
[dir="rtl"] .book-card-meta,
[dir="rtl"] .book-card-footer,
[dir="rtl"] .card-header,
[dir="rtl"] .flex {
  /* flex rows reverse automatically because direction:rtl handles it */
}
[dir="rtl"] .book-stats,
[dir="rtl"] .author-stats,
[dir="rtl"] .profile-stats {
  flex-direction: row-reverse;
}

/* ---------- Forms ---------- */
[dir="rtl"] .form-label {
  text-align: right;
  display: block;
}
[dir="rtl"] .form-hint {
  text-align: right;
  display: block;
}
[dir="rtl"] .form-check {
  flex-direction: row-reverse;
  justify-content: flex-end;
}
[dir="rtl"] .form-check input[type="checkbox"] {
  margin-right: 0;
  margin-left: 8px;
}

/* ---------- Toast Notifications ---------- */
[dir="rtl"] .toast-container {
  right: auto;
  left: 16px;
}
[dir="rtl"] .toast {
  flex-direction: row-reverse;
  text-align: right;
}
[dir="rtl"] .toast-close {
  margin-left: 0;
  margin-right: auto;
}

/* ---------- Footer ---------- */
[dir="rtl"] .footer-grid,
[dir="rtl"] .footer-bottom {
  direction: rtl;
  text-align: right;
}
[dir="rtl"] .footer-logo {
  flex-direction: row-reverse;
}
[dir="rtl"] .social-links {
  justify-content: flex-end;
}
[dir="rtl"] .footer-bottom {
  flex-direction: row-reverse;
}
[dir="rtl"] .newsletter-form {
  flex-direction: row-reverse;
}

/* ---------- Reading Modal ---------- */
[dir="rtl"] .modal-header {
  flex-direction: row-reverse;
}
[dir="rtl"] .modal-header h3 {
  flex-direction: row-reverse;
}
[dir="rtl"] .setting-group {
  text-align: right;
}
[dir="rtl"] .font-size-control,
[dir="rtl"] .theme-toggle {
  flex-direction: row-reverse;
}

/* ---------- Streak Badge & Notification Badge ---------- */
[dir="rtl"] .streak-badge {
  flex-direction: row-reverse;
}

/* ---------- Reader Content ---------- */
[dir="rtl"] .reader-content {
  font-family: var(--font-arabic);
  text-align: right;
  direction: rtl;
}

/* ---------- Back-to-Top ---------- */
[dir="rtl"] .back-to-top {
  right: auto;
  left: 24px;
}

/* ---------- Language Switcher Button ---------- */
.lang-switcher-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  border: 2px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  font-weight: 700;
  font-size: .875rem;
  cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease);
  flex-shrink: 0;
}
.lang-switcher-btn:hover {
  border-color: var(--orange);
  color: var(--orange);
  background: var(--orange-light);
}
[dir="rtl"] .lang-switcher-btn {
  font-family: var(--font-arabic);
}

/* ═══════════════════════════════════════════════════════════
   Book Comments
   ═══════════════════════════════════════════════════════════ */

/* Total badge next to section title */
.comment-total-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px; padding: 0 7px;
  background: var(--orange); color: #fff;
  border-radius: var(--r-full); font-size: .75rem;
  font-weight: 700; margin-left: 8px;
}

/* Login prompt */
.comment-login-prompt {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 18px; background: var(--bg-alt);
  border-radius: var(--r-lg); border: 1px solid var(--border);
  color: var(--text-muted); font-size: .875rem;
}
.comment-login-prompt a { color: var(--orange); font-weight: 600; }

/* Compose card */
.comment-compose { padding: 16px; }
.comment-compose-inner { display: flex; gap: 12px; align-items: flex-start; }

/* Avatar (shared between compose + list) */
.comment-avatar {
  width: 38px; height: 38px; border-radius: var(--r-full);
  object-fit: cover; flex-shrink: 0;
}
.comment-avatar-placeholder {
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .9375rem; color: #fff;
  background: var(--orange);
}

/* Textarea */
.comment-compose-field { flex: 1; min-width: 0; }
.comment-textarea {
  width: 100%; resize: none; overflow: hidden;
  padding: 10px 14px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--bg-alt);
  color: var(--text); font-size: .9375rem; line-height: 1.5;
  font-family: inherit; min-height: 42px;
  transition: border-color .15s, box-shadow .15s;
  outline: none;
}
.comment-textarea:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px var(--orange-light);
}

/* Action row under textarea */
.comment-compose-actions {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px; justify-content: flex-end;
}
.comment-chars {
  font-size: .75rem; color: var(--text-muted);
  margin-right: auto;
}

/* Loading & empty states */
.comment-loading {
  text-align: center; padding: 32px;
  color: var(--text-muted); font-size: 1.25rem;
}
.comment-empty {
  text-align: center; padding: 40px 20px;
  color: var(--text-muted);
}
.comment-empty i { font-size: 2rem; margin-bottom: 10px; display: block; }
.comment-empty p  { font-size: .9375rem; }

/* Comment item */
.comment-item {
  padding: 16px 0;
  border-bottom: 1px solid var(--border-light);
}
.comment-item:last-child { border-bottom: none; }

.comment-header {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px;
}
.comment-avatar-wrap { flex-shrink: 0; }
.comment-meta {
  flex: 1; display: flex; align-items: center;
  flex-wrap: wrap; gap: 6px; min-width: 0;
}
.comment-name  { font-weight: 700; font-size: .9rem; }
.comment-time  { font-size: .75rem; color: var(--text-muted); }
.comment-author-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; background: var(--orange-light);
  color: var(--orange); border-radius: var(--r-full);
  font-size: .6875rem; font-weight: 700;
}

/* Action buttons (reply / delete) */
.comment-actions {
  display: flex; gap: 4px; align-items: center; flex-shrink: 0;
}
.comment-action-btn {
  padding: 4px 10px; border-radius: var(--r-md);
  font-size: .75rem; font-weight: 600; color: var(--text-muted);
  transition: all .15s; display: flex; align-items: center; gap: 4px;
  background: transparent;
}
.comment-action-btn:hover { background: var(--bg-alt); color: var(--text); }
.comment-action-btn.danger:hover { background: rgba(231,76,60,.1); color: #e74c3c; }

/* Comment body */
.comment-body {
  font-size: .9375rem; line-height: 1.65;
  color: var(--text); padding-left: 48px;
  word-break: break-word;
}

/* Replies container */
.comment-replies { padding-left: 48px; margin-top: 8px; }

.comment-show-replies {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8125rem; font-weight: 600; color: var(--orange);
  padding: 4px 0; margin-bottom: 8px;
  transition: opacity .15s;
}
.comment-show-replies:hover { opacity: .75; }

/* Reply items */
.comment-reply {
  border-bottom: none;
  padding: 10px 0 10px 0;
  border-left: 2px solid var(--border);
  padding-left: 14px; margin-bottom: 4px;
}
.comment-reply .comment-body { padding-left: 48px; }
.comment-reply .comment-avatar { width: 30px; height: 30px; font-size: .8rem; }

/* Inline reply box */
.inline-reply-box {
  margin-top: 10px; padding-left: 14px;
  border-left: 2px solid var(--orange-light);
}
.reply-textarea { min-height: 36px; font-size: .875rem; }

/* Replies list */
.replies-list { display: flex; flex-direction: column; gap: 0; }


/* Comment profile link + verified badge */
.comment-avatar-link {
  display: block; flex-shrink: 0;
  border-radius: var(--r-full);
  transition: opacity .15s;
}
.comment-avatar-link:hover { opacity: .82; }

.comment-name-link {
  display: inline-flex; align-items: center; gap: 4px;
  text-decoration: none; color: inherit;
}
.comment-name-link:hover .comment-name { color: var(--orange); }

.comment-verified {
  display: inline-block; vertical-align: middle;
  flex-shrink: 0; margin-bottom: 1px;
}
/* Mobile */
@media (max-width: 600px) {
  .comment-body       { padding-left: 0; margin-top: 6px; }
  .comment-reply .comment-body { padding-left: 0; }
  .comment-replies    { padding-left: 20px; }
  .comment-actions    { flex-direction: column; gap: 2px; }
}
/* ════════════════════════════════════════════════════════════════
   Riwayti — Mobile UX Enhancement
   Appended to style.css — all overrides scoped to max-width
   ════════════════════════════════════════════════════════════════ */

/* ── 1. BOTTOM NAV BAR (replaces hamburger on mobile) ───────────── */
.bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--bg-nav);
  border-top: 1px solid var(--border);
  z-index: 500;
  padding-bottom: env(safe-area-inset-bottom);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.bottom-nav-inner {
  display: flex; justify-content: space-around; align-items: stretch;
  height: 56px;
}
.bottom-nav-btn {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  color: var(--text-muted); font-size: .5625rem;
  font-weight: 600; letter-spacing: .2px;
  transition: color .15s; position: relative;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
}
.bottom-nav-btn i { font-size: 1.25rem; }
.bottom-nav-btn.active { color: var(--orange); }
.bottom-nav-btn:active { color: var(--orange); transform: scale(.92); }
.bottom-nav-logout { color: #e74c3c; }
.bottom-nav-logout:hover, .bottom-nav-logout:active { color: #c0392b; }

/* Notification dot on bell */
.bottom-nav-btn .bn-badge {
  position: absolute; top: 6px; left: 50%;
  transform: translateX(4px);
  width: 8px; height: 8px;
  background: #e74c3c; border-radius: 50%;
  border: 2px solid var(--bg-nav);
}

/* Active indicator dot */
.bottom-nav-btn.active::after {
  content: ''; position: absolute; bottom: 0;
  left: 50%; transform: translateX(-50%);
  width: 20px; height: 3px;
  background: var(--orange); border-radius: 2px 2px 0 0;
}

@media (max-width: 768px) {
  .bottom-nav { display: block; }
  /* Push page content up so it isn't hidden behind bottom nav */
  .main-content { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
  /* Hide old hamburger — bottom nav replaces it */
  .mobile-menu-toggle { display: none !important; }
  /* Old mobile-nav dropdown is now obsolete */
  .mobile-nav { display: none !important; }
  /* Also hide the top-right user menu & nav links — bottom nav handles it */
  .nav-links { display: none !important; }
}

/* ── 2. SEARCH BAR — full width on mobile ───────────────────────── */
@media (max-width: 768px) {
  .search-form {
    display: flex !important;
    flex: 1; max-width: none;
    margin: 0 10px;
  }
  .search-wrapper { width: 100%; }
  .search-input { font-size: 16px; /* prevent iOS zoom */ }
  .navbar { height: 56px; }
  .nav-container { padding: 0 12px; }
  .logo span { display: none; } /* icon only on very small screens */
}
@media (max-width: 380px) {
  .logo i { font-size: 1.25rem; }
}

/* ── 3. BOOK CARDS — better 2-col grid ─────────────────────────── */
@media (max-width: 768px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .book-card .card-title { font-size: .8125rem; }
  .book-card .card-author { font-size: .6875rem; }
  .card-body { padding: 10px 10px 12px; }
}
@media (max-width: 380px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/* ── 4. BOOK DETAIL PAGE ────────────────────────────────────────── */
@media (max-width: 768px) {
  .book-header {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }
  .book-cover-wrapper {
    display: flex; flex-direction: column;
    align-items: center; max-width: 100% !important;
  }
  .book-cover-large {
    width: 140px; height: 210px;
    border-radius: var(--r-lg); margin-bottom: 16px;
  }
  .book-actions { width: 100%; }
  .book-actions .btn { width: 100%; justify-content: center; }
  .book-actions .flex { flex-direction: row; gap: 8px; }
  .book-actions .flex .btn { flex: 1; }
  .book-info h1 { font-size: 1.375rem; text-align: center; }
  .book-author { text-align: center; }
  .book-badges { justify-content: center; flex-wrap: wrap; }
  .book-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px; margin-top: 16px;
  }
  .book-stat { text-align: center; }
}

/* ── 5. HERO SECTION ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero { padding: 32px 0 24px; }
  .hero-title { font-size: clamp(1.625rem, 6vw, 2rem); }
  .hero-description { font-size: .9375rem; }
  .hero-stats { gap: 24px; margin-top: 20px; }
  .hero-stat-value { font-size: 1.375rem; }
  .hero-actions { gap: 8px; }
  .hero-actions .btn { flex: 1; padding: 11px 16px; font-size: .875rem; }
}

/* ── 6. SECTIONS & CARDS ────────────────────────────────────────── */
@media (max-width: 768px) {
  .section { padding: 20px 0; }
  .section-header { margin-bottom: 14px; }
  .section-title { font-size: 1.0625rem; }
  .container { padding: 0 14px; }

  /* Horizontal scroll strip for book rows */
  .scroll-strip {
    display: flex; gap: 12px;
    overflow-x: auto; padding-bottom: 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .scroll-strip::-webkit-scrollbar { display: none; }
  .scroll-strip .book-card {
    flex: 0 0 140px; scroll-snap-align: start;
    width: 140px;
  }
}

/* ── 7. CHAPTER LIST ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .chapter-list-body { max-height: 320px; }
  .chapter-item { padding: 10px 12px; }
  .chapter-info { gap: 8px; }
  .chapter-number { width: 28px; height: 28px; font-size: .6875rem; }
  .chapter-title { font-size: .8125rem; }
  /* Hide secondary meta column on mobile */
  .chapter-item > .chapter-meta:last-child { display: none; }
}

/* ── 8. PROFILE PAGE ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .profile-header {
    flex-direction: column; align-items: center;
    text-align: center; padding: 20px 16px; gap: 12px;
  }
  .profile-info { width: 100%; }
  .profile-stats { justify-content: center; }
  .profile-actions { justify-content: center; flex-wrap: wrap; gap: 8px; }
  .profile-actions .btn { min-width: 120px; }
}
@media (max-width: 480px) {
  .profile-avatar-placeholder { width: 72px; height: 72px; font-size: 1.75rem; }
  .profile-name { font-size: 1.125rem; }
}

/* ── 9. SETTINGS PAGE ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .settings-grid { grid-template-columns: 1fr !important; }
  .settings-nav { display: flex; overflow-x: auto; gap: 4px;
    padding-bottom: 4px; margin-bottom: 16px; scrollbar-width: none; }
  .settings-nav::-webkit-scrollbar { display: none; }
  .settings-nav-item { white-space: nowrap; flex-shrink: 0; }
}

/* ── 10. LIBRARY PAGE ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .library-tabs {
    width: 100%; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; gap: 2px;
  }
  .library-tabs::-webkit-scrollbar { display: none; }
  .library-tab { padding: 7px 12px; font-size: .75rem; }
  .library-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* ── 11. MODALS — full-screen on mobile ─────────────────────────── */
@media (max-width: 768px) {
  .modal-content {
    width: 100% !important; max-width: 100% !important;
    margin: 0 !important;
    border-radius: var(--r-xl) var(--r-xl) 0 0 !important;
    position: fixed; bottom: 0; left: 0; right: 0;
    max-height: 90vh; overflow-y: auto;
  }
  .modal {
    align-items: flex-end !important;
    padding: 0 !important;
  }
}

/* ── 12. FORMS — larger tap targets ─────────────────────────────── */
@media (max-width: 768px) {
  .form-input, .form-select, .form-textarea {
    font-size: 16px; /* prevent iOS zoom */
    padding: 12px 14px;
  }
  .btn { min-height: 44px; } /* Apple HIG min tap target */
  .btn-sm { min-height: 36px; }
}

/* ── 13. NOTIFICATION LIST ──────────────────────────────────────── */
@media (max-width: 768px) {
  .notification-item { padding: 12px 14px; gap: 10px; }
  .notification-content { min-width: 0; }
  .notification-title { font-size: .875rem; }
  .notification-message { font-size: .8125rem; }
}

/* ── 14. BROWSE / FILTERS ───────────────────────────────────────── */
@media (max-width: 768px) {
  .filters { padding: 12px; gap: 8px; }
  .filter-group { min-width: 0; flex: 1 1 calc(50% - 4px); }
  .filter-tags { gap: 4px; }
  .filter-tag { padding: 5px 10px; font-size: .75rem; }
}

/* ── 15. EMPTY STATES ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .empty-state { padding: 32px 16px; }
  .empty-state i { font-size: 2.5rem; }
}

/* ── 16. FOOTER — simplified on mobile ─────────────────────────── */
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr !important; }
  .footer { padding: 24px 0 16px; }
}

/* ── 17. TOAST notifications — mobile position ──────────────────── */
@media (max-width: 768px) {
  .toast-container {
    bottom: calc(56px + 12px + env(safe-area-inset-bottom)) !important;
    left: 12px !important; right: 12px !important;
    top: auto !important;
  }
  .toast { border-radius: var(--r-lg); }
}

/* ── 18. UTILITY ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Remove hover transforms (feel odd on touch) */
  .card:hover { transform: none !important; }
  .btn-primary:hover:not(:disabled) { transform: none !important; }
  /* Better link tap area */
  .chapter-sidebar-item { padding: 12px; }
  /* Wider close buttons */
  .modal-close, .rsp-close { min-width: 44px; min-height: 44px; }
}