feat(auth): replace browser Basic Auth popup with custom Shadcn SSO AuthGateModal and .hl-input system

stacks/portal/web/src/App.tsx

@@ -1,10 +1,11 @@
-import React, { useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { usePortalStore } from './store/usePortalStore';
 import { TopRibbon } from './components/TopRibbon';
 import { ServiceCard } from './components/ServiceCard';
 import { SshShelf } from './components/SshShelf';
 import { CommandPalette } from './components/CommandPalette';
 import { AgyTerminalModal } from './components/AgyTerminalModal';
+import { AuthGateCard } from './components/AuthGateModal';
 import { StorybookWorkbench } from './components/StorybookWorkbench';
 import { LAYOUT_PRESETS } from './design-system/tokens';
 import type { ServiceGroup } from './types/telemetry';
@@ -21,6 +22,12 @@ export const App: React.FC = () => {
     routeMode,
   } = usePortalStore();
 
+  const [authRedirect, setAuthRedirect] = useState<string | null>(() => {
+    if (typeof window === 'undefined') return null;
+    const params = new URLSearchParams(window.location.search);
+    return params.get('auth_redirect');
+  });
+
   useEffect(() => {
     fetchTelemetry();
     const timer = setInterval(fetchTelemetry, 3000);
@@ -45,7 +52,8 @@ export const App: React.FC = () => {
     return '443 免端口 HTTPS 直达 (*.961504.xyz)';
   }, [getEffectiveMode, routeMode]);
 
-  const gridClass = LAYOUT_PRESETS[layoutPreset]?.gridClass || LAYOUT_PRESETS['homepage-3col'].gridClass;
+  const gridClass =
+    LAYOUT_PRESETS[layoutPreset]?.gridClass || LAYOUT_PRESETS['homepage-3col'].gridClass;
 
   const serviceGroups = useMemo<ServiceGroup[]>(() => {
     const t = telemetry;
@@ -235,6 +243,22 @@ export const App: React.FC = () => {
 
       {/* 5. Embedded AGY Cloud Terminal Modal */}
       <AgyTerminalModal />
+
+      {/* 6. Custom SSO Auth Gate Modal (Replaces Browser Native Basic Auth Popup!) */}
+      {authRedirect && (
+        <div className="fixed inset-0 z-50 bg-black/75 backdrop-blur-sm flex items-center justify-center p-4">
+          <AuthGateCard
+            targetUrl={authRedirect}
+            onSuccess={() => {
+              window.location.href = authRedirect;
+            }}
+            onCancel={() => {
+              setAuthRedirect(null);
+              window.history.replaceState({}, '', '/');
+            }}
+          />
+        </div>
+      )}
     </div>
   );
 };

stacks/portal/web/src/components/AgyTerminalModal.tsx

@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { usePortalStore } from '../store/usePortalStore';
+import { AuthGateCard } from './AuthGateModal';
 
 export const AgyTerminalModal: React.FC = () => {
   const { showAgyModal, setShowAgyModal, getEffectiveMode } = usePortalStore();
-
+  const [authChecked, setAuthChecked] = useState(false);
-  if (!showAgyModal) return null;
+  const [authenticated, setAuthenticated] = useState(false);
 
   const mode = getEffectiveMode();
   const url =
@@ -14,6 +15,28 @@ export const AgyTerminalModal: React.FC = () => {
       ? 'https://agy.home.961504.xyz:10443'
       : 'https://agy.961504.xyz';
 
+  useEffect(() => {
+    if (!showAgyModal) return;
+    if (mode === 'lan') {
+      setAuthenticated(true);
+      setAuthChecked(true);
+      return;
+    }
+    setAuthChecked(false);
+    fetch('/api/auth/status', { credentials: 'include' })
+      .then((r) => r.json())
+      .then((d) => {
+        setAuthenticated(Boolean(d.authenticated));
+        setAuthChecked(true);
+      })
+      .catch(() => {
+        setAuthenticated(false);
+        setAuthChecked(true);
+      });
+  }, [showAgyModal, mode]);
+
+  if (!showAgyModal) return null;
+
   return (
     <div className="fixed inset-0 z-50 bg-black/75 backdrop-blur-sm flex items-center justify-center p-3 sm:p-6">
       <div className="w-full h-full max-w-6xl hl-card flex flex-col overflow-hidden shadow-2xl">
@@ -45,7 +68,22 @@ export const AgyTerminalModal: React.FC = () => {
             </button>
           </div>
         </div>
+
+        {!authChecked ? (
+          <div className="flex-1 flex items-center justify-center text-xs font-mono-num" style={{ color: 'var(--text-muted)' }}>
+            正在校验 HomeLab SSO 通行证...
+          </div>
+        ) : !authenticated ? (
+          <div className="flex-1 flex items-center justify-center p-4" style={{ backgroundColor: 'var(--bg-page)' }}>
+            <AuthGateCard
+              targetUrl={url}
+              onSuccess={() => setAuthenticated(true)}
+              onCancel={() => setShowAgyModal(false)}
+            />
+          </div>
+        ) : (
           <iframe src={url} title="AGY Cloud Workbench" className="w-full flex-1 bg-black border-0" />
+        )}
       </div>
     </div>
   );

stacks/portal/web/src/components/AuthGateModal.tsx

@@ -0,0 +1,200 @@
+import React, { useState } from 'react';
+import { Check, Eye, EyeOff, Lock, ShieldCheck, Terminal, User } from 'lucide-react';
+
+interface AuthGateCardProps {
+  targetUrl?: string;
+  onSuccess?: () => void;
+  onCancel?: () => void;
+  embedded?: boolean;
+}
+
+export const AuthGateCard: React.FC<AuthGateCardProps> = ({
+  targetUrl = 'https://agy.961504.xyz',
+  onSuccess,
+  onCancel,
+  embedded = false,
+}) => {
+  const [username, setUsername] = useState('ixvii0iv');
+  const [password, setPassword] = useState('');
+  const [showPass, setShowPass] = useState(false);
+  const [rememberMe, setRememberMe] = useState(true);
+  const [loading, setLoading] = useState(false);
+  const [errorMsg, setErrorMsg] = useState<string | null>(null);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!username.trim() || !password) {
+      setErrorMsg('请输入用户名与访问密钥');
+      return;
+    }
+    setLoading(true);
+    setErrorMsg(null);
+    try {
+      const res = await fetch('/api/auth/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({ username: username.trim(), password, remember: rememberMe }),
+      });
+      const data = await res.json();
+      if (res.ok && data.ok) {
+        onSuccess?.();
+      } else {
+        setErrorMsg(data.message || '认证未通过，请检查密码');
+      }
+    } catch {
+      setErrorMsg('网络请求异常，请稍后重试');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div
+      className={`w-full max-w-md hl-card p-6 space-y-5 ${
+        embedded ? '' : 'shadow-2xl'
+      }`}
+    >
+      {/* Header */}
+      <div className="flex items-start justify-between gap-3 border-b hl-border pb-4">
+        <div className="flex items-center gap-3">
+          <div
+            className="w-10 h-10 rounded-xl flex items-center justify-center border hl-border shrink-0"
+            style={{ backgroundColor: 'var(--accent-soft)', color: 'var(--accent)' }}
+          >
+            <ShieldCheck className="w-5 h-5" />
+          </div>
+          <div>
+            <div className="flex items-center gap-2">
+              <h3 className="text-sm font-bold tracking-tight">HomeLab 统一安全通行证</h3>
+              <span
+                className="text-[10px] font-mono-num px-1.5 py-0.5 rounded font-semibold"
+                style={{ backgroundColor: 'var(--success-soft)', color: 'var(--success)' }}
+              >
+                SSO 2.0
+              </span>
+            </div>
+            <p className="text-xs font-mono-num mt-0.5 truncate max-w-[260px]" style={{ color: 'var(--text-muted)' }}>
+              {targetUrl}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Form */}
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div className="space-y-1.5">
+          <label className="block text-xs font-semibold" style={{ color: 'var(--text-muted)' }}>
+            管理员账号 (Username)
+          </label>
+          <div className="hl-input-group">
+            <User className="w-4 h-4 shrink-0" style={{ color: 'var(--text-subtle)' }} />
+            <input
+              type="text"
+              autoComplete="username"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              placeholder="输入管理员账号 (如 ixvii0iv)"
+              className="font-mono-num"
+            />
+          </div>
+        </div>
+
+        <div className="space-y-1.5">
+          <div className="flex items-center justify-between">
+            <label className="block text-xs font-semibold" style={{ color: 'var(--text-muted)' }}>
+              访问通行密钥 (Access Key)
+            </label>
+            <span className="text-[10px] font-mono-num" style={{ color: 'var(--text-subtle)' }}>
+              与 Mac mini 密码一致
+            </span>
+          </div>
+          <div className="hl-input-group">
+            <Lock className="w-4 h-4 shrink-0" style={{ color: 'var(--text-subtle)' }} />
+            <input
+              type={showPass ? 'text' : 'password'}
+              autoComplete="current-password"
+              autoFocus
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="输入访问密钥..."
+              className="font-mono-num"
+            />
+            <button
+              type="button"
+              onClick={() => setShowPass(!showPass)}
+              className="p-1 rounded hover:opacity-80 cursor-pointer"
+              style={{ color: 'var(--text-muted)' }}
+              title={showPass ? '隐藏密码' : '显示密码'}
+            >
+              {showPass ? <EyeOff className="w-3.5 h-3.5" /> : <Eye className="w-3.5 h-3.5" />}
+            </button>
+          </div>
+        </div>
+
+        {/* Custom Checkbox */}
+        <div className="flex items-center justify-between pt-0.5">
+          <button
+            type="button"
+            onClick={() => setRememberMe(!rememberMe)}
+            className="flex items-center gap-2 text-xs cursor-pointer select-none"
+            style={{ color: 'var(--text-muted)' }}
+          >
+            <span
+              className="w-4 h-4 rounded flex items-center justify-center border transition-colors"
+              style={
+                rememberMe
+                  ? {
+                      backgroundColor: 'var(--accent)',
+                      borderColor: 'var(--accent)',
+                      color: '#ffffff',
+                    }
+                  : {
+                      backgroundColor: 'var(--bg-muted)',
+                      borderColor: 'var(--border-color)',
+                    }
+              }
+            >
+              {rememberMe && <Check className="w-3 h-3" />}
+            </span>
+            <span>在此设备保持 30 天免密通行 (*.961504.xyz)</span>
+          </button>
+        </div>
+
+        {errorMsg && (
+          <div
+            className="px-3 py-2 rounded-lg text-xs font-medium border"
+            style={{
+              backgroundColor: 'rgba(239, 68, 68, 0.1)',
+              borderColor: 'rgba(239, 68, 68, 0.3)',
+              color: '#ef4444',
+            }}
+          >
+            {errorMsg}
+          </div>
+        )}
+
+        {/* Actions */}
+        <div className="flex items-center justify-end gap-2.5 pt-2">
+          {onCancel && (
+            <button
+              type="button"
+              onClick={onCancel}
+              className="hl-btn-outline px-4 py-2 text-xs font-medium cursor-pointer"
+            >
+              取消
+            </button>
+          )}
+          <button
+            type="submit"
+            disabled={loading}
+            className="hl-btn-primary px-5 py-2 text-xs font-semibold flex items-center gap-2 cursor-pointer"
+          >
+            <Terminal className="w-3.5 h-3.5" />
+            <span>{loading ? '正在验证签名...' : '解锁并进入工作台'}</span>
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+};

stacks/portal/web/src/components/StorybookWorkbench.tsx

@@ -1,14 +1,30 @@
 import React, { useState } from 'react';
-import { BookOpen, Check, Layers, Layout, Palette, Sparkles, Terminal } from 'lucide-react';
+import {
+  BookOpen,
+  Check,
+  KeyRound,
+  Layers,
+  Layout,
+  Palette,
+  Search,
+  Sparkles,
+  Terminal,
+} from 'lucide-react';
 import { LAYOUT_PRESETS, THEME_PALETTES, type LayoutPresetId } from '../design-system/tokens';
 import { usePortalStore } from '../store/usePortalStore';
+import { AuthGateCard } from './AuthGateModal';
 import { ServiceCard } from './ServiceCard';
 import { SshShelf } from './SshShelf';
 
-type StoryId = 'layout-architecture' | 'theme-tokens' | 'service-card' | 'ssh-shelf';
+type StoryId =
+  | 'layout-architecture'
+  | 'theme-tokens'
+  | 'form-inputs'
+  | 'service-card'
+  | 'ssh-shelf';
 
 export const StorybookWorkbench: React.FC = () => {
-  const [activeStory, setActiveStory] = useState<StoryId>('layout-architecture');
+  const [activeStory, setActiveStory] = useState<StoryId>('form-inputs');
   const {
     theme,
     resolvedTheme,
@@ -17,12 +33,17 @@ export const StorybookWorkbench: React.FC = () => {
     setLayoutPreset,
     setViewMode,
     telemetry,
+    showToast,
   } = usePortalStore();
 
   // Interactive Playground Props for ServiceCard story
   const [demoOnline, setDemoOnline] = useState(true);
   const [demoAction, setDemoAction] = useState<'drawer' | 'backup' | undefined>('drawer');
 
+  // Interactive Playground Props for Form Inputs story
+  const [demoSearch, setDemoSearch] = useState('');
+  const [demoHost, setDemoHost] = useState('192.168.31.164');
+
   const stories: Array<{ id: StoryId; group: string; title: string; icon: React.ReactNode }> = [
     {
       id: 'layout-architecture',
@@ -36,16 +57,22 @@ export const StorybookWorkbench: React.FC = () => {
       title: '02. 双主题色板与自动切换规范',
       icon: <Palette className="w-3.5 h-3.5" />,
     },
+    {
+      id: 'form-inputs',
+      group: 'COMPONENTS / 核心组件',
+      title: '03. Input & AuthGate 输入框与登录弹窗',
+      icon: <KeyRound className="w-3.5 h-3.5" />,
+    },
     {
       id: 'service-card',
       group: 'COMPONENTS / 核心组件',
-      title: '03. ServiceCard 内联遥测卡片',
+      title: '04. ServiceCard 内联遥测卡片',
       icon: <Layers className="w-3.5 h-3.5" />,
     },
     {
       id: 'ssh-shelf',
       group: 'COMPONENTS / 核心组件',
-      title: '04. SshShelf 快捷指令栏',
+      title: '05. SshShelf 快捷指令栏',
       icon: <Terminal className="w-3.5 h-3.5" />,
     },
   ];
@@ -60,7 +87,7 @@ export const StorybookWorkbench: React.FC = () => {
               <BookOpen className="w-4 h-4" style={{ color: 'var(--accent)' }} />
               <span className="text-xs font-bold uppercase tracking-wider">Storybook 组件库</span>
             </div>
-            <span className="text-[10px] font-mono-num px-1.5 py-0.5 rounded hl-muted">v3.1</span>
+            <span className="text-[10px] font-mono-num px-1.5 py-0.5 rounded hl-muted">v3.2</span>
           </div>
 
           <div className="space-y-1">
@@ -295,7 +322,93 @@ export const StorybookWorkbench: React.FC = () => {
             </div>
           )}
 
-          {/* STORY 3: ServiceCard Interactive Playground */}
+          {/* STORY 3: Custom Form Inputs & AuthGate Card */}
+          {activeStory === 'form-inputs' && (
+            <div className="hl-card p-6 space-y-6">
+              <div className="border-b hl-border pb-4 flex items-center justify-between">
+                <div>
+                  <span
+                    className="text-[11px] font-mono-num uppercase tracking-wider"
+                    style={{ color: 'var(--accent)' }}
+                  >
+                    Components / Form Controls & SSO Auth Gate
+                  </span>
+                  <h2 className="text-lg font-bold mt-0.5">
+                    统一自定义输入框 (`.hl-input`) 与 SSO 认证卡片（彻底禁用浏览器原生弹窗）
+                  </h2>
+                </div>
+                <KeyRound className="w-4 h-4" style={{ color: 'var(--accent)' }} />
+              </div>
+
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 items-start">
+                {/* Left: Input Primitives Showcase */}
+                <div className="p-5 rounded-xl hl-muted border hl-border space-y-4">
+                  <div className="text-xs font-bold uppercase tracking-wider" style={{ color: 'var(--text-muted)' }}>
+                    1. 基础表单输入组件规范 (`.hl-input` / `.hl-input-group`)
+                  </div>
+
+                  <div className="space-y-1.5">
+                    <label className="block text-xs font-medium" style={{ color: 'var(--text-muted)' }}>
+                      带前缀图标与快捷键提示的搜索框
+                    </label>
+                    <div className="hl-input-group">
+                      <Search className="w-4 h-4 shrink-0" style={{ color: 'var(--text-subtle)' }} />
+                      <input
+                        type="text"
+                        value={demoSearch}
+                        onChange={(e) => setDemoSearch(e.target.value)}
+                        placeholder="搜索服务、SSH 指令或节点..."
+                      />
+                      <kbd
+                        className="px-1.5 py-0.5 text-[10px] font-mono-num rounded hl-card border hl-border"
+                        style={{ color: 'var(--text-muted)' }}
+                      >
+                        ⌘K
+                      </kbd>
+                    </div>
+                  </div>
+
+                  <div className="space-y-1.5">
+                    <label className="block text-xs font-medium" style={{ color: 'var(--text-muted)' }}>
+                      等宽字体 IP / 域名输入框 (`.hl-input .font-mono-num`)
+                    </label>
+                    <input
+                      type="text"
+                      value={demoHost}
+                      onChange={(e) => setDemoHost(e.target.value)}
+                      className="hl-input font-mono-num"
+                      placeholder="192.168.31.164"
+                    />
+                  </div>
+
+                  <div className="p-3 rounded-lg hl-card text-[11px] leading-relaxed space-y-1" style={{ color: 'var(--text-muted)' }}>
+                    <div className="font-semibold" style={{ color: 'var(--text-main)' }}>
+                      为什么不再出现浏览器默认输入框和弹窗？
+                    </div>
+                    <p>
+                      1. 全局 CSS 已设置 <code>appearance: none</code> 与自定义聚焦光环{' '}
+                      <code>box-shadow: 0 0 0 3px var(--accent-soft)</code>，并覆盖了 Chrome 自动填充的黄色背景。
+                    </p>
+                    <p>
+                      2. Caddy 网关已移除 <code>basicauth</code>，改用 <code>forward_auth</code> 对接右侧的{' '}
+                      <strong>HomeLab SSO 2.0 统一认证卡片</strong>，一次登录全域名 30 天免密通行。
+                    </p>
+                  </div>
+                </div>
+
+                {/* Right: Live AuthGateCard Preview */}
+                <div className="flex flex-col items-center">
+                  <AuthGateCard
+                    embedded
+                    targetUrl="https://agy.961504.xyz"
+                    onSuccess={() => showToast('SSO 认证成功！已签发 30 天全域名通行 Cookie')}
+                  />
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* STORY 4: ServiceCard Interactive Playground */}
           {activeStory === 'service-card' && (
             <div className="hl-card p-6 space-y-6">
               <div className="border-b hl-border pb-4 flex items-center justify-between">
@@ -366,7 +479,7 @@ export const StorybookWorkbench: React.FC = () => {
             </div>
           )}
 
-          {/* STORY 4: SshShelf */}
+          {/* STORY 5: SshShelf */}
           {activeStory === 'ssh-shelf' && (
             <div className="hl-card p-6 space-y-6">
               <div className="border-b hl-border pb-4">

stacks/portal/web/src/index.css

@@ -2,11 +2,11 @@
 
 /* =========================================================================
    HomeLab Console V3 (React + Vite + TypeScript + Zustand + Tailwind v4)
-   Architecture: gethomepage.dev (Top Ribbon + 3-Col Rows + Inline Widgets)
+   Architecture: gethomepage.dev (Two-Tier AppShell + 3-Col Rows + Inline Widgets)
-   Design System: shadcn/ui + Raycast Command Palette + 4 Official Themes
+   Design System: shadcn/ui + Catppuccin/Linear + Custom Form Controls & Auth Gate
    ========================================================================= */
 :root,
-[data-theme="zinc-dark"] {
+[data-theme="dark"] {
   --bg-page: #09090b;
   --bg-card: #121215;
   --bg-widget: #16161a;
@@ -21,13 +21,13 @@
   --primary: #fafafa;
   --primary-fg: #09090b;
   --accent: #3b82f6;
-  --accent-soft: rgba(59, 130, 246, 0.14);
+  --accent-soft: rgba(59, 130, 246, 0.16);
   --success: #10b981;
   --success-soft: rgba(16, 185, 129, 0.14);
-  --card-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.5);
+  --card-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.55);
 }
 
-[data-theme="zinc-light"] {
+[data-theme="light"] {
   --bg-page: #f8fafc;
   --bg-card: #ffffff;
   --bg-widget: #f8fafc;
@@ -42,54 +42,12 @@
   --primary: #0f172a;
   --primary-fg: #ffffff;
   --accent: #2563eb;
-  --accent-soft: rgba(37, 99, 235, 0.08);
+  --accent-soft: rgba(37, 99, 235, 0.12);
   --success: #10b981;
   --success-soft: rgba(16, 185, 129, 0.1);
   --card-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.04), 0 1px 2px -1px rgba(15, 23, 42, 0.03);
 }
 
-[data-theme="catppuccin"] {
-  --bg-page: #11111b;
-  --bg-card: #1e1e2e;
-  --bg-widget: #181825;
-  --bg-muted: #313244;
-  --bg-hover: #242438;
-  --text-main: #cdd6f4;
-  --text-muted: #a6adc8;
-  --text-subtle: #6c7086;
-  --border-color: #313244;
-  --border-subtle: rgba(205, 214, 244, 0.06);
-  --border-hover: #45475a;
-  --primary: #cba6f7;
-  --primary-fg: #11111b;
-  --accent: #89b4fa;
-  --accent-soft: rgba(137, 180, 250, 0.15);
-  --success: #a6e3a1;
-  --success-soft: rgba(166, 227, 161, 0.15);
-  --card-shadow: 0 4px 16px -4px rgba(17, 17, 27, 0.6);
-}
-
-[data-theme="nord"] {
-  --bg-page: #242933;
-  --bg-card: #2e3440;
-  --bg-widget: #292e39;
-  --bg-muted: #3b4252;
-  --bg-hover: #353c4a;
-  --text-main: #eceff4;
-  --text-muted: #d8dee9;
-  --text-subtle: #81a1c1;
-  --border-color: #3b4252;
-  --border-subtle: rgba(236, 239, 244, 0.06);
-  --border-hover: #4c566a;
-  --primary: #88c0d0;
-  --primary-fg: #2e3440;
-  --accent: #88c0d0;
-  --accent-soft: rgba(136, 192, 208, 0.15);
-  --success: #a3be8c;
-  --success-soft: rgba(163, 190, 140, 0.15);
-  --card-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.35);
-}
-
 body {
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
   background-color: var(--bg-page);
@@ -98,6 +56,94 @@ body {
   -webkit-font-smoothing: antialiased;
 }
 
+/* =========================================================================
+   Global Browser Default Input Reset & Custom Input System (.hl-input)
+   彻底禁用浏览器原生丑陋的 input 边框、外发光与黄色自动填充背景
+   ========================================================================= */
+input,
+textarea,
+select,
+button {
+  -webkit-appearance: none;
+  appearance: none;
+  outline: none;
+  font-family: inherit;
+}
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+textarea:-webkit-autofill {
+  -webkit-text-fill-color: var(--text-main) !important;
+  -webkit-box-shadow: 0 0 0px 1000px var(--bg-muted) inset !important;
+  transition: background-color 5000s ease-in-out 0s;
+}
+
+.hl-input {
+  width: 100%;
+  background-color: var(--bg-muted);
+  color: var(--text-main);
+  border: 1px solid var(--border-color);
+  border-radius: 0.625rem;
+  padding: 0.55rem 0.75rem;
+  font-size: 0.8125rem;
+  line-height: 1.25rem;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
+}
+
+.hl-input::placeholder {
+  color: var(--text-subtle);
+}
+
+.hl-input:hover {
+  border-color: var(--border-hover);
+}
+
+.hl-input:focus,
+.hl-input:focus-visible {
+  background-color: var(--bg-card);
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-soft);
+}
+
+.hl-input-group {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  background-color: var(--bg-muted);
+  color: var(--text-main);
+  border: 1px solid var(--border-color);
+  border-radius: 0.625rem;
+  padding: 0 0.75rem;
+  height: 2.375rem;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
+}
+
+.hl-input-group:hover {
+  border-color: var(--border-hover);
+}
+
+.hl-input-group:focus-within {
+  background-color: var(--bg-card);
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-soft);
+}
+
+.hl-input-group input {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  background: transparent;
+  border: 0;
+  color: var(--text-main);
+  font-size: 0.8125rem;
+}
+
+.hl-input-group input::placeholder {
+  color: var(--text-subtle);
+}
+
 .font-mono-num {
   font-family: "JetBrains Mono", "SF Mono", Menlo, monospace;
   font-variant-numeric: tabular-nums;
@@ -141,11 +187,14 @@ body {
   color: var(--primary-fg);
   font-weight: 500;
   border-radius: 0.5rem;
-  transition: opacity 0.15s ease;
+  transition: opacity 0.15s ease, transform 0.1s ease;
 }
 .hl-btn-primary:hover {
   opacity: 0.9;
 }
+.hl-btn-primary:active {
+  transform: scale(0.99);
+}
 
 .hl-btn-outline {
   background-color: var(--bg-card);