@waterwx/dsh-novel-forge 1.1.8 → 1.2.0

package/src/client/panel/RunPanel.tsx

@@ -0,0 +1,204 @@
+/**
+ * 生产单面板：区间批量生产（计划补足 → 逐章生成 → 被拒分级处理 → 断点续跑）。
+ * 与「工作进度」悬浮窗不同：这是标准流水线设备，一键下单、实时进度、日志可查。
+ */
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import type { NovelApi } from '../api.ts'
+import type { RunState } from '../../protocol.ts'
+import css from './panel.module.css'
+
+export function RunPanel({ api, totalChapters }: { api: NovelApi; totalChapters: number }) {
+  const [run, setRun] = useState<RunState | null>(null)
+  const [startNo, setStartNo] = useState<number>(1)
+  const [endNo, setEndNo] = useState<number>(0)
+  const [count, setCount] = useState<number>(30)
+  const [mode, setMode] = useState<'count' | 'range'>('count')
+  const [busy, setBusy] = useState(false)
+  const [err, setErr] = useState('')
+  const logRef = useRef<HTMLDivElement>(null)
+
+  // 默认起点：最后一章 + 1；count 模式终点 = 起点 + count - 1
+  useEffect(() => {
+    setStartNo(totalChapters + 1)
+    setEndNo(totalChapters + 30)
+  }, [totalChapters])
+
+  const poll = useCallback(async () => {
+    try {
+      const s = await api.runStatus()
+      setRun(s)
+    } catch { /* 静默 */ }
+  }, [api])
+
+  // 运行期间每 5 秒轮询一次状态。
+  useEffect(() => {
+    void poll()
+    const timer = window.setInterval(() => { void poll() }, 5000)
+    return () => window.clearInterval(timer)
+  }, [poll])
+
+  // 日志自动滚底。
+  useEffect(() => {
+    logRef.current?.scrollTo({ top: logRef.current.scrollHeight })
+  }, [run?.log.length])
+
+  const effectiveEnd = mode === 'count' ? startNo + count - 1 : endNo
+
+  const handleStart = async (): Promise<void> => {
+    setBusy(true)
+    setErr('')
+    try {
+      const req = mode === 'count'
+        ? { startNo, count }
+        : { startNo, endNo }
+      const s = await api.runStart(req)
+      setRun(s)
+    } catch (e) {
+      setErr((e as Error).message)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const handleControl = async (action: 'pause' | 'resume' | 'stop'): Promise<void> => {
+    setBusy(true)
+    setErr('')
+    try {
+      const s = await api.runControl(action)
+      if (s !== null) setRun(s)
+    } catch (e) {
+      setErr((e as Error).message)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const statusLabel = useMemo(() => {
+    if (run === null) return '未启动'
+    return {
+      running: '🏭 生产中',
+      paused: '⏸ 已暂停',
+      done: '✅ 已完成',
+      stopped: '⏹ 已停止',
+      error: '❌ 异常',
+    }[run.status] ?? run.status
+  }, [run])
+
+  const ratio = run !== null && run.endNo > run.startNo
+    ? Math.min(Math.max((run.currentNo - run.startNo) / (run.endNo - run.startNo), 0), 1)
+    : 0
+
+  return (
+    <div className={css.card} style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
+      <div className={css.row} style={{ justifyContent: 'space-between', flexWrap: 'wrap' }}>
+        <span className={css.cardTitle}>🏭 生产单（标准流水线：计划 → 生成 → 审稿 → 分级处理）</span>
+        <span className={`${css.badge} ${run?.status === 'running' ? css.badgeWritten : run?.status === 'done' ? css.badgeDone : css.badgePending}`}>{statusLabel}</span>
+      </div>
+
+      <div className={css.meta}>
+        一键下生产单：自动补计划 → 逐章生成（完整质量门：生成→摘要+事实→审稿→作者复盘）→ 被拒章分级处理（无 high 豁免 / 有 high 按意见修订+验证 / 两轮不过转待人工）。中断后可从断点继续。
+      </div>
+
+      {/* 下单区 */}
+      <div className={css.row} style={{ flexWrap: 'wrap', gap: 8, alignItems: 'flex-end' }}>
+        <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
+          <button
+            type="button"
+            className={`${css.button} ${css.buttonSmall} ${mode === 'count' ? css.buttonPrimary : ''}`}
+            onClick={() => { setMode('count') }}
+            title="从当前末章 +1 起，新增 N 章"
+          >
+            新增 N 章
+          </button>
+          <button
+            type="button"
+            className={`${css.button} ${css.buttonSmall} ${mode === 'range' ? css.buttonPrimary : ''}`}
+            onClick={() => { setMode('range') }}
+            title="指定起止章号区间"
+          >
+            指定区间
+          </button>
+        </div>
+        {mode === 'count' ? (
+          <>
+            <div className={css.field} style={{ flex: 'none', minWidth: 90 }}>
+              <label className={css.fieldLabel}>起始章</label>
+              <input className={css.input} type="number" min={1} value={startNo} onChange={e => { setStartNo(Math.max(1, Number(e.target.value) || 1)) }} />
+            </div>
+            <div className={css.field} style={{ flex: 'none', minWidth: 90 }}>
+              <label className={css.fieldLabel}>新增章数</label>
+              <input className={css.input} type="number" min={1} max={200} value={count} onChange={e => { setCount(Math.max(1, Math.min(200, Number(e.target.value) || 1))) }} />
+            </div>
+          </>
+        ) : (
+          <>
+            <div className={css.field} style={{ flex: 'none', minWidth: 90 }}>
+              <label className={css.fieldLabel}>起始章</label>
+              <input className={css.input} type="number" min={1} value={startNo} onChange={e => { setStartNo(Math.max(1, Number(e.target.value) || 1)) }} />
+            </div>
+            <div className={css.field} style={{ flex: 'none', minWidth: 90 }}>
+              <label className={css.fieldLabel}>结束章</label>
+              <input className={css.input} type="number" min={1} value={endNo} onChange={e => { setEndNo(Math.max(1, Number(e.target.value) || 1)) }} />
+            </div>
+          </>
+        )}
+        <button type="button" className={`${css.button} ${css.buttonPrimary}`} disabled={busy || (run?.status === 'running')} onClick={() => { void handleStart() }} title="启动生产单">
+          {run?.status === 'running' ? '生产中…' : run?.status === 'paused' ? '▶ 继续' : '▶ 下单生产'}
+        </button>
+        {run !== null && run.status !== 'done' && (
+          <>
+            <button type="button" className={`${css.button} ${css.buttonSmall}`} disabled={busy || run.status !== 'running'} onClick={() => { void handleControl('pause') }}>
+              ⏸ 暂停
+            </button>
+            <button type="button" className={`${css.button} ${css.buttonSmall}`} disabled={busy || run.status === 'stopped'} onClick={() => { void handleControl('stop') }}>
+              ⏹ 停止
+            </button>
+          </>
+        )}
+        {run !== null && run.status === 'paused' && (
+          <button type="button" className={`${css.button} ${css.buttonSmall} ${css.buttonPrimary}`} disabled={busy} onClick={() => { void handleControl('resume') }}>
+            ▶ 继续
+          </button>
+        )}
+      </div>
+
+      {err !== '' && <div style={{ color: 'var(--nf-error)', fontSize: 12 }}>{err}</div>}
+
+      {/* 进度区 */}
+      {run !== null && (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+          <div className={css.row} style={{ flexWrap: 'wrap', gap: 8 }}>
+            <span className={css.meta}>范围：第 {run.startNo} - {run.endNo} 章 · 当前：第 {run.currentNo} 章</span>
+            <span className={css.meta}>新生成 {run.stats.generated} · 修订通过 {run.stats.revised} · 豁免 {run.stats.exempted} · 重生成 {run.stats.regenerated} · 失败 {run.stats.error}</span>
+          </div>
+          <div className={css.bigProgressBar}>
+            <div className={css.bigProgressBarFill} style={{ width: `${Math.round(ratio * 100)}%` }} />
+          </div>
+          {run.pendingManual.length > 0 && (
+            <div className={css.meta} style={{ color: 'var(--nf-warn)' }}>
+              ⚠️ 待人工：第 {run.pendingManual.join('、')} 章（两轮修订仍不过，保留草稿，可在章节列表处理）
+            </div>
+          )}
+          {run.status === 'done' && <div className={css.meta} style={{ color: 'var(--nf-success)' }}>✅ 生产单完成：{run.startNo}-{run.endNo} 章处理完毕，待人工 {run.pendingManual.length} 章。</div>}
+          {run.error !== undefined && <div className={css.meta} style={{ color: 'var(--nf-error)' }}>异常：{run.error}</div>}
+        </div>
+      )}
+
+      {/* 日志区 */}
+      <div className={css.meta} style={{ fontWeight: 600 }}>运行日志（{run?.log.length ?? 0}）</div>
+      <div
+        ref={logRef}
+        style={{ flex: 1, minHeight: 120, overflowY: 'auto', border: '1px solid var(--nf-border)', borderRadius: 10, background: 'var(--nf-bg-inset)', padding: 8, display: 'flex', flexDirection: 'column', gap: 2, fontSize: 12 }}
+      >
+        {run === null || run.log.length === 0 ? (
+          <span className={css.meta}>尚无日志——下单后这里会实时显示每章进度。</span>
+        ) : run.log.map((l, i) => (
+          <div key={i} style={{ display: 'flex', gap: 6, opacity: 0.85 }}>
+            <span style={{ color: 'var(--nf-text-3)', flex: 'none' }}>{new Date(l.at).toLocaleTimeString('zh-CN', { hour12: false })}</span>
+            <span>{l.text}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

package/src/client/panel/ShelfView.tsx

@@ -178,18 +178,19 @@ export function ShelfView({
             value={query}
             onChange={e => { setQuery(e.target.value) }}
           />
-          <div className={css.shelfFilters}>
-            {filters.map(f => (
-              <button
-                key={f.id}
-                type="button"
-                className={`${css.button} ${css.buttonSmall} ${filter === f.id ? css.buttonPrimary : ''}`}
-                onClick={() => { setFilter(f.id) }}
-              >
-                {f.label}{f.count > 0 ? `（${f.count}）` : ''}
-              </button>
-            ))}
-          </div>
+        </div>
+        <div className={css.shelfFilters} style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
+          {filters.map(f => (
+            <button
+              key={f.id}
+              type="button"
+              className={`${css.button} ${filter === f.id ? css.buttonPrimary : ''}`}
+              style={{ fontSize: 14, flex: 1 }}
+              onClick={() => { setFilter(f.id) }}
+            >
+              {f.label}{f.count > 0 ? `（${f.count}）` : ''}
+            </button>
+          ))}
         </div>
       </div>
 

package/src/client/panel/panel.module.css

@@ -96,8 +96,8 @@ body[data-ds-dark-theme] .entry {
   --nf-glass-sheen: rgba(255, 255, 255, 0.55);
   --nf-glass-border: rgba(255, 255, 255, 0.65);
   --nf-glass-inset: rgba(255, 255, 255, 0.55);
-  --nf-glass-orb-a: rgba(0, 184, 92, 0.14);
-  --nf-glass-orb-b: rgba(120, 160, 255, 0.10);
+  --nf-glass-orb-a: rgba(0, 184, 92, 0.18);
+  --nf-glass-orb-b: rgba(120, 160, 255, 0.13);
   --nf-glass-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
   background: var(--nf-bg);
   /* Frosted glass: blur whatever is behind the panel (the chat dialog),
@@ -138,8 +138,8 @@ body[data-ds-dark-theme] .view {
   --nf-glass-sheen: rgba(255, 255, 255, 0.26);
   --nf-glass-border: rgba(255, 255, 255, 0.14);
   --nf-glass-inset: rgba(255, 255, 255, 0.07);
-  --nf-glass-orb-a: rgba(0, 202, 82, 0.20);
-  --nf-glass-orb-b: rgba(190, 200, 215, 0.07);
+  --nf-glass-orb-a: rgba(0, 202, 82, 0.28);
+  --nf-glass-orb-b: rgba(190, 200, 215, 0.10);
   --nf-glass-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
 }
 
@@ -334,23 +334,6 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
     radial-gradient(120% 95% at 50% 42%, transparent 55%, rgba(2, 2, 3, 0.10) 100%);
 }
 
-.panelHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin: 10px 12px 0;
-  padding: 10px 16px;
-  border: 1px solid var(--nf-glass-border);
-  border-radius: 18px;
-  flex-shrink: 0;
-  background: var(--nf-glass-face);
-  box-shadow: var(--nf-shadow), inset 0 1px 0 var(--nf-glass-sheen);
-  -webkit-backdrop-filter: blur(28px) saturate(175%);
-  backdrop-filter: blur(28px) saturate(175%);
-  /* 固定在面板顶部（panel 为 flex 列布局，header 正常占位），
-     下方内容在 panelBody 内独立滚动，header 永不遮挡内容。 */
-}
-
 .panelTitle {
   margin: 0;
   font-size: 16px;
@@ -456,15 +439,15 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
 
 .panelNav {
   flex: none;
-  align-self: flex-start;
-  width: 142px;
+  align-self: stretch;
+  width: 200px;
   display: flex;
   flex-direction: column;
   gap: 4px;
   margin: 10px 0 10px 12px;
-  padding: 10px 8px;
+  padding: 14px 10px 12px;
   border: 1px solid var(--nf-glass-border);
-  border-radius: 16px;
+  border-radius: 18px;
   background: var(--nf-glass-face);
   box-shadow: var(--nf-shadow), inset 0 1px 0 var(--nf-glass-sheen);
   -webkit-backdrop-filter: blur(28px) saturate(175%);
@@ -490,7 +473,7 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
   letter-spacing: 0.6px;
   text-transform: uppercase;
   color: var(--nf-text-3);
-  padding: 8px 10px 3px;
+  padding: 10px 10px 4px;
   user-select: none;
 }
 
@@ -622,15 +605,15 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
   align-items: center;
   gap: 8px;
   width: 100%;
-  border: none;
+  border: 1px solid transparent;
   background: transparent;
   cursor: pointer;
-  border-radius: 12px;
-  padding: 8px 10px;
+  border-radius: 10px;
+  padding: 9px 10px;
   font-size: 13px;
   color: var(--nf-text-2-alpha, var(--nf-text-2));
   font-weight: 500;
-  transition: color 0.15s ease, background 0.15s ease;
+  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
   position: relative;
   text-align: left;
   white-space: nowrap;
@@ -649,27 +632,20 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
 .navTab[data-active] {
   color: var(--nf-accent);
   font-weight: 600;
-  background: var(--nf-accent-soft);
-}
-
-.navTab[data-active]::before {
-  content: '';
-  position: absolute;
-  left: -8px;
-  top: 20%;
-  bottom: 20%;
-  width: 3px;
-  border-radius: 999px;
-  background: var(--nf-accent);
+  background: color-mix(in srgb, var(--nf-text) 8%, transparent);
+  border-color: color-mix(in srgb, var(--nf-text) 16%, transparent);
+  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--nf-text) 6%, transparent);
 }
 
-.panelNavCollapsed .navTab[data-active]::before {
-  left: -6px;
+.navTab[data-active] .navTabIcon {
+  color: var(--nf-accent);
 }
 
 .navTabIcon {
   flex: none;
-  font-size: 15px;
+  width: 20px;
+  text-align: center;
+  font-size: 16px;
   line-height: 1;
 }
 
@@ -678,43 +654,183 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
   text-overflow: ellipsis;
 }
 
-/* 顶栏副标题行：书名 + 进度摘要（iOS 大标题下方副标题） */
-.panelSubtitle {
+/* demo 风格：侧栏标题区（Logo + 小说工坊 + 当前书名） */
+.navTitle {
   display: flex;
   align-items: center;
-  gap: 8px;
-  font-size: 12px;
-  color: var(--nf-text-2);
-  padding: 0 4px 2px;
+  gap: 10px;
+  padding: 2px 6px 12px;
+  border-bottom: 1px solid var(--nf-border);
+  margin-bottom: 6px;
+  flex: none;
   min-width: 0;
-  flex-wrap: wrap;
+}
+
+.navTitleLogo {
+  width: 34px;
+  height: 34px;
+  border-radius: 10px;
+  background: linear-gradient(145deg, var(--nf-accent), var(--nf-accent-hover));
+  color: var(--nf-accent-fg);
+  font-weight: 800;
+  font-size: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  box-shadow: 0 6px 16px var(--nf-accent-soft);
+}
+
+.navTitleName {
+  font-weight: 700;
+  font-size: 15px;
+  letter-spacing: 0.2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.navTitleBook {
+  font-size: 11px;
+  color: var(--nf-text-3);
   white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.headerProgress {
-  font-size: 12px;
-  font-weight: 400;
+.panelNavCollapsed .navTitle {
+  justify-content: center;
+  padding: 2px 0 10px;
+}
+
+.panelNavCollapsed .navTitleLogo {
+  width: 32px;
+  height: 32px;
+}
+
+/* 操作行：收起导航 / 关闭面板 */
+.navActions {
+  flex: none;
+  display: flex;
+  gap: 6px;
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px solid var(--nf-border);
+}
+
+.navActionBtn {
+  flex: 1;
+  border: 1px solid var(--nf-border);
+  background: rgba(0, 0, 0, 0);
   color: var(--nf-text-2);
+  cursor: pointer;
+  border-radius: 10px;
+  height: 32px;
+  font-size: 14px;
+  line-height: 1;
   display: inline-flex;
   align-items: center;
-  gap: 6px;
-  margin-left: 0;
-  white-space: nowrap;
+  justify-content: center;
+  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
 }
 
-.headerProgress b {
-  color: var(--nf-accent);
+.navActionBtn:hover {
+  background: var(--nf-hover);
+  color: var(--nf-text);
+  border-color: var(--nf-border-strong);
+}
+
+.panelNavCollapsed .navActions {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+/* demo 风格：底部当前书切换卡（封面首字 + 书名/进度 + 箭头） */
+.bookSwitch {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 4px;
+  padding: 9px;
+  border-radius: 12px;
+  background: var(--nf-bg-inset);
+  border: 1px solid var(--nf-border);
+  cursor: pointer;
+  text-align: left;
+  font: inherit;
+  color: var(--nf-text);
+  min-width: 0;
+  transition: background 0.15s ease, border-color 0.15s ease;
+}
+
+.bookSwitch:hover {
+  background: var(--nf-hover);
+  border-color: var(--nf-border-strong);
+}
+
+.bookSwitchCover {
+  width: 26px;
+  height: 34px;
+  border-radius: 5px;
+  background: linear-gradient(160deg, var(--nf-accent), color-mix(in srgb, var(--nf-accent) 45%, #000));
+  color: var(--nf-accent-fg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
   font-weight: 700;
+  flex: none;
 }
 
-.headerProgressDot {
-  width: 3px;
-  height: 3px;
-  border-radius: 50%;
-  background: var(--nf-border-strong, var(--nf-text-3));
-  display: inline-block;
+.bookSwitchName {
+  font-size: 12.5px;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
+.bookSwitchMeta {
+  font-size: 11px;
+  color: var(--nf-text-3);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bookSwitchArrow {
+  margin-left: auto;
+  color: var(--nf-text-3);
+  font-size: 12px;
+  flex: none;
+}
+
+/* demo 风格统计卡（今日待写 / 写作中 / 已通过 / 待审稿） */
+.statRowD { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
+.statCardD { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 14px 16px; border-radius: 16px; background: var(--nf-bg-inset); border: 1px solid var(--nf-border); min-width: 0; }
+.statCardDLabel { font-size: 12px; color: var(--nf-text-3); }
+.statCardDValue { font-size: 22px; font-weight: 700; margin-top: 2px; color: var(--nf-text); }
+.statCardDUnit { font-size: 12px; color: var(--nf-text-3); font-weight: 400; }
+.statCardDDetail { font-size: 11.5px; color: var(--nf-text-3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.statCardDDown { color: var(--nf-error); }
+.statCardDIcon { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex: none; background: var(--nf-accent-soft); }
+.statCardDIconRed { background: color-mix(in srgb, var(--nf-error) 13%, transparent); }
+
+/* demo 风格创作时间线（6 阶段分段条，点击跳转对应 tab） */
+.tlBar { display: flex; gap: 6px; margin-top: 8px; }
+.tlSeg { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; border: none; background: transparent; padding: 0; cursor: pointer; font: inherit; }
+.tlSegTrack { height: 8px; border-radius: 999px; background: var(--nf-hover); border: 1px solid var(--nf-border); overflow: hidden; }
+.tlSegFill { display: block; height: 100%; width: 100%; border-radius: 999px; background: var(--nf-accent); }
+.tlSegTodo .tlSegFill { opacity: 0; }
+.tlSegTodo .tlSegTrack { background: transparent; }
+.tlSegCurrent .tlSegTrack { border-color: var(--nf-accent); box-shadow: 0 0 0 2px var(--nf-accent-soft); }
+.tlSegCurrent .tlSegFill { opacity: 0.45; }
+.tlSegLabel { font-size: 10.5px; color: var(--nf-text-3); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.tlSegDone .tlSegLabel { color: var(--nf-accent); font-weight: 600; }
+.tlSeg:hover .tlSegTrack { border-color: var(--nf-border-strong); }
+
+
 /* ------------------------------------------------------------ cards */
 
 .card {
@@ -1592,8 +1708,16 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
   display: flex;
   flex-direction: column;
   gap: 4px;
-  background: var(--nf-glass-inset);
-  box-shadow: inset 0 1px 0 var(--nf-glass-sheen);
+  background: var(--nf-glass-face);
+  box-shadow: var(--nf-card-shadow), inset 0 1px 0 var(--nf-glass-sheen);
+  -webkit-backdrop-filter: blur(30px) saturate(180%);
+  backdrop-filter: blur(30px) saturate(180%);
+  transition: transform 0.22s ease, box-shadow 0.22s ease;
+}
+
+.assetStat:hover {
+  transform: translateY(-3px);
+  box-shadow: var(--nf-card-shadow-hover), inset 0 1px 0 var(--nf-glass-sheen);
 }
 
 .assetStatLabel {