dsh-offwork 1.1.1 → 1.1.2

package/media-server.js

@@ -0,0 +1,123 @@
+import { open } from 'node:fs/promises';
+import { constants } from 'node:fs';
+import { createHash } from 'node:crypto';
+import { MEDIA_ROUTE, MEDIA_ASSETS } from './media-manifest.js';
+
+export function mediaRange(value, size) {
+  if (!value) return { start: 0, end: size - 1, status: 200 };
+  if (typeof value !== 'string') return null;
+  const match = /^bytes=(\d*)-(\d*)$/i.exec(value.trim());
+  if (!match || (!match[1] && !match[2])) return null;
+  const first = match[1] ? Number(match[1]) : null;
+  const last = match[2] ? Number(match[2]) : null;
+  if (
+    (first !== null && !Number.isSafeInteger(first)) ||
+    (last !== null && !Number.isSafeInteger(last))
+  )
+    return null;
+  if (first === null) {
+    if (last <= 0) return null;
+    return { start: Math.max(0, size - last), end: size - 1, status: 206 };
+  }
+  if (first >= size || (last !== null && last < first)) return null;
+  return { start: first, end: Math.min(last ?? size - 1, size - 1), status: 206 };
+}
+
+// Only the generated allowlist can select a file. No request path is used as a disk path.
+export function createMediaHandler({
+  assets = MEDIA_ASSETS,
+  root = new URL('./', import.meta.url),
+} = {}) {
+  const cache = new Map();
+  async function bytesFor(key, asset) {
+    if (!cache.has(key)) {
+      const pending = (async () => {
+        const file = await open(
+          new URL(asset.file, root),
+          constants.O_RDONLY | (constants.O_NOFOLLOW || 0),
+        );
+        try {
+          const stats = await file.stat();
+          if (!stats.isFile() || stats.size !== asset.size || stats.size > 2000000)
+            throw new Error('Invalid media size');
+          const bytes = Buffer.alloc(asset.size);
+          let offset = 0;
+          while (offset < bytes.length) {
+            const result = await file.read(bytes, offset, bytes.length - offset, offset);
+            if (!result.bytesRead) throw new Error('Incomplete media');
+            offset += result.bytesRead;
+          }
+          if (createHash('sha256').update(bytes).digest('hex') !== asset.sha256)
+            throw new Error('Media integrity mismatch');
+          return bytes;
+        } finally {
+          await file.close();
+        }
+      })();
+      cache.set(key, pending);
+      pending.catch(() => {
+        if (cache.get(key) === pending) cache.delete(key);
+      });
+    }
+    return cache.get(key);
+  }
+  return async (req, res) => {
+    const empty = (status, headers = {}) => {
+      if (res.destroyed || res.writableEnded) return;
+      res.writeHead(status, { 'Cache-Control': 'no-store', 'Content-Length': '0', ...headers });
+      res.end();
+    };
+    if (req.method !== 'GET' && req.method !== 'HEAD') return empty(405, { Allow: 'GET, HEAD' });
+    let path;
+    try {
+      path = new URL(req.url, 'http://localhost').pathname;
+    } catch {
+      return empty(404);
+    }
+    if (!path.startsWith(MEDIA_ROUTE + '/')) return empty(404);
+    const key = path.slice(MEDIA_ROUTE.length + 1);
+    if (!Object.hasOwn(assets, key)) return empty(404);
+    const asset = assets[key],
+      etag = '"' + asset.sha256 + '"';
+    const rangeHeader =
+      req.method === 'GET' && (!req.headers['if-range'] || req.headers['if-range'] === etag)
+        ? req.headers.range
+        : null;
+    const range = mediaRange(rangeHeader, asset.size);
+    const matches = (req.headers['if-none-match'] || '')
+      .split(',')
+      .some((value) => value.trim() === '*' || value.trim().replace(/^W\//, '') === etag);
+    if (!range && !matches) return empty(416, { 'Content-Range': `bytes */${asset.size}` });
+    try {
+      const bytes = await bytesFor(key, asset);
+      if (res.destroyed || res.writableEnded) return;
+      const headers = {
+        'Content-Type': 'video/webm',
+        'Accept-Ranges': 'bytes',
+        'Cache-Control': 'public, max-age=31536000, immutable',
+        ETag: etag,
+        'X-Content-Type-Options': 'nosniff',
+        'Cross-Origin-Resource-Policy': 'same-origin',
+      };
+      if (matches) {
+        res.writeHead(304, headers);
+        res.end();
+        return;
+      }
+      headers['Content-Length'] = String(range.end - range.start + 1);
+      if (range.status === 206)
+        headers['Content-Range'] = `bytes ${range.start}-${range.end}/${asset.size}`;
+      res.writeHead(range.status, headers);
+      res.end(req.method === 'HEAD' ? undefined : bytes.subarray(range.start, range.end + 1));
+    } catch {
+      empty(500);
+    }
+  };
+}
+
+export function registerMediaRoute(ctx) {
+  ctx.inject?.(['webServer'], (webCtx) => {
+    const handler = createMediaHandler();
+    webCtx.effect(() => webCtx.webServer.register({ kind: 'prefix', path: MEDIA_ROUTE, handler }));
+  });
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dsh-offwork",
-  "version": "1.1.1",
-  "description": "Harness 页面陪伴角色、下班倒计时、实时收入与喝水提醒。Character companion, clock-out countdown, earnings and hydration reminders for DeepSeek Harness.",
+  "version": "1.1.2",
+  "description": "Harness 页面角色与小卡片、下班倒计时、全天喝水提醒、独立抽烟计时和收入展示。A Harness companion with clock-out, all-day hydration and smoking timers, earnings and action previews.",
   "type": "module",
   "license": "MIT",
   "author": "now",
@@ -34,6 +34,8 @@
   },
   "files": [
     "index.js",
+    "media-server.js",
+    "media-manifest.js",
     "client.js",
     "client.source.js",
     "clock.js",
@@ -42,10 +44,12 @@
     "pet-view.js",
     "pet-motion.js",
     "pet-video.js",
+    "pet-reminder.js",
     "pet-interactions.js",
     "pet-surfaces.js",
     "hydration.js",
     "hydration-store.js",
+    "countdown.js",
     "cordis.patch.yml",
     "locale/*.json",
     "icon.svg",

package/pet-interactions.js

@@ -10,7 +10,17 @@ export function petUIReducer(state, action) {
     case 'stay':
       return { ...state, pending: null };
     case 'navigate': {
-      if (![null, 'home', 'income', 'earnings', ...PET_EDITOR_SCREENS].includes(action.screen))
+      if (
+        ![
+          null,
+          'home',
+          'income',
+          'earnings',
+          'water-countdown',
+          'smoking',
+          ...PET_EDITOR_SCREENS,
+        ].includes(action.screen)
+      )
         return state;
       if (state.screen === action.screen)
         return { ...state, back: action.root ? null : state.back, menu: null, pending: null };
@@ -46,10 +56,39 @@ export const PET_INTERACTION_MESSAGES = {
   zh: {
     petHome: '喝水',
     petWaterCard: '喝水',
+    waterCountdown: '喝水倒计时',
+    timerWaterDetails: '查看喝水卡片',
+    smokingCountdown: '抽烟倒计时',
+    waterTimerShort: '喝水',
+    smokingTimerShort: '抽烟',
+    timerIdle: '未开始',
+    timerRunning: '计时中',
+    timerPaused: '已暂停',
+    timerDue: '已到时',
+    timerStart: '开始计时',
+    timerPause: '暂停计时',
+    timerResume: '继续计时',
+    timerRestart: '重新计时',
+    timerStop: '停止计时',
+    timerInterval: '间隔（分钟）',
+    timerHint:
+      '按自然时间计时，后台和刷新后继续。间隔自动保存，下次开始或重新计时时生效。到点后不自动开始下一轮。',
+    timerStorageError: '计时数据暂时无法读取或保存，请重试。',
+    timerChanged: '计时已在其他标签页更新，请按最新状态操作。',
+    timerRetry: '重试读取计时',
+    timerLoading: '读取中',
+    waterTimerHint: '按自然时间计时，午休、下班和休息日也可提醒；可随时打卡。',
+    timerQuiet: '免打扰',
+    timerOff: '未开启',
+    timerWaiting: '等待开启',
+    timerBreak: '已暂停',
+    timerFinished: '已结束',
+    timerUnavailable: '暂不可用',
     petCountdownCard: '下班倒计时',
+    petCountdownGroup: '计时概览',
     petEarningsCard: '收入',
-    petWaterAlert: '喝水提醒已到，可从右键菜单打开喝水卡片',
-    petPausedHint: '本班已暂停，可手动恢复。',
+    petWaterAlert: '查看喝水提醒',
+    petPausedHint: '提醒已暂停，手动恢复后重新计时。',
     petMenu: '宠物菜单',
     petBack: '返回',
     petCloseAll: '关闭面板',
@@ -69,16 +108,46 @@ export const PET_INTERACTION_MESSAGES = {
     petQuietActive: '喝水提醒已静音',
     petHomeHint: '喝水、歇一会儿，都在这里。',
     petQuietHint: '按自然时间，到期自动恢复。',
-    petResume: '恢复本班提醒',
-    petDismissReminder: '稍后处理',
+    petResume: '恢复提醒',
+    petDismissReminder: '收起提醒',
   },
   en: {
     petHome: 'Water',
     petWaterCard: 'Water',
+    waterCountdown: 'Water countdown',
+    timerWaterDetails: 'Water controls',
+    smokingCountdown: 'Smoking countdown',
+    waterTimerShort: 'Water',
+    smokingTimerShort: 'Smoking',
+    timerIdle: 'Not started',
+    timerRunning: 'Running',
+    timerPaused: 'Paused',
+    timerDue: 'Time is up',
+    timerStart: 'Start timer',
+    timerPause: 'Pause timer',
+    timerResume: 'Resume timer',
+    timerRestart: 'Restart timer',
+    timerStop: 'Stop timer',
+    timerInterval: 'Interval (minutes)',
+    timerHint:
+      'Uses clock time and continues in the background and after reload. Interval changes save automatically and apply on the next start or restart. Expiry does not start another cycle.',
+    timerStorageError: 'Timer data could not be loaded or saved. Please retry.',
+    timerChanged: 'The timer changed in another tab. Use the updated state.',
+    timerRetry: 'Retry loading timer',
+    timerLoading: 'Loading',
+    waterTimerHint:
+      'Uses clock time, including lunch, off-hours and days off. You can record a drink at any time.',
+    timerQuiet: 'Quiet time',
+    timerOff: 'Disabled',
+    timerWaiting: 'Waiting',
+    timerBreak: 'Paused',
+    timerFinished: 'Finished',
+    timerUnavailable: 'Unavailable',
     petCountdownCard: 'Shift countdown',
+    petCountdownGroup: 'Timer overview',
     petEarningsCard: 'Earnings',
-    petWaterAlert: 'Water is due; open Water from the context menu',
-    petPausedHint: 'Paused for this shift. Resume when ready.',
+    petWaterAlert: 'View water reminder',
+    petPausedHint: 'Reminders paused. Resume manually to start a fresh interval.',
     petMenu: 'Pet menu',
     petBack: 'Back',
     petCloseAll: 'Close panel',
@@ -100,13 +169,15 @@ export const PET_INTERACTION_MESSAGES = {
     petHomeHint: 'A drink or a little break, right here.',
     petQuietHint: 'Uses clock time and resumes automatically.',
     petResume: 'Resume reminders',
-    petDismissReminder: 'Handle later',
+    petDismissReminder: 'Dismiss reminder',
   },
 };
 export const PET_INTERACTION_STYLE = `
 .owc-pet-workspace .owc-glass{opacity:var(--owc-alpha)}
 .owc-pet-water-card.owc-water-due{border-radius:14px}
-.owc-pet-water-alert{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 12px;border-radius:12px;cursor:default;position:fixed!important;width:140px;box-sizing:border-box;min-height:30px!important;border:1px solid var(--owc-accent)!important;background:var(--dsw-alias-bg-overlay)!important;box-shadow:0 4px 12px #18354b18;font-size:11px!important;z-index:2}
+.owc-pet-water-label{min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.owc-pet-water-alert svg{flex:none}
+.owc-pet-water-alert{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 12px;border-radius:12px;cursor:pointer;position:fixed!important;width:140px;box-sizing:border-box;min-height:44px!important;border:1px solid var(--owc-accent)!important;background:var(--dsw-alias-bg-overlay)!important;box-shadow:0 4px 12px #18354b18;font-size:11px!important;z-index:2}
 .owc-pet-panel.owc-pet-workspace{display:flex;flex-direction:column;overflow:hidden}
 .owc-pet-workspace>.owc-head{position:relative;flex:none;min-height:46px;padding:8px 12px;box-sizing:border-box}
 .owc-pet-workspace>.owc-pet-scroll{position:relative;min-height:0;flex:1;overflow:auto;overscroll-behavior:contain;scrollbar-width:none}

package/pet-motion.js

@@ -24,6 +24,7 @@ const PET_ACTIONS = {
 export function createPetMotion(element, host, options = {}) {
   const document = host.document;
   const reduced = host.matchMedia?.('(prefers-reduced-motion: reduce)');
+  const ambient = options.ambient !== false;
   let enabled = options.enabled ?? true;
   let resting = options.resting ?? false;
   let animation = null;
@@ -38,7 +39,7 @@ export function createPetMotion(element, host, options = {}) {
   }
   function sync() {
     if (!allowed()) stop();
-    element.dataset.motion = allowed() && !resting ? 'idle' : 'off';
+    element.dataset.motion = allowed() && !resting && ambient ? 'idle' : 'off';
   }
   function play(action) {
     if (!allowed() || !Object.hasOwn(PET_ACTIONS, action) || !element.animate) return false;

package/pet-reminder.js

@@ -0,0 +1,20 @@
+// Page-local presentation state. Never changes reminder deadlines or records.
+export const initialPetReminder = Object.freeze({ eventId: null, armed: false, open: false });
+
+export function nextPetReminder(state, { ready, eventId, phase, visible, available, ownsPrompt }) {
+  let next;
+  if (!ready || !visible || !eventId) next = initialPetReminder;
+  else if (['countdown', 'break', 'quiet'].includes(phase))
+    next = { eventId, armed: true, open: false };
+  else if (phase !== 'due' || !available || state.eventId !== eventId)
+    next = { eventId, armed: false, open: false };
+  else if (state.open) next = { eventId, armed: false, open: !!ownsPrompt };
+  else next = { eventId, armed: state.armed && !ownsPrompt, open: state.armed && !!ownsPrompt };
+  return state.eventId === next.eventId && state.armed === next.armed && state.open === next.open
+    ? state
+    : next;
+}
+
+export function dismissPetReminder(state) {
+  return state.open || state.armed ? { ...state, armed: false, open: false } : state;
+}

package/pet-surfaces.js

@@ -13,10 +13,12 @@ export function petSurfaceWidth(screen, viewport) {
     {
       income: 320,
       earnings: 320,
-      home: 336,
+      home: 320,
+      'water-countdown': 320,
+      smoking: 320,
       water: 360,
-      appearance: 360,
-      schedule: 400,
+      appearance: 340,
+      schedule: 360,
       menu: 224,
       reminder: 304,
     }[screen] ?? 336;
@@ -176,19 +178,141 @@ export const PET_SURFACE_STYLE = `
 .owc-v2 .owc-appearance-preview{height:260px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:var(--owc-subtle);margin-bottom:16px;overflow:hidden}
 .owc-v2 .owc-appearance-preview .owc-pet-art{flex:none;animation:none}
 .owc-v2 .owc-appearance-preview .owc-pet-art *{animation:none!important}
+.owc-v2 .owc-preview-actions{display:flex;gap:6px;flex-wrap:wrap}
+.owc-v2 .owc-preview-actions button{min-width:52px}
+.owc-v2 .owc-preview-actions button[aria-pressed=true]{color:var(--owc-accent);background:color-mix(in srgb,var(--owc-accent) 10%,transparent)}
+.owc-v2 .owc-preview-status{min-height:36px;margin:8px 0 12px}
 .owc-v2 .owc-appearance-preview p{font-size:13px;color:var(--owc-muted);padding:16px;text-align:center}
 .owc-v2 .owc-pet-context{padding:0;background:var(--owc-surface);border:1px solid var(--owc-border);border-radius:var(--owc-radius);box-shadow:var(--owc-shadow);scrollbar-width:none}
 .owc-v2 .owc-pet-context::-webkit-scrollbar{display:none}
 .owc-v2 .owc-menu-natural{padding:6px;display:flow-root;box-sizing:border-box;min-width:0}
 .owc-v2 .owc-pet-context button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;justify-content:flex-start;font-size:13px}
 .owc-v2 .owc-pet-context hr{border-color:var(--owc-border);margin:6px 4px}
-.owc-v2 .owc-pet-toast,.owc-v2 .owc-pet-clock,.owc-v2 .owc-pet-water-alert{background:var(--owc-surface)!important;color:var(--owc-text);border:1px solid var(--owc-border)!important;box-shadow:var(--owc-shadow)}
+.owc-v2.owc-classic{border-radius:16px;touch-action:manipulation}
+.owc-classic .owc-content{max-height:calc(var(--owc-viewport-height) - 2px);overflow:auto}
+.owc-v2 .owc-classic-head{position:sticky;top:0;z-index:2;min-height:46px;padding:8px 12px;background:var(--owc-surface);border-bottom:1px solid var(--owc-border);gap:6px}
+.owc-classic-head .owc-title{font-size:12px;min-width:0;overflow:hidden;text-overflow:ellipsis;touch-action:none}
+.owc-v2.owc-classic.owc-compact{border-radius:14px;border-color:color-mix(in srgb,var(--owc-text) 10%,transparent);box-shadow:0 3px 12px #0a101a1a}
+.owc-classic.owc-compact>.owc-glass{background:var(--owc-surface);background:oklch(from var(--owc-surface) clamp(0,calc(l + .02),1) calc(c * .55) h)}
+.owc-classic-mini{padding:14px;font:400 12px/18px system-ui,sans-serif}
+.owc-classic-mini-top{display:flex;align-items:center;gap:6px;height:32px}
+.owc-classic-mini .owc-grip{flex:1;display:flex;flex-direction:row;align-items:center;gap:8px;min-width:0;touch-action:none;cursor:grab}
+.owc-classic-mini-label{flex:0 0 30px;font:500 10px/14px system-ui,sans-serif;color:var(--owc-muted);text-wrap:balance}
+.owc-classic-mini-time{flex:1;min-width:0;font:500 26px/32px system-ui,sans-serif;letter-spacing:-.3px;font-variant-numeric:tabular-nums;white-space:nowrap}
+.owc-v2 .owc-classic-mini-state{flex:1;min-width:0;font:500 16px/20px system-ui,sans-serif;margin:0;padding:0;min-height:0;text-align:left;overflow-wrap:anywhere}
+.owc-classic-mini[data-clock-phase=done] .owc-classic-mini-state{color:color-mix(in srgb,#43896d 65%,var(--owc-text))}
+.owc-v2 .owc-classic-mini .owc-icon{padding:0;min-width:24px;width:24px;height:24px;min-height:24px;flex-shrink:0;border:0;border-radius:5px;background:transparent;color:var(--owc-muted)}
+.owc-classic-mini-timers{display:flex;align-items:center;gap:10px;height:22px;margin-top:12px}
+.owc-v2 .owc-classic-mini-timer{display:flex;align-items:center;justify-content:flex-start;gap:4px;flex-shrink:0;min-width:0;min-height:24px;padding:0;border:0;border-radius:5px;background:transparent;font:400 12px/18px system-ui,sans-serif;color:var(--owc-muted)}
+.owc-classic-mini-timer svg{flex-shrink:0}
+.owc-classic-mini-timer strong{font:inherit;font-variant-numeric:tabular-nums;color:var(--owc-text);white-space:nowrap}
+.owc-v2 .owc-classic-mini-timer[data-countdown-due=true],.owc-classic-mini-timer[data-countdown-due=true] strong{color:color-mix(in srgb,var(--owc-accent) 55%,var(--owc-text));background:transparent}
+.owc-classic-mini-income{display:flex;align-items:center;gap:3px;margin-left:auto;min-width:24px;flex-shrink:1}
+.owc-v2 .owc-classic-mini-amount{display:block;min-width:0;max-width:45px;min-height:24px;padding:0;border:0;font:400 11px/24px system-ui,sans-serif;color:var(--owc-muted);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.owc-v2 .owc-classic-mini button:hover{background:color-mix(in srgb,var(--owc-text) 6%,transparent)}
+.owc-classic-mini button:focus-visible{outline:2px solid var(--owc-accent);outline-offset:3px}
+.owc-classic-overview{padding:16px;display:flex;flex-direction:column;gap:14px}
+.owc-classic-kicker{display:flex;align-items:center;gap:6px;color:var(--owc-muted);font-size:11px;margin-bottom:7px}
+.owc-classic-time{font-size:34px;font-weight:650;line-height:1.2;letter-spacing:.5px;font-variant-numeric:tabular-nums}
+.owc-classic-state{font-size:22px;line-height:1.3;margin:0;color:var(--owc-text)}
+.owc-v2 .owc-classic-hint{font-size:11px;color:var(--owc-muted);line-height:1.6;margin:7px 0 0}
+.owc-classic-hero>button{margin-top:12px;min-height:38px}
+.owc-classic-schedule{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px;margin-top:10px;color:var(--owc-muted);font-size:10px;font-variant-numeric:tabular-nums}
+.owc-classic-timers{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
+.owc-v2 .owc-classic-tile{display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:11px;min-width:0;border:1px solid var(--owc-border);border-radius:12px;background:var(--owc-subtle);text-align:left}
+.owc-classic-tile-title{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--owc-muted)}
+.owc-classic-tile strong{max-width:100%;font-size:17px;line-height:1.2;font-weight:600;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.owc-classic-tile-hint{display:block;max-width:100%;font-size:10px;color:var(--owc-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.owc-classic-income{display:flex;align-items:center;gap:4px;padding-top:10px;border-top:1px solid var(--owc-border)}
+.owc-v2 .owc-classic-income-link{display:flex;align-items:center;justify-content:space-between;flex:1;min-width:0;gap:8px;padding:4px 0;font-size:11px;color:var(--owc-muted);min-height:32px}
+.owc-classic-income-link strong{font-size:12px;font-weight:500;color:var(--owc-text);font-variant-numeric:tabular-nums}
+.owc-classic-income .owc-text{font-size:10px;gap:4px;flex-shrink:0}
+.owc-classic-details{border-top:1px solid var(--owc-border);padding-top:12px;font-size:11px;color:var(--owc-muted)}
+.owc-classic-detail-title{display:flex;justify-content:space-between;margin-bottom:8px}
+.owc-classic-details p{font-size:11px;line-height:1.5;margin:8px 0}
+.owc-classic-feedback{margin:0;font-size:11px;color:var(--owc-accent)}
+.owc-classic>.owc-content>.owc-note,.owc-classic>.owc-content>.owc-error{margin:8px 16px}
+.owc-v2 .owc-pet-toast,.owc-v2 .owc-pet-water-alert{background:var(--owc-surface)!important;color:var(--owc-text);border:1px solid var(--owc-border)!important;box-shadow:var(--owc-shadow)}
 .owc-v2 .owc-pet-toast{border-radius:12px;font-size:12px}
 .owc-v2 .owc-pet-unsaved{padding:20px 16px}
 .owc-v2 .owc-pet-unsaved p{font-size:13px;overflow-wrap:anywhere}
+.owc-detail-page{--owc-detail-surface:var(--owc-surface);--owc-control-height:38px;border-radius:14px}
+@supports(color:oklch(from white l c h)){.owc-detail-page{--owc-detail-surface:oklch(from var(--owc-surface) clamp(0,calc(l + .02),1) calc(c * .55) h)}}
+.owc-detail-page>.owc-glass{background:var(--owc-detail-surface);border-color:var(--owc-border)}
+.owc-pet-workspace.owc-detail-page>.owc-head,.owc-classic.owc-detail-page .owc-classic-head{min-height:44px;padding:8px 16px;gap:8px;background:var(--owc-detail-surface);border-bottom:1px solid var(--owc-border)}
+.owc-detail-page .owc-head .owc-icon{width:28px;height:28px;min-width:28px;min-height:28px;padding:4px}
+.owc-detail-page [data-pet-page-title],.owc-classic.owc-detail-page .owc-classic-head .owc-title{font-size:14px;font-weight:550}
+.owc-detail-page .owc-form,.owc-detail-page .owc-water-form,.owc-detail-page .owc-main,.owc-detail-page .owc-pet-home{padding:16px}
+.owc-v2 .owc-pet-natural>.owc-form:last-child,.owc-v2 .owc-pet-natural>.owc-water-form:last-child{padding-bottom:16px}
+.owc-detail-page fieldset.owc-setting-group{border:0;border-radius:0;background:transparent;padding:0;margin:0 0 18px;min-width:0}
+.owc-detail-page fieldset.owc-setting-group legend{padding:0;margin-bottom:10px;font-size:12px;font-weight:550;color:var(--owc-text)}
+.owc-detail-page .owc-appearance legend{display:none}
+.owc-detail-page .owc-salary-legend{display:flex;align-items:center;justify-content:space-between;width:100%}
+.owc-detail-page .owc-salary-legend .owc-icon{min-width:24px;min-height:24px;padding:3px}
+.owc-detail-page .owc-field{position:relative;margin:0 0 12px}
+.owc-detail-page .owc-field>span{font-size:12px;margin-bottom:6px}
+.owc-detail-page .owc-row2{gap:12px}
+.owc-detail-page :is(input[type=text],input[type=number],input[type=time],select){min-height:38px;border-radius:8px;background:color-mix(in srgb,var(--owc-text) 3%,var(--owc-detail-surface));border-color:var(--owc-border);font-size:13px}
+.owc-detail-page .owc-private{box-sizing:border-box;min-height:38px;border:1px solid var(--owc-border);border-radius:8px;background:color-mix(in srgb,var(--owc-text) 3%,var(--owc-detail-surface));padding:8px 10px;font-size:14px}
+.owc-detail-page .owc-seg{padding:2px;border-radius:8px;background:var(--owc-subtle)}
+.owc-detail-page .owc-seg button{min-height:32px;font-size:12px;border-radius:6px}
+.owc-detail-page button.owc-primary{min-height:38px;border-radius:8px;font-size:13px;font-weight:550;box-shadow:none}
+.owc-v2 .owc-detail-page .owc-save,.owc-v2.owc-detail-page .owc-save{position:sticky;bottom:0;z-index:2;display:flex;justify-content:flex-end;gap:8px;padding:12px 0 0;margin:14px 0 0;border-top:1px solid var(--owc-border);background:var(--owc-detail-surface)}
+.owc-detail-page .owc-save button{min-height:38px;font-size:13px;border-radius:8px;padding:8px 16px}
+.owc-detail-page .owc-save button:not(.owc-primary){background:transparent;border-color:transparent;color:var(--owc-muted)}
+.owc-detail-page .owc-detail-hero{margin:0 0 16px}
+.owc-detail-page p.owc-detail-kicker{margin:0 0 6px;font-size:12px;color:var(--owc-muted)}
+.owc-detail-value,.owc-detail-page .owc-countdown-value,.owc-detail-page .owc-time,.owc-detail-page .owc-money{font-size:28px;line-height:1.25;font-weight:500;letter-spacing:-.3px;font-variant-numeric:tabular-nums}
+.owc-detail-page .owc-detail-state{font-size:20px;letter-spacing:0}
+.owc-detail-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:18px;margin-top:8px;font-size:11px;color:var(--owc-muted)}
+.owc-detail-feedback{color:var(--owc-accent);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.owc-detail-page .owc-detail-primary-actions{display:flex;align-items:center;gap:8px}
+.owc-detail-primary-actions>.owc-primary{flex:1}
+.owc-detail-page .owc-detail-secondary{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px}
+.owc-detail-page .owc-detail-secondary button{background:transparent;border:0;padding:6px 0;font-size:12px;color:var(--owc-muted);min-height:30px}
+.owc-detail-page details.owc-detail-more,.owc-detail-page .owc-water-form>details,.owc-detail-page details.owc-advanced{margin:12px 0 0;padding:0;border:0;border-radius:0;background:transparent;font-size:12px}
+.owc-detail-page details>summary{font-size:12px;color:var(--owc-muted);padding:4px 0;cursor:pointer}
+.owc-detail-page details p{font-size:11px;line-height:1.6;color:var(--owc-muted)}
+.owc-detail-options{display:flex;gap:8px;margin-top:10px}
+.owc-detail-options button{flex:1;min-height:34px;border:1px solid var(--owc-border);border-radius:8px;font-size:12px}
+.owc-detail-page .owc-pet-home.owc-water-due{background:transparent;border-radius:0}
+.owc-detail-page .owc-countdown-card{gap:12px}
+.owc-detail-page .owc-countdown-card .owc-detail-hero{margin-bottom:0}
+.owc-detail-page .owc-countdown-actions{gap:8px}
+.owc-detail-page .owc-countdown-actions>.owc-primary{flex:1 1 100%}
+.owc-detail-page .owc-countdown-actions>button:not(.owc-primary){min-height:30px;background:transparent;border:0;font-size:12px;color:var(--owc-muted)}
+.owc-detail-page .owc-water-toggle,.owc-detail-page .owc-appearance .owc-check{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:38px;margin:0 0 10px;padding:0;font-size:13px;font-weight:400}
+.owc-detail-page .owc-appearance .owc-check input{order:2;margin-left:auto}
+.owc-detail-page .owc-water-toggle input,.owc-detail-page .owc-appearance .owc-check input{appearance:none;flex:none;width:32px;height:18px;min-height:18px;padding:0;border:0;border-radius:20px;background:color-mix(in srgb,var(--owc-text) 22%,var(--owc-detail-surface));position:relative;cursor:pointer}
+.owc-detail-page .owc-water-toggle input:before,.owc-detail-page .owc-appearance .owc-check input:before{content:'';position:absolute;width:14px;height:14px;top:2px;left:2px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0002}
+.owc-detail-page .owc-water-toggle input:checked,.owc-detail-page .owc-appearance .owc-check input:checked{background:var(--owc-accent)}
+.owc-detail-page .owc-water-toggle input:checked:before,.owc-detail-page .owc-appearance .owc-check input:checked:before{left:16px}
+.owc-detail-page .owc-water-interval{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;margin:6px 0 10px}
+.owc-detail-page .owc-water-interval input{width:92px;max-width:92px;text-align:center}
+.owc-detail-page .owc-water-presets{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;margin:0 0 12px}
+.owc-detail-page .owc-water-presets button{font-size:12px;font-weight:400;min-height:32px;padding:4px;border-radius:7px;background:transparent}
+.owc-detail-page .owc-water-presets button[aria-pressed=true]{background:color-mix(in srgb,var(--owc-accent) 9%,var(--owc-detail-surface));border-color:color-mix(in srgb,var(--owc-accent) 35%,transparent);color:var(--owc-accent)}
+.owc-detail-page .owc-water-form>p{font-size:11px;line-height:1.6;margin:8px 0;color:var(--owc-muted)}
+.owc-detail-page p.owc-error{color:color-mix(in srgb,#dc4c64 70%,var(--owc-text))}
+.owc-detail-page .owc-stats{border:0;background:transparent;padding:0;gap:20px;margin:16px 0}
+.owc-detail-page .owc-stats>div{padding:0;border:0;border-radius:0;background:transparent;min-width:0}
+.owc-detail-page .owc-stats strong{font-size:15px;font-weight:500}
+.owc-detail-page .owc-meta{border:0;margin:8px 0 0;padding:0;font-size:11px}
+.owc-detail-page .owc-row-actions{margin-top:14px;gap:12px}
+.owc-detail-page .owc-row-actions button{font-size:11px;min-height:30px;padding:3px 0}
+.owc-detail-page .owc-progress{height:3px;margin:14px 0 16px}
+.owc-detail-page .owc-preview{background:transparent;border:0;padding:0;margin:10px 0;font-size:11px;color:var(--owc-muted)}
+.owc-v2 .owc-appearance-preview{height:180px;border-radius:10px;background:color-mix(in srgb,var(--owc-text) 3%,var(--owc-detail-surface,var(--owc-surface)))}
+.owc-v2 .owc-appearance-preview>.owc-pet-art{transform:scale(.7);transform-origin:50% 50%}
+.owc-detail-page .owc-appearance input[type=range]{width:100%}
+.owc-detail-page .owc-range-value{position:absolute;right:0;top:0;font-size:11px;color:var(--owc-muted)}
+.owc-detail-page .owc-preview-tools{margin-bottom:14px}
+.owc-detail-page .owc-preview-actions button{min-height:32px;font-size:12px;border-radius:7px}
+.owc-detail-page .owc-preview-status{font-size:11px;line-height:1.5}
+@media(pointer:coarse){.owc-detail-page{--owc-control-height:44px}.owc-detail-page .owc-head .owc-icon{width:44px;height:44px;min-width:44px;min-height:44px}.owc-detail-page button.owc-primary,.owc-detail-page .owc-save button{min-height:44px}.owc-detail-page :is(input[type=text],input[type=number],input[type=time],select){font-size:16px;min-height:44px}}
 @container (max-width:310px){.owc-v2 .owc-row2{grid-template-columns:1fr}.owc-v2 .owc-stats{gap:8px}.owc-v2 .owc-days{gap:2px}.owc-v2 .owc-days button{font-size:11px}}
 @media (pointer:coarse){.owc-v2{--owc-control-height:44px}.owc-v2 .owc-icon{min-width:44px}.owc-v2 button.owc-primary{min-height:44px}.owc-v2 :is(input[type=text],input[type=time],input[type=number],select){font-size:16px}.owc-v2 input[type=range]{min-height:36px}.owc-v2 .owc-check{min-height:44px}}
-@media (max-height:600px){.owc-v2 .owc-appearance-preview{height:120px}.owc-v2 .owc-appearance-preview svg{transform:scale(.55)}.owc-v2 .owc-appearance-preview img{transform:scale(.45)}}
+@media (max-height:600px){.owc-v2 .owc-appearance-preview{height:120px}.owc-v2 .owc-appearance-preview>.owc-pet-art{transform:scale(.45);transform-origin:50% 50%}.owc-v2 .owc-appearance-preview>svg.owc-pet-art{transform:scale(.55)}}
 @media (prefers-contrast:more){.owc-v2{--owc-border:var(--owc-text)}.owc-v2 .owc-glass{opacity:1!important}}
 @media (prefers-reduced-transparency:reduce){.owc-v2 .owc-glass{opacity:1!important;backdrop-filter:none;-webkit-backdrop-filter:none}}
 `;