♻️ refactor(client): 浏览器半拆成 src 模块，client.js 改由构建产出

src/client/ui/styles.js

@@ -0,0 +1,59 @@
+/**
+ * Every style declaration this package owns.
+ *
+ * The popup copies the shipped toast surface (a fixed entry in the frame-wide
+ * overlay, the `--dsw-alias-toast-bg` / `--dsw-alias-toast-label` pair,
+ * `--dsw-radius-lg`, `--dsw-shadow-lv3`) and adds a title line above the text;
+ * the switch copies `Switch.module.css` behavior and proportion; the
+ * configuration sections follow the Plugin Manager page's own section rhythm
+ * (a column, 32px apart). Class names are renamed under `dsn-`; only the popup
+ * glyphs carry their own artwork colors.
+ *
+ * A plugin must not import a Harness Client package, so the declarations are
+ * this package's own text and reference theme tokens only.
+ *
+ * @module @dsh-plugin/session-notify/client/ui/styles
+ */
+
+export const CSS = `
+.dsn-stack{position:fixed;top:40px;right:24px;z-index:1100;display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:none}
+@media (max-width:520px){.dsn-stack{right:12px}}
+.dsn-toast{box-sizing:border-box;pointer-events:auto;display:flex;align-items:flex-start;gap:10px;width:max-content;max-width:min(420px,calc(100vw - 48px));padding:12px 12px 12px 16px;border-radius:var(--dsw-radius-lg);background:var(--dsw-alias-toast-bg);color:var(--dsw-alias-toast-label);font-size:14px;line-height:22px;box-shadow:var(--dsw-shadow-lv3);animation:dsn-toast-in 160ms ease-out}
+@keyframes dsn-toast-in{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:translateX(0)}}
+@media (prefers-reduced-motion: reduce){.dsn-toast{animation:none}}
+.dsn-toast-icon{display:grid;place-items:center;flex:none;height:22px;color:var(--dsw-alias-state-warn-label)}
+.dsn-toast-icon.is-completion{color:var(--dsw-alias-state-success-primary)}
+.dsn-toast-icon.is-question{color:var(--dsw-alias-brand-primary)}
+.dsn-toast-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
+.dsn-toast-title{font-weight:500;font-size:14px;line-height:22px}
+.dsn-toast-desc{color:var(--dsw-alias-toast-label);opacity:.8;font-size:13px;line-height:20px;overflow-wrap:break-word}
+.dsn-toast-actions{display:flex;align-items:center;gap:2px;flex:none}
+.dsn-toast-action{display:inline-flex;align-items:center;height:28px;padding:0 8px;border:0;border-radius:var(--dsw-radius-sm);background:none;color:var(--dsw-static-deepseek-400);font:inherit;font-size:13px;line-height:20px;cursor:pointer}
+.dsn-toast-action:hover{background:var(--dsw-alias-interactive-bg-hover)}
+.dsn-toast-action:focus-visible{outline:var(--dsw-focus-ring-width) solid var(--dsw-focus-ring-color,var(--dsw-alias-state-business-primary));outline-offset:2px}
+.dsn-toast-close{flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:0;border-radius:var(--dsw-radius-sm);background:transparent;color:var(--dsw-alias-toast-label);opacity:.8;cursor:pointer}
+.dsn-toast-close:hover{background:var(--dsw-alias-interactive-bg-hover);opacity:1}
+.dsn-toast-close:focus-visible{outline:var(--dsw-focus-ring-width) solid var(--dsw-focus-ring-color,var(--dsw-alias-state-business-primary));outline-offset:2px}
+.dsn-sections{display:flex;flex-direction:column;gap:24px}
+.dsn-section{display:flex;flex-direction:column;gap:10px}
+.dsn-section-title{margin:0;color:var(--dsw-alias-label-primary);font-size:14px;font-weight:500;line-height:22px}
+.dsn-section-desc{margin:0;color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:18px}
+.dsn-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:.5px solid var(--dsw-alias-border-l2)}
+.dsn-row:last-child{border-bottom:0}
+.dsn-row-text{display:flex;flex-direction:column;gap:2px;min-width:0}
+.dsn-row-title{color:var(--dsw-alias-label-primary);font-size:14px;line-height:22px}
+.dsn-row-desc{color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:18px}
+.dsn-status{margin:0;color:var(--dsw-alias-label-secondary);font-size:12px;line-height:18px}
+.dsn-status-error{color:var(--dsw-alias-state-error-primary)}
+.dsn-switch{box-sizing:border-box;position:relative;flex:0 0 auto;width:36px;height:20px;padding:2px;border:0;border-radius:999px;background:var(--dsw-alias-border-l3);cursor:pointer}
+.dsn-switch[aria-checked='true']{background:var(--dsw-alias-brand-primary)}
+.dsn-switch:disabled{cursor:default;opacity:.5}
+.dsn-switch:focus-visible{outline:var(--dsw-focus-ring-width) solid var(--dsw-focus-ring-color,var(--dsw-alias-state-business-primary));outline-offset:2px}
+.dsn-thumb{display:block;width:16px;height:16px;border-radius:50%;background:var(--dsw-alias-label-primary-foreground);transition:transform 120ms ease}
+.dsn-switch[aria-checked='false'] .dsn-thumb{background:var(--dsw-alias-switch-thumb)}
+.dsn-switch[aria-checked='true'] .dsn-thumb{transform:translateX(16px)}
+.dsn-button{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:4px;height:36px;padding:0 14px;border:.5px solid var(--dsw-alias-border-l3);border-radius:var(--dsw-radius-md);cursor:pointer;font-size:14px;line-height:22px;color:var(--dsw-alias-label-primary);background:transparent;flex:none}
+.dsn-button:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover)}
+.dsn-button:disabled{cursor:not-allowed;opacity:.4}
+.dsn-button:focus-visible{outline:var(--dsw-focus-ring-width) solid var(--dsw-focus-ring-color,var(--dsw-alias-state-business-primary));outline-offset:2px}
+`