/* ============================================================
   AyurCoach e-Library — Design System
   Matches the parent site (saffron / gold / leaf / cream)
   ============================================================ */

:root{
  --saffron:#E8650A;
  --gold:#F0A500;
  --deep-green:#0F3D2B;
  --leaf:#4CAF7D;
  --cream:#FFF8EE;
  --lotus:#C0392B;
  --turmeric:#E8B400;
  --sky:#1A4F8A;
  --sand:#C9933A;
  --dark:#0D1117;
  --text:#2C2C2C;
  --text-muted: rgba(44,44,44,0.65);
  /* Theme-aware aliases — these change per theme so pages get readable colors */
  --heading: #0F3D2B;
  --accent:  #E8650A;

  /* Surfaces */
  --bg: linear-gradient(135deg, #FFF8EE 0%, #FFEFD5 100%);
  --card-bg: rgba(255,255,255,0.72);
  --card-border: rgba(240,165,0,0.20);
  --card-shadow: 0 12px 40px rgba(15,61,43,0.10);
  --muted: rgba(44,44,44,0.65);
  --hairline: rgba(15,61,43,0.10);

  /* Spacing & radius */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;

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

[data-theme="dark"]{
  --bg: linear-gradient(135deg, #061410 0%, #0c2218 50%, #0e1a2c 100%);
  --card-bg: rgba(20,30,25,0.62);
  --card-border: rgba(240,165,0,0.18);
  --card-shadow: 0 12px 40px rgba(0,0,0,0.45);
  --text: #F1E8D8;
  --text-muted: rgba(241,232,216,0.7);
  --muted: rgba(241,232,216,0.65);
  --hairline: rgba(240,165,0,0.10);
  --cream: #0d1f17;
  /* In dark mode, "deep-green" text would be invisible, so we override it to gold.
     This makes ALL pages using color:var(--deep-green) readable instantly. */
  --deep-green: #F0A500;
  --heading:    #F0A500;
  --accent:     #F0A500;
}

/* Default global text color so pages without explicit color still pick up the theme. */
body{ color: var(--text); }

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Hind',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a{ text-decoration:none; color: inherit; }
button{ font-family: inherit; }
img{ max-width:100%; display:block }
input,textarea,select{ font-family: inherit }

/* ---------- DECORATIVE BACKGROUND ---------- */
body::before{
  content:'';
  position: fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(circle at 15% 12%, rgba(232,101,10,0.10), transparent 40%),
    radial-gradient(circle at 85% 88%, rgba(76,175,125,0.10), transparent 40%),
    radial-gradient(circle at 50% 60%, rgba(240,165,0,0.05), transparent 50%);
}

/* ---------- HEADER ---------- */
.lib-header{
  position: sticky; top:0; z-index: 100;
  background: rgba(11,35,22,0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(240,165,0,0.15);
  color: #fff;
}
.lib-header .wrap{
  max-width: 1280px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 18px; gap: 16px;
}
.lib-logo{
  font-family:'Yatra One', cursive;
  font-size: clamp(18px,2.5vw,22px);
  color: var(--gold);
  text-shadow: 0 0 20px rgba(240,165,0,0.4);
}
.lib-logo span{ color: var(--leaf) }
.lib-nav{ display:flex; align-items:center; gap:8px }
.lib-nav-link{
  background: transparent;
  border: 1px solid rgba(240,165,0,0.25);
  color: rgba(255,255,255,0.85);
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  transition: all .2s var(--ease);
  white-space: nowrap;
}
.lib-nav-link:hover, .lib-nav-link.active{
  background: var(--saffron);
  border-color: var(--saffron);
  color: #fff;
  transform: translateY(-1px);
}

.lib-search{
  flex: 1 1 auto; max-width: 480px;
  display:flex; align-items:center; gap:8px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(240,165,0,0.25);
  border-radius: 999px;
  padding: 6px 14px;
}
.lib-search input{
  flex:1; background:transparent; border:none; outline:none;
  color:#fff; font-size:14px;
}
.lib-search input::placeholder{ color: rgba(255,255,255,0.45) }

.lib-userbtn{
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--saffron), var(--gold));
  color:#fff; font-weight:700; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 4px 14px rgba(232,101,10,0.35);
  flex-shrink: 0;
}
.theme-toggle{
  width:38px; height:38px; border-radius:50%;
  background: rgba(255,255,255,0.10);
  border:1px solid rgba(240,165,0,0.25);
  color:#fff; cursor:pointer; flex-shrink:0;
}

/* mobile menu */
.menu-toggle{ display:none; background:transparent; border:none; color:#fff; font-size:22px; cursor:pointer }

@media (max-width: 860px){
  .lib-header .wrap{ flex-wrap: wrap }
  .lib-search{ order:3; max-width:100%; flex-basis:100% }
  .lib-nav{ display:none; order:4; flex-basis:100%; flex-direction:column; align-items:stretch; padding-top:8px }
  .lib-nav.open{ display:flex }
  .lib-nav-link{ text-align:left }
  .menu-toggle{ display:block }
}

/* ---------- CONTAINER ---------- */
.container{ max-width: 1280px; margin: 0 auto; padding: 24px 18px }
.page-title{ font-family:'Playfair Display',serif; font-size: clamp(24px,3.4vw,38px); margin-bottom: 6px; color: var(--deep-green) }
[data-theme="dark"] .page-title{ color: var(--gold) }
.page-sub{ color: var(--muted); margin-bottom: 22px }

/* ---------- CARDS ---------- */
.card{
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--r-lg);
  padding: 18px;
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ---------- BOOK CARD ---------- */
.book-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 18px;
}
@media (max-width: 480px){
  .book-grid{ grid-template-columns: repeat(2, 1fr); gap: 12px }
}
.book{
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: pointer;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  display: flex; flex-direction: column;
  position: relative;
}
.book:hover{
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(15,61,43,0.18);
}
.book-cover{
  aspect-ratio: 2/3;
  background: linear-gradient(135deg, #f5e8d0, #e8d4a8);
  position: relative;
  overflow: hidden;
}
.book-cover img{
  width:100%; height:100%; object-fit: cover;
  transition: transform .4s var(--ease);
}
.book:hover .book-cover img{ transform: scale(1.05) }
.book-cover-placeholder{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size: 40px; color: rgba(15,61,43,0.4);
}
.book-info{ padding: 12px 14px 14px }
.book-title{ font-weight:600; font-size:14px; line-height:1.3; margin-bottom:4px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.book-author{ font-size:11.5px; color: var(--muted) }
.book-badge{
  position:absolute; top:8px; left:8px;
  background: var(--saffron); color:#fff;
  padding: 3px 10px; border-radius: 999px;
  font-size: 10px; font-weight:700;
  box-shadow: 0 4px 12px rgba(232,101,10,0.4);
}
.book-badge.new{ background: var(--leaf) }
.book-progress{
  height: 3px; background: rgba(15,61,43,0.10);
  border-radius: 0;
}
.book-progress > div{
  height:100%; background: linear-gradient(90deg, var(--saffron), var(--gold));
  transition: width .3s var(--ease);
}

/* ---------- HORIZONTAL CAROUSEL ---------- */
.row{ margin-bottom: 36px }
.row-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px }
.row-title{ font-family:'Playfair Display',serif; font-size: 22px; color: var(--deep-green) }
[data-theme="dark"] .row-title{ color: var(--gold) }
.row-link{ color: var(--saffron); font-size:13px; font-weight:600; cursor:pointer }
.row-scroll{
  display: flex; gap: 14px;
  overflow-x: auto; padding-bottom: 10px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.row-scroll::-webkit-scrollbar{ height: 6px }
.row-scroll::-webkit-scrollbar-thumb{ background: rgba(232,101,10,0.4); border-radius: 999px }
.row-scroll .book{
  flex: 0 0 170px;
  scroll-snap-align: start;
}

/* ---------- CATEGORY CHIPS ---------- */
.cat-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.cat-card{
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--r-md);
  padding: 18px 14px;
  text-align: center;
  cursor: pointer;
  transition: all .25s var(--ease);
}
.cat-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(15,61,43,0.12);
  border-color: var(--saffron);
}
.cat-icon{ font-size: 36px; margin-bottom: 8px }
.cat-name{ font-weight: 600; font-size: 14px; color: var(--deep-green) }
[data-theme="dark"] .cat-name{ color: var(--cream) }
.cat-count{ font-size: 11px; color: var(--muted); margin-top: 2px }

/* ---------- BUTTONS ---------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(135deg, var(--saffron), var(--gold));
  color:#fff; border:none; cursor:pointer;
  padding: 11px 22px; border-radius: 999px;
  font-weight: 700; font-size: 14px;
  box-shadow: 0 6px 18px rgba(232,101,10,0.32);
  transition: all .25s var(--ease);
  text-decoration:none;
}
.btn:hover{ transform: translateY(-2px); box-shadow: 0 10px 26px rgba(232,101,10,0.45) }
.btn:active{ transform: translateY(0) }
.btn.btn-ghost{
  background: transparent;
  color: var(--saffron);
  border: 1.5px solid var(--saffron);
  box-shadow: none;
}
.btn.btn-dark{
  background: linear-gradient(135deg, var(--deep-green), #1B5E40);
  box-shadow: 0 6px 18px rgba(15,61,43,0.32);
}
.btn.btn-block{ width:100%; }

/* ---------- FORMS ---------- */
.form{ max-width: 420px; margin: 0 auto }
.field{ margin-bottom: 14px }
.field label{ display:block; font-size:13px; color: var(--muted); margin-bottom:6px; font-weight:600 }
.input, .textarea, .select{
  width:100%;
  background: var(--card-bg);
  border: 1.5px solid var(--card-border);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--text);
  outline:none;
  transition: border-color .2s, box-shadow .2s;
}
.input:focus, .textarea:focus, .select:focus{
  border-color: var(--saffron);
  box-shadow: 0 0 0 4px rgba(232,101,10,0.12);
}
.textarea{ resize: vertical; min-height: 90px }

/* ---------- CONTINUE READING CARD (large) ---------- */
.cr-row{ display:flex; gap:14px; overflow-x:auto; padding-bottom:8px; scroll-snap-type:x mandatory }
.cr-card{
  flex: 0 0 320px; max-width: 90vw;
  scroll-snap-align: start;
  display:flex; gap: 14px;
  background: var(--card-bg);
  border:1px solid var(--card-border);
  border-radius: var(--r-md);
  padding: 14px;
  cursor: pointer;
  transition: transform .25s var(--ease);
  position: relative; overflow:hidden;
}
.cr-card:hover{ transform: translateY(-3px) }
.cr-card .cover{ width:80px; aspect-ratio:2/3; border-radius:8px; overflow:hidden; flex-shrink:0;
                 background: linear-gradient(135deg,#e8d4a8,#f5e8d0) }
.cr-card .meta{ flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center }
.cr-card .meta .t{ font-weight:600; font-size:14px; line-height:1.3;
                   display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden }
.cr-card .meta .a{ font-size:11px; color: var(--muted); margin-top:2px }
.cr-card .meta .p{ font-size:11px; color: var(--saffron); margin-top:6px; font-weight:600 }
.cr-card .bar{ height:4px; background: rgba(0,0,0,0.06); border-radius:999px; margin-top:8px; overflow:hidden }
.cr-card .bar > div{ height:100%; background: linear-gradient(90deg, var(--saffron), var(--gold)) }

/* ---------- SKELETON ---------- */
.skel{
  background: linear-gradient(90deg, rgba(0,0,0,0.06), rgba(0,0,0,0.12), rgba(0,0,0,0.06));
  background-size: 200% 100%;
  animation: skel-pulse 1.4s linear infinite;
  border-radius: 8px;
}
[data-theme="dark"] .skel{
  background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  background-size: 200% 100%;
}
@keyframes skel-pulse{ 0%{ background-position:200% 0 } 100%{ background-position:-200% 0 } }
.book-skel .book-cover{ background: none; }
.book-skel .book-cover .skel{ width:100%; height:100% }

/* ---------- TOAST ---------- */
.toast-wrap{ position: fixed; top:78px; right:18px; z-index:9000; display:flex; flex-direction:column; gap:8px }
.toast{
  background: var(--deep-green); color:#fff;
  padding: 12px 18px; border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  font-size: 14px; font-weight:600;
  animation: toast-in .25s var(--ease);
  border-left: 4px solid var(--gold);
}
.toast.err{ background:#7a1f1f; border-left-color: #ff7777 }
.toast.ok{ background: var(--deep-green); border-left-color: var(--gold) }
@keyframes toast-in{ from{ transform:translateX(120%); opacity:0 } to{ transform:translateX(0); opacity:1 } }

/* ---------- HERO BANNER ---------- */
.hero{
  background: linear-gradient(135deg, #0F3D2B 0%, #1B5E40 50%, #0F3D2B 100%);
  color: #fff;
  border-radius: var(--r-xl);
  padding: 40px 30px;
  margin-bottom: 30px;
  position: relative; overflow: hidden;
}
.hero::after{
  content:'📚'; position:absolute; right: -20px; bottom: -30px;
  font-size: 280px; opacity: 0.05;
}
.hero h1{ font-family:'Playfair Display',serif; font-size: clamp(26px,4vw,40px); margin-bottom:8px; color: var(--gold) }
.hero p{ font-size: 15px; opacity:0.85; max-width: 600px }
.hero .stats{ display:flex; gap: 20px; margin-top: 18px; flex-wrap: wrap }
.hero .stat .v{ font-size: 24px; font-weight: 800; color: var(--gold) }
.hero .stat .l{ font-size: 12px; opacity: 0.7 }

/* ---------- LIVE SEARCH DROPDOWN ---------- */
.search-results{
  position: absolute; top: calc(100% + 6px); left:0; right:0;
  background: rgba(11,35,22,0.97);
  backdrop-filter: blur(18px);
  border:1px solid rgba(240,165,0,0.25);
  border-radius: 14px;
  padding: 8px;
  max-height: 400px; overflow-y: auto;
  box-shadow: 0 22px 60px rgba(0,0,0,0.55);
  z-index: 200;
  display: none;
}
.search-results.show{ display:block }
.sr-item{ display:flex; gap:10px; padding:8px; border-radius:10px; cursor:pointer; align-items:center }
.sr-item:hover{ background: rgba(255,255,255,0.08) }
.sr-item img{ width:36px; height:48px; object-fit:cover; border-radius:4px; flex-shrink:0;
              background: rgba(255,255,255,0.1) }
.sr-item .t{ color:#fff; font-size:13px; font-weight:600 }
.sr-item .a{ color: rgba(255,255,255,0.55); font-size:11px }
.sr-empty{ padding: 14px; color: rgba(255,255,255,0.5); font-size:13px; text-align:center }

/* ---------- LOADING SCREEN (page-wide) ---------- */
.fullscreen-loader{
  position: fixed; inset: 0; z-index: 9999;
  background: linear-gradient(135deg, #061410, #0c2218);
  display: flex; flex-direction: column; align-items:center; justify-content:center;
  transition: opacity .5s, visibility .5s;
}
.fullscreen-loader.hidden{ opacity:0; visibility:hidden; pointer-events:none }
.loader-mandala{ font-size: 64px; animation: spin 3s linear infinite }
.loader-text{ color: var(--gold); font-family:'Yatra One',cursive; font-size:20px; margin-top:14px; letter-spacing:2px }
@keyframes spin{ to{ transform: rotate(360deg) } }

/* ---------- AUTH PAGES ---------- */
.auth-wrap{
  min-height: calc(100vh - 70px);
  display:flex; align-items:center; justify-content:center;
  padding: 30px 18px;
}
.auth-card{
  width: 100%; max-width: 440px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--r-xl);
  padding: 34px 28px;
  box-shadow: 0 24px 60px rgba(15,61,43,0.18);
  backdrop-filter: blur(14px);
}
.auth-card h2{ font-family:'Playfair Display',serif; font-size: 28px; color: var(--deep-green); margin-bottom: 6px }
[data-theme="dark"] .auth-card h2{ color: var(--gold) }
.auth-card .sub{ color: var(--muted); margin-bottom: 22px; font-size: 14px }
.auth-card .swap{ text-align:center; margin-top: 18px; font-size: 13px; color: var(--muted) }
.auth-card .swap a{ color: var(--saffron); font-weight:700 }

/* ---------- TABS ---------- */
.tabs{ display:flex; gap:6px; flex-wrap: wrap; margin-bottom: 22px;
       border-bottom: 1px solid var(--hairline); padding-bottom: 8px }
.tab{
  background: transparent; border: none; cursor:pointer;
  padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight:600;
  color: var(--muted); transition: all .2s var(--ease);
}
.tab:hover{ color: var(--saffron) }
.tab.active{ background: var(--saffron); color:#fff }

/* ---------- EMPTY STATE ---------- */
.empty{ text-align:center; padding: 60px 20px; color: var(--muted) }
.empty .emj{ font-size: 56px; margin-bottom: 12px }
.empty h3{ font-size: 18px; color: var(--text); margin-bottom: 6px }

/* ---------- FAB ---------- */
.fab{
  position: fixed; bottom: 22px; right: 22px;
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, var(--saffron), var(--gold));
  color:#fff; border:none; cursor:pointer;
  box-shadow: 0 8px 24px rgba(232,101,10,0.45);
  font-size: 22px; z-index: 90;
  display: flex; align-items: center; justify-content: center;
}
.fab:hover{ transform: scale(1.05) }

/* ============================================================
   DARK MODE FIXES — applied globally so every page is readable
   ============================================================ */
[data-theme="dark"] body{ color: var(--text); }
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6{
  color: var(--gold);
}
[data-theme="dark"] p, [data-theme="dark"] span, [data-theme="dark"] div,
[data-theme="dark"] li, [data-theme="dark"] label, [data-theme="dark"] td,
[data-theme="dark"] th, [data-theme="dark"] small{ color: inherit; }

/* Chips / pills that use translucent green bg become invisible in dark mode */
[data-theme="dark"] .chip,
[data-theme="dark"] .progress-card{
  background: rgba(240,165,0,0.10) !important;
  border-color: rgba(240,165,0,0.30) !important;
  color: #FFF8EE !important;
}

/* Filter tabs, table button etc that hardcode green bg */
[data-theme="dark"] .filter-tabs a,
[data-theme="dark"] .tbl-btn{
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(240,165,0,0.20) !important;
  color: #FFF8EE !important;
}
[data-theme="dark"] .filter-tabs a:hover,
[data-theme="dark"] .tbl-btn:hover{
  background: rgba(240,165,0,0.18) !important;
  border-color: rgba(240,165,0,0.45) !important;
}
[data-theme="dark"] .filter-tabs a.active{
  background: linear-gradient(135deg,#F0A500,#E8650A) !important;
  border-color: transparent !important;
  color:#fff !important;
}

/* Admin panel surfaces */
[data-theme="dark"] body{ background: linear-gradient(135deg,#061410,#0a1c14) !important; }
[data-theme="dark"] .adm-card,
[data-theme="dark"] .panel,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .adm-stat,
[data-theme="dark"] .modal{
  background: rgba(20,32,25,0.85) !important;
  border-color: rgba(240,165,0,0.18) !important;
  color: #F1E8D8 !important;
}
[data-theme="dark"] .adm-card *,
[data-theme="dark"] .panel *,
[data-theme="dark"] .stat-card *,
[data-theme="dark"] .adm-stat *,
[data-theme="dark"] .modal *{ color: inherit; }

/* Tables in dark mode */
[data-theme="dark"] table.tbl th{ color: var(--gold); }
[data-theme="dark"] table.tbl td{ color: #F1E8D8; }
[data-theme="dark"] table.tbl th,
[data-theme="dark"] table.tbl td{ border-color: rgba(240,165,0,0.10) !important; }

/* Inputs / forms */
[data-theme="dark"] .input,
[data-theme="dark"] .textarea,
[data-theme="dark"] input.input,
[data-theme="dark"] textarea.textarea,
[data-theme="dark"] select.input{
  background: rgba(15,28,22,0.7) !important;
  border-color: rgba(240,165,0,0.25) !important;
  color: #F1E8D8 !important;
}
[data-theme="dark"] .input::placeholder,
[data-theme="dark"] .textarea::placeholder{ color: rgba(241,232,216,0.45); }
[data-theme="dark"] .input:focus,
[data-theme="dark"] .textarea:focus{
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(240,165,0,0.15);
}
[data-theme="dark"] .field label{ color: rgba(241,232,216,0.85); }

/* Note rows on dashboard */
[data-theme="dark"] .note-row{
  background: rgba(20,32,25,0.65) !important;
  border-color: rgba(240,165,0,0.15) !important;
  color: #F1E8D8 !important;
}

/* Section heads & welcome */
[data-theme="dark"] .section-head h2,
[data-theme="dark"] .browse-head h1,
[data-theme="dark"] .adm-top h1,
[data-theme="dark"] #welcome{
  color: var(--gold) !important;
}

/* Skeletons */
[data-theme="dark"] .skel{
  background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(240,165,0,0.10), rgba(255,255,255,0.04)) !important;
}

/* Buttons hovering with green tint */
[data-theme="dark"] .btn-ghost{
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(240,165,0,0.30) !important;
  color: #FFF8EE !important;
}
[data-theme="dark"] .btn-ghost:hover{
  background: rgba(240,165,0,0.15) !important;
}

/* Empty state */
[data-theme="dark"] .empty h3{ color: var(--gold) !important; }
[data-theme="dark"] .empty{ color: rgba(241,232,216,0.65); }

/* Avatar & user button visibility */
[data-theme="dark"] .avatar-big{ color: #fff; }

/* Book card readability */
[data-theme="dark"] .book-info{ color: #F1E8D8; }
[data-theme="dark"] .book-title{ color: #FFF8EE; }
[data-theme="dark"] .book-author{ color: rgba(241,232,216,0.65); }

/* ============================================================
   EMBEDDED MODE — when library runs inside iframe wrapper
   ============================================================ */
html.lib-embedded body{
  /* Wrapper provides all chrome; iframe content stays clean */
  padding-top: 0 !important;
}
html.lib-embedded .lib-header,
html.lib-embedded #libHeader,
html.lib-embedded #appHeader{
  display: none !important;
}
/* Make sure body bg shows through nicely when in iframe */
html.lib-embedded body{ background: var(--bg); }

/* ============================================================
   GLOBAL: Library never shows its own header (wrapper provides it)
   ============================================================ */
.lib-header,
#libHeader,
#appHeader{ display: none !important; }

/* ============================================================
   DARK MODE — sweeping text colour fix
   Any text that would naturally be dark (black, deep green, dark blue,
   muted gray) becomes a readable light colour against the dark background.
   ============================================================ */
[data-theme="dark"],
[data-theme="dark"] body,
[data-theme="dark"] p,
[data-theme="dark"] span,
[data-theme="dark"] div,
[data-theme="dark"] li,
[data-theme="dark"] td,
[data-theme="dark"] th,
[data-theme="dark"] label,
[data-theme="dark"] small,
[data-theme="dark"] strong,
[data-theme="dark"] b,
[data-theme="dark"] em,
[data-theme="dark"] i,
[data-theme="dark"] a:not(.btn):not(.wh-login-btn):not(.lib-userbtn),
[data-theme="dark"] dt,
[data-theme="dark"] dd,
[data-theme="dark"] caption,
[data-theme="dark"] figcaption,
[data-theme="dark"] blockquote,
[data-theme="dark"] cite{
  color: #F1E8D8 !important;
}

/* Headings get the brand gold (clearly readable) */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6{
  color: #F0A500 !important;
}

/* Form fields */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select{
  color: #F1E8D8 !important;
  background: rgba(15,28,22,0.7) !important;
  border-color: rgba(240,165,0,0.25) !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder{
  color: rgba(241,232,216,0.45) !important;
}

/* Specifically rescue any text using these brand-dark colors via inline style */
[data-theme="dark"] [style*="color:#0F3D2B"],
[data-theme="dark"] [style*="color: #0F3D2B"],
[data-theme="dark"] [style*="color:#0f3d2b"],
[data-theme="dark"] [style*="color: #0f3d2b"],
[data-theme="dark"] [style*="color:#000"],
[data-theme="dark"] [style*="color: #000"],
[data-theme="dark"] [style*="color:black"],
[data-theme="dark"] [style*="color: black"],
[data-theme="dark"] [style*="color:#2C2C2C"],
[data-theme="dark"] [style*="color: #2C2C2C"],
[data-theme="dark"] [style*="color:#1a4f8a"],
[data-theme="dark"] [style*="color:#1A4F8A"],
[data-theme="dark"] [style*="color:#1e40af"],
[data-theme="dark"] [style*="color: #1e40af"],
[data-theme="dark"] [style*="color:#065f46"],
[data-theme="dark"] [style*="color: #065f46"],
[data-theme="dark"] [style*="color:#0e7490"],
[data-theme="dark"] [style*="color: #0e7490"],
[data-theme="dark"] [style*="color:#92400e"],
[data-theme="dark"] [style*="color: #92400e"],
[data-theme="dark"] [style*="color:var(--deep-green)"],
[data-theme="dark"] [style*="color: var(--deep-green)"],
[data-theme="dark"] [style*="color:var(--text)"],
[data-theme="dark"] [style*="color: var(--text)"],
[data-theme="dark"] [style*="color:var(--text-muted)"],
[data-theme="dark"] [style*="color: var(--text-muted)"]{
  color: #F1E8D8 !important;
}

/* Buttons keep their own bright colors (don't override) */
[data-theme="dark"] .btn,
[data-theme="dark"] .btn *,
[data-theme="dark"] .wh-login-btn,
[data-theme="dark"] .wh-avatar,
[data-theme="dark"] .lib-userbtn{
  color: #fff !important;
}

/* Cards / panels: ensure backgrounds are dark enough */
[data-theme="dark"] .card,
[data-theme="dark"] .panel,
[data-theme="dark"] .adm-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .adm-stat,
[data-theme="dark"] .modal,
[data-theme="dark"] .auth-card,
[data-theme="dark"] .note-row,
[data-theme="dark"] .cat-card,
[data-theme="dark"] .book,
[data-theme="dark"] .cr-card{
  background: rgba(20,32,25,0.85) !important;
  border-color: rgba(240,165,0,0.18) !important;
}

/* Chips, pills, light backgrounds */
[data-theme="dark"] .chip,
[data-theme="dark"] .progress-card,
[data-theme="dark"] .filter-tabs a:not(.active),
[data-theme="dark"] .tbl-btn{
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(240,165,0,0.20) !important;
}

/* ============================================================
   AUDIO BOOK badges
   ============================================================ */
.book-badge.audio{
  background: linear-gradient(135deg, #E8650A, #C0392B);
  color: #fff;
  font-size: 14px;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(232,101,10,0.35);
}