.badge.orange background: #fff0e0; color: #c26e2e;
.footer-note text-align: center; margin-top: 2rem; font-size: 0.8rem; color: #6a8e9c; border-top: 1px solid #dde6eb; padding-top: 1.5rem;
.card-header padding: 1.2rem 1.2rem 0.5rem 1.2rem; display: flex; align-items: center; gap: 0.8rem; appsafe club
.app-card:hover transform: translateY(-5px); box-shadow: 0 20px 25px -12px rgba(0,0,0,0.15);
let currentFilterCategory = "all"; let currentSearchTerm = ""; let currentSafetyThreshold = 0; .badge.orange background: #fff0e0
/* apps grid */ .apps-grid display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.8rem; margin-bottom: 2rem;
.nav-links display: flex; gap: 1.8rem; margin-top: 0.5rem; .footer-note text-align: center
<!-- Modal --> <div id="appModal" class="modal"> <div class="modal-content"> <span class="close-modal">×</span> <h3 id="modalAppName">App Name</h3> <div id="modalCategory" style="font-size:0.8rem; color:#608b9b;"></div> <ul class="detail-list" id="modalDetails"> <li><strong>Safety Score:</strong> <span id="modalScore"></span></li> <li><strong>Permissions used:</strong> <span id="modalPermissions"></span></li> <li><strong>Trackers blocked:</strong> <span id="modalTrackers"></span></li> <li><strong>Privacy policy:</strong> <span id="modalPrivacy"></span></li> <li><strong>Community notes:</strong> <span id="modalNotes"></span></li> </ul> <button id="trustBtn" style="background:#1e6f5c; color:white; border:none; padding:8px 16px; border-radius:40px; cursor:pointer;">✔️ Mark as Trusted by me</button> <small style="display:block; margin-top:12px;">🔐 AppSafe club review — data updated weekly</small> </div> </div>
.card-body padding: 0.2rem 1.2rem 1rem 1.2rem;