導覽與版面

外掛殼層 .lct-shell

外掛面板的最外層容器，內部用 flex 直向排列：Header、頂部 Tab Bar、可捲動的內容區、Footer 動作列。

v1.1 起 .lct-shell 預設為流動寬度（填滿容器，配合響應式）；要固定 420px 面板寬（SketchUp HtmlDialog 常見尺寸）改用 .lct-shell--panel，寬度可用 --lct-shell-width 調整。

<div class="lct-shell lct-shell--panel">
  <header class="lct-header">…</header>

  <nav class="lct-tabbar">…</nav>

  <div class="lct-shell__body">
    <!-- 這裡可捲動 -->
  </div>

  <div class="lct-footer-actions">…</div>
</div>

v1.0 的 .lct-shell 固定 420px；升級到 v1.1 時，原本依賴固定寬度的頁面請補上 lct-shell--panel。

Header .lct-header

頁面頂部標題列（高 68、白底、Figma 校準：以 陰影 分隔內容，無底線）。左側放標題或 logo、右側放動作。

<header class="lct-header">
  <img class="lct-header__logo" src="logo.png" alt="Lucent">
  <div class="lct-header__actions">
    <button class="lct-icon-btn" aria-label="側欄">
      <svg class="lct-icon" viewBox="0 0 256 256"><!-- ... --></svg>
    </button>
  </div>
</header>

• .lct-header__title：文字標題（16px Bold）
• .lct-header__logo：logo 圖片（高 30px，v1.1 新增）
• .lct-header__actions：右側動作群組

頂部導覽 Tab Bar .lct-tabbar

外掛主要的分頁切換：材質庫 / 收藏夾 / 模型匯入 / 材質表。

v1.1 依 Figma 校準改為頂部灰膠囊式（v1.0 為紅字底部導覽）：白底列、作用中的分頁為 灰底膠囊（rgba(91,91,91,.1)）+ 墨色字 #2b2b2b；未選分頁為灰字（rgba(91,91,91,.7)）。item 高 24、icon 16px、文字 12px Medium。

<nav class="lct-tabbar">
  <button class="lct-tab is-active" data-lct-toggle="tab" data-lct-group="nav"
          data-lct-target="#view-lib" data-lct-panes=".view">材質庫</button>
  <button class="lct-tab" data-lct-toggle="tab" data-lct-group="nav"
          data-lct-target="#view-fav" data-lct-panes=".view">收藏夾</button>
  <button class="lct-tab" data-lct-toggle="tab" data-lct-group="nav"
          data-lct-target="#view-import" data-lct-panes=".view">模型匯入</button>
  <button class="lct-tab" data-lct-toggle="tab" data-lct-group="nav"
          data-lct-target="#view-table" data-lct-panes=".view">材質表</button>
</nav>

<div id="view-lib"    class="view">材質庫內容</div>
<div id="view-fav"    class="view lct-hidden">收藏夾內容</div>
<div id="view-import" class="view lct-hidden">模型匯入內容</div>
<div id="view-table"  class="view lct-hidden">材質表內容</div>

Tab 內也可以放 icon（自動縮為 16px）：

<button class="lct-tab is-active" data-lct-toggle="tab" data-lct-group="nav">
  <svg class="lct-icon" viewBox="0 0 256 256"><!-- ... --></svg>
  材質庫
</button>

平均撐滿 .lct-tabbar–justified（v1.1 新增）

需要每個分頁平均分配寬度（類似底部導覽的分佈）時，在容器加上修飾子：

<nav class="lct-tabbar lct-tabbar--justified">…</nav>

data 屬性說明

目前作用中的分頁會加上 .is-active（灰膠囊 + 墨字）。若只是視覺切換、內容由你自己的框架控制，可以省略 data-lct-target / data-lct-panes，只保留 toggle 與 group。

搜尋列 .lct-searchbar

輸入框 + 搜尋按鈕的組合。v1.1 依 Figma 校準：

• .lct-search：白底輸入容器，淺邊框 #ececef、圓角 4、含細陰影、高 32、文字 13px；
• .lct-search-btn：墨色（#2b2b2b）搜尋按鈕，hover 變全黑、圓角 4、13px Medium、高 32。

<div class="lct-searchbar">
  <div class="lct-search">
    <svg class="lct-icon" viewBox="0 0 256 256"><!-- 放大鏡 --></svg>
    <input type="text" placeholder="搜尋材質…">
  </div>
  <button class="lct-search-btn">搜尋</button>
</div>

放大鏡 icon 可省略。placeholder 字色為 --lct-placeholder（rgba(91,91,91,.7)）。

Footer 動作列 .lct-footer-actions

面板底部的動作列（套用材質 / 查看報價 / 清除材料 / 匯出報價）。v1.1 依 Figma 校準：容器高 80、內距 8px 32px、白底 + 向上陰影、項目平均分佈；按鈕 .lct-footer-btn 無框無底，直向排列 icon（24px）+ 文字（12px Medium、#5a4a36），hover 整顆變紅（#d32f2f）。

<div class="lct-footer-actions">
  <button class="lct-footer-btn">
    <svg class="lct-icon" viewBox="0 0 256 256"><!-- 套用 --></svg>
    套用材質
  </button>
  <button class="lct-footer-btn">
    <svg class="lct-icon" viewBox="0 0 256 256"><!-- 眼睛 --></svg>
    查看報價
  </button>
  <button class="lct-footer-btn" disabled>
    <svg class="lct-icon" viewBox="0 0 256 256"><!-- 垃圾桶 --></svg>
    清除材料
  </button>
  <button class="lct-footer-btn lct-footer-btn--primary">
    <svg class="lct-icon" viewBox="0 0 256 256"><!-- 下載 --></svg>
    匯出報價
  </button>
</div>