/* ══════════════════════════════════════════
   MY LIBRARY — library.css  v3
   Full styles including 3-button overlay,
   modal, read confirm popup, toast
══════════════════════════════════════════ */

:root {
  --gold:   #e8c96d;
  --teal:   #5ec4b6;
  --rose:   #e87d6d;
  --card:   rgba(255,255,255,.04);
  --border: rgba(255,255,255,.09);
  --radius: 14px;
}
body.light-mode {
  --card:   rgba(0,0,0,.03);
  --border: rgba(0,0,0,.09);
}

/* ── Page wrapper ── */
.lib-page {
  max-width: 1340px;
  margin: 0 auto;
  padding: 108px 24px 80px;
}

/* ══════════════════════════════════════════
   HERO BANNER
══════════════════════════════════════════ */
.lib-hero {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  padding: 48px 48px 44px;
  background: linear-gradient(135deg, #1a1208 0%, #0f1a18 100%);
  border: 1px solid var(--border);
  margin-bottom: 36px;
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.lib-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 80% 50%, rgba(94,196,182,.08) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 20% 80%, rgba(232,201,109,.07) 0%, transparent 70%);
  pointer-events: none;
}
body.light-mode .lib-hero {
  background: linear-gradient(135deg, #e8f0fe 0%, #ddf0ee 100%);
  border-color: rgba(0,0,0,.08);
}
body.light-mode .lib-hero::before {
  background:
    radial-gradient(ellipse 60% 80% at 80% 50%, rgba(94,196,182,.18) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 20% 80%, rgba(100,150,240,.14) 0%, transparent 70%);
}
body.light-mode .hero-eyebrow { color: #2a7a74; }
body.light-mode .hero-title   { color: #1a1208; }
body.light-mode .hero-title span { color: #b8860b; }
body.light-mode .hero-sub     { color: #3a3a3a; opacity: .7; }
body.light-mode .hstat        { background: rgba(255,255,255,.55); border-color: rgba(0,0,0,.10); backdrop-filter: blur(8px); }
body.light-mode .hstat-val    { color: #b8860b; }
body.light-mode .hstat-lbl    { color: #3a3a3a; opacity: .65; }

.hero-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--teal));
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem; font-weight: 900; color: #12110f;
  flex-shrink: 0; position: relative; z-index: 1;
}
.hero-text  { flex: 1; min-width: 0; position: relative; z-index: 1; }
.hero-eyebrow { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--teal); margin-bottom: 6px; }
.hero-title { font-family: 'Playfair Display', serif; font-size: clamp(1.6rem,4vw,2.4rem); font-weight: 900; line-height: 1.1; margin-bottom: 6px; }
.hero-title span { color: var(--gold); }
.hero-sub   { font-size: .92rem; opacity: .5; }
.hero-stats { display: flex; gap: 28px; flex-wrap: wrap; position: relative; z-index: 1; }
.hstat      { text-align: center; padding: 14px 22px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid var(--border); }
.hstat-val  { font-family: 'Playfair Display', serif; font-size: 1.8rem; font-weight: 900; color: var(--gold); display: block; line-height: 1; }
.hstat-lbl  { font-size: .68rem; opacity: .45; letter-spacing: .08em; text-transform: uppercase; margin-top: 4px; }

/* ══════════════════════════════════════════
   TAB BAR
══════════════════════════════════════════ */
.lib-tabs {
  display: flex; gap: 4px; margin-bottom: 28px;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 68px; z-index: 80;
  background: inherit; padding-top: 4px;
  backdrop-filter: blur(12px);
}
.lib-tab {
  padding: 12px 22px; border: none; background: transparent;
  font-family: 'Nunito', sans-serif; font-size: .9rem; font-weight: 600;
  color: inherit; opacity: .45; cursor: pointer;
  border-radius: 10px 10px 0 0; transition: opacity .2s, background .2s;
  position: relative; display: flex; align-items: center; gap: 8px;
}
.lib-tab:hover { opacity: .75; }
.lib-tab.active {
  opacity: 1; background: var(--card);
  border: 1px solid var(--border); border-bottom: 1px solid transparent;
  margin-bottom: -1px;
}
.lib-tab.active::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px; background: var(--gold); border-radius: 2px 2px 0 0;
}
.tab-badge {
  background: var(--gold); color: #1a1610;
  font-size: .65rem; font-weight: 800;
  border-radius: 20px; padding: 1px 7px; min-width: 18px; text-align: center;
}

/* ══════════════════════════════════════════
   CONTROLS ROW
══════════════════════════════════════════ */
.ctrl-row { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }
.lib-search-box {
    max-width: 400px;
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 9px 16px;
  flex: 1; min-width: 180px; transition: border-color .15s;
}
.lib-search-box:focus-within { border-color: rgba(232,201,109,.5); }
.lib-search-box svg   { width: 16px; height: 16px; opacity: .4; flex-shrink: 0; }
.lib-search-box input { background: none; border: none; outline: none; font-family: inherit; font-size: .88rem; color: inherit; width: 100%; }
.genre-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.gpill {
  padding: 5px 14px; border-radius: 20px; font-size: .78rem; font-weight: 600;
  border: 1px solid var(--border); background: transparent; color: inherit;
  cursor: pointer; transition: all .15s;
}
.gpill:hover, .gpill.active { background: var(--gold); color: #1a1610; border-color: var(--gold); }
.view-toggle { display: flex; gap: 4px; }
.vtbtn {
  width: 34px; height: 34px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--card);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .15s; font-size: 14px; color: inherit; opacity: .5;
}
.vtbtn.active, .vtbtn:hover { opacity: 1; border-color: var(--gold); background: rgba(232,201,109,.1); }

/* ══════════════════════════════════════════
   BOOK GRID
══════════════════════════════════════════ */
.books-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px,1fr)); gap: 20px; }
.books-grid.list-view { grid-template-columns: 1fr; gap: 10px; }

.bk-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; cursor: pointer;
  position: relative; transition: transform .22s, border-color .22s, box-shadow .22s;
  animation: fadeUp .35s ease both;
}
.bk-card:hover {
  transform: translateY(-5px);
  border-color: rgba(232,201,109,.4);
  box-shadow: 0 12px 36px rgba(0,0,0,.25);
}
@keyframes fadeUp {
  from { opacity:0; transform:translateY(14px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Cover */
.bk-cover { position: relative; width: 100%; aspect-ratio: 2/3; overflow: hidden; background: #1a1612; }
.bk-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.bk-card:hover .bk-cover img { transform: scale(1.05); }
.bk-cover-fb {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; font-size: 2rem; padding: 12px; text-align: center;
}
.bk-cover-fb p { font-family: 'Playfair Display', serif; font-size: .7rem; font-weight: 700; line-height: 1.3; opacity: .85; }

/* ── 3-button overlay ── */
.bk-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.65);
  opacity: 0; transition: opacity .22s ease;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .45rem; padding: 12px;
}
.bk-card:hover .bk-overlay { opacity: 1; }
.bk-ov-btn {
  width: 86%; font-family: 'Nunito', sans-serif; font-weight: 700;
  font-size: .74rem; padding: .38rem .7rem; border-radius: 50px;
  cursor: pointer; transition: transform .12s, opacity .12s;
  text-align: center; border: none;
}
.bk-ov-btn:hover  { transform: scale(1.04); }
.bk-ov-view   { background: linear-gradient(135deg, #e8c96d, #c9a84c); color: #1a1200; }
.bk-ov-read   { background: linear-gradient(135deg, #5ec4b6, #3a9e96); color: #fff; }
.bk-ov-remove { background: rgba(255,80,80,.22); color: #ff8888; }

/* Card info */
.bk-info   { padding: 12px 12px 14px; }
.bk-title  {
  font-family: 'Playfair Display', serif; font-size: .88rem; font-weight: 700;
  line-height: 1.35; margin-bottom: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.bk-author { font-size: .75rem; opacity: .45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.bk-genre  {
  font-size: .65rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 10px;
  background: rgba(232,201,109,.12); color: var(--gold);
}
.bk-date   { font-size: .65rem; opacity: .35; }

/* List view */
.books-grid.list-view .bk-card         { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: 12px; }
.books-grid.list-view .bk-cover        { width: 50px; aspect-ratio: auto; height: 70px; border-radius: 8px; flex-shrink: 0; }
.books-grid.list-view .bk-overlay      { display: none; }
.books-grid.list-view .bk-info         { flex: 1; padding: 0; min-width: 0; }
.books-grid.list-view .bk-title        { font-size: .92rem; -webkit-line-clamp: 1; line-clamp: 1; }
.books-grid.list-view .bk-footer       { margin-top: 4px; }
.books-grid.list-view .bk-list-actions { display: flex; gap: 8px; flex-shrink: 0; }

.bk-list-actions { display: none; }
.bk-list-btn {
  padding: 6px 14px; border-radius: 8px; border: none;
  font-size: .75rem; font-weight: 700; cursor: pointer; transition: opacity .15s;
}
.bk-list-btn:hover  { opacity: .78; }
.bk-list-view { background: rgba(94,196,182,.15);  color: var(--teal); }
.bk-list-read { background: rgba(94,196,182,.10);  color: var(--teal); }
.bk-list-rm   { background: rgba(255,80,80,.12);   color: #ff7070; }

/* ══════════════════════════════════════════
   FOLDERS TAB
══════════════════════════════════════════ */
.folders-row { display: grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap: 14px; margin-bottom: 28px; }
.folder-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 20px; cursor: pointer; transition: all .2s; position: relative;
  display: flex; align-items: center; gap: 14px; animation: fadeUp .3s ease both;
}
.folder-card:hover { border-color: rgba(232,201,109,.35); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.15); }
.folder-card.active { border-color: var(--gold); background: rgba(232,201,109,.07); }
.fc-icon  { width:44px;height:44px;border-radius:12px;flex-shrink:0;background:rgba(232,201,109,.12);display:flex;align-items:center;justify-content:center;font-size:22px; }
.fc-name  { font-family:'Playfair Display',serif;font-size:.95rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.fc-count { font-size:.72rem;opacity:.4;margin-top:2px; }
.fc-del   { position:absolute;top:10px;right:10px;background:none;border:none;cursor:pointer;font-size:13px;color:inherit;opacity:0;padding:4px 6px;border-radius:6px;transition:opacity .15s,background .15s; }
.folder-card:hover .fc-del { opacity:.4; }
.fc-del:hover { opacity:1!important;background:rgba(255,80,80,.15);color:#ff5050; }
.folder-new-card { background:transparent;border:2px dashed var(--border);border-radius:var(--radius);padding:18px 20px;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:14px; }
.folder-new-card:hover { border-color:var(--gold);background:rgba(232,201,109,.04); }
.fnc-icon { width:44px;height:44px;border-radius:12px;flex-shrink:0;border:2px dashed var(--border);display:flex;align-items:center;justify-content:center;font-size:22px;transition:border-color .15s; }
.folder-new-card:hover .fnc-icon { border-color:var(--gold); }

/* ══════════════════════════════════════════
   UPLOADS TAB
══════════════════════════════════════════ */
.upmat-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px; }
.um-card { background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;cursor:default;transition:transform .2s,border-color .2s;animation:fadeUp .35s ease both; }
.um-card:hover { transform:translateY(-3px);border-color:rgba(94,196,182,.3); }
.um-type-badge { display:inline-block;padding:2px 9px;border-radius:12px;font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px; }
.um-type-badge.epub  { background:rgba(94,196,182,.15);  color:var(--teal); }
.um-type-badge.pdf   { background:rgba(232,201,109,.15); color:var(--gold); }
.um-type-badge.mobi  { background:rgba(180,130,255,.15); color:#b482ff; }
.um-type-badge.txt   { background:rgba(180,180,180,.15); color:#aaa; }
.um-type-badge.other { background:rgba(180,180,180,.1);  color:#888; }
.um-icon    { font-size:2rem;display:block;margin-bottom:8px;line-height:1; }
.um-name    { font-size:.85rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:4px; }
.um-meta    { font-size:.72rem;opacity:.4;line-height:1.6; }
.um-folder  { font-size:.72rem;color:var(--gold);opacity:.7;margin-top:4px; }
/* ══════════════════════════════════════════
   MY UPLOADS — Action Buttons Fix
   Replace the existing .um-actions and .um-btn
   block in library.css with this
══════════════════════════════════════════ */

/* ── Upload card action buttons fix ── */
.um-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  margin-top: 12px;
}

.um-actions .um-btn:first-child {
  grid-column: unset;
}

/* Download */
.um-dl {
  background: rgba(94, 196, 182, .15) !important;
  color: #5ec4b6 !important;
  border: 1px solid rgba(94, 196, 182, .28) !important;
}

/* Remove */
.um-rm {
  background: rgba(255, 80, 80, .13) !important;
  color: #ff7070 !important;
  border: 1px solid rgba(255, 80, 80, .25) !important;
}

.um-btn {
  padding: 6px 2px;
  border-radius: 7px;
  border: none;
  font-size: .65rem;
  font-weight: 700;
  font-family: 'Nunito', sans-serif;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity .15s, transform .12s;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
}

.um-btn:hover {
  opacity: .78;
  transform: translateY(-1px);
}

/* Read button — gold tint */
.um-btn:not(.um-dl):not(.um-rm) {
  background: rgba(232, 201, 109, .16);
  color: #e8c96d;
  border: 1px solid rgba(232, 201, 109, .28);
}
.um-btn:not(.um-dl):not(.um-rm):hover {
  background: rgba(232, 201, 109, .26);
}

/* Download button — teal tint */
.um-dl {
  background: rgba(94, 196, 182, .15);
  color: #5ec4b6;
  border: 1px solid rgba(94, 196, 182, .28);
}
.um-dl:hover {
  background: rgba(94, 196, 182, .26);
}

/* Remove button — red tint */
.um-rm {
  background: rgba(255, 80, 80, .13);
  color: #ff7070;
  border: 1px solid rgba(255, 80, 80, .25);
}
.um-rm:hover {
  background: rgba(255, 80, 80, .24);
}

/* Light mode overrides */
body.light-mode .um-btn:not(.um-dl):not(.um-rm) {
  background: rgba(180, 130, 0, .1);
  color: #a07800;
  border: 1px solid rgba(180, 130, 0, .22);
}
body.light-mode .um-dl {
  background: rgba(30, 150, 140, .1);
  color: #1a8c84;
  border: 1px solid rgba(30, 150, 140, .22);
}
body.light-mode .um-rm {
  background: rgba(200, 50, 50, .09);
  color: #cc3333;
  border: 1px solid rgba(200, 50, 50, .2);
}

/* ══════════════════════════════════════════
   EMPTY STATE
══════════════════════════════════════════ */
.lib-empty      { grid-column:1/-1;text-align:center;padding:56px 20px;opacity:.4; }
.lib-empty-icon { font-size:3.5rem;display:block;margin-bottom:14px; }
.lib-empty p    { font-size:.95rem;line-height:1.7; }
.lib-empty a    { color:var(--gold);text-decoration:underline; }

/* ══════════════════════════════════════════
   BOOK MODAL — dark/light aware
══════════════════════════════════════════ */
.book-modal { position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.82);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:1rem;opacity:0;pointer-events:none;transition:opacity .3s; }
.book-modal.open { opacity:1;pointer-events:auto; }
.modal-inner { background:#181818;border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:2rem;max-width:600px;width:100%;display:flex;gap:2rem;position:relative;max-height:90vh;overflow-y:auto;box-shadow:0 24px 60px rgba(0,0,0,.8); }
body.light-mode .modal-inner { background:#ffffff;border:1px solid rgba(0,0,0,.1);box-shadow:0 24px 60px rgba(0,0,0,.2); }
.modal-cover  { flex-shrink:0;width:140px; }
.modal-cover-img { width:140px;aspect-ratio:2/3;object-fit:cover;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.5); }
.modal-body   { flex:1;min-width:0;display:flex;flex-direction:column; }
.modal-title  { font-family:'Playfair Display',serif;font-size:1.4rem;font-weight:900;color:#f0ece4;margin-bottom:.4rem;line-height:1.2; }
body.light-mode .modal-title  { color:#111; }
.modal-author { font-size:.85rem;color:#aaa;margin-bottom:.6rem; }
body.light-mode .modal-author { color:#555; }
.modal-tags   { display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.6rem; }
.modal-tag    { background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);color:#888;font-size:.7rem;font-weight:700;padding:.2rem .6rem;border-radius:8px; }
body.light-mode .modal-tag { background:rgba(0,0,0,.05);border:1px solid rgba(0,0,0,.1);color:#666; }
/* Summary */
.modal-summary-section { margin:.2rem 0 .75rem; }
.modal-summary-label   { font-family:'Nunito',sans-serif;font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#5ec4b6;margin-bottom:.3rem; }
.modal-desc { font-size:.84rem;color:#aaa;line-height:1.65;max-height:130px;overflow-y:auto;padding-right:.2rem;margin:0; }
body.light-mode .modal-desc { color:#444; }
.modal-desc::-webkit-scrollbar{width:3px}
.modal-desc::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:3px}
/* Action buttons */
.modal-actions { display:flex;gap:.65rem;flex-wrap:wrap;margin-top:.7rem; }
.modal-read-btn, .modal-remove-btn {
  flex:1;min-width:120px;display:flex;align-items:center;justify-content:center;
  font-family:'Nunito',sans-serif;font-weight:700;font-size:.84rem;
  padding:.62rem 1rem;border-radius:50px;cursor:pointer;transition:opacity .18s,transform .18s;
}
.modal-read-btn    { background:linear-gradient(135deg,#5ec4b6,#3a9e96);color:#fff;border:none; }
.modal-read-btn:hover { opacity:.88;transform:translateY(-1px); }
.modal-remove-btn  { background:rgba(255,80,80,.12);color:#ff8080;border:1px solid rgba(255,80,80,.2); }
.modal-remove-btn:hover { opacity:.88;transform:translateY(-1px); }
.modal-close { position:absolute;top:1rem;right:1rem;background:#222;border:1px solid rgba(255,255,255,.1);color:#aaa;width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:1.1rem;display:flex;align-items:center;justify-content:center;transition:all .2s; }
body.light-mode .modal-close { background:#eee;border:1px solid rgba(0,0,0,.1);color:#555; }
.modal-close:hover { background:#e87d8a;color:#fff;border-color:#e87d8a; }

/* ══════════════════════════════════════════
   READ CONFIRM POPUP — dark/light aware
══════════════════════════════════════════ */
.read-confirm-overlay { position:fixed;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(6px);z-index:9999;display:flex;align-items:center;justify-content:center;padding:1rem;opacity:0;pointer-events:none;transition:opacity .25s ease; }
.read-confirm-overlay.open { opacity:1;pointer-events:all; }
/* Dark (default) */
.read-confirm-box { background:#181818;border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:2rem 2rem 1.6rem;max-width:420px;width:100%;text-align:center;transform:translateY(20px) scale(.97);transition:transform .25s ease;box-shadow:0 24px 60px rgba(0,0,0,.8); }
.read-confirm-overlay.open .read-confirm-box { transform:translateY(0) scale(1); }
.read-confirm-icon  { font-size:2.4rem;margin-bottom:.7rem;display:block; }
.read-confirm-title { font-family:'Playfair Display',serif;font-size:1.1rem;font-weight:700;color:#f0ece4;margin-bottom:.5rem; }
.read-confirm-book  { font-family:'Playfair Display',serif;font-size:.88rem;font-style:italic;color:#e8c96d;margin-bottom:.5rem;display:block; }
.read-confirm-msg   { font-size:.82rem;color:#aaa;line-height:1.55;margin-bottom:1.2rem; }
.read-confirm-msg strong { color:#5ec4b6; }
.read-confirm-note  { font-size:.72rem;color:#555;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:.5rem .8rem;margin-bottom:1.2rem;line-height:1.5;text-align:left; }
.read-confirm-actions { display:flex;gap:.7rem; }
.read-confirm-yes { flex:1;background:linear-gradient(135deg,#5ec4b6,#3a9e96);color:#fff;font-family:'Nunito',sans-serif;font-weight:700;font-size:.85rem;padding:.62rem 1.2rem;border:none;border-radius:50px;cursor:pointer;transition:opacity .18s; }
.read-confirm-yes:hover { opacity:.85; }
.read-confirm-no  { flex:1;background:transparent;color:#aaa;font-family:'Nunito',sans-serif;font-weight:700;font-size:.85rem;padding:.62rem 1.2rem;border:1px solid rgba(255,255,255,.15);border-radius:50px;cursor:pointer;transition:border-color .18s; }
.read-confirm-no:hover { border-color:#e87d8a; }
/* Light mode */
body.light-mode .read-confirm-overlay { background:rgba(0,0,0,.45); }
body.light-mode .read-confirm-box     { background:#ffffff;border:1px solid rgba(0,0,0,.1);box-shadow:0 24px 60px rgba(0,0,0,.2); }
body.light-mode .read-confirm-title   { color:#111; }
body.light-mode .read-confirm-book    { color:#b8860b; }
body.light-mode .read-confirm-msg     { color:#444; }
body.light-mode .read-confirm-msg strong { color:#1a7a6a; }
body.light-mode .read-confirm-note    { color:#666;background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.1); }
body.light-mode .read-confirm-no      { color:#555;border:1px solid rgba(0,0,0,.2); }
body.light-mode .read-confirm-no:hover { border-color:#e87d8a; }

/* ══════════════════════════════════════════
   NEW FOLDER MODAL
══════════════════════════════════════════ */
.nf-bg  { position:fixed;inset:0;z-index:900;background:rgba(0,0,0,.65);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center; }
.nf-bg.open { display:flex; }
.nf-box { background:#1a1914;border:1px solid var(--border);border-radius:20px;padding:30px;width:100%;max-width:400px;animation:modalIn .25s ease; }
body.light-mode .nf-box { background:#f5f3ee; }
@keyframes modalIn { from{opacity:0;transform:scale(.95) translateY(8px)} to{opacity:1;transform:none} }
.nf-box h3      { font-family:'Playfair Display',serif;font-size:1.3rem;font-weight:700;margin:0 0 20px; }
.nf-box h3 span { color:var(--gold); }
.nf-inp { width:100%;padding:12px 16px;border-radius:12px;box-sizing:border-box;background:var(--card);border:1px solid var(--border);color:inherit;font-size:.95rem;font-family:inherit;outline:none;transition:border-color .15s; }
.nf-inp:focus { border-color:var(--gold); }
.nf-row { display:flex;gap:10px;margin-top:18px; }
.nf-create { flex:1;padding:12px 0;border:none;border-radius:12px;background:var(--gold);color:#1a1610;font-size:.9rem;font-weight:700;cursor:pointer;transition:opacity .15s,transform .1s; }
.nf-create:hover { opacity:.88;transform:translateY(-1px); }
.nf-cancel { padding:12px 20px;border:1px solid var(--border);border-radius:12px;background:transparent;color:inherit;font-size:.9rem;font-weight:600;cursor:pointer;transition:background .15s; }
.nf-cancel:hover { background:var(--border); }

/* ══════════════════════════════════════════
   TOAST
══════════════════════════════════════════ */
#sl-toast {
  position:fixed;bottom:1.5rem;left:50%;
  transform:translateX(-50%) translateY(60px);
  background:#181818;border:1px solid rgba(255,255,255,.12);
  color:#f0ece4;font-family:'Nunito',sans-serif;
  font-size:.85rem;font-weight:600;padding:.6rem 1.4rem;
  border-radius:50px;box-shadow:0 8px 24px rgba(0,0,0,.5);
  opacity:0;pointer-events:none;
  transition:transform .3s ease,opacity .3s ease;
  z-index:9998;white-space:nowrap;
}
body.light-mode #sl-toast { background:#fff;border:1px solid rgba(0,0,0,.12);color:#111; }
#sl-toast.show { transform:translateX(-50%) translateY(0);opacity:1; }

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width:640px) {
  .lib-hero  { padding:28px 22px; }
  .hero-stats{ gap:12px; }
  .hstat     { padding:10px 14px; }
  .lib-tabs  { top:56px;overflow-x:auto; }
  .books-grid{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px; }
}

/* ── MOBILE HERO FIX ── */
@media (max-width: 600px) {
  .lib-page {
    padding: 80px 12px 60px;
  }

  .lib-hero {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 20px;
    gap: 16px;
  }

  .hero-avatar {
    width: 52px;
    height: 52px;
    font-size: 1.3rem;
  }

  .hero-text {
    width: 100%;
  }

  .hero-title {
    font-size: 1.5rem;
  }

  .hero-sub {
    font-size: .82rem;
  }

  .hero-stats {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .hstat {
    padding: 10px 8px;
    text-align: center;
  }

  .hstat-val {
    font-size: 1.3rem;
  }

  .hstat-lbl {
    font-size: .55rem;
  }

  /* Fix overall page overflow */
  .lib-hero,
  .books-grid,
  .folders-row {
    overflow: hidden;
    max-width: 100%;
    box-sizing: border-box;
  }
}