:root { --bg: #14171c; --bg-panel: #1c2027; --bg-hover: #262b34; --border: #2e333d; --text: #e4e6eb; --text-dim: #9aa1ac; --accent: #3d8bfd; --accent-hover: #5a9cfd; --danger: #e05260; --radius: 6px; } /* 亮色主題：靠這個屬性切換，見 js/nav.js 的 🌙 按鈕跟每個頁面裡那段防閃爍的 inline script（在 CSS 生效前就把屬性設好，換頁/重新整理不會閃一下錯的主題）。 */ :root[data-theme="light"] { --bg: #f4f5f7; --bg-panel: #ffffff; --bg-hover: #eceef2; --border: #dde1e7; --text: #1b1e24; --text-dim: #6b7280; --accent: #2f6fe0; --accent-hover: #1f5bc4; --danger: #d1394a; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: "Segoe UI", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif; min-height: 100vh; } /* 需要登入才能看的頁面（除了 login.html 以外全部）在上面加這個 class。這些頁面的 HTML 一開始就整段在，js/api.js 的 requireLogin() 要先打一次 /api/me 確認有沒有登入才知道要不要導去 /login.html——在那個結果回來之前,瀏覽器已經把整頁畫面（含搜尋框等內容）畫出來了,沒登入的人會先看到一瞬間的畫面才被導走（2026-08-29 使用者回報）。用 visibility:hidden 先把內容藏起來,requireLogin() 確認登入成功後才加上 .authed 讓畫面出現;確認失敗的話本來就會馬上導頁離開,不需要特別解除隱藏。 */ body.requires-auth:not(.authed) > * { visibility: hidden; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); } nav.topbar { display: flex; align-items: center; gap: 20px; padding: 10px 20px; background: var(--bg-panel); border-bottom: 1px solid var(--border); position: relative; } nav.topbar .brand { font-weight: 700; font-size: 1.1rem; margin-right: auto; color: var(--text); text-decoration: none; flex-shrink: 0; } nav.topbar .brand:hover { color: var(--accent); } /* 獨立於漢堡選單外的我的最愛捷徑,手機版也一定看得到、點得到,不用先展開選單。 */ .nav-fav-icon { flex-shrink: 0; font-size: 1.2rem; line-height: 1; text-decoration: none; padding: 4px 2px; opacity: 0.75; } .nav-fav-icon:hover, .nav-fav-icon.active { opacity: 1; } nav.topbar a, nav.topbar button.link { color: var(--text-dim); background: none; border: none; font: inherit; cursor: pointer; padding: 4px 2px; white-space: nowrap; } nav.topbar a.active, nav.topbar a:hover, nav.topbar button.link:hover { color: var(--accent); } /* 手機版導覽選單：連結一多（家人帳號最多看到 2 項，管理員最多到 8 項）擠不進一行時，原本靠 flex-wrap 自然換行會疊成三行、很亂（2026-08-29 使用者截圖回報）。改成漢堡選單，窄螢幕下 .nav-links 預設收起來，點 ☰ 才展開成下拉面板；桌面版兩者行為不變（☰ 隱藏, .nav-links 照舊排成一行）。 */ .nav-toggle { display: none; background: none; border: none; color: var(--text); font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 4px 8px; flex-shrink: 0; } .nav-links { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } @media (max-width: 720px) { .nav-toggle { display: block; } .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 4px; background: var(--bg-panel); border-bottom: 1px solid var(--border); padding: 10px 20px 14px; z-index: 30; } .nav-links.open { display: flex; } } /* 首頁跑馬燈公告：夾在導覽列跟搜尋欄中間,超級管理員在管理頁面打字才會出現,清空就整條隱藏（見 library.js／admin.js）。淺黃底＋紅字是刻意固定的顏色，不跟著深色/淺色主題變,公告本來就是要在任何主題下都醒目。用 position:absolute + left 百分比（不是 transform）,因為 left 的百分比是相對容器寬度算,才能保證文字真的從容器最左邊完全跑到最右邊外面。 */ .announcement-bar { overflow: hidden; white-space: nowrap; position: relative; height: 28px; background: #fef3c7; } .announcement-text { position: absolute; left: -100%; top: 50%; transform: translateY(-50%); color: #dc2626; font-weight: 700; font-size: 0.9rem; animation: piyanbar-marquee 18s linear infinite; } @keyframes piyanbar-marquee { from { left: 100%; } to { left: -100%; } } @media (prefers-reduced-motion: reduce) { .announcement-text { animation: none; left: 8px; } } .container { max-width: 1200px; margin: 0 auto; padding: 20px; } .search-bar { display: flex; gap: 8px; margin-bottom: 20px; } .search-bar input[type="text"] { flex: 1; } /* 標題語言切換鈕改放國旗圖片（/img/jp.png、/img/tw.png)取代 emoji,按鈕本身用 flex 置中,圖片本身 display:block 才不會因為預設 inline 的行內留白而跟按鈕邊框沒對齊（2026-09-06 使用者提供圖檔）。 */ #titleLangBtn { display: inline-flex; align-items: center; justify-content: center; padding: 8px 12px; } /* 國旗圖片本身不是正方形（jp.png/tw.png 大約 4:3),只固定高度、寬度用 auto 讓瀏覽器照原始長寬比縮放,不然像之前寫死 width=20 height=20 硬把長方形圖片壓成正方形會變形（2026-09-06 使用者回報）。按鈕本身大小不變,只有圖片寬度會跟著長寬比微調。 */ #titleLangIcon { display: block; height: 20px; width: auto; border-radius: 3px; } input, select, textarea { background: var(--bg-panel); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius); padding: 8px 10px; font: inherit; } input:focus, select:focus, textarea:focus { outline: 1px solid var(--accent); } button { background: var(--accent); color: #fff; border: none; border-radius: var(--radius); padding: 8px 16px; font: inherit; cursor: pointer; } button:hover { background: var(--accent-hover); } button:disabled { background: var(--border); color: var(--text-dim); cursor: not-allowed; } button.secondary { background: var(--bg-hover); color: var(--text); } button.secondary:hover { background: var(--border); } a.secondary { display: inline-block; background: var(--bg-hover); color: var(--text); border-radius: var(--radius); padding: 8px 16px; } a.secondary:hover { background: var(--border); color: var(--text); } button.danger { background: var(--danger); } button.danger:hover { background: #f16a77; } /* 先固定五本一列給使用者看排版（2026-08-29 要求），手機/平板寬度用 media query 降欄數，不然五欄硬擠在窄螢幕上每張卡片會小到看不清楚封面。 */ .gallery-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; } @media (max-width: 1000px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } } .gallery-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; position: relative; } .gallery-card a.cover-link { display: block; } .gallery-card img.cover { width: 100%; aspect-ratio: 3 / 4.2; object-fit: cover; background: var(--bg-hover); display: block; } .gallery-card .info { padding: 8px 10px; } .gallery-card .title { font-size: 0.88rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } /* 頁數/標籤跟上傳日期同一列——日期只需要剛好放得下 "26-08-30" 的寬度（flex-shrink:0，不會被壓縮），其餘空間全部給前面的頁數/標籤，太長就用 ... 縮掉，不換行（2026-08-31 使用者要求，首頁書卡）。 */ .gallery-card .meta-row { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; } .gallery-card .meta { flex: 1; min-width: 0; color: var(--text-dim); font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gallery-card .card-date { flex-shrink: 0; color: var(--text-dim); font-size: 0.78rem; } .gallery-card .fav-btn { position: absolute; top: 6px; right: 6px; background: rgba(20, 23, 28, 0.75); border: none; border-radius: 50%; width: 30px; height: 30px; padding: 0; font-size: 1rem; line-height: 1; } .gallery-card .fav-btn.active { color: #ffb648; } .gallery-card .uncensored-badge { position: absolute; top: 6px; left: 6px; background: var(--danger); color: #fff; font-size: 0.7rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; line-height: 1.4; } .empty-state { color: var(--text-dim); text-align: center; padding: 60px 20px; } .load-more-row { text-align: center; margin-top: 24px; } .pagination-row { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 24px; } .pagination-row span { color: var(--text-dim); font-size: 0.9rem; } .login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; } .login-box { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; width: 320px; display: flex; flex-direction: column; gap: 12px; } .login-box h1 { margin: 0 0 8px; font-size: 1.3rem; text-align: center; } .error-text { color: var(--danger); font-size: 0.85rem; min-height: 1.2em; } /* 登入後的 18 禁警語頁面（consent.html）：比一般登入框寬，文字量比較多，手機上縮到接近全寬（減掉左右各 16px），按鈕在窄螢幕上直向堆疊避免擠壓（2026-08-31 使用者要求）。 */ .consent-box { width: 480px; max-width: calc(100vw - 32px); text-align: left; } .consent-box h1 { text-align: center; } .consent-box p, .consent-box li { font-size: 0.9rem; line-height: 1.6; margin: 0 0 8px; } .consent-box ul { margin: 0 0 8px; padding-left: 20px; } .consent-hint { color: var(--text-dim); font-size: 0.82rem; } .consent-actions { display: flex; gap: 8px; margin-top: 4px; } .consent-actions button { flex: 1; } @media (max-width: 420px) { .consent-actions { flex-direction: column; } } /* 「服務中止」惡搞頁（notice.html）：跟 consent-box 同一套尺寸規則。#secretEntrance 刻意不留任何顏色/底線/游標樣式差異——要看起來就是一段普通的公告文字,藏在裡面的入口只能靠使用者自己知道去點,不能用視覺線索找到（2026-09-01 使用者要求）。入口本身連 id/class 都不在 HTML／CSS 原始碼裡出現,是 notice.js 執行期動態找文字、動態包裝、用 inline style 加點擊範圍——連「檢視原始碼」都看不到任何線索,見 notice.js 的說明。 */ .notice-box { width: 480px; max-width: calc(100vw - 32px); text-align: left; } .notice-img { display: block; width: 110px; margin: 0 auto 8px; } .notice-box p { font-size: 0.9rem; line-height: 1.7; margin: 0 0 10px; } .notice-en { text-align: center; color: var(--text-dim); font-size: 0.8rem; margin-top: 6px; } .reader-shell { display: flex; flex-direction: column; align-items: center; padding: 12px 12px 80px; } /* height:auto 是關鍵：pageImg 的 width/height 屬性是 reader.js 設的原始像素尺寸（給 reader 在圖片載入前先保留版面高度用），max-width:100% 只會縮寬度，高度預設仍卡在原始像素值, 在窄螢幕上會變成寬度被縮小、高度沒跟著縮、圖片被硬生生拉直的畸形版面。 */ .reader-page-img { max-width: 100%; height: auto; display: block; margin: 0 auto; background: var(--bg-hover); } .reader-bottom-nav { position: sticky; bottom: 0; display: flex; gap: 10px; justify-content: center; width: 100%; padding: 10px 12px; margin-top: 12px; background: var(--bg-panel); border-top: 1px solid var(--border); } .reader-bottom-nav button, .reader-bottom-nav a { flex: 1; max-width: 180px; text-align: center; } /* 手機版閱讀介面：頂列只留「返回／標題／頁碼／選單」，上一頁/下一頁改成疊在圖片左右兩側的點擊區（手機翻頁常見的手勢），不再塞好幾個文字按鈕進同一列——窄螢幕下按鈕文字擠壓時，中文沒有空白可以斷行，會逐字往下疊成一直行，非常難用（2026-08-29 使用者截圖回報)。 */ .reader-toolbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--bg-panel); border-bottom: 1px solid var(--border); width: 100%; } .rt-back { flex-shrink: 0; font-size: 1.2rem; padding: 4px 6px; line-height: 1; } .rt-title { flex: 1; min-width: 0; } .rt-title-main { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rt-title-meta { font-size: 0.78rem; color: var(--text-dim); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rt-title-meta a { font-size: inherit; } .rt-page-indicator { flex-shrink: 0; background: var(--bg-hover); color: var(--text); border: none; border-radius: var(--radius); padding: 6px 10px; font: inherit; white-space: nowrap; } .rt-icon-btn { flex-shrink: 0; width: 34px; height: 34px; padding: 0; border-radius: var(--radius); font-size: 1rem; line-height: 1; } /* 純文字符號（★）color 變橘色就看得出來,但 emoji（📌）本身是固定顏色的圖形字符, 不吃 CSS color——兩種圖示都要看得出「已啟用」,才另外加一個底色當共通的視覺標記。 */ .rt-icon-btn.active { color: #ffb648; background: rgba(255, 182, 72, 0.22); } .reader-page-wrap { position: relative; max-width: 100%; } .reader-nav-zone { position: absolute; top: 0; bottom: 0; width: 42%; background: transparent; border: none; padding: 0; cursor: pointer; display: flex; align-items: center; color: var(--text); } .reader-nav-zone:hover { background: rgba(255, 255, 255, 0.03); } /* 全站共用的 `button:disabled { background: var(--border); }`（見上面）比這裡的 .reader-nav-zone 選擇器更精確（多一個 :disabled），會蓋掉 transparent，導致翻到第一頁時左側 42% 的點擊區被一塊灰底整個蓋住（2026-08-29 使用者截圖回報）。這裡明講 background:transparent 才能贏過那條規則。 */ .reader-nav-zone:disabled { cursor: default; background: transparent; } .reader-nav-zone:disabled:hover { background: transparent; } .reader-nav-prev { left: 0; justify-content: flex-start; } .reader-nav-next { right: 0; justify-content: flex-end; } .reader-nav-zone span { opacity: 0.45; font-size: 1.8rem; background: rgba(20, 23, 28, 0.55); border-radius: 999px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; margin: 0 6px; } .reader-nav-zone:disabled span { opacity: 0.15; } /* 雙擊放大（單頁模式限定,見 reader.js 的說明）：放大時 wrap 變成蓋滿全螢幕的固定定位, 靠 overflow:auto 讓使用者用原生手勢拖曳捲動查看放大後超出畫面的部分,不是單純 transform:scale——transform 不會撐大可捲動範圍,拖曳會卡住哪裡都滑不動。 */ .reader-page-wrap.zoomed { position: fixed; inset: 0; z-index: 60; max-width: none; overflow: auto; -webkit-overflow-scrolling: touch; background: var(--bg); } .reader-page-wrap.zoomed .reader-page-img { max-width: none; width: 220%; height: auto; margin: 0; } .reader-page-wrap.zoomed .reader-nav-zone { display: none; } /* 連續捲動模式：全部頁面直接一張接一張疊起來,不留間距——手機使用者往下滑就能一路看完, 不用每頁都點一次翻頁（2026-08-31 使用者要求）。 */ .reader-continuous { width: 100%; } .reader-continuous-img { width: 100%; height: auto; display: block; background: var(--bg-hover); } table.admin-table { width: 100%; border-collapse: collapse; } table.admin-table th, table.admin-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; font-size: 0.9rem; } table.admin-table th { color: var(--text-dim); font-weight: 600; } /* 現有帳號表：欄位標題（顯示名稱／權限／建立時間）在窄螢幕被平均分配到很小的寬度時，中文沒有空白可斷行,會逐字往下疊成一長條（2026-08-29 使用者截圖回報）。nowrap 讓每欄保持原本寬度不被硬壓縮,外層的 overflow-x:auto 容器接住,真的放不下就整張表橫向捲動, 而不是把文字拆得亂七八糟。窄螢幕再乾脆把「建立時間」欄整個藏起來（使用者建議）—— 那欄資訊最不常用,先讓其他欄有位置喘息。 */ table.users-table th, table.users-table td { white-space: nowrap; } @media (max-width: 640px) { table.users-table th.col-created, table.users-table td.col-created { display: none; } } /* 紀錄類表格共用（上傳紀錄／閱覽日誌）：固定欄寬（table-layout:fixed）才能讓書名欄溢出時穩定顯示 ...，時間／帳號名這兩欄改成不換行，避免「測試管理員」這種名字被書名欄擠壓、逐字往下疊成兩行（2026-08-29 使用者截圖回報）。時間欄本身用
手動斷成日期／時間兩行，跟這裡的 nowrap 不衝突——
換行不受 white-space:nowrap 影響。 */ table.log-table { table-layout: fixed; } table.log-table th:nth-child(1), table.log-table td:nth-child(1), table.log-table th:nth-child(2), table.log-table td:nth-child(2) { white-space: nowrap; } table.log-table td:nth-child(3) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 上傳紀錄多一欄頁數，閱覽日誌沒有——只有這欄是 upload-log-table 專屬。 */ table.upload-log-table th:nth-child(4), table.upload-log-table td:nth-child(4) { white-space: nowrap; } .form-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; } .form-row label { font-size: 0.85rem; color: var(--text-dim); } .progress-row { display: flex; align-items: center; gap: 10px; margin: 8px 0; } .progress-bar-track { flex: 1; height: 8px; border-radius: 4px; background: var(--bg-hover); overflow: hidden; } .progress-bar-fill { height: 100%; background: var(--accent); width: 0%; transition: width 0.15s; } .upload-item { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 0.85rem; color: var(--text-dim); } .upload-item.done { color: #6fce8b; } .upload-item.error { color: var(--danger); } .review-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; margin: 16px 0; } .review-thumb { position: relative; background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .review-thumb img { width: 100%; height: auto; display: block; background: var(--bg-hover); } .review-thumb .review-page-no { position: absolute; left: 4px; bottom: 4px; background: rgba(20, 23, 28, 0.75); color: var(--text); font-size: 0.72rem; padding: 1px 6px; border-radius: 999px; } .review-thumb .review-remove-btn { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; padding: 0; border-radius: 50%; background: rgba(224, 82, 96, 0.9); font-size: 0.95rem; line-height: 1; } .review-thumb .review-remove-btn:hover { background: var(--danger); } .review-actions { position: sticky; bottom: 0; display: flex; gap: 10px; padding: 12px 0; background: var(--bg); } /* 批量切書頁面（batch-review.html）：分本紀錄的已發布摘要／展開中的表單都用三欄排版，一次最多同時看到三筆，第四筆自動跳到下一列——原本整排單欄太長、右側空間都浪費掉（2026-08-31 使用者要求縮成原本的 1/3 寬）。窄螢幕縮成一欄，三欄擠不下。 */ #rangeEntries, #stagedRanges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } @media (max-width: 720px) { #rangeEntries, #stagedRanges { grid-template-columns: 1fr; } } .batch-range-entry { padding: 10px 12px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.9rem; } .batch-range-form { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; } /* 編輯漫畫頁面的篩選列：四個輸入框 + 搜尋按鈕全部擠在同一列，寧可讓輸入框一起等比例縮窄、縮到底再讓整列橫向捲動，也不要讓 flex-wrap 把搜尋按鈕自己擠到下一行去（使用者明確要求搜尋鍵不要換行,見 2026-08-29 的討論）。 */ .filter-row { display: flex; gap: 8px; margin-bottom: 16px; overflow-x: auto; overflow-y: hidden; padding-bottom: 2px; } /* 篩選欄位改回可以撐滿整列（flex-grow:1),對齊下面卡片清單容器的寬度——容器本身已經從 800px 縮到 650px（2026-09-06 使用者要求),欄位不用再刻意縮窄不撐滿,不然工具列看起來會比下面的卡片清單窄一截、兩邊寬度對不齊。 */ .filter-row input, .filter-row select { flex: 1 1 110px; min-width: 90px; } .filter-row button { flex-shrink: 0; } /* 找重複頁籤的兩個勾選框跟文字/搜尋欄位不一樣,不該被上面那條規則撐成 110px 寬的方塊,蓋掉整個 flex: 0 0 auto 讓它維持原生大小（2026-09-06 使用者要求加勾選框）。 */ .filter-row input[type="checkbox"] { flex: 0 0 auto; min-width: 0; width: auto; } /* 編輯漫畫頁面的功能太多（搜尋/找重複/批量上傳）擠在同一列會太亂,拆成頁籤——手機上橫向捲動同一排 tab 按鈕即可,不用做成下拉選單（2026-09-06 使用者要求）。overflow-y 要明講 hidden,不然只設 overflow-x 的話瀏覽器會把 overflow-y 也算成 auto,底下 .edit-tab-btn 的 margin-bottom:-1px 疊加邊框那 1px 就會多跑出一條垂直捲軸出來（2026-09-06 使用者回報）。 */ .edit-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; overflow-x: auto; overflow-y: hidden; } .edit-tab-btn { background: none; border: none; color: var(--text-dim); font: inherit; padding: 10px 16px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; flex-shrink: 0; } .edit-tab-btn:hover { color: var(--text); } .edit-tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); } .manage-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--border); } /* 找重複結果裡標出每一組的分界，讓使用者看得出來哪幾列是同一組——見 edit.js 的說明。 */ .dup-group-divider { height: 8px; background: var(--bg); border-bottom: 1px solid var(--border); } .manage-row .manage-thumb { flex-shrink: 0; width: 32px; height: 44px; object-fit: cover; border-radius: 4px; background: var(--bg-hover); } .manage-row .manage-info { flex: 1; min-width: 0; } .manage-row .manage-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 頁數/標籤跟上傳日期同一列——日期只需要剛好放得下 "26-08-30" 的寬度（flex-shrink:0，不會被壓縮），其餘空間全部給前面的頁數/標籤，太長就用 ... 縮掉，不換行（2026-08-31 使用者要求）。 */ .manage-row .manage-meta-row { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; } .manage-row .manage-meta { flex: 1; min-width: 0; color: var(--text-dim); font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .manage-row .manage-date { flex-shrink: 0; color: var(--text-dim); font-size: 0.82rem; } .manage-row .gear-btn { display: flex; align-items: center; justify-content: center; background: var(--bg-hover); border: none; border-radius: var(--radius); width: 36px; height: 36px; padding: 0; font-size: 1.1rem; line-height: 1; flex-shrink: 0; } .manage-row .gear-btn:hover { background: var(--border); } .manage-row .gear-btn-danger:hover { background: var(--danger); } .tag-pill { display: inline-block; background: var(--bg-hover); border-radius: 999px; padding: 2px 10px; font-size: 0.78rem; color: var(--text-dim); margin: 2px 4px 2px 0; }