update

renderer/styles.css

@@ -117,14 +117,14 @@ html, body {
 
 /* 置顶开启：图标上色 + 轻微背景，关闭时回到 muted */
 #pin-btn[aria-pressed="true"] {
-  color: var(--accent);
+  color: var(--accent-fg);
   background: var(--accent-soft);
 }
 
 #pin-btn[aria-pressed="true"]:hover {
   /* 开启态下 hover 不要洗掉上色，只把背景加深一点 */
   background: var(--accent-hover);
-  color: var(--accent);
+  color: var(--accent-fg);
 }
 
 #refresh-btn.spinning svg {
@@ -191,8 +191,8 @@ html, body {
 }
 
 #tabs .tab.active {
-  color: var(--accent);
-  border-bottom-color: var(--accent);
+  color: var(--accent-fg);
+  border-bottom-color: var(--accent-fg);
 }
 
 .tab-count {
@@ -213,7 +213,7 @@ html, body {
 
 #tabs .tab.active .tab-count {
   background: var(--accent-soft);
-  color: var(--accent);
+  color: var(--accent-fg);
 }
 
 /* ---------- 搜索 ---------- */
@@ -258,9 +258,11 @@ html, body {
   box-shadow: 0 0 0 3px var(--accent-soft);
 }
 
-#search:focus + #search-clear,
+/* 只有搜索图标随聚焦高亮。之前还有一条 #search:focus + #search-clear，
+ * 会让清空按钮在输入全程保持 accent 色 —— 一个次要的 × 按钮不该比输入框
+ * 本身更抢眼，且与 #search-clear 自身的 muted 设计矛盾，已移除。 */
 #search-wrap:focus-within #search-icon {
-  color: var(--accent);
+  color: var(--accent-fg);
 }
 
 #search::placeholder {
@@ -360,6 +362,12 @@ html, body {
   border-color: var(--accent);
 }
 
+/* .card 设过 outline:none，必须用等效焦点指示补回（卡片本身 tabindex=0） */
+.card:focus-visible {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-soft);
+}
+
 .card-head {
   display: flex;
   align-items: center;
@@ -378,7 +386,9 @@ html, body {
   display: inline-flex;
   align-items: center;
   gap: 3px;
-  font-size: 10.5px;
+  /* 徽标含中文（文本/图片）：tokens 自定标准 --fs-xs=11px 是 CJK 清晰下限，
+   * 之前 10.5px 与自己的标准矛盾，小字中文发糊。 */
+  font-size: var(--fs-xs);
   color: var(--text-soft);
   background: var(--bg-hover);
   border-radius: 4px;
@@ -395,11 +405,11 @@ html, body {
 }
 
 .badge-image {
-  color: var(--accent);
+  color: var(--accent-fg);
 }
 
 .badge-image svg {
-  color: var(--accent);
+  color: var(--accent-fg);
   opacity: 0.85;
 }
 
@@ -433,8 +443,12 @@ html, body {
   border-radius: 6px;
   cursor: pointer;
   opacity: 0;
+  /* 只设 opacity:0 的按钮「看不见但点得着」：点卡片头部想选中时会误触
+   * 透明的 ★/删除；键盘 Tab 也会聚焦到隐形按钮。visibility 进 transition
+   * 是离散动画：出现时立即可见 + opacity 淡入，消失时等淡出结束才隐藏。 */
+  visibility: hidden;
   line-height: 1;
-  transition: opacity var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
+  transition: opacity var(--transition-fast), background var(--transition-fast), color var(--transition-fast), visibility var(--transition-fast);
 }
 
 .action svg {
@@ -443,8 +457,15 @@ html, body {
 }
 
 .card:hover .action,
-.card.selected .action {
+.card.selected .action,
+.action:focus-visible {
   opacity: 1;
+  visibility: visible;
+}
+
+.action:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 1px;
 }
 
 .action:hover {
@@ -453,12 +474,12 @@ html, body {
 }
 
 .action.copy {
-  color: var(--accent);
+  color: var(--accent-fg);
   padding-right: 10px;
 }
 
 .action.copy:hover {
-  color: var(--accent);
+  color: var(--accent-fg);
   background: var(--accent-hover);
 }
 
@@ -507,7 +528,9 @@ html, body {
   color: var(--text);
   /* 中文正文行高 ≥1.55 才不会出现笔画"黏连"，这里设 1.6 让 13px 中文清爽 */
   line-height: 1.6;
-  word-break: break-all;
+  /* 超长无空格串（URL/路径）能断行，但不像 word-break:break-all 那样把
+   * 普通英文单词从中间生硬截断；中文本身任意位置可断，不受影响。 */
+  overflow-wrap: anywhere;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
@@ -529,6 +552,53 @@ html, body {
     linear-gradient(-45deg, transparent 75%, var(--bg-soft) 75%);
   background-size: 12px 12px;
   background-position: 0 0, 0 6px, 6px -6px, -6px 0;
+  cursor: zoom-in;
+}
+
+/* 缩略图可聚焦（buildCard 里设了 role=button + tabindex），补键盘焦点指示 */
+.image-preview:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 1px;
+}
+
+/* ---------- 图片大图预览 ---------- */
+
+#lightbox {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.72);
+  cursor: zoom-out;
+}
+
+/* 焦点放在遮罩上只为接 Esc，不需要焦点描边 */
+#lightbox:focus { outline: none; }
+
+#lightbox:not(.hidden) {
+  animation: lightbox-in var(--transition-fast);
+}
+
+@keyframes lightbox-in {
+  from { opacity: 0; }
+}
+
+#lightbox-img {
+  max-width: 92vw;
+  max-height: 88vh;
+  object-fit: contain;
+  border-radius: 8px;
+  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
+  /* 与 .image-preview 同款棋盘格底；深色遮罩上换成浅色格子，透明 PNG 才看得清 */
+  background:
+    linear-gradient(45deg, rgba(255, 255, 255, 0.14) 25%, transparent 25%),
+    linear-gradient(-45deg, rgba(255, 255, 255, 0.14) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.14) 75%),
+    linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.14) 75%);
+  background-size: 16px 16px;
+  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
 }
 
 /* ---------- 空状态 ---------- */
@@ -652,14 +722,17 @@ kbd {
   cursor: pointer;
   line-height: 1;
   margin-bottom: -1px;
-  transition: color 0.12s ease, border-color 0.12s ease;
+  /* 与全局动效 token 统一（--transition-fast = 100ms ease-out），不再散写 0.12s ease */
+  transition: color var(--transition-fast), border-color var(--transition-fast);
 }
 
 #tab-bar .tab:hover { color: var(--text); }
 
 #tab-bar .tab[aria-selected="true"] {
   color: var(--text);
-  border-bottom-color: var(--accent);
+  /* 与 #tabs .tab.active 一致：文字/下划线指示都走 --accent-fg，
+   * light 主题亮色系 accent 下划线才够清晰。 */
+  border-bottom-color: var(--accent-fg);
   font-weight: var(--fw-semibold);
 }
 
@@ -759,9 +832,11 @@ kbd {
 .btn:hover { background: var(--bg-hover); border-color: var(--border-strong); }
 .btn:active { background: var(--bg-soft); }
 .btn-danger { color: var(--danger); border-color: var(--danger-bg); background: var(--danger-bg); }
-.btn-danger:hover { background: var(--danger); color: var(--accent-text); border-color: var(--danger); }
+/* hover 是「红底白字」：不能用 --accent-text（它随 accent 色系自适应，
+ * green/orange  accent 下是深色字，红底深字对比度崩塌），这里恒为白。 */
+.btn-danger:hover { background: var(--danger); color: #FFFFFF; border-color: var(--danger); }
 .danger-zone { border-color: var(--danger-bg); }
-.danger-zone:hover { border-color: rgba(239, 68, 68, 0.4); }
+.danger-zone:hover { border-color: var(--danger-border); }
 
 /* 开关 */
 .switch { position: relative; display: inline-block; width: 36px; height: 20px; flex-shrink: 0; }
@@ -907,7 +982,11 @@ kbd {
   width: 44px;
   height: 44px;
   border-radius: 10px;
-  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
+  /* 立体渐变 = 实色 accent 上叠一层 白→黑 overlay（设计系统标准做法）。
+   * 之前渐变末端用 --accent-hover，那是个 20% 透明度的 hover 底色 token，
+   * 图标右下角几乎全透明、透出卡片底色，像褪了一块色。 */
+  background: var(--accent);
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(0, 0, 0, 0.14)), var(--accent);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -943,10 +1022,28 @@ kbd {
 .about-dev { font-size: var(--fs-base); color: var(--text); }
 .ext-link {
   font-size: var(--fs-sm);
-  color: var(--accent);
+  color: var(--accent-fg);
   text-decoration: none;
   word-break: break-all;
   cursor: pointer;
   transition: opacity var(--transition-fast);
 }
 .ext-link:hover { text-decoration: underline; opacity: 0.85; }
+
+/* ---------- 键盘焦点可见性（:focus-visible） ----------
+ * 全局面控件统一的键盘焦点指示。:focus-visible 只在键盘导航时触发，
+ * 鼠标点击不出现描边，不影响现有观感。
+ * （.card / .action / #tab-bar .tab / .switch / select 已在各自区块定义。） */
+.icon-btn:focus-visible,
+#search-clear:focus-visible,
+.btn:focus-visible,
+#tabs .tab:focus-visible,
+.theme-card:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 1px;
+}
+
+/* 圆形色板用双层 ring（与 .active 选中态同构，区别在 accent 色） */
+.accent-swatch:focus-visible {
+  box-shadow: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--accent);
+}