fix(auth): rebalance account introduction typography and spacing

apps/waterfall-wiki/src/pages/account.tsx

@@ -1,4 +1,3 @@
-import { Brand } from "../components/Brand";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { useEffect, useState, type FormEvent } from "react";
@@ -12,7 +11,6 @@ import {
   Link2,
   LogOut,
   MailCheck,
-  Waypoints,
 } from "lucide-react";
 import GuidanceShell, { useGuidanceAccount } from "@/components/GuidanceShell";
 import { Notice } from "@/components/GuidanceUI";
@@ -115,9 +113,6 @@ function AccountContent() {
   return (
     <div className={s.accountLayout}>
       <section className={s.accountIntro}>
-        <span className={s.accountSymbol}>
-          <Brand compact/>
-        </span>
         <span className={s.eyebrow}>YOUR KNOWLEDGE, CONNECTED</span>
         <h1>
           让有用的知识，

apps/waterfall-wiki/src/styles/guidance.module.css

@@ -1680,63 +1680,67 @@
 }
 .accountLayout {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) 410px;
-  max-width: 990px;
-  gap: 70px;
+  grid-template-columns: minmax(0, 1fr) 400px;
+  max-width: 1000px;
+  gap: 80px;
   align-items: center;
-  margin: 50px auto 70px;
+  margin: 40px auto 64px;
 }
 .accountIntro {
-  padding: 20px 0;
+  min-width: 0;
+  max-width: 460px;
+  padding: 16px 20px 16px 8px;
 }
-.accountSymbol {
-  width: 54px;
-  height: 54px;
-  display: grid;
-  place-items: center;
-  background: var(--selection);
-  border: 1px solid var(--selection-border);
-  border-radius: 14px;
-  color: var(--primary);
-  margin-bottom: 28px;
+.accountIntro > .eyebrow {
+  display: block;
+  margin-bottom: 20px;
+  font-size: 11px;
+  letter-spacing: .14em;
+  line-height: 1.6;
 }
 .accountIntro h1 {
-  font-size: 32px;
-  line-height: 1.5;
-  letter-spacing: -1px;
+  margin: 0 0 22px;
+  font-size: 36px;
+  line-height: 1.45;
+  letter-spacing: -.035em;
   font-weight: 650;
-  margin-bottom: 17px;
+  text-wrap: balance;
 }
 .accountIntro > p {
-  font-size: 13px;
+  margin: 0;
+  font-size: 15px;
   line-height: 1.9;
   color: var(--muted-foreground);
-  max-width: 360px;
+  max-width: 380px;
 }
 .accountFeatures {
   display: grid;
-  gap: 21px;
-  margin-top: 35px;
+  gap: 22px;
+  margin-top: 32px;
+  padding-top: 26px;
+  border-top: 1px solid var(--border);
 }
 .accountFeatures > div {
-  display: flex;
-  align-items: flex-start;
-  gap: 12px;
+  display: grid;
+  grid-template-columns: 20px minmax(0, 1fr);
+  align-items: start;
+  gap: 14px;
 }
 .accountFeatures svg {
   color: var(--muted-foreground);
-  margin-top: 2px;
+  margin-top: 3px;
 }
 .accountFeatures strong {
   display: block;
-  font-size: 12px;
+  font-size: 14px;
+  line-height: 1.6;
   font-weight: 600;
 }
 .accountFeatures p {
-  font-size: 11px;
+  margin: 4px 0 0;
+  font-size: 13px;
   color: var(--muted-foreground);
   line-height: 1.8;
-  margin-top: 5px;
 }
 .authCard {
   padding: 28px;
@@ -1923,12 +1927,9 @@
     gap: 20px;
   }
   .accountLayout {
-    gap: 35px;
+    gap: 48px;
     grid-template-columns: minmax(0, 1fr) 370px;
   }
-  .accountIntro h1 {
-    font-size: 29px;
-  }
   .protocolLayout {
     grid-template-columns: minmax(0, 1fr) 190px;
   }
@@ -1975,19 +1976,23 @@
     gap: 25px;
   }
   .accountIntro {
-    padding: 0;
+    padding: 0 4px;
+    max-width: none;
+  }
+  .accountIntro > .eyebrow {
+    margin-bottom: 12px;
+    font-size: 10px;
   }
   .accountIntro h1 {
     font-size: 26px;
     margin-bottom: 8px;
   }
-  .accountSymbol,
   .accountFeatures {
     display: none;
   }
   .accountIntro > p {
     max-width: none;
-    font-size: 12px;
+    font-size: 14px;
   }
   .accountIntro h1 br {
     display: none;
@@ -2310,10 +2315,7 @@
     font-size: 24px;
   }
   .accountIntro > p {
-    font-size: 11px;
-  }
-  .accountSymbol {
-    display: none;
+    font-size: 14px;
   }
   .modalBody {
     padding: 23px;