:root {
  --twf-bg: #fff;
  --twf-primary: #c64b5f;
  --twf-radius: 10px;
  --twf-text: #222;
}

/* ===== Wrapper + Lightbox ===== */
.twf-catalogue-wrapper { text-align:center; margin: 30px auto; }
.twf-open-lightbox {
  background: var(--twf-primary); color:#fff; border:none;
  padding:12px 24px; border-radius:8px; font-size:1.05rem;
  cursor:pointer; transition: background .25s ease, transform .1s ease;
}
.twf-open-lightbox:hover { background:#a33d50; }
.twf-open-lightbox:active { transform: translateY(1px); }

.twf-lightbox {
  position:fixed; inset:0;
  background:rgba(0,0,0,0.82);
  display:flex; justify-content:center; align-items:center;
  z-index:9999;
}
.twf-lightbox-content {
  position:relative; background:#111; border-radius:12px; padding:18px;
  max-width:95%; max-height:90%; overflow:hidden;
  box-shadow: 0 20px 80px rgba(0,0,0,0.5);
}
.twf-close-lightbox {
  position:absolute; top:8px; right:12px;
  background:none; border:none; color:#fff; font-size:2rem; cursor:pointer;
  z-index:10000;
}

/* ===== External Menu ===== */
.twf-menu {
  background:#1c1c1c; color:#fff; padding:10px 14px; border-radius:10px;
  margin:0 0 12px 0; text-align:left;
}
.twf-menu h3 { margin:0 0 6px 0; font-size:1.1rem; font-weight:600; }
.twf-menu-list { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px; }
.twf-menu-item {
  background:#343434; color:#fff; padding:6px 10px; border-radius:7px;
  cursor:pointer; user-select:none; transition: background .2s ease, transform .1s ease;
}
.twf-menu-item:hover { background:#4a4a4a; }
.twf-menu-item:active { transform: translateY(1px); }

/* ===== Flipbook Core ===== */
.twf-flipbook-container { display:flex; justify-content:center; margin: 14px auto; }
.twf-flip-ready {
  border-radius: var(--twf-radius);
  background: var(--twf-bg);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  overflow: hidden; position: relative;
  width:900px; height:600px; /* matches JS defaults */
}

.twf-page {
  background: #fff;
  backface-visibility: hidden;
  transform-origin: left center;
}
.twf-page-inner { padding: 24px 28px; height:100%; box-sizing: border-box; }
.twf-shadow {
  position:absolute; inset:0;
  background: linear-gradient(to right, rgba(0,0,0,0.25), transparent 35%);
  opacity:0; transition: opacity .4s ease; border-radius:inherit;
}

/* ===== Navigation Buttons ===== */
.twf-next-btn, .twf-prev-btn {
  position:absolute; top:50%; transform:translateY(-50%);
  background: color-mix(in srgb, var(--twf-primary) 40%, transparent);
  border:none; color:#fff; font-size:2rem;
  width:40px; height:60px; border-radius:6px; cursor:pointer;
  transition: background .2s; z-index:5;
}
.twf-next-btn:hover, .twf-prev-btn:hover { background: var(--twf-primary); }
.twf-next-btn { right:10px; }
.twf-prev-btn { left:10px; }

/* ===== Page Footer / Page Numbers ===== */
.twf-footer {
  position:absolute; bottom:8px; left:0; right:0;
  text-align:center; font-size:12px; color:#666; pointer-events:none;
}

/* ===== Cover Page ===== */
.twf-page-cover { position:relative; color:#fff; }
.twf-cover-bg {
  position:absolute; inset:0; background-size:cover; background-position:center;
  filter: brightness(.7);
}
.twf-cover-inner {
  position:relative; display:flex; flex-direction:column; align-items:center;
  justify-content:center; height:100%;
}
.twf-cover-title { font-size: 42px; margin: 0 0 8px 0; letter-spacing: .5px; }
.twf-cover-subtitle { font-size: 18px; margin: 0; opacity:.9; }

/* ===== Contents Page ===== */
.twf-page-menu .twf-menu-title { margin-top:0; }
.twf-contents-list { list-style:none; padding:0; margin:12px 0 0 0; }
.twf-contents-list li {
  display:flex; align-items:center; gap:8px; justify-content: space-between;
  padding:6px 0; border-bottom:1px dotted #ccc;
}
.twf-contents-list .twf-toc-link {
  background:none; border:none; color: var(--twf-text); font-size:16px; cursor:pointer; padding:0;
}
.twf-dotlead { flex:1; border-bottom:1px dotted #aaa; margin: 0 8px; }

/* ===== Category Title Page ===== */
.twf-page-cat-title .twf-category-title {
  text-align:center; font-size: 28px; margin: 0; letter-spacing:.3px; color: var(--twf-text);
}

/* ===== Grid Page (8 items: 2 x 4) ===== */
.twf-grid {
  display:grid; grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 16px; height: 100%;
}
.twf-card {
  background:#fafafa; border:1px solid #eee; border-radius:10px; padding:10px;
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  text-align:center;
}
.twf-card-empty { background:transparent; border:none; }
.twf-card-imgwrap { width:100%; aspect-ratio: 4 / 3; overflow:hidden; border-radius:8px; background:#fff; display:flex; align-items:center; justify-content:center; }
.twf-card-imgwrap img { width:100%; height:100%; object-fit:cover; display:block; }
.twf-card-title { font-size: 14px; margin: 10px 0 10px; color: var(--twf-text); }
.twf-view-btn {
  display:inline-block; text-decoration:none;
  background: var(--twf-primary); color:#fff; padding:8px 12px; border-radius:8px;
  transition: transform .15s ease, opacity .15s ease, background .2s ease;
  font-size: 13px;
}
.twf-view-btn:hover { transform: translateY(-1px); opacity:.95; }

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .twf-flip-ready { width: 90vw; height: calc(90vw * 2/3); }
}