diff --git a/public/admin.html b/public/admin.html
index ef336b0..94cc966 100644
--- a/public/admin.html
+++ b/public/admin.html
@@ -1,20 +1,29 @@
 <!doctype html>
 <html lang="zh-CN">
+
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>SMS Gateway 管理台</title>
+  <title>SMS Gateway · 管理台</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet"
+    href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap">
   <link rel="stylesheet" href="/assets/admin.css">
 </head>
+
 <body>
   <header class="top-nav">
     <div class="top-nav__inner">
       <a class="brand" href="/admin" aria-label="SMS Gateway 管理台">
-        <span class="brand__mark" aria-hidden="true">✣</span>
-        <span>SMS Gateway</span>
+        <svg class="brand__mark" viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M12 1v22M1 12h22M3.5 3.5l17 17M20.5 3.5l-17 17" stroke="currentColor" stroke-width="2.4"
+            stroke-linecap="round" fill="none" />
+        </svg>
+        <span class="brand__name">SMS Gateway</span>
       </a>
       <nav class="nav-links" aria-label="管理导航">
-        <a href="#status">状态</a>
+        <a href="#dashboard">状态</a>
         <a href="#inbox">收件箱</a>
         <a href="#send">短信</a>
         <a href="#console">AT 控制台</a>
@@ -22,104 +31,139 @@
       </nav>
       <div class="top-nav__actions">
         <button class="button button--secondary" id="pushSettingsButton" type="button">推送渠道</button>
-        <button class="button button--secondary" id="refreshButton" type="button">刷新状态</button>
       </div>
     </div>
   </header>
 
   <main>
+    <!-- ============ HERO ============ -->
     <section class="hero-band" id="status">
       <div class="container hero-grid">
         <div class="hero-copy">
-          <span class="badge badge--coral" id="readyBadge">连接检测中</span>
-          <h1>短信网关管理台</h1>
-          <p>集中查看 ML307A 模组状态、发送短信、执行 AT 命令，并检查运行日志。</p>
+          <span class="eyebrow eyebrow--coral">
+            <span class="eyebrow__dot" aria-hidden="true"></span>
+            <span id="readyBadge">连接检测中</span>
+          </span>
+          <h1>短信<em>网关</em><br>管理台</h1>
+          <p class="lede">集中查看 ML307A 模组状态、收发短信、执行 AT 命令、检查运行日志。</p>
+          <div class="hero-actions">
+            <a class="text-link" href="#send">发送短信</a>
+            <span class="hero-divider" aria-hidden="true">·</span>
+            <a class="text-link" href="#console">查看 AT 控制台</a>
+          </div>
         </div>
 
-        <div class="product-panel" aria-label="运行摘要">
-          <div class="panel-header">
-            <span>runtime</span>
-            <strong id="panelStatus">loading</strong>
+        <aside class="runtime-card" aria-label="运行摘要">
+          <header class="runtime-card__header">
+            <span class="runtime-card__label">
+              <svg class="spike spike--coral" viewBox="0 0 24 24" aria-hidden="true">
+                <path d="M12 1v22M1 12h22M3.5 3.5l17 17M20.5 3.5l-17 17" stroke="currentColor" stroke-width="2.4"
+                  stroke-linecap="round" fill="none" />
+              </svg>
+              runtime
+            </span>
+            <span class="runtime-card__status">
+              <span class="status-dot" id="panelStatusDot" aria-hidden="true"></span>
+              <strong id="panelStatus">loading</strong>
+            </span>
+          </header>
+          <div class="runtime-card__hero">
+            <span class="runtime-card__caption">uptime</span>
+            <span class="runtime-card__value" id="uptime">--</span>
           </div>
-          <dl class="runtime-list">
+          <dl class="runtime-card__meta">
             <div>
-              <dt>模组</dt>
-              <dd id="modelName">--</dd>
-            </div>
-            <div>
-              <dt>运营商</dt>
+              <dt>operator</dt>
               <dd id="operator">--</dd>
             </div>
             <div>
-              <dt>信号</dt>
+              <dt>signal</dt>
               <dd id="signalQuality">--</dd>
             </div>
-            <div>
-              <dt>移动数据</dt>
-              <dd id="mobileDataSummary">--</dd>
-            </div>
-            <div>
-              <dt>运行时长</dt>
-              <dd id="uptime">--</dd>
-            </div>
           </dl>
-        </div>
+        </aside>
       </div>
     </section>
 
-    <section class="section-band section-band--soft">
+    <!-- ============ STATUS BENTO ============ -->
+    <section class="section-band section-band--soft" id="dashboard">
       <div class="container">
         <div class="section-heading">
-          <h2>当前状态</h2>
-          <p>这些数据来自模组实时 AT 查询，刷新时会串行读取，避免同时发送多条 AT 命令。</p>
+          <div>
+            <span class="eyebrow eyebrow--spike">
+              <svg class="spike spike--coral" viewBox="0 0 24 24" aria-hidden="true">
+                <path d="M12 1v22M1 12h22M3.5 3.5l17 17M20.5 3.5l-17 17" stroke="currentColor" stroke-width="2.4"
+                  stroke-linecap="round" fill="none" />
+              </svg>
+              status board
+            </span>
+            <h2>当前<em>状态</em></h2>
+          </div>
+          <button class="button button--primary" id="refreshButton" type="button">刷新状态</button>
         </div>
-        <div class="status-grid">
-          <article class="feature-card">
-            <span class="eyebrow">connection</span>
+
+        <div class="bento-grid">
+          <article class="bento-hero">
+            <span class="eyebrow eyebrow--coral">
+              <span class="eyebrow__dot" aria-hidden="true"></span>
+              connection
+            </span>
             <h3 id="connectionState">--</h3>
             <p id="connectionHint">等待状态刷新。</p>
           </article>
-          <article class="feature-card">
-            <span class="eyebrow">signal</span>
-            <h3 id="signalValue">--</h3>
-            <p id="signalHint">RSSI 与误码率将在刷新后显示。</p>
-          </article>
-          <article class="feature-card feature-card--control">
+
+          <article class="bento-control">
             <span class="eyebrow">mobile data</span>
             <h3 id="mobileDataState">--</h3>
             <p id="mobileDataHint">启动时会自动关闭移动数据。</p>
-            <div class="feature-card__actions">
-              <button class="button button--secondary button--compact" id="mobileDataToggle" type="button" data-action="disable">强制关闭流量</button>
+            <div class="bento-control__actions">
+              <button class="button button--secondary button--compact" id="mobileDataToggle" type="button"
+                data-action="disable">强制关闭流量</button>
+              <p class="form-status mobile-data-status" id="mobileDataStatus" role="status"></p>
             </div>
-            <p class="form-status mobile-data-status" id="mobileDataStatus" role="status"></p>
           </article>
-          <article class="feature-card">
+        </div>
+
+        <div class="stat-strip">
+          <article class="stat-tile">
+            <span class="eyebrow">signal</span>
+            <span class="stat-tile__value" id="signalValue">--</span>
+            <span class="stat-tile__hint" id="signalHint">RSSI 与误码率将在刷新后显示。</span>
+          </article>
+          <article class="stat-tile">
             <span class="eyebrow">module</span>
-            <h3 id="moduleModel">--</h3>
-            <p id="moduleVersion">--</p>
+            <span class="stat-tile__value" id="moduleModel">--</span>
+            <span class="stat-tile__hint" id="moduleVersion">--</span>
           </article>
-          <article class="feature-card">
-            <span class="eyebrow">sim</span>
-            <h3 id="iccid">--</h3>
-            <p>ICCID 查询来自当前串口模组。</p>
+          <article class="stat-tile">
+            <span class="eyebrow">sim · iccid</span>
+            <span class="stat-tile__value stat-tile__value--mono" id="iccid">--</span>
+            <span class="stat-tile__hint">ICCID 查询来自当前串口模组。</span>
           </article>
         </div>
       </div>
     </section>
 
-    <section class="section-band">
-      <div class="container" id="inbox">
+    <!-- ============ INBOX ============ -->
+    <section class="section-band" id="inbox">
+      <div class="container">
         <div class="section-heading">
           <div>
-            <span class="badge badge--soft">inbox</span>
-            <h2>收到的短信</h2>
+            <span class="eyebrow eyebrow--spike">
+              <svg class="spike spike--coral" viewBox="0 0 24 24" aria-hidden="true">
+                <path d="M12 1v22M1 12h22M3.5 3.5l17 17M20.5 3.5l-17 17" stroke="currentColor" stroke-width="2.4"
+                  stroke-linecap="round" fill="none" />
+              </svg>
+              inbox
+            </span>
+            <h2>收到的<em>短信</em></h2>
           </div>
           <button class="button button--secondary" id="messagesButton" type="button">刷新短信</button>
         </div>
         <div class="inbox-panel">
           <div class="inbox-meta">
             <span id="messageCount">最近 0 条</span>
-            <span>新短信会自动出现在这里</span>
+            <span class="inbox-meta__hint">新短信会自动出现在这里</span>
           </div>
           <div class="message-list" id="messageList" aria-live="polite">
             <p class="empty-state empty-state--light">暂无收到的短信。</p>
@@ -128,21 +172,30 @@
       </div>
     </section>
 
+    <!-- ============ WORKBENCH ============ -->
     <section class="section-band section-band--soft">
       <div class="container workbench-grid">
         <section class="form-card" id="send">
           <div class="section-heading section-heading--compact">
-            <h2>发送短信</h2>
-            <p>使用当前 PDU 模式发送短信，提交后等待模组返回发送结果。</p>
+            <span class="eyebrow eyebrow--spike">
+              <svg class="spike spike--coral" viewBox="0 0 24 24" aria-hidden="true">
+                <path d="M12 1v22M1 12h22M3.5 3.5l17 17M20.5 3.5l-17 17" stroke="currentColor" stroke-width="2.4"
+                  stroke-linecap="round" fill="none" />
+              </svg>
+              compose
+            </span>
+            <h2>发送<em>短信</em></h2>
+            <p>PDU 模式发送，提交后等待模组返回结果。</p>
           </div>
           <form id="smsForm" class="stack-form">
-            <label>
-              <span>目标号码</span>
+            <label class="field">
+              <span class="field__label">目标号码</span>
               <input class="text-input" type="tel" name="phone" autocomplete="tel" placeholder="13800138000" required>
             </label>
-            <label>
-              <span>短信内容</span>
-              <textarea class="text-input text-area" name="message" rows="6" placeholder="输入要发送的短信内容" required></textarea>
+            <label class="field">
+              <span class="field__label">短信内容</span>
+              <textarea class="text-input text-area" name="message" rows="6" placeholder="输入要发送的短信内容"
+                required></textarea>
             </label>
             <div class="form-actions">
               <button class="button button--primary" type="submit">发送短信</button>
@@ -152,27 +205,44 @@
         </section>
 
         <section class="console-card" id="console">
-          <div class="panel-header">
-            <span>AT console</span>
-            <strong id="consoleState">idle</strong>
-          </div>
+          <header class="panel-header">
+            <span class="panel-header__label">
+              <svg class="spike spike--coral" viewBox="0 0 24 24" aria-hidden="true">
+                <path d="M12 1v22M1 12h22M3.5 3.5l17 17M20.5 3.5l-17 17" stroke="currentColor" stroke-width="2.4"
+                  stroke-linecap="round" fill="none" />
+              </svg>
+              at console
+            </span>
+            <span class="panel-header__status">
+              <span class="status-dot status-dot--amber" aria-hidden="true"></span>
+              <strong id="consoleState">idle</strong>
+            </span>
+          </header>
           <form id="atForm" class="at-form">
-            <input class="text-input text-input--dark" name="command" value="AT+CSQ" autocomplete="off" spellcheck="false" required>
-            <button class="button button--secondary-on-dark" type="submit">执行</button>
+            <input class="text-input text-input--mono" name="command" value="AT+CSQ" autocomplete="off"
+              spellcheck="false" required>
+            <button class="button button--primary" type="submit">执行</button>
           </form>
-          <pre class="console-output" id="atOutput">等待命令...</pre>
+          <pre class="console-output" id="atOutput">› 等待命令...</pre>
         </section>
       </div>
     </section>
 
-    <section class="section-band section-band--dark" id="logs">
+    <!-- ============ LOGS ============ -->
+    <section class="section-band" id="logs">
       <div class="container">
-        <div class="dark-heading">
+        <div class="section-heading">
           <div>
-            <span class="badge badge--dark">logs</span>
-            <h2>运行日志</h2>
+            <span class="eyebrow eyebrow--spike">
+              <svg class="spike spike--coral" viewBox="0 0 24 24" aria-hidden="true">
+                <path d="M12 1v22M1 12h22M3.5 3.5l17 17M20.5 3.5l-17 17" stroke="currentColor" stroke-width="2.4"
+                  stroke-linecap="round" fill="none" />
+              </svg>
+              logs
+            </span>
+            <h2>运行<em>日志</em></h2>
           </div>
-          <button class="button button--secondary-on-dark" id="logsButton" type="button">刷新日志</button>
+          <button class="button button--secondary" id="logsButton" type="button">刷新日志</button>
         </div>
         <div class="log-window" id="logWindow" aria-live="polite">
           <p class="empty-state">等待日志加载。</p>
@@ -181,21 +251,32 @@
     </section>
   </main>
 
+  <!-- ============ PUSH MODAL ============ -->
   <div class="modal" id="pushModal" aria-hidden="true">
     <div class="modal__backdrop" data-close-push-modal></div>
     <section class="modal__dialog" role="dialog" aria-modal="true" aria-labelledby="pushModalTitle">
-      <div class="modal__header">
+      <header class="modal__header">
         <div>
-          <span class="badge badge--soft">push</span>
-          <h2 id="pushModalTitle">推送渠道设置</h2>
+          <span class="eyebrow eyebrow--spike">
+            <svg class="spike spike--coral" viewBox="0 0 24 24" aria-hidden="true">
+              <path d="M12 1v22M1 12h22M3.5 3.5l17 17M20.5 3.5l-17 17" stroke="currentColor" stroke-width="2.4"
+                stroke-linecap="round" fill="none" />
+            </svg>
+            push channels
+          </span>
+          <h2 id="pushModalTitle">推送渠道<em>设置</em></h2>
         </div>
-        <button class="icon-button" id="pushModalClose" type="button" aria-label="关闭推送渠道设置">×</button>
-      </div>
+        <button class="icon-button" id="pushModalClose" type="button" aria-label="关闭推送渠道设置">
+          <svg viewBox="0 0 16 16" aria-hidden="true">
+            <path d="M3 3l10 10M13 3L3 13" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
+          </svg>
+        </button>
+      </header>
 
       <div class="push-settings">
         <aside class="channel-list-panel" aria-label="推送渠道列表">
           <div class="panel-header panel-header--light">
-            <span>channels</span>
+            <span class="panel-header__label">channels</span>
             <div class="channel-add">
               <select class="text-input select-input channel-add__select" id="pushAddTypeSelect" aria-label="新增推送类型">
                 <option value="dingtalk">钉钉机器人</option>
@@ -222,13 +303,13 @@
                 <span>启用通道</span>
               </label>
 
-              <label>
-                <span>通道名称</span>
+              <label class="field">
+                <span class="field__label">通道名称</span>
                 <input class="text-input" type="text" name="name" maxlength="80" placeholder="钉钉通知">
               </label>
 
-              <label>
-                <span>推送类型</span>
+              <label class="field">
+                <span class="field__label">推送类型</span>
                 <select class="text-input select-input" name="type">
                   <option value="dingtalk">钉钉机器人</option>
                   <option value="feishu">飞书机器人</option>
@@ -242,29 +323,30 @@
                 </select>
               </label>
 
-              <label class="field-row field-row--wide" data-push-field="url">
-                <span id="pushUrlLabel">Webhook URL</span>
+              <label class="field field-row field-row--wide" data-push-field="url">
+                <span class="field__label" id="pushUrlLabel">Webhook URL</span>
                 <input class="text-input" type="text" name="url" autocomplete="off">
               </label>
 
-              <label class="field-row field-row--wide" data-push-field="secret">
-                <span id="pushSecretLabel">加签密钥</span>
+              <label class="field field-row field-row--wide" data-push-field="secret">
+                <span class="field__label" id="pushSecretLabel">加签密钥</span>
                 <input class="text-input" type="password" name="secret" autocomplete="new-password">
               </label>
 
-              <label class="field-row" data-push-field="key1">
-                <span id="pushKey1Label">Key1</span>
+              <label class="field field-row" data-push-field="key1">
+                <span class="field__label" id="pushKey1Label">Key1</span>
                 <input class="text-input" type="text" name="key1" autocomplete="off">
               </label>
 
-              <label class="field-row" data-push-field="key2">
-                <span id="pushKey2Label">Key2</span>
+              <label class="field field-row" data-push-field="key2">
+                <span class="field__label" id="pushKey2Label">Key2</span>
                 <input class="text-input" type="text" name="key2" autocomplete="off">
               </label>
 
-              <label class="field-row field-row--wide" data-push-field="customBody">
-                <span>自定义请求体 JSON</span>
-                <textarea class="text-input text-area text-area--code" name="customBody" rows="7" spellcheck="false"></textarea>
+              <label class="field field-row field-row--wide" data-push-field="customBody">
+                <span class="field__label">自定义请求体 JSON</span>
+                <textarea class="text-input text-area text-area--code" name="customBody" rows="7"
+                  spellcheck="false"></textarea>
               </label>
             </div>
           </fieldset>
@@ -282,11 +364,19 @@
 
   <footer class="footer">
     <div class="container footer__inner">
-      <span class="brand brand--footer"><span class="brand__mark" aria-hidden="true">✣</span> SMS Gateway</span>
-      <span>Basic Auth protected management surface</span>
+      <span class="brand brand--footer">
+        <svg class="brand__mark" viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M12 1v22M1 12h22M3.5 3.5l17 17M20.5 3.5l-17 17" stroke="currentColor" stroke-width="2.4"
+            stroke-linecap="round" fill="none" />
+        </svg>
+        <span>SMS Gateway</span>
+      </span>
+      <span class="footer__meta">© <span id="footerYear">2026</span> · Basic Auth protected · Built on Node.js +
+        ML307A</span>
     </div>
   </footer>
 
   <script src="/assets/admin.js" type="module"></script>
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/public/assets/admin.css b/public/assets/admin.css
index 604ce79..27a977e 100644
--- a/public/assets/admin.css
+++ b/public/assets/admin.css
@@ -1,59 +1,100 @@
+/* ==========================================================================
+   SMS Gateway · Anthropic-inspired warm editorial theme
+   Cream canvas (#faf9f5) · Coral voltage (#cc785c) · Dark footer close.
+   Serif display (Cormorant Garamond) + sans body (Inter).
+   ========================================================================== */
+
 :root {
+  /* Brand */
   --primary: #cc785c;
   --primary-active: #a9583e;
   --primary-disabled: #e6dfd8;
-  --ink: #141413;
-  --body: #3d3d3a;
-  --body-strong: #252523;
-  --muted: #6c6a64;
-  --muted-soft: #8e8b82;
-  --hairline: #e6dfd8;
-  --hairline-soft: #ebe6df;
+  --accent-teal: #5db8a6;
+  --accent-amber: #e8a55a;
+
+  /* Surfaces */
   --canvas: #faf9f5;
   --surface-soft: #f5f0e8;
   --surface-card: #efe9de;
+  --surface-cream-strong: #e8e0d2;
   --surface-dark: #181715;
   --surface-dark-elevated: #252320;
   --surface-dark-soft: #1f1e1b;
+
+  /* Lines */
+  --hairline: #e6dfd8;
+  --hairline-soft: #ebe6df;
+  --hairline-dark: rgba(250, 249, 245, 0.10);
+  --hairline-dark-soft: rgba(250, 249, 245, 0.06);
+
+  /* Text */
+  --ink: #141413;
+  --body-strong: #252523;
+  --body: #3d3d3a;
+  --muted: #6c6a64;
+  --muted-soft: #8e8b82;
   --on-primary: #ffffff;
   --on-dark: #faf9f5;
   --on-dark-soft: #a09d96;
-  --accent-teal: #5db8a6;
-  --accent-amber: #e8a55a;
+
+  /* Semantic */
   --success: #5db872;
   --warning: #d4a017;
   --error: #c64545;
+
+  /* Type families */
+  --font-serif: "Cormorant Garamond", "EB Garamond", "Tiempos Headline", Georgia, "Times New Roman", serif;
+  --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+
+  /* Spacing */
+  --space-xxs: 4px;
+  --space-xs: 8px;
+  --space-sm: 12px;
+  --space-md: 16px;
+  --space-lg: 24px;
+  --space-xl: 32px;
+  --space-xxl: 48px;
+  --space-section: 96px;
+
+  /* Radii */
+  --r-xs: 4px;
+  --r-sm: 6px;
+  --r-md: 8px;
+  --r-lg: 12px;
+  --r-xl: 16px;
+  --r-pill: 9999px;
 }
 
-* {
-  box-sizing: border-box;
-}
+* { box-sizing: border-box; }
 
 html {
   scroll-behavior: smooth;
+  scroll-padding-top: 80px;
 }
 
 body {
   margin: 0;
   background: var(--canvas);
   color: var(--body);
-  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  font-family: var(--font-sans);
   font-size: 16px;
   line-height: 1.55;
   letter-spacing: 0;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
-button,
-input,
-textarea,
-select {
+button, input, textarea, select {
   font: inherit;
   letter-spacing: 0;
 }
 
-a {
-  color: inherit;
-  text-decoration: none;
+a { color: inherit; text-decoration: none; }
+
+::selection {
+  background: rgba(204, 120, 92, 0.22);
+  color: var(--ink);
 }
 
 .container {
@@ -61,12 +102,117 @@ a {
   margin: 0 auto;
 }
 
+/* ---------- Type primitives ---------------------------------------------- */
+
+h1, h2, h3, h4, p { margin: 0; }
+
+h1, h2 {
+  color: var(--ink);
+  font-family: var(--font-serif);
+  font-weight: 400;
+}
+
+h1 {
+  font-size: clamp(44px, 6.4vw, 72px);
+  line-height: 1.02;
+  letter-spacing: -1.8px;
+}
+
+/* italic serif as editorial flourish — DESIGN allows italic for emphasis */
+h1 em, h2 em {
+  font-style: italic;
+  font-weight: 400;
+  color: var(--primary);
+}
+
+h2 {
+  font-size: clamp(30px, 3.6vw, 40px);
+  line-height: 1.12;
+  letter-spacing: -0.6px;
+  margin-top: 14px;
+}
+
+h3 {
+  color: var(--ink);
+  font-family: var(--font-serif);
+  font-size: 32px;
+  font-weight: 400;
+  line-height: 1.1;
+  letter-spacing: -0.4px;
+}
+
+.lede {
+  max-width: 520px;
+  margin-top: 24px;
+  color: var(--body-strong);
+  font-size: 18px;
+  line-height: 1.6;
+}
+
+/* ---------- Spike-mark (Anthropic 4-spoke radial) ------------------------ */
+
+.spike {
+  width: 12px;
+  height: 12px;
+  flex: none;
+  color: var(--ink);
+}
+
+.spike--coral { color: var(--primary); }
+
+/* ---------- Eyebrows (caption-uppercase) --------------------------------- */
+
+.eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-family: var(--font-sans);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.4;
+  letter-spacing: 1.5px;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+.eyebrow__dot {
+  width: 6px;
+  height: 6px;
+  border-radius: var(--r-pill);
+  background: var(--muted-soft);
+}
+
+.eyebrow--coral {
+  color: var(--primary);
+}
+
+.eyebrow--coral .eyebrow__dot {
+  background: var(--primary);
+  box-shadow: 0 0 0 3px rgba(204, 120, 92, 0.18);
+}
+
+.eyebrow--spike { gap: 6px; }
+
+/* Coral inline text-link */
+.text-link {
+  color: var(--primary);
+  font-weight: 500;
+  font-size: 14px;
+  transition: color 120ms ease;
+}
+
+.text-link:hover { color: var(--primary-active); }
+
+/* ---------- Top nav ------------------------------------------------------- */
+
 .top-nav {
   position: sticky;
   top: 0;
-  z-index: 10;
+  z-index: 30;
   height: 64px;
-  background: rgba(250, 249, 245, 0.94);
+  background: rgba(250, 249, 245, 0.88);
+  backdrop-filter: saturate(180%) blur(14px);
+  -webkit-backdrop-filter: saturate(180%) blur(14px);
   border-bottom: 1px solid var(--hairline-soft);
 }
 
@@ -84,37 +230,44 @@ a {
   align-items: center;
   gap: 10px;
   color: var(--ink);
+  font-family: var(--font-sans);
   font-size: 15px;
   font-weight: 500;
+  letter-spacing: -0.1px;
   white-space: nowrap;
 }
 
 .brand__mark {
+  width: 20px;
+  height: 20px;
   color: var(--ink);
-  font-size: 18px;
-  line-height: 1;
+  flex: none;
+}
+
+.brand__name {
+  font-family: var(--font-sans);
+  font-size: 15px;
+  font-weight: 600;
+  letter-spacing: -0.2px;
 }
 
 .nav-links {
   display: flex;
   align-items: center;
-  gap: 18px;
-  margin-left: 16px;
+  gap: 22px;
+  margin-left: 24px;
   color: var(--muted);
   font-size: 14px;
   font-weight: 500;
 }
 
-.nav-links a:focus-visible,
-.button:focus-visible,
-.icon-button:focus-visible,
-.channel-list__item:focus-visible,
-.text-input:focus-visible,
-.select-input:focus-visible {
-  outline: 3px solid rgba(204, 120, 92, 0.18);
-  outline-offset: 2px;
+.nav-links a {
+  padding: 6px 0;
+  transition: color 120ms ease;
 }
 
+.nav-links a:hover { color: var(--ink); }
+
 .top-nav__actions {
   margin-left: auto;
   display: flex;
@@ -122,23 +275,28 @@ a {
   gap: 10px;
 }
 
+/* ---------- Buttons ------------------------------------------------------- */
+
 .button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  gap: 8px;
   min-height: 40px;
   border: 0;
-  border-radius: 8px;
+  border-radius: var(--r-md);
   padding: 12px 20px;
+  font-family: var(--font-sans);
   font-size: 14px;
   font-weight: 500;
   line-height: 1;
   cursor: pointer;
+  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
 }
 
 .button:disabled {
   cursor: not-allowed;
-  opacity: 0.68;
+  opacity: 0.55;
 }
 
 .button--primary {
@@ -146,9 +304,7 @@ a {
   color: var(--on-primary);
 }
 
-.button--primary:active {
-  background: var(--primary-active);
-}
+.button--primary:active { background: var(--primary-active); }
 
 .button--secondary {
   background: var(--canvas);
@@ -156,20 +312,34 @@ a {
   border: 1px solid var(--hairline);
 }
 
+.button--secondary:active {
+  background: var(--surface-card);
+  border-color: var(--surface-cream-strong);
+}
+
 .button--secondary-on-dark {
   background: var(--surface-dark-elevated);
   color: var(--on-dark);
+  border: 1px solid var(--hairline-dark);
+}
+
+.button--ghost-on-coral {
+  background: transparent;
+  color: var(--on-primary);
+  border: 1px solid rgba(255, 255, 255, 0.4);
 }
 
 .button--danger {
   border: 1px solid rgba(198, 69, 69, 0.28);
-  background: rgba(198, 69, 69, 0.1);
+  background: rgba(198, 69, 69, 0.08);
   color: var(--error);
 }
 
+.button--danger:active { background: rgba(198, 69, 69, 0.16); }
+
 .button--compact {
   min-height: 32px;
-  padding: 8px 12px;
+  padding: 8px 14px;
   font-size: 13px;
 }
 
@@ -180,510 +350,694 @@ a {
   width: 36px;
   height: 36px;
   border: 1px solid var(--hairline);
-  border-radius: 9999px;
+  border-radius: var(--r-pill);
   background: var(--canvas);
   color: var(--ink);
-  font-size: 22px;
-  line-height: 1;
   cursor: pointer;
+  transition: background-color 120ms ease;
 }
 
+.icon-button:hover { background: var(--surface-card); }
+.icon-button svg { width: 14px; height: 14px; }
+
+.button:focus-visible,
+.icon-button:focus-visible,
+.channel-list__item:focus-visible,
+.text-input:focus-visible,
+.select-input:focus-visible,
+.nav-links a:focus-visible,
+.text-link:focus-visible {
+  outline: 3px solid rgba(204, 120, 92, 0.28);
+  outline-offset: 2px;
+}
+
+/* ---------- Hero ---------------------------------------------------------- */
+
 .hero-band {
-  padding: 72px 0 96px;
+  padding: var(--space-section) 0;
   background: var(--canvas);
+  position: relative;
+  overflow: hidden;
+}
+
+.hero-band::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background:
+    radial-gradient(circle at 88% 8%, rgba(204, 120, 92, 0.08), transparent 50%),
+    radial-gradient(circle at 12% 92%, rgba(93, 184, 166, 0.05), transparent 45%);
+  pointer-events: none;
 }
 
 .hero-grid {
+  position: relative;
   display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(360px, 520px);
+  grid-template-columns: minmax(0, 1.18fr) minmax(340px, 460px);
   align-items: stretch;
-  gap: 48px;
+  gap: var(--space-xxl);
 }
 
 .hero-copy {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  min-height: 340px;
+  min-height: 360px;
+  padding-block: 12px;
 }
 
-h1,
-h2,
-h3,
-p {
-  margin: 0;
-}
+.hero-copy h1 { margin-top: 18px; }
 
-h1,
-h2 {
-  color: var(--ink);
-  font-family: "Cormorant Garamond", "EB Garamond", Georgia, "Times New Roman", serif;
-  font-weight: 500;
-  letter-spacing: 0;
-}
-
-h1 {
-  max-width: 700px;
-  margin-top: 18px;
-  font-size: 64px;
-  line-height: 1.05;
-}
-
-h2 {
-  font-size: 36px;
-  line-height: 1.15;
-}
-
-h3 {
-  color: var(--ink);
-  font-size: 22px;
-  font-weight: 500;
-  line-height: 1.3;
-}
-
-.hero-copy p {
-  max-width: 620px;
-  margin-top: 22px;
-  color: var(--body-strong);
-  font-size: 18px;
-  line-height: 1.55;
-}
-
-.badge {
+.hero-actions {
+  margin-top: 32px;
   display: inline-flex;
   align-items: center;
-  width: max-content;
-  border-radius: 9999px;
-  padding: 4px 12px;
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 1.4;
-  letter-spacing: 0;
+  gap: 14px;
+  flex-wrap: wrap;
 }
 
-.badge--coral {
-  background: var(--primary);
-  color: var(--on-primary);
-}
+.hero-divider { color: var(--muted-soft); }
 
-.badge--dark {
-  background: var(--surface-dark-elevated);
-  color: var(--on-dark);
-}
-
-.badge--soft {
+/* Runtime card (hero right side) */
+.runtime-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-lg);
+  border-radius: var(--r-lg);
   background: var(--surface-card);
-  color: var(--ink);
+  border: 1px solid var(--hairline);
+  padding: var(--space-xl);
+  box-shadow: 0 1px 3px rgba(20, 20, 19, 0.04);
 }
 
-.product-panel,
-.console-card {
-  border-radius: 12px;
-  background: var(--surface-dark);
-  color: var(--on-dark);
-  padding: 32px;
-}
-
-.panel-header {
+.runtime-card__header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 16px;
-  color: var(--on-dark-soft);
-  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 13px;
-}
-
-.panel-header strong {
-  color: var(--accent-teal);
+  gap: var(--space-md);
+  font-family: var(--font-sans);
+  font-size: 12px;
   font-weight: 500;
+  letter-spacing: 1.5px;
+  text-transform: uppercase;
+  color: var(--muted);
 }
 
-.runtime-list {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 16px;
-  margin: 32px 0 0;
+.runtime-card__label {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
 }
 
-.runtime-list div {
-  display: grid;
-  grid-template-columns: 92px minmax(0, 1fr);
-  gap: 16px;
-  padding: 16px 0;
-  border-top: 1px solid rgba(250, 249, 245, 0.1);
+.runtime-card__status {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
 }
 
-.runtime-list dt {
-  color: var(--on-dark-soft);
+.runtime-card__status strong {
+  color: var(--success);
+  font-family: var(--font-sans);
+  font-weight: 500;
+  text-transform: none;
+  letter-spacing: 0;
   font-size: 13px;
 }
 
-.runtime-list dd {
-  margin: 0;
-  overflow-wrap: anywhere;
-  color: var(--on-dark);
-  font-size: 15px;
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: var(--r-pill);
+  background: var(--success);
+  box-shadow: 0 0 0 3px rgba(93, 184, 114, 0.22);
 }
 
+.status-dot--amber {
+  background: var(--accent-amber);
+  box-shadow: 0 0 0 3px rgba(232, 165, 90, 0.22);
+}
+
+.runtime-card__hero {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.runtime-card__caption {
+  color: var(--muted);
+  font-family: var(--font-sans);
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 1.5px;
+  text-transform: uppercase;
+}
+
+.runtime-card__value {
+  font-family: var(--font-serif);
+  font-size: clamp(40px, 4.6vw, 56px);
+  font-weight: 400;
+  line-height: 1.05;
+  letter-spacing: -1px;
+  color: var(--ink);
+}
+
+.runtime-card__meta {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-md);
+  margin: 0;
+  padding-top: var(--space-md);
+  border-top: 1px solid var(--hairline);
+}
+
+.runtime-card__meta div {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.runtime-card__meta dt {
+  color: var(--muted);
+  font-family: var(--font-sans);
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 1.5px;
+  text-transform: uppercase;
+}
+
+.runtime-card__meta dd {
+  margin: 0;
+  color: var(--ink);
+  font-size: 15px;
+  font-weight: 500;
+  letter-spacing: -0.1px;
+  overflow-wrap: anywhere;
+}
+
+/* ---------- Sections ------------------------------------------------------ */
+
 .section-band {
-  padding: 96px 0;
+  padding: var(--space-section) 0;
   background: var(--canvas);
 }
 
-.section-band--soft {
-  background: var(--surface-soft);
-}
-
-.section-band--dark {
-  background: var(--surface-dark);
-}
+.section-band--soft { background: var(--surface-soft); }
 
 .section-heading {
   display: flex;
-  align-items: end;
+  align-items: flex-end;
   justify-content: space-between;
-  gap: 32px;
-  margin-bottom: 32px;
+  gap: var(--space-xl);
+  margin-bottom: var(--space-xl);
 }
 
 .section-heading p {
   max-width: 560px;
   color: var(--muted);
+  font-size: 16px;
+  line-height: 1.6;
 }
 
 .section-heading--compact {
   display: block;
-  margin-bottom: 28px;
+  margin-bottom: var(--space-lg);
 }
 
-.section-heading--compact p {
-  margin-top: 10px;
-}
+.section-heading--compact p { margin-top: var(--space-sm); }
 
-.status-grid {
+/* ---------- Status bento -------------------------------------------------- */
+
+.bento-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 16px;
+  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
+  gap: var(--space-md);
+  margin-bottom: var(--space-md);
 }
 
-.feature-card,
-.form-card {
-  border-radius: 12px;
+.bento-hero {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: var(--space-sm);
+  border-radius: var(--r-lg);
   background: var(--surface-card);
-  padding: 32px;
+  border: 1px solid var(--hairline);
+  padding: var(--space-xl) var(--space-xxl);
+  min-height: 220px;
+  overflow: hidden;
 }
 
-.feature-card {
-  min-height: 190px;
+.bento-hero::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: var(--space-lg);
+  bottom: var(--space-lg);
+  width: 3px;
+  border-radius: var(--r-pill);
+  background: var(--primary);
 }
 
-.feature-card--control {
-  display: grid;
-  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
+.bento-hero h3 {
+  font-family: var(--font-serif);
+  font-size: clamp(38px, 4.6vw, 56px);
+  font-weight: 400;
+  line-height: 1.02;
+  letter-spacing: -1.2px;
+  color: var(--ink);
+  margin-top: 4px;
 }
 
-.feature-card p {
-  margin-top: 14px;
+.bento-hero p {
+  margin-top: 10px;
+  max-width: 520px;
+  color: var(--muted);
+  font-size: 16px;
+  line-height: 1.6;
+}
+
+.bento-control {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+  border-radius: var(--r-lg);
+  background: var(--surface-cream-strong);
+  border: 1px solid var(--hairline);
+  padding: var(--space-xl);
+  min-height: 220px;
+}
+
+.bento-control h3 {
+  font-size: 28px;
+}
+
+.bento-control p {
   color: var(--muted);
   font-size: 14px;
+  line-height: 1.55;
+  flex: 1;
 }
 
-.feature-card__actions {
-  margin-top: 18px;
+.bento-control__actions {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: auto;
 }
 
-.mobile-data-status {
-  min-height: 20px;
-  margin-top: 10px;
-}
+.mobile-data-status { min-height: 18px; }
 
-.eyebrow {
-  display: block;
-  margin-bottom: 18px;
-  color: var(--muted);
-  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 12px;
-  line-height: 1.4;
-}
-
-.workbench-grid {
+/* Stat strip (3-up compact) */
+.stat-strip {
   display: grid;
-  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
-  gap: 24px;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--space-md);
 }
 
+.stat-tile {
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--r-lg);
+  background: var(--surface-card);
+  border: 1px solid var(--hairline);
+  padding: var(--space-lg) var(--space-xl);
+  min-height: 160px;
+  transition: border-color 160ms ease, transform 160ms ease;
+}
+
+.stat-tile:hover {
+  border-color: var(--surface-cream-strong);
+}
+
+.stat-tile .eyebrow { margin-bottom: var(--space-md); }
+
+.stat-tile__value {
+  font-family: var(--font-serif);
+  font-size: clamp(28px, 3vw, 38px);
+  font-weight: 400;
+  line-height: 1.1;
+  letter-spacing: -0.6px;
+  color: var(--ink);
+  overflow-wrap: anywhere;
+}
+
+.stat-tile__value--mono {
+  font-family: var(--font-mono);
+  font-size: 17px;
+  font-weight: 500;
+  letter-spacing: 0;
+}
+
+.stat-tile__hint {
+  margin-top: auto;
+  padding-top: var(--space-sm);
+  color: var(--muted);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+/* ---------- Inbox --------------------------------------------------------- */
+
 .inbox-panel {
-  border-radius: 12px;
+  border-radius: var(--r-lg);
   background: var(--surface-card);
-  padding: 24px;
+  border: 1px solid var(--hairline);
+  padding: var(--space-lg);
 }
 
 .inbox-meta {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 16px;
+  gap: var(--space-md);
   border-bottom: 1px solid var(--hairline);
-  padding-bottom: 16px;
+  padding-bottom: var(--space-md);
   color: var(--muted);
-  font-size: 14px;
+  font-size: 13px;
+}
+
+.inbox-meta__hint {
+  color: var(--muted-soft);
+  font-size: 13px;
+  font-weight: 500;
 }
 
 .message-list {
   display: grid;
-  gap: 12px;
+  gap: var(--space-sm);
   max-height: 520px;
   overflow: auto;
-  padding-top: 16px;
+  padding-top: var(--space-md);
 }
 
 .message-item {
+  position: relative;
   border: 1px solid var(--hairline);
-  border-radius: 12px;
+  border-radius: var(--r-md);
   background: var(--canvas);
-  padding: 18px;
+  padding: var(--space-md) var(--space-lg);
+  transition: border-color 120ms ease, transform 120ms ease;
+}
+
+.message-item:hover {
+  border-color: var(--surface-cream-strong);
 }
 
 .message-item__header {
   display: grid;
   grid-template-columns: minmax(140px, 1fr) auto auto;
   align-items: center;
-  gap: 12px;
+  gap: var(--space-md);
 }
 
 .message-item__header strong {
   overflow-wrap: anywhere;
   color: var(--ink);
   font-size: 16px;
-  font-weight: 500;
+  font-weight: 600;
+  letter-spacing: -0.2px;
 }
 
 .message-item__header time {
   color: var(--muted);
+  font-family: var(--font-sans);
   font-size: 13px;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
   white-space: nowrap;
 }
 
 .message-status {
-  border-radius: 9999px;
+  border-radius: var(--r-pill);
   background: var(--surface-card);
   color: var(--muted);
   padding: 4px 10px;
-  font-size: 12px;
+  font-size: 11px;
   font-weight: 500;
   line-height: 1.4;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
   white-space: nowrap;
 }
 
+.message-item.is-forwarded {
+  border-left: 3px solid var(--success);
+}
+
 .message-item.is-forwarded .message-status {
   background: rgba(93, 184, 114, 0.16);
   color: #2f7c44;
 }
 
-.message-item.is-admin .message-status {
-  background: rgba(232, 165, 90, 0.2);
-  color: #8a5b16;
-}
-
-.message-item.is-ignored .message-status {
-  background: rgba(198, 69, 69, 0.12);
-  color: var(--error);
-}
-
 .message-text {
-  margin-top: 12px;
+  margin-top: 10px;
   color: var(--body);
+  font-size: 14px;
+  line-height: 1.6;
   white-space: pre-wrap;
   overflow-wrap: anywhere;
 }
 
-.stack-form {
+/* ---------- Forms / workbench -------------------------------------------- */
+
+.workbench-grid {
   display: grid;
-  gap: 18px;
+  grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
+  gap: var(--space-lg);
+  align-items: stretch;
 }
 
-.stack-form label {
+.form-card,
+.console-card {
+  border-radius: var(--r-lg);
+  background: var(--surface-card);
+  border: 1px solid var(--hairline);
+  padding: var(--space-xl);
+}
+
+.stack-form {
   display: grid;
-  gap: 8px;
+  gap: var(--space-lg);
+}
+
+.field {
+  display: grid;
+  gap: var(--space-xs);
+}
+
+.field__label,
+.stack-form label > span:not(.field__label),
+.channel-form label > span:not(.field__label) {
   color: var(--body-strong);
-  font-size: 14px;
+  font-size: 13px;
   font-weight: 500;
+  letter-spacing: 0.2px;
 }
 
 .text-input {
   width: 100%;
   min-height: 40px;
   border: 1px solid var(--hairline);
-  border-radius: 8px;
+  border-radius: var(--r-md);
   background: var(--canvas);
   color: var(--ink);
   padding: 10px 14px;
-  font-size: 16px;
+  font-size: 15px;
   line-height: 1.4;
+  transition: border-color 120ms ease, box-shadow 120ms ease;
 }
 
+.text-input::placeholder { color: var(--muted-soft); }
+
 .text-input:focus {
   border-color: var(--primary);
-  outline: 3px solid rgba(204, 120, 92, 0.15);
+  outline: 0;
+  box-shadow: 0 0 0 3px rgba(204, 120, 92, 0.18);
 }
 
-.select-input {
-  appearance: auto;
-}
+.select-input { appearance: auto; }
 
 .text-area {
   min-height: 144px;
   resize: vertical;
+  line-height: 1.6;
 }
 
 .text-area--code {
   min-height: 160px;
-  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-family: var(--font-mono);
+  font-size: 13px;
+  line-height: 1.65;
+}
+
+.text-input--mono {
+  font-family: var(--font-mono);
   font-size: 14px;
-  line-height: 1.6;
 }
 
 .form-actions {
   display: flex;
   align-items: center;
-  gap: 16px;
+  gap: var(--space-md);
   flex-wrap: wrap;
 }
 
 .form-status {
   color: var(--muted);
-  font-size: 14px;
+  font-size: 13px;
 }
 
-.form-status.is-error {
-  color: var(--error);
-}
+.form-status.is-error { color: var(--error); }
+.form-status.is-success { color: var(--success); }
 
-.form-status.is-success {
-  color: var(--success);
-}
+/* ---------- Console card -------------------------------------------------- */
 
 .console-card {
   display: grid;
   grid-template-rows: auto auto minmax(220px, 1fr);
-  gap: 20px;
+  gap: var(--space-lg);
+}
+
+.panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-md);
+  color: var(--muted);
+  font-family: var(--font-sans);
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 1.5px;
+  text-transform: uppercase;
+}
+
+.panel-header__label {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.panel-header__status {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.panel-header__status strong {
+  color: var(--accent-amber);
+  font-family: var(--font-sans);
+  font-weight: 500;
+  text-transform: none;
+  letter-spacing: 0;
+  font-size: 13px;
 }
 
 .at-form {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
-  gap: 12px;
-}
-
-.text-input--dark {
-  border-color: rgba(250, 249, 245, 0.12);
-  background: var(--surface-dark-soft);
-  color: var(--on-dark);
-  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 14px;
-}
-
-.console-output,
-.log-window {
-  overflow: auto;
-  border-radius: 12px;
-  background: var(--surface-dark-soft);
-  color: var(--on-dark);
-  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 14px;
-  line-height: 1.6;
+  gap: var(--space-sm);
 }
 
 .console-output {
-  min-height: 220px;
+  overflow: auto;
   margin: 0;
-  padding: 20px;
+  border-radius: var(--r-md);
+  background: var(--surface-soft);
+  border: 1px solid var(--hairline);
+  padding: var(--space-lg);
+  min-height: 220px;
   white-space: pre-wrap;
+  color: var(--body-strong);
+  font-family: var(--font-sans);
+  font-size: 14px;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.7;
 }
 
-.dark-heading {
-  display: flex;
-  align-items: end;
-  justify-content: space-between;
-  gap: 24px;
-  margin-bottom: 32px;
-}
-
-.dark-heading h2 {
-  margin-top: 14px;
-  color: var(--on-dark);
-}
+/* ---------- Logs ---------------------------------------------------------- */
 
 .log-window {
-  height: 420px;
-  padding: 18px 20px;
+  overflow: auto;
+  border-radius: var(--r-lg);
+  background: var(--surface-card);
+  border: 1px solid var(--hairline);
+  padding: var(--space-md) var(--space-lg);
+  height: 460px;
 }
 
 .log-line {
   display: grid;
-  grid-template-columns: 88px minmax(0, 1fr);
-  gap: 16px;
-  border-bottom: 1px solid rgba(250, 249, 245, 0.08);
-  padding: 8px 0;
+  grid-template-columns: 132px minmax(0, 1fr);
+  gap: var(--space-md);
+  border-bottom: 1px solid var(--hairline-soft);
+  padding: 10px 0;
 }
 
-.log-line:last-child {
-  border-bottom: 0;
-}
+.log-line:last-child { border-bottom: 0; }
 
 .log-level {
-  color: var(--on-dark-soft);
+  color: var(--muted);
+  font-family: var(--font-sans);
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0.3px;
+  font-variant-numeric: tabular-nums;
+  text-transform: uppercase;
 }
 
-.log-line.is-error .log-level {
-  color: var(--error);
-}
-
-.log-line.is-warn .log-level {
-  color: var(--warning);
-}
-
-.log-line.is-info .log-level {
-  color: var(--accent-teal);
-}
+.log-line.is-error .log-level { color: var(--error); }
+.log-line.is-warn .log-level { color: var(--warning); }
+.log-line.is-info .log-level { color: var(--accent-teal); }
 
 .log-message {
   overflow-wrap: anywhere;
-  color: var(--on-dark);
+  color: var(--body-strong);
+  font-family: var(--font-sans);
+  font-size: 14px;
+  line-height: 1.6;
 }
 
-.empty-state {
-  color: var(--on-dark-soft);
-}
+.empty-state { color: var(--muted); font-size: 14px; }
+.empty-state--light { color: var(--muted); font-size: 14px; }
 
-.empty-state--light {
-  color: var(--muted);
-}
+/* ---------- Footer (slim, single row) ------------------------------------ */
 
 .footer {
   background: var(--surface-dark);
   color: var(--on-dark-soft);
-  border-top: 1px solid rgba(250, 249, 245, 0.08);
-  padding: 32px 0;
-  font-size: 14px;
+  padding: var(--space-lg) 0;
 }
 
 .footer__inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 24px;
+  flex-wrap: wrap;
+  gap: var(--space-md);
 }
 
 .brand--footer {
   color: var(--on-dark);
+  font-family: var(--font-sans);
+  font-size: 15px;
+  font-weight: 500;
 }
 
-body.modal-open {
-  overflow: hidden;
+.brand--footer .brand__mark { color: var(--on-dark); }
+
+.footer__meta {
+  color: var(--on-dark-soft);
+  font-family: var(--font-sans);
+  font-size: 13px;
+  font-weight: 500;
+  letter-spacing: 0;
 }
 
+/* ---------- Modal --------------------------------------------------------- */
+
+body.modal-open { overflow: hidden; }
+
 .modal {
   position: fixed;
   inset: 0;
@@ -691,17 +1045,17 @@ body.modal-open {
   display: none;
   align-items: center;
   justify-content: center;
-  padding: 24px;
+  padding: var(--space-lg);
 }
 
-.modal.is-open {
-  display: flex;
-}
+.modal.is-open { display: flex; }
 
 .modal__backdrop {
   position: absolute;
   inset: 0;
-  background: rgba(20, 20, 19, 0.48);
+  background: rgba(20, 20, 19, 0.55);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
 }
 
 .modal__dialog {
@@ -709,41 +1063,38 @@ body.modal-open {
   width: min(1040px, 100%);
   max-height: min(86vh, 860px);
   overflow: auto;
-  border-radius: 12px;
+  border-radius: var(--r-lg);
   background: var(--canvas);
-  box-shadow: 0 24px 80px rgba(20, 20, 19, 0.24);
-  padding: 32px;
+  box-shadow: 0 24px 80px rgba(20, 20, 19, 0.32);
+  padding: var(--space-xl);
 }
 
 .modal__header {
   display: flex;
-  align-items: start;
+  align-items: flex-start;
   justify-content: space-between;
-  gap: 24px;
+  gap: var(--space-lg);
   border-bottom: 1px solid var(--hairline);
-  padding-bottom: 24px;
+  padding-bottom: var(--space-lg);
 }
 
-.modal__header h2 {
-  margin-top: 14px;
-}
+.modal__header h2 { margin-top: 10px; }
 
 .push-settings {
   display: grid;
   grid-template-columns: 280px minmax(0, 1fr);
-  gap: 24px;
-  margin-top: 24px;
+  gap: var(--space-lg);
+  margin-top: var(--space-lg);
 }
 
 .channel-list-panel {
-  border-radius: 12px;
+  border-radius: var(--r-lg);
   background: var(--surface-card);
+  border: 1px solid var(--hairline);
   padding: 20px;
 }
 
-.panel-header--light {
-  color: var(--muted);
-}
+.panel-header--light { color: var(--muted); }
 
 .channel-list-panel .panel-header {
   display: grid;
@@ -755,14 +1106,14 @@ body.modal-open {
 .channel-add {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
-  gap: 8px;
+  gap: var(--space-xs);
   width: 100%;
 }
 
 .channel-add__select {
   min-height: 32px;
   min-width: 0;
-  padding: 6px 8px;
+  padding: 6px 10px;
   font-size: 13px;
 }
 
@@ -775,20 +1126,38 @@ body.modal-open {
 }
 
 .channel-list__item {
+  position: relative;
   width: 100%;
   border: 1px solid var(--hairline);
-  border-radius: 8px;
+  border-radius: var(--r-md);
   background: var(--canvas);
   color: var(--body);
-  padding: 14px;
+  padding: 14px 16px;
   text-align: left;
   cursor: pointer;
+  transition: border-color 120ms ease, background-color 120ms ease;
+}
+
+.channel-list__item:hover {
+  border-color: var(--surface-cream-strong);
+  background: var(--surface-soft);
 }
 
 .channel-list__item.is-active {
-  border-color: var(--surface-dark);
-  background: var(--surface-dark);
-  color: var(--on-dark);
+  border-color: var(--surface-cream-strong);
+  background: var(--surface-cream-strong);
+  color: var(--ink);
+}
+
+.channel-list__item.is-active::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 12px;
+  bottom: 12px;
+  width: 3px;
+  border-radius: var(--r-pill);
+  background: var(--primary);
 }
 
 .channel-list__name {
@@ -796,27 +1165,31 @@ body.modal-open {
   overflow-wrap: anywhere;
   color: inherit;
   font-size: 15px;
-  font-weight: 500;
+  font-weight: 600;
+  letter-spacing: -0.2px;
 }
 
 .channel-list__meta {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 12px;
+  gap: var(--space-sm);
   margin-top: 8px;
   color: var(--muted);
+  font-family: var(--font-sans);
   font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 1.5px;
+  text-transform: uppercase;
 }
 
-.channel-list__item.is-active .channel-list__meta {
-  color: var(--on-dark-soft);
-}
+.channel-list__item.is-active .channel-list__meta { color: var(--primary); }
 
 .channel-form {
-  border-radius: 12px;
+  border-radius: var(--r-lg);
   background: var(--surface-card);
-  padding: 24px;
+  border: 1px solid var(--hairline);
+  padding: var(--space-lg);
 }
 
 .form-fieldset {
@@ -825,30 +1198,28 @@ body.modal-open {
   padding: 0;
 }
 
-.form-fieldset:disabled {
-  opacity: 0.62;
-}
+.form-fieldset:disabled { opacity: 0.55; }
 
 .channel-form__grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 18px;
+  gap: var(--space-lg);
 }
 
 .channel-form label {
   display: grid;
-  gap: 8px;
-  color: var(--body-strong);
-  font-size: 14px;
-  font-weight: 500;
+  gap: var(--space-xs);
 }
 
 .switch-row {
   grid-column: 1 / -1;
-  display: flex;
+  display: inline-flex;
+  flex-direction: row;
   align-items: center;
   gap: 10px;
   width: max-content;
+  font-weight: 500;
+  color: var(--body-strong);
 }
 
 .switch-row input {
@@ -857,26 +1228,23 @@ body.modal-open {
   accent-color: var(--primary);
 }
 
-.field-row--wide {
-  grid-column: 1 / -1;
-}
+.field-row--wide { grid-column: 1 / -1; }
 
-.channel-form__actions {
-  margin-top: 20px;
-}
+.channel-form__actions { margin-top: var(--space-lg); }
 
-.is-hidden {
-  display: none !important;
-}
+.is-hidden { display: none !important; }
+
+/* ---------- Responsive ---------------------------------------------------- */
 
 @media (max-width: 1024px) {
   .hero-grid,
   .workbench-grid,
-  .push-settings {
+  .push-settings,
+  .bento-grid {
     grid-template-columns: 1fr;
   }
 
-  .status-grid {
+  .stat-strip {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
@@ -887,9 +1255,7 @@ body.modal-open {
     width: min(100% - 32px, 1200px);
   }
 
-  .top-nav {
-    height: auto;
-  }
+  .top-nav { height: auto; }
 
   .top-nav__inner {
     min-height: 64px;
@@ -903,53 +1269,32 @@ body.modal-open {
     margin-left: 0;
     overflow-x: auto;
     padding-bottom: 4px;
+    gap: 16px;
   }
 
-  .top-nav__actions {
-    margin-left: auto;
-  }
+  .top-nav__actions { margin-left: auto; }
 
-  .hero-band {
-    padding: 48px 0 64px;
-  }
+  .hero-band { padding: 56px 0 64px; }
 
-  h1 {
-    font-size: 38px;
-  }
+  .hero-copy { min-height: 0; }
 
-  h2 {
-    font-size: 30px;
-  }
+  .section-band { padding: 64px 0; }
 
-  .hero-copy {
-    min-height: 0;
-  }
-
-  .section-band {
-    padding: 64px 0;
-  }
-
-  .section-heading,
-  .dark-heading,
-  .footer__inner {
+  .section-heading {
     display: grid;
     align-items: start;
+    gap: var(--space-md);
   }
 
-  .status-grid {
-    grid-template-columns: 1fr;
-  }
+  .stat-strip { grid-template-columns: 1fr; }
 
-  .product-panel,
+  .form-card,
   .console-card,
-  .feature-card,
-  .form-card {
-    padding: 24px;
-  }
+  .bento-hero,
+  .bento-control,
+  .runtime-card { padding: var(--space-lg); }
 
-  .at-form {
-    grid-template-columns: 1fr;
-  }
+  .at-form { grid-template-columns: 1fr; }
 
   .message-item__header {
     grid-template-columns: 1fr;
@@ -957,13 +1302,9 @@ body.modal-open {
   }
 
   .message-item__header time,
-  .message-status {
-    width: max-content;
-  }
+  .message-status { width: max-content; }
 
-  .log-window {
-    height: 360px;
-  }
+  .log-window { height: 360px; }
 
   .log-line {
     grid-template-columns: 1fr;
@@ -981,21 +1322,15 @@ body.modal-open {
   }
 
   .modal__header {
-    gap: 16px;
+    gap: var(--space-md);
     padding-bottom: 18px;
   }
 
   .channel-form,
-  .channel-list-panel {
-    padding: 20px;
-  }
+  .channel-list-panel { padding: 20px; }
 
-  .channel-form__grid {
-    grid-template-columns: 1fr;
-  }
+  .channel-form__grid { grid-template-columns: 1fr; }
 
   .switch-row,
-  .field-row--wide {
-    grid-column: auto;
-  }
+  .field-row--wide { grid-column: auto; }
 }
diff --git a/public/assets/admin.js b/public/assets/admin.js
index a2c0193..d5dcf77 100644
--- a/public/assets/admin.js
+++ b/public/assets/admin.js
@@ -109,10 +109,12 @@ const PUSH_TYPE_META = {
 };
 
 function setText(node, value) {
+  if (!node) return;
   node.textContent = value || '--';
 }
 
 function setStatusMessage(node, message, type = '') {
+  if (!node) return;
   node.textContent = message;
   node.classList.toggle('is-success', type === 'success');
   node.classList.toggle('is-error', type === 'error');
@@ -752,18 +754,18 @@ async function runATCommand(event) {
 
   submit.disabled = true;
   setText(elements.consoleState, 'running');
-  elements.atOutput.textContent = `> ${command}\n等待响应...`;
+  elements.atOutput.textContent = `› ${command}\n等待响应...`;
 
   try {
     const result = await requestJSON('/api/modem/at', {
       method: 'POST',
       body: JSON.stringify({ command })
     });
-    elements.atOutput.textContent = `> ${command}\n${result.data.response || ''}`.trim();
+    elements.atOutput.textContent = `› ${command}\n${result.data.response || ''}`.trim();
     setText(elements.consoleState, 'done');
     await refreshLogs();
   } catch (err) {
-    elements.atOutput.textContent = `> ${command}\nERROR: ${err.message}`;
+    elements.atOutput.textContent = `› ${command}\nERROR: ${err.message}`;
     setText(elements.consoleState, 'error');
   } finally {
     submit.disabled = false;
@@ -788,6 +790,19 @@ elements.logsButton.addEventListener('click', refreshLogs);
 elements.messagesButton.addEventListener('click', refreshMessages);
 elements.smsForm.addEventListener('submit', sendSMS);
 elements.atForm.addEventListener('submit', runATCommand);
+
+const ctaPushButton = document.querySelector('#ctaPushButton');
+const ctaRefreshButton = document.querySelector('#ctaRefreshButton');
+const footerPushLink = document.querySelector('#footerPushLink');
+const footerYear = document.querySelector('#footerYear');
+
+if (ctaPushButton) ctaPushButton.addEventListener('click', openPushModal);
+if (ctaRefreshButton) ctaRefreshButton.addEventListener('click', refreshAll);
+if (footerPushLink) footerPushLink.addEventListener('click', (event) => {
+  event.preventDefault();
+  openPushModal();
+});
+if (footerYear) footerYear.textContent = String(new Date().getFullYear());
 document.addEventListener('keydown', (event) => {
   if (event.key === 'Escape' && elements.pushModal.classList.contains('is-open')) {
     closePushModal();
