/* ============================================================
   CloudDrive Web UI — Design System
   ============================================================ */

/* ---------- Design Tokens ---------- */
:root {
    /* Colors */
    --primary: #0d6efd;
    --primary-hover: #0b5ed7;
    --primary-light: rgba(13, 110, 253, 0.1);
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #e9ecef;
    --text-primary: #212529;
    --text-secondary: #595f66;
    --text-muted: #6b7280;
    --border: #dee2e6;
    --border-light: #e9ecef;
    --bg-card: #e9ecef;
    --success: #198754;
    --danger: #dc3545;
    --warning: #ffc107;
    --info: #0dcaf0;
    --folder-icon: #3478F6;

    /* Shadows — matching reference BlazorWasm */
    --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
    --shadow-hover: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.2);

    /* Layout */
    --header-height: 48px;
    --sidebar-width: 260px;
    --border-radius: 0.375rem;
    --border-radius-lg: 0.5rem;
    --transition: 0.2s ease;

    /* Mobile safe areas */
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --tab-bar-height: 56px;
}

/* Dark theme — iOS system dark color palette */
[data-theme="dark"] {
    --primary: #4dabf7;
    --primary-hover: #74c0fc;
    --primary-light: rgba(77, 171, 247, 0.15);
    --bg-primary: #000000;
    --bg-secondary: #1C1C1E;
    --bg-tertiary: #2C2C2E;
    --bg-card: #2C2C2E;
    --bg-file-container: #000000;
    --text-primary: #f8f9fa;
    --text-secondary: #98989F;
    --text-muted: #8E8E93;
    --border: #38383A;
    --border-light: #2C2C2E;
    --success: #30D158;
    --danger: #FF453A;
    --warning: #FFD60A;
    --info: #66d9ef;
    --folder-icon: #3478F6;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
    --shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.7);
}

/* ---------- Reset ---------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--bg-secondary);
    -webkit-font-smoothing: antialiased;
}

/* ---------- Custom Scrollbars ---------- */
/* Webkit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}
::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}
/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border) var(--bg-secondary);
}

a {
    color: var(--primary);
    text-decoration: none;
}
a:hover { text-decoration: underline; }

/* ---------- App Layout ---------- */
.app-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
}

.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
    padding: 0 12px;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border);
    z-index: 100;
    flex-shrink: 0;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 2px;
}
.header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 16px;
    transition: var(--transition);
    text-decoration: none;
}
.header-btn:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
    text-decoration: none;
}

.header-logo {
    display: flex;
    align-items: center;
    height: 36px;
}
.logo-img {
    height: 32px;
    width: auto;
}

/* ── Header dropdowns ─────────────────────────────── */
.header-dropdown-wrapper {
    position: relative;
}
.header-dropdown-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
}
.header-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    min-width: 160px;
    z-index: 1001;
    padding: 4px 0;
}
.header-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 14px;
    font-size: 13px;
    color: var(--text-primary);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    text-decoration: none;
    transition: var(--transition);
}
.header-dropdown-item:hover { background: var(--bg-secondary); text-decoration: none; }
.header-dropdown-item.active { color: var(--primary); }
.header-dropdown-item.danger { color: var(--danger); }
.header-dropdown-item.danger:hover { background: rgba(220,53,69,0.08); }
.header-dropdown-item i { width: 16px; text-align: center; font-size: 13px; color: var(--text-secondary); }
.header-dropdown-item.active i,
.header-dropdown-item.danger i { color: inherit; }
.header-dropdown-divider { height: 1px; background: var(--border-light); margin: 4px 0; }

/* ── Inline performance bar ───────────────────────── */
.perf-bar {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 0 10px;
    height: 28px;
    font-size: 11px;
    color: var(--text-primary);
    text-decoration: none;
    transition: var(--transition);
}
.perf-bar:hover { background: var(--bg-tertiary); text-decoration: none; }
.perf-metric {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    color: var(--text-primary);
    text-decoration: none;
}
.perf-metric:hover { text-decoration: none; color: var(--text-primary); opacity: 0.8; }
.perf-metric i { font-size: 10px; }
.perf-metric.cpu i { color: #ff6b6b; }
.perf-metric.mem i { color: #9c27b0; }
.perf-metric.dl  i { color: #2196f3; }
.perf-metric.ul  i { color: #4caf50; }
.perf-val-low  { color: #4caf50; }
.perf-val-med  { color: #ff9800; }
.perf-val-high { color: #f44336; }
.perf-metric.task-copy i { color: #ff6b6b; }
.perf-metric.task-dl  i { color: #2196f3; }
.perf-metric.task-ul  i { color: #4caf50; }

.app-main {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* ---------- Sidebar ---------- */
.app-sidebar {
    width: var(--sidebar-width);
    background: var(--bg-primary);
    border-right: 1px solid var(--border);
    overflow: hidden;
    flex-shrink: 0;
    transition: transform var(--transition), width var(--transition);
    position: relative;
    display: flex;
    flex-direction: column;
}
.app-sidebar:not(.open) {
    width: 0;
    overflow: hidden;
    border-right: none;
}

/* Tree section */
.tree-section {
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.tree-section.expanded {
    flex: 1;
}

/* Vertical splitter (tree ↔ nav) */
.tree-splitter {
    height: 8px;
    cursor: row-resize;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, transparent, var(--border) 40%, var(--border) 60%, transparent);
}
.tree-splitter:hover {
    background: var(--primary-light);
}
.splitter-handle {
    width: 24px;
    height: 3px;
    background: var(--text-muted);
    border-radius: 2px;
}

/* Nav items container */
.nav-items-container {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}
.nav-items-container.collapsed {
    display: none;
}

/* Horizontal splitter (sidebar ↔ content) */
.sidebar-splitter {
    width: 4px;
    cursor: col-resize;
    flex-shrink: 0;
    background: var(--border);
}
.sidebar-splitter:hover {
    background: var(--primary);
}

/* Drag state */
body.sidebar-dragging {
    user-select: none;
    -webkit-user-select: none;
}
body.sidebar-dragging * {
    pointer-events: none;
}
body.sidebar-dragging .sidebar-splitter,
body.sidebar-dragging .tree-splitter {
    pointer-events: all;
}
body.sidebar-dragging .app-sidebar {
    transition: none;
}

/* Nav toggle button */
.nav-items-toggle-btn {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-primary);
    color: var(--text-muted);
    cursor: pointer;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}
.nav-items-toggle-btn:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

.sidebar-nav {
    padding: 8px 0;
}

.nav-section {
    margin-bottom: 4px;
}

.nav-section-title {
    padding: 8px 16px 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    color: var(--text-secondary);
    font-size: 14px;
    transition: var(--transition);
    text-decoration: none;
    border-left: 3px solid transparent;
}
.nav-item:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    text-decoration: none;
}
.nav-item.active {
    background: var(--primary-light);
    color: var(--primary);
    border-left-color: var(--primary);
    font-weight: 500;
}

.nav-icon { width: 18px; text-align: center; }

/* ---------- Folder Tree (Sidebar) ---------- */
.folder-tree {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.tree-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    user-select: none;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}
.tree-header:hover { color: var(--text-secondary); }
.tree-header-icon { font-size: 12px; }
.tree-header-title { flex: 1; }
.tree-header-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 4px;
    font-size: 11px;
    border-radius: 3px;
}
.tree-header-btn:hover { color: var(--text-primary); background: var(--bg-tertiary); }
.tree-header-chevron { font-size: 10px; }

.tree-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
    min-height: 0;
    padding-bottom: 4px;
}
.tree-content > div {
    width: fit-content;
    min-width: 100%;
}
.tree-loading, .tree-empty {
    padding: 8px 16px;
    color: var(--text-muted);
    font-size: 12px;
    text-align: center;
}
.tree-node-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px 3px 12px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-secondary);
    border-left: 3px solid transparent;
    transition: background var(--transition);
    white-space: nowrap;
}
.tree-node-row:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}
.tree-node-row.active {
    background: var(--primary-light);
    color: var(--primary);
    border-left-color: var(--primary);
    font-weight: 500;
}
.tree-toggle {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 10px;
    color: var(--text-muted);
    border-radius: 3px;
}
.tree-toggle:hover { color: var(--text-primary); background: var(--bg-tertiary); }
img.tree-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    object-fit: contain;
}
i.tree-icon {
    width: 16px;
    text-align: center;
    flex-shrink: 0;
    font-size: 13px;
    color: var(--folder-icon);
}
.tree-name {
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .folder-tree { display: none; }
    .sidebar-splitter, .tree-splitter, .nav-items-toggle-btn { display: none; }
}

/* ---------- Content ---------- */
.app-content {
    flex: 1;
    overflow-y: auto;
    background: var(--bg-secondary);
}

.content-body {
    padding: 20px 24px;
    max-width: 1400px;
}

/* ---------- Page Header ---------- */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 12px;
}
/* Back arrow for sub-pages — hidden on desktop, shown on mobile/touch.
   Placed inside <h1> so it stays on the same line as the title. */
.mobile-back-btn {
    display: none;
    background: none;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    padding: 0 8px 0 0;
    font-size: 0.8em;
    vertical-align: middle;
    -webkit-tap-highlight-color: transparent;
}
.touch-device .mobile-back-btn { display: inline; }

.page-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
}

.version-badge {
    font-size: 13px;
    padding: 2px 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text-secondary);
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}
.btn:hover { background: var(--bg-secondary); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.btn-primary:hover { background: var(--primary-hover); }

.btn-danger {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}
.btn-danger:hover { background: var(--danger); opacity: 0.9; }

.btn-secondary {
    background: var(--bg-secondary);
    border-color: var(--border);
}

.btn-sm { padding: 6px 12px; font-size: 14px; min-height: 32px; }
.btn-block { width: 100%; justify-content: center; }

/* ---------- Forms ---------- */
.form-group {
    margin-bottom: 16px;
}
.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 4px;
    color: var(--text-secondary);
}

.form-input {
    width: 100%;
    padding: 8px 12px;
    font-size: 15px;
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: var(--transition);
    outline: none;
}
.form-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}
.form-error {
    color: var(--danger);
    font-size: 13px;
    margin-top: 8px;
    padding: 6px 10px;
    background: rgba(220, 53, 69, 0.08);
    border-radius: var(--border-radius);
}

.input-group {
    display: flex;
    align-items: stretch;
    position: relative;
}
.input-group .form-input {
    padding-left: 36px;
}
.input-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    z-index: 1;
}
.input-addon {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 8px;
}

.form-check { display: flex; align-items: center; }
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    cursor: pointer;
    color: var(--text-secondary);
}

/* ---------- Password Input ---------- */
.password-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.password-input-wrap .form-input {
    padding-right: 36px;
    width: 100%;
}
.password-toggle-btn {
    position: absolute;
    right: 6px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 6px;
    font-size: 13px;
    line-height: 1;
}
.password-toggle-btn:hover { color: var(--text-primary); }
.form-text-muted {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-muted);
}
.encrypt-password-warning {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    margin-top: 8px;
    border-radius: var(--border-radius);
    background: rgba(255, 193, 7, 0.12);
    border: 1px solid rgba(255, 193, 7, 0.3);
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.5;
}
.encrypt-password-warning > i {
    color: #e6a700;
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 2px;
}
.encrypt-password-warning strong {
    display: block;
    margin-bottom: 4px;
    color: var(--text-primary);
    font-size: 13px;
}
.encrypt-password-warning p { margin: 0; }

/* ---------- Alerts ---------- */
.alert {
    padding: 10px 14px;
    border-radius: var(--border-radius);
    margin-bottom: 16px;
    font-size: 13px;
}
.alert-error, .alert-danger {
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.3);
    color: var(--danger);
}
.alert-success {
    background: rgba(40, 167, 69, 0.1);
    border: 1px solid rgba(40, 167, 69, 0.3);
    color: var(--success);
}
.alert-warning {
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);
    color: var(--warning);
}
.alert-info {
    background: rgba(23, 162, 184, 0.1);
    border: 1px solid rgba(23, 162, 184, 0.3);
    color: var(--info);
}

/* ---------- Cards ---------- */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.storage-card, .mount-card {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-lg);
    padding: 16px;
    transition: var(--transition);
}
.storage-card:hover, .mount-card:hover {
    box-shadow: var(--shadow-hover);
}

.storage-header, .mount-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.storage-icon, .mount-icon {
    font-size: 24px;
    color: var(--primary);
}

.storage-info, .mount-info { flex: 1; }
.storage-name, .mount-path {
    font-weight: 600;
    font-size: 14px;
}
.storage-user, .mount-source {
    font-size: 12px;
    color: var(--text-secondary);
}

.storage-actions {
    display: flex;
    gap: 8px;
}

/* ---------- Badges ---------- */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 10px;
}
.badge-success {
    background: rgba(25, 135, 84, 0.15);
    color: var(--success);
}
.badge-secondary {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}
.badge-tag {
    text-transform: none;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-weight: 500;
    gap: 4px;
}
.badge-remove {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0 2px;
    font-size: 10px;
    line-height: 1;
}
.badge-remove:hover { color: var(--danger); }
.string-list-editor { display: flex; flex-direction: column; gap: 8px; }
.string-list-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.string-list-input { max-width: 300px; }

/* ---------- Dashboard ---------- */
.dashboard-header {
    text-align: center;
    margin-bottom: 2rem;
}
.dashboard-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}
.dashboard-subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* Dashboard header */
.dashboard-header {
    margin-bottom: 24px;
}
.dashboard-title {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 4px;
}
.dashboard-subtitle {
    font-size: 15px;
    color: var(--text-secondary);
}

/* Function cards grid */
.function-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}
.function-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem 1rem;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-lg);
    cursor: pointer;
    text-decoration: none;
    color: var(--text-primary);
    transition: all 0.2s ease;
}
.function-card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-2px);
    text-decoration: none;
    color: var(--text-primary);
}
.function-card .fc-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
    margin-bottom: 12px;
}
.function-card .fc-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}
.function-card .fc-desc {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
    margin-bottom: 12px;
    min-height: 34px;
}
.function-card .fc-stat {
    font-size: 1.75rem;
    font-weight: 700;
}
.function-card .fc-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-top: 2px;
}
.function-card.disabled {
    opacity: 0.5;
    cursor: default;
}
.function-card.disabled:hover {
    transform: none;
    box-shadow: none;
}

/* Icon color variants */
.fc-icon.files     { background: linear-gradient(135deg, #667eea, #764ba2); }
.fc-icon.mounts    { background: linear-gradient(135deg, #f093fb, #f5576c); }
.fc-icon.clouds    { background: linear-gradient(135deg, #4facfe, #00f2fe); }
.fc-icon.backups   { background: linear-gradient(135deg, #fa709a, #fee140); }
.fc-icon.webdav    { background: linear-gradient(135deg, #43e97b, #38f9d7); }
.fc-icon.tokens    { background: linear-gradient(135deg, #f7971e, #ffd200); }
.fc-icon.membership { background: linear-gradient(135deg, #fbc2eb, #a18cd1); }

/* Recent Files section */
.recent-files-section {
    margin-top: 1.5rem;
    max-width: 1400px;
}
.recent-files-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}
.recent-files-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}
.recent-files-title i { color: var(--text-secondary); font-size: 0.9rem; }
.recent-files-show-all {
    background: none;
    border: none;
    color: var(--accent);
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 4px 8px;
    border-radius: var(--border-radius);
    transition: background 0.15s;
}
.recent-files-show-all:hover { background: var(--bg-secondary); }
.recent-files-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: var(--text-secondary);
    gap: 0.5rem;
}
.recent-files-empty i { font-size: 1.5rem; opacity: 0.5; }
.recent-files-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.5rem;
}
.recent-file-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
    width: 100%;
    color: var(--text-primary);
    font: inherit;
}
.recent-file-card:hover {
    background: var(--bg-secondary);
    border-color: var(--accent);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}
.recent-file-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
    background: var(--bg-secondary);
    color: var(--accent);
    font-size: 0.9rem;
}
.recent-file-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.recent-file-name {
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.recent-file-meta {
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Recent Files Modal */
.recent-files-modal { max-width: 640px; }
.recent-files-modal .modal-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.recent-files-modal-body {
    max-height: 60vh;
    overflow-y: auto;
}
.recent-files-list {
    display: flex;
    flex-direction: column;
}
.recent-file-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border);
}
.recent-file-row:last-child { border-bottom: none; }
.recent-file-row-main {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    color: var(--text-primary);
    font: inherit;
    min-width: 0;
    transition: background 0.15s;
}
.recent-file-row-main:hover { background: var(--bg-secondary); }
.recent-file-remove {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--border-radius);
    transition: all 0.15s;
    font-size: 0.8rem;
}
.recent-file-remove:hover { background: var(--bg-secondary); color: var(--danger); }

/* Full-page recent files list */
.recent-files-list-page {
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-lg);
}

/* Stats grid (bottom panels) */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    max-width: 1400px;
    gap: 1.25rem;
    margin-top: 1rem;
}
.stat-card {
    background: var(--bg-primary);
    border-radius: var(--border-radius-lg);
    padding: 1.25rem;
    border: 1px solid var(--border);
    transition: all 0.2s ease;
    cursor: pointer;
    text-decoration: none;
    color: var(--text-primary);
}
.stat-card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-2px);
    text-decoration: none;
    color: var(--text-primary);
}
.stat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.stat-title {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.stat-icon.info     { background: rgba(13, 202, 240, 0.1); color: var(--info); }
.stat-icon.success  { background: rgba(25, 135, 84, 0.1);  color: var(--success); }
.stat-icon.primary  { background: rgba(13, 110, 253, 0.1); color: var(--primary); }

/* Tasks grid inside stat card */
.tasks-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}
.task-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px;
    border-radius: var(--border-radius);
    background: var(--bg-secondary);
}
.task-item .task-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}
.task-icon.copy     { background: rgba(255, 193, 7, 0.15);  color: #ffc107; }
.task-icon.download { background: rgba(33, 150, 243, 0.15); color: #2196f3; }
.task-icon.upload   { background: rgba(76, 175, 80, 0.15);  color: #4caf50; }
.task-item .task-count {
    font-size: 1.1rem;
    font-weight: 700;
}
.task-item .task-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
}

/* Online devices stat */
.stat-value-large {
    font-size: 2rem;
    font-weight: 700;
}
.stat-subtitle {
    font-size: 0.85rem;
    color: var(--success);
}
.stat-subtitle i { margin-right: 4px; }

/* Performance mini stats */
.perf-stats-mini {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}
.perf-stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
}
.perf-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.perf-dot.cpu      { background: #ff6b6b; }
.perf-dot.memory   { background: #9c27b0; }
.perf-dot.dl       { background: #2196f3; }
.perf-dot.ul       { background: #4caf50; }
.perf-label {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.7rem;
    color: var(--text-secondary);
}
.perf-value {
    font-weight: 600;
    color: var(--text-primary);
}

.content-body:has(.dashboard-header) { max-width: none; }

/* ---------- File Browser ---------- */
.content-body:has(.files-page) { padding: 0; max-width: none; }
.app-content:has(.files-page) { background: var(--bg-file-container, var(--bg-secondary)); }
.files-page { display: flex; flex-direction: column; height: calc(100vh - var(--header-height)); background: var(--bg-file-container, var(--bg-secondary)); padding: 0 12px; }

/* Breadcrumb bar (Row 1) */
.files-breadcrumb-bar {
    display: flex;
    align-items: center;
    padding: 6px 0;
    gap: 8px;
}
.files-breadcrumb-bar .breadcrumb { flex: 1; min-width: 0; }
.breadcrumb-edit-btn { flex-shrink: 0; color: var(--text-muted); opacity: 0.6; }
.breadcrumb-edit-btn:hover { opacity: 1; }
.breadcrumb-path-input {
    flex: 1;
    padding: 6px 12px;
    font-size: 14px;
    border: 1px solid var(--primary);
    border-radius: var(--border-radius);
    background: var(--bg-primary);
    color: var(--text-primary);
    outline: none;
}

/* Topbar wrapper (invisible on desktop, merges breadcrumb + toolbar on mobile) */
.files-topbar { display: contents; }

/* Action toolbar — shown above breadcrumb on all screen sizes */
.files-toolbar {
    display: flex;
    align-items: center;
    padding: 4px 0;
    gap: 4px;
    order: -1;
}
.toolbar-actions-left { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.toolbar-actions-right { display: flex; gap: 4px; align-items: center; margin-left: auto; }

/* Breadcrumb */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;
}
.breadcrumb:active { cursor: grabbing; }
.breadcrumb::-webkit-scrollbar { display: none; }

.breadcrumb-item {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 14px;
    min-height: 32px;
    color: var(--primary);
    background: none;
    border: none;
    cursor: pointer;
    border-radius: var(--border-radius);
    transition: var(--transition);
}
.breadcrumb-item:hover { background: var(--bg-secondary); }
.breadcrumb-item.active {
    color: var(--text-primary);
    font-weight: 500;
    cursor: default;
}

.breadcrumb-separator {
    color: var(--text-muted);
    font-size: 11px;
    flex-shrink: 0;
}

/* File list */
.file-list-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
}
.file-list-scroll-area {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* Pull-to-refresh & swipe-back: hidden by default, shown on touch devices */
.ptr-indicator { display: none; }
.touch-device .ptr-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    overflow: hidden;
    height: 0;
    color: var(--text-secondary);
    font-size: 14px;
    flex-shrink: 0;
    transition: none;
}
.touch-device .ptr-indicator i { font-size: 16px; }
.touch-device .ptr-indicator.refreshing { transition: height 0.2s ease; }

.swipe-back-indicator { display: none; }
.touch-device .swipe-back-indicator {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 56px;
    background: var(--primary);
    border-radius: 0 14px 14px 0;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    z-index: 100;
    pointer-events: none;
}

/* Page picker bottom sheet: hidden by default, shown on touch devices */
.page-picker-backdrop { display: none; }
.page-picker-sheet { display: none; }
.touch-device .page-picker-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 600;
}
.touch-device .page-picker-sheet {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 60vh;
    background: var(--bg-primary);
    border-radius: 12px 12px 0 0;
    z-index: 601;
    animation: slide-up 0.25s ease;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.touch-device .page-picker-handle {
    width: 36px;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin: 8px auto 0;
}
.touch-device .page-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.touch-device .page-picker-cancel {
    background: none;
    border: none;
    color: var(--primary);
    font-size: 16px;
    cursor: pointer;
    padding: 4px 8px;
    min-width: 60px;
    text-align: left;
}
.touch-device .page-picker-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}
.touch-device .page-picker-list {
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
}
.touch-device .page-picker-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 14px 20px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border-light, var(--border));
    cursor: pointer;
    font-size: 16px;
    color: var(--text-primary);
    text-align: left;
    gap: 8px;
    -webkit-tap-highlight-color: transparent;
}
.touch-device .page-picker-item:active {
    background: var(--bg-secondary);
}
.touch-device .page-picker-page {
    flex: 1;
}
.touch-device .page-picker-range {
    color: var(--text-secondary);
    font-size: 14px;
}
.touch-device .page-picker-check {
    color: var(--primary);
    font-size: 14px;
    width: 20px;
    text-align: center;
}

.file-list {
    width: 100%;
    display: block;
}

/* thead hidden — unified header above scroll area replaces it */
.file-list thead {
    display: none;
}
.file-list tbody {
    display: block;
}

.file-list th {
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
    user-select: none;
}
.file-list th.sortable { cursor: pointer; }
.file-list th.sortable:hover { color: var(--text-primary); }

.col-icon { width: 36px; }
.col-size { width: 100px; }
.col-modified { width: 160px; }

.file-row {
    display: flex;
    align-items: center;
    padding: 0 12px;
    cursor: pointer;
    transition: var(--transition);
}
@media (hover: hover) { .file-row:hover { background: var(--bg-secondary); } }
.file-row.selected { background: var(--primary-light); }
.file-row.focused { background: var(--primary-light); box-shadow: inset 3px 0 0 var(--primary); }

.file-row td {
    padding: 6px 8px;
    font-size: 15px;
}
.file-row {
    border-bottom: 1px solid var(--border-light);
}

.file-icon {
    text-align: center;
    color: var(--text-muted);
    position: relative;
    font-size: 36px;
    width: 44px;
    flex-shrink: 0;
}
/* macOS-style folder icon — replaces plain FontAwesome folder everywhere */
.folder-icon,
.wf-card-icon > .fa-folder,
i.tree-icon.fa-folder,
i.tree-icon.fa-folder-open {
    color: transparent !important;  /* hide FA glyph */
    width: 1em;
    height: 1em;
    display: inline-block;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 56'%3E%3Cdefs%3E%3ClinearGradient id='fb' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%234AC3F8'/%3E%3Cstop offset='1' stop-color='%231A8DF5'/%3E%3C/linearGradient%3E%3ClinearGradient id='ft' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2362D4FF'/%3E%3Cstop offset='1' stop-color='%2347BBFA'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='10' width='64' height='44' rx='6' fill='url(%23fb)'/%3E%3Crect x='0' y='14' width='64' height='40' rx='5' fill='url(%23fb)'/%3E%3Cpath d='M0 10 Q0 4 6 4 L22 4 Q26 4 28 8 L30 12 H58 Q64 12 64 18 V14 Q64 8 58 8 H30 L28 4 Q26 0 22 0 H6 Q0 0 0 6 Z' fill='url(%23ft)'/%3E%3Crect x='2' y='15' width='60' height='1' rx='0.5' fill='rgba(255,255,255,0.15)'/%3E%3C/svg%3E") no-repeat center / contain;
}
i.tree-icon.fa-folder-open {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 56'%3E%3Cdefs%3E%3ClinearGradient id='fb' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%234AC3F8'/%3E%3Cstop offset='1' stop-color='%231A8DF5'/%3E%3C/linearGradient%3E%3ClinearGradient id='ft' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2362D4FF'/%3E%3Cstop offset='1' stop-color='%2347BBFA'/%3E%3C/linearGradient%3E%3ClinearGradient id='fl' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2362D4FF'/%3E%3Cstop offset='1' stop-color='%231A8DF5'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 10 Q0 4 6 4 L22 4 Q26 4 28 8 L30 12 H58 Q64 12 64 18 V16 H0 Z' fill='url(%23ft)'/%3E%3Cpath d='M4 18 H60 Q64 18 63 22 L56 50 Q55 54 51 54 H6 Q2 54 1 50 L-4 22 Q-5 18 0 18 Z' fill='url(%23fl)'/%3E%3Crect x='5' y='19' width='54' height='1' rx='0.5' fill='rgba(255,255,255,0.15)'/%3E%3C/svg%3E");
}

/* File type icon colors — iOS-style palette */
.fa-file-video { color: #AF52DE; }         /* purple — video */
.fa-file-audio { color: #FF2D55; }         /* pink — audio */
.fa-file-image { color: #34C759; }         /* green — image */
.fa-file-pdf { color: #FF3B30; }           /* red — PDF */
.fa-file-word { color: #2B579A; }          /* Word blue */
.fa-file-excel { color: #217346; }         /* Excel green */
.fa-file-powerpoint { color: #D24726; }    /* PowerPoint orange */
.fa-file-archive { color: #8E8E93; }       /* gray — archives */
.fa-compact-disc { color: #8E8E93; }       /* gray — ISO */
.fa-closed-captioning { color: #8E8E93; }  /* gray — subtitles */

.file-name { font-weight: 400; position: relative; flex: 1; min-width: 0; }
.file-name-text { display: inline; padding-right: 24px; word-break: break-word; }
@media (hover: hover) {
    .file-name-text,
    .file-grid-name,
    .wf-card-name,
    .wf-overlay-name { cursor: pointer; }
    .file-name-text:hover,
    .file-grid-name:hover,
    .wf-card-name:hover,
    .wf-overlay-name:hover {
        color: var(--primary);
        text-decoration: underline;
    }
}
.file-name-text:focus-visible,
.file-grid-name:focus-visible,
.wf-card-name:focus-visible,
.wf-overlay-name:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 2px;
}
.mobile-file-subtitle { display: none; }
.file-name-ellipsis {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    text-align: center;
    color: var(--text-muted);
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
}
.file-name-ellipsis:hover { color: var(--text-primary); }
.directory .file-name { font-weight: 500; }

.file-size, .file-modified {
    color: var(--text-secondary);
    font-size: 12px;
}
.file-checkbox { flex-shrink: 0; padding: 6px 4px; }
.file-size { width: 100px; flex-shrink: 0; }
.file-type { width: 80px; flex-shrink: 0; }
.file-modified { width: 160px; flex-shrink: 0; }
.file-created { width: 160px; flex-shrink: 0; }
.file-accessed { width: 160px; flex-shrink: 0; }

/* View mode buttons (in toolbar) */
.view-mode-buttons { display: flex; gap: 2px; align-items: center; }
.view-mode-buttons .btn.active {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary);
}

/* Unified header — shown in all view modes (grid, list, waterfall) */
.unified-header {
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    user-select: none;
    min-height: 38px;
    flex-shrink: 0;
}
.uh-col {
    cursor: pointer;
    padding: 8px 8px;
    white-space: nowrap;
    flex-shrink: 0;
}
.uh-col:hover { color: var(--text-primary); }
.uh-checkbox { width: 36px; text-align: center; cursor: default; flex-shrink: 0; padding: 6px 4px; }
.uh-icon-spacer { width: 44px; flex-shrink: 0; cursor: default; padding: 6px 8px; }
.uh-name {
    flex: 1;
    min-width: 120px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
}
.uh-sort-label { white-space: nowrap; cursor: pointer; }
.uh-size { width: 100px; }
.uh-type { width: 80px; }
.uh-modified { width: 160px; }
.uh-created { width: 160px; }
.uh-accessed { width: 160px; }

/* Inline filter in unified header Name column */
.uh-filter {
    display: flex;
    align-items: center;
    position: relative;
    flex: 1;
    max-width: 200px;
    min-width: 80px;
}
.uh-filter-icon {
    position: absolute;
    left: 6px;
    font-size: 10px;
    color: var(--text-muted);
    pointer-events: none;
}
.uh-filter-input {
    width: 100%;
    padding: 4px 22px 4px 22px;
    font-size: 12px;
    font-weight: 400;
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    background: var(--bg-primary);
    color: var(--text-primary);
    outline: none;
    transition: var(--transition);
}
.uh-filter-input:focus { border-color: var(--primary); }
.uh-filter-input::placeholder { color: var(--text-muted); }
.uh-filter-clear {
    position: absolute;
    right: 2px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 4px;
    font-size: 10px;
}
.uh-filter-clear:hover { color: var(--text-primary); }

/* Mobile sort button (hidden on desktop) */
.uh-sort-btn-wrapper { display: none; position: relative; }
.uh-sort-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    color: var(--text-secondary);
    cursor: pointer;
    padding: 6px 10px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 32px;
    transition: var(--transition);
}
.uh-sort-btn:hover, .uh-sort-btn:focus-visible { color: var(--text-primary); border-color: var(--primary); }
.uh-sort-btn-label { font-size: 12px; white-space: nowrap; }
.uh-sort-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 2001;
    min-width: 160px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    padding: 4px 0;
    margin-top: 4px;
}
.uh-sort-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
}
.uh-sort-option:hover { background: var(--bg-hover); }
.uh-sort-option.active { color: var(--primary); font-weight: 600; }
.uh-sort-option i { width: 16px; text-align: center; }

/* "+ Add" dropdown */
.add-dropdown {
    position: relative;
    display: inline-flex;
}
.add-dropdown .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
}

/* Waterfall button wrapper + size popup */
.waterfall-btn-wrapper {
    position: relative;
    display: inline-flex;
}
.waterfall-size-popup {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1000;
    display: flex;
    gap: 4px;
    padding: 8px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
}
.wf-size-btn {
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: var(--transition);
}
.wf-size-btn:hover { border-color: var(--primary); color: var(--primary); }
.wf-size-btn.active { background: var(--primary); color: white; border-color: var(--primary); }

/* File grid view */
.file-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 4px;
    padding: 8px;
    overflow-y: auto;
    flex: 1;
    /* Override masonry inline height when switching from waterfall view */
    height: auto !important;
}
.file-grid-item {
    position: relative !important;
    width: auto !important;
    left: auto !important;
    top: auto !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px;
    border-radius: 12px;
    cursor: pointer;
    transition: var(--transition);
    background: var(--bg-card);
    border: 2px solid transparent;
}
@media (hover: hover) { .file-grid-item:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.15); } }
.file-grid-item.selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
}
.file-grid-item.focused {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
}
.file-grid-icon {
    font-size: 48px;
    color: var(--text-muted);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
}
/* folder-icon styling handled in combined rule above */
.file-grid-thumb {
    width: 100%;
    height: 100px;
    margin-bottom: 8px;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
}
.file-grid-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    border-radius: 4px;
}
.file-grid-name {
    font-size: 12px;
    text-align: center;
    word-break: break-word;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.3;
}
.file-grid-size {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}
.file-grid-date {
    font-size: 11px;
    color: var(--text-muted);
}

/* Waterfall/Gallery view — JS masonry (absolute positioning) */
.file-waterfall {
    position: relative;
}

/* Each item: absolutely positioned by JS masonry algorithm.
   Items without left/top are not yet positioned — keep them hidden to avoid stacking at (0,0). */
.wf-item {
    position: absolute;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow 0.15s;
    background: var(--bg-card);
    border: 2px solid transparent;
}
.wf-item:not([style*="left"]) {
    visibility: hidden;
}
@media (hover: hover) {
    .wf-item:hover {
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
}
.wf-item.selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
}
.wf-item.focused {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
}

/* Image/video tile — natural aspect ratio */
.wf-image {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: var(--bg-tertiary);
    line-height: 0; /* remove baseline gap below img */
}
.wf-img {
    width: 100%;
    height: auto; /* natural aspect ratio */
    display: block;
    object-fit: cover;
    transition: transform 0.2s;
}
@media (hover: hover) {
    .wf-item:hover .wf-img {
        transform: scale(1.03);
    }
}
/* Fallback min-height while image loads */
.wf-img[src] {
    min-height: 80px;
}
/* Hide image while loading (on page change) — revealed by onload handler */
.wf-img.wf-img-loading {
    visibility: hidden;
    min-height: 120px;
}

/* Video play button overlay */
.wf-play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 42px;
    color: rgba(255,255,255,0.85);
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
    pointer-events: none;
    z-index: 2;
    transition: transform 0.2s;
}
.wf-play-overlay.wf-play-btn {
    pointer-events: auto;
    cursor: pointer;
}
@media (hover: hover) {
    .wf-item:hover .wf-play-overlay {
        transform: translate(-50%, -50%) scale(1.1);
    }
}

/* Dark gradient overlay at bottom of image */
.wf-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    color: #fff;
    padding: 20px 10px 8px;
    z-index: 1;
}
.wf-overlay-name {
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.wf-overlay-size {
    font-size: 10px;
    opacity: 0.8;
    margin-top: 2px;
    line-height: 1.3;
}

/* Folder / non-preview file cards */
.wf-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 16px 16px;
    min-height: 140px;
    text-align: center;
    gap: 6px;
}
.wf-folder .wf-card-icon {
    color: var(--folder-icon);
}
.wf-card-icon {
    font-size: 48px;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.wf-card-icon img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}
.wf-card-name {
    font-size: 13px;
    font-weight: 500;
    word-break: break-word;
    line-height: 1.3;
}
.wf-card-size {
    font-size: 11px;
    color: var(--text-muted);
}
.wf-card-date {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Overlay meta (size + date) in image/video tiles */
.wf-overlay-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 10px;
    opacity: 0.8;
    margin-top: 2px;
    line-height: 1.3;
}
.wf-overlay-date {
    opacity: 0.7;
}

/* Empty state in waterfall */
.wf-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 20px;
    color: var(--text-muted);
    width: 100%;
}
.wf-empty .empty-icon {
    font-size: 48px;
    opacity: 0.4;
}

/* Video thumbnail generation container */
.wf-video-thumb-container {
    width: 100%;
    min-height: 120px;
    background: var(--bg-tertiary);
}
.wf-video-thumb-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 30px;
    color: var(--text-muted);
}
.wf-thumb-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: wf-spin 0.8s linear infinite;
}
@keyframes wf-spin {
    to { transform: rotate(360deg); }
}
/* Once thumbnail is generated, the container just holds the img */
.wf-video-thumb-container .wf-img {
    width: 100%;
    height: auto;
    display: block;
}

/* Footer with pagination and status */
.file-list-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 12px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    gap: 12px;
    flex-wrap: wrap;
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 4px;
}
.pagination-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-right: 2px;
}
.pagination-separator { color: var(--border); margin: 0 4px; }
.pagination-info {
    font-size: 12px;
    color: var(--text-secondary);
    padding: 0 4px;
    white-space: nowrap;
}
.btn-xs {
    padding: 2px 8px;
    font-size: 11px;
    line-height: 1.5;
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    background: var(--bg-primary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
}
.btn-xs:hover { background: var(--bg-secondary); color: var(--text-primary); }
.btn-xs.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}
.btn-xs:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.file-list-status {
    display: flex;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}

/* Page-size select dropdown */
.page-size-select {
    padding: 2px 6px;
    font-size: 11px;
    line-height: 1.5;
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    background: var(--bg-primary);
    color: var(--text-secondary);
    cursor: pointer;
}

/* Page navigation cards (prev/next) in grid + waterfall */
.file-grid-item.page-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--primary);
    background: transparent;
    color: var(--primary);
    cursor: pointer;
    min-height: 100px;
    gap: 8px;
    transition: background var(--transition);
}
.file-grid-item.page-nav:hover {
    background: var(--primary-light);
}
.file-grid-item.page-nav i {
    font-size: 2em;
}
.file-grid-item.page-nav span {
    font-size: 12px;
    font-weight: 500;
}
.wf-card.wf-page-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--primary);
    background: transparent;
    color: var(--primary);
    cursor: pointer;
    padding: 24px 12px;
    gap: 8px;
}
.wf-item.page-nav:hover .wf-page-nav {
    background: var(--primary-light);
}
.wf-page-nav i {
    font-size: 2em;
}
.wf-page-nav span {
    font-size: 12px;
    font-weight: 500;
}

/* List view prev/next page rows */
.file-list .page-nav-row {
    display: flex;
    align-items: center;
    padding: 0 12px;
    border: 2px dashed var(--primary);
    cursor: pointer;
    transition: background var(--transition);
    user-select: none;
}
.file-list .page-nav-row:hover {
    background: var(--primary-light);
}
.file-list .page-nav-row .file-icon i,
.file-list .page-nav-row .page-nav-name {
    color: var(--primary);
}
.file-list .page-nav-row .file-icon i {
    font-size: 1.1em;
}
.file-list .page-nav-row .page-nav-name {
    font-weight: 500;
}

/* ── Media Viewer (iOS-style lightbox) ──────────────────── */
.viewer-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    outline: none;
}
.viewer-bg {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
}

/* Toolbar — gradient overlay, 56px */
.viewer-toolbar {
    position: relative;
    z-index: 2;
    height: 56px;
    display: flex;
    align-items: center;
    padding: 0 4px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
    flex-shrink: 0;
}
.viewer-toolbar-right {
    display: flex;
    gap: 0;
    align-items: center;
    flex-shrink: 0;
}
.viewer-counter {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    padding: 0 8px;
    white-space: nowrap;
    flex-shrink: 0;
}
/* Filename in center */
.viewer-title {
    flex: 1;
    text-align: center;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 8px;
}
/* Separator between button groups */
.viewer-btn-separator {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    margin: 0 4px;
    flex-shrink: 0;
}
.viewer-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    opacity: 0.8;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 15px;
    border-radius: 4px;
    transition: opacity 0.2s, background 0.2s;
    flex-shrink: 0;
}
.viewer-btn:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.12);
}
.viewer-btn.active {
    opacity: 1;
    color: var(--primary);
}
/* Transform buttons: inline on desktop, dropdown on mobile */
.viewer-transform-inline { display: flex; align-items: center; }
.viewer-transform-dropdown { display: none; position: relative; }
.viewer-transform-backdrop {
    position: fixed;
    inset: 0;
    z-index: 999;
}
.viewer-transform-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    background: rgba(30, 30, 30, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 4px 0;
    min-width: 180px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.viewer-transform-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 16px;
    color: #fff;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    white-space: nowrap;
}
.viewer-transform-item:hover,
.viewer-transform-item:active {
    background: rgba(255, 255, 255, 0.12);
}
.viewer-transform-item i {
    width: 18px;
    text-align: center;
    opacity: 0.8;
}
.viewer-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: viewer-spin 0.6s linear infinite;
    margin: 0 10px;
}
@keyframes viewer-spin {
    to { transform: rotate(360deg); }
}

/* Content area */
.viewer-content {
    flex: 1;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}

/* Navigation arrows */
.viewer-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 44px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    border-radius: 6px;
    opacity: 0;
    transition: opacity 0.2s, background 0.2s;
}
.viewer-content:hover .viewer-nav,
.viewer-nav:focus { opacity: 1; }
.viewer-nav:hover { background: rgba(255, 255, 255, 0.2); }
.viewer-nav-left { left: 16px; }
.viewer-nav-right { right: 16px; }

/* Slide container — 3 holders side-by-side, translated to show current (center) */
.viewer-slide-container {
    position: absolute;
    inset: 0;
    display: flex;
    width: 300%;
    z-index: 1;
    transform: translateX(-33.3333%);
    transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}
.viewer-slide-container.no-transition {
    transition: none;
}
.viewer-slide {
    width: 33.3333%;
    height: 100%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Media container — centered zoom via translate+scale */
.viewer-media {
    max-width: 100%;
    max-height: 100%;
    transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-origin: center center;
    will-change: transform;
}
.viewer-media.no-transition {
    transition: none;
}
/* Slide-in animation for navigation */
@keyframes slide-from-right {
    from { transform: translateX(60px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}
@keyframes slide-from-left {
    from { transform: translateX(-60px); opacity: 0; }
    to   { transform: translateX(0);     opacity: 1; }
}
.viewer-media.slide-from-right { animation: slide-from-right 0.25s ease-out; }
.viewer-media.slide-from-left  { animation: slide-from-left  0.25s ease-out; }

/* Image — smooth rotate/flip transition */
.viewer-media img {
    max-width: 100%;
    max-height: calc(100vh - 136px); /* toolbar 56px + strip 80px */
    max-height: calc(100dvh - 136px); /* Safari: dynamic viewport height */
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    transition: transform 0.25s ease;
}
.viewer-media video {
    max-width: 100%;
    max-height: calc(100vh - 136px);
    max-height: calc(100dvh - 136px);
    object-fit: contain;
    outline: none;
}
.viewer-media .viewer-audio-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px;
}
.viewer-media .viewer-audio-container audio {
    width: 400px;
    max-width: 90vw;
}
.viewer-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.5);
}

/* Thumbnail strip */
.viewer-thumbnail-strip {
    position: relative;
    z-index: 2;
    height: 80px;
    display: flex;
    align-items: center;
    padding: 0 8px;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
    flex-shrink: 0;
    touch-action: pan-x; /* allow native horizontal swipe on mobile */
    cursor: grab;
}
.viewer-thumbnail-strip:active {
    cursor: grabbing;
}
.viewer-thumbnail-strip::-webkit-scrollbar { display: none; }
.viewer-thumb {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.65;
    transition: opacity 0.2s, transform 0.2s, border-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5);
    font-size: 20px;
}
.viewer-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none; /* clicks pass through to .viewer-thumb */
    user-select: none;
    -webkit-user-drag: none;
}
.viewer-thumb.active {
    border-color: #fff;
    opacity: 1;
    transform: scale(1.1);
}
.viewer-thumb:not(.active):hover {
    opacity: 1;
}

/* Properties panel (slide-in from right) */
.viewer-props-panel {
    position: absolute;
    right: 0;
    top: 56px;
    bottom: 80px;
    width: 300px;
    z-index: 10;
    background: rgba(18, 18, 18, 0.5);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow: hidden;
}
.viewer-props-panel.open {
    transform: translateX(0);
}
.viewer-props-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 8px 16px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    flex-shrink: 0;
}
.viewer-props-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}
.props-file-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 16px 12px;
    gap: 8px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.props-file-name {
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    text-align: center;
    word-break: break-all;
    line-height: 1.4;
}
.props-section {
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.props-section:last-child { border-bottom: none; }
.props-section-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: rgba(255, 255, 255, 0.35);
    text-transform: uppercase;
    padding: 4px 16px 6px;
}
.props-row {
    display: flex;
    padding: 3px 16px;
    gap: 12px;
    font-size: 13px;
    line-height: 1.5;
}
.props-row-label {
    color: rgba(255, 255, 255, 0.45);
    flex-shrink: 0;
    min-width: 70px;
}
.props-row-value {
    color: #fff;
    word-break: break-word;
    flex: 1;
}
.viewer-props-loading {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 13px;
}

/* ── Fullscreen / Immersive ──────────────────────────────── */
.viewer-overlay.immersive .viewer-toolbar {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 10;
    transition: opacity 0.3s;
}
.viewer-overlay.immersive .viewer-thumbnail-strip {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    z-index: 10;
    transition: opacity 0.3s;
}
.viewer-overlay.immersive .viewer-nav {
    z-index: 10;
    transition: opacity 0.3s;
}
.viewer-overlay.immersive.controls-hidden .viewer-toolbar,
.viewer-overlay.immersive.controls-hidden .viewer-nav,
.viewer-overlay.immersive.controls-hidden .viewer-thumbnail-strip {
    opacity: 0;
    pointer-events: none;
}
.viewer-overlay.immersive .viewer-media {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.viewer-overlay.immersive .viewer-media img {
    max-height: 100vh;
    max-height: 100dvh;
}
.viewer-overlay.immersive video {
    max-width: 100% !important;
    max-height: 100% !important;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* Hide thumbnail strip in fullscreen when video is playing — native controls overlap */
.viewer-overlay.immersive.video-playing .viewer-thumbnail-strip {
    display: none;
}

/* ── Mobile ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    .viewer-props-panel {
        width: 100%;
        bottom: 68px;
    }
    .viewer-nav {
        width: 36px;
        height: 60px;
        font-size: 18px;
        opacity: 0.6;
    }
    .viewer-nav-left { left: 4px; }
    .viewer-nav-right { right: 4px; }
    .viewer-thumbnail-strip {
        height: 68px;
    }
    .viewer-thumb {
        width: 50px;
        height: 50px;
    }
}

/* Loading bar */
.loading-bar {
    height: 3px;
    background: var(--bg-tertiary);
    overflow: hidden;
}
.loading-bar-inner {
    height: 100%;
    width: 40%;
    background: var(--primary);
    animation: loading-slide 1.2s ease-in-out infinite;
}
@keyframes loading-slide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}

/* Empty state */
.empty-state, .empty-content {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-muted);
}
.file-list .empty-state { display: flex; }
.empty-state td { flex: 1; }
.empty-icon { font-size: 48px; margin-bottom: 16px; }
.empty-state h3 { font-size: 18px; color: var(--text-secondary); margin-bottom: 8px; }

.placeholder-content {
    text-align: center;
    padding: 64px 24px;
    color: var(--text-muted);
}
.placeholder-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.3; }

/* Loading spinner */
.loading-spinner {
    display: flex;
    justify-content: center;
    padding: 48px;
    color: var(--text-muted);
}

/* Inline dialog (create folder, etc.) */
.inline-dialog {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px 0;
}
.inline-dialog .form-input {
    width: auto;
    flex: 1;
    max-width: 300px;
}

/* ---------- Tabs ---------- */
.tabs {
    display: flex;
    border-bottom: 2px solid var(--border);
    margin-bottom: 16px;
    gap: 0;
}

.tab-btn {
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: var(--transition);
}
.tab-btn:hover { color: var(--text-primary); }
.tab-btn.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

/* ---------- Login Page ---------- */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--bg-secondary);
}

.login-card {
    width: 100%;
    max-width: 400px;
    padding: 32px;
    background: var(--bg-primary);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
}

.login-header {
    text-align: center;
    margin-bottom: 24px;
}

.login-logo {
    width: 64px;
    height: 64px;
    margin-bottom: 12px;
}

.login-title {
    font-size: 24px;
    font-weight: 600;
}

.login-form {
    margin-top: 16px;
}

.login-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
}

.btn-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 14px;
    cursor: pointer;
    padding: 6px 12px;
    transition: color 0.15s;
}

.btn-link:hover {
    color: var(--primary);
    text-decoration: underline;
}

/* ---------- Toasts ---------- */
.toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    z-index: 99999;
    max-width: 380px;
}

.toast {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 10px 14px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    font-size: 13px;
    animation: toast-in 0.3s ease;
    background: var(--bg-primary);
    border: 1px solid var(--border);
}

.toast-body {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toast-success { border-left: 3px solid var(--success); }
.toast-error { border-left: 3px solid var(--danger); }
.toast-warning { border-left: 3px solid var(--warning); }
.toast-info { border-left: 3px solid var(--info); }

.toast-message { flex: 1; }

.toast-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 4px;
}

.toast-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

.toast-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: var(--border-radius);
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text);
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s;
}
.toast-action-btn:hover {
    background: var(--bg-tertiary, var(--bg-hover));
}
.toast-action-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}
.toast-action-btn.danger {
    color: var(--danger);
    border-color: var(--danger);
}
.toast-action-btn.danger:hover {
    background: rgba(220, 53, 69, 0.1);
}

@keyframes toast-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------- Modals ---------- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fade-in 0.15s ease;
}

.modal-content {
    background: var(--bg-primary);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    width: 90%;
    max-width: 540px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
[data-theme="dark"] .modal-content,
[data-theme="dark"] .modal-dialog {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
}

.modal-sm { max-width: 400px; }

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.modal-title {
    font-size: 16px;
    font-weight: 600;
}

.modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 16px;
}

.modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

/* Delete confirmation file list */
.delete-file-list {
    max-height: 300px;
    overflow-y: auto;
    margin: 10px 0;
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    padding: 4px 0;
}
.delete-file-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    font-size: 13px;
}
.delete-file-item:hover { background: var(--bg-secondary); }
.delete-file-icon { width: 16px; text-align: center; color: var(--text-muted); flex-shrink: 0; }
.delete-file-icon.folder { color: #f0c040; }
.delete-file-name {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.delete-file-badge {
    font-size: 10px; padding: 1px 6px;
    border-radius: 8px; background: var(--bg-tertiary); color: var(--text-secondary);
    flex-shrink: 0;
}
.delete-file-size {
    font-size: 12px; color: var(--text-secondary); white-space: nowrap; flex-shrink: 0;
}
.delete-file-more {
    padding: 6px 10px; font-size: 12px; color: var(--text-muted); font-style: italic;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

.modal-dialog {
    background: var(--bg-primary);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    width: 90%;
    max-width: 540px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-dialog.modal-lg { max-width: 900px; }

.modal-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ---------- Server Health ---------- */
.health-indicator {
    font-size: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.health-indicator.connected { color: var(--success); }
.health-indicator.disconnected { color: var(--danger); }
.health-indicator.unhealthy {
    color: var(--warning);
    font-size: 13px;
    cursor: help;
}
.health-status-text {
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

/* Mobile-only server health banner (hidden on desktop) */
.mobile-health-banner {
    display: none;
}
@media (max-width: 768px) {
    .mobile-health-banner {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        background: var(--danger);
        color: #fff;
        font-size: 13px;
        font-weight: 500;
        flex-shrink: 0;
    }
    .mobile-health-banner.reconnecting {
        background: var(--warning, #f0ad4e);
        color: #333;
    }
    .mobile-health-banner i {
        font-size: 14px;
        flex-shrink: 0;
    }
}

/* ---------- Global Error Modal ---------- */
.error-modal .modal-header {
    border-bottom-color: var(--warning);
}
.error-modal-icon {
    text-align: center;
    padding: 16px 0 12px;
}
.error-modal-message {
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-primary);
    padding: 0 8px 8px;
}
.error-suggestions {
    text-align: left;
    margin-top: 16px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
}
.error-suggestions h5 {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--text-secondary);
}
.error-suggestions ul {
    margin: 0;
    padding-left: 20px;
}
.error-suggestions li {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ---------- Cloud Storage Cards ---------- */
.cloud-card {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    transition: var(--transition);
}
.cloud-card:hover { box-shadow: var(--shadow-hover); }
.cloud-card.locked { border-color: var(--warning); opacity: 0.8; }

.cloud-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-light);
}

.cloud-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 8px;
}

.cloud-info { flex: 1; min-width: 0; }
.cloud-name {
    font-weight: 600;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cloud-user {
    font-size: 12px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cloud-memberships { padding: 12px 16px 0; }
.cloud-space { padding: 12px 16px 0; margin-bottom: 0; }
.cloud-space:empty { padding: 0; }
.cloud-space.loading-text {
    font-size: 12px;
    color: var(--text-muted);
}

.space-bar {
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 4px;
}

.space-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(to right, #22c55e, #84cc16 35%, #eab308 55%, #f97316 75%, #ef4444 100%);
    background-size: var(--gradient-scale, 100%) 100%;
    transition: width 0.3s ease;
}

.space-text {
    font-size: 11px;
    color: var(--text-secondary);
}

.cloud-card-actions {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border-light);
    margin-top: 12px;
}

/* ---------- Provider Grid (Add Cloud Modal) ---------- */
.provider-section {
    margin-bottom: 20px;
}
.provider-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-light);
}
.provider-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.provider-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 8px;
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    background: var(--bg-primary);
    cursor: pointer;
    transition: all var(--transition);
    font-size: 12px;
    color: var(--text-primary);
    text-align: center;
}
.provider-item:hover {
    border-color: var(--primary);
    background: var(--primary-light);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}
.provider-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
}
.provider-icon-placeholder {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--text-secondary);
}

/* Provider item — disabled/locked state */
.provider-item.disabled { opacity: 0.5; cursor: not-allowed; position: relative; }
.provider-item.disabled:hover { border-color: var(--border); background: var(--bg-primary); transform: none; box-shadow: none; }
.provider-item .lock-icon { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* Upgrade banner in add-cloud modal */
.upgrade-banner { background: var(--primary-light); border: 1px solid var(--primary); border-radius: var(--border-radius); padding: 14px 16px; margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.upgrade-banner-content { display: flex; align-items: flex-start; gap: 10px; flex: 1; min-width: 0; }
.upgrade-banner-content > i { font-size: 20px; color: var(--warning); flex-shrink: 0; margin-top: 2px; }
.upgrade-banner-text { font-size: 13px; color: var(--text-primary); }
.upgrade-banner-text strong { display: block; margin-bottom: 2px; }
.upgrade-details { font-size: 12px; color: var(--text-secondary); margin: 0; }
.locked-badge { font-size: 11px; color: var(--text-muted); font-weight: 400; margin-left: 8px; }
.locked-badge i { margin-right: 3px; }

/* ---------- Config Sections (Cloud Config Modal) ---------- */
.config-section {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border-light);
}
.config-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.config-section-title i {
    color: var(--text-secondary);
    font-size: 13px;
}

/* ---------- Proxy Group ---------- */
.proxy-group {
    margin-top: 12px;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-light);
}
.proxy-group-label {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
    margin-bottom: 8px;
    display: block;
}

/* ---------- Form Row (side-by-side fields) ---------- */
.form-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.form-row > .form-group {
    margin-bottom: 12px;
}

/* ---------- OAuth / Auth Method Selector ---------- */
.auth-method-selector {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 12px;
}
.oauth-auth-section {
    text-align: center;
    padding: 20px 0;
}
.btn-block {
    display: block;
    width: 100%;
}
.btn-group {
    display: inline-flex;
    gap: 0;
}
.btn-group .btn {
    border-radius: 0;
}
.btn-group .btn:first-child {
    border-radius: var(--border-radius) 0 0 var(--border-radius);
}
.btn-group .btn:last-child {
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
}
.btn-link {
    background: none;
    border: none;
    color: var(--primary);
    cursor: pointer;
    padding: 4px 8px;
}
.btn-link:hover {
    text-decoration: underline;
}

/* ---------- Tasks Page ---------- */
.content-body:has(.tasks-page) { padding: 0; max-width: none; }
.tasks-page {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--header-height));
    padding: 16px 24px 0;
    gap: 12px;
}

/* Summary Cards */
.task-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.25rem;
    flex-shrink: 0;
}

.summary-card {
    height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.5rem;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}
.summary-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}
.summary-card.copy::before { background: linear-gradient(90deg, #ff6b6b, #ee5a52); }
.summary-card.download::before { background: linear-gradient(90deg, #2196f3, #03a9f4); }
.summary-card.upload::before { background: linear-gradient(90deg, #4caf50, #8bc34a); }
.summary-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.summary-card.active { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); background: var(--bg-secondary); }

.summary-card-header {
    display: flex;
    align-items: center;
}
.summary-card-title {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}
.summary-card-icon-inline { font-size: 13px; }
.summary-card.copy .summary-card-icon-inline { color: #ff6b6b; }
.summary-card.download .summary-card-icon-inline { color: #2196f3; }
.summary-card.upload .summary-card-icon-inline { color: #4caf50; }

.summary-count {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
}
.summary-card.copy .summary-count { color: #ff6b6b; }
.summary-card.download .summary-count { color: #2196f3; }
.summary-card.upload .summary-count { color: #4caf50; }

.summary-status-row { display: flex; align-items: center; gap: 6px; }
.summary-subtitle {
    font-size: 11px;
    color: var(--text-muted);
}
.summary-subtitle.active { font-weight: 500; }
.summary-subtitle.active.copy { color: #ff6b6b; }
.summary-subtitle.active.download { color: #2196f3; }
.summary-subtitle.active.upload { color: #4caf50; }

.summary-progress-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 10px; color: var(--text-secondary); }
.progress-bar-inline { width: 100%; height: 3px; background: var(--bg-tertiary); border-radius: 2px; overflow: hidden; }
.progress-bar-inline .progress-fill { height: 100%; background: #4caf50; border-radius: 2px; transition: width 0.3s ease; }

/* Task Section (tab content) */
.task-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    min-height: 0;
}

/* Copy Tasks Toolbar */
.modern-copy-toolbar, .modern-upload-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.toolbar-left, .toolbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.select-all-container { display: flex; align-items: center; gap: 4px; }
.select-all-container input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
.selection-info { font-size: 12px; color: var(--text-secondary); font-weight: 500; }
.bulk-actions, .global-actions { display: flex; gap: 4px; flex-wrap: wrap; }

.action-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}
.action-btn:hover { background: var(--bg-tertiary); }
.action-btn.remove { color: #dc3545; }
.action-btn.remove:hover { background: rgba(220,53,69,0.08); }
.action-btn.pause { color: #fd7e14; }
.action-btn.restart { color: var(--primary); }

/* Copy Tasks List */
.copy-tasks-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 2px;
}

.copy-task-compact {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    padding: 10px 14px;
    cursor: pointer;
    transition: var(--transition);
    border-left: 3px solid var(--border);
}
.copy-task-compact:hover { box-shadow: var(--shadow-sm); }
.copy-task-compact.selected { background: rgba(var(--primary-rgb, 59, 130, 246), 0.06); border-color: var(--primary); }
.copy-task-compact.status-running { border-left-color: var(--primary); }
.copy-task-compact.status-completed { border-left-color: #28a745; }
.copy-task-compact.status-failed { border-left-color: #dc3545; }
.copy-task-compact.status-paused { border-left-color: #fd7e14; }

.task-main-info { margin-bottom: 8px; }
.task-title { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.title-left { display: flex; align-items: center; }
.title-left input[type="checkbox"] { width: 15px; height: 15px; cursor: pointer; }
.title-right { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.operation-badge, .status-badge, .paused-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
}
.operation-badge { background: rgba(var(--primary-rgb, 59, 130, 246), 0.1); color: var(--primary); }
.status-badge { background: var(--bg-tertiary); color: var(--text-secondary); }
.status-badge.status-running { background: rgba(59,130,246,0.1); color: var(--primary); }
.status-badge.status-completed { background: rgba(40,167,69,0.1); color: #28a745; }
.status-badge.status-failed { background: rgba(220,53,69,0.1); color: #dc3545; }
.status-badge.status-paused { background: rgba(253,126,20,0.1); color: #fd7e14; }
.paused-badge { background: rgba(253,126,20,0.1); color: #fd7e14; }

.progress-compact { margin-top: 4px; }
.progress-bar-compact { height: 4px; background: var(--bg-tertiary); border-radius: 2px; overflow: hidden; }
.progress-fill-compact { height: 100%; background: var(--primary); border-radius: 2px; transition: width 0.3s ease; }
.progress-text-compact { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-secondary); margin-top: 2px; }

.task-details-compact { font-size: 12px; }
.detail-row-compact { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; flex-wrap: wrap; }
.detail-label-compact { color: var(--text-muted); font-weight: 500; min-width: 75px; flex-shrink: 0; }
.detail-value-compact { color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.detail-item-compact { display: inline-flex; align-items: center; gap: 4px; color: var(--text-secondary); }
.detail-item-compact i { font-size: 11px; color: var(--text-muted); }
.detail-item-compact.error { color: #dc3545; }
.detail-item-compact.error i { color: #dc3545; }
.progress-stats { margin-top: 2px; }

/* Error List */
.error-list-compact { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 6px; }
.error-list-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #dc3545;
    cursor: pointer;
    user-select: none;
}
.error-list-header i.fa-exclamation-triangle { font-size: 12px; }
.expand-errors-btn {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0 4px;
    font-size: 11px;
}
.error-list-container {
    max-height: 120px;
    overflow-y: auto;
    margin-top: 4px;
}
.error-item {
    display: flex;
    gap: 8px;
    padding: 3px 0;
    font-size: 11px;
    border-bottom: 1px solid var(--bg-tertiary);
}
.error-item:last-child { border-bottom: none; }
.error-time { color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.error-message { color: #dc3545; word-break: break-all; }

/* Download Table */
.download-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.download-table thead th {
    padding: 8px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
}
.download-table tbody td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--bg-tertiary);
    vertical-align: middle;
}
.download-table tbody tr:hover { background: var(--bg-secondary); }
.download-table .file-cell { max-width: 0; width: 100%; }
.download-table .file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.download-table .file-error { font-size: 11px; color: #dc3545; margin-top: 2px; display: flex; align-items: center; gap: 4px; }
.download-table .file-error .error-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.download-table .file-processes { display: flex; flex-direction: column; gap: 0px; margin-top: 2px; }
.download-table .process-item { display: flex; align-items: center; gap: 3px; font-size: 11px; color: var(--text-secondary); padding: 0 0; }
.download-table .process-item i { color: var(--primary); font-size: 10px; flex-shrink: 0; }
.download-table .process-item span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1; min-width: 0; }
.download-table .size-cell, .download-table .buffer-cell, .download-table .speed-cell, .download-table .threads-cell { white-space: nowrap; text-align: right; }
.download-table-wrapper { flex: 1; overflow-y: auto; }

/* Upload Tasks */
.upload-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.upload-filters .search-box {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 150px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    padding: 4px 8px;
}
.upload-filters .search-box i { color: var(--text-muted); font-size: 12px; }
.upload-filters .search-box input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 12px;
    color: var(--text-primary);
    width: 100%;
}
.upload-filters .filter-select {
    padding: 4px 8px;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
}
.clear-search {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0 2px;
    font-size: 12px;
}

/* Upload filter toggle — hidden on desktop, shown on mobile */
.upload-filters-toggle { display: none; }

/* Upload list header + rows */
.upload-list-header {
    display: grid;
    grid-template-columns: 32px 1fr 200px 100px 110px;
    gap: 8px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border);
}
.upload-tasks-list {
    flex: 1;
    overflow-y: auto;
}
.upload-task-row {
    display: grid;
    grid-template-columns: 32px 1fr 200px 100px 110px;
    gap: 8px;
    padding: 8px 12px;
    align-items: center;
    border-bottom: 1px solid var(--bg-tertiary);
    cursor: pointer;
    transition: var(--transition);
    font-size: 13px;
}
.upload-task-row:hover { background: var(--bg-secondary); }
.upload-task-row.selected { background: rgba(var(--primary-rgb, 59, 130, 246), 0.06); }
.upload-task-row .col-select { display: flex; align-items: center; justify-content: center; }
.upload-task-row .col-select input[type="checkbox"] { width: 15px; height: 15px; cursor: pointer; }
.upload-task-row .col-file { min-width: 0; }
.upload-task-row .file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.upload-task-row .file-path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--text-muted); }

.size-with-progress {
    position: relative;
    padding: 4px 8px;
    border-radius: var(--border-radius);
    font-size: 12px;
    white-space: nowrap;
    background: linear-gradient(to right, rgba(40,167,69,0.12) var(--progress, 0%), transparent var(--progress, 0%));
}
.size-text { display: flex; gap: 2px; align-items: baseline; white-space: nowrap; }
.size-transferred { font-weight: 500; }
.size-separator { color: var(--text-muted); margin: 0 1px; }
.size-total { color: var(--text-secondary); }

.operator-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
}
.status-indicator.status-uploading { background: rgba(59,130,246,0.1); color: var(--primary); }
.status-indicator.status-completed { background: rgba(40,167,69,0.1); color: #28a745; }
.status-indicator.status-paused { background: rgba(253,126,20,0.1); color: #fd7e14; }
.status-indicator.status-failed { background: rgba(220,53,69,0.1); color: #dc3545; }
.status-indicator.status-cancelled { background: rgba(108,117,125,0.1); color: #6c757d; }
.status-indicator.status-pending { background: var(--bg-tertiary); color: var(--text-secondary); }

.error-row {
    grid-column: 1 / -1;
    padding: 4px 12px 8px 44px;
    font-size: 11px;
    color: #dc3545;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Pagination */
.modern-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 12px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
    position: sticky;
    bottom: 0;
    background: var(--bg-secondary);
    z-index: 5;
    margin-top: auto;
}
.pagination-info { font-size: 12px; color: var(--text-secondary); }
.pagination-controls { display: flex; align-items: center; gap: 2px; }
.page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 28px;
    padding: 0 6px;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition);
}
.page-btn:hover { background: var(--bg-tertiary); }
.page-btn.active { background: var(--primary); color: white; border-color: var(--primary); }
.page-btn:disabled { opacity: 0.4; cursor: default; }
.items-per-page select {
    padding: 3px 6px;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    background: var(--bg-primary);
    color: var(--text-primary);
}

/* Refresh control */
.refresh-control-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition);
}
.refresh-control-btn:hover { background: var(--bg-tertiary); }
.refresh-control-btn.paused { color: #28a745; border-color: #28a745; }

/* Task toolbar old compat (merge tab) */
.task-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.speed-indicator { font-size: 13px; color: var(--primary); font-weight: 500; }
.task-count { font-size: 12px; color: var(--text-secondary); }
.task-list { display: flex; flex-direction: column; gap: 8px; }
.task-card {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    padding: 12px 16px;
    transition: var(--transition);
}
.task-card:hover { box-shadow: var(--shadow-sm); }
.task-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.task-paths { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.task-source, .task-dest { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40%; }
.task-arrow { color: var(--text-muted); font-size: 10px; flex-shrink: 0; }
.progress-bar { height: 4px; background: var(--bg-tertiary); border-radius: 2px; overflow: hidden; margin-bottom: 8px; }
.progress-fill { height: 100%; background: var(--primary); border-radius: 2px; transition: width 0.3s ease; }
.task-stats { display: flex; gap: 16px; font-size: 12px; color: var(--text-secondary); }
.task-error { margin-top: 8px; font-size: 12px; color: var(--danger); padding: 4px 8px; background: rgba(220, 53, 69, 0.08); border-radius: var(--border-radius); }
.task-card-actions { display: flex; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.task-card-actions .btn { font-size: 11px; padding: 3px 8px; }

@media (max-width: 768px) {
    /* ── Tasks page: compact header ── */
    .tasks-page { padding: 8px 12px 0; }
    /* Keep title + controls on one row; drop subtitle */
    .tasks-page .page-header { flex-direction: row; align-items: center; flex-wrap: wrap; margin-bottom: 8px; gap: 6px; }
    .tasks-page .page-title { font-size: 15px; }
    .tasks-page .page-description { display: none; }
    /* Hide "Update Interval" text, keep the select */
    .tasks-page .header-actions label > span { display: none; }

    /* ── 3 summary cards side-by-side ── */
    .task-summary { grid-template-columns: repeat(3, 1fr); gap: 4px; }
    .summary-card { height: auto; min-height: 56px; padding: 5px 7px; }
    /* Prevent title from wrapping; clip overflow */
    .summary-card-title { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .summary-card-icon-inline { font-size: 10px; }
    .summary-count { font-size: 1rem; }
    /* Hide byte totals in upload progress on narrow cards */
    .summary-progress-inline > span { display: none; }
    /* ── Upload filter toggle (mobile) ── */
    .upload-filters-toggle {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        margin-bottom: 8px;
        cursor: pointer;
        background: var(--bg-secondary);
        border: 1px solid var(--border);
        border-radius: var(--border-radius);
        font-size: 13px;
        color: var(--text-secondary);
    }
    .upload-filters-toggle .filter-badge {
        background: var(--primary);
        color: #fff;
        font-size: 10px;
        padding: 1px 6px;
        border-radius: 8px;
        margin-left: auto;
    }
    .upload-filters.filters-collapsed { display: none; }

    /* ── Upload column header hidden on mobile ── */
    .upload-list-header { display: none; }

    /* ── Upload task cards (matching download card style) ── */
    .upload-tasks-list { display: flex; flex-direction: column; gap: 6px; }
    .upload-task-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 8px;
        background: var(--bg-primary);
        border: 1px solid var(--border);
        border-radius: var(--border-radius);
        padding: 8px 10px;
        border-left: 3px solid var(--border);
    }
    .upload-task-row.status-uploading { border-left-color: var(--primary); }
    .upload-task-row.status-completed { border-left-color: #28a745; }
    .upload-task-row.status-paused { border-left-color: #fd7e14; }
    .upload-task-row.status-failed { border-left-color: #dc3545; }

    .upload-task-row .col-select { flex: 0 0 auto; }
    .upload-task-row .col-file {
        flex: 1 1 100%; max-width: 100%; order: 1;
    }
    .upload-task-row .file-name {
        white-space: normal; word-break: break-all; font-size: 13px;
    }
    .upload-task-row .file-path {
        white-space: normal; word-break: break-all;
    }
    .upload-task-row .col-size { display: flex !important; flex: 0 0 auto; order: 3; }
    .upload-task-row .col-operator { display: flex !important; flex: 0 0 auto; order: 4; }
    .upload-task-row .col-status { display: flex !important; flex: 0 0 auto; order: 5; }

    /* Compact upload toolbar on mobile */
    .modern-upload-toolbar { padding: 6px 10px; }
    .modern-upload-toolbar .action-btn span { display: none; }

    /* ── Download table → card layout ── */
    .download-table { display: block; }
    .download-table thead { display: none; }
    .download-table tbody { display: flex; flex-direction: column; gap: 6px; }
    .download-table tbody tr {
        display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px;
        background: var(--bg-primary); border: 1px solid var(--border); border-radius: var(--border-radius);
        padding: 8px 10px; border-left: 3px solid var(--border);
    }
    .download-table tbody tr.status-running { border-left-color: var(--primary); }
    .download-table tbody td { padding: 0; border: none; vertical-align: baseline; }
    .download-table .file-cell {
        flex: 1 1 100%; max-width: 100%; width: auto; order: 1;
    }
    .download-table .file-name {
        white-space: normal; word-break: break-all; font-size: 13px;
    }
    .download-table .file-processes { margin-top: 4px; }
    .download-table .process-item span {
        white-space: normal; word-break: break-all;
    }
    .download-table .size-cell { order: 2; font-size: 12px; color: var(--text-secondary); }
    .download-table .buffer-cell { order: 3; font-size: 12px; color: var(--text-secondary); }
    .download-table .speed-cell { order: 4; font-size: 12px; }
    .download-table .threads-cell { order: 5; font-size: 12px; color: var(--text-secondary); }
    .download-table .size-cell::before { content: "Size: "; color: var(--text-muted); font-size: 11px; }
    .download-table .buffer-cell::before { content: "Buf: "; color: var(--text-muted); font-size: 11px; }
    .download-table .speed-cell::before { content: "Speed: "; color: var(--text-muted); font-size: 11px; }
    .download-table .threads-cell::before { content: "T: "; color: var(--text-muted); font-size: 11px; }

    /* ── Copy task cards: improve mobile layout ── */
    .copy-task-compact { padding: 8px 10px; }
    .detail-value-compact { white-space: normal; word-break: break-all; }
    .detail-label-compact { min-width: 60px; }

    /* ── Merge task cards ── */
    .task-card { padding: 8px 10px; }
}

/* ---------- Mount Cards ---------- */
.mount-card {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.mount-icon-wrapper {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: linear-gradient(135deg, #7c3aed, #3b82f6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    flex-shrink: 0;
}

.mount-name {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 2px;
}

.mount-path-pill {
    font-size: 12px;
    font-family: monospace;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid var(--border-light);
    word-break: break-all;
    display: inline-block;
}

.mount-badges {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
    flex-shrink: 0;
}

.badge-outline {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 10px;
}

.mount-actions-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 8px;
}

.mount-action-buttons {
    display: flex;
    gap: 6px;
}

.btn-icon {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 13px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition);
}
.btn-icon:hover:not(:disabled) {
    background: var(--bg-tertiary);
}
.btn-icon:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.btn-icon.btn-success {
    color: var(--success);
    border-color: var(--success);
    background: var(--bg-secondary);
}
.btn-icon.btn-warning {
    color: #e67e22;
    border-color: #e67e22;
    background: var(--bg-secondary);
}
.btn-icon.btn-danger {
    color: var(--danger);
    border-color: var(--danger);
    background: var(--bg-secondary);
}

.mount-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mount-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mount-tag {
    font-size: 11px;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    padding: 2px 8px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.mount-tag.tag-warning { color: var(--warning); }
.mount-tag.tag-success { color: var(--success); }

.mount-error {
    font-size: 12px;
    color: var(--danger);
    padding: 6px 10px;
    background: rgba(220, 53, 69, 0.08);
    border-radius: var(--border-radius);
    margin-top: 6px;
}

.mount-preview {
    font-size: 12px;
    color: var(--info);
    padding: 6px 10px;
    background: rgba(13, 202, 240, 0.08);
    border-radius: var(--border-radius);
    margin-top: 6px;
}

.mount-form .form-group { margin-bottom: 14px; }

.input-with-button {
    display: flex;
    gap: 6px;
    align-items: center;
}
.input-with-button .form-input { flex: 1; }

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.advanced-settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-top: 8px;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-light);
}

.confirm-warning {
    display: flex;
    align-items: flex-start;
    padding: 12px;
    background: rgba(255, 193, 7, 0.08);
    border-radius: var(--border-radius);
    border: 1px solid rgba(255, 193, 7, 0.2);
}

.mount-card-actions {
    display: flex;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--border-light);
}

/* ---------- Settings Page ---------- */
.settings-section { padding: 4px 0; }

/* Two-column responsive grid for settings cards */
.settings-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 4px 0;
}
.settings-grid .setting-group {
    margin-bottom: 0; /* gap replaces margin-bottom */
}
.setting-group-wide {
    grid-column: 1 / -1; /* span all columns */
}
@media (max-width: 760px) {
    .settings-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .setting-group {
        padding: 12px;
        border-radius: var(--border-radius);
    }
    .setting-row {
        gap: 4px 8px;
    }
    .setting-row > label:not(.toggle-switch) {
        min-width: 80px;
    }
    .setting-row > select.form-input,
    .setting-row > input[type="number"].form-input {
        min-width: 80px;
        max-width: 120px !important;
    }
    .setting-row .input-with-button {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100% !important;
        box-sizing: border-box;
    }
}

.setting-group {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-lg);
    padding: 16px;
    margin-bottom: 16px;
}

.setting-group h3 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-light);
}

.setting-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border-light);
}
.setting-row:last-child { border-bottom: none; }

/* Left side wrapper (label + help text together) — shrinks to let control stay on line */
.setting-row > div {
    flex: 1;
    min-width: 0;
}

/* Bare label (old flat pattern) — also takes available space */
.setting-row > label:not(.toggle-switch) {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    flex: 1;
    min-width: 120px;
}

/* Label inside a wrapper div */
.setting-row > div > label:not(.toggle-switch) {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
}

.setting-row .toggle-switch {
    min-width: unset;
    flex-shrink: 0;
}

/* Right-side select/number controls — fixed width, never wrap */
.setting-row > select.form-input,
.setting-row > input[type="number"].form-input {
    flex: 0 0 auto;
    width: auto;
    min-width: 100px;
    max-width: 200px;
    text-align: right;
}

/* Right-side text inputs — flexible, fill available space */
.setting-row > input[type="text"].form-input,
.setting-row > input[type="url"].form-input,
.setting-row > input[type="password"].form-input {
    flex: 1;
    min-width: 120px;
    max-width: 400px;
}

/* Compound control containers (input + unit toggle, input + link) */
.setting-row > div[style*="display:flex"] {
    flex: 0 1 auto;
    min-width: 0;
}

/* Help text as flat sibling (old pattern) — full width on its own row */
.setting-row > p.setting-help {
    flex: 0 0 100%;
    margin: 0;
}

/* Port URL hint (inside left-side wrapper div) */
.port-url-hint {
    margin: 2px 0 0;
    font-size: 0.8rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}
.port-url-hint code {
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.port-url-hint .btn-link {
    padding: 2px 4px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    flex-shrink: 0;
}
.port-url-hint .btn-link:hover { color: var(--accent); }

.setting-row .form-checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
}

.setting-help {
    width: 100%;
    margin: 2px 0 0;
    font-size: 0.78rem;
    font-style: italic;
    color: var(--text-muted);
    opacity: 0.65;
    line-height: 1.3;
    letter-spacing: 0.01em;
}

/* Settings: log level grid */
.log-levels-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}
.log-level-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    padding: 12px;
}
.log-level-card label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-secondary);
}
.log-level-card .form-input {
    width: 100%;
    max-width: none;
    text-align: left;
}

/* Settings: disk cache note banner */
.disk-cache-note {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    margin-bottom: 16px;
    align-items: flex-start;
}
.disk-cache-note-icon { color: var(--primary); font-size: 1.1rem; margin-top: 2px; flex-shrink: 0; }
.disk-cache-note p { margin: 0 0 8px; font-size: 0.9rem; }

/* Settings: disk cache folders list */
.disk-cache-folders-list { margin-bottom: 16px; }
.dc-folder-row {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    margin-bottom: 6px;
    background: var(--bg-secondary);
}
.dc-folder-path { font-weight: 500; margin-bottom: 4px; }
.dc-folder-path a { color: var(--primary); text-decoration: none; }
.dc-folder-path a:hover { text-decoration: underline; }
.dc-folder-rules { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.8rem; color: var(--text-secondary); align-items: center; }
.dc-rule { white-space: nowrap; }
.dc-folder-cfg-btn { margin-left: auto; padding: 2px 8px; font-size: 0.8rem; opacity: 0.7; }
.dc-folder-cfg-btn:hover { opacity: 1; }

/* Properties panel: disk cache status */
.disk-cache-status { margin-top: 6px; }

/* Settings: disk cache stats panel */
.disk-cache-stats-panel {
    margin-top: 16px;
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    overflow: hidden;
}
.disk-cache-stats-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--bg-tertiary);
    cursor: pointer;
    user-select: none;
}
.disk-cache-stats-toggle {
    background: none;
    border: none;
    color: var(--primary);
    font-weight: 600;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 0;
}
.disk-cache-stats-actions { display: flex; gap: 8px; }
.disk-cache-stats-body { padding: 16px; }

/* Settings: disk cache usage bar */
.disk-cache-usage-section { margin-bottom: 16px; }
.disk-cache-usage-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.5px; margin-bottom: 6px; }
.disk-cache-usage-bar { display: flex; flex-direction: column; gap: 4px; }
.usage-bar-track {
    width: 100%;
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
}
.usage-bar-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* Settings: disk cache stats 4-card grid */
.disk-cache-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.disk-cache-stat {
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    padding: 12px 16px;
}
.disk-cache-stat .stat-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.disk-cache-stat .stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}
@media (max-width: 768px) {
    .disk-cache-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .disk-cache-stats-grid { grid-template-columns: 1fr; }
    .disk-cache-stats-header { flex-direction: column; gap: 8px; align-items: flex-start; }
}

/* Settings: btn-group-toggle (KB/MB/GB unit selector) */
.btn-group-toggle {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    overflow: hidden;
}
.btn-group-toggle .btn-xs {
    border-radius: 0;
    border: none;
    border-right: 1px solid var(--border);
    margin: 0;
}
.btn-group-toggle .btn-xs:last-child { border-right: none; }
.btn-group-toggle .btn-xs.active {
    background: var(--primary);
    color: #fff;
}

/* Settings: priority order pills */
.priority-order-list { margin-bottom: 4px; }
.priority-pill {
    display: inline-flex;
    align-items: center;
    gap: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
}
.priority-label {
    padding: 4px 12px;
    font-size: 0.85rem;
    font-weight: 500;
}
.priority-arrow {
    background: none;
    border: none;
    padding: 4px 8px;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.7rem;
    transition: var(--transition);
}
.priority-arrow:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* ---------- Info Card (About, Profile, WebDAV) ---------- */
.info-card {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-lg);
    padding: 20px;
    margin-bottom: 16px;
}

.info-card h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-light);
}

.info-card.alert-info {
    border-color: var(--info);
    background: rgba(13, 202, 240, 0.05);
}

.info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--border-light);
}
.info-row:last-child { border-bottom: none; }

.info-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

.info-value {
    font-size: 13px;
    color: var(--text-primary);
}

.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ---------- Profile Page ---------- */
.profile-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.profile-content > .profile-header-card {
    grid-column: 1 / -1;
}

.profile-section-full {
    grid-column: 1 / -1;
}

.profile-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-lg);
    margin-bottom: 16px;
}

.profile-avatar { color: var(--primary); }

.profile-info h2 { font-size: 20px; font-weight: 600; }
.profile-email { font-size: 13px; color: var(--text-secondary); }

.form-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

/* Keep form action buttons always visible at the bottom of scrollable modals */
.modal-body .form-actions {
    position: sticky;
    bottom: 0;
    background: var(--bg-primary);
    padding: 12px 0 0;
    margin-top: 16px;
    border-top: 1px solid var(--border);
    z-index: 1;
}

/* ---------- Token Card ---------- */
.token-value {
    padding: 6px 10px;
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    margin-bottom: 12px;
    overflow: hidden;
}

.token-value code {
    font-size: 11px;
    color: var(--text-secondary);
    font-family: 'SF Mono', Monaco, Consolas, monospace;
    word-break: break-all;
}

/* ---------- Badge Variants ---------- */
.badge-primary {
    background: rgba(13, 110, 253, 0.15);
    color: var(--primary);
}

.badge-danger {
    background: rgba(220, 53, 69, 0.15);
    color: var(--danger);
}

.badge-warning {
    background: rgba(255, 193, 7, 0.2);
    color: #b38600;
}
[data-theme="dark"] .badge-warning { color: var(--warning); }

.badge-info {
    background: rgba(13, 202, 240, 0.15);
    color: var(--info);
}

.badge-group {
    display: flex;
    gap: 4px;
}

/* ---------- Button Variants ---------- */
.btn-success {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
}
.btn-success:hover { opacity: 0.9; }

.btn-warning {
    background: var(--warning);
    border-color: var(--warning);
    color: #000;
}
.btn-warning:hover { opacity: 0.9; }

/* ---------- WebDAV Page ---------- */
.webdav-status-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-lg);
    padding: 16px 20px;
    margin-bottom: 20px;
}
.webdav-status-left {
    display: flex;
    align-items: center;
    gap: 16px;
}
.webdav-status-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.95rem;
}
.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.status-dot-active {
    background: var(--success, #22c55e);
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
}
.status-dot-inactive {
    background: var(--text-muted);
}
.status-text { font-size: 0.9rem; }
.status-active { color: var(--success, #22c55e); }
.status-inactive { color: var(--text-muted); }

.webdav-url-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.webdav-url-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    white-space: nowrap;
}
.webdav-url-value {
    font-family: monospace;
    font-size: 0.85rem;
    padding: 4px 10px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    color: var(--text-primary);
    user-select: all;
}

/* Config Grid */
.webdav-config-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.webdav-config-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}
.webdav-config-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border);
}
.webdav-config-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.webdav-config-header h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
}
.webdav-config-icon {
    color: var(--primary);
    font-size: 1.1rem;
}
.webdav-config-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.webdav-config-note {
    font-size: 0.8rem;
    color: var(--text-muted);
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.webdav-config-note i { margin-top: 2px; }
.webdav-config-warning {
    color: var(--warning, #f59e0b);
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    cursor: pointer;
    flex-shrink: 0;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 24px;
    transition: 0.25s;
}
.toggle-slider::before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 2px;
    bottom: 2px;
    background: #fff;
    border-radius: 50%;
    transition: 0.25s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle-switch input:checked + .toggle-slider {
    background: var(--primary);
    border-color: var(--primary);
}
.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(20px);
}

/* Users Section */
.webdav-users-section {
    margin-top: 8px;
}
.webdav-users-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.webdav-users-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
}
.webdav-users-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.webdav-user-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--transition), transform var(--transition);
}
.webdav-user-card:hover {
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}
.webdav-user-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px 10px;
}
.webdav-user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 1rem;
    flex-shrink: 0;
}
.webdav-user-info {
    flex: 1;
    min-width: 0;
}
.webdav-user-info h4 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.webdav-user-status {
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}
.webdav-user-body {
    padding: 0 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.webdav-user-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.webdav-user-path {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--text-secondary);
}
.webdav-user-path-label { white-space: nowrap; }
.webdav-user-path code {
    font-size: 0.8rem;
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
}
.webdav-user-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border);
    justify-content: flex-end;
}

/* ---------- WebDAV Mobile ---------- */
@media (max-width: 768px) {
    .webdav-status-card { padding: 12px 14px; gap: 12px; }
    .webdav-url-row { flex-wrap: wrap; }
    .webdav-url-value { word-break: break-all; min-width: 0; }
    .webdav-config-grid { grid-template-columns: 1fr; }
    .webdav-users-grid { grid-template-columns: 1fr; }
    .webdav-user-path code { max-width: none; }
    .webdav-user-actions { flex-wrap: wrap; }
}
@media (max-width: 480px) {
    .webdav-status-card { padding: 10px 12px; gap: 10px; }
    .webdav-status-left { gap: 10px; }
    .webdav-config-header { padding: 10px 12px; }
    .webdav-config-body { padding: 12px; }
    .webdav-user-header { padding: 10px 12px 8px; }
    .webdav-user-body { padding: 0 12px 10px; }
    .webdav-user-actions { padding: 8px 12px; }
    .webdav-users-header { flex-wrap: wrap; gap: 8px; }
}

/* ---------- About Page ---------- */
.about-header {
    background: linear-gradient(135deg, var(--primary), #6c757d);
    color: #fff;
    padding: 2rem;
    border-radius: 0 0 1rem 1rem;
    margin: -20px -20px 1.5rem -20px;
}
.about-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}
.about-title-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.about-title-row h1 {
    font-size: 2rem;
    font-weight: 600;
    margin: 0;
}
.about-logo {
    width: 52px;
    height: 52px;
    border-radius: 12px;
}
.about-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.about-actions .btn {
    color: #fff;
}
.about-subtitle {
    font-size: 1rem;
    opacity: 0.85;
    margin-top: 0.5rem;
}

.about-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.about-section {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}
.about-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
}
.about-section-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.about-section-title i {
    color: var(--primary);
    font-size: 1.1rem;
}
.about-section-title h2 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}
.about-section-body {
    padding: 1.25rem;
}
.about-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.25rem;
}
.about-info-item {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.about-info-label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}
.about-info-value {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
}

/* Version pill badges */
.version-pill {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    border-radius: 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    background: var(--primary);
    color: #fff;
}
.version-pill.current {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}
.version-pill.new {
    background: var(--success);
    color: #fff;
    animation: pulse-badge 2s infinite;
}
@keyframes pulse-badge {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Update section */
.update-available, .update-current {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}
.update-status-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}
.update-status-icon.success {
    background: rgba(25, 135, 84, 0.1);
    color: var(--success);
}
.update-status-icon.current {
    background: rgba(13, 110, 253, 0.1);
    color: var(--primary);
}
.update-details p {
    margin: 0 0 4px;
    font-size: 0.95rem;
}
.update-description {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    padding: 10px 14px;
    font-size: 0.85rem;
    white-space: pre-wrap;
    max-height: 200px;
    overflow-y: auto;
    margin: 8px 0;
}
.update-status {
    color: var(--text-secondary);
    font-size: 0.95rem;
}
.update-progress-section {
    margin-top: 16px;
    padding: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
}
.update-progress-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-weight: 600;
    color: var(--text-primary);
}
.update-progress-bar-container {
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
    margin: 8px 0;
}
.update-progress-bar-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--primary), var(--success));
    transition: width 0.3s ease;
}
.update-progress-info {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.update-installing-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
}
.update-installing-spinner i {
    font-size: 2rem;
    color: var(--primary);
}
.update-progress-message {
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* External links */
.external-links {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.external-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    color: var(--primary);
    text-decoration: none;
    border-radius: var(--border-radius);
    transition: all 0.15s;
}
.external-link:hover {
    background: var(--bg-secondary);
    transform: translateX(4px);
    text-decoration: none;
}
.external-link i {
    font-size: 1.1rem;
    width: 24px;
    text-align: center;
}
.link-info {
    display: flex;
    flex-direction: column;
}
.link-title {
    font-weight: 600;
    font-size: 0.9rem;
}
.link-url {
    font-size: 0.8rem;
    opacity: 0.7;
    font-family: monospace;
}

@media (max-width: 768px) {
    .about-header {
        padding: 1.25rem;
    }
    .about-header-content {
        flex-direction: column;
        align-items: flex-start;
    }
    .about-title-row h1 {
        font-size: 1.5rem;
    }
    .about-actions {
        width: 100%;
    }
    .about-actions .btn {
        flex: 1;
    }
    .about-info-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- Header Actions ---------- */
.header-actions {
    display: flex;
    gap: 8px;
}

/* ---------- Devices Page ---------- */
.devices-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
}
.device-card {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s ease;
    max-width: 400px;
    position: relative;
}
.device-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(135deg, #1e40af, #0ea5e9);
}
.device-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}
.device-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
}
.device-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: linear-gradient(135deg, #1e40af, #0ea5e9);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.device-name-group {
    min-width: 0;
}
.device-name {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.device-type {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}
.device-details {
    padding: 0.75rem 1rem;
}
.detail-row {
    display: grid;
    grid-template-columns: 80px 1fr;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
}
.detail-label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}
.detail-value {
    font-size: 0.75rem;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
    color: var(--text-primary);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 2px 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ip-toggle {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 10px;
    padding: 1px 3px;
    line-height: 1;
}
.ip-toggle:hover {
    color: var(--primary);
}
.device-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
}
.device-actions .btn {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* ---------- Utilities ---------- */
.text-muted { color: var(--text-muted); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger { color: var(--danger); }
.text-center { text-align: center; }

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .app-sidebar {
        position: fixed;
        top: var(--header-height);
        left: 0;
        bottom: 0;
        z-index: 50;
        box-shadow: var(--shadow-lg);
    }
    .app-sidebar:not(.open) {
        transform: translateX(-100%);
    }

    .content-body {
        padding: 12px 16px;
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .function-cards {
        grid-template-columns: repeat(2, 1fr);
        padding: 0 1rem;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .card-grid {
        grid-template-columns: 1fr;
    }

    .col-modified { display: none; }
}

@media (max-width: 480px) {
    .content-body { padding: 8px 12px; }
    .col-size { display: none; }
}

/* ---------- Performance Page ---------- */
.perf-connection-status {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.perf-stat-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.perf-stat-card {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-lg);
    padding: 20px;
    transition: var(--transition);
}

.perf-stat-card:hover { box-shadow: var(--shadow-sm); }

.perf-stat-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.perf-stat-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.perf-stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

.perf-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.perf-stat-icon.cpu { background: rgba(220, 53, 69, 0.12); color: var(--danger); }
.perf-stat-icon.memory { background: rgba(111, 66, 193, 0.12); color: #6f42c1; }
.perf-stat-icon.download { background: rgba(13, 110, 253, 0.12); color: var(--primary); }
.perf-stat-icon.upload { background: rgba(25, 135, 84, 0.12); color: var(--success); }

.progress-fill.cpu { background: var(--danger); }
.progress-fill.memory { background: #6f42c1; }
.progress-fill.download { background: var(--primary); }
.progress-fill.upload { background: var(--success); }

.perf-sparkline {
    font-family: monospace;
    font-size: 14px;
    letter-spacing: 1px;
    margin-top: 10px;
    color: var(--accent-color, var(--primary));
    overflow: hidden;
    white-space: nowrap;
}

.perf-minmax {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

.perf-chart-legend {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.perf-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
}
.perf-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.perf-data-points {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.perf-card-sub {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 8px;
}

.perf-chart-body { padding: 12px 16px; }

/* Performance sections (System Details, Open File Handles) */
.perf-section {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-lg);
    margin-bottom: 16px;
    overflow: hidden;
}

.perf-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
}

.perf-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.perf-section-title i { color: var(--primary); font-size: 16px; }
.perf-section-title h2 { margin: 0; font-size: 15px; font-weight: 600; }

.perf-section-body { padding: 20px; }

/* System Details grid */
.system-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.sys-detail-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    border: 1px solid var(--border);
    transition: var(--transition);
}

.sys-detail-item.clickable {
    cursor: pointer;
}

.sys-detail-item.clickable:hover {
    border-color: var(--primary);
    background: var(--bg-hover);
}

.sys-detail-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(13, 110, 253, 0.1);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.sys-detail-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.sys-detail-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}

.sys-detail-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.sys-detail-arrow {
    color: var(--text-muted);
    font-size: 12px;
    flex-shrink: 0;
}

@media (max-width: 1200px) {
    .perf-stat-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .perf-stat-cards { grid-template-columns: 1fr; }
    .system-details-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
    .system-details-grid { grid-template-columns: 1fr; }
}

/* ---------- Membership Page ---------- */
.membership-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.plan-card {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-lg);
    padding: 20px;
    text-align: center;
    transition: var(--transition);
}

.plan-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }

.plan-icon {
    font-size: 36px;
    color: var(--primary);
    margin-bottom: 12px;
}

.plan-price {
    font-size: 26px;
    font-weight: 700;
    color: var(--primary);
    margin-top: 12px;
}

.plan-duration {
    font-size: 15px;
    font-weight: 400;
    color: var(--text-secondary);
}

.membership-error {
    padding: 40px 20px;
    text-align: center;
    color: var(--danger);
}

.membership-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-lg);
    flex-wrap: wrap;
}

.membership-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.membership-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
}

.membership-header-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.membership-header-info h2 {
    margin: 0;
    font-size: 1.2em;
    font-weight: 600;
}

.membership-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.membership-balance {
    font-size: 0.9em;
    color: var(--text-secondary);
}

.membership-header-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.plan-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.75em;
    font-weight: 600;
    white-space: nowrap;
}

.plan-badge-primary {
    background: linear-gradient(135deg, #ffd700, #ffb300);
    color: #5a4000;
}

.plan-badge-secondary {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.plan-badge-premium {
    background: linear-gradient(135deg, #ffd700, #ffb300);
    color: #5a4000;
}

.plan-badge-pro {
    background: linear-gradient(135deg, #4dabf7, #228be6);
    color: #fff;
}

.plan-badge-free {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.plan-badge-ribbon {
    position: absolute;
    top: -1px;
    right: -1px;
    background: linear-gradient(135deg, #ffd700, #ff9800);
    color: #5a4000;
    padding: 4px 12px;
    border-radius: 0 var(--border-radius-lg) 0 var(--border-radius-lg);
    font-size: 0.7em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.plan-card { position: relative; }

.plan-featured {
    border-color: #ffd700;
    box-shadow: 0 0 0 1px rgba(255, 215, 0, 0.3);
}

.plan-original-price {
    text-decoration: line-through;
    color: var(--text-muted);
    font-size: 0.65em;
    font-weight: 400;
    margin-right: 6px;
}

.plan-current-price {
    font-weight: 700;
}

.plan-features-list {
    text-align: left;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.plan-feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85em;
    padding: 2px 0;
}

.plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 8px;
    padding: 4px 0;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    font-size: 0.95em;
}

.feature-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 15px;
}
.feature-icon.feature-enabled { background: rgba(25, 135, 84, 0.12); color: var(--success); }
.feature-icon.feature-disabled { background: var(--bg-tertiary); color: var(--text-muted); }

.feature-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.feature-name {
    color: var(--text-primary);
    font-weight: 500;
}

.feature-desc {
    font-size: 0.85em;
    color: var(--text-muted);
}

.feature-value {
    font-weight: 600;
    color: var(--primary);
    white-space: nowrap;
}
.feature-value-unlimited {
    font-weight: 600;
    color: var(--primary);
    white-space: nowrap;
}
.feature-value-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 0.8em;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0.3px;
}
.feature-value-badge.enabled {
    background: rgba(25, 135, 84, 0.12);
    color: var(--success);
    border: 1px solid rgba(25, 135, 84, 0.2);
}
.feature-value-badge.disabled {
    background: var(--bg-tertiary);
    color: var(--text-muted);
    border: 1px solid var(--border-light);
}
.feature-value-badge.filesize {
    background: rgba(13, 110, 253, 0.1);
    color: var(--primary);
    border: 1px solid rgba(13, 110, 253, 0.2);
}

.panel-header-row {
    margin-bottom: 4px;
}

.activation-alert {
    padding: 8px 12px;
    border-radius: var(--border-radius);
    font-size: 0.9em;
    display: flex;
    align-items: center;
}
.activation-alert.error {
    background: rgba(220, 53, 69, 0.1);
    color: var(--danger);
    border: 1px solid rgba(220, 53, 69, 0.2);
}
.activation-alert.success {
    background: rgba(25, 135, 84, 0.1);
    color: var(--success);
    border: 1px solid rgba(25, 135, 84, 0.2);
}

.promotion-banners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 12px;
    margin-top: 12px;
}
.promotion-banner {
    border-radius: 10px;
    padding: 16px;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.promotion-banner:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
.banner-content {
    display: flex;
    align-items: center;
    gap: 12px;
}
.banner-logo { flex-shrink: 0; }
.banner-text { flex: 1; }
.banner-text h4 { margin: 0 0 4px 0; font-size: 1.05em; font-weight: 600; }
.banner-text p { margin: 0; font-size: 0.85em; opacity: 0.9; }
.banner-action { opacity: 0.8; font-size: 1.1em; }

/* ---------- Promotions Page ---------- */
.promo-loading { text-align: center; padding: 48px 0; }
.promo-loading p { margin-top: 12px; }

.promo-tabs {
    display: flex;
    border-bottom: 2px solid var(--border);
    margin-bottom: 16px;
    gap: 0;
}
.promo-tab-btn {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: var(--transition);
}
.promo-tab-btn:hover { color: var(--text-primary); }
.promo-tab-btn.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.promo-card {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}
.promo-card-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-light);
}
.promo-title { margin: 0; font-size: 1.3em; font-weight: 600; }
.promo-subtitle { margin: 6px 0 0; color: var(--text-secondary); font-size: 0.95em; }

.promo-card-body { padding: 24px; }

.promo-qr-section {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 24px;
    padding: 20px;
    margin-bottom: 24px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--border-radius);
}
.promo-qr-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
    min-height: 200px;
}
.promo-qr-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 200px;
    border: 2px dashed var(--border);
    border-radius: var(--border-radius);
}
.promo-qr-img {
    max-width: 250px;
    max-height: 250px;
    border: 1px solid var(--border);
    border-radius: 8px;
}
.promo-qr-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.promo-qr-instructions {
    font-size: 0.95em;
    color: var(--text-secondary);
    margin: 0 0 8px;
}
.promo-qr-link {
    font-size: 0.85em;
    word-break: break-all;
    color: var(--primary);
}

.promo-rules-section,
.promo-notices-section {
    margin-bottom: 20px;
}
.promo-section-title {
    font-size: 1.05em;
    font-weight: 600;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.promo-rules-list,
.promo-notices-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.promo-rule-item,
.promo-notice-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-left: 3px solid var(--primary);
    background: var(--bg-secondary);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    font-size: 0.93em;
    line-height: 1.5;
}
.promo-rule-icon { color: var(--primary); margin-top: 2px; flex-shrink: 0; }
.promo-notice-item { border-left-color: var(--warning); }
.promo-notice-icon { color: var(--warning); margin-top: 2px; flex-shrink: 0; }

.promo-agreement-section {
    margin-top: 20px;
    padding: 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--border-radius);
    text-align: center;
}
.promo-agreement-text {
    margin: 0 0 16px;
    color: var(--text-secondary);
    font-size: 0.95em;
}

@media (max-width: 768px) {
    .promo-qr-section {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .promo-qr-container { justify-content: center; }
    .promo-qr-info { align-items: center; }
}

.activation-confirm {
    margin-top: 10px;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-light);
}

.form-label {
    display: block;
    font-size: 0.85em;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

/* ---------- Profile Page ---------- */
.profile-header-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-lg);
}

.profile-avatar-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    flex-shrink: 0;
    text-transform: uppercase;
}

.profile-header-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.profile-header-info h2 {
    margin: 0;
    font-size: 1.2em;
    font-weight: 600;
}

.details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.detail-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
}

.detail-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--primary-light);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.security-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
}

.security-card {
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.security-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    cursor: pointer;
    user-select: none;
    background: var(--bg-secondary);
    font-weight: 500;
    transition: var(--transition);
}

.security-card-header:hover {
    background: var(--bg-tertiary);
}

.security-form {
    padding: 16px;
    border-top: 1px solid var(--border-light);
}

.inline-form {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-light);
}

.inline-error {
    margin: 8px 0;
    padding: 10px 12px;
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.3);
    border-radius: 6px;
    color: var(--danger, #dc3545);
    font-size: 0.9em;
}

.recovery-codes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 6px;
    margin: 12px 0;
}

.recovery-code-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    font-family: monospace;
    font-size: 0.85em;
}

.recovery-code-num {
    color: var(--text-muted);
    font-size: 0.75em;
    min-width: 18px;
}

@media (max-width: 768px) {
    .membership-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .membership-header-actions {
        width: 100%;
        justify-content: flex-start;
    }
    .plans-grid {
        grid-template-columns: 1fr;
    }
    .features-grid {
        grid-template-columns: 1fr;
    }
    .details-grid {
        grid-template-columns: 1fr;
    }
    .profile-content {
        grid-template-columns: 1fr;
    }
    .profile-header-card {
        flex-direction: column;
        text-align: center;
    }
    .security-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- Data Table ---------- */
.table-container {
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.data-table thead th {
    text-align: left;
    padding: 10px 12px;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
}

.data-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
}

.data-table tbody tr:hover {
    background: var(--bg-secondary);
}

/* ---------- Webhook Content ---------- */
.webhook-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    padding: 8px 12px;
    font-size: 12px;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
    margin-top: 8px;
    max-height: 200px;
    overflow-y: auto;
}

/* ---------- Nav Badge ---------- */
.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    background: var(--danger);
    border-radius: 10px;
    margin-left: auto;
}

/* Task count badges in sidebar */
.task-counts-badges {
    display: flex;
    gap: 3px;
    margin-left: auto;
}
.task-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    border-radius: 10px;
    text-decoration: none;
    cursor: pointer;
}
.task-badge:hover { opacity: 0.85; text-decoration: none; color: #fff; }
.task-badge.copy { background: #ff6b6b; }
.task-badge.download { background: #2196f3; }
.task-badge.upload { background: #4caf50; }

/* Update indicator dot (green, matching Blazor) */
.update-indicator {
    color: #22c55e;
    font-size: 12px;
    margin-left: auto;
    animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
/* Update dot overlay on avatar/icon buttons — positioned top-right */
.update-dot-badge {
    position: relative;
    display: inline-flex;
}
.update-dot-badge::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 10px;
    background: #22c55e;
    border-radius: 50%;
    border: 2px solid var(--bg-primary);
    pointer-events: none;
    z-index: 1;
    animation: pulse-dot 2s ease-in-out infinite;
}
/* Update dot on bottom tab bar Settings item */
.tab-update-dot {
    position: absolute;
    top: 4px;
    right: calc(50% - 18px);
    width: 10px;
    height: 10px;
    background: #22c55e;
    border-radius: 50%;
    border: 2px solid var(--bg-primary);
    pointer-events: none;
    z-index: 1;
    animation: pulse-dot 2s ease-in-out infinite;
}

/* ---------- Search Bar ---------- */
.search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
}
.search-bar .form-input {
    flex: 1;
    max-width: 400px;
}

.dialog-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Active toolbar button */
.toolbar-actions-left .btn.active,
.toolbar-actions-right .btn.active {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary);
}

/* ---------- Folder Selector Modal ---------- */
.modal-folder-selector {
    max-width: 500px;
    height: 70vh;
    display: flex;
    flex-direction: column;
}

.modal-folder-selector .modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

/* Breadcrumb */
.folder-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 2px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    min-height: 34px;
}
.folder-breadcrumb::-webkit-scrollbar { display: none; }
.folder-breadcrumb .breadcrumb-item {
    cursor: pointer;
    color: var(--primary);
    padding: 2px 4px;
    border-radius: 3px;
    transition: var(--transition);
    white-space: nowrap;
    flex-shrink: 0;
}
.breadcrumb-item:hover:not(.breadcrumb-current) {
    background: var(--bg-secondary);
}
.breadcrumb-current {
    color: var(--text-primary);
    font-weight: 500;
    cursor: default;
}
.breadcrumb-sep {
    color: var(--text-muted);
    flex-shrink: 0;
    font-size: 12px;
    margin: 0 1px;
    user-select: none;
}

/* Folder list (flat browser) */
.folder-list {
    padding: 4px 0;
    min-height: 200px;
}

.folder-list-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-primary);
    transition: var(--transition);
}
.folder-list-item:hover {
    background: var(--bg-secondary);
}
.folder-list-item.folder-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.folder-list-item .folder-icon {
    color: var(--folder-icon);
    font-size: 14px;
    flex-shrink: 0;
    width: 18px;
    text-align: center;
}

.folder-entry-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Up-folder (..) item */
.up-folder {
    color: var(--text-secondary);
    font-weight: 500;
}
.up-folder:hover {
    color: var(--text-primary);
}
.folder-icon-up {
    color: var(--text-muted);
    font-size: 14px;
    flex-shrink: 0;
    width: 18px;
    text-align: center;
}

/* Inline new folder row */
.new-folder-item {
    cursor: default;
    gap: 6px;
}
.new-folder-item:hover {
    background: transparent;
}
.folder-icon-create {
    color: var(--success, #28a745);
    font-size: 14px;
    flex-shrink: 0;
    width: 18px;
    text-align: center;
}
.new-folder-input {
    flex: 1;
    min-width: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 13px;
    color: var(--text-primary);
    outline: none;
}
.new-folder-input:focus {
    border-color: var(--primary);
}

.btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    flex-shrink: 0;
    transition: var(--transition);
}
.btn-icon-confirm {
    background: var(--success, #28a745);
    color: #fff;
}
.btn-icon-confirm:hover:not(:disabled) {
    opacity: 0.85;
}
.btn-icon-confirm:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.btn-icon-cancel {
    background: none;
    color: var(--text-muted);
}
.btn-icon-cancel:hover {
    color: var(--text-primary);
    background: var(--bg-secondary);
}

/* Empty state */
.folder-list-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 12px;
    color: var(--text-muted);
    font-size: 13px;
}

/* Filter bar */
.folder-filter {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-bottom: 1px solid var(--border);
}

.folder-filter-icon {
    color: var(--text-muted);
    font-size: 12px;
    flex-shrink: 0;
}

.folder-filter-input {
    flex: 1;
    min-width: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 13px;
    color: var(--text-primary);
    outline: none;
    transition: var(--transition);
}
.folder-filter-input:focus {
    border-color: var(--primary);
}
.folder-filter-input::placeholder {
    color: var(--text-muted);
}

.folder-filter-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: var(--transition);
}
.folder-filter-clear:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* Inline create button (in filter bar) */
.btn-create-inline {
    white-space: nowrap;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60%;
    background: var(--success, #28a745);
    color: #fff;
    border: none;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: var(--transition);
}
.btn-create-inline:hover:not(:disabled) {
    opacity: 0.85;
}
.btn-create-inline:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Selected path display */
.selected-path-display {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Footer left actions (create folder button) */
.modal-footer-left {
    flex-shrink: 0;
}

/* Save / restore row */
.folder-save-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 12px;
    border-top: 1px solid var(--border);
    font-size: 12px;
}

.folder-save-label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}
.folder-save-label input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}

.btn-go-saved {
    white-space: nowrap;
    font-size: 12px;
    color: var(--primary);
    background: none;
    border: 1px solid var(--primary);
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: var(--transition);
}
.btn-go-saved:hover {
    background: var(--primary-light);
}

/* ---------- Path Autocomplete Dropdown ---------- */
.path-autocomplete-wrapper {
    position: relative;
    flex: 1;
    min-width: 0;
}
.path-autocomplete-wrapper .breadcrumb-path-input {
    width: 100%;
    box-sizing: border-box;
}
.path-autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1002;
    max-height: 240px;
    overflow-y: auto;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    box-shadow: var(--shadow-lg);
}
.path-ac-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-primary);
    transition: background 0.1s;
}
.path-ac-option:hover {
    background: var(--bg-secondary);
}
.path-ac-active {
    background: var(--primary-light);
    color: var(--primary);
}
.path-ac-icon {
    font-size: 14px;
    color: var(--folder-icon);
    flex-shrink: 0;
    width: 18px;
    text-align: center;
}
.path-ac-cloud-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    object-fit: contain;
}
.path-ac-lock {
    font-size: 10px;
    color: var(--warning, #f0ad4e);
    flex-shrink: 0;
}
.path-ac-unlock {
    font-size: 10px;
    color: var(--success, #28a745);
    flex-shrink: 0;
}
.path-ac-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Folder Picker: Breadcrumb Bar with Edit ---------- */
.folder-breadcrumb-bar {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    gap: 8px;
    border-bottom: 1px solid var(--border);
}
.folder-breadcrumb-bar .folder-breadcrumb {
    flex: 1;
    min-width: 0;
}
.folder-breadcrumb-bar .path-autocomplete-wrapper {
    flex: 1;
    min-width: 0;
}
.folder-breadcrumb-bar .breadcrumb-edit-btn {
    flex-shrink: 0;
    color: var(--text-muted);
    opacity: 0.6;
}
.folder-breadcrumb-bar .breadcrumb-edit-btn:hover {
    opacity: 1;
}

/* ---------- Folder Picker: Cloud Icons & Encryption Badges ---------- */
.folder-entry-icon-wrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.folder-cloud-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
}
.folder-enc-badge {
    font-size: 9px;
    color: var(--warning, #f0ad4e);
}
.folder-enc-badge.folder-enc-unlocked {
    color: var(--success, #28a745);
}

/* ---------- Folder Picker: Unlock Dialog ---------- */
.folder-unlock-overlay {
    position: absolute;
    inset: 0;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--border-radius-lg);
}
.folder-unlock-dialog {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-lg);
    padding: 16px 20px;
    width: 90%;
    max-width: 360px;
    box-shadow: var(--shadow-lg);
}
.folder-unlock-dialog h4 {
    margin: 0 0 8px;
    font-size: 15px;
}
.folder-unlock-path {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0 0 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.folder-unlock-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--border);
}

.modal-actions {
    display: flex;
    gap: 8px;
}

/* ---------- Add Cloud Form ---------- */
.add-cloud-form {
    max-width: 100%;
}

.add-cloud-form .form-group {
    margin-bottom: 14px;
}

.add-cloud-form .form-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding-top: 12px;
    border-top: 1px solid var(--border-light);
}

.add-cloud-form select.form-input {
    cursor: pointer;
}

/* ---------- Config Display ---------- */
.config-display {
    font-size: 13px;
}

.config-pre {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    padding: 12px;
    font-size: 11px;
    font-family: 'SF Mono', Monaco, Consolas, monospace;
    overflow-x: auto;
    max-height: 300px;
    margin-top: 8px;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-all;
}

/* ---------- Context Menu ---------- */
.context-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2000;
}

.context-menu {
    position: fixed;
    min-width: 180px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    padding: 4px 0;
    z-index: 2001;
    animation: fade-in 0.1s ease;
}

.context-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 16px;
    font-size: 13px;
    color: var(--text-primary);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: var(--transition);
}
.context-menu-item:hover {
    background: var(--bg-secondary);
}
.context-menu-item.danger {
    color: var(--danger);
}
.context-menu-item.danger:hover {
    background: rgba(220, 53, 69, 0.08);
}
.context-menu-item i, .context-menu-item .icon-xunlei {
    width: 16px;
    text-align: center;
    font-size: 12px;
}

.context-menu-divider {
    height: 1px;
    background: var(--border-light);
    margin: 4px 0;
}
.context-menu-submenu {
    position: relative;
}
.context-menu-submenu > .context-menu-item::after {
    content: '\f054';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 9px;
    margin-left: auto;
    opacity: 0.5;
}
.context-submenu-popup {
    display: none;
    position: absolute;
    top: -4px;
    left: 100%;
    min-width: 160px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    padding: 4px 0;
    z-index: 2002;
}
/* Submenu shown only via .open class (set by JS on click and mouseenter).
   No pure CSS :hover — JS handles positioning with position:fixed. */
/* When opened via click/tap (.open), show the submenu popup.
   JS (toggle_submenu) sets position:fixed + coordinates via inline styles. */
.context-menu-submenu.open > .context-submenu-popup {
    display: block;
}

/* ---------- Recovery Codes ---------- */
.recovery-codes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
    margin-bottom: 16px;
}

.recovery-code {
    display: block;
    padding: 6px 10px;
    font-size: 13px;
    font-family: 'SF Mono', Monaco, Consolas, monospace;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    text-align: center;
}

/* ---------- File Properties Panel ---------- */
.file-props-panel {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    font-size: 13px;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.file-props-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-light);
    font-size: 13px;
    flex-shrink: 0;
}

.file-props-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 0 12px 12px;
}

/* Preview / Icon section */
.file-props-preview {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px 0 12px;
    min-height: 60px;
}
.file-props-thumb {
    max-width: 100%;
    max-height: 180px;
    border-radius: 4px;
    object-fit: contain;
}
.file-props-thumb-wrap,
.file-props-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.file-props-icon-wrap .wf-card-icon {
    font-size: 64px;
}
.file-props-icon-wrap .wf-card-icon img {
    width: 64px;
    height: 64px;
}
.file-props-play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: rgba(255,255,255,0.85);
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
    pointer-events: none;
}
.file-props-encrypt-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    background: var(--bg-primary);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Properties table */
.properties-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.properties-table td {
    padding: 4px 0;
    vertical-align: top;
    line-height: 1.4;
}
.prop-name {
    width: 32%;
    text-align: right;
    padding-right: 8px !important;
    color: var(--text-muted);
    font-size: 11px;
    white-space: nowrap;
}
.prop-value {
    word-break: break-word;
    font-size: 12px;
    position: relative;
}
.prop-path {
    font-family: monospace;
    font-size: 11px;
    word-break: break-all;
}
.prop-hash {
    font-family: monospace;
    font-size: 10px;
    word-break: break-all;
    color: var(--text-secondary);
}
.prop-row.clickable { cursor: pointer; }
.prop-row.clickable:hover { background: var(--hover-bg); }
.copy-icon {
    font-size: 10px;
    color: var(--text-muted);
    opacity: 0;
    margin-left: 4px;
    transition: opacity 0.15s;
}
.prop-row:hover .copy-icon { opacity: 1; }

/* Section dividers */
.section-divider {
    border: none;
    border-top: 1px solid var(--border-light);
    margin: 10px 0 6px;
}
.section-header {
    font-weight: 600;
    font-size: 12px;
    margin-bottom: 6px;
    color: var(--text-primary);
}
.section-header.clickable { cursor: pointer; border-radius: 4px; padding: 2px 4px; margin-left: -4px; }
.section-header.clickable:hover { background: var(--hover-bg); }
.section-subheader {
    font-weight: 500;
    font-size: 11px;
    margin: 8px 0 4px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Space Usage */
.space-usage-row {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 6px;
    gap: 4px;
}
.usage-bar-container {
    height: 10px;
    background: var(--bg-tertiary);
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;
    margin-bottom: 4px;
}
.usage-bar {
    height: 100%;
    border-radius: 5px;
    transition: width 0.3s;
}
.usage-low { background: var(--success); }
.usage-medium { background: linear-gradient(90deg, var(--success), #f0ad4e); }
.usage-high { background: linear-gradient(90deg, var(--success), #fd7e14); }
.usage-critical { background: linear-gradient(90deg, var(--success), var(--danger)); }

/* Cache Management */
.cache-input-row {
    display: flex;
    align-items: center;
    gap: 4px;
}
/* Vertically center labels with buttons/inputs in cache rows */
.prop-row.cache-row td { vertical-align: middle; }
.cache-time-input {
    width: 70px;
    padding: 2px 6px;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    background: var(--bg-primary);
    color: var(--text-primary);
}
.btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
    font-size: 13px;
    line-height: 1;
}
.btn-icon:hover { opacity: 0.7; }

/* Encryption */
.encryption-status {
    margin: 4px 0 8px;
}
.encryption-controls {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
}
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}
.bg-warning { background: rgba(240, 173, 78, 0.2); color: #f0ad4e; }
.bg-success { background: rgba(92, 184, 92, 0.2); color: #5cb85c; }
.bg-secondary { background: rgba(128, 128, 128, 0.2); color: var(--text-secondary); }

/* ---------- Permissions Grid (legacy) ---------- */
.perm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.perm-grid .checkbox-label {
    font-size: 13px;
}

/* ============================================================
   API Tokens Page
   ============================================================ */

/* ---------- Tokens Section Header ---------- */
.tokens-section-header {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--border);
}
.tokens-section-header h3 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}
.tokens-section-header i {
    color: var(--primary);
}

/* ---------- Token Cards Grid ---------- */
.token-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 16px;
}

.token-card {
    background: var(--bg-card, var(--bg-primary));
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.2s;
}
.token-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

.token-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    gap: 12px;
}

.token-card-info {
    flex: 1;
    min-width: 0;
}
.token-card-info h4 {
    margin: 0 0 8px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    word-wrap: break-word;
}

.token-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.token-badges .badge {
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.badge-readonly {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}
.badge-readwrite {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}
.badge-admin {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.token-card-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.btn-icon {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
    font-size: 13px;
}
.btn-icon:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.btn-icon-danger:hover {
    background: var(--danger, #ef4444);
    color: #fff;
    border-color: var(--danger, #ef4444);
}

.token-card-details {
    padding: 16px;
}
.token-detail-row {
    margin-bottom: 12px;
}
.token-detail-row:last-child {
    margin-bottom: 0;
}
.token-detail-label {
    display: block;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.token-detail-value {
    color: var(--text-primary);
    font-size: 0.875rem;
}

.token-value-display {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 12px;
}
.token-text {
    flex: 1;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
    font-size: 0.8rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- Input with button ---------- */
.input-with-button {
    position: relative;
    display: flex;
    width: 100%;
}
.input-with-button .form-input {
    flex: 1;
    padding-right: 40px;
}
.btn-inside {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.15s;
    font-size: 13px;
}
.btn-inside:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* ---------- Expires controls ---------- */
.expires-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.expires-inline {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ---------- Token display box ---------- */
.token-display-box {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 12px;
}

/* ---------- Permissions Editor (modern) ---------- */
.permissions-editor-modern {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Permission Group */
.perm-group {
    background: var(--bg-card, var(--bg-primary));
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.2s;
}
.perm-group:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.perm-group .perm-group-content {
    display: block;
}
.perm-group.collapsed .perm-group-content {
    display: none;
}

.perm-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
}
.perm-group-header:hover {
    background: var(--bg-hover, var(--bg-secondary));
}

.perm-group-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.perm-group-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
}
.perm-group-icon {
    color: var(--primary);
    font-size: 1rem;
}

.perm-group-info {
    flex: 1;
}
.perm-group-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}
.perm-group-subtitle {
    color: var(--text-secondary);
    font-size: 0.75rem;
    display: block;
    margin-top: 2px;
}

.perm-group-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Tri-state toggle (group level) */
.tri-state-toggle {
    position: relative;
    width: 44px;
    height: 22px;
    cursor: pointer;
}
.toggle-track {
    width: 100%;
    height: 100%;
    background: var(--bg-secondary);
    border-radius: 11px;
    position: relative;
    transition: all 0.2s;
    border: 1px solid var(--border);
}
.tri-state-toggle.all .toggle-track {
    background: #10b981;
    border-color: #10b981;
}
.tri-state-toggle.some .toggle-track {
    background: #f59e0b;
    border-color: #f59e0b;
}
.toggle-thumb {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.tri-state-toggle.all .toggle-thumb,
.tri-state-toggle.some .toggle-thumb {
    transform: translateX(22px);
}

.expand-icon {
    color: var(--text-secondary);
    transition: transform 0.2s;
    font-size: 0.875rem;
}
.expand-icon.expanded {
    transform: rotate(180deg);
}

/* Permission Sections */
.perm-sections-container {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.perm-section {
    background: var(--bg-primary);
    border-radius: 6px;
    border: 1px solid var(--border);
    overflow: visible;
    transition: border-color 0.2s;
}
.perm-section:hover {
    border-color: var(--text-secondary);
}

.perm-section .perm-section-content {
    display: block;
}
.perm-section.collapsed .perm-section-content {
    display: none;
}

.perm-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
}
.perm-section-header:hover {
    filter: brightness(0.95);
}

.perm-section-header-content {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}
.perm-section-icon {
    color: var(--primary);
    font-size: 0.8rem;
}
.perm-section-title {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-primary);
}
.perm-section-badge {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 0.65rem;
    font-weight: 500;
    margin-left: auto;
    border: 1px solid var(--border);
}

.perm-section-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Tri-state mini (section level) */
.tri-state-mini {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid var(--border);
    color: var(--text-secondary);
}
.tri-state-mini.all {
    background: #10b981;
    color: #fff;
    border-color: #10b981;
}
.tri-state-mini.some {
    background: #f59e0b;
    color: #fff;
    border-color: #f59e0b;
}

.perm-section-expand {
    color: var(--text-secondary);
    font-size: 0.8rem;
    transition: transform 0.2s;
}
.perm-section-expand.expanded {
    transform: rotate(180deg);
}

/* Permission Items Grid */
.perm-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 4px;
    padding: 8px 12px;
}

.perm-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s;
    font-size: 0.8rem;
    color: var(--text-primary);
}
.perm-item:hover {
    background: var(--bg-secondary);
}
.perm-item input[type="checkbox"] {
    accent-color: var(--primary);
    width: 16px;
    height: 16px;
    cursor: pointer;
}
.perm-item-label {
    color: var(--text-primary);
    font-size: 0.8rem;
}

@media (max-width: 600px) {
    .token-cards-grid {
        grid-template-columns: 1fr;
    }
    .token-card-header {
        flex-direction: column;
        gap: 8px;
    }
    .token-card-actions {
        justify-content: flex-start;
    }
    .perm-items-grid {
        grid-template-columns: 1fr;
    }
    .expires-inline {
        flex-direction: column;
        align-items: stretch;
    }
    .expires-inline input,
    .expires-inline select {
        width: 100% !important;
    }
}

/* ============================================================
   Backups Page
   ============================================================ */

/* ---------- Batch Action Bar ---------- */
.backup-batch-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 4px;
    flex-wrap: wrap;
}
.backup-batch-bar .batch-count {
    font-size: 0.85em;
    color: var(--text-secondary);
    margin-right: 4px;
}
.backup-select-cb {
    flex-shrink: 0;
    cursor: pointer;
    width: 16px;
    height: 16px;
}

/* ---------- Backup List ---------- */
.backup-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
@media (max-width: 1024px) {
    .backup-list { grid-template-columns: 1fr; }
}

/* ---------- Backup Card ---------- */
.backup-card {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-lg);
    padding: 16px;
    border-left: 3px solid var(--border);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.backup-card:hover {
    box-shadow: var(--shadow-sm);
}
.backup-card.running   { border-left-color: var(--primary); }
.backup-card.completed { border-left-color: var(--success); }
.backup-card.failed    { border-left-color: var(--danger); }
.backup-card.disabled  { border-left-color: var(--text-muted); opacity: 0.7; }

/* ---------- Backup Header ---------- */
.backup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.backup-source {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}
.backup-source > i {
    font-size: 1.1em;
    flex-shrink: 0;
}
.backup-source > i.fa-spinner { color: var(--primary); }
.backup-source > i.fa-check-circle { color: var(--success); }
.backup-source > i.fa-exclamation-circle { color: var(--danger); }
.backup-source > i.fa-pause-circle { color: var(--text-muted); }
.backup-source-path {
    font-weight: 600;
    font-size: 0.95em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- Destinations Section ---------- */
.backup-destinations {
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 12px;
}
.backup-dest-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.backup-dest-title {
    font-size: 0.85em;
    font-weight: 600;
    color: var(--text-secondary);
}
.backup-dest-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 0.9em;
}
.backup-dest-item .dest-icon {
    color: var(--text-muted);
    font-size: 0.8em;
    flex-shrink: 0;
}
.backup-dest-item .dest-path {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.backup-dest-item .dest-toggle {
    flex-shrink: 0;
    cursor: pointer;
}

/* ---------- Inline Add Destination ---------- */
.inline-add-dest {
    border-top: 1px solid var(--border-light);
    padding-top: 10px;
    margin-top: 8px;
}
.inline-add-row {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
}
.inline-add-row .form-input {
    flex: 1;
}
.inline-add-actions {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

/* ---------- Error Message ---------- */
.backup-error-msg {
    background: rgba(220, 53, 69, 0.08);
    color: var(--danger);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.85em;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ---------- Info Grid ---------- */
.backup-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
    padding: 8px 0;
    border-top: 1px solid var(--border-light);
}
.backup-info-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.backup-info-item .info-label {
    font-size: 0.75em;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 600;
}
.backup-info-item span:last-child {
    font-size: 0.85em;
    font-weight: 500;
}

/* ---------- Last Backup Time ---------- */
.backup-last-time {
    font-size: 0.85em;
    color: var(--text-secondary);
    margin-bottom: 12px;
}
.backup-last-time i {
    color: var(--text-muted);
}

/* ---------- Actions ---------- */
.backup-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--border-light);
}

/* ---------- Status Panel ---------- */
.backup-status-panel {
    margin-top: 12px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 12px;
    background: var(--bg-secondary);
}
.status-panel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.status-panel-title {
    flex: 1;
    font-weight: 600;
    font-size: 0.9em;
}
.status-panel-body { font-size: 0.9em; }
.status-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.status-errors { margin-top: 8px; }
.status-errors-title {
    font-weight: 600;
    font-size: 0.85em;
    margin-bottom: 6px;
    color: var(--danger);
}
.status-error-item {
    display: flex;
    gap: 8px;
    padding: 4px 0;
    font-size: 0.85em;
    border-bottom: 1px solid var(--border-light);
}
.status-error-item:last-child { border-bottom: none; }
.error-time {
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}
.error-msg { color: var(--danger); }

/* ---------- Backup Mobile ---------- */
@media (max-width: 768px) {
    .backup-card { padding: 12px; }
    .backup-header { flex-wrap: wrap; gap: 8px; }
    .backup-info-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 6px; }
    .backup-destinations { padding: 8px; }
    .backup-actions { gap: 4px; }
    .backup-actions .btn { font-size: 0.82em; padding: 4px 8px; }
}
@media (max-width: 480px) {
    .backup-card { padding: 10px; }
    .backup-header { gap: 6px; }
    .backup-info-grid { grid-template-columns: repeat(2, 1fr); }
    .backup-actions .btn span { display: none; }
    .backup-dest-item { font-size: 0.82em; }
}

/* ---------- Wizard Progress ---------- */
.wizard-progress {
    display: flex;
    padding: 12px 20px;
    gap: 8px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
}
.wizard-step {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85em;
    color: var(--text-muted);
    background: transparent;
    transition: all 0.2s;
}
.wizard-step.active {
    background: var(--primary);
    color: #fff;
}
.wizard-step.completed {
    background: var(--primary-light);
    color: var(--primary);
}
.wizard-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid currentColor;
    font-size: 0.8em;
    font-weight: 700;
}
.wizard-step.active .wizard-step-num {
    background: #fff;
    color: var(--primary);
    border-color: #fff;
}
.wizard-step.completed .wizard-step-num {
    border-color: var(--primary);
}
.wizard-step-label {
    display: none;
}
@media (min-width: 600px) {
    .wizard-step-label { display: inline; }
}

/* ---------- Settings Tabs ---------- */
.settings-tabs {
    display: flex;
    border-bottom: 2px solid var(--border);
    background: var(--bg-secondary);
    padding: 0 16px;
}
.settings-tab {
    padding: 10px 16px;
    font-size: 0.9em;
    font-weight: 500;
    color: var(--text-secondary);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.settings-tab:hover {
    color: var(--primary);
}
.settings-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

/* ---------- Wizard Destinations ---------- */
.wizard-dests {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}
.wizard-dest-item {
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 8px;
}

/* ---------- Schedules Section ---------- */
.schedules-section {
    margin-top: 8px;
}
.schedule-item {
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 10px;
    margin-top: 8px;
}
.schedule-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.schedule-time {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
}
.time-input {
    width: 56px !important;
    text-align: center;
    min-width: 0 !important;
}
.schedule-days {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.days-checkboxes {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.day-check {
    font-size: 0.85em !important;
}

/* ---------- Filter Rule Item ---------- */
.filter-rule-item {
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 10px;
}
.filter-rule-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.filter-rule-type {
    font-weight: 600;
    font-size: 0.9em;
}
.filter-rule-options {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    flex-wrap: wrap;
}
.filter-rule-content {
    padding-top: 8px;
    border-top: 1px solid var(--border-light);
}
.radio-inline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85em;
    cursor: pointer;
}
.checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85em;
    cursor: pointer;
}

/* ---------- Min Size Input ---------- */
.minsize-input {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.minsize-input .form-input:first-child {
    max-width: 120px;
}
.minsize-input select {
    max-width: 100px;
}

/* ---------- Dropdown Menu ---------- */
.dropdown-menu {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: var(--shadow);
    padding: 4px 0;
    min-width: 180px;
}
.dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    font-size: 0.9em;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-primary);
    text-align: left;
}
.dropdown-item:hover {
    background: var(--bg-secondary);
}

/* ---------- Alert Warning ---------- */
.alert-warning {
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid var(--warning);
    color: #856404;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 0.9em;
}
[data-theme="dark"] .alert-warning {
    color: #ffc107;
    background: rgba(255, 193, 7, 0.08);
}

/* ---------- Outline Button ---------- */
.btn-outline {
    background: transparent;
    border: 1px solid var(--text-muted);
    color: var(--text-secondary);
}
.btn-outline:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* ---------- Checkbox / Radio Label ---------- */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

/* ---------- Modal Large ---------- */
.modal-lg {
    max-width: 720px;
    width: 95vw;
}
.modal-lg > .modal-body {
    min-height: 420px;
}

/* ---------- Balance Log Source ---------- */
.balance-source-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow: hidden;
}
.balance-source-name {
    font-weight: 500;
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.balance-operation-id {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
    background: var(--bg-secondary);
    padding: 1px 6px;
    border-radius: 4px;
    align-self: flex-start;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ---------- Referral Modal ---------- */
.referral-modal {
    max-width: 540px;
    width: 92vw;
}
.referral-modal-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    flex-shrink: 0;
}
.referral-hero {
    text-align: center;
    padding: 24px;
    background: linear-gradient(135deg, rgba(var(--primary-rgb, 59, 130, 246), 0.08), rgba(34, 197, 94, 0.05));
    border-radius: 16px;
    margin-bottom: 20px;
}
.referral-hero-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--primary), var(--success, #22c55e));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 28px;
    margin: 0 auto 12px;
    box-shadow: 0 8px 24px rgba(var(--primary-rgb, 59, 130, 246), 0.3);
}
.referral-hero-title {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--text-primary);
}
.referral-earning-highlight {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(var(--primary-rgb, 59, 130, 246), 0.1);
    border-radius: 20px;
    font-size: 0.9em;
    font-weight: 600;
    color: var(--primary);
    margin-top: 10px;
}
.referral-code-section {
    padding: 20px;
    border: 2px solid var(--border-light);
    border-radius: 16px;
    margin-bottom: 20px;
}
.referral-code-label {
    display: block;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 10px;
}
.referral-code-display {
    display: flex;
    gap: 10px;
    align-items: center;
}
.referral-code-input {
    flex: 1;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 1px;
    text-align: center;
}
.referral-benefits {
    padding: 20px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.05), rgba(var(--primary-rgb, 59, 130, 246), 0.05));
    border-radius: 16px;
}
.referral-benefits-title {
    font-size: 1.1rem;
    font-weight: 700;
    text-align: center;
    margin: 0 0 16px;
    color: var(--text-primary);
}
.referral-benefit-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.referral-benefit-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--bg-card, var(--bg-secondary));
    border: 1px solid var(--border-light);
    border-radius: 12px;
    transition: transform 0.15s, box-shadow 0.15s;
}
.referral-benefit-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.referral-benefit-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    flex-shrink: 0;
}
.referral-benefit-icon.benefit-1 { background: linear-gradient(135deg, var(--primary), var(--success, #22c55e)); }
.referral-benefit-icon.benefit-2 { background: linear-gradient(135deg, var(--success, #22c55e), var(--warning)); }
.referral-benefit-icon.benefit-3 { background: linear-gradient(135deg, var(--warning), var(--info, #06b6d4)); }
.referral-benefit-icon.benefit-4 { background: linear-gradient(135deg, var(--info, #06b6d4), var(--primary)); }
.referral-benefit-content h5 {
    margin: 0 0 4px;
    font-size: 0.9rem;
    font-weight: 600;
}
.referral-benefit-content p {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

@media (max-width: 640px) {
    .referral-benefit-list {
        grid-template-columns: 1fr;
    }
}

/* ---------- Upload Progress Bar ---------- */
.upload-progress-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--primary-light);
    border: 1px solid var(--primary);
    border-radius: var(--border-radius);
    font-size: 0.85em;
    color: var(--primary);
    margin: 0 16px 8px;
}

/* ---------- Drag-Drop Overlay ---------- */
.files-page.drag-over {
    position: relative;
}
.drag-drop-overlay {
    position: absolute;
    inset: 0;
    background: rgba(13, 110, 253, 0.08);
    border: 3px dashed var(--primary);
    border-radius: var(--border-radius-lg);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.drag-drop-content {
    text-align: center;
    color: var(--primary);
}
.drag-drop-content i {
    font-size: 3em;
    margin-bottom: 12px;
    display: block;
}
.drag-drop-content p {
    font-size: 1.1em;
    font-weight: 500;
}

/* ---------- Files Load Error ---------- */
.files-load-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    flex: 1;
    min-height: 200px;
}
.files-load-error-icon {
    font-size: 48px;
    color: var(--danger);
    margin-bottom: 16px;
}
.files-load-error-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}
.files-load-error-message {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 24px;
    max-width: 600px;
    width: 100%;
    line-height: 1.5;
    word-break: break-word;
    max-height: 40vh;
    overflow-y: auto;
    padding: 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
}

/* ---------- Conflict Resolution ---------- */
.conflict-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}
.radio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.95em;
}
.radio-label input[type="radio"] {
    margin: 0;
}

.conflict-action-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}
.conflict-action-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 2px solid var(--border);
    border-radius: var(--border-radius);
    background: var(--bg-secondary);
    cursor: pointer;
    transition: all 0.15s;
}
.conflict-action-card:hover {
    border-color: var(--primary);
    background: var(--bg-tertiary);
}
.conflict-action-card.selected {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, var(--bg-secondary));
}
.conflict-action-icon {
    font-size: 1.3rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 8px;
    background: var(--bg-tertiary);
}
.conflict-action-text {
    flex: 1;
    min-width: 0;
}
.conflict-action-title {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 2px;
    color: var(--text-primary);
}
.conflict-action-desc {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.3;
}

/* (file-props-path/hash moved to properties-table styles above) */
.text-muted {
    color: var(--text-muted);
}

/* ---------- Bottom Tab Bar ---------- */
.bottom-tab-bar {
    display: none;
    position: fixed;
    bottom: calc(8px + var(--safe-area-bottom));
    left: 12px;
    right: 12px;
    height: var(--tab-bar-height);
    border-radius: 22px;
    background: transparent;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    border: 0.5px solid rgba(255, 255, 255, 0.18);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 100;
    justify-content: space-around;
    align-items: stretch;
}
[data-theme="dark"] .bottom-tab-bar {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.3);
}
.tab-bar-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex: 1;
    min-width: 44px;
    min-height: 44px;
    color: rgba(0, 0, 0, 0.5);
    text-decoration: none;
    font-size: 10px;
    transition: color var(--transition);
    -webkit-tap-highlight-color: transparent;
}
[data-theme="dark"] .tab-bar-item {
    color: rgba(255, 255, 255, 0.7);
}
.tab-bar-item:hover { text-decoration: none; }
.tab-bar-item.active {
    color: var(--primary);
}
.tab-bar-item.active::before {
    content: '';
    position: absolute;
    inset: 4px 8px;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.10);
    border: 0.5px solid rgba(0, 0, 0, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
    z-index: -1;
}
[data-theme="dark"] .tab-bar-item.active::before {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.tab-bar-icon {
    font-size: 18px;
    line-height: 1;
}
.tab-bar-label {
    font-size: 10px;
    line-height: 1.2;
    white-space: nowrap;
}

/* ---------- Mobile-only elements (hidden on desktop) ---------- */
.mobile-overflow-btn { display: none; }
.mobile-parent-btn { display: none; }
.mobile-folder-name { display: none; }
.mobile-select-btn { display: none; }
.mobile-pagination-bar { display: none; }
.mobile-filter-bar { display: none; }

/* ---------- Mobile Overflow Menu ---------- */

.mobile-overflow-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 500;
}
.mobile-overflow-menu {
    position: fixed;
    top: calc(var(--header-height) + 36px);
    right: 8px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    z-index: 501;
    max-height: 60vh;
    min-width: 200px;
    overflow-y: auto;
    padding: 8px 0;
    animation: fade-in 0.15s ease;
}
.mobile-overflow-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 20px;
    font-size: 15px;
    min-height: 44px;
    color: var(--text-primary);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
}
.mobile-overflow-item:hover,
.mobile-overflow-item:active {
    background: var(--bg-secondary);
}
.mobile-overflow-item i, .mobile-overflow-item .icon-xunlei {
    width: 20px;
    text-align: center;
    font-size: 14px;
    color: var(--text-secondary);
}
.mobile-overflow-separator {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}
.mobile-overflow-section-header {
    padding: 8px 20px 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.mobile-overflow-item .menu-check {
    width: 20px;
    text-align: center;
    color: var(--accent, var(--primary));
    flex-shrink: 0;
}
.mobile-overflow-item .menu-check.hidden { visibility: hidden; }
.mobile-overflow-gallery-sizes {
    display: flex;
    gap: 4px;
    padding: 4px 20px 8px 52px;
}

/* ---------- Touch Selection Action Bar ---------- */
/* Rendering is controlled by Rust (has_touch + select_mode), so always display when present */
.mobile-selection-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    bottom: env(safe-area-inset-bottom, 0px);
    left: 0;
    right: 0;
    background: var(--bg-primary);
    border-top: 1px solid var(--border);
    z-index: 150;
    justify-content: space-around;
}

.selection-bar-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 1;
    min-height: 52px;
    padding: 8px 4px;
    background: none;
    border: none;
    color: var(--primary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.selection-bar-btn i, .selection-bar-btn .icon-xunlei { font-size: 22px; }
.selection-bar-btn.danger { color: var(--danger); }
.selection-bar-btn:active { opacity: 0.7; }

/* ---------- Settings page avatar dropdown (mobile-only) ---------- */
.settings-avatar-wrapper { display: none; }

/* ---------- Mobile Responsive ---------- */
@media (max-width: 768px) {
    :root {
        --sidebar-width: 0px;
    }

    /* Sidebar: slide-in overlay drawer */
    .app-sidebar {
        position: fixed !important;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px !important;
        transform: translateX(-100%);
        transition: transform 0.28s ease !important;
        z-index: 200;
        box-shadow: var(--shadow-lg);
    }
    .app-sidebar:not(.open) {
        width: 280px !important; /* override width:0 — use transform instead */
        overflow: hidden;
    }
    .app-sidebar.open {
        transform: translateX(0);
    }
    /* Backdrop shown when sidebar is open */
    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        top: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 199;
        -webkit-tap-highlight-color: transparent;
    }
    /* Show tab bar */
    .bottom-tab-bar { display: flex; }

    /* Tab bar floats over content — no bottom padding on container */
    .app-container {
        padding-bottom: 0;
    }

    .layout-sidebar {
        position: fixed;
        left: -280px;
        top: 0;
        bottom: 0;
        width: 280px;
        z-index: 200;
        background: var(--bg-primary);
        box-shadow: var(--shadow-lg);
        transition: left 0.3s ease;
    }
    .layout-sidebar.open {
        left: 0;
    }

    .layout-content {
        margin-left: 0 !important;
    }

    /* Hide app header on mobile — all functionality available via bottom tab bar + Settings page */
    .app-header { display: none !important; }

    /* Toolbar: show mobile-only elements, hide desktop-only */
    .mobile-overflow-btn { display: inline-flex; }
    .toolbar-overflow-hide { display: none !important; }
    .toolbar-actions-right { display: none !important; }
    .toolbar-refresh-btn { display: none !important; }
    .mobile-parent-btn { display: inline-flex !important; order: 0; flex-shrink: 0; }
    .mobile-folder-name {
        display: block !important;
        order: 1;
        font-size: 15px;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
        flex: 1;
        line-height: 44px;
    }
    .mobile-overflow-btn { order: 10; margin-left: auto; flex-shrink: 0; }
    .add-dropdown { order: 11; flex-shrink: 0; }
    .add-dropdown .dropdown-menu { left: auto; right: 0; }
    .toolbar-actions-left > .btn-primary { order: 11; flex-shrink: 0; }
    .mobile-select-btn {
        display: inline-flex !important;
        order: 12;
        flex-shrink: 0;
        font-size: 15px;
        padding: 8px 12px;
        min-height: 44px;
        background: none !important;
        border: none !important;
        color: var(--primary) !important;
        align-items: center;
    }
    .add-btn-label { display: none; }
    .add-btn-caret { display: none; }
    .files-toolbar .btn { min-width: 44px; min-height: 44px; }

    /* Toolbar button styling — iPhone-style individual circles */
    .mobile-parent-btn {
        border-radius: 50% !important;
        border: none !important;
        background: var(--bg-secondary) !important;
        color: var(--text-primary) !important;
        width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }
    .mobile-overflow-btn {
        border: none !important;
        background: var(--bg-secondary) !important;
        color: var(--text-primary) !important;
        border-radius: 50% !important;
        width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }
    .add-dropdown .btn,
    .toolbar-actions-left > .btn-primary {
        border: none !important;
        background: transparent !important;
        color: var(--text-primary) !important;
        border-radius: 50% !important;
        width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        font-size: 18px !important;
    }

    /* Viewer: collapse transform buttons into dropdown */
    .viewer-transform-inline { display: none; }
    .viewer-transform-dropdown { display: block; }

    /* Two-row layout: Row 1 = toolbar, Row 2 = filter, Row 3 = breadcrumb */
    .files-topbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0;
        padding: 4px 0;
    }

    /* Row 1: toolbar buttons — reorder above breadcrumb */
    .files-topbar .files-toolbar {
        order: -1;
        width: 100%;
        padding: 0;
        flex-shrink: 0;
        gap: 2px;
    }

    /* Row 2: mobile filter (rendered via Rust in files-topbar) */
    .mobile-filter-bar {
        display: block;
        order: 0;
        width: 100%;
        padding: 4px 8px;
        flex-shrink: 0;
    }
    .mobile-filter-wrap {
        position: relative;
        display: flex;
        align-items: center;
    }
    .mobile-filter-icon {
        position: absolute;
        left: 12px;
        color: var(--text-secondary);
        font-size: 14px;
        pointer-events: none;
    }
    .mobile-filter-input {
        width: 100%;
        padding: 8px 36px 8px 36px;
        border-radius: 10px;
        background: var(--bg-secondary);
        border: none;
        font-size: 16px;
        min-height: 36px;
        box-sizing: border-box;
        color: var(--text-primary);
        outline: none;
    }
    .mobile-filter-input::placeholder { color: var(--text-muted); }
    .mobile-filter-input:focus { background: var(--bg-tertiary, var(--bg-secondary)); }
    .mobile-filter-clear {
        position: absolute;
        right: 4px;
        background: none;
        border: none;
        color: var(--text-muted);
        cursor: pointer;
        padding: 8px;
        font-size: 12px;
    }

    /* Row 3: breadcrumb — full width, touch-friendly */
    .files-topbar .files-breadcrumb-bar {
        order: 1;
        width: 100%;
        min-width: 0;
        padding: 0 4px;
    }
    .breadcrumb-item {
        min-height: 44px;
        padding: 8px 10px;
        display: inline-flex;
        align-items: center;
    }

    .files-topbar .breadcrumb-edit-btn { display: none; }

    /* Hide the filter inside file-list-container on mobile (replaced by mobile-filter-bar) */
    .unified-header { display: none; }

    .toolbar-actions-left {
        display: flex;
        align-items: center;
        flex: 1;
        gap: 2px;
        flex-wrap: nowrap;
        min-width: 0;
    }

    /* Unified header hidden on mobile — replaced by mobile-filter-bar above */

    .file-list .col-modified {
        display: none;
    }

    .file-list .col-size {
        width: 70px;
    }

    .file-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
    }

    /* Remove card borders on mobile — match iOS app flat card style */
    .file-grid-item,
    .wf-item {
        border: none;
    }
    .file-grid-item.selected,
    .file-grid-item.focused,
    .wf-item.selected,
    .wf-item.focused {
        outline: 2px solid var(--primary);
        outline-offset: -2px;
    }

    /* Waterfall: do not override --waterfall-item-width here;
       the inline style from the size selector takes priority. */

    /* Footer hidden on mobile — pagination moved to mobile-pagination-bar */
    .file-list-footer { display: none !important; }

    /* Mobile compact pagination bar */
    .mobile-pagination-bar {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
        padding: 8px 12px;
        border-bottom: 1px solid var(--border);
        flex-shrink: 0;
    }
    .mobile-page-btn {
        min-width: 44px;
        min-height: 44px;
        background: none;
        border: none;
        color: var(--primary);
        font-size: 18px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .mobile-page-btn:disabled { color: var(--text-secondary); opacity: 0.4; cursor: default; }
    .mobile-page-info {
        font-size: 15px;
        color: var(--text-primary);
        background: none;
        border: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    /* Page picker child styles moved to .touch-device scope (outside media query) */

    /* iPhone-style file rows: compact two-line layout */
    .file-row td { padding: 0 4px; font-size: 14px; }
    .file-list th { padding: 10px 12px; }
    .file-row .file-modified,
    .file-row .file-type,
    .file-row .file-created,
    .file-row .file-accessed { display: none; }
    /* Hide size column on mobile — info shown in subtitle */
    .file-row .file-size { display: none; }

    /* Two-line file name layout — centering handled by .file-row .file-name rule below */
    .mobile-file-subtitle {
        display: block;
        font-size: 12px;
        color: var(--text-secondary);
        font-weight: 400;
        line-height: 1.3;
    }
    .file-name-text {
        font-weight: 500;
        font-size: 15px;
        line-height: 1.3;
        padding-right: 0 !important;
    }

    /* List icons on mobile — match iPhone app size */
    .file-row td.file-icon { font-size: 44px; width: 52px; }

    /* Ellipsis button always visible on touch devices */
    .file-name-ellipsis { display: block; opacity: 1; }

    /* Row separators — indented past icon like iPhone */
    .file-row { border-bottom: none !important; }
    .file-row .file-name { border-bottom: 1px solid var(--border-light); align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 1px; }

    /* Suppress native long-press actions on file items */
    .file-row, .file-grid-item, .wf-item {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }

    /* Larger touch targets for ellipsis buttons (grid/waterfall views) */
    .item-ellipsis {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    /* Search icon: override filter funnel → magnifying glass */
    .uh-filter-icon::before { content: "\f002" !important; font-family: "Font Awesome 5 Free" !important; font-weight: 900 !important; }


    /* Context menu as popup dropdown (same as desktop) */
    .context-menu {
        max-height: 60vh;
        overflow-y: auto;
    }
    .context-menu-item { padding: 12px 16px; min-height: 44px; font-size: 15px; }

    /* Modal — keep centered popup on mobile (same as desktop) */
    .modal-content, .modal-dialog {
        width: 92%;
        max-height: 85vh;
    }
    .modal-folder-selector {
        height: 65vh;
    }

    /* Properties panel as bottom sheet */
    .panel-splitter { display: none; }
    .file-props-panel {
        position: fixed !important;
        bottom: calc(var(--tab-bar-height) + var(--safe-area-bottom) + 16px);
        left: 0;
        right: 0;
        width: 100% !important;
        max-height: 60vh;
        border-radius: 12px 12px 0 0;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
        z-index: 200;
    }

    /* On small screens, position selection bar above floating tab bar */
    .mobile-selection-bar {
        bottom: calc(var(--tab-bar-height) + var(--safe-area-bottom) + 24px);
    }

    /* Breadcrumb: scrollable */
    .breadcrumb {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        font-size: 0.85em;
    }
    .breadcrumb::-webkit-scrollbar { display: none; }

    /* viewer mobile overrides handled in main viewer block above */

    .search-bar {
        flex-direction: column;
    }
    .search-bar .form-input { max-width: none; font-size: 16px; }

    .inline-dialog {
        flex-direction: column;
        align-items: stretch;
    }

    /* Prevent iOS input zoom */
    input, textarea, select { font-size: 16px !important; }

    /* Responsive cards & layout */
    .card-grid { grid-template-columns: 1fr; gap: 8px; }

    .content-body {
        padding: 8px 12px 12px;
    }

    /* Dashboard: compact horizontal cards like native app */
    .dashboard-header { margin-bottom: 12px; text-align: left; }
    .dashboard-title { font-size: 18px; }
    .dashboard-subtitle { font-size: 12px; }

    .function-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; padding: 0; }
    .function-card {
        flex-direction: row;
        align-items: center;
        text-align: left;
        padding: 10px;
        gap: 10px;
        min-width: 0;
    }
    .function-card .fc-title { font-size: 13px; margin-bottom: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .function-card .fc-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
        border-radius: 10px;
        font-size: 16px;
        margin-bottom: 0;
    }
    .function-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .function-card .fc-desc { display: none; }
    .function-card .fc-stat { font-size: 14px; font-weight: 600; color: var(--primary); white-space: nowrap; }
    .function-card .fc-label { display: none; }

    .recent-files-section { margin-top: 12px; }
    .recent-files-grid { grid-template-columns: 1fr; gap: 4px; }
    .recent-file-card { padding: 8px 10px; }
    .recent-file-icon { width: 28px; height: 28px; font-size: 0.8rem; }
    .recent-files-modal { max-width: 100%; margin: 8px; }

    .stats-grid { gap: 8px; margin-top: 0; }
    .stat-card { padding: 12px; }
    .stat-header { margin-bottom: 8px; }

    .page-title { font-size: 18px; }

    /* Files page full height — tab bar floats over content */
    .files-page {
        height: 100dvh;
        padding: 0 8px;
    }

    /* Remove file browser content area border on mobile */
    .file-list-container {
        border: none;
        border-radius: 0;
    }

    /* Bottom padding in scroll areas so last items can scroll above floating tab bar */
    .file-list-scroll-area,
    .file-grid {
        padding-bottom: calc(var(--tab-bar-height) + var(--safe-area-bottom) + 24px);
    }

    /* All pages: bottom padding so last items scroll above floating tab bar.
       Uses !important to override earlier .content-body padding shorthand in this media query.
       The files page is unaffected — it sets its own height and scroll areas. */
    .content-body {
        padding-bottom: calc(var(--tab-bar-height) + var(--safe-area-bottom) + 24px) !important;
    }

    /* Login page: allow scrolling when 2FA or keyboard pushes content */
    .login-page {
        align-items: flex-start;
        padding: 24px 16px;
        min-height: 100dvh;
        overflow-y: auto;
    }
    .login-card {
        max-width: none;
        padding: 24px 20px;
        margin: auto;
    }

    /* Prevent outer page scroll — only inner content scrolls */
    html, body { overflow: hidden; height: 100dvh; height: 100vh; }

    /* Issue 2: Always show ellipsis on mobile (hover:hover rule hides it) */
    .item-ellipsis { opacity: 1 !important; }
    .file-name-ellipsis { opacity: 1 !important; }

    /* Issue 4: Compact page nav items in list view */
    .file-list .page-nav-row { padding: 4px 12px; white-space: nowrap; }
    .file-list .page-nav-row .page-nav-name { font-size: 13px; }

    /* Issue 5: Clouds page — prevent horizontal overflow */
    .cloud-card { overflow: hidden; word-break: break-word; }
    .cloud-card-header { flex-wrap: wrap; }
    .cloud-space { overflow: hidden; }
    .space-text { font-size: 12px; word-break: break-all; }
    .cloud-card-actions { flex-wrap: wrap; gap: 6px; }
    .cloud-card-actions .btn { font-size: 12px; padding: 4px 8px; }

    /* Issue 7: Settings pages — prevent horizontal overflow */
    .setting-group { overflow: hidden; word-break: break-word; }
    .setting-row input[type="text"],
    .setting-row input[type="number"],
    .setting-row input[type="url"],
    .setting-row select,
    .setting-row .form-input { max-width: 100%; box-sizing: border-box; }
    .port-row { flex-wrap: wrap; gap: 4px; }
    .port-row .port-link { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    .cert-section { overflow: hidden; }
    .cert-section .form-input { font-size: 12px; }

    /* Issue 8: Log file buttons on same line */
    .data-table td:last-child { white-space: nowrap; }
    .data-table td:last-child .btn { display: inline-flex; margin: 2px; }

    /* Issue 9: Performance page — mobile responsive */
    .perf-stat-cards { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; margin-bottom: 8px; }
    .perf-stat-card { padding: 12px; }
    .perf-stat-header { margin-bottom: 8px; }
    .perf-stat-value { font-size: 1.3em; }
    .perf-stat-label { font-size: 11px; }
    .perf-stat-icon { width: 32px; height: 32px; font-size: 14px; }
    .perf-section { margin-bottom: 8px; }
    .perf-section-body { padding: 8px; }
    .perf-section-header {
        flex-wrap: wrap;
        gap: 6px;
        padding: 10px 12px;
    }
    .perf-chart-legend { gap: 4px; flex-wrap: wrap; }
    .perf-legend-item { font-size: 11px; }
    .perf-data-points { font-size: 11px; }
    .perf-chart-body { padding: 4px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .perf-chart-body svg { width: 100%; height: auto; min-width: 400px; }
    .perf-card-sub { font-size: 0.75em; }
    .system-details-grid { grid-template-columns: 1fr 1fr !important; gap: 8px; }
    .sys-detail-item { padding: 10px !important; }
    .sys-detail-icon { width: 32px; height: 32px; font-size: 14px; }
    .sys-detail-label { font-size: 11px; }
    .sys-detail-value { font-size: 14px; }
    .perf-connection-status { font-size: 11px; }
    .perf-connection-status .btn-label,
    .header-actions .btn .btn-label { display: none; }

    /* Issue 10: Hide empty folder-tree area in sidebar on mobile */
    .tree-section { display: none !important; }
    .tree-splitter { display: none !important; }

    /* PTR and swipe-back indicator display is now handled by .touch-device rules */

    /* Settings page: keep header as row so avatar stays right-aligned */
    .page-header:has(.settings-avatar-wrapper) {
        flex-direction: row;
        align-items: center;
    }

    /* Settings page: avatar dropdown in header row */
    .settings-avatar-wrapper {
        display: block;
        position: relative;
        margin-left: auto;
    }
    .settings-avatar-btn {
        background: none;
        border: none;
        font-size: 24px;
        color: var(--text-secondary);
        cursor: pointer;
        padding: 4px;
        line-height: 1;
        -webkit-tap-highlight-color: transparent;
    }
    .settings-avatar-menu {
        position: absolute;
        top: 100%;
        right: 0;
        min-width: 200px;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 10px;
        box-shadow: var(--shadow-lg);
        z-index: 1001;
        padding: 4px 0;
    }
}

@keyframes slide-up {
    from { transform: translateY(100%); opacity: 0.5; }
    to { transform: translateY(0); opacity: 1; }
}

@media (max-width: 1024px) {
    .toolbar-actions-left .toolbar-overflow-hide,
    .toolbar-actions-right .toolbar-overflow-hide {
        display: none;
    }
}

@media (max-width: 480px) {
    .files-toolbar {
        padding: 6px 8px;
    }

    .toolbar-actions-left .btn,
    .toolbar-actions-right .btn {
        padding: 5px 8px;
        font-size: 12px;
    }

    .file-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)) !important;
        gap: 4px !important;
    }

    .file-grid-name {
        font-size: 0.75em;
    }

    .view-mode-buttons {
        gap: 2px;
    }

}

/* ---------- Select All Checkbox ---------- */
.col-checkbox { width: 36px; text-align: center; }
.file-checkbox { text-align: center; width: 36px; }
.file-checkbox input[type="checkbox"] { cursor: pointer; }

/* ---------- Column Visibility Menu ---------- */
.column-menu {
    position: fixed;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    padding: 6px 0;
    min-width: 160px;
    z-index: 500;
}
.column-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    font-size: 13px;
    cursor: pointer;
    color: var(--text-primary);
    white-space: nowrap;
}
.column-menu-item:hover {
    background: var(--bg-secondary);
}
.column-menu-item input[type="checkbox"] {
    margin: 0;
}

/* ---------- Additional Column Styles ---------- */
.col-type { width: 80px; }
.col-created { width: 160px; }
.col-accessed { width: 160px; }
.file-type, .file-created, .file-accessed {
    color: var(--text-secondary);
    font-size: 12px;
}

/* Xunlei SVG icon — inline mask so it inherits currentColor */
.icon-xunlei {
    display: inline-block;
    width: 1em;
    height: 1em;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 643 611'%3E%3Cpath d='M603.268 0C604.738 0 606.381.738 604.931 4.601c0 0-51.016 71.39-79.52 129.542-.01.027-1.192 3.084 2.567 1.723 0 0 7.221-2.071 14.537-3.456 0 0 5.271-1.008 1.706 4.319-.133.173-48.061 62.506-86.385 132.402.86-.093 1.724-.184 2.596-.274.095.014 106.339 15.564 180.409 63.04 0 0 4.272 4.319-2.567 5.182-.205.027-156.594 20.224-258.844 55.717 12.629 26.535 26.027 55.692 40.226 87.769 18.867 36.672 40.287 81.635 57.022 125.953 0 0 1.025 7.768-5.987 1.726-.033-.042-71.023-88.534-171.859-148.54-19.129-11.375-163.819-56.58-165.877-186.528-.4-25.488 13.256-69.088 1.711-90.679-.029-.093-6.91-22.078-40.189-50.087-.137-.092-32.314-21.639-84.642-45.768 0 0-5.559-2.733-9.405-4.316-.014-.029-1.952-4.211 2.563-3.455.126.037 81.569 23.972 111.154 34.541 0 0 6.329 2.071 12.827-.863.116-.048 45.08-18.522 84.646 14.682l.028.035c4.452 2.322 20.559 12.862 50.15 54.328.414-.345.869-.641 1.286-.977.982-.817 2.018-1.601 3.094-2.356 1.34-1.003 2.663-2.016 4.046-2.959 13.62-11.791 135.437-114.048 331.286-175.02 0 0 .846-.282 1.758-.282Z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 643 611'%3E%3Cpath d='M603.268 0C604.738 0 606.381.738 604.931 4.601c0 0-51.016 71.39-79.52 129.542-.01.027-1.192 3.084 2.567 1.723 0 0 7.221-2.071 14.537-3.456 0 0 5.271-1.008 1.706 4.319-.133.173-48.061 62.506-86.385 132.402.86-.093 1.724-.184 2.596-.274.095.014 106.339 15.564 180.409 63.04 0 0 4.272 4.319-2.567 5.182-.205.027-156.594 20.224-258.844 55.717 12.629 26.535 26.027 55.692 40.226 87.769 18.867 36.672 40.287 81.635 57.022 125.953 0 0 1.025 7.768-5.987 1.726-.033-.042-71.023-88.534-171.859-148.54-19.129-11.375-163.819-56.58-165.877-186.528-.4-25.488 13.256-69.088 1.711-90.679-.029-.093-6.91-22.078-40.189-50.087-.137-.092-32.314-21.639-84.642-45.768 0 0-5.559-2.733-9.405-4.316-.014-.029-1.952-4.211 2.563-3.455.126.037 81.569 23.972 111.154 34.541 0 0 6.329 2.071 12.827-.863.116-.048 45.08-18.522 84.646 14.682l.028.035c4.452 2.322 20.559 12.862 50.15 54.328.414-.345.869-.641 1.286-.977.982-.817 2.018-1.601 3.094-2.356 1.34-1.003 2.663-2.016 4.046-2.959 13.62-11.791 135.437-114.048 331.286-175.02 0 0 .846-.282 1.758-.282Z'/%3E%3C/svg%3E") no-repeat center / contain;
    vertical-align: -0.125em;
}

/* ---------- Cloud Provider Icons ---------- */
.cloud-icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
}
.cloud-icon-sm {
    width: 24px;
    height: 24px;
    object-fit: contain;
    vertical-align: middle;
}

/* ---------- Page Jump Input ---------- */
.page-jump-input {
    width: 48px;
    padding: 2px 4px;
    font-size: 11px;
    text-align: center;
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    background: var(--bg-primary);
    color: var(--text-primary);
    outline: none;
}
.page-jump-input:focus {
    border-color: var(--primary);
}
/* Hide number input spinners */
.page-jump-input::-webkit-outer-spin-button,
.page-jump-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.page-jump-input[type=number] {
    -moz-appearance: textfield;
}

/* ---------- Upload Dropdown ---------- */
.upload-dropdown {
    display: inline-flex;
    gap: 0;
}
.upload-dropdown .btn:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}
.upload-folder-btn {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
}

/* ---------- Play Folder Dropdown ---------- */
.play-folder-dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    min-width: 160px;
    z-index: 500;
    padding: 4px 0;
}
.dropdown-menu.show { display: block; }
.dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    font-size: 13px;
    color: var(--text-primary);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.dropdown-item:hover {
    background: var(--bg-secondary);
    text-decoration: none;
}
.dropdown-item i { width: 16px; text-align: center; color: var(--text-secondary); }

/* ---------- Search Enhancements ---------- */
.search-fuzzy {
    white-space: nowrap;
    font-size: 12px;
}
.search-path {
    font-size: 12px;
    color: var(--text-secondary);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ---------- Panel Splitter ---------- */
.panel-splitter {
    width: 4px;
    cursor: col-resize;
    background: var(--border);
    flex-shrink: 0;
    transition: background 0.15s;
}
.panel-splitter:hover {
    background: var(--primary);
}

/* ---------- Files Content Area ---------- */
.files-content-area {
    flex: 1;
    display: flex;
    overflow: hidden;
    min-height: 0;
}

/* ---------- Drag Target Highlight ---------- */
.file-grid-item.drag-target,
.wf-item.drag-target {
    outline: 2px dashed var(--primary);
    outline-offset: -2px;
    background: var(--primary-light);
}
.file-row.drag-target {
    background: var(--primary-light);
    outline: 2px dashed var(--primary);
    outline-offset: -2px;
}
.tree-node-row.drag-target {
    background: var(--primary-light);
    outline: 2px dashed var(--primary);
    outline-offset: -2px;
}

/* ---------- Ellipsis Menu Button ---------- */
.item-ellipsis {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 2;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0,0,0,0.05);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 12px;
    border: none;
    padding: 0;
}
.item-ellipsis:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* ---------- Checkbox Overlay (Select Mode) ---------- */
.item-checkbox {
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 2;
}
.item-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--primary);
}

/* Hide ellipsis by default and reveal on hover — only for hover-capable devices.
   On touch-only devices (iOS/Android), ellipsis stays visible and no :hover trap occurs. */
@media (hover: hover) {
    .item-ellipsis {
        opacity: 0;
        transition: opacity 0.15s;
    }
    .file-grid-item:hover .item-ellipsis,
    .wf-item:hover .item-ellipsis { opacity: 1; }
    .file-name-ellipsis {
        opacity: 0;
        transition: opacity 0.15s;
    }
    .file-row:hover .file-name-ellipsis { opacity: 1; }
}

/* ---------- Encryption Overlay ---------- */
.encryption-overlay {
    position: absolute;
    top: 0.35rem;
    left: 0.35rem;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    z-index: 10;
    pointer-events: none;
}
/* List view: small badge overlaid on bottom-right of icon */
.file-icon .encryption-overlay {
    position: absolute;
    bottom: -2px;
    right: -2px;
    top: auto;
    left: auto;
    width: 14px;
    height: 14px;
    font-size: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════════
   Offline Download Manager
   ═══════════════════════════════════════════════════════════════ */

.offline-manager-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
}

.offline-manager-modal {
    background: var(--bg-secondary, #1e1e2e);
    border: 1px solid var(--border-color, rgba(255,255,255,0.1));
    border-radius: 12px;
    width: min(900px, 96vw);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0,0,0,0.6);
}

/* ── Header ─────────────────────────────────────────────────── */
.offline-manager-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.1));
    flex-shrink: 0;
}

.offline-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    color: var(--text-primary, #e2e8f0);
}

.offline-header-title {
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
}

.offline-header-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.offline-header-btn {
    padding: 5px 8px !important;
    background: transparent !important;
    border: 1px solid var(--border-color, rgba(255,255,255,0.15)) !important;
    color: var(--text-secondary, rgba(255,255,255,0.7)) !important;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: background 0.15s, color 0.15s;
}
.offline-header-btn:hover {
    background: rgba(255,255,255,0.08) !important;
    color: var(--text-primary, #e2e8f0) !important;
}
.offline-btn-danger:hover {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239,68,68,0.4) !important;
    color: #ef4444 !important;
}

/* ── Quota widget ────────────────────────────────────────────── */
.offline-quota {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--text-secondary, rgba(255,255,255,0.6));
}

.offline-quota-bar {
    width: 80px;
    height: 5px;
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
    overflow: hidden;
}

.offline-quota-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s;
}

/* ── Clear dropdown ──────────────────────────────────────────── */
.offline-clear-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: var(--bg-primary, #16161e);
    border: 1px solid var(--border-color, rgba(255,255,255,0.12));
    border-radius: 8px;
    padding: 4px 0;
    min-width: 150px;
    z-index: 10;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.offline-clear-item {
    padding: 8px 14px;
    font-size: 0.85rem;
    color: var(--text-secondary, rgba(255,255,255,0.75));
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.offline-clear-item:hover {
    background: rgba(255,255,255,0.07);
    color: var(--text-primary, #e2e8f0);
}

/* ── Body / empty ────────────────────────────────────────────── */
.offline-manager-body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.offline-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 20px;
    color: var(--text-secondary, rgba(255,255,255,0.4));
    font-size: 0.9rem;
}

/* ── Table ───────────────────────────────────────────────────── */
.offline-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    color: var(--text-primary, #e2e8f0);
}

.offline-table thead tr {
    border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.08));
}

.offline-table th {
    padding: 8px 10px;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-secondary, rgba(255,255,255,0.5));
    white-space: nowrap;
}

.offline-row {
    border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.05));
    transition: background 0.12s;
}
.offline-row:hover { background: rgba(255,255,255,0.04); }
.offline-row:last-child { border-bottom: none; }

.offline-table td {
    padding: 8px 10px;
    vertical-align: middle;
}

.offline-col-check  { width: 36px; text-align: center; }
.offline-col-name   { min-width: 160px; max-width: 260px; }
.offline-col-size   { width: 90px; white-space: nowrap; }
.offline-col-status { width: 130px; }
.offline-col-progress { width: 140px; }
.offline-col-added  { width: 130px; white-space: nowrap; font-size: 0.78rem; color: var(--text-secondary, rgba(255,255,255,0.5)); }
.offline-col-actions { width: 96px; white-space: nowrap; }

.offline-file-name {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Status badges ───────────────────────────────────────────── */
.offline-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 20px;
}
.offline-status-queued     { background: rgba(148,163,184,0.15); color: #94a3b8; }
.offline-status-downloading{ background: rgba(59,130,246,0.15);  color: #60a5fa; }
.offline-status-completed  { background: rgba(34,197,94,0.15);   color: #4ade80; }
.offline-status-error      { background: rgba(239,68,68,0.15);   color: #f87171; }

/* ── Progress bar ────────────────────────────────────────────── */
.offline-progress-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}

.offline-progress-bar {
    flex: 1;
    height: 5px;
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
    overflow: hidden;
}

.offline-progress-fill {
    height: 100%;
    background: #3b82f6;
    border-radius: 3px;
    transition: width 0.4s ease;
}

.offline-progress-pct {
    font-size: 0.72rem;
    color: var(--text-secondary, rgba(255,255,255,0.5));
    white-space: nowrap;
    min-width: 32px;
}

/* ── Row action buttons ──────────────────────────────────────── */
.offline-action-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 5px;
    color: var(--text-secondary, rgba(255,255,255,0.5));
    font-size: 0.8rem;
    transition: background 0.12s, color 0.12s;
}
.offline-action-btn:hover {
    background: rgba(255,255,255,0.08);
    color: var(--text-primary, #e2e8f0);
}
.offline-action-btn.offline-btn-danger:hover {
    background: rgba(239,68,68,0.12);
    color: #ef4444;
}

/* ── Pagination ──────────────────────────────────────────────── */
.offline-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 16px;
    border-top: 1px solid var(--border-color, rgba(255,255,255,0.08));
    flex-shrink: 0;
}

.offline-page-info {
    font-size: 0.82rem;
    white-space: nowrap;
    color: var(--text-secondary, rgba(255,255,255,0.5));
}

/* ── Confirm dialog ──────────────────────────────────────────── */
.offline-confirm-backdrop {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}

.offline-confirm-dialog {
    background: var(--bg-secondary, #1e1e2e);
    border: 1px solid var(--border-color, rgba(255,255,255,0.12));
    border-radius: 10px;
    padding: 24px;
    width: min(380px, 90%);
    box-shadow: 0 16px 48px rgba(0,0,0,0.5);
}

.offline-confirm-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #e2e8f0);
    margin-bottom: 8px;
}

.offline-confirm-msg {
    font-size: 0.88rem;
    color: var(--text-secondary, rgba(255,255,255,0.65));
    margin-bottom: 16px;
    line-height: 1.5;
}

.offline-confirm-opt {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--text-secondary, rgba(255,255,255,0.7));
    margin-bottom: 16px;
    cursor: pointer;
    user-select: none;
}

.offline-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Mobile: stack columns, hide some */
@media (max-width: 600px) {
    .offline-col-added,
    .offline-col-progress { display: none; }
    .offline-manager-modal { max-height: 90vh; }
}

/* ── Add Offline Dialog — option checkboxes ──────────────────── */
.offline-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}
.offline-option-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    cursor: pointer;
    padding: 4px 2px;
    border-radius: 4px;
}
.offline-option-row:hover { background: rgba(255,255,255,0.04); }
.offline-option-row input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; }
.offline-option-label {
    font-size: 0.88rem;
    color: var(--text-primary, #e2e8f0);
}
.offline-option-help {
    font-size: 0.78rem;
    color: var(--text-secondary, rgba(255,255,255,0.45));
    flex-basis: 100%;
    padding-left: 20px;
    line-height: 1.3;
}

/* ── Add Offline Dialog — error / success banners ────────────── */
.offline-dialog-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    margin-top: 4px;
}
.offline-dialog-error {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.25);
}
.offline-dialog-success {
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.25);
}

/* ── Add Offline Dialog — quota row ──────────────────────────── */
.offline-quota-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0 2px;
}
.offline-quota-label {
    font-size: 0.82rem;
    color: var(--text-secondary, rgba(255,255,255,0.5));
    flex-shrink: 0;
}
.offline-quota-nums {
    font-size: 0.80rem;
    color: var(--text-secondary, rgba(255,255,255,0.5));
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Add Offline Dialog — file upload row ────────────────────── */
.offline-file-upload-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.offline-upload-btn {
    display: inline-flex;
    align-items: center;
    font-size: 0.82rem;
    padding: 4px 10px;
    border-radius: 4px;
    white-space: nowrap;
}
.offline-upload-btn:hover { opacity: 0.85; }

/* ── Order Summary & Payment ──────────────────────────── */
.order-summary-divider { border-top: 1px solid var(--border-color, var(--border)); margin: 8px 0; }
.info-row.total-row .info-label { font-weight: 600; }
.info-row.total-row .info-value { font-weight: 700; font-size: 1.1em; color: var(--primary); }
.payment-methods { text-align: center; padding: 16px 0; }
.payment-methods h4 { margin-bottom: 16px; }
.btn-alipay { background: #1677ff; color: #fff; border: none; padding: 10px 24px; font-size: 1em; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.btn-alipay:hover { background: #0958d9; }
.btn-alipay i { font-size: 1.2em; }
.payment-note { font-size: 0.85em; margin-top: 8px; color: var(--text-muted); }

/* ── Logout Confirmation ─────────────────────────────── */
.logout-options { display: flex; flex-direction: column; gap: 8px; }
.logout-option { padding: 12px; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; transition: border-color var(--transition), background var(--transition); }
.logout-option:hover { background: var(--bg-secondary); }
.logout-option.selected { border-color: var(--primary); background: var(--primary-light); }
.logout-option input[type="radio"] { margin-right: 4px; accent-color: var(--primary); }
.logout-option p { margin: 4px 0 0 24px; font-size: 0.85em; }

/* ── Third-party Login ──────────────────────────────── */
.login-divider { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--text-secondary); font-size: 13px; }
.login-divider::before, .login-divider::after { content: ''; flex: 1; border-top: 1px solid var(--border); }
.third-party-login { display: flex; justify-content: center; gap: 12px; }
.cloud-icon-btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.cloud-icon-btn:hover { border-color: var(--primary); background: var(--bg-tertiary); }
.cloud-icon-btn img { width: 28px; height: 28px; }

/* ============================================================
   Accessibility
   ============================================================ */

/* Global focus-visible indicators */
button:focus-visible, .btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex="0"]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.header-btn:focus-visible, .viewer-btn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 2px;
}

/* Fix outline:none inputs — provide focus replacement */
.breadcrumb-path-input:focus { box-shadow: 0 0 0 2px var(--primary); }
.upload-filters .search-box:focus-within { box-shadow: 0 0 0 2px var(--primary); }

/* PWA standalone mode — safe area insets for iOS status bar */
@media (display-mode: standalone) {
    .app-container {
        padding-top: env(safe-area-inset-top, 0px);
    }
    .viewer-toolbar {
        padding-top: env(safe-area-inset-top, 0px);
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}