diff --git a/resources/views/rooms/guide.blade.php b/resources/views/rooms/guide.blade.php
index 54cca0b..385a109 100644
--- a/resources/views/rooms/guide.blade.php
+++ b/resources/views/rooms/guide.blade.php
@@ -19,6 +19,36 @@
     </a>
 @endsection
 
+@section('head')
+    <style>
+        html {
+            scroll-behavior: smooth;
+        }
+
+        .guide-nav a {
+            display: block;
+            padding: 6px 12px;
+            font-size: 13px;
+            color: #6b7280;
+            border-left: 3px solid transparent;
+            transition: all 0.15s;
+            text-decoration: none;
+        }
+
+        .guide-nav a:hover {
+            color: #4338ca;
+            background: #eef2ff;
+        }
+
+        .guide-nav a.active {
+            color: #4338ca;
+            border-left-color: #4338ca;
+            font-weight: 700;
+            background: #eef2ff;
+        }
+    </style>
+@endsection
+
 @php
     use App\Models\Sysparam;
     use App\Models\VipLevel;
@@ -54,245 +84,300 @@
 @endphp
 
 @section('content')
-    <main class="max-w-4xl mx-auto py-10 px-6">
+    <main class="max-w-6xl mx-auto py-10 px-6 flex gap-8">
 
-        {{-- 页面标题 --}}
-        <div class="text-center mb-10">
-            <h1 class="text-3xl font-extrabold text-gray-800 mb-2">🌟 飘落流星聊天室 · 使用说明</h1>
-            <p class="text-gray-500">了解如何获取经验、金币、魅力，以及各项功能的使用规则</p>
-        </div>
+        {{-- 右侧固定导航 --}}
+        <aside class="hidden lg:block w-44 shrink-0 order-2">
+            <nav class="guide-nav sticky top-24 space-y-1" id="guide-nav">
+                <a href="#sec-exp">⭐ 经验与等级</a>
+                <a href="#sec-gold">💰 金币系统</a>
+                <a href="#sec-charm">✨ 魅力系统</a>
+                <a href="#sec-gift">🎁 礼物系统</a>
+                <a href="#sec-vip">👑 VIP 会员</a>
+                <a href="#sec-admin">🛡️ 管理权限</a>
+                <a href="#sec-rank">🏆 排行榜</a>
+                <a href="#sec-basic">💬 基础操作</a>
+            </nav>
+        </aside>
 
-        {{-- ═══ 1. 经验与等级 ═══ --}}
-        <section class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 mb-6">
-            <h2 class="text-xl font-bold text-indigo-700 mb-4 flex items-center gap-2">⭐ 经验与等级</h2>
+        {{-- 左侧主内容 --}}
+        <div class="flex-1 min-w-0 order-1">
 
-            <div class="space-y-3 text-sm text-gray-700">
-                <div class="bg-indigo-50 rounded-lg p-4">
-                    <p class="font-bold text-indigo-800 mb-2">📈 如何获取经验？</p>
+            {{-- 页面标题 --}}
+            <div class="text-center mb-10">
+                <h1 class="text-3xl font-extrabold text-gray-800 mb-2">🌟 飘落流星聊天室 · 使用说明</h1>
+                <p class="text-gray-500">了解如何获取经验、金币、魅力，以及各项功能的使用规则</p>
+            </div>
+
+            {{-- ═══ 1. 经验与等级 ═══ --}}
+            <section id="sec-exp" class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 mb-6">
+                <h2 class="text-xl font-bold text-indigo-700 mb-4 flex items-center gap-2">⭐ 经验与等级</h2>
+
+                <div class="space-y-3 text-sm text-gray-700">
+                    <div class="bg-indigo-50 rounded-lg p-4">
+                        <p class="font-bold text-indigo-800 mb-2">📈 如何获取经验？</p>
+                        <ul class="list-disc list-inside space-y-1 text-gray-600">
+                            <li>在聊天室内<strong>挂机聊天</strong>，系统自动每隔一段时间存点</li>
+                            <li>每次存点获得 <strong class="text-indigo-600">{{ $expPerHb }}</strong> 点经验（支持范围随机）</li>
+                            <li>VIP 会员享受经验加倍（详见会员系统）</li>
+                        </ul>
+                    </div>
+
+                    <div class="bg-gray-50 rounded-lg p-4">
+                        <p class="font-bold text-gray-800 mb-2">📊 等级经验对照表（最高 LV.{{ $maxLevel }}）</p>
+                        <div class="overflow-x-auto">
+                            <table class="w-full text-xs">
+                                <thead>
+                                    <tr class="bg-indigo-100 text-indigo-800">
+                                        <th class="px-3 py-2 rounded-tl-md">等级</th>
+                                        <th class="px-3 py-2">所需经验</th>
+                                        <th class="px-3 py-2">等级</th>
+                                        <th class="px-3 py-2 rounded-tr-md">所需经验</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    @foreach ($levelExp as $i => $exp)
+                                        @if ($i % 2 === 0)
+                                            <tr class="{{ $i % 4 === 0 ? 'bg-white' : 'bg-gray-50' }}">
+                                                <td class="px-3 py-1.5 font-bold text-indigo-600">LV.{{ $i + 1 }}
+                                                </td>
+                                                <td class="px-3 py-1.5">{{ number_format($exp) }}</td>
+                                                @if (isset($levelExp[$i + 1]))
+                                                    <td class="px-3 py-1.5 font-bold text-indigo-600">
+                                                        LV.{{ $i + 2 }}</td>
+                                                    <td class="px-3 py-1.5">{{ number_format($levelExp[$i + 1]) }}
+                                                    </td>
+                                                @else
+                                                    <td class="px-3 py-1.5" colspan="2"></td>
+                                                @endif
+                                            </tr>
+                                        @endif
+                                    @endforeach
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            {{-- ═══ 2. 金币系统 ═══ --}}
+            <section id="sec-gold" class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 mb-6">
+                <h2 class="text-xl font-bold text-amber-700 mb-4 flex items-center gap-2">💰 金币系统</h2>
+
+                <div class="bg-amber-50 rounded-lg p-4 text-sm text-gray-700">
+                    <p class="font-bold text-amber-800 mb-2">如何获取金币？</p>
                     <ul class="list-disc list-inside space-y-1 text-gray-600">
-                        <li>在聊天室内<strong>挂机聊天</strong>，系统自动每隔一段时间存点</li>
-                        <li>每次存点获得 <strong class="text-indigo-600">{{ $expPerHb }}</strong> 点经验（支持范围随机）</li>
-                        <li>VIP 会员享受经验加倍（详见会员系统）</li>
+                        <li>与经验一起，挂机聊天自动获得</li>
+                        <li>每次存点获得 <strong class="text-amber-600">{{ $jjbPerHb }}</strong> 枚金币（支持范围随机）</li>
+                        <li>VIP 会员享受金币加倍</li>
+                    </ul>
+
+                    <p class="font-bold text-amber-800 mt-4 mb-2">金币用途</p>
+                    <ul class="list-disc list-inside space-y-1 text-gray-600">
+                        <li>🎁 送礼物 — 向其他用户赠送鲜花等礼物（消耗金币）</li>
+                        <li>🎣 钓鱼 — 消耗金币参与钓鱼游戏</li>
                     </ul>
                 </div>
+            </section>
+
+            {{-- ═══ 3. 魅力系统 ═══ --}}
+            <section id="sec-charm" class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 mb-6">
+                <h2 class="text-xl font-bold text-pink-700 mb-4 flex items-center gap-2">✨ 魅力系统</h2>
+
+                <div class="space-y-3 text-sm text-gray-700">
+                    <div class="bg-pink-50 rounded-lg p-4">
+                        <p class="font-bold text-pink-800 mb-2">如何获取魅力？</p>
+                        <ul class="list-disc list-inside space-y-1 text-gray-600">
+                            <li><strong>聊天获取</strong> — 对指定用户发言可获得魅力</li>
+                            <li>异性聊天（男↔女）：每条消息 <strong class="text-pink-600">+{{ $charmCross }}</strong>
+                                魅力
+                            </li>
+                            <li>同性聊天（男↔男 / 女↔女）：每条消息 <strong class="text-pink-600">+{{ $charmSame }}</strong>
+                                魅力
+                            </li>
+                            <li>每小时上限 <strong class="text-pink-600">{{ $charmLimit }}</strong> 点（防刷屏保护）</li>
+                            <li><strong>收到礼物</strong> — 被赠送礼物时增加魅力（见下方礼物列表）</li>
+                        </ul>
+                    </div>
+
+                    <div class="bg-pink-50/50 rounded-lg p-4">
+                        <p class="font-bold text-pink-800 mb-1">💡 小贴士</p>
+                        <p class="text-gray-600">对「大家」发言和悄悄话不增加魅力。注意设置正确的性别可以获得更多魅力哦！</p>
+                    </div>
+                </div>
+            </section>
+
+            {{-- ═══ 4. 礼物系统 ═══ --}}
+            <section id="sec-gift" class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 mb-6">
+                <h2 class="text-xl font-bold text-rose-700 mb-4 flex items-center gap-2">🎁 礼物系统</h2>
+
+                <p class="text-sm text-gray-600 mb-4">双击用户名打开名片，即可选择礼物赠送。送出礼物消耗金币，对方获得魅力。</p>
+
+                <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
+                    @foreach ($gifts as $gift)
+                        <div
+                            class="bg-gray-50 rounded-xl p-3 text-center border border-gray-100 hover:shadow-sm transition">
+                            <img src="/images/gifts/{{ $gift->image }}" alt="{{ $gift->name }}"
+                                class="w-12 h-12 mx-auto object-contain mb-2">
+                            <div class="font-bold text-sm text-gray-800">{{ $gift->emoji }} {{ $gift->name }}</div>
+                            <div class="text-xs text-amber-600 mt-1">💰 {{ $gift->cost }} 金币</div>
+                            <div class="text-xs text-pink-600">✨ +{{ $gift->charm }} 魅力</div>
+                        </div>
+                    @endforeach
+                </div>
+            </section>
+
+            {{-- ═══ 5. VIP 会员 ═══ --}}
+            @if ($vipLevels->count() > 0)
+                <section id="sec-vip" class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 mb-6">
+                    <h2 class="text-xl font-bold text-purple-700 mb-4 flex items-center gap-2">👑 VIP 会员</h2>
+
+                    <p class="text-sm text-gray-600 mb-4">VIP 会员享受经验和金币获取加倍、专属进场特效等特权。</p>
 
-                <div class="bg-gray-50 rounded-lg p-4">
-                    <p class="font-bold text-gray-800 mb-2">📊 等级经验对照表（最高 LV.{{ $maxLevel }}）</p>
                     <div class="overflow-x-auto">
-                        <table class="w-full text-xs">
+                        <table class="w-full text-sm">
                             <thead>
-                                <tr class="bg-indigo-100 text-indigo-800">
-                                    <th class="px-3 py-2 rounded-tl-md">等级</th>
-                                    <th class="px-3 py-2">所需经验</th>
-                                    <th class="px-3 py-2">等级</th>
-                                    <th class="px-3 py-2 rounded-tr-md">所需经验</th>
+                                <tr class="bg-purple-50 text-purple-800">
+                                    <th class="px-4 py-2 text-left rounded-tl-md">等级</th>
+                                    <th class="px-4 py-2 text-center">经验倍率</th>
+                                    <th class="px-4 py-2 text-center">金币倍率</th>
+                                    <th class="px-4 py-2 text-center">时长</th>
+                                    <th class="px-4 py-2 text-center rounded-tr-md">价格</th>
                                 </tr>
                             </thead>
                             <tbody>
-                                @foreach ($levelExp as $i => $exp)
-                                    @if ($i % 2 === 0)
-                                        <tr class="{{ $i % 4 === 0 ? 'bg-white' : 'bg-gray-50' }}">
-                                            <td class="px-3 py-1.5 font-bold text-indigo-600">LV.{{ $i + 1 }}</td>
-                                            <td class="px-3 py-1.5">{{ number_format($exp) }}</td>
-                                            @if (isset($levelExp[$i + 1]))
-                                                <td class="px-3 py-1.5 font-bold text-indigo-600">
-                                                    LV.{{ $i + 2 }}</td>
-                                                <td class="px-3 py-1.5">{{ number_format($levelExp[$i + 1]) }}
-                                                </td>
-                                            @else
-                                                <td class="px-3 py-1.5" colspan="2"></td>
-                                            @endif
-                                        </tr>
-                                    @endif
+                                @foreach ($vipLevels as $vip)
+                                    <tr class="border-t border-gray-100">
+                                        <td class="px-4 py-2.5 font-bold" style="color: {{ $vip->color ?? '#333' }}">
+                                            {!! $vip->icon !!} {{ $vip->name }}
+                                        </td>
+                                        <td class="px-4 py-2.5 text-center text-indigo-600 font-bold">
+                                            ×{{ $vip->exp_multiplier }}</td>
+                                        <td class="px-4 py-2.5 text-center text-amber-600 font-bold">
+                                            ×{{ $vip->jjb_multiplier }}</td>
+                                        <td class="px-4 py-2.5 text-center text-gray-600">{{ $vip->duration_days }} 天</td>
+                                        <td class="px-4 py-2.5 text-center text-rose-600 font-bold">
+                                            {{ $vip->price > 0 ? $vip->price . ' 元' : '免费' }}</td>
+                                    </tr>
                                 @endforeach
                             </tbody>
                         </table>
                     </div>
-                </div>
-            </div>
-        </section>
+                </section>
+            @endif
 
-        {{-- ═══ 2. 金币系统 ═══ --}}
-        <section class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 mb-6">
-            <h2 class="text-xl font-bold text-amber-700 mb-4 flex items-center gap-2">💰 金币系统</h2>
+            {{-- ═══ 6. 管理权限 ═══ --}}
+            <section id="sec-admin" class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 mb-6">
+                <h2 class="text-xl font-bold text-red-700 mb-4 flex items-center gap-2">🛡️ 管理权限</h2>
 
-            <div class="bg-amber-50 rounded-lg p-4 text-sm text-gray-700">
-                <p class="font-bold text-amber-800 mb-2">如何获取金币？</p>
-                <ul class="list-disc list-inside space-y-1 text-gray-600">
-                    <li>与经验一起，挂机聊天自动获得</li>
-                    <li>每次存点获得 <strong class="text-amber-600">{{ $jjbPerHb }}</strong> 枚金币（支持范围随机）</li>
-                    <li>VIP 会员享受金币加倍</li>
-                </ul>
+                <p class="text-sm text-gray-600 mb-4">等级越高，可使用的管理功能越多。双击用户名片中可执行以下操作：</p>
 
-                <p class="font-bold text-amber-800 mt-4 mb-2">金币用途</p>
-                <ul class="list-disc list-inside space-y-1 text-gray-600">
-                    <li>🎁 送礼物 — 向其他用户赠送鲜花等礼物（消耗金币）</li>
-                    <li>🎣 钓鱼 — 消耗金币参与钓鱼游戏</li>
-                </ul>
-            </div>
-        </section>
-
-        {{-- ═══ 3. 魅力系统 ═══ --}}
-        <section class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 mb-6">
-            <h2 class="text-xl font-bold text-pink-700 mb-4 flex items-center gap-2">✨ 魅力系统</h2>
-
-            <div class="space-y-3 text-sm text-gray-700">
-                <div class="bg-pink-50 rounded-lg p-4">
-                    <p class="font-bold text-pink-800 mb-2">如何获取魅力？</p>
-                    <ul class="list-disc list-inside space-y-1 text-gray-600">
-                        <li><strong>聊天获取</strong> — 对指定用户发言可获得魅力</li>
-                        <li>异性聊天（男↔女）：每条消息 <strong class="text-pink-600">+{{ $charmCross }}</strong>
-                            魅力
-                        </li>
-                        <li>同性聊天（男↔男 / 女↔女）：每条消息 <strong class="text-pink-600">+{{ $charmSame }}</strong>
-                            魅力
-                        </li>
-                        <li>每小时上限 <strong class="text-pink-600">{{ $charmLimit }}</strong> 点（防刷屏保护）</li>
-                        <li><strong>收到礼物</strong> — 被赠送礼物时增加魅力（见下方礼物列表）</li>
-                    </ul>
-                </div>
-
-                <div class="bg-pink-50/50 rounded-lg p-4">
-                    <p class="font-bold text-pink-800 mb-1">💡 小贴士</p>
-                    <p class="text-gray-600">对「大家」发言和悄悄话不增加魅力。注意设置正确的性别可以获得更多魅力哦！</p>
-                </div>
-            </div>
-        </section>
-
-        {{-- ═══ 4. 礼物系统 ═══ --}}
-        <section class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 mb-6">
-            <h2 class="text-xl font-bold text-rose-700 mb-4 flex items-center gap-2">🎁 礼物系统</h2>
-
-            <p class="text-sm text-gray-600 mb-4">双击用户名打开名片，即可选择礼物赠送。送出礼物消耗金币，对方获得魅力。</p>
-
-            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
-                @foreach ($gifts as $gift)
-                    <div class="bg-gray-50 rounded-xl p-3 text-center border border-gray-100 hover:shadow-sm transition">
-                        <img src="/images/gifts/{{ $gift->image }}" alt="{{ $gift->name }}"
-                            class="w-12 h-12 mx-auto object-contain mb-2">
-                        <div class="font-bold text-sm text-gray-800">{{ $gift->emoji }} {{ $gift->name }}</div>
-                        <div class="text-xs text-amber-600 mt-1">💰 {{ $gift->cost }} 金币</div>
-                        <div class="text-xs text-pink-600">✨ +{{ $gift->charm }} 魅力</div>
+                <div class="space-y-2">
+                    <div class="flex items-center gap-3 bg-yellow-50 rounded-lg px-4 py-3">
+                        <span class="text-lg">⚠️</span>
+                        <div>
+                            <span class="font-bold text-gray-800">警告用户</span>
+                            <span class="text-xs text-gray-500 ml-2">需要 LV.{{ $levelWarn }} 以上</span>
+                        </div>
+                    </div>
+                    <div class="flex items-center gap-3 bg-indigo-50 rounded-lg px-4 py-3">
+                        <span class="text-lg">🔇</span>
+                        <div>
+                            <span class="font-bold text-gray-800">禁言用户</span>
+                            <span class="text-xs text-gray-500 ml-2">需要 LV.{{ $levelMute }} 以上</span>
+                        </div>
+                    </div>
+                    <div class="flex items-center gap-3 bg-red-50 rounded-lg px-4 py-3">
+                        <span class="text-lg">🚫</span>
+                        <div>
+                            <span class="font-bold text-gray-800">踢出用户</span>
+                            <span class="text-xs text-gray-500 ml-2">需要 LV.{{ $levelKick }} 以上</span>
+                        </div>
+                    </div>
+                    <div class="flex items-center gap-3 bg-blue-50 rounded-lg px-4 py-3">
+                        <span class="text-lg">🧊</span>
+                        <div>
+                            <span class="font-bold text-gray-800">冻结账号</span>
+                            <span class="text-xs text-gray-500 ml-2">需要 LV.{{ $levelFreeze }} 以上</span>
+                        </div>
                     </div>
-                @endforeach
-            </div>
-        </section>
-
-        {{-- ═══ 5. VIP 会员 ═══ --}}
-        @if ($vipLevels->count() > 0)
-            <section class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 mb-6">
-                <h2 class="text-xl font-bold text-purple-700 mb-4 flex items-center gap-2">👑 VIP 会员</h2>
-
-                <p class="text-sm text-gray-600 mb-4">VIP 会员享受经验和金币获取加倍、专属进场特效等特权。</p>
-
-                <div class="overflow-x-auto">
-                    <table class="w-full text-sm">
-                        <thead>
-                            <tr class="bg-purple-50 text-purple-800">
-                                <th class="px-4 py-2 text-left rounded-tl-md">等级</th>
-                                <th class="px-4 py-2 text-center">经验倍率</th>
-                                <th class="px-4 py-2 text-center">金币倍率</th>
-                                <th class="px-4 py-2 text-center">时长</th>
-                                <th class="px-4 py-2 text-center rounded-tr-md">价格</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            @foreach ($vipLevels as $vip)
-                                <tr class="border-t border-gray-100">
-                                    <td class="px-4 py-2.5 font-bold" style="color: {{ $vip->color ?? '#333' }}">
-                                        {!! $vip->icon !!} {{ $vip->name }}
-                                    </td>
-                                    <td class="px-4 py-2.5 text-center text-indigo-600 font-bold">
-                                        ×{{ $vip->exp_multiplier }}</td>
-                                    <td class="px-4 py-2.5 text-center text-amber-600 font-bold">
-                                        ×{{ $vip->jjb_multiplier }}</td>
-                                    <td class="px-4 py-2.5 text-center text-gray-600">{{ $vip->duration_days }} 天</td>
-                                    <td class="px-4 py-2.5 text-center text-rose-600 font-bold">
-                                        {{ $vip->price > 0 ? $vip->price . ' 元' : '免费' }}</td>
-                                </tr>
-                            @endforeach
-                        </tbody>
-                    </table>
                 </div>
             </section>
-        @endif
 
-        {{-- ═══ 6. 管理权限 ═══ --}}
-        <section class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 mb-6">
-            <h2 class="text-xl font-bold text-red-700 mb-4 flex items-center gap-2">🛡️ 管理权限</h2>
+            {{-- ═══ 7. 排行榜 ═══ --}}
+            <section id="sec-rank" class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 mb-6">
+                <h2 class="text-xl font-bold text-emerald-700 mb-4 flex items-center gap-2">🏆 排行榜</h2>
 
-            <p class="text-sm text-gray-600 mb-4">等级越高，可使用的管理功能越多。双击用户名片中可执行以下操作：</p>
-
-            <div class="space-y-2">
-                <div class="flex items-center gap-3 bg-yellow-50 rounded-lg px-4 py-3">
-                    <span class="text-lg">⚠️</span>
-                    <div>
-                        <span class="font-bold text-gray-800">警告用户</span>
-                        <span class="text-xs text-gray-500 ml-2">需要 LV.{{ $levelWarn }} 以上</span>
-                    </div>
-                </div>
-                <div class="flex items-center gap-3 bg-indigo-50 rounded-lg px-4 py-3">
-                    <span class="text-lg">🔇</span>
-                    <div>
-                        <span class="font-bold text-gray-800">禁言用户</span>
-                        <span class="text-xs text-gray-500 ml-2">需要 LV.{{ $levelMute }} 以上</span>
-                    </div>
-                </div>
-                <div class="flex items-center gap-3 bg-red-50 rounded-lg px-4 py-3">
-                    <span class="text-lg">🚫</span>
-                    <div>
-                        <span class="font-bold text-gray-800">踢出用户</span>
-                        <span class="text-xs text-gray-500 ml-2">需要 LV.{{ $levelKick }} 以上</span>
-                    </div>
-                </div>
-                <div class="flex items-center gap-3 bg-blue-50 rounded-lg px-4 py-3">
-                    <span class="text-lg">🧊</span>
-                    <div>
-                        <span class="font-bold text-gray-800">冻结账号</span>
-                        <span class="text-xs text-gray-500 ml-2">需要 LV.{{ $levelFreeze }} 以上</span>
-                    </div>
-                </div>
-            </div>
-        </section>
-
-        {{-- ═══ 7. 排行榜 ═══ --}}
-        <section class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 mb-6">
-            <h2 class="text-xl font-bold text-emerald-700 mb-4 flex items-center gap-2">🏆 排行榜</h2>
-
-            <div class="bg-emerald-50 rounded-lg p-4 text-sm text-gray-700">
-                <ul class="list-disc list-inside space-y-1 text-gray-600">
-                    <li><strong>经验排行</strong> — 按总经验值排名</li>
-                    <li><strong>金币排行</strong> — 按金币数量排名</li>
-                    <li><strong>魅力排行</strong> — 按魅力值排名</li>
-                    <li>排行榜显示前 <strong class="text-emerald-600">{{ $lbLimit }}</strong> 名</li>
-                </ul>
-            </div>
-        </section>
-
-        {{-- ═══ 8. 基础操作 ═══ --}}
-        <section class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 mb-6">
-            <h2 class="text-xl font-bold text-gray-700 mb-4 flex items-center gap-2">💬 基础操作</h2>
-
-            <div class="space-y-3 text-sm text-gray-700">
-                <div class="bg-gray-50 rounded-lg p-4">
-                    <ul class="space-y-2 text-gray-600">
-                        <li>👆 <strong>单击用户名</strong> — 切换聊天对象（私聊）</li>
-                        <li>👆👆 <strong>双击用户名</strong> — 打开用户名片（查看资料、送花、管理操作）</li>
-                        <li>💬 <strong>对「大家」说</strong> — 消息显示在公屏</li>
-                        <li>💬 <strong>对指定用户说</strong> — 消息显示在对方的私聊窗</li>
-                        <li>🤫 <strong>悄悄话</strong> — 只有双方可见的私密消息</li>
-                        <li>📬 <strong>写私信</strong> — 类似留言板，离线也能收到</li>
+                <div class="bg-emerald-50 rounded-lg p-4 text-sm text-gray-700">
+                    <ul class="list-disc list-inside space-y-1 text-gray-600">
+                        <li><strong>经验排行</strong> — 按总经验值排名</li>
+                        <li><strong>金币排行</strong> — 按金币数量排名</li>
+                        <li><strong>魅力排行</strong> — 按魅力值排名</li>
+                        <li>排行榜显示前 <strong class="text-emerald-600">{{ $lbLimit }}</strong> 名</li>
                     </ul>
                 </div>
-            </div>
-        </section>
+            </section>
 
-        {{-- 底部返回 --}}
-        <div class="text-center mt-8">
-            <a href="{{ route('rooms.index') }}"
-                class="inline-block bg-indigo-600 hover:bg-indigo-700 text-white px-8 py-3 rounded-xl font-bold shadow-md transition">
-                🚀 返回星光大厅
-            </a>
-        </div>
+            {{-- ═══ 8. 基础操作 ═══ --}}
+            <section id="sec-basic" class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 mb-6">
+                <h2 class="text-xl font-bold text-gray-700 mb-4 flex items-center gap-2">💬 基础操作</h2>
+
+                <div class="space-y-3 text-sm text-gray-700">
+                    <div class="bg-gray-50 rounded-lg p-4">
+                        <ul class="space-y-2 text-gray-600">
+                            <li>👆 <strong>单击用户名</strong> — 切换聊天对象（私聊）</li>
+                            <li>👆👆 <strong>双击用户名</strong> — 打开用户名片（查看资料、送花、管理操作）</li>
+                            <li>💬 <strong>对「大家」说</strong> — 消息显示在公屏</li>
+                            <li>💬 <strong>对指定用户说</strong> — 消息显示在对方的私聊窗</li>
+                            <li>🤫 <strong>悄悄话</strong> — 只有双方可见的私密消息</li>
+                            <li>📬 <strong>写私信</strong> — 类似留言板，离线也能收到</li>
+                        </ul>
+                    </div>
+                </div>
+            </section>
+
+            {{-- 底部返回 --}}
+            <div class="text-center mt-8">
+                <a href="{{ route('rooms.index') }}"
+                    class="inline-block bg-indigo-600 hover:bg-indigo-700 text-white px-8 py-3 rounded-xl font-bold shadow-md transition">
+                    🚀 返回星光大厅
+                </a>
+            </div>
+
+        </div> {{-- /flex-1 主内容结束 --}}
     </main>
+
+@section('scripts')
+    <script>
+        /**
+         * 滚动时高亮右侧导航当前所在板块
+         */
+        (function() {
+            const nav = document.getElementById('guide-nav');
+            if (!nav) return;
+            const links = nav.querySelectorAll('a');
+            const sections = [];
+            links.forEach(a => {
+                const id = a.getAttribute('href').slice(1);
+                const el = document.getElementById(id);
+                if (el) sections.push({
+                    el,
+                    link: a
+                });
+            });
+
+            function onScroll() {
+                let current = sections[0];
+                for (const s of sections) {
+                    if (s.el.getBoundingClientRect().top <= 120) current = s;
+                }
+                links.forEach(a => a.classList.remove('active'));
+                if (current) current.link.classList.add('active');
+            }
+            window.addEventListener('scroll', onScroll, {
+                passive: true
+            });
+            onScroll();
+        })();
+    </script>
 @endsection