body, html { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background-color: #f7f9fc; }
        
        /* 初期ローダー */
        #initial-loader {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background-color: #ffffff; z-index: 9999;
            display: flex; flex-direction: column; justify-content: center; align-items: center;
            transition: opacity 0.5s ease-out;
        }
        .spinner {
            width: 50px; height: 50px; border: 5px solid #f3f3f3;
            border-top: 5px solid #1a73e8; border-radius: 50%;
            animation: spin 1s linear infinite; mb-4;
        }
        .loading-text { margin-top: 20px; font-family: sans-serif; color: #5f6368; font-weight: 500; }

        /* スクロールバー */
        ::-webkit-scrollbar { width: 8px; height: 8px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #dadce0; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: #bdc1c6; }

        /* プレビュー用ローダー */
        .loader { border: 3px solid rgba(255,255,255,0.2); border-radius: 50%; border-top: 3px solid #1a73e8; width: 40px; height: 40px; animation: spin 1s linear infinite; }
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

        /* ファイルカード (Grid View) */
        .file-card { background: white; border: 1px solid #dadce0; border-radius: 12px; overflow: hidden; transition: box-shadow 0.1s; cursor: pointer; user-select: none; }
        .file-card:hover { box-shadow: 0 1px 3px rgba(0,0,0,0.12); background-color: #f8f9fa; }
        .file-card.selected { background-color: #e8f0fe !important; border-color: #1a73e8 !important; }

        /* ファイル行 (List View) */
        .file-row { display: flex; align-items: center; padding: 0 12px; height: 48px; border-bottom: 1px solid #f1f3f4; cursor: pointer; user-select: none; }
        .file-row:hover { background-color: #f1f3f4; }
        .file-row.selected { background-color: #e8f0fe !important; }

        /* 右クリックメニュー */
        #context-menu { display: none; position: fixed; z-index: 5000; min-width: 220px; background: white; border: none; border-radius: 4px; box-shadow: 0 2px 10px rgba(0,0,0,0.2); padding: 6px 0; }
        .menu-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 16px; text-align: left; color: #3c4043; font-size: 14px; background: transparent; border: none; cursor: pointer; }
        .menu-item:hover { background-color: #e8f0fe; color: #1f2937; }
        .menu-separator { height: 1px; background: #dadce0; margin: 6px 0; }
        .menu-info { padding: 4px 16px; font-size: 11px; color: #5f6368; border-bottom: 1px solid #dadce0; margin-bottom: 4px; }

        /* その他UIパーツ */
        .btn-new { background: white; color: #3c4043; border-radius: 16px; box-shadow: 0 1px 2px 0 rgba(60,64,67,0.3); padding: 12px 20px; font-weight: 500; font-size: 14px; transition: 0.2s; display: flex; align-items: center; gap: 12px; }
        .btn-new:hover { background: #f8f9fa; box-shadow: 0 4px 6px 0 rgba(60,64,67,0.3); }
        .dropzone-active { border: 2px dashed #1a73e8 !important; background-color: #e8f0fe !important; }
        .modal-enter { animation: fadeIn 0.2s ease-out forwards; }
        @keyframes fadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
        .plyr { --plyr-color-main: #1a73e8; width: 100%; height: 100%; }
        #sidebar { transition: transform 0.3s ease-in-out; }
        .thumb-loading { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; background-color: #f3f4f6; }
        @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }