:root {
            --font-scale: 1;
            --primary: #0056b3;
        }
        @font-face {
            font-family: 'Jameel Noori Nastaleeq';
            src: url('https://usamasarsari.com/fonts/Jameel-Noori-Nastaleeq-Regular.ttf') format('truetype');
        }
        @font-face {
            font-family: 'Mehr Nastaliq';
            src: url('https://usamasarsari.com/fonts/Mehr-Nastaliq.ttf') format('truetype');
        }
        body { font-family: 'Jameel Noori Nastaleeq', Arial, sans-serif; background: #f4f4f9; margin: 0; padding: 0; padding-bottom: 220px; text-align: center; display: flex; flex-direction: column; min-height: 100vh; transition: background 0.3s, color 0.3s; overflow-x: hidden; }
        .fixed-header { position: fixed; top: 0; left: 0; width: 100%; background: var(--primary); color: white; z-index: 5000; padding: 10px 15px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); box-sizing: border-box; transition: background 0.3s, border-color 0.3s; display: flex; align-items: center; justify-content: center; height: 60px; }
        .menu-icon { position: absolute; left: 15px; font-size: calc(22px * var(--font-scale)); cursor: pointer; color: white; transition: color 0.3s; }
        .menu-icon:hover { color: #d1d5db; }
        h1 { margin: 0; font-size: calc(26px * var(--font-scale)); color: white; transition: color 0.3s; }
        .font-controls { position: absolute; right: 15px; display: flex; gap: 12px; color: white; font-size: calc(18px * var(--font-scale)); }
        .font-controls i { cursor: pointer; transition: 0.2s; }
        .font-controls i:hover { transform: scale(1.1); color: #d1d5db; }
        .container { flex: 1; max-width: 900px; margin: 70px auto 0 auto; background: #fff; padding: 15px 15px 20px 15px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); width: 100%; box-sizing: border-box; position: relative; transition: background 0.3s; }
        .subtitle { font-size: calc(14px * var(--font-scale)); color: #555; margin-top: 0; margin-bottom: 15px; transition: color 0.3s; text-align: center; font-weight: bold; }
        .btn { padding: 8px 16px; background: var(--primary); color: white; border: none; border-radius: 4px; cursor: pointer; font-family: inherit; font-size: calc(16px * var(--font-scale)); transition: 0.2s; }
        .btn:hover { filter: brightness(85%); }
        .error { color: red; margin-top: 10px; font-size: calc(16px * var(--font-scale)); }
        .admin-panel { margin-bottom: 20px; padding: 15px; background: #e9ecef; border-radius: 8px; display: none; transition: background 0.3s; }
        input[type="text"], input[type="email"] { padding: 8px; width: 100%; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px; font-family: 'Jameel Noori Nastaleeq', Arial; font-size: calc(16px * var(--font-scale)); background: #fff; color: #333; transition: background 0.3s, color 0.3s; }
        input[type="email"] { width: 80%; max-width: 250px; font-family: Arial, sans-serif; }
        .loader-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #ffffff; z-index: 9999; display: flex; justify-content: center; align-items: center; transition: opacity 0.5s; }
        .loader-img { width: 300px; max-width: 80vw; height: auto; object-fit: contain; }
        .toast { position: fixed; bottom: 120px; left: 50%; transform: translateX(-50%); background: #333; color: #fff; padding: 8px 16px; border-radius: 5px; z-index: 8000; display: none; font-size: calc(16px * var(--font-scale)); opacity: 0; transition: opacity 0.3s; font-family: 'Jameel Noori Nastaleeq', Arial; }
        .side-menu { position: fixed; top: 0; left: -260px; width: 250px; height: 100%; background: #fff; box-shadow: 2px 0 10px rgba(0,0,0,0.2); transition: left 0.3s; z-index: 6001; padding-top: 50px; text-align: right; overflow-y: auto; display: flex; flex-direction: column; }
        .side-menu.open { left: 0; }
        .side-menu a, .side-menu-item { display: block; padding: 12px 20px; font-size: calc(18px * var(--font-scale)); color: #333; text-decoration: none; border-bottom: 1px solid #eee; transition: background 0.2s, color 0.3s; }
        .side-menu a:hover { background: #f4f4f4; }
        .side-menu i { width: 25px; text-align: center; margin-left: 8px; color: var(--primary); }
        .color-picker-container { display: flex; align-items: center; justify-content: space-between; }
        .color-picker-input { width: 30px; height: 30px; padding: 0; border: none; cursor: pointer; background: transparent; }
        .close-menu { position: absolute; top: 10px; right: 15px; font-size: calc(26px * var(--font-scale)); cursor: pointer; color: #888; }
        .menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 6000; display: none; }
        .menu-overlay.open { display: block; }
        .search-container { margin: 10px 0; display: flex; justify-content: center; align-items: center; }
        .search-wrapper { position: relative; width: 100%; max-width: 400px; }
        #searchInput { padding-left: 30px; }
        .clear-btn { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); cursor: pointer; font-size: calc(18px * var(--font-scale)); color: #888; user-select: none; }
        .section-tabs { display: flex; justify-content: center; border-bottom: 2px solid #ddd; margin-bottom: 15px; flex-wrap: wrap; }
        .tab-btn { padding: 8px 15px; background: transparent; border: none; border-bottom: 3px solid transparent; cursor: pointer; font-family: 'Jameel Noori Nastaleeq', Arial; font-size: calc(16px * var(--font-scale)); color: #555; transition: 0.3s; margin-bottom: -2px; }
        .tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: bold; background: #f8f9fa; border-radius: 4px 4px 0 0; }
        .filter-section { display: none; flex-direction: column; gap: 8px; margin-bottom: 15px; }
        .filter-section.active { display: flex; }
        .chips-scroll { display: flex; overflow-x: auto; white-space: nowrap; padding-bottom: 8px; gap: 8px; scrollbar-width: thin; align-items: center; justify-content: flex-start; -webkit-overflow-scrolling: touch; }
        .chips-scroll::-webkit-scrollbar { height: 4px; }
        .chips-scroll::-webkit-scrollbar-thumb { background: #ccc; border-radius: 2px; }
        .chip { padding: 6px 14px; border: 1px solid var(--primary); border-radius: 20px; background: #fff; color: var(--primary); cursor: pointer; font-family: 'Jameel Noori Nastaleeq', Arial; font-size: calc(15px * var(--font-scale)); transition: all 0.2s; flex-shrink: 0; }
        .chip.active { background: var(--primary); color: #fff; border-color: transparent; box-shadow: 0 2px 5px rgba(0,0,0,0.3); }
        #subcategory-chips .chip { padding: 4px 12px; border: 1px solid #888; font-size: calc(14px * var(--font-scale)); color: #666; }
        #subcategory-chips .chip.active { background: #888; color: #fff; border-color: #888; }
        .chip.admin-btn { background: #28a745; border-color: #28a745; color: white; }
        .nisab-admin-tools { background: #e9ecef; padding: 10px; border-radius: 6px; margin-top: 5px; display: none; flex-direction: column; gap: 10px; align-items: center; }
        .whatsapp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px; background: #25D366; color: white; text-decoration: none; border-radius: 4px; font-size: calc(16px * var(--font-scale)); font-weight: bold; font-family: Arial, sans-serif; direction: ltr; transition: 0.3s; }
        .product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px 10px; margin-top: 15px; }
        @media (min-width: 768px) { .product-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } }
        .product-wrapper { display: flex; justify-content: center; align-items: stretch; padding: 0; opacity: 0; transform: translateY(15px); animation: fadeIn 0.4s ease forwards; transition: opacity 0.2s; }
        .product-wrapper.draggable { cursor: grab; }
        .product-wrapper.draggable:active { cursor: grabbing; }
        @keyframes fadeIn { to { opacity: 1; transform: translateY(0); } }
        .product-card { background: color-mix(in srgb, var(--primary) 5%, white); border: 1px solid #eaeaea; padding: 25px 10px 15px 10px; border-radius: 10px; position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items: center; width: 100%; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; margin-bottom: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.05); min-height: 180px; }
        .product-card:hover { transform: translateY(-3px); box-shadow: 0 6px 15px rgba(0,0,0,0.1); border-color: var(--primary); }
        .format-badge { position: absolute; top: 6px; left: 6px; font-size: calc(13px * var(--font-scale)); color: var(--primary); background: #f4f4f9; padding: 4px 6px; border-radius: 4px; border: 1px solid #d1d5db; z-index: 10; display: flex; align-items: center; gap: 4px; font-family: Arial, sans-serif; }
        .fav-btn { position: absolute; top: 6px; right: 8px; font-size: calc(18px * var(--font-scale)); color: #ccc; cursor: pointer; transition: color 0.3s, transform 0.2s; z-index: 10; }
        .fav-btn:hover { transform: scale(1.1); }
        .fav-btn.active { color: #e74c3c; }
        .product-icon { font-size: calc(40px * var(--font-scale)); margin-bottom: 8px; transition: transform 0.3s; margin-top: 10px; }
        .product-card:hover .product-icon { transform: scale(1.05); }
        .product-title { font-size: calc(16px * var(--font-scale)); font-weight: bold; color: #222; line-height: 1.3; margin-bottom: 8px; transition: color 0.3s; text-align: center; }
        .admin-tools-bar { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(0,0,0,0.1); width: 100%; z-index: 15; }
        .admin-tools-bar button { flex: 1; min-width: 30px; background: #f4f4f9; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; padding: 6px 4px; font-size: calc(14px * var(--font-scale)); display: flex; align-items: center; justify-content: center; }
        .admin-tools-bar button:hover { background: #e0e0e0; }
        .skeleton-card { background: #fff; border-color: #eee; }
        .skeleton-icon { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%); background-size: 200% 100%; animation: skeletonLoad 1.5s infinite; margin-bottom: 10px; margin-top: 10px; }
        .skeleton-title { width: 80%; height: 16px; border-radius: 4px; background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%); background-size: 200% 100%; animation: skeletonLoad 1.5s infinite; margin-bottom: 8px; }
        @keyframes skeletonLoad { to { background-position: -200% 0; } }
        .empty-state { font-size: calc(18px * var(--font-scale)); color: #777; margin: 30px 0; grid-column: 1 / -1; }
        .load-more-btn { background: #6c757d; color: white; padding: 8px 20px; border-radius: 20px; margin-top: 15px; cursor: pointer; border: none; font-family: inherit; font-size: calc(16px * var(--font-scale)); transition: 0.2s; }
        .modal { display: none; position: fixed; z-index: 7000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); }
        .modal-content { background-color: #fff; margin: 15% auto; padding: 20px; border-radius: 6px; width: 90%; max-width: 280px; position: relative; text-align: center; box-shadow: 0 5px 15px rgba(0,0,0,0.3); transition: background 0.3s; max-height: 80vh; overflow-y: auto; }
        .close-modal { position: absolute; left: 10px; top: 5px; color: #888; font-size: calc(26px * var(--font-scale)); font-weight: bold; cursor: pointer; }
        .modal-title { font-size: calc(20px * var(--font-scale)); font-weight: bold; color: var(--primary); margin-top: 10px; transition: color 0.3s; }
        .modal-desc { font-size: calc(15px * var(--font-scale)); color: #555; margin: 10px 0; line-height: 1.5; transition: color 0.3s; }
        .download-btn { display: inline-block; padding: 8px 20px; background: #28a745; color: #fff; text-decoration: none; border-radius: 4px; font-size: calc(16px * var(--font-scale)); border: none; font-family: inherit; cursor: pointer; }
        footer { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 900; padding: 10px 15px; text-align: center; border-top: 1px solid #ddd; background: #fff; box-shadow: 0 -2px 8px rgba(0,0,0,0.05); transition: background 0.3s, border-color 0.3s; box-sizing: border-box; }
        footer p { font-size: calc(15px * var(--font-scale)); }
        footer a { font-size: calc(18px * var(--font-scale)); }
        .offer-timer-container { display: inline-flex; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 6px; background: #fff; border: 1px solid #e0e0e0; border-radius: 6px; padding: 4px 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); margin-top: 8px; font-family: 'Mehr Nastaliq', Arial, sans-serif; }
        .offer-title { color: #d32f2f; font-size: calc(15px * var(--font-scale)); border-left: 1px solid #ddd; padding-left: 6px; white-space: nowrap; }
        .timer-blocks { display: flex; gap: 3px; align-items: center; }
        .timer-blocks span { background: #f4f4f9; border: 1px solid #d1d5db; padding: 2px 4px; border-radius: 4px; color: var(--primary); font-size: calc(14px * var(--font-scale)); white-space: nowrap; }
        .reader-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff; z-index: 4000; display: none; flex-direction: row; font-family: 'Jameel Noori Nastaleeq', Arial; padding-top: 60px; box-sizing: border-box; }
        .reader-sidebar { width: 300px; background: #f4f4f9; border-left: 1px solid #ddd; overflow-y: auto; display: flex; flex-direction: column; height: 100%; }
        .reader-sidebar-header { padding: 15px; background: var(--primary); color: white; display: flex; justify-content: space-between; align-items: center; }
        .reader-toc { list-style: none; padding: 0; margin: 0; text-align: right; }
        .reader-toc li { padding: 12px 15px; border-bottom: 1px solid #e0e0e0; cursor: pointer; transition: 0.2s; font-size: calc(18px * var(--font-scale)); }
        .reader-toc li:hover { background: #e9ecef; }
        .reader-toc li.active { background: #cce5ff; color: var(--primary); font-weight: bold; border-right: 4px solid var(--primary); }
        .reader-main { flex: 1; padding: 30px; overflow-y: auto; background: #fff; text-align: right; position: relative; height: 100%; box-sizing: border-box; }
        .reader-progress-container { width: 100%; height: 5px; background: #e0e0e0; position: sticky; top: 0; z-index: 100; left: 0; right: 0; }
        .reader-progress-bar { height: 100%; background: #28a745; width: 0%; transition: width 0.3s ease; }
        .reader-content { max-width: 800px; margin: 20px auto; line-height: 2.2; font-size: calc(22px * var(--font-scale)); }
        .reader-title { font-size: calc(32px * var(--font-scale)); color: #333; margin-bottom: 20px; border-bottom: 2px solid var(--primary); padding-bottom: 10px; }
        .close-reader { font-size: calc(24px * var(--font-scale)); cursor: pointer; color: white; }
        .reader-mobile-toggle { display: none; background: var(--primary); color: white; border: none; padding: 10px; font-family: inherit; cursor: pointer; font-size: calc(16px * var(--font-scale)); border-radius: 4px; margin-bottom: 15px; width: 100%; }
        @media (max-width: 768px) {
            .reader-overlay { flex-direction: column; }
            .reader-sidebar { width: 100%; max-height: 40%; border-left: none; border-bottom: 1px solid #ddd; display: none; }
            .reader-mobile-toggle { display: block; }
            .reader-main { padding: 15px; }
        }
        body.dark-mode { background: #121212; color: #e0e0e0; }
        body.dark-mode .fixed-header { background: #121212; border-bottom: 1px solid var(--primary); }
        body.dark-mode .font-controls, body.dark-mode .menu-icon, body.dark-mode h1 { color: #fff; }
        body.dark-mode .container, body.dark-mode footer, body.dark-mode .modal-content, body.dark-mode .side-menu { background: #1e1e1e; color: #e0e0e0; border-color: #333; }
        body.dark-mode .product-title, body.dark-mode .side-menu a, body.dark-mode .side-menu-item { color: #fff; }
        body.dark-mode .subtitle, body.dark-mode .product-author, body.dark-mode .modal-desc, body.dark-mode footer p { color: #aaa; }
        body.dark-mode .product-card { background: color-mix(in srgb, var(--primary) 10%, #252525); border-color: #333; }
        body.dark-mode input[type="text"], body.dark-mode input[type="email"], body.dark-mode select { background: #2c2c2c; color: #fff; border-color: #444; }
        body.dark-mode .admin-panel, body.dark-mode .nisab-admin-tools { background: #2a2a2a; }
        body.dark-mode .side-menu a, body.dark-mode .side-menu-item { border-bottom-color: #333; }
        body.dark-mode .side-menu a:hover { background: #2a2a2a; }
        body.dark-mode .section-tabs { border-bottom-color: #444; }
        body.dark-mode .tab-btn { color: #aaa; }
        body.dark-mode .tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); background: #2a2a2a; }
        body.dark-mode .chip { background: #222; border-color: var(--primary); color: var(--primary); }
        body.dark-mode .chip.active { background: var(--primary); color: #fff; }
        body.dark-mode .admin-tools-bar button { background: #444; color: #fff; border-color: #555; }
        body.dark-mode .admin-tools-bar button:hover { background: #555; }
        body.dark-mode .skeleton-icon, body.dark-mode .skeleton-title { background: linear-gradient(90deg, #333 25%, #444 50%, #333 75%); background-size: 200% 100%; }
        body.dark-mode .format-badge { background: #333; color: var(--primary); border-color: #555; }
        body.dark-mode .offer-timer-container { background: #252525; border-color: #333; }
        body.dark-mode .offer-title { color: #ff6b6b; border-left-color: #444; }
        body.dark-mode .timer-blocks span { background: #333; border-color: #555; color: var(--primary); }
        body.dark-mode .reader-overlay, body.dark-mode .reader-main { background: #121212; color: #e0e0e0; }
        body.dark-mode .reader-sidebar { background: #1e1e1e; border-color: #333; }
        body.dark-mode .reader-toc li { border-color: #333; color: #ddd; }
        body.dark-mode .reader-toc li:hover { background: #2a2a2a; }
        body.dark-mode .reader-toc li.active { background: #222; color: var(--primary); border-right-color: var(--primary); }
        body.dark-mode .reader-title { color: #fff; border-color: var(--primary); }
        body.dark-mode .reader-progress-container { background: #333; }
        body.dark-mode .loader-overlay { background: #121212; }
        #login-section, #unauthorized-section, #main-content-section { display: none; }