@svadmin/lite 0.27.0 → 0.30.1

package/dist/components/LiteDataLineageGraph.svelte.d.ts

@@ -0,0 +1,15 @@
+interface LineageItem {
+    id: string;
+    name: string;
+    type: string;
+    owner: string;
+    rows?: string;
+}
+interface Props {
+    title?: string;
+    nodes?: LineageItem[];
+    class?: string;
+}
+declare const LiteDataLineageGraph: import("svelte").Component<Props, {}, "">;
+type LiteDataLineageGraph = ReturnType<typeof LiteDataLineageGraph>;
+export default LiteDataLineageGraph;

package/dist/components/LiteDataMaskPolicyEngine.svelte

@@ -0,0 +1,131 @@
+<script lang="ts">
+  interface PolicyItem {
+    id: string;
+    fieldName: string;
+    ruleType: string;
+    level: string;
+    exemptRole: string;
+    enabled: boolean;
+  }
+
+  interface Props {
+    title?: string;
+    policies?: PolicyItem[];
+    class?: string;
+  }
+
+  let {
+    title = '动态数据脱敏策略中心',
+    policies = [
+      { id: 'p1', fieldName: 'mobile_phone', ruleType: '手机号脱敏', level: 'L3 机密', exemptRole: '超级管理员', enabled: true },
+      { id: 'p2', fieldName: 'resident_id_card', ruleType: '居民身份证', level: 'L4 极高', exemptRole: '合规风控员', enabled: true },
+      { id: 'p3', fieldName: 'bank_card_number', ruleType: '银行借记卡', level: 'L4 极高', exemptRole: '财务主管', enabled: true },
+      { id: 'p4', fieldName: 'corporate_email', ruleType: '电子邮箱前缀', level: 'L2 内部', exemptRole: '全员', enabled: false }
+    ],
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<div
+  class="lite-mask-policy {className}"
+  data-svadmin-component="LiteDataMaskPolicyEngine"
+  role="region"
+  aria-label="Data Mask Policy Engine"
+>
+  <header class="lite-mask-header">
+    <div>
+      <h4 class="lite-mask-title">{title}</h4>
+      <span class="lite-mask-meta">基于密级与角色动态下发，纯前端算法沙箱</span>
+    </div>
+    <span class="lite-policy-count">{policies.length} 项脱敏策略</span>
+  </header>
+
+  <div class="lite-mask-table-wrap">
+    <table class="lite-mask-table">
+      <thead>
+        <tr>
+          <th>字段标识</th>
+          <th>算法类型</th>
+          <th>安全密级</th>
+          <th>豁免角色</th>
+          <th>状态</th>
+        </tr>
+      </thead>
+      <tbody>
+        {#each policies as p (p.id)}
+          <tr class:lite-tr-disabled={!p.enabled}>
+            <td class="lite-td-field font-mono">{p.fieldName}</td>
+            <td>{p.ruleType}</td>
+            <td>
+              <span
+                class="lite-level-badge"
+                class:lite-lvl-high={p.level.includes('L4')}
+                class:lite-lvl-warn={p.level.includes('L3')}
+              >
+                {p.level}
+              </span>
+            </td>
+            <td><span class="lite-role-badge">{p.exemptRole}</span></td>
+            <td>
+              <span class="lite-status-badge" class:lite-st-on={p.enabled}>
+                {p.enabled ? '已启用' : '已停用'}
+              </span>
+            </td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  </div>
+</div>
+
+<style>
+  .lite-mask-policy {
+    border: 1px solid #e5e6eb;
+    border-radius: 6px;
+    background: #ffffff;
+    font-size: 12px;
+    overflow: hidden;
+  }
+  .lite-mask-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 14px;
+    background: #f7f8fa;
+    border-bottom: 1px solid #e5e6eb;
+  }
+  .lite-mask-title { margin: 0; font-size: 13px; font-weight: 600; color: #1d2129; }
+  .lite-mask-meta { font-size: 11px; color: #86909c; display: block; margin-top: 2px; }
+  .lite-policy-count { font-size: 11px; color: #165dff; font-weight: 600; }
+  .lite-mask-table-wrap { overflow-x: auto; }
+  .lite-mask-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 11px; }
+  .lite-mask-table th {
+    padding: 8px 12px;
+    background: #f2f3f5;
+    border-bottom: 1px solid #e5e6eb;
+    color: #4e5969;
+    font-weight: 600;
+  }
+  .lite-mask-table td {
+    padding: 8px 12px;
+    border-bottom: 1px solid #f2f3f5;
+    color: #1d2129;
+  }
+  .lite-tr-disabled { opacity: 0.6; }
+  .lite-td-field { font-weight: 600; }
+  .font-mono { font-family: monospace; }
+  .lite-level-badge {
+    display: inline-block;
+    padding: 1px 6px;
+    border-radius: 3px;
+    font-size: 10px;
+    font-weight: 600;
+    background: #f2f3f5;
+    color: #4e5969;
+  }
+  .lite-lvl-high { background: #ffece8; color: #f53f3f; }
+  .lite-lvl-warn { background: #fff7e8; color: #ff7d00; }
+  .lite-role-badge { background: #e8f3ff; color: #165dff; padding: 1px 6px; border-radius: 3px; font-size: 10px; }
+  .lite-status-badge { font-size: 10px; color: #86909c; }
+  .lite-st-on { color: #00b42a; font-weight: 600; }
+</style>

package/dist/components/LiteDataMaskPolicyEngine.svelte.d.ts

@@ -0,0 +1,16 @@
+interface PolicyItem {
+    id: string;
+    fieldName: string;
+    ruleType: string;
+    level: string;
+    exemptRole: string;
+    enabled: boolean;
+}
+interface Props {
+    title?: string;
+    policies?: PolicyItem[];
+    class?: string;
+}
+declare const LiteDataMaskPolicyEngine: import("svelte").Component<Props, {}, "">;
+type LiteDataMaskPolicyEngine = ReturnType<typeof LiteDataMaskPolicyEngine>;
+export default LiteDataMaskPolicyEngine;

package/dist/components/LiteDataScreenContainer.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    title?: string;
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    title = 'Data Dashboard',
+    class: className = '',
+    children,
+  }: Props = $props();
+</script>
+
+<div
+  class="lite-datascreen-container {className}"
+  data-svadmin-component="LiteDataScreenContainer"
+>
+  <header class="lite-datascreen-header">
+    <h2 class="lite-datascreen-title">{title}</h2>
+  </header>
+  <main class="lite-datascreen-body">
+    {#if children}{@render children()}{/if}
+  </main>
+</div>
+
+<style>
+  .lite-datascreen-container { background: #0f172a; color: #f8fafc; border-radius: 8px; padding: 24px; min-height: 480px; }
+  .lite-datascreen-header { border-bottom: 1px solid #334155; padding-bottom: 14px; margin-bottom: 20px; }
+  .lite-datascreen-title { font-size: 18px; font-weight: 700; color: #f8fafc; margin: 0; }
+  .lite-datascreen-body { width: 100%; }
+</style>

package/dist/components/LiteDataScreenContainer.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    title?: string;
+    class?: string;
+    children?: Snippet;
+}
+declare const LiteDataScreenContainer: import("svelte").Component<Props, {}, "">;
+type LiteDataScreenContainer = ReturnType<typeof LiteDataScreenContainer>;
+export default LiteDataScreenContainer;

package/dist/components/LiteElectronicSealStamp.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  interface Props {
+    companyName?: string;
+    sealTitle?: string;
+    serialNumber?: string;
+    class?: string;
+  }
+
+  let {
+    companyName = '上海创智多租户研发网络科技有限公司',
+    sealTitle = '电子审批专用章',
+    serialNumber = '3101040098214',
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<div
+  class="lite-seal-stamp {className}"
+  data-svadmin-component="LiteElectronicSealStamp"
+  role="img"
+  aria-label="{companyName} {sealTitle}"
+>
+  <div class="lite-seal-circle">
+    <div class="lite-seal-company">{companyName}</div>
+    <div class="lite-seal-star">★</div>
+    <div class="lite-seal-title">{sealTitle}</div>
+    <div class="lite-seal-serial font-mono">{serialNumber}</div>
+  </div>
+</div>
+
+<style>
+  .lite-seal-stamp {
+    display: inline-block;
+    padding: 8px;
+    transform: rotate(-5deg);
+  }
+  .lite-seal-circle {
+    width: 140px;
+    height: 140px;
+    border: 3px solid #f53f3f;
+    border-radius: 50%;
+    color: #f53f3f;
+    text-align: center;
+    box-sizing: border-box;
+    padding: 8px 6px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .lite-seal-company { font-size: 9px; font-weight: bold; line-height: 1.1; }
+  .lite-seal-star { font-size: 22px; line-height: 1; }
+  .lite-seal-title { font-size: 11px; font-weight: bold; letter-spacing: 1px; }
+  .lite-seal-serial { font-size: 8px; font-family: monospace; letter-spacing: 1px; }
+  .font-mono { font-family: monospace; }
+</style>

package/dist/components/LiteElectronicSealStamp.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    companyName?: string;
+    sealTitle?: string;
+    serialNumber?: string;
+    class?: string;
+}
+declare const LiteElectronicSealStamp: import("svelte").Component<Props, {}, "">;
+type LiteElectronicSealStamp = ReturnType<typeof LiteElectronicSealStamp>;
+export default LiteElectronicSealStamp;

package/dist/components/LiteEnvVariableEditor.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+  interface EnvItem {
+    key: string;
+    value: string;
+    isSecret?: boolean;
+    scope?: string;
+  }
+
+  interface Props {
+    title?: string;
+    environment?: string;
+    variables?: EnvItem[];
+    class?: string;
+  }
+
+  let {
+    title = '环境变量与配置字典',
+    environment = 'production',
+    variables = [
+      { key: 'DATABASE_URL', value: 'postgresql://postgres:******@db.cluster:5432/main', isSecret: true, scope: 'server' },
+      { key: 'REDIS_HOST', value: 'redis-master.internal', isSecret: false, scope: 'all' },
+      { key: 'STORAGE_BUCKET_NAME', value: 'corp-assets-prod', isSecret: false, scope: 'server' },
+      { key: 'OIDC_CLIENT_SECRET', value: 'sec_live_9941a8******', isSecret: true, scope: 'auth' }
+    ],
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<div
+  class="lite-env-editor {className}"
+  data-svadmin-component="LiteEnvVariableEditor"
+  role="region"
+  aria-label="Environment Variable Editor"
+>
+  <header class="lite-env-header">
+    <div>
+      <h4 class="lite-env-title">{title}</h4>
+      <span class="lite-env-env-tag">环境: {environment}</span>
+    </div>
+    <span class="lite-env-count">{variables.length} 项环境变量</span>
+  </header>
+
+  <div class="lite-env-list">
+    {#each variables as v (v.key)}
+      <div class="lite-env-item">
+        <div class="lite-env-key-wrap">
+          <code class="lite-env-key">{v.key}</code>
+          {#if v.isSecret}
+            <span class="lite-env-badge-secret">加密机密</span>
+          {/if}
+          {#if v.scope}
+            <span class="lite-env-badge-scope">{v.scope}</span>
+          {/if}
+        </div>
+        <div class="lite-env-val-wrap">
+          <code class="lite-env-value">{v.isSecret ? '●●●●●●●●●●●●' : v.value}</code>
+        </div>
+      </div>
+    {/each}
+  </div>
+</div>
+
+<style>
+  .lite-env-editor {
+    border: 1px solid #e5e6eb;
+    border-radius: 6px;
+    background: #ffffff;
+    font-size: 12px;
+    overflow: hidden;
+  }
+  .lite-env-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 14px;
+    background: #f7f8fa;
+    border-bottom: 1px solid #e5e6eb;
+  }
+  .lite-env-title { margin: 0; font-size: 13px; font-weight: 600; color: #1d2129; }
+  .lite-env-env-tag { font-size: 11px; color: #165dff; font-weight: 600; display: block; margin-top: 2px; }
+  .lite-env-count { font-size: 11px; color: #86909c; }
+  .lite-env-list { padding: 8px 14px; }
+  .lite-env-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 0;
+    border-bottom: 1px solid #f2f3f5;
+  }
+  .lite-env-item:last-child { border-bottom: none; }
+  .lite-env-key-wrap { display: flex; align-items: center; }
+  .lite-env-key-wrap > * + * { margin-left: 6px; }
+  .lite-env-key { font-weight: 600; color: #1d2129; font-family: monospace; font-size: 11px; }
+  .lite-env-badge-secret {
+    font-size: 10px;
+    padding: 1px 4px;
+    border-radius: 3px;
+    background: #ffece8;
+    color: #f53f3f;
+    font-weight: 500;
+  }
+  .lite-env-badge-scope {
+    font-size: 10px;
+    padding: 1px 4px;
+    border-radius: 3px;
+    background: #f2f3f5;
+    color: #4e5969;
+  }
+  .lite-env-value {
+    color: #4e5969;
+    font-family: monospace;
+    font-size: 11px;
+  }
+</style>

package/dist/components/LiteEnvVariableEditor.svelte.d.ts

@@ -0,0 +1,15 @@
+interface EnvItem {
+    key: string;
+    value: string;
+    isSecret?: boolean;
+    scope?: string;
+}
+interface Props {
+    title?: string;
+    environment?: string;
+    variables?: EnvItem[];
+    class?: string;
+}
+declare const LiteEnvVariableEditor: import("svelte").Component<Props, {}, "">;
+type LiteEnvVariableEditor = ReturnType<typeof LiteEnvVariableEditor>;
+export default LiteEnvVariableEditor;

package/dist/components/LiteFormulaField.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  interface Props {
+    label?: string;
+    formula?: string;
+    value?: number | string | null;
+    prefix?: string;
+    suffix?: string;
+    class?: string;
+  }
+
+  let {
+    label = 'Formula Field',
+    formula = 'a * b',
+    value = 0,
+    prefix = '',
+    suffix = '',
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<div
+  class="lite-formula-field {className}"
+  data-svadmin-component="LiteFormulaField"
+>
+  <div class="lite-formula-header">
+    <span class="lite-formula-label">{label}</span>
+    <span class="lite-formula-badge">f(x): {formula}</span>
+  </div>
+  <div class="lite-formula-box">
+    {#if prefix}<span class="lite-formula-prefix">{prefix}</span>{/if}
+    <span class="lite-formula-val">{value ?? '0.00'}</span>
+    {#if suffix}<span class="lite-formula-suffix">{suffix}</span>{/if}
+  </div>
+</div>
+
+<style>
+  .lite-formula-field { margin-bottom: 12px; font-size: 12px; }
+  .lite-formula-header { display: flex; justify-content: space-between; margin-bottom: 4px; }
+  .lite-formula-label { font-weight: 600; color: #4e5969; }
+  .lite-formula-badge { font-family: monospace; font-size: 11px; background: #e8f3ff; color: #165dff; padding: 1px 6px; border-radius: 4px; }
+  .lite-formula-box { background: #f7f8fa; border: 1px solid #e5e6eb; border-radius: 4px; padding: 6px 10px; font-family: monospace; font-weight: 600; color: #1d2129; }
+  .lite-formula-prefix { margin-right: 4px; color: #86909c; }
+  .lite-formula-suffix { margin-left: 4px; color: #86909c; }
+</style>

package/dist/components/LiteFormulaField.svelte.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    label?: string;
+    formula?: string;
+    value?: number | string | null;
+    prefix?: string;
+    suffix?: string;
+    class?: string;
+}
+declare const LiteFormulaField: import("svelte").Component<Props, {}, "">;
+type LiteFormulaField = ReturnType<typeof LiteFormulaField>;
+export default LiteFormulaField;

package/dist/components/LiteGeoScatterMap.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+  interface RegionItem {
+    id: string;
+    name: string;
+    value: number;
+    status?: 'normal' | 'warning' | 'critical' | 'highlight';
+    subtext?: string;
+  }
+
+  interface Props {
+    title?: string;
+    metricLabel?: string;
+    regions?: RegionItem[];
+    class?: string;
+  }
+
+  let {
+    title = '业务地域空间分布与负载排行',
+    metricLabel = '并发连接数',
+    regions = [
+      { id: 'east', name: '华东大区 (上海/江浙)', value: 4820, status: 'highlight', subtext: '含5个超级算力中心' },
+      { id: 'north', name: '华北大区 (京津冀)', value: 4120, status: 'normal', subtext: '主核心控制节点' },
+      { id: 'south', name: '华南大区 (广深/港澳)', value: 3650, status: 'normal', subtext: '跨境核心中继集群' },
+      { id: 'southwest', name: '西南大区 (成渝/云贵)', value: 3100, status: 'warning', subtext: '水冷水电高能效算力' },
+      { id: 'central', name: '华中大区 (两湖/河南)', value: 2450, status: 'normal', subtext: '灾备冷备存储仓' }
+    ],
+    class: className = '',
+  }: Props = $props();
+
+  const maxVal = $derived(Math.max(...regions.map(r => r.value), 1));
+</script>
+
+<div
+  class="lite-geo-map {className}"
+  data-svadmin-component="LiteGeoScatterMap"
+  role="region"
+  aria-label="Geo Distribution Map"
+>
+  <header class="lite-geo-header">
+    <div>
+      <h4 class="lite-geo-title">{title}</h4>
+      <span class="lite-geo-metric">指标基准: {metricLabel}</span>
+    </div>
+  </header>
+
+  <div class="lite-geo-body">
+    <div class="lite-geo-list">
+      {#each regions as r, idx (r.id)}
+        {@const pct = Math.round((r.value / maxVal) * 100)}
+        <div class="lite-geo-item">
+          <div class="lite-item-top">
+            <div class="lite-item-left">
+              <span class="lite-rank-num" class:lite-rank-top={idx === 0}>{idx + 1}</span>
+              <span class="lite-region-name">{r.name}</span>
+            </div>
+            <span class="lite-region-val font-mono">{r.value.toLocaleString()}</span>
+          </div>
+          <div class="lite-track">
+            <div
+              class="lite-bar"
+              class:lite-bar-warn={r.status === 'warning'}
+              class:lite-bar-danger={r.status === 'critical'}
+              style="width: {pct}%;"
+            ></div>
+          </div>
+          {#if r.subtext}
+            <div class="lite-item-sub">{r.subtext}</div>
+          {/if}
+        </div>
+      {/each}
+    </div>
+  </div>
+</div>
+
+<style>
+  .lite-geo-map {
+    border: 1px solid #e5e6eb;
+    border-radius: 6px;
+    background: #ffffff;
+    font-size: 12px;
+    overflow: hidden;
+  }
+  .lite-geo-header {
+    padding: 10px 14px;
+    background: #f7f8fa;
+    border-bottom: 1px solid #e5e6eb;
+  }
+  .lite-geo-title { margin: 0; font-size: 13px; font-weight: 600; color: #1d2129; }
+  .lite-geo-metric { font-size: 11px; color: #86909c; display: block; margin-top: 2px; }
+  .lite-geo-body { padding: 12px 14px; }
+  .lite-geo-item { margin-bottom: 12px; }
+  .lite-geo-item:last-child { margin-bottom: 0; }
+  .lite-item-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
+  .lite-item-left { display: flex; align-items: center; }
+  .lite-item-left > * + * { margin-left: 8px; }
+  .lite-rank-num {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    line-height: 16px;
+    text-align: center;
+    border-radius: 3px;
+    background: #f2f3f5;
+    color: #4e5969;
+    font-size: 10px;
+    font-weight: 700;
+  }
+  .lite-rank-top { background: #165dff; color: #ffffff; }
+  .lite-region-name { font-weight: 600; color: #1d2129; font-size: 12px; }
+  .lite-region-val { font-size: 12px; font-weight: 700; color: #165dff; }
+  .font-mono { font-family: monospace; }
+  .lite-track { height: 6px; background: #f2f3f5; border-radius: 3px; overflow: hidden; }
+  .lite-bar { height: 100%; background: #165dff; border-radius: 3px; }
+  .lite-bar-warn { background: #ff7d00; }
+  .lite-bar-danger { background: #f53f3f; }
+  .lite-item-sub { font-size: 11px; color: #86909c; margin-top: 3px; }
+</style>

package/dist/components/LiteGeoScatterMap.svelte.d.ts

@@ -0,0 +1,16 @@
+interface RegionItem {
+    id: string;
+    name: string;
+    value: number;
+    status?: 'normal' | 'warning' | 'critical' | 'highlight';
+    subtext?: string;
+}
+interface Props {
+    title?: string;
+    metricLabel?: string;
+    regions?: RegionItem[];
+    class?: string;
+}
+declare const LiteGeoScatterMap: import("svelte").Component<Props, {}, "">;
+type LiteGeoScatterMap = ReturnType<typeof LiteGeoScatterMap>;
+export default LiteGeoScatterMap;

package/dist/components/LiteHmacSignatureCalculator.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+  interface Props {
+    secret?: string;
+    payload?: string;
+    algorithm?: string;
+    signature?: string;
+    class?: string;
+  }
+
+  let {
+    secret = 'whsec_sample_secret',
+    payload = '{"test":true}',
+    algorithm = 'SHA-256',
+    signature = '7b5a8e0f9c2d1b4a6e8f3c5d7a9b0e2f4a6c8e0d2b4f6a8c0e2d4f6a8c0e2d4f',
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<div
+  class="lite-hmac-calculator {className}"
+  data-svadmin-component="LiteHmacSignatureCalculator"
+  role="region"
+  aria-label="HMAC Signature Calculator"
+>
+  <header class="lite-hmac-header">
+    <span class="lite-hmac-title">HMAC 签名现场计算器 (SSR)</span>
+    <span class="lite-hmac-algo">HMAC-{algorithm}</span>
+  </header>
+
+  <div class="lite-hmac-body">
+    <div class="lite-hmac-row">
+      <span class="lite-hmac-label">密钥:</span>
+      <code class="lite-hmac-val">{secret}</code>
+    </div>
+
+    <div class="lite-hmac-row">
+      <span class="lite-hmac-label">待签载荷:</span>
+      <code class="lite-hmac-val">{payload}</code>
+    </div>
+
+    <div class="lite-hmac-result">
+      <span class="lite-hmac-label">签名结果 (Hex):</span>
+      <div class="lite-hmac-sig">{signature}</div>
+    </div>
+  </div>
+</div>
+
+<style>
+  .lite-hmac-calculator {
+    border: 1px solid #e5e6eb;
+    border-radius: 6px;
+    background: #ffffff;
+    font-size: 12px;
+    overflow: hidden;
+  }
+  .lite-hmac-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 12px;
+    background: #f7f8fa;
+    border-bottom: 1px solid #e5e6eb;
+  }
+  .lite-hmac-title { font-weight: 600; color: #1d2129; }
+  .lite-hmac-algo { font-size: 10px; font-family: monospace; background: #e8f3ff; color: #165dff; padding: 1px 6px; border-radius: 3px; }
+  .lite-hmac-body { padding: 12px; }
+  .lite-hmac-row { display: flex; margin-bottom: 8px; font-family: monospace; }
+  .lite-hmac-row > * + * { margin-left: 8px; }
+  .lite-hmac-label { color: #86909c; min-width: 60px; font-family: sans-serif; }
+  .lite-hmac-val { color: #1d2129; word-break: break-all; }
+  .lite-hmac-result { margin-top: 8px; }
+  .lite-hmac-sig {
+    margin-top: 4px;
+    padding: 8px;
+    background: #f7f8fa;
+    border: 1px solid #e5e6eb;
+    border-radius: 4px;
+    font-family: monospace;
+    font-weight: 700;
+    color: #165dff;
+    word-break: break-all;
+    font-size: 11px;
+  }
+</style>