/*
 * style.css：整個網站的外觀（顏色、字型、版面、手機／電腦怎麼排）。
 * 視覺主題：「工作台日誌」——深夜藍的工作墊上放著一張張紙條，標籤像暖橘色貼紙。
 *
 * 想改顏色，只要改下面 :root 裡的變數（-- 開頭的那些），全站會一起變。
 *   :root { ... }                              淺色模式用的顏色
 *   @media (prefers-color-scheme: dark) { ... } 深色模式用的顏色（電腦／手機設定成深色時套用）
 */

/* ---------- 顏色與字型變數（淺色模式） ----------
   配色「深夜藍＋暖橘」（跟頭像的藍＋橘一致）：
     墊子（背景）＝ 深夜藍 #283552（v24 調亮一點，跟紙條的反差小一點，比較不刺眼）
     貼紙（選中、標籤、按鈕重點）＝ 暖橘 #E5893A（v24 稍微收斂），上面的字用很深的咖啡色 --sticker-ink
     紅色點綴（愛心、置頂、刪除）＝ 胭脂紅 #C02945（偏玫瑰的紅，跟橘色分得開）
     紙條（貼文）＝ 霧面米色 #ECE5D6（v24 從 #FBF7EF 調暗，減少刺眼）
   v23 以前的淺色：--mat:#1F2A44; --mat-deep:#172036; --on-mat:#F3F5FA; --on-mat-soft:#B4BFD6;
     --paper:#FBF7EF; --ink-soft:#5A5F70; --rule:#E8E1D3; --hover:#F4EEE2; --sticker:#F08A24 */
:root {
  /* 背景：工作墊的顏色、格線顏色、墊子上的文字顏色 */
  --mat: #283552;
  --mat-deep: #1F2A44;
  --mat-line: rgba(220, 230, 255, .06);
  --mat-line-strong: rgba(220, 230, 255, .13);
  --on-mat: #EEF1F7;
  --on-mat-soft: #B2BCD2;

  /* 紙條（每則動態的卡片）：底色、文字、分隔線、滑過時的底色 */
  --paper: #ECE5D6;
  --ink: #1E2230;
  --ink-soft: #4F5464;
  --rule: #DAD2C0;
  --hover: #E3DBC9;

  /* 點綴色：暖橘貼紙、胭脂紅（置頂、愛心）＋紅底上的字＋紅色按鈕滑過的顏色、紙膠帶 */
  --sticker: #E5893A;
  --sticker-ink: #1C0E02;
  --red: #C02945;
  --on-red: #FFFFFF;
  --red-hover: #A0213A;
  --tape: rgba(244, 230, 204, .85);

  /* 深色小方塊（社群連結按鈕、連結預覽圖示）的底色和圖示色 */
  --chip: #0F1526;
  --chip-ink: #F1F3F9;

  /* 紙條下方的影子、內文字型、手寫感字型 */
  --shadow: 0 1px 0 rgba(10, 14, 28, .16), 0 12px 20px -14px rgba(5, 8, 20, .8);
  --font-body: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --font-hand: "LXGW WenKai TC", "Noto Sans TC", "PingFang TC", serif;
  /* only light：告訴瀏覽器「淺色是故意的，不要自動幫我變暗」。
     不加的話，系統是深色、網站切到淺色時，有些瀏覽器（Chrome/Brave/Edge 的強制深色、夜間模式）
     會把米色紙條硬轉成深咖啡色。深色模式那兩段會改回 color-scheme: dark。 */
  color-scheme: only light;
}

/* ---------- 深色模式的顏色（只覆蓋需要變的）：更深的夜藍墊子＋深藍灰紙條＋亮一點的橘 ----------
   兩種情況會套用深色：
     1. 沒按過右上角切換鈕、系統是深色 → 第一段（:root:not([data-theme="light"])）
     2. 按過切換鈕選了深色 → 第二段（:root[data-theme="dark"]）
   切換鈕選淺色時 <html> 會有 data-theme="light"，第一段就不會套用。
   所以改深色的數值時，兩段要一起改。
   深色的紅比較亮，白字放上去看不清楚，所以 --on-red 改成深咖啡色。 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mat: #121826;
    --mat-deep: #0D121D;
    --mat-line: rgba(200, 215, 255, .045);
    --mat-line-strong: rgba(200, 215, 255, .10);
    --on-mat: #E8ECF4;
    --on-mat-soft: #9AA5BC;
    --paper: #1B2233;
    --ink: #E6E9F1;
    --ink-soft: #A0A8BA;
    --rule: #2C3548;
    --hover: #222A3D;
    --sticker: #F59E42;
    --sticker-ink: #1C0E02;
    --red: #EA5C73;
    --on-red: #1C0E02;
    --red-hover: #F07A8D;
    --tape: rgba(225, 200, 165, .22);
    --chip: #0A0F1A;
    --chip-ink: #E8ECF4;
    --shadow: 0 1px 0 rgba(0, 0, 0, .4), 0 12px 20px -14px rgba(0, 0, 0, .9);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --mat: #121826;
  --mat-deep: #0D121D;
  --mat-line: rgba(200, 215, 255, .045);
  --mat-line-strong: rgba(200, 215, 255, .10);
  --on-mat: #E8ECF4;
  --on-mat-soft: #9AA5BC;
  --paper: #1B2233;
  --ink: #E6E9F1;
  --ink-soft: #A0A8BA;
  --rule: #2C3548;
  --hover: #222A3D;
  --sticker: #F59E42;
  --sticker-ink: #1C0E02;
  --red: #EA5C73;
  --on-red: #1C0E02;
  --red-hover: #F07A8D;
  --tape: rgba(225, 200, 165, .22);
  --chip: #0A0F1A;
  --chip-ink: #E8ECF4;
  --shadow: 0 1px 0 rgba(0, 0, 0, .4), 0 12px 20px -14px rgba(0, 0, 0, .9);
  color-scheme: dark;
}

/* ---------- 備份：之前用過的配色 ----------
   想換回去：把數值貼到上面 :root 和深色模式 :root（兩段）裡對應的那幾行就好。
   「海松色＋緑黄色」（上一版）：
   淺色：--mat:#5F5A31; --mat-deep:#4C4826; --on-mat:#F8F5E6; --on-mat-soft:#DCD6B2;
         --paper:#FBF9F0; --ink:#2A2717; --ink-soft:#69634D; --rule:#E6E1CB; --hover:#F3F0E0;
         --sticker:#DCCB18; --sticker-ink:#2E2A05; --red:#B55233; --chip:#1E1C10; --chip-ink:#F4F1E1;
   深色：--mat:#2F2C18; --mat-deep:#252311; --on-mat:#EFECDA; --on-mat-soft:#B9B392;
         --paper:#24221A; --ink:#ECE8D6; --ink-soft:#ADA78E; --rule:#3D3A2A; --hover:#2E2B20;
         --sticker:#DCCB18; --red:#D0663F; --on-red:#FFFFFF; --chip:#191709;
   「深綠切割墊」（更早）：
   淺色：--mat:#3A6555; --mat-deep:#2F5548; --on-mat:#F2F6F3; --on-mat-soft:#C3D4CB;
         --paper:#FCFCF9; --ink:#1D2622; --ink-soft:#5E6A64; --rule:#E3E7E2; --hover:#F1F4F0;
         --sticker:#F2C53D; --sticker-ink:#3A2E05; --red:#CF4337;
   深色：--mat:#1F3B31; --mat-deep:#183027; --on-mat:#E6EEE9; --on-mat-soft:#9FB5A9;
         --paper:#1C2420; --ink:#E3EAE6; --ink-soft:#9AA8A1; --rule:#2D3934; --hover:#24302B;
   （格線 --mat-line 系列、--tape、--shadow 用新的也沒關係） */

/* ---------- 基本設定 ---------- */

/* 讓寬度計算包含邊框和內距，排版比較好算 */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  background-color: var(--mat);
  /* 切割墊格線：每 1 公分細線，每 5 公分粗線。
     想要純色背景、不要格線：把下面 background-image 整段刪掉（或改成 background-image: none;）
     想換成一張圖片：把圖放到 assets/bg.jpg，然後改成
       background-image: url("bg.jpg"); background-size: cover; background-attachment: fixed;
     （url 裡的路徑是相對於 style.css 所在的 assets 資料夾） */
  background-image:
    linear-gradient(var(--mat-line-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--mat-line-strong) 1px, transparent 1px),
    linear-gradient(var(--mat-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--mat-line) 1px, transparent 1px);
  background-size: 5cm 5cm, 5cm 5cm, 1cm 1cm, 1cm 1cm;
  background-position: -1px 27px;
}

a { color: inherit; }
img { max-width: 100%; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--sticker); outline-offset: 2px; border-radius: 3px; }

.sr {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* ---------- 尺規：頁面最上方的公分刻度（純裝飾） ---------- */

.ruler {
  display: flex;
  height: 28px;
  overflow: hidden;
  background-color: var(--mat-deep);
  background-image:
    linear-gradient(90deg, var(--on-mat-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--on-mat-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--on-mat-soft) 1px, transparent 1px);
  background-size: 1mm 5px, 5mm 9px, 1cm 14px;
  background-repeat: repeat-x;
  background-position: 0 0;
  opacity: .9;
  user-select: none;
}
.ruler span {
  flex: 0 0 1cm;
  padding: 11px 0 0 3px;
  font-size: 10px;
  line-height: 1;
  color: var(--on-mat-soft);
  font-variant-numeric: tabular-nums;
}

/* ---------- 版面 ---------- */

/* 登入頁用的置中窄欄 */
.wrap {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 40px 16px 64px;
}
.wrap-narrow { max-width: 420px; padding-top: 12vh; }

/* 首頁版面——手機（預設）：一直列，由上到下是 個人檔案 → 選單 → 標籤 → 內容 → 頁尾。
   .side 用 display: contents 讓它「隱形」，裡面的東西才能和右欄一起用 order 重新排順序，
   這樣頁尾（RSS、登入）在手機上會排到最下面，而不是卡在動態上方。 */
.layout {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 40px 16px 64px;
}
.side { display: contents; }
.layout .profile { order: 1; }
.layout .site-nav { order: 2; }
.layout .tagbar { order: 3; }
.main-col { order: 4; min-width: 0; }
.layout .site-foot { order: 5; }

/* 電腦（畫面寬度 ≥ 960px）：左右兩欄。左欄 280px 放個人檔案，右欄最寬 640px 放動態 */
@media (min-width: 960px) {
  .layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 640px);
    column-gap: 56px;
    justify-content: center;
    align-items: start;
    max-width: 1080px;
    padding: 48px 32px 64px;
  }
  .side { display: block; }

  /* 左欄窄，頭像和名字改成上下疊 */
  .layout .profile { grid-template-columns: 1fr; row-gap: 10px; margin-bottom: 24px; }
  .layout .profile-name { font-size: 36px; }
  .layout .profile-handle { margin-top: 4px; }
  .layout .profile-bio { margin-top: 2px; }
  .layout .tagbar { margin-bottom: 0; }
  /* 電腦版選單改成直的一排 */
  .site-nav { flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 24px; }
  .nav-item { flex: none; font-size: 20px; padding: 4px 16px 5px; margin-left: -16px; }
  .layout .site-foot { justify-content: flex-start; margin-top: 28px; }

  /* 左欄固定不動、只有右邊在捲（像 Twitter 的側邊欄），往下滑時左邊不會空掉。
     左欄比螢幕還高時（例如標籤很多、或瀏覽器放大），左欄自己可以捲，不會被切掉。 */
  .side {
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    overscroll-behavior: contain;   /* 左欄捲到底時，不會連帶捲動整頁 */
    scrollbar-width: thin;
    scrollbar-color: var(--mat-line-strong) transparent;
    /* 內距：選單的橘色底往左突出 16px、頭像有影子，留空間才不會被切掉；
       再用負的外距抵銷，位置看起來不變 */
    padding: 4px 8px 12px 18px;
    margin: -4px -8px 0 -18px;
  }
}

/* ---------- 個人檔案（直接寫在墊子上） ---------- */

.profile {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 18px;
  align-items: center;
  color: var(--on-mat);
  margin-bottom: 28px;
}
.avatar {
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  object-fit: cover;
  background: var(--sticker);
  color: var(--sticker-ink);
  font-family: var(--font-hand);
  font-weight: 700;
  flex: none;
}
.avatar-lg {
  width: 88px; height: 88px;
  font-size: 44px;
  border: 4px solid var(--paper);
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .5);
}
.avatar-sm { width: 44px; height: 44px; font-size: 22px; }

.profile-name {
  margin: 0;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(34px, 7vw, 46px);
  line-height: 1.1;
  letter-spacing: .01em;
}
.profile-name a { text-decoration: none; min-width: 0; }
/* 名字同一行：名字靠左、深淺色切換鈕靠右，垂直置中對齊（手機／平板）。電腦版見 .theme-toggle 那段 */
.profile-name { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.profile-handle { margin: 4px 0 0; color: var(--on-mat-soft); font-size: 15px; }
/* 自我介紹那段字。想調大小就改 font-size（例如 14px 更小、16px 大一點）。
   word-break: keep-all：中文詞不要從中間斷開，盡量在「/」或標點後才換行。 */
.profile-bio {
  grid-column: 1 / -1;
  margin: 14px 0 0;
  max-width: 36em;
  font-size: 15px;
  line-height: 1.7;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.profile-meta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  color: var(--on-mat-soft);
  font-size: 14px;
}
.profile-meta strong { color: var(--on-mat); font-weight: 700; }
.profile-meta a { color: var(--on-mat); text-underline-offset: 3px; }

/* ---------- 聯絡方式圖示（IG、FB、X⋯⋯） ----------
   深色圓角方塊 + 白色圖示，滑過變橘色貼紙。
   圖示檔在 assets/icons/，用 CSS mask 「挖」出形狀再填色，所以顏色可以跟著主題變。 */
.sns-row {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.sns {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: var(--chip);
  color: var(--chip-ink);
  box-shadow: 0 6px 12px -8px rgba(0, 0, 0, .6);
  transition: background-color .15s, color .15s, transform .15s;
}
.sns:hover { background: var(--sticker); color: var(--sticker-ink); transform: translateY(-2px); }
.sns-ico {
  width: 20px;
  height: 20px;
  background: currentColor;
  /* 形狀（mask-image）寫在 layout.php 每個圖示的 style 裡 */
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
@media (prefers-reduced-motion: reduce) { .sns { transition: none; } .sns:hover { transform: none; } }

/* 「編輯連結」：只有登入後才看得到的小字按鈕，在圖示列下面 */
.links-edit {
  grid-column: 1 / -1;
  justify-self: start;
  margin: 10px 0 0;
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--on-mat-soft);
  font-size: 13px;
  text-decoration: underline dotted;
  text-underline-offset: 4px;
  cursor: pointer;
}
.links-edit:hover { color: var(--on-mat); }

/* ---------- 「編輯連結」視窗 ----------
   一張紙條浮在畫面中間（跟動態卡片同樣的紙色），背後的頁面變暗。
   視窗太高時，只有中間的連結清單會捲動，上面的標題和下面的按鈕固定不動。 */
.link-dlg {
  width: min(560px, calc(100vw - 24px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .55);
}
.link-dlg[open] { display: flex; }
.link-dlg::backdrop { background: color-mix(in srgb, var(--chip) 60%, transparent); }
.link-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  max-height: calc(100dvh - 32px);
  margin: 0;
}
.link-dlg-head { padding: 18px 20px 8px; border-bottom: 1px solid var(--rule); }
.link-dlg-title { margin: 0; font-family: var(--font-hand); font-size: 24px; line-height: 1.3; }
.link-dlg-help { margin: 4px 0 6px; color: var(--ink-soft); font-size: 13px; line-height: 1.6; }

/* 連結清單：每一列 = 左邊預覽圖示、右邊兩個輸入框，下面一排小按鈕；列與列之間用虛線隔開 */
.link-rows {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: 4px 20px;
  list-style: none;
}
.link-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 6px 12px;
  padding: 14px 0;
}
.link-row + .link-row { border-top: 1px dashed var(--rule); }
/* 預覽圖示：跟側欄的圖示同一個樣子（深色方塊 + 白色圖示） */
.link-prev {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--chip);
  color: var(--chip-ink);
}
@media (prefers-color-scheme: dark) {
  /* 深色模式的紙也是深色，預覽方塊加一圈細框才看得出來 */
  :root:not([data-theme="light"]) .link-prev { box-shadow: inset 0 0 0 1px var(--rule); }
}
:root[data-theme="dark"] .link-prev { box-shadow: inset 0 0 0 1px var(--rule); }
.link-fields { display: grid; gap: 6px; min-width: 0; }
.link-fields label { display: block; }
.link-fields input {
  display: block;
  width: 100%;
  min-height: 38px;
  padding: 6px 10px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
}
.link-fields input[name=url] { font-size: 14px; }
.link-fields input::placeholder { color: var(--ink-soft); opacity: .8; }
.link-fields input:focus { outline: 3px solid var(--sticker); outline-offset: 0; border-color: var(--mat); }
.link-tools { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; }
.link-tool {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font-size: 13px;
  cursor: pointer;
}
.link-tool:hover:not(:disabled) { background: var(--hover); color: var(--ink); }
.link-tool:disabled { opacity: .4; cursor: default; }
.link-tool.danger { margin-left: auto; color: var(--red); }
.link-tool.danger:hover { background: var(--red); border-color: var(--red); color: var(--on-red); }

/* 視窗底部：左邊「新增連結」，右邊「取消」「儲存」 */
.link-dlg-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--rule);
}
.link-dlg-gap { flex: 1; }

/* ---------- 主選單：動態／作品集／委託 ----------
   手機：三個並排的按鈕；電腦：側欄裡直的一排（在上面「版面」那段調整）。
   目前所在的頁面變成橘色貼紙。 */

.site-nav {
  display: flex;
  gap: 8px;
  margin: 0 0 22px;
}
.nav-item {
  flex: 1;
  padding: 6px 12px 7px;
  border-radius: 999px;
  color: var(--on-mat);
  font-family: var(--font-hand);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
}
.nav-item:hover { background: var(--mat-deep); }
.nav-item.is-active { background: var(--sticker); color: var(--sticker-ink); }
@media (max-width: 959px) {
  /* 手機版：沒選中的也給一圈淡淡的框，看得出是按鈕 */
  .nav-item:not(.is-active) { box-shadow: inset 0 0 0 1px var(--mat-line-strong); }
}

/* ---------- 標籤貼紙：白色圓角小貼紙，每三個輪流微微歪一點；選中或滑過變橘 ---------- */

.tagbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 8px;
  margin: 0 0 24px;
}
.sticker {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 13px 4px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-hand);
  font-size: 15px;
  text-decoration: none;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .18);
  transform: rotate(var(--tilt, 0deg));
}
.sticker:nth-child(3n+1) { --tilt: -1.5deg; }
.sticker:nth-child(3n+2) { --tilt: 1deg; }
.sticker small { font-family: var(--font-body); font-size: 12px; color: var(--ink-soft); }
.sticker:hover { background: var(--sticker); color: var(--sticker-ink); }
.sticker.is-active { background: var(--sticker); color: var(--sticker-ink); }
.sticker.is-active small, .sticker:hover small { color: var(--sticker-ink); }

.filter-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin: 0 0 16px;
  color: var(--on-mat);
  font-size: 15px;
}
.filter-note a { color: var(--on-mat); text-underline-offset: 3px; }

/* ---------- 紙條（每則動態）：左邊頭像、右邊內容的兩格排列 ---------- */

.feed { display: grid; gap: 14px; }

.slip {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  padding: 18px 20px 12px 18px;
  background: var(--paper);
  border-radius: 3px;
  box-shadow: var(--shadow);
}
.slip-main { min-width: 0; }
/* 動態貼文沒有頭像：單欄（發文框和其他卡片還是左邊頭像＋右邊內容） */
.slip.post { grid-template-columns: minmax(0, 1fr); }

/* 置頂 = 用紙膠帶貼住 */
.slip.is-pinned { margin-top: 10px; }
.slip.is-pinned::before {
  content: "";
  position: absolute;
  top: -11px;
  left: 50%;
  width: 104px;
  height: 24px;
  transform: translateX(-50%) rotate(-2deg);
  background: var(--tape);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
  clip-path: polygon(2% 8%, 0 92%, 98% 100%, 100% 6%);
}

.slip-head {
  display: flex;
  flex-wrap: wrap;
  /* 名字這一排的高度跟頭像一樣，並且上下置中，名字就會對齊頭像中間 */
  min-height: var(--av, 44px);
  align-items: center;
  column-gap: 8px;
  line-height: 1.4;
  padding-right: 30px;
}
.slip-name { font-family: var(--font-hand); font-weight: 700; font-size: 17px; }
.slip-handle, .slip-time { color: var(--ink-soft); font-size: 14px; }
.slip-time { text-decoration: none; }
.slip-time:hover { text-decoration: underline; text-underline-offset: 3px; }

.pin-sticker {
  align-self: center;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--red);
  color: var(--on-red);
  font-size: 12px;
  line-height: 20px;
  font-weight: 500;
}

/* 作品類型小標籤（例如「作品｜音樂製作」）：墊子色細框的膠囊，
   跟橘色的 #標籤、紅色的置頂分得開。動態的名字列和作品集卡片都用它 */
.type-chip {
  align-self: center;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  border-radius: 999px;
  color: var(--mat);
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
a.type-chip:hover { border-color: currentColor; background: var(--hover); }
@media (prefers-color-scheme: dark) {
  /* 深色模式的墊子色太暗，紙上看不清楚，改用淺一點的藍灰 */
  :root:not([data-theme="light"]) .type-chip { color: var(--on-mat-soft); }
}
:root[data-theme="dark"] .type-chip { color: var(--on-mat-soft); }

.slip-body {
  margin-top: 4px;
  font-size: 16px;
  line-height: 1.75;
  overflow-wrap: anywhere;
}
.slip-body a { text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 3px; }
.slip-body a:hover { text-decoration-color: currentColor; }
.tag, .slip-body a.tag {
  padding: 0 4px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--sticker) 45%, transparent);
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
}
.slip-body a.tag:hover { background: var(--sticker); color: var(--sticker-ink); }

/* 圖片排列 */
.slip-media {
  display: grid;
  gap: 4px;
  margin-top: 12px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--rule);
}
.media-item {
  display: block;
  padding: 0;
  border: 0;
  background: var(--hover);
  cursor: zoom-in;
  overflow: hidden;
  min-height: 0;
}
.media-item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.slip-media.n1 .media-item img { height: auto; max-height: 560px; object-fit: contain; }
.slip-media.n2 { grid-template-columns: 1fr 1fr; height: 290px; }
.slip-media.n3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; height: 320px; }
.slip-media.n3 .media-item:first-child { grid-row: 1 / 3; }
.slip-media.n4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; height: 320px; }

/* 圖片的預覽色塊：圖片還沒載完前，先顯示一片模糊的小圖（lib.php 存在 --ph 變數裡）。
   ::before 是外框裡多出來的一層，鋪滿整格、放大一點再模糊（邊緣才不會透出白邊）；
   圖片本身疊在它上面（position: relative）。app.js 在圖片載好時加上 is-loaded，色塊淡出。 */
.has-ph { position: relative; }
.has-ph::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ph) center / cover no-repeat;
  filter: blur(12px);
  transform: scale(1.15);
  transition: opacity .3s;
}
.has-ph.is-loaded::before { opacity: 0; }
.has-ph img { position: relative; }

.slip-foot {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 8px 0 0 -8px;
}
.act {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink-soft);
  font-size: 14px;
  cursor: pointer;
}
.act:hover { background: var(--hover); color: var(--ink); }
.ic { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ic-more { fill: currentColor; stroke: none; }
.act.like:hover { color: var(--red); }
.act.like.is-on { color: var(--red); }
.act.like.is-on .ic-heart { fill: currentColor; }
.act.like.pop .ic-heart { animation: pop .32s ease-out; }
@keyframes pop { 40% { transform: scale(1.3); } }
.count { min-width: 1ch; font-variant-numeric: tabular-nums; }
.edited { margin-left: auto; color: var(--ink-soft); font-size: 13px; }

/* 管理選單 */
.slip-menu { position: absolute; top: 10px; right: 10px; }
.slip-menu summary {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  color: var(--ink-soft);
  cursor: pointer;
  list-style: none;
}
.slip-menu summary::-webkit-details-marker { display: none; }
.slip-menu summary:hover, .slip-menu[open] summary { background: var(--hover); color: var(--ink); }
.menu-pop {
  position: absolute;
  right: 0;
  top: 38px;
  z-index: 5;
  display: grid;
  min-width: 150px;
  padding: 6px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 8px;
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .35);
}
.menu-pop button {
  padding: 8px 12px;
  border: 0;
  border-radius: 5px;
  background: none;
  text-align: left;
  font-size: 15px;
  cursor: pointer;
}
.menu-pop button:hover { background: var(--hover); }
.menu-pop .danger { color: var(--red); }
.menu-pop .danger.confirm { background: var(--red); color: var(--on-red); }

/* ---------- 發文框：只有登入後看得到；拖曳圖片進來時會出現橘色虛線框 ---------- */

.composer { margin-bottom: 22px; padding-bottom: 14px; }
.composer.is-drop { outline: 3px dashed var(--sticker); outline-offset: 4px; }
.composer textarea, .edit-box textarea {
  display: block;
  width: 100%;
  min-height: 56px;
  margin: 8px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 18px;
  line-height: 1.65;
  resize: none;
  overflow: hidden;
}
.composer textarea::placeholder { color: var(--ink-soft); font-family: var(--font-hand); }
.composer textarea:focus, .edit-box textarea:focus { outline: none; }
.edit-box textarea {
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  font-size: 16px;
}
.edit-box textarea:focus { border-color: var(--mat); }

.c-previews { display: flex; flex-wrap: wrap; gap: 8px; }
.c-previews:not(:empty) { margin-top: 10px; }
.c-prev { position: relative; width: 96px; height: 96px; border-radius: 6px; overflow: hidden; border: 1px solid var(--rule); }
.c-prev img { width: 100%; height: 100%; object-fit: cover; display: block; }
.c-prev button {
  position: absolute; top: 4px; right: 4px;
  width: 26px; height: 26px;
  border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .65); color: #fff;
  font-size: 16px; line-height: 1; cursor: pointer;
}

.c-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
}
.c-hint { flex: 1; min-width: 0; color: var(--ink-soft); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 作品類型選單（發文框和編輯框底部那排）：跟「加入圖片」一樣的細框膠囊 */
.c-type {
  min-height: 38px;
  max-width: 100%;
  padding: 0 10px 0 12px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background-color: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.c-type:hover { background-color: var(--hover); }

.btn, .btn-ghost, .btn-mat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}
.btn { border: 0; background: var(--mat); color: #fff; }
.btn:hover { background: var(--mat-deep); }
.btn:disabled { opacity: .6; cursor: progress; }
.btn-ghost { border: 1px solid var(--rule); background: transparent; color: var(--ink); padding: 0 14px; }
.btn-ghost:hover { background: var(--hover); }
.c-file:focus-within { outline: 3px solid var(--sticker); outline-offset: 2px; }
.btn-mat { border: 1px solid var(--mat-line-strong); background: var(--mat-deep); color: var(--on-mat); }
.btn-mat:hover { border-color: var(--on-mat-soft); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn { background: var(--sticker); color: var(--sticker-ink); }
  :root:not([data-theme="light"]) .btn:hover { background: color-mix(in srgb, var(--sticker) 88%, #000); }
}
:root[data-theme="dark"] .btn { background: var(--sticker); color: var(--sticker-ink); }
:root[data-theme="dark"] .btn:hover { background: color-mix(in srgb, var(--sticker) 88%, #000); }

/* ---------- 其他：空白提示、載入更多按鈕、頁尾 ---------- */

.empty { display: block; padding: 28px 24px; text-align: center; color: var(--ink-soft); }
.empty p { margin: 0; }
.empty p + p { margin-top: 4px; }

.more { display: flex; justify-content: center; margin-top: 22px; }

.site-foot {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 48px;
  color: var(--on-mat-soft);
  font-size: 14px;
}
.site-foot a, .linklike { color: var(--on-mat-soft); text-underline-offset: 3px; }
.site-foot form { margin: 0; }
.linklike { padding: 0; border: 0; background: none; text-decoration: underline; cursor: pointer; font-size: 14px; }

/* 登入頁 */
.login { display: block; padding: 28px 26px; }
.login h1 { margin: 0; font-family: var(--font-hand); font-size: 28px; line-height: 1.2; }
.login-sub { margin: 6px 0 20px; color: var(--ink-soft); font-size: 15px; }
.login label { display: block; font-weight: 500; font-size: 15px; margin-bottom: 6px; }
.login input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}
.login input:focus { outline: 3px solid var(--sticker); outline-offset: 0; border-color: var(--mat); }
.login-bar { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; }
.login-bar a { color: var(--ink-soft); font-size: 14px; }
.form-error { margin: 0 0 14px; padding: 8px 12px; border-radius: 6px; background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); font-size: 14px; }

/* 圖片燈箱：點圖片後全螢幕放大的黑底視窗 */
.lightbox {
  max-width: none; max-height: none;
  width: 100vw; height: 100vh;
  margin: 0; padding: 0;
  border: 0;
  background: transparent;
}
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: color-mix(in srgb, var(--chip) 94%, transparent); }
.lightbox img { max-width: 94vw; max-height: 90vh; object-fit: contain; border-radius: 4px; }
/* 知道原圖寬高時（app.js 加上 has-size）：先用原圖的比例排好大小，
   顯示中的小張圖會先被拉大（有點糊），原圖載好換上去時位置和大小完全不變。
   --ar = 寬 ÷ 高、--fw = 原圖寬（小圖不會放大超過原本尺寸） */
.lightbox img.has-size {
  width: min(94vw, calc(90vh * var(--ar)), var(--fw));
  height: auto;
  aspect-ratio: var(--ar);
}
/* 「載入原圖中…」（左下角）和「開啟原圖」（右下角）：小小的、半透明，不搶畫面 */
.lightbox-status,
.lightbox-open {
  position: fixed;
  bottom: 14px;
  margin: 0;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .78);
  font-size: 13px;
  line-height: 1.4;
}
.lightbox-status { left: 14px; }
.lightbox-status[hidden] { display: none; }
.lightbox-open { right: 14px; text-decoration: none; }
.lightbox-open:hover, .lightbox-open:focus-visible { background: rgba(255, 255, 255, .22); color: #fff; }
.lightbox-close {
  position: fixed; top: 14px; right: 14px;
  width: 44px; height: 44px;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .14); color: #fff;
  font-size: 26px; line-height: 1; cursor: pointer;
}

/* 提示訊息：畫面下方跳出的橘色小膠囊，例如「已發佈」，2.6 秒後消失 */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  /* 要比底部播放列（player.css 的 z-index 45／46）高，不然提示會被擋住 */
  z-index: 50;
  max-width: calc(100vw - 32px);
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--sticker);
  color: var(--sticker-ink);
  font-weight: 500;
  font-size: 15px;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .5);
  transform: translate(-50%, 20px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 作品集（works.php） ----------
   標題和段落標題直接寫在墊子上；作品是一張張小紙卡，排成兩欄的格子。 */

/* 標題列：左邊「作品集」，右邊「依時間／依類型」切換 */
.works-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin: 0 0 16px;
}
.works-title {
  margin: 0;
  color: var(--on-mat);
  font-family: var(--font-hand);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
}

/* 兩個選項的切換鈕：深色墊子底的膠囊，選中的那邊變成橘色貼紙 */
.seg {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--mat-line-strong);
  border-radius: 999px;
  background: var(--mat-deep);
}
.seg-item {
  padding: 3px 14px 4px;
  border-radius: 999px;
  color: var(--on-mat);
  font-family: var(--font-hand);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
}
.seg-item:hover { background: var(--mat); }
.seg-item.is-active { background: var(--sticker); color: var(--sticker-ink); }

/* 類型篩選貼紙（樣式沿用上面的 .sticker） */
.works-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 8px;
  margin: 0 0 8px;
}

/* 每一段（某個月份或某個類型） */
.works-sec { margin-top: 26px; }
.works-h {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 12px;
  color: var(--on-mat);
  font-family: var(--font-hand);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
}
.works-h small { color: var(--on-mat-soft); font-family: var(--font-body); font-size: 13px; font-weight: 400; }

/* 卡片格子：兩欄；minmax(0, 1fr) 讓長字不會把格子撐破 */
.works-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.works-grid li { min-width: 0; }

/* 一張作品卡：紙條的底色和影子，上面封面、下面標題和日期 */
.work-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 8px 8px 10px;
  background: var(--paper);
  border-radius: 3px;
  box-shadow: var(--shadow);
  color: var(--ink);
  text-decoration: none;
}
.work-card:hover { outline: 2px solid color-mix(in srgb, var(--sticker) 75%, transparent); outline-offset: 2px; }

/* 封面：固定 4:3 的框，圖片裁切填滿（object-fit: cover） */
.work-cover {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 2px;
  background: var(--hover);
}
.work-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 沒有圖片的作品：封面改成一段手寫字的文字，最多顯示 7 行（手機 4 行） */
.work-cover.is-text { padding: 12px 12px 0; border: 1px solid var(--rule); }
.work-cover.is-text span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  overflow: hidden;
  color: var(--ink-soft);
  font-family: var(--font-hand);
  font-size: 15px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.work-title {
  margin: 8px 2px 0;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.work-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 4px 2px 0;
  color: var(--ink-soft);
  font-size: 13px;
}

/* 很窄的手機（寬度 < 360px）：卡片改成一欄 */
@media (max-width: 359px) {
  .works-grid { grid-template-columns: minmax(0, 1fr); }
}

/* 小手機（寬度 ≤ 520px）：頭像縮小、圖片矮一點、隱藏發文框的小提示 */
@media (max-width: 520px) {
  .wrap { padding-top: 28px; }
  .avatar-lg { width: 72px; height: 72px; font-size: 36px; }
  .slip { --av: 36px; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; padding: 14px 14px 10px 12px; }
  .slip.post { grid-template-columns: minmax(0, 1fr); }
  .avatar-sm { width: 36px; height: 36px; font-size: 18px; }
  .slip-media.n2 { height: 200px; }
  .slip-media.n3, .slip-media.n4 { height: 240px; }
  .c-hint { display: none; }
  .composer .btn { margin-left: auto; }
  /* 動態名字列放不下時，作品小標籤省略「作品｜」，比較不會擠到第二行
     （委託的「委託｜」保留，才分得出是接案做的） */
  .type-chip-pre { display: none; }
  .type-chip.is-commission .type-chip-pre { display: inline; }
  /* 編輯框：類型選單自己一排，「取消」「儲存」靠右排在下一排 */
  .edit-box .c-type { flex: 1 1 100%; }
  .edit-box [data-edit=cancel] { margin-left: auto; }
  /* 作品卡的文字封面變小了，字也縮小、最多 4 行 */
  .work-cover.is-text { padding: 10px 10px 0; }
  .work-cover.is-text span { -webkit-line-clamp: 4; font-size: 14px; }
  /* 「編輯連結」視窗：四周留白縮小，讓輸入框寬一點 */
  .link-dlg-head { padding: 16px 16px 6px; }
  .link-rows { padding: 2px 16px; }
  .link-row { grid-template-columns: 32px minmax(0, 1fr); gap: 6px 10px; }
  .link-prev { width: 32px; height: 32px; border-radius: 8px; }
  .link-prev .sns-ico { width: 17px; height: 17px; }
  .link-dlg-foot { padding: 10px 16px 14px; }
}

/* 系統設定「減少動態效果」的人，關掉所有動畫 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ===== YouTube 預覽：縮圖＋播放鈕，點了換成播放器（app.js） ===== */
.yt-embed, .yt-frame {
  position: relative; display: block; width: 100%; max-width: 545px;
  aspect-ratio: 16 / 9; margin: 10px 0 0; padding: 0; border: 0;
  border-radius: 8px; overflow: hidden; background: #000; cursor: pointer;
}
.yt-embed img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yt-play { position: absolute; inset: 0; display: grid; place-items: center; }
.yt-play svg { width: 68px; height: 48px; transition: transform .15s; }
.yt-embed:hover .yt-play svg, .yt-embed:focus-visible .yt-play svg { transform: scale(1.1); }
.yt-embed:focus-visible { outline: 3px solid var(--sticker); outline-offset: 2px; }
.yt-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* 作品集：沒有圖片、只有 YouTube 連結的作品，封面用影片縮圖＋播放鈕 */
.work-cover.is-yt { position: relative; background: #000; }
.work-play { position: absolute; inset: 0; display: grid; place-items: center; }
.work-play svg { width: 52px; height: 37px; }

/* ===== 右上角：淺色／深色切換鈕（layout.php 放按鈕，app.js 負責切換並記住選擇）=====
   位置：手機／平板＝跟名字同一行的右端；電腦＝頭像右下角（見下面）。
   data-mode 是 app.js 設的「目前是淺色還是深色」：淺色時顯示月亮（按了去深色），深色時顯示太陽 */
.theme-toggle {
  flex: none;
  display: grid; place-items: center;
  width: 38px; height: 38px; padding: 0;
  border: 1px solid var(--mat-line-strong); border-radius: 50%;
  background: var(--mat-deep); color: var(--on-mat);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
  cursor: pointer;
}
/* 電腦（≥960px）：放在頭像的右下角，像 FB 的上線小圓點（頭像 88px，.profile 是定位基準）。
   按鈕比平常小一點（32px），蓋住頭像邊緣一點點 */
@media (min-width: 960px) {
  .layout .profile { position: relative; }
  .layout .theme-toggle { position: absolute; top: 60px; left: 62px; width: 32px; height: 32px; z-index: 1; }
  .layout .theme-toggle svg { width: 17px; height: 17px; }
}
.theme-toggle:hover { background: var(--sticker); color: var(--sticker-ink); }
.theme-toggle:focus-visible { outline: 3px solid var(--sticker); outline-offset: 2px; }
.theme-toggle svg { display: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle[data-mode="light"] .i-moon { display: block; }
.theme-toggle[data-mode="dark"] .i-sun { display: block; }

/* ===== 音檔播放器（lib.php 的 render_audio、app.js 的「音檔播放器」）=====
   --ap-fill：進度條、音量條「已經過」那段的顏色。淺色用墊子的深夜藍，深色用貼紙橘（深夜藍在深色紙上看不清楚）
   沒有 JavaScript 時（html 沒有 js 這個 class）：顯示瀏覽器內建的播放器 .ap-native，自己畫的 .ap-ui 藏起來 */
.ap {
  --ap-fill: var(--mat);
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--hover);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ap { --ap-fill: var(--sticker); }
  :root:not([data-theme="light"]) .ap-note { background: color-mix(in srgb, var(--sticker) 20%, transparent); color: var(--sticker); }
}
:root[data-theme="dark"] .ap { --ap-fill: var(--sticker); }
:root[data-theme="dark"] .ap-note { background: color-mix(in srgb, var(--sticker) 20%, transparent); color: var(--sticker); }

.ap-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ap-note {
  flex: none; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--mat); color: var(--on-mat); font-size: 16px; line-height: 1;
}
.ap-title { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-native { display: block; width: 100%; margin-top: 10px; }
.js .ap-native { display: none; }
.ap-ui { display: none; }
.js .ap-ui { display: flex; align-items: center; gap: 10px; margin-top: 10px; }

/* 播放／暫停鈕：橘色圓鈕，淺色深色都看得清楚 */
.ap-play {
  flex: none; display: grid; place-items: center;
  width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--sticker); color: var(--sticker-ink);
  cursor: pointer;
}
.ap-play:hover { filter: brightness(.95); }
.ap-play svg { width: 20px; height: 20px; fill: currentColor; }
.ap-i-pause, .ap.is-playing .ap-i-play { display: none; }
.ap.is-playing .ap-i-pause { display: block; }
.ap-time { flex: none; color: var(--ink-soft); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ap.is-error .ap-time { color: var(--red); }

/* 靜音鈕 */
.ap-mute {
  flex: none; display: grid; place-items: center;
  width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--ink-soft); cursor: pointer;
}
.ap-mute:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.ap-mute svg { width: 20px; height: 20px; fill: currentColor; }
.ap-i-mute, .ap.is-muted .ap-i-vol { display: none; }
.ap.is-muted .ap-i-mute { display: block; }

/* 拉桿（進度條、音量）：瀏覽器內建的長相各家不同，這裡全部自己畫
   --p 由 app.js 設定＝已經過的百分比，左邊那段塗上 --ap-fill */
.ap-seek, .ap-vol {
  --p: 0%;
  -webkit-appearance: none; appearance: none;
  height: 22px; margin: 0; padding: 0;
  background: transparent; cursor: pointer;
}
.ap-seek { flex: 1; min-width: 60px; }
.ap-vol { flex: none; width: 76px; --p: 100%; }
.ap-seek::-webkit-slider-runnable-track, .ap-vol::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(to right, var(--ap-fill) var(--p), color-mix(in srgb, var(--ink) 16%, transparent) var(--p));
}
.ap-seek::-webkit-slider-thumb, .ap-vol::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px; margin-top: -5px;
  border: 2px solid var(--paper); border-radius: 50%;
  background: var(--ap-fill); box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.ap-seek::-moz-range-track, .ap-vol::-moz-range-track { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 16%, transparent); }
.ap-seek::-moz-range-progress, .ap-vol::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--ap-fill); }
.ap-seek::-moz-range-thumb, .ap-vol::-moz-range-thumb {
  width: 12px; height: 12px;
  border: 2px solid var(--paper); border-radius: 50%; background: var(--ap-fill);
}
.ap-seek:focus-visible, .ap-vol:focus-visible, .ap-play:focus-visible, .ap-mute:focus-visible { outline: 3px solid var(--sticker); outline-offset: 2px; border-radius: 6px; }
.ap-play:focus-visible, .ap-mute:focus-visible { border-radius: 50%; }
/* 手機：音量用實體按鍵調（iPhone 也不允許網頁改音量），音量條藏起來，只留靜音鈕 */
@media (hover: none) and (pointer: coarse) {
  .ap-vol { display: none; }
}
@media (max-width: 380px) {
  .js .ap-ui { gap: 8px; }
  .ap-time { font-size: 12px; }
}

/* 發文框：選好的音檔顯示成一個小膠囊（♪ 檔名・大小 ×） */
.c-audio {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px;
  max-width: 100%; min-height: 36px;
  padding: 4px 4px 4px 12px;
  border: 1px solid var(--rule); border-radius: 999px; background: var(--hover);
  font-size: 14px;
}
.c-audio-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-audio-size { flex: none; color: var(--ink-soft); font-size: 13px; }
.c-audio-rm {
  flex: none; width: 26px; height: 26px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .55); color: #fff; font-size: 16px; line-height: 1; cursor: pointer;
}

/* 作品集：沒有圖片、只有音檔的作品，封面是墊子色＋大音符＋檔名 */
.work-cover.is-audio {
  display: grid; place-content: center; justify-items: center; gap: 6px;
  padding: 12px; text-align: center;
  background: var(--mat); color: var(--on-mat);
}
.work-audio-note { font-size: 44px; line-height: 1; }
.work-audio-name { max-width: 100%; font-size: 13px; color: var(--on-mat-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 整頁最下面的版權宣告 */
.copyright { padding: 4px 16px 32px; text-align: center; color: var(--on-mat-soft); font-size: 13px; }
.copyright p { margin: 0; }
.copyright .views { margin-bottom: 4px; font-size: 14px; }
.copyright .views strong { color: var(--on-mat); }

/* 側欄頁尾：「只允許這台電腦管理」／「🔒 管理只限你的電腦 解除」 */
.lock-form { display: inline-flex; align-items: center; gap: 8px; }
.lock-state { color: var(--on-mat-soft); }
/* 貼文沒有頭像：名字那一排不用再撐到頭像的高度 */
.slip.post .slip-head { min-height: 30px; }

/* 網頁最上面的尺規已經拿掉（layout.php、login.php 不再印 .ruler）。想放回去：把那一行 <div class="ruler"> 加回去就好 */

/* 音檔貼文的歌曲縮圖（取代左邊的音符方塊） */
.ap-cover { flex: none; display: block; width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: var(--rule); }
.ap-head:has(.ap-cover) { gap: 12px; }
.ap-head:has(.ap-cover) .ap-title { font-size: 17px; }
/* 這個裝置不能由網頁改音量（iPhone／iPad）：貼文播放器的音量條也藏起來，只留靜音鈕 */
.no-vol .ap-vol { display: none; }
/* 手機版貼文播放器：第一排＝播放鈕、時間、靜音、音量；進度條自己一排（整排都好拖） */
@media (max-width: 520px) {
  .js .ap-ui { flex-wrap: wrap; row-gap: 6px; }
  .ap-play { order: 0; }
  .ap-time { order: 1; }
  .ap-mute { order: 2; margin-left: auto; }
  .ap-vol { order: 3; width: 88px; }
  .ap-seek { order: 4; flex: 1 1 100%; }
}

/* 發文框：選好的音檔小膠囊裡的「展示圖」按鈕 */
.c-cover-btn {
  flex: none; display: inline-grid; place-items: center;
  min-width: 28px; height: 28px; padding: 0 10px;
  border: 1px dashed var(--ink-soft); border-radius: 999px;
  background: var(--paper); color: var(--ink-soft);
  font: inherit; font-size: 13px; cursor: pointer;
}
.c-cover-btn:hover { border-color: var(--ink); color: var(--ink); }
.c-cover-btn:has(img) { width: 36px; height: 36px; padding: 0; border-style: solid; border-radius: 6px; overflow: hidden; }
.c-cover-btn img { display: block; width: 100%; height: 100%; object-fit: cover; }
.c-cover-rm {
  flex: none; width: 22px; height: 22px; padding: 0;
  border: 0; border-radius: 50%; background: var(--rule); color: var(--ink);
  font-size: 14px; line-height: 1; cursor: pointer;
}
/* 編輯框裡的「歌曲縮圖」那排（只有帶音檔的動態才有）：標題、縮圖（點了換）、說明、× 移除 */
.edit-cover { display: flex; align-items: center; gap: 10px; margin: 8px 0 4px; flex-wrap: wrap; }
.edit-cover-label { font-size: 14px; font-weight: 700; color: var(--ink); }
.edit-cover .c-cover-btn:has(img) { width: 48px; height: 48px; }
.edit-cover-note { color: var(--ink-soft); font-size: 13px; }
.edit-cover-undo { min-height: 28px; padding: 0 12px; font-size: 13px; }

/* ---------- 回到最上面（app.js 建立的 #to-top）----------
   右下角圓形按鈕；往下滑才浮出（.show）。位置避開底部播放列：
   跟提示訊息（.toast）一樣，播放列在就往上抬（數字對應 player.css 的 body.has-mp）。 */
.to-top {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 44;
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0;
  border: 1px solid var(--rule); border-radius: 50%;
  background: var(--sticker); color: var(--sticker-ink);
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .5);
  cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .2s, transform .2s, visibility .2s, bottom .2s;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { filter: brightness(1.08); }
.to-top:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
body.has-mp .to-top { bottom: calc(108px + env(safe-area-inset-bottom)); }
body.has-mp.mp-collapsed .to-top { bottom: calc(56px + env(safe-area-inset-bottom)); }
@media (max-width: 720px) {
  body.has-mp .to-top { bottom: calc(136px + env(safe-area-inset-bottom)); }
  body.has-mp.mp-collapsed .to-top { bottom: calc(84px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }