/* ============================================================
   Lyre's Project — styles.css(黑金色系)
   分區:基礎 / 前台版頭與分頁 / 卡片列表(含圖片 slide)/
   詳細彈窗(左側圖片牆)/ 燈箱 / 後台編輯器 / RWD
   ============================================================ */

:root {
  color-scheme: dark;
  --bg: #070706;
  --panel: #15120c;
  --panel2: #211a0f;
  --field: #0f0d09;
  --ink: #f7ecd4;
  --muted: #b7a985;
  --line: #4a3b20;
  --gold: #d7aa45;
  --gold2: #f1d082;
  --soft: rgba(215, 170, 69, .15);
  --danger: #d66d6d;
  --ok: #8fc98f;
  --shadow: 0 22px 70px rgba(0, 0, 0, .52);
}

/* ---------- 基礎 ---------- */

* { box-sizing: border-box }

body {
  margin: 0;
  font-family: "Microsoft JhengHei", "Noto Sans TC", system-ui, sans-serif;
  background: radial-gradient(circle at top left, rgba(215, 170, 69, .12), transparent 30%), var(--bg);
  color: var(--ink);
}

body.modal-open { overflow: hidden }
button, input, select, textarea { font: inherit }
[hidden] { display: none !important }

:where(button, a, summary):focus-visible { outline: 2px solid var(--gold); outline-offset: 2px }

input, select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field);
  color: var(--ink);
  outline: none;
}

input, select { min-height: 44px; padding: 0 12px }
textarea { min-height: 96px; padding: 11px 12px; resize: vertical; line-height: 1.6 }
input::placeholder, textarea::placeholder { color: #8f805f }
input:focus, select:focus, textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--soft) }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border: 1px solid var(--gold);
  border-radius: 8px;
  background: var(--gold);
  color: #130f08;
  cursor: pointer;
  padding: 0 14px;
  text-decoration: none;
  font-weight: 900;
  transition: background .16s ease, transform .16s ease;
}

.button:hover { background: var(--gold2); transform: translateY(-1px) }
.button.secondary { background: transparent; color: var(--gold2) }
.button.secondary:hover { background: var(--soft) }
.button.danger { border-color: var(--danger); background: transparent; color: #f0a0a0 }
.button.danger:hover { background: rgba(214, 109, 109, .14) }

.small-note { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6 }

.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  transform: translateY(12px);
  opacity: 0;
  pointer-events: none;
  border: 1px solid var(--gold);
  border-radius: 8px;
  background: var(--panel);
  color: var(--gold2);
  padding: 12px 14px;
  box-shadow: var(--shadow);
  transition: opacity .18s ease, transform .18s ease;
  z-index: 60;
}

.toast.show { transform: translateY(0); opacity: 1 }

/* ---------- 版頭 ---------- */

.page { width: min(1760px, calc(100% - 48px)); margin: 0 auto; padding: 22px 0 54px }

/* 緊湊版頭:全部置左、單行標題+副標,讓卡片區往上移 */
.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
}

.brand { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; min-width: 0 }

.brand h1 {
  margin: 0;
  color: var(--gold2);
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.15;
  letter-spacing: 1px;
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}

.brand p { margin: 0; color: var(--muted); line-height: 1.6; font-size: 13px }

.social-actions { display: flex; gap: 8px; margin-left: auto; align-self: center }

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}

.social-link:hover, .social-link:focus-visible { border-color: var(--gold); color: var(--gold2); background: var(--soft) }

/* ---------- 前台左欄佈局 ---------- */

.layout { display: grid; grid-template-columns: 258px minmax(0, 1fr); gap: 38px; align-items: start }

.side-col {
  position: sticky;
  top: 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: calc(100vh - 82px);
  padding-right: 28px;
  border-right: 1px solid rgba(74, 59, 32, .45);
}

.side-col .brand { display: block }

/* 標題:鋼筆字(Google Fonts 網頁字體,訪客不需安裝)+ 金粉漸層 */
.side-col .brand h1 {
  font-family: "Great Vibes", "Segoe Script", cursive;
  font-size: 54px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 1.15;
  text-decoration: none;
  background: linear-gradient(118deg, var(--gold2) 8%, #ecc077 34%, #e78fa3 68%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 標題下:藤蔓線條 + 右側無框語言下拉 */
.brand-line { display: flex; align-items: center; gap: 10px; margin-top: 12px }

/* 藤蔓線:直線段隨欄寬自動延伸滿版,捲曲收尾固定在右端 */
.brand-flourish {
  flex: 1;
  height: 14px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='14' viewBox='0 0 46 14' fill='none'%3E%3Cpath d='M0 7 C10 7 14 2.5 22 2.5 C29 2.5 32 5.5 32 8 C32 10.2 30 11.4 28.4 10.6 C26.8 9.8 26.9 7.6 28.6 7.1' stroke='%23c9a24a' stroke-width='1.1' stroke-linecap='round'/%3E%3Ccircle cx='39' cy='7' r='1.7' fill='%23c9a24a'/%3E%3C/svg%3E") no-repeat right center,
    linear-gradient(#c9a24a, #c9a24a) no-repeat left center / calc(100% - 44px) 1px;
}

/* 語言下拉:扁平圓角膠囊框 */
.lang-select {
  width: auto;
  min-height: 0;
  padding: 3px 20px 3px 12px;
  border: 1px solid rgba(74, 59, 32, .6);
  border-radius: 999px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23b7a985'/%3E%3C/svg%3E") no-repeat right 8px center / 7px 4px;
  box-shadow: none;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.lang-select:hover, .lang-select:focus { color: var(--gold2); border-color: var(--gold); box-shadow: none }

/* 自訂語言選單:深色金框,符合整體 UI */
.lang-dd { position: relative }

.lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  min-width: 112px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #15120c;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .6);
}

.lang-menu li {
  padding: 8px 12px;
  border-radius: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}

.lang-menu li:hover { background: var(--soft); color: var(--gold2) }
.lang-menu li.active { color: var(--gold2) }
.lang-menu li.active::after { content: "✦"; margin-left: 8px; font-size: 9px; color: var(--gold) }

/* 自我介紹:支援換行與 emoji */
.side-col .brand p { margin: 12px 0 0; color: var(--muted); font-size: 13px; line-height: 1.8; white-space: pre-line; overflow-wrap: anywhere }

/* 聯絡留言:比照遊玩設定,無框粉色文字 + 兩側粉色藤蔓線條 */
.contact-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  background: transparent;
  color: #e78fa3;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 2px;
  padding: 6px 0;
  cursor: pointer;
  transition: color .16s ease, text-shadow .16s ease;
}

.contact-trigger::before, .contact-trigger::after {
  content: "";
  flex: 1;
  height: 14px;
  opacity: .85;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='14' viewBox='0 0 120 14' fill='none'%3E%3Cpath d='M0 7 H74' stroke='%23e78fa3' stroke-width='1'/%3E%3Cpath d='M74 7 C84 7 88 2.5 96 2.5 C103 2.5 106 5.5 106 8 C106 10.2 104 11.4 102.4 10.6 C100.8 9.8 100.9 7.6 102.6 7.1' stroke='%23e78fa3' stroke-width='1.1' stroke-linecap='round'/%3E%3Ccircle cx='113' cy='7' r='1.7' fill='%23e78fa3'/%3E%3C/svg%3E") no-repeat right center;
  transition: filter .18s ease, opacity .18s ease;
}

.contact-trigger::after { transform: scaleX(-1) }

.contact-trigger:hover { color: #ffc7d4; text-shadow: 0 0 14px rgba(231, 143, 163, .65) }
.contact-trigger:hover::before, .contact-trigger:hover::after { opacity: 1; filter: drop-shadow(0 0 3px rgba(231, 143, 163, .85)) brightness(1.25) }

/* 社群文字連結 + 搜尋 icon */
.side-links { display: flex; align-items: center; gap: 10px }

.side-links .social-link {
  border: 0;
  padding: 0;
  min-height: 0;
  background: none;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  text-decoration: none;
  transition: color .15s ease;
}

.side-links .social-link:hover, .side-links .social-link:focus-visible { color: #e78fa3; background: none }
.side-dot { color: #4a3b20 }

.search-icon {
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--gold2);
  font-size: 20px;
  font-weight: 900;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.search-icon:hover { background: var(--soft); color: #fff }

.side-col .search-input { width: 100%; min-height: 40px }
.search-input.collapsed { display: none }

/* 主分頁:無框文字按鈕,✦ 標記目前位置 */
.side-tabs { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid rgba(74, 59, 32, .45); padding-top: 14px }

.side-tabs .tab-button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 3px;
  padding: 11px 8px;
  cursor: pointer;
  text-align: left;
  transition: color .16s ease, transform .16s ease;
}

.side-tabs .tab-button::before { content: "✦"; font-size: 11px; color: transparent; transition: color .16s ease }
.side-tabs .tab-button:hover { color: var(--gold2); background: transparent; border: 0; transform: translateX(3px) }
.side-tabs .tab-button.active { color: var(--gold2); background: transparent; border: 0 }
.side-tabs .tab-button.active::before { color: var(--gold) }

.side-foot { margin-top: auto; border-top: 1px solid rgba(74, 59, 32, .45); padding-top: 14px; color: #5f5338; font-size: 12px }

.main-col { min-width: 0 }

/* 資料載入提示:置中,動畫在第一行、文字在第二行 */
.notice { margin: 0 0 14px; color: var(--muted); line-height: 1.55 }

.notice.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 56vh;
  margin: 0;
  text-align: center;
}

.notice.loading .load-text { letter-spacing: 3px; font-size: 14px }

/* 讀取中:左欄與所有卡片內容整個隱藏,畫面只剩置中的讀取動態 */
body.page-loading .side-col { display: none }
body.page-loading .layout { display: block }
body.page-loading .notice.loading { min-height: 92vh }
body.page-loading #charCatBar,
body.page-loading #charSections,
body.page-loading #toolGrid,
body.page-loading #emptyState { display: none !important }

.load-dots { display: inline-flex; gap: 8px; vertical-align: middle }
.load-dots span { display: inline-block; color: var(--gold); font-size: 16px; animation: loadPulse 1.1s ease-in-out infinite }
.load-dots span:nth-child(2) { animation-delay: .18s }
.load-dots span:nth-child(3) { animation-delay: .36s }

@keyframes loadPulse {
  0%, 100% { opacity: .2; transform: scale(.75) rotate(0deg) }
  50% { opacity: 1; transform: scale(1.2) rotate(72deg) }
}

.tabs { display: flex; flex-wrap: wrap; gap: 8px }

.tab-button {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(21, 18, 12, .88);
  color: var(--muted);
  padding: 0 16px;
  cursor: pointer;
  font-weight: 900;
}

.tab-button:hover, .tab-button:focus-visible { border-color: var(--gold); color: var(--gold2); outline: none }
.tab-button.active { border-color: var(--gold); background: var(--gold); color: #130f08 }

.site-footer { margin-top: 42px; border-top: 1px solid var(--line); padding-top: 18px; color: var(--muted); font-size: 13px; text-align: center }

/* ---------- 角色卡分類 TAB(sticky 錨點導覽) ---------- */

/* 分類 TAB 列:底色與頁面背景一致,不做出獨立色塊感 */
.char-cat-tabs {
  position: sticky;
  top: 0;
  z-index: 15;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 22px;
  border-bottom: 1px solid rgba(74, 59, 32, .55);
  background: var(--bg);
}

/* 三個分類直向排列,各自一列書櫃 */
.char-sections { display: grid; gap: 38px }
.cat-section { min-width: 0; scroll-margin-top: 66px }
.cat-section .shelf-wrap { min-width: 0 }

.cat-section-title { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--gold2); font-size: 18px; font-weight: 900; letter-spacing: 2px }
.cat-section-title::before { content: "✦"; color: var(--gold); font-size: 13px }
.cat-section-title .cat-count { font-size: 12px; color: #8f805f; font-weight: 800 }

.cat-empty { margin: 2px 0 0; color: #6b5c39; font-size: 13px }

.cat-tab {
  position: relative;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 800;
  font-size: 15px;
  padding: 10px 16px 12px;
  cursor: pointer;
  transition: color .15s ease;
}

.cat-tab::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: transparent;
  transition: background .15s ease;
}

.cat-tab:hover { color: var(--gold2) }
.cat-tab.active { color: var(--gold2) }
.cat-tab.active::after { background: var(--gold) }

.cat-count { margin-left: 7px; font-size: 11px; font-weight: 800; color: #8f805f }
.cat-tab.active .cat-count { color: var(--gold) }

/* ---------- 卡片列表 ---------- */

.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px }

/* 角色卡書櫃:橫向排列 + 捲動/箭頭 */
.shelf-wrap { position: relative }

.grid.shelf {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding: 4px 2px 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(74, 59, 32, .8) transparent;
}

.grid.shelf .tool-card { flex: 0 0 336px; min-height: 0 }

.shelf-arrow {
  position: absolute;
  top: 250px;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(241, 208, 130, .45);
  border-radius: 999px;
  background: rgba(0, 0, 0, .58);
  color: var(--gold2);
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}

.shelf-arrow:hover { background: rgba(215, 170, 69, .24) }
.shelf-arrow.prev { left: -14px }
.shelf-arrow.next { right: -14px }

.empty {
  display: none;
  margin-top: 28px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  padding: 28px;
  text-align: center;
}

.tool-card {
  display: flex;
  min-width: 0;
  min-height: 100%;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(21, 18, 12, .94);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: border-color .16s ease, transform .16s ease, background .16s ease;
}

.tool-card:hover, .tool-card:focus-visible { border-color: var(--gold); background: #1a150d; transform: translateY(-2px); outline: none }

.shot { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: var(--field); border-bottom: 1px solid var(--line) }
.shot > img { width: 100%; height: 100%; display: block; object-fit: cover }

/* 卡片圖片 slide */
.card-carousel {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.card-carousel::-webkit-scrollbar { display: none }
.card-slide { flex: 0 0 100%; width: 100%; height: 100%; scroll-snap-align: center; scroll-snap-stop: always }
.card-slide img { width: 100%; height: 100%; display: block; object-fit: cover }

.card-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(241, 208, 130, .5);
  border-radius: 999px;
  background: rgba(0, 0, 0, .5);
  color: var(--gold2);
  font-size: 19px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  opacity: .6;
  transition: opacity .15s ease, background .15s ease;
  backdrop-filter: blur(4px);
}

.tool-card:hover .card-arrow, .card-arrow:focus-visible { opacity: 1 }
.card-arrow:hover { background: rgba(215, 170, 69, .28) }
.card-arrow.prev { left: 8px }
.card-arrow.next { right: 8px }

.card-dots {
  position: absolute;
  left: 50%;
  bottom: 8px;
  z-index: 2;
  display: flex;
  gap: 5px;
  transform: translateX(-50%);
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .38);
  backdrop-filter: blur(4px);
}

.card-dots span { width: 6px; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .4); transition: background .15s ease, transform .15s ease }
.card-dots span.active { background: var(--gold2); transform: scale(1.2) }

.shot-placeholder, .gallery-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 210px;
  padding: 18px;
  background: linear-gradient(145deg, #090806 0%, #1d170d 58%, #34270f 100%);
  color: var(--gold2);
  text-align: center;
  line-height: 1.55;
}

.shot-placeholder span, .gallery-placeholder span { display: block; max-width: 280px; color: var(--muted); font-size: 13px }

/* 最新標籤:霧面深色膠囊 + 細金邊,淺色圖片底也可讀;
   文字不呼吸,只有金色光暈緩慢不規則閃爍 */
.status {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(241, 208, 130, .3);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(12, 10, 7, .72), rgba(12, 10, 7, .5));
  backdrop-filter: blur(7px);
  color: var(--gold2);
  padding: 5px 13px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 3px;
  text-indent: 3px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
  animation: statusFlicker 5.6s linear infinite;
}

html[lang="en"] .status { font-family: "Great Vibes", "Segoe Script", cursive; font-size: 19px; font-weight: 400; letter-spacing: 1px; text-indent: 0; padding: 4px 14px 6px }

@keyframes statusFlicker {
  0%, 100%, 30%, 62% { text-shadow: 0 0 8px rgba(241, 208, 130, .35), 0 0 16px rgba(241, 208, 130, .12) }
  12%, 48% { text-shadow: 0 0 3px rgba(241, 208, 130, .12) }
  20%, 72% { text-shadow: 0 0 12px rgba(241, 208, 130, .85), 0 0 26px rgba(241, 208, 130, .45) }
  40%, 88% { text-shadow: 0 0 16px rgba(241, 208, 130, 1), 0 0 34px rgba(241, 208, 130, .6) }
  80% { text-shadow: 0 0 2px rgba(241, 208, 130, .08) }
}

.status::before, .status::after {
  content: "";
  width: 20px;
  height: 1px;
  background: linear-gradient(90deg, rgba(241, 208, 130, 0), var(--gold2));
  box-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}

.status::after { background: linear-gradient(90deg, var(--gold2), rgba(241, 208, 130, 0)) }


.card-body { display: flex; flex: 1; flex-direction: column; padding: 16px }
.meta, .modal-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; color: var(--muted); font-size: 13px }
.type { color: var(--gold2); font-weight: 800 }
.tool-card h2 { margin: 10px 0 8px; font-size: 19px; line-height: 1.32 }
.tool-card p { margin: 0 0 14px; color: var(--muted); line-height: 1.65; overflow-wrap: anywhere }

.parent-info { margin: 0 0 8px; color: var(--gold2); font-size: 12px; font-weight: 900; letter-spacing: 1px }

.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 4px }
.tags:empty { display: none }
.tag { border: 1px solid var(--line); border-radius: 6px; color: #dfc98f; padding: 4px 9px; font-size: 12px }

.hint { margin-top: 15px; border-top: 1px solid var(--line); padding-top: 12px; color: var(--gold2); font-size: 13px; font-weight: 800 }

/* ---------- 角色卡(書封式) ---------- */

/* 圖片下緣以漸層淡入卡片背景;尾段提早收滿不透明,避免亮色像素在交界形成一條線 */
.char-card { background: #16130d }
/* margin-bottom:-1px 讓圖片與內文區重疊 1px,hover 位移時不會露出接縫線 */
.char-card .shot { aspect-ratio: 2 / 3; border-bottom: 0; background: #16130d; margin-bottom: -1px }

.char-card .shot::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 46%;
  background: linear-gradient(180deg, rgba(22, 19, 13, 0) 0%, rgba(22, 19, 13, .55) 46%, rgba(22, 19, 13, .94) 76%, #16130d 88%, #16130d 100%);
  pointer-events: none;
  z-index: 1;
}

.char-card:hover { background: #16130d }
.char-card .card-body { padding: 8px 20px 18px }
.char-card h2 { margin: 0 0 12px; font-size: 20px }
.char-card .tags { margin: 0 0 16px; padding-top: 0 }
.char-card p { margin: 0 0 16px; line-height: 1.7 }

/* 卡片摘要:縮小版 markdown;TAG 與摘要之間留大距離 */
.char-card .tags { margin-bottom: 24px }
.char-card .card-md { margin: 0 0 16px; font-size: 13.5px; line-height: 1.75; color: var(--muted) }
.char-card .card-md p { margin: 6px 0; line-height: 1.75; color: var(--muted) }
.char-card .card-md h3 { margin: 18px 0 7px; font-size: 15px }
.char-card .card-md h4 { margin: 8px 0 5px; font-size: 14px }
.char-card .card-md > :first-child { margin-top: 0 }
.char-card .card-md > :last-child { margin-bottom: 0 }

/* TAG:金色調方形圓角,和其他文字做出區分 */
.char-card .tag, .modal-content .tag {
  background: rgba(215, 170, 69, .12);
  border: 1px solid rgba(215, 170, 69, .28);
  color: var(--gold2);
  font-weight: 700;
}

/* 評分:開放式排列,不加框(只出現在詳細彈窗) */
.char-ratings { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 14px }
.rating-cell { display: flex; align-items: center; gap: 9px }
.rating-label { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: 1.5px }

.rating-stars {
  color: var(--gold2);
  letter-spacing: 3px;
  font-size: 14px;
  line-height: 1;
  text-shadow: 0 0 10px rgba(241, 208, 130, .3);
  white-space: nowrap;
}

.rating-stars.nsfw { color: #e78fa3; text-shadow: 0 0 10px rgba(231, 143, 163, .3) }
.empty-star { color: #39301d; text-shadow: none }
.rating-stars.nsfw .empty-star { color: #3a262b }

/* 卡片置底:新藝術花紋兩側延伸 + 無邊框置中「遊玩設定」;整個區域可點、hover 連花紋一起發光 */
.card-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; cursor: pointer }

.card-foot::before, .card-foot::after {
  content: "";
  flex: 1;
  height: 14px;
  opacity: .85;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='14' viewBox='0 0 120 14' fill='none'%3E%3Cpath d='M0 7 H74' stroke='%23c9a24a' stroke-width='1'/%3E%3Cpath d='M74 7 C84 7 88 2.5 96 2.5 C103 2.5 106 5.5 106 8 C106 10.2 104 11.4 102.4 10.6 C100.8 9.8 100.9 7.6 102.6 7.1' stroke='%23c9a24a' stroke-width='1.1' stroke-linecap='round'/%3E%3Ccircle cx='113' cy='7' r='1.7' fill='%23c9a24a'/%3E%3C/svg%3E") no-repeat right center;
  transition: filter .18s ease, opacity .18s ease;
}

.card-foot::after { transform: scaleX(-1) }

.card-foot:hover::before, .card-foot:hover::after {
  opacity: 1;
  filter: drop-shadow(0 0 3px rgba(241, 208, 130, .85)) brightness(1.35);
}

.setting-link {
  border: 0;
  background: transparent;
  color: var(--gold2);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 4px;
  text-indent: 4px;
  padding: 6px 2px;
  cursor: pointer;
  transition: color .16s ease, text-shadow .16s ease;
}

.card-foot:hover .setting-link { color: #fff; text-shadow: 0 0 14px rgba(241, 208, 130, .6) }

/* hover 整張卡片時遊玩設定也發光 */
.tool-card:hover .setting-link { color: #fff; text-shadow: 0 0 14px rgba(241, 208, 130, .6) }
.tool-card:hover .card-foot::before, .tool-card:hover .card-foot::after {
  opacity: 1;
  filter: drop-shadow(0 0 3px rgba(241, 208, 130, .85)) brightness(1.35);
}

/* ---------- 詳細彈窗 ---------- */

.modal-backdrop, .lightbox-backdrop {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .82);
  padding: 22px;
  z-index: 30;
}

.modal-backdrop.open, .lightbox-backdrop.open { display: flex }

.modal {
  position: relative;
  width: min(1240px, 100%);
  max-height: min(92vh, 900px);
  overflow: visible;
  border: 1px solid rgba(241, 208, 130, .42);
  border-radius: 10px;
  background: #0d0b08;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .64);
}

/* 關閉鈕浮在彈窗外角,不遮內容 */
.close-button, .lightbox-close {
  position: absolute;
  top: -16px;
  right: -16px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #1a150d;
  color: var(--gold2);
  cursor: pointer;
  z-index: 8;
  font-weight: 900;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .6);
}

.close-button:hover, .lightbox-close:hover { border-color: var(--gold); background: var(--soft) }
.lightbox-close { top: 0; right: 0 }

.modal-grid {
  display: grid;
  grid-template-columns: minmax(380px, 1.02fr) minmax(340px, .98fr);
  max-height: min(92vh, 900px);
  border-radius: 9px;
  overflow: hidden;
}

/* 左側:全部圖片直向展開,可捲動,點圖放大;媒體 TAB 捲動時恆置頂 */
.modal-media {
  display: flex;
  flex-direction: column;
  max-height: min(92vh, 900px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #050504;
  border-right: 1px solid var(--line);
  padding: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) #0f0d09;
}

/* HTML 模式:iframe 撐滿整個左欄,無內距無圓角 */
.modal-media.html-mode { overflow: hidden }

.gallery { display: grid; gap: 14px; align-content: start; padding: 16px }
.media-tabs:not([hidden]) + .gallery { padding-top: 8px }

.gallery-item {
  display: block;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #050504;
  padding: 0;
  overflow: hidden;
  cursor: zoom-in;
  transition: border-color .15s ease;
}

.gallery-item:hover, .gallery-item:focus-visible { border-color: var(--gold); outline: none }
.gallery-item img { display: block; width: 100%; height: auto }
.gallery-placeholder { min-height: 340px; border-radius: 8px }

.modal-content {
  position: relative;
  min-width: 0;
  max-height: min(92vh, 900px);
  overflow-y: auto;
  padding: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) #0f0d09;
}

.modal-head { padding: 24px 48px 0 26px }
.modal-body { padding: 6px 48px 30px 26px }

/* 標題下的藤蔓線條裝飾(加長版) */
.modal-head h2::after {
  content: "";
  display: block;
  height: 14px;
  margin: 10px 0 2px;
  opacity: .9;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='14' viewBox='0 0 150 14' fill='none'%3E%3Cpath d='M0 7 H104' stroke='%23c9a24a' stroke-width='1'/%3E%3Cpath d='M104 7 C114 7 118 2.5 126 2.5 C133 2.5 136 5.5 136 8 C136 10.2 134 11.4 132.4 10.6 C130.8 9.8 130.9 7.6 132.6 7.1' stroke='%23c9a24a' stroke-width='1.1' stroke-linecap='round'/%3E%3Ccircle cx='143' cy='7' r='1.7' fill='%23c9a24a'/%3E%3C/svg%3E") no-repeat left center;
}

.modal-content h2 { margin: 12px 0 12px; color: var(--gold2); font-size: clamp(26px, 3vw, 36px); line-height: 1.16 }
.modal-summary { margin: 0 0 16px; color: var(--muted); line-height: 1.75 }

/* 角色卡彈窗:kicker 分類粗體;PROJECT 在標題下方(細體) */
#modalCategory { font-weight: 900; color: #d8c8a2; letter-spacing: 1px }
.modal-project { display: block; margin: -6px 0 0; color: #e78fa3; font-size: 12px; font-weight: 400; letter-spacing: 1px }
.modal-content .tags { margin: 0 0 21px; padding-top: 0 }

/* 摘要:支援 markdown 的縮小版 */
.modal-summary.markdown { margin: 0 0 4px; font-size: 14px; line-height: 1.8; color: #d8cbae }
.modal-summary.markdown p { margin: 8px 0; color: #d8cbae }
.modal-summary.markdown > :first-child { margin-top: 0 }

/* 玩家身分 / 遊玩重點:金色漸層底色區塊,左右並排 */
.modal-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 28px 0 0 }

.meta-cell {
  display: grid;
  gap: 8px;
  align-content: start;
  border-radius: 10px;
  padding: 13px 15px;
  background: linear-gradient(135deg, rgba(215, 170, 69, .16), rgba(215, 170, 69, .03) 72%);
}

.meta-cell .meta-label { color: var(--gold2); font-size: 15px; font-weight: 900; letter-spacing: 2px }
.meta-cell .meta-value { color: #e2d5b8; font-size: 14px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere }
/* 評分:摘要上方同一行並排,加重強調 */
.modal-ratings { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px 34px; margin: 28px 0 28px }
.modal-ratings .rating-cell { gap: 12px }

.modal-ratings .rating-cell::before {
  content: "";
  width: 3px;
  height: 19px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--gold), rgba(215, 170, 69, 0));
}

.modal-ratings .rating-label {
  font-size: 15px;
  letter-spacing: 2px;
  color: var(--gold2);
  font-weight: 900;
}

.modal-ratings .rating-stars { font-size: 22px; letter-spacing: 6px; text-shadow: 0 0 12px rgba(241, 208, 130, .35) }
.modal-ratings .rating-stars.nsfw { text-shadow: 0 0 12px rgba(231, 143, 163, .35) }

.modal-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 48px 14px 26px }
.modal-actions .tag { align-self: center }

/* 角色卡按鈕列:右欄捲動時只有這一列恆置頂 */
.modal-actions.char-actions {
  position: sticky;
  top: 0;
  z-index: 6;
  justify-content: flex-end;
  gap: 18px;
  margin: 20px 0 0;
  padding: 14px 48px 10px 26px;
  background: rgba(13, 11, 8, .95);
  backdrop-filter: blur(6px);
}

.modal-actions:empty { display: none }

/* 角色卡平台連結:無框文字 + 金色細底線 + ↗,hover 發光 */
.modal-actions.char-actions .button {
  min-height: 0;
  padding: 4px 2px 7px;
  border: 0;
  border-bottom: 1px solid rgba(215, 170, 69, .4);
  border-radius: 0;
  background: transparent;
  color: var(--gold2);
  letter-spacing: 2px;
  font-weight: 900;
  transition: color .16s ease, border-color .16s ease, text-shadow .16s ease;
}

.modal-actions.char-actions a.button::after { content: "↗"; margin-left: 7px; font-size: 12px; opacity: .75 }

.modal-actions.char-actions .button:hover {
  background: transparent;
  transform: none;
  color: #fff;
  border-color: var(--gold2);
  text-shadow: 0 0 12px rgba(241, 208, 130, .6);
}

/* 左欄媒體切換 TAB:無框文字 + 底線標記,捲動時恆置頂 */
.media-tabs {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 10px 10px 4px;
  background: rgba(5, 5, 4, .92);
  backdrop-filter: blur(6px);
}

.media-tab {
  position: relative;
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 8px 16px 11px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  cursor: pointer;
  transition: color .15s ease;
}

.media-tab::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: transparent;
  transition: background .15s ease;
}

.media-tab:hover { color: var(--gold2) }
.media-tab.active { color: var(--gold2) }
.media-tab.active::after { background: var(--gold) }

.modal-html-frame { flex: 1; width: 100%; min-height: 420px; border: 0; border-radius: 0; background: #fff }

/* 手機版頂部橫幅(桌機不顯示):第一張圖裁切局部滿版,右下角提示 */
.modal-banner {
  display: none;
  position: relative;
  width: 100%;
  border: 0;
  padding: 0;
  background: #050504;
  cursor: pointer;
}

.modal-banner img { display: block; width: 100%; height: 190px; object-fit: cover }

.banner-hint {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid rgba(241, 208, 130, .35);
  background: rgba(0, 0, 0, .58);
  color: var(--gold2);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  backdrop-filter: blur(5px);
}

/* 回到最上面浮動按鈕(手機捲動時出現) */
.modal-top-btn {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 66;
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(241, 208, 130, .45);
  border-radius: 50%;
  background: rgba(13, 11, 8, .88);
  color: var(--gold2);
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .55);
  backdrop-filter: blur(6px);
}

/* 更新日期:上方改藝術裝飾線(與標題下的方向相反,捲曲在左) */
.modal-updated { margin: 10px 48px 0 26px; padding: 2px 0 4px; color: var(--muted); font-size: 12px; text-align: right }

.modal-updated::before {
  content: "";
  display: block;
  height: 14px;
  margin: 0 0 8px;
  opacity: .85;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='14' viewBox='0 0 340 14' fill='none'%3E%3Cpath d='M0 7 H294' stroke='%23c9a24a' stroke-width='1'/%3E%3Cpath d='M294 7 C304 7 308 2.5 316 2.5 C323 2.5 326 5.5 326 8 C326 10.2 324 11.4 322.4 10.6 C320.8 9.8 320.9 7.6 322.6 7.1' stroke='%23c9a24a' stroke-width='1.1' stroke-linecap='round'/%3E%3Ccircle cx='333' cy='7' r='1.7' fill='%23c9a24a'/%3E%3C/svg%3E") no-repeat left center;
  transform: scaleX(-1);
}

/* ---------- Markdown 內容階層 ----------
   # 大標:金色左邊線;## 中標:金字+寬字距;### 小標
   - 列點:✦;* 行:小字粗體金色;+ 行:縮排;<b>:粉色;> 引用框 */

.markdown { margin-top: 4px; color: #e9ddc3; font-size: 15px; line-height: 1.9; overflow-wrap: anywhere }

.markdown h3, .markdown h4, .markdown h5 { color: var(--gold2); line-height: 1.35; letter-spacing: 1px }

/* #:大標 */
.markdown h3 {
  margin: 25px 0 14px;
  font-size: 20px;
  border-left: 3px solid var(--gold);
  padding: 2px 0 2px 12px;
}

.markdown h3:first-child { margin-top: 8px }

/* # 大標預設折疊:點擊標題展開/收合底下內容 */
.markdown h3.md-section-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.markdown h3.md-section-heading:hover { color: #fff }

.md-section-chev {
  font-size: 12px;
  color: var(--gold);
  transition: transform .18s ease;
  flex: 0 0 auto;
}

.markdown h3.md-section-heading.open .md-section-chev { transform: rotate(90deg) }

.md-section-body { overflow: hidden }
.md-section-body.collapsed { display: none }

/* ##:中標,短底線收尾(與上方拉開、貼近下方內文) */
.markdown h4 {
  display: inline-block;
  margin: 14px 0 5px;
  font-size: 17px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(215, 170, 69, .4);
}

.markdown h5 { margin: 24px 0 8px; font-size: 15px; color: #dfc98f }

.markdown p { margin: 12px 0; line-height: 1.9 }
.markdown strong { color: var(--gold2) }
.markdown em { color: #cfc0a0 }

.markdown ol { margin: 10px 0 16px; padding-left: 24px }
.markdown li { margin: 7px 0; line-height: 1.75 }

/* - 列點:✦ 金色符號(與上方文字間距 = 一般行距的兩倍) */
.markdown ul { list-style: none; margin: 22px 0 4px; padding-left: 4px }
.markdown ul li { position: relative; padding-left: 20px }
.markdown ul li::before { content: "✦"; position: absolute; left: 0; top: 3px; color: var(--gold); font-size: .8em }
.markdown ul + p { margin-top: 4px }

/* -- 開頭:縮排續行,顯示一個 - */
.markdown .md-dash { position: relative; margin: 2px 0; padding-left: 24px; line-height: 1.9 }
.markdown .md-dash::before { content: "-"; position: absolute; left: 12px; color: #9b8b64 }

/* * 開頭:小字粗體變色註記行;-* 開頭:縮排版
   連續的 * 行之間 margin 相抵,間距=段落內換行的行距 */
.markdown .md-star { margin: -7px 0 12px; color: var(--gold); font-size: .84em; font-weight: 800; letter-spacing: .5px; line-height: 1.9 }
.markdown .md-star + .md-star { margin-top: -12px }
.markdown .md-star.md-indent { padding-left: 24px }

/* * 和 - 含「:」的懸掛縮排:自動換行的第二行對齊「:」後方 */
.markdown .colon-line { display: flex; align-items: flex-start }
.markdown .colon-line .prefix { flex: 0 0 auto; white-space: pre }
.markdown .colon-line > span:last-child { flex: 1 1 0; min-width: 0 }

/* + 開頭:縮排補充行 */
.markdown .md-plus { margin: 3px 0 3px 1.6em; color: #d4c6a6; font-size: .95em; line-height: 1.75 }

/* <b>:粉色強調 */
.markdown b { color: #e78fa3; font-weight: 700 }

/* > 引用:金色底色(明顯版),文字偏黃 */
.markdown blockquote {
  margin: 16px 0;
  border-left: 3px solid var(--gold);
  background: var(--soft);
  border-radius: 0 8px 8px 0;
  padding: 11px 14px;
  color: #f2d68a;
  line-height: 1.8;
}

/* +> 縮排的引用區塊 */
.markdown blockquote.bq-indent { margin-left: 2em }

.markdown a { color: var(--gold2) }

.markdown code, .code-panel code {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #080806;
  color: #f0d083;
  padding: 2px 5px;
  font-family: Consolas, "Courier New", monospace;
  font-size: .95em;
}

.markdown pre, .code-panel pre { overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: #080806; padding: 13px }
.markdown pre code, .code-panel pre code { border: 0; padding: 0; background: transparent }

.code-panel { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px }
.code-panel h3 { margin: 0 0 10px; color: var(--gold2); font-size: 17px }

/* ---------- 聯絡留言表單彈窗 ---------- */

.form-backdrop { z-index: 40 }

.form-modal {
  width: min(720px, 100%);
  max-height: 90vh;
  background: #111;
  padding: 52px 12px 12px;
  overflow: hidden;
}

.form-iframe {
  display: block;
  width: 100%;
  height: min(76vh, 640px);
  border: 0;
  border-radius: 8px;
  background: #fff;
  filter: invert(90%) hue-rotate(180deg);
}

/* ---------- 燈箱(放大圖片,可左右切換) ---------- */

.lightbox-backdrop { z-index: 50; padding: 18px }
.lightbox { position: relative; width: min(1200px, 100%); max-height: 94vh; display: grid; gap: 10px; margin: 0 }

.lightbox img {
  display: block;
  max-width: 100%;
  max-height: 84vh;
  margin: 0 auto;
  border: 1px solid rgba(241, 208, 130, .42);
  border-radius: 8px;
  object-fit: contain;
  background: #050504;
}

.lightbox-caption { margin: 0; color: var(--gold2); text-align: center; line-height: 1.5 }

.lightbox-nav {
  position: absolute;
  top: 50%;
  z-index: 4;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(241, 208, 130, .45);
  border-radius: 999px;
  background: rgba(0, 0, 0, .5);
  color: var(--gold2);
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(6px);
}

.lightbox-nav:hover { background: rgba(215, 170, 69, .22) }
.lightbox-nav.prev { left: 10px }
.lightbox-nav.next { right: 10px }

.lightbox-counter {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 4;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(241, 208, 130, .35);
  background: rgba(0, 0, 0, .5);
  color: var(--gold2);
  font-size: 12px;
  font-weight: 800;
}

/* ---------- 後台:版面 ---------- */

.admin-page { width: min(1360px, calc(100% - 32px)) }
.admin-page .topbar { margin-bottom: 18px; padding-bottom: 18px }
.admin-page .brand h1 { font-size: clamp(24px, 3vw, 34px); margin-bottom: 6px }

/* 右上角:其他設定 + 管理密鑰 */
.topbar-tools { display: flex; gap: 10px; margin-left: auto; align-self: center }
.token-box { position: relative; align-self: center; margin-left: auto }
.topbar-tools .token-box { margin-left: 0 }
.settings-pop { width: min(400px, 90vw); gap: 16px }

.token-box summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(21, 18, 12, .9);
  color: var(--muted);
  cursor: pointer;
  font-weight: 800;
  user-select: none;
  white-space: nowrap;
}

.token-box summary::-webkit-details-marker { display: none }
.token-box summary:hover { border-color: var(--gold); color: var(--gold2) }
.token-box[open] summary { border-color: var(--gold); color: var(--gold2) }

.token-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 6px rgba(214, 109, 109, .6); flex: 0 0 auto }
.token-box.has-token .token-dot { background: var(--ok); box-shadow: 0 0 6px rgba(143, 201, 143, .6) }

.token-pop {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 25;
  width: min(360px, 86vw);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: 14px;
  display: grid;
  gap: 8px;
}

.token-pop label { color: var(--muted); font-size: 13px }

.editor-layout { display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); gap: 18px; align-items: start }

.panel {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(21, 18, 12, .94);
  box-shadow: var(--shadow);
  padding: 16px;
}

/* ---------- 後台:左側卡片清單 ---------- */

.admin-sidebar {
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: calc(100vh - 32px);
  overflow: hidden;
}

.admin-section-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }

.admin-section-tab {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field);
  color: var(--muted);
  cursor: pointer;
  font-weight: 900;
}

.admin-section-tab:hover { border-color: var(--gold); color: var(--gold2) }
.admin-section-tab.active { border-color: var(--gold); background: var(--gold); color: #130f08 }

.full-button { width: 100% }

.card-list-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 13px }

.ghost-button { border: 0; background: transparent; color: var(--gold2); cursor: pointer; font-size: 13px; font-weight: 800; padding: 4px 6px; border-radius: 6px }
.ghost-button:hover { background: var(--soft) }

input.card-search { min-height: 38px; font-size: 14px }

.card-list {
  flex: 1;
  min-height: 140px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 2px;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) #0f0d09;
}

.list-empty { margin: 6px 2px }

.card-list-item { display: grid; grid-template-columns: minmax(0, 1fr) 34px; gap: 6px; align-items: stretch; flex: 0 0 auto }

.card-list-main {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0b0906;
  color: var(--ink);
  padding: 8px;
  text-align: left;
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease;
}

.card-list-main:hover { border-color: var(--gold); background: var(--soft) }
.card-list-item.active .card-list-main { border-color: var(--gold); background: var(--soft); box-shadow: inset 0 0 0 1px var(--gold) }

.card-list-thumb {
  width: 56px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: linear-gradient(145deg, #090806, #241b0d);
  display: grid;
  place-items: center;
  color: #6b5c39;
  font-size: 15px;
}

.card-list-thumb img { width: 100%; height: 100%; object-fit: cover; display: block }

.card-list-info { min-width: 0; display: grid; gap: 3px }
.card-list-info strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 1.3 }
.card-list-sub { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--muted); font-size: 12px }
.card-list-sub .sub-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

.hidden-badge { flex: 0 0 auto; border: 1px solid rgba(214, 109, 109, .5); border-radius: 999px; color: #f0a0a0; padding: 1px 7px; font-size: 11px; font-weight: 800 }

.delete-card-button {
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #7a6a4a;
  cursor: pointer;
  font-weight: 900;
  transition: color .14s ease, border-color .14s ease, background .14s ease;
}

.delete-card-button:hover { border-color: rgba(214, 109, 109, .55); color: #f0a0a0; background: rgba(214, 109, 109, .12) }

.category-manager { border-top: 1px solid var(--line); padding-top: 12px }
.inline-field { display: grid; grid-template-columns: 1fr 42px; gap: 8px }
.icon-action { min-width: 42px; padding: 0 }

/* ---------- 後台:編輯表單 ---------- */

.editor-form { display: flex; flex-direction: column; gap: 14px; padding: 18px }

.form-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px }
.form-heading h2 { margin: 0 0 4px; color: var(--gold2); font-size: 22px }

.form-section { border: 1px solid var(--line); border-radius: 10px; background: rgba(0, 0, 0, .18); padding: 16px; margin: 0 }

.form-section-title { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; color: var(--gold2); font-size: 15px; font-weight: 900; letter-spacing: 1px }
.form-section-title::before { content: ""; width: 3px; height: 15px; border-radius: 2px; background: var(--gold) }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
.field { display: grid; gap: 6px; align-content: start }
.field.full { grid-column: 1 / -1 }
.field label { color: var(--muted); font-size: 13px }

/* 顯示在前台 toggle */
.switch-row { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; flex: 0 0 auto; padding-top: 6px }
.switch-row input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none }

.switch {
  position: relative;
  width: 42px;
  height: 23px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #241d10;
  transition: background .16s ease, border-color .16s ease;
  flex: 0 0 auto;
}

.switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform .16s ease, background .16s ease;
}

.switch-row input:checked + .switch { background: var(--gold); border-color: var(--gold) }
.switch-row input:checked + .switch::after { transform: translateX(19px); background: #130f08 }
.switch-row input:focus-visible + .switch { box-shadow: 0 0 0 3px var(--soft) }
.switch-label { color: var(--muted); font-size: 13px; font-weight: 800 }
.switch-row input:checked ~ .switch-label { color: var(--gold2) }

/* 星星評分 */
.star-input {
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field);
  padding: 0 10px;
}

.star-input button {
  border: 0;
  background: transparent;
  color: #453a22;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 3px 4px;
  transition: color .12s ease, transform .12s ease;
}

.star-input button.lit { color: var(--gold2); text-shadow: 0 0 10px rgba(241, 208, 130, .35) }
.star-input button:hover { transform: scale(1.2) }
.star-value { margin-left: auto; color: var(--muted); font-size: 12px; font-weight: 800 }

/* 圖片列編輯器 */
.image-editor { display: grid; gap: 10px; margin-bottom: 10px }
.image-editor:empty { margin-bottom: 0 }

.image-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field);
  padding: 10px;
}

.image-thumb {
  position: relative;
  width: 88px;
  height: 60px;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: linear-gradient(145deg, #090806, #241b0d);
  display: grid;
  place-items: center;
  color: #6b5c39;
  font-size: 11px;
  text-align: center;
}

.image-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }

.image-row-fields { display: grid; gap: 8px; min-width: 0 }
.image-row-fields input { min-height: 38px; font-size: 14px }

.image-row-actions { display: flex; flex-direction: column; gap: 6px }

.icon-button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 0;
  transition: border-color .14s ease, color .14s ease, background .14s ease;
}

.icon-button:hover:not(:disabled) { border-color: var(--gold); color: var(--gold2); background: var(--soft) }
.icon-button:disabled { opacity: .3; cursor: default }
.icon-button.danger:hover:not(:disabled) { border-color: rgba(214, 109, 109, .55); color: #f0a0a0; background: rgba(214, 109, 109, .12) }

.add-image-button { width: 100% }

/* Markdown 編輯/預覽 TAB 切換 */
.edit-tabs { display: inline-flex; gap: 4px; margin-left: 14px; margin-right: auto }

.edit-tab {
  min-height: 26px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: color .14s ease, border-color .14s ease, background .14s ease;
}

.edit-tab:hover { color: var(--gold2) }
.edit-tab.active { border-color: var(--gold); color: var(--gold2); background: var(--soft) }

.md-preview {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(0, 0, 0, .2);
  padding: 4px 16px 16px;
  min-height: 240px;
  max-height: 520px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(74, 59, 32, .8) transparent;
}

/* ID 行內編輯 */
#idPreview { cursor: pointer; border-bottom: 1px dashed rgba(74, 59, 32, .7) }
#idPreview:hover { color: var(--gold2); border-bottom-color: var(--gold) }
.id-edit-input { width: 260px; min-height: 30px; padding: 0 8px; font-size: 13px }

/* 分類/類型管理清單 */
.taxonomy-list { display: grid; gap: 5px; margin-top: 8px; max-height: 180px; overflow-y: auto }

.taxonomy-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid rgba(74, 59, 32, .5);
  border-radius: 6px;
  background: rgba(0, 0, 0, .2);
  padding: 6px 10px;
  font-size: 13px;
}

.taxonomy-row.fixed { opacity: .65 }
.taxonomy-fixed-note { color: #7a6c4b; font-size: 11px }
.taxonomy-row .delete-card-button { width: 24px; height: 24px; line-height: 1 }

/* 卡片清單拖曳排序 */
.card-list-item[draggable="true"] { cursor: grab }
.card-list-item.dragging { opacity: .4 }
.card-list-item.drag-over .card-list-main { border-color: var(--gold); box-shadow: 0 -2px 0 var(--gold) }

/* 內容語言切換(三語內容欄位) */
.content-lang-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border: 1px solid rgba(74, 59, 32, .5); border-radius: 8px; background: rgba(0, 0, 0, .2); padding: 9px 12px }
.content-lang-tabs { display: flex; gap: 4px }

.lang-tab {
  min-height: 28px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: color .14s ease, border-color .14s ease, background .14s ease;
}

.lang-tab:hover { color: var(--gold2) }
.lang-tab.active { border-color: var(--gold); color: var(--gold2); background: var(--soft) }

/* Markdown 語法按鈕列 */
.field-head { display: flex; align-items: center; justify-content: space-between; gap: 8px }
.md-toolbar { display: flex; flex-wrap: wrap; gap: 4px }

.md-tool {
  min-width: 30px;
  height: 26px;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--field);
  color: var(--gold2);
  font-size: 12px;
  font-weight: 900;
  font-family: Consolas, "Courier New", monospace;
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease;
}

.md-tool:hover { border-color: var(--gold); background: var(--soft) }

/* 前台自我介紹 */
.site-intro-box { border-top: 1px solid var(--line); padding-top: 12px }
.site-intro-box textarea { min-height: 72px }

/* 底部固定儲存列(無邊框) */
.save-bar {
  position: sticky;
  bottom: 14px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  border: 0;
  border-radius: 10px;
  background: rgba(13, 11, 8, .94);
  backdrop-filter: blur(8px);
  padding: 12px 14px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .5);
}

.dirty-indicator { color: #f0c66d; font-size: 13px; font-weight: 800 }
.save-status { color: #8fc98f; font-size: 13px; font-weight: 800 }

/* 欄位標籤的英/韓文小字 */
.label-sub { margin-left: 6px; color: #7a6c4b; font-size: 11px; font-weight: 700; letter-spacing: .5px }
.save-bar .label-sub { color: rgba(19, 15, 8, .6) }
.save-bar .button[type="submit"] { min-width: 150px }

/* ---------- RWD ---------- */

@media (max-width: 960px) {
  .layout { grid-template-columns: 1fr; gap: 18px }
  .side-col { position: static; min-height: 0; gap: 12px; border-right: 0; padding-right: 0; border-bottom: 1px solid var(--line); padding-bottom: 16px }
  .side-tabs { flex-direction: row }
  .side-tabs .tab-button { width: auto; flex: 1; justify-content: center; text-align: center }
  .side-foot { display: none }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }

  .modal { overflow-y: auto }
  .modal-grid { grid-template-columns: 1fr; max-height: none }
  .modal-media { max-height: none; overflow: visible; border-right: 0; border-bottom: 1px solid var(--line) }
  .modal-content { max-height: none; overflow: visible }
  .modal-content { padding-bottom: 28px }

  /* 手機:media 區改成單張橫幅(第一張圖局部滿版),點擊開燈箱 */
  .modal-media:not(.html-mode) .modal-banner:not([hidden]) { display: block }
  .modal-media:not(.html-mode) .modal-banner:not([hidden]) ~ .gallery { display: none }

  /* 手機:文字區右側間距比照左側 */
  .modal-head { padding: 20px 18px 0 18px }
  .modal-body { padding: 6px 18px 30px 18px }
  .modal-actions { margin: 18px 18px 14px 18px }
  .modal-actions.char-actions { margin: 15px 0 0; padding: 12px 18px 10px 18px }
  .modal-updated { margin: 10px 18px 0 18px }

  /* 手機:✕ 改為固定在畫面右上角,不會被裁切 */
  .close-button { position: fixed; top: 12px; right: 12px }

  /* 手機:回到最上面浮動按鈕 */
  .modal-top-btn.show { display: grid; place-items: center }

  .editor-layout { grid-template-columns: 1fr }
  .admin-sidebar { position: static; max-height: none; overflow: visible }
  .card-list { max-height: 320px }
}

/* 書櫃在窄螢幕改為直向排列,往下滑瀏覽 */
@media (max-width: 768px) {
  .grid.shelf { flex-direction: column; overflow-x: visible; padding: 0 }
  .grid.shelf .tool-card { flex: 0 0 auto; width: 100% }
  .shelf-arrow { display: none !important }
}

@media (max-width: 620px) {
  .page { width: min(100% - 24px, 1180px); padding-top: 22px }
  .topbar { gap: 12px }
  .grid { grid-template-columns: 1fr }
  .cat-tab { padding: 9px 12px 11px; font-size: 14px }

  .modal-backdrop, .lightbox-backdrop { padding: 10px }
  .modal-media { padding: 0 }
  .modal-content { padding: 0 }
  .modal-actions { display: grid }
  .modal-actions .button { width: 100% }

  .lightbox img { max-height: 78vh }
  .lightbox-nav { width: 40px; height: 40px; font-size: 24px }
  .lightbox-nav.prev { left: 4px }
  .lightbox-nav.next { right: 4px }

  .editor-layout { gap: 12px }
  .form-grid { grid-template-columns: 1fr }
  .form-heading { display: grid; gap: 8px }
  .card-list { max-height: 260px }
  .image-row { grid-template-columns: 72px minmax(0, 1fr) }
  .image-thumb { width: 72px; height: 50px }
  .image-row-actions { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end }
  .save-bar { flex-direction: column; align-items: stretch; text-align: center; bottom: 8px }
  .save-bar .button[type="submit"] { width: 100% }
}