Search Empty State

搜尋頁面的初始狀態，引導用戶加入檔案或資料夾

輸入番號搜尋，或加入影片檔案

也可直接拖入檔案或資料夾 
<div class="state-page">
    <i class="bi bi-film"></i>
    <p>輸入番號搜尋，或加入影片檔案</p>
    <div class="empty-actions">
        <button class="btn btn-outline btn-primary btn-sm">
            <i class="bi bi-file-earmark-plus"></i> 加入檔案
        </button>
        <button class="btn btn-outline btn-primary btn-sm">
            <i class="bi bi-folder-plus"></i> 加入資料夾
        </button>
        <button class="btn btn-outline btn-warning btn-sm">
            <i class="bi bi-star-fill"></i> 我的最愛
        </button>
    </div>
    <small class="state-page-hint">也可直接拖入檔案或資料夾</small>
</div>

Search Error State

搜尋失敗時顯示的錯誤狀態，多檔案模式下提供導航切換

搜尋失敗

請檢查番號格式或稍後再試
1/5 
<div class="state-page error">
    <i class="bi bi-exclamation-triangle"></i>
    <p class="error-text">搜尋失敗</p>
    <small>請檢查番號格式或稍後再試</small>

    <!-- 多檔案模式導航 -->
    <div class="error-nav">
        <button class="btn btn-outline btn-neutral btn-sm">
            <i class="bi bi-chevron-left"></i>
        </button>
        <span class="error-nav-indicator">1/5</span>
        <button class="btn btn-outline btn-neutral btn-sm">
            <i class="bi bi-chevron-right"></i>
        </button>
    </div>
</div>
使用場景：

Search Loading State

搜尋進行中的進度指示器，展示查詢標題、旋轉動畫和進度條

"SONE-103"
正在搜尋 SONE-103...
65 / 100 
<div class="search-progress">
    <div class="progress-container">
        <!-- 搜尋標題 -->
        <div class="progress-header">
            <span class="progress-status">"SONE-103"</span>
        </div>

        <!-- 單行日誌 + Spinner -->
        <div class="progress-log">
            正在搜尋 SONE-103...
        </div>

        <!-- 詳情進度條 -->
        <div class="detail-progress show">
            <div class="detail-bar" style="width: 65%;"></div>
            <span class="detail-text">65 / 100</span>
        </div>
    </div>
</div>
使用場景：