:root{ --bg-color: #f4f4f9;--container-bg: #ffffff;--text-color: #1a1a1a;--accent-color: #007bff;--accent-hover: #0056b3;--hover-color: #f8f9fa;--border-color: #eaeaea;--progress-bg: #e9ecef;--progress-fill: #28a745;--shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.05);--shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);}@media (prefers-color-scheme: dark){:root{ --bg-color: #0d0d0d;--container-bg: #1a1a1c;--text-color: #e5e5e7;--accent-color: #4da3ff;--accent-hover: #75b9ff;--hover-color: #262629;--border-color: #2d2d30;--progress-bg: #2d2d30;}}*{ box-sizing: border-box;}body{ font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";background-color: var(--container-bg);color: var(--text-color);margin: 0;padding: 0;display: block;-webkit-font-smoothing: antialiased;scrollbar-gutter: stable;user-select: none;-webkit-user-select: none;-webkit-touch-callout: none;cursor: pointer;overflow-x: hidden;width: 100%;}input, textarea{ user-select: text !important;-webkit-user-select: text !important;}.container{ width: 100%;max-width: 1200px;margin: 0 auto;padding: 24px;box-sizing: border-box;position: relative;}header{ position: sticky;top: 0;z-index: 100;background: var(--container-bg);border-bottom: 1px solid var(--border-color);margin-bottom: 20px;}.header-top{ display: flex;justify-content: space-between;align-items: center;padding: 8px 16px;width: 100%;}.mobile-current-folder{ display: none;font-weight: 700;font-size: 0.95rem;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;margin-right: 8px;flex: 1;}.search-row{ padding: 0 16px 12px 16px;display: flex;justify-content: center;}.search-container{ flex: 1;position: relative;max-width: 600px;display: flex;align-items: center;}.search-icon{ position: absolute;left: 12px;top: 50%;transform: translateY(-50%);width: 16px;height: 16px;opacity: 0.5;pointer-events: none;}#search-input{ width: 100%;background: var(--hover-color);border: 1px solid var(--border-color);border-radius: 8px;padding: 8px 72px 8px 36px;color: var(--text-color);font-size: 0.9rem;transition: all 0.2s;}#search-input:focus{ outline: none;background: var(--bg-color);border-color: var(--accent-color);box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);}.search-actions{ position: absolute;right: 8px;display: flex;align-items: center;gap: 2px;}#search-filters-btn, #search-clear-btn{ padding: 4px;opacity: 0.6;background: transparent;border: none;box-shadow: none;height: auto;display: flex;align-items: center;justify-content: center;}#search-filters-btn:hover, #search-clear-btn:hover{ opacity: 1;}.menu-label{ padding: 8px 12px;font-size: 0.7rem;font-weight: 700;text-transform: uppercase;color: var(--text-color);opacity: 0.5;letter-spacing: 0.05em;}.actions{ display: flex;gap: 8px;flex-shrink: 0;}.btn{ background: var(--hover-color);color: var(--text-color);border: 1px solid var(--border-color);padding: 4px;border-radius: 8px;cursor: pointer;display: flex;align-items: center;justify-content: center;height: 28px;min-width: 28px;transition: all 0.2s ease;}.btn .lucide{ width: 16px;height: 16px;}@media (max-width: 600px){ .btn{ height: 34px !important;min-width: 34px !important;padding: 6px !important;} .btn .lucide{ width: 20px !important;height: 20px !important;}}.btn.active{ background: var(--accent-color) !important;color: white !important;border-color: var(--accent-color) !important;}.btn-primary{ background: var(--accent-color);color: white;border-color: var(--accent-color);}.file-item{ display: flex;cursor: pointer;border-radius: 12px;transition: all 0.2s;background: var(--container-bg);}.file-item.selected{ background: rgba(0, 123, 255, 0.1) !important;border-color: var(--accent-color) !important;}/* Grid Specifics */.file-grid:not(.list-view) .file-item{ flex-direction: column;align-items: center;justify-content: center;padding: 12px;min-height: 120px;height: auto;text-align: center;border: 1px solid var(--border-color);}.file-grid:not(.list-view) .file-item .icon-wrapper{ margin-bottom: 8px;}.file-grid:not(.list-view) .file-item .lucide{ width: 44px;height: 44px;stroke-width: 1.5px;}.file-grid:not(.list-view) .file-item .file-name{ font-size: 0.85rem;width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;display: block;}.file-grid:not(.list-view) .file-item .file-subinfo{ display: none;}.file-grid:not(.list-view) .file-item .file-info{ font-size: 0.7rem;opacity: 0.5;margin-top: 2px;}/* List Specifics */.file-grid.list-view .file-item{ flex-direction: row;align-items: center;padding: 8px 16px;border-radius: 0;border: none;border-bottom: 1px solid var(--border-color);}.file-grid.list-view .file-item .icon-wrapper{ margin-right: 12px;}.file-grid.list-view .file-item .lucide{ width: 24px;height: 24px;}.file-grid.list-view .file-item .file-content{ display: flex;flex-direction: column;min-width: 0;flex: 1;}.file-grid.list-view .file-item .file-name{ font-size: 0.95rem;text-align: left;margin-bottom: 2px;width: 100%;display: flex;align-items: center;}.file-grid.list-view .file-item .file-subinfo{ display: block;font-size: 0.75rem;opacity: 0.5;text-align: left;}.file-grid.list-view .file-item .file-info{ font-size: 0.85rem;opacity: 0.7;margin-left: 12px;}@media (hover: hover){ .btn-primary:hover{ background: var(--accent-hover);} .btn-ghost:hover{ background: var(--hover-color);} .proto-card:hover{ background: var(--hover-color);} .file-item:hover{ background: var(--hover-color);} .menu-item:hover{ background: var(--hover-color);} .breadcrumb-item:hover{ background: var(--hover-color);} .breadcrumb-ellipsis:hover{ background: var(--hover-color);} .btn-danger:hover{ background-color: #ff3333;}}.btn-sm{ padding: 4px 8px;font-size: 0.8rem;height: 28px;}/* Selection Bar */.selection-bar{ background: var(--hover-color);color: var(--text-color);padding: 8px 16px;display: flex;align-items: center;justify-content: space-between;border-top: 1px solid var(--border-color);animation: slideInUp 0.1s ease-out;}.selection-left{ display: flex;align-items: center;gap: 8px;}.selection-bar .btn-ghost{ color: var(--text-color);opacity: 0.7;padding: 4px;min-width: 32px;}#selection-count{ font-weight: 700;font-size: 0.9rem;min-width: 20px;text-align: center;}.selection-actions{ display: flex;gap: 4px;}/* Proper Checkbox UI */.checkbox-item{ display: flex;align-items: center;gap: 10px;cursor: pointer;user-select: none;font-size: 0.9rem;}.checkbox-container{ display: block;position: relative;width: 20px;height: 20px;flex-shrink: 0;}.checkbox-container input{ position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;}.checkmark{ position: absolute;top: 0;left: 0;height: 20px;width: 20px;background-color: transparent;border: 2px solid var(--border-color);border-radius: 4px;transition: all 0.2s;}.checkbox-container:hover input ~ .checkmark{ border-color: var(--accent-color);}.checkbox-container input:checked ~ .checkmark{ background-color: var(--accent-color);border-color: var(--accent-color);}.checkbox-container input:indeterminate ~ .checkmark{ background-color: var(--accent-color);border-color: var(--accent-color);}.checkmark:after{ content: "";position: absolute;display: none;}.checkbox-container input:checked ~ .checkmark:after{ display: block;left: 6px;top: 2px;width: 5px;height: 10px;border: solid white;border-width: 0 2px 2px 0;transform: rotate(45deg);}.checkbox-container input:indeterminate ~ .checkmark:after{ display: block;left: 4px;top: 7px;width: 8px;height: 2px;background: white;}@keyframes slideInDown{ from{ transform: translateY(-100%);} to{ transform: translateY(0);}}@media (max-width: 600px){ .selection-actions{ border: none;padding: 0;} #selection-count{ font-size: 0.9rem;}}.full-page{ position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: var(--container-bg);z-index: 3000;overflow-y: auto;display: none;flex-direction: column;-webkit-overflow-scrolling: touch;}/* Auth Card */.auth-card{ margin: auto;width: 90%;max-width: 400px;padding: 32px;background: var(--container-bg);border: 1px solid var(--border-color);border-radius: 24px;box-shadow: var(--shadow-md);}.auth-header{ text-align: center;margin-bottom: 32px;}.logo-wrapper{ width: 64px;height: 64px;background: var(--accent-color);color: white;border-radius: 16px;display: flex;align-items: center;justify-content: center;margin: 0 auto 16px;}.logo-wrapper .lucide{ width: 32px;height: 32px;}.auth-header h2{ margin: 0;font-size: 1.5rem;}.auth-header p{ opacity: 0.6;margin: 8px 0 0;}.divider{ display: flex;align-items: center;text-align: center;margin: 24px 0;font-size: 0.75rem;opacity: 0.4;font-weight: 700;}.divider::before, .divider::after{ content: "";flex: 1;border-bottom: 1px solid var(--border-color);}.divider span{ padding: 0 12px;}.btn-full{ width: 100%;height: 48px;font-size: 1rem;font-weight: 600;}/* Settings */.settings-container{ max-width: 800px;margin: 0 auto;width: 100%;padding: 40px 24px;}.settings-header{ display: flex;align-items: center;gap: 16px;margin-bottom: 32px;position: sticky;top: 0;background: var(--container-bg);z-index: 10;padding: 12px 0;}.settings-header h2{ margin: 0;font-size: 1.8rem;}.settings-sections section{ margin-bottom: 48px;}.settings-sections h3{ display: flex;align-items: center;gap: 8px;margin: 0 0 16px;font-size: 1.1rem;color: var(--accent-color);}.settings-sections h3 .lucide{ width: 20px;height: 20px;}.section-desc{ font-size: 0.9rem;opacity: 0.6;margin: -8px 0 24px;}.input-group{ margin-bottom: 20px;}.input-group label{ display: block;font-size: 0.85rem;font-weight: 600;margin-bottom: 8px;opacity: 0.8;}.input-wrapper{ position: relative;display: flex;align-items: center;}.input-wrapper .lucide{ position: absolute;left: 12px;opacity: 0.5;pointer-events: none;width: 18px;height: 18px;}.input-wrapper input{ width: 100%;padding: 12px 12px 12px 42px !important;border: 1px solid var(--border-color);border-radius: 10px;background: var(--hover-color);color: var(--text-color);font-size: 1rem;box-sizing: border-box;transition: border-color 0.2s;}.input-wrapper input:focus{ border-color: var(--accent-color);outline: none;}.protocol-grid{ display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));gap: 12px;}.proto-card{ display: flex;align-items: center;justify-content: space-between;padding: 16px;background: var(--hover-color);border: 1px solid var(--border-color);border-radius: 12px;cursor: pointer;transition: all 0.2s;}.proto-card.selected{ border-color: var(--accent-color);background: rgba(0, 123, 255, 0.05);}.proto-name{ display: block;font-weight: 600;margin-bottom: 2px;}.proto-desc{ display: block;font-size: 0.8rem;opacity: 0.5;}.radio-check{ width: 18px;height: 18px;border: 2px solid var(--border-color);border-radius: 50%;position: relative;flex-shrink: 0;}.proto-card.selected .radio-check{ border-color: var(--accent-color);}.proto-card.selected .radio-check::after{ content: "";position: absolute;top: 4px;left: 4px;width: 8px;height: 8px;background: var(--accent-color);border-radius: 50%;}/* Passkeys List */.section-header{ display: flex;justify-content: space-between;align-items: center;margin-bottom: 16px;}.passkeys-list{ display: flex;flex-direction: column;gap: 8px;}.passkey-item{ display: flex;align-items: center;gap: 12px;padding: 12px 16px;background: var(--hover-color);border: 1px solid var(--border-color);border-radius: 12px;}.passkey-item .lucide-key{ width: 20px;height: 20px;opacity: 0.5;}.passkey-info{ flex: 1;min-width: 0;}.passkey-name{ display: block;font-weight: 600;font-size: 0.95rem;}.passkey-id{ font-size: 0.75rem;opacity: 0.4;font-family: monospace;}.passkey-actions{ display: flex;gap: 4px;}@media (max-width: 600px){ .settings-container{ padding: 16px;} .protocol-grid{ grid-template-columns: 1fr;}}.file-grid{ display: grid;grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));gap: 20px;justify-content: center;width: 100%;}/* List Layout */.file-grid.list-view{ display: flex;flex-direction: column;gap: 0;}/* Modals */.modal-overlay{ position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0.5);display: flex;align-items: center;justify-content: center;z-index: 2000;backdrop-filter: blur(4px);-webkit-backdrop-filter: blur(4px);}.modal{ background: var(--container-bg);padding: 24px;border-radius: 20px;width: 90%;max-width: 400px;box-shadow: var(--shadow-md);animation: modalPop 0.2s ease-out;}@keyframes modalPop{ from{ transform: scale(0.9);opacity: 0;} to{ transform: scale(1);opacity: 1;}}.modal h3{ margin-top: 0;margin-bottom: 16px;}.modal input{ width: 100%;padding: 12px;margin-bottom: 20px;border: 1px solid var(--border-color);border-radius: 10px;background: var(--hover-color);color: var(--text-color);font-size: 1rem;}.modal-actions{ display: flex;gap: 12px;justify-content: flex-end;}/* Context Menus */.submenu-container{ position: relative;padding-left: 20px;border-left: 1px solid var(--border-color);margin-top: 4px;margin-bottom: 4px;}.menu-item.has-submenu{ justify-content: space-between;}.menu-item .chevron{ width: 14px !important;height: 14px !important;opacity: 0.4;transition: transform 0.2s;}.menu-item.expanded .chevron{ transform: rotate(90deg);}.nested-submenu{ background: rgba(0, 0, 0, 0.02);border-radius: 8px;padding-left: 0;margin-left: 12px;}.nested-submenu .menu-item{ padding-left: 40px;font-size: 0.85rem;opacity: 0.8;}.submenu-container .submenu-container .menu-item{ padding-left: 60px;}.sort-check{ width: 16px;height: 16px;margin-right: 8px;visibility: hidden;}.sort-check.active{ visibility: visible;color: var(--accent-color);}@media (prefers-color-scheme: dark){ .nested-submenu{ background: rgba(255, 255, 255, 0.03);}}.context-menu{ position: absolute !important;background: var(--container-bg);border: 1px solid var(--border-color);border-radius: 12px;box-shadow: var(--shadow-md);padding: 6px;z-index: 1000;min-width: 160px;}.menu-item{ padding: 8px 12px;border-radius: 6px;cursor: pointer;display: flex;align-items: center;gap: 8px;font-size: 0.9rem;}.menu-item:hover{ background: var(--hover-color);}.menu-item .lucide{ width: 16px;height: 16px;}/* Breadcrumbs */.breadcrumbs{ display: flex;align-items: center;gap: 0;font-size: 1rem;flex-wrap: nowrap;overflow: hidden;}.breadcrumb-item{ padding: 4px 8px;cursor: pointer;border-radius: 6px;transition: background 0.2s;white-space: nowrap !important;max-width: 150px;overflow: hidden;text-overflow: ellipsis;}.breadcrumb-item:hover{ background: var(--hover-color);}.breadcrumb-item .lucide{ width: 18px;height: 18px;flex-shrink: 0;}.breadcrumb-separator{ margin: 0 4px;opacity: 0.3;user-select: none;font-weight: 300;display: inline-flex;align-items: center;flex-shrink: 0;}.breadcrumb-ellipsis{ cursor: pointer;padding: 0 8px;color: var(--accent-color);font-weight: bold;border-radius: 6px;}.breadcrumb-ellipsis:hover{ background: var(--hover-color);}/* Progress Bar */.upload-status{ margin-bottom: 24px;padding: 16px;background: var(--hover-color);border-radius: 12px;border: 1px solid var(--border-color);}.progress-container{ height: 6px;background: var(--progress-bg);border-radius: 3px;overflow: hidden;margin-bottom: 8px;}.progress-bar{ height: 100%;background: var(--progress-fill);width: 0%;transition: width 0.1s linear;}@media (max-width: 600px){ .container{ padding: 12px 12px;} .breadcrumbs{ display: none;} .mobile-current-folder{ display: block;} .header-top{ justify-content: flex-start;padding: 8px 12px;} .breadcrumb-item{ max-width: 80px;} .file-grid:not(.list-view){ grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));gap: 12px;} .file-grid:not(.list-view) .file-item{ padding: 8px;min-height: 100px;} .file-grid:not(.list-view) .file-item .lucide{ width: 32px;height: 32px;} .file-grid:not(.list-view) .file-name{ font-size: 0.75rem;}}.btn:disabled{ opacity: 0.4;cursor: not-allowed;transform: none !important;}.btn-danger{ color: #ff4d4d;}.empty-state{ padding: 64px 24px;display: flex;flex-direction: column;align-items: center;justify-content: center;opacity: 0.3;pointer-events: none;text-align: center;z-index: 1;}.empty-state .lucide{ width: 80px;height: 80px;margin-bottom: 16px;stroke-width: 1px;}.empty-state p{ font-size: 1.2rem;font-weight: 500;}/* Loading State */.loading-overlay{ position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: rgba(var(--container-bg-rgb, 255, 255, 255), 0.6);display: none;align-items: center;justify-content: center;z-index: 10;backdrop-filter: blur(2px);border-radius: 12px;}.file-grid.loading{ position: relative;pointer-events: none;opacity: 0.7;}.spinner{ width: 40px;height: 40px;border: 3px solid var(--border-color);border-top: 3px solid var(--accent-color);border-radius: 50%;animation: spin 0.8s linear infinite;}@keyframes spin{ 0%{ transform: rotate(0deg);} 100%{ transform: rotate(360deg);}}@media (prefers-color-scheme: dark){:root{ --container-bg-rgb: 26, 26, 28;}}.file-footer{ text-align: center;font-weight: 700;margin-top: 24px;padding-bottom: 24px;font-size: 0.9rem;opacity: 0.6;}@keyframes slideInUp{ from{ opacity: 0;transform: translateY(10px);} to{ opacity: 1;transform: translateY(0);} }/* File Browser Modal */.file-browser-modal{ width: 90%;max-width: 500px !important;display: flex;flex-direction: column;max-height: 85vh;}.fb-breadcrumbs{ padding: 4px 0 12px 0;font-size: 0.85rem;border-bottom: 1px solid var(--border-color);margin-bottom: 4px;display: flex;flex-wrap: wrap;gap: 4px;}.fb-list{ flex: 1;overflow-y: auto;display: flex;flex-direction: column;margin-top: 8px;}.fb-item{ display: flex;align-items: center;gap: 12px;padding: 10px 12px;border-radius: 8px;cursor: pointer;transition: background 0.2s;user-select: none;}.fb-item:hover{ background: var(--hover-color);}.fb-item .lucide{ width: 20px;height: 20px;opacity: 0.7;flex-shrink: 0;}.fb-item-name{ flex: 1;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size: 0.95rem;}.fb-footer{ padding-top: 16px;border-top: 1px solid var(--border-color);display: flex;flex-direction: column;gap: 12px;}#fb-filename{ margin-bottom: 0 !important;}.modal-header{ display: flex;justify-content: space-between;align-items: center;margin-bottom: 8px;}.modal-header h3{ margin: 0;}