/* =======================================================
   lu_main.css — 心一阁 Complete Stylesheet
   Merged from lu_v009.css (base framework) and
   lu_v010.css (classic design layer + Vue fixes).
   Requires lu_main.js (Vue 3) for reactive dropdown state.
   ======================================================= */

/* --- Document root ------------------------------------- */
html { -ms-text-size-adjust:100%; -moz-text-size-adjust:100%; -webkit-text-size-adjust:100% }
body { margin:0; padding:0; min-height:100% }

/* --- Typography ---------------------------------------- */
body {
  font-family: 'LXGW WenKai', 'Songti SC', 'SimSun', '宋体', Georgia, serif;
  letter-spacing: 0.04em;
  line-height: 1.9;
}

/* =======================================================
   COLOUR THEMES
   Each theme sets: body bg/color, bar, sidebar, panels,
   shu-text, overflow-panel, and interactive hover states.
   ======================================================= */

/* Chang Shi Yue Ye */
body.changshiyueye { color:#eef7f2; background:rgb(41,41,41); }
body.changshiyueye #maintext { color:#fcc307; }
body.changshiyueye .lu-bar { color:#eef7f2; background:rgb(61,61,61); }
body.changshiyueye .lu-shu-text { color:#eef7f2; }
@media only screen and (max-width:600px) { body.changshiyueye .lu-shu-text:hover { outline:1px solid rgba(255,255,255,0.65); } }
@media only screen and (min-width:601px) { body.changshiyueye .lu-shu-text:hover { background-color:rgba(255,255,255,0.15) } }
body.changshiyueye .lu-sidebar { color:#eef7f2; background:rgb(61,61,61); }
body.changshiyueye .lu-themebar { color:#eef7f2; background:rgb(61,61,61); }
body.changshiyueye .lu-pagebar { color:#eef7f2; background:rgb(61,61,61); }
body.changshiyueye .lu-searchbar { color:#eef7f2; background:rgb(61,61,61); }
body.changshiyueye .lu-langbar { color:#eef7f2; background:rgb(61,61,61); }
body.changshiyueye .lu-overflow-panel { color:#eef7f2; background:rgb(61,61,61); }
body.changshiyueye th:hover { background-color:rgba(255,164,0,0.3) }
body.changshiyueye td:hover { background-color:rgba(255,164,0,0.3) }
body.changshiyueye .lu-card,
body.changshiyueye .lu-card-2,
body.changshiyueye .lu-card-4 { box-shadow:0 2px 5px 0 rgba(238,247,242,0.8),0 2px 10px 0 rgba(238,247,242,0.8) }
body.changshiyueye .lu-create-modal { color:#eef7f2; background:rgb(51,51,51); }

/* Hei Bai Tian Di */
body.heibaitiandi { color:black; background:white; }
body.heibaitiandi #maintext { color:#ffa400 }
body.heibaitiandi .lu-shu-text { color:black }
@media only screen and (max-width:600px) { body.heibaitiandi .lu-shu-text:hover { outline:1px solid rgba(255,164,0,1); } }
@media only screen and (min-width:601px) { body.heibaitiandi .lu-shu-text:hover { background-color:rgba(255,164,0,0.3) } }
body.heibaitiandi .lu-bar { color:black; background:rgb(241,241,241); }
body.heibaitiandi .lu-sidebar { color:black; background:rgb(241,241,241); }
body.heibaitiandi .lu-themebar { color:black; background:rgb(241,241,241); }
body.heibaitiandi .lu-pagebar { color:black; background:rgb(241,241,241); }
body.heibaitiandi .lu-searchbar { color:black; background:rgb(241,241,241); }
body.heibaitiandi .lu-langbar { color:black; background:rgb(241,241,241); }
body.heibaitiandi .lu-overflow-panel { color:black; background:rgb(241,241,241); }
body.heibaitiandi .lu-create-modal  { color:black; background:rgb(241,241,241); }
@media only screen and (max-width:600px) { body.heibaitiandi .lu-search-text:hover { border-style:solid; border-color:rgba(255,164,0,1) } }
@media only screen and (min-width:601px) { body.heibaitiandi .lu-search-text:hover { background-color:rgba(255,164,0,0.3) } }
body.heibaitiandi th:hover { background-color:rgba(255,164,0,0.3) }
body.heibaitiandi td:hover { background-color:rgba(255,164,0,0.3) }

/* =======================================================
   LAYOUT
   ======================================================= */
#wrapper { padding:45px 0; top:0; bottom:0; left:0; right:0; }
#content { min-height:85vh; }
header { height:45px; margin-top:-45px; }
footer { height:45px; margin-bottom:-45px; }
.lu-pagination { display:block; margin-top:45px; }
.lu-container { margin:8px; padding:8px; }

/* =======================================================
   BUTTONS
   ======================================================= */
.lu-button { border:none; padding:8px 16px; display:inline-block; vertical-align:middle;
  overflow:hidden; text-decoration:none; color:inherit; background-color:inherit;
  text-align:center; cursor:pointer; white-space:normal;
  -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
@media (hover:hover) {
  .lu-button:hover { color:#f43e06; background-color:#f1f0ed }
  .lu-link:hover   { color:#f43e06; background-color:#f1f0ed }
}

/* =======================================================
   NAVBAR
   ======================================================= */
.lu-bar {
  width:100%; height:43px; position:fixed; right:0; border-style:ridge;
  letter-spacing:0.05em;
  white-space:nowrap; overflow:visible;
  z-index:20;  /* above position:relative content (lu-shu-card) */
}
.lu-bar .lu-bar-item { width:auto; border:none; outline:0 }
.lu-bar > .lu-right-bar-item { width:auto; border:none; display:block; outline:0; float:right; }

/* Counteract body line-height:1.9 so items fit the 43px bar */
.lu-bar .lu-bar-item,
.lu-bar > .lu-right-bar-item {
  line-height:43px; padding-top:0; padding-bottom:0;
  height:43px; box-sizing:border-box;
  white-space:nowrap; vertical-align:top;
}
.lu-bar .lu-padding-top { padding-top:0; }

/* Toolbar secondary group: always inline in the bar */
.lu-bar-secondary { display:inline-block; vertical-align:top; white-space:nowrap; }

/* Overflow ⋯ button: hidden by default on every page and every screen width.
   Specificity must beat .lu-dropdown-anchor (0-0-1-0) which also sets
   display:inline-block and appears later in this file.
   .lu-bar .lu-overflow-anchor = 0-0-2-0 > 0-0-1-0 → always wins. */
.lu-bar .lu-overflow-anchor { display:none; }

/* On shu.html (body.lu-has-secondary) at ≤390px, secondary items risk
   overflowing the bar so we hide them and reveal ⋯ instead.
   Specificity 0-0-3-1 beats the hide rule above (0-0-2-0). */
@media only screen and (max-width:520px) {
  body.lu-has-secondary .lu-bar-secondary             { display:none; }
  body.lu-has-secondary .lu-bar .lu-overflow-anchor   { display:inline-block; vertical-align:top; }
}

/* Modest padding reduction on screens ≤580px keeps all bar items readable */
@media only screen and (max-width:580px) {
  .lu-bar .lu-bar-item,
  .lu-bar > .lu-right-bar-item { padding-left:10px; padding-right:10px; }
}

/* =======================================================
   SIDEBAR
   --sidebar-width is set by syncSidebarWidth() in lu_main.js
   which measures the natural text width and clamps it.
   Fallback value (200px) shows before JS runs.
   ======================================================= */
:root { --sidebar-width: 200px; }

/* Mobile: sidebar slides over content — no layout shift needed */
@media only screen and (max-width:600px) {
  .lu-sidebar {
    display:none;
    width: min(max-content, 80vw); /* opens at natural text width, max 80vw */
    max-width: 320px;
    height:93%; position:fixed!important; top:45px; overflow:auto; border-style:ridge;
  }
  .lu-main-container { margin-left:inherit; }
}

/* Desktop: sidebar and main content share the same --sidebar-width variable
   so they always match regardless of content length. */
@media only screen and (min-width:601px) {
  .lu-sidebar {
    display:block;
    width: var(--sidebar-width);
    height:93%; position:fixed!important; top:45px; overflow:auto; border-style:ridge;
  }
  .lu-main-container { margin-left: var(--sidebar-width); }
}

.lu-sidebar {
  font-size:0.94em; letter-spacing:0.06em; line-height:1.4;
  z-index:15;  /* above page content, below bar (20) */
}
.lu-sidebar > div > a.lu-button {
  border-bottom:1px solid rgba(128,128,128,0.18);
  width:100%; box-sizing:border-box;
  display:block; padding-top:5px; padding-bottom:5px;
}
.lu-smline { width:100%; text-align:left; height:0.1px; background-color:rgba(255,255,255,0.3) }
.lu-shenming { color:lightgray; text-align:left; bottom:0vh; position:relative }

/* =======================================================
   DROPDOWN ANCHOR — wraps each trigger + panel pair
   position:relative makes it the containing block for
   the absolutely positioned panel inside it.
   ======================================================= */
.lu-dropdown-anchor {
  display:inline-block; position:relative; height:43px; vertical-align:top;
}

/* =======================================================
   DROPDOWN PANELS — themebar, langbar
   display is omitted here; style="display:none" in HTML
   provides initial state; Vue v-show manages visibility.
   ======================================================= */
.lu-themebar {
  position:absolute!important; margin-left:0; margin-top:0; z-index:1; border-style:ridge;
}
.lu-langbar {
  position:absolute!important; margin-left:0; margin-top:0; z-index:1; border-style:ridge;
}

/* Position both panels below their trigger button via the anchor */
#profilePanel {
  top: 100% !important;
  right: 0; left: auto;
  width: max-content; max-width: 90vw;
  animation: xinyige-dropdown-in 0.22s ease;
}
/* Nav SVG icons loaded as <img> cannot inherit currentColor, so they render
   black by default. Invert them to near-white in the dark theme.            */
body.changshiyueye .lu-nav-icon { filter: brightness(0) invert(0.92); }

/* Activity log — path/keyword column: dim in light mode, full brightness in dark */
.lu-activity-path { opacity: 0.75; }
body.changshiyueye .lu-activity-path { opacity: 1; color: #eef7f2; }

/* Profile trigger — filter pipeline maps any emoji colour to gold */
.lu-profile-trigger {
  filter: brightness(0) invert(1) sepia(1) saturate(6) hue-rotate(5deg) brightness(1.1)
          drop-shadow(0 0 4px rgba(212,175,55,0.6));
}
/* Light theme: dark charcoal icon — gold is too faint against the light bar */
body.heibaitiandi .lu-profile-trigger {
  filter: brightness(0) opacity(0.68);
}
/* Suppress default hover background so the filter alone controls appearance */
@media (hover:hover) {
  .lu-profile-trigger:hover { background-color: transparent !important; }

  /* Dark theme: bright white icon + white glow — gold would be invisible on dark */
  body.changshiyueye .lu-profile-trigger:hover {
    filter: brightness(0) invert(1) saturate(0) brightness(1.4)
            drop-shadow(0 0 8px rgba(238,247,242,0.9));
  }
  /* White theme: deep amber — more visible than pale gold on a light bar */
  body.heibaitiandi .lu-profile-trigger:hover {
    background-color: rgba(200,130,0,0.12) !important;
    filter: brightness(0) invert(1) sepia(1) saturate(10) hue-rotate(3deg) brightness(0.78)
            drop-shadow(0 0 6px rgba(170,100,0,0.65));
  }
}

#themebar,
#langbar,
#stylebar {
  top:100% !important;  /* !important beats animatetop keyframe's top:0 */
  left:0;
  width:max-content; max-width:90vw;
  animation:xinyige-dropdown-in 0.22s ease;
}

@keyframes xinyige-dropdown-in {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Pagebar */
.lu-pagebar { display:none; z-index:1; overflow:scroll; height:45px; }
.lu-pagebar .lu-bar-item { width:auto; border:none; outline:0 }

/* Searchbar */
@media only screen and (max-width:600px) { .lu-searchbar { width:auto; height:auto; z-index:2; border-style:ridge; } }
@media only screen and (min-width:601px) { .lu-searchbar { width:auto; height:auto; display:block; float:right; margin-right:-45px; z-index:2; border-style:ridge; } }

/* =======================================================
   OVERFLOW PANEL (⋯ menu on narrow screens)
   background must be set per theme — CSS does not inherit
   background from ancestors.
   ======================================================= */
.lu-overflow-panel {
  position:absolute; top:100%; left:0;
  min-width:160px; width:max-content; max-width:90vw;
  max-height:80vh; overflow-y:auto;
  padding:0.3rem 0 0.5rem;
  z-index:5; line-height:1.5; border-style:ridge;
}
.lu-overflow-panel .lu-button.lu-style-block {
  display:block; width:100%; text-align:left;
  padding:0.45rem 1.2rem; box-sizing:border-box;
}
.lu-overflow-title {
  font-size:0.8em; opacity:0.55;
  margin:0.5rem 1.2rem 0.15rem;
  letter-spacing:0.12em; pointer-events:none;
}
.lu-overflow-divider {
  border:none; border-top:1px solid currentColor;
  opacity:0.15; margin:0.4rem 0.6rem;
}

/* =======================================================
   CARDS, STYLE BLOCKS, LINKS
   ======================================================= */
.lu-card, .lu-card-2 { box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) }
.lu-card-4, .lu-hover-shadow:hover { box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19) }
.lu-style-block { display:block; }
.lu-link { color:inherit; }

/* =======================================================
   ARTICLE EDIT PANEL (admin only, shu.html)
   ======================================================= */
.lu-edit-panel {
  display: flex;
  flex-direction: column;
  height: 80vh;
  max-width: 960px;
  margin: 1rem auto;
  border: 1px solid currentColor;
  box-shadow: 0 4px 24px rgba(0,0,0,0.15);
  box-sizing: border-box;
}
.lu-edit-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid currentColor;
  flex-shrink: 0;
  background: rgba(128,128,128,0.07);
}
.lu-edit-label {
  font-size: 0.88em;
  letter-spacing: 0.12em;
  opacity: 0.75;
  flex-shrink: 0;
}
.lu-edit-title {
  flex: 1;
  font-size: 0.88em;
  letter-spacing: 0.12em;
  opacity: 0.75;
}
.lu-edit-name-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid currentColor;
  color: inherit;
  font-family: 'LXGW WenKai', 'Songti SC', serif;
  font-size: 0.88em;
  letter-spacing: 0.12em;
  padding: 0.1em 0.4em;
  outline: none;
  opacity: 0.80;
}
.lu-edit-name-input:focus { opacity: 1; }
.lu-edit-textarea {
  flex: 1;
  width: 100%;
  font-family: 'LXGW WenKai', 'Songti SC', serif;
  font-size: var(--read-font-size, 18px);
  line-height: 1.9;
  padding: 1.2rem 1.6rem;
  box-sizing: border-box;
  resize: none;
  background: transparent;
  color: inherit;
  border: none;
  outline: none;
  overflow-y: auto;
}
.lu-edit-footer {
  display: flex;
  justify-content: space-between;
  padding: 0.3rem 1rem;
  font-size: 0.78em;
  letter-spacing: 0.08em;
  opacity: 0.5;
  border-top: 1px solid currentColor;
  flex-shrink: 0;
  background: rgba(128,128,128,0.07);
}
/* Edit panel: theme-aware backgrounds so the panel stands out from page background */
body.heibaitiandi .lu-edit-panel {
  background: #f2ede0;
  border-color: rgba(90, 60, 20, 0.35);
}
body.heibaitiandi .lu-edit-header,
body.heibaitiandi .lu-edit-footer { background: rgba(90, 60, 20, 0.10); }
body.heibaitiandi .lu-edit-textarea { color: #2a2010; }
body.changshiyueye .lu-edit-panel {
  background: #1b2b24;
  border-color: rgba(100, 160, 120, 0.35);
}
body.changshiyueye .lu-edit-header,
body.changshiyueye .lu-edit-footer { background: rgba(100, 160, 120, 0.08); }
body.changshiyueye .lu-edit-textarea { color: #d4e8da; }

/* =======================================================
   CREATE FILE / DIR MODAL (admin only)
   ======================================================= */
.lu-create-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lu-create-modal {
  width: min(480px, 92vw);
  max-height: 95vh;
  display: flex;
  flex-direction: column;
  border: 1px solid currentColor;
  box-shadow: 0 6px 32px rgba(0,0,0,0.25);
  background: rgb(51,51,51);   /* dark fallback — overridden by per-theme rules */
  color: #eef7f2;
}
.lu-create-body {
  padding: 1.2rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.lu-share-card-preview-box {
  width: 100%;
  max-height: calc(90vh - 190px);
  min-height: 160px;
  overflow-y: auto;
}
.lu-create-type-row {
  display: flex;
  gap: 0.6rem;
}
.lu-create-type-btn {
  flex: 1;
  text-align: center;
  padding: 0.4rem 0;
  border: 1px solid currentColor;
  opacity: 0.45;
  cursor: pointer;
  letter-spacing: 0.1em;
}
.lu-create-type-btn.lu-active {
  opacity: 1;
  font-weight: 700;
  background: rgba(128,128,128,0.22);
  box-shadow: inset 0 -3px 0 currentColor;
}
.lu-create-hint-warn {
  opacity: 1;
  color: #c0392b;
}
body.changshiyueye .lu-create-hint-warn {
  color: #e87c6e;
}
.lu-sync-result-ok {
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #27ae60;
}
body.changshiyueye .lu-sync-result-ok {
  color: #6fcf97;
}
.lu-sync-fail-item {
  font-size: 0.82em;
  padding: 0.2rem 0;
  border-top: 1px solid rgba(128,128,128,0.2);
  word-break: break-all;
}
.lu-create-input {
  width: 100%;
  font-family: 'LXGW WenKai', 'Songti SC', serif;
  font-size: 1rem;
  background: transparent;
  color: inherit;
  border: 1px solid currentColor;
  padding: 0.45rem 0.8rem;
  box-sizing: border-box;
  outline: none;
  letter-spacing: 0.04em;
}
.lu-create-hint {
  font-size: 0.78em;
  opacity: 0.5;
  letter-spacing: 0.06em;
}

/* =======================================================
   READING CONTENT CARD — base layout shared by all styles
   position:relative for absolutely-positioned decorations.
   z-index is NOT set — bar (20) and sidebar (15) already
   have explicit values that keep them above this card.
   ======================================================= */
.lu-shu-card {
  max-width: 820px;
  margin: 1.8rem auto;
  padding: 2.6rem 3rem;
  box-sizing: border-box;
  position: relative;
  font-size: var(--read-font-size, 18px);
}
.lu-shu-card .lu-shu-text {
  font-family: 'LXGW WenKai', 'Songti SC', serif;
  text-align: justify; text-align-last: left;
  text-indent: 2em;
}
.lu-shu-card .shu-p.shu-pc { text-indent: 0; }
.lu-shu-card .corner,
.lu-shu-card .lu-seal,
.lu-shu-card .lu-page-band { display: none; }
@media only screen and (max-width:600px) {
  .lu-shu-card { padding: 1.2rem 1.4rem; }
}

/* =======================================================
   PAGE TITLE, BREADCRUMB, DIRECTORY GRID
   ======================================================= */
h1 {
  letter-spacing:0.4em; text-indent:0.4em; font-weight:700;
  border-bottom:1px solid currentColor;
  padding-bottom:0.4em; margin:1.2rem 0 1.5rem;
}
@media only screen and (max-width:600px) {
  h1 { letter-spacing:0.2em; text-indent:0.2em; }
}

.lu-breadcrumb { letter-spacing:0.1em; }
.lu-breadcrumb a.lu-button { font-size:0.9em; border-bottom:1px dotted currentColor; padding-bottom:2px; }

.lu-flex-container { display:flex; flex-flow:row wrap; justify-content:center; }
.lu-flex-container > div { width:auto; margin:20px; text-align:center; }
.lu-flex-container > div > a.lu-button {
  border:1px solid currentColor; border-radius:0;
  letter-spacing:0.12em; min-width:7.5em;
  transition:background-color 0.18s ease, color 0.18s ease;
}
.lu-flex-navigator { display:flex; flex-flow:row wrap; justify-content:center; }
.lu-flex-navigator > div { width:auto; margin:10px; text-align:left; }

/* =======================================================
   FONT SIZE CONTROL
   Vue watcher sets --read-font-size on #content.
   Default 18px matches lu-text-large (no flash on load).
   ======================================================= */
#content { --read-font-size:18px; --vert-col-width:45px; }
#content .lu-shu-text { font-size:var(--read-font-size); }

/* =======================================================
   SEARCH TEXT
   ======================================================= */
.lu-search-text { border-bottom:1px solid; margin:12px; padding:8px }
@media only screen and (min-width:601px) { .lu-search-text:hover { background-color:rgba(255,255,255,0.3) } }
@media only screen and (max-width:600px) { .lu-search-text:hover { border-style:solid; border-color:rgba(255,255,255,1) } }
@media only screen and (min-width:601px) { .lu-shu-text:hover { background-color:rgba(255,255,255,0.3) } }
@media only screen and (max-width:600px) { .lu-shu-text:hover { outline:1px solid rgba(255,255,255,1); } }

/* =======================================================
   TABLES
   ======================================================= */
table { width:auto; height:auto; table-layout:auto; }
td, th { border:1px solid; text-align:left; width:auto; height:auto; }
td:hover, th:hover { background-color:rgba(255,255,255,0.3) }
.anchor { display:block; height:45px; margin-top:-45px; visibility:hidden; }

/* =======================================================
   LANGUAGE SWITCHER PLACEHOLDERS
   ======================================================= */
.zh-content {}
.en-content {}

/* =======================================================
   AJAX CONTENT FADE-IN
   ======================================================= */
#indexpagemain { animation:xinyige-fadein 0.32s ease; }
@keyframes xinyige-fadein {
  from { opacity:0; transform:translateY(5px); }
  to   { opacity:1; transform:translateY(0); }
}

/* =======================================================
   PROGRESS BAR (跟读 mode)
   ======================================================= */
progress { -webkit-appearance:none; appearance:none; height:3px; border:none; border-radius:2px; vertical-align:middle; }
progress::-webkit-progress-bar { background:rgba(128,128,128,0.2); border-radius:2px; }
progress::-webkit-progress-value { background:currentColor; border-radius:2px; }

/* =======================================================
   SCROLL-TO-TOP BUTTON
   ======================================================= */
#scrollTop {
  position:fixed; bottom:2rem; right:1.5rem; display:none;
  width:2.4rem; height:2.4rem; line-height:2.4rem;
  text-align:center; padding:0;
  border:1px solid currentColor; border-radius:50%;
  font-size:1rem; opacity:0.65;
  transition:opacity 0.2s ease; z-index:25; cursor:pointer;
}
#scrollTop:hover { opacity:1; }

/* =======================================================
   VERTICAL READING MODE (竖排)
   Vue watcher toggles lu-vertical-mode on #content.
   Applied to #content (outside #indexpagemain) so the
   class survives AJAX page loads.
   ======================================================= */
.lu-vertical-mode .lu-shu-card {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  max-width: none;
  width: calc(100% - 2rem);
  max-height: 70vh;
  margin: 1.8rem auto;
  padding: 0.8rem 1rem;
  overflow-x: auto;
  overflow-y: hidden;
}
.lu-vertical-mode .lu-shu-card .lu-shu-text {
  display: block;
  margin: 0; padding: 0;
  text-indent: 0;
  line-height: var(--vert-col-width);
  letter-spacing: 0.08em;
}
.lu-vertical-mode .lu-shu-card .shu-p.shu-pc { font-weight: 700; letter-spacing: 0.4em; }
.lu-vertical-mode .lu-shu-card::-webkit-scrollbar { height: 6px; }
.lu-vertical-mode .lu-shu-card::-webkit-scrollbar-track { background: rgba(110,81,33,0.08); }
.lu-vertical-mode .lu-shu-card::-webkit-scrollbar-thumb { background: rgba(110,81,33,0.4); border-radius: 3px; }
.lu-vertical-mode .lu-pagination,
.lu-vertical-mode .lu-pagebar { writing-mode: horizontal-tb; }

/* =======================================================
   DECORATIVE DIVIDER
   ======================================================= */
.lu-divider { border:none; border-top:1px solid currentColor; opacity:0.25; margin:1.5rem 0; }

/* =======================================================
   UTILITY — POSITION
   ======================================================= */
.lu-text-left { text-align:left } .lu-text-right { text-align:right }
.lu-text-justify { text-align:justify; text-align-last:left; } .lu-text-center { text-align:center }
.lu-float-right { float:right }
.lu-inline-block { display:inline-block }
.lu-scrollpage { display:block; overflow:auto; height:36px; } .lu-padding-top { padding-top:9px; }
.lu-margin { margin:0 0 10px 10px }

/* =======================================================
   UTILITY — SIZE & SHAPE
   ======================================================= */
.lu-text-tiny { font-size:10px } .lu-text-small { font-size:12px }
.lu-text-medium { font-size:15px } .lu-text-large { font-size:18px }
.lu-text-xlarge { font-size:24px } .lu-text-xxlarge { font-size:36px }
.lu-text-xxxlarge { font-size:48px } .lu-text-jumbo { font-size:64px }
.lu-round-small { border-radius:2px } .lu-round, .lu-round-medium { border-radius:4px }
.lu-round-large { border:solid; border-radius:8px } .lu-round-xlarge { border-radius:16px }
.lu-round-xxlarge { border-radius:32px }

/* =======================================================
   UTILITY — ANIMATION
   ======================================================= */
.lu-animate-fading { animation:fading 10s infinite }
@keyframes fading { 0%{opacity:0} 50%{opacity:1} 100%{opacity:0} }
.lu-animate-top { position:relative; animation:animatetop 0.4s }
@keyframes animatetop { from{top:-300px;opacity:0} to{top:0;opacity:1} }
.lu-animate-right { position:relative; animation:animateright 0.4s }
@keyframes animateright { from{right:-300px;opacity:0} to{right:0;opacity:1} }
.lu-animate-bottom { position:relative; animation:animatebottom 0.4s }
@keyframes animatebottom { from{bottom:-300px;opacity:0} to{bottom:0;opacity:1} }

/* =======================================================
   COLOUR SWATCHES (theme picker buttons)
   ======================================================= */
.yanse-changshiyueye   { color:#eef7f2; background:rgb(41,41,41); }
.yanse-heibaitiandi    { color:black;   background:white }

/* =======================================================
   藏书目录 · 函 + 卷 (book-case spines on a shelf)
   Used by index.html when listing directory contents.
   See template: class is set to xy-cangshu-juan if '.' in
   item name (single 线装书), else xy-cangshu-han (函套).
   ======================================================= */

/* Shared palette — set on the shelf so both children inherit */
.xy-cangshu-shelf {
  /* 函书：古金丝装 */
  --han-bg:      #c4a25a;
  --han-bg-2:    #b8924a;
  --han-border:  #6e5121;

  /* 书签：米色老纸 */
  --han-label:   #f1e4c4;
  --han-ink:     #2a1d0e;

  /* 函系带：朱红 */
  --han-ribbon:  #9c3329;
  --han-knot:    #571b13;

  /* 线装书：陈纸本色 */
  --juan-bg:     #d9c79a;
  --juan-bg-2:   #c4b07d;
}

/* The shelf row */
.xy-cangshu-shelf {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: flex-end;          /* books sit on the shelf line */
  gap: 14px 18px;
  padding: 2.4rem 1rem 2.8rem;
  position: relative;
}
/* Thin double line under the books */
.xy-cangshu-shelf::after {
  content: "";
  position: absolute;
  left: 6%; right: 6%; bottom: 1.2rem;
  height: 4px;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  opacity: 0.42;
  pointer-events: none;
}

/* ---------- 函 (multi-volume canon, no "." in name) ---------- */
.xy-cangshu-han {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 248px;
  padding: 32px 8px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* overflow:hidden alone doesn't clip the last column's overflow in
     writing-mode:vertical-rl; clip-path:inset(0) is a hard graphical clip */
  clip-path: inset(0);

  color: var(--han-ink);
  text-decoration: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;

  background-color: var(--han-bg);
  border: 1px solid var(--han-border);
  border-radius: 0;

  background-image:
    linear-gradient(var(--han-ribbon), var(--han-ribbon)),
    linear-gradient(var(--han-border), var(--han-border)),
    linear-gradient(var(--han-ribbon), var(--han-ribbon)),
    linear-gradient(var(--han-border), var(--han-border)),
    repeating-linear-gradient(
      to right,
      transparent 0, transparent 3px,
      var(--han-bg-2) 3px, var(--han-bg-2) 4px
    );
  background-position:
    0 14px, 0 30px,
    0 calc(100% - 22px), 0 calc(100% - 30px),
    0 0;
  background-size:
    100% 8px, 100% 1px,
    100% 8px, 100% 1px,
    100% 100%;
  background-repeat: no-repeat;

  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 0.42em;
  font-family: 'LXGW WenKai', 'Songti SC', 'SimSun', serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  text-align: center;

  transition: transform 0.26s ease, box-shadow 0.26s ease;
}
/* Inner paper label (书签) */
.xy-cangshu-han::before {
  content: "";
  position: absolute;
  top: 42px; bottom: 42px;
  left: 9px; right: 9px;
  z-index: -1;
  background: var(--han-label);
  border: 1px solid var(--han-border);
  pointer-events: none;
  writing-mode: horizontal-tb;
  background-image:
    linear-gradient(var(--han-label), var(--han-label)),
    repeating-linear-gradient(
      to bottom,
      transparent 0, transparent 2px,
      rgba(110,81,33,0.05) 2px, rgba(110,81,33,0.05) 3px
    );
}
/* Ribbon knot — one filled rect mirrored top + bottom via box-shadow */
.xy-cangshu-han::after {
  content: "";
  position: absolute;
  left: 50%; transform: translateX(-50%);
  top: 16px;
  width: 6px; height: 4px;
  background: var(--han-knot);
  box-shadow: 0 198px 0 var(--han-knot);
  pointer-events: none;
  writing-mode: horizontal-tb;
}

/* ---------- 卷 (single 线装书, "." in name) ---------- */
.xy-cangshu-juan {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 222px;
  padding: 18px 5px 96px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  isolation: isolate;

  color: var(--han-ink);
  text-decoration: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;

  background-color: var(--juan-bg);
  border: 1px solid var(--han-border);
  border-radius: 0;

  background-image:
    linear-gradient(var(--han-border), var(--han-border)),
    repeating-linear-gradient(
      to right,
      transparent 0, transparent 2px,
      var(--juan-bg-2) 2px, var(--juan-bg-2) 3px
    );
  background-position:
    0 calc(100% - 12px),
    0 0;
  background-size:
    100% 1px,
    100% 100%;
  background-repeat: no-repeat;

  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 0.34em;
  font-family: 'LXGW WenKai', 'Songti SC', 'SimSun', serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 1;
  text-align: center;

  transition: transform 0.26s ease, box-shadow 0.26s ease;
}
/* Top paper label (书签 — at top of spine, 线装书 convention) */
.xy-cangshu-juan::before {
  content: "";
  position: absolute;
  top: 12px; height: 124px;
  left: 6px; right: 6px;
  z-index: -1;
  background: var(--han-label);
  border: 1px solid var(--han-border);
  pointer-events: none;
  writing-mode: horizontal-tb;
  background-image:
    linear-gradient(var(--han-label), var(--han-label)),
    repeating-linear-gradient(
      to bottom,
      transparent 0, transparent 2px,
      rgba(110,81,33,0.05) 2px, rgba(110,81,33,0.05) 3px
    );
}
/* Three binding-thread holes near bottom of spine */
.xy-cangshu-juan::after {
  content: "";
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: 28px;
  width: 3px; height: 3px;
  background: var(--han-border);
  border-radius: 50%;
  box-shadow:
    0 -14px 0 var(--han-border),
    0 -28px 0 var(--han-border);
  pointer-events: none;
  writing-mode: horizontal-tb;
}

/* Long-title autofit inner span (added by lu_main.js) */
.xy-cangshu-han .xy-fit-inner,
.xy-cangshu-juan .xy-fit-inner {
  display: block;
}

/* Lock badge — circular vermillion seal on private book spines */
.xy-lock-badge {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  writing-mode: horizontal-tb;    /* keep upright inside vertical spine */
  text-orientation: mixed;
  z-index: 2;
  pointer-events: none;

  /* Circular seal — Chinese vermillion (朱砂) against any spine background */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #eef7f2;
  font-size: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

/* Hover — lift off the shelf, warm shadow appears */
@media (hover: hover) {
  .xy-cangshu-han:hover,
  .xy-cangshu-juan:hover {
    transform: translateY(-8px);
    box-shadow:
      0 10px 18px -6px rgba(60, 38, 12, 0.45),
      0 4px 10px -4px rgba(60, 38, 12, 0.25);
  }
  body.changshiyueye .xy-cangshu-han:hover,
  body.changshiyueye .xy-cangshu-juan:hover {
    box-shadow:
      0 10px 22px -4px rgba(252, 195, 7, 0.75),
      0 4px 12px -4px rgba(252, 195, 7, 0.45);
  }
}

/* Narrower screens */
@media only screen and (max-width: 600px) {
  .xy-cangshu-shelf { gap: 10px 12px; padding: 1.8rem 0.5rem 2rem; }
  .xy-cangshu-han {
    width: 60px; height: 200px;
    padding: 26px 5px;
    font-size: 19px; letter-spacing: 0.30em;
  }
  .xy-cangshu-han::before { top: 34px; bottom: 34px; left: 6px; right: 6px; }
  .xy-cangshu-han::after  { width: 5px; height: 3px; top: 13px;
    box-shadow: 0 160px 0 var(--han-knot); }

  .xy-cangshu-juan {
    width: 44px; height: 180px;
    padding: 14px 4px 76px;
    font-size: 16px; letter-spacing: 0.26em;
  }
  .xy-cangshu-juan::before { top: 10px; height: 100px; left: 4px; right: 4px; }
  .xy-cangshu-juan::after  { bottom: 22px; width: 2.5px; height: 2.5px;
    box-shadow: 0 -11px 0 var(--han-border), 0 -22px 0 var(--han-border); }
}

/* =======================================================
   READING PANEL STYLES — 线装 经卷 简牍 帛书 拓片 册页
   Body classes: style-xianzhuang | style-jingjuan |
     style-jiandu | style-boshu | style-taping | style-ceye
   Vertical-mode selectors use .lu-vertical-mode (set on
   #content by Vue) as a descendant, not on body.
   ======================================================= */

/* ── STYLE A — 线装  Thread-bound book ────────────────── */
body.style-xianzhuang .lu-shu-card {
  padding: 4.2rem 1.8rem 3.6rem;
  border: 1px solid currentColor;
  background-color: rgba(247, 235, 205, 0.10);
  background-image:
    repeating-linear-gradient(0deg,
      transparent 0, transparent 5px,
      rgba(120, 90, 40, 0.04) 5px, rgba(120, 90, 40, 0.04) 6px),
    repeating-linear-gradient(105deg,
      transparent 0, transparent 14px,
      rgba(120, 90, 40, 0.025) 14px, rgba(120, 90, 40, 0.025) 15px);
  background-size: 2px 6px, 15px 15px;
  box-shadow:
    inset 0 0 28px rgba(120, 80, 30, 0.08),
    inset 0 0 0 1px rgba(120, 80, 30, 0.10);
}
body.style-xianzhuang .lu-shu-card::before {
  content: '';
  position: absolute;
  inset: 14px;
  border: 1px solid currentColor;
  opacity: .22; pointer-events: none;
}
body.style-xianzhuang .lu-shu-card::after {
  content: attr(data-title);
  position: absolute;
  top: 1.05rem; left: 50%;
  transform: translateX(-50%);
  display: inline-flex; align-items: center;
  padding: 0 1.4em;
  font-family: 'LXGW WenKai', serif;
  font-size: 0.86em; font-weight: 700;
  letter-spacing: 0.42em; text-indent: 0.42em;
  white-space: nowrap;
  background:
    linear-gradient(to bottom right, currentColor 49%, transparent 50%) left center / .7em .9em no-repeat,
    linear-gradient(to bottom left,  currentColor 49%, transparent 50%) right center / .7em .9em no-repeat;
}
body.style-xianzhuang .lu-shu-card .lu-page-band {
  display: block;
  position: absolute;
  bottom: 1.05rem; left: 50%;
  transform: translateX(-50%);
  font-family: 'LXGW WenKai', serif;
  font-size: 0.78em;
  letter-spacing: 0.32em; text-indent: 0.32em;
  opacity: 0.75;
  white-space: nowrap;
  padding: 0 1.2em;
  background:
    linear-gradient(to top right, currentColor 49%, transparent 50%) left center / .6em .8em no-repeat,
    linear-gradient(to top left,  currentColor 49%, transparent 50%) right center / .6em .8em no-repeat;
}
body.style-xianzhuang .lu-shu-card .corner {
  display: block;
  position: absolute;
  width: 18px; height: 18px;
  pointer-events: none; opacity: .55;
}
body.style-xianzhuang .lu-shu-card .corner.tl { top: 14px;    left: 14px;    border-top: 1px solid currentColor; border-left: 1px solid currentColor; }
body.style-xianzhuang .lu-shu-card .corner.tr { top: 14px;    right: 14px;   border-top: 1px solid currentColor; border-right: 1px solid currentColor; }
body.style-xianzhuang .lu-shu-card .corner.bl { bottom: 14px; left: 14px;    border-bottom: 1px solid currentColor; border-left: 1px solid currentColor; }
body.style-xianzhuang .lu-shu-card .corner.br { bottom: 14px; right: 14px;   border-bottom: 1px solid currentColor; border-right: 1px solid currentColor; }
body.style-xianzhuang .lu-vertical-mode .lu-shu-card { padding: 1.2rem 1rem; }
body.style-xianzhuang .lu-vertical-mode .lu-shu-card::after,
body.style-xianzhuang .lu-vertical-mode .lu-shu-card .lu-page-band,
body.style-xianzhuang .lu-vertical-mode .lu-shu-card .lu-seal { display: none; }
body.changshiyueye.style-xianzhuang .lu-shu-card {
  background-color: rgba(238, 247, 242, 0.04);
  background-image:
    repeating-linear-gradient(0deg,
      transparent 0, transparent 5px,
      rgba(238, 247, 242, 0.035) 5px, rgba(238, 247, 242, 0.035) 6px),
    repeating-linear-gradient(105deg,
      transparent 0, transparent 14px,
      rgba(238, 247, 242, 0.02) 14px, rgba(238, 247, 242, 0.02) 15px);
  background-size: 2px 6px, 15px 15px;
  box-shadow:
    inset 0 0 28px rgba(238, 247, 242, 0.05),
    inset 0 0 0 1px rgba(238, 247, 242, 0.08);
}

/* ── STYLE B — 经卷  Sutra scroll ─────────────────────── */
body.style-jingjuan .lu-shu-card {
  max-width: 740px;
  padding: 2.5em 1.8rem;
  border: none; outline: none;
  background-color: rgba(247, 235, 205, 0.08);
  background-image:
    linear-gradient(to bottom,
      #a82a1f 0, #a82a1f 3px,
      transparent 3px, transparent 8px,
      #a82a1f 8px, #a82a1f 9px, transparent 9px),
    linear-gradient(to top,
      #a82a1f 0, #a82a1f 3px,
      transparent 3px, transparent 8px,
      #a82a1f 8px, #a82a1f 9px, transparent 9px),
    repeating-linear-gradient(to bottom,
      transparent 0, transparent calc(2.5em - 1px),
      rgba(168, 42, 31, 0.18) calc(2.5em - 1px),
      rgba(168, 42, 31, 0.18) 2.5em);
  background-position: 0 0, 0 100%, 0 0;
  background-size: 100% 9px, 100% 9px, 100% 100%;
  background-repeat: no-repeat, no-repeat, repeat;
}
body.style-jingjuan .lu-shu-card::before {
  content: '';
  position: absolute;
  top: -4px; left: 50%; transform: translateX(-50%);
  width: 10px; height: 10px;
  background: #a82a1f; border-radius: 50%; z-index: 1;
}
body.style-jingjuan .lu-shu-card::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 50%; transform: translateX(-50%);
  width: 10px; height: 10px;
  background: #a82a1f; border-radius: 50%; z-index: 1;
}
body.style-jingjuan .lu-shu-card .lu-shu-text { font-size: var(--read-font-size, 18px); line-height: 2.5; margin: 0; padding: 0; }
body.style-jingjuan .lu-vertical-mode .lu-shu-card {
  max-width: none;
  padding: 1rem 1rem;
  background-color: rgba(247, 235, 205, 0.08);
  background-image:
    linear-gradient(to bottom,
      #a82a1f 0, #a82a1f 3px,
      transparent 3px, transparent 8px,
      #a82a1f 8px, #a82a1f 9px, transparent 9px),
    linear-gradient(to top,
      #a82a1f 0, #a82a1f 3px,
      transparent 3px, transparent 8px,
      #a82a1f 8px, #a82a1f 9px, transparent 9px);
  background-position: 0 0, 0 100%;
  background-size: 100% 9px, 100% 9px;
  background-repeat: no-repeat, no-repeat;
  box-shadow: none;
}
body.style-jingjuan .lu-vertical-mode .lu-shu-card .lu-shu-text {
  background-image: linear-gradient(to right, rgba(168, 42, 31, 0.22) 0 1px, transparent 1px);
  background-size: var(--vert-col-width) 100%;
  background-position: right 0;
  background-repeat: repeat-x;
}
body.changshiyueye.style-jingjuan .lu-shu-card {
  background-color: rgba(238, 247, 242, 0.04);
  background-image:
    linear-gradient(to bottom,
      #d4af37 0, #d4af37 3px,
      transparent 3px, transparent 8px,
      #d4af37 8px, #d4af37 9px, transparent 9px),
    linear-gradient(to top,
      #d4af37 0, #d4af37 3px,
      transparent 3px, transparent 8px,
      #d4af37 8px, #d4af37 9px, transparent 9px),
    repeating-linear-gradient(to bottom,
      transparent 0, transparent calc(2.5em - 1px),
      rgba(212, 175, 55, 0.35) calc(2.5em - 1px),
      rgba(212, 175, 55, 0.35) 2.5em);
  background-position: 0 0, 0 100%, 0 0;
  background-size: 100% 9px, 100% 9px, 100% 100%;
  background-repeat: no-repeat, no-repeat, repeat;
}
body.changshiyueye.style-jingjuan .lu-shu-card::before { background: #d4af37; }
body.changshiyueye.style-jingjuan .lu-shu-card::after  { background: #d4af37; }
body.changshiyueye.style-jingjuan .lu-vertical-mode .lu-shu-card {
  background-color: rgba(238, 247, 242, 0.04);
  background-image:
    linear-gradient(to bottom,
      #d4af37 0, #d4af37 3px,
      transparent 3px, transparent 8px,
      #d4af37 8px, #d4af37 9px, transparent 9px),
    linear-gradient(to top,
      #d4af37 0, #d4af37 3px,
      transparent 3px, transparent 8px,
      #d4af37 8px, #d4af37 9px, transparent 9px);
  background-position: 0 0, 0 100%;
  background-size: 100% 9px, 100% 9px;
  background-repeat: no-repeat, no-repeat;
}
body.changshiyueye.style-jingjuan .lu-vertical-mode .lu-shu-card .lu-shu-text {
  background-image: linear-gradient(to right, rgba(212, 175, 55, 0.45) 0 1px, transparent 1px);
  background-size: var(--vert-col-width) 100%;
  background-position: right 0;
  background-repeat: repeat-x;
}

/* ── STYLE C — 简牍  Bamboo slips ─────────────────────── */
body.style-jiandu .lu-shu-card {
  max-width: 780px;
  padding: 2.5em 1.6rem;
  border: none; outline: none;
  background-color: #d4be78; color: #2a1d0e;
  background-image:
    linear-gradient(to right,
      transparent 0, transparent .55rem,
      #6e2a14 .55rem, #6e2a14 .65rem,
      #a64a25 .65rem, #a64a25 1.05rem,
      #6e2a14 1.05rem, #6e2a14 1.15rem,
      transparent 1.15rem),
    linear-gradient(to left,
      transparent 0, transparent .55rem,
      #6e2a14 .55rem, #6e2a14 .65rem,
      #a64a25 .65rem, #a64a25 1.05rem,
      #6e2a14 1.05rem, #6e2a14 1.15rem,
      transparent 1.15rem),
    repeating-linear-gradient(to right,
      rgba(80, 55, 20, 0.06) 0, rgba(80, 55, 20, 0.06) 2px,
      transparent 2px, transparent 8px);
  box-shadow:
    inset 0 0 20px rgba(60, 40, 15, 0.20),
    inset 0 4px 0 -2px rgba(60, 40, 15, 0.30),
    inset 0 -4px 0 -2px rgba(60, 40, 15, 0.30);
}
body.style-jiandu .lu-shu-card .lu-shu-text {
  color: #2a1d0e; line-height: 2.5; margin: 0; padding: 0;
  background-image: repeating-linear-gradient(to bottom,
    transparent 0 calc(2.5em - 2px),
    rgba(60, 40, 15, 0.70) calc(2.5em - 2px) calc(2.5em - 1px),
    rgba(255, 255, 255, 0.24) calc(2.5em - 1px) 2.5em);
}
@media only screen and (min-width:601px) { body.style-jiandu .lu-shu-card .lu-shu-text:hover { background-color: rgba(255, 255, 255, 0.78); } }
@media only screen and (max-width:600px) { body.style-jiandu .lu-shu-card .lu-shu-text:hover { outline: 1px solid rgba(255, 255, 255, 0.95); } }
body.style-jiandu .lu-vertical-mode .lu-shu-card {
  max-width: none;
  padding: 2.2rem 1rem;
  border: none; outline: none;
  background-color: #d4be78; color: #2a1d0e;
  background-image:
    linear-gradient(to bottom,
      transparent 0, transparent 1.4rem,
      #6e2a14 1.4rem, #6e2a14 1.55rem,
      #a64a25 1.55rem, #a64a25 1.95rem,
      #6e2a14 1.95rem, #6e2a14 2.1rem,
      transparent 2.1rem, transparent 100%),
    linear-gradient(to top,
      transparent 0, transparent 1.4rem,
      #6e2a14 1.4rem, #6e2a14 1.55rem,
      #a64a25 1.55rem, #a64a25 1.95rem,
      #6e2a14 1.95rem, #6e2a14 2.1rem,
      transparent 2.1rem, transparent 100%),
    repeating-linear-gradient(to right,
      rgba(80, 55, 20, 0.05) 0, rgba(80, 55, 20, 0.05) 2px,
      transparent 2px, transparent 9px);
  background-position: 0 0, 0 100%, 0 0;
  background-size: 100% 100%, 100% 100%, auto;
  background-repeat: no-repeat, no-repeat, repeat;
  box-shadow: inset 0 0 36px rgba(60, 40, 15, 0.30);
}
body.style-jiandu .lu-vertical-mode .lu-shu-card .lu-shu-text {
  color: #2a1d0e;
  background-image: linear-gradient(to right, rgba(60,40,15,0.70) 0 1px, rgba(255,255,255,0.24) 1px 2px, transparent 2px);
  background-size: var(--vert-col-width) 100%;
  background-position: right 0;
  background-repeat: repeat-x;
}

/* ── STYLE D — 帛书  Silk manuscript ──────────────────── */
/* Both horizontal and vertical rules declare background explicitly so neither
   relies on cascade from the other — future edits stay isolated. */
body.style-boshu .lu-shu-card {
  max-width: 780px;
  padding: 3rem 1.8rem;
  border: none; outline: none;
  color: #2a1d0e; background-color: #efe2c4;
  background-image:
    repeating-linear-gradient(to right,
      rgba(120, 90, 40, 0.08) 0, rgba(120, 90, 40, 0.08) 1px,
      transparent 1px, transparent 2px),
    repeating-linear-gradient(to bottom,
      rgba(120, 90, 40, 0.06) 0, rgba(120, 90, 40, 0.06) 1px,
      transparent 1px, transparent 2px),
    radial-gradient(ellipse at 20% 30%, rgba(140, 90, 30, 0.10), transparent 55%),
    radial-gradient(ellipse at 80% 75%, rgba(140, 90, 30, 0.08), transparent 55%);
  background-size: 2px 2px, 2px 2px, 100% 100%, 100% 100%;
  box-shadow:
    inset 0 0 30px rgba(120, 80, 30, 0.18),
    0 0 0 1px rgba(120, 80, 30, 0.15),
    0 2px 12px rgba(60, 40, 15, 0.18);
}
body.style-boshu .lu-shu-card::before {
  content: '';
  position: absolute;
  top: -2px; left: 0; right: 0; height: 4px;
  background: radial-gradient(circle at 50% 100%, #efe2c4 2px, transparent 2.5px) 0 0 / 8px 4px repeat-x;
  pointer-events: none;
}
body.style-boshu .lu-shu-card::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0; height: 4px;
  background: radial-gradient(circle at 50% 0%, #efe2c4 2px, transparent 2.5px) 0 0 / 8px 4px repeat-x;
  pointer-events: none;
}
body.style-boshu .lu-shu-card .lu-shu-text { color: #2a1d0e; }
@media only screen and (min-width:601px) { body.changshiyueye.style-boshu .lu-shu-card .lu-shu-text:hover { background-color: rgba(100, 60, 10, 0.28); } }
@media only screen and (max-width:600px) { body.changshiyueye.style-boshu .lu-shu-card .lu-shu-text:hover { outline: 1px solid rgba(100, 60, 10, 0.70); } }
/* Vertical mode — explicitly re-declare background so it is independent of the
   horizontal rule above; future edits to one will not accidentally break the other. */
body.style-boshu .lu-vertical-mode .lu-shu-card {
  max-width: none; padding: 1rem 1rem;
  color: #2a1d0e; background-color: #efe2c4;
  background-image:
    repeating-linear-gradient(to right,
      rgba(120, 90, 40, 0.08) 0, rgba(120, 90, 40, 0.08) 1px,
      transparent 1px, transparent 2px),
    repeating-linear-gradient(to bottom,
      rgba(120, 90, 40, 0.06) 0, rgba(120, 90, 40, 0.06) 1px,
      transparent 1px, transparent 2px),
    radial-gradient(ellipse at 20% 30%, rgba(140, 90, 30, 0.10), transparent 55%),
    radial-gradient(ellipse at 80% 75%, rgba(140, 90, 30, 0.08), transparent 55%);
  background-size: 2px 2px, 2px 2px, 100% 100%, 100% 100%;
  box-shadow:
    inset 0 0 30px rgba(120, 80, 30, 0.18),
    0 0 0 1px rgba(120, 80, 30, 0.15),
    0 2px 12px rgba(60, 40, 15, 0.18);
}
body.style-boshu .lu-vertical-mode .lu-shu-card::before,
body.style-boshu .lu-vertical-mode .lu-shu-card::after {
  height: 4px;
  background: radial-gradient(circle at 50% 50%, #efe2c4 2px, transparent 2.5px) 0 0 / 8px 4px repeat-x;
}

/* =======================================================
   FILE NAVIGATION ARROWS  (shu.html — prev / next file)
   Fixed to the viewport sides; hidden during edit mode via v-show.
   ======================================================= */
.lu-file-nav {
  position: fixed;
  top: 50vh;
  transform: translateY(-50%);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 80px;
  font-size: 2.2rem;
  line-height: 1;
  color: inherit;
  text-decoration: none;
  background: rgba(128, 128, 128, 0.10);
  border-radius: 4px;
  opacity: 0.30;
  transition: opacity 0.18s ease, background 0.18s ease;
  user-select: none;
  -webkit-user-select: none;
}
.lu-file-nav:hover { opacity: 0.80; background: rgba(128, 128, 128, 0.25); }
.lu-file-nav-prev  { left: 4px; }
.lu-file-nav-next  { right: 4px; }
@media only screen and (max-width: 600px) {
  .lu-file-nav { width: 26px; height: 60px; font-size: 1.6rem; opacity: 0.22; }
}

/* =======================================================
   SHARE — floating toolbar + postcard preview
   ======================================================= */

/* ── Floating selection toolbar ── */
.lu-share-toolbar {
  position: fixed;
  z-index: 200;
  padding: 3px 5px;
  border-radius: 4px;
  border-style: ridge;
  white-space: nowrap;
  pointer-events: all;
  animation: xinyige-dropdown-in 0.15s ease;
}
body.changshiyueye .lu-share-toolbar { color: #eef7f2; background: rgb(61,61,61); }
body.heibaitiandi  .lu-share-toolbar { color: black;   background: rgb(241,241,241); }

/* ── Postcard — 宣纸 rice-paper style (captured by html2canvas) ── */

.lu-share-card {
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  width: 400px;
  max-width: 100%;
  min-height: 540px;
  padding: 44px 38px 32px;
  display: flex;
  flex-direction: column;
  font-family: 'LXGW WenKai', 'Noto Serif SC', 'Songti SC', 'SimSun', serif;
  margin: 0 auto;
  user-select: none;
}
.lu-share-card *, .lu-share-card *::before, .lu-share-card *::after { box-sizing: border-box; }

/* Decorative double frame */
.lu-share-card__frame {
  position: absolute;
  inset: 16px;
  border: 1px solid var(--lu-card-frame);
  pointer-events: none;
}
.lu-share-card__frame::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--lu-card-frame);
  opacity: .35;
}

/* 鱼尾 SVG ornaments */
.lu-share-card__fish {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 38px;
  height: 14px;
  color: var(--lu-card-frame);
}
.lu-share-card__fish--top    { top: 22px; }
.lu-share-card__fish--bottom { bottom: 22px; transform: translateX(-50%) scaleY(-1); }
.lu-share-card__fish-outer   { fill: currentColor; opacity: .85; }
.lu-share-card__fish-inner   { fill: var(--lu-card-bg); }

/* Header strip */
.lu-share-card__header {
  position: relative;
  text-align: center;
  font-size: 14px;
  letter-spacing: .5em;
  text-indent: .5em;
  color: var(--lu-card-frame);
  margin: 6px 0 18px;
}

/* Quote body */
.lu-share-card__quote {
  position: relative;
  flex: 1;
  margin: 8px 6px 0;
  font-size: 19px;
  line-height: 2.1;
  letter-spacing: .14em;
  text-align: justify;
  color: var(--lu-card-text);
}
.lu-share-card__quote::first-letter { font-size: 1.15em; font-weight: bold; }

/* Footer */
.lu-share-card__footer {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--lu-card-divider);
}
.lu-share-card__src {
  font-size: 13px;
  letter-spacing: .18em;
  line-height: 1.6;
  color: var(--lu-card-src);
}
.lu-share-card__work {
  display: block;
  font-size: 14px;
  color: var(--lu-card-work);
}
.lu-share-card__author {
  font-size: 14px;
  opacity: .7;
  margin-top: 2px;
}

/* Vermillion 4-character seal
   Grid order: 阁 心 / 藏 一  → right column reads 心一, left reads 阁藏 */
.lu-share-card__seal {
  width: 54px;
  height: 54px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  place-content: center;
  background: var(--lu-seal-bg);
  color: var(--lu-seal-text);
  border: 2px solid var(--lu-seal-bg);
  border-radius: 4px;
  box-shadow: var(--lu-seal-shadow);
  font-family: 'Ma Shan Zheng', 'ZCOOL XiaoWei', 'LXGW WenKai', serif;
  font-size: 17px;
  line-height: 1;
  text-align: center;
  letter-spacing: 0;
  transform: rotate(-3deg);
}
.lu-share-card__seal span { padding: 2px 1px; }

/* Paper-grain overlay */
.lu-share-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, var(--lu-grain) 0 1px, transparent 1px 7px),
    repeating-linear-gradient( 0deg, var(--lu-grain) 0 1px, transparent 1px 11px);
}

/* Light theme — 宣纸 rice paper */
.lu-share-card--light {
  --lu-card-bg:       #fbf5e5;
  --lu-card-text:     #2a1d10;
  --lu-card-frame:    #8d6a2e;
  --lu-card-divider:  rgba(141, 106, 46, .45);
  --lu-card-src:      #6b4a1c;
  --lu-card-work:     #2a1d10;
  --lu-seal-bg:       #a83229;
  --lu-seal-text:     #fff7e6;
  --lu-seal-shadow:   inset 0 0 0 2px #fff7e6, 0 1px 0 rgba(0,0,0,.1);
  --lu-grain:         rgba(120, 70, 20, .04);
  background: radial-gradient(120% 80% at 50% 0%, #fbf5e5 0%, #f3e9cf 70%, #ead8b0 100%);
  color: var(--lu-card-text);
}
.lu-share-card--light::before { mix-blend-mode: multiply; }

/* Dark theme — 墨笺 ink paper */
.lu-share-card--dark {
  --lu-card-bg:       #1c1814;
  --lu-card-text:     #ece2c6;
  --lu-card-frame:    #b8912a;
  --lu-card-divider:  rgba(184, 145, 42, .45);
  --lu-card-src:      #c9a55a;
  --lu-card-work:     #f3e7c4;
  --lu-seal-bg:       #b6332a;
  --lu-seal-text:     #fff3d8;
  --lu-seal-shadow:   inset 0 0 0 2px #fff3d8, 0 0 0 1px rgba(0,0,0,.4), 0 0 14px rgba(182,51,42,.35);
  --lu-grain:         rgba(232, 210, 150, .035);
  background: radial-gradient(120% 80% at 50% 0%, #2a2520 0%, #1c1814 70%, #120f0c 100%);
  color: var(--lu-card-text);
}
.lu-share-card--dark .lu-share-card__quote::first-letter { color: #efd07a; }

/* =======================================================
   BRANDING — theme-aware logo / lockup visibility
   ======================================================= */
/* Navbar logo: show dark-logo on dark theme, light-logo on light theme */
body.changshiyueye .lu-nav-logo-light { display:none; }
body.heibaitiandi  .lu-nav-logo-dark  { display:none; }

/* Auth-page lockup: same toggle */
body.changshiyueye .lu-lockup-light { display:none; }
body.heibaitiandi  .lu-lockup-dark  { display:none; }

/* -------------------------------------------------------------------------
 * Data-analytics color palette (data-quality dashboard + category charts)
 *
 * Traditional Chinese-inspired colors — one per 藏, plus severity levels
 * for quality signals. Defined via CSS custom properties so both themes
 * (heibaitiandi light, changshiyueye dark) get theme-appropriate values.
 * ----------------------------------------------------------------------- */

/* Light-theme defaults — richer, more saturated colors on the cream/white bg. */
:root {
    /* Per-藏 colors (10) */
    --cat-yi:  #4a6fa5;  /* 易 — 靛蓝 indigo */
    --cat-ru:  #c53f35;  /* 儒 — 朱红 vermilion */
    --cat-dao: #4b9e80;  /* 道 — 石青 mineral-cyan */
    --cat-fo:  #c8952e;  /* 佛 — 藤黄 gold */
    --cat-zi:  #7b4e8a;  /* 子 — 紫 purple */
    --cat-shi: #a45a2a;  /* 史 — 赭石 ochre */
    --cat-shi2:#d67b9d;  /* 诗 — 桃粉 peach-pink */
    --cat-ji:  #5c7e5a;  /* 集 — 松青 pine */
    --cat-yi2: #6bae5c;  /* 医 — 石绿 mineral-green */
    --cat-yi3: #9b7cb0;  /* 艺 — 藕荷 lotus-lilac */
    --cat-zong:#8a8a8a;  /* 总目 — 灰 (metadata) */

    /* Severity colors for quality signals */
    --sev-critical: #c0392b;   /* red — empty/broken */
    --sev-warn:     #e67e22;   /* orange — polluted/needs review */
    --sev-info:     #3498db;   /* blue — informational */
    --sev-ok:       #27ae60;   /* green — healthy */
}

/* Dark theme — lighter, less-saturated tones for dark backgrounds. */
body.changshiyueye {
    --cat-yi:  #7b9fcc;
    --cat-ru:  #e86a5f;
    --cat-dao: #6dbe9f;
    --cat-fo:  #e3b25e;
    --cat-zi:  #a67ab2;
    --cat-shi: #c97f4e;
    --cat-shi2:#e39fbc;
    --cat-ji:  #85a583;
    --cat-yi2: #8ed07c;
    --cat-yi3: #b79acc;
    --cat-zong:#b0b0b0;

    --sev-critical: #e74c3c;
    --sev-warn:     #f39c12;
    --sev-info:     #5dade2;
    --sev-ok:       #58d68d;
}

/* Bar-fill helpers — apply to the inner .lu-analytics-fill span. Force
 * a solid color even when the outer bar uses currentColor as a fallback. */
.lu-analytics-fill--yi   { background: var(--cat-yi)   !important; opacity: 0.85 !important; }
.lu-analytics-fill--ru   { background: var(--cat-ru)   !important; opacity: 0.85 !important; }
.lu-analytics-fill--dao  { background: var(--cat-dao)  !important; opacity: 0.85 !important; }
.lu-analytics-fill--fo   { background: var(--cat-fo)   !important; opacity: 0.85 !important; }
.lu-analytics-fill--zi   { background: var(--cat-zi)   !important; opacity: 0.85 !important; }
.lu-analytics-fill--shi  { background: var(--cat-shi)  !important; opacity: 0.85 !important; }
.lu-analytics-fill--shi2 { background: var(--cat-shi2) !important; opacity: 0.85 !important; }
.lu-analytics-fill--ji   { background: var(--cat-ji)   !important; opacity: 0.85 !important; }
.lu-analytics-fill--yi2  { background: var(--cat-yi2)  !important; opacity: 0.85 !important; }
.lu-analytics-fill--yi3  { background: var(--cat-yi3)  !important; opacity: 0.85 !important; }
.lu-analytics-fill--zong { background: var(--cat-zong) !important; opacity: 0.85 !important; }

.lu-analytics-fill--critical { background: var(--sev-critical) !important; opacity: 0.9 !important; }
.lu-analytics-fill--warn     { background: var(--sev-warn)     !important; opacity: 0.9 !important; }
.lu-analytics-fill--info     { background: var(--sev-info)     !important; opacity: 0.9 !important; }
.lu-analytics-fill--ok       { background: var(--sev-ok)       !important; opacity: 0.9 !important; }

/* Histogram bars — gradient by bucket position (index 0..n-1), reads
 * --hist-idx from an inline style. Uses --sev-info hue for a cool, calm
 * histogram look. */
.lu-analytics-hist-fill {
    background: var(--sev-info) !important;
    opacity:    calc(0.30 + 0.55 * var(--hist-t, 0.5)) !important;
}

/* Text accents — for category labels + KPI headings */
.lu-cat-label--yi   { color: var(--cat-yi); }
.lu-cat-label--ru   { color: var(--cat-ru); }
.lu-cat-label--dao  { color: var(--cat-dao); }
.lu-cat-label--fo   { color: var(--cat-fo); }
.lu-cat-label--zi   { color: var(--cat-zi); }
.lu-cat-label--shi  { color: var(--cat-shi); }
.lu-cat-label--shi2 { color: var(--cat-shi2); }
.lu-cat-label--ji   { color: var(--cat-ji); }
.lu-cat-label--yi2  { color: var(--cat-yi2); }
.lu-cat-label--yi3  { color: var(--cat-yi3); }
.lu-cat-label--zong { color: var(--cat-zong); }