dsh-remote-plugin 0.6.18 → 0.6.20

package/public/motion.js

@@ -7,8 +7,21 @@
 
   const reduceQuery = window.matchMedia?.('(prefers-reduced-motion: reduce)')
   let reduced = !!reduceQuery?.matches
-  reduceQuery?.addEventListener?.('change', event => { reduced = !!event.matches })
-  const activePulses = new WeakSet()
+  const activePulses = new Set()
+  const recentRuns = new WeakMap()
+
+  reduceQuery?.addEventListener?.('change', event => {
+    reduced = !!event.matches
+    if (!reduced) return
+    const animated = document.querySelectorAll('.view, .ds-view, [data-motion-view], .modal, .ds-modal, .sheet, .ds-drawer, [data-motion-panel]')
+    gsap.killTweensOf(animated)
+    clear(animated)
+    for (const node of activePulses) {
+      gsap.killTweensOf(node)
+      clear(node)
+    }
+    activePulses.clear()
+  })
 
   function clear(targets) {
     gsap.set(targets, { clearProps: 'opacity,visibility,transform,willChange' })
@@ -22,17 +35,32 @@
     return items.map(motionKey).join('|')
   }
 
+  function startedRecently(node, threshold = 48) {
+    const now = window.performance?.now?.() || Date.now()
+    const previous = recentRuns.get(node) || 0
+    recentRuns.set(node, now)
+    return previous > 0 && now - previous < threshold
+  }
+
   function view(view) {
-    if (!view) return
-    const children = [...view.children].filter(child => !child.classList.contains('hidden')).slice(0, 6)
-    gsap.killTweensOf([view, ...children])
+    if (!view || startedRecently(view)) return
+    const children = [...view.children].filter(child => !child.classList.contains('hidden')).slice(0, 8)
+    const targets = children.length ? children : [view]
+    gsap.killTweensOf([view, ...targets])
+    gsap.set(view, { autoAlpha: 1, clearProps: 'transform' })
     if (reduced) {
-      clear([view, ...children])
+      clear([view, ...targets])
       return
     }
-    const tl = gsap.timeline({ defaults: { ease: 'power2.out' } })
-    tl.fromTo(view, { autoAlpha: 0, y: 8 }, { autoAlpha: 1, y: 0, duration: 0.22, clearProps: 'transform' })
-      .fromTo(children, { autoAlpha: 0, y: 6 }, { autoAlpha: 1, y: 0, duration: 0.16, stagger: 0.025, clearProps: 'transform' }, '<0.04')
+    gsap.fromTo(targets, { opacity: 0.72, y: 8 }, {
+      opacity: 1,
+      y: 0,
+      duration: 0.24,
+      ease: 'power2.out',
+      stagger: { each: 0.035, from: 'start' },
+      overwrite: 'auto',
+      clearProps: 'opacity,visibility,transform,willChange'
+    })
   }
 
   function list(container, selector) {
@@ -420,8 +448,57 @@
     registry.set(selector, state)
   }
 
+  function panel(node) {
+    if (!node || startedRecently(node)) return
+    gsap.killTweensOf(node)
+    if (reduced) return clear(node)
+    gsap.fromTo(node, { autoAlpha: 0, y: 8 }, {
+      autoAlpha: 1,
+      y: 0,
+      duration: 0.2,
+      ease: 'power2.out',
+      overwrite: 'auto',
+      clearProps: 'opacity,visibility,transform,willChange'
+    })
+  }
+
+  function popover(node) {
+    if (!node || startedRecently(node)) return
+    const opensUpward = !!(node.closest('.composer-wrap, .ds-composer') || node.style.bottom)
+    gsap.killTweensOf(node)
+    if (reduced) return clear(node)
+    gsap.fromTo(node, {
+      autoAlpha: 0,
+      y: opensUpward ? 7 : -7,
+      scale: 0.985,
+      transformOrigin: opensUpward ? 'bottom left' : 'top right'
+    }, {
+      autoAlpha: 1,
+      y: 0,
+      scale: 1,
+      duration: 0.18,
+      ease: 'power2.out',
+      overwrite: 'auto',
+      clearProps: 'opacity,visibility,transform,transformOrigin,willChange'
+    })
+  }
+
+  function activate(node) {
+    if (!node || reduced || startedRecently(node, 90)) return
+    const target = node.querySelector('.nav-home-orb, .nav-ico, .ds-nav-ico') || node
+    gsap.killTweensOf(target)
+    gsap.fromTo(target, { scale: 0.9, y: 2 }, {
+      scale: 1,
+      y: 0,
+      duration: 0.22,
+      ease: 'power2.out',
+      overwrite: 'auto',
+      clearProps: 'transform,willChange'
+    })
+  }
+
   function overlay(node) {
-    if (!node) return
+    if (!node || startedRecently(node)) return
     const card = node.querySelector('.modal-card, .ds-modal-card, .sheet, .ds-drawer') || node
     gsap.killTweensOf([node, card])
     if (reduced) {
@@ -430,11 +507,18 @@
     }
     const isSideDrawer = card.classList.contains('ds-drawer')
     const isSheet = card.classList.contains('sheet')
+    if (card === node) {
+      gsap.fromTo(card,
+        { autoAlpha: 0, x: isSideDrawer ? 28 : 0, y: isSheet ? 24 : 8, scale: isSideDrawer || isSheet ? 1 : 0.985 },
+        { autoAlpha: 1, x: 0, y: 0, scale: 1, duration: isSheet ? 0.24 : 0.2, ease: 'power3.out', overwrite: 'auto', clearProps: 'opacity,visibility,transform,willChange' }
+      )
+      return
+    }
     const tl = gsap.timeline({ defaults: { ease: 'power3.out' } })
-    tl.fromTo(node, { autoAlpha: 0 }, { autoAlpha: 1, duration: 0.16 })
+    tl.fromTo(node, { autoAlpha: 0 }, { autoAlpha: 1, duration: 0.14, overwrite: 'auto', clearProps: 'opacity,visibility' })
       .fromTo(card,
-        { autoAlpha: 0, x: isSideDrawer ? 28 : 0, y: isSheet ? 24 : 8, scale: isSideDrawer || isSheet ? 1 : 0.985 },
-        { autoAlpha: 1, x: 0, y: 0, scale: 1, duration: isSheet ? 0.24 : 0.2, clearProps: 'transform' },
+        { x: isSideDrawer ? 28 : 0, y: isSheet ? 24 : 8, scale: isSideDrawer || isSheet ? 1 : 0.985 },
+        { x: 0, y: 0, scale: 1, duration: isSheet ? 0.24 : 0.2, overwrite: 'auto', clearProps: 'transform,willChange' },
         '<'
       )
   }
@@ -449,10 +533,10 @@
     }
   }
 
-  window.DshMotion = { gsap, reduced: () => reduced, view, list, relayout, bindLongPressReorder, overlay, pulse }
+  window.DshMotion = { gsap, reduced: () => reduced, view, list, relayout, bindLongPressReorder, overlay, panel, popover, activate, pulse }
 
   document.addEventListener('DOMContentLoaded', () => {
-    document.querySelectorAll('.view:not(.hidden), .ds-view:not(.hidden)').forEach(node => view(node))
+    document.querySelectorAll('.view:not(.hidden), .ds-view:not(.hidden), [data-motion-view]:not(.hidden)').forEach(node => view(node))
   }, { once: true })
 
   const observer = new MutationObserver(records => {
@@ -460,9 +544,13 @@
       const node = record.target
       if (!(node instanceof HTMLElement)) continue
       const becameVisible = record.oldValue?.split(/\s+/).includes('hidden') && !node.classList.contains('hidden')
+      const becameActive = !record.oldValue?.split(/\s+/).includes('active') && node.classList.contains('active')
+      if (becameActive && node.matches('.nav-btn, .ds-nav-item')) activate(node)
       if (!becameVisible) continue
-      if (node.matches('.view, .ds-view')) view(node)
-      else if (node.matches('.modal, .ds-modal, .sheet, .ds-drawer')) overlay(node)
+      if (node.matches('.view, .ds-view, [data-motion-view]')) view(node)
+      else if (node.matches('.modal, .ds-modal, .sheet-backdrop, .sheet, .ds-drawer')) overlay(node)
+      else if (node.matches('.composer-menu, .ds-group-menu, .ds-feedback-menu, .fb-menu')) popover(node)
+      else if (node.matches('[data-motion-panel], .wb-panel, .ds-wb-panel, .doctor-body, .settings-subpage')) panel(node)
     }
   })
   observer.observe(document.documentElement, { subtree: true, attributes: true, attributeFilter: ['class'], attributeOldValue: true })

package/public/plugin.html

@@ -4,19 +4,19 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
   <title>DSH Remote</title>
-  <script>/* 插件抽屉首帧沿用当前主题 */ (function(){try{var t=localStorage.getItem('dshTheme');if(t!=='default'&&t!=='dark'&&t!=='light'&&t!=='neutral'){t=window.matchMedia('(prefers-color-scheme: light)').matches?'light':'default'}document.documentElement.setAttribute('data-theme',t)}catch(e){}})()</script>
+  <script>/* 插件抽屉首帧沿用当前主题 */ (function(){try{var t=localStorage.getItem('dshTheme');if(t!=='default'&&t!=='dark'&&t!=='light'&&t!=='neutral'&&t!=='mono'){t=window.matchMedia('(prefers-color-scheme: light)').matches?'light':'default'}document.documentElement.setAttribute('data-theme',t)}catch(e){}})()</script>
   <link rel="stylesheet" href="theme-vars.css">
   <style>
     :root { color-scheme: dark; }
     html[data-theme="light"], html[data-theme="neutral"] { color-scheme: light; }
-    * { box-sizing: border-box; }
+    * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
     body {
       margin: 0; min-width: 280px; color: var(--dsr-text); background:
         radial-gradient(420px 240px at 100% 0, var(--dsr-accent-soft), transparent 72%),
         var(--dsr-bg); font: 13px/1.45 system-ui, -apple-system, "PingFang SC", "Noto Sans CJK SC", sans-serif;
     }
     button, a { font: inherit; }
-    button { cursor: pointer; }
+    button { cursor: pointer; touch-action: manipulation; }
     .plugin-shell { min-height: 100vh; padding: 18px 16px 16px; display: flex; flex-direction: column; gap: 14px; }
     .plugin-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
     .plugin-brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
@@ -41,8 +41,9 @@
     .plugin-primary:hover, .plugin-primary:focus-visible { filter: brightness(1.08); transform: translateY(-1px); }
     .plugin-primary:disabled { cursor: wait; opacity: .65; transform: none; }
     .plugin-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
-    .plugin-action { min-height: 42px; padding: 7px 5px; border: 1px solid var(--dsr-line); border-radius: 12px; background: var(--dsr-panel); color: var(--dsr-text); font-size: 11px; }
+    .plugin-action { min-height: 42px; padding: 7px 5px; border: 1px solid var(--dsr-line); border-radius: 12px; background: var(--dsr-panel); color: var(--dsr-text); font-size: 11px; transition: transform .18s ease, background-color .18s ease, border-color .18s ease; }
     .plugin-action:hover, .plugin-action:focus-visible { border-color: var(--dsr-accent-line); background: var(--dsr-accent-soft); }
+    .plugin-action:active { transform: scale(.98); }
     .plugin-action svg { display: block; width: 17px; height: 17px; margin: 0 auto 3px; color: var(--dsr-accent-strong); }
     .plugin-usage { padding: 14px; border: 1px solid var(--dsr-line); border-radius: 16px; background: linear-gradient(145deg, var(--dsr-panel), var(--dsr-bg-2)); }
     .plugin-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--dsr-text); font-size: 12px; font-weight: 750; }
@@ -87,7 +88,7 @@
   </style>
 </head>
 <body>
-  <main class="plugin-shell">
+  <main class="plugin-shell" data-motion-view>
     <header class="plugin-head">
       <div class="plugin-brand">
         <span class="plugin-brand-mark" aria-hidden="true"></span>

package/public/styles.css

@@ -1,4 +1,4 @@
-/* DSH Remote · 移动优先 · 四皮肤(默认深空/深色落日/亮色易北爱乐厅/中性草原孤塔)
+/* DSH Remote · 移动优先 · 五皮肤(默认深空/深色落日/亮色易北爱乐厅/中性草原孤塔/黑曜白)
  * 规则样式表; 变量定义已抽取到 theme-vars.css(桌面端共享), 保持单一来源。 */
 
 @import 'theme-vars.css';
@@ -424,12 +424,42 @@ body.in-session .view {
 .queue-dock-item:last-child { border-bottom: 0; }
 .queue-dock-preview { flex: 1; min-width: 0; color: var(--dsr-text); font-size: 13px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .queue-dock-action { flex: 0 0 auto; }
+.session-pending { flex:0 0 auto; margin:0 0 10px; padding:10px; border:1px solid var(--dsr-warning-line); border-radius:13px; background:var(--dsr-warning-soft); }
+.session-pending-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; color:var(--dsr-text); font-size:12px; font-weight:750; }
+.session-pending-list { display:flex; flex-direction:column; gap:8px; }
+.session-pending .pending-card { min-width:0; background:var(--dsr-panel); }
+.session-pending .pc-title { line-height:1.45; overflow-wrap:anywhere; word-break:break-word; }
+.session-pending .pc-desc { line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; }
+.session-pending .goal-actions { justify-content:flex-end; }
 .md-table-wrap { max-width: 100%; overflow-x: auto; margin: 8px 0; }
 .md-table-wrap table { width: max-content; min-width: 100%; border-collapse: collapse; font-size: .94em; }
 .md-table-wrap th, .md-table-wrap td { padding: 6px 9px; border: 1px solid var(--dsr-line); text-align: left; white-space: nowrap; }
 .md-table-wrap th { background: var(--dsr-bg-2); font-weight: 700; }
 .md-table-wrap tbody tr:nth-child(even) { background: color-mix(in srgb, var(--dsr-bg-2) 45%, transparent); }
-.goal-obj { font-size: 13px; line-height: 1.55; color: var(--dsr-text); }
+.goal-disclosure { width: 100%; min-width: 0; display: flex; justify-content: flex-end; }
+.goal-disclosure .goal-card { width: 100%; min-width: 0; }
+.goal-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
+.goal-card-head .card-title { min-width: 0; margin-bottom: 0; }
+.goal-collapse-btn,
+.goal-side-tab {
+  touch-action: manipulation; border: 1px solid var(--dsr-line); background: var(--dsr-bg-2); color: var(--dsr-muted);
+  font: inherit; cursor: pointer;
+}
+.goal-collapse-btn { min-height: 34px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 9px; font-size: 12px; }
+.goal-collapse-btn > span { color: var(--dsr-accent-strong); font-size: 18px; line-height: 1; }
+.goal-side-tab {
+  min-height: 46px; max-width: min(100%, 210px); display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 10px;
+  border-right: 0; border-radius: 12px 0 0 12px; box-shadow: -5px 6px 18px var(--dsr-shadow); color: var(--dsr-text); font-size: 13px; font-weight: 700;
+}
+.goal-side-tab > span:first-child { color: var(--dsr-accent-strong); font-size: 20px; line-height: 1; }
+.goal-side-tab small { min-width: 0; color: var(--dsr-muted); font-size: 11px; font-weight: 500; white-space: nowrap; }
+.goal-collapse-btn:hover,
+.goal-side-tab:hover { background: var(--dsr-panel-2); color: var(--dsr-text); }
+.goal-collapse-btn:active,
+.goal-side-tab:active { transform: translateY(1px); }
+.goal-collapse-btn:focus-visible,
+.goal-side-tab:focus-visible { outline: 2px solid var(--dsr-accent-strong); outline-offset: 2px; }
+.goal-obj { font-size: 13px; line-height: 1.55; color: var(--dsr-text); overflow-wrap: anywhere; }
 .goal-phase { font-size: 12px; color: var(--dsr-info); margin-top: 3px; }
 .goal-actions { display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
 .goal-actions .mini-btn { flex: 1; text-align: center; min-width: 64px; }
@@ -688,16 +718,17 @@ body.in-session .main { padding-bottom: 0; }
 .overview-section-meta { color:var(--dsr-muted); font-size:11px; font-weight:500; }
 .overview-attention-list, .overview-session-list { display:flex; flex-direction:column; gap:7px; }
 .overview-attention-item, .overview-session-item { width:100%; display:flex; align-items:center; gap:10px; min-width:0; padding:11px 12px; border:1px solid var(--dsr-line); border-radius:13px; background:var(--dsr-panel); color:var(--dsr-text); text-align:left; }
+.overview-attention-item { align-items:flex-start; }
 button.overview-attention-item, button.overview-session-item { cursor:pointer; }
 .overview-attention-item { border-left:3px solid var(--dsr-warning); }
 .overview-attention-item.question { border-left-color:var(--dsr-accent-2); }
 .overview-item-mark { flex:0 0 auto; width:25px; height:25px; display:grid; place-items:center; border-radius:8px; background:var(--dsr-warning-soft); color:var(--dsr-warning); font-size:12px; }
 .overview-attention-item.question .overview-item-mark { background:var(--dsr-accent-2-soft); color:var(--dsr-accent-2); }
 .overview-item-copy { min-width:0; flex:1; }
-.overview-item-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12.5px; font-weight:650; }
-.overview-item-desc { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:2px; color:var(--dsr-muted); font-size:11px; }
+.overview-item-title { font-size:12.5px; font-weight:650; line-height:1.45; overflow-wrap:anywhere; word-break:break-word; }
+.overview-item-desc { margin-top:3px; color:var(--dsr-muted); font-size:11px; line-height:1.45; white-space:normal; overflow-wrap:anywhere; }
 .overview-item-arrow { color:var(--dsr-muted); font-size:18px; }
-.overview-item-actions { flex:0 0 auto; display:flex; gap:4px; }
+.overview-item-actions { flex:0 0 auto; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:4px; }
 .overview-item-actions .mini-btn { padding:4px 7px; font-size:10px; }
 .overview-metric-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
 .overview-metric { min-width:0; padding:11px 12px; border:1px solid var(--dsr-line); border-radius:13px; background:var(--dsr-panel); }
@@ -868,6 +899,16 @@ button.overview-attention-item, button.overview-session-item { cursor:pointer; }
 }
 .setting-row > div:first-child { flex: 1; min-width: 0; }
 .setting-row + .setting-row { border-top: 1px solid var(--dsr-line); }
+.setting-link {
+  width: 100%; color: var(--dsr-text); text-align: left;
+  transition: background-color .18s ease, color .18s ease;
+}
+.setting-link::after {
+  content: '›'; flex: 0 0 auto; color: var(--dsr-muted); font-size: 20px; font-weight: 400;
+  transform: translateX(0); transition: transform .18s ease, color .18s ease;
+}
+.setting-link:hover, .setting-link:focus-visible { background: var(--dsr-bg-2); }
+.setting-link:hover::after, .setting-link:focus-visible::after { color: var(--dsr-accent-strong); transform: translateX(2px); }
 .setting-name { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .dsh-experimental-badge { display: inline-block; margin-left: 6px; padding: 2px 6px; border: 1px solid var(--dsr-warning-line); border-radius: 999px; color: var(--dsr-warning); background: var(--dsr-warning-soft); font-size: 10px; font-weight: 700; vertical-align: 2px; }
 .setting-desc { font-size: 12px; color: var(--dsr-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@@ -942,11 +983,11 @@ button.overview-attention-item, button.overview-session-item { cursor:pointer; }
 .switch input { opacity: 0; width: 0; height: 0; }
 .slider {
   position: absolute; inset: 0; border-radius: 999px; background: var(--dsr-panel-2);
-  border: 1px solid var(--dsr-line); transition: .2s;
+  border: 1px solid var(--dsr-line); transition: background-color .2s ease, border-color .2s ease;
 }
 .slider::before {
   content: ''; position: absolute; width: 19px; height: 19px; border-radius: 50%;
-  left: 3px; top: 3px; background: var(--dsr-muted); transition: .2s;
+  left: 3px; top: 3px; background: var(--dsr-muted); transition: transform .2s ease, background-color .2s ease;
 }
 .switch input:checked + .slider { background: var(--dsr-accent-soft); border-color: var(--dsr-accent); }
 .switch input:checked + .slider::before { transform: translateX(19px); background: var(--dsr-accent); }
@@ -970,21 +1011,17 @@ button.overview-attention-item, button.overview-session-item { cursor:pointer; }
 }
 .nav-btn .nav-ico { width: 22px; height: 22px; display: grid; place-items: center; line-height: 1; transition: transform .18s ease, color .18s ease; }
 .nav-btn .nav-ico svg { width: 21px; height: 21px; display: block; }
-.nav-btn:nth-of-type(1) { --nav-tint: var(--dsr-info); }
-.nav-btn:nth-of-type(2) { --nav-tint: var(--dsr-success); }
-.nav-btn:nth-of-type(4) { --nav-tint: var(--dsr-warning); }
-.nav-btn:nth-of-type(5) { --nav-tint: var(--dsr-accent-2); }
-.nav-btn:not(.nav-home) .nav-ico { color: var(--nav-tint, var(--dsr-nav-muted)); opacity: .82; }
+.nav-btn:not(.nav-home) .nav-ico { color: var(--dsr-nav-muted); opacity: .84; }
 .nav-btn:not(.nav-home) > span:last-of-type { color: var(--dsr-nav-muted); }
 .nav-btn.active:not(.nav-home) { color: var(--dsr-nav-active); }
-.nav-btn.active:not(.nav-home) .nav-ico { transform: translateY(-1px); opacity: 1; }
+.nav-btn.active:not(.nav-home) .nav-ico { color: var(--dsr-nav-active); transform: translateY(-1px); opacity: 1; }
 .nav-btn.active:not(.nav-home)::after { content: ''; position: absolute; bottom: 3px; width: 4px; height: 4px; border-radius: 50%; background: var(--dsr-nav-active); box-shadow: 0 0 10px var(--dsr-glow); }
 .nav-home { z-index: 2; transform: translateY(-13px); color: var(--dsr-nav-muted); }
 .nav-home-orb { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--dsr-bg-2); border: 1px solid var(--dsr-accent-line); box-shadow: 0 5px 18px var(--dsr-shadow); transition: transform .18s ease, background .18s ease, box-shadow .18s ease; }
 .nav-home .nav-ico { width: 30px; height: 30px; color: var(--dsr-accent-strong); }
 .nav-home .nav-ico svg { width: 29px; height: 29px; }
 .nav-home.active { color: var(--dsr-nav-active); }
-.nav-home.active .nav-home-orb { background: radial-gradient(circle at 34% 27%, var(--dsr-info), var(--dsr-accent) 42%, var(--dsr-accent-2)); border-color: var(--dsr-accent); color: var(--dsr-on-accent); box-shadow: 0 7px 24px var(--dsr-glow), inset 0 0 0 1px rgba(255,255,255,.32); }
+.nav-home.active .nav-home-orb { background: linear-gradient(145deg, var(--dsr-accent-2), var(--dsr-accent) 64%); border-color: var(--dsr-accent); color: var(--dsr-on-accent); box-shadow: 0 7px 24px var(--dsr-glow), inset 0 0 0 1px rgba(255,255,255,.28); }
 .nav-home.active .nav-ico { color: var(--dsr-on-accent); transform: none; }
 .nav-home:active .nav-home-orb { transform: scale(.96); }
 .nav-badge {
@@ -997,7 +1034,6 @@ button.overview-attention-item, button.overview-session-item { cursor:pointer; }
 .sheet-backdrop {
   position: fixed; inset: 0; z-index: 45;
   background: var(--dsr-overlay);
-  animation: sheet-fade .18s ease;
 }
 .sheet {
   position: fixed; left: 0; right: 0; bottom: 0; z-index: 46;
@@ -1025,7 +1061,6 @@ button.overview-attention-item, button.overview-session-item { cursor:pointer; }
 .sheet-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
 .sheet-item-name { font-size: 14px; font-weight: 600; }
 .sheet-item-desc { font-size: 12px; color: var(--dsr-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-@keyframes sheet-fade { from { opacity: 0 } to { opacity: 1 } }
 
 /* ---------- 应用内选择抽屉 ---------- */
 .custom-select-native {
@@ -1116,7 +1151,7 @@ button.overview-attention-item, button.overview-session-item { cursor:pointer; }
 .modal-card {
   width: 100%; max-width: 460px; max-height: 82vh; overflow-y: auto;
   background: var(--dsr-bg-2); border: 1px solid var(--dsr-line); border-radius: 18px;
-  padding: 16px;
+  padding: 16px; box-shadow: 0 22px 60px var(--dsr-shadow); overscroll-behavior: contain;
 }
 .modal-title { font-size: 16px; font-weight: 700; margin-bottom: 10px; }
 .modal-body { font-size: 14px; }
@@ -1191,25 +1226,30 @@ button.overview-attention-item, button.overview-session-item { cursor:pointer; }
   .fs-workspace-nav { grid-template-columns: 1fr; }
   .file-preview-card { height: 88vh; padding: 13px; }
 }
-.theme-panel-list { display: flex; flex-direction: column; gap: 8px; }
+.theme-panel-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
 .theme-option {
-  display: flex; align-items: center; gap: 10px; min-width: 0; width: 100%;
-  padding: 11px 12px; border-radius: 12px; text-align: left;
+  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 9px; min-width: 0; width: 100%;
+  min-height: 86px; padding: 10px; border-radius: 13px; text-align: left;
   background: var(--dsr-panel); border: 1px solid var(--dsr-line);
-  white-space: nowrap;
+  white-space: nowrap; overflow: hidden;
+  transition: transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
 }
-.theme-option:active { background: var(--dsr-panel-2); }
+.theme-option:hover, .theme-option:focus-visible { background: var(--dsr-panel-2); border-color: var(--dsr-accent-line); transform: translateY(-1px); }
+.theme-option:active { background: var(--dsr-panel-2); transform: scale(.985); }
 .theme-option.current { border-color: var(--dsr-accent-line); box-shadow: 0 0 0 1px var(--dsr-accent-soft); }
-.theme-swatches { display: inline-flex; gap: 4px; flex-shrink: 0; }
+.theme-swatches {
+  display: grid; grid-template-columns: 1.35fr 1fr .72fr; height: 30px; flex-shrink: 0;
+  overflow: hidden; border: 1px solid rgba(127, 127, 127, .28); border-radius: 8px;
+}
 .theme-swatches i {
-  width: 14px; height: 14px; border-radius: 50%; display: block;
-  border: 1px solid rgba(127, 127, 127, .35);
+  width: auto; height: 100%; display: block;
 }
 .theme-option .theme-name {
-  flex: 1; min-width: 0; font-size: 14px; font-weight: 600;
+  min-width: 0; padding-right: 22px; font-size: 13px; font-weight: 650;
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
 }
-.theme-option .theme-check { flex-shrink: 0; color: var(--dsr-accent-strong); font-size: 14px; font-weight: 700; }
+.theme-option .theme-check { position: absolute; right: 11px; bottom: 9px; color: var(--dsr-accent-strong); font-size: 14px; font-weight: 700; }
+@media (max-width: 350px) { .theme-panel-list { grid-template-columns: 1fr; } }
 
 /* ---------- toast ---------- */
 .toast {