:root { --primary: #1a237e; --bg: #f4f7f6; }
body { margin: 0; font-family: 'Segoe UI', sans-serif; background: var(--bg); direction: rtl; }

/* شاشة الإجبار السوداء */
#force-install-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #000; display: flex; justify-content: center; align-items: center; z-index: 99999;
}

.install-card {
    background: #1a237e; color: white; padding: 40px 20px;
    border-radius: 25px; text-align: center; width: 85%; max-width: 380px;
}

.app-icon {
    width: 80px; height: 80px; background: white; color: #1a237e;
    border-radius: 20px; display: flex; justify-content: center; align-items: center;
    margin: 0 auto 20px; font-weight: bold; font-size: 2rem;
}

.btn-main {
    background: white; color: #1a237e; border: none; padding: 16px;
    border-radius: 12px; font-size: 1.2rem; width: 100%; font-weight: bold;
    cursor: pointer; transition: 0.3s;
}

header { background: var(--primary); color: white; padding: 20px; text-align: center; }
.container { padding: 15px; }
.search-bar { width: 100%; padding: 15px; border-radius: 12px; border: 1px solid #ddd; box-sizing: border-box; }
.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.card { background: white; padding: 25px; border: none; border-radius: 15px; font-weight: bold; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
.m-metro { border-bottom: 5px solid #d32f2f; }
.m-tram { border-bottom: 5px solid #2e7d32; }