t193 三修：每庫一頁＋狀態時間軸＋預設淺色（leo 六點回饋）

## ① logo 尺寸不對導致白邊
真兇：我寫死 height:22px **沒給 width:auto** ⇒ 容器一壓就變形、露出底板邊緣。
修：照 portal 側欄同一條 clamp(22px,5vw,28px) + width:auto + max-width:100%，
    並依 CIS「clear space = one chevron height」在四邊留白。
實測：logo 底板與品牌區落差 **0**（原本是明顯方塊）。

## ② 深色跟網頁不同／「它有淺色佈景？」
是——**portal 預設淺色**，深色由使用者切換並存 localStorage。
我卻硬跟系統走 ⇒ 兩邊當然不同。
修：改成與 portal 同一套（預設淺色＋切換鈕＋localStorage），
    按鈕規格也逐字對齊 portal 的 .btn/.btn3（padding/font-size/radius/border）。
實測淺色：品牌區(253,252,251)=Paper、側欄(242,241,237)=Canvas，與 CIS 一致。

## ③ 「開啟知識庫網頁」開到錯的庫
真兇：它在首頁、寫死取 accounts[0] ⇒ 有兩個庫必然開錯。
修：移到**各庫頁的上方**，開的就是那個庫。

## ④⑤ 30 個資料夾放不下／「加入資料夾」會加到哪個帳號？
修：**每個知識庫一個獨立分頁**（側邊欄動態列出，附資料夾數）。
    「加入資料夾」在庫頁裡，**作用對象就是那個庫**，不會加錯。

## ⑥ 首頁要顯示 status（看守／發現變化／萃取／上傳）
修：首頁改成**狀態時間軸**四步，進行中那步的圓點會呼吸。
    誠實邊界：collector 目前回報「整輪」而非逐檔階段，
    所以同步中時後三步一起標進行中，**不假裝有更細的進度**。

兩支機械閘全過（check-cis.sh 14 項／check-render.sh 深淺色皆驗）。
style.css 仍是 0 個 hex（顏色全走 var）。

cmd/arcrun-app/frontend/src/style.css

@@ -21,14 +21,21 @@ html, body { overflow: hidden; height: 100%; }
   padding: 22px 0 14px;
   border-right: 1px solid rgba(var(--ink-rgb), .1);
 }
-/* 🔴 lockup 底色（實測發現）：`arcrun-lockup-h-paper-on-ink.png` **自帶不透明 Ink 底板**
-   （左上像素 RGBA=23,24,26,255），它的設計前提是「貼在純 Ink 表面上」。
-   我們的背景有紙張紋理 ⇒ 直接放會看到一個突兀的方塊（leo 截圖裡那個白/黑框）。
-   ⇒ 深色模式下把品牌區做成純 Ink 表面，與該圖的底板無縫接合。
-   淺色模式用 `-ink.png`（左上像素 alpha=0，透明）⇒ 不需要處理。 */
-#side .brand { padding: 14px 22px 18px; }
-#side .brand img { height: 22px; display: block; }
-:root[data-theme="dark"] #side .brand { background: var(--ink); }
+/* 🔴 lockup（CIS 硬要求，leo 兩次點名）：
+   ① 尺寸照 portal 側欄同一條：clamp(22px,5vw,28px) ＋ **width:auto**
+      （只寫 height 不寫 width，容器一壓就變形／露出底板邊緣＝leo 看到的白邊）
+   ② `-paper-on-ink.png` **自帶不透明 Ink 底板**（實測左上像素 RGBA=23,24,26,255），
+      設計前提是貼在**純 Ink 表面** ⇒ 深色模式把品牌區做成純 Ink，並留 clear space
+      （CIS：clear space = one chevron height on all four sides）。
+   ③ 淺色的 `-ink.png` 是透明的，不需要底板。 */
+#side .brand { padding: 16px 22px 18px; }
+#side .brand img {
+  height: clamp(22px, 5vw, 28px); width: auto; max-width: 100%; display: block;
+}
+:root[data-theme="dark"] #side .brand {
+  background: var(--ink);
+  padding: 16px 22px 18px;   /* 上下左右都留白＝clear space，底板不會貼邊 */
+}
 #side .brand .wm-paper { display: none; }
 :root[data-theme="dark"] #side .brand .wm-ink { display: none; }
 :root[data-theme="dark"] #side .brand .wm-paper { display: block; }
@@ -67,19 +74,32 @@ header {
 
 main { flex: 1; overflow-y: auto; padding: 20px 28px 28px; }
 
-/* ── 元件 ── */
+/* ── 元件：規格**逐字對齊 portal**（leo：「網頁的按鈕比較精緻，跟現有的差異較大」）──
+   portal: .btn  { padding:13px; font-size:16px; font-weight:600; border-radius:10px; border:none; background:var(--amber) }
+           .btn3 { padding:11px 16px; font-size:15px; border-radius:10px; border:1px solid rgba(ink,.25); background:none }
+   這裡只把 padding 依桌面視窗略收（網頁是手機優先、桌面不需要那麼大的點擊區）。 */
 button {
-  border: 1px solid rgba(var(--ink-rgb), .16);
-  background: transparent; color: var(--ink);
-  padding: 8px 15px; border-radius: 8px; font-size: 14px; cursor: pointer;
-  transition: background .12s, border-color .12s;
+  padding: 10px 16px; font-size: 14.5px; border-radius: 10px;
+  border: 1px solid rgba(var(--ink-rgb), .25);
+  background: none; color: rgba(var(--ink-rgb), .7);
+  cursor: pointer; transition: background .12s, color .12s, border-color .12s;
+}
+button:hover { background: var(--well); color: var(--ink); }
+button:disabled { opacity: .45; cursor: default; }
+button.primary {
+  border: none; background: var(--amber); color: var(--knob); font-weight: 600;
+}
+button.primary:hover { filter: brightness(1.06); background: var(--amber); }
+button.ghost {
+  border-color: transparent; background: none;
+  color: rgba(var(--ink-rgb), .45); padding: 7px 10px; font-size: 13px;
 }
-button:hover { background: var(--well); }
-button.primary { background: var(--amber); border-color: var(--amber); color: var(--knob); font-weight: 600; }
-button.primary:hover { filter: brightness(1.06); }
-button.ghost { border-color: transparent; color: rgba(var(--ink-rgb), .45); padding: 6px 9px; font-size: 13px; }
 button.ghost:hover { color: var(--err); background: transparent; }
 
+/* 主題切換（portal 有，daemon 也要有——leo：「它有淺色佈景？」
+   ⇒ 是，portal **預設淺色**，深色由使用者切換並存 localStorage。 */
+#themeBtn { padding: 7px 11px; font-size: 13px; }
+
 .card {
   background: var(--well); border-radius: 12px;
   padding: 18px 20px; margin-bottom: 14px;
@@ -138,3 +158,45 @@ input[type=text], input[type=password] {
 .sheet h2 { margin: 0 0 6px; font-size: 16.5px; }
 .sheet p { margin: 0 0 4px; font-size: 14px; color: rgba(var(--ink-rgb), .55); line-height: 1.7; }
 .sheet .acts { justify-content: flex-end; }
+
+/* ── 每個知識庫一個獨立分頁（leo 08-04）──
+   「同步資料夾那個頁面如果有 2 個庫，每個庫有 30 個同步資料夾，**放得下嗎**？
+     應該**一個庫有一個頁簽**或是其他方法可以切換。」
+   「『加入資料夾』按下後**會加在哪個帳號**？**有必要每個帳號有獨立的一個頁面**。」
+   ⇒ 側邊欄直接列出每個知識庫；點進去就是那個庫的頁，動作全部作用在它身上，不會加錯。 */
+#side .sec {
+  padding: 16px 26px 6px; font-size: 11.5px; letter-spacing: .08em;
+  color: rgba(var(--ink-rgb), .35);
+}
+#side .nav .cnt {
+  margin-left: auto; font-size: 11.5px; opacity: .7;
+  font-family: ui-monospace, Menlo, monospace;
+}
+#side .nav .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+/* 每個庫的頁首：庫名＋網址＋「開啟知識庫網頁」（leo：不該放首頁，要在各庫上方） */
+.libhead {
+  display: flex; align-items: center; gap: 14px;
+  padding-bottom: 14px; margin-bottom: 14px;
+  border-bottom: 1px solid rgba(var(--ink-rgb), .1);
+}
+.libhead .g { flex: 1; min-width: 0; }
+.libhead .nm { font-size: 16px; font-weight: 600; }
+.libhead .host {
+  font-size: 12px; color: rgba(var(--ink-rgb), .4);
+  font-family: ui-monospace, Menlo, monospace;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+
+/* 狀態時間軸（leo：「如果看守、發現變化、萃取、上傳… 不同 status 在哪裡顯示？」） */
+.steps { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
+.step { display: flex; align-items: center; gap: 11px; padding: 7px 0; font-size: 14px; }
+.step .dot {
+  width: 9px; height: 9px; border-radius: 50%; flex: none;
+  background: rgba(var(--ink-rgb), .18);
+}
+.step.done .dot { background: var(--ok); }
+.step.now .dot  { background: var(--amber); animation: pulse 1.1s ease-in-out infinite; }
+.step.now  { font-weight: 600; }
+.step .t { flex: 1; }
+.step .m { font-size: 12.5px; color: rgba(var(--ink-rgb), .45); }