/* css/ios.css — Giao diện iOS 18, áp dụng cho TOÀN BỘ người dùng.
 *
 * Thay thế css/liquid-glass.css (bản "Liquid Glass" chỉ dành cho gói Ultra với
 * class `ac-ultra` trên <html>). Từ bản này KHÔNG còn class bật giao diện và không
 * còn phân biệt theo gói: mọi tài khoản — kể cả khách xem trang chia sẻ công khai —
 * đều dùng chung một giao diện. Chỉ còn `dark` trên <html> như trước (chế độ
 * sáng/tối do tab Cài đặt và js/bootstrap.js quyết định).
 *
 * VÌ SAO ĐỔI: hiệu năng. Bản kính cũ dựng hàng chục lớp `backdrop-filter` (mỗi lớp
 * là một layer GPU phải đọc lại phần nền phía sau), một lớp nhiễu SVG feTurbulence
 * phủ toàn màn hình kèm `mix-blend-mode`, một hình nền aurora chuyển động 38 giây
 * với `will-change: transform`, và hiệu ứng `scale`/`translateY` khi nhấn/hover trên
 * mọi nút và mọi thẻ. File này chỉ còn:
 *   - blur CHỈ ở các lớp nổi, đúng chất liệu "material" của iOS: 2 thanh cố định
 *     (thanh tab đáy, thanh chọn nhiều mục) và 2 lớp tạm thời chỉ tồn tại lúc đang mở
 *     (menu chuột phải, tấm modal — mục 8). Tất cả bán trong suốt; "Giảm độ trong
 *     suốt" ở tab Cài đặt đưa chúng về nền đặc (cuối mục 10);
 *   - nền phẳng (systemGroupedBackground) và thẻ đặc, không blur, không animation
 *     nền, không noise, không transform khi nhấn (chỉ đổi màu).
 *
 * Nguyên tắc của file này:
 *   - KHÔNG sửa markup/Tailwind của app. Toàn bộ giao diện được tái tạo lại bằng
 *     "chất liệu" (màu hệ thống, bo góc, đường kẻ hairline, bóng) trong phạm vi
 *     toàn trang, kể cả các khối do JS dựng (danh sách file, card, modal...).
 *   - Dùng !important vì Tailwind Play CDN chèn stylesheet vào <head> lúc chạy
 *     (thường nằm SAU file này), nếu không có !important thì utility của Tailwind
 *     sẽ thắng khi độ ưu tiên bằng nhau.
 *   - KHÔNG đặt filter/backdrop-filter/transform lên <html>, <body> hay #mainContent:
 *     những thuộc tính đó biến phần tử thành containing block của position: fixed,
 *     sẽ làm các modal toàn màn hình (fixed inset-0) bị lệch/hỏng.
 *   - Màu nhấn, bề mặt, đường kẻ... lấy đúng bảng màu hệ thống của iOS 18
 *     (systemBlue, systemGroupedBackground, separator, systemFill...), không dùng
 *     bảng màu gray-* mặc định của Tailwind.
 *
 * Tinh chỉnh nhanh: mục 1 (token) — đổi --ac-blue là đổi màu nhấn toàn app; đổi
 * --ac-r-* là đổi độ bo góc; --ac-bg / --ac-surface là đổi nền trang và nền thẻ.
 */

/* =========================================================================
   1. TOKEN (đổi ở đây là đổi cả giao diện) — bảng màu hệ thống iOS
   ========================================================================= */
:root {
    /* Màu nhấn + màu ngữ nghĩa.
       - --ac-blue: systemBlue, dùng cho icon/nhãn/viền focus (đặt TRÊN nền sáng nên
         không cần tương phản với chữ trắng).
       - --ac-blue-fill / --ac-red-fill: bản đậm hơn một chút của systemBlue/systemRed,
         dùng làm NỀN nút đặc có chữ trắng: giữ đúng sắc iOS nhưng đạt tương phản AA
         (systemBlue #007AFF với chữ trắng chỉ đạt 4.0; #0071E3 đạt 4.7). */
    --ac-blue: #007aff;
    --ac-blue-fill: #0071e3;
    --ac-blue-fill-hover: #0069d4;
    --ac-blue-fill-press: #0062cc;
    /* Màu nhấn trên thanh material (nhãn tab đang mở): bản sáng hơn/đậm hơn một chút
       để nhãn 12px đạt tương phản AA trên nền thanh. */
    --ac-blue-on-bar: #0071e3;
    --ac-green: #34c759;
    --ac-red-fill: #d70015;

    /* Bề mặt */
    --ac-bg: #f2f2f7;               /* systemGroupedBackground */
    --ac-surface: #ffffff;          /* thẻ, header, modal */
    /* Ba token "trong suốt": thanh cố định, menu chuột phải, tấm modal. Có blur đi
       kèm (mục 7, 8) nên nền phía sau mờ đi thay vì lộ chữ. Tùy chọn "Giảm độ trong
       suốt" (tab Cài đặt) và prefers-reduced-transparency đổi cả ba về nền đặc ở
       cuối mục 10 — chỉ cần ghi đè token, không phải sửa từng rule. */
    --ac-material: rgba(249, 249, 249, 0.5);    /* chất liệu thanh cố định */
    --ac-menu: rgba(250, 250, 252, 0.62);       /* menu chuột phải */
    --ac-sheet: rgba(255, 255, 255, 0.68);      /* tấm modal */
    /* Nền càng trong suốt càng cần blur mạnh + tăng bão hòa để chữ phía sau không
       lẫn vào nhãn; saturate cũng giữ màu ảnh phía sau khỏi bị xỉn khi blur. */
    --ac-blur: blur(28px) saturate(1.8);

    /* Nhãn + đường kẻ. Chế độ sáng dùng "secondaryLabel" của iOS nhưng đậm hơn bản
       gốc (0.6) một chút để nhãn tab 12px đạt tương phản AA trên nền thanh sáng;
       chế độ tối giữ nguyên 0.6 vì trên nền đen đã dư tương phản. */
    --ac-label: #000000;
    --ac-label-2: rgba(60, 60, 67, 0.78);
    --ac-separator: rgba(60, 60, 67, 0.13);

    /* Lớp phủ — tương đương systemFill / secondarySystemFill của iOS */
    --ac-fill-1: rgba(120, 120, 128, 0.08);
    --ac-fill-2: rgba(120, 120, 128, 0.12);
    --ac-fill-3: rgba(120, 120, 128, 0.18);

    /* Bo góc liên tục (continuous) của iOS */
    --ac-r-control: 12px;   /* nút, ô nhập, select */
    --ac-r-card: 18px;      /* thẻ, header, khung danh sách */
    --ac-r-menu: 14px;      /* menu ngữ cảnh */
    --ac-r-sheet: 24px;     /* modal */

    --ac-shadow-card: 0 1px 2px rgba(9, 16, 34, 0.06);
    --ac-shadow-menu: 0 14px 34px -10px rgba(9, 16, 34, 0.28), 0 2px 8px rgba(9, 16, 34, 0.1);
    --ac-shadow-sheet: 0 26px 60px -22px rgba(9, 16, 34, 0.4);

    /* Chiều cao thanh tab đáy: js/plan.js đo thật rồi ghi đè biến này lên <html>
       (nhãn tab xuống dòng ở màn hình hẹp / ngôn ngữ khác nên không hard-code được). */
    --ac-nav-h: 4.5rem;

    color-scheme: light;
}

html.dark {
    --ac-blue: #0a84ff;
    --ac-blue-fill: #0b6fe0;
    --ac-blue-fill-hover: #0a63cc;
    --ac-blue-fill-press: #0a5cbf;
    --ac-blue-on-bar: #409cff;
    --ac-green: #30d158;
    --ac-red-fill: #e0301f;

    --ac-bg: #000000;
    --ac-surface: #1c1c1e;          /* secondarySystemBackground */
    --ac-material: rgba(28, 28, 30, 0.5);
    --ac-menu: rgba(44, 44, 46, 0.62);
    --ac-sheet: rgba(28, 28, 30, 0.68);

    --ac-label: #ffffff;
    --ac-label-2: rgba(235, 235, 245, 0.6);
    --ac-separator: rgba(84, 84, 88, 0.6);

    --ac-fill-1: rgba(120, 120, 128, 0.16);
    --ac-fill-2: rgba(120, 120, 128, 0.24);
    --ac-fill-3: rgba(120, 120, 128, 0.32);

    --ac-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5);
    --ac-shadow-menu: 0 14px 34px -10px rgba(0, 0, 0, 0.7), 0 2px 8px rgba(0, 0, 0, 0.4);
    --ac-shadow-sheet: 0 26px 60px -22px rgba(0, 0, 0, 0.8);

    color-scheme: dark;
}

/* =========================================================================
   2. NỀN TRANG (phẳng — không aurora, không noise, cuộn trang không vẽ lại nền)
   ========================================================================= */
html {
    background-color: var(--ac-bg) !important; /* vùng overscroll của Safari/iOS */
}

body,
body:is(.bg-gray-50, .bg-gray-100, .dark\:bg-gray-900) {
    background-color: var(--ac-bg) !important;
    background-image: none !important;
    /* Chạm trên mobile không loé xanh: đã có phản hồi khi nhấn ở mục 5. */
    -webkit-tap-highlight-color: transparent;
}

/* Chừa chỗ cho thanh tab đáy: chiều cao thật (--ac-nav-h) + vùng an toàn + khoảng thở */
body {
    padding-bottom: calc(var(--ac-nav-h) + env(safe-area-inset-bottom) + 1.25rem) !important;
}

/* Thanh cuộn: chế độ tối cần màu riêng (styles.css chỉ định nghĩa bản sáng) */
html.dark ::-webkit-scrollbar-track { background: #1c1c1e; }
html.dark ::-webkit-scrollbar-thumb { background: #48484a; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #5a5a5e; }
html.dark { scrollbar-color: #48484a #1c1c1e; }

/* =========================================================================
   3. BỀ MẶT: thẻ, khung, vùng chìm
   ========================================================================= */
/* 3a. Bề mặt "trắng" của app (thẻ, header, toolbar, modal, ô nhập...) → nền thẻ.
   Ô nhập/select/textarea được LOẠI TRỪ để nhận "chất liệu" riêng ở mục 5f (nếu
   không, ô nhập nằm trong modal sẽ cùng màu với tấm modal và biến mất). */
html :is(.bg-white, .dark\:bg-gray-800):not(input):not(select):not(textarea) {
    background-color: var(--ac-surface) !important;
    background-image: none !important;
}

/* 3b. Nền xám nhạt (vùng chìm trong thẻ, thanh trượt, ô chọn) → lớp phủ.
   Hai loại phần tử được LOẠI TRỪ có chủ đích:
     - :not(body) — <body> cũng mang class bg-gray-50/dark:bg-gray-900, nếu không loại
       trừ thì nền trang bị phủ thêm một lớp xám (nền trang đã đặt ở mục 2);
     - ô nhập/nút/nhãn — chúng có "chất liệu" riêng ở mục 5 (lớp phủ đậm hơn cho nút,
       xem 5c) và ở mục 5f (ô nhập). */
html:not(.dark) :is(
    .bg-gray-50,
    .bg-gray-100,
    [class*="bg-gray-50/"],
    [class*="bg-gray-100/"]
):not(:is(body, input, select, textarea, button, a, label)) {
    background-color: var(--ac-fill-1) !important;
}
html.dark :is(
    .dark\:bg-gray-700,
    .dark\:bg-gray-600,
    [class*="bg-gray-800/"],
    [class*="bg-gray-700/"],
    [class*="bg-gray-600/"]
):not(:is(input, select, textarea, button, a, label)) {
    background-color: var(--ac-fill-2) !important;
}

/* 3c. Nền xám đậm hơn (khối đang chọn, hover của đoạn trong segmented control) */
html :is(.bg-gray-200, .bg-gray-300):not(:is(button, a, label)) {
    background-color: var(--ac-fill-2) !important;
}

/* 3d. Header + khung danh sách: thẻ đặc, bo góc liên tục, bỏ viền (thẻ nổi khỏi nền
   bằng độ tương phản, đúng cách iOS phân tầng).
   Header nằm trong nhóm thanh trên cố định (#stickyTop — xem mục 7b). */
html #stickyTop > header {
    padding: 1rem !important;
    border-color: transparent !important;
    border-radius: var(--ac-r-card) !important;
    box-shadow: var(--ac-shadow-card) !important;
}
/* Thanh công cụ và khung danh sách là HAI nửa của cùng một thẻ: bo góc trên/dưới,
   đường kẻ hairline ở giữa (thanh tìm kiếm ảnh / thanh thùng rác nằm giữa nên để
   vuông góc, không bo). */
#filesToolbar {
    border-top-left-radius: var(--ac-r-card) !important;
    border-top-right-radius: var(--ac-r-card) !important;
    border-bottom-color: var(--ac-separator) !important;
    box-shadow: none !important;
}
#filesPanel {
    border-bottom-left-radius: var(--ac-r-card) !important;
    border-bottom-right-radius: var(--ac-r-card) !important;
    box-shadow: var(--ac-shadow-card) !important;
}
html :is(#imageSearchBar, #trashToolbar) {
    border-bottom-color: var(--ac-separator) !important;
}
html :is(#loadMoreContainer, #noMoreData) { border-top-color: var(--ac-separator) !important; }

/* 3e. Banner (thông tin chia sẻ, file chia sẻ từ Android): thẻ pha màu + bo góc vừa */
html :is(#sharedNotice, #shareImportBar) {
    border-radius: var(--ac-r-menu) !important;
    border-color: transparent !important;
}

/* 3f. Card do JS dựng trong tab Dung lượng / Cài đặt / modal chọn gói */
html #fileList li > div.rounded-xl.border,
html #planGrid > div {
    border-radius: var(--ac-r-card) !important;
    border-color: var(--ac-separator) !important;
    box-shadow: none !important;
}
/* Gói đang dùng: viền ngoài màu lục hệ thống thay cho viền emerald của Tailwind */
html #planGrid > div.ring-2 {
    box-shadow: 0 0 0 2px var(--ac-green) !important;
    border-color: transparent !important;
}

/* =========================================================================
   4. BỀ MẶT MANG MÀU THÔNG TIN (kính pha màu → lớp phủ màu hệ thống)
   ========================================================================= */
/* — Chế độ sáng — */
html:not(.dark) :is(
    .bg-blue-50, .bg-blue-100, .bg-blue-200,
    .dark\:bg-blue-900, .dark\:bg-blue-900\/60, .dark\:bg-blue-900\/70, .dark\:bg-blue-800
) {
    background-color: rgba(0, 122, 255, 0.12) !important;
}
html:not(.dark) :is(
    .bg-green-50, .bg-green-100, .bg-emerald-50, .bg-emerald-100,
    .dark\:bg-green-900\/40, .dark\:bg-emerald-900\/50, .dark\:bg-emerald-900\/70
) {
    background-color: rgba(52, 199, 89, 0.14) !important;
}
html:not(.dark) :is(
    .bg-amber-50, .bg-amber-100,
    .dark\:bg-amber-900\/40, .dark\:bg-amber-900\/60
) {
    background-color: rgba(255, 149, 10, 0.14) !important;
}
html:not(.dark) :is(
    .bg-red-50, .bg-red-100, .dark\:bg-red-900, .dark\:bg-red-900\/40
) {
    background-color: rgba(255, 59, 48, 0.12) !important;
}
/* — Chế độ tối — */
html.dark :is(
    .bg-blue-50, .bg-blue-100, .bg-blue-200,
    .dark\:bg-blue-900, .dark\:bg-blue-900\/60, .dark\:bg-blue-900\/70, .dark\:bg-blue-800
) {
    background-color: rgba(10, 132, 255, 0.22) !important;
}
html.dark :is(
    .bg-green-50, .bg-green-100, .bg-emerald-50, .bg-emerald-100,
    .dark\:bg-green-900\/40, .dark\:bg-emerald-900\/50, .dark\:bg-emerald-900\/70
) {
    background-color: rgba(48, 209, 88, 0.22) !important;
}
html.dark :is(
    .bg-amber-50, .bg-amber-100,
    .dark\:bg-amber-900\/40, .dark\:bg-amber-900\/60
) {
    background-color: rgba(255, 159, 10, 0.22) !important;
}
html.dark :is(
    .bg-red-50, .bg-red-100, .dark\:bg-red-900, .dark\:bg-red-900\/40
) {
    background-color: rgba(255, 69, 58, 0.22) !important;
}

/* =========================================================================
   5. ĐIỀU KHIỂN: NÚT, Ô NHẬP, Ô CHỌN
   ========================================================================= */
/* 5a. Phản hồi khi nhấn: iOS làm tối nút ngay lập tức (không transition, không
   scale/transform nên không tạo layer mới). */
html :is(button, a, label):active { filter: brightness(0.9); }
html :is(button, label)[disabled]:active { filter: none; }
html :is(button, label)[disabled] { opacity: 0.45 !important; }
/* Vòng focus nhìn thấy rõ (Tailwind đang đặt focus:outline-none cho nhiều nút) */
html :is(button, a, label):focus-visible {
    outline: 2px solid var(--ac-blue) !important;
    outline-offset: 2px;
}

/* Lưu ý chung cho mục 5: chỉ đổi `border-color` (KHÔNG đặt lại `border`) để không
   làm nút/ô nhập cao-rộng thêm vài px — vài px đó đủ làm hàng nút ở header tràn ra
   ngoài màn hình ở các bề rộng trung bình (khoảng 780px). */

/* 5b. Nút hành động chính → nút đặc màu systemBlue. Bo góc chữ nhật liên tục
   (không bo viên thuốc: đó là dáng của bản Liquid Glass cũ). */
html :is(button, a, label):is(
    .bg-blue-600, .bg-blue-700, .dark\:bg-blue-700, .dark\:bg-blue-800, .bg-blue-500
) {
    background-color: var(--ac-blue-fill) !important;
    background-image: none !important;
    border-color: transparent !important;
    border-radius: var(--ac-r-control) !important;
    box-shadow: none !important;
    color: #fff !important;
}
html :is(button, a, label):is(
    .bg-blue-600, .bg-blue-700, .dark\:bg-blue-700, .dark\:bg-blue-800, .bg-blue-500
):hover {
    background-color: var(--ac-blue-fill-hover) !important;
}
html :is(button, a, label):is(
    .bg-blue-600, .bg-blue-700, .dark\:bg-blue-700, .dark\:bg-blue-800, .bg-blue-500
):active {
    background-color: var(--ac-blue-fill-press) !important;
}

/* 5c. Nút phụ (xám) → lớp phủ xám hệ thống (secondarySystemFill) */
html :is(button, a, label):is(
    .bg-gray-100, .bg-gray-200, .bg-gray-50,
    .dark\:bg-gray-700, .dark\:bg-gray-600, .bg-gray-700
) {
    background-color: var(--ac-fill-2) !important;
    background-image: none !important;
    border-color: transparent !important;
    border-radius: var(--ac-r-control) !important;
    box-shadow: none !important;
    color: var(--ac-label) !important;
}
html :is(button, a, label):is(
    .bg-gray-100, .bg-gray-200, .bg-gray-50,
    .dark\:bg-gray-700, .dark\:bg-gray-600, .bg-gray-700
):hover {
    background-color: var(--ac-fill-3) !important;
}

/* 5d. Nút phá huỷ → systemRed (bản đậm hơn cho đủ tương phản với chữ trắng) và nút
   nguy hiểm pha nền (bg-red-50...): chỉ đổi "chất liệu", GIỮ NGUYÊN màu chữ của
   Tailwind (text-red-600 / dark:text-red-400) vì nó đã đủ tương phản trên nền pha. */
html :is(button, a):is(.bg-red-600, .bg-red-700, .dark\:bg-red-700, .dark\:bg-red-800) {
    background-color: var(--ac-red-fill) !important;
    background-image: none !important;
    border-color: transparent !important;
    border-radius: var(--ac-r-control) !important;
    box-shadow: none !important;
    color: #fff !important;
}
html :is(button, a):is(.bg-red-600, .bg-red-700, .dark\:bg-red-700, .dark\:bg-red-800):hover {
    filter: brightness(0.94);
}
html :is(button, a):is(.bg-red-50, .bg-red-100, .dark\:bg-red-900) {
    border-color: transparent !important;
    border-radius: var(--ac-r-control) !important;
    box-shadow: none !important;
}
/* Nút pha nền đỏ ở chế độ sáng: text-red-600 của Tailwind chỉ đạt ~4.1 trên nền pha
   (đã dưới ngưỡng AA từ trước), nên dùng bản đỏ đậm hơn. Chế độ tối giữ
   dark:text-red-400 vì trên nền tối đã dư tương phản. */
html:not(.dark) :is(button, a):is(.bg-red-50, .bg-red-100, .dark\:bg-red-900) {
    color: var(--ac-red-fill) !important;
}

/* 5e. Nút/nhãn "đang dùng" (gói hiện tại) → nền pha lục; chữ giữ màu emerald của
   Tailwind (text-emerald-700 đạt tương phản AA trên nền pha, systemGreen thì không). */
html :is(button, a, label):is(.bg-emerald-50, .dark\:bg-emerald-900\/50) {
    border-color: transparent !important;
    border-radius: var(--ac-r-control) !important;
    box-shadow: none !important;
}

/* 5f. Ô nhập liệu / select → ô đặc màu lớp phủ, không viền, vòng focus xanh.
   Dùng :where() để nhóm selector này có độ ưu tiên thấp, nhường chỗ cho các tinh
   chỉnh riêng bên dưới (ô tìm kiếm ảnh). */
html :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    select,
    textarea
) {
    background-color: var(--ac-fill-2) !important;
    border-color: transparent !important;
    border-radius: var(--ac-r-control) !important;
    box-shadow: none !important;
    color: var(--ac-label) !important;
}
html :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    select,
    textarea
):focus {
    border-color: var(--ac-blue) !important;
    box-shadow: 0 0 0 3.5px rgba(0, 122, 255, 0.22) !important;
    outline: none;
}
html.dark :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    select,
    textarea
):focus {
    box-shadow: 0 0 0 3.5px rgba(10, 132, 255, 0.3) !important;
}

/* Ô tìm kiếm ảnh: giữ nguyên viền cầu vồng khi focus (dấu hiệu nhận biết của tính
   năng) — chỉ trả lại bo tròn hoàn toàn cho ô này (5f để bán kính 12px dùng chung). */
html .gemini-search-input {
    border-radius: 999px !important;
}
html .gemini-search-input:focus {
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.18) !important;
}

/* Ô đánh dấu chọn: màu nhấn hệ thống + bo góc mềm */
html .custom-checkbox {
    accent-color: var(--ac-blue);
    border-radius: 6px;
}

/* 5g. Nhóm chọn kiểu xem (Danh sách / Lưới) → segmented control của iOS: rãnh xám,
   đoạn đang chọn là viên trắng nổi lên. */
html #controlsBar > div {
    background-color: var(--ac-fill-2) !important;
    border-color: transparent !important;
    border-radius: 10px !important;
    padding: 2px !important;
}
html #controlsBar > div > button {
    background-color: transparent !important;
    background-image: none !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    color: var(--ac-label-2) !important;
}
html #controlsBar > div > button.bg-gray-200 {
    background-color: var(--ac-surface) !important;
    box-shadow: 0 1px 3px rgba(9, 16, 34, 0.16) !important;
    color: var(--ac-label) !important;
}
html.dark #controlsBar > div > button.bg-gray-200 {
    background-color: #636366 !important;
    color: #fff !important;
}
html #controlsBar > div > button:hover { color: var(--ac-label) !important; }

/* =========================================================================
   6. DANH SÁCH FILE / THƯ MỤC
   ========================================================================= */
/* 6a. Dạng danh sách: hàng phẳng, đường kẻ hairline, hover bằng lớp phủ rất nhẹ */
html #fileList.divide-y > li { border-top-color: var(--ac-separator) !important; }
html #fileList.divide-y > li:hover { background-color: var(--ac-fill-1) !important; }
/* Ảnh thu nhỏ + ô icon trong danh sách: bo góc mềm, viền hairline */
html #fileList.divide-y img,
html #fileList .w-12.h-12 {
    border-radius: 10px !important;
    border-color: var(--ac-separator) !important;
}

/* 6b. Dạng lưới: thẻ trắng bo góc lớn, viền hairline; hover chỉ đổi bóng (không
   nhấc thẻ bằng transform để không tạo layer mới khi cuộn) */
html #fileList > li:is(.bg-white, .dark\:bg-gray-800) {
    border-color: var(--ac-separator) !important;
    border-radius: var(--ac-r-card) !important;
    box-shadow: none !important;
}
html #fileList > li:is(.bg-white, .dark\:bg-gray-800):hover {
    background-color: var(--ac-surface) !important;
    box-shadow: var(--ac-shadow-card) !important;
}

/* Nút "..." trên mỗi dòng/thẻ → chỉ hiện thành viên xám khi trỏ vào (đỡ rối mắt).
   Bỏ backdrop-blur của Tailwind: nút nhỏ, blur không đáng có. */
html #fileList > li > button {
    border-color: transparent !important;
    border-radius: 999px !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    color: var(--ac-label-2) !important;
}
html #fileList > li:hover > button,
html #fileList > li > button:focus-visible {
    background-color: var(--ac-fill-2) !important;
    color: var(--ac-label) !important;
}

/* Nút "Tải thêm" trong khung danh sách → nút pha nền xanh của iOS (chữ giữ màu
   text-blue-600/dark:text-blue-400 của Tailwind cho đủ tương phản trên nền pha) */
html #btnLoadMore {
    background-color: rgba(0, 122, 255, 0.12) !important;
    border-color: transparent !important;
    border-radius: var(--ac-r-control) !important;
    box-shadow: none !important;
}
html.dark #btnLoadMore { background-color: rgba(10, 132, 255, 0.22) !important; }

/* =========================================================================
   7. THANH TAB ĐÁY + THANH CHỌN NHIỀU MỤC
   (blur của giao diện — tất cả đều là thanh CỐ ĐỊNH, xem thêm mục 7b)
   ========================================================================= */
html #bottomNav {
    background-color: var(--ac-material) !important;
    border-top-color: var(--ac-separator) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: var(--ac-blur);
    backdrop-filter: var(--ac-blur);
    /* Trượt xuống khi mở xem chi tiết media (mục 7b) */
    transition: transform 0.25s ease;
}
/* Tab đang mở: chỉ đổi màu icon + nhãn (dáng tab bar của iOS 18, không có "viên"
   nền như bản Liquid Glass). Dùng --ac-blue-on-bar để nhãn 12px đủ tương phản. */
html #bottomNav button.text-blue-600 { color: var(--ac-blue-on-bar) !important; }
html #bottomNav button:not(.text-blue-600) { color: var(--ac-label-2) !important; }
html #bottomNav button:not(.text-blue-600):hover { color: var(--ac-label) !important; }

/* Thanh chọn nhiều mục: tấm nổi ngay trên thanh tab, cùng chất liệu */
html #selectionBar {
    left: 0.75rem !important;
    right: 0.75rem !important;
    max-width: none !important;
    background-color: var(--ac-material) !important;
    border-color: var(--ac-separator) !important;
    border-radius: var(--ac-r-card) !important;
    box-shadow: var(--ac-shadow-menu) !important;
    -webkit-backdrop-filter: var(--ac-blur);
    backdrop-filter: var(--ac-blur);
}
/* Khi đang chọn, js/selection.js thêm class bottom-16. Vị trí tính theo chiều cao
   THẬT của thanh tab (--ac-nav-h do js/plan.js đo) nên không bị chồng lên thanh tab
   khi nhãn tab xuống dòng ở màn hình hẹp. */
html #selectionBar.bottom-16 {
    bottom: calc(var(--ac-nav-h) + env(safe-area-inset-bottom) + 0.6rem) !important;
}

/* =========================================================================
   7b. NHÓM THANH TRÊN CỐ ĐỊNH (#stickyTop: header → thanh tìm kiếm ảnh)
   ========================================================================= */
/* Mọi thứ nằm TRÊN khung danh sách (header, banner chia sẻ, thanh công cụ, thanh
   tìm kiếm ảnh, thanh Thùng rác) dính ở mép trên khi cuộn — thanh tab đáy vốn đã cố
   định sẵn (mục 7). Nhóm phải nằm trong MỘT phần tử sticky duy nhất: sticky từng
   phần tử riêng lẻ sẽ chồng lên nhau ở cùng `top` (không phần tử nào biết chiều cao
   của phần tử kia).
   - Nền ĐẶC màu nền trang: nhóm gồm nhiều thẻ rời nhau, chỉ dựng nền cho từng thẻ
     là không đủ — nội dung cuộn sẽ lộ qua khe giữa các thẻ.
   - padding-top: khi dính, header không dán sát mép màn hình (lúc chưa cuộn khoảng
     đệm 8px này cộng thêm vào padding của #mainContent — lệch không đáng kể).
   - z-index 30: trên nội dung trang (huy hiệu/checkbox trong danh sách mang z-10
     của Tailwind) nhưng dưới thanh chọn nhiều mục (40) và mọi modal (50 trở lên).
   Bản dưới áp dụng cho các tab KHÔNG có thanh tìm kiếm ("Đã chia sẻ", "Thùng rác",
   "Cài đặt"...); tab "Tệp của tôi"/"Bộ sưu tập" bị ghi đè ngay sau — xem đó. */
html #stickyTop {
    position: sticky !important;
    top: 0 !important;
    z-index: 30;
    background-color: var(--ac-bg) !important;
    padding-top: 0.5rem;
    /* Cho hiệu ứng trượt lên lúc mở #previewModal ngay dưới đây — vẫn hoạt động dù
       #stickyTop đang ở position: static (tab có thanh tìm kiếm): transform không
       phụ thuộc positioning scheme. */
    transition: transform 0.25s ease;
}

/* --- Tab "Tệp của tôi" / "Bộ sưu tập": không dính mép trên nữa ---
   Hai tab này có thanh tìm kiếm (#imageSearchBar) nên đổi hẳn kiểu cuộn: cả nhóm
   #stickyTop cuộn TỰ NHIÊN theo trang (không còn gì cố định phía trên dù cuộn lên
   hay xuống). Thay cho việc ghim thanh tìm kiếm khi cuộn xuống là nút tìm kiếm nổi
   #searchFab (css/styles.css, js/scroll-topbar.js) — hiện ra khi #imageSearchBar
   cuộn khỏi khung nhìn, bấm vào cuộn mượt về lại thanh và focus ô nhập.
   Class `ac-search-tab` do js/search.js (syncFileSearchBar) gắn/gỡ trên <body> mỗi
   khi đổi tab — cùng điều kiện hiện/ẩn #imageSearchBar nên luôn khớp nhau. */
html body.ac-search-tab #stickyTop {
    position: static !important;
}

/* Đang xem chi tiết ảnh/video (#previewModal — js/media-viewer.js gắn class
   `ac-media-open` lên <body>): nhường trọn màn hình cho media — thanh trên trượt
   lên, thanh tab đáy trượt xuống. z-index của #stickyTop thấp hơn modal nên kể cả
   khi chưa trượt xong thì media vẫn nằm trên. */
body.ac-media-open #stickyTop {
    transform: translateY(-100%);
    pointer-events: none;
}
body.ac-media-open #bottomNav {
    transform: translateY(100%);
    pointer-events: none;
}
/* Giảm chuyển động: đổi trạng thái tức thì, không trượt */
@media (prefers-reduced-motion: reduce) {
    html #stickyTop,
    html #bottomNav {
        transition: none !important;
    }
}
/* Tùy chọn "Giảm hiệu ứng" ở tab Cài đặt (js/settings-tab.js, class ac-reduce-motion
   trên <html>): cùng tác dụng như prefers-reduced-motion ở trên CỘNG THÊM tắt luôn 2
   lớp backdrop-filter (blur) duy nhất còn lại trong app — thanh tab đáy và thanh chọn
   nhiều mục. Blur là chi phí GPU cao nhất trong app nên đây là công tắc "nhẹ máy"
   chính cho người dùng tự bật. */
html.ac-reduce-motion #stickyTop,
html.ac-reduce-motion #bottomNav {
    transition: none !important;
}
html.ac-reduce-motion :is(#bottomNav, #selectionBar) {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* =========================================================================
   8. MENU CHUỘT PHẢI + MODAL
   ========================================================================= */
html #contextMenu {
    background-color: var(--ac-menu) !important;
    border-color: transparent !important;
    border-radius: var(--ac-r-menu) !important;
    box-shadow: var(--ac-shadow-menu) !important;
    padding: 0.35rem !important;
    -webkit-backdrop-filter: var(--ac-blur);
    backdrop-filter: var(--ac-blur);
}
html #contextMenu button {
    border-radius: 10px !important;
    transition: background-color 0.12s ease, color 0.12s ease !important;
}
html #contextMenu button:hover {
    background-color: var(--ac-fill-2) !important;
    color: var(--ac-label) !important;
}
/* Mục "Xóa" trong menu: dùng bản đỏ đậm (--ac-red-fill) để chữ đủ tương phản trên
   nền menu sáng, thay vì systemRed #FF3B30 (chỉ đạt ~3.5). */
html #contextMenu button#cm-delete { color: var(--ac-red-fill) !important; }
html #contextMenu button#cm-delete:hover {
    background-color: rgba(255, 59, 48, 0.14) !important;
    color: var(--ac-red-fill) !important;
}
html #contextMenu #cm-divider { background-color: var(--ac-separator) !important; }

/* Nền mờ của modal: iOS chỉ LÀM TỐI nền chứ không blur → bỏ backdrop-blur của
   Tailwind (mỗi lớp blur toàn màn hình là một layer GPU phải vẽ lại). */
html :is(
    #uploadModal,
    #shareModal,
    #renameFolderModal,
    #shareFileModal,
    #pushConsentModal,
    #planModal,
    #bmcModal
) {
    background-color: rgba(0, 0, 0, 0.4) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
html.dark :is(
    #uploadModal,
    #shareModal,
    #renameFolderModal,
    #shareFileModal,
    #pushConsentModal,
    #planModal,
    #bmcModal
) {
    background-color: rgba(0, 0, 0, 0.6) !important;
}
/* Tấm modal: bo góc lớn kiểu sheet, không viền, bóng đổ sâu */
html :is(
    #uploadModal,
    #shareModal,
    #renameFolderModal,
    #shareFileModal,
    #pushConsentModal,
    #planModal,
    #bmcModal
) > div {
    /* Nền bán trong suốt + blur: thắng luật .bg-white ở mục 3a nhờ độ ưu tiên của id. */
    background-color: var(--ac-sheet) !important;
    -webkit-backdrop-filter: var(--ac-blur);
    backdrop-filter: var(--ac-blur);
    border-color: transparent !important;
    border-radius: var(--ac-r-sheet) !important;
    box-shadow: var(--ac-shadow-sheet) !important;
}

/* Modal xem ảnh/video: nền tối sâu, nút là viên xám mờ (không blur) */
html #previewModal {
    background-color: rgba(0, 0, 0, 0.92) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
html #previewModal :is(button, a) {
    border-color: transparent !important;
    border-radius: var(--ac-r-control) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
html #previewModal [class*="bg-white/"] { background-color: rgba(255, 255, 255, 0.16) !important; }
html #previewModal :is(.bg-gray-800, .bg-gray-900) { background-color: rgba(255, 255, 255, 0.14) !important; }
html #previewModal [class*="bg-black/"] { background-color: rgba(0, 0, 0, 0.5) !important; }
html #previewModal img, html #previewModal video, html #previewModal iframe { border-radius: var(--ac-r-card); }

/* =========================================================================
   9. HUY HIỆU GÓI + MÀN HÌNH ĐĂNG NHẬP / KÉO-THẢ
   ========================================================================= */
/* Huy hiệu gói Ultra cạnh logo (js/plan.js bật/tắt class hidden/flex — không đặt
   display ở đây). Màu hổ phách hệ thống, giữ nguyên tinh thần huy hiệu "cao cấp".
   Viền vẽ bằng box-shadow inset (không dùng border) để huy hiệu không rộng thêm 2px
   — hàng tiêu đề ở header đã sát mép màn hình trên tablet. */
html #ultraPlanBadge {
    color: #8a4b00;
    background-color: rgba(255, 159, 10, 0.18);
    box-shadow: inset 0 0 0 1px rgba(255, 159, 10, 0.28);
}
html.dark #ultraPlanBadge {
    color: #ffd60a;
    background-color: rgba(255, 159, 10, 0.22);
    box-shadow: inset 0 0 0 1px rgba(255, 159, 10, 0.32);
}
/* Hàng tiêu đề trên mobile dùng justify-between; có huy hiệu thì gom về sát logo
   thay vì đẩy ra hai đầu. */
html #stickyTop > header > div:first-child { justify-content: flex-start !important; }

/* Màn hình đăng nhập: nền pastel mềm, thẻ bo tròn lớn, mascot đám mây dễ thương */
html #loginScreen {
    background: linear-gradient(160deg, #e0f0ff 0%, #f3e8ff 55%, #ffe8f1 100%) !important;
    overflow: hidden;
}
html.dark #loginScreen {
    background: linear-gradient(160deg, #0f1b33 0%, #1d1538 55%, #2a1427 100%) !important;
}
html #loginScreen .login-blob {
    position: absolute; border-radius: 9999px; filter: blur(40px); opacity: .55;
    pointer-events: none; animation: login-float 9s ease-in-out infinite;
}
html #loginScreen .login-blob-1 { width: 240px; height: 240px; background: #8ec5ff; top: -60px; left: -60px; }
html #loginScreen .login-blob-2 { width: 220px; height: 220px; background: #ffb3d1; bottom: -50px; right: -40px; animation-delay: -3s; }
html #loginScreen .login-blob-3 { width: 160px; height: 160px; background: #c9a8ff; top: 55%; left: 62%; animation-delay: -6s; }
html.dark #loginScreen .login-blob { opacity: .28; }
@keyframes login-float {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-22px) scale(1.06); }
}
html #loginScreen .login-card {
    position: relative; width: min(92vw, 380px);
    border: 1px solid rgba(255, 255, 255, .7) !important;
    border-radius: 32px !important;
    background-color: rgba(255, 255, 255, .85) !important;
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    box-shadow: 0 24px 60px -16px rgba(99, 102, 241, .35) !important;
}
html.dark #loginScreen .login-card {
    background-color: rgba(30, 32, 48, .85) !important;
    border-color: rgba(255, 255, 255, .08) !important;
    box-shadow: 0 24px 60px -16px rgba(0, 0, 0, .6) !important;
}
html #loginScreen .login-mascot {
    position: relative; width: 96px; height: 80px; margin-top: 4px;
    display: flex; align-items: center; justify-content: center;
    animation: login-bob 3s ease-in-out infinite;
}
html #loginScreen .login-mascot > i {
    font-size: 96px; line-height: 1;
    background: linear-gradient(180deg, #7cc0ff, #5b8cff);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 8px 10px rgba(91, 140, 255, .35));
}
html #loginScreen .login-eye {
    position: absolute; top: 30px; width: 8px; height: 10px; border-radius: 9999px;
    background: #1f2a44; animation: login-blink 4s infinite;
}
html #loginScreen .login-eye-l { left: 31px; }
html #loginScreen .login-eye-r { right: 31px; }
html #loginScreen .login-cheek {
    position: absolute; top: 42px; width: 11px; height: 7px; border-radius: 9999px;
    background: #ff9db8; opacity: .85;
}
html #loginScreen .login-cheek-l { left: 21px; }
html #loginScreen .login-cheek-r { right: 21px; }
html #loginScreen .login-smile {
    position: absolute; top: 41px; left: 50%; width: 10px; height: 5px; margin-left: -5px;
    border-bottom: 2.5px solid #1f2a44; border-radius: 0 0 10px 10px;
}
@keyframes login-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes login-blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
html #loginScreen .login-title {
    background: linear-gradient(90deg, #4f8cff, #a770ff 60%, #ff7eb3);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    letter-spacing: -.02em;
}
html #loginScreen .login-google {
    box-shadow: 0 6px 18px -6px rgba(79, 140, 255, .45);
    transition: transform .15s ease, box-shadow .15s ease;
}
html #loginScreen .login-google:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -8px rgba(79, 140, 255, .55); }
html #loginScreen .login-google:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) {
    html #loginScreen .login-blob, html #loginScreen .login-mascot, html #loginScreen .login-eye { animation: none; }
}

/* Kéo-thả file: viền xanh hệ thống + thẻ trắng */
html .drag-drop-overlay {
    background-color: rgba(0, 122, 255, 0.1) !important;
    border-color: var(--ac-blue) !important;
    border-width: 3px !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
html .drag-drop-content {
    border-radius: var(--ac-r-sheet) !important;
    box-shadow: var(--ac-shadow-sheet) !important;
}

/* Trang xem file chia sẻ công khai (renderShareFileView — khách vãng lai): giao
   diện này áp dụng cho cả khách nên chỉ cần chỉnh nền trang cho khớp hệ thống. */
html .min-h-screen { background-color: var(--ac-bg) !important; }

/* =========================================================================
   10. THÍCH ỨNG THIẾT BỊ / TÙY CHỌN HỆ THỐNG
   ========================================================================= */
/* Máy nhỏ: giảm nhẹ bán kính cho gọn */
@media (max-width: 640px) {
    :root { --ac-r-card: 16px; --ac-r-sheet: 20px; }
    html #stickyTop > header { padding: 0.85rem !important; }
}

/* Trình duyệt không hỗ trợ backdrop-filter: dùng nền đặc để chữ vẫn đọc được */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html :is(#bottomNav, #selectionBar) { background-color: var(--ac-surface) !important; }
    html #contextMenu { background-color: var(--ac-surface) !important; }
    html :is(
        #uploadModal,
        #shareModal,
        #renameFolderModal,
        #shareFileModal,
        #pushConsentModal,
        #planModal,
        #bmcModal
    ) > div { background-color: var(--ac-surface) !important; }
}

/* "Giảm độ trong suốt": thanh cố định, menu chuột phải và tấm modal chuyển sang nền
   đặc, bỏ blur. Ba nguồn kích hoạt:
     - prefers-reduced-transparency: cài đặt "Reduce Transparency" của hệ điều hành;
     - class ac-reduce-transparency trên <html>: công tắc ở tab Cài đặt (js/bootstrap.js);
     - class ac-reduce-motion: "Giảm hiệu ứng" đã tắt blur, mà nền bán trong suốt
       không có blur thì chữ phía sau lộ qua — nên cũng phải về nền đặc.
   :root:root (độ ưu tiên 0,2,0) để thắng cả html.dark ở mục 1 bất kể thứ tự khai báo. */
@media (prefers-reduced-transparency: reduce) {
    :root:root {
        --ac-material: var(--ac-surface);
        --ac-menu: var(--ac-surface);
        --ac-sheet: var(--ac-surface);
    }
    html :is(
        #bottomNav,
        #selectionBar,
        #contextMenu,
        #uploadModal > div,
        #shareModal > div,
        #renameFolderModal > div,
        #shareFileModal > div,
        #pushConsentModal > div,
        #planModal > div,
        #bmcModal > div
    ) {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}
:root:root.ac-reduce-transparency,
:root:root.ac-reduce-motion {
    --ac-material: var(--ac-surface);
    --ac-menu: var(--ac-surface);
    --ac-sheet: var(--ac-surface);
}
html:is(.ac-reduce-transparency, .ac-reduce-motion) :is(
    #bottomNav,
    #selectionBar,
    #contextMenu,
    #uploadModal > div,
    #shareModal > div,
    #renameFolderModal > div,
    #shareFileModal > div,
    #pushConsentModal > div,
    #planModal > div,
    #bmcModal > div
) {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* Tùy chọn "Giảm hiệu ứng" ở tab Cài đặt: bỏ mọi transition còn lại, giống khối
   prefers-reduced-motion ngay dưới đây nhưng do người dùng tự bật. */
html.ac-reduce-motion :is(#contextMenu button, #fileList > li, button, a, label) {
    transition: none !important;
}

/* Giảm chuyển động: bỏ mọi transition còn lại */
@media (prefers-reduced-motion: reduce) {
    html :is(#contextMenu button, #fileList > li, button, a, label) {
        transition: none !important;
    }
}