@co0ontty/wand 1.21.11 → 1.21.13

package/dist/web-ui/content/styles.css

@@ -2522,6 +2522,14 @@
     .topbar-more-item.topbar-more-item-danger { color: var(--danger); }
     .topbar-more-item.topbar-more-item-danger:hover { background: var(--danger-muted); color: var(--danger-hover); }
     .topbar-more-item.hidden { display: none; }
+    .topbar-more-item[disabled] { opacity: 0.5; cursor: not-allowed; }
+    .topbar-more-item[disabled]:hover { background: transparent; color: var(--text-primary); }
+    .topbar-more-divider {
+      height: 1px;
+      margin: 4px 6px;
+      background: var(--border-default);
+      opacity: 0.6;
+    }
 
     /* 桌面端显示所有按钮 */
     .terminal-scale-toggle { display: flex; }
@@ -9185,6 +9193,258 @@
 
     /* .btn-success defined globally in the button system above */
 
+    /* ── Update Card (richer than the generic notification bubble) ── */
+    .notification-bubble.update-card {
+      width: min(360px, calc(100vw - 24px));
+      max-width: min(360px, calc(100vw - 24px));
+      min-width: 0;
+      padding: 14px 14px 12px;
+      border-radius: var(--radius-md);
+      background:
+        radial-gradient(120% 120% at 0% 0%, var(--accent-muted) 0%, transparent 55%),
+        linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-primary) 100%);
+      border: 1px solid var(--border-strong);
+      box-shadow: var(--shadow-xl), 0 0 0 1px rgba(255,255,255,0.4) inset;
+      overflow: hidden;
+      isolation: isolate;
+    }
+    .update-card-shine {
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      background: linear-gradient(115deg,
+        transparent 0%,
+        rgba(255, 255, 255, 0.18) 45%,
+        rgba(255, 255, 255, 0.32) 50%,
+        rgba(255, 255, 255, 0.18) 55%,
+        transparent 100%);
+      background-size: 220% 100%;
+      background-position: 120% 0;
+      mix-blend-mode: overlay;
+      opacity: 0.65;
+      animation: update-card-shine 6s ease-in-out infinite;
+      z-index: 0;
+    }
+    @keyframes update-card-shine {
+      0%   { background-position: 120% 0; }
+      55%  { background-position: -20% 0; }
+      100% { background-position: -20% 0; }
+    }
+    .update-card.is-success {
+      background:
+        radial-gradient(120% 120% at 0% 0%, var(--success-muted) 0%, transparent 55%),
+        linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-primary) 100%);
+      border-color: var(--success);
+      box-shadow: var(--shadow-xl), 0 0 0 1px rgba(255,255,255,0.4) inset, var(--shadow-glow-success);
+    }
+    .update-card-header {
+      position: relative;
+      z-index: 1;
+      display: flex;
+      align-items: flex-start;
+      gap: 10px;
+    }
+    .update-card-icon {
+      width: 32px;
+      height: 32px;
+      flex-shrink: 0;
+      border-radius: var(--radius-sm);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: white;
+      background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
+      box-shadow: 0 4px 12px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.35);
+    }
+    .update-card.is-success .update-card-icon {
+      background: linear-gradient(135deg, var(--success) 0%, var(--success-hover) 100%);
+      box-shadow: 0 4px 12px var(--success-glow), inset 0 1px 0 rgba(255,255,255,0.35);
+    }
+    .update-card-heading {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+    .update-card-title {
+      font-size: 0.88rem;
+      font-weight: 700;
+      color: var(--text-primary);
+      letter-spacing: 0.01em;
+      line-height: 1.25;
+    }
+    .update-card-subtitle {
+      font-size: 0.72rem;
+      color: var(--text-tertiary);
+      line-height: 1.35;
+    }
+    .update-card-close {
+      flex-shrink: 0;
+      width: 24px;
+      height: 24px;
+      border: none;
+      border-radius: var(--radius-sm);
+      background: transparent;
+      color: var(--text-muted);
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+      transition: background 0.15s, color 0.15s;
+    }
+    .update-card-close:hover {
+      background: var(--bg-tertiary);
+      color: var(--text-primary);
+    }
+
+    .update-card-version {
+      position: relative;
+      z-index: 1;
+      margin: 12px 0 10px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex-wrap: nowrap;
+    }
+    .update-card-version-chip {
+      font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+      font-size: 0.74rem;
+      font-weight: 600;
+      padding: 3px 10px;
+      border-radius: var(--radius-full);
+      border: 1px solid var(--border-subtle);
+      white-space: nowrap;
+    }
+    .update-card-version-current {
+      color: var(--text-tertiary);
+      background: var(--bg-tertiary);
+    }
+    .update-card-version-latest {
+      color: var(--accent);
+      background: var(--accent-muted);
+      border-color: var(--accent);
+      box-shadow: 0 1px 6px var(--accent-glow);
+    }
+    .update-card.is-success .update-card-version-latest {
+      color: var(--success);
+      background: var(--success-muted);
+      border-color: var(--success);
+      box-shadow: 0 1px 6px var(--success-glow);
+    }
+    .update-card-version-arrow {
+      color: var(--text-muted);
+      flex-shrink: 0;
+    }
+
+    .update-card-progress {
+      position: relative;
+      z-index: 1;
+      height: 0;
+      overflow: hidden;
+      margin: 0;
+      transition: height 0.25s ease, margin 0.25s ease;
+    }
+    .update-card-progress.active {
+      height: 6px;
+      margin: 0 0 10px;
+    }
+    .update-card-progress-track {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      background: var(--bg-tertiary);
+      border-radius: var(--radius-full);
+      overflow: hidden;
+    }
+    .update-card-progress-fill {
+      position: absolute;
+      top: 0;
+      left: -40%;
+      width: 40%;
+      height: 100%;
+      border-radius: var(--radius-full);
+      background: linear-gradient(90deg, var(--accent) 0%, var(--accent-hover) 100%);
+      box-shadow: 0 0 10px var(--accent-glow);
+      animation: update-card-progress-sweep 1.4s cubic-bezier(0.65, 0.05, 0.35, 1) infinite;
+    }
+    @keyframes update-card-progress-sweep {
+      0%   { left: -45%; width: 40%; }
+      50%  { left: 25%; width: 55%; }
+      100% { left: 105%; width: 40%; }
+    }
+
+    .update-card-status {
+      position: relative;
+      z-index: 1;
+      font-size: 0.72rem;
+      line-height: 1.4;
+      padding: 6px 10px;
+      border-radius: var(--radius-sm);
+      margin-bottom: 10px;
+      background: var(--bg-tertiary);
+      color: var(--text-secondary);
+      border: 1px solid var(--border-subtle);
+    }
+    .update-card-status.error {
+      background: var(--danger-muted);
+      color: var(--danger);
+      border-color: var(--danger);
+    }
+    .update-card-status.success {
+      background: var(--success-muted);
+      color: var(--success);
+      border-color: var(--success);
+    }
+
+    .update-card-actions {
+      position: relative;
+      z-index: 1;
+      display: flex;
+      justify-content: flex-end;
+      gap: 8px;
+    }
+    .update-card-action {
+      font-size: 0.78rem;
+      font-weight: 600;
+      padding: 7px 16px;
+      border-radius: var(--radius-sm);
+      border: 1px solid transparent;
+      cursor: pointer;
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      transition: transform 0.12s ease, filter 0.15s ease, box-shadow 0.15s ease;
+    }
+    .update-card-action-primary {
+      background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
+      color: white;
+      box-shadow: 0 4px 12px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.25);
+    }
+    .update-card-action-primary:hover:not(:disabled) {
+      filter: brightness(1.05);
+      transform: translateY(-1px);
+      box-shadow: 0 6px 16px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.3);
+    }
+    .update-card-action-primary:active:not(:disabled) {
+      transform: translateY(0);
+      filter: brightness(0.96);
+    }
+    .update-card-action:disabled {
+      opacity: 0.7;
+      cursor: progress;
+      filter: none;
+      transform: none;
+    }
+    .update-card.is-success .update-card-action-primary {
+      background: linear-gradient(135deg, var(--success) 0%, var(--success-hover) 100%);
+      box-shadow: 0 4px 12px var(--success-glow), inset 0 1px 0 rgba(255,255,255,0.25);
+    }
+    .update-card.is-success .update-card-action-primary:hover:not(:disabled) {
+      box-shadow: 0 6px 16px var(--success-glow), inset 0 1px 0 rgba(255,255,255,0.3);
+    }
+
     /* Restart overlay */
     .restart-overlay {
       position: fixed;
@@ -10610,67 +10870,372 @@
       color: var(--accent);
     }
 
-    /* ============================================
-       骨架屏加载效果
-       ============================================ */
-    .skeleton {
-      background: linear-gradient(
-        90deg,
-        var(--bg-tertiary) 25%,
-        rgba(255, 255, 255, 0.5) 50%,
-        var(--bg-tertiary) 75%
-      );
-      background-size: 200% 100%;
-      animation: skeleton-shimmer 1.5s ease-in-out infinite;
+    /* ── File explorer header extras ── */
+    .file-explorer-up,
+    .file-explorer-toggle-hidden {
+      background: none;
+      border: none;
+      cursor: pointer;
+      font-size: 1rem;
+      padding: 4px;
+      width: 28px;
+      height: 28px;
       border-radius: 6px;
+      color: var(--text-muted);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: background var(--transition-fast), color var(--transition-fast);
+      flex-shrink: 0;
     }
-
-    @keyframes skeleton-shimmer {
-      0% { background-position: 200% 0; }
-      100% { background-position: -200% 0; }
+    .file-explorer-up:hover,
+    .file-explorer-toggle-hidden:hover {
+      background: var(--bg-tertiary);
+      color: var(--text-secondary);
     }
-
-    .skeleton-text {
-      height: 14px;
-      margin-bottom: 8px;
-      border-radius: 4px;
+    .file-explorer-toggle-hidden.active {
+      color: var(--accent);
+      background: var(--accent-muted);
     }
-    .skeleton-text:last-child { width: 60%; }
 
-    .skeleton-avatar {
-      width: 28px;
-      height: 28px;
-      border-radius: 50%;
+    /* ── File tree size/meta column ── */
+    .tree-meta {
+      flex-shrink: 0;
+      font-size: 0.6875rem;
+      color: var(--text-muted);
+      font-variant-numeric: tabular-nums;
+      margin-left: 6px;
+      padding-left: 6px;
+      max-width: 70px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      opacity: 0.85;
     }
+    .tree-item:hover .tree-meta { color: var(--text-secondary); }
 
-    .skeleton-btn {
-      height: 32px;
-      width: 80px;
-      border-radius: 16px;
+    /* ── Truncation notice in file tree ── */
+    .tree-truncated {
+      padding: 8px 14px;
+      margin: 4px 6px 8px;
+      font-size: 0.6875rem;
+      color: var(--text-muted);
+      background: var(--bg-secondary);
+      border: 1px dashed var(--border);
+      border-radius: 6px;
+      text-align: center;
     }
 
-    /* ============================================
-       状态变化动画
-       ============================================ */
-    @keyframes fadeInScale {
-      from {
-        opacity: 0;
-        transform: scale(0.95);
-      }
-      to {
-        opacity: 1;
-        transform: scale(1);
-      }
+    /* ── File context menu (right-click / long-press) ── */
+    .file-context-menu {
+      position: fixed;
+      z-index: 1100;
+      min-width: 200px;
+      padding: 4px;
+      background: var(--bg-primary);
+      border: 1px solid var(--border);
+      border-radius: 10px;
+      box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
+      animation: ctx-fade-in 0.12s ease;
     }
-
-    @keyframes slideInFromRight {
-      from {
-        opacity: 0;
-        transform: translateX(20px);
-      }
-      to {
-        opacity: 1;
-        transform: translateX(0);
+    @keyframes ctx-fade-in {
+      from { opacity: 0; transform: translateY(-4px) scale(0.98); }
+      to { opacity: 1; transform: translateY(0) scale(1); }
+    }
+    .file-context-menu-item {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      width: 100%;
+      padding: 8px 12px;
+      border: none;
+      background: transparent;
+      color: var(--text-primary);
+      font-size: 0.8125rem;
+      text-align: left;
+      cursor: pointer;
+      border-radius: 6px;
+      transition: background 0.12s;
+    }
+    .file-context-menu-item:hover { background: var(--bg-tertiary); }
+    .file-context-menu-item .ctx-icon { width: 18px; text-align: center; opacity: 0.85; }
+
+    /* ── Mini toast for in-app feedback ── */
+    .wand-mini-toast {
+      position: fixed;
+      bottom: 30px;
+      left: 50%;
+      transform: translate(-50%, 14px);
+      z-index: 1200;
+      padding: 8px 16px;
+      background: rgba(20, 20, 20, 0.92);
+      color: #fff;
+      font-size: 0.8125rem;
+      border-radius: 999px;
+      opacity: 0;
+      transition: opacity 0.18s ease, transform 0.18s ease;
+      pointer-events: none;
+    }
+    .wand-mini-toast.show { opacity: 1; transform: translate(-50%, 0); }
+
+    /* ── Preview toolbar ── */
+    .file-preview-toolbar {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      flex-shrink: 0;
+      margin-left: 8px;
+    }
+    .file-preview-toolbar-btn {
+      background: none;
+      border: 1px solid transparent;
+      cursor: pointer;
+      padding: 4px 8px;
+      min-width: 32px;
+      height: 28px;
+      border-radius: 6px;
+      color: var(--text-muted);
+      font-size: 0.75rem;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      transition: background 0.15s, color 0.15s, border-color 0.15s;
+    }
+    .file-preview-toolbar-btn:hover {
+      background: var(--bg-tertiary);
+      color: var(--text-primary);
+      border-color: var(--border);
+    }
+    .file-preview-toolbar-btn.toolbar-active {
+      background: var(--accent-muted);
+      color: var(--accent);
+      border-color: var(--accent);
+    }
+
+    /* ── Code preview wrap mode ── */
+    .code-preview-content pre.wrap {
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+
+    /* ── Image preview ── */
+    .file-preview-body.kind-image {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background:
+        linear-gradient(45deg, rgba(0,0,0,0.04) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.04) 75%),
+        linear-gradient(45deg, rgba(0,0,0,0.04) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.04) 75%),
+        var(--bg-primary);
+      background-size: 16px 16px;
+      background-position: 0 0, 8px 8px;
+    }
+    .image-preview-wrapper {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: auto;
+      padding: 16px;
+    }
+    .image-preview-img {
+      max-width: 100%;
+      max-height: 100%;
+      object-fit: contain;
+      cursor: zoom-in;
+      transition: transform 0.2s ease;
+      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
+      border-radius: 4px;
+      background: #fff;
+    }
+    .image-preview-img.zoomed {
+      max-width: none;
+      max-height: none;
+      cursor: zoom-out;
+      transform: scale(1);
+    }
+
+    /* ── PDF preview ── */
+    .file-preview-body.kind-pdf {
+      padding: 0;
+      background: var(--bg-secondary);
+    }
+    .pdf-preview-frame {
+      width: 100%;
+      height: 100%;
+      border: none;
+      background: var(--bg-secondary);
+    }
+
+    /* ── Video / audio preview ── */
+    .file-preview-body.kind-video,
+    .file-preview-body.kind-audio {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: #0d0d0d;
+    }
+    .file-preview-body.kind-audio { background: var(--bg-secondary); }
+    .media-preview-wrapper {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 10px;
+      max-width: 100%;
+      max-height: 100%;
+      padding: 24px;
+    }
+    .media-preview-video {
+      max-width: 100%;
+      max-height: calc(100% - 40px);
+      background: #000;
+      border-radius: 4px;
+    }
+    .media-preview-audio { width: min(420px, 90%); }
+    .media-preview-icon { font-size: 3.5rem; opacity: 0.7; }
+    .media-preview-name {
+      font-weight: 600;
+      color: var(--text-primary);
+      font-size: 1rem;
+      max-width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .media-preview-meta {
+      color: var(--text-muted);
+      font-size: 0.75rem;
+      font-variant-numeric: tabular-nums;
+    }
+    .file-preview-body.kind-video .media-preview-meta { color: rgba(255,255,255,0.7); }
+
+    /* ── Binary fallback card ── */
+    .file-preview-body.kind-binary {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .binary-preview-card {
+      max-width: 480px;
+      padding: 32px 28px;
+      text-align: center;
+      background: var(--bg-secondary);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-lg);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 10px;
+    }
+    .binary-preview-icon { font-size: 3rem; opacity: 0.6; }
+    .binary-preview-name {
+      font-weight: 600;
+      color: var(--text-primary);
+      font-size: 1rem;
+      word-break: break-all;
+    }
+    .binary-preview-meta {
+      display: flex;
+      gap: 6px;
+      align-items: center;
+      color: var(--text-muted);
+      font-size: 0.75rem;
+    }
+    .binary-preview-path {
+      font-family: var(--font-mono);
+      font-size: 0.75rem;
+      color: var(--text-muted);
+      max-width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .binary-preview-actions {
+      display: flex;
+      gap: 8px;
+      margin-top: 8px;
+      flex-wrap: wrap;
+      justify-content: center;
+    }
+    .binary-preview-btn {
+      padding: 8px 16px;
+      border-radius: 6px;
+      border: 1px solid var(--border);
+      background: var(--bg-primary);
+      color: var(--text-primary);
+      font-size: 0.8125rem;
+      cursor: pointer;
+      text-decoration: none;
+      transition: background 0.15s, border-color 0.15s, color 0.15s;
+    }
+    .binary-preview-btn:hover {
+      background: var(--accent-muted);
+      border-color: var(--accent);
+      color: var(--accent);
+    }
+
+    /* ============================================
+       骨架屏加载效果
+       ============================================ */
+    .skeleton {
+      background: linear-gradient(
+        90deg,
+        var(--bg-tertiary) 25%,
+        rgba(255, 255, 255, 0.5) 50%,
+        var(--bg-tertiary) 75%
+      );
+      background-size: 200% 100%;
+      animation: skeleton-shimmer 1.5s ease-in-out infinite;
+      border-radius: 6px;
+    }
+
+    @keyframes skeleton-shimmer {
+      0% { background-position: 200% 0; }
+      100% { background-position: -200% 0; }
+    }
+
+    .skeleton-text {
+      height: 14px;
+      margin-bottom: 8px;
+      border-radius: 4px;
+    }
+    .skeleton-text:last-child { width: 60%; }
+
+    .skeleton-avatar {
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+    }
+
+    .skeleton-btn {
+      height: 32px;
+      width: 80px;
+      border-radius: 16px;
+    }
+
+    /* ============================================
+       状态变化动画
+       ============================================ */
+    @keyframes fadeInScale {
+      from {
+        opacity: 0;
+        transform: scale(0.95);
+      }
+      to {
+        opacity: 1;
+        transform: scale(1);
+      }
+    }
+
+    @keyframes slideInFromRight {
+      from {
+        opacity: 0;
+        transform: translateX(20px);
+      }
+      to {
+        opacity: 1;
+        transform: translateX(0);
       }
     }
 
@@ -11676,6 +12241,202 @@
       cursor: pointer;
       display: inline-block;
     }
+    /* Toggle 行右侧附属操作（如「查看」按钮 + 开关同列） */
+    .settings-toggle-aside {
+      flex: 0 0 auto;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+
+    /* ── Env preview modal ── */
+    .env-preview-modal {
+      max-width: 720px;
+    }
+    .env-preview-body {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      padding: 18px 24px 8px;
+      min-height: 0;
+    }
+    .env-preview-toolbar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      flex-wrap: wrap;
+    }
+    .env-preview-meta {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 0.78rem;
+      color: var(--text-secondary);
+    }
+    .env-preview-pill {
+      display: inline-flex;
+      align-items: center;
+      padding: 2px 10px;
+      border-radius: var(--radius-full);
+      font-size: 0.72rem;
+      font-weight: 600;
+      letter-spacing: 0.02em;
+      border: 1px solid var(--border-subtle);
+    }
+    .env-preview-pill.is-inherit {
+      color: var(--accent);
+      background: var(--accent-muted);
+      border-color: var(--accent);
+    }
+    .env-preview-pill.is-minimal {
+      color: var(--success);
+      background: var(--success-muted);
+      border-color: var(--success);
+    }
+    .env-preview-count {
+      font-size: 0.72rem;
+      color: var(--text-muted);
+    }
+    .env-preview-controls {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      flex-wrap: wrap;
+    }
+    .env-preview-search {
+      width: 200px;
+      max-width: 100%;
+      padding: 6px 10px;
+      border-radius: var(--radius-sm);
+      border: 1px solid var(--border);
+      background: var(--bg-elevated);
+      font-size: 0.78rem;
+      color: var(--text-primary);
+    }
+    .env-preview-search:focus {
+      outline: none;
+      border-color: var(--border-focus);
+      box-shadow: 0 0 0 3px var(--accent-glow);
+    }
+    .env-preview-reveal {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 0.74rem;
+      color: var(--text-secondary);
+      cursor: pointer;
+      user-select: none;
+    }
+    .env-preview-reveal input {
+      accent-color: var(--accent);
+      cursor: pointer;
+    }
+    .env-preview-list {
+      max-height: min(56vh, 460px);
+      overflow-y: auto;
+      border-radius: var(--radius-sm);
+      border: 1px solid var(--border-subtle);
+      background: var(--bg-elevated);
+      padding: 4px;
+    }
+    .env-preview-list:focus { outline: none; }
+    .env-preview-row {
+      display: grid;
+      grid-template-columns: minmax(0, 220px) minmax(0, 1fr) auto;
+      gap: 12px;
+      align-items: center;
+      padding: 8px 10px;
+      border-radius: var(--radius-xs);
+      font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+      font-size: 0.74rem;
+      transition: background 0.12s;
+    }
+    .env-preview-row:hover {
+      background: var(--bg-tertiary);
+    }
+    .env-preview-row + .env-preview-row {
+      border-top: 1px dashed var(--border-subtle);
+    }
+    .env-preview-name {
+      color: var(--text-primary);
+      font-weight: 600;
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      flex-wrap: wrap;
+      overflow-wrap: anywhere;
+    }
+    .env-preview-row.is-sensitive .env-preview-name {
+      color: var(--warning);
+    }
+    .env-preview-badge {
+      display: inline-flex;
+      align-items: center;
+      padding: 1px 6px;
+      border-radius: var(--radius-full);
+      font-family: inherit;
+      font-size: 0.62rem;
+      font-weight: 600;
+      letter-spacing: 0.04em;
+      background: var(--warning-muted);
+      color: var(--warning);
+      border: 1px solid var(--warning);
+    }
+    .env-preview-badge-runtime {
+      background: var(--info-muted);
+      color: var(--info);
+      border-color: var(--info);
+    }
+    .env-preview-value {
+      color: var(--text-secondary);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      min-width: 0;
+    }
+    .env-preview-value.is-runtime {
+      font-style: italic;
+      color: var(--text-muted);
+    }
+    .env-preview-len {
+      color: var(--text-muted);
+      font-size: 0.68rem;
+      white-space: nowrap;
+    }
+    .env-preview-loading,
+    .env-preview-empty {
+      padding: 24px 8px;
+      text-align: center;
+      color: var(--text-muted);
+      font-size: 0.78rem;
+    }
+    .env-preview-footer {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      padding: 14px 24px 18px;
+    }
+    .env-preview-hint {
+      font-size: 0.7rem;
+      color: var(--text-muted);
+      flex: 1;
+      min-width: 0;
+    }
+
+    @media (max-width: 640px) {
+      .env-preview-modal { max-width: calc(100vw - 24px); }
+      .env-preview-row {
+        grid-template-columns: 1fr;
+        gap: 4px;
+      }
+      .env-preview-len {
+        justify-self: end;
+      }
+      .env-preview-search { width: 100%; }
+      .env-preview-controls { width: 100%; }
+    }
 
     /* Range 行（音量等） */
     .settings-range-row {