:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --text: #1d2330;
  --muted: #5d6677;
  --border: #dde1e8;
  --accent: #2f5bd3;
  --accent-text: #ffffff;
  --admin: #8a3ffc;
  --error-bg: #fdecec;
  --error-text: #a11d1d;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14171d;
    --surface: #1d212a;
    --text: #e6e9ef;
    --muted: #9aa3b5;
    --border: #2f3542;
    --accent: #6d8fff;
    --accent-text: #0d1220;
    --admin: #b48cff;
    --error-bg: #3a1c1f;
    --error-text: #ffb3b3;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 system-ui, -apple-system, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
body.admin .topbar { border-bottom: 3px solid var(--admin); }

.brand { color: var(--text); font-weight: 600; text-decoration: none; }
.badge {
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--admin);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  vertical-align: middle;
}

.user { display: flex; align-items: center; gap: 12px; color: var(--muted); }
.user form { margin: 0; }
.brand, .user a, .user button, .main-nav a { white-space: nowrap; }

/* 手機：第一列是名稱與帳號，第二列是功能選單（太寬時可左右滑動） */
@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; row-gap: 8px; padding: 10px 16px; }
  .user { gap: 10px; min-width: 0; }
  .user > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 30vw; }
  .main-nav { order: 3; flex: 1 0 100%; margin: 0; gap: 20px; overflow-x: auto; padding-bottom: 2px; }
}
/* 管理後台的選單項目較多（一列約需 990px）：中等寬度也改為兩列，避免整頁出現左右捲動（v0.20.2） */
@media (min-width: 721px) and (max-width: 1040px) {
  body.admin .topbar { flex-wrap: wrap; row-gap: 8px; }
  body.admin .main-nav { order: 3; flex: 1 0 100%; margin: 0; overflow-x: auto; padding-bottom: 2px; }
}

main { flex: 1; width: 100%; max-width: 960px; margin: 0 auto; padding: 24px 16px; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px;
}
.card.narrow { max-width: 400px; margin: 40px auto; }
h1 { margin: 0 0 16px; font-size: 22px; }

/* 有 hidden 屬性的元素一律隱藏（否則會被下面 input、.checkbox 等的 display 蓋過） */
[hidden] { display: none !important; }

label { display: block; margin-bottom: 14px; font-size: 14px; color: var(--muted); }
input {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 10px 12px;
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
}
input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

button {
  padding: 10px 16px;
  font: inherit;
  font-weight: 600;
  color: var(--accent-text);
  background: var(--accent);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
.narrow form > button[type="submit"] { width: 100%; } /* 登入等窄表單 */
button.link {
  padding: 0;
  width: auto;
  background: none;
  color: var(--accent);
  font-weight: 400;
}

a { color: var(--accent); }

.error {
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--error-bg);
  color: var(--error-text);
}
.muted { color: var(--muted); }

.facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0 0 16px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }

footer { padding: 16px; text-align: center; font-size: 12px; color: var(--muted); }

/* ---- 階段 2：導覽、清單、素材、上傳 ---- */
:root { --ok: #1f7a3a; --danger: #b42318; --notice-bg: #e8f3ec; }
@media (prefers-color-scheme: dark) {
  :root { --ok: #6fd38f; --danger: #ff8a80; --notice-bg: #1d3326; }
}

.main-nav { display: flex; gap: 16px; margin-right: auto; margin-left: 24px; }
.main-nav a { color: var(--text); text-decoration: none; }
.main-nav a:hover { color: var(--accent); }

h2 { margin: 0 0 12px; font-size: 17px; }
main > section.card + section.card, main > .card + .card, .list + .card { margin-top: 16px; }
.crumbs { margin: 0 0 8px; font-size: 14px; color: var(--muted); }
.slug { font-size: 14px; font-weight: 400; color: var(--muted); }
.description { white-space: pre-line; color: var(--muted); margin-top: -8px; }
.small { font-size: 13px; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; }
.hash { word-break: break-all; }

.notice { padding: 10px 12px; border-radius: 6px; background: var(--notice-bg); color: var(--ok); }
.error-text { color: var(--danger); }
.ok-text { color: var(--ok); }

textarea {
  display: block; width: 100%; margin-top: 4px; padding: 10px 12px; font: inherit; color: var(--text);
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px; resize: vertical;
}
.form-card { margin-top: 16px; }
.form-card form > button[type="submit"] { width: auto; }
.checkbox { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 15px; }
.checkbox input { display: inline; width: auto; margin: 0; }
.checklist { list-style: none; margin: 0 0 16px; padding: 0; }
.checklist li { padding: 6px 0; border-bottom: 1px solid var(--border); }
.row-form { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 12px; }
.inline-form { margin: 0; }
.danger-zone { margin-top: 24px; padding-top: 16px; border-top: 1px dashed var(--border); }
button.danger { background: var(--danger); color: #fff; }
button.link.danger { background: none; color: var(--danger); }

a.button {
  display: inline-block; padding: 10px 16px; font-weight: 600; text-decoration: none;
  color: var(--accent-text); background: var(--accent); border-radius: 6px;
}
a.button.small { padding: 6px 12px; font-size: 14px; }

.list { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.list th, .list td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
.list th { font-size: 13px; font-weight: 500; color: var(--muted); }
.list tr:last-child td { border-bottom: 0; }
.list td a { word-break: break-all; }
.num { text-align: right !important; white-space: nowrap; }
.card .list { border: 0; border-radius: 0; }
/* 只在手機顯示（例如表格操作按鈕移到第一欄） */
.show-sm { display: none; }
@media (max-width: 720px) {
  .card .list, .list { display: block; overflow-x: auto; }
  /* 欄位不再被擠成一字一行：保持單行，表格太寬時左右滑動 */
  .list th, .list td { white-space: nowrap; }
  .hide-sm { display: none; }
  .show-sm { display: block; margin-top: 4px; }
}

.status { padding: 2px 8px; border-radius: 999px; font-size: 13px; }
.status.on { background: var(--notice-bg); color: var(--ok); }
.status.off { background: var(--error-bg); color: var(--error-text); }
.status.pending { border: 1px solid var(--admin); color: var(--admin); }

/* 列內表單的「你的密碼」確認欄位與資料夾名稱：不撐滿整列，與按鈕排在同一列 */
.row-form input[type="password"], .row-form input[name="name"] { width: 220px; max-width: 100%; margin-top: 0; }

.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.tags li { padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; font-size: 14px; }

.kind {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  font-size: 13px; font-weight: 600; color: var(--muted); background: var(--bg);
}
.kind-video { color: var(--admin); }
.mini-thumb { width: 64px; }
.mini-thumb img, .mini-thumb .kind { display: flex; width: 56px; height: 42px; object-fit: cover; border-radius: 4px; }

.project-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin: 0; padding: 0; }
.project-card { display: flex; flex-direction: column; gap: 4px; padding: 18px; color: var(--text); text-decoration: none; }
.project-card:hover { border-color: var(--accent); }
.meta { font-size: 13px; color: var(--muted); }

.asset-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin: 0; padding: 0; }
.asset-card { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.asset-card .thumb { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; background: var(--bg); }
.asset-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.asset-info { display: flex; flex-direction: column; min-width: 0; }
.asset-info .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); text-decoration: none; }
.asset-card .button { align-self: flex-start; }

.preview { display: flex; justify-content: center; margin-bottom: 16px; background: var(--bg); border-radius: 6px; }
.preview img, .preview video { max-width: 100%; max-height: 70vh; display: block; }
.preview p { padding: 32px 16px; margin: 0; }
.filename { word-break: break-all; }

.dropzone {
  display: block; position: relative; padding: 32px 16px; text-align: center; cursor: pointer;
  border: 2px dashed var(--border); border-radius: 10px; color: var(--muted);
}
.dropzone.over, .dropzone:hover { border-color: var(--accent); color: var(--accent); }
.dropzone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.upload-list { list-style: none; margin: 12px 0 0; padding: 0; }
.upload-item {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(80px, 1fr) minmax(0, 2fr) auto;
  gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px;
}
.upload-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-item progress { width: 100%; }
@media (max-width: 720px) {
  .upload-item { grid-template-columns: 1fr auto; }
  .upload-item progress, .upload-item .upload-status { grid-column: 1 / -1; }
}

.narrow-wide { max-width: 560px; margin: 24px auto; }
.credentials { font-size: 18px; }
.password { font-size: 20px; letter-spacing: 1px; user-select: all; }

/* 表格：操作欄與類型不換行 */
.list td:last-child, .list td code { white-space: nowrap; }
.asset-card .thumb, .asset-card .thumb .kind { text-decoration: none; }
@media (max-width: 720px) {
  .asset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .asset-card { padding: 8px; }
}
.nowrap { white-space: nowrap; }

/* ---- 階段 3：分享連結、下載紀錄 ---- */
h3 { margin: 20px 0 12px; font-size: 15px; }
.share-form { margin-top: 8px; border-top: 1px dashed var(--border); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; }
.share-url { word-break: break-all; color: var(--muted); }
.actions { white-space: nowrap; }
.actions .inline-form { display: inline; margin-left: 8px; }
.share-info { margin-top: -8px; }
.filter-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 16px; margin-bottom: 16px; }
.filter-form label { margin: 0; min-width: 160px; }
select {
  display: block; width: 100%; margin-top: 4px; padding: 9px 10px; font: inherit; color: var(--text);
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
}
.tag-share { padding: 1px 6px; border-radius: 4px; font-size: 12px; background: var(--bg); border: 1px solid var(--border); }
.pager { display: flex; justify-content: space-between; margin-top: 12px; }
.list td code.share-url { white-space: normal; word-break: break-all; }
.status { white-space: nowrap; }
.filter-form > button[type="submit"] { width: auto; }

/* ---- 整包下載 ---- */
.bundle-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 8px; }
button.secondary, .button.secondary { background: var(--surface); color: var(--accent); border: 1px solid var(--accent); }
button:disabled { opacity: 0.5; cursor: not-allowed; }
.bundle-note { margin: 0 0 16px; }
.asset-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pick { font-size: 14px; color: var(--muted); cursor: pointer; }
.select-all { font-size: 14px; }

/* ---- 兩步驟驗證 ---- */
.steps { margin: 0 0 16px; padding-left: 20px; }
.steps li { margin: 4px 0; }
/* QR Code 需要白底與留白（quiet zone），深色模式也一樣 */
.qr { text-align: center; }
.qr img { background: #fff; padding: 16px; border-radius: 8px; border: 1px solid var(--border); max-width: 100%; height: auto; }
.secret { font-size: 16px; letter-spacing: 1px; user-select: all; word-break: break-all; }
.codes { list-style: none; padding: 0; margin: 12px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.codes code { font-size: 17px; letter-spacing: 1px; user-select: all; }

/* ---- 資料夾 ---- */
.folder-list { list-style: none; padding: 0; margin: 0 0 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.folder-card { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 12px 44px; position: relative; border: 1px solid var(--border);
  border-radius: 10px; background: var(--surface); color: var(--text); text-decoration: none; min-width: 0; }
.folder-card:hover { border-color: var(--accent); }
.folder-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-card .meta { color: var(--muted); font-size: 13px; }
/* 資料夾圖示（純 CSS，不需要圖檔） */
.folder-icon { position: absolute; left: 14px; top: 16px; width: 20px; height: 15px; border-radius: 2px 3px 3px 3px; background: var(--accent); opacity: .85; }
.folder-icon::before { content: ""; position: absolute; left: 0; top: -4px; width: 9px; height: 5px; border-radius: 2px 2px 0 0; background: inherit; }
.file-button { display: inline-block; cursor: pointer; margin: 0; padding: 9px 16px; font-weight: 600; border-radius: 6px; }
.scope-choice { border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px 4px; margin: 0 0 12px; }
.scope-choice legend { padding: 0 4px; color: var(--muted); font-size: 14px; }
.upload-name .upload-dir { color: var(--muted); }
@media (max-width: 720px) {
  .folder-list { grid-template-columns: 1fr; }
}

/* ---- 路徑列與資料夾樹 ----
   參考常見的檔案管理介面（Google Drive、GitHub）：路徑列不加外框、上層可點且滑過時淡底、目前位置粗體不可點；
   資料夾樹每列固定高度、目前位置淡色底＋強調色字。圖示為 static/icons 的 SVG（以 mask 套用目前的文字顏色）。 */
:root { --tint: rgba(47, 91, 211, .10); --hover: rgba(29, 35, 48, .06); }
@media (prefers-color-scheme: dark) { :root { --tint: rgba(109, 143, 255, .16); --hover: rgba(230, 233, 239, .07); } }

.pathbar { margin: 0 0 6px; }
.pathbar ol { list-style: none; margin: 0 0 0 -8px; padding: 0; display: flex; flex-wrap: wrap; align-items: center; row-gap: 2px;
  font-size: 15px; line-height: 1.4; }
.pathbar li { display: flex; align-items: center; min-width: 0; }
.pathbar li + li::before { content: ""; width: 16px; height: 16px; margin: 0 2px; flex: none; background: var(--muted); opacity: .7;
  -webkit-mask: url(icons/chevron.svg?v=8e004c6a) center / contain no-repeat; mask: url(icons/chevron.svg?v=8e004c6a) center / contain no-repeat; }
.pathbar a, .pathbar [aria-current] { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 6px;
  max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pathbar a { color: var(--muted); text-decoration: none; }
.pathbar a:hover { background: var(--hover); color: var(--text); }
.pathbar [aria-current] { color: var(--text); font-weight: 600; }
.pathbar li > *::before { content: ""; width: 16px; height: 16px; flex: none; background: currentColor; opacity: .85;
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.pathbar .pb-home { --i: url(icons/home.svg?v=2a3d5492); }
.pathbar .pb-folder { --i: url(icons/folder.svg?v=fc796a55); }
.pathbar .pb-file { --i: url(icons/file.svg?v=82edd535); }
.pathbar .pb-folder [aria-current]::before { background: var(--accent); opacity: 1; }

.folder-heading { display: flex; align-items: center; gap: 10px; }
.folder-heading::before { content: ""; width: 26px; height: 26px; flex: none; background: var(--accent);
  -webkit-mask: url(icons/folder.svg?v=fc796a55) center / contain no-repeat; mask: url(icons/folder.svg?v=fc796a55) center / contain no-repeat; }
.upload-target { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: -4px 0 12px; padding: 8px 12px; border-radius: 8px;
  background: var(--tint); overflow-wrap: anywhere; }

/* 有資料夾樹時左右兩欄；頁面加寬，讓右側內容不會太擠 */
main:has(.browse.with-tree) { max-width: 1200px; }
.browse.with-tree { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; align-items: start; }
.browse-main > .card + .card, .browse-main > .card + section, .browse + .card { margin-top: 16px; }
.folder-tree { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; padding: 8px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px; font-size: 14px; }
.tree-panel > summary { list-style: none; display: flex; align-items: center; gap: 6px; padding: 6px 8px 8px; color: var(--muted);
  font-size: 12px; font-weight: 600; letter-spacing: .04em; pointer-events: none; } /* 寬螢幕：只是標題，不能收合 */
.tree-panel > summary::-webkit-details-marker { display: none; }
.tree, .tree ul { list-style: none; margin: 0; padding: 0; }
.tree ul { padding-left: 16px; }
.tree summary { list-style: none; display: flex; align-items: center; border-radius: 6px; cursor: pointer; }
.tree summary::-webkit-details-marker { display: none; }
/* 展開／收合箭頭（點箭頭收合，點名稱進入資料夾） */
.tree summary::before { content: ""; width: 20px; height: 32px; flex: none; background: var(--muted);
  -webkit-mask: url(icons/chevron.svg?v=8e004c6a) center / 14px no-repeat; mask: url(icons/chevron.svg?v=8e004c6a) center / 14px no-repeat;
  transition: transform .15s ease; }
.tree details[open] > summary::before { transform: rotate(90deg); }
.tree li > a { margin-left: 20px; } /* 沒有子資料夾：與有箭頭的項目對齊 */
.tree a { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; height: 32px; padding: 0 8px; border-radius: 6px;
  color: var(--text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tree a::before { content: ""; width: 16px; height: 16px; flex: none; background: var(--muted);
  -webkit-mask: url(icons/folder.svg?v=fc796a55) center / contain no-repeat; mask: url(icons/folder.svg?v=fc796a55) center / contain no-repeat; }
.tree a:hover { background: var(--hover); }
.tree a.current { background: var(--tint); color: var(--accent); font-weight: 600; }
.tree a.current::before { background: var(--accent); }
.tree a:focus-visible, .tree summary:focus-visible, .pathbar a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tree summary:focus-visible { outline-offset: 0; }

@media (max-width: 720px) {
  .browse.with-tree { display: block; }
  .folder-tree { position: static; max-height: none; margin-bottom: 12px; padding: 0; }
  .tree-panel > summary { pointer-events: auto; padding: 12px 14px; color: var(--text); font-size: 15px; letter-spacing: 0; cursor: pointer; }
  .tree-panel > summary::before { content: ""; width: 18px; height: 18px; flex: none; background: var(--accent);
    -webkit-mask: url(icons/folder.svg?v=fc796a55) center / contain no-repeat; mask: url(icons/folder.svg?v=fc796a55) center / contain no-repeat; }
  .tree-panel > summary::after { content: ""; width: 16px; height: 16px; margin-left: auto; background: var(--muted);
    -webkit-mask: url(icons/chevron.svg?v=8e004c6a) center / contain no-repeat; mask: url(icons/chevron.svg?v=8e004c6a) center / contain no-repeat;
    transform: rotate(90deg); transition: transform .15s ease; }
  .tree-panel[open] > summary::after { transform: rotate(-90deg); }
  .tree-panel > .tree { padding: 0 8px 8px; }
  .pathbar a, .pathbar [aria-current] { max-width: 16ch; }
}

/* ---- 搜尋 ---- */
.search-box { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; }
.search-box input[type="search"] { flex: 1; min-width: 0; margin: 0; padding-left: 38px;
  background: var(--surface) url(icons/search.svg?v=f0b861e8) 12px center / 18px no-repeat; }
.search-box button { flex: none; }
.search-clear { flex: none; padding: 0 4px; color: var(--muted); font-size: 14px; }
.search-results h2 { margin-bottom: 8px; }
.hit-list { list-style: none; margin: 8px 0 0; padding: 0; }
.hit { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.hit:first-child { border-top: 0; }
.hit-thumb { flex: none; display: flex; width: 56px; height: 42px; border-radius: 6px; overflow: hidden; background: var(--bg); text-decoration: none; }
.hit-thumb img { width: 100%; height: 100%; object-fit: cover; }
.hit-thumb .kind { font-size: 12px; }
/* 資料夾結果：資料夾圖示（與資料夾樹相同） */
.hit-folder { position: relative; }
.hit-folder::after { content: ""; position: absolute; inset: 0; margin: auto; width: 24px; height: 24px; background: var(--accent);
  -webkit-mask: url(icons/folder.svg?v=fc796a55) center / contain no-repeat; mask: url(icons/folder.svg?v=fc796a55) center / contain no-repeat; }
.mini-thumb .hit-folder { width: 56px; height: 42px; }
.hit-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hit-name { color: var(--text); font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hit-name:hover { color: var(--accent); }
.hit-where { display: inline-flex; align-items: center; gap: 4px; min-width: 0; color: var(--muted); font-size: 13px; text-decoration: none;
  overflow-wrap: anywhere; }
.hit-where::before { content: ""; flex: none; width: 13px; height: 13px; background: currentColor; opacity: .8;
  -webkit-mask: url(icons/folder.svg?v=fc796a55) center / contain no-repeat; mask: url(icons/folder.svg?v=fc796a55) center / contain no-repeat; }
.hit-where:hover { color: var(--accent); }
.hit-size { flex: none; color: var(--muted); font-size: 14px; }
@media (max-width: 720px) {
  .hit { flex-wrap: wrap; }
  .hit-info { flex-basis: calc(100% - 68px); }
  .hit-size { margin-left: 68px; }
  .hit .button { margin-left: auto; }
}

/* ---- 排序與檢視方式 ---- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.view-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin: 0 0 12px; }
.sort-label { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-size: 14px; }
.sort-label select { width: auto; margin: 0; padding: 6px 10px; font-size: 14px; background: var(--surface); }
.view-bar .sort-apply { padding: 6px 12px; font-size: 14px; }
.view-switch { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--surface); }
.view-switch button { width: 36px; height: 34px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--muted); }
.view-switch button + button { border-left: 1px solid var(--border); }
.view-switch button::before { content: ""; display: block; width: 18px; height: 18px; margin: auto; background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.view-switch .view-grid { --i: url(icons/grid.svg?v=078b67d6); }
.view-switch .view-list { --i: url(icons/list.svg?v=071d6585); }
.view-switch button:hover { background: var(--hover); color: var(--text); }
.view-switch button[aria-pressed="true"] { background: var(--tint); color: var(--accent); }
.search-results .view-switch { display: none; } /* 搜尋結果固定為清單 */
.search-results .view-bar { margin-top: -36px; } /* 與結果標題同一列 */
.search-results:has(.view-bar) h2 { padding-right: 250px; overflow-wrap: anywhere; } /* 標題很長時不壓到排序選單 */
.asset-rows { padding: 8px 20px; }
.hit-meta { color: var(--muted); font-size: 13px; }
.asset-rows .pick { flex: none; }
@media (max-width: 720px) {
  .view-bar { justify-content: space-between; }
  .search-results .view-bar { margin-top: 0; }
  .search-results:has(.view-bar) h2 { padding-right: 0; }
  .asset-rows { padding: 4px 14px; }
  .asset-rows .pick { margin-left: 68px; }
  .asset-rows .pick ~ .hit-size { margin-left: auto; }
}

/* ---- 拖曳移動（管理後台） ---- */
tr.draggable { cursor: grab; }
tr.draggable:active { cursor: grabbing; }
tr.drag-source { opacity: .45; }
/* 拖曳中：可放下的資料夾加上虛線提示，滑到上面時強調 */
body.is-dragging .folder-tree a[data-folder], body.is-dragging .folder-card[data-folder] { outline: 1px dashed var(--border); outline-offset: -1px; }
.folder-tree a.drop-target, .folder-card.drop-target { outline: 2px solid var(--accent) !important; outline-offset: -2px; background: var(--tint); }

/* ---- 路徑列：手機寬度收合中間層（tree.js 加上 .can-collapse 才收合；沒有 JS 時顯示完整路徑） ---- */
.pathbar .pb-more { display: none; }
.pathbar .pb-more button { padding: 4px 8px; border-radius: 6px; color: var(--muted); font-weight: 600; letter-spacing: 1px; text-decoration: none; }
.pathbar .pb-more button:hover { background: var(--hover); color: var(--text); }
@media (max-width: 720px) {
  .pathbar.can-collapse .pb-mid { display: none; }
  .pathbar.can-collapse .pb-more { display: flex; }
}

/* ---- 管理後台素材表格：檔名欄不被其他欄位擠窄 ---- */
.list td.name-cell { min-width: 16em; overflow-wrap: anywhere; }
.name-cell > a { font-weight: 600; }
.name-meta { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.name-meta code { font-size: 12px; }
@media (max-width: 720px) {
  .list td.name-cell { min-width: 0; white-space: normal; max-width: 70vw; } /* 手機：表格可左右滑動，檔名仍可換行 */
}

/* ---- 垃圾桶 ---- */
.card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0 0 12px; }
.card-head h2 { margin: 0; }
a.button.trash-button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 14px; }
.trash-button::before, .pathbar .pb-trash > *::before, .trash-heading::before { content: ""; flex: none; background: currentColor;
  -webkit-mask: url(icons/trash.svg?v=c7d037c0) center / contain no-repeat; mask: url(icons/trash.svg?v=c7d037c0) center / contain no-repeat; }
.trash-button::before { display: inline-block; width: 15px; height: 15px; }
.pathbar .pb-trash { --i: url(icons/trash.svg?v=c7d037c0); }
.trash-heading { display: flex; align-items: center; gap: 10px; }
.trash-heading::before { width: 24px; height: 24px; color: var(--muted); }
button.danger-outline { color: var(--danger); border-color: var(--danger); }

/* 公開連結 */
.warning { padding: 10px 12px; border-radius: 6px; border: 1px solid var(--admin); color: var(--text); }
.public-urls { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.copy-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.url-label { min-width: 4.5em; color: var(--muted); font-size: 13px; }
.public-url { flex: 1 1 16em; min-width: 0; overflow-wrap: anywhere; font-size: 13px; }
.public-links td { vertical-align: top; }
.public-asset { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.public-asset h2 { margin: 0; overflow-wrap: anywhere; }
.public-preview { width: 160px; max-width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--border); }
.size-options { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0; padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; }
.size-options legend { padding: 0 4px; color: var(--muted); font-size: 13px; }
/* 只用來一次停用整組表單欄位（例如非主要管理者看告警設定），沒有外框 */
fieldset.plain { border: 0; margin: 0; padding: 0; min-width: 0; }
.size-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.size-chip { padding: 1px 8px; border: 1px solid var(--border); border-radius: 999px; font-size: 13px; white-space: nowrap; text-decoration: none; }
.size-chip:hover { border-color: var(--accent); }
.stack-actions { white-space: nowrap; }
.stack-actions > * { display: block; }
.stack-actions form { margin: 4px 0 0; }
.batch-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 16px; }
.batch-list li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.batch-list img, .batch-list .kind { flex: none; width: 48px; height: 36px; object-fit: cover; border-radius: 4px; }
.batch-list span:last-child { overflow-wrap: anywhere; font-size: 14px; }
.copy-block { display: grid; gap: 6px; justify-items: start; margin: 0 0 12px; }
.copy-block textarea { width: 100%; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; resize: vertical; }
.alert-cats { display: grid; gap: 4px; }
.upload-dup { grid-column: 1 / -1; padding: 6px 10px; border-left: 3px solid var(--admin); background: var(--surface); font-size: 13px; }
.asset-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.asset-nav a, .asset-nav > span:not(.small) { white-space: nowrap; }
.asset-pager { align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.card-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tree-count { display: inline-block; min-width: 1.6em; padding: 0 6px; border-radius: 999px; background: var(--border); color: var(--text); font-size: 12px; text-align: center; }
.tag-public { display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--accent); font-size: 12px; text-decoration: none; white-space: nowrap; }

/* ---- 已刪除的專案（垃圾桶頁） ---- */
.deleted-projects-heading { margin-top: 28px; }
.deleted-project-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 8px; }
.deleted-project-actions form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.deleted-project-actions .checkbox { margin: 0; }

/* ---- 操作紀錄：操作與專案欄不被說明欄擠成一字一行（v0.20.1） ---- */
.audit-list td.audit-action { white-space: nowrap; }
.audit-list td.audit-project { min-width: 8em; }

/* ---- 專案列表：每列的刪除（v0.20.1） ---- */
.project-row-delete { display: flex; align-items: center; gap: 8px; margin: 0; white-space: nowrap; }
.project-row-delete .checkbox { margin: 0; }
.restore-impact { margin: 6px 0 0; color: var(--text); }