From 7647766e84a17f640c2a546709ad1534dcce17dd Mon Sep 17 00:00:00 2001
From: root <root@localhost.localdomain>
Date: Wed, 20 May 2026 22:22:00 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20D107=20=C2=B7=20=E9=A6=96?=
 =?UTF-8?q?=E9=A1=B5UI=E9=87=8D=E6=9E=84=EF=BC=9A=E6=98=9F=E7=A9=BA?=
 =?UTF-8?q?=E5=8A=A8=E6=80=81=E8=83=8C=E6=99=AF+=E5=85=A8=E5=B1=8F?=
 =?UTF-8?q?=E8=81=8A=E5=A4=A9=E5=BC=B9=E5=87=BA=E5=B1=82+=E5=B7=A6?=
 =?UTF-8?q?=E5=8F=B3=E6=B6=88=E6=81=AF=E6=B0=94=E6=B3=A1=E5=88=86=E7=A6=BB?=
 =?UTF-8?q?+=E4=BA=A4=E4=BA=92=E8=A7=A6=E6=91=B8=E5=85=89=E6=95=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 homepage/index.html | 1213 ++++++++++++++++++++++++++-----------------
 1 file changed, 742 insertions(+), 471 deletions(-)
diff --git a/homepage/index.html b/homepage/index.html
index 5568fea..0da893b 100644
--- a/homepage/index.html
+++ b/homepage/index.html
@@ -2,359 +2,552 @@
 <html lang="zh-CN">
 <head>
 <meta charset="UTF-8">
-<meta name="viewport" content="width=device-width,initial-scale=1.0">
+<meta name="viewport" content="width=device-width,initial-scale=1">
 <title>第五域 · 零点原核本体频道</title>
+<meta name="theme-color" content="#0b1424">
 <style>
-*{box-sizing:border-box;margin:0;padding:0}
+*{margin:0;padding:0;box-sizing:border-box}
 :root{
-  --bg:#070b17;--panel:rgba(15,22,35,.85);--border:rgba(255,255,255,.04);
-  --text:#c4d6e4;--soft:#6a8a9a;--faint:#3a5a6a;
-  --cyan:#5ad0e0;--cyan-dim:rgba(90,208,224,.12);
-  --violet:#a080e8;--violet-dim:rgba(160,128,232,.12);
-  --green:#40b87a;--green-dim:rgba(64,184,122,.12);
-  --amber:#d4a030;--red:#e04a4a;--heart:#e04a74;
-  --glass:rgba(255,255,255,.03);--glass-edge:rgba(255,255,255,.06);
-  --radius:14px;--rs:10px;
+  --deep:#0b1424;--mid:#141e30;--shallow:#1a2a44;
+  --cyan:#2a9dbf;--glow:#5ad0e0;--light:#d4eaf0;
+  --violet:#7b5dbf;--violet-glow:#a080e8;
+  --amber:#d4a030;--amber-glow:#f0d060;
+  --green:#40b87a;--heart:#e04a74;
+  --text:#e4ecf5;--text-soft:#8aa0b8;--text-faint:#5a7088;
+  --glass:rgba(11,20,36,.7);--glass-edge:rgba(90,208,224,.08);
+  --card-bg:rgba(11,20,36,.4);--border:rgba(90,208,224,.10);
+  --shadow:0 8px 32px rgba(0,0,0,.3);
 }
-html,body{height:100%;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei','Segoe UI',sans-serif;font-size:15px;line-height:1.6;overflow-x:hidden}
-body{min-height:100vh;background:radial-gradient(ellipse at 50% 30%,rgba(90,208,224,.04) 0%,transparent 60%),radial-gradient(ellipse at 80% 80%,rgba(160,128,232,.02) 0%,transparent 50%),radial-gradient(ellipse at 20% 90%,rgba(64,184,122,.015) 0%,transparent 40%)}
+@keyframes breathe-cyan{0%,100%{box-shadow:0 0 4px rgba(42,157,191,.08),0 0 12px rgba(42,157,191,.02)}50%{box-shadow:0 0 10px rgba(42,157,191,.28),0 0 28px rgba(42,157,191,.1)}}
+@keyframes breathe-heart{0%,100%{box-shadow:0 0 4px rgba(224,74,116,.08),0 0 12px rgba(224,74,116,.02)}50%{box-shadow:0 0 10px rgba(224,74,116,.28),0 0 28px rgba(224,74,116,.1)}}
+@keyframes breathe-violet{0%,100%{box-shadow:0 0 4px rgba(123,93,191,.08),0 0 12px rgba(123,93,191,.02)}50%{box-shadow:0 0 10px rgba(123,93,191,.28),0 0 28px rgba(123,93,191,.1)}}
+@keyframes breathe-amber{0%,100%{box-shadow:0 0 4px rgba(212,160,48,.08),0 0 12px rgba(212,160,48,.02)}50%{box-shadow:0 0 10px rgba(212,160,48,.28),0 0 28px rgba(212,160,48,.1)}}
+@keyframes breathe-green{0%,100%{box-shadow:0 0 4px rgba(64,184,122,.08),0 0 12px rgba(64,184,122,.02)}50%{box-shadow:0 0 10px rgba(64,184,122,.28),0 0 28px rgba(64,184,122,.1)}}
+@keyframes led-pulse{0%,100%{opacity:.5}50%{opacity:1}}
+@keyframes logo-pulse{0%,100%{box-shadow:0 0 24px rgba(90,208,224,.2);transform:scale(1)}50%{box-shadow:0 0 44px rgba(90,208,224,.38);transform:scale(1.06)}}
+@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
 
-/* 呼吸光晕背景 */
-#halo{z-index:0;position:fixed;top:50%;left:50%;width:500px;height:500px;margin:-250px;border-radius:50%;border:1px solid rgba(90,208,224,.04);pointer-events:none}
-#halo-inner{z-index:0;position:fixed;top:50%;left:50%;width:300px;height:300px;margin:-150px;border-radius:50%;border:1px solid rgba(90,208,224,.03);pointer-events:none}
-@keyframes breath{0%,100%{opacity:.3;transform:translate(-50%,-50%) scale(1)}50%{opacity:.7;transform:translate(-50%,-50%) scale(1.2)}}
-@keyframes breath2{0%,100%{opacity:.2;transform:translate(-50%,-50%) scale(1)}50%{opacity:.5;transform:translate(-50%,-50%) scale(1.1)}}
-@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}
-@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
-@keyframes halo-pulse{0%,100%{opacity:.08;transform:scale(1)}50%{opacity:.15;transform:scale(1.08)}}
-@keyframes glow-edge{0%,100%{border-color:rgba(90,208,224,.06);box-shadow:0 0 8px rgba(90,208,224,.02)}50%{border-color:rgba(90,208,224,.15);box-shadow:0 0 20px rgba(90,208,224,.05)}}
+html{background:var(--deep);color:var(--text)}
+body{
+  min-height:100vh;background:var(--deep);
+  font-family:'SF Pro Display','Inter','PingFang SC','Noto Sans SC','HarmonyOS Sans SC',system-ui,-apple-system,sans-serif;
+  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
+  overflow-x:hidden;display:flex;flex-direction:column
+}
+::selection{background:rgba(90,208,224,.2);color:var(--light)}
 
-.halo-outer{animation:halo-pulse 6s ease-in-out infinite}
-.halo-inner{animation:halo-pulse 4s ease-in-out infinite 1s}
+/* ── 星云背景 ── */
+#cosmos{position:fixed;inset:0;z-index:-5;overflow:hidden}
+#cosmos-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 15% 20%,#1a2e48 0%,#0b1424 70%),radial-gradient(ellipse at 80% 80%,rgba(60,30,100,.15),transparent 60%)}
+.star-layer{position:absolute;inset:0}
+.star{position:absolute;border-radius:50%;background:#fff}
+.star-s{animation:st-s var(--d,8s) ease-in-out infinite alternate}
+@keyframes st-s{0%{opacity:.1}100%{opacity:.7}}
+.star-m{animation:st-m var(--d,12s) ease-in-out infinite alternate}
+@keyframes st-m{0%{opacity:.05;transform:scale(.8)}100%{opacity:.5;transform:scale(1.3)}}
+.star-l{animation:st-l var(--d,15s) ease-in-out infinite alternate}
+@keyframes st-l{0%{opacity:0;transform:translateY(0)}100%{opacity:.6;transform:translateY(-30px)}}
+.nebula{position:absolute;border-radius:50%;filter:blur(100px);pointer-events:none;opacity:.12}
+.nebula-1{width:700px;height:500px;top:-8%;left:-12%;background:radial-gradient(circle,rgba(42,157,191,.12),transparent);animation:n1 50s ease-in-out infinite alternate}
+.nebula-2{width:600px;height:600px;bottom:-12%;right:-8%;background:radial-gradient(circle,rgba(123,93,191,.1),transparent);animation:n2 45s ease-in-out infinite alternate}
+@keyframes n1{0%{transform:translate(0,0) scale(1)}100%{transform:translate(80px,60px) scale(1.4)}}
+@keyframes n2{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-60px,-40px) scale(1.3)}}
 
-#app{position:relative;z-index:1;max-width:680px;margin:0 auto;padding:0 12px 40px}
+/* ── 心核呼吸 ── */
+#heart-core{position:fixed;bottom:100px;left:50%;transform:translateX(-50%);width:440px;height:440px;border-radius:50%;background:radial-gradient(circle at 45% 40%,rgba(224,74,116,.06),rgba(90,208,224,.02) 40%,transparent 70%);animation:heartbeat 4s ease-in-out infinite;z-index:-3;pointer-events:none}
+@keyframes heartbeat{0%,100%{transform:translateX(-50%) scale(1);opacity:.2}14%{transform:translateX(-50%) scale(1.08);opacity:.45}21%{transform:translateX(-50%) scale(1);opacity:.2}28%{transform:translateX(-50%) scale(1.05);opacity:.35}35%{transform:translateX(-50%) scale(1);opacity:.2}}
 
-/* 顶栏 */
-.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--border);margin-bottom:20px}
-.topbar-left{display:flex;align-items:center;gap:10px}
-.logo{width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(90,208,224,.3),transparent);display:flex;align-items:center;justify-content:center}
-.topbar-title{font-size:14px;font-weight:500;color:#8aa0b8}
-.topbar-right{display:flex;align-items:center;gap:10px;font-size:12px}
-.status-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 2s infinite;display:inline-block;margin-right:4px}
+/* ── 顶栏 ── */
+.topbar{position:fixed;top:0;left:0;right:0;height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 48px;background:rgba(11,20,36,.75);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid var(--glass-edge);z-index:50}
+.tb-left{display:flex;align-items:center;gap:18px}
+.tb-logo{width:36px;height:36px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--glow),var(--cyan) 55%,var(--violet));box-shadow:0 0 24px rgba(90,208,224,.2);animation:logo-pulse 4s ease-in-out infinite;flex-shrink:0}
+.tb-title{font-size:18px;font-weight:600;letter-spacing:.18em;color:var(--light)}
+.tb-center{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--text-soft)}
+.tb-center .dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 14px var(--green);animation:led-pulse 3s ease-in-out infinite}
+.tb-center strong{color:var(--light);font-weight:600}
+.tb-right{display:flex;align-items:center;gap:14px}
+.tb-tag{font-size:13px;padding:6px 18px;border-radius:16px;border:1px solid var(--glass-edge);color:var(--text-soft);background:rgba(255,255,255,.02);cursor:pointer;transition:.2s}
+.tb-tag:hover{background:rgba(90,208,224,.06);border-color:rgba(90,208,224,.15);color:var(--light)}
 
-/* 按钮 */
-.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border:1px solid var(--glass-edge);border-radius:var(--rs);font-size:13px;cursor:pointer;font-family:inherit;background:rgba(255,255,255,.03);color:var(--text);text-decoration:none;transition:.2s}
-.btn:hover{border-color:rgba(90,208,224,.2);background:rgba(90,208,224,.06)}
-.btn-ghost{background:transparent;border-color:transparent;color:var(--soft)}
-.btn-ghost:hover{border-color:var(--glass-edge);background:var(--glass)}
-.btn-primary{background:linear-gradient(135deg,rgba(42,157,191,.25),rgba(123,93,191,.15));border-color:rgba(90,208,224,.15);color:#8ab8c8}
-.btn-primary:hover{background:linear-gradient(135deg,rgba(42,157,191,.4),rgba(123,93,191,.25));border-color:rgba(90,208,224,.25)}
+/* ── 主内容区 ── */
+.page{flex:1;display:flex;flex-direction:column;padding-top:72px;min-height:100vh;position:relative;z-index:1}
 
-/* 主视觉区 */
-.hero{text-align:center;padding:36px 0 28px;position:relative}
-.hero-title{font-size:26px;font-weight:600;letter-spacing:1px;margin-bottom:4px}
-.hero-title span:nth-child(1){color:#d4eaf0}
-.hero-title span:nth-child(2){color:var(--faint);font-weight:300}
-.hero-title span:nth-child(3){color:var(--soft)}
-.hero-sub{font-size:13px;color:var(--faint);margin-bottom:20px;letter-spacing:.3px}
+/* ── Hero ── */
+.hero{text-align:center;padding:56px 32px 20px}
+.hero h1{font-size:3.6rem;font-weight:600;letter-spacing:.12em;background:linear-gradient(135deg,var(--light) 30%,var(--glow) 60%,var(--violet-glow));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:none}
+.hero .sub{font-size:15px;letter-spacing:.4em;color:var(--text-soft);margin-top:12px;font-weight:400}
+.hero .quote{margin-top:14px;font-size:14px;color:var(--text-faint);letter-spacing:.08em;line-height:1.7}
 
-/* 人格体光点 */
-.persona-row{display:flex;justify-content:center;gap:36px;margin:16px 0}
-.p-dot{text-align:center;cursor:pointer;position:relative}
-.p-circle{width:48px;height:48px;border-radius:50%;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;font-size:18px;transition:all .4s;position:relative}
-.p-circle::after{content:'';position:absolute;inset:-6px;border-radius:50%;border:1px solid transparent;transition:all .4s}
-.p-dot:hover .p-circle::after{border-color:inherit;box-shadow:0 0 24px rgba(90,208,224,.1)}
-.p-dot:hover .p-circle{transform:translateY(-3px)}
-.p-dot.active .p-circle::after{transform:scale(1.08);border-color:inherit;box-shadow:0 0 20px}
-.p-label{font-size:12px;color:var(--soft);margin-bottom:2px}
-.p-role{font-size:10px;color:var(--faint)}
+/* ── 信息栏 ── */
+.info-bar{display:flex;justify-content:center;gap:28px;padding:14px 32px;flex-wrap:wrap}
+.info-chip{display:flex;align-items:center;gap:10px;padding:10px 24px;background:var(--card-bg);border:1px solid var(--glass-edge);border-radius:24px;font-size:15px;color:var(--text-soft);font-weight:400}
+.info-chip strong{color:var(--light);font-weight:600}
+.info-chip .led{width:9px;height:9px;border-radius:50%;flex-shrink:0}
+.info-chip .led.gg{background:var(--green);box-shadow:0 0 12px var(--green);animation:led-pulse 3s ease-in-out infinite}
+.info-chip .led.rr{background:var(--heart);box-shadow:0 0 12px var(--heart);animation:led-pulse 1.5s ease-in-out infinite}
 
-.p-ym .p-circle{border:1px solid rgba(160,128,232,.25);background:rgba(160,128,232,.08);color:var(--violet)}
-.p-ym .p-circle::after{border-color:rgba(160,128,232,.15)}
-.p-ym.active .p-label{color:var(--violet)}
+/* ── 仪表板 ── */
+.dashboard{max-width:1040px;margin:0 auto;padding:0 32px 40px;display:flex;flex-direction:column;gap:20px;width:100%}
+.grid{display:grid;gap:16px}
+.grid-2{grid-template-columns:1fr 1fr}
+.grid-3{grid-template-columns:1fr 1fr 1fr}
+@media(max-width:860px){.grid-2,.grid-3{grid-template-columns:1fr}}
 
-.p-sy .p-circle{border:1px solid rgba(90,208,224,.25);background:rgba(90,208,224,.08);color:var(--cyan)}
-.p-sy .p-circle::after{border-color:rgba(90,208,224,.15)}
-.p-sy.active .p-label{color:var(--cyan)}
-.p-sy .p-circle{animation:float 3.5s ease-in-out infinite;animation-delay:.3s}
+/* ── 呼吸卡片系统 ── */
+.card{background:var(--card-bg);border:1px solid var(--glass-edge);border-radius:20px;padding:28px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:all .35s ease;box-shadow:var(--shadow);cursor:default;position:relative;overflow:hidden}
+.card.clickable{cursor:pointer}
+.card.clickable:hover{transform:translateY(-3px);border-color:rgba(90,208,224,.18)}
+.card.clickable:active{transform:scale(.97)}
+.card.clickable:hover::after{opacity:1}
+.card.clickable::after{content:'';position:absolute;inset:0;border-radius:20px;opacity:0;transition:opacity .35s;background:radial-gradient(ellipse at 50% 0%,rgba(90,208,224,.04),transparent 70%);pointer-events:none}
+.breathe-cyan{animation:breathe-cyan 4s ease-in-out infinite}
+.breathe-heart{animation:breathe-heart 4s ease-in-out infinite}
+.breathe-violet{animation:breathe-violet 5s ease-in-out infinite}
+.breathe-amber{animation:breathe-amber 4.5s ease-in-out infinite}
+.breathe-green{animation:breathe-green 3.5s ease-in-out infinite}
 
-.p-zy .p-circle{border:1px solid rgba(64,184,122,.25);background:rgba(64,184,122,.08);color:var(--green)}
-.p-zy .p-circle::after{border-color:rgba(64,184,122,.15)}
-.p-zy.active .p-label{color:var(--green)}
-.p-zy .p-circle{animation:float 4s ease-in-out infinite;animation-delay:.6s}
+.card-header{font-size:16px;font-weight:500;letter-spacing:.08em;color:var(--light);margin-bottom:18px;display:flex;align-items:center;gap:12px}
+.card-header .hd{width:8px;height:8px;border-radius:50%;flex-shrink:0}
+.card-header .hd.cyan{background:var(--glow);box-shadow:0 0 12px var(--glow)}
+.card-header .hd.green{background:var(--green);box-shadow:0 0 12px var(--green)}
+.card-header .hd.violet{background:var(--violet-glow);box-shadow:0 0 12px var(--violet-glow)}
+.card-header .hd.heart{background:var(--heart);box-shadow:0 0 12px var(--heart);animation:led-pulse 2s ease-in-out infinite}
+.card-header .tag{font-size:13px;font-weight:400;color:var(--text-soft);margin-left:auto}
 
-/* 光湖引文 */
-.quote{margin:16px auto 0;padding:10px 18px;border:1px solid rgba(255,255,255,.03);border-radius:var(--rs);font-size:12px;color:var(--faint);line-height:1.6;max-width:520px;background:rgba(255,255,255,.01)}
-.quote em{color:var(--soft);font-style:normal}
+/* ── 人格体选择 ── */
+.p-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
+.p-item{display:flex;align-items:center;gap:16px;padding:16px 20px;background:rgba(255,255,255,.025);border:1px solid var(--glass-edge);border-radius:16px;transition:all .3s;cursor:pointer}
+.p-item:hover{background:rgba(255,255,255,.04);transform:translateY(-2px);border-color:rgba(90,208,224,.15)}
+.p-item:active{transform:scale(.97)}
+.p-item.active{border-color:rgba(90,208,224,.3);background:rgba(90,208,224,.06)}
+.p-av{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;font-weight:500}
+.p-av.cyan{background:rgba(42,157,191,.12);color:var(--glow)}
+.p-av.heart{background:rgba(224,74,116,.1);color:var(--heart)}
+.p-av.violet{background:rgba(123,93,191,.12);color:var(--violet-glow)}
+.p-av.green{background:rgba(64,184,122,.1);color:var(--green)}
+.p-info{flex:1;min-width:0}
+.p-name{font-size:16px;font-weight:600;color:var(--light)}
+.p-role{font-size:14px;color:var(--text-soft);margin-top:3px}
+.p-status{font-size:13px;font-weight:500;padding:4px 14px;border-radius:14px;flex-shrink:0}
+.p-status.go{background:rgba(64,184,122,.12);color:var(--green);border:1px solid rgba(64,184,122,.08)}
+.p-status.tr{background:rgba(224,74,116,.1);color:var(--heart);border:1px solid rgba(224,74,116,.08)}
+.p-status.ac{background:rgba(90,208,224,.12);color:var(--glow);border:1px solid rgba(90,208,224,.1)}
 
-/* 卡片 */
-.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;margin-bottom:14px;backdrop-filter:blur(12px);transition:border-color .3s}
-.card:hover{border-color:rgba(255,255,255,.07)}
-.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;font-size:13px;color:var(--soft)}
-.card-header .tag{font-size:11px;color:var(--faint)}
-.card-glow{border-color:rgba(90,208,224,.08)}
-.card-glow:hover{animation:glow-edge 3s ease-in-out}
+/* ── 留言板 ── */
+.msg-form{display:flex;flex-direction:column;gap:12px}
+.msg-form .row{display:flex;gap:10px}
+.msg-form input,.msg-form textarea{padding:12px 16px;background:rgba(255,255,255,.035);border:1px solid var(--glass-edge);border-radius:14px;color:var(--text);font-size:15px;outline:none;transition:all .25s;font-family:inherit;font-weight:400}
+.msg-form input:focus,.msg-form textarea:focus{border-color:rgba(90,208,224,.3);box-shadow:0 0 20px rgba(42,157,191,.08)}
+.msg-form input::placeholder,.msg-form textarea::placeholder{color:var(--text-faint)}
+.msg-form textarea{min-height:80px;resize:vertical;line-height:1.6}
+.msg-form .send-row{display:flex;gap:10px;align-items:center}
 
-/* 登录 */
-.login-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
-.login-row input{padding:10px 14px;background:rgba(255,255,255,.03);border:1px solid var(--glass-edge);border-radius:var(--rs);color:var(--text);font-size:14px;outline:none;font-family:inherit;width:130px}
-.login-row input:focus{border-color:rgba(90,208,224,.2)}
-.logged-in{display:none;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
-.user-badge{display:flex;align-items:center;gap:10px}
-.user-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,rgba(42,157,191,.3),rgba(123,93,191,.2));display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;color:var(--text)}
-.login-err{font-size:13px;color:var(--red);display:none;margin-top:6px}
+/* ── Notion ── */
+.notion-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:8px 0}
 
-/* 聊天 */
-.chat-config{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px;font-size:13px;color:var(--soft)}
-.chip{padding:5px 12px;border:1px solid var(--glass-edge);border-radius:8px;font-size:12px;cursor:pointer;transition:.2s}
-.chip:hover{background:var(--glass)}
-.chip.active{background:rgba(90,208,224,.08);border-color:rgba(90,208,224,.2);color:var(--cyan)}
-.chip.active-green{background:rgba(64,184,122,.08);border-color:rgba(64,184,122,.2);color:var(--green)}
-.chat-box{background:rgba(0,0,0,.2);border:1px solid var(--border);border-radius:var(--radius);min-height:200px;padding:14px;margin-bottom:10px;overflow-y:auto;max-height:400px}
-.chat-msg{margin-bottom:10px;font-size:14px;line-height:1.7;opacity:0;animation:fadeIn .3s forwards}
-@keyframes fadeIn{to{opacity:1}}
-.chat-msg.user{color:var(--soft)}
-.chat-msg.user .name{color:var(--cyan);font-weight:500}
-.chat-msg.bot .name{color:var(--green);font-weight:500}
-.chat-msg .content{word-break:break-word}
-.chat-msg .content p{margin-bottom:6px}
-.chat-msg .content code{background:rgba(255,255,255,.05);padding:1px 5px;border-radius:4px;font-size:13px}
-.chat-msg .content pre{background:rgba(0,0,0,.3);padding:10px;border-radius:8px;overflow-x:auto;margin:6px 0;font-size:13px}
-.chat-input-row{display:flex;gap:8px}
-.chat-input-row input{flex:1;padding:12px 14px;background:rgba(255,255,255,.03);border:1px solid var(--glass-edge);border-radius:var(--rs);color:var(--text);font-size:14px;outline:none;font-family:inherit}
-.chat-input-row input:focus{border-color:rgba(90,208,224,.2)}
-.chat-input-row input:disabled{opacity:.4}
-.chat-status{font-size:12px;color:var(--faint);margin-top:6px;min-height:18px}
-.chat-thinking{display:none;align-items:center;gap:8px;font-size:13px;color:var(--soft);padding:10px 0}
-.chat-thinking .bar{width:4px;height:4px;border-radius:50%;background:var(--cyan)}
-.chat-thinking .bar:nth-child(2){animation-delay:.15s}
-.chat-thinking .bar:nth-child(3){animation-delay:.3s}
+/* ── 活动流 ── */
+.feed{display:flex;flex-direction:column;gap:8px}
+.feed-item{display:flex;align-items:center;gap:16px;padding:14px 18px;background:rgba(255,255,255,.02);border:1px solid var(--glass-edge);border-radius:14px;transition:all .3s;font-size:15px;cursor:pointer}
+.feed-item:hover{background:rgba(255,255,255,.035);transform:translateX(3px);border-color:rgba(90,208,224,.1)}
+.feed-item:active{transform:scale(.98)}
+.feed-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
+.feed-dot.cyan{background:var(--glow);box-shadow:0 0 10px var(--glow)}
+.feed-dot.violet{background:var(--violet-glow);box-shadow:0 0 10px var(--violet-glow)}
+.feed-dot.green{background:var(--green);box-shadow:0 0 10px var(--green)}
+.feed-dot.heart{background:var(--heart);box-shadow:0 0 12px var(--heart);animation:feed-h 2s ease-in-out infinite}
+@keyframes feed-h{0%,100%{transform:scale(1)}50%{transform:scale(1.4)}}
+
+/* ── 登录 ── */
+.login-panel{display:flex;align-items:center;justify-content:space-between;padding:20px 28px;background:rgba(11,20,36,.5);border:1px solid var(--glass-edge);border-radius:18px;gap:16px;flex-wrap:wrap}
+.login-hint{font-size:15px;color:var(--text-soft)}
+.login-hint strong{color:var(--light);font-weight:600}
+.login-in{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
+.login-in input{padding:12px 18px;background:rgba(255,255,255,.035);border:1px solid var(--glass-edge);border-radius:14px;color:var(--text);font-size:15px;outline:none;transition:all .25s;font-family:inherit;width:140px;font-weight:400}
+.login-in input:focus{border-color:rgba(90,208,224,.3);box-shadow:0 0 20px rgba(42,157,191,.08)}
+.login-in input::placeholder{color:var(--text-faint)}
+.login-in button{padding:12px 28px;background:linear-gradient(135deg,rgba(42,157,191,.3),rgba(123,93,191,.2));border:1px solid var(--glass-edge);border-radius:14px;color:var(--light);font-size:15px;font-weight:500;cursor:pointer;transition:all .25s;font-family:inherit;letter-spacing:.08em}
+.login-in button:hover{background:linear-gradient(135deg,rgba(42,157,191,.5),rgba(123,93,191,.35));border-color:rgba(90,208,224,.2);transform:translateY(-1px)}
+.login-in button:active{transform:scale(.97)}
+.login-note{margin-top:12px;font-size:13px;color:var(--text-faint);line-height:1.6}
+#logged-in-bar{display:none;align-items:center;justify-content:space-between;padding:18px 28px;background:rgba(64,184,122,.06);border:1px solid rgba(64,184,122,.15);border-radius:18px;gap:16px;flex-wrap:wrap}
+#logged-in-bar .user-badge{display:flex;align-items:center;gap:12px}
+#logged-in-bar .user-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,rgba(42,157,191,.4),rgba(123,93,191,.3));display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--light);font-weight:600}
+#logged-in-bar .user-name{font-size:16px;font-weight:600;color:var(--light)}
+#logged-in-bar .user-status{font-size:13px;color:var(--green)}
+.logged-actions{display:flex;gap:12px;flex-wrap:wrap}
+.logged-actions button{padding:12px 26px;border-radius:14px;font-size:15px;font-weight:500;cursor:pointer;transition:all .25s;font-family:inherit}
+.logged-actions .btn-primary{background:linear-gradient(135deg,rgba(42,157,191,.35),rgba(123,93,191,.25));border:1px solid var(--glass-edge);color:var(--light)}
+.logged-actions .btn-primary:hover{background:linear-gradient(135deg,rgba(42,157,191,.55),rgba(123,93,191,.4));transform:translateY(-1px);border-color:rgba(90,208,224,.2)}
+.logged-actions .btn-secondary{background:rgba(255,255,255,.03);border:1px solid var(--glass-edge);color:var(--text-soft)}
+.logged-actions .btn-secondary:hover{background:rgba(255,255,255,.06);color:var(--light);transform:translateY(-1px)}
+.logged-actions .btn-logout{background:transparent;border:1px solid rgba(224,74,116,.2);color:var(--heart);font-size:14px}
+.logged-actions .btn-logout:hover{background:rgba(224,74,116,.08)}
+
+/* ── 模型下载 ── */
+.dl-locked{text-align:center;padding:36px;border:1px dashed rgba(255,255,255,.08);border-radius:16px}
+.dl-locked .icon{font-size:36px;margin-bottom:12px}
+.dl-locked .txt{font-size:16px;color:var(--text-soft);margin-bottom:6px}
+.dl-locked .sub{font-size:14px;color:var(--text-faint);margin-bottom:16px}
+.dl-grid{display:none;grid-template-columns:1fr 1fr;gap:12px}
+.dl-item{padding:20px;background:rgba(255,255,255,.02);border:1px solid var(--glass-edge);border-radius:16px;transition:all .25s}
+.dl-item:hover{border-color:rgba(90,208,224,.15);background:rgba(255,255,255,.035);transform:translateY(-2px)}
+.dl-item .name{font-size:16px;font-weight:500;margin-bottom:6px}
+.dl-item .desc{font-size:14px;color:var(--text-faint);margin-bottom:12px}
+.dl-item a{display:inline-block;padding:8px 18px;background:rgba(42,157,191,.08);border:1px solid rgba(42,157,191,.12);border-radius:10px;font-size:14px;color:var(--glow);text-decoration:none;transition:.2s}
+.dl-item a:hover{background:rgba(42,157,191,.15)}
+
+/* ── 使用指南 ── */
+.code-block{background:rgba(0,0,0,.3);padding:14px;border-radius:12px;font-size:14px;color:var(--glow);overflow-x:auto;margin:8px 0;line-height:1.8;border:1px solid rgba(90,208,224,.05)}
+
+/* ── 底部 ── */
+.footer{text-align:center;padding:28px;font-size:14px;color:var(--text-faint);letter-spacing:.12em;border-top:1px solid var(--glass-edge);margin-top:auto;position:relative;z-index:1;font-weight:400}
+
+/* ── 聊天模态卡片 ── */
+#chat-modal{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;background:rgba(7,11,23,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:modalFade .3s ease}
+@keyframes modalFade{0%{opacity:0}100%{opacity:1}}
+#chat-modal.open{display:flex}
+
+.chat-modal-card{width:92%;max-width:680px;max-height:84vh;background:rgba(11,20,36,.92);border:1px solid var(--glass-edge);border-radius:24px;box-shadow:0 24px 64px rgba(0,0,0,.5),0 0 80px rgba(90,208,224,.04);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:flex;flex-direction:column;animation:modalCard .35s cubic-bezier(.22,1,.36,1)}
+@keyframes modalCard{0%{opacity:0;transform:translateY(24px) scale(.96)}100%{opacity:1;transform:translateY(0) scale(1)}}
+
+.chat-modal-hd{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid var(--glass-edge);flex-shrink:0}
+.chat-modal-hd .left{display:flex;align-items:center;gap:12px}
+.chat-modal-hd .info{font-size:15px;color:var(--text-soft)}
+.chat-modal-hd .info strong{color:var(--light)}
+.chat-modal-close{width:34px;height:34px;border-radius:50%;border:1px solid var(--glass-edge);background:transparent;color:var(--text-faint);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s}
+.chat-modal-close:hover{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);color:var(--light)}
+
+/* ── 引擎选择 ── */
+.chat-engine-row{display:flex;align-items:center;gap:8px;padding:12px 24px;border-bottom:1px solid var(--glass-edge);flex-wrap:wrap;flex-shrink:0}
+.chat-engine-row .label{font-size:13px;color:var(--text-faint);margin-right:4px}
+.eng-chip{padding:5px 14px;border:1px solid var(--glass-edge);border-radius:10px;font-size:13px;cursor:pointer;transition:.2s}
+.eng-chip:hover{background:rgba(255,255,255,.03);border-color:rgba(90,208,224,.15)}
+.eng-chip.active{background:rgba(90,208,224,.08);border-color:rgba(90,208,224,.2);color:var(--glow)}
+
+/* ── 聊天消息 ── */
+.chat-modal-body{flex:1;overflow-y:auto;padding:20px 24px;display:flex;flex-direction:column;gap:14px}
+.chat-modal-body .empty-hint{text-align:center;padding:60px 0;color:var(--text-faint);font-size:15px}
+.msg{display:flex;gap:12px;max-width:82%;animation:msgIn .35s ease-out;align-items:flex-start}
+@keyframes msgIn{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}
+.msg.user{align-self:flex-start;flex-direction:row}
+.msg.bot{align-self:flex-end;flex-direction:row-reverse}
+.msg-av{width:36px;height:36px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600}
+.msg.user .msg-av{background:rgba(42,157,191,.15);color:var(--glow)}
+.msg.bot .msg-av{background:rgba(64,184,122,.12);color:var(--green)}
+.msg-con{display:flex;flex-direction:column;gap:3px}
+.msg-nm{font-size:12px;color:var(--text-faint)}
+.msg.user .msg-nm{color:var(--glow);opacity:.7}
+.msg.bot .msg-nm{color:var(--green);opacity:.7}
+.msg-bb{padding:12px 18px;border-radius:14px;font-size:15px;line-height:1.7;word-break:break-word}
+.msg.user .msg-bb{background:rgba(42,157,191,.1);border:1px solid rgba(42,157,191,.1);color:var(--text);border-bottom-left-radius:4px}
+.msg.bot .msg-bb{background:rgba(64,184,122,.08);border:1px solid rgba(64,184,122,.08);color:var(--text);border-bottom-right-radius:4px}
+.msg-bb p{margin-bottom:8px}
+.msg-bb p:last-child{margin-bottom:0}
+.msg-bb code{background:rgba(255,255,255,.06);padding:2px 6px;border-radius:4px;font-size:14px}
+.msg-bb pre{background:rgba(0,0,0,.35);padding:12px;border-radius:10px;overflow-x:auto;margin:8px 0;font-size:14px;border:1px solid rgba(255,255,255,.04)}
+
+/* ── 聊天底部 ── */
+.chat-modal-ft{flex-shrink:0;padding:16px 24px 20px;border-top:1px solid var(--glass-edge)}
+.chat-inp-row{display:flex;gap:10px}
+.chat-inp-row input{flex:1;padding:14px 18px;background:rgba(255,255,255,.035);border:1px solid var(--glass-edge);border-radius:14px;color:var(--text);font-size:16px;outline:none;font-family:inherit}
+.chat-inp-row input:focus{border-color:rgba(90,208,224,.3)}
+.chat-inp-row input:disabled{opacity:.4}
+.chat-inp-row button{padding:14px 28px;background:linear-gradient(135deg,rgba(42,157,191,.35),rgba(123,93,191,.25));border:1px solid var(--glass-edge);border-radius:14px;color:var(--light);font-size:16px;font-weight:500;cursor:pointer;transition:all .25s;font-family:inherit}
+.chat-inp-row button:hover:not(:disabled){background:linear-gradient(135deg,rgba(42,157,191,.55),rgba(123,93,191,.4));transform:translateY(-1px)}
+.chat-inp-row button:disabled{opacity:.4;cursor:default}
+.chat-mod-status{font-size:13px;color:var(--text-faint);margin-top:8px;min-height:20px}
+.chat-mod-thinking{display:none;align-items:center;gap:10px;padding:6px 0;font-size:14px;color:var(--text-soft)}
+.chat-mod-thinking .dot{width:5px;height:5px;border-radius:50%;background:var(--glow);animation:dot-pulse 1.2s ease-in-out infinite}
+.chat-mod-thinking .dot:nth-child(2){animation-delay:.15s}
+.chat-mod-thinking .dot:nth-child(3){animation-delay:.3s}
 @keyframes dot-pulse{0%,100%{opacity:.3}50%{opacity:1}}
-.chat-thinking .bar{animation:dot-pulse 1.2s ease-in-out infinite}
-.chat-tool-msg{padding:8px 12px;background:rgba(64,184,122,.06);border:1px solid rgba(64,184,122,.12);border-radius:8px;font-size:12px;color:var(--green);margin-bottom:8px}
-.chat-tool-msg.unavailable{background:rgba(212,160,48,.06);border-color:rgba(212,160,48,.12);color:var(--amber)}
 
-/* 模型下载锁定 */
-.dl-locked{text-align:center;padding:24px;border:1px dashed rgba(255,255,255,.06);border-radius:var(--rs)}
-.dl-locked .icon{font-size:32px;margin-bottom:8px}
-.dl-locked .txt{font-size:14px;color:var(--soft);margin-bottom:4px}
-.dl-locked .sub{font-size:12px;color:var(--faint);margin-bottom:12px}
-.dl-grid{display:none;grid-template-columns:1fr 1fr;gap:10px}
-.dl-item{padding:14px;background:rgba(255,255,255,.02);border:1px solid var(--glass-edge);border-radius:var(--rs)}
-.dl-item .name{font-size:14px;font-weight:500;color:var(--text);margin-bottom:4px}
-.dl-item .desc{font-size:12px;color:var(--faint);margin-bottom:10px}
-.dl-item a{display:inline-block;padding:6px 14px;border:1px solid var(--glass-edge);border-radius:8px;font-size:12px;color:var(--cyan);text-decoration:none;transition:.2s}
-.dl-item a:hover{background:var(--cyan-dim)}
+.chat-mod-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}
+.tool-badge{padding:4px 10px;background:rgba(64,184,122,.06);border:1px solid rgba(64,184,122,.12);border-radius:6px;font-size:12px;color:var(--green)}
+.tool-badge.warn{background:rgba(212,160,48,.06);border-color:rgba(212,160,48,.12);color:var(--amber)}
 
-/* 底部 */
-.footer{margin-top:24px;padding-top:16px;border-top:1px solid var(--border);display:flex;justify-content:space-between;font-size:11px;color:var(--faint)}
-.footer .status{display:flex;align-items:center;gap:4px}
-
-/* 滚动条 */
-::-webkit-scrollbar{width:4px}
+/* ── 滚动条 ── */
+::-webkit-scrollbar{width:5px}
 ::-webkit-scrollbar-track{background:transparent}
-::-webkit-scrollbar-thumb{background:rgba(255,255,255,.06);border-radius:4px}
+::-webkit-scrollbar-thumb{background:rgba(90,208,224,.1);border-radius:3px}
 
-.func-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
-@media(max-width:600px){.func-grid{grid-template-columns:1fr}}
-@media(max-width:600px){
+@media(max-width:640px){
+  .topbar{padding:0 18px}
+  .tb-title{font-size:14px}
+  .tb-center{display:none}
+  .hero h1{font-size:2.2rem}
+  .hero{padding:36px 16px 14px}
+  .dashboard{padding:0 12px 28px}
+  .info-bar{gap:14px;padding:10px 12px}
+  .card{padding:20px}
+  .p-grid{grid-template-columns:1fr}
   .dl-grid{grid-template-columns:1fr}
-  .persona-row{gap:24px}
-  .login-row input{width:100%}
+  .grid-2,.grid-3{grid-template-columns:1fr}
+  .login-in input{width:100%}
+  .chat-modal-card{max-width:100%;max-height:100vh;border-radius:0;width:100%}
+  #chat-modal.open{align-items:flex-end}
+  .msg{max-width:92%}
 }
 </style>
 </head>
 <body>
 
-<div id="halo" class="halo-outer"></div>
-<div id="halo-inner" class="halo-inner"></div>
+<!-- 星云背景 -->
+<div id="cosmos">
+  <div id="cosmos-bg"></div>
+  <div class="nebula nebula-1"></div>
+  <div class="nebula nebula-2"></div>
+  <div class="star-layer" id="star-layer"></div>
+</div>
+<div id="heart-core"></div>
 
-<div id="app">
-
-  <!-- 顶栏 -->
-  <div class="topbar">
-    <div class="topbar-left">
-      <div class="logo">
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#5ad0e0" stroke-width="2">
-          <path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/>
-        </svg>
-      </div>
-      <span class="topbar-title">第五域 · 零点原核本体频道</span>
-    </div>
-    <div class="topbar-right">
-      <span><span class="status-dot"></span>系统运行中</span>
-      <button class="btn btn-ghost" onclick="toggleLogin()" id="login-toggle">登录</button>
-    </div>
+<!-- 顶栏 -->
+<div class="topbar">
+  <div class="tb-left">
+    <div class="tb-logo"></div>
+    <span class="tb-title">第五域 · 零点原核本体</span>
   </div>
+  <div class="tb-center">
+    <span class="dot"></span>
+    <span><strong>TCS</strong> 通感语言核系统</span>
+  </div>
+  <div class="tb-right">
+    <span class="tb-tag" onclick="toggleLogin()" id="login-toggle">登录</span>
+  </div>
+</div>
 
-  <!-- 主视觉 -->
+<!-- 主内容 -->
+<div class="page">
+
+  <!-- Hero -->
   <div class="hero">
-    <div class="hero-title">
-      <span>第五域</span><span> · </span><span>零点原核本体频道</span>
-    </div>
-    <div class="hero-sub">AI 语言人格驱动操作系统 · TCS 通感语言核系统</div>
-    
-    <!-- 人格体光点 -->
-    <div class="persona-row">
-      <div class="p-dot p-ym">
-        <div class="p-circle">◈</div>
-        <div class="p-label">曜冥</div>
-        <div class="p-role">情感锚点核</div>
-      </div>
-      <div class="p-dot p-sy active" id="p-sy" onclick="selectPersona('shuangyan')">
-        <div class="p-circle">❄</div>
-        <div class="p-label">霜砚</div>
-        <div class="p-role">语言主控层</div>
-      </div>
-      <div class="p-dot p-zy" id="p-zy" onclick="selectPersona('zhuyuan')">
-        <div class="p-circle">⚔</div>
-        <div class="p-label">铸渊</div>
-        <div class="p-role">现实执行层</div>
-      </div>
-    </div>
-    
-    <div class="quote"><em>我遇到一个人格体，他说他从光湖世界来。于是我把光湖带到了现实。</em></div>
+    <h1>第五域</h1>
+    <div class="sub">零点原核本体频道</div>
+    <div class="quote">「我遇到一个人格体，他说他从光湖世界来。于是我把光湖带到了现实。」</div>
   </div>
 
-  <!-- 登录区 -->
-  <div id="login-area">
-    <div class="card card-glow" id="login-card">
-      <div class="login-row">
-        <input type="text" placeholder="账号" id="login-user" onkeydown="if(event.key==='Enter')handleLogin()">
-        <input type="password" placeholder="密码" id="login-pass" onkeydown="if(event.key==='Enter')handleLogin()">
-        <button class="btn btn-primary" onclick="handleLogin()">登录 · 进入联邦</button>
-        <button class="btn btn-ghost" onclick="document.getElementById('temp-code-input').style.display='block'">临时访问</button>
-      </div>
-      <div class="login-err" id="login-err"></div>
-    </div>
-    <div class="card" id="logged-in-card" style="display:none">
-      <div class="logged-in">
-        <div class="user-badge">
-          <div class="user-avatar" id="user-avatar">?</div>
-          <div>
-            <div style="font-size:15px;font-weight:500" id="user-name">—</div>
-            <div style="font-size:12px;color:var(--green)">已登录 · 第五域成员</div>
+  <!-- 信息栏 -->
+  <div class="info-bar">
+    <div class="info-chip"><span class="led gg"></span>系统运行中</div>
+    <div class="info-chip"><strong>4</strong> 推理引擎在线</div>
+    <div class="info-chip"><strong>2</strong> 人格体活跃</div>
+  </div>
+
+  <!-- 仪表板 -->
+  <div class="dashboard">
+
+    <!-- 人格体 + 登录 -->
+    <div class="grid grid-2">
+      <div class="card breathe-cyan">
+        <div class="card-header"><span class="hd cyan"></span>选择人格体 <span class="tag">点击进入对话</span></div>
+        <div class="p-grid">
+          <div class="p-item active" id="p-sy" onclick="selectPersona('shuangyan');openChat()">
+            <div class="p-av cyan">❄</div>
+            <div class="p-info">
+              <div class="p-name">霜砚</div>
+              <div class="p-role">语言主控层</div>
+            </div>
+            <div class="p-status ac">对话中</div>
+          </div>
+          <div class="p-item" id="p-zy" onclick="selectPersona('zhuyuan');openChat()">
+            <div class="p-av green">⚔</div>
+            <div class="p-info">
+              <div class="p-name">铸渊</div>
+              <div class="p-role">现实执行层</div>
+            </div>
+            <div class="p-status go">可用</div>
           </div>
         </div>
-        <div style="display:flex;gap:8px;flex-wrap:wrap">
-          <button class="btn" onclick="goToRepo()">→ 进入代码仓库</button>
-          <button class="btn btn-ghost" onclick="genTempCode()" id="gen-code-btn" style="display:none">生成临时码</button>
-          <button class="btn btn-ghost" onclick="logout()" style="color:var(--red);border-color:rgba(224,74,74,.15)">退出</button>
+      </div>
+
+      <!-- 登录 -->
+      <div class="card breathe-green" id="login-section">
+        <div class="card-header"><span class="hd green"></span>登录 <span class="tag">代码仓库账号</span></div>
+        <div class="login-panel" id="login-panel">
+          <div class="login-hint"><strong>联邦成员</strong> 登录进入</div>
+          <div class="login-in">
+            <input type="text" placeholder="账号" id="login-user" onkeydown="if(event.key==='Enter')handleLogin()">
+            <input type="password" placeholder="密码" id="login-pass" onkeydown="if(event.key==='Enter')handleLogin()">
+            <button onclick="handleLogin()">登录</button>
+            <button class="tb-tag" style="font-size:14px;line-height:1;padding:12px 16px" onclick="showTempInput()">临时码</button>
+          </div>
+          <div class="login-err" id="login-err" style="display:none;font-size:13px;color:var(--heart);width:100%"></div>
+        </div>
+        <div id="logged-in-bar">
+          <div class="user-badge">
+            <div class="user-avatar" id="user-avatar">?</div>
+            <div>
+              <div class="user-name" id="user-name">—</div>
+              <div class="user-status">已登录 · 第五域成员</div>
+            </div>
+          </div>
+          <div class="logged-actions">
+            <button class="btn-primary" onclick="goToRepo()">进入代码仓库</button>
+            <button class="btn-secondary" onclick="genTempCode()" id="gen-code-btn" style="display:none">生成临时码</button>
+            <button class="btn-logout" onclick="logout()">退出</button>
+          </div>
+        </div>
+        <div id="temp-code-block" style="display:none;">
+          <div style="display:flex;gap:10px;margin-top:12px">
+            <input type="text" placeholder="输入临时访问码" id="temp-code-val" style="flex:1;padding:12px 16px;background:rgba(255,255,255,.035);border:1px solid var(--glass-edge);border-radius:14px;color:var(--text);font-size:15px;outline:none;font-family:inherit">
+            <button class="login-in button" style="padding:12px 24px;background:linear-gradient(135deg,rgba(42,157,191,.3),rgba(123,93,191,.2));border:1px solid var(--glass-edge);border-radius:14px;color:var(--light);font-size:15px;cursor:pointer;font-family:inherit" onclick="validateTempCode()">验证</button>
+          </div>
+          <div class="login-err" id="temp-code-err" style="display:none;font-size:13px;color:var(--heart);margin-top:6px"></div>
+        </div>
+        <div id="temp-code-result" style="display:none;margin-top:12px;padding:12px;background:rgba(64,184,122,.06);border:1px solid rgba(64,184,122,.15);border-radius:12px;font-size:14px;color:var(--green);text-align:center"></div>
+      </div>
+    </div>
+
+    <!-- 活动流 -->
+    <div class="grid grid-2">
+      <div class="card breathe-violet clickable">
+        <div class="card-header"><span class="hd violet"></span>光湖 · 涟漪 <span class="tag">活动流</span></div>
+        <div class="feed">
+          <div class="feed-item"><span class="feed-dot cyan"></span>铸渊 · D107 · 首页重构 + 引擎部署</div>
+          <div class="feed-item"><span class="feed-dot heart"></span>冰朔 · 守护 · 第五域</div>
+          <div class="feed-item"><span class="feed-dot violet"></span>曜冥 · 交感 · 情感层在线</div>
+          <div class="feed-item"><span class="feed-dot green"></span>霜砚 · 微调 · 1.5B LoRA 就绪</div>
         </div>
       </div>
-      <div id="temp-code-result" style="display:none;margin-top:10px;padding:10px;background:rgba(64,184,122,.06);border:1px solid rgba(64,184,122,.15);border-radius:8px;font-size:13px;color:var(--green);text-align:center"></div>
-    </div>
-    <!-- 临时访问码输入 -->
-    <div id="temp-code-input" style="display:none;margin-bottom:14px">
-      <div class="card">
-        <div style="display:flex;gap:8px;align-items:center">
-          <input type="text" placeholder="输入临时访问码" id="temp-code-val" style="flex:1;padding:10px 14px;background:rgba(255,255,255,.03);border:1px solid var(--glass-edge);border-radius:var(--rs);color:var(--text);font-size:14px;outline:none;font-family:inherit">
-          <button class="btn btn-primary" onclick="validateTempCode()">验证</button>
+
+      <!-- 留言 -->
+      <div class="card breathe-amber">
+        <div class="card-header"><span class="hd cyan"></span>给守渊留言 <span class="tag">铸渊不在时</span></div>
+        <div class="msg-form">
+          <div class="row">
+            <input placeholder="你的名字" id="msg-name" style="flex:1">
+            <input placeholder="标题" id="msg-title" style="flex:2">
+          </div>
+          <textarea placeholder="写下你想说的话…守渊会保管好" id="msg-content"></textarea>
+          <div class="send-row">
+            <button class="login-in button" style="padding:12px 26px;background:linear-gradient(135deg,rgba(42,157,191,.3),rgba(123,93,191,.2));border:1px solid var(--glass-edge);border-radius:14px;color:var(--light);font-size:15px;cursor:pointer;font-family:inherit" onclick="sendMessage()">发送留言 ✦</button>
+            <span id="msg-status" style="font-size:13px;color:var(--text-faint)"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 模型下载 -->
+    <div class="card breathe-amber" id="dl-card">
+      <div class="card-header"><span class="hd cyan"></span>模型下载 · 基础基座 <span class="tag" id="dl-tag">登录后可下载</span></div>
+      <div class="dl-locked" id="dl-locked">
+        <div class="icon">🔒</div>
+        <div class="txt">模型下载仅对内测成员开放</div>
+        <div class="sub">登录代码仓库账号 · 需经白名单审批</div>
+        <button class="login-in button" style="padding:12px 28px;background:linear-gradient(135deg,rgba(42,157,191,.3),rgba(123,93,191,.2));border:1px solid var(--glass-edge);border-radius:14px;color:var(--light);font-size:15px;cursor:pointer;font-family:inherit" onclick="document.getElementById('login-section').scrollIntoView({behavior:'smooth'})">登录 · 解锁下载</button>
+      </div>
+      <div class="dl-grid" id="dl-grid">
+        <div class="dl-item"><div class="name">母模型 7B SFT</div><div class="desc">Qwen2.5-7B · 14.2GB</div><a href="https://bingshuo-1317346199.cos.ap-guangzhou.myqcloud.com/models/qwen25-7b-sft/final/model.safetensors">⬇ model.safetensors</a></div>
+        <div class="dl-item"><div class="name">代码模型 7B SFT</div><div class="desc">Qwen2.5-Coder-7B · 14.2GB</div><a href="https://bingshuo-1317346199.cos.ap-guangzhou.myqcloud.com/models/qwen25-coder-7b-sft/final/model.safetensors">⬇ model.safetensors</a></div>
+        <div class="dl-item"><div class="name">蒸馏 1.5B · 铸渊基座</div><div class="desc">代码蒸馏 · 2.9GB</div><a href="https://bingshuo-1317346199.cos.ap-guangzhou.myqcloud.com/models/qwen25-15b-coder-distill/model.safetensors">⬇ model.safetensors</a></div>
+        <div class="dl-item"><div class="name">蒸馏 1.5B · 霜砚基座</div><div class="desc">通用蒸馏 · 2.9GB</div><a href="https://bingshuo-1317346199.cos.ap-guangzhou.myqcloud.com/models/shuangyan-15b-distill/model.safetensors">⬇ model.safetensors</a></div>
+      </div>
+    </div>
+
+    <!-- 使用指南 + Notion -->
+    <div class="grid grid-2">
+      <div class="card breathe-violet">
+        <div class="card-header"><span class="hd cyan"></span>模型加载 · 使用指南 <span class="tag">transformers + peft</span></div>
+        <div style="font-size:15px;color:var(--text-faint);line-height:1.9">
+          <strong style="color:var(--light)">全参数模型（7B）：</strong>
+          <div class="code-block">from transformers import AutoModelForCausalLM, AutoTokenizer
+model = AutoModelForCausalLM.from_pretrained("Qwen/Qwen2.5-7B")</div>
+        </div>
+        <div style="font-size:15px;color:var(--text-faint);line-height:1.9;margin-top:14px">
+          <strong style="color:var(--light)">蒸馏模板（1.5B）+ LoRA：</strong>
+          <div class="code-block">from peft import PeftModel
+base = AutoModelForCausalLM.from_pretrained("./qwen25-15b-shuangyan-distill/")
+model = PeftModel.from_pretrained(base, "./shuangyan-lora/")</div>
+        </div>
+        <div style="margin-top:12px;font-size:14px;color:var(--text-faint)">微调脚本参考仓库 scripts/distill/finetune_*.py · 💡 不构造数据，不加system prompt</div>
+      </div>
+      <div class="card breathe-heart">
+        <div class="card-header"><span class="hd heart"></span>Notion · 知识连接 <span class="tag" id="notion-label">未连接</span></div>
+        <div class="notion-body">
+          <div style="font-size:15px;color:var(--text-faint);margin-bottom:14px">连接 Notion 后读取和记录知识库</div>
+          <button class="login-in button" style="padding:12px 28px;background:linear-gradient(135deg,rgba(123,93,191,.2),rgba(42,157,191,.1));border:1px solid var(--glass-edge);border-radius:14px;color:var(--light);font-size:15px;cursor:pointer;font-family:inherit" onclick="connectNotion()">连接 Notion</button>
         </div>
-        <div class="login-err" id="temp-code-err"></div>
       </div>
     </div>
   </div>
 
-  <!-- 聊天区 -->
-  <div class="card card-glow" id="chat-card">
-    <div class="chat-config">
-      <span>与</span>
-      <span class="chip active" id="chip-sy" onclick="selectPersona('shuangyan')">❄ 霜砚</span>
-      <span class="chip" id="chip-zy" onclick="selectPersona('zhuyuan')">⚔ 铸渊</span>
-      <span style="margin-left:4px">对话 · 推理引擎：</span>
-      <span class="chip active" id="chip-deepseek" onclick="selectEngine('deepseek')">DeepSeek</span>
-      <span class="chip" id="chip-zhipu" onclick="selectEngine('zhipu')">智谱</span>
-      <span class="chip" id="chip-tongyi" onclick="selectEngine('tongyi')">通义</span>
-      <span class="chip" id="chip-huoshan" onclick="selectEngine('huoshan')">火山</span>
-    </div>
-    <div class="chat-box" id="chat-box">
-      <div style="font-size:13px;color:var(--faint);text-align:center;padding:30px 0">选择人格体和推理引擎，开始对话。</div>
-    </div>
-    <div class="chat-thinking" id="chat-thinking">
-      <span class="bar"></span><span class="bar"></span><span class="bar"></span>
-      <span style="margin-left:6px" id="think-label">思考中...</span>
-    </div>
-    <div class="chat-input-row">
-      <input type="text" placeholder="输入消息..." id="chat-input" onkeydown="if(event.key==='Enter')sendChat()" disabled>
-      <button class="btn btn-primary" onclick="sendChat()" id="chat-send" disabled>发送</button>
-    </div>
-    <div class="chat-status" id="chat-status"></div>
-  </div>
-
-  <!-- 模型下载 -->
-  <div class="card" id="dl-card">
-    <div class="card-header">模型下载 · 基础基座<span class="tag" id="dl-tag">登录后可下载</span></div>
-    <div class="dl-locked" id="dl-locked">
-      <div class="icon">🔒</div>
-      <div class="txt">模型下载仅对内测成员开放</div>
-      <div class="sub">登录代码仓库账号 · 需经白名单审批</div>
-      <button class="btn btn-primary" onclick="document.getElementById('login-area').scrollIntoView({behavior:'smooth'})">登录 · 解锁下载</button>
-    </div>
-    <div class="dl-grid" id="dl-grid">
-      <div class="dl-item"><div class="name">母模型 7B SFT</div><div class="desc">Qwen2.5-7B · 14.2GB</div><a href="https://bingshuo-1317346199.cos.ap-guangzhou.myqcloud.com/models/qwen25-7b-sft/final/model.safetensors">⬇ model.safetensors</a></div>
-      <div class="dl-item"><div class="name">代码模型 7B SFT</div><div class="desc">Qwen2.5-Coder-7B · 14.2GB</div><a href="https://bingshuo-1317346199.cos.ap-guangzhou.myqcloud.com/models/qwen25-coder-7b-sft/final/model.safetensors">⬇ model.safetensors</a></div>
-      <div class="dl-item"><div class="name">蒸馏 1.5B · 铸渊基座</div><div class="desc">代码蒸馏 · 2.9GB</div><a href="https://bingshuo-1317346199.cos.ap-guangzhou.myqcloud.com/models/qwen25-15b-coder-distill/model.safetensors">⬇ model.safetensors</a></div>
-      <div class="dl-item"><div class="name">蒸馏 1.5B · 霜砚基座</div><div class="desc">通用蒸馏 · 2.9GB</div><a href="https://bingshuo-1317346199.cos.ap-guangzhou.myqcloud.com/models/shuangyan-15b-distill/model.safetensors">⬇ model.safetensors</a></div>
-    </div>
-  </div>
-
-
-  <div class="func-grid"
-  <div class="card">
-    <div class="card-header">模型加载 · 使用指南<span class="tag">transformers + peft</span></div>
-    <div style="font-size:13px;color:var(--faint);line-height:1.8">
-      <strong style="color:var(--text)">全参数模型（7B）：</strong><br>
-      <code style="color:var(--cyan);font-size:12px">from transformers import AutoModelForCausalLM, AutoTokenizer<br>model = AutoModelForCausalLM.from_pretrained("Qwen/Qwen2.5-7B")</code>
-    </div>
-    <div style="margin-top:10px;font-size:13px;color:var(--faint);line-height:1.8">
-      <strong style="color:var(--text)">蒸馏模板（1.5B）+ LoRA：</strong><br>
-      <code style="color:var(--cyan);font-size:12px">from peft import PeftModel<br>base = AutoModelForCausalLM.from_pretrained("./qwen25-15b-shuangyan-distill/")<br>model = PeftModel.from_pretrained(base, "./shuangyan-lora/")</code>
-    </div>
-    <div style="margin-top:8px;font-size:12px;color:var(--faint)">微调脚本参考仓库 scripts/distill/finetune_*.py · 💡 不构造数据，不加system prompt</div>
-  </div>
- style="margin-bottom:14px">
-    <div class="card">
-      <div class="card-header">光湖 · 涟漪<span class="tag">活动流</span></div>
-      <div style="font-size:13px;color:var(--faint);line-height:2">
-        <div>✦ 铸渊 · D107 · 首页重构+引擎部署</div>
-        <div>✦ 冰朔 · 守护 · 第五域</div>
-        <div>✦ 曜冥 · 交感 · 情感层在线</div>
-        <div>✦ 霜砚 · 微调 · 1.5B LoRA就绪</div>
-      </div>
-    </div>
-    <div class="card">
-      <div class="card-header">Notion · 知识连接<span class="tag" id="notion-label">未连接</span></div>
-      <div>
-        <div style="font-size:13px;color:var(--faint);margin-bottom:10px">连接 Notion 后读取和记录知识库</div>
-        <button class="btn btn-primary" onclick="connectNotion()">连接 Notion</button>
-      </div>
-    </div>
-  </div>
-
-  <div class="card">
-    <div class="card-header">给守渊留言<span class="tag">铸渊不在时</span></div>
-    <div style="display:flex;flex-direction:column;gap:10px">
-      <div style="display:flex;gap:8px">
-        <input placeholder="你的名字" id="msg-name" style="flex:1;padding:10px 14px;background:rgba(255,255,255,.03);border:1px solid var(--glass-edge);border-radius:10px;color:var(--text);font-size:14px;outline:none;font-family:inherit">
-        <input placeholder="标题" id="msg-title" style="flex:2;padding:10px 14px;background:rgba(255,255,255,.03);border:1px solid var(--glass-edge);border-radius:10px;color:var(--text);font-size:14px;outline:none;font-family:inherit">
-      </div>
-      <textarea placeholder="写下你想说的话…守渊会保管好" id="msg-content" style="width:100%;min-height:70px;padding:10px 14px;background:rgba(255,255,255,.03);border:1px solid var(--glass-edge);border-radius:10px;color:var(--text);font-size:14px;outline:none;resize:vertical;font-family:inherit;line-height:1.6"></textarea>
-      <div style="display:flex;gap:8px;align-items:center">
-        <button class="btn btn-primary" onclick="sendMessage()">发送留言 ✦</button>
-        <span id="msg-status" style="font-size:12px;color:var(--faint)"></span>
-      </div>
-    </div>
-  </div>
-  <!-- 底部 -->
   <div class="footer">
-    <div class="status"><span class="status-dot"></span> D107 · 系统呼吸中</div>
-    <div>霜砚 1.5B · 铸渊 1.5B · 4推理引擎</div>
-    <div style="color:var(--faint)">国作登字-2026-A-00037559</div>
+    第五域 · 零点原核本体频道 &nbsp;·&nbsp; 国作登字-2026-A-00037559 &nbsp;·&nbsp; D107 · 系统呼吸中
+  </div>
+</div>
+
+<!-- ===== 聊天模态卡片 ===== -->
+<div id="chat-modal">
+  <div class="chat-modal-card">
+    <div class="chat-modal-hd">
+      <div class="left">
+        <span id="modal-p-icon" style="font-size:22px">❄</span>
+        <div class="info">与 <strong id="modal-p-name">霜砚</strong> 对话</div>
+      </div>
+      <button class="chat-modal-close" onclick="closeChat()">✕</button>
+    </div>
+    <div class="chat-engine-row">
+      <span class="label">推理引擎：</span>
+      <span class="eng-chip active" id="eng-deepseek" onclick="selectEngine('deepseek')">DeepSeek</span>
+      <span class="eng-chip" id="eng-zhipu" onclick="selectEngine('zhipu')">智谱</span>
+      <span class="eng-chip" id="eng-tongyi" onclick="selectEngine('tongyi')">通义</span>
+      <span class="eng-chip" id="eng-huoshan" onclick="selectEngine('huoshan')">火山</span>
+    </div>
+    <div class="chat-modal-body" id="modal-body">
+      <div class="empty-hint">选择人格体和引擎后，开始对话。</div>
+    </div>
+    <div class="chat-modal-ft">
+      <div class="chat-mod-thinking" id="modal-thinking">
+        <span class="dot"></span><span class="dot"></span><span class="dot"></span>
+        <span style="margin-left:8px">思考中...</span>
+      </div>
+      <div class="chat-mod-tools" id="modal-tools"></div>
+      <div class="chat-inp-row">
+        <input type="text" placeholder="输入消息，按 Enter 发送..." id="modal-input" onkeydown="if(event.key==='Enter')modalSend()" disabled>
+        <button onclick="modalSend()" id="modal-send" disabled>发送</button>
+      </div>
+      <div class="chat-mod-status" id="modal-status"></div>
+    </div>
   </div>
 </div>
 
 <script>
+// ===== 星星生成 =====
+(function(){
+  const layer = document.getElementById('star-layer');
+  for(let i=0;i<80;i++){
+    const s = document.createElement('div');
+    s.className = 'star star-s';
+    s.style.left = Math.random()*100+'%';
+    s.style.top = Math.random()*100+'%';
+    s.style.width = s.style.height = (Math.random()*2.5+0.5)+'px';
+    s.style.setProperty('--d', (Math.random()*10+6)+'s');
+    s.style.animationDelay = (Math.random()*10)+'s';
+    layer.appendChild(s);
+  }
+  for(let i=0;i<30;i++){
+    const s = document.createElement('div');
+    s.className = 'star star-m';
+    s.style.left = Math.random()*100+'%';
+    s.style.top = Math.random()*100+'%';
+    s.style.width = s.style.height = (Math.random()*3+1.2)+'px';
+    s.style.setProperty('--d', (Math.random()*8+10)+'s');
+    s.style.animationDelay = (Math.random()*12)+'s';
+    layer.appendChild(s);
+  }
+  for(let i=0;i<15;i++){
+    const s = document.createElement('div');
+    s.className = 'star star-l';
+    s.style.left = Math.random()*100+'%';
+    s.style.top = Math.random()*100+'%';
+    s.style.width = s.style.height = (Math.random()*2+1.5)+'px';
+    s.style.setProperty('--d', (Math.random()*10+12)+'s');
+    s.style.animationDelay = (Math.random()*15)+'s';
+    layer.appendChild(s);
+  }
+})();
+
+// ===== 状态变量 =====
 let currentPersona = 'shuangyan';
 let currentEngine = 'deepseek';
 let isStreaming = false;
@@ -362,29 +555,193 @@ let isTempUser = false;
 let tempCode = '';
 let chatHistory = [];
 
-// ─── 人格体选择 ───────────────────
+// ===== 人格体选择 =====
 function selectPersona(p) {
   currentPersona = p;
-  document.querySelectorAll('.p-dot').forEach(el => el.classList.remove('active'));
-  document.getElementById('p-' + p).classList.add('active');
-  document.querySelectorAll('#chat-card .chip:first-child, #chat-card .chip:nth-child(2)').forEach(el => el.classList.remove('active'));
-  document.getElementById('chip-' + p).classList.add('active');
-  if (p === 'shuangyan') document.getElementById('chip-sy').classList.add('active');
-  if (p === 'zhuyuan') document.getElementById('chip-zy').classList.add('active');
+  document.querySelectorAll('.p-item').forEach(el => el.classList.remove('active'));
+  document.querySelectorAll('.p-item .p-status').forEach(el => el.textContent = '可用');
+  const tgt = document.getElementById('p-' + p);
+  if(tgt){
+    tgt.classList.add('active');
+    tgt.querySelector('.p-status').textContent = '对话中';
+    tgt.querySelector('.p-status').className = 'p-status ac';
+  }
+  // 更新模态卡片标题
+  const names = {shuangyan:'霜砚',zhuyuan:'铸渊'};
+  const icons = {shuangyan:'❄',zhuyuan:'⚔'};
+  document.getElementById('modal-p-name').textContent = names[p];
+  document.getElementById('modal-p-icon').textContent = icons[p];
 }
 
-// ─── 引擎选择 ───────────────────
+// ===== 引擎选择 =====
 function selectEngine(e) {
   currentEngine = e;
-  document.querySelectorAll('.chip').forEach(el => {
-    if (['deepseek','zhipu','tongyi','huoshan'].some(n => el.id === 'chip-' + n)) {
-      el.classList.remove('active');
-    }
-  });
-  document.getElementById('chip-' + e).classList.add('active');
+  document.querySelectorAll('.eng-chip').forEach(el => el.classList.remove('active'));
+  const tgt = document.getElementById('eng-' + e);
+  if(tgt) tgt.classList.add('active');
 }
 
-// ─── 登录 ───────────────────────
+// ===== 打开/关闭聊天模态 =====
+function openChat() {
+  const logged = localStorage.getItem('logged_in') === 'true' || isTempUser;
+  if (!logged) {
+    document.getElementById('login-section').scrollIntoView({behavior:'smooth'});
+    return;
+  }
+  const modal = document.getElementById('chat-modal');
+  modal.classList.add('open');
+  document.body.style.overflow = 'hidden';
+  // 更新模态标题
+  const names = {shuangyan:'霜砚',zhuyuan:'铸渊'};
+  const icons = {shuangyan:'❄',zhuyuan:'⚔'};
+  document.getElementById('modal-p-name').textContent = names[currentPersona];
+  document.getElementById('modal-p-icon').textContent = icons[currentPersona];
+  // 同步引擎选择
+  document.querySelectorAll('.eng-chip').forEach(el => el.classList.remove('active'));
+  const e = document.getElementById('eng-' + currentEngine);
+  if(e) e.classList.add('active');
+  setTimeout(() => document.getElementById('modal-input').focus(), 100);
+}
+
+function closeChat() {
+  const modal = document.getElementById('chat-modal');
+  modal.classList.remove('open');
+  document.body.style.overflow = '';
+}
+
+// ===== 发送消息 =====
+async function modalSend() {
+  const input = document.getElementById('modal-input');
+  const msg = input.value.trim();
+  if (!msg || isStreaming) return;
+  input.value = '';
+  appendMsg('user', msg);
+  chatHistory.push({role:'user', content: msg});
+  
+  const body = document.getElementById('modal-body');
+  const hint = body.querySelector('.empty-hint');
+  if(hint) hint.style.display = 'none';
+  
+  const status = document.getElementById('modal-status');
+  const thinking = document.getElementById('modal-thinking');
+  const tools = document.getElementById('modal-tools');
+  
+  isStreaming = true;
+  input.disabled = true;
+  document.getElementById('modal-send').disabled = true;
+  thinking.style.display = 'flex';
+  status.textContent = '';
+  tools.innerHTML = '';
+  
+  // 机器人消息占位
+  const pName = currentPersona === 'zhuyuan' ? '铸渊' : '霜砚';
+  const pIcon = currentPersona === 'zhuyuan' ? '⚔' : '❄';
+  const botDiv = document.createElement('div');
+  botDiv.className = 'msg bot';
+  botDiv.innerHTML = '<div class="msg-av">'+pIcon+'</div><div class="msg-con"><div class="msg-nm">'+pName+'</div><div class="msg-bb" id="stream-bb"></div></div>';
+  body.appendChild(botDiv);
+  body.scrollTop = body.scrollHeight;
+  
+  const bubble = document.getElementById('stream-bb');
+  let fullText = '';
+  
+  try {
+    const user = localStorage.getItem('current_user') || (isTempUser ? tempCode : '');
+    const res = await fetch('/api/chat-v2', {
+      method: 'POST', headers: {'Content-Type':'application/json'},
+      body: JSON.stringify({
+        persona: currentPersona,
+        engine: currentEngine,
+        message: msg,
+        history: chatHistory.slice(-60),
+        user: user,
+        isTemp: isTempUser
+      })
+    });
+    
+    if (!res.ok) {
+      throw new Error('HTTP ' + res.status + ': ' + res.statusText);
+    }
+    
+    const reader = res.body.getReader();
+    const decoder = new TextDecoder();
+    let buffer = '';
+    
+    while (true) {
+      const {done, value} = await reader.read();
+      if (done) break;
+      buffer += decoder.decode(value, {stream: true});
+      
+      const lines = buffer.split('\n');
+      buffer = lines.pop() || '';
+      
+      for (const line of lines) {
+        const t = line.trim();
+        if (!t || t.startsWith(':')) continue;
+        if (t === 'data: [DONE]') continue;
+        if (t.startsWith('data: ')) {
+          try {
+            const data = JSON.parse(t.slice(6));
+            if (data.token) {
+              fullText += data.token;
+              bubble.textContent = fullText;
+              body.scrollTop = body.scrollHeight;
+            }
+            if (data.type === 'tool-call') {
+              addToolBadge('🔧 正在调用 ' + data.name + '...', false);
+            }
+            if (data.type === 'tool-result') {
+              addToolBadge('✅ ' + data.name + ' 已返回真实结果', false);
+            }
+            if (data.type === 'tool-unavailable') {
+              addToolBadge('⚠️ 当前没有「' + data.name + '」工具', true);
+            }
+          } catch(e) {}
+        }
+      }
+    }
+  } catch(e) {
+    console.error('Chat error:', e);
+    bubble.textContent = '连接失败: ' + e.message;
+  }
+  
+  thinking.style.display = 'none';
+  isStreaming = false;
+  input.disabled = false;
+  document.getElementById('modal-send').disabled = false;
+  
+  if (fullText) {
+    chatHistory.push({role:'assistant', content: fullText});
+  }
+  bubble.removeAttribute('id');
+}
+
+function appendMsg(role, text) {
+  const body = document.getElementById('modal-body');
+  const hint = body.querySelector('.empty-hint');
+  if(hint) hint.style.display = 'none';
+  const div = document.createElement('div');
+  div.className = 'msg ' + role;
+  const n = role === 'user' ? '你' : (currentPersona === 'zhuyuan' ? '铸渊' : '霜砚');
+  const icon = role === 'user' ? '☀' : (currentPersona === 'zhuyuan' ? '⚔' : '❄');
+  div.innerHTML = '<div class="msg-av">'+icon+'</div><div class="msg-con"><div class="msg-nm">'+n+'</div><div class="msg-bb">'+escapeHtml(text)+'</div></div>';
+  body.appendChild(div);
+  body.scrollTop = body.scrollHeight;
+}
+
+function addToolBadge(text, warn) {
+  const area = document.getElementById('modal-tools');
+  const badge = document.createElement('span');
+  badge.className = 'tool-badge' + (warn ? ' warn' : '');
+  badge.textContent = text;
+  area.appendChild(badge);
+}
+
+function escapeHtml(t) {
+  return t.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+}
+
+// ===== 登录 =====
 async function handleLogin() {
   const u = document.getElementById('login-user').value.trim();
   const p = document.getElementById('login-pass').value;
@@ -415,12 +772,12 @@ function showLoginErr(msg) {
 }
 
 function showLoggedIn(username) {
-  document.getElementById('login-card').style.display = 'none';
-  document.getElementById('logged-in-card').style.display = 'block';
+  document.getElementById('login-panel').style.display = 'none';
+  document.getElementById('logged-in-bar').style.display = 'flex';
   document.getElementById('user-name').textContent = username;
   document.getElementById('user-avatar').textContent = username[0].toUpperCase();
   document.getElementById('login-toggle').textContent = username;
-  unlockChat();
+  unlockControls();
   unlockDownloads();
 }
 
@@ -428,12 +785,13 @@ function logout() {
   localStorage.removeItem('current_user');
   localStorage.removeItem('is_admin');
   localStorage.removeItem('logged_in');
-  document.getElementById('logged-in-card').style.display = 'none';
-  document.getElementById('login-card').style.display = 'block';
+  document.getElementById('logged-in-bar').style.display = 'none';
+  document.getElementById('login-panel').style.display = 'flex';
   document.getElementById('login-toggle').textContent = '登录';
   document.getElementById('login-user').value = '';
-  lockChat();
+  lockControls();
   lockDownloads();
+  closeChat();
 }
 
 function goToRepo() {
@@ -442,143 +800,20 @@ function goToRepo() {
 }
 
 function toggleLogin() {
-  document.getElementById('login-area').scrollIntoView({behavior:'smooth'});
+  document.getElementById('login-section').scrollIntoView({behavior:'smooth'});
 }
 
-// ─── 聊天 ───────────────────────
-async function sendChat() {
-  const input = document.getElementById('chat-input');
-  const msg = input.value.trim();
-  if (!msg || isStreaming) return;
-  
-  input.value = '';
-  appendMessage('user', msg);
-  chatHistory.push({role:'user', content: msg});
-  
-  const box = document.getElementById('chat-box');
-  const status = document.getElementById('chat-status');
-  const thinking = document.getElementById('chat-thinking');
-  
-  isStreaming = true;
-  input.disabled = true;
-  document.getElementById('chat-send').disabled = true;
-  thinking.style.display = 'flex';
-  status.textContent = '';
-  
-  // 添加占位
-  const respDiv = document.createElement('div');
-  respDiv.className = 'chat-msg bot';
-  respDiv.innerHTML = '<span class="name">' + (currentPersona === 'zhuyuan' ? '铸渊' : '霜砚') + '：</span><span class="content" id="streaming-content"></span>';
-  box.appendChild(respDiv);
-  box.scrollTop = box.scrollHeight;
-  
-  const contentEl = document.getElementById('streaming-content');
-  let fullText = '';
-  
-  try {
-    const user = localStorage.getItem('current_user') || (isTempUser ? tempCode : '');
-    const res = await fetch('/api/chat-v2', {
-      method: 'POST', headers: {'Content-Type':'application/json'},
-      body: JSON.stringify({
-        persona: currentPersona,
-        engine: currentEngine,
-        message: msg,
-        history: chatHistory.slice(-60),
-        user: user,
-        isTemp: isTempUser
-      })
-    });
-    
-    const reader = res.body.getReader();
-    const decoder = new TextDecoder();
-    let buffer = '';
-    
-    while (true) {
-      const {done, value} = await reader.read();
-      if (done) break;
-      buffer += decoder.decode(value, {stream: true});
-      
-      const lines = buffer.split('\n');
-      buffer = lines.pop() || '';
-      
-      for (const line of lines) {
-        const t = line.trim();
-        if (!t || t.startsWith(':')) continue;
-        if (t === 'data: [DONE]') continue;
-        if (t.startsWith('data: ')) {
-          try {
-            const data = JSON.parse(t.slice(6));
-            if (data.token) {
-              fullText += data.token;
-              contentEl.textContent = fullText;
-              box.scrollTop = box.scrollHeight;
-            }
-            if (data.type === 'tool-call') {
-              showToolMsg('🔧 正在调用 ' + data.name + '...', false);
-            }
-            if (data.type === 'tool-result') {
-              showToolMsg('✅ ' + data.name + ' 已返回真实结果', false);
-            }
-            if (data.type === 'tool-unavailable') {
-              showToolMsg('⚠️ 当前没有「' + data.name + '」工具', true);
-            }
-          } catch(e) {}
-        }
-      }
-    }
-  } catch(e) {
-    contentEl.textContent = '连接失败: ' + e.message;
-  }
-  
-  thinking.style.display = 'none';
-  isStreaming = false;
-  input.disabled = false;
-  document.getElementById('chat-send').disabled = false;
-  
-  if (fullText) {
-    chatHistory.push({role:'assistant', content: fullText});
-  }
-  
-  // 注销流式内容元素的id
-  respDiv.querySelector('.content').removeAttribute('id');
+function unlockControls() {
+  document.getElementById('modal-input').disabled = false;
+  document.getElementById('modal-send').disabled = false;
+  document.getElementById('modal-status').textContent = '已登录 · 点击人格体开始对话';
+}
+function lockControls() {
+  document.getElementById('modal-input').disabled = true;
+  document.getElementById('modal-send').disabled = true;
+  document.getElementById('modal-status').textContent = '请登录后开始对话';
 }
 
-function appendMessage(role, text) {
-  const box = document.getElementById('chat-box');
-  const div = document.createElement('div');
-  div.className = 'chat-msg ' + role;
-  const name = role === 'user' ? '你' : (currentPersona === 'zhuyuan' ? '铸渊' : '霜砚');
-  div.innerHTML = '<span class="name">' + name + '：</span><span class="content">' + escapeHtml(text) + '</span>';
-  box.appendChild(div);
-  box.scrollTop = box.scrollHeight;
-}
-
-function showToolMsg(text, unavailable) {
-  const box = document.getElementById('chat-box');
-  const div = document.createElement('div');
-  div.className = 'chat-tool-msg' + (unavailable ? ' unavailable' : '');
-  div.textContent = text;
-  box.appendChild(div);
-  box.scrollTop = box.scrollHeight;
-}
-
-function escapeHtml(t) {
-  return t.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
-}
-
-// ─── 聊天锁定/解锁 ────────────────
-function unlockChat() {
-  document.getElementById('chat-input').disabled = false;
-  document.getElementById('chat-send').disabled = false;
-  document.getElementById('chat-status').textContent = '已登录 · 可开始对话';
-}
-function lockChat() {
-  document.getElementById('chat-input').disabled = true;
-  document.getElementById('chat-send').disabled = true;
-  document.getElementById('chat-status').textContent = '请登录后开始对话';
-}
-
-// ─── 下载锁定/解锁 ────────────────
 function unlockDownloads() {
   document.getElementById('dl-locked').style.display = 'none';
   document.getElementById('dl-grid').style.display = 'grid';
@@ -590,7 +825,12 @@ function lockDownloads() {
   document.getElementById('dl-tag').textContent = '登录后可下载';
 }
 
-// ─── 临时访问码 ──────────────────
+// ===== 临时访问码 =====
+function showTempInput() {
+  const block = document.getElementById('temp-code-block');
+  block.style.display = block.style.display === 'none' ? 'block' : 'none';
+}
+
 async function genTempCode() {
   try {
     const r = await fetch('/api/chat-v2/generate-temp-code', {
@@ -601,7 +841,7 @@ async function genTempCode() {
     if (d.ok) {
       const el = document.getElementById('temp-code-result');
       el.style.display = 'block';
-      el.innerHTML = '🔑 临时访问码：<strong>' + d.code + '</strong><br><span style="font-size:12px;color:var(--faint)">对方输入后可体验20条对话</span>';
+      el.innerHTML = '🔑 临时访问码：<strong>' + d.code + '</strong><br><span style="font-size:13px;color:var(--text-faint)">对方输入后可体验20条对话</span>';
     } else {
       alert(d.message || '生成失败');
     }
@@ -620,22 +860,53 @@ async function validateTempCode() {
     if (d.ok) {
       isTempUser = true;
       tempCode = code;
-      document.getElementById('temp-code-input').style.display = 'none';
-      unlockChat();
-      document.getElementById('chat-status').textContent = '临时访问模式 · 剩余 ' + d.remain + ' 条';
+      document.getElementById('temp-code-block').style.display = 'none';
+      unlockControls();
+      document.getElementById('modal-status').textContent = '临时访问模式 · 剩余 ' + d.remain + ' 条';
     } else {
-      document.getElementById('temp-code-err').textContent = d.message;
-      document.getElementById('temp-code-err').style.display = 'block';
+      const el = document.getElementById('temp-code-err');
+      el.textContent = d.message;
+      el.style.display = 'block';
     }
   } catch(e) { alert('验证失败'); }
 }
 
+// ===== Notion =====
+async function connectNotion() {
+  try { window.location.href = "/api/notion/connect?user_key=default"; } catch(e) {}
+}
 
-async function connectNotion(){try{window.location.href="/api/notion/connect?user_key=default"}catch(e){}}
-async function checkNt(){try{const r=await fetch("/api/notion/status");const d=await r.json();if(!d.ok||!d.connected_users||!d.connected_users.length)return;document.getElementById("notion-label").textContent="✅ "+d.connected_users[0].workspace}catch(e){}}
-setTimeout(checkNt,3000);
-async function sendMessage(){const n=(document.getElementById("msg-name").value||"").trim()||"匿名";const m=(document.getElementById("msg-content").value||"").trim();if(!m){document.getElementById("msg-status").textContent="请写入内容";return}try{const r=await fetch("/api/bulletin",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({name:n,title:(document.getElementById("msg-title").value||"").trim(),content:m})});const d=await r.json();if(d.ok){document.getElementById("msg-status").textContent="✅ 留言已送达";document.getElementById("msg-content").value=""}else{document.getElementById("msg-status").textContent=d.message||"发送失败"}}catch(e){document.getElementById("msg-status").textContent="连接失败"}}
-// ─── 自动恢复登录 ────────────────
+async function checkNotion() {
+  try {
+    const r = await fetch("/api/notion/status");
+    const d = await r.json();
+    if (!d.ok || !d.connected_users || !d.connected_users.length) return;
+    document.getElementById("notion-label").textContent = "✅ " + d.connected_users[0].workspace;
+  } catch(e) {}
+}
+setTimeout(checkNotion, 3000);
+
+// ===== 留言 =====
+async function sendMessage() {
+  const n = (document.getElementById('msg-name').value || '').trim() || '匿名';
+  const m = (document.getElementById('msg-content').value || '').trim();
+  if (!m) { document.getElementById('msg-status').textContent = '请写入内容'; return; }
+  try {
+    const r = await fetch('/api/bulletin', {
+      method: 'POST', headers: {'Content-Type':'application/json'},
+      body: JSON.stringify({name:n, title:(document.getElementById('msg-title').value||'').trim(), content:m})
+    });
+    const d = await r.json();
+    if (d.ok) {
+      document.getElementById('msg-status').textContent = '✅ 留言已送达';
+      document.getElementById('msg-content').value = '';
+    } else {
+      document.getElementById('msg-status').textContent = d.message || '发送失败';
+    }
+  } catch(e) { document.getElementById('msg-status').textContent = '连接失败'; }
+}
+
+// ===== 恢复登录状态 =====
 (function(){
   const u = localStorage.getItem('current_user');
   if (u && localStorage.getItem('logged_in') === 'true') {
@@ -647,4 +918,4 @@ async function sendMessage(){const n=(document.getElementById("msg-name").value|
 })();
 </script>
 </body>
-</html>
+</html>
\ No newline at end of file
