/* ================================================================
   FLIPBOOK — style.css  (v3)
   Premium dark/light-mode PDF magazine reader with 25+ features
   ================================================================ */

/* ── Force Hidden Elements ────────────────────────────────────── */
[hidden] {
  display: none !important;
}

/* ── Dark Theme Variables (default) ──────────────────────────── */
:root,
[data-theme="dark"] {
  --bg:         hsl(222, 28%,  6%);
  --bg-2:       hsl(222, 22%, 10%);
  --bg-3:       hsl(222, 18%, 14%);
  --bg-glass:   hsla(222, 22%, 11%, 0.88);

  --primary:    hsl(252, 100%, 72%);
  --primary-d:  hsl(252,  80%, 60%);
  --primary-g:  hsla(252, 100%, 70%, 0.28);

  --text:       hsl(220, 30%, 95%);
  --text-2:     hsl(220, 18%, 68%);
  --text-3:     hsl(220, 12%, 46%);

  --border:     hsl(222, 20%, 20%);
  --border-2:   hsl(222, 18%, 28%);

  --desk:       hsl(22, 18%,  7%);
  --desk-vignette: hsla(30, 40%, 16%, 0.6);

  --card-bg:    hsla(252, 16%, 10%, 0.55);
  --orb-1:      hsla(252, 75%, 38%, 0.22);
  --orb-2:      hsla(196, 80%, 38%, 0.18);
  --orb-3:      hsla(38,  80%, 38%, 0.14);
  --grid-color: hsla(252, 100%, 72%, 0.035);

  --shadow-book:
    drop-shadow(0 28px 60px rgba(0, 0, 0, 0.88))
    drop-shadow(0 8px  20px rgba(0, 0, 0, 0.55));

  --toast-bg:   hsla(222, 22%, 13%, 0.95);

  --dark-icon-display:  inline;
  --light-icon-display: none;
}

/* ── Light Theme Variables ────────────────────────────────────── */
[data-theme="light"] {
  --bg:         hsl(220, 30%, 96%);
  --bg-2:       hsl(220, 22%, 90%);
  --bg-3:       hsl(220, 18%, 84%);
  --bg-glass:   hsla(220, 28%, 94%, 0.92);

  --primary:    hsl(252, 80%, 58%);
  --primary-d:  hsl(252, 70%, 50%);
  --primary-g:  hsla(252, 80%, 58%, 0.22);

  --text:       hsl(222, 28%, 14%);
  --text-2:     hsl(222, 18%, 38%);
  --text-3:     hsl(222, 12%, 54%);

  --border:     hsl(222, 18%, 78%);
  --border-2:   hsl(222, 16%, 68%);

  --desk:       hsl(30, 30%, 82%);
  --desk-vignette: hsla(30, 40%, 60%, 0.3);

  --card-bg:    hsla(252, 10%, 94%, 0.7);
  --orb-1:      hsla(252, 75%, 70%, 0.18);
  --orb-2:      hsla(196, 80%, 70%, 0.14);
  --orb-3:      hsla(38,  80%, 70%, 0.12);
  --grid-color: hsla(252, 80%, 50%, 0.04);

  --shadow-book:
    drop-shadow(0 24px 50px rgba(0, 0, 0, 0.25))
    drop-shadow(0 8px  18px rgba(0, 0, 0, 0.15));

  --toast-bg:   hsla(220, 28%, 94%, 0.97);

  --dark-icon-display:  none;
  --light-icon-display: inline;
}

/* ── Desk Background Themes (HTML attributes) ──────────────────── */
html[data-desk="wood"] {
  --desk: radial-gradient(circle, hsl(20, 25%, 16%) 0%, hsl(20, 30%, 8%) 100%);
  --desk-vignette: hsla(20, 40%, 12%, 0.75);
}
html[data-theme="light"][data-desk="wood"] {
  --desk: radial-gradient(circle, hsl(30, 20%, 78%) 0%, hsl(30, 25%, 62%) 100%);
  --desk-vignette: hsla(30, 30%, 45%, 0.35);
}

html[data-desk="leather"] {
  --desk: radial-gradient(circle, hsl(32, 28%, 18%) 0%, hsl(32, 35%, 10%) 100%);
  --desk-vignette: hsla(32, 35%, 10%, 0.75);
}
html[data-theme="light"][data-desk="leather"] {
  --desk: radial-gradient(circle, hsl(32, 22%, 76%) 0%, hsl(32, 25%, 58%) 100%);
  --desk-vignette: hsla(32, 25%, 45%, 0.35);
}

html[data-desk="forest"] {
  --desk: radial-gradient(circle, hsl(140, 20%, 14%) 0%, hsl(140, 25%, 7%) 100%);
  --desk-vignette: hsla(140, 30%, 8%, 0.75);
}
html[data-theme="light"][data-desk="forest"] {
  --desk: radial-gradient(circle, hsl(130, 15%, 75%) 0%, hsl(130, 20%, 58%) 100%);
  --desk-vignette: hsla(130, 20%, 45%, 0.35);
}

html[data-desk="night"] {
  --desk: radial-gradient(circle, hsl(222, 30%, 11%) 0%, hsl(222, 45%, 4%) 100%);
  --desk-vignette: hsla(222, 35%, 2%, 0.8);
}
html[data-theme="light"][data-desk="night"] {
  --desk: radial-gradient(circle, hsl(220, 20%, 78%) 0%, hsl(220, 25%, 64%) 100%);
  --desk-vignette: hsla(220, 25%, 50%, 0.35);
}

html[data-desk="marble"] {
  --desk: radial-gradient(circle, hsl(0, 0%, 22%) 0%, hsl(0, 0%, 10%) 100%);
  --desk-vignette: hsla(0, 0%, 8%, 0.75);
}
html[data-theme="light"][data-desk="marble"] {
  --desk: radial-gradient(circle, hsl(0, 0%, 86%) 0%, hsl(0, 0%, 70%) 100%);
  --desk-vignette: hsla(0, 0%, 55%, 0.3);
}

/* ── Radius / Layout / Transitions ───────────────────────────── */
:root {
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 16px;
  --r-xl: 24px;

  --hdr-h:   54px;
  --ftr-h:   68px;
  --thumb-w: 240px;

  --t:  0.22s cubic-bezier(0.4, 0, 0.2, 1);
  --ts: 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Reset ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 15px;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  transition: background var(--ts), color var(--ts);
}

.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;
}

/* ── Screens ──────────────────────────────────────────────────── */
.screen {
  position: fixed; inset: 0;
  display: none;
}
.screen.active {
  display: flex;
  animation: screenIn 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes screenIn {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}

/* ================================================================
   TOAST NOTIFICATIONS
   ================================================================ */
.toast-container {
  position: fixed;
  bottom: 82px; left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex; flex-direction: column-reverse;
  gap: 8px; align-items: center;
  pointer-events: none;
  width: 90%; max-width: 420px;
}

.toast {
  background: var(--toast-bg);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  padding: 10px 18px;
  font-size: 0.86rem; color: var(--text);
  box-shadow: 0 8px 30px rgba(0,0,0,0.35);
  animation: toastIn 0.3s cubic-bezier(0.16,1,0.3,1) both;
  pointer-events: all;
  text-align: center;
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  justify-content: center;
  cursor: pointer;
}
.toast.toast-success { border-color: hsl(142, 60%, 40%); }
.toast.toast-error   { border-color: hsl(0, 70%, 55%); }

@keyframes toastIn {
  from { opacity: 0; transform: translateY(12px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(8px) scale(0.95); }
}
.toast.hiding { animation: toastOut 0.25s ease forwards; }

/* ================================================================
   LANDING SCREEN
   ================================================================ */
#screen-landing {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  overflow: hidden;
  transition: background var(--ts);
}

/* Animated background */
.landing-bg {
  position: absolute; inset: 0;
  pointer-events: none; overflow: hidden;
}

.orb {
  position: absolute; border-radius: 50%;
  filter: blur(90px);
  animation: orbFloat 10s ease-in-out infinite alternate;
}
.orb-1 {
  width: 680px; height: 680px;
  background: var(--orb-1);
  top: -260px; left: -160px;
  animation-delay: 0s;
}
.orb-2 {
  width: 540px; height: 540px;
  background: var(--orb-2);
  bottom: -190px; right: -120px;
  animation-delay: -4s;
}
.orb-3 {
  width: 410px; height: 410px;
  background: var(--orb-3);
  top: 35%; left: 55%;
  animation-delay: -7s;
}
@keyframes orbFloat {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(22px, -22px) scale(1.1); }
}

.grid-lines {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%,
               black 30%, transparent 100%);
}

/* Landing content */
.landing-content {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 24px;
  width: 100%; max-width: 620px;
}

/* Brand */
.brand { text-align: center; animation: slideUp 0.6s ease both; }

.brand-icon {
  display: block;
  font-size: 60px;
  margin-bottom: 14px;
  filter: drop-shadow(0 0 28px hsla(252, 100%, 72%, 0.55));
  animation: iconFloat 4s ease-in-out infinite;
}
@keyframes iconFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-9px); }
}

.brand-name {
  font-size: 3.4rem;
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  background: linear-gradient(
    135deg,
    hsl(252, 100%, 78%) 0%,
    hsl(196, 100%, 72%) 45%,
    hsl(38,  100%, 72%) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 12px;
}
.brand-pro {
  font-size: 1.6rem;
  background: var(--primary);
  color: var(--bg);
  padding: 2px 8px;
  border-radius: var(--r-sm);
  font-weight: 800;
  vertical-align: middle;
  margin-left: 4px;
  -webkit-text-fill-color: var(--bg);
}

.brand-tagline {
  font-size: 1.05rem;
  color: var(--text-2);
  font-weight: 400;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Drop Zone */
.drop-zone {
  width: 100%;
  border: 2px dashed var(--border-2);
  border-radius: var(--r-xl);
  background: var(--card-bg);
  backdrop-filter: blur(12px);
  padding: 40px 32px;
  cursor: pointer;
  outline: none;
  transition: all var(--ts);
  animation: slideUp 0.6s 0.08s ease both;
}
.drop-zone:hover,
.drop-zone:focus,
.drop-zone.drag-over {
  border-color: var(--primary);
  background: hsla(252, 22%, 13%, 0.75);
  box-shadow:
    0 0 0 1px var(--primary),
    0 0 50px var(--primary-g),
    inset 0 0 50px hsla(252, 100%, 70%, 0.04);
  transform: translateY(-3px);
}
[data-theme="light"] .drop-zone:hover,
[data-theme="light"] .drop-zone:focus,
[data-theme="light"] .drop-zone.drag-over {
  background: hsla(252, 22%, 92%, 0.9);
}
.drop-zone.drag-over .dz-icon { transform: scale(1.12) translateY(-5px); }

.dz-inner {
  display: flex; flex-direction: column;
  align-items: center; gap: 12px;
  text-align: center;
}

.dz-icon {
  color: var(--primary);
  width: 80px; height: 80px;
  transition: transform var(--t);
}
.dz-icon svg { width: 100%; height: 100%; }

.dz-title {
  font-size: 1.55rem; font-weight: 700;
  color: var(--text); line-height: 1.2;
}
.dz-sub {
  font-size: 0.88rem; color: var(--text-3);
  letter-spacing: 0.02em;
}

.dz-or {
  display: flex; align-items: center; gap: 14px;
  width: 100%; max-width: 220px;
  color: var(--text-3); font-size: 0.8rem;
}
.dz-or::before, .dz-or::after {
  content: ''; flex: 1;
  height: 1px; background: var(--border);
}

.btn-browse {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 30px;
  background: linear-gradient(135deg, var(--primary-d) 0%, hsl(196, 90%, 58%) 100%);
  color: #fff;
  border: none; border-radius: var(--r);
  font-family: inherit; font-size: 0.95rem; font-weight: 600;
  cursor: pointer;
  transition: all var(--t);
  box-shadow: 0 4px 22px hsla(252, 100%, 70%, 0.4);
}
.btn-browse:hover {
  transform: translateY(-2px);
  filter: brightness(1.12);
  box-shadow: 0 8px 32px hsla(252, 100%, 70%, 0.55);
}
.btn-browse:active { transform: translateY(0); filter: brightness(0.95); }

.dz-note {
  font-size: 0.76rem; color: var(--text-3);
}

/* Recent files section */
.recent-section {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px;
  animation: slideUp 0.6s 0.12s ease both;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.recent-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-2);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.recent-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.recent-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--t);
}
.recent-item:hover {
  border-color: var(--primary);
  background: var(--bg-glass);
}
.recent-name {
  font-size: 0.88rem;
  color: var(--text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 80%;
}
.recent-meta {
  font-size: 0.76rem;
  color: var(--text-3);
  white-space: nowrap;
}

.feature-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  animation: slideUp 0.6s 0.16s ease both;
  max-width: 520px;
}
.feat {
  padding: 6px 14px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 0.78rem; font-weight: 500;
  color: var(--text-2);
  backdrop-filter: blur(8px);
  transition: all var(--t);
  cursor: default;
}
.feat:hover {
  border-color: var(--primary-d);
  color: var(--primary);
}

/* Landing theme button */
.landing-theme-btn {
  position: absolute;
  top: 16px; right: 16px;
  width: 38px; height: 38px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--bg-2);
  cursor: pointer;
  display: grid; place-items: center;
  transition: all var(--t);
  z-index: 10;
}
.landing-theme-btn:hover {
  background: var(--bg-3);
  border-color: var(--border-2);
}

.ti-dark { display: var(--dark-icon-display); }
.ti-light { display: var(--light-icon-display); }

/* ================================================================
   LOADING SCREEN
   ================================================================ */
#screen-loading {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}

.loading-wrap {
  display: flex; flex-direction: column;
  align-items: center; gap: 22px;
  max-width: 400px; width: 100%;
  padding: 24px; text-align: center;
}

.loading-anim { margin-bottom: 4px; }
.load-book {
  position: relative;
  width: 72px; height: 88px; margin: auto;
}
.load-spine {
  position: absolute; left: 0; top: 0;
  width: 14px; height: 88px;
  background: linear-gradient(180deg, var(--primary-d), hsl(196, 90%, 58%));
  border-radius: 3px 0 0 3px;
  box-shadow: 0 0 20px var(--primary-g);
}
.load-page {
  position: absolute; left: 14px; top: 8px;
  width: 52px; height: 72px;
  border-radius: 0 6px 6px 0;
  transform-origin: left center;
  animation: pageFlip 1.6s ease-in-out infinite;
}
.lp1 { background: hsl(220,16%,90%); animation-delay: 0s;    }
.lp2 { background: hsl(220,14%,88%); animation-delay: 0.28s; }
.lp3 { background: hsl(220,12%,85%); animation-delay: 0.56s; }

@keyframes pageFlip {
  0%   { transform: rotateY(0deg);    opacity: 1; }
  40%  { transform: rotateY(-80deg);  opacity: 0.6; }
  80%  { transform: rotateY(-160deg); opacity: 0.1; }
  100% { transform: rotateY(-180deg); opacity: 0; }
}

.loading-title {
  font-size: 1.45rem; font-weight: 700;
  background: linear-gradient(135deg, var(--text) 0%, var(--text-2) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.loading-fname {
  font-size: 0.84rem; color: var(--text-3);
  max-width: 320px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.progress-block { width: 100%; }
.progress-track {
  width: 100%; height: 6px;
  background: var(--bg-3);
  border-radius: 100px; overflow: hidden;
  margin-bottom: 10px;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary-d), hsl(196, 90%, 62%));
  border-radius: 100px;
  transition: width 0.3s ease;
  box-shadow: 0 0 14px var(--primary-g);
}
.progress-meta {
  display: flex; justify-content: space-between;
  font-size: 0.82rem; color: var(--text-3);
}

/* ================================================================
   VIEWER SCREEN
   ================================================================ */
#screen-viewer {
  flex-direction: column;
  background: var(--desk);
  transition: background var(--ts);
  position: relative;
}

/* ── Header ── */
.v-header {
  height: var(--hdr-h);
  background: var(--bg-glass);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 8px;
  flex-shrink: 0; z-index: 200;
  transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), background var(--ts), border-color var(--ts);
  gap: 4px;
}

.vh-left, .vh-right {
  display: flex; align-items: center; gap: 2px;
  flex: 1;
}
.vh-right { justify-content: flex-end; }
.vh-center { flex: 0 0 auto; }

.hbtn {
  width: 34px; height: 34px;
  border: none; border-radius: var(--r-sm);
  background: transparent; color: var(--text-2);
  cursor: pointer;
  display: grid; place-items: center;
  transition: all var(--t);
  flex-shrink: 0;
}
.hbtn:hover   { background: var(--bg-3); color: var(--text); }
.hbtn.pressed {
  background: hsla(252, 80%, 60%, 0.22);
  color: var(--primary);
  border: 1px solid var(--primary-g);
}

.zoom-lbl-btn { width: auto; padding: 0 6px; }
#zoom-lbl {
  font-size: 0.76rem; font-weight: 600; color: var(--text-2);
  min-width: 36px; text-align: center; white-space: nowrap;
}

.v-filename {
  font-size: 0.83rem; font-weight: 500; color: var(--text-2);
  max-width: 150px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-left: 4px;
}

.page-badge {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 16px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 0.86rem; font-weight: 600; color: var(--text);
  transition: background var(--ts), border-color var(--ts);
}
.pg-sep { font-size: 0.72rem; color: var(--text-3); font-weight: 400; }
.vh-div { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }

/* ── Body ── */
.v-body {
  flex: 1;
  display: flex;
  overflow: hidden;
  position: relative;
}

/* ── Side Panels (TOC, bookmarks, thumbnails) ── */
.side-panel {
  width: var(--thumb-w);
  flex-shrink: 0;
  background: var(--bg-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  transform: translateX(calc(-1 * var(--thumb-w)));
  transition: transform var(--ts) cubic-bezier(0.16, 1, 0.3, 1), background var(--ts), border-color var(--ts);
  z-index: 180;
  position: absolute;
  top: 0; left: 0; bottom: 0;
}
.side-panel.open { transform: translateX(0); }

.sp-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sp-title {
  font-size: 0.78rem; font-weight: 700; color: var(--text-2);
  text-transform: uppercase; letter-spacing: 0.09em;
}
.sp-close {
  background: none; border: none;
  color: var(--text-3); font-size: 14px;
  cursor: pointer; padding: 4px 6px;
  border-radius: var(--r-sm);
  transition: all var(--t); line-height: 1;
}
.sp-close:hover { color: var(--text); background: var(--bg-3); }

.sp-scroll {
  flex: 1; overflow-y: auto; padding: 12px;
}
.sp-scroll::-webkit-scrollbar { width: 4px; }
.sp-scroll::-webkit-scrollbar-track { background: transparent; }
.sp-scroll::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; }

.sp-empty {
  text-align: center;
  color: var(--text-3);
  font-size: 0.86rem;
  padding: 32px 16px;
  line-height: 1.5;
}
.sp-empty kbd {
  background: var(--bg-3);
  padding: 2px 5px;
  border-radius: 3px;
  border: 1px solid var(--border);
  font-family: monospace;
}

.sp-footer {
  padding: 12px;
  border-top: 1px solid var(--border);
  background: var(--bg-3);
  flex-shrink: 0;
}
.sp-footer-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 12px;
  background: var(--primary-d);
  color: #fff;
  border: none; border-radius: var(--r-sm);
  font-family: inherit; font-size: 0.88rem; font-weight: 600;
  cursor: pointer;
  transition: filter var(--t);
}
.sp-footer-btn:hover { filter: brightness(1.12); }

/* Thumbnails list style (override panel for thumbs grid) */
#panel-thumbs .sp-scroll {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-content: start;
}

.th-item {
  cursor: pointer;
  border-radius: var(--r-sm);
  border: 2px solid transparent;
  background: var(--bg-3);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: all var(--t);
}
.th-item:hover {
  border-color: var(--primary-d);
  transform: scale(1.04);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.th-item.active {
  border-color: var(--primary);
  box-shadow: 0 0 14px var(--primary-g);
}
.th-img { width: 100%; display: block; object-fit: contain; }
.th-num {
  font-size: 0.64rem; text-align: center;
  color: var(--text-3); padding: 3px 0 4px;
  font-weight: 500;
}

/* TOC (Table of Contents) List Styling */
.toc-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.toc-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  font-size: 0.86rem;
  color: var(--text-2);
  cursor: pointer;
  transition: all var(--t);
  text-decoration: none;
}
.toc-item:hover {
  background: var(--bg-3);
  color: var(--text);
}
.toc-item.active {
  background: var(--primary-g);
  color: var(--primary);
  font-weight: 600;
}
.toc-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-grow: 1;
}
.toc-page {
  font-size: 0.78rem;
  color: var(--text-3);
  margin-left: 8px;
  flex-shrink: 0;
}

/* Bookmarks Styling */
.bkm-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 0.86rem;
  gap: 8px;
}
.bkm-name {
  color: var(--text);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  font-weight: 500;
}
.bkm-name:hover {
  color: var(--primary);
}
.bkm-delete {
  background: transparent;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--r-sm);
  transition: all var(--t);
  line-height: 1;
}
.bkm-delete:hover {
  color: hsl(0, 80%, 60%);
  background: hsla(0, 80%, 60%, 0.1);
}

/* ── Search Panel (Slides Down) ── */
.search-panel {
  position: absolute;
  top: var(--hdr-h); left: 0; right: 0;
  background: var(--bg-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  z-index: 190;
  display: flex; flex-direction: column;
  transform: translateY(-100%);
  transition: transform var(--ts) cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.search-panel:not([hidden]) {
  transform: translateY(0);
  pointer-events: auto;
}
.search-inner {
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--bg-3);
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  padding: 0 14px;
  transition: border-color var(--t);
}
.search-input-wrap:focus-within {
  border-color: var(--primary);
}
.search-input-wrap svg {
  color: var(--text-3);
  margin-right: 10px;
  flex-shrink: 0;
}
.search-input {
  flex: 1;
  background: transparent;
  border: none;
  height: 42px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  outline: none;
}
.search-clear {
  background: transparent;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  padding: 6px;
  font-size: 12px;
  border-radius: 50%;
  transition: all var(--t);
}
.search-clear:hover {
  background: var(--border);
  color: var(--text);
}
.search-results {
  max-height: 240px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.search-item {
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--bg-2);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all var(--t);
}
.search-item:hover {
  border-color: var(--primary-d);
  background: var(--bg-3);
}
.search-item-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 4px;
}
.search-item-text {
  font-size: 0.86rem;
  color: var(--text-2);
  line-height: 1.4;
}
.search-item-text mark {
  background: var(--primary-g);
  color: var(--text);
  font-weight: 600;
  padding: 0 2px;
  border-radius: 2px;
}

/* ── Book Stage ── */
.book-stage {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  position: relative;
  background: var(--desk);
  transition: background var(--ts);
}

/* Vignette overlay */
.book-stage::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 90% 50% at 50% 0%,
      var(--desk-vignette) 0%, transparent 70%),
    radial-gradient(ellipse 90% 40% at 50% 100%,
      rgba(0,0,0,0.2) 0%, transparent 60%);
  pointer-events: none; z-index: 0;
}

/* Floating Navigation Arrows */
.float-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--bg-glass);
  border: 1px solid var(--border);
  color: var(--text-2);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all var(--t);
  z-index: 90;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.float-nav:hover {
  background: var(--bg-3);
  color: var(--text);
  border-color: var(--primary);
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.float-nav.fn-prev { left: 16px; }
.float-nav.fn-next { right: 16px; }

/* Resume Reading Banner */
.resume-banner {
  position: absolute;
  top: 16px; left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  background: var(--bg-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  padding: 10px 16px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.35);
  animation: bannerSlide 0.4s cubic-bezier(0.16,1,0.3,1) both;
  white-space: nowrap;
}
.resume-banner[hidden] { display: none; }

@keyframes bannerSlide {
  from { opacity: 0; transform: translateX(-50%) translateY(-16px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.resume-icon { font-size: 18px; }
.resume-text { font-size: 0.88rem; color: var(--text-2); }
.resume-yes, .resume-no {
  padding: 5px 12px;
  border-radius: var(--r-sm);
  border: none; cursor: pointer;
  font-family: inherit; font-size: 0.82rem; font-weight: 600;
  transition: all var(--t);
}
.resume-yes {
  background: var(--primary-d);
  color: #fff;
}
.resume-yes:hover { filter: brightness(1.12); }
.resume-no {
  background: var(--bg-3);
  color: var(--text-2);
  border: 1px solid var(--border);
}
.resume-no:hover { color: var(--text); background: var(--border); }

/* Auto-play Timer Bar */
.autoplay-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: hsla(252, 100%, 72%, 0.1);
  z-index: 120;
}
.autoplay-fill {
  height: 100%;
  width: 0%;
  background: var(--primary);
  box-shadow: 0 0 8px var(--primary-g);
}

/* Floating Sticky Note Indicator */
.note-indicator {
  position: absolute;
  top: 16px;
  right: 16px;
  background: hsl(45, 100%, 55%);
  color: hsl(45, 100%, 5%);
  border: none;
  border-radius: 100px;
  padding: 6px 14px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  z-index: 150;
  transition: all var(--t);
  animation: bounce 2s infinite;
  display: flex;
  align-items: center;
  gap: 4px;
}
.note-indicator:hover {
  transform: scale(1.08);
  background: hsl(45, 100%, 65%);
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.book-desk {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  padding: 22px;
}

.flipbook-wrap {
  transform-origin: center center;
  transition: transform var(--ts);
  filter: var(--shadow-book);
}

/* Cinematic book open animation */
.flipbook-wrap.opening {
  animation: bookOpen 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes bookOpen {
  0% { opacity: 0; transform: scale(0.8) rotateY(-18deg); }
  100% { opacity: 1; transform: scale(1) rotateY(0deg); }
}

/* Comfort reading overlays */
.read-sepia {
  filter: sepia(0.55) contrast(0.92) brightness(0.95) !important;
}
.read-night {
  filter: invert(0.9) hue-rotate(180deg) brightness(0.85) contrast(1.05) !important;
}

/* Swipe Hint (mobile) */
.swipe-hint {
  position: absolute;
  bottom: 16px; left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  background: var(--bg-glass);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 6px 16px;
  font-size: 0.78rem; color: var(--text-3);
  animation: fadeOut 0.5s 4s ease forwards;
  pointer-events: none;
}
@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* Exit Presentation Mode */
.present-exit {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(0,0,0,0.65);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  border-radius: var(--r-sm);
  padding: 8px 16px;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 6px;
  backdrop-filter: blur(8px);
  transition: all var(--t);
}
.present-exit:hover {
  background: rgba(0,0,0,0.85);
  border-color: #fff;
}

/* ── Reading Progress Strip (Very Bottom) ── */
.reading-progress {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 4px;
  background: var(--border);
  z-index: 220;
  transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
}
.reading-fill {
  height: 100%;
  width: 0%;
  background: var(--primary);
  transition: width 0.22s ease;
}

/* ── Footer ── */
.v-footer {
  height: var(--ftr-h);
  background: var(--bg-glass);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  gap: 10px; padding: 0 20px;
  flex-shrink: 0; z-index: 200;
  transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), background var(--ts), border-color var(--ts);
}

.nbtn {
  width: 38px; height: 38px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--bg-2);
  color: var(--text-2);
  cursor: pointer;
  display: grid; place-items: center;
  transition: all var(--t);
}
.nbtn:hover:not(:disabled) {
  border-color: var(--border-2);
  background: var(--bg-3);
  color: var(--text);
}
.nbtn.nbtn-primary {
  width: 48px; height: 48px;
  background: linear-gradient(135deg, var(--primary-d), hsl(196, 90%, 58%));
  border-color: transparent; color: #fff;
  box-shadow: 0 4px 18px hsla(252, 100%, 70%, 0.38);
}
.nbtn.nbtn-primary:hover:not(:disabled) {
  transform: scale(1.08);
  filter: brightness(1.12);
  box-shadow: 0 6px 26px hsla(252, 100%, 70%, 0.55);
}
.nbtn:disabled { opacity: 0.26; cursor: not-allowed; }
.nbtn.nbtn-sm {
  width: 32px;
  height: 32px;
  font-size: 14px;
}

.jump-group {
  display: flex; align-items: center; gap: 7px;
  padding: 0 10px;
}
.jump-txt {
  font-size: 0.84rem; color: var(--text-3); white-space: nowrap;
}
.jump-txt strong { color: var(--text-2); font-weight: 600; }

.jump-input {
  width: 54px; padding: 6px 8px;
  background: var(--bg-3);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: inherit; font-size: 0.9rem; font-weight: 600;
  text-align: center; outline: none;
  transition: border-color var(--t), background var(--ts), color var(--ts);
  -moz-appearance: textfield;
}
.jump-input::-webkit-outer-spin-button,
.jump-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.jump-input:focus { border-color: var(--primary); }

.speed-select {
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--text-2);
  border-radius: var(--r-sm);
  padding: 6px 8px;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 500;
  outline: none;
  cursor: pointer;
  transition: all var(--t);
}
.speed-select:hover {
  color: var(--text);
  border-color: var(--border-2);
}

/* Auto-hide Toolbar State */
#screen-viewer.toolbar-hidden .v-header {
  transform: translateY(-100%);
}
#screen-viewer.toolbar-hidden .v-footer {
  transform: translateY(100%);
}
#screen-viewer.toolbar-hidden .reading-progress {
  transform: translateY(4px);
}
#screen-viewer.toolbar-hidden .side-panel {
  top: 0;
  bottom: 0;
}

/* ================================================================
   MODALS & POPUPS
   ================================================================ */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 900;
  animation: fadeIn 0.28s ease both;
}

.modal {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  z-index: 1000; padding: 20px;
  overflow-y: auto;
  pointer-events: none;
}
.modal:not([hidden]) {
  pointer-events: auto;
  display: grid;
}

.modal-box {
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  width: 100%; max-width: 480px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
  overflow: hidden;
  display: flex; flex-direction: column;
  animation: modalIn 0.38s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.modal-wide { max-width: 680px; }

@keyframes modalIn {
  from { opacity: 0; transform: scale(0.93) translateY(12px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal-head {
  padding: 16px 20px;
  font-size: 1.15rem; font-weight: 700;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px;
}
.modal-body {
  padding: 20px;
  overflow-y: auto;
  max-height: 70vh;
}
.modal-foot {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 10px;
  background: var(--bg-3);
}

.modal-desc {
  font-size: 0.88rem; color: var(--text-2);
  margin-bottom: 12px; line-height: 1.5;
}
.modal-input {
  width: 100%; padding: 10px 14px;
  background: var(--bg-3); border: 1px solid var(--border-2);
  border-radius: var(--r); color: var(--text);
  font-family: inherit; font-size: 0.95rem; outline: none;
  transition: border-color var(--t);
}
.modal-input:focus { border-color: var(--primary); }
.modal-error {
  color: hsl(0, 80%, 62%);
  font-size: 0.8rem; margin-top: 8px;
  font-weight: 500;
}

.modal-btn {
  padding: 8px 18px; border: none; border-radius: var(--r-sm);
  font-family: inherit; font-size: 0.88rem; font-weight: 600;
  cursor: pointer; transition: all var(--t);
}
.modal-btn-cancel { background: transparent; color: var(--text-2); border: 1px solid var(--border); }
.modal-btn-cancel:hover { background: var(--bg-3); color: var(--text); }
.modal-btn-primary { background: var(--primary-d); color: #fff; }
.modal-btn-primary:hover { filter: brightness(1.12); }
.modal-btn.danger {
  background: hsla(0, 80%, 60%, 0.12);
  color: hsl(0, 80%, 65%);
  border: 1px solid hsla(0, 80%, 60%, 0.25);
}
.modal-btn.danger:hover {
  background: hsl(0, 80%, 60%);
  color: #fff;
}

/* ── Share Modal Layout ── */
.share-layout { display: flex; gap: 24px; }
.share-left { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.share-right {
  width: 180px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  border-left: 1px solid var(--border);
  padding-left: 24px;
}
.share-label {
  font-size: 0.76rem; font-weight: 700; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.05em;
  display: block; margin-bottom: 4px;
}
.share-url-row { display: flex; gap: 8px; }
.share-url-input {
  flex: 1; padding: 8px 12px;
  background: var(--bg-3); border: 1px solid var(--border-2);
  border-radius: var(--r-sm); color: var(--text-2);
  font-size: 0.85rem; font-family: monospace; outline: none;
}
.share-copy-btn {
  padding: 8px 14px;
  background: var(--bg-3); border: 1px solid var(--border-2);
  border-radius: var(--r-sm); color: var(--text);
  font-family: inherit; font-size: 0.85rem; font-weight: 600;
  cursor: pointer; transition: all var(--t);
  white-space: nowrap;
}
.share-copy-btn:hover { border-color: var(--primary); color: var(--primary); }
.share-copy-btn.danger:hover { border-color: hsl(0, 80%, 60%); color: hsl(0, 80%, 60%); }

.share-social { display: flex; flex-wrap: wrap; gap: 6px; }
.soc-btn {
  padding: 6px 12px; border-radius: var(--r-sm); border: none;
  font-size: 0.76rem; font-weight: 600; color: #fff;
  cursor: pointer; transition: opacity var(--t);
}
.soc-btn:hover { opacity: 0.85; }
.soc-wa { background: #25D366; }
.soc-tw { background: #1DA1F2; }
.soc-fb { background: #1877F2; }
.soc-li { background: #0077B5; }
.soc-em { background: #EA4335; }

.embed-code {
  width: 100%; background: var(--bg-3); border: 1px solid var(--border-2);
  border-radius: var(--r-sm); color: var(--text-3);
  font-family: monospace; font-size: 0.76rem; padding: 8px;
  resize: none; outline: none;
}
.share-pwd-section { border-top: 1px solid var(--border); padding-top: 14px; }
.pwd-row { display: flex; gap: 8px; }

.qr-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.qr-img {
  width: 130px; height: 130px;
  background: #fff; padding: 6px;
  border-radius: var(--r-sm);
  object-fit: contain;
}
.qr-note { font-size: 0.74rem; color: var(--text-3); text-align: center; }

/* ── Keyboard Shortcuts Help Modal ── */
.shortcut-grid {
  display: grid; grid-template-columns: auto 1fr;
  gap: 8px 16px; align-items: center;
  max-height: 45vh; overflow-y: auto;
  padding-right: 6px;
}
.shortcut-grid kbd {
  background: var(--bg-3); border: 1px solid var(--border-2);
  border-radius: var(--r-sm); padding: 3px 7px;
  font-family: monospace; font-size: 0.82rem; font-weight: 700;
  color: var(--primary); text-align: center;
  box-shadow: 0 1.5px 0 var(--border);
  min-width: 48px;
}
.shortcut-grid span { font-size: 0.86rem; color: var(--text-2); }

/* ── Note Textarea ── */
.note-textarea {
  width: 100%; padding: 12px;
  background: var(--bg-3); border: 1px solid var(--border-2);
  border-radius: var(--r); color: var(--text);
  font-family: inherit; font-size: 0.92rem; outline: none;
  resize: vertical;
}

/* ── Print Modal Options ── */
.print-options { display: flex; flex-direction: column; gap: 12px; }
.radio-row { display: flex; align-items: center; gap: 8px; font-size: 0.92rem; cursor: pointer; }
.print-range-inputs { display: flex; gap: 16px; margin-left: 24px; transition: opacity var(--t); }
.print-range-inputs[disabled] { opacity: 0.35; pointer-events: none; }
.range-num { width: 70px; padding: 6px 10px; background: var(--bg-3); border: 1px solid var(--border-2); border-radius: var(--r-sm); color: var(--text); text-align: center; }

/* ── Theme Picker Popup ── */
.theme-picker {
  position: absolute;
  top: calc(var(--hdr-h) + 4px);
  right: 64px;
  background: var(--bg-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 8px; z-index: 999;
  display: flex; flex-direction: column; gap: 4px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
  width: 152px;
}
.theme-option {
  padding: 8px 12px; font-size: 0.84rem; font-weight: 500;
  color: var(--text-2); cursor: pointer;
  border-radius: var(--r-sm); transition: all var(--t);
  display: flex; align-items: center; gap: 6px;
}
.theme-option:hover { background: var(--bg-3); color: var(--text); }
.theme-option.active { background: var(--primary-g); color: var(--primary); font-weight: 600; }

/* ── Presentation Mode Overlay ── */
body.presentation-mode {
  background: #000 !important;
}
body.presentation-mode .v-header,
body.presentation-mode .v-footer,
body.presentation-mode .side-panel,
body.presentation-mode .reading-progress {
  display: none !important;
}
body.presentation-mode .book-stage {
  background: #000 !important;
  height: 100vh;
}
body.presentation-mode .float-nav {
  opacity: 0.15;
}
body.presentation-mode .float-nav:hover {
  opacity: 0.8;
}

/* ================================================================
   RESPONSIVE DESIGN
   ================================================================ */
@media (max-width: 768px) {
  .brand-name      { font-size: 2.8rem; }
  .brand-pro       { font-size: 1.3rem; }
  .v-filename      { max-width: 90px; }
  .jump-group      { display: none; }
  :root            { --thumb-w: 180px; }
  #panel-thumbs .sp-scroll { grid-template-columns: 1fr; }
  .vh-div          { display: none; }
  .float-nav       { display: none !important; } /* Use swipe on mobile */
  
  .hbtn            { width: 38px; height: 38px; }
  .nbtn            { width: 44px; height: 44px; }
  .nbtn.nbtn-primary { width: 52px; height: 52px; }
}

@media (max-width: 480px) {
  .brand-name { font-size: 2.2rem; }
  .drop-zone  { padding: 28px 20px; }
  .dz-title   { font-size: 1.25rem; }
  .feat       { font-size: 0.72rem; }
  
  .v-filename { display: none; }
  .vh-right .vh-div:nth-of-type(2),
  .vh-right .hbtn:nth-of-type(1), /* sound */
  .vh-right .hbtn:nth-of-type(2), /* autoplay */
  .vh-right .hbtn:nth-of-type(4), /* print */
  .vh-right .hbtn:nth-of-type(5)  /* zoom-out */ {
    display: none !important;
  }
}

/* ── Print Styles ─────────────────────────────────────────────── */
@media print {
  body > *:not(#print-frame) { display: none; }
}