feat(web): 设计规范与 uhd_web 同步(截至 2026-10-08)

- 材质统一边光:slab / float / pill / pill-selected / seg-thumb / chrome-side 改为左上亮右下暗的 1px 边光 + 外侧暗线;新增 lens / field / chip 参数与 pg-float-modal
- 主按钮:转动光谱环改为静态左上光谱高光,悬停沿边扫过一小段;次按钮同为 lens 玻璃
- Input / Textarea / SelectTrigger 挂 .field-glass,原生下拉与实体选择器同步;对话框按钮行 gap-3
- 提示条改 pg-float(状态色只在图标、展开不叠放);新增 GlassTooltip 接管 title 提示
- 触屏判断 input-modality.ts、touch / hover 自定义变体;animate-pg-pop 改 backwards;scroll-fade-end
- 控制台外壳:侧栏无硬分隔线、折叠开关进标志行;顶栏去磨砂,右侧控件收进玻璃胶囊
- 登录页居中单卡 auth-card;详情头图「订阅」改回普通主按钮,删除 pill-solid;发现页海报角标改 glass-chip-media
- 引入 simple-liquid-glass(liquid-surface.tsx);更新 docs/design 三份规范与 CHANGELOG

Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01Cxwgnn2pbzQ7rXv3rq7fei

apps/web/app/routes/login.tsx

@@ -77,10 +77,7 @@ function IconInput({
   return (
     <div className="relative">
       <Icon className="pointer-events-none absolute top-1/2 left-3.5 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-      <Input
-        className={cn("h-12 rounded-lg pl-10 text-control md:text-control", trailing && "pr-11", className)}
-        {...props}
-      />
+      <Input className={cn("h-12 pl-10 text-control md:text-control", trailing && "pr-11", className)} {...props} />
       {trailing ? <div className="absolute top-1/2 right-1.5 -translate-y-1/2">{trailing}</div> : null}
     </div>
   );
@@ -229,14 +226,15 @@ export default function LoginPage() {
         ? useRecovery
           ? "输入一个没用过的恢复码，用过即作废。"
           : "输入身份验证器里的 6 位验证码。"
-        : "使用管理员账号登录，会话 12 小时有效。";
+        : null;
 
   return (
     <div className="relative isolate flex min-h-screen flex-col overflow-x-hidden bg-background">
       <div className="pointer-events-none fixed inset-0 -z-10 bg-page-glow" />
       <PrismLeak className="-z-10" />
 
-      <header className="pg-chrome sticky top-0 z-20 flex h-14 items-center border-b px-4 md:px-6">
+      {/* 顶栏不铺磨砂:页面底上只有标志和日夜切换(单颗按钮不套胶囊) */}
+      <header className="sticky top-0 z-20 flex h-14 items-center bg-gradient-to-b from-background/90 via-background/60 to-transparent px-4 md:px-6">
         <div className="flex items-center gap-2">
           <span className="grid h-7 w-7 place-items-center rounded-lg pill-selected">
             <Clapperboard className="h-4 w-4" />
@@ -248,29 +246,11 @@ export default function LoginPage() {
         </div>
       </header>
 
-      <main className="mx-auto grid w-full max-w-6xl flex-1 items-center gap-10 px-4 py-10 md:px-6 lg:grid-cols-[minmax(0,1fr)_23.5rem] lg:py-16">
-        {/* 左侧品牌区(纯装饰,仅桌面) */}
-        <section className="hidden lg:block">
-          <p className="text-label font-semibold tracking-[0.18em] text-muted-foreground uppercase">媒体自动化</p>
-          <h1 className="mt-3 max-w-xl font-display text-display-sm leading-tight font-semibold text-foreground">
-            订阅、下载、整理
-          </h1>
-          <p className="mt-4 max-w-lg text-lead text-muted-foreground">每一步都有记录。拿不准的会停下来等你决定。</p>
-          <ul className="mt-8 space-y-3 text-body text-muted-foreground">
-            <li className="flex items-center gap-2.5">
-              <ShieldCheck className="h-4 w-4 text-foreground/70" />
-              单管理员登录，外部程序走 API Key
-            </li>
-            <li className="flex items-center gap-2.5">
-              <LockKeyhole className="h-4 w-4 text-foreground/70" />
-              凭证加密存储，页面不回显
-            </li>
-          </ul>
-        </section>
-
-        <section className="pg-slab w-full rounded-2xl p-6 sm:p-7">
-          <h2 className="text-title font-semibold tracking-tight text-foreground">{title}</h2>
-          <p className="mt-1 text-caption text-muted-foreground">{subtitle}</p>
+      {/* 整页居中一张卡,只放标题和表单,桌面与手机同一套;手机卡片常比屏幕高,从顶栏下方往下排,宽屏才居中 */}
+      <main className="mx-auto flex w-full max-w-md flex-1 flex-col justify-start px-4 pt-6 pb-10 sm:px-0 md:justify-center md:pb-16">
+        <section className="pg-slab auth-card w-full rounded-3xl p-7 motion-safe:animate-blur-in sm:p-8">
+          <h1 className="text-headline-xs font-semibold tracking-tight text-foreground">{title}</h1>
+          {subtitle ? <p className="mt-1 text-caption text-muted-foreground">{subtitle}</p> : null}
 
           {mode === "setup" ? (
             <div className="mt-4 flex gap-2.5 rounded-lg border border-border bg-foreground/[0.03] p-3 text-meta text-muted-foreground">